/* =========================================================
   hang.blue — Lan Hang
   一台监视器。外壳、屏幕、按键，内容在频道里播。
   全部样式在这一个文件里；颜色和字体变量在最上面。
   ========================================================= */

:root{
  /* ---- 房间与机器 ---- */
  --room:     #06070A;
  --room-lo:  #020306;
  --case:     #16181D;
  --case-hi:  #262932;
  --case-lo:  #0A0B0F;
  --case-txt: #6C7280;

  /* ---- 屏幕 ---- */
  --screen:   #05070E;
  --key:      #0A2FE0;   /* 无信号蓝 —— 蓝航 */
  --glow:     #7C97FF;
  --phos:     #E9EEFF;   /* 荧光白 */
  --phos-dim: #97A2C4;
  --phos-lo:  #5A6486;
  --line:     #1B2138;

  /* ---- 指示灯（全站唯一的非蓝色，只用于功能） ---- */
  --led-pwr:  #4ADE80;
  --led-rec:  #FF3B2F;

  --sans: "Archivo", "Helvetica Neue", Helvetica, "PingFang SC", "Noto Sans SC", sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100svh;
  background:
    radial-gradient(120% 90% at 50% 42%, #0C1024 0%, var(--room) 45%, var(--room-lo) 100%);
  color:var(--phos);
  font-family:var(--sans);
  font-variation-settings:"wdth" 100;
  font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(.75rem, 2.5vw, 2.5rem);
}
a{ color:inherit; }
::selection{ background:var(--key); color:#fff; }
:focus-visible{ outline:2px solid var(--glow); outline-offset:3px; }

.skip{ position:absolute; left:-9999px; top:0; z-index:99; background:var(--key); color:#fff; padding:.6rem 1rem; }
.skip:focus{ left:0; }

.room{ width:100%; max-width:1040px; display:flex; flex-direction:column; align-items:center; gap:1rem; }

/* ======================= 机器外壳 ======================= */
.set{
  width:100%;
  background:linear-gradient(180deg, var(--case-hi) 0%, var(--case) 18%, var(--case) 82%, var(--case-lo) 100%);
  border-radius:14px;
  padding:clamp(.7rem,1.6vw,1.15rem);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.7),
    0 2px 0 #000,
    0 30px 70px -20px rgba(0,0,0,.9),
    0 0 90px -30px rgba(10,47,224,.45);
}

.set__plate{
  display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap;
  padding:.1rem .35rem .7rem;
}
.plate__brand{
  font-variation-settings:"wdth" 125;
  font-weight:700; font-size:clamp(.9rem,1.9vw,1.15rem);
  letter-spacing:.02em; color:#B9C0CE;
  text-shadow:0 1px 0 rgba(0,0,0,.8);
}
.plate__spec{
  font-family:var(--mono); font-size:.55rem; letter-spacing:.06em;
  color:var(--case-txt);
}

/* ========================= 屏幕 ========================= */
.screen{
  position:relative;
  aspect-ratio:4/3;
  border-radius:3% / 4%;
  overflow:hidden;
  background:var(--screen);
  box-shadow:
    inset 0 0 0 1px #000,
    inset 0 0 40px rgba(0,0,0,.95),
    0 0 0 3px #0A0B0F,
    0 0 0 4px rgba(255,255,255,.05);
}
@media (min-width:900px){ .screen{ aspect-ratio:16/10; } }

#fx{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; opacity:.28; transition:opacity .25s;
}
.screen[data-mode="blue"] #fx{ opacity:1; }

/* ---------- 内容区 ---------- */
.tube{
  position:absolute; inset:0; z-index:2;
  overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(3rem,5.5vw,4rem) clamp(1.1rem,3.4vw,3rem) clamp(3.4rem,6vw,4.4rem);
  /* 色差：让文字看起来是被电子枪打上去的 */
  text-shadow:-.5px 0 rgba(255,0,72,.30), .5px 0 rgba(0,190,255,.30);
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.tube::-webkit-scrollbar{ width:8px; }
.tube::-webkit-scrollbar-thumb{ background:var(--line); }

.chan{ display:none; flex-direction:column; gap:1rem; max-width:64ch; }
.chan.is-on{ display:flex; animation:tune .32s ease-out both; }

.chan__media{ display:flex; flex-direction:column; gap:.7rem; min-width:0; }
.chan__body { display:flex; flex-direction:column; gap:1rem; min-width:0; max-width:54ch; }
.chan__side { display:flex; flex-direction:column; gap:1.7rem; min-width:0; }

@media (min-width:900px){
  .chan--split{ max-width:none; }
  .chan--split.is-on{
    display:grid; grid-template-columns:1.02fr 1fr;
    gap:2.6rem; align-items:start;
  }
  .chan--about.is-on{ grid-template-columns:1.15fr .85fr; }
}
@keyframes tune{
  0%  { opacity:0; transform:translateY(2px) scaleY(1.02); filter:blur(.6px); }
  100%{ opacity:1; transform:none; filter:none; }
}

.chan__h{
  margin:.2rem 0 0;
  font-variation-settings:"wdth" 118; font-weight:600;
  font-size:clamp(1.5rem,3.6vw,2.5rem); line-height:1.05;
  letter-spacing:-.025em; text-wrap:balance;
}
.chan__h em{
  display:block; font-style:normal; font-weight:400;
  font-variation-settings:"wdth" 100;
  font-size:.46em; color:var(--phos-dim); margin-top:.45em; letter-spacing:-.01em;
}
.lede{ margin:0; font-size:1.1rem; line-height:1.45; letter-spacing:-.01em; }
.chan p{ margin:0; color:var(--phos-dim); }
.chan p em{ font-style:italic; color:var(--phos); }

.facts{
  list-style:none; margin:.4rem 0 .4rem; padding:1rem 0 0;
  border-top:1px solid var(--line);
  display:grid; gap:.9rem 1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  font-family:var(--mono); font-size:.62rem;
}
.facts dt{ color:var(--phos-lo); letter-spacing:.08em; text-transform:uppercase; font-size:.55rem; margin-bottom:.35rem; }
.facts dd{ margin:0; color:var(--phos-dim); line-height:1.5; }

.chan__label{
  margin:0 0 .8rem; font-family:var(--mono); font-size:.55rem; font-weight:400;
  text-transform:uppercase; letter-spacing:.12em; color:var(--phos-lo);
}
.cols{ display:grid; gap:1.8rem; margin-top:1rem; }
@media (min-width:620px){ .cols{ grid-template-columns:1fr 1fr; } }
.tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem; }
.tags li{
  font-family:var(--mono); font-size:.58rem; color:var(--phos-dim);
  border:1px solid var(--line); padding:.3rem .5rem;
}
.cv{ list-style:none; margin:0; padding:0; font-size:.88rem; }
.cv li{ display:flex; gap:.9rem; padding:.4rem 0; border-bottom:1px solid var(--line); color:var(--phos-dim); }
.cv li span{ font-family:var(--mono); font-size:.58rem; color:var(--phos-lo); flex:0 0 2.8rem; padding-top:.35em; }

.links{ list-style:none; margin:.8rem 0 0; padding:0; display:flex; flex-direction:column; gap:1.1rem; }
.links li{ display:flex; gap:1rem; align-items:baseline; flex-wrap:wrap; }
.links__k{
  font-family:var(--mono); font-size:.55rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--phos-lo); flex:0 0 5.2rem;
}
.links a{
  font-family:var(--mono); font-size:clamp(.82rem,1.6vw,1.05rem); color:var(--phos);
  border-bottom:1px solid var(--line); padding-bottom:.2rem;
  transition:color .2s, border-color .2s;
}
.links a:hover{ color:var(--glow); border-bottom-color:var(--glow); }
.links__v{ font-family:var(--mono); font-size:clamp(.82rem,1.6vw,1.05rem); color:var(--phos-dim); }

