:root{--ui-scale:1;--ink:#f6ecd8;--ink-dim:#d6c6a6;--bg:#1c130ed1;--bg-solid:#241912;--card:#241912f0;--line:#d6b26c59;--brass:#d6b26c;--brass-hi:#f1d38d;--red:#b8392e;--green:#3f8a62;--focus:#7fd7ff;--radius:12px;--font-ui:"Avenir Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;--font-title:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;font-size:calc(16px * var(--ui-scale))}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;background:#120d0a;margin:0;overflow:hidden}#scene{touch-action:none;width:100vw;height:100vh;display:block;position:fixed;inset:0}.vignette{pointer-events:none;background:radial-gradient(at 50% 55%,#0000 55%,#0c06026b 100%);position:fixed;inset:0}body[data-state=game] .vignette{background:radial-gradient(at 50% 60%,#0000 65%,#0c06024d 100%)}body.high-contrast .vignette{display:none}#ui{pointer-events:none;position:fixed;inset:0}#ui *{pointer-events:auto}.screen-host,.hud,.screen{pointer-events:none!important}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;overflow:hidden;position:absolute!important}button,select,input,.button-like{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.screen{display:flex;position:fixed;inset:0}.loading-screen{background:radial-gradient(at 50% 40%,#3a2618 0%,#120d0a 75%);flex-direction:column;justify-content:center;align-items:center;gap:1.4rem;pointer-events:auto!important}.bar{background:#ffffff1a;border-radius:6px;width:min(420px,70vw);height:6px;overflow:hidden}.bar-fill{background:linear-gradient(90deg, var(--brass), var(--brass-hi));width:0;height:100%;transition:width .2s}.loading-label{color:var(--ink-dim)}.logo{font-family:var(--font-title);letter-spacing:.12em;text-shadow:0 2px 18px #0009;flex-direction:column;margin:0;font-weight:700;line-height:.95;display:flex}.logo-ok{color:var(--brass-hi);font-size:clamp(2.6rem,7vw,4.6rem)}.logo-cafe{letter-spacing:.55em;color:var(--ink);padding-left:.2em;font-size:clamp(1.4rem,3.4vw,2.2rem)}.title-screen{background:linear-gradient(90deg,#120c09e0 0%,#120c098c 34%,#120c0900 60%);align-items:center;padding:clamp(1rem,5vw,4rem)}.title-card{pointer-events:auto;max-width:400px}.tagline{color:var(--ink-dim);font-style:italic;font-family:var(--font-title);margin:.8rem 0 1.8rem}.menu{flex-direction:column;gap:.5rem;display:flex}.continue-wrap{flex-direction:column;gap:.2rem;margin-bottom:.4rem;display:flex}.continue-wrap small{color:var(--ink-dim);padding-left:.4rem}.menu-btn{pointer-events:auto;text-align:left;border:1px solid var(--line);color:var(--ink);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#241912b8;border-radius:10px;padding:.72rem 1.1rem;font-size:1.04rem;transition:background .15s,border-color .15s,transform .15s}.menu-btn:hover:not([disabled]){border-color:var(--brass);background:#46301ed9;transform:translate(3px)}.menu-btn.primary{color:#20150c;background:linear-gradient(#c99d52,#a67a35);border-color:#e9c886;font-weight:700}.menu-btn.primary:hover:not([disabled]){background:linear-gradient(#ddb469,#b88a40)}.menu-btn[disabled]{opacity:.5;cursor:not-allowed}.ghost,.button-like{pointer-events:auto;border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:8px;padding:.5rem .9rem;display:inline-block}.ghost:hover,.button-like:hover{border-color:var(--brass)}.panel-screen{background:#0c08068c;justify-content:center;align-items:center;padding:1rem}.panel{pointer-events:auto;background:var(--card);border:1px solid var(--line);border-radius:16px;width:min(820px,100%);max-height:calc(100vh - 2rem);padding:1.2rem 1.6rem 1.6rem;overflow:auto;box-shadow:0 20px 60px #0000008c}.panel.small{text-align:center;width:min(460px,100%)}.panel-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;padding-bottom:.6rem;display:flex}.panel h2,.card h2{font-family:var(--font-title);color:var(--brass-hi);margin:.2rem 0;font-size:1.6rem}.panel h3{font-family:var(--font-title);color:var(--brass);margin:1.3rem 0 .5rem;font-size:1.15rem}.hint{color:var(--ink-dim);font-size:.9rem}.form-row{border-bottom:1px dashed #d6b26c1f;grid-template-columns:minmax(150px,1fr) minmax(140px,1.2fr);align-items:center;gap:.4rem 1rem;padding:.35rem 0;display:grid}.form-row .hint{grid-column:2}select,input[type=number]{border:1px solid var(--line);background:#1a120d;border-radius:8px;padding:.4rem .6rem}input[type=range]{accent-color:var(--brass)}input[type=checkbox]{width:1.2rem;height:1.2rem;accent-color:var(--brass);justify-self:start}.actions{flex-wrap:wrap;justify-content:flex-end;gap:.6rem;margin-top:1.2rem;display:flex}.table-choices{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.6rem;display:grid}.table-choice{text-align:left;border:1px solid var(--line);cursor:pointer;background:#ffffff08;border-radius:10px;flex-direction:column;gap:.2rem;padding:.7rem .9rem;display:flex}.table-choice small{color:var(--ink-dim)}.table-choice.active{border-color:var(--brass-hi);background:#d6b26c24}.opponents{gap:.5rem;display:grid}.opp-card{border:1px solid var(--line);border-radius:10px;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;padding:.5rem .7rem;display:grid}.opp-card small{color:var(--ink-dim);display:block}.avatar{color:#fff;border:2px solid #ffffff40;border-radius:50%;flex:none;place-items:center;width:2.2rem;height:2.2rem;font-weight:700;display:inline-grid}.av-you{background:#6d5a3e}.av-riza{background:#7a2f2a}.av-nermin{background:#2f5d62}.av-husnu{background:#3b3f4a}.rules .rule p{line-height:1.55}table.stats,table.scores{border-collapse:collapse;width:100%}table.stats th,table.stats td,table.scores th,table.scores td{text-align:left;border-bottom:1px solid #d6b26c26;padding:.4rem .5rem}table.stats td{text-align:right;font-variant-numeric:tabular-nums}table.scores caption{text-align:left;color:var(--brass);padding:.6rem 0 .2rem}td.neg{color:#ff9a8a}td.pos{color:#9be3b1}.flash{background:var(--card);border:1px solid var(--brass);pointer-events:auto;border-radius:10px;padding:.7rem 1rem;position:fixed;top:1rem;left:50%;transform:translate(-50%)}.tile{background:#efe5cf;border:none;border-radius:6px;flex:none;width:2.6rem;height:3.6rem;padding:0;display:inline-flex;position:relative;overflow:visible;box-shadow:inset 0 -3px #00000026,0 2px 4px #00000059}.tile img{border-radius:6px;width:100%;height:100%}.tile.small{width:2rem;height:2.8rem}button.tile{cursor:pointer}button.tile:hover{box-shadow:0 0 0 2px var(--brass-hi), 0 2px 4px #00000059}.tile.okey{box-shadow:0 0 0 2px #ffc94d,0 2px 6px #0006}.tile .badge{color:#2a1a00;background:#ffc94d;border-radius:3px;padding:0 .25rem;font-size:.55rem;font-weight:800;position:absolute;top:-.55rem;left:50%;transform:translate(-50%)}.tile .as{white-space:nowrap;color:var(--brass-hi);font-size:.6rem;position:absolute;bottom:-1.05rem;left:50%;transform:translate(-50%)}.tile-row{flex-wrap:wrap;align-items:center;gap:.25rem;display:flex}.hud{position:fixed;inset:0}.players{flex-direction:column;gap:.3rem;width:min(250px,42vw);display:flex;position:absolute;top:.7rem;left:.7rem}.player{background:var(--bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid #d6b26c2e;border-radius:10px;grid-template-columns:auto 1fr auto;align-items:center;gap:.55rem;padding:.3rem .6rem .3rem .35rem;transition:border-color .2s,background .2s;display:grid}.player .avatar{width:1.8rem;height:1.8rem;font-size:.85rem}.player.current{border-color:var(--brass-hi);background:#46301ceb;box-shadow:0 0 0 1px #f1d38d59,0 0 18px #f1d38d40}.pname{flex-direction:column;min-width:0;line-height:1.15;display:flex}.pname strong{font-size:.92rem}.pname small{color:var(--ink-dim);white-space:nowrap;text-overflow:ellipsis;font-size:.72rem;overflow:hidden}.pscore{font-family:var(--font-title);color:var(--brass-hi);font-variant-numeric:tabular-nums;font-size:1.35rem;font-weight:700}.topright{flex-wrap:wrap;justify-content:flex-end;gap:.35rem;max-width:48vw;display:flex;position:absolute;top:.7rem;right:.7rem}.icon{background:var(--bg);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid #d6b26c40;border-radius:8px;padding:.42rem .65rem;font-size:.82rem}.icon:hover{border-color:var(--brass)}.banner{text-align:center;background:var(--bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid #d6b26c33;border-radius:999px;max-width:min(560px,46vw);padding:.45rem 1.1rem;font-size:.95rem;position:absolute;top:.75rem;left:50%;transform:translate(-50%)}.banner:empty{display:none}.banner.mine{border-color:var(--brass-hi);color:#fff6e0;box-shadow:0 0 22px #f1d38d40}.info{background:var(--bg);white-space:nowrap;border:1px solid #d6b26c26;border-radius:10px;align-items:center;gap:.9rem;padding:.3rem .8rem;font-size:.82rem;display:flex;position:absolute;top:3.4rem;left:50%;transform:translate(-50%)}.info>span{align-items:center;gap:.35rem;display:inline-flex}.info .round{color:var(--brass-hi);font-weight:700}.info .fake{font-size:.72rem}.history{background:var(--bg);border:1px solid #d6b26c26;border-radius:10px;width:min(300px,40vw);font-size:.8rem;position:absolute;bottom:.7rem;left:.7rem}.history summary{cursor:pointer;color:var(--ink-dim);padding:.4rem .7rem}.history-list{max-height:30vh;margin:0;padding:0 .8rem .5rem 1.8rem;line-height:1.5;overflow:auto}.actionbar{background:var(--bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #d6b26c33;border-radius:12px;flex-wrap:wrap;justify-content:center;align-items:center;gap:.35rem;max-width:calc(100vw - 2*min(300px,40vw) - 3rem);padding:.35rem;display:flex;position:absolute;bottom:.7rem;left:50%;transform:translate(-50%)}.actionbar .sep{background:var(--line);width:1px;height:1.6rem;margin:0 .2rem}.act{cursor:pointer;background:#ffffff0d;border:1px solid #d6b26c40;border-radius:8px;padding:.5rem .85rem;font-size:.9rem}.act.small{padding:.42rem .6rem;font-size:.78rem}.act:hover:not([disabled]){border-color:var(--brass);background:#d6b26c1f}.act.primary{color:#20150c;background:linear-gradient(#c99d52,#a67a35);font-weight:700}.act.finish{color:#fff;background:linear-gradient(#4fae7c,#2f7a54);font-weight:800;animation:1.6s ease-in-out infinite glow}@keyframes glow{50%{box-shadow:0 0 18px #78e6aab3}}.act[disabled]{opacity:.45;cursor:not-allowed}.act[hidden]{display:none}.actionbar.inactive .act:not(.small){opacity:.6}.subtitles{flex-direction:column;align-items:center;gap:.2rem;display:flex;position:absolute;bottom:4.6rem;left:50%;transform:translate(-50%);pointer-events:none!important}.subtitles span{background:#000000b3;border-radius:6px;padding:.15rem .6rem;font-size:.85rem}.toast{opacity:0;text-align:center;white-space:normal;overflow-wrap:anywhere;background:#3a1d17;border:1px solid #c4614f;border-radius:10px;width:max-content;max-width:min(560px,80vw);padding:.55rem 1rem;font-size:.92rem;line-height:1.4;transition:opacity .2s,transform .2s;position:absolute;top:6.2rem;left:50%;transform:translate(-50%,-8px);pointer-events:none!important}.toast.info{background:#1f3027;border-color:#4f9a74}.toast.show{opacity:1;transform:translate(-50%)}.overlay-host{pointer-events:none!important}.overlay{pointer-events:auto;background:#0a070573;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.overlay.side{background:linear-gradient(90deg,#0a070500 30%,#0a070599);justify-content:flex-end}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;width:min(520px,100%);max-height:calc(100vh - 2rem);padding:1.1rem 1.4rem 1.3rem;overflow:auto;box-shadow:0 18px 50px #0000008c}.card.wide{width:min(820px,100%)}.overlay.side .card{width:min(430px,100%)}.card .menu-btn{width:100%}.melds{flex-wrap:wrap;gap:.6rem 1rem;margin:.5rem 0 1rem;display:flex}.meld{flex-direction:column;gap:.2rem;padding-bottom:.9rem;display:flex}.meld small{color:var(--ink-dim);font-size:.72rem}.scoring .final{align-items:center;gap:.5rem;display:flex}.opt{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:8px;flex-direction:column;align-items:center;gap:.2rem;padding:.3rem;display:inline-flex}.opt.active{border-color:var(--brass-hi);background:#d6b26c26}.ranking{padding-left:1.4rem;font-size:1.05rem}.ranking li{justify-content:space-between;padding:.25rem 0;display:flex}.ranking li.win{color:var(--brass-hi);font-weight:700}.winner{font-family:var(--font-title);font-size:1.3rem}.tutorial h3{margin-top:.3rem}.tut-step{color:var(--ink-dim);margin:0;font-size:.85rem}.tut-tiles{gap:.4rem;margin:.8rem 0;display:flex}.tut-tiles.wrap{flex-wrap:wrap}.tut-choices{flex-wrap:wrap;gap:.6rem;margin:.8rem 0;display:flex}.tut-choice{border:1px solid var(--line);cursor:pointer;background:#ffffff08;border-radius:10px;gap:.25rem;padding:.45rem;display:flex}.tut-choice:hover{border-color:var(--brass)}.tut-ind{align-items:center;gap:.6rem;display:flex}.tut-feedback.ok{color:#9be3b1}.tut-feedback.ko{color:#ffab9b}body.high-contrast{--bg:#000000f2;--card:#000;--ink:#fff;--ink-dim:#e6e6e6;--line:#fff}body.high-contrast .player.current,body.high-contrast .banner.mine{border-color:#ffd400}body.reduce-motion *{transition:none!important;animation:none!important}@media (max-width:1100px){.info .fake{display:none}.players{width:210px}}@media (max-width:820px){:root{font-size:calc(14px * var(--ui-scale))}.history{display:none}.actionbar{max-width:calc(100vw - 1rem)}.banner{max-width:60vw}.players{flex-flow:wrap;width:auto;right:9rem}.player{padding:.2rem .4rem}.pname small{display:none}.info{top:auto;bottom:4rem}.banner{top:auto;bottom:6.6rem}.title-screen{background:linear-gradient(#120c09d9,#120c0966)}.form-row{grid-template-columns:1fr}}@media (max-height:560px){:root{font-size:calc(13px * var(--ui-scale))}.players{flex-flow:wrap;gap:.2rem;width:auto;max-width:46vw}.player{gap:.3rem;padding:.15rem .4rem .15rem .2rem}.player .avatar{width:1.4rem;height:1.4rem}.pname small,.history,.info .fake{display:none}.pscore{font-size:1.05rem}.banner{max-width:58vw;padding:.3rem .8rem;font-size:.82rem;top:2.5rem;bottom:auto}.info{gap:.5rem;top:.5rem;left:auto;right:.5rem;transform:none}.topright{top:auto;bottom:.4rem;right:.5rem}.topright .icon{padding:.3rem .5rem}.actionbar{flex-direction:column;max-width:none;padding:.25rem;inset:50% .5rem auto auto;transform:translateY(-50%)}.actionbar .sep{width:1.6rem;height:1px}.act{padding:.35rem .55rem;font-size:.8rem}.toast{top:4.6rem}}
