/* 这是从原 worker.js 中提取的全部 CSS 样式。
  为了保持页面外观不变，这里未做任何修改。
*/
:root{
  --bg-top-height:33vh; /* cover height */
  --bg-overlap:40px;    /* container overlaps cover by this much */
  --glass-blur:14px;
  --transition:0.5s;
}
html,body{height:100%;margin:0;padding:0;background:transparent;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;color:#222;overflow-x:hidden;}
body.dark{color:#eaeaea;}

/* 背景层：主 cover（1/3） 和 负一屏全屏（blur） */
.bg-top, .bg-negative {
  position:fixed; left:0; right:0; background-image:url("https://picsum.photos/1920/1080"); background-position:center; background-repeat:no-repeat; background-size:cover; transition: opacity var(--transition) ease, transform var(--transition) ease; z-index:-5;
  will-change: opacity, transform;
}
.bg-top{ top:0; height:var(--bg-top-height); z-index:-5; }
.bg-negative{ top:0; height:100vh; z-index:-2; filter: blur(var(--glass-blur)) brightness(1.02); transform: scale(1.03); opacity:0; pointer-events:none; }
body.negative-screen-active .bg-negative{ opacity:1; pointer-events:auto; }
body.negative-screen-active .bg-top{ opacity:0.36; }

/* page-bg：覆盖滚动区域，避免暗黑模式下露出"白边" */
.page-bg{
  position:fixed; left:0; right:0;
  top: calc(var(--bg-top-height) - var(--bg-overlap) + 14px); /* 下移14px显示圆角 */
  bottom:0; z-index:-3;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.98));
  transition: background var(--transition);
}
body.dark .page-bg{
  background: linear-gradient(180deg, rgba(10,10,10,0.96), rgba(10,10,10,0.98));
}

/* 顶部按钮（固定） */
.top-buttons{ position:fixed; top:12px; right:12px; z-index:60; display:flex; gap:10px; }
.top-buttons button{ background: rgba(255,255,255,0.14); border:none; color:inherit; padding:8px 10px; border-radius:10px; cursor:pointer; backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
body.dark .top-buttons button{ background: rgba(18,18,18,0.34); }

/* 主容器（与背景覆盖相交，圆角被遮住）*/
.main-wrapper{ position:relative; z-index:10; transition: transform .45s cubic-bezier(.22,.9,.35,1); }
body.negative-screen-active .main-wrapper{ transform: translateY(100vh); }

.container{
  margin-top: calc(var(--bg-top-height) - var(--bg-overlap));
  padding:20px;
  border-radius:14px 14px 0 0;
  min-height: calc(100vh - var(--bg-top-height) + var(--bg-overlap));
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.46));
  box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}
body.dark .container{ background: linear-gradient(180deg, rgba(18,18,18,0.55), rgba(18,18,18,0.46)); }