.colophon{
  margin-top:1.6rem !important; font-family:var(--mono);
  font-size:.55rem; line-height:2; color:var(--phos-lo) !important;
}

/* ---------- 图片位（现在都空着） ---------- */
.slot{
  position:relative; width:100%; aspect-ratio:16/10;
  border:1px dashed var(--line);
  background:
    repeating-linear-gradient(45deg, rgba(124,151,255,.035) 0 8px, transparent 8px 16px);
  display:grid; place-items:center;
}
.slot::before{
  content:attr(data-slot);
  font-family:var(--mono); font-size:.55rem; letter-spacing:.1em;
  color:var(--phos-lo);
}
.slot::after{  /* 定位十字 */
  content:""; position:absolute; width:22px; height:22px;
  border-left:1px solid var(--line); border-top:1px solid var(--line);
  top:8px; left:8px;
}
.slot img{ width:100%; height:100%; object-fit:cover; display:block; }
.slot:has(img){ border-style:solid; background:none; }
.slot:has(img)::before,.slot:has(img)::after{ content:none; }
.slot--portrait{ aspect-ratio:4/5; max-width:280px; margin-top:1rem; }
.slots-2{ display:grid; gap:.7rem; margin-top:.4rem; }
@media (min-width:620px){ .slots-2{ grid-template-columns:1fr 1fr; } }
.slot--sm::before{ font-size:.5rem; }

