@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#f6f5f0;--ink:#18332c;--muted:#77827c;--line:#dedfd5;--green:#1b5e48;--gold:#ead49d;--cream:#fffef9;--red:#b64a40}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}.shell{max-width:1440px;margin:auto;padding:0 48px}button,a,input,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #c79129;outline-offset:4px}.header{height:100px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{color:var(--ink);display:flex;align-items:center;gap:13px;text-decoration:none;font-family:Manrope,sans-serif;font-size:21px;font-weight:800;letter-spacing:3px}.brand-mark{width:43px;height:47px;border:1px solid var(--ink);border-radius:9px;display:grid;place-items:center;font-size:31px;letter-spacing:0;transform:rotate(-7deg)}.brand small{display:block;font-family:'DM Sans',sans-serif;font-size:8px;font-weight:600;letter-spacing:2px;margin-top:5px}.header-actions{display:flex;align-items:center;gap:28px}.live{font-size:10px;font-weight:700;letter-spacing:1.5px;display:flex;align-items:center;gap:7px}.live i,.table-label i,.status-dot{width:6px;height:6px;background:#4d9a6a;border-radius:50%;display:inline-block}.text-button{background:none;border:0;color:var(--ink);padding:8px}.button{border:1px solid var(--line);padding:12px 19px;border-radius:7px;font-weight:600;display:inline-flex;justify-content:center;align-items:center;gap:25px;background:transparent;transition:background .15s,transform .15s}.button:not(:disabled):active{transform:translateY(1px)}.subtle{border-color:#aab8ac}.primary{background:var(--green);border-color:var(--green);color:white}.primary:hover:not(:disabled){background:#104532}.pass{border-color:var(--line);color:#596b61}.intro{display:flex;align-items:center;justify-content:space-between;padding:34px 0 28px;gap:20px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.7px}.intro h1{font:600 42px/1.12 Manrope,sans-serif;letter-spacing:-1.7px;margin:10px 0}.intro p{color:var(--muted);margin:0;line-height:1.6}.match-info{text-align:right;display:flex;flex-direction:column;gap:9px}.match-info>span{font-size:10px;letter-spacing:2px;color:var(--muted)}.match-info strong{font:600 29px Manrope,sans-serif}.match-info small{font:400 12px 'DM Sans',sans-serif;color:var(--muted)}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}.game-panel{border:1px solid #d9dfd4;border-radius:14px;overflow:hidden;background:#fffefb;box-shadow:0 10px 40px #173a2510}.table-toolbar{height:43px;background:#112f28;display:flex;align-items:center;justify-content:space-between;padding:0 23px;color:#a6b8ac;font-size:10px}.table-label{letter-spacing:1.7px;display:flex;align-items:center;gap:8px;color:#d1dfd5}.felt{height:370px;position:relative;background:radial-gradient(ellipse at center,#24604a 0%,#174634 68%,#163f30 100%);color:#f9f5e7;overflow:hidden}.felt:before{content:'';position:absolute;inset:0;opacity:.15;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.3' filter='url(%23n)'/%3E%3C/svg%3E")}.table-line{position:absolute;inset:33px 45px 36px;border:1px solid #d5dfb220;border-radius:48%}.opponent{position:absolute;z-index:1;text-align:center;min-width:90px}.north{top:20px;left:50%;transform:translateX(-50%)}.west{top:135px;left:23px}.east{top:135px;right:23px}.avatar{border:1px solid #77947b88;background:#123c2e;border-radius:50%;height:40px;width:40px;display:inline-grid;place-items:center;color:var(--gold);font:600 16px Manrope,sans-serif}.opponent-name{margin:7px 0 4px;font-size:12px;font-weight:600}.opponent .meta{color:#b1c8b4;font-size:10px}.mini-cards{display:flex;justify-content:center;margin:9px auto 0;padding-right:10px}.mini-cards span{width:16px;height:24px;border-radius:3px;background:repeating-linear-gradient(45deg,#316449,#316449 2px,#29513d 2px,#29513d 4px);border:1px solid #94ad8999;margin-right:-8px;box-shadow:0 1px 3px #0003}.passed-label{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#c7caaf;margin-top:6px}.table-center{position:absolute;top:47%;left:50%;transform:translate(-50%,-30%);text-align:center;width:56%;max-width:430px}.table-center .eyebrow{color:#b7c9b7;font-size:8px}.trick-cards{min-height:91px;margin-top:13px;display:flex;justify-content:center;align-items:center;gap:6px}.empty-suit{font:70px/1 Georgia,serif;color:#d5dbb51f}.table-center p{font-size:10px;color:#9fbba6;margin:12px 0 0;line-height:1.5}.your-position{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:9px;align-items:center;font-size:11px;color:#c6d8c5}.avatar.human{width:29px;height:29px;font-size:10px;background:var(--gold);color:#234334;border:0}.hand-panel{padding:21px 23px}.hand-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.hand-heading h2{font-size:15px;margin:0;font-weight:600}.hand-heading h2 span{font-weight:400;font-size:11px;color:var(--muted);margin-left:10px}.turn-status{font-size:10px;color:var(--green);background:#e9f2e8;padding:6px 9px;border-radius:20px}.hand{display:flex;margin:21px 0 25px;gap:6px;overflow-x:auto;padding:4px 2px 8px;min-height:97px}.playing-card{border-radius:5px;width:48px;height:72px;flex:0 0 48px;background:var(--cream);border:1px solid #d8dcd1;box-shadow:0 2px 4px #0d311817;display:flex;flex-direction:column;justify-content:space-between;position:relative;padding:5px 6px;color:#263e34;transition:transform .15s,border-color .15s}.playing-card.red{color:#b74c40}.playing-card.selected{transform:translateY(-5px);border:2px solid #528c5a;background:#f4f7e9}.playing-card .corner{font:600 13px/1 Manrope,sans-serif}.playing-card .suit{font:24px/1 Georgia,serif;align-self:center}.playing-card .lower{align-self:flex-end;transform:rotate(180deg);font-size:11px}.playing-card.joker .suit{font-size:18px}.playing-card.joker .corner{font-size:10px}.trick-cards .playing-card{width:51px;height:76px;flex-basis:51px;box-shadow:0 5px 12px #0002}.decision-heading{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;padding-bottom:10px}.options{display:flex;flex-wrap:wrap;gap:7px;max-height:145px;overflow:auto;padding:2px 2px 8px}.option{padding:9px 12px;border:1px solid #dde1d8;background:white;border-radius:5px;color:#496252;font-size:11px;text-align:left;line-height:1.5}.option strong{font-weight:600;display:block;color:var(--ink)}.option[aria-pressed=true]{background:#e9f1e5;border-color:#6d956d}.play-bar{border-top:1px solid #e7e9e1;padding-top:17px;margin-top:15px;display:flex;align-items:center;justify-content:space-between;gap:10px}.play-bar>span{font-size:10px;color:var(--muted)}#error{padding:12px;background:#fff0eb;color:#a24635;font-size:12px;margin-top:14px;border-radius:6px}aside{display:grid;gap:20px}.side-card{background:#fffefb;border:1px solid var(--line);border-radius:12px;padding:23px}.section-heading{display:flex;align-items:center;justify-content:space-between}.learning h2{font:600 23px/1.25 Manrope,sans-serif;letter-spacing:-.5px;margin:18px 0 12px}.learning>p{font-size:12px;color:var(--muted);line-height:1.85;margin:0}.learning-stats{display:grid;grid-template-columns:1fr 1fr;padding:23px 0 20px;gap:18px}.learning-stats>div+div{border-left:1px solid var(--line);padding-left:18px}.learning-stats strong{display:block;font:600 29px Manrope,sans-serif;letter-spacing:-1px}.learning-stats span{font-size:9px;color:var(--muted)}.training-status{display:flex;align-items:center;gap:7px;font-size:10px}.training-status i{width:6px;height:6px;border-radius:50%;background:#aeb6a6}.training-status i.active{background:#4f9d59;animation:pulse 1.5s infinite}.progress-track{height:3px;background:#e9ece3;margin:12px 0 9px;border-radius:3px;overflow:hidden}.progress-track>div{height:100%;width:0;background:#6e9764;transition:width .3s}.learning small{font-size:9px;color:var(--muted);line-height:1.7;display:block}.settings{margin-top:21px;border-top:1px solid var(--line);padding-top:15px}.settings label{font-size:10px;display:flex;gap:7px;align-items:center;margin-bottom:13px}.settings input{accent-color:var(--green);margin:0}.mode-setting{justify-content:space-between}.settings select{font-size:10px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:5px;max-width:140px}.history h2{margin:0;font-size:13px;font-weight:600}.history .section-heading>span{font-size:8px;letter-spacing:1px;color:var(--muted)}.history ol{list-style:none;margin:18px 0 0;padding:0;max-height:244px;overflow:auto}.history li{display:flex;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid #eff0e9;font-size:11px}.history li:last-child{border:0}.event-avatar{font-size:9px;background:#eef0e6;border-radius:5px;display:grid;place-items:center;width:26px;height:26px;flex-shrink:0}.event-text strong{display:block;font-weight:600;margin-bottom:3px}.event-text span{color:var(--muted);font-size:10px;line-height:1.5}.event-hand{margin-left:auto;color:var(--muted);font-size:9px;white-space:nowrap}.empty-history{color:var(--muted)}footer{display:flex;align-items:center;justify-content:space-between;padding:27px 0 30px;color:#8a9389;font-size:9px}footer>span:last-child{font-size:8px;letter-spacing:1.7px}.footer-suit{font-size:14px;color:#40634b;padding:0 6px}dialog{border:1px solid var(--line);border-radius:14px;padding:28px;max-width:560px;width:calc(100% - 32px);color:var(--ink);background:var(--cream)}dialog::backdrop{background:#092c22a8;backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between}dialog h2{font:600 26px Manrope,sans-serif}dialog p,dialog li{font-size:13px;line-height:1.8}dialog li{margin-bottom:8px}.muted{color:var(--muted)}@keyframes pulse{50%{opacity:.35}}@media(min-width:1350px){.playing-card{width:52px;flex-basis:52px;height:78px}.felt{height:390px}}@media(max-width:1100px){.shell{padding:0 24px}.layout{grid-template-columns:minmax(0,1fr) 270px;gap:16px}.side-card{padding:19px}.felt{height:330px}.west{left:8px}.east{right:8px}.opponent{min-width:75px}.table-center{width:48%}.playing-card{width:42px;flex-basis:42px;height:65px}.hand{gap:4px}.play-bar>span{display:none}}@media(max-width:850px){.layout{grid-template-columns:1fr}aside{grid-template-columns:1fr 1fr}.intro h1{font-size:36px}.header{height:82px}.header-actions{gap:15px}.live{display:none}.felt{height:350px}.table-center{width:56%}.hand{gap:7px}.playing-card{width:48px;flex-basis:48px;height:72px}.hand-panel{padding:20px}.history ol{max-height:360px}}@media(max-width:520px){.shell{padding:0 14px}.brand{font-size:17px;gap:9px}.brand-mark{width:33px;height:38px;font-size:25px}.brand small{font-size:6px}.header-actions{gap:5px}.header-actions .button{padding:9px 11px;font-size:11px;gap:10px}.text-button{font-size:11px}.intro{padding:27px 0 22px}.intro .eyebrow{font-size:7px;letter-spacing:.8px}.intro h1{font-size:31px}.intro p{font-size:11px}.match-info strong{font-size:24px}.match-info small{display:block;font-size:9px}.match-info>span{font-size:8px}.felt{height:320px}.north{top:13px}.west,.east{top:120px}.opponent{min-width:62px}.avatar{width:34px;height:34px}.table-line{inset:28px 21px}.table-center{width:51%;top:48%}.trick-cards{gap:3px;min-height:74px}.trick-cards .playing-card{width:34px;height:54px;flex-basis:34px;padding:4px}.trick-cards .corner{font-size:10px}.trick-cards .suit{font-size:18px}.trick-cards .lower{font-size:8px}.trick-cards.many{flex-wrap:wrap;max-width:210px;margin:10px auto 0}.trick-cards.many .playing-card{width:26px;flex-basis:26px;height:40px;padding:3px}.trick-cards.many .suit{font-size:14px}.trick-cards.many .lower{display:none}.table-center p{font-size:9px}.opponent-name{font-size:11px}.opponent .meta{font-size:9px}.hand-heading{align-items:start}.hand-heading h2{font-size:13px}.hand-heading h2 span{margin-left:5px;font-size:10px}.turn-status{font-size:9px}.hand-panel{padding:17px 14px}.hand{margin:16px 0 17px}.decision-heading{font-size:10px}.play-bar .button{padding:12px 15px;font-size:12px}aside{grid-template-columns:1fr}.learning-stats{padding:17px 0}.learning h2{margin-top:14px}.history ol{max-height:220px}footer{gap:14px;font-size:8px}footer>span:last-child{font-size:7px;text-align:right}.table-toolbar{padding:0 14px;font-size:9px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Direct card selection: native buttons, keyboard access, no combination menu. */
.action-help{font-size:12px;color:var(--muted);margin:13px 0 0}
.hand{flex-wrap:wrap;overflow:visible;margin-top:16px;gap:7px;padding-top:8px}
.hand button.playing-card{appearance:none;text-align:left;min-width:44px;cursor:pointer}
.hand button.playing-card:disabled{opacity:1;cursor:default}
.hand button.playing-card:focus-visible{outline:3px solid #c79129;outline-offset:3px}
#selectionHint{font-size:12px;line-height:1.6;color:#596b61;min-height:20px;margin:0 0 12px}
#selectedCount{font-size:11px;color:#596b61}
.learning h2{font-size:21px;margin-top:0}
.settings label{font-size:12px;line-height:1.5;align-items:flex-start}
.settings input{margin-top:3px;flex-shrink:0}
.settings .mode-setting{margin-bottom:6px}
.settings select{display:block;width:100%;max-width:none;min-height:44px;font-size:13px;padding:9px}
.settings .mode-help{color:var(--muted);font-size:12px;line-height:1.6;margin:10px 0}
.learning small{font-size:11px}
.training-details{border-top:1px solid var(--line);margin-top:18px;padding-top:14px}
.training-details summary{font-size:12px;cursor:pointer}
.training-status{font-size:12px;line-height:1.5}
.learning-stats span{font-size:11px}
.dialog-heading h2{font-size:23px;margin:0}
@media(max-width:520px){.play-bar{flex-wrap:wrap}.play-bar #selectedCount{display:block;order:-1;width:100%}.hand{gap:7px}.playing-card{min-width:44px}.dialog-heading h2{font-size:20px}}
.play-bar #selectedCount{display:block}