:root{--ink:#162c35;--muted:#526772;--paper:#f6f8fa;--line:#dce4e8;--accent:#086a57;--gold:#f4cb74;--white:#fff;--red:#b43d4e;--radius:18px;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.6}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default}a:hover{text-decoration:underline}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #ce961e;outline-offset:4px}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.18;letter-spacing:-.035em}h1{font-size:2.5rem}h2{font-size:1.6rem}h3{font-size:1.15rem}p{margin-bottom:1rem}.skip-link{position:absolute;left:20px;top:-70px;background:white;padding:12px;z-index:20}.skip-link:focus{top:8px}
.site-header{background:white;border-bottom:1px solid var(--line)}.header-inner{max-width:1320px;margin:auto;padding:20px 32px;display:flex;align-items:center;gap:60px}.brand{font-weight:800;letter-spacing:-1px;font-size:1.4rem;display:flex;gap:12px;align-items:center;white-space:nowrap}.brand:hover{text-decoration:none}.brand-light{font-weight:400}.brand-dot{color:var(--accent)}.brand-mark{background:var(--ink);color:white;border-radius:9px;padding:1px 8px;font-size:1.4rem;line-height:1.7}.brand-mark span{color:var(--gold);font-size:.85rem;margin-left:2px}.header-inner nav{display:flex;gap:30px;align-items:center}.header-inner nav a{font-size:.9rem;font-weight:600;color:var(--muted);position:relative}.header-inner nav a[aria-current=page]{color:var(--accent)}.header-inner nav a[aria-current=page]:after{content:"";position:absolute;bottom:-27px;left:0;right:0;height:3px;background:var(--accent)}.header-note{margin-left:auto;font-size:.8rem;white-space:nowrap;color:var(--muted)}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#288973;margin-right:7px}
.page-wrap{max-width:1320px;padding:30px 32px 60px;margin:auto}.eyebrow{text-transform:uppercase;font-size:.75rem;letter-spacing:.14em;font-weight:750;color:var(--accent);margin-bottom:8px}.page-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}.page-heading h1{margin-bottom:8px}.page-heading p{color:var(--muted);margin-bottom:0}.small-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:30px;background:white;padding:7px 13px;font-size:.8rem;color:var(--muted);white-space:nowrap}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start}.game-shell{background:white;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 30px #152d3605}.game-toolbar{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}.mode-label{font-weight:700;font-size:.9rem}.mode-label small{display:block;font-weight:400;font-size:.75rem;color:var(--muted)}.text-button{border:0;background:transparent;color:var(--accent);font-weight:650;font-size:.85rem;padding:8px}.table{background:radial-gradient(ellipse at center,#1c6c5a,#124a40);color:#fff;min-height:440px;position:relative;overflow:hidden;padding:20px;display:grid;grid-template-columns:90px minmax(0,1fr) 90px;grid-template-rows:65px minmax(180px,1fr) 55px;align-items:center;gap:8px}.table:before{content:"";position:absolute;inset:13px;border:1px solid #d9edd41c;border-radius:110px;pointer-events:none}.seat{z-index:1;text-align:center;font-size:.85rem;line-height:1.5}.seat small{display:block;color:#c1d9d1;font-size:.75rem}.seat-top{grid-column:2;grid-row:1}.seat-left{grid-column:1;grid-row:2}.seat-right{grid-column:3;grid-row:2}.seat-bottom{grid-column:2;grid-row:3}.avatar{display:flex;width:36px;height:36px;align-items:center;justify-content:center;margin:0 auto 4px;border-radius:50%;background:#ffffff17;color:#e7f1ed;font-size:.85rem;border:1px solid #ffffff25}.seat.active .avatar{box-shadow:0 0 0 3px var(--gold);color:var(--ink);background:var(--gold)}.seat.active>span{color:var(--gold)}.table-center{grid-column:2;grid-row:2;text-align:center;z-index:1}.table-center h2{font-family:Georgia,serif;font-weight:500;font-size:2.2rem;letter-spacing:-.04em;margin-bottom:12px}.table-center p{color:#d4e6df;font-size:.9rem;max-width:360px;margin:0 auto 20px}.table-kicker{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#d4e6df;margin-bottom:14px}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:white;border:1px solid transparent;padding:11px 20px;border-radius:9px;font-weight:650;font-size:.9rem;min-height:44px}.button:hover{filter:brightness(1.07);text-decoration:none}.button.gold{background:var(--gold);color:#21372d}.button.outline{background:transparent;border-color:#ffffff60;color:white}.button.secondary{background:#edf4f1;color:var(--accent)}.button:disabled{opacity:.4;filter:none}.button-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.table-note{font-size:.75rem;color:#c0d7ce;margin-top:18px}.table-watermark{font-family:Georgia,serif;font-size:1rem;letter-spacing:.12em;color:#afd3bd;opacity:.55;position:absolute;bottom:20px;right:28px}.hand-area{min-height:157px;padding:12px 20px 20px}.hand-top{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.8rem;margin-bottom:12px}.hand-top strong{color:var(--ink);font-weight:650}.cards{display:flex;justify-content:center;padding:5px 2px 0;gap:7px;min-height:83px}.card{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;width:57px;height:81px;background:#fff;color:#19313a;border:1px solid #cbd7db;border-radius:7px;padding:4px 7px;line-height:1.1;flex-shrink:0;font-family:Georgia,serif;font-size:1.1rem;box-shadow:0 3px 1px #00000008}.card .pip{align-self:center;font-size:1.6rem}.card .lower{transform:rotate(180deg);align-self:flex-end;font-size:.85rem}.card.red{color:var(--red)}button.card{transition:transform .16s,border-color .16s}button.card:not(:disabled):hover{transform:translateY(-8px);border-color:var(--accent)}button.card:disabled{opacity:.4}.card.back{background:repeating-linear-gradient(45deg,#e5eaf0 0,#e5eaf0 3px,#f5f7fa 3px,#f5f7fa 7px);border:4px solid white;outline:1px solid var(--line);align-items:center;justify-content:center;color:#92a5ad;font-size:1.4rem}.empty-hand{font-size:.85rem;color:var(--muted);text-align:center;padding:10px}.game-status{padding:13px 20px;background:#edf4f1;border-top:1px solid #dce8e2;font-size:.85rem;color:#245347;display:flex;gap:10px;align-items:start}.game-status p{margin:0}.status-icon{font-size:1rem}.sidebar{display:flex;flex-direction:column;gap:18px}.side-panel{background:white;border:1px solid var(--line);border-radius:14px;padding:22px}.side-panel h2{font-size:1.05rem;margin-bottom:18px;letter-spacing:-.01em}.side-panel p{font-size:.85rem;color:var(--muted)}.rank-line{font-family:Georgia,serif;display:flex;justify-content:space-between;font-size:1.15rem;font-weight:bold;margin:14px 0 4px}.rank-caption{font-size:.7rem;display:flex;justify-content:space-between;color:var(--muted)}.point-row{display:flex;justify-content:space-between;font-size:.85rem;padding:8px 0;border-bottom:1px solid #edf0f2}.point-row:last-of-type{border:0}.point-row b{font-weight:600}.rule-link{display:block;font-size:.85rem;font-weight:650;color:var(--accent);margin-top:18px}.mini-rule{display:flex;gap:12px;margin:14px 0}.mini-rule span{color:var(--accent);font-size:.8rem}.mini-rule p{margin:0;font-size:.85rem}.side-panel.accent{background:#eaf0f8;border-color:#dce5ef}.side-panel.accent h2{margin-bottom:8px}.lesson-link{font-size:.85rem;font-weight:700;color:#294d79}.learn-heading{display:flex;justify-content:space-between;align-items:end;margin:34px 0 16px}.learn-heading h2{margin:0;font-size:1.45rem}.learn-heading a{font-size:.85rem;color:var(--accent)}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.lesson-card{display:block;border:1px solid var(--line);border-radius:12px;padding:23px;background:white;transition:transform .15s}.lesson-card:hover{text-decoration:none;transform:translateY(-3px);border-color:#8bada1}.lesson-number{font-size:.75rem;color:var(--accent);font-weight:700;letter-spacing:.1em}.lesson-card h3{margin:16px 0 9px}.lesson-card p{font-size:.85rem;color:var(--muted);margin-bottom:14px}.lesson-card small{font-size:.75rem;color:var(--muted)}.site-footer{border-top:1px solid var(--line);max-width:1256px;margin:auto;padding:24px 0 30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}.site-footer>div{display:flex;gap:20px;align-items:center}.footer-brand{font-weight:750}.site-footer span,.site-footer p,.site-footer nav{font-size:.8rem;color:var(--muted)}.site-footer nav{display:flex;gap:22px}.site-footer p{width:100%;margin:0;font-size:.75rem}.score-strip{display:flex;gap:22px;justify-content:center;align-items:center;font-size:.8rem;margin-bottom:14px}.score-strip strong{font-size:1.1rem;color:var(--gold)}.trick-cards{display:grid;grid-template-columns:62px 62px 62px;grid-template-rows:84px 84px;gap:6px;justify-content:center;align-items:center;min-height:177px}.trick-slot{position:relative;width:57px;height:81px;border:1px dashed #ffffff25;border-radius:7px}.trick-slot:first-child{grid-column:2;grid-row:2}.trick-slot:nth-child(2){grid-column:1;grid-row:1}.trick-slot:nth-child(3){grid-column:2;grid-row:1}.trick-slot:nth-child(4){grid-column:3;grid-row:1}.trick-slot .card{box-shadow:0 4px 15px #0002}.trick-label{font-size:.65rem;position:absolute;bottom:4px;left:0;right:0;color:#c0d7ce}.bid-input{display:flex;gap:8px;align-items:center;justify-content:center;margin:16px 0}.bid-input input{width:72px;border:1px solid #ffffff70;border-radius:7px;background:white;color:var(--ink);padding:7px;text-align:center}.bid-input label{font-size:.9rem}.suit-button{background:white;border:2px solid transparent;color:var(--ink);border-radius:8px;padding:8px 16px;font-size:1.7rem}.suit-button.red{color:var(--red)}.log-details{margin:0;padding:12px 20px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}.log-details summary{cursor:pointer}.log-list{padding-left:20px;max-height:190px;overflow:auto}.article-wrap{max-width:980px;margin:40px auto 70px;padding:0 28px}.article-wrap h1{max-width:760px;margin-bottom:18px}.article-intro{font-size:1.15rem;color:var(--muted);max-width:740px}.article-content{max-width:760px}.article-content h2{margin-top:36px}.article-content h3{margin-top:24px}.article-content p,.article-content li{color:#3e555f}.article-content a{color:var(--accent);text-decoration:underline}.article-content li{margin:8px 0}.article-content table{border-collapse:collapse;width:100%;margin:20px 0;background:white}.article-content th,.article-content td{padding:12px;text-align:left;border:1px solid var(--line)}.callout{background:#eaf3ee;border-left:3px solid var(--accent);padding:20px;margin:24px 0;border-radius:0 10px 10px 0}.article-content .callout p:last-child{margin:0}.practice-card{padding:25px;background:white;border:1px solid var(--line);border-radius:14px;margin:20px 0}.quiz-choices{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.quiz-choice{border:1px solid var(--line);background:#f5f8fa;padding:10px 16px;border-radius:8px}.quiz-choice.correct{border-color:#278461;background:#e5f4ec}.quiz-choice.wrong{border-color:#bf6970;background:#fcebed}.quiz-answer{padding:12px;border-radius:8px;background:#eef4f1}.feedback{color:var(--red);font-size:.85rem;margin:8px 0}.table .feedback{color:#ffdfb4}.reset-panel{padding:14px;background:#fff4df;border-bottom:1px solid #ead6b1;font-size:.85rem}.reset-panel .button{margin:4px}.teaching-tag{background:#ffffff18;color:var(--gold);border-radius:20px;padding:4px 10px;font-size:.7rem;display:inline-block;margin-bottom:8px}.article-content .button{color:white;text-decoration:none}.no-js{padding:20px;background:#fff3d6}.overview-row{display:flex;gap:20px;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin-bottom:24px}
@media(min-width:1500px){.page-wrap{padding-top:42px}.table{min-height:470px}}@media(max-width:1050px){.header-inner{gap:28px;padding:18px 24px}.header-note{display:none}.workspace{grid-template-columns:minmax(0,1fr) 240px}.page-wrap{padding:25px 24px 45px}.side-panel{padding:18px}.site-footer{margin:0 24px}.table{grid-template-columns:65px minmax(0,1fr) 65px;padding:16px;min-height:425px}.cards{gap:4px}.card{width:50px;height:76px;padding:4px}.table-center h2{font-size:1.8rem}}
@media(max-width:760px){.header-inner{padding:14px 18px;gap:12px;flex-wrap:wrap}.brand{font-size:1.2rem}.brand-mark{font-size:1.2rem}.header-inner nav{margin-left:auto;gap:18px}.header-inner nav a{font-size:.8rem}.header-inner nav a[aria-current=page]:after{bottom:-17px}.page-wrap{padding:22px 14px 35px}h1{font-size:2rem}.page-heading{margin-bottom:18px}.page-heading .small-badge{display:none}.page-heading p{font-size:.9rem}.workspace{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sidebar .accent{grid-column:1/-1}.table{min-height:420px}.lesson-grid{grid-template-columns:1fr}.lesson-card{padding:20px}.lesson-card h3{margin:8px 0}.site-footer{margin:0 18px}.site-footer>div{flex-wrap:wrap;gap:8px 15px}.article-wrap{padding:0 18px;margin-top:28px}.article-wrap h1{font-size:2rem}.table-center h2{font-size:1.9rem}.card{width:51px;height:77px}.cards{gap:5px}}
@media(max-width:470px){.header-inner{justify-content:center;padding:12px 14px}.header-inner nav{width:100%;justify-content:space-between;gap:12px;margin:5px 0 0}.header-inner nav a[aria-current=page]:after{bottom:-12px}.table{grid-template-columns:48px minmax(0,1fr) 48px;gap:2px;padding:12px 8px;min-height:425px}.table-center h2{font-size:1.7rem}.table-center p{font-size:.85rem}.table-center .button{font-size:.85rem;padding:9px 12px}.seat{font-size:.75rem}.seat small{font-size:.7rem}.avatar{width:30px;height:30px}.hand-area{padding:12px 8px 20px}.cards{gap:0;padding-left:7px}.cards .card{width:44px;margin-left:-6px;height:73px;font-size:1rem}.cards .card .pip{font-size:1.35rem}.cards .card:focus-visible{z-index:2}.sidebar{grid-template-columns:1fr}.sidebar .accent{grid-column:auto}.score-strip{gap:10px;font-size:.75rem}.table-watermark{display:none}.game-toolbar{padding:12px}.hand-top{font-size:.75rem}.article-content table{font-size:.85rem}.article-content td,.article-content th{padding:8px}.page-heading h1{font-size:1.8rem}.small-badge{white-space:normal}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}