:root { --ink:#f7f0df; --acid:#e8ff59; --orange:#ff6b35; --night:#080b0e; }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--night); }
body { color:var(--ink); font-family:Arial, Helvetica, sans-serif; overflow-x:hidden; }
button { font:inherit; }

.game-shell { min-height:100svh; position:relative; overflow:hidden; padding:28px clamp(20px,5vw,76px) 36px; background:radial-gradient(circle at 50% 45%,#172028 0,#0c1116 42%,#07090c 72%); }
.game-shell:before { content:""; position:absolute; inset:0; opacity:.16; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:38px 38px; mask-image:linear-gradient(to bottom,black,transparent 88%); }
.ambient { position:absolute; border-radius:50%; filter:blur(100px); opacity:.12; pointer-events:none; }
.ambient-one { width:360px;height:360px;background:var(--orange);left:-180px;top:28%; }
.ambient-two { width:300px;height:300px;background:var(--acid);right:-160px;bottom:-60px; }
.topbar { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:auto; }
.brand { font-weight:900; font-size:13px; letter-spacing:.2em; }
.brand span { color:var(--orange); margin-right:9px; }
.score { display:flex; align-items:center; gap:8px; font-family:var(--font-mono),monospace; }
.score span { color:#87919a; font-size:9px; letter-spacing:.18em; margin-right:6px; }
.score strong { font-size:18px; font-weight:500; }
.score i { color:#45505a; font-style:normal; }
.hero { text-align:center; position:relative; z-index:2; margin:clamp(40px,7vh,72px) auto 12px; }
.eyebrow { color:#76818a; font:700 9px/1 var(--font-mono),monospace; letter-spacing:.32em; margin:0 0 15px; }
h1 { font-size:clamp(42px,7vw,82px); line-height:.88; letter-spacing:-.06em; margin:0; font-weight:950; }
h1 em { color:var(--acid); font-style:normal; }
.subtitle { margin:20px 0 0; color:#929ba1; font-size:clamp(13px,1.5vw,16px); }
.table { position:relative; z-index:2; max-width:970px; min-height:315px; margin:0 auto; }
.status { position:absolute; top:8px; left:50%; transform:translateX(-50%); color:#b4bdc2; white-space:nowrap; font:600 10px/1 var(--font-mono),monospace; letter-spacing:.13em; text-transform:uppercase; }
.status-dot { display:inline-block; width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 12px var(--acid);margin-right:10px; }
.phase-shuffling .status-dot { animation:blink .45s infinite alternate; }
.cups { height:270px; display:flex; align-items:flex-end; justify-content:center; gap:clamp(22px,7vw,95px); padding-bottom:28px; perspective:900px; }
.cup-slot { width:clamp(94px,14vw,142px); height:196px; position:relative; display:block; flex:none; padding:0; border:0; background:transparent; color:inherit; transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.cup-slot:disabled { cursor:default; }
.phase-choose .cup-slot { cursor:pointer; animation:readyPulse 1.8s ease-in-out infinite; }
.phase-choose .cup-slot:hover, .phase-choose .cup-slot:focus-visible { transform:translateY(-14px); outline:none; filter:drop-shadow(0 16px 24px rgba(232,255,89,.14)); }
.cup { position:absolute; width:100%; height:148px; bottom:28px; left:0; background:linear-gradient(100deg,#3d4247 0%,#747a7e 22%,#b3b5b2 48%,#696e72 72%,#31363a 100%); clip-path:polygon(17% 0,83% 0,97% 88%,91% 96%,9% 96%,3% 88%); filter:drop-shadow(0 18px 14px rgba(0,0,0,.6)); transition:transform .5s cubic-bezier(.2,.9,.2,1); z-index:3; }
.cup:before { content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(255,255,255,.025) 8px,transparent 9px); }
.cup-shine { position:absolute;left:33%;top:8%;width:14%;height:72%;background:linear-gradient(to right,transparent,rgba(255,255,255,.24),transparent);filter:blur(2px);transform:skewX(-4deg); }
.cup-logo { position:absolute; z-index:2; left:50%; top:27px; width:48%; height:70px; object-fit:contain; transform:translateX(-50%); filter:drop-shadow(0 2px 1px rgba(0,0,0,.35)); }
.cup-band { position:absolute; left:6%; right:6%; bottom:18px; height:18px; border-top:1px solid rgba(255,255,255,.3); border-bottom:1px solid #262a2d; background:linear-gradient(#73787b,#3e4346); }
.cup-rim { position:absolute; left:10%; right:10%; top:-7px; height:17px; border-radius:50%; background:linear-gradient(#929797,#303438); border:1px solid #95999a; }
.ball { position:absolute; z-index:2; width:34px;height:34px;border-radius:50%;left:50%;bottom:35px;opacity:0;transform:translate(-50%,8px) scale(.5);background:radial-gradient(circle at 35% 28%,#fff0b3 0 4%,#ff9e55 13%,#fb4c21 48%,#8f1607 100%);box-shadow:0 8px 18px #000,0 0 22px rgba(255,92,35,.45);transition:.35s ease; }
.ball.visible { opacity:1; transform:translate(-50%,0) scale(1); }
.lifted .cup { transform:translateY(-88px) rotate(-3deg); }
.cup-number { position:absolute; bottom:0; left:50%; transform:translateX(-50%); color:#657079; font:700 10px/1 var(--font-mono),monospace; letter-spacing:.15em; }
.phase-shuffling .cup-1 { animation:shuffleLeft 2.65s cubic-bezier(.55,.05,.45,.95); }
.phase-shuffling .cup-2 { animation:shuffleMid 2.65s cubic-bezier(.55,.05,.45,.95); }
.phase-shuffling .cup-3 { animation:shuffleRight 2.65s cubic-bezier(.55,.05,.45,.95); }
.winner .cup { filter:drop-shadow(0 12px 18px rgba(232,255,89,.22)); }
.winner .cup-number { color:var(--acid); }
.wrong .cup-number { color:var(--orange); }
.table-line { height:1px; width:88%; margin:-25px auto 0; background:linear-gradient(90deg,transparent,#343c42 20%,#596169 50%,#343c42 80%,transparent);box-shadow:0 12px 34px rgba(0,0,0,.8); }
.controls { position:relative;z-index:3;text-align:center;margin:-2px auto 0;min-height:94px; }
.primary { min-width:230px;border:0;color:#111;background:var(--acid);padding:0 0 0 26px;height:56px;display:inline-flex;align-items:center;justify-content:space-between;font-weight:950;font-size:12px;letter-spacing:.13em;cursor:pointer;box-shadow:0 12px 35px rgba(232,255,89,.12);transition:.2s ease; }
.primary:hover { transform:translateY(-3px);box-shadow:0 17px 42px rgba(232,255,89,.22); }
.primary b { height:100%;width:56px;display:grid;place-items:center;border-left:1px solid rgba(0,0,0,.16);font-size:21px; }
.controls p { color:#56616a;font:600 9px/1 var(--font-mono),monospace;letter-spacing:.13em;text-transform:uppercase;margin:14px 0; }
.progress { display:inline-block;width:230px;height:3px;margin:27px 0 26px;background:#252c31;overflow:hidden; }
.progress span { display:block;width:100%;height:100%;background:var(--acid);transform-origin:left;animation:progress 2.65s linear forwards; }
.progress.ready span { animation:none;transform:scaleX(1); }

@keyframes progress { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes blink { to{opacity:.25} }
@keyframes readyPulse { 50%{filter:drop-shadow(0 7px 10px rgba(232,255,89,.05))} }
@keyframes shuffleLeft { 0%,100%{transform:translate(0,0)} 18%{transform:translate(130%, -28px)} 38%{transform:translate(230%,0)} 58%{transform:translate(110%,-18px)} 78%{transform:translate(220%,0)} }
@keyframes shuffleMid { 0%,100%{transform:translate(0,0)} 18%{transform:translate(-115%,0)} 38%{transform:translate(112%,-25px)} 58%{transform:translate(-110%,0)} 78%{transform:translate(0,-20px)} }
@keyframes shuffleRight { 0%,100%{transform:translate(0,0)} 18%{transform:translate(0,-18px)} 38%{transform:translate(-225%,0)} 58%{transform:translate(0,-28px)} 78%{transform:translate(-220%,0)} }

@media(max-width:600px){
  .game-shell{padding:22px 14px 28px}.score span{display:none}.hero{margin-top:55px}.subtitle{margin-top:15px}.table{min-height:292px}.cups{gap:6px;height:250px}.cup-slot{width:96px;height:180px}.cup{height:132px}.cup-logo{top:24px;height:60px}.status{top:13px;font-size:8px}.table-line{width:98%}
  @keyframes shuffleLeft { 0%,100%{transform:translate(0)} 25%{transform:translate(103%,-20px)} 50%{transform:translate(205%)} 75%{transform:translate(105%,-16px)} }
  @keyframes shuffleMid { 0%,100%{transform:translate(0)} 25%{transform:translate(-103%)} 50%{transform:translate(103%,-18px)} 75%{transform:translate(-103%)} }
  @keyframes shuffleRight { 0%,100%{transform:translate(0)} 25%{transform:translate(0,-16px)} 50%{transform:translate(-205%)} 75%{transform:translate(0,-20px)} }
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}