/* 个人信息区：桌面端居中显示 */
.profile-header{ display:flex; flex-direction:row; align-items:center; gap:16px; justify-content:flex-start; }
.avatar{ width:96px; height:96px; border-radius:50%; object-fit:cover; border:3px solid rgba(255,255,255,0.6); }
.info h1{ margin:0; font-size:1.6rem; display:inline-block; vertical-align:middle; }
.info .id{ margin-left:10px; font-size:0.9rem; padding:2px 6px; background:#ffc107; border-radius:6px; display:inline-block; vertical-align:middle; }

/* 在较大屏幕（桌面）上将个人信息居中 */
@media(min-width:900px){
  .profile-header{ flex-direction: column; align-items:center; text-align:center; }
  .profile-header .avatar{ margin-bottom:8px; }
  .info h1{ font-size:1.8rem; }
  .info p{ margin:6px 0; }
}

.contacts a{ margin-right:10px; font-size:1.4em; color:inherit; text-decoration:none; display:inline-block; }
.contacts a:hover{ opacity:0.9; }

.signature{ margin:12px 0; text-align:center; font-style:italic; color:rgba(0,0,0,0.7); }
body.dark .signature{ color: rgba(255,255,255,0.78); }

/* site items：hover 展开 label（桌面），触摸设备 tap-first-show */
.site-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap:15px; margin-top:20px; }
.site-item{ position:relative; aspect-ratio: 1 / 1; border-radius:15px; display:flex; flex-direction:column; align-items:center; justify-content:center; background: rgba(255,255,255,0.8); cursor:pointer; transition: all .3s; text-decoration:none; color:inherit; }
body.dark .site-item{ background: rgba(44,44,46,0.8); }
.site-item:hover{ transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.site-item i{ font-size:2em; margin-bottom:5px; }
.site-item .label{ font-size:0.8rem; font-weight:500; opacity: 0.8; text-align:center; }
/* 移动端 label 优化 */
.site-item.show-label { transform: scale(1.05); }

.image-gallery{ display:flex; gap:8px; margin:12px 0; }
.image-gallery img{ flex:1; border-radius:8px; object-fit:cover; height:120px; }

.fun-zone{ margin-top:20px; text-align:center; }
.fun-zone canvas{ margin-top:12px; border-radius:8px; max-width:100%; display:block; margin-left:auto; margin-right:auto; }

/* 页脚 */
.footer{
  margin-top:18px;
  text-align:center;
  font-size:0.9rem;
  color:#666;
  transition: color 0.3s ease;
}
body.dark .footer{
  color: rgba(255,255,255,0.7);
}

.footer a{
  color: inherit;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  margin: 0 8px;
  padding: 4px 8px;
  border-radius: 6px;
}

.footer a:hover{
  color: #007bff;
  background: rgba(0,123,255,0.1);
  transform: translateY(-1px);
}
body.dark .footer a:hover{
  color: #4dabf7;
  background: rgba(77,171,247,0.15);
}

.footer br{
  margin-bottom: 8px;
  display: block;
  content: '';
}

/* 负一屏居中面板（iCloud 风格） */
#negative-screen{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:50; pointer-events:none; opacity:0; transition: opacity var(--transition) ease; pointer-events: none;}
#negative-screen .panel{ width:100%; max-width:760px; padding:20px; border-radius:14px; background: rgba(255,255,255,0.12); backdrop-filter: blur(18px); box-shadow: 0 20px 60px rgba(0,0,0,0.12); pointer-events:auto; }
body.dark #negative-screen .panel{ background: rgba(20,20,20,0.14); }
body.negative-screen-active #negative-screen{ opacity:1; pointer-events:auto; }

#clock{ font-size:3.2rem; font-weight:700; text-align:center; margin-bottom:12px; color:#fff; text-shadow: 0 4px 14px rgba(0,0,0,0.28); }
.search-container{ display:flex; align-items:center; gap:8px; max-width:640px; margin:0 auto; background: rgba(255,255,255,0.92); padding:8px; border-radius:10px; }
body.dark .search-container{ background: rgba(30,30,30,0.9); color:inherit; }
#search-input{ flex:1; border:none; background:transparent; padding:8px; font-size:1rem; outline:none; color:inherit; }
#search-button{ border:none; background:#007bff; color:#fff; padding:8px 12px; border-radius:8px; cursor:pointer; }

/* loading mask */
#loading-mask{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#fff; z-index:9999; font-size:1.2rem; transition: opacity .6s; }
body.dark #loading-mask{ background:#111; color:#eee; }
#loading-mask.hide{ opacity:0; pointer-events:none; }

/* accessibility focus */
.site-item:focus, .top-buttons button:focus, #search-input:focus{ outline:3px solid rgba(0,123,255,0.14); }

/* 小恐龙游戏移动端适配 */
@media (max-width:640px){
  .image-gallery img{ height:90px; }
  .avatar{ width:76px; height:76px; }
  :root{ --bg-top-height:32vh; --bg-overlap:36px; }
  #dino-game{ width:100% !important; height:120px !important; }
}

/* 拦截器样式 */
#browser-interceptor {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #fff;
  text-align: center;
  backdrop-filter: blur(8px);
}
#browser-interceptor-content {
  font-size: 1.2rem;
  font-weight: 500;
}
#browser-interceptor-content p {
  margin: 10px 0;
}
#browser-interceptor-content::before {
  content: '↗';
  display: block;
  font-size: 3rem;
  color: #fff;
  position: absolute;
  top: 20px;
  right: 20px;
  transform: rotate(45deg);
  animation: interceptor-arrow 1.5s infinite ease-in-out;
}
@keyframes interceptor-arrow {
  0%, 100% { transform: translate(0, 0) rotate(45deg); opacity: 0.8; }
  50% { transform: translate(5px, -5px) rotate(45deg); opacity: 1; }
}