/* Arcade cabinet skin. Tile faces and game behavior remain unchanged. */
:root{--gold:#ffe66b;--muted:#a9a8ca;--line:#35315c;--cyan:#6af6ff;--pink:#ff68b8;background:#0c0b1c;color:#f0efff;font-family:'DM Sans',sans-serif}
body{background:radial-gradient(ellipse at 50% 10%,#27204a 0,transparent 65%),#0c0b1c;min-height:100vh;padding-bottom:24px}
header{height:108px;background:#100f24;border-bottom:3px solid var(--pink);box-shadow:0 3px 0 #522d70,0 8px 25px #ff68b815}
.brand{font-family:'Press Start 2P',monospace;font-size:25px;color:var(--cyan);text-shadow:3px 3px #6636a1;text-transform:uppercase;gap:18px}
.brand small{font:11px 'DM Sans',sans-serif;letter-spacing:4px;color:#faf4ff;text-shadow:none;margin-top:12px}
.seal{border:2px solid var(--cyan);border-radius:0;background:#172540;box-shadow:4px 4px 0 #484176;font-family:serif;text-shadow:none;color:var(--cyan);padding:8px;font-size:30px}
.rule-label{color:var(--pink);font-size:12px;letter-spacing:2px}
button,select,.search{border:2px solid #68618f;border-radius:0;background:#211d3b;color:#f3efff;box-shadow:3px 3px 0 #080715;font-weight:700}
button{transition:background .12s,transform .12s,box-shadow .12s;min-height:42px}
button:hover{background:#39305b;border-color:var(--cyan);color:#fff}
button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #080715}
button:focus-visible,select:focus-visible,.search:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
button:disabled{opacity:.5}
#new-game{color:var(--cyan);border-color:var(--cyan)}
main{max-width:1500px;padding-top:26px}
h1{font:18px/1.7 'Press Start 2P',monospace;color:#fff;margin-top:8px;text-shadow:2px 2px #624483}
h1 span{font:14px 'DM Sans',sans-serif;color:var(--muted);text-shadow:none}
.eyebrow{font-size:12px;letter-spacing:2px;color:var(--cyan)}
.game-heading{margin-bottom:22px}
select{padding:9px;color:var(--cyan)}
.layout{gap:24px;align-items:start}
.table{height:455px;border:8px solid #383354;border-radius:4px;background:radial-gradient(ellipse at 50% 45%,#252547,#14152d);box-shadow:0 0 0 2px #6a5d8b,0 0 0 5px #0b0a19,0 9px 0 #080714,inset 0 0 0 2px #6af6ff66,inset 0 0 60px #050719}
.table:before{inset:9px;border:1px solid #6af6ff55;border-radius:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,#09091c18 3px,#09091c18 4px);pointer-events:none}
.player-title{color:#eeebff;letter-spacing:.5px}
.wind-badge,.avatar{border-radius:0;border:1px solid #7972a0;background:#19192f;color:var(--cyan)}
.north .wind-badge{color:var(--pink);border-color:#ff68b870}
.east .wind-badge{color:var(--gold);border-color:#ffe66b70}
.back{border-radius:1px;border:1px solid #7bcfff;background:repeating-linear-gradient(135deg,#443180 0,#443180 3px,#56459c 3px,#56459c 6px);box-shadow:0 2px 0 #9cb0ea,0 4px 0 #151329}
.wind-rose{color:#928ab4}
.wind-rose b{color:var(--cyan);border:2px solid var(--cyan);background:#1b2140;box-shadow:0 0 18px #6af6ff18}
#wall-count{color:var(--cyan);font:14px/1.5 ui-monospace,monospace}
.table-line{background:var(--pink);width:48px;height:2px}
.self-label{color:var(--gold);font-weight:700;white-space:nowrap}
.river-label{color:#b9b4d6;font-size:12px}.last-label{color:#ccc5e5;font-size:12px}
aside{background:#141226;border:2px solid var(--line);box-shadow:4px 4px 0 #080713;padding:18px}
.aside-head .eyebrow{color:var(--pink)}
.score-row{margin-top:14px}.score-row strong{color:var(--gold);font:16px 'Press Start 2P',monospace}
.score-row.active .avatar{color:var(--gold);border-color:var(--gold);box-shadow:0 0 12px #ffe66b20}
.aside-rule{margin:18px 0}.tip p{color:#c9c4df}.tip>span{color:var(--cyan);font-size:12px}
.tip button{font-size:14px;box-shadow:none;min-height:32px;background:none;border:0;color:var(--cyan)}
#log li{color:#b4afce}#log li:first-child{color:#f1e5ff}
.rack{margin-top:26px;padding:18px 20px 14px;border:2px solid #494064;background:linear-gradient(135deg,#211a38,#16152c);box-shadow:0 6px 0 #080713;border-top:3px solid var(--pink)}
.rack-heading{margin-bottom:18px}.rack-heading .eyebrow{color:var(--pink)}
#hint{font-size:14px;color:var(--cyan);padding:8px 12px}
.tile{border-radius:2px;border-color:#d8daef;box-shadow:0 3px 0 #bbb8d3,0 5px 0 #686283,0 7px 0 #090919}
.tile.small-tile{border-radius:1px;box-shadow:0 2px 0 #797293}
.hand .tile{min-height:0}.tile.selected,.tile.recommended{outline-color:var(--gold);box-shadow:0 3px 0 #bdb8d8,0 5px 0 #686283,0 0 20px #ffe66b35}
.hand .tile:hover{border-color:var(--cyan)}
#status{color:#ece4ff;font-size:15px}.primary{background:var(--gold);border-color:#fff3a7;color:#251b35;box-shadow:3px 4px 0 #997045;font-weight:800}.primary:hover{background:#fff19a;color:#251b35;border-color:#fff8cf}
#actions button{white-space:normal;max-width:100%;font-size:14px}
.compact-scores{color:#c4bfdc}.compact-scores b{color:var(--gold);font-family:ui-monospace,monospace}
dialog{background:#17142c;border:3px solid var(--cyan);border-radius:0;box-shadow:7px 7px 0 #65408e,0 30px 100px #000b}
dialog::backdrop{background:#070613d9;backdrop-filter:blur(3px)}
dialog h2{font:18px/1.65 'Press Start 2P',monospace;color:var(--gold)}dialog h3{color:var(--cyan)}dialog p,dialog li{color:#d3cee7}dialog .close{box-shadow:none;color:var(--pink);background:transparent}.search{background:#0e0d20}.result-score{font:32px 'Press Start 2P',monospace;color:var(--gold)}.fan-item b{color:var(--gold)}
@media(min-width:1500px){.table{height:500px}}
@media(max-width:1000px){.table{height:420px}.rack{padding:16px 10px}.compact-scores{font-size:14px}}
@media(max-width:650px){header{height:88px;padding:0 14px}.brand{font-size:17px;gap:11px}.brand small{font-size:10px;letter-spacing:2px;margin-top:10px}.seal{font-size:25px;padding:5px}.header-right button{font-size:12px;padding:8px}.game-heading{align-items:center}h1{font-size:14px;line-height:1.8}h1 span{font-size:13px;margin-top:4px}.eyebrow{font-size:11px}.table{height:405px;border-width:6px}.rack{margin-top:20px;padding:14px 6px 12px}.rack-heading{gap:8px;padding:0 3px}.rack-heading>div{gap:5px}#hand-info{font-size:12px}#hint{font-size:12px;padding:6px;white-space:nowrap}.hand{gap:2px}.hand .tile{width:clamp(18px,5.35vw,34px);height:49px}.hand .drawn{margin-left:4px}.action-row{padding:0 4px;gap:6px}#status{font-size:14px}.compact-scores{font-size:12px;gap:7px}#wall-count{font-size:12px}.self-label{font-size:12px}.river-label{font-size:10px}dialog{padding:20px}dialog h2{font-size:15px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
/* Keep all fourteen tiles inside the cabinet at every viewport width. */
.hand{--rack-spacing:78px}
.hand .tile{width:min(49px,calc((100% - var(--rack-spacing))/14));height:auto;aspect-ratio:49/68}
@media(max-width:650px){.hand{--rack-spacing:30px}.hand .tile{width:min(34px,calc((100% - var(--rack-spacing))/14))}}
.hand{align-items:flex-start}
#music-toggle{white-space:nowrap;color:var(--muted)}
#music-toggle[aria-pressed="true"]{color:var(--gold);border-color:var(--gold)}
@media(max-width:650px){header{height:auto;min-height:112px;flex-wrap:wrap;gap:14px;padding:16px 14px}.header-right{margin-left:auto}.header-right button{min-height:38px}.brand{font-size:16px}}

.announcer-caption{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:1000;max-width:min(90vw,560px);padding:10px 18px;background:#140d2e;border:2px solid #ffcf54;box-shadow:4px 4px 0 #000;color:#ffedaa;font-family:monospace;font-weight:bold;text-align:center;pointer-events:none;text-transform:uppercase}.announcer-caption[hidden]{display:none}