.video{ position:relative; aspect-ratio:16/9; border:1px solid var(--line); margin-top:.6rem; }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- 无信号频道 ---------- */
.chan--blue{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; max-width:none; }
.chan--blue.is-on{ display:flex; }
.nosignal{
  margin:0; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.45em; color:rgba(255,255,255,.5);
}

/* ========================= OSD ========================= */
.osd{
  position:absolute; z-index:4; pointer-events:none;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.08em;
  color:var(--phos); text-shadow:0 1px 0 rgba(0,0,0,.9), 0 0 12px rgba(124,151,255,.5);
  display:flex; align-items:center; gap:.55rem;
}
.osd--tl{ top:.9rem; left:1rem; }
.osd--tr{ top:.9rem; right:1rem; }
.osd--bl{ bottom:.9rem; left:1rem; }
.osd--br{ bottom:.9rem; right:1rem; }
.osd__ch{ font-weight:600; background:rgba(10,47,224,.55); padding:.2rem .4rem; }
.osd__name{ color:var(--phos-dim); }
.osd__dim{ color:var(--phos-lo); }
.rec{ width:.42rem; height:.42rem; border-radius:50%; background:var(--led-rec); box-shadow:0 0 8px var(--led-rec); animation:blink 1.7s steps(1) infinite; }
@keyframes blink{ 0%,55%{opacity:1} 56%,100%{opacity:.1} }

@media (max-width:560px){
  .osd--br{ display:none; }
  .osd__name{ display:none; }
}

/* ======================== 玻璃 ========================= */
.glass{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:
    /* 眩光 */
    radial-gradient(70% 50% at 22% 8%, rgba(255,255,255,.055), transparent 60%),
    /* 荫罩：R/G/B 竖条 */
    repeating-linear-gradient(90deg,
      rgba(255,0,60,.030) 0 1px, rgba(0,255,120,.030) 1px 2px, rgba(0,120,255,.030) 2px 3px),
    /* 扫描线 */
    repeating-linear-gradient(180deg,
      rgba(0,0,0,.30) 0 1px, rgba(0,0,0,0) 1px 3px),
    /* OSD 压边 */
    linear-gradient(180deg, rgba(5,7,14,.80) 0, rgba(5,7,14,0) 9%),
    linear-gradient(0deg,   rgba(5,7,14,.80) 0, rgba(5,7,14,0) 9%);
  box-shadow:
    inset 0 0 60px rgba(0,0,0,.55),
    inset 0 0 150px rgba(0,0,0,.42);
  animation:flicker 7s steps(1) infinite;
}
@keyframes flicker{
  0%,96%{ opacity:1 } 97%{ opacity:.93 } 98%{ opacity:1 } 99%{ opacity:.96 } 100%{ opacity:1 }
}
/* 场同步没对准的那条滚动带 */
.roll{
  position:absolute; left:0; right:0; height:16%;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.035), rgba(255,255,255,0));
  animation:roll 9s linear infinite;
}
@keyframes roll{ 0%{ top:-20% } 100%{ top:110% } }

