/* The phone's room furniture, shared by every bite: the clock and your score up top, the big call in
   the middle (3, 2, 1, Go, the bell), the card at the bottom (join, the lobby, the result). */
@font-face { font-family: Bricolage; src: url(../fonts/bricolage-800.ttf); font-weight: 800; font-display: block; }
@font-face { font-family: 'DM Sans'; src: url(../fonts/dm-sans-400.ttf); font-weight: 400; }
@font-face { font-family: 'DM Sans'; src: url(../fonts/dm-sans-600.ttf); font-weight: 600; }
:root { --cream: #f6ead7; --gold: #f2b84b; --ink: #1a120c; --red: #e0533d; --glass: rgba(20,12,7,.62); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0c0705; overflow: hidden; overscroll-behavior: none; }
body { font-family: 'DM Sans', system-ui, sans-serif; color: var(--cream); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.glass { background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

#hud { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 12px; right: 12px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 10px; pointer-events: none; opacity: 0; transition: opacity .4s; }
#hud.on { opacity: 1; }
#mine { justify-self: start; display: grid; gap: 3px; padding: 8px 14px 9px; border-radius: 16px; }
#mine small { font: 600 10px 'DM Sans'; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
#mine b { font: 800 30px/1 Bricolage; font-variant-numeric: tabular-nums; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
#mine b.pop { transform: scale(1.3); }
#clock { font: 800 26px/1 Bricolage; letter-spacing: -.01em; font-variant-numeric: tabular-nums; padding: 8px 15px; border-radius: 999px; transition: background .3s, color .3s; }
#clock.last { background: var(--red); color: #fff6ea; }
#side { justify-self: end; text-align: right; display: grid; gap: 4px; padding: 8px 14px 9px; border-radius: 16px; }
#side small { font: 600 10px 'DM Sans'; letter-spacing: .16em; text-transform: uppercase; color: rgba(246,234,215,.66); }
#side span { font: 800 17px/1.1 Bricolage; }

#call { position: fixed; left: 0; right: 0; top: 28%; text-align: center; pointer-events: none; font: 800 92px/0.9 Bricolage; letter-spacing: -.035em; color: var(--cream); text-shadow: 0 10px 40px rgba(0,0,0,.55); opacity: 0; }
#call small { display: block; font: 600 15px 'DM Sans'; letter-spacing: .14em; text-transform: uppercase; margin-top: 14px; color: rgba(246,234,215,.85); text-shadow: 0 2px 12px rgba(0,0,0,.6); }
#call.gold { color: var(--gold); }
#call.mid { font-size: 64px; }
#call.go { animation: call 1.2s cubic-bezier(.2,.9,.3,1.15) forwards; }
#call.hold { animation: callIn .35s cubic-bezier(.2,.9,.3,1.3) forwards; }
@keyframes call { 0% { opacity: 0; transform: scale(.6); } 18% { opacity: 1; transform: scale(1.06); } 30% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes callIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

#hint { position: fixed; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 40px); text-align: center; font: 600 15px/1.3 'DM Sans'; padding: 11px 18px; border-radius: 999px; pointer-events: none; opacity: 0; transition: opacity .4s; }
#hint.on { opacity: 1; }

#card { position: fixed; left: 0; right: 0; bottom: 0; padding: 90px 24px calc(28px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(12,7,4,.88) 34%); opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .45s cubic-bezier(.2,.9,.3,1.2); pointer-events: none; }
#card.on { opacity: 1; transform: none; pointer-events: auto; }
#card small { font: 600 12px 'DM Sans'; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
#card h1 { font: 800 46px/0.95 Bricolage; letter-spacing: -.03em; margin: 10px 0 0; text-wrap: balance; }
#card h1 em { font-style: normal; color: var(--gold); }
#card p { font: 400 16px/1.4 'DM Sans'; color: rgba(246,234,215,.84); margin: 10px 0 0; max-width: 32ch; }
#card .big { font: 800 76px/0.9 Bricolage; letter-spacing: -.03em; color: var(--gold); font-variant-numeric: tabular-nums; margin-top: 12px; }
#card .row { display: flex; gap: 10px; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.btn { font: 600 16px 'DM Sans'; color: var(--ink); background: var(--gold); border: 0; border-radius: 999px; padding: 15px 26px; cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,.35); transition: transform .15s cubic-bezier(.3,1.6,.5,1); }
.btn:active { transform: scale(.96); }
.btn.ghost { background: rgba(246,234,215,.1); color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(246,234,215,.3); }
#card:not(.on) .btn, #card:not(.on) button, #card:not(.on) input { pointer-events: none; }
.stepper { display: flex; align-items: center; gap: 4px; background: rgba(246,234,215,.08); border-radius: 999px; padding: 5px; }
.stepper button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(246,234,215,.12); color: var(--cream); font: 600 22px 'DM Sans'; cursor: pointer; }
.stepper output { min-width: 96px; text-align: center; font: 800 26px Bricolage; }
input.name, input.code { font: 600 17px 'DM Sans'; color: var(--cream); background: rgba(246,234,215,.08); border: 0; border-radius: 999px; padding: 15px 20px; width: 100%; outline: none; box-shadow: inset 0 0 0 1.5px rgba(246,234,215,.2); }
input.code { text-transform: uppercase; letter-spacing: .3em; width: 150px; text-align: center; }
input:focus { box-shadow: inset 0 0 0 1.5px var(--gold); }

#toast { position: fixed; left: 50%; top: 40%; transform: translate(-50%, 10px); text-align: center; pointer-events: none; opacity: 0; transition: opacity .3s, transform .4s cubic-bezier(.2,.9,.3,1.3); }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast b { display: block; font: 800 64px/0.9 Bricolage; letter-spacing: -.03em; color: var(--gold); text-shadow: 0 6px 30px rgba(0,0,0,.6); }
#toast span { display: inline-block; margin-top: 10px; font: 800 20px/1.15 Bricolage; padding: 9px 16px; border-radius: 999px; }

#loading { position: fixed; inset: 0; display: grid; place-items: center; background: #0c0705; font: 600 12px 'DM Sans'; letter-spacing: .2em; text-transform: uppercase; color: rgba(246,234,215,.5); transition: opacity .5s; }
#loading.gone { opacity: 0; pointer-events: none; }