/* Local visual proposal: maple, walnut, oxblood and club green. */
:root{--ink:#f7eddb;--gold:#e5c791;--gold2:#c09b61;--panel:rgba(20,37,33,.96);--panel2:#19302a;--line:rgba(214,183,127,.24);--f:'DM Sans',system-ui,-apple-system,sans-serif}
html,body{background:#101b19}
.screen{background:radial-gradient(ellipse at 50% 30%,rgba(15,28,24,.35),rgba(9,20,17,.94))}
#setup,#tourS,#tricksS,#howS,#online{background:radial-gradient(ellipse at 50% 20%,rgba(30,52,43,.96),rgba(9,20,17,.98));backdrop-filter:blur(8px)}
#title{background:radial-gradient(ellipse at 50% 38%,rgba(13,26,22,0),rgba(9,20,17,.48) 62%,rgba(9,20,17,.9))}
#load{background:#101b19}
.logo::before{content:'A CLASSIC TABLE GAME';font-size:10px;letter-spacing:3.2px;font-weight:600;color:var(--gold);margin-bottom:12px}
.logo canvas{width:84px;height:84px;filter:drop-shadow(0 6px 9px #0005)}
.logo h1{font:500 68px/.95 Georgia,'Times New Roman',serif;letter-spacing:-3px;color:#f7eddb;text-shadow:0 4px 24px #0005;margin:8px 0 0}
.logo .tag{font-size:13px;letter-spacing:.1px;opacity:.68;margin-top:12px}
.menu{gap:10px;margin-top:24px}
.btn{border-radius:14px;background:linear-gradient(150deg,#244237,#193028);box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 #ffffff08,0 5px 14px #0002;font-size:17px;font-weight:700;padding:12px 16px;min-height:60px}
.btn.primary{color:#2d2015;background:linear-gradient(135deg,#efdcba,#d4b783);box-shadow:inset 0 1px 0 #ffffffa0,inset 0 -2px 0 #7f5b3830,0 6px 18px #0003}
.btn .ico{width:32px;height:32px;color:var(--gold)}
.btn.primary .ico{color:#6d4726}
.btn small{font-size:11px;font-weight:500;opacity:.64;margin-top:5px}
.menu .row2 .btn{font-size:14px;gap:9px;padding:12px;min-height:74px}
.menu .row2 .btn .ico{width:26px}
.menu .row2 .btn .ico svg{width:24px;height:24px}
.foot{margin-top:8px;gap:8px}
.chip{font-size:11px;font-weight:500;padding:9px 15px;background:rgba(17,34,28,.85);box-shadow:inset 0 0 0 1px var(--line)}
.stats{font-size:11px}
h2{font-size:25px;letter-spacing:-.7px;text-shadow:none}
.lbl{color:var(--gold);font-size:10px;letter-spacing:1.8px}
.seg{background:#0e211b;border-radius:13px;padding:4px;box-shadow:inset 0 0 0 1px var(--line)}
.seg button{font-size:13px;font-weight:600;border-radius:9px}
.seg button.on{color:#2d2015;background:linear-gradient(135deg,#efdcba,#d4b783);box-shadow:none}
.ibtn{background:rgba(18,34,28,.9);box-shadow:inset 0 0 0 1px var(--line),0 4px 12px #0003}
.plate{color:#33281f;background:linear-gradient(135deg,#f2e7d1,#e1cfac);border-radius:14px;gap:9px;padding:8px;box-shadow:inset 0 0 0 1px #fff5,0 5px 16px #0003}
.plate.turn{box-shadow:inset 0 0 0 2px #bf944b,0 0 0 3px #dbc18c26,0 5px 16px #0004}
.plate .nm{font:700 13px/1.15 var(--f);letter-spacing:-.2px}
.plate .sub{font:500 10px/1.3 var(--f);opacity:.7;margin-top:2px}
.plate .av{width:36px;height:36px;box-shadow:0 2px 5px #0003,inset 0 0 0 1px #ffffff80}
.plate .tray{gap:3px;margin-top:4px}
.plate .tray i{width:8px;height:8px;opacity:.25}
.plate .tray i.got{opacity:1}
.plate .pts{color:#79402b;font-size:22px}
#status{font:600 12px/1.3 var(--f);letter-spacing:.1px;padding:8px 16px;color:#ead8b4;background:#19342b;box-shadow:inset 0 0 0 1px #c2a66f45,0 4px 12px #0002}
#status.hot{color:#f0dcb5;background:linear-gradient(150deg,#345447,#1c382e)}
#status.hot::before{content:'';display:inline-block;vertical-align:1px;width:5px;height:5px;border-radius:50%;background:#d1b778;margin-right:8px}
#status.warn{background:#913b31;color:#fff}
#slider{background:linear-gradient(150deg,#21392e,#14281f);box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 #fff1,0 5px 16px #0002}
#slider .trk{height:3px;background:linear-gradient(90deg,#8e754e,#d3b67e,#8e754e);opacity:.6}
#slider .knob{background:radial-gradient(circle at 35% 25%,#fff9ea,#e8dac0 70%,#c4ae8c);box-shadow:0 3px 9px #0005,inset 0 0 0 3px #a43c31,inset 0 0 0 6px #f7eddb}
#slider .knob::after{content:'✦';display:grid;place-items:center;height:100%;color:#9b382d;font-size:23px}
#slider .hint{font-size:11px;font-weight:500;letter-spacing:.1px;color:#d9c6a5;opacity:.78}
.card{background:linear-gradient(145deg,#254236,#122b22);border-radius:22px;box-shadow:inset 0 0 0 1px var(--line),0 22px 65px #0006;padding:24px 20px}
.card h3{font:500 34px/1.1 Georgia,serif;color:#f1dfbd;text-shadow:none;letter-spacing:-.7px}
.card .sub{font-size:13px;line-height:1.5;opacity:.72;margin-top:0}
.toggle{font-size:14px;border-color:#dec39422}
.ostats div{font-size:11px;background:#0d251c}
.toggle.on .sw{background:#b7945c}
.stop,.tcard,.hcard,.ocard{border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}
.hcard b{font-size:16px}.hcard p{font-size:14px;line-height:1.6}
.go{font-size:17px;box-shadow:inset 0 -2px 0 #7f5b3830,0 -8px 20px #0c211bcc,0 6px 18px #0003}
.btn:focus-visible,.chip:focus-visible,.ibtn:focus-visible,.seg button:focus-visible{outline:2px solid #f4deaf;outline-offset:3px}
@media(max-height:520px) and (orientation:landscape){.logo::before{display:none}.logo h1{font-size:47px;margin:0}.menu{margin-top:0;gap:7px}.menu .btn{min-height:43px;font-size:14px;padding:8px 14px}.menu .row2 .btn{min-height:44px;padding:8px 12px}.foot{margin-top:3px}.menu .row2 .btn small{display:none}}
@media(max-width:380px) and (min-height:521px){.screen{padding-top:42px}.logo canvas{width:64px;height:64px}.logo h1{font-size:58px}.menu{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.btn,.plate,.bubble,#toast{transition:none}}