@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{font-family:'Noto Sans KR',system-ui,sans-serif;color:#fff0d5;background:#120e1b;font-synthesis:none;--gold:#ffd35a;--amber:#ffba52;--brown:#3a211b;--border:#ac7547;--blue:#67cdfc}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 45% 20%,#6a2a30 0,transparent 55%),linear-gradient(135deg,#1f1525,#100c15);overflow-x:hidden}body::before{content:"";z-index:-2;position:fixed;inset:-32px;background:linear-gradient(#160b19aa,#170b17bb),url('./assets/ambient.webp') center/cover no-repeat;filter:saturate(1.6)}body::after{content:"";z-index:-1;position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 35%,#0b0614a6 100%)}button,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.42;cursor:not-allowed}button:focus-visible,select:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.app-shell{width:min(1760px,100%);margin:auto;padding:14px 20px 8px}.topbar{display:grid;grid-template-columns:1fr minmax(240px,420px) 1.35fr;align-items:start;gap:12px;min-height:144px}.stat-panel{display:flex;gap:10px;align-items:stretch;margin-top:14px}.stat{display:flex;align-items:center;gap:10px;flex:1;min-width:0;border-radius:14px;border:2px solid #9c6543;background:linear-gradient(160deg,#31212ae8,#0e0e1bea);box-shadow:0 4px 0 #160b0b,0 10px 21px #0008,inset 0 1px 0 #d5a46b55;padding:12px 14px;white-space:nowrap}.stat-icon{font-size:27px;filter:drop-shadow(0 2px 3px #000)}.stat div{min-width:0}.stat small{font-size:13px;font-weight:800;color:#fff2df;display:block}.stat strong{display:block;color:var(--gold);font-size:clamp(17px,2vw,27px);font-weight:900;line-height:1.2;font-variant-numeric:tabular-nums;text-shadow:0 3px 2px #2b1206}.stat em{font-size:.75em;color:#fff7e7;font-style:normal}.timer-stat{border-color:#6a7bc2}.timer-stat strong{color:#75d9ff}.brand{text-align:center;position:relative;z-index:2;margin:-6px auto 0;width:100%;filter:drop-shadow(0 7px 3px #130808)}.brand h1{font-family:'Black Han Sans','Noto Sans KR',sans-serif;font-size:clamp(56px,5.7vw,98px);font-weight:900;line-height:1;letter-spacing:-.08em;margin:2px 0 0;color:#ffbb36;-webkit-text-stroke:2px #50221a;text-shadow:3px 4px 0 #d64224,5px 8px 0 #5f2313,0 0 15px #ffac3460;transform:rotate(-4deg)}.brand-hat{position:absolute;top:-1px;left:10%;font-size:36px;transform:rotate(-25deg)}.brand-sub{display:inline-block;background:linear-gradient(#f7d79d,#b47d3a);padding:2px 24px 6px;border:3px solid #683317;border-radius:4px 4px 18px 18px;color:#32140d;font-size:21px;font-weight:900;transform:rotate(-2deg);margin-top:1px;box-shadow:0 4px 0 #341210}.page-layout{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:17px;align-items:start}.play-zone{min-width:0}.scene-header{height:77px;display:flex;align-items:center;justify-content:center;gap:14px;position:relative;z-index:1}.wood-banner{font-size:clamp(18px,2.2vw,30px);font-weight:900;letter-spacing:-.025em;color:#2a1210;text-shadow:0 2px #fff5d0;text-align:center;padding:12px 42px;background:linear-gradient(145deg,#fff3d2,#e4af7e);border:4px solid #753d28;border-radius:5px;box-shadow:0 5px 0 #43231a,0 8px 18px #0009,inset 0 0 0 4px #f9d8a1;width:min(740px,96%);min-height:68px}.sign-cord{height:52px;width:3px;background:linear-gradient(90deg,#38231e,#f8ad54,#3b2619);align-self:flex-start;flex:none}.stage-scene{height:clamp(400px,37vw,555px);position:relative;isolation:isolate;overflow:hidden;border-radius:16px;background:radial-gradient(ellipse at 63% 83%,#ec90401e,transparent 55%)}.stage-scene::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#21101c34 0%,#1f122100 42%,#17091425 100%)}.presenter{position:absolute;left:-4%;bottom:10%;height:96%;width:39%;object-fit:cover;object-position:15% center;filter:drop-shadow(0 9px 13px #140c0eaa);mask-image:linear-gradient(90deg,#000 74%,transparent 100%);pointer-events:none;z-index:1}.lantern{position:absolute;top:4%;width:25px;height:48px;border-radius:14px;background:radial-gradient(#fff7c3,#ffa542 49%,#8a2d16 74%);box-shadow:0 0 33px 12px #ff9a4272;border:3px solid #40221c}.lantern-a{left:2%}.lantern-b{right:6%}.table-disc{position:absolute;inset:auto 1% 2%;height:43%;z-index:2;border-radius:50% / 26%;background:repeating-linear-gradient(90deg,#6f3322 0 19%,#8d4526 20% 22%,#6a2b1b 23% 42%);border:11px solid #5c2e1e;box-shadow:inset 0 10px 15px #ffcf8771,inset 0 -18px 20px #2b110dcc,0 17px 2px #341910,0 27px 25px #000b}.table-disc:before{content:"";position:absolute;inset:6% 4% 29%;border:4px double #daa35c;border-radius:50%;background:radial-gradient(ellipse at 55% 40%,#aa4631aa,#781e27d0);box-shadow:inset 0 0 20px #f8b36155}.table-felt{position:absolute;inset:9% 9% 41%;border:2px dashed #dea15a7b;border-radius:50%}.cup-track{position:absolute;left:18%;right:3%;top:11%;height:77%;z-index:5;pointer-events:none}.cup{--lift:0px;position:absolute;z-index:3;bottom:16%;left:var(--slot-x,16.6667%);width:clamp(110px,12.8vw,198px);height:clamp(156px,17.1vw,256px);background:none;border:0;padding:0;pointer-events:auto;transform:translateX(-50%);transition:left var(--swap-time) cubic-bezier(.45,.05,.55,.95),filter .15s;filter:drop-shadow(0 10px 8px #19090cbd);touch-action:manipulation}.cup:hover:not(:disabled){filter:drop-shadow(0 0 17px #ffc359bb) drop-shadow(0 8px 7px #0009)}.cup .cup-shell{position:absolute;left:0;right:0;top:0;bottom:0;transform:translateY(calc(-1 * var(--lift)));transition:transform .35s ease-out;pointer-events:none;display:block}.cup-shell img{width:100%;height:100%;object-fit:contain}.cup .ball{position:absolute;bottom:0;left:32%;width:36%;z-index:-1;opacity:0;transition:opacity .16s}.cup .ball img{width:100%}.cup.has-ball .ball{opacity:0}.cup.has-ball.raised .ball{opacity:1}.cup.raised{--lift:70px}.cup.active-choice{filter:drop-shadow(0 0 25px #ffe176d5)}.cup.swapping .cup-shell{transform:translateY(-14px)}.cup-label{position:absolute;left:16.6667%;bottom:0;transform:translateX(-50%);background:linear-gradient(#2a1618,#170f18);border:2px solid #e3ad68;border-radius:12px 12px 6px 6px;box-shadow:0 4px 0 #351310;padding:5px 12px;color:#ffebc5;font-weight:900;font-size:16px;white-space:nowrap}.status-glow{position:absolute;pointer-events:none;left:50%;top:50%;width:20%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,#ffe39880,transparent 66%);opacity:0;z-index:10}.stage-scene.correct .status-glow{animation:flash .6s ease-out}.stage-scene.wrong .status-glow{background:radial-gradient(circle,#ff3b5880,transparent 66%);animation:flash .6s ease-out}@keyframes flash{25%{opacity:1;width:46%}100%{opacity:0;width:56%}}.action-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:2;margin-top:0;padding:9px 0}.settings-actions,.primary-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.setting-button{background:linear-gradient(#37313b,#1b1b2c);border:2px solid #8a6573;color:#f7ecf3;padding:12px 14px;border-radius:13px;font-weight:800;box-shadow:0 4px 0 #10070c;display:inline-flex;align-items:center;gap:8px}.setting-button select{border:0;background:transparent;color:#83d4ff;font-weight:900;cursor:pointer;max-width:85px}.setting-button option{color:#222}.action-prompt{border:2px solid #ff8873;box-shadow:0 0 17px #f5388d80,inset 0 0 14px #ab163866;background:#371223da;border-radius:15px;padding:12px 20px;color:#ffd662;font-weight:900;font-size:clamp(14px,1.6vw,22px);text-shadow:0 0 9px #ff7f32;white-space:nowrap}.main-button,.secondary-button{border-radius:14px;border:3px solid #c39d5b;padding:13px 18px;font-weight:900;font-size:clamp(16px,1.7vw,21px);color:#fff;white-space:nowrap;box-shadow:0 5px 0 #201417,0 8px 14px #050208aa;text-shadow:0 2px 2px #171013}.main-button{background:linear-gradient(#3ebc65,#0d7639);border-color:#62e28a}.secondary-button{background:linear-gradient(#747884,#353a45);border-color:#9499a6}.small-actions{display:flex;gap:8px;justify-content:end;margin-top:5px}.small-actions button{border-radius:7px;border:1px solid #9b6841;background:#301e25c9;color:#ebc8ad;padding:5px 10px;font-size:12px}.side-panel{display:flex;flex-direction:column;gap:14px;padding-top:4px}.info-card{border-radius:11px;border:3px solid #9c6745;background:linear-gradient(155deg,#251a25f2,#14121df5);box-shadow:0 8px 20px #06040999,inset 0 0 0 2px #4b2831;padding:15px 16px}.info-card h2{font-size:17px;color:#ffe29d;display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 0 12px}.info-card h2 small{font-size:11px;color:#c5aebd}.records>div{display:flex;justify-content:space-between;align-items:center;gap:6px;border-bottom:1px solid #7e5a423b;padding:6px 0;color:#eadddc;font-size:13px}.records>div:last-child{border:0}.records strong{font-variant-numeric:tabular-nums;color:#ffd54f;font-size:19px}.crown{color:#e2b857}.leaderboard{border-color:#b78355}.record-caption{font-size:10px;color:#d9a8a8}.leaderboard ol{list-style:none;margin:0;padding:0;min-height:130px}.leaderboard li{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #9d76542d;padding:7px 0;font-size:13px}.leaderboard li strong{color:#ffd757}.leaderboard .empty-record{color:#bcaeb7;justify-content:center;padding:28px 0}.notice{font-size:11px;line-height:1.5;color:#a69aaa;border-top:1px solid #ffffff20;padding-top:9px;margin:8px 0 0}.site-footer{display:flex;justify-content:space-between;color:#aa94a1;font-size:11px;padding-top:13px}.result-dialog{padding:0;background:none;border:0;overflow:visible;max-width:min(430px,90vw);color:#ffefd4}.result-dialog::backdrop{background:#0a0611c9;backdrop-filter:blur(5px)}.result-inner{background:linear-gradient(145deg,#332333,#171521);border:4px solid #e1ae6e;border-radius:22px;min-width:min(400px,90vw);padding:20px 26px 24px;text-align:center;box-shadow:0 20px 70px #000a,inset 0 0 0 2px #704834}.result-symbol{font-size:54px}.result-inner h2{font-size:32px;margin:5px 0;color:#ffdb65}.result-inner p{color:#e7cad4}.result-details{color:#ffdfb4;font-size:14px;line-height:1.9;margin:18px auto}.result-inner .main-button{min-width:150px}
@media(max-width:1250px){.app-shell{padding:12px}.topbar{grid-template-columns:1fr 240px 1.3fr;min-height:132px}.stat{padding:9px 8px;gap:5px}.stat small{font-size:11px}.stat-icon{font-size:19px}.stat strong{font-size:19px}.page-layout{grid-template-columns:minmax(0,1fr) 260px;gap:9px}.info-card{padding:12px}.cup-track{left:15%}.action-bar{flex-direction:column;justify-content:center}.stage-scene{height:440px}}
@media(max-width:900px){.topbar{grid-template-columns:1fr 1fr;min-height:172px}.brand{grid-column:1/-1;grid-row:1;margin:0 auto;height:85px}.brand h1{font-size:55px}.brand-sub{font-size:14px;padding:1px 20px 3px}.brand-hat{font-size:22px;left:29%}.stat-left{grid-row:2;grid-column:1}.stat-right{grid-row:2;grid-column:2}.stat-panel{margin-top:0}.page-layout{grid-template-columns:1fr}.side-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.leaderboard{grid-column:1/-1}.stage-scene{height:470px}.cup-track{left:19%;right:9%}.presenter{width:32%}.action-bar{flex-direction:row;justify-content:space-between}.scene-header{height:64px}.wood-banner{min-height:52px;padding:8px 14px}}
@media(max-width:640px){.app-shell{padding:7px}.topbar{gap:4px;min-height:151px}.brand{height:70px}.brand h1{font-size:47px}.brand-sub{font-size:12px}.stat-panel{gap:4px}.stat{gap:4px;padding:6px 4px;border-radius:7px;border-width:1px}.stat-icon{font-size:15px}.stat small{font-size:9px}.stat strong{font-size:14px}.page-layout{gap:5px}.scene-header{height:56px}.wood-banner{font-size:17px;min-height:45px;padding:6px 8px;border-width:2px}.sign-cord{display:none}.stage-scene{height:min(78vw,385px);min-height:280px}.presenter{width:35%;height:90%;left:-10%;bottom:14%;opacity:.65}.cup-track{left:9%;right:2%;top:11%;height:76%}.cup{width:clamp(87px,26vw,140px);height:clamp(125px,33vw,180px);bottom:20%}.cup-label{font-size:11px;padding:2px 7px;bottom:6%}.cup.raised{--lift:44px}.table-disc{height:45%;bottom:7%;border-width:6px}.action-bar{display:flex;flex-direction:column-reverse;gap:12px}.primary-actions{justify-content:center;gap:7px}.settings-actions{justify-content:space-between;width:100%}.action-prompt{padding:9px 10px;font-size:15px}.main-button,.secondary-button{font-size:15px;padding:10px 12px}.setting-button{padding:7px 9px;font-size:12px}.side-panel{gap:6px}.info-card{padding:10px}.info-card h2{font-size:12px}.records>div{font-size:12px}.records strong{font-size:15px}.side-panel .leaderboard{grid-column:1/-1}.small-actions{justify-content:center}.site-footer{font-size:10px;gap:12px}.site-footer span{max-width:38%;text-align:right}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;scroll-behavior:auto!important}}

