:root{--felt-900: #0c2a20;--felt-800: #10382a;--felt-700: #17493a;--felt-600: #1e5c49;--ivory: #f4ede0;--ivory-dim: #d8cfbe;--gold: #d8a94a;--gold-dim: #9c7a33;--jade: #4fbf9a;--crimson: #c8503f;--ink: #1b1b18;--panel: #14231d;--panel-raised: #1c3129;--border: rgba(216, 169, 74, .28);--shadow: 0 10px 30px rgba(0, 0, 0, .45);--radius: 12px;--font-ui: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:radial-gradient(ellipse at 50% 0%,var(--felt-700),var(--felt-900) 70%);color:var(--ivory);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}#app{position:relative;min-height:100%;display:flex;flex-direction:column}#ui-root{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}h1,h2,h3{font-family:var(--font-ui);font-weight:600;letter-spacing:.01em;margin:0 0 .5em}h1{font-size:clamp(1.9rem,4vw,2.9rem)}p{line-height:1.6;margin:0 0 1em}a{color:var(--gold)}button{font:inherit;cursor:pointer}.btn{appearance:none;border:1px solid var(--border);background:linear-gradient(180deg,var(--panel-raised),var(--panel));color:var(--ivory);padding:.6rem 1.1rem;border-radius:10px;transition:transform .08s ease,border-color .15s ease,background .15s ease}.btn:hover:not(:disabled){border-color:var(--gold);transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--primary{background:linear-gradient(180deg,var(--gold),var(--gold-dim));border-color:var(--gold);color:#2a1e06;font-weight:600}.btn--ghost{background:transparent}.btn--small{padding:.35rem .7rem;font-size:.85rem}.shell{width:min(1120px,100%);margin:0 auto;padding:clamp(1rem,3vw,2.5rem);flex:1}.topbar{display:flex;align-items:center;gap:1rem;padding:.75rem clamp(1rem,3vw,2.5rem);border-bottom:1px solid var(--border);background:#0a1a14b8;backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}.topbar__brand{font-family:var(--font-ui);font-size:1.05rem;color:var(--gold);text-decoration:none;white-space:nowrap}.topbar__nav{display:flex;gap:.25rem;flex-wrap:wrap;margin-left:auto}.topbar__link{color:var(--ivory-dim);text-decoration:none;padding:.35rem .7rem;border-radius:8px;font-size:.92rem}.topbar__link:hover{background:#ffffff0f;color:var(--ivory)}.topbar__link[aria-current=page]{background:#d8a94a29;color:var(--gold)}.card{background:linear-gradient(180deg,#1c3129e6,#14231de6);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.25rem;box-shadow:var(--shadow)}.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.muted{color:var(--ivory-dim)}.small{font-size:.88rem}.tag{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;padding:.15rem .5rem;border-radius:999px;border:1px solid var(--border);color:var(--gold)}.tag--done{border-color:var(--jade);color:var(--jade)}.tile{display:inline-block;width:var(--tile-w, 40px);height:calc(var(--tile-w, 40px) * 1.4);border-radius:5px;background-color:var(--ivory);background-repeat:no-repeat;background-position:center 46%;background-size:76% 76%;border:1px solid #b9ae98;border-bottom-width:3px;box-shadow:0 1px 2px #0000004d;vertical-align:middle;flex:none}.tile--sm{--tile-w: 30px}.tile--selected{outline:2px solid var(--gold);transform:translateY(-6px)}.tile--dim{opacity:.45}.tile-row{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-end}.tile-row--group{gap:1px}.hand-groups{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}.banner{border-left:3px solid var(--gold);background:#d8a94a17;padding:.8rem 1rem;border-radius:0 8px 8px 0;margin:0 0 1rem}.banner--warn{border-left-color:var(--crimson);background:#c8503f1f}.banner--good{border-left-color:var(--jade);background:#4fbf9a1a}.footer-note{padding:1.5rem clamp(1rem,3vw,2.5rem);color:var(--ivory-dim);font-size:.82rem;border-top:1px solid rgba(255,255,255,.07)}.shell.play-shell{width:min(1500px,100%);padding:.75rem}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:.75rem;align-items:stretch}.play-main{display:flex;flex-direction:column;gap:.6rem;min-width:0}.table-surface{position:relative;width:100%;aspect-ratio:4 / 3;max-height:72vh;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}.table-surface canvas{display:block;width:100%!important;height:100%!important}.action-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-height:46px;padding:.5rem .75rem;border:1px solid var(--border);border-radius:var(--radius);background:#14231dd9}.action-bar__prompt{display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem}.coach-panel{display:flex;flex-direction:column;gap:.6rem;padding:.85rem;border:1px solid var(--border);border-radius:var(--radius);background:#0e231de6;overflow-y:auto;max-height:calc(72vh + 62px)}.coach-panel__header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.coach-panel__header h2{margin:0;font-size:1.05rem}.coach-panel .banner{margin:0}.coach-stat{padding:.5rem .65rem;border-radius:8px;background:#ffffff0a}.coach-suggest{padding:.65rem .75rem}.coach-suggest p{margin:0}.coach-log ol{margin:.5rem 0 0;padding-left:1.1rem}@media(max-width:900px){.play-layout{grid-template-columns:minmax(0,1fr)}.table-surface{aspect-ratio:1 / 1;max-height:60vh}.coach-panel{max-height:none}}.lesson-list{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem;counter-reset:lesson}.lesson-list__link{display:grid;grid-template-columns:2.1rem minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.7rem .9rem;border:1px solid var(--border);border-radius:var(--radius);background:#14231db3;color:inherit;text-decoration:none}.lesson-list__link:hover,.lesson-list__link:focus-visible{border-color:var(--gold);background:#d8a94a14}.lesson-list__number{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:#ffffff0f;font-variant-numeric:tabular-nums}.is-done .lesson-list__number{background:#4fbf9a38;color:var(--jade)}.lesson-list__body{display:flex;flex-direction:column;gap:.15rem;min-width:0}.lesson-panel{gap:.7rem}.lesson-progress{display:flex;gap:4px}.lesson-progress__dot{flex:1;height:3px;border-radius:2px;background:#ffffff1f}.lesson-progress__dot.is-done{background:var(--jade)}.lesson-progress__dot.is-current{background:var(--gold)}.lesson-heading{margin:.2rem 0 0;font-size:1rem}.lesson-text{margin:0;font-size:.92rem;line-height:1.55}.lesson-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.55rem .65rem;border-radius:8px;background:#ffffff0a}.lesson-footer{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.5rem}.lesson-footer .banner{flex-basis:100%}.tile-row--wrap{max-width:100%}.section-heading{margin:2rem 0 .6rem;font-size:1.15rem}.card--link{display:block;color:inherit;text-decoration:none}.card--link:hover,.card--link:focus-visible{border-color:var(--gold)}.drill{display:flex;flex-direction:column;gap:.9rem}.drill__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.6rem}.drill__header h1{margin:0;font-size:1.4rem}.drill__score{display:flex;align-items:center;gap:.5rem}.drill__streak{padding:.15rem .5rem;border-radius:999px;background:#d8a94a29;color:var(--gold)}.drill__prompt{margin:0;font-size:1.02rem;line-height:1.55}.drill__melds,.drill__discard,.drill__table-note{display:flex;flex-direction:column;gap:.35rem;padding:.7rem .85rem;border:1px solid var(--border);border-radius:var(--radius);background:#14231d99}.drill__options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.5rem}.drill__option{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;padding:.7rem .85rem;border:1px solid var(--border);border-radius:var(--radius);background:#14231dcc;color:inherit;font:inherit;text-align:left;cursor:pointer}.drill__option:not(:disabled):hover,.drill__option:not(:disabled):focus-visible{border-color:var(--gold);background:#d8a94a14}.drill__option:disabled{cursor:default;opacity:.75}.drill__option.is-answer{border-color:var(--jade);background:#4fbf9a1f;opacity:1}.drill__option.is-wrong{border-color:var(--crimson);background:#c8503f1f;opacity:1}.drill__footer{display:flex;flex-wrap:wrap;gap:.4rem}.sheet{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.sheet__row{display:flex;gap:.9rem;padding:.65rem .9rem;background:#14231d99}.sheet__row+.sheet__row{border-top:1px solid rgba(255,255,255,.06)}.sheet__faan{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:3rem;padding:.2rem 0;border-radius:8px;background:#d8a94a1f;color:var(--gold);line-height:1.1}.sheet__body{min-width:0}.sheet__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}.sheet__chinese{color:var(--ivory-dim);font-size:.9rem}.sheet--table .sheet__row{display:grid;grid-template-columns:4rem 4rem 1fr 1fr;align-items:center;font-variant-numeric:tabular-nums}.sheet__row--head{background:#ffffff0d}.score-sheet__totals{display:flex;flex-direction:column;gap:2px;margin-top:.5rem}.score-sheet__row{display:flex;justify-content:space-between;gap:.6rem;padding:.3rem .5rem;border-radius:6px;background:#ffffff0a;font-size:.88rem;font-variant-numeric:tabular-nums}.score-sheet__row.is-you{background:#d8a94a1f}.score-pos{color:var(--jade)}.score-neg{color:var(--crimson)}.score-sheet__history{margin:.6rem 0 0;padding-left:1.1rem}.settings__presets,.settings__choices{display:flex;flex-wrap:wrap;gap:.4rem}.chip{padding:.42rem .85rem;border:1px solid var(--border);border-radius:999px;background:#14231dcc;color:inherit;font:inherit;font-size:.9rem;cursor:pointer}.chip:hover,.chip:focus-visible{border-color:var(--gold)}.chip.is-on{border-color:var(--gold);background:#d8a94a2e;color:var(--gold)}.settings__toggles{display:flex;flex-direction:column;gap:.5rem}.settings__toggle{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:.75rem .9rem;border:1px solid var(--border);border-radius:var(--radius);background:#14231db3;color:inherit;font:inherit;text-align:left;cursor:pointer}.settings__toggle:hover,.settings__toggle:focus-visible{border-color:var(--gold)}.settings__toggle-body{display:flex;flex-direction:column;gap:.2rem;min-width:0}.settings__pip{position:relative;flex:none;width:42px;height:24px;border-radius:999px;background:#ffffff1f;transition:background .15s ease}.settings__pip:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--ivory-dim);transition:transform .15s ease,background .15s ease}.settings__toggle.is-on .settings__pip{background:#4fbf9a59}.settings__toggle.is-on .settings__pip:after{transform:translate(18px);background:var(--jade)}.skip-link{position:absolute;top:0;left:0;z-index:10;padding:.6rem 1rem;background:var(--gold);color:var(--ink);font-weight:600;text-decoration:none;border-radius:0 0 8px;transform:translateY(-110%)}.skip-link:focus{transform:translateY(0)}:focus-visible{outline:2px solid var(--gold);outline-offset:2px}main:focus{outline:none}.coach-panel__controls{display:flex;gap:.3rem}@media(max-width:640px){.shell.play-shell{padding:.5rem}.table-surface{aspect-ratio:3 / 4;max-height:56vh}.topbar{flex-direction:column;align-items:stretch;gap:.5rem;padding:.6rem .75rem}.topbar__nav{flex-wrap:nowrap;margin-left:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.topbar__nav::-webkit-scrollbar{display:none}.topbar__link{white-space:nowrap}.lesson-list__link{grid-template-columns:2.1rem minmax(0,1fr)}.lesson-list__state{display:none}.drill__options{grid-template-columns:minmax(0,1fr)}.sheet--table .sheet__row{grid-template-columns:3.2rem 3.2rem 1fr 1fr;font-size:.85rem}.settings__toggle{gap:.6rem}}@media(pointer:coarse){.btn,.chip,.drill__option{min-height:44px}}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}