:root{--page:#000;--stage:#050505;--line:#5a4a2c;--gold:#d9b46a;--gold-soft:#f2dca4;--gold-dim:#7a6440;--cream:#f3e3b8;--muted:#9d937d;--box:#0d0d0d;--box-border:#43391f;--card-open-border:#343434;--red:#d0453a;--green:#3fae6a;color:var(--cream);background:var(--page);font-family:Cairo,system-ui,sans-serif}*{box-sizing:border-box}body{background:var(--page);min-height:100dvh;margin:0}button,input{font-family:inherit}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.shell{width:min(100%,1600px,max(720px,150dvh));margin:0 auto;container-type:inline-size}.stage{background:var(--stage);border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-rows:auto 1fr auto auto auto;min-height:100dvh;padding:0 .45cqw .8cqw;display:grid}.banner{height:14.3cqw;margin:0 -.45cqw;position:relative;overflow:hidden}.banner-art{width:100%;height:100%;display:block;position:absolute;inset:0}.twinkle{animation:2.6s ease-in-out infinite alternate twinkle}.title-plate{place-items:center;width:17cqw;height:6.2cqw;display:grid;position:absolute;top:.5cqw;left:50%;transform:translate(-50%)}.title-plate svg{width:100%;height:100%;position:absolute;inset:0}.title-plate h1{color:var(--gold-soft);text-shadow:0 0 .8cqw #f2c86e73;white-space:nowrap;margin:0;font-size:max(12px,1.95cqw);font-weight:800;position:relative}.points{border:1px solid var(--box-border);background:#080808d9;border-radius:1cqw;justify-content:space-between;align-items:center;width:14.5cqw;height:5.2cqw;padding:0 1.2cqw;display:flex;position:absolute;top:4.8cqw;left:.45cqw}.points-label{align-items:center;gap:.5cqw;font-size:max(11px,1.35cqw);font-weight:700;display:flex}.points-label svg{width:max(12px,1.5cqw);height:max(12px,1.5cqw)}.points-value{color:#fff3d6;font-size:max(16px,2.7cqw);font-weight:800;line-height:1}.host{background:radial-gradient(circle,#f6d58a,#b8862b);border-radius:50%;width:8.6cqw;height:8.6cqw;padding:.25cqw;position:absolute;top:2.4cqw;right:.45cqw;box-shadow:0 0 1.4cqw #f6c86e8c}.host img{object-fit:cover;border:.18cqw solid #1a1206;border-radius:50%;width:100%;height:100%;display:block}.sign{color:#2b1d0e;white-space:nowrap;background:linear-gradient(#f3ead5,#d9ccae);border:.2cqw solid #3b2a14;place-items:center;width:15.4cqw;height:4.6cqw;font-family:Lalezar,Cairo,sans-serif;font-size:max(10px,1.75cqw);display:grid;position:absolute;top:3.6cqw;right:9.8cqw;transform:perspective(40cqw)rotateY(-14deg)rotate(-2deg);box-shadow:0 .4cqw 1cqw #0009}.hands{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(4,1fr);gap:1.3cqw;margin-top:.3cqw;display:grid;position:relative}.card{border:1.5px solid var(--gold-dim);min-height:64px;color:inherit;cursor:pointer;perspective:60cqw;background:radial-gradient(at 50% 40%,#161617 0%,#0b0b0c 70%);border-radius:.9cqw;padding:0;transition:border-color .2s,box-shadow .2s;position:relative;overflow:hidden;container-type:size}.card[aria-disabled=true]{cursor:default}.card:not(.is-open):not([aria-disabled=true]):hover{border-color:var(--gold);box-shadow:0 0 1.2cqw #d9b46a59}.card.is-open{border-color:var(--card-open-border)}.card.tone-lose{border-color:var(--red);box-shadow:0 0 1.4cqw #d0453a73,inset 0 0 1cqw #d0453a33}.card.tone-win{border-color:var(--green);box-shadow:0 0 1.4cqw #3fae6a73,inset 0 0 1cqw #3fae6a33}.card-num{top:clamp(4px,3cqw,10px);z-index:3;width:clamp(18px,11cqw,34px);height:clamp(18px,11cqw,34px);color:var(--cream);background:#0c0c0c;border:1.5px solid #b8955a;border-radius:50%;place-items:center;font-size:clamp(10px,5.6cqw,17px);font-weight:700;display:grid;position:absolute;inset-inline-start:clamp(4px,3cqw,10px)}.art{backface-visibility:hidden;place-items:center;display:grid;position:absolute;inset:0}.glyph{filter:drop-shadow(0 2cqw 3cqw #0009);font-size:min(70cqw,58cqh,180px);line-height:1}.glyph.flip{transform:rotate(180deg)}.art-open{opacity:0}.ring{filter:drop-shadow(0 0 2.5cqw #ffd778e6);font-size:min(21cqw,17.5cqh,54px);position:absolute;top:46%;left:50%;transform:translate(-50%,-50%)}.sweep{z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen;background:linear-gradient(100deg,#0000 35%,#ffbe5000 40%,#ffc45cd9 50%,#ffecb400 60%,#0000 65%);position:absolute;inset:-10% -40%}.card.is-open .art-closed{animation:hand-out .34s ease-in var(--delay,0s) both}.card.is-open .art-open{animation:hand-in .44s cubic-bezier(.2, .9, .3, 1.15) calc(var(--delay,0s) + .28s) both}.card.is-open .sweep{animation:sweep .75s ease-out var(--delay,0s) both}.card.is-open .ring{animation:ring-pop .5s ease-out calc(var(--delay,0s) + .55s) both}.confetti{pointer-events:none;position:absolute;inset:-2cqw 0 0;overflow:hidden;container-type:size}.confetti span{border-radius:1px;width:.7cqw;height:1.1cqw;animation:linear both fall;position:absolute;top:-2cqw}.stats{grid-template-columns:repeat(4,1fr);gap:1.1cqw;margin-top:1.3cqw;display:grid}.stat{background:var(--box);border:1px solid var(--box-border);border-radius:1cqw;flex-direction:column;justify-content:center;align-items:center;gap:.15cqw;height:6.5cqw;min-height:48px;display:flex}.stat-label{color:#e6dbc2;font-size:max(11px,1.15cqw);font-weight:600}.stat-value{color:var(--gold-soft);font-variant-numeric:tabular-nums;font-size:max(16px,2.4cqw);font-weight:800;line-height:1.1}.stat.warn .stat-value{color:#ff8a7a}.start-btn{color:#fff3dc;cursor:pointer;background:linear-gradient(#c18a2e 0%,#9b6a1f 100%);border:1px solid #c9973f;border-radius:1cqw;justify-content:center;align-items:center;gap:.8cqw;height:6.5cqw;min-height:48px;font-size:max(13px,1.5cqw);font-weight:800;display:flex;box-shadow:inset 0 1px #ffe6aa59}.start-btn:hover{filter:brightness(1.08)}.start-btn:active{transform:scale(.98)}.play-icon{background:linear-gradient(#5aa2f0,#2f6fc9);border-radius:.35cqw;place-items:center;width:max(16px,1.9cqw);height:max(16px,1.9cqw);display:grid}.play-icon:before{content:"";border:max(4px,.45cqw) solid #0000;border-left:max(6px,.75cqw) solid #fff;border-right-width:0;margin-left:2px}.bat-row{justify-content:center;gap:1cqw;margin-top:.9cqw;display:flex}.guess-input{border:1px solid var(--box-border);width:16.1cqw;min-width:120px;height:4.3cqw;min-height:38px;color:var(--cream);text-align:center;background:#0a0a0a;border-radius:1cqw;outline:none;font-size:max(16px,1.3cqw);font-weight:700}.guess-input::placeholder{color:#7d7564;font-weight:600}.guess-input:focus{border-color:var(--gold)}.bat-btn{color:#eafff2;cursor:pointer;background:linear-gradient(#23915a,#166a41);border:1px solid #2fa86a;border-radius:1cqw;justify-content:center;align-items:center;gap:.6cqw;width:13.2cqw;min-width:104px;height:4.3cqw;min-height:38px;font-size:max(12px,1.35cqw);font-weight:800;display:flex}.bat-btn svg{width:max(14px,1.5cqw);height:max(14px,1.5cqw)}.bat-btn:hover{filter:brightness(1.1)}.bottom{grid-template-columns:auto 1fr auto;align-items:center;gap:1cqw;min-height:3.6cqw;margin-top:.9cqw;display:grid}.message{text-align:center;color:var(--cream);margin:0;font-size:max(13px,1.9cqw);font-weight:800}.pills{gap:.5cqw;display:flex}.pill{color:#d9d2c2;cursor:pointer;background:#121212;border:1px solid #3a3a3a;border-radius:.7cqw;padding:.3cqw .9cqw;font-size:max(10px,.95cqw);font-weight:700}.pill.gold{border-color:var(--gold-dim);color:var(--gold-soft)}.pill.active{border-color:var(--gold);color:var(--gold-soft);background:#2a2112}.settings-wrap{position:relative}.gear{color:#cfc7b4;cursor:pointer;background:#121212;border:1px solid #2c2c2c;border-radius:.7cqw;place-items:center;width:max(26px,2.8cqw);height:max(26px,2.8cqw);padding:.4cqw;display:grid}.gear svg{width:100%;height:100%}.settings{z-index:10;border:1px solid var(--box-border);background:#0d0d0d;border-radius:10px;gap:10px;min-width:220px;padding:12px;font-size:13px;display:grid;position:absolute;bottom:calc(100% + 8px);right:0;box-shadow:0 8px 24px #000000b3}.settings-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.segmented{gap:4px;display:flex}.settings .pill{padding:4px 10px;font-size:12px}.modal-backdrop{z-index:20;background:#000000b3;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal{border:1px solid var(--gold-dim);background:#0d0d0d;border-radius:14px;width:min(460px,100%);padding:20px 22px}.modal h2{color:var(--gold-soft);margin:0 0 8px}.modal ol{margin:0 0 16px;padding-inline-start:20px;line-height:1.9}.modal .start-btn{width:100%;height:44px;min-height:44px}@keyframes hand-out{0%{opacity:1;transform:scale(1)rotateY(0)}35%{opacity:1;transform:scale(1.07)rotateY(0)}to{opacity:0;transform:scale(.82)rotateY(90deg)}}@keyframes hand-in{0%{opacity:0;transform:scale(.82)rotateY(-90deg)}to{opacity:1;transform:scale(1)rotateY(0)}}@keyframes sweep{0%{opacity:0;transform:translate(-60%)}15%{opacity:1}to{opacity:0;transform:translate(60%)}}@keyframes ring-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(0)}70%{opacity:1;transform:translate(-50%,-50%)scale(1.25)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes fall{0%{opacity:1;transform:translateY(0)rotate(0)}to{transform:translateY(100cqh) rotate(var(--spin));opacity:0}}@keyframes twinkle{0%{opacity:.25}to{opacity:1}}@media (prefers-reduced-motion:reduce){.twinkle,.card.is-open .art-closed,.card.is-open .art-open,.card.is-open .sweep,.card.is-open .ring,.confetti span{animation-duration:.01ms;animation-delay:0s}}@container (width<=640px){.banner{height:30cqw}.title-plate{width:36cqw;height:13cqw}.title-plate h1{font-size:4.2cqw}.sign{display:none}.host{width:15cqw;height:15cqw;top:auto;bottom:1.5cqw}.points{gap:3cqw;width:auto;height:auto;padding:1.5cqw 3cqw;top:auto;bottom:2.5cqw}.hands{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(2,1fr);gap:2cqw}.stats{grid-template-columns:repeat(2,1fr)}.bottom{grid-template-columns:auto 1fr}.pills{grid-column:1/-1;justify-content:center}}