:root{--bg: #f4f1ea;--ink: #1f2a2e;--muted: #566065;--panel: #ffffff;--line: #e2ddd2;--felt: #1d6b4f;--felt-dark: #134a37;--gold: #e8b84a;--accent: #1d6b4f;--red: #c8102e;--black: #1b1f23;--good: #1a7f4b;--warn: #b25e09;--card-w: 58px;--card-h: 82px;--overlap: -24px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink)}*{box-sizing:border-box}body{margin:0;background:var(--bg)}h1,h2,h3{font-family:Georgia,Times New Roman,serif;margin:0 0 .5em}a{color:var(--accent)}button{font:inherit;cursor:pointer}button:disabled{cursor:default}.muted{color:var(--muted)}.small{font-size:.85rem}.suit-S,.suit-C{color:var(--black)}.suit-H,.suit-D{color:var(--red)}.four-color .suit-D{color:#b85c00}.four-color .suit-C{color:#14784a}.suit-NT{color:#2c4a7c;font-size:.8em;font-weight:700}.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.logo{font-family:Georgia,serif;font-size:1.25rem;font-weight:700;text-decoration:none;color:var(--ink)}.topbar nav{display:flex;gap:4px}.topbar nav a{padding:6px 14px;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:600}.topbar nav a.on,.topbar nav a:hover{background:#e7f1ec;color:var(--accent)}main{max-width:1240px;margin:0 auto;padding:16px}.btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 14px;border-radius:8px;font-weight:600}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.45}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover{background:var(--felt-dark)}.btn.ghost{background:transparent}.btn.big{padding:12px 22px;font-size:1.05rem}.btn.small{padding:5px 10px;font-size:.85rem}.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.btn-row.center{justify-content:center}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}.panel h3{font-size:1rem}.chip{font-size:.75rem;padding:2px 8px;border-radius:999px;background:#eef0ee;color:var(--muted);font-weight:600}.chip.vul{background:#fde6e9;color:var(--red)}.card{position:relative;width:var(--card-w);height:var(--card-h);border-radius:7px;border:1px solid #b9b4a6;background:#fffdf8;padding:0;display:block;box-shadow:0 1px 2px #00000040;transition:transform .12s,box-shadow .12s;font-family:Georgia,serif}.card .rk{position:absolute;top:3px;left:5px;font-size:1.15rem;font-weight:700;line-height:1;letter-spacing:-1px}.card .st{position:absolute;top:23px;left:5px;font-size:.95rem;line-height:1}.card .big{position:absolute;right:5px;bottom:3px;font-size:1.7rem;line-height:1;opacity:.9}.card:disabled{opacity:1}.card.playable:hover{transform:translateY(-10px);box-shadow:0 6px 12px #00000059}.card.dim{filter:brightness(.72)}.card.hint{outline:3px solid var(--gold);transform:translateY(-10px)}.card.armed{outline:3px solid #fff;transform:translateY(-16px);box-shadow:0 8px 14px #0006}.card.ten .rk{letter-spacing:-2.5px;margin-left:-2px}.card.winner{outline:3px solid var(--gold)}.card.sm{--card-w: 46px;--card-h: 66px}.card.sm .rk{font-size:1rem}.card.sm .st{top:20px;font-size:.85rem}.card.sm .big{font-size:1.3rem}.fan{display:flex;justify-content:center;padding-top:12px}.fan .slot{margin-left:var(--overlap)}.fan .slot:first-child{margin-left:0}.fan .slot.gap{margin-left:calc(var(--overlap) + 10px)}.fan.sm{--overlap: -20px}.backs{display:flex;justify-content:center}.back{width:26px;height:38px;border-radius:4px;margin-left:-17px;border:1px solid #0d2f23;background:repeating-linear-gradient(45deg,#b33a3a,#b33a3a 4px,#9c2f2f 4px,#9c2f2f 8px);box-shadow:0 1px 2px #0000004d}.back:first-child{margin-left:0}.west .backs,.east .backs{flex-wrap:wrap;max-width:110px;margin:0 auto;row-gap:3px;padding-left:17px}.diagram{background:#fffdf8f5;border-radius:8px;padding:8px 10px;display:block;width:fit-content;margin:0 auto;text-align:left;font-family:Georgia,serif;min-width:110px;font-size:1.08rem}.diagram-row{white-space:nowrap}.diagram-row{display:flex;gap:6px;line-height:1.45}.diagram .pip{width:1em}.diagram .ranks{font-weight:700;letter-spacing:.5px;color:var(--ink)}.table-col{min-width:0}.tablebar{display:none}.note.intro{margin:0 0 12px;background:#fff;border-color:var(--accent)}.banner{background:#fffdf8;border-radius:14px;padding:16px 20px;max-width:340px;text-align:center;box-shadow:0 6px 20px #0000004d}.banner p{margin:6px 0 0;line-height:1.4}.trick-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}.trick-caption{color:#fff;font-weight:600;background:#0000004d;padding:2px 12px;border-radius:999px;font-size:.85rem}.trick.clickable{cursor:pointer}.btn.on{background:#f1ead6;border-color:var(--gold)}.recap{list-style:none;margin:0;padding:0;font-size:.88rem;line-height:1.4}.recap li{display:flex;gap:8px;padding:3px 0}.recap .ok .mark{color:var(--good)}.recap .off .mark{color:var(--red)}.summary{font-size:.9rem;line-height:1.4;margin:0 0 10px;text-align:left}.others th{font-size:.72rem;text-transform:uppercase;color:var(--muted);text-align:left;padding:2px 6px}.others th.r{text-align:right}.legend .led{text-decoration:underline}.legend .won{background:#fdf1c9;padding:0 4px;border-radius:4px}code{background:#eef0ee;padding:1px 5px;border-radius:4px}:focus-visible{outline:3px solid #2c6fd1;outline-offset:2px}.game{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px;align-items:start}.felt{background:radial-gradient(ellipse at center,#248a65 0%,var(--felt) 55%,var(--felt-dark) 100%);border-radius:22px;border:6px solid #5a3b22;box-shadow:inset 0 0 40px #00000059,0 4px 14px #0003;padding:14px;display:grid;grid-template-columns:minmax(96px,150px) minmax(0,1fr) minmax(96px,150px);grid-template-areas:". north ." "west center east" "south south south";gap:8px;min-height:640px}.area{text-align:center;min-width:0}.north{grid-area:north}.south{grid-area:south}.west{grid-area:west;align-self:center}.east{grid-area:east;align-self:center}.felt>.center{grid-area:center;display:flex;align-items:center;justify-content:center;min-height:300px}.seat-label{display:inline-flex;gap:6px;align-items:center;color:#e9f3ee;font-weight:600;font-size:.9rem;padding:3px 12px;border-radius:999px;margin:6px 0;background:#00000038}.seat-label.active{background:var(--gold);color:#3a2a00}.seat-label .tag.vul{background:#c8102e;color:#fff}.seat-label .tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;background:#ffffff40;padding:1px 6px;border-radius:999px}.hand-facts{color:#d5e8de;font-size:.85rem}.trick{position:relative;width:250px;height:250px}.trick-slot{position:absolute}.trick-slot.top{top:0;left:50%;transform:translate(-50%)}.trick-slot.bottom{bottom:0;left:50%;transform:translate(-50%)}.trick-slot.left{left:14px;top:50%;transform:translateY(-50%)}.trick-slot.right{right:14px;top:50%;transform:translateY(-50%)}.trick-slot .card{animation:drop .18s ease-out}@keyframes drop{0%{opacity:0;transform:scale(1.25)}to{opacity:1;transform:none}}.bid-panel{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}.auction{background:#fffdf8;border-radius:10px;padding:8px;width:100%;max-width:330px}.auction table{width:100%;border-collapse:collapse;table-layout:fixed}.auction th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:2px 0 4px;border-bottom:2px solid var(--line)}.auction th.vul{border-bottom-color:var(--red);color:var(--red)}.auction td{text-align:center;padding:1px;height:30px}.auction td.pending{color:#8a5f00;font-weight:700}.call{border:0;background:none;padding:3px 6px;border-radius:6px;font-weight:700;font-size:1rem;color:var(--ink)}.call:hover,.call.sel{background:#f1ead6}.call-pass{color:#2f7d57;font-weight:600}.call-double{color:var(--red)}.call-redouble{color:#2c4a7c}.meaning{margin:6px 2px 0;font-size:.83rem;line-height:1.35;color:var(--ink);border-top:1px solid var(--line);padding-top:6px;text-align:left}.side .auction{padding:0;max-width:none}.bidbox{background:#fffdf8;border-radius:10px;padding:8px;width:100%;max-width:330px}.bb-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.bb-row{display:grid;grid-template-columns:2fr 1.5fr 1.5fr;gap:4px;margin-top:6px}.bb{border:1px solid #cfc8b6;background:#fff;border-radius:6px;padding:5px 0;font-weight:700;color:var(--ink)}.bb:hover:not(:disabled){background:#f1ead6;border-color:var(--accent)}.bb:disabled{opacity:.28}.bb.pass{background:#e3f3ea;color:#1a6b45}.bb.dbl{background:#fde6e9;color:var(--red)}.bb.rdbl{background:#e4ebf7;color:#2c4a7c}.bb.hint{outline:3px solid var(--gold)}.side{display:flex;flex-direction:column;gap:12px}.board-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.9rem}.status{margin-top:10px;font-weight:700;font-size:1.05rem}.contract-box{margin-top:10px;padding:10px;border-radius:10px;background:#f6f3ea}.contract{font-family:Georgia,serif;font-size:1.6rem;font-weight:700}.contract .by{font-size:.9rem;font-weight:400;color:var(--muted);font-family:system-ui,sans-serif}.tricks{display:flex;gap:16px;margin:4px 0}.note{margin-top:10px;padding:10px 12px;border-radius:10px;font-size:.9rem;line-height:1.4;background:#f6f3ea;border-left:4px solid var(--muted)}.note p{margin:4px 0 0}.note.good{background:#e6f5ec;border-color:var(--good)}.note.warn{background:#fdf1e0;border-color:var(--warn)}.note.hint-note{background:#fdf6dc;border-color:var(--gold)}.settings{display:grid;gap:6px;font-size:.9rem}.settings label{display:flex;gap:8px;align-items:center}.result{background:#fffdf8;border-radius:14px;padding:18px 20px;text-align:center;max-width:420px;width:100%;box-shadow:0 6px 20px #0000004d}.result h2{font-size:1.25rem}.result h2.good{color:var(--good)}.result h2.bad{color:var(--red)}.score{font-size:1.1rem}.compare{display:flex;justify-content:center;gap:22px;margin:12px 0;font-size:.85rem;color:var(--muted)}.num{display:block;font-family:Georgia,serif;font-size:1.7rem;font-weight:700;color:var(--ink)}.result details{text-align:left;font-size:.88rem}.result summary{cursor:pointer;color:var(--accent);font-weight:600;text-align:center}.others{width:100%;border-collapse:collapse;margin-top:6px}.others td{padding:2px 6px;border-bottom:1px solid var(--line)}.others .r{text-align:right;font-variant-numeric:tabular-nums}.tricklist{width:100%;border-collapse:collapse;font-size:.88rem;text-align:center}.tricklist th{color:var(--muted);font-weight:600}.tricklist td{padding:2px 0}.tricklist td.led{text-decoration:underline}.tricklist td.won{background:#fdf1c9;font-weight:700;border-radius:4px}.hero{text-align:center;padding:44px 16px 36px;background:radial-gradient(ellipse at center,#248a65 0%,var(--felt) 60%,var(--felt-dark) 100%);color:#fff;border-radius:22px}.hero h1{font-size:clamp(1.8rem,4vw,2.8rem)}.hero p{max-width:620px;margin:0 auto 18px;font-size:1.08rem;line-height:1.5;color:#dcefe6}.hero-cards{font-size:2rem;letter-spacing:10px;margin-bottom:8px}.hero-cards span{background:#fffdf8;border-radius:6px;padding:2px 8px;margin:0 3px;display:inline-block;letter-spacing:0}.hero .btn{border-color:transparent}.hero .btn.primary{background:var(--gold);color:#3a2a00}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:18px}.tile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;text-decoration:none;color:var(--ink);display:block}a.tile:hover{border-color:var(--accent);box-shadow:0 3px 10px #00000014}.tile p{margin:0;color:var(--muted);line-height:1.4}.code-form{display:flex;gap:6px;margin-top:10px}.code-form input{flex:1;min-width:0;padding:8px;border:1px solid var(--line);border-radius:8px;font:inherit}.stats{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;color:var(--muted);font-size:.9rem;margin-bottom:10px}.learn{display:grid;grid-template-columns:290px minmax(0,1fr);gap:20px;align-items:start}.lesson-list{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;position:sticky;top:70px}.lesson-list ol{list-style:none;margin:10px 0 0;padding:0}.lesson-list a{display:flex;gap:8px;padding:7px 8px;border-radius:8px;text-decoration:none;color:var(--ink);font-weight:600}.lesson-list a:hover,.lesson-list a.current{background:#e7f1ec}.lesson-list small{display:block;font-weight:400;color:var(--muted)}.check{width:18px;color:var(--good);flex:none}.progress{height:6px;background:#e8e4d9;border-radius:3px;overflow:hidden}.progress div{height:100%;background:var(--good)}.lesson{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 28px;max-width:760px;line-height:1.6}.lesson h1{font-size:1.9rem}.lesson h2{font-size:1.2rem;margin-top:1.2em}.quiz{margin-top:20px;padding-top:8px;border-top:2px solid var(--line)}.question{margin-bottom:16px}.q{font-weight:600;margin-bottom:6px}.options{display:flex;gap:8px;flex-wrap:wrap}.option{border:1px solid var(--line);background:#faf8f2;border-radius:8px;padding:8px 14px;font-weight:600;color:var(--ink)}.option:hover{border-color:var(--accent)}.option.right{background:#e6f5ec;border-color:var(--good)}.option.wrong{background:#fde6e9;border-color:var(--red)}.why{margin:6px 0 0;font-size:.93rem}.why.right{color:var(--good)}.why.wrong{color:var(--warn)}.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 14px}.tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font-weight:600;color:var(--ink)}.tab.on{background:var(--accent);border-color:var(--accent);color:#fff}.practice-body{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px;align-items:start}.felt.drill{display:flex;flex-direction:column;align-items:center;gap:12px;min-height:0;padding:20px 14px 24px}.drill-q{color:#fff;font-weight:600;font-size:1.05rem;margin:0;text-align:center}.drill .note{max-width:420px;width:100%;margin-top:0}.drill .note .btn{margin-top:8px}.score-panel{text-align:center;line-height:1.8}.big-num{font-family:Georgia,serif;font-size:3rem;font-weight:700;line-height:1}hr{border:0;border-top:1px solid var(--line)}@media (max-width: 980px){.game,.learn,.practice-body{grid-template-columns:minmax(0,1fr)}.lesson-list{position:static;order:2}.tablebar{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin-bottom:8px;position:sticky;top:52px;z-index:5}.tablebar .status{margin:0}.tablebar .btn-row{margin-top:6px}.tb-line{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}.tb-contract .contract{font-size:1.05rem}.tb-contract .by{font-size:.8rem}.desk-status{display:none}}@media (max-width: 640px){:root{--card-w: 46px;--card-h: 68px;--overlap: -23px}main{padding:8px}.felt{padding:8px;border-width:4px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"north north" "west east" "center center" "south south";min-height:0;gap:6px}.felt>.center{min-height:230px}.felt.bid{grid-template-areas:"north north" "west east" "south south" "center center"}.felt.bid .backs{display:none}.felt.bid>.center{min-height:0}.seat-label{flex-wrap:wrap;justify-content:center;font-size:.8rem}.auction,.bidbox{max-width:none}.bb{min-height:44px;font-size:1.05rem}.bb-row{grid-template-columns:2fr 1fr 1fr}.bb-row .bb{min-width:0;font-size:.95rem}.call{min-height:36px;min-width:40px}.settings label{min-height:36px}.settings input{width:20px;height:20px}.result{max-width:none}.btn{min-height:44px}.card.sm{--card-w: 40px;--card-h: 58px}.fan.sm{--overlap: -21px}.card .big{font-size:1.2rem}.card.sm .big{display:none}.trick{width:180px;height:210px}.trick-slot.left{left:0}.trick-slot.right{right:0}.diagram{min-width:0;padding:4px 8px;font-size:.92rem}.west .backs,.east .backs{max-width:none;flex-wrap:nowrap;padding-left:0}.west .back,.east .back{margin-left:-19px}.lesson{padding:16px}.topbar{padding:8px 10px}.topbar nav a{padding:6px 9px}}