*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#090a0a}
body{font-family:Arial,Helvetica,sans-serif}
#stage{width:100vw;height:100vh;display:grid;place-items:center;position:relative;background:radial-gradient(ellipse at center,#292826 0,#111210 56%,#050606 100%)}
#board{width:96vw;height:min(92vh,calc(96vw*9/16));aspect-ratio:16/9;padding:1.35%;display:grid;grid-template-columns:repeat(22,1fr);grid-template-rows:repeat(6,1fr);gap:.42%;
background:linear-gradient(145deg,#242423,#111211 55%,#090a09);border:1px solid #3d3b35;border-radius:.3vw;box-shadow:0 2.8vw 6vw #000,inset 0 0 2vw #000,inset 0 1px #5a584e}
.cell{position:relative;min-width:0;min-height:0;perspective:800px}
.flap{position:absolute;inset:0;border-radius:.12vw;overflow:hidden;display:grid;grid-template-rows:1fr 1fr;transform-style:preserve-3d;background:#171817;
box-shadow:inset 0 1px 0 #4d4b42,inset 0 -2px 4px #030303,0 1px 2px #000;color:#e5e2d5;font-family:"Arial Narrow","Helvetica Neue Condensed","Roboto Condensed",Arial,Helvetica,sans-serif;font-size:clamp(12px,3.25vw,76px);font-weight:800;text-align:center;line-height:.88;text-shadow:0 2px 0 #000,0 0 7px #666}
.half{position:relative;overflow:hidden}.top{border-bottom:1px solid #050505;box-shadow:inset 0 -2px 3px #080808}.bottom{box-shadow:inset 0 2px 3px #080808}
.half span{position:absolute;left:0;width:100%;height:200%;display:grid;place-items:center;line-height:.88;transform:scaleY(1.16);transform-origin:center center}
.top span{top:0}.bottom span{bottom:0}
.flap:after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:#030303;box-shadow:0 1px 1px #555;z-index:4}
.cell:after{content:"";position:absolute;inset:0;border-radius:.12vw;pointer-events:none;box-shadow:inset 0 0 .2vw #0006}
.ambient{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#fff0 0 48%,#00000012 50%,#fff0 52%)}
#audioUnlock{position:absolute;right:18px;bottom:16px;background:#151615e8;color:#bbb;border:1px solid #555248;padding:11px 14px;font:700 10px monospace;letter-spacing:.08em;opacity:.85;cursor:pointer}
#audioUnlock.hidden{display:none}
@media(max-aspect-ratio:4/3){#board{width:97vw;height:auto}}
/* =========================================================
VISUAL THEMES
========================================================= */
/* 1) Classic European Railway — existing baseline */
body.theme-classic #stage{
background:radial-gradient(ellipse at center,#292826 0,#111210 56%,#050606 100%)
}
body.theme-classic #board{
background:linear-gradient(145deg,#242423,#111211 55%,#090a09);
border-color:#3d3b35;
box-shadow:0 2.8vw 6vw #000,inset 0 0 2vw #000,inset 0 1px #5a584e
}
body.theme-classic .flap{
background:#171817;
color:#e5e2d5
}
/* 2) Modern Vestaboard-inspired */
body.theme-modern #stage{
background:radial-gradient(ellipse at center,#222526 0,#101213 60%,#070809 100%)
}
body.theme-modern #board{
padding:1.1%;
gap:.32%;
background:linear-gradient(145deg,#1f2223,#111314);
border:1px solid #343839;
border-radius:.55vw;
box-shadow:0 1.5vw 4vw #000b,inset 0 1px #3f4445
}
body.theme-modern .flap{
border-radius:.18vw;
background:linear-gradient(#202324,#161819);
color:#f0eee7;
font-size:clamp(13px,3.45vw,82px);
text-shadow:0 1px 0 #000,0 0 4px #ffffff1f;
box-shadow:inset 0 1px 0 #45494a,inset 0 -1px 3px #080909,0 2px 5px #0007
}
body.theme-modern .flap:after{
background:#090a0a;
box-shadow:0 1px 0 #313536
}
body.theme-modern .cell:after{
box-shadow:inset 0 0 .12vw #0004
}
/* 3) Authentic Old Railway Station */
body.theme-vintage #stage{
background:
radial-gradient(ellipse at center,#39352e 0,#171512 58%,#090806 100%)
}
body.theme-vintage #board{
position:relative;
background:
linear-gradient(115deg,#3a352d 0,#191713 40%,#25221c 70%,#11100d 100%);
border:2px solid #5c5140;
border-radius:.15vw;
box-shadow:
0 3vw 7vw #000,
inset 0 0 2.5vw #000,
inset 0 2px #746954,
inset 0 -3px #080706
}
body.theme-vintage #board:before{
content:"";
position:absolute;
inset:.35%;
pointer-events:none;
border:1px solid #6d614d55;
box-shadow:inset 0 0 1vw #0008
}
body.theme-vintage .flap{
background:
linear-gradient(#201d18,#15130f);
color:#e0c998;
text-shadow:0 2px 0 #000,0 0 7px #9d7d3e55;
box-shadow:
inset 0 1px 0 #544a38,
inset 0 -3px 5px #050403,
0 1px 2px #000
}
body.theme-vintage .cell:nth-child(7n) .flap{transform:rotate(.12deg)}
body.theme-vintage .cell:nth-child(11n) .flap{transform:rotate(-.11deg)}
body.theme-vintage .cell:nth-child(13n) .flap{filter:brightness(.94)}
body.theme-vintage .flap:after{
background:#050403;
box-shadow:0 1px 1px #6a5b41
}
body.theme-vintage .cell:after{
background:
linear-gradient(120deg,transparent 0 65%,#ffffff08 66% 67%,transparent 68%),
radial-gradient(circle at 15% 18%,#ffffff09 0 1%,transparent 1.5%),
radial-gradient(circle at 72% 81%,#0000002b 0 1.2%,transparent 2%);
box-shadow:inset 0 0 .25vw #0008
}
/* 4) Mid-Century Airport */
body.theme-airport #stage{
background:
radial-gradient(ellipse at center,#2c3032 0,#121516 60%,#070809 100%)
}
body.theme-airport #board{
padding:1.25%;
background:
linear-gradient(145deg,#2b2f30,#131617 58%,#0d0f10);
border:2px solid #777a76;
border-radius:.22vw;
box-shadow:
0 2.4vw 6vw #000,
inset 0 0 1.8vw #000,
inset 0 2px #a1a49e55
}
body.theme-airport .flap{
background:linear-gradient(#25292a,#181b1c);
color:#eee3c4;
font-family:"Arial Narrow","Helvetica Neue Condensed",Arial,sans-serif;
font-size:clamp(12px,3.3vw,78px);
letter-spacing:-.02em;
text-shadow:0 2px 0 #000,0 0 5px #ffffff18;
box-shadow:inset 0 1px #515657,inset 0 -2px 4px #080909,0 1px 2px #000
}
body.theme-airport .flap:after{
background:#080909;
box-shadow:0 1px #5b6060
}
/* TV optimized animation */
:root{--flip-ms:58ms}.flap{will-change:transform;backface-visibility:hidden;contain:layout paint style}.flap.turn-a{animation:turnA var(--flip-ms) linear}.flap.turn-b{animation:turnB var(--flip-ms) linear}@keyframes turnA{0%{transform:rotateX(0)}48%{transform:rotateX(-78deg)}100%{transform:rotateX(0)}}@keyframes turnB{0%{transform:rotateX(0)}48%{transform:rotateX(-78deg)}100%{transform:rotateX(0)}}body.speed-normal{--flip-ms:130ms}body.speed-fast{--flip-ms:170ms}body.speed-veryfast{--flip-ms:95ms}#board.is-flipping .cell:after{box-shadow:none}