/* =========================================================
   intro.css — 开场层（背景代码雨 / 开机终端 / 立方体转场）
   同时把整站强调色统一到字符画的主色调 #5A838F
   ========================================================= */

/* ---------- 整站强调色：从薄荷绿改为 #5A838F 系 ---------- */
:root{
  --teal:   #5A838F;   /* 主色 */
  --teal-2: #7BA7B4;   /* 亮 */
  --teal-3: #33505A;   /* 暗 */
  --mint:   #A8C3CB;   /* 浅正文 */
  --line-2: #1E333B;
  --line:   #152529;
}
/* 背景网格也跟着换色 */
body::before{
  background-image:
    linear-gradient(rgba(90,131,143,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,131,143,.03) 1px, transparent 1px) !important;
}
/* 开场期间锁滚动 */
body.intro-lock{ overflow:hidden; }

/* 双保险：hidden 一定不显示（style.css 里也有一条 !important） */
[hidden]{ display:none !important; }

/* ---------- 背景代码雨 ----------
   开场时它在 .intro 内部（黑底之上、卡片之下）；
   开场结束后被 JS 移回 body，变成整页背景（低透明度）。 */
#rain{
  position:fixed; inset:0; z-index:0; display:block;
  width:100%; height:100%; pointer-events:none;
  opacity:.22; transition:opacity .5s ease;
}
.intro #rain{ position:absolute; z-index:1; opacity:1; transition:none; }
body.rain-dim #rain{ opacity:.22; }

/* ---------- 开场遮罩：纯黑底 ---------- */
.intro{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  padding:22px;
  background:#000;                 /* 加载动画时就是黑屏，只有代码和正方体 */
  transition:opacity .6s ease, visibility .6s;
}
.intro.is-out{ opacity:0; visibility:hidden; pointer-events:none; }
.intro__ui{ position:relative; z-index:2; }