.noltap-nav{max-width:1540px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;gap:16px;color:#ffedbb;font:700 14px system-ui}.noltap-nav a{color:inherit;text-decoration:none}.site-footer a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #ffd55c;outline-offset:4px}

/* Input lock must not dim the cup or the ball during the reveal/shuffle. */
.cup:disabled{opacity:1;cursor:default}

.cup[hidden],.cup-label[hidden]{display:none}
.topbar{grid-template-columns:1fr minmax(240px,420px) 1fr}
.cup-track.four-cups{left:13%;right:3%}
.four-cups .cup{width:clamp(84px,10.8vw,174px);height:clamp(125px,15vw,230px)}
@media(max-width:1250px){.topbar{grid-template-columns:1fr 240px 1fr}.four-cups .cup{width:clamp(82px,10.8vw,135px);height:clamp(120px,15vw,190px)}}
@media(max-width:900px){.topbar{grid-template-columns:1fr 1fr}.side-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.side-panel .leaderboard{grid-column:auto}.four-cups .cup{width:clamp(82px,16vw,135px);height:clamp(120px,23vw,190px)}}
@media(max-width:640px){.cup-track.four-cups{left:4%;right:4%}.four-cups .cup{width:clamp(60px,20vw,120px);height:clamp(100px,29vw,174px)}.four-cups .cup-label{padding:3px 6px}.side-panel{grid-template-columns:1fr}.stat small{font-size:10px}}