/* Channel select: the site as a CRT. Years are channels, each era opens on a teletext page, OK goes deeper (status screen, then the
   item shop of every version), INPUT picks a system. Loaded after style.css, which supplies the nav and the palette. */
.ch-page {
  --glass: #06140E;
  --phos: #7CFFB2;
  --phos-dim: #3E8F64;
  --amber: var(--yellow);
  --shell: #1C1B24;
  --osd: VT323, "Courier New", monospace;
  --stat-bg: #050A1C;
  --stat-panel: rgba(30,59,170,.35);
  --stat-ink: #BFD0FF;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto auto 1fr auto;
  overflow-x: hidden;
}
.ch-page::after { display: none; } /* the screen has its own scanlines */
.ch-hint { margin: 0; padding: 10px var(--gutter) 0; text-align: right; font-size: 13px; color: var(--ink-dim); }

/* the set */
.ch-set { align-self: center; justify-self: center; width: min(calc(100% - 2 * var(--gutter)), 1120px, calc((100svh - 250px) * 1.42)); margin: 12px 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 18px; padding: 22px; border-radius: 26px;
  background: linear-gradient(160deg, #2A2834, var(--shell) 45%, #121118); box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); }
.ch-bezel { background: #0B0B10; border-radius: 22px; padding: 16px; box-shadow: inset 0 0 0 2px #000, inset 0 6px 18px rgba(0,0,0,.8); min-width: 0; }
.ch-screen { position: relative; aspect-ratio: 4 / 3; border-radius: 28px / 22px; overflow: hidden; background: var(--glass); max-width: 100%;
  box-shadow: inset 0 0 90px rgba(0,0,0,.9), inset 0 0 18px rgba(124,255,178,.15); }
.ch-screen.on { animation: ch-poweron .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ch-poweron { 0%, 45% { transform: scale(1, .004); filter: brightness(6); } 70% { transform: scale(1, 1.02); filter: brightness(2); } 100% { transform: none; filter: none; } }
.ch-screen::before { content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 2px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55)); }
.ch-screen::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%); }
#static { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 7; opacity: 0; pointer-events: none; image-rendering: pixelated; transition: opacity .12s; }
#static.on { opacity: 1; transition: none; }
.ch-view { position: absolute; inset: 0; padding: 4.5% 5%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 3%; text-shadow: 1px 0 rgba(255,42,60,.35), -1px 0 rgba(58,224,255,.35); }
.ch-toast { position: absolute; z-index: 6; right: 6%; bottom: 14%; padding: 4px 10px; font-family: var(--osd); font-size: clamp(18px, 2.4vw, 30px); color: var(--phos); background: rgba(0,0,0,.7); pointer-events: none; }

