@import url("./fonts/noto-sans-jp.css");
@font-face { font-family:'IBM Plex Mono'; src:url('/chess/fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-style:normal; font-weight:400; font-display:swap; }
body.gate-page {
  --font-body:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  --font-mono:'IBM Plex Mono','Noto Sans JP',monospace;
  font-synthesis:none; font-kerning:normal;
  --accent:#82e6f6; --accent-bright:#c3f8ff; --muted:#a2b1cb; --line:#293c5b;
  --text-main:#e6edf9; --text-muted:#a2b1cb; --accent-blue:#82e6f6;
  --border-strong:#293c5b; --border-soft:#233653;
  --signal-violet:#c59bf3; --signal-orange:#ffc080;
  min-height:100vh; height:auto; color:#e6edf9; font:15px/1.7 var(--font-body); color-scheme:dark;
  background:#0b111b;
}

/* Finite, click-through celebrations layered over either board renderer. */
.board-frame,.signal-catalog { container-type:inline-size; }
.move-signal { --signal:#94f1ff; --signal-haze:#67d9ef35; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; isolation:isolate; overflow:hidden; text-align:center; padding:22px 10px; color:var(--signal); }
.move-signal[data-tone="violet"] { --signal:#dfbaff; --signal-haze:#b770ff35; }
.move-signal[data-tone="rose"] { --signal:#ffabc7; --signal-haze:#ff50803d; }
.move-signal[data-tone="gold"] { --signal:#ffe0a4; --signal-haze:#ffc15540; }
.board-signal { position:absolute; inset:0; z-index:8; pointer-events:none; background:radial-gradient(ellipse at center,#071022bb,transparent 72%); }
.board-signal[hidden] { display:none; }
.signal-emblem { position:relative; flex:0 0 auto; display:grid; place-items:center; width:54px; height:54px; border:1px solid currentColor; border-radius:14px; transform:rotate(-9deg); background:#0c1526cc; box-shadow:0 0 28px var(--signal-haze),inset 0 0 20px var(--signal-haze); }
.signal-emblem svg { width:38px; height:38px; transform:rotate(9deg); stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.signal-copy { position:relative; z-index:2; display:flex; align-items:center; flex-direction:column; gap:6px; max-width:100%; }
.signal-copy strong { display:block; max-width:100%; font:900 italic clamp(28px,11cqw,88px)/1.07 'Arial Black','Arial',sans-serif; letter-spacing:-.045em; color:#fffaff; -webkit-text-stroke:1px var(--signal); text-shadow:0 3px 0 #11192e,0 0 18px var(--signal),0 0 45px var(--signal-haze); }
.move-signal[data-kind="mate"] .signal-copy strong,.move-signal[data-kind="enpassant"] .signal-copy strong { font-size:clamp(25px,9.1cqw,75px); }
.signal-copy>span { padding:3px 14px; font:600 clamp(11px,2.8cqw,17px)/1.5 var(--font-body); color:#f9f4ff; background:linear-gradient(90deg,transparent,#0b1423e6 20%,#0b1423e6 80%,transparent); text-shadow:0 1px 4px #000; }
.signal-detail { z-index:2; font:500 clamp(10px,2.2cqw,13px)/1.6 var(--font-mono); letter-spacing:.08em; color:#ebeffb; text-shadow:0 1px 5px #000; }
.signal-trail { position:absolute; z-index:-1; width:72%; aspect-ratio:1; border:1px solid var(--signal); border-radius:50%; box-shadow:0 0 35px var(--signal-haze),inset 0 0 35px var(--signal-haze); opacity:.6; pointer-events:none; }
.signal-trail::before,.signal-trail::after { content:''; position:absolute; inset:8%; border:1px dashed var(--signal); border-radius:50%; opacity:.55; }
.signal-trail::after { inset:-6%; border-style:solid; opacity:.2; }
.signal-sparks { position:absolute; inset:0; z-index:1; pointer-events:none; }
.signal-sparks i { --x:0px; --y:-110px; position:absolute; left:50%; top:50%; width:7px; height:19px; border-radius:2px; background:var(--signal); box-shadow:0 0 16px var(--signal); opacity:0; }
.signal-sparks i:nth-child(2) { --x:85px; --y:-85px; }
.signal-sparks i:nth-child(3) { --x:130px; --y:5px; }
.signal-sparks i:nth-child(4) { --x:90px; --y:85px; }
.signal-sparks i:nth-child(5) { --x:0px; --y:115px; }
.signal-sparks i:nth-child(6) { --x:-90px; --y:85px; }
.signal-sparks i:nth-child(7) { --x:-130px; --y:5px; }
.signal-sparks i:nth-child(8) { --x:-85px; --y:-85px; }
.move-signal[data-kind="mate"] .signal-trail { border-width:3px; box-shadow:0 0 65px var(--signal-haze),inset 0 0 45px var(--signal-haze); }
.move-signal[data-kind="mate"] .signal-emblem { width:62px; height:62px; background:#453421c9; }
.move-signal[data-active="false"]>* { visibility:hidden; }
.move-signal--preview { min-height:280px; border:1px solid #697d9e50; border-radius:12px; background:radial-gradient(ellipse at 50% 40%,#162743,#080f1c 75%); }
.move-signal--preview[data-active="false"]::after { content:'見たい演出を、下から選んでね。'; color:#a7bad2; font-size:14px; position:absolute; inset:0; display:grid; place-items:center; }
.signal-catalog { margin-top:16px; border-top:1px solid var(--line); padding:14px 0; }
.signal-catalog summary { color:#c8d6e9; cursor:pointer; font-size:14px; }
.signal-catalog summary>span { margin-left:8px; color:#91a5c1; font-size:11px; }
.signal-catalog>p { color:#adbed5; font-size:13px; margin:14px 0; }
.signal-samples { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.gate-page .signal-samples button { padding:8px 12px; border:1px solid #829abc44; border-radius:5px; background:#132135; color:#c4d3e7; font-size:13px; }
.signal-samples button:hover { border-color:#c2eafa; background:#1e3148; }
.signal-samples button[aria-pressed="true"] { color:#f1e7ff; border-color:#bc9ee2; background:#493759; }
.signal-catalog .signal-sample-note { font-size:12px; color:#91a5c1; }
@media(prefers-reduced-motion:no-preference) {
  .move-signal[data-animate="true"] { animation-name:signal-scene; animation-timing-function:linear; animation-fill-mode:both; }
  .move-signal[data-animate="true"] .signal-copy { animation:signal-impact ease-out both; animation-duration:inherit; animation-delay:inherit; }
  .move-signal[data-animate="true"] .signal-emblem { animation:signal-crown ease-out both; animation-duration:inherit; animation-delay:inherit; }
  .move-signal[data-animate="true"] .signal-trail { animation:signal-orbit ease-out both; animation-duration:inherit; animation-delay:inherit; }
  .move-signal[data-animate="true"] .signal-sparks,.move-signal[data-animate="true"] .signal-sparks i { animation-duration:inherit; animation-delay:inherit; }
  .move-signal[data-animate="true"] .signal-sparks i { animation-name:signal-shard; animation-timing-function:ease-out; animation-fill-mode:both; }
  @keyframes signal-scene { 0% { opacity:0; } 7%,77% { opacity:1; } 100% { opacity:0; } }
  @keyframes signal-impact { 0% { transform:scale(1.65) rotate(-7deg); filter:blur(4px); opacity:0; } 12% { transform:scale(.96) rotate(-2deg); filter:blur(0); opacity:1; } 19%,80% { transform:scale(1) rotate(-2deg); opacity:1; } 100% { transform:scale(1.05) translateY(-12px); opacity:0; } }
  @keyframes signal-crown { 0% { transform:translateY(-24px) rotate(-30deg) scale(.6); opacity:0; } 16%,78% { transform:translateY(0) rotate(-9deg) scale(1); opacity:1; } 100% { transform:translateY(-10px) rotate(-9deg) scale(.9); opacity:0; } }
  @keyframes signal-orbit { 0% { transform:scale(.25) rotate(-50deg); opacity:0; } 18% { opacity:.85; } 80% { opacity:.4; } 100% { transform:scale(1.25) rotate(40deg); opacity:0; } }
  @keyframes signal-shard { 0% { transform:translate(0,0) scale(0); opacity:0; } 10% { opacity:1; } 65%,100% { transform:translate(var(--x),var(--y)) rotate(160deg) scale(.2); opacity:0; } }
}
@media(max-width:600px) { .signal-emblem { width:42px; height:42px; border-radius:10px; }.signal-emblem svg { width:30px; height:30px; }.move-signal[data-kind="mate"] .signal-emblem { width:48px; height:48px; }.move-signal--preview { min-height:240px; }.signal-catalog summary>span { display:inline-block; } }

.gate-page button,.gate-page input,.gate-page select { font:inherit; }
.gate-page button { cursor:pointer; }
.gate-page button:disabled { opacity:.48; cursor:wait; }
.gate-page :focus-visible { outline:2px solid var(--accent-bright); outline-offset:4px; }
.gate-page a { color:var(--accent); }
.gate-header { position:static; padding:18px max(28px,calc((100vw - 1224px)/2)); gap:20px; background:#080f1ae6; border-bottom:1px solid #63d9ef30; backdrop-filter:blur(16px); }
.gate-header .brand { display:flex; color:#e6f0ff; letter-spacing:.06em; }
.gate-header .brand img { border-radius:50%; }
.gate-header .nav { width:auto; flex-wrap:wrap; gap:24px; justify-content:flex-end; }
.gate-header .nav a { color:#bdc9e0; font-size:14px; }
.gate-header .nav a:first-child { color:var(--accent); }
.gate-shell { max-width:1280px; padding:40px 40px 20px; margin:auto; }
.gate-intro { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:28px; padding-bottom:28px; border-bottom:1px solid #58c9e027; }
.eyebrow { margin:0 0 10px; color:var(--accent); font:400 11px/1.6 var(--font-mono); letter-spacing:.12em; }
.gate-intro h1 { color:#f0f5ff; font-family:var(--font-body); font-weight:500; font-size:clamp(25px,3vw,36px); line-height:1.55; letter-spacing:.01em; margin:0 0 8px; font-feature-settings:'palt'; }
.gate-intro p:not(.eyebrow) { margin:0; color:var(--muted); font-size:14px; }
.engine-tag { flex-shrink:0;color:#9eb4c9;font:10px/1.8 var(--font-mono);letter-spacing:.07em; }
.engine-tag small { display:block; padding-left:17px; color:#9aafd0; font:12px/1.7 var(--font-body); letter-spacing:.02em; }
.live-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#70e7ef; box-shadow:0 0 10px #70e7ef55; margin-right:7px; }
.gate-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,340px); gap:32px; align-items:start; }
.board-column { min-width:0; }
.board-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 5px 12px; color:var(--muted); font:12px/1.6 var(--font-mono); letter-spacing:.1em; }
.board-toolbar>div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:14px; }
.text-button { border:0; background:transparent; padding:5px 0; color:#b1c5e2; font-size:13px !important; }
.text-button:hover,.text-button[aria-pressed=true] { color:var(--accent-bright); }
.board-card { position:relative;padding:0 20px;background:#101c29;border:1px solid #70e6f7;border-radius:8px;box-shadow:0 0 0 1px #55def51a,0 0 20px #43cfe51c,inset 0 0 16px #43cfe508; }
.seat { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 2px; min-height:70px; }
.seat-person { display:flex; align-items:center; gap:12px; min-width:0; }
.seat-person>div { min-width:0; }
.avatar { display:grid; place-items:center; width:44px; height:50px; border:1px solid #74dbe344; border-radius:4px; background:#0b2532; color:#86e5f3; flex-shrink:0; }
.avatar img { width:36px; height:36px; }
.visitor-avatar { background:#281b3c; color:#d3a7ff; border-color:#b98bee55; }
.seat strong { font-weight:500; font-size:15px; display:block; overflow-wrap:anywhere; }
.seat strong span { color:#9aacc9; font-size:12px; margin-left:5px; }
.captures { display:flex; flex-wrap:wrap; align-items:center; min-height:23px; color:#9aafca; font-size:12px; padding-top:3px; }
.captures img { width:22px; height:22px; margin-right:-4px; filter:drop-shadow(0 1px 1px #0005); }
.seat-state { color:#91a8cb; font:11px/1.5 var(--font-mono); letter-spacing:.1em; flex-shrink:0; padding:6px 8px; border:1px solid transparent; border-radius:3px; }
.seat-state.active { color:var(--accent-bright); background:#24596b30; border-color:#70d3e366; box-shadow:0 0 14px #65c9e012; }
.board-frame { --frame-neon:linear-gradient(180deg,#8af0ff 0%,#54dcf6 32%,#aab6ff 50%,#bf82f8 68%,#d6a5ff 100%); position:relative; padding:2px; margin:0; border:2px solid transparent; border-radius:4px; background:linear-gradient(#050a12,#050a12) padding-box,var(--frame-neon) border-box; box-shadow:0 -7px 22px -8px #4cddf878,0 7px 22px -8px #ba70f778,inset 0 0 0 1px #a9d8ff20; }
.board { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); width:100%; aspect-ratio:1; overflow:hidden; border:2px solid #203455; background:#bdcddd; }
.square { position:relative; aspect-ratio:1; min-width:0; border:0; padding:0; display:grid; place-items:center; background:linear-gradient(135deg,#d1ddeb,#b0c0d7); touch-action:manipulation; }
.square.dark { background:linear-gradient(140deg,#527399,#384f77); }
.square:disabled { opacity:1; cursor:default; }
.square.last { background:linear-gradient(135deg,#b2ddea,#94c1d8); }
.square.last.dark { background:linear-gradient(135deg,#5987a4,#476e9a); }
.square.selected { background:#69a5ce; box-shadow:inset 0 0 0 3px #c0f7ff; z-index:2; }
.square:focus-visible { outline-offset:-4px; outline:3px solid #cef9ff; z-index:3; }
.square.legal::after { content:''; position:absolute; width:22%; height:22%; border-radius:50%; background:#09244770; box-shadow:0 0 0 2px #b3edff44; pointer-events:none; }
.square.legal.occupied::after { width:84%; height:84%; background:transparent; border:4px solid #b4f6ff9c; box-shadow:none; }
.square.check { background:radial-gradient(ellipse,#c57597,#843f62); }
.square:hover:not(:disabled) { box-shadow:inset 0 0 0 2px #c2f5ff66; }
.piece { width:87%; height:87%; max-width:78px; max-height:78px; object-fit:contain; position:relative; z-index:1; pointer-events:none; user-select:none; filter:drop-shadow(0 3px 1px #0a163166); }
.piece.white { filter:drop-shadow(0 3px 1px #0a163177); }
.piece.black { filter:drop-shadow(0 1px 0 #d0e3ff8c) drop-shadow(0 3px 1px #0a163177); }
.coord { position:absolute; left:4px; top:2px; font:600 10px/1.3 var(--font-mono); color:#253f64; pointer-events:none; }
.dark .coord { color:#dbeaff; }
.coord.file { top:auto; left:auto; right:4px; bottom:2px; }
.board-caption { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:15px 4px 0; font-size:13px; color:#b7c8e3; }
.board-caption>span:first-child { min-width:0; }
.human-note { color:#92a6c7; font-size:12px; margin:7px 4px; }
.salon-panel { position:relative;min-width:0;background:none;border:0;border-left:1px solid var(--line);border-radius:0;padding:0 0 0 24px;margin:0;box-shadow:none; }
.status-card { position:relative; min-height:134px; padding:20px 0; border-bottom:1px solid var(--line); }
.status-ornament { position:absolute; right:0; top:-4px; color:#a0c9f955; font:40px/1 'Segoe UI Symbol',serif; }
.turn-label { color:var(--accent); font:11px/1.6 var(--font-mono); letter-spacing:.16em; margin:0 0 13px; }
#status { margin:0 0 10px; font:500 clamp(21px,2vw,26px)/1.65 var(--font-body); letter-spacing:.01em; color:#eaf3ff; font-feature-settings:'palt'; }
#status-detail { margin:0; font-size:14px; line-height:1.85; color:#b3c1db; }
.thinking-wave { display:none; gap:4px; height:18px; align-items:center; margin-top:15px; }
.thinking .thinking-wave { display:flex; }
.thinking-wave i { width:3px; height:7px; background:var(--accent); border-radius:2px; }
.thinking-wave i:nth-child(2) { animation-delay:.15s; }
.thinking-wave i:nth-child(3) { animation-delay:.3s; }
.thinking-wave i:nth-child(4) { animation-delay:.45s; }
.thinking-wave i:nth-child(5) { animation-delay:.6s; }
.controls { padding:20px 0; }
.controls label { display:block; font-weight:500; font-size:13px; margin-bottom:9px; color:#d4e1f5; }
.input-row { display:flex; gap:8px; align-items:stretch; }
.input-row input { min-width:0; flex:1; }
.gate-page input,.gate-page select { border:1px solid #657fac51; border-radius:5px; padding:11px 12px; background:#0b1428; color:#e7efff; font-size:14px; }
.gate-page input::placeholder { color:#8097bb; }
.primary,.secondary { display:inline-block; border-radius:5px; padding:11px 15px; font-size:14px !important; font-weight:600; border:1px solid transparent; text-align:center; }
.primary { background:linear-gradient(110deg,#efb778,#ffc991); color:#231608 !important; border-color:#ffd7a0; box-shadow:inset 0 1px 0 #fff4d666,0 0 20px #efab4512; }
.primary:hover { background:linear-gradient(120deg,#ffd7a5,#ffe6bb); text-decoration:none; }
.secondary { background:#132536; color:#bde5ee; border-color:#619bad55; padding:8px 12px; font-weight:400; }
.secondary:hover { border-color:#91ddec; background:#193549; }
.helper { margin:9px 0 0; color:#9bafcc; font-size:12px; line-height:1.7; }
.error { color:#ffd6e2; background:#53263f; border:1px solid #a65379; border-radius:6px; padding:11px 13px; font-size:14px; margin:12px 0; }
.gate-page details { border-top:1px solid var(--line); padding:16px 0; }
.gate-page summary { cursor:pointer; color:#d6e2f6; font-size:14px; font-weight:500; }
.gate-page summary::marker { color:#87cae5; }
#ply-count { float:right; color:#94aacc; font:12px/1.8 var(--font-mono); }
.score-head,.score-row { display:grid; grid-template-columns:40px 1fr 1fr; align-items:center; }
.score-head { padding:13px 10px 8px; color:#93a9ca; font:11px/1.5 var(--font-mono); letter-spacing:.13em; }
.move-list { max-height:160px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#526e96 #152039; border-top:1px solid #2c4264; font:14px/1.8 var(--font-mono); }
.score-row { padding:7px 10px; color:#d6e1f5; border-bottom:1px solid #2d416166; }
.score-row:nth-child(even) { background:#38558720; }
.score-row>span:first-child { color:#93a9ca; font-size:12px; }
.score-row .latest { color:#b4f4ff; background:#4985c625; border-radius:3px; padding-left:7px; margin-left:-7px; }
.record-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:13px; }
.gate-page .record-actions>.secondary { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:0; min-height:64px; margin:0; padding:10px 8px; font-size:14px!important; line-height:1.5; }
.record-actions .download-format { font:12px/1.5 var(--font-mono); opacity:.8; }
.rules { display:grid; gap:15px; padding-top:16px; }
.rule { display:grid; grid-template-columns:82px 1fr; gap:10px; font-size:13px; line-height:1.85; }
.rule b { color:var(--accent); font-weight:500; }
.rule p { margin:0; color:#adc0dc; }
.highlight { color:#bee8ff; }
.gate-page pre { white-space:pre-wrap; overflow-wrap:anywhere; border:1px solid #2e486c; border-radius:5px; padding:12px; background:#0a1428; color:#afc9e8; font-size:12px; }
.gate-page code { font-size:.85em; overflow-wrap:anywhere; color:#a0deff; }
.agent-copy { font-size:13px; line-height:1.9; color:#a7bddb; }
.gate-page [hidden] { display:none !important; }
.gate-footer { max-width:1200px; margin:26px auto 0; padding:24px 0 32px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:15px; border-top:1px solid #62bfd333; color:#90a7cb; font-size:12px; }
.gate-footer a { color:#b1c5e3; }
.gate-footer .footer-identity { min-width:0; }
.gate-footer .footer-title { display:block; }
.gate-footer .footer-meta { display:flex; align-items:baseline; flex-wrap:wrap; gap:0 12px; margin-top:4px; }
.gate-footer .footer-meta time { margin:0; font:inherit; color:inherit; white-space:nowrap; }
.gate-footer .footer-home { color:inherit; text-decoration:none; }
.gate-footer .footer-home:is(:hover,:focus-visible) { text-decoration:underline; text-underline-offset:4px; }
.gate-footer .footer-home:focus-visible { outline:1px solid currentColor; outline-offset:4px; border-radius:2px; }
.pilgrimage { margin-top:30px; padding:28px; background:#15243f; border:1px solid #789bc844; border-radius:10px; color:#c5d4ea; }
.pilgrimage h2 { color:var(--accent-bright); margin-top:0; font:500 25px/1.5 var(--font-body); }
.project-row { display:grid; grid-template-columns:1fr 160px; gap:16px; border-top:1px solid var(--line); padding:16px 0; }
.project-row strong { display:block; margin-bottom:6px; font-weight:500; color:#e0eafa; }
.project-row a { display:inline-block; margin-right:12px; font-size:13px; }
.project-row label { font-size:12px; color:var(--muted); }
.project-row select { display:block; width:100%; margin-top:5px; }
.promotion-dialog { padding:28px; color:#e6efff; background:#192740; border:1px solid var(--accent); border-radius:10px; max-width:calc(100vw - 32px); box-shadow:0 20px 80px #000a; }
.promotion-dialog::backdrop { background:#070f20d9; backdrop-filter:blur(5px); }
.player-actions { display:inline-flex; flex:none; margin-left:auto; }
.gate-page .resign-text { appearance:none; padding:3px 0; border:0; border-radius:0; background:transparent; box-shadow:none; color:#c7a4e4; font:700 1em/1.8 var(--font-body); white-space:nowrap; }
.gate-page .resign-text:hover:not(:disabled) { color:#dec2f4; text-decoration:underline; text-underline-offset:4px; }
.gate-page .resign-text:focus-visible { outline:2px solid #e3b8ff; outline-offset:4px; }
.gate-page .resign-button { min-height:44px; padding:9px 18px; border:1px solid #ae7cda; border-radius:8px; background:#30203f; color:#eddaff; font:600 14px/1.6 var(--font-body); }
.gate-page .resign-button:hover:not(:disabled) { background:#432957; border-color:#d5a7fa; box-shadow:0 0 16px #b57ce526; }
.gate-page .resign-button:focus-visible { outline:2px solid #e3b8ff; outline-offset:3px; }
.castle-dialog { width:420px; border-color:#70e6f7; background:linear-gradient(145deg,#102b38,#111c32); }
.castle-dialog-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:22px; }
.gate-page .castle-dialog-actions button { min-width:0; min-height:48px; padding:10px 8px; font-size:14px!important; }
.resign-dialog { width:440px; border-color:#bc87ef; background:linear-gradient(145deg,#251e36,#10202e); }
.resign-dialog-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:22px; }
.gate-page .resign-dialog-actions button { min-width:0; min-height:48px; padding:10px 8px; font-size:14px!important; }
@media(max-width:359px) { .castle-dialog-actions,.resign-dialog-actions { grid-template-columns:1fr; } }
.promotion-dialog h2 { margin:0; font:500 24px/1.5 var(--font-body); }
.promotion-dialog p { color:var(--muted); font-size:14px; }
.promotion-choices { display:flex; gap:8px; margin:20px 0; }
.promotion-choices button { display:grid; place-items:center; gap:5px; background:#b5c7df; border:2px solid transparent; border-radius:6px; color:#1d3354; padding:10px; min-width:60px; font-size:12px; }
.promotion-choices button:hover { border-color:var(--accent-bright); background:#d5edff; }
.promotion-choices img { width:48px; height:48px; }
@media (prefers-reduced-motion:no-preference) {
  .primary,.secondary,.square { transition:background .16s,box-shadow .16s; }
  .thinking-wave i { animation:thinking 1s ease-in-out infinite; }
  @keyframes thinking { 0%,100% { height:5px; opacity:.45; } 50% { height:17px; opacity:1; } }
}
@media(max-width:980px) {
  .gate-layout { grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr); gap:20px; }
  .salon-panel { padding:20px; }
  .board-card { padding:0 14px; }
  .seat strong span { display:none; }
  .engine-tag { display:none; }
}
@media(max-width:760px) {
  .gate-shell { padding:24px 16px 12px; }
  .gate-intro { margin-bottom:22px; }
  .gate-intro h1 { font-size:26px; }
  .gate-intro p:not(.eyebrow) { font-size:13px; }
  .gate-layout { grid-template-columns:1fr; gap:10px; }
  .board-card { padding:0 14px; }
  .board-frame { padding:5px; }
  .seat { min-height:76px; padding:13px 0; }
  .avatar { width:36px; height:40px; }
  .avatar img { width:30px; }
  .seat strong { font-size:14px; }
  .seat-person { gap:9px; }
  .salon-panel { margin-top:12px; padding:22px; }
  .gate-header { padding:15px 16px; }
  .gate-header .brand { display:flex; font-size:14px; }
  .gate-header .nav { gap:12px; flex-wrap:wrap; justify-content:flex-end; }
  .gate-header .nav a { font-size:12px; }
  .gate-header .nav a:last-child { display:none; }
  .gate-footer { margin:22px 16px 0; flex-direction:column; font-size:12px; }
  .project-row { grid-template-columns:1fr; }
  .pilgrimage { padding:20px; }
}
@media(max-width:380px) {
  .input-row { flex-wrap:wrap; }
  .input-row .primary { width:100%; }
  .seat-state { font-size:10px; padding:4px; }
  .seat strong { max-width:180px; }
  .promotion-dialog { padding:18px; }
  .promotion-choices { gap:5px; }
  .promotion-choices button { min-width:54px; padding:6px; }
}

/* The cyber scene is a real canvas; the button board remains the keyboard view. */
.view-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; }
.view-toolbar>span { font-size:12px; color:var(--muted); }
.view-switch { display:flex; padding:3px; gap:3px; border:1px solid #405c87; background:#0c172d; border-radius:8px; }
.view-switch button { min-height:40px; padding:7px 13px; border:1px solid transparent; border-radius:5px; background:transparent; color:#a4b8d7; font-size:13px; }
.view-switch button span { margin-left:5px; font-size:11px; }
.view-switch button[aria-pressed=true] { color:#d3f8ff; background:linear-gradient(120deg,#255072,#30375e); border-color:#83cbe175; box-shadow:inset 0 1px 0 #c2f5ff18; }
.view-switch button:hover:not(:disabled) { border-color:#86b5db; }
.board-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; aspect-ratio:1; padding:24px; text-align:center; background:radial-gradient(ellipse at center,#1b2d4b,#0b1124 70%); border-radius:3px; }
.board-loading>span { color:#9beaff; font-size:44px; margin-bottom:16px; text-shadow:0 0 22px #61ddff88; }
.board-loading strong { color:#c2eafa; font-size:14px; font-weight:500; }
.board-loading p { color:#99b1d2; font-size:12px; margin:10px 0 0; }
.board-3d { width:100%; aspect-ratio:1; overflow:hidden; background:#0b1124; border-radius:3px; }
.board-3d canvas { display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
.board-3d canvas:active { cursor:grabbing; }
.camera-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; padding:10px 0 0; }
.camera-controls>span { font:9px/1.6 var(--font-mono); letter-spacing:.12em; color:#7e9ec6; }
.camera-controls>div { display:flex; gap:16px; }
.camera-controls button { font-size:11px !important; }
.camera-controls .glow-control { display:flex; align-items:center; flex:1 1 100%; gap:10px; margin:6px 0 0; color:#a7b9d4; font-size:11px; }
.gate-page .glow-control input { flex:1; min-width:50px; width:auto; height:28px; margin:0; padding:0; border:0; background:transparent; accent-color:#64d8ed; cursor:pointer; }
.glow-control output { min-width:4ch; text-align:right; color:#64d8ed; font:11px var(--font-mono); }
.glow-control .glow-end { color:#7e9ec6; font-size:10px; }
@media (max-width:420px) { .glow-control .glow-end { display:none; } }
.scene-note { margin:10px 4px; color:#9eb6d8; font-size:12px; line-height:1.8; }
.piece-inspector { display:flex; gap:15px; align-items:center; margin:20px 0 12px; padding:16px 18px; border:1px solid #74c4d533; border-left:2px solid #8adbec; border-radius:3px; background:linear-gradient(120deg,#0e2633aa,#19172b99); min-height:88px; }
.inspector-mark { font-size:32px; color:#9cdfee; text-shadow:0 0 16px #60d9ff66; }
.piece-inspector p { margin:0 0 6px; font:12px/1.7 var(--font-mono); letter-spacing:.05em; color:#c5f0ff; }
.piece-inspector div>span { color:#a4b7d7; font-size:12px; line-height:1.8; }
.design-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 16px; margin-top:20px; }
.design-grid span { display:block; font:10px/1.6 var(--font-mono); letter-spacing:.1em; color:#929dcc; margin-bottom:7px; }
.design-grid strong { font-size:13px; font-weight:500; color:#b2e8f8; }
.design-grid p { font-size:12px; line-height:1.8; color:#97acca; margin:5px 0 0; }
@media(max-width:980px) and (min-width:761px) { .board-toolbar { align-items:flex-start; } .board-toolbar>div { gap:4px 12px; } .design-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .board-toolbar { gap:6px; letter-spacing:0; } .board-toolbar>div { gap:10px; } .text-button { font-size:12px !important; } .design-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .piece-inspector { padding:13px; } }

/* The controls and the board share one quiet, luminous instrument housing. */
.chamber-toolbar { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:12px 16px; margin-bottom:18px; border:1px solid #6bbcd22f; border-radius:4px; background:#0b1724b8; }
.chamber-toolbar .board-toolbar { flex:1; margin:0; gap:24px; }
.chamber-toolbar .view-toolbar { margin:0; gap:16px; }
#round-number { color:#a3e9f4; border-left:2px solid #79ddeb; padding-left:12px; white-space:nowrap; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid #b089e442; color:#c5a1ed; font:10px/1.6 var(--font-mono); letter-spacing:.12em; }
.panel-heading>span:last-child { color:#d1acfb; font-size:18px; text-shadow:0 0 12px #b987e855; }
/* Continuous frames replace the old disconnected corner brackets. The inner
   frame blends at its vertical midpoint: cyan above, violet below. */
.board-card::before,.board-frame::before,.salon-panel::before { content:none; }
.avatar svg { width:32px; height:40px; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 0 5px #6acde440); }
.avatar .emblem-core { fill:currentColor; stroke:none; }
#guest-seat { border-top:1px solid #b487db28; margin-top:12px; }
#guest-seat .seat-state.active { color:#e4c7ff; background:#66348920; border-color:#b98beb66; box-shadow:0 0 14px #b487db14; }
.seat { min-height:78px; }
.seat-person strong { overflow-wrap:anywhere; }
.camera-controls { padding:12px 0 0; }
.camera-controls .glow-control { padding:7px 0 1px; margin:0; }
.gate-page .glow-control input { appearance:none; -webkit-appearance:none; }
.glow-control input::-webkit-slider-runnable-track { height:4px; border-radius:2px; background:linear-gradient(90deg,#60cadd99,#9778c199); }
.glow-control input::-moz-range-track { height:4px; border-radius:2px; background:linear-gradient(90deg,#60cadd99,#9778c199); }
.glow-control input::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:15px; height:15px; margin-top:-5.5px; border:2px solid #c4f4ff; border-radius:50%; background:#59bcd5; box-shadow:0 0 9px #6ad9f03d; }
.glow-control input::-moz-range-thumb { width:11px; height:11px; border:2px solid #c4f4ff; border-radius:50%; background:#59bcd5; box-shadow:0 0 9px #6ad9f03d; }
.view-switch { background:#08121f; border-color:#6192a64d; border-radius:4px; }
.view-switch button { border-radius:2px; }
.view-switch button[aria-pressed=true] { background:#16425366; border-color:#72d7e680; box-shadow:inset 0 -2px 0 #86e3ee; }
.record-panel .score-head>span:last-child { color:#c29ae9; }
.score-row .latest { color:#ffd29a; background:#bd813a16; box-shadow:inset 2px 0 #efb56e; }
.gate-page input:focus-visible { border-color:#7ddce9; }
.design-grid>div { padding:12px; border:1px solid #659fbd26; border-top-color:#83c9dc66; background:#0b18257a; border-radius:2px; }
.gate-page .piece-catalog h2 { color:#b9deed; font-size:18px; font-weight:500; margin:24px 0 0; }
.gate-page button,.gate-page input,.gate-page select { font-family:var(--font-body); }
.gate-page code,.gate-page pre,#move { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.move-list,.score-head,.seat-state { font-variant-numeric:tabular-nums; }
.gate-header .brand { font-weight:500; letter-spacing:.025em; }
@media(max-width:1280px) { .gate-footer { margin-left:28px; margin-right:28px; } }
@media(max-width:980px) { .chamber-toolbar { gap:18px; } .chamber-toolbar .board-toolbar { gap:14px; } .chamber-toolbar .view-toolbar>span { display:none; } }
@media(max-width:900px) { .gate-layout { grid-template-columns:1fr; gap:24px; } .salon-panel { margin-top:0; } .design-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) { .chamber-toolbar { flex-wrap:wrap; gap:12px; padding:12px; } .chamber-toolbar .board-toolbar { flex:1 1 100%; } .chamber-toolbar .view-toolbar { width:100%; justify-content:space-between; } .chamber-toolbar .view-toolbar>span { display:block; } .gate-intro { padding-bottom:20px; margin-bottom:18px; } .gate-intro h1 { font-size:25px; } .gate-header { align-items:flex-start; gap:16px; } .gate-header .nav { gap:8px 14px; } .gate-footer { margin-left:16px; margin-right:16px; } .board-frame { padding:2px; } .design-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .design-grid>div { padding:10px; } .record-actions>* { flex:1; } }

/* Match the entrance Japanese type while preserving chess notation. */
.gate-intro h1{font-weight:700;letter-spacing:0;font-feature-settings:normal}#status{font-weight:600;letter-spacing:0;font-feature-settings:normal}.gate-page .primary,.gate-page .secondary,.gate-page .seat strong{font-weight:600}.gate-page .support-card{font-family:var(--font-body)}

/* A single entry form comes before the board in both reading and keyboard order. */
.gate-page .join-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:center;gap:24px;padding:22px 24px;margin:0 0 24px;border:1px solid #74dbe366;border-left:3px solid #86e0ee;border-radius:12px;background:linear-gradient(115deg,#122b3b,#151c30);box-shadow:0 8px 26px #0002}
.gate-page .join-card[hidden]{display:none}
.join-intro #anonymous-start{margin-top:12px;min-height:48px;color:#d5f6ff;border-color:#83c8db80}
.keeper-companion{display:flex;align-items:center;gap:22px;padding:18px 0;border-bottom:1px solid #b2bcdf30}
.keeper-portrait-frame{display:block;width:196px;height:196px;flex-shrink:0;overflow:hidden;border-radius:16px;border:1px solid #d8c8ee80;box-shadow:0 4px 22px #05081940}
.keeper-companion img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;transform:scale(1.4);transform-origin:50% 12%}
.keeper-conversation{min-width:0}.keeper-label{font:10px/1.5 var(--font-mono);letter-spacing:.14em;color:#b4a2d5}
.keeper-conversation p{margin:8px 0 12px;color:#edf1ff;font-size:17px;line-height:1.65}
@media(max-width:600px){.keeper-companion{gap:12px;padding:12px 0}.keeper-portrait-frame{width:112px;height:136px;border-radius:12px}.keeper-conversation p{margin:4px 0 6px}}
.join-intro h2{font-size:20px;line-height:1.5;margin:0 0 8px;color:#e6f4fc}
.join-intro p{font-size:14px;line-height:1.8;margin:0;color:#b4c6da}
.join-fields{min-width:0}.join-card label{font-size:16px}.join-card label .helper{margin-left:8px;font-size:12px}
.gate-page .join-card input{font-size:16px;min-height:48px}.join-card .primary{min-height:48px;white-space:nowrap}
.join-card .error{margin-bottom:0}.join-card .helper a{text-underline-offset:3px}
@media(max-width:900px){.gate-page .join-card{grid-template-columns:1fr;gap:16px;padding:20px}.join-intro h2{font-size:19px}}
@media(max-width:480px){.join-card .input-row{flex-direction:column;gap:10px}.join-card .primary{width:100%;font-size:16px!important}.join-card label .helper{display:inline-block;margin-left:6px}.gate-page .join-card{padding:18px;margin-bottom:20px}.gate-intro{margin-bottom:18px}}

/* Comfortable reading sizes for people playing on phones and larger screens. */
body.gate-page{font-size:17px;line-height:1.8}
.gate-page .gate-intro h1{font-size:clamp(28px,3vw,40px)}
.gate-page .gate-intro p:not(.eyebrow),.gate-page #status-detail,.gate-page .join-intro p{font-size:16px}
.gate-page .gate-header .nav a,.gate-page .seat strong,.gate-page .controls label,.gate-page summary,.gate-page .move-list{font-size:16px}
.gate-page .primary,.gate-page .secondary{font-size:16px!important;min-height:46px}
.gate-page .text-button{font-size:15px!important;min-height:44px}
.gate-page .input-row input,.gate-page .join-card input{font-size:17px}
.gate-page .helper,.gate-page .scene-note,.gate-page .human-note,.gate-page .board-caption,.gate-page .captures,.gate-page .rule,.gate-page .agent-copy,.gate-page pre,.gate-page .gate-footer{font-size:14px}
.gate-page .join-card label .helper{font-size:14px}
.gate-page .eyebrow,.gate-page .turn-label,.gate-page .score-head,.gate-page .seat-state,.gate-page #ply-count{font-size:13px}
.gate-page .board-toolbar,.gate-page .view-switch button,.gate-page .view-switch button span,.gate-page .camera-controls{font-size:14px}
.gate-page .keeper-conversation p{font-size:19px;line-height:1.75}
.gate-page .keeper-label{font-size:11px}
.gate-page .tip-title{font-size:17px}.gate-page .tip-caption,.gate-page .postgame>p{font-size:16px}
.gate-page .tip-button,.gate-page .tip-agent{font-size:15px}.gate-page .support-english{font-size:13px}
@media(max-width:600px){.gate-page .keeper-conversation p{font-size:17px}.gate-page .keeper-label{font-size:10px;letter-spacing:.05em}.gate-page #move-form .input-row{flex-direction:column}.gate-page .view-switch button{font-size:15px}.gate-page .board-toolbar{letter-spacing:0}.gate-page .join-card label .helper{display:block;margin:4px 0 0}}
@media(max-width:380px){.keeper-portrait-frame{width:92px;height:124px}}

/* One room, two views; neither navigation reloads the active game. */
.room-switch{display:flex;gap:8px;margin:0 0 26px;padding:5px;width:fit-content;border:1px solid var(--line);border-radius:14px;background:#0b1626}.room-switch a{display:block;padding:10px 24px;border-radius:10px;text-decoration:none;color:var(--muted);font-size:17px}.room-switch a[aria-current=page]{color:#e4f6ff;background:#243c52;box-shadow:inset 0 0 0 1px #7cb7cf50}#chamber-play{scroll-margin-top:20px}@media(max-width:600px){.room-switch{width:100%}.room-switch a{flex:1;text-align:center;padding:10px 12px}}

.keeper-conversation{flex:1}.room-music{margin-top:12px;min-width:0}.music-title{display:flex;gap:8px;align-items:center;margin-bottom:8px}.music-title>span{font-size:19px;color:var(--signal-violet)}.music-title strong{display:block;font-size:15px;font-weight:500;color:#cbd9ed}.music-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}.music-actions button{min-height:44px;min-width:94px;padding:7px 12px;font-size:15px;background:#233d52;border:1px solid #53778e;border-radius:9px;color:#def5ff}.music-actions button[aria-pressed=true]{background:#352646;border-color:#9574b3;color:#ead7fc}.music-actions label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}.music-actions input{width:74px;min-height:32px;accent-color:var(--signal-violet)}.music-actions output{min-width:32px;font:12px var(--font-mono)}.gate-page .room-music .error{margin:8px 0 0;font-size:14px}.keeper-companion{align-items:flex-start}@media(max-width:600px){.room-music{margin-top:8px}.music-title{gap:6px;margin-bottom:5px}.music-title strong{font-size:14px}.music-actions{gap:4px 8px}.music-actions input{width:64px}.music-actions label{gap:4px}.music-actions button{font-size:14px;min-width:90px}}

.gate-page .cast-portrait{position:relative;display:block;overflow:clip;aspect-ratio:1;height:auto;background:#f6f3f0;flex-shrink:0}
.gate-page .cast-portrait img{position:absolute;display:block;width:300%;max-width:none;height:auto;left:0;top:0;transform:none;object-fit:initial}
/* A face is the level selector. No nested card collection. */
.gate-page .keeper-picker{display:block;padding:0 0 24px;margin:0 0 20px;border:0;border-bottom:1px solid var(--line);background:none;border-radius:0}
.keeper-picker-controls{display:grid;grid-template-columns:220px minmax(0,1fr);gap:8px 28px;align-items:start}
.keeper-picker-controls>h2{grid-column:1;grid-row:1;font-size:22px;font-weight:500;line-height:1.6;margin:12px 0 0}
.keeper-stops{grid-column:2;grid-row:1/3;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.keeper-stops button{font-family:inherit;padding:8px 4px 10px;border:1px solid transparent;border-radius:5px;box-shadow:none;background:transparent;color:#c7d4e3;min-height:44px}
.keeper-stops .cast-portrait{width:100%;max-width:92px;margin:0 auto 8px;border-radius:5px}
.keeper-stops strong,.keeper-stops small{display:block}.keeper-stops strong{font-size:14px;font-weight:500;white-space:nowrap}.keeper-stops small{font-size:11px;margin-top:3px;color:#a4b6c7;line-height:1.6}
.keeper-stops button[aria-pressed=true]{border-color:#8aafc1;background:#1c2d3c;color:#f0f8ff}.keeper-stops button[aria-pressed=true] .cast-portrait{box-shadow:0 0 0 2px #8dbecd}.keeper-stops button:hover:not(:disabled){background:#192838;border-color:#6a8499}.keeper-stops button[aria-pressed=true]:disabled{opacity:1}
.keeper-picker #difficulty{display:none}.keeper-picker #keeper-choice{grid-column:1;font-size:13px;line-height:1.8;color:#b8cbdc;margin:0}.keeper-picker .helper{grid-column:1;font-size:12px;line-height:1.7;margin:0;color:#90a4b8}.keeper-picker #change-opponent{grid-column:1;font-size:13px;border:1px solid var(--line);padding:8px;background:#162535;color:#d9eafa;border-radius:4px;min-height:44px}
.cast-portrait,.keeper-lineup{-webkit-user-select:none;user-select:none}.cast-portrait img,.keeper-lineup img{-webkit-user-drag:none;user-select:none}
.gate-page .join-card{padding:20px 24px;gap:24px;margin-bottom:24px;border:1px solid #334656;border-radius:5px;background:#111f2c;box-shadow:none;grid-template-columns:220px minmax(0,1fr)}
.gate-page .join-intro h2{font-size:18px;font-weight:500}.gate-page .join-intro p,.gate-page #anonymous-start{font-size:14px}.gate-page #anonymous-start{margin-top:12px;padding:8px 28px}.gate-page .join-fields .helper{font-size:12px;line-height:1.65;margin:6px 0;color:#a9bccd}.gate-page .join-fields label{font-size:14px}.gate-page .join-fields input{font-size:16px}.join-fields [lang=en]{display:block;color:#95a8ba}
.music-title select{max-width:100%;font-size:15px;padding:6px 24px 6px 8px;background:#162638;color:#e2d6f5;border:1px solid #716482;border-radius:5px}
.gate-page .chamber-byline{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px}.gate-page .chamber-motto{font-family:var(--font-body);font-size:13px;letter-spacing:.03em;color:var(--muted)}.gate-page .gate-intro h1{font-family:Arial,sans-serif;font-size:clamp(27px,3.6vw,48px);font-weight:500;letter-spacing:-.04em;line-height:1.2;text-wrap:balance}.gate-footer time{display:inline-block;margin-top:6px;font-size:12px;color:#90a7cb}
.room-switch{gap:28px;padding:0 0 12px;margin:0 0 28px;border:0;border-bottom:1px solid var(--line);border-radius:0;width:100%;background:none}.room-switch a{padding:8px 0;font-size:16px;border-radius:0}.room-switch a[aria-current=page]{background:none;box-shadow:0 2px 0 #85bccc;color:#e8f5fc}
/* After play, the artwork and catalog share the full page width. */
.chamber-exhibition{margin:64px 0 24px;padding-top:32px;border-top:1px solid var(--line)}.exhibition-heading{display:grid;grid-template-columns:1fr auto;gap:8px 24px;margin-bottom:28px}.exhibition-heading .eyebrow{grid-column:1/-1;font-size:10px;color:#94a9be;margin:0}.exhibition-heading h2{font-size:28px;font-weight:500;letter-spacing:.03em;margin:0}.exhibition-heading p{font-size:14px;color:#a3b7c9;margin:8px 0 0}
.gate-page .exhibition-heading .exhibition-note { display:flex; flex-wrap:wrap; align-items:center; gap:0 16px; }
.gate-page .exhibition-coffee { display:inline-block; padding:3px 0; color:#b9a6ce; font-size:inherit; white-space:nowrap; text-decoration:none; }
.gate-page .exhibition-coffee:is(:hover,:focus-visible) { color:#dfc4f7; text-decoration:underline; text-underline-offset:4px; }
.keeper-lineup{width:100%;max-width:none;margin:0 0 44px}.keeper-lineup img{display:block;width:100%;height:auto;border-radius:5px}.keeper-lineup figcaption{font-size:12px;color:#a5b8c8;letter-spacing:.08em;margin-top:14px;text-align:right}
.chamber-exhibition .piece-catalog{margin:0;padding:0;border:0}.chamber-exhibition .piece-catalog h2{font-size:24px;font-weight:500;color:#dceaf4;margin:0 0 24px}.chamber-exhibition .design-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}.chamber-exhibition .design-grid>div{padding:22px 0;border:0;border-top:1px solid #334656;background:none;box-shadow:none;border-radius:0}.chamber-exhibition .design-grid span{font-size:11px;color:#8b9eb4}.chamber-exhibition .design-grid strong{font-size:18px;font-weight:500;margin:10px 0;color:#c5dce8}.chamber-exhibition .design-grid p{font-size:15px;line-height:1.9;color:#aabfce;margin:0;max-width:30em}
.piece-inspector{border:0;border-bottom:1px solid var(--line);background:none;box-shadow:none;padding:16px 0;border-radius:0}
@media(max-width:1000px){.keeper-picker-controls{grid-template-columns:190px minmax(0,1fr);gap:8px 20px}.gate-page .join-card{grid-template-columns:180px minmax(0,1fr)}.keeper-stops{gap:6px}.keeper-stops small{font-size:10px}.keeper-picker-controls>h2{font-size:20px}.salon-panel{padding-left:20px}}
@media(max-width:900px){.gate-layout{grid-template-columns:1fr;gap:28px}.salon-panel{padding:0;margin:0;border:0}.gate-page .gate-shell{padding-left:28px;padding-right:28px}.gate-page .join-card{grid-template-columns:1fr;gap:14px}.join-intro{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}.gate-page .join-intro h2,.gate-page .join-intro p{margin:0}.gate-page #anonymous-start{margin:0 0 0 auto}.keeper-picker-controls{grid-template-columns:1fr;gap:12px}.keeper-picker-controls>h2{grid-column:1;grid-row:auto;margin:0}.keeper-stops{grid-column:1;grid-row:auto}.keeper-picker #keeper-choice{margin:0}.keeper-picker .helper{margin:0}.keeper-stops .cast-portrait{max-width:100px}}
@media(max-width:600px){.gate-page .gate-shell{padding:24px 16px 20px}.gate-page .gate-intro{padding-bottom:22px}.gate-page .chamber-byline{gap:5px 12px}.gate-page .chamber-motto{font-size:11px}.gate-page .keeper-picker{padding-bottom:18px}.keeper-stops{gap:5px}.keeper-stops button{padding:5px 2px}.keeper-stops .cast-portrait{border-radius:3px}.keeper-stops strong{font-size:11px}.keeper-stops small{font-size:9px;min-height:28px}.keeper-picker-controls>h2{font-size:20px}.gate-page .join-card{padding:16px}.gate-page .join-intro h2{font-size:17px}.gate-page .join-intro p{font-size:12px}.join-fields [lang=en]{font-size:11px}.room-switch{gap:24px}.room-switch a{flex:none;padding:8px 0}.board-card{padding:0 12px}.gate-page .gate-header .nav a{font-size:12px}.gate-header .nav{gap:12px}.gate-header .nav a:last-child{display:none}.chamber-exhibition{margin-top:40px;padding-top:24px}.exhibition-heading{display:block;margin-bottom:22px}.exhibition-heading h2{font-size:24px;margin:12px 0 4px}.exhibition-heading p{font-size:13px}.keeper-lineup{margin-bottom:28px}.keeper-lineup figcaption{font-size:10px;letter-spacing:0;text-align:center}.chamber-exhibition .piece-catalog h2{font-size:22px}.chamber-exhibition .design-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.chamber-exhibition .design-grid strong{font-size:16px}.chamber-exhibition .design-grid p{font-size:14px}.chamber-exhibition .design-grid span{font-size:10px}}

/* The six original board forms, redrawn as small neon instruments. */
.chamber-exhibition .design-grid>.piece-concept { display:grid; grid-template-columns:80px minmax(0,1fr); align-items:start; gap:18px; }
.piece-concept-icon { display:block; align-self:center; width:80px; height:auto; pointer-events:none; user-select:none; }
.piece-concept-copy { min-width:0; }
.chamber-exhibition .piece-concept-copy strong { display:block; margin:4px 0 8px; }
@media(max-width:1100px) {
  .chamber-exhibition .design-grid>.piece-concept { grid-template-columns:minmax(0,1fr); align-content:start; gap:14px; }
}
.gate-page .music-actions select{width:auto;max-width:100%;min-height:38px;padding:4px 8px;border:1px solid #31425b;border-radius:8px;background:#101e30;color:#c1d9eb;font:inherit}
@media(max-width:600px) {
  .piece-concept-icon { width:72px; }
  .chamber-exhibition .design-grid>.piece-concept { gap:12px; }
}

/* One keeper frame: face, voice, material and the optional music player. */
.gate-page .keeper-unified { display:grid; grid-template-columns:152px minmax(0,1fr); gap:12px 20px; align-items:center; padding:18px 0 14px; border-bottom:0; }
.gate-page .keeper-unified .keeper-portrait-frame { width:152px; height:152px; }
.keeper-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; }
.keeper-unified .keeper-heading .seat-state { font-size:10px; letter-spacing:.06em; }
.gate-page .keeper-unified .keeper-conversation>p { margin:8px 0 12px; font-size:18px; line-height:1.6; }
.keeper-material { display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; padding-top:9px; border-top:1px solid #b7c8e32b; }
.material-label { flex-shrink:0; color:#90a9c1; font-size:11px; }
.gate-page .keeper-material .captures { font-size:12px; margin:0; min-height:24px; display:flex; align-items:center; flex-wrap:wrap; gap:2px; }
.keeper-material .captures .piece { width:24px; height:24px; box-sizing:border-box; padding:2px; border-radius:4px; background:#c6d5e6; object-fit:contain; transform:none; position:static; }
.keeper-unified .room-music { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px 12px; margin:0; padding-top:10px; border-top:1px solid #b7c8e31a; }
.keeper-unified .music-title { min-width:0; margin:0; gap:7px; }
.keeper-unified .music-title>div { min-width:0; width:100%; }
.keeper-unified .music-title select { width:100%; min-width:0; height:42px; text-overflow:ellipsis; }
.keeper-unified .music-actions { display:contents; }
.keeper-unified .music-actions button { min-width:82px; min-height:42px; padding:6px 10px; }
.keeper-unified .music-actions label { justify-content:flex-end; }
.keeper-unified .room-music .error { grid-column:1/-1; }

/* The selected opponent enters only when their white move checks/mates black. */
.signal-cutin,.cutin-slash,.cutin-keeper { display:none; }
.move-signal[data-cutin="true"] { background:linear-gradient(115deg,#0b132ada,#1e12336b 60%,#070c19a6); }
.move-signal[data-cutin="true"] .signal-cutin { display:block; position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; clip-path:polygon(0 12%,100% 0,100% 89%,0 100%); }
.signal-cutin img { position:absolute; height:145%; width:auto; max-width:none; right:-9%; top:5%; object-fit:contain; filter:drop-shadow(0 0 18px var(--signal-haze)); user-select:none; -webkit-user-drag:none; }
.move-signal[data-cutin="true"] .signal-copy { position:absolute; bottom:17%; left:5%; right:5%; align-items:flex-start; text-align:left; gap:3px; }
.move-signal[data-cutin="true"] .signal-copy strong { font-size:clamp(29px,11cqw,88px); }
.move-signal[data-cutin="true"][data-kind="mate"] .signal-copy strong { font-size:clamp(25px,9.2cqw,76px); }
.move-signal[data-cutin="true"] .signal-copy>span { padding-left:6px; }
.move-signal[data-cutin="true"] .signal-detail { position:absolute; bottom:11%; left:6%; }
.move-signal[data-cutin="true"] .signal-emblem { position:absolute; top:11%; left:8%; z-index:1; }
.move-signal[data-cutin="true"] .signal-trail { width:95%; z-index:-1; }
.move-signal[data-cutin="true"] .cutin-slash { display:block; position:absolute; inset:8% -15%; z-index:-1; transform:skewY(-9deg); border-block:2px solid var(--signal); background:linear-gradient(100deg,var(--signal-haze),transparent 75%); box-shadow:0 0 25px var(--signal-haze); }
.move-signal[data-cutin="true"] .cutin-keeper { display:block; position:absolute; bottom:4%; right:5%; max-width:90%; z-index:2; padding:3px 8px; background:#101427c9; color:#f4e8ff; font:11px/1.5 var(--font-mono); letter-spacing:.09em; }
.move-signal--preview[data-cutin="true"] { min-height:360px; }
.cutin-preview-control { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px; color:#b7c9df; font-size:13px; }
.cutin-preview-control select { padding:7px 12px; border:1px solid #8f79af; border-radius:7px; background:#201d35; color:#eee5ff; }
#cutin-preview-status { color:#b8abc9; font-size:11px; }
@media(prefers-reduced-motion:no-preference) {
  .move-signal[data-cutin="true"][data-animate="true"] .signal-cutin { animation:keeper-cutin ease-out both; animation-duration:inherit; animation-delay:inherit; }
  .move-signal[data-cutin="true"][data-animate="true"] .cutin-slash { animation:keeper-slash ease-out both; animation-duration:inherit; animation-delay:inherit; }
  @keyframes keeper-cutin { 0% { transform:translateX(65%) skewX(-8deg); opacity:0; } 15% { transform:translateX(-2%) skewX(0); opacity:1; } 22%,75% { transform:translateX(0) scale(1.02); opacity:1; } 100% { transform:translateX(-12%) scale(1.04); opacity:0; } }
  @keyframes keeper-slash { 0% { transform:translateX(-80%) skewY(-9deg); opacity:0; } 12%,75% { transform:translateX(0) skewY(-9deg); opacity:1; } 100% { transform:translateX(35%) skewY(-9deg); opacity:0; } }
}
@media(max-width:600px) {
  .gate-page .keeper-unified { grid-template-columns:112px minmax(0,1fr); gap:10px 12px; padding:12px 0; }
  .gate-page .keeper-unified .keeper-portrait-frame { width:112px; height:112px; }
  .gate-page .keeper-unified .keeper-conversation>p { font-size:16px; line-height:1.55; margin:6px 0 8px; }
  .keeper-unified .room-music { grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; }
  .keeper-unified .music-actions label { grid-column:1/-1; font-size:11px; }
  .keeper-unified .music-title select { font-size:13px; }
  .keeper-unified .music-actions button { font-size:13px; }
  .move-signal--preview[data-cutin="true"] { min-height:320px; }
  .move-signal[data-cutin="true"] .cutin-keeper { font-size:9px; }
}
@media(max-width:360px) { .gate-page .keeper-unified { grid-template-columns:92px minmax(0,1fr); }.gate-page .keeper-unified .keeper-portrait-frame { width:92px; height:92px; }.gate-page .keeper-unified .keeper-conversation>p { font-size:15px; } }

/* Keeper portraits use the same cyan identity as the white cyber pieces. */
.gate-page .keeper-unified .keeper-portrait-frame {
  border:2px solid #8beaff;
  box-shadow:0 0 0 3px #62dff018,0 0 18px #57dcef38,0 0 34px #57dcef12;
}
.keeper-unified .keeper-portrait-frame::after {
  content:"";position:absolute;inset:3px;border:1px solid #b7f5ff70;border-radius:11px;pointer-events:none;
}
/* Small sprite companion: fixed frame keeps the board still during thinking. */
.keeper-dialogue{display:flex;align-items:center;gap:10px;min-width:0}
.keeper-dialogue #keeper-line{flex:1;margin:8px 0 12px;font-size:18px;line-height:1.6}
.keeper-pixel{display:block;width:64px;height:64px;flex:0 0 64px;background-size:400% 400%;background-position:var(--sprite-x0,0%) var(--sprite-y,0%);background-repeat:no-repeat;image-rendering:pixelated;pointer-events:none;border-radius:6px}
.keeper-pixel[hidden]{display:none}
.keeper-pixel[data-walking=true]{animation:keeper-step 1s steps(1,end) infinite}
@keyframes keeper-step{0%,100%{background-position:var(--sprite-x0,0%) var(--sprite-y,0%)}25%{background-position:var(--sprite-x1,33.333333%) var(--sprite-y,0%)}50%{background-position:var(--sprite-x2,66.666667%) var(--sprite-y,0%)}75%{background-position:var(--sprite-x3,100%) var(--sprite-y,0%)}}
.farewell-pixel{float:right;margin:0 0 8px 10px}
@media(max-width:600px){.keeper-dialogue{gap:6px}.keeper-pixel{width:56px;height:56px;flex-basis:56px}.keeper-dialogue #keeper-line{font-size:16px;line-height:1.55}}
@media(max-width:360px){.keeper-dialogue #keeper-line{font-size:15px}.keeper-pixel{width:48px;height:48px;flex-basis:48px}}
@media(prefers-reduced-motion:reduce){.keeper-pixel[data-walking=true]{animation:none}}

/* Pawn front frames use 288px windows at x=64/344/622/900, y=56 in the 1254px source. */
.keeper-pixel[data-keeper=pawn]{background-size:435.416667% 435.416667%;--sprite-x0:6.625259%;--sprite-x1:35.610766%;--sprite-x2:64.389234%;--sprite-x3:93.167702%;--sprite-y:5.797101%}