.glance{padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.glance h2{font-size:1.5rem;text-transform:uppercase;margin-bottom:12px}
.glance table{min-width:0;font-size:.9rem}
.glance th,.glance td{padding:9px 8px}
.game{padding-block:44px;border-top:1px solid var(--line);scroll-margin-top:84px}
.game .wrap{display:grid;gap:28px}
@media(min-width:960px){.game .wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px}}
.game h2{font-size:clamp(2.2rem,1.4rem + 3vw,3.6rem);text-transform:uppercase;margin-top:12px}
.facts{margin:20px 0 0;padding:0;display:grid;gap:0;border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}
.facts div{display:grid;grid-template-columns:7.5rem 1fr;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.facts div:first-child{border-top:0}
.facts dt{font:600 .74rem/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.facts dd{margin:0;color:var(--text)}
.game .body p,.game .body li{color:var(--mute)}
.game .body h3{font-size:1.4rem;text-transform:uppercase;margin:24px 0 8px}
.game .body ul{margin:0 0 16px;padding-left:1.25em;display:grid;gap:8px}
.game .body strong{color:var(--text);font-weight:600}
.rank td:first-child{font:700 1.2rem var(--display);color:var(--amber);width:3rem}
.game .wrap>*{min-width:0}
.rank th,.rank td{text-align:left}
.rank td:nth-child(2){font-weight:600;white-space:nowrap}
.rank{min-width:520px}
.note{max-width:70ch;color:var(--mute);font-size:.92rem;margin-top:14px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.goals{display:grid;gap:12px;margin-top:26px}
@media(min-width:760px){.goals{grid-template-columns:repeat(3,minmax(0,1fr))}}
.goal{display:grid;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:var(--panel);text-decoration:none;transition:border-color .2s,transform .2s}
.goal:hover{border-color:var(--amber);transform:translateY(-2px)}
.goal b{font:700 1.35rem/1.1 var(--display);text-transform:uppercase}
.goal span{color:var(--mute);font-size:.92rem}
.tools{padding-block:40px}
.tablist{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:24px}
.tablist [role=tab]{padding:12px 18px;border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;background:none;color:var(--mute);font:600 .95rem var(--sans);cursor:pointer;min-height:44px}
.tablist [role=tab][aria-selected=true]{background:var(--panel);color:var(--text);border-color:var(--line);box-shadow:0 2px 0 var(--amber) inset}
.panel{display:grid;gap:22px}
.panel[hidden]{display:none}
.panel h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem);text-transform:uppercase}
.panel .intro{color:var(--mute);max-width:64ch}
.opts{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg span{display:block;padding:10px 16px;color:var(--mute);font-weight:600;font-size:.92rem}
.seg input:checked+span{background:var(--amber);color:var(--amber-ink)}
.seg input:focus-visible+span{outline:2px solid var(--amber);outline-offset:2px}
.opts select,.slot select,.num{min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--text);padding:0 10px;font:500 1rem var(--sans)}
.opts label.lbl{font-size:.9rem;color:var(--mute);display:flex;gap:8px;align-items:center}
.hands{display:grid;gap:16px}
@media(min-width:860px){.hands{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hand{padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--panel);display:grid;gap:14px;min-width:0}
.hand h3{font-size:1.5rem;text-transform:uppercase}
.hand .nm{min-height:1.6em;color:var(--amber);font-weight:600}
.cards{display:flex;flex-wrap:wrap;gap:8px}
.pc{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:64px;border-radius:7px;background:#F6F3EA;color:#14181A;font:600 1.1rem/1 var(--sans);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.pc b{font:800 1.25rem/1 var(--display)}
.pc.red{color:#C0392B}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot select{width:5.4rem}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.result{min-height:3.2rem;padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:var(--panel);display:grid;gap:4px}
.result:empty{display:none}
.result b{font:700 1.4rem var(--display);text-transform:uppercase}
.result span{color:var(--mute)}
.result.ok{border-color:var(--grass)}.result.ok b{color:var(--grass)}
.result.err{border-color:var(--alert)}.result.err b{color:var(--alert)}
.result.tie{border-color:var(--amber)}.result.tie b{color:var(--amber)}
.qrow{display:grid;gap:16px}
@media(min-width:860px){.qrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qbtns{display:flex;flex-wrap:wrap;gap:10px}
.qbtns .btn.good{background:var(--grass);border-color:var(--grass);color:#06150E}
.qbtns .btn.bad{background:var(--alert);border-color:var(--alert);color:#1D0904}
.qbtns .btn:disabled{cursor:default;opacity:1}
.qmeta{display:flex;flex-wrap:wrap;gap:8px 24px;color:var(--mute);font-size:.92rem}
.qmeta b{color:var(--text)}
.grp{display:grid;gap:8px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.gl{font:600 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.rform{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.num{width:8rem}
.examples{display:grid;gap:16px}
@media(min-width:960px){.examples{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ex{padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--panel);display:grid;gap:12px;align-content:start;min-width:0}
.ex h3{font-size:1.4rem;text-transform:uppercase}
.ex .lab{font:600 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:6px}
.ex p{color:var(--mute)}
.ex .verdict{color:var(--text)}
.ranks{display:grid;gap:16px}
@media(min-width:860px){.ranks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ranks ol{margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}
.ranks li{display:flex;gap:14px;padding:11px 16px;border-top:1px solid var(--line);color:var(--text)}
.ranks li:first-child{border-top:0}
.ranks li i{font:700 1.15rem/1.4 var(--display);color:var(--amber);font-style:normal;width:1.4rem}
.ranks h3{font-size:1.5rem;text-transform:uppercase;margin-bottom:10px}
.links{display:grid;gap:12px}
@media(min-width:760px){.links{grid-template-columns:repeat(3,minmax(0,1fr))}}

.search{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin:0 0 20px}
.search label{font-weight:600}
.search input{min-height:46px;width:min(100%,340px);border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--text);padding:0 14px;font:500 1rem var(--sans)}
.search output{color:var(--mute);font-size:.92rem}
.hub-card[hidden]{display:none}
.try{padding:18px 20px;border:1px solid var(--amber);border-radius:12px;background:var(--panel);display:grid;gap:10px;margin-top:26px}
.try h3{font-size:1.4rem;text-transform:uppercase}
.try p{color:var(--mute)}
.cmp td:first-child,.cmp th:first-child{font-weight:700;color:var(--text);white-space:nowrap}
.cmp{min-width:760px}