:root{--bg: #12101f;--bg-raised: #1c1930;--bg-sunken: #0d0b16;--line: #2f2a48;--text: #ece9f5;--text-muted: #9b93b8;--accent: #8b6cf0;--accent-ink: #ffffff;--good: #4ade80;--bad: #f87171;--warn: #fbbf24;--suit-red: #f0555a;--suit-yellow: #f5c542;--suit-green: #4fbf6a;--suit-blue: #4a9df0;--radius: 12px;--gap: 12px}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-text-size-adjust:100%}body{min-height:100dvh}h1,h2{margin:0 0 8px;line-height:1.2}h2{font-size:1.05rem;letter-spacing:.02em}.app{max-width:900px;margin:0 auto;padding:16px 16px 48px}.muted{color:var(--text-muted)}.hit{color:var(--good)}.miss{color:var(--bad)}.panel{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:var(--gap)}.banner{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;margin-bottom:var(--gap);text-align:center}.banner--warn{border-color:var(--warn);color:var(--warn)}.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%);max-width:min(90vw,460px);background:var(--bg-sunken);border:1px solid var(--accent);border-radius:var(--radius);padding:10px 16px;box-shadow:0 8px 30px #00000080;z-index:10}.tag{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;padding:2px 6px;border-radius:999px;background:var(--line);color:var(--text-muted)}.tag--you{background:var(--accent);color:var(--accent-ink)}.tag--warn{background:transparent;border:1px solid var(--warn);color:var(--warn)}.btn{font:inherit;color:var(--text);background:var(--bg-sunken);border:1px solid var(--line);border-radius:10px;padding:10px 16px;cursor:pointer;transition:border-color .12s,transform .06s,background .12s}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.btn--ghost{background:transparent}.btn--ghost.is-on{border-color:var(--accent);color:var(--accent)}.btn--big{padding:14px 24px;font-size:1.05rem}.btn--bid{min-width:52px;font-size:1.15rem;font-weight:700}.field{display:flex;flex-direction:column;gap:4px;margin-bottom:var(--gap)}.field>span:first-child{font-size:.85rem;color:var(--text-muted)}.field input{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg-sunken);color:var(--text)}.field input:focus{outline:2px solid var(--accent);outline-offset:1px}.field__code{text-transform:uppercase;letter-spacing:.4em;font-size:1.3rem;text-align:center}.field--inline{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0}.field--inline input{width:90px}.join__title{font-size:2rem;margin-bottom:20px}.join__subtitle{display:block;font-size:.95rem;font-weight:400;color:var(--text-muted)}.join__actions{display:flex;flex-wrap:wrap;gap:10px}.join__hint{color:var(--text-muted);font-size:.9rem}.roomheader{display:flex;justify-content:space-between;align-items:center;gap:var(--gap);flex-wrap:wrap;margin-bottom:var(--gap)}.roomheader__code{display:block;font-size:1.8rem;letter-spacing:.25em;font-variant-numeric:tabular-nums}.roomheader__actions{display:flex;gap:8px;flex-wrap:wrap}.players,.specials{list-style:none;margin:0;padding:0}.players li{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}.players li:last-child{border-bottom:none}.players__dot{width:9px;height:9px;border-radius:50%;background:var(--bad);flex:none}.players__dot[data-on=true]{background:var(--good)}.players__name{flex:1}.players__offline{opacity:.6}.special{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer}.special--on{border-color:var(--accent);background:#8b6cf014}.special input{margin-top:4px;accent-color:var(--accent);width:18px;height:18px;flex:none}.special__body{display:flex;flex-direction:column;gap:2px;font-size:.9rem}.lobby__actions{display:flex;align-items:center;gap:var(--gap);flex-wrap:wrap}.statusbar{display:flex;flex-wrap:wrap;gap:8px 20px;padding:10px 14px;background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:var(--gap)}.statusbar__trump--red strong{color:var(--suit-red)}.statusbar__trump--yellow strong{color:var(--suit-yellow)}.statusbar__trump--green strong{color:var(--suit-green)}.statusbar__trump--blue strong{color:var(--suit-blue)}.strip{list-style:none;margin:0 0 var(--gap);padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}.strip__seat{background:var(--bg-raised);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:.88rem}.strip__seat--turn{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.strip__seat--you .strip__name{color:var(--accent);font-weight:700}.strip__seat--offline{opacity:.55}.strip__top{display:flex;align-items:center;gap:6px}.strip__name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strip__call{font-size:1.25rem;line-height:1.3}.strip__meta{display:flex;justify-content:space-between;font-size:.8rem}.strip__cards{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}.strip__cards .card{width:44px;height:64px;border-radius:6px}.strip__cards .card__value{font-size:1.1rem}.strip__cards .card__glyph{font-size:1rem}.strip__cards .card__name,.strip__cards .card__suit{display:none}.strip__score{font-variant-numeric:tabular-nums;font-weight:600}.table{background:var(--bg-sunken);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:var(--gap);min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.table__plays{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.table__plays li{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px;border-radius:10px;border:1px solid transparent}.table__play--won{border-color:var(--good);background:#4ade8014}.table__who{font-size:.8rem;color:var(--text-muted)}.table__result,.table__led,.table__empty{margin:0;text-align:center;font-size:.92rem}.prompt{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:var(--gap);text-align:center}.prompt--decide{border-color:var(--accent)}.prompt__text{margin:0 0 10px}.prompt__options{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.roundsummary{list-style:none;margin:0 0 16px;padding:0;text-align:left}.roundsummary li{display:grid;grid-template-columns:1fr auto 60px 60px;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line)}.roundsummary li:last-child{border-bottom:none}.roundsummary__name{font-weight:600}.roundsummary__total{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-muted)}.standings{list-style:none;margin:0 0 12px;padding:0;text-align:left}.standings li{display:flex;gap:12px;align-items:baseline;padding:10px 12px;border-radius:10px}.standings--first{background:#8b6cf026;border:1px solid var(--accent)}.standings__rank{width:2em;color:var(--text-muted)}.standings__name{flex:1;font-weight:600}.hand{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:12px;background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:var(--gap);min-height:110px;align-items:center}.hand--empty{justify-content:center}.hand__note{flex-basis:100%;margin:0;text-align:center;font-size:.88rem}.card{--card-color: var(--text-muted);position:relative;width:62px;height:90px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;font:inherit;background:#f6f4fb;color:#1a1726;border:2px solid var(--card-color);border-radius:8px;cursor:default;box-shadow:0 2px 8px #00000059}.card--red{--card-color: var(--suit-red)}.card--yellow{--card-color: var(--suit-yellow)}.card--green{--card-color: var(--suit-green)}.card--blue{--card-color: var(--suit-blue)}.card__value{font-size:1.5rem;font-weight:700;color:var(--card-color);line-height:1}.card__glyph{font-size:1.3rem;line-height:1}.card__suit{position:absolute;top:3px;right:5px;font-size:.85rem;color:var(--card-color)}.card--special{background:#241f3c;color:#f2eefc;border-color:var(--accent)}.card--special .card__value{color:#f2eefc;font-size:1.1rem}.card--playable{cursor:pointer;border-width:2px}.card--playable:hover{transform:translateY(-6px);box-shadow:0 8px 18px #00000080}.card--dimmed{opacity:.35;filter:grayscale(.6)}.card--back{background:repeating-linear-gradient(45deg,#2b2545,#2b2545 5px,#3a3160 5px,#3a3160 10px);border-color:var(--line)}.details__tabs{display:flex;gap:8px;margin-bottom:var(--gap)}.scoreboard{overflow-x:auto}.scoreboard table{width:100%;border-collapse:collapse;font-size:.86rem;font-variant-numeric:tabular-nums}.scoreboard th,.scoreboard td{padding:6px 8px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}.scoreboard thead th{color:var(--text-muted);font-weight:600}.scoreboard tfoot td,.scoreboard tfoot th{border-bottom:none;border-top:2px solid var(--line);font-size:1rem}.scoreboard__call{display:block;color:var(--text-muted);font-size:.78rem}.scoreboard__delta{font-weight:600}.scoreboard__legend{margin:10px 0 0;font-size:.8rem}.log{list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto;font-size:.88rem}.log li{padding:4px 0;border-bottom:1px solid var(--line)}.log li:last-child{border-bottom:none}@media(max-width:520px){.app{padding:12px 12px 40px}.card{width:54px;height:78px}.card__value{font-size:1.3rem}.roomheader__code{font-size:1.5rem}.roundsummary li{grid-template-columns:1fr 55px 55px}.roundsummary li .muted{grid-column:1 / -1;font-size:.8rem}}@media(prefers-reduced-motion:reduce){*{transition:none!important}.card--playable:hover{transform:none}}.special--soon{opacity:.5;cursor:not-allowed}.special__body strong{display:flex;align-items:center;gap:6px}.card__name{font-size:.56rem;line-height:1.1;text-align:center;letter-spacing:.01em;color:inherit;opacity:.85;max-width:100%}.card--special .card__glyph{font-size:1.9rem}.prompt__cards{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.btn--suit-red{background:var(--suit-red);border-color:var(--suit-red);color:#201014}.btn--suit-yellow{background:var(--suit-yellow);border-color:var(--suit-yellow);color:#201c10}.btn--suit-green{background:var(--suit-green);border-color:var(--suit-green);color:#0f1f14}.btn--suit-blue{background:var(--suit-blue);border-color:var(--suit-blue);color:#101a24}