:root{--cream:#fbf3e6;--paper:#f3e5cf;--ink:#4a3326;--muted:#8d735f;--you:#c4603f;--you-dark:#9a4830;--ai:#4f8a70;--ai-dark:#3a6c56;--tile-top:#fff7ea;--tile-bottom:#efdcbd;--tile-edge:#d6bb92;--glass:#fbf3e6e6;--shadow:0 18px 50px #1e0e0473;--font-display:"Fredoka", "Nunito", system-ui, sans-serif;--font-body:"Nunito", system-ui, sans-serif;font-family:var(--font-body);color:var(--ink)}:root:lang(ar),:root:lang(fa){--font-display:"Fredoka", "Baloo Bhaijaan 2", "Geeza Pro", "Segoe UI", sans-serif;--font-body:"Nunito", "Baloo Bhaijaan 2", "Geeza Pro", "Segoe UI", sans-serif}:root:lang(ur){--font-display:"Fredoka", "Noto Nastaliq Urdu", "Urdu Typesetting", "Segoe UI", sans-serif;--font-body:"Nunito", "Noto Nastaliq Urdu", "Urdu Typesetting", "Segoe UI", sans-serif}:root:lang(hi){--font-display:"Fredoka", "Baloo 2", "Kohinoor Devanagari", "Nirmala UI", sans-serif;--font-body:"Nunito", "Baloo 2", "Kohinoor Devanagari", "Nirmala UI", sans-serif}:root:lang(ru),:root:lang(el){--font-display:"Fredoka", "Comfortaa", system-ui, sans-serif}:root:lang(el){--font-body:"Nunito", "Comfortaa", system-ui, sans-serif}:root:lang(ja){--font-display:"Fredoka", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;--font-body:"Nunito", "M PLUS Rounded 1c", "Hiragino Sans", "Yu Gothic", sans-serif}:root:lang(ko){--font-display:"Fredoka", "Jua", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;--font-body:"Nunito", "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif}:root:lang(zh){--font-display:"Fredoka", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;--font-body:"Nunito", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif}*{box-sizing:border-box}html,body{background:#2a1b13;height:100%;margin:0;overflow:hidden}body{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}#scene{touch-action:none;opacity:0;width:100%;height:100%;transition:opacity 1.2s;display:block;position:fixed;inset:0}body.ready #scene{opacity:1}[hidden]{display:none!important}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}.overlay{z-index:10;background:radial-gradient(#2a1b130d 30%,#180d078c);place-items:center;padding:16px;display:grid;position:fixed;inset:0}.card{background:var(--cream);width:min(420px,100%);max-height:calc(100dvh - 32px);box-shadow:var(--shadow), inset 0 0 0 2px #fff9ef;border-radius:28px;padding:28px 26px 22px;animation:.55s cubic-bezier(.2,.9,.3,1.15) both rise;overflow:auto}@keyframes rise{0%{opacity:0;transform:translateY(18px)scale(.97)}}.logo,.picker-tiles,.picker-hint kbd{direction:ltr}.logo{justify-content:center;gap:12px;margin:4px 0 0;display:flex}.logo span{width:66px;height:66px;font:600 44px/1 var(--font-display);color:var(--you);background:linear-gradient(var(--tile-top), var(--tile-bottom));box-shadow:0 5px 0 var(--tile-edge), 0 10px 18px #3c1e0a38;border-radius:16px;place-items:center;display:grid}.logo span:first-child{transform:rotate(-5deg)}.logo span:nth-child(2){color:var(--ai);transform:translateY(-6px)rotate(3deg)}.logo span:nth-child(3){transform:rotate(6deg)}.tagline{text-align:center;color:var(--muted);margin:16px 0 22px;font-weight:600}.field{margin-bottom:16px}.field>label{font:500 13px var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px 4px;display:block}.seg{background:var(--paper);border-radius:16px;gap:4px;padding:4px;display:flex;box-shadow:inset 0 2px 4px #5a3c1e1f}.seg button{font:500 16px var(--font-display);color:var(--muted);border-radius:12px;flex:1;padding:10px 6px;transition:background .2s,color .2s,box-shadow .2s}.seg button:hover{color:var(--ink)}.seg button.on{color:var(--you);background:#fff;box-shadow:0 2px #e3cfae,0 4px 10px #5a321424}.hint{min-height:2.8em;color:var(--muted);margin:8px 4px 0;font-size:14px;line-height:1.4}.primary,.secondary{width:100%;font:600 20px var(--font-display);border-radius:18px;padding:14px;transition:transform .12s,box-shadow .12s;display:block}.primary{color:#fff8f0;background:var(--you);box-shadow:0 5px 0 var(--you-dark), 0 10px 22px #963c1e4d;margin-top:6px}.secondary{color:var(--ink);background:var(--paper);margin-top:12px;font-size:17px;box-shadow:0 4px #dcc4a0}.primary:hover,.secondary:hover{transform:translateY(-1px)}.primary:active{box-shadow:0 1px 0 var(--you-dark);transform:translateY(4px)}.secondary:active{transform:translateY(3px);box-shadow:0 1px #dcc4a0}button:focus-visible{outline:3px solid var(--ai);outline-offset:2px}.rules{color:var(--muted);margin-top:16px;font-size:14px}.rules summary{cursor:pointer;text-align:center;font:500 15px var(--font-display);color:var(--ink);opacity:.8;list-style:none}.rules summary::-webkit-details-marker{display:none}.rules summary:after{content:" ▾"}.rules[open] summary:after{content:" ▴"}.rules ul{margin:10px 0 0;padding-inline-start:20px;line-height:1.5}.rules li{margin-bottom:6px}.rules b{color:var(--ink)}:root:is(:lang(ar),:lang(fa),:lang(ur),:lang(hi),:lang(ja),:lang(ko),:lang(zh)) .field>label{letter-spacing:0;text-transform:none;font-size:14px}.seg.sizes button{padding-inline:2px;font-size:15px}.lang-pick{top:max(14px, env(safe-area-inset-top));background:var(--glass);font:500 15px var(--font-display);color:var(--ink);cursor:pointer;border-radius:999px;align-items:center;gap:8px;padding:9px 12px;transition:transform .15s;display:flex;position:fixed;inset-inline-end:max(14px, env(safe-area-inset-right));box-shadow:0 6px 18px #140a044d}.lang-pick:hover{transform:translateY(-2px)}.lang-pick:focus-within{outline:3px solid var(--ai);outline-offset:2px}.lang-pick svg{fill:none;width:18px;height:18px;stroke:var(--ink);stroke-width:1.7px;stroke-linecap:round}.lang-pick .chev{stroke-width:2.2px;opacity:.6;width:14px;height:14px}.lang-pick select{opacity:0;cursor:pointer;width:100%;font-size:16px;position:absolute;inset:0}.hud-top{top:max(14px, env(safe-area-inset-top));z-index:5;flex-direction:column;align-items:center;gap:8px;animation:.5s both drop;display:flex;position:fixed;left:50%;transform:translate(-50%)}@keyframes drop{0%{opacity:0;transform:translate(-50%,-12px)}}.scoreboard{gap:10px;display:flex}.score-card{background:var(--glass);border:2.5px solid #0000;border-radius:20px;align-items:center;gap:12px;min-width:150px;padding:8px 16px;transition:transform .3s,border-color .3s,box-shadow .3s;display:flex;position:relative;box-shadow:0 8px 24px #140a044d}.score-card.you,.score-card.ai{justify-content:space-between}.score-card.you.active{border-color:var(--you);transform:translateY(2px);box-shadow:0 8px 24px #140a044d,0 0 0 5px #c4603f33}.score-card.ai.active{border-color:var(--ai);transform:translateY(2px);box-shadow:0 8px 24px #140a044d,0 0 0 5px #4f8a7033}.badge{font:500 15px var(--font-display);color:var(--muted);line-height:1.15}.badge em{color:var(--ai);font-size:12px;font-style:normal;display:block}.you .badge{color:var(--you)}.ai .badge{color:var(--ai-dark);text-align:end}.pts{min-width:1.4ch;font:600 32px/1 var(--font-display);text-align:center}.you .pts{color:var(--you)}.ai .pts{color:var(--ai)}.pts.bump{animation:.55s cubic-bezier(.3,1.8,.5,1) bump}@keyframes bump{40%{transform:scale(1.5)rotate(-6deg)}}.dots{bottom:-9px;background:var(--ai);border-radius:10px;gap:4px;padding:4px 8px;display:none;position:absolute;inset-inline-end:18px}.score-card.thinking .dots{display:flex}.dots i{background:#fff;border-radius:50%;width:5px;height:5px;animation:1s ease-in-out infinite dot}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}@keyframes dot{30%{opacity:1;transform:translateY(-3px)}0%,60%,to{opacity:.5}}.turn-label{font:500 14px var(--font-display);color:#fff6ea;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#28160c8c;border-radius:999px;padding:4px 14px}.turn-label[data-who="0"]{background:#a0482cd9}.turn-label[data-who="1"]{background:#3a6c56d9}.corner{top:max(14px, env(safe-area-inset-top));z-index:6;gap:8px;display:flex;position:fixed;inset-inline-end:max(14px, env(safe-area-inset-right))}.view-toggle{background:var(--glass);direction:ltr;border-radius:14px;gap:3px;padding:3px;display:flex;box-shadow:0 6px 18px #140a044d}.view-toggle button{min-width:40px;height:38px;font:600 15px var(--font-display);color:var(--muted);border-radius:11px;padding:0 8px;transition:background .2s,color .2s,box-shadow .2s}.view-toggle button:hover{color:var(--ink)}.view-toggle button.on{color:var(--you);background:#fff;box-shadow:0 2px #e3cfae}.icon-btn{background:var(--glass);border-radius:14px;place-items:center;width:44px;height:44px;transition:transform .15s;display:grid;box-shadow:0 6px 18px #140a044d}.icon-btn:hover{transform:translateY(-2px)}.icon-btn svg{width:22px;height:22px;fill:var(--ink);stroke:var(--ink);stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round}.icon-btn .off-icon,.icon-btn.off .on-icon{display:none}.icon-btn.off .off-icon{display:block}.picker{bottom:max(18px, env(safe-area-inset-bottom));background:var(--glass);z-index:5;border-radius:24px;flex-direction:column;align-items:center;gap:8px;padding:12px 16px 10px;transition:opacity .3s,transform .3s;animation:.5s both rise;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #140a0459}.picker.idle{opacity:.55}.picker-tiles{gap:12px;display:flex}.tile-btn{width:64px;height:64px;font:600 38px/1 var(--font-display);color:#c2ab8c;background:linear-gradient(var(--tile-top), var(--tile-bottom));box-shadow:0 4px 0 var(--tile-edge), 0 8px 14px #3c1e0a2e;border-radius:16px;transition:transform .15s,color .15s,box-shadow .15s}.tile-btn.on{color:var(--you);box-shadow:0 8px 0 var(--tile-edge), 0 0 0 3px var(--you), 0 14px 20px #3c1e0a38;transform:translateY(-4px)}.hint-btn{width:64px;height:64px;font:500 12px/1.1 var(--font-display);color:#7a4f12;background:linear-gradient(#ffe2a6,#f2b54a);border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:2px;margin-inline-start:6px;transition:transform .15s,opacity .2s,box-shadow .15s;display:flex;position:relative;box-shadow:0 4px #c98c2a,0 8px 14px #3c1e0a2e}.hint-btn svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}.hint-btn:hover:not(:disabled){transform:translateY(-2px)}.hint-btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px #c98c2a}.hint-btn:disabled{opacity:.45;cursor:default}.hint-btn.loading svg{animation:.9s ease-in-out infinite alternate glow}@keyframes glow{to{opacity:.3}}.ad-badge{top:-6px;background:var(--ink);border-radius:50%;place-items:center;width:20px;height:20px;display:grid;position:absolute;inset-inline-end:-6px;box-shadow:0 2px 4px #00000040}.ad-badge svg{fill:#fff6e6;stroke:none;width:11px;height:11px}.primary:disabled,.secondary:disabled{opacity:.6;cursor:default;transform:none}.mock-ad{z-index:100;color:#fff;font:500 22px var(--font-display);background:#0a0603eb;place-items:center;display:grid;position:fixed;inset:0}.mock-ad div{flex-direction:column;align-items:center;gap:8px;display:flex}.mock-ad span{opacity:.6;font-size:14px}.picker-hint{color:var(--muted);font-size:12px;font-weight:600}kbd{font:600 11px var(--font-body);background:var(--paper);box-shadow:0 1px 0 var(--tile-edge);border-radius:5px;padding:1px 5px}#toasts{pointer-events:none;z-index:7;flex-direction:column;align-items:center;gap:6px;display:flex;position:fixed;top:140px;left:50%;transform:translate(-50%)}.toast{font:500 17px var(--font-display);color:#fff8ef;white-space:nowrap;border-radius:999px;padding:8px 18px;animation:2.2s both toast;box-shadow:0 8px 20px #140a0459}.toast.who-0{background:var(--you)}.toast.who-1{background:var(--ai)}@keyframes toast{0%{opacity:0;transform:translateY(-8px)scale(.9)}12%{opacity:1;transform:none}80%{opacity:1}to{opacity:0;transform:translateY(-6px)}}.result-card{text-align:center}.cup svg{width:76px;height:76px}.cup .mug{fill:var(--you)}.cup .handle,.cup .saucer{stroke:var(--you);stroke-width:4px;stroke-linecap:round}.cup .steam{stroke:#cdb699;stroke-width:3px;stroke-linecap:round;animation:2.4s ease-in-out infinite steam}#result[data-outcome=lose] .cup .mug{fill:var(--ai)}#result[data-outcome=lose] .cup .handle,#result[data-outcome=lose] .cup .saucer{stroke:var(--ai)}@keyframes steam{50%{opacity:.5;transform:translateY(-3px)}}.result-card h2{font:600 34px var(--font-display);color:var(--ink);margin:6px 0 4px}.result-sub{color:var(--muted);margin:0 0 18px;font-weight:600}.final{background:var(--paper);border-radius:18px;justify-content:center;align-items:center;gap:18px;margin-bottom:20px;padding:14px;display:flex}.final-side{flex-direction:column;gap:2px;display:flex}.final-side span{font:500 13px var(--font-display);color:var(--muted)}.final-side em{font-style:normal}.final-side b{font:600 40px/1 var(--font-display)}.final-side.you b{color:var(--you)}.final-side.ai b{color:var(--ai)}.final-dash{font:500 28px var(--font-display);color:var(--muted)}@media (width<=560px){.score-card{gap:8px;min-width:0;padding:6px 12px}.badge{font-size:13px}.pts{font-size:26px}.corner{top:auto;bottom:max(18px, env(safe-area-inset-bottom));flex-direction:column;inset-inline-end:12px}.overlay{padding-top:64px}.icon-btn{width:40px;height:40px}.view-toggle{flex-direction:column}.view-toggle button{min-width:34px;height:34px;padding:0}.tile-btn,.hint-btn{width:56px;height:56px}.tile-btn{font-size:32px}.hint-btn{width:64px;height:64px;font:500 12px/1.1 var(--font-display);color:#7a4f12;background:linear-gradient(#ffe2a6,#f2b54a);border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:2px;margin-inline-start:6px;transition:transform .15s,opacity .2s,box-shadow .15s;display:flex;position:relative;box-shadow:0 4px #c98c2a,0 8px 14px #3c1e0a2e}.hint-btn svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}.hint-btn:hover:not(:disabled){transform:translateY(-2px)}.hint-btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px #c98c2a}.hint-btn:disabled{opacity:.45;cursor:default}.hint-btn.loading svg{animation:.9s ease-in-out infinite alternate glow}@keyframes glow{to{opacity:.3}}.ad-badge{top:-6px;background:var(--ink);border-radius:50%;place-items:center;width:20px;height:20px;display:grid;position:absolute;inset-inline-end:-6px;box-shadow:0 2px 4px #00000040}.ad-badge svg{fill:#fff6e6;stroke:none;width:11px;height:11px}.primary:disabled,.secondary:disabled{opacity:.6;cursor:default;transform:none}.mock-ad{z-index:100;color:#fff;font:500 22px var(--font-display);background:#0a0603eb;place-items:center;display:grid;position:fixed;inset:0}.mock-ad div{flex-direction:column;align-items:center;gap:8px;display:flex}.mock-ad span{opacity:.6;font-size:14px}.picker-hint{display:none}#toasts{top:118px}}
