:root{--bg: #10131c;--bg2: #161b28;--ink: #e7ecf5;--muted: #9aa6bd;--line: #2a3145;--gold: #d8b15a;--accent: #5b7cff;--red: #e2607a;--good: #57b894}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body.howto{background:radial-gradient(120% 90% at 50% -10%,#1a2030 0%,var(--bg) 60%);color:var(--ink);font:17px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}.brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:780px;margin:0 auto;padding:14px 16px}.brand .logo{font-size:20px;font-weight:800;color:var(--ink);text-decoration:none}.brand .logo span{color:var(--gold)}.brand .tag{color:var(--muted);font-size:13px}.spacer{flex:1}.play-cta{background:var(--gold);color:#2a1f08;font-weight:700;text-decoration:none;padding:8px 16px;border-radius:8px;white-space:nowrap}.play-cta:hover{filter:brightness(1.08)}.play-cta.big{display:inline-block;font-size:18px;padding:12px 24px;margin-top:6px}main{max-width:780px;margin:0 auto;padding:0 16px 48px}h1{font-size:clamp(1.9rem,5vw,2.6rem);line-height:1.15;margin:18px 0 12px}h2{font-size:1.35rem;margin:2.2em 0 .5em;color:var(--gold)}p{margin:0 0 1em}.lede{font-size:1.1rem;color:#d3dcea}.jump{font-size:.95rem;color:var(--muted);border-left:3px solid var(--line);padding-left:12px}a{color:var(--accent)}ul,ol{margin:0 0 1em;padding-left:1.3em}li{margin-bottom:.45em}.muted{color:var(--muted)}.faq dt{font-weight:700;margin-top:1.1em}.faq dd{margin:.25em 0 0;color:#ccd6e6}.cta{margin-top:2.6em;padding:20px 22px;border-radius:12px;background:var(--bg2);border:1px solid var(--line)}.cta h2{margin-top:0}.footer{max-width:780px;margin:0 auto;padding:18px 16px 40px;color:var(--muted);font-size:13px;text-align:center;border-top:1px solid var(--line)}.footer a{color:var(--muted)}.demo{margin:1.4em 0 1.8em;padding:16px;border-radius:12px;background:var(--bg2);border:1px solid var(--line)}.demo-title{font-weight:700;margin:0 0 10px;font-size:.95rem;letter-spacing:.02em}.demo-controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.seg{font:inherit;font-size:.9rem;cursor:pointer;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);padding:6px 16px}.seg:hover{color:var(--ink)}.seg.on{background:var(--gold);border-color:transparent;color:#2a1f08;font-weight:700}.seg.next{margin-top:10px;border-color:var(--accent);color:var(--accent)}.demo-note{font-size:.92rem;color:#c3cedf;margin:10px 0 0}.card-row{display:flex;gap:5px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}.trick-row{gap:10px;overflow-x:visible;flex-wrap:wrap}.trick-bar{display:flex;gap:4px}.pip{flex:1;height:26px;border-radius:4px;background:#222a3a}.pip.book{background:#3c4a66}.pip.bid{background:var(--gold)}.pip.spare{background:#1b2130;border:1px dashed var(--line)}.bar-key{font-size:.78rem;color:var(--muted);margin:6px 0 0}.verdict{font-size:.95rem;margin:12px 0 0;min-height:1.4em}.verdict.right{color:var(--good)}.verdict.wrong{color:var(--red)}.card{background:linear-gradient(176deg,#fffdf6,#f4efe1 58%,#ece5d2);color:#1c1c1c;border-radius:.16em;border:1px solid #cfc8b2;width:52px;height:76px;font-size:52px;position:relative;padding:0;overflow:hidden;flex:none;box-shadow:0 1px 1px #00000059,0 4px 9px #0006;transition:transform .12s ease,box-shadow .12s ease}.card.mini{width:38px;height:55px;font-size:38px}.face{position:absolute;top:0;right:0;bottom:0;left:0;display:block}.corner{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:.86}.corner.tl{top:.07em;left:.08em}.corner.br{bottom:.07em;right:.08em;transform:rotate(180deg)}.corner .rank{font-family:Georgia,Times New Roman,serif;font-weight:700;font-size:.27em;letter-spacing:-.01em}.corner .cpip{font-size:.2em;line-height:1}.center-pip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:.62em;line-height:1}.court{position:absolute;top:0;right:0;bottom:0;left:0}.court-pip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:.5em;line-height:1;opacity:.16}.court-letter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:Georgia,Times New Roman,serif;font-weight:700;font-size:.42em}.face.hearts,.face.diamonds{color:#c0392b}.face.clubs,.face.spades{color:#16140f}.face.joker{color:#6a3fa0}.face.joker.big{color:#b03f6e}.face.joker .joker-word{position:absolute;left:50%;bottom:.14em;transform:translate(-50%);font-size:.12em;font-weight:800;letter-spacing:.08em}.card.guessable{cursor:pointer}.card.guessable:hover,.card.guessable:focus-visible{transform:translateY(-6px);outline:none;box-shadow:0 1px 1px #00000059,0 10px 18px #00000073}.card.guessable:focus-visible .face{box-shadow:inset 0 0 0 2px var(--accent);border-radius:.16em}.card.won{outline:2px solid var(--gold);outline-offset:2px}.card.dim{opacity:.45}@media(prefers-reduced-motion:reduce){.card,.card.guessable:hover{transition:none;transform:none}}@media(max-width:560px){body.howto{font-size:16px}.card{width:44px;height:64px;font-size:44px}.card.mini{width:32px;height:47px;font-size:32px}}