/* 换台时的那一下雪花 */
.burst{
  position:absolute; inset:0; z-index:6; pointer-events:none; opacity:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  background-size:180px;
  mix-blend-mode:screen;
}
.screen.is-switching .burst{ animation:burst .34s steps(3) 1; }
@keyframes burst{
  0%  { opacity:.75; background-position:0 0; }
  50% { opacity:.5;  background-position:40px -70px; }
  100%{ opacity:0;   background-position:-30px 50px; }
}
.screen.is-switching .tube{ transform:scaleY(1.015); filter:brightness(1.5); }

/* ====================== 控制面板 ====================== */
.deck{
  display:flex; align-items:center; gap:clamp(.6rem,1.6vw,1.2rem);
  padding:.85rem .35rem .15rem;
}
.deck__leds{ display:flex; align-items:center; gap:.4rem; flex:none; }
.led{ width:.5rem; height:.5rem; border-radius:50%; }
.led--pwr{ background:var(--led-pwr); box-shadow:0 0 8px var(--led-pwr); }
.deck__lbl{ font-family:var(--mono); font-size:.48rem; letter-spacing:.1em; color:var(--case-txt); }

.deck__btns{ display:flex; gap:.4rem; flex:1 1 auto; flex-wrap:wrap; }

.key{
  flex:1 1 auto; min-width:66px;
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  padding:.5rem .35rem .42rem;
  font-family:var(--mono); cursor:pointer;
  color:var(--case-txt);
  background:linear-gradient(180deg,#22252D,#15171C);
  border:0; border-radius:4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -2px 0 rgba(0,0,0,.55),
    0 2px 3px rgba(0,0,0,.6);
  transition:transform .06s, color .2s, box-shadow .12s;
}
.key b{ font-size:.66rem; font-weight:600; letter-spacing:.02em; }
.key span{ font-size:.44rem; letter-spacing:.1em; }
.key:hover{ color:#98A0B2; }
.key:active{ transform:translateY(1px); box-shadow:inset 0 2px 4px rgba(0,0,0,.7); }
.key[aria-selected="true"]{
  color:var(--glow);
  background:linear-gradient(180deg,#1B2340,#111629);
  box-shadow:
    inset 0 1px 0 rgba(124,151,255,.22),
    inset 0 -2px 0 rgba(0,0,0,.55),
    0 0 14px -2px rgba(10,47,224,.75);
}
.key--blue[aria-selected="true"]{ color:#fff; background:linear-gradient(180deg,#123AE8,#0A2FE0); }

.deck__grille{
  flex:0 0 auto; width:clamp(40px,7vw,84px); height:22px; border-radius:3px;
  background:repeating-linear-gradient(90deg, #0C0D11 0 2px, #1D2027 2px 4px);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8);
}
@media (max-width:700px){ .deck__grille, .deck__leds{ display:none; } }

.hint{
  margin:0; font-family:var(--mono); font-size:.52rem;
  letter-spacing:.12em; color:#343947; text-transform:uppercase;
}
@media (max-width:560px){ .hint{ display:none; } }

/* ==================== 无障碍 / 省电 ==================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .chan.is-on{ animation:none; }
}

/* ====================== 手机 ======================
   小屏上把屏幕拉高、先给标题再给图 —— 一台小 CRT 里
   第一眼看到的应该是作品名，不是一个占位框。           */
@media (max-width:899px){
  body{ align-items:flex-start; padding-top:clamp(.75rem,4vw,2rem); }
  .screen{ aspect-ratio:auto; height:min(68svh,600px); }
  .tube{ padding:2.6rem 1.1rem 3.8rem; }
  .chan--split.is-on{ display:flex; flex-direction:column; gap:1.4rem; }
  .chan__body{ order:1; }
  .chan__media{ order:2; }
  .chan__side{ order:3; }
  .chan__h{ font-size:clamp(1.45rem,6.5vw,2rem); }
  .lede{ font-size:1rem; }
  .key{ min-width:0; flex:1 1 28%; }
}
@media (max-width:420px){
  .set{ border-radius:10px; }
  .plate__spec{ font-size:.48rem; }
}