/* GBS tactile arcade controls, with a phone-first play surface. */
:root{font-family:'Poppins',sans-serif;--ink:#35251e;--orange:#c55b25;--cream:#f3dfc3;--line:#b99877;background:#ead3b3}
body{background:radial-gradient(ellipse at 50% 0%,#ffeacb,transparent 75%),#ead3b3}
h1,h2,h1 em,.record strong,.feedback,.feedback small,.result-total{font-family:'Poppins',sans-serif}
h1{font-weight:800;line-height:1.1;text-transform:uppercase;letter-spacing:-1.5px;font-size:clamp(30px,4vw,46px)}h1 em{font-style:normal;font-weight:800}
.topbar{height:72px;border-bottom:2px solid #b89472}.wordmark{font-size:16px}.wordmark span{font-size:12px;letter-spacing:4px}.quiet{min-height:44px}
main{padding-top:20px}.intro .eyebrow{font-size:12px}.intro>p:last-child{font-size:16px;margin:10px 0 18px}
.modes{background:#4a3429;border:3px solid #2b1d18;border-radius:18px;padding:8px;box-shadow:inset 0 2px 1px #a07957,0 5px 0 #2c1e18;margin-bottom:24px;gap:8px}
.modes button{font-size:14px;letter-spacing:0;color:#f8e6cd;background:linear-gradient(#70503e,#4e352a);border:2px solid #2b1c17;border-radius:10px;box-shadow:inset 0 2px 0 #b28a67,0 3px 0 #211610;min-height:52px;padding:12px 20px}
.modes button[aria-pressed=true]{background:linear-gradient(#ed9b4e,#cf662c);color:#27170e;box-shadow:inset 0 2px 1px #ffd397,0 3px 0 #70310f;border-color:#8b431b}
.modes button:active{transform:translateY(2px);box-shadow:inset 0 2px 5px #0004}.modes button span{font-size:12px;opacity:.8}
.arena{border:4px solid #35251e;border-radius:24px;background:#efdbbd;box-shadow:inset 0 2px 0 #fff0d9,0 8px 0 #76513b,0 16px 24px #43281626}
.arena-top{background:linear-gradient(#5b4031,#3c2a22);color:#ffe8c8;padding:15px 22px;font-size:12px;font-weight:600;letter-spacing:.6px;border-bottom:3px solid #241812;gap:8px}
.play-stats{margin:12px 18px 0;padding:10px 16px;background:#35251e;border:2px solid #231812;border-radius:12px;color:#fff0d7;box-shadow:inset 0 3px 6px #0006}
.play-stats>div>span{color:#e0bb90;font-size:12px;letter-spacing:1px}.play-stats strong{font-size:28px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.round-dots span{width:20px;height:7px;background:#70503b}.round-dots .current{background:#f6a85b;box-shadow:0 0 5px #f6a85b66}.round-dots .done{background:#f8ddae}
.stage{height:390px;background:radial-gradient(ellipse,#fff3db 0%,#efdbbd 68%)}.shelf{bottom:15px;left:5%;right:5%;height:17px;border-radius:5px}
.feedback{font-size:42px;top:29%;font-weight:800;-webkit-text-stroke:1px #6d3d20;text-shadow:0 3px 0 #61351f,0 4px 18px #23160d}.feedback small{-webkit-text-stroke:0;font-weight:600;font-size:16px}
.timer{height:7px;border-radius:5px;overflow:hidden;background:#baa184;border:1px solid #957555}.timer>div{background:#bd5928}
.play-bottom{padding:0 20px 12px}.play-bottom p{font-size:16px;margin:12px 0;min-height:24px}
.primary{border:3px solid #753611;border-radius:18px;background:linear-gradient(#f9b168,#e98639 48%,#cd5b22);color:#2d190e;box-shadow:inset 0 2px 0 #ffe2b2,0 6px 0 #763313,0 8px 12px #45251940;min-height:62px;font-size:16px;font-weight:800;letter-spacing:.4px;transition:transform .08s,box-shadow .08s;width:100%;max-width:440px}
.primary:hover{background:linear-gradient(#ffbf7c,#e68a43)}.primary:active,.primary.held{transform:translateY(5px);box-shadow:inset 0 3px 7px #81360c60,0 1px 0 #763313;background:linear-gradient(#d96e2b,#e99346)}
.text-button{min-height:44px;font-size:14px}.play-bottom .text-button{font-size:14px;margin-top:8px}
.start-screen{padding-bottom:24px;min-height:460px}.start-screen img{height:330px;max-width:300px}.start-screen p{font-size:16px}.start-screen strong{font-weight:700;font-size:18px}
.arena-bottom{font-size:14px;padding:16px;background:#dec29c}.arena-bottom>span:last-child{font-size:12px}
.record{border:3px solid #211711;box-shadow:inset 0 2px 0 #805c42,0 4px 0 #76513b;border-radius:16px}.record p,.record .eyebrow,.badge,.ranking-note,.table-head,.rank-hint,.daily p,.daily small,footer>span,.prototype-note{font-size:12px;line-height:1.6}.record strong{font-weight:800}.leaderboard{padding:16px;background:#f6e7d0;border:2px solid #bd9770;border-radius:16px}#ranking li{font-size:14px}.daily label{font-size:14px}.daily input{width:24px;height:24px}.section-title h2{font-weight:700}
.results h2{font-weight:700}.result-total{font-weight:800}.result-rounds div{border:2px solid #b68c60;border-radius:10px;background:#fff0d4}.result-rounds span,.result-rounds small{font-size:12px}.results .primary{margin-bottom:12px}
dialog{border:3px solid #493022}dialog p{font-size:16px}.playing .prototype-note{display:none}
@media(max-width:700px){
 .topbar{height:60px;padding:0 16px}.topbar .quiet{font-size:12px}.wordmark{font-size:13px}.wordmark span{font-size:12px;letter-spacing:2px}
 main{padding:16px 10px 20px}.intro .eyebrow{font-size:12px;letter-spacing:1px}.intro h1{font-size:30px;margin:10px 0}.intro>p:last-child{font-size:14px;margin-bottom:14px}
 .modes{width:100%;padding:6px;gap:5px;margin-bottom:18px;border-radius:14px}.modes button{padding:8px 3px;font-size:12px;letter-spacing:0;min-width:0;line-height:1.4}.modes button span{display:block;padding:0;font-size:12px}
 .arena{border-width:3px;border-radius:18px}.arena-top{font-size:12px;padding:12px;letter-spacing:0}.play-stats{margin:10px 10px 0;padding:8px 12px}.play-stats strong{font-size:26px}.round-dots{gap:5px}
 .stage,.playing .stage{height:clamp(220px,calc(100svh - 385px),500px)}
 .playing .topbar{height:52px}.playing main{padding-top:8px}.playing .modes{margin-bottom:12px}.playing .modes button{min-height:44px;padding:8px 3px}.playing .modes button span{display:none}.playing .arena-top{padding:10px 12px}
 .play-bottom{padding:0 14px max(6px,env(safe-area-inset-bottom))}.play-bottom p{font-size:14px;line-height:1.5;margin:10px 0}.primary{min-height:62px;font-size:16px}.play-bottom .text-button{font-size:14px}.timer{margin:0 16px}
 .start-screen{padding:0 16px 24px;min-height:0}.start-screen img{height:clamp(255px,38svh,355px);width:100%;max-width:300px}.start-screen strong{font-size:16px}.start-screen p{font-size:14px;margin:8px 0 16px}
 .arena-bottom{font-size:12px;padding:14px;gap:10px}.arena-bottom>span:last-child{font-size:12px;white-space:normal}
 .sidebar{display:flex;gap:16px;margin-top:8px}.record{padding:16px}.record>div{margin:8px 0}.record strong{font-size:42px}.record p{font-size:14px}.leaderboard{padding:16px}#ranking li{font-size:14px}.ranking-note,.rank-hint,.table-head,.badge{font-size:12px}.daily label{font-size:16px;gap:10px}.daily small,.daily p{font-size:12px}
 footer{gap:12px;flex-wrap:wrap}footer>span,footer .text-button,.prototype-note{font-size:12px}.playing main{padding-top:10px}.playing .intro{display:none}
}
@media(max-height:520px) and (orientation:landscape){.playing .stage{height:240px}.playing .play-stats{margin-top:6px}.playing .modes button span{display:inline}.playing .topbar{height:44px}.playing .modes button{min-height:44px}.playing .play-bottom p{margin-top:5px}}

/* Original drip artwork sits behind the WebGL can throughout gameplay. */
.playing .stage::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,#fff0d54d 0%,transparent 62%),url('assets/gbs-coffee-background.png') center center / cover no-repeat}
.playing .stage .shelf,.playing .stage .target-line{z-index:1}
.playing .stage.flash::before{opacity:.55}
@media(max-width:700px){.playing .stage::before{background-position:center center,48% center}}

/* Original supplied key visual and original PDF logo. */
body{background:#edc695;isolation:isolate;min-height:100svh}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:#edc695 url('assets/gbs-coffee-background.png') center top / cover no-repeat}
.topbar{background:#fff0d8e8;border-bottom-color:#ae7845;max-width:none;padding-inline:max(24px,calc((100vw - 1240px)/2));box-shadow:0 3px 14px #68401b20}
.wordmark{display:flex;align-items:center;flex-shrink:0}.wordmark img{display:block;width:145px;height:auto;max-height:58px;object-fit:contain}
.intro{width:fit-content;max-width:100%;margin:0 auto 18px;padding:12px 24px 4px;border-radius:20px;background:#fff0d9dc;box-shadow:0 4px 22px #76482112}
.daily{background:#f8e7cfee;padding:16px;border:2px solid #bd9770;border-radius:14px}.daily p{margin-left:34px}
footer,.prototype-note{background:#fff0d9e8;border-radius:12px;padding:12px 16px}footer{margin-top:24px}.prototype-note{color:#66452d}
@media(max-width:700px){
 body::before{background-size:auto 100%;background-position:center top}
 .topbar{padding-inline:16px}.wordmark img{width:120px;max-height:46px}
 .intro{padding:10px 14px 2px;margin-bottom:14px}.daily{padding:16px}.daily p{margin-left:34px}
 .playing .wordmark img{width:106px;max-height:42px}
}

/* Gameplay uses a quiet coffee alcove, with only the original top drip edge. */
.playing .stage{background:radial-gradient(ellipse at 50% 48%,#dca66a 0%,#9b6742 45%,#4a3025 100%);isolation:isolate}
.playing .stage::before{inset:0 0 auto;height:clamp(65px,22%,100px);background:url('assets/gbs-coffee-background.png') center top / 100% auto no-repeat;opacity:.9;mask-image:linear-gradient(#000 55%,transparent);-webkit-mask-image:linear-gradient(#000 55%,transparent)}
.playing .stage .shelf{background:linear-gradient(#c09262,#71482d);box-shadow:0 10px 20px #1e100d66}

/* Feedback: uniform, unobstructed gameplay background. */
.playing .stage{background:#b8895e}
.playing .stage::before{content:none}