/* channel view */
.ch-osd { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font-family: var(--osd); color: var(--phos); }
.ch-num { font-size: clamp(30px, 5.4vw, 64px); line-height: .8; }
.ch-num small { display: block; margin-bottom: 4px; font-size: .45em; color: var(--phos-dim); }
.ch-era { text-align: right; font-size: clamp(16px, 2vw, 24px); line-height: 1; }
.ch-era b { display: block; margin-bottom: 6px; font-family: var(--pixel); font-weight: 400; font-size: clamp(8px, 1vw, 11px); color: var(--amber); }
.ch-main { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 4%; min-height: 0; }
.ch-now { display: grid; align-content: center; justify-items: center; gap: 8px; min-width: 0; text-align: center; }
.ch-disc { position: relative; width: min(100%, 26vh); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #000, 0 0 30px rgba(124,255,178,.2); animation: ch-spin 4s linear infinite; }
.ch-disc svg, .ch-disc img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ch-disc::after { content: ""; position: absolute; inset: 41%; border-radius: 50%; background: #0C0C12; box-shadow: 0 0 0 3px rgba(255,255,255,.15); }
@keyframes ch-spin { to { transform: rotate(360deg); } }
.ch-nt { font-family: var(--pixel); font-size: clamp(9px, 1.2vw, 13px); line-height: 1.5; color: var(--ink); text-wrap: balance; }
.ch-nh { font-family: var(--osd); font-size: clamp(15px, 1.7vw, 21px); line-height: 1.05; color: var(--phos); }
.ch-menu { list-style: none; margin: 0; padding: 0 4px 0 0; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--phos-dim) transparent; font-family: var(--osd); font-size: clamp(17px, 2vw, 25px); line-height: 1.1; }
.ch-menu li { display: grid; grid-template-columns: 1.1em minmax(0, 1fr) auto; gap: 6px; align-items: baseline; padding: 2px 4px; cursor: pointer; color: var(--phos); }
.ch-menu .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-menu .sc { color: var(--phos-dim); font-variant-numeric: tabular-nums; }
.ch-menu .sc.top { color: var(--amber); }
.ch-menu .cur { visibility: hidden; }
.ch-menu li.sel { background: var(--phos); color: var(--glass); text-shadow: none; }
.ch-menu li.sel .sc { color: var(--glass); }
.ch-menu li.sel .cur { visibility: visible; animation: ch-blink 1s steps(1) infinite; }
.ch-sys { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: 2px; }
.ch-sys i { width: 7px; height: 7px; background: var(--c); }
.ch-tag { margin-left: 6px; padding: 0 3px; font-size: .7em; border: 1px solid currentColor; vertical-align: 2px; }
@keyframes ch-blink { 50% { opacity: 0; } }
.ch-ticker { overflow: hidden; white-space: nowrap; font-family: var(--osd); font-size: clamp(15px, 1.7vw, 21px); color: var(--amber); border-top: 2px solid var(--phos-dim); padding-top: 4px; }
.ch-ticker span { display: inline-block; padding-left: 40%; animation: ch-crawl 38s linear infinite; }
@keyframes ch-crawl { to { transform: translateX(-100%); } }
.ch-empty { font-family: var(--osd); font-size: clamp(18px, 2.2vw, 26px); color: var(--phos); align-self: center; text-align: center; }

/* teletext */
.ch-view.txt { background: #000; text-shadow: none; font-family: var(--osd); grid-template-rows: auto auto minmax(0, 1fr) auto; }
.tx-bar { display: flex; justify-content: space-between; gap: 10px; font-size: clamp(16px, 2vw, 24px); color: var(--ink); }
.tx-bar b { color: var(--amber); font-weight: 400; }
.ch-view.txt h2 { margin: 0; padding: .4em .5em; font-family: var(--pixel); font-weight: 400; font-size: clamp(12px, 2.2vw, 26px); line-height: 1.3; color: #000; background: var(--phos); }
.ch-view.txt h2 span { color: var(--blue); }
.tx-body { margin: 0; overflow-y: auto; color: #fff; font-size: clamp(17px, 2.2vw, 28px); line-height: 1.15; }
.tx-body p { margin: 0 0 .6em; }
.tx-body .y { color: var(--amber); }
.tx-body .c { color: var(--cyan); }
.tx-body .g { color: var(--phos); }
.tx-body .r { color: #FF6A5C; }
.tx-rows { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 14px; }
.tx-rows span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-rows a, .tx-body a { color: inherit; text-decoration: none; cursor: pointer; }
.tx-rows a:hover, .tx-body a:hover { background: var(--blue); }
.tx-keys { display: flex; font-size: clamp(15px, 1.8vw, 22px); }
.tx-keys button { flex: 1 1 0; min-width: 0; padding: 2px 6px; border: 0; color: #000; font-family: var(--osd); font-size: inherit; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }

/* status screen and item shop: the blue RPG windows */
.ch-view.status { background: var(--stat-bg); color: var(--ink); text-shadow: none; grid-template-rows: auto minmax(0, 1fr); }
.st-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 3px solid var(--ink); border-radius: 6px; background: linear-gradient(#1E3BAA, #0E1F66); }
.st-head h2 { margin: 0; font-family: var(--pixel); font-weight: 400; font-size: clamp(11px, 1.8vw, 20px); line-height: 1.35; text-wrap: balance; }
.st-cls { font-family: var(--osd); font-size: clamp(15px, 1.7vw, 21px); color: var(--stat-ink); }
.st-lv { text-align: right; font-family: var(--osd); line-height: .9; color: var(--amber); white-space: nowrap; }
.st-lv b { display: block; font-size: clamp(30px, 4.6vw, 54px); font-weight: 400; }
.st-lv.top b { text-shadow: 0 0 12px rgba(255,210,63,.6); }
.st-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3%; align-content: start; min-height: 0; overflow-y: auto; padding-top: 3%; font-family: var(--osd); font-size: clamp(16px, 1.8vw, 22px); line-height: 1.1; scrollbar-width: thin; }
.st-box { min-width: 0; padding: 8px 10px; border: 3px solid var(--ink); border-radius: 6px; background: var(--stat-panel); }
.st-box h3 { margin: 0 0 6px; font-family: var(--pixel); font-weight: 400; font-size: clamp(8px, .9vw, 10px); color: var(--amber); }
.st-box h3:not(:first-child) { margin-top: 10px; }
.st-box p { margin: 0 0 6px; }
.st-box a { color: var(--cyan); }
.st-box .dim { color: var(--stat-ink); }
.st-wide { grid-column: 1 / -1; }
.st-art .art-fig { width: 112px; }
.st-art .art-fig img { max-height: 120px; }
.st-stat { display: grid; grid-template-columns: 5.2em minmax(0, 1fr) 2.6em; gap: 6px; align-items: center; margin-bottom: 5px; }
.st-seg { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; height: 12px; }
.st-seg i { background: #22305E; }
.st-seg i.f { background: var(--c); animation: ch-fill .25s both; animation-delay: calc(var(--k) * 40ms + 200ms); }
@keyframes ch-fill { from { background: #22305E; } }
.st-stat output { text-align: right; }
.st-party { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6em, 1fr)); gap: 4px; }
.st-party button { padding: 2px 4px; border: 2px solid var(--c); background: none; text-align: center; line-height: 1; cursor: pointer; font-family: var(--osd); font-size: inherit; color: var(--ink); }
.st-party button small { display: block; color: var(--ink-dim); }
.st-party button.eq { background: var(--c); color: #000; }
.st-party button.eq small { color: #000; }
.st-party button.own { box-shadow: inset 0 -4px 0 var(--phos); }
.st-go { grid-column: 1 / -1; justify-self: start; padding: 6px 12px; border: 3px solid var(--ink); border-radius: 6px; background: var(--red); cursor: pointer; font-family: var(--pixel); font-size: clamp(8px, 1vw, 11px); }
.st-go .cur { animation: ch-blink 1s steps(1) infinite; }
.st-board { margin-bottom: 8px; }
.st-board ul { list-style: none; margin: 2px 0 0; padding: 0; }
.st-board li::before { content: "› "; color: var(--amber); }

.ch-view.shop .st-body { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.ch-view.shop .st-box { overflow-y: auto; }
.sh-inv { list-style: none; margin: 0; padding: 0; }
.sh-inv li { display: grid; grid-template-columns: 1.1em minmax(0, 1fr) auto; gap: 6px; align-items: baseline; padding: 2px 4px; cursor: pointer; }
.sh-inv .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-inv .sc { color: var(--amber); }
.sh-inv .cur { visibility: hidden; }
.sh-inv li.sel { background: var(--ink); color: var(--stat-bg); }
.sh-inv li.sel .sc { color: var(--stat-bg); }
.sh-inv li.sel .cur { visibility: visible; animation: ch-blink 1s steps(1) infinite; }
.sh-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.sh-tabs button { padding: 3px 7px; border: 2px solid var(--ink); background: none; cursor: pointer; font-family: var(--pixel); font-size: clamp(7px, .8vw, 9px); color: var(--ink); }
.sh-tabs button[aria-selected="true"] { background: var(--amber); border-color: var(--amber); color: #000; }
.sh-pb { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) 4.4em; gap: 8px; align-items: center; margin-bottom: 5px; }
.sh-pb i { position: relative; height: 12px; background: #22305E; }
.sh-pb i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--amber); transform-origin: left; animation: ch-grow .5s .1s both cubic-bezier(.2,.8,.2,1); }
@keyframes ch-grow { from { transform: scaleX(0); } }
.sh-pb output { text-align: right; color: var(--amber); }
.sh-specs { display: grid; grid-template-columns: 6.8em minmax(0, 1fr); gap: 4px 10px; margin: 8px 0 0; }
.sh-specs dt { padding-top: .1em; font-size: .85em; color: var(--amber); }
.sh-specs dd { margin: 0; overflow-wrap: anywhere; }
.sh-specs dd.warn { color: #FF8A80; }
.sh-links { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
.sh-save { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.sh-save button { padding: 4px 8px; border: 2px solid var(--ink); background: none; cursor: pointer; font-family: var(--pixel); font-size: clamp(7px, .8vw, 9px); color: var(--ink); }
.sh-save button[aria-pressed="true"] { background: var(--phos); border-color: var(--phos); color: #000; }

/* remote */
.ch-remote { display: grid; grid-auto-rows: min-content; align-content: center; gap: 10px; padding: 14px 12px; border-radius: 16px; background: #121118; box-shadow: inset 0 0 0 1px #2E2C38; }
.ch-lbl { font-family: var(--pixel); font-size: 8px; color: var(--ink-dim); text-align: center; }
.ch-rb { padding: 10px 6px; border: 0; border-radius: 10px; cursor: pointer; font-family: var(--pixel); font-size: 9px; line-height: 1.3; color: var(--ink);
  background: linear-gradient(#34323F, #23222C); box-shadow: 0 3px 0 #0A0A0E, inset 0 1px 0 rgba(255,255,255,.1); }
.ch-rb:active { transform: translateY(2px); box-shadow: 0 1px 0 #0A0A0E; }
.ch-rb.ok { background: linear-gradient(#FF4757, #C11425); }
.ch-rb.txt { background: linear-gradient(#2E6BFF, #1440B8); }
.ch-rb.input { background: linear-gradient(#FFD23F, #C99A10); color: #000; }
.ch-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ch-speaker { height: 46px; background: radial-gradient(circle, #000 1.4px, transparent 1.8px) 0 0 / 7px 7px; opacity: .7; }

/* tuner */
.ch-tuner { width: min(calc(100% - 2 * var(--gutter)), 1120px); justify-self: center; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
.ch-dial { position: relative; height: 66px; overflow: hidden; cursor: pointer; touch-action: none; border: 1px solid #2E2C38; border-radius: 10px; background: linear-gradient(#0E0E16, #15151F); }
.ch-dial .h { position: absolute; bottom: 18px; background: var(--phos-dim); }
.ch-dial .h.lit { background: var(--phos); }
.ch-dial .yl { position: absolute; bottom: 3px; transform: translateX(-50%); font-family: var(--osd); font-size: 15px; color: var(--ink-dim); }
.ch-dial .era { position: absolute; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 4px; border-left: 1px solid var(--amber); font-family: var(--pixel); font-size: 7px; color: var(--amber); }
.ch-needle { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: var(--red); box-shadow: 0 0 10px var(--red); transition: left .25s cubic-bezier(.2,.8,.2,1); }

@media (max-width: 760px) {
  .ch-hint { display: none; }
  .ch-set { grid-template-columns: minmax(0, 1fr); width: calc(100% - 2 * var(--gutter)); padding: 12px; border-radius: 18px; }
  .ch-bezel { padding: 8px; border-radius: 14px; }
  .ch-screen { aspect-ratio: 3 / 4.3; border-radius: 18px / 14px; }
  .ch-view { padding: 6%; }
  .ch-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
  .ch-now { grid-template-columns: 76px minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; }
  .ch-disc { width: 76px; grid-row: span 2; }
  .st-body, .ch-view.shop .st-body { grid-template-columns: minmax(0, 1fr); }
  .ch-remote { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px; gap: 6px; }
  .ch-lbl, .ch-speaker { display: none; }
  .ch-pair { display: contents; }
  .ch-dial .era { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-disc, .ch-ticker span, .ch-menu li.sel .cur, .sh-inv li.sel .cur, .st-go .cur { animation: none; }
  .ch-screen.on { animation: none; }
  .ch-needle { transition: none; }
  .ch-ticker span { padding-left: 0; }
}