/* 加载期间整页纯黑，站点网格底纹关掉 */
body.intro-lock{ overflow:hidden; background:#000; }
body.intro-lock::before{ display:none !important; }

/* 代码崩解：卡片里的每个字符（js/intro.js 动态包成 span）
   注意不要加 will-change / backface-visibility —— 卡片里有几百个字符，
   那会一次性提升几百个合成层，反而拖慢。transform 动画自己会提升。 */
.dis-ch{
  display:inline-block;
  white-space:pre;
}

/* 开机终端卡片（半透明，能看到背后掠过的正方体） */
.boot-card{
  width:min(760px,100%); border:1px solid var(--line-2);
  background:rgba(7,13,17,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  box-shadow:0 0 0 1px rgba(90,131,143,.10), 0 40px 90px -40px #000;
}
.boot-top{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:9px 14px; border-bottom:1px solid var(--line);
  font-size:11px; letter-spacing:.2em; color:var(--teal-2); text-transform:uppercase;
}
.boot-body{ padding:18px 20px 16px; }
.boot-kicker{ font-size:11px; letter-spacing:.2em; color:#3A5258; }
.boot-title{ margin:6px 0 14px; font-size:clamp(20px,3.2vw,32px); letter-spacing:.06em;
  color:#DCEAEE; font-weight:700; }
.intro .caret{ display:inline-block; width:.6em; background:var(--teal); animation:ibl 1s steps(2,end) infinite; }
@keyframes ibl{ 0%,50%{opacity:1} 51%,100%{opacity:0} }
.boot-term{
  margin:0 0 14px; padding:0; min-height:9em; max-height:14em; overflow:hidden;
  font-size:12.5px; line-height:1.7; color:#9FBCC4; white-space:pre-wrap; word-break:break-all;
}
.boot-term .k{ color:var(--teal-2); }
.boot-term .d{ color:#456068; }
.boot-prog{ display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.16em; color:#456068; }
.boot-track{ flex:1; height:2px; background:var(--line-2); position:relative; }
.boot-track > i{ position:absolute; inset:0 auto 0 0; width:0;
  background:linear-gradient(90deg,var(--teal-3),var(--teal-2)); }
.boot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:11px 14px; border-top:1px solid var(--line); }
.enter-btn{
  appearance:none; cursor:pointer; background:linear-gradient(180deg,#24424C,#16292F);
  color:#DCEAEE; border:1px solid var(--teal); padding:10px 22px;
  font:inherit; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.enter-btn:hover:not(:disabled){ background:linear-gradient(180deg,#2E535F,#1B343B); }
.enter-btn:disabled{ opacity:.4; cursor:not-allowed; }
.skip-btn{ background:none; border:0; color:#456068; font:inherit; font-size:11.5px;
  letter-spacing:.16em; cursor:pointer; }
.skip-btn:hover{ color:var(--teal-2); }
.intro-foot{ text-align:center; color:#3A5258; font-size:10.5px; letter-spacing:.24em; margin-top:12px; }

/* 立方体现在由 #rain 画布在代码雨里掠过，不再单独一屏 */

/* ---------- 首页 CTA ---------- */
.cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.cta-row a{
  text-decoration:none; font-size:12px; letter-spacing:.14em; padding:10px 16px;
  border:1px solid var(--line-2); color:#C6D8DD;
  clip-path:polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.cta-row a:hover{ color:var(--teal-2); border-color:var(--teal); }
.cta-row a.primary{ background:linear-gradient(180deg,#24424C,#16292F); color:#E4F1F4; border-color:var(--teal); }

/* 整页 3D 转向（JS 写 transform；这里只给过渡与合成层提示） */
.page{
  transform-style:preserve-3d;
  will-change:transform;
  backface-visibility:hidden;
}

/* 代码框：上半是代码，下半嵌播放器
   只改带 --player 的那个，管理员面板里的 .codebox--sm 不受影响 */
.codebox--player{ padding:0; overflow:hidden; }
.codebox__code{
  margin:0; padding:12px 14px; overflow:auto;
  color:var(--ink-dim); font-size:11.5px; line-height:1.75;
}
.codebox__player{ border-top:1px solid var(--line); }
.player__hint{ padding:0 10px 8px; font-size:9px; letter-spacing:.1em; color:#3A5258;
  text-transform:uppercase; }
.player__hint b{ color:var(--teal-2); font-weight:400; }

/* =========================================================
   音乐播放器（同风格：等宽字 + #5A838F 系 + 切角 + 细边）
   —— 挂到 body 时是右下角浮层；挂进 #playerSlot 时是 .player--inline
   ========================================================= */
.player{
  position:fixed; right:18px; bottom:18px; z-index:105;
  width:min(320px, calc(100vw - 36px));
  border:1px solid var(--line-2);
  background:rgba(7,13,17,.90);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:0 0 0 1px rgba(90,131,143,.10), 0 22px 50px -26px #000;
  clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  color:#9FBCC4; font-size:11px; letter-spacing:.10em;
  transition:transform .28s ease, opacity .28s ease;
}
.player.is-folded{ transform:translateY(calc(100% - 30px)); opacity:.72; }
.player.is-folded .player__top{ cursor:pointer; }

.player__top{
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-bottom:1px solid var(--line);
  text-transform:uppercase; letter-spacing:.16em;
}
.player__note{ color:var(--teal-2); font-size:12px; }
.player.is-playing .player__note{ animation:pl-pulse 1.4s ease-in-out infinite; }
@keyframes pl-pulse{ 0%,100%{opacity:.45} 50%{opacity:1} }
.player__name{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:#C6D8DD; font-size:10.5px; }
.player__name i{ color:#456068; font-style:normal; }
.player__fold{ background:none; border:0; color:#456068; cursor:pointer; font:inherit; padding:0 2px; }
.player__fold:hover{ color:var(--teal-2); }

.player__mid{ display:flex; align-items:center; gap:9px; padding:9px 10px 7px; }
.player__play{
  appearance:none; cursor:pointer; flex:0 0 auto;
  width:26px; height:26px; display:grid; place-items:center;
  background:linear-gradient(180deg,#24424C,#16292F);
  border:1px solid var(--teal); color:#E4F1F4; font-size:10px; padding:0;
  clip-path:polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}
.player__play:hover{ background:linear-gradient(180deg,#2E535F,#1B343B); }
.player__seek{
  position:relative; flex:1; height:14px; cursor:pointer;
  touch-action:none;                       /* 拖动不要被当成滚动手势接管 */
  -webkit-user-select:none; user-select:none;
  background:
    linear-gradient(180deg, transparent 6px, rgba(90,131,143,.18) 6px, rgba(90,131,143,.18) 8px, transparent 8px);
}
/* 真正接收事件的透明原生 range —— 拖动、点击、键盘全部由浏览器负责，
   不再自己算坐标，也就不会出现"点能跳、拖不动、用一次就失效" */
.player__seek > input{
  position:absolute; left:0; top:-5px; width:100%; height:24px;
  margin:0; padding:0; opacity:0; cursor:pointer;
  -webkit-appearance:none; appearance:none; background:none;
  touch-action:none;
}
.player__seek > input::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:24px; background:transparent; border:0;
}
.player__seek > i{
  position:absolute; left:0; top:6px; height:2px; width:0;
  background:linear-gradient(90deg,var(--teal-3),var(--teal-2));
}
.player__seek > b{
  position:absolute; top:3px; left:0; width:7px; height:8px; margin-left:-3px;
  background:var(--teal-2); box-shadow:0 0 6px rgba(90,131,143,.8);
}
.player__time{ flex:0 0 auto; font-size:10px; color:#456068; letter-spacing:.06em; }

.player__bot{ display:flex; align-items:center; gap:10px; padding:0 10px 9px;
  font-size:9.5px; color:#456068; text-transform:uppercase; }
.player__eq{ display:flex; align-items:flex-end; gap:2px; height:10px; }
.player__eq > i{ width:2px; height:3px; background:var(--teal-3); display:block; }
.player.is-playing .player__eq > i{ animation:pl-eq .9s ease-in-out infinite; }
.player.is-playing .player__eq > i:nth-child(2){ animation-delay:.15s; }
.player.is-playing .player__eq > i:nth-child(3){ animation-delay:.3s; }
.player.is-playing .player__eq > i:nth-child(4){ animation-delay:.45s; }
@keyframes pl-eq{ 0%,100%{ height:3px } 50%{ height:10px } }

.player__mini{ background:none; border:0; color:#456068; font:inherit; font-size:9.5px;
  letter-spacing:.14em; cursor:pointer; padding:0; text-transform:uppercase; }
.player__mini:hover{ color:var(--teal-2); }
.player__mini[aria-pressed="true"]{ color:var(--teal-2); }
.player__vol{ display:flex; align-items:center; gap:5px; }
.player__vol input{ width:56px; accent-color:var(--teal); }
.player__stat{ margin-left:auto; color:var(--teal-2); }
.player.is-missing .player__stat{ color:#D08A8A; }
.player.is-missing .player__time{ font-size:9px; color:#8A6A6A; letter-spacing:.02em; }

/* ---------- 内嵌变体：必须在 .player 基础规则**之后**，否则被压掉 ----------
   再用 .player.player--inline（0,2,0）压过 .player（0,1,0），双保险 */
.player.player--inline{
  position:static; right:auto; bottom:auto; left:auto; top:auto;
  width:100%; max-width:none;
  border:0; background:transparent;
  clip-path:none; box-shadow:none;
  transform:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.player.player--inline.is-folded{ transform:none; opacity:1; }
.player.player--inline .player__top{ border-bottom:1px solid var(--line); }
.player.player--inline .player__seek{ height:12px; }
.player.player--inline .player__play{ width:24px; height:24px; }
.player.player--inline .player__vol input{ width:64px; }
.player.player--inline .player__fold{ display:none; }   /* 嵌在代码框里不需要收起 */

@media (max-width:620px){
  .player{ right:10px; left:10px; bottom:10px; width:auto; }
  .player__vol{ display:none; }
}

/* ---------- 相片界面（点【查看相片】后整屏出现） ---------- */
.photomode{
  position:fixed; inset:0; z-index:70; display:flex; flex-direction:column;
  background:rgba(4,7,10,.985); opacity:0; transition:opacity .32s ease;
}
.photomode[hidden]{ display:none; }
.photomode.is-on{ opacity:1; }
.photomode__bar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:12px clamp(14px,3vw,40px); border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,#081013,#060C0F);
}
.photomode__back{
  appearance:none; cursor:pointer; background:#0E1B20; color:#C6D8DD;
  border:1px solid var(--line-2); padding:7px 14px;
  font:inherit; font-size:11.5px; letter-spacing:.14em;
  clip-path:polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.photomode__back:hover{ color:var(--teal-2); border-color:var(--teal); }
.photomode__title{ font-size:12px; letter-spacing:.24em; color:var(--teal-2); text-transform:uppercase; }
.photomode__title i{ color:#456068; font-style:normal; }
.photomode__meta{ margin-left:auto; font-size:11px; letter-spacing:.16em; color:#456068; }
.photomode__x{ background:none; border:0; color:#456068; cursor:pointer; font-size:15px; }
.photomode__x:hover{ color:#D08A8A; }
.photomode__body{ flex:1; overflow:auto; padding:24px clamp(14px,3vw,40px) 70px; }
.photomode .gallery__head{ margin-top:0; }
.photomode .notice{ margin-top:46px; }
body.pm-lock{ overflow:hidden; }
@media (max-width:620px){
  .photomode__title{ display:none; }
}
/* 构建标记：一眼确认打开的是哪份代码 */
.buildtag{ color:var(--teal-2); font-weight:400; }

/* =========================================================
   首页左栏照片墙 —— 横向竖向混排都适配
   用 CSS 多列做瀑布流：每张按原始比例撑高，不裁切、不变形
   ========================================================= */
.pstrip{ margin-top:26px; position:relative; z-index:3; }   /* 让放大的照片能压过右栏 */
.pstrip__head{
  display:flex; align-items:baseline; gap:10px; margin-bottom:10px;
  font-size:10.5px; letter-spacing:.2em; color:var(--teal-2); text-transform:uppercase;
}
.pstrip__head i{ color:#456068; font-style:normal; }
.pstrip__head b{ margin-left:auto; color:var(--teal-2); font-weight:400; }
.pstrip__grid{
  columns:2; column-gap:10px;      /* 窄列里两栏；宽屏自动变三栏 */
}
@media (min-width:1400px){ .pstrip__grid{ columns:3; } }
@media (max-width:820px){ .pstrip__grid{ columns:2; } }

.pcard{
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  margin:0 0 10px; border:1px solid var(--line); background:#070f12;
  cursor:pointer; position:relative; display:block;
  transition:border-color .26s ease, transform .32s cubic-bezier(.2,.7,.2,1),
             box-shadow .32s ease, z-index 0s;
}
/* ---------- 悬停：照片冲出卡片边框 + 抬高盖住邻格 ---------- */
.pcard:hover{
  border-color:rgba(90,131,143,.85);
  transform:scale(1.035);
  z-index:9;                                   /* 压过同栏其它卡片 */
  box-shadow:0 26px 56px -22px rgba(0,0,0,.92);
}
.pcard:active{ transform:scale(1.005); }
.pcard:focus-visible{ outline:1px solid var(--teal); outline-offset:3px; z-index:9; }

.pcard img{
  display:block; width:100%; height:auto;   /* 原始比例：竖图自然变高，横图自然变宽 */
  background:#050b0d;
  transform-origin:50% 50%;
  backface-visibility:hidden;
  transition:transform .42s cubic-bezier(.16,.74,.2,1), box-shadow .3s ease;
}
/* 关键：img 放大后**不受卡片边框约束**（卡片不裁切），照片就"突破"出去了 */
.pcard:hover img{
  transform:scale(1.24);
  box-shadow:0 0 0 1px rgba(124,169,181,.85), 0 16px 40px -12px rgba(0,0,0,.95);
}
/* 悬停时四个角出现取景框标记 */
.pcard::before, .pcard::after{
  content:""; position:absolute; width:14px; height:14px; z-index:2;
  border:1px solid var(--teal); opacity:0; transition:opacity .22s ease;
  pointer-events:none;
}
.pcard::before{ left:-5px; top:-5px; border-right:0; border-bottom:0; }
.pcard::after{ right:-5px; bottom:-5px; border-left:0; border-top:0; }
.pcard:hover::before, .pcard:hover::after{ opacity:1; }

.pcard__cap{
  padding:7px 9px 8px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:2px;
  position:relative; z-index:1;
  transition:opacity .26s ease;
}
.pcard:hover .pcard__cap{ opacity:.22; }       /* 照片压过来，字幕退下去 */
.pcard__cap b{ font-size:11.5px; color:#C6D8DD; font-weight:400; letter-spacing:.04em; }
.pcard__cap span{ font-size:9.5px; color:#456068; letter-spacing:.1em; }
.pcard__cap i{ font-style:normal; font-size:9.5px; color:var(--teal-3); letter-spacing:.1em; }
.pcard:hover .pcard__cap i{ color:var(--teal-2); }
.pstrip__empty{ font-size:11.5px; color:#456068; line-height:1.9; }
.pstrip__hint{ margin:10px 0 0; font-size:9.5px; letter-spacing:.1em; color:#3A5258; line-height:1.9; }
.pstrip__hint.is-warn{
  color:#D9B26A; font-size:10.5px; letter-spacing:.04em;
  border-left:2px solid #D9B26A; padding:8px 0 8px 10px; background:rgba(217,178,106,.05);
}
.pstrip__hint b{ color:#E4F1F4; font-weight:400; word-break:break-all; }
.pstrip__stat{ display:block; margin-top:6px; color:#3A5258; letter-spacing:.06em; }

/* ---------- 管理员版面面板（游客看不到） ---------- */
.layout-panel{ display:none; gap:16px; flex-wrap:wrap; align-items:center;
  padding:9px 13px; border-top:1px solid var(--line);
  font-size:10.5px; letter-spacing:.14em; color:#456068; text-transform:uppercase; }
.layout-panel.is-on{ display:flex; }
.layout-panel label{ display:flex; align-items:center; gap:8px; }
.layout-panel input[type=range]{ width:104px; accent-color:var(--teal); }
.layout-panel b{ color:var(--teal-2); font-weight:400; min-width:2.2em; }
.layout-panel .size{ margin-left:auto; }
.admin-gate{ position:fixed; inset:0; z-index:120; display:none; place-items:center; padding:20px;
  background:rgba(3,6,8,.9); }
.admin-gate.is-on{ display:grid; }
.admin-gate__card{ width:min(390px,100%); border:1px solid var(--line-2); background:#070D11; padding:18px; }
.admin-gate__card h4{ margin:0 0 12px; font-size:11px; letter-spacing:.2em; color:var(--teal-2);
  font-weight:400; text-transform:uppercase; }
.admin-gate__card input{ width:100%; background:#060B0E; border:1px solid var(--line-2);
  padding:9px 11px; font:inherit; font-size:13px; color:#C6D8DD; outline:none; margin-bottom:11px; }
.admin-gate__card input:focus{ border-color:var(--teal); }
.admin-gate__msg{ font-size:11.5px; color:#D08A8A; min-height:1.4em; margin:0 0 10px; }
.admin-gate__row{ display:flex; gap:9px; }
.admin-gate__row button{ flex:1; appearance:none; cursor:pointer; background:#0E1B20;
  border:1px solid var(--line-2); color:#C6D8DD; font:inherit; font-size:11.5px;
  letter-spacing:.14em; padding:9px; text-transform:uppercase; }
.admin-gate__row button.primary{ background:linear-gradient(180deg,#24424C,#16292F); border-color:var(--teal); color:#E4F1F4; }
.admin-gate__row button:hover{ border-color:var(--teal); color:var(--teal-2); }

@media (prefers-reduced-motion:reduce){
  .intro{ transition:none; }
}