: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}.join__credit{margin-top:32px;color:var(--text-muted);font-size:.75rem}.join__credit a{color:inherit}.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{width:16px;height:16px}.strip__cards .card--special .card__glyph{width:26px;height:26px}.strip__cards .card--special .card__value{position:static}.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);--card-ink: #4a4560;position:relative;width:62px;height:90px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px;font:inherit;color:#1a1726;background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--card-color) 22%,transparent),transparent 70%),linear-gradient(170deg,#fffdf8,#f1ebdd);border:2px solid var(--card-color);border-radius:8px;cursor:default;box-shadow:inset 0 0 0 2px #fffdf8,inset 0 0 0 3px color-mix(in srgb,var(--card-color) 45%,transparent),0 2px 8px #00000059;transition:transform .12s ease,box-shadow .12s ease}.card--red{--card-color: var(--suit-red);--card-ink: #c42e36}.card--yellow{--card-color: var(--suit-yellow);--card-ink: #a26f00}.card--green{--card-color: var(--suit-green);--card-ink: #25813f}.card--blue{--card-color: var(--suit-blue);--card-ink: #1d68b8}.card__value{font-family:Georgia,Iowan Old Style,Palatino Linotype,serif;font-size:1.6rem;font-weight:700;color:var(--card-ink);line-height:1;font-variant-numeric:lining-nums}.card__glyph{width:22px;height:22px;fill:var(--card-color);filter:drop-shadow(0 0 .5px var(--card-ink)) drop-shadow(0 1px 0 color-mix(in srgb,var(--card-ink) 45%,transparent))}.card__suit{position:absolute;top:5px;right:5px;width:11px;height:11px;fill:var(--card-color);filter:drop-shadow(0 0 .5px var(--card-ink))}.card--none{--card-color: #d9b45a}.card--special{--art-hue: 250;color:#f7f1e1;background:radial-gradient(1px 1px at 18% 16%,rgb(255 255 255 / .7),transparent),radial-gradient(1px 1px at 80% 26%,rgb(255 255 255 / .5),transparent),radial-gradient(1px 1px at 26% 78%,rgb(255 255 255 / .45),transparent),radial-gradient(1px 1px at 74% 86%,rgb(255 255 255 / .6),transparent),radial-gradient(90% 60% at 50% 40%,hsl(var(--art-hue) 65% 42%),hsl(var(--art-hue) 45% 18%) 60%,#120f20);border-color:var(--card-color);box-shadow:inset 0 0 0 2px #120f20,inset 0 0 0 3px #d9b45a8c,0 2px 8px #00000073}.card--special.card--red,.card--special.card--yellow,.card--special.card--green,.card--special.card--blue{box-shadow:inset 0 0 0 2px #120f20,inset 0 0 0 3px var(--card-color),0 2px 8px #00000073}.card--special .card__glyph{width:36px;height:36px;fill:#fbf3dc;filter:drop-shadow(0 0 4px hsl(var(--art-hue) 90% 70% / .85))}.card--special .card__value{position:absolute;top:5px;left:6px;font-size:.8rem;color:#f2d893}.card--special .card__suit{filter:drop-shadow(0 0 1px #000)}.card__name{font-size:.52rem;font-weight:600;line-height:1.1;text-align:center;letter-spacing:.02em;text-transform:uppercase;color:#f2d893;max-width:100%}.card--kind-wizard{--art-hue: 235}.card--kind-jester{--art-hue: 295}.card--kind-dragon{--art-hue: 14}.card--kind-fairy{--art-hue: 325}.card--kind-bomb{--art-hue: 32}.card--kind-cloud{--art-hue: 198}.card--kind-juggler{--art-hue: 50}.card--kind-werewolf{--art-hue: 165}.card--kind-shapeshifter{--art-hue: 268}.card--kind-vampire{--art-hue: 348}.card--kind-witch{--art-hue: 110}.card--playable{cursor:pointer}.card--playable:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 2px #fffdf8,inset 0 0 0 3px color-mix(in srgb,var(--card-color) 45%,transparent),0 8px 18px #00000080}.card--special.card--playable:hover{box-shadow:inset 0 0 0 2px #120f20,inset 0 0 0 3px #d9b45a8c,0 8px 18px #00000080,0 0 14px hsl(var(--art-hue) 80% 60% / .45)}.card--dimmed{opacity:.35;filter:grayscale(.6)}.card--back{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23d9b45a' d='M256 38.013c-22.458 0-66.472 110.3-84.64 123.502-18.17 13.2-136.674 20.975-143.614 42.334-6.94 21.358 84.362 97.303 91.302 118.662 6.94 21.36-22.286 136.465-4.116 149.665 18.17 13.2 118.61-50.164 141.068-50.164 22.458 0 122.9 63.365 141.068 50.164 18.17-13.2-11.056-128.306-4.116-149.665 6.94-21.36 98.242-97.304 91.302-118.663-6.94-21.36-125.444-29.134-143.613-42.335-18.168-13.2-62.182-123.502-84.64-123.502z'/%3E%3C/svg%3E") center / 22px no-repeat,radial-gradient(circle at 50% 50%,#3b2f6b 0 16px,transparent 17px),repeating-linear-gradient(45deg,transparent 0 6px,rgb(217 180 90 / .14) 6px 7px),repeating-linear-gradient(-45deg,transparent 0 6px,rgb(217 180 90 / .14) 6px 7px),linear-gradient(160deg,#2e2552,#1a1533);border-color:#d9b45a;box-shadow:inset 0 0 0 2px #1a1533,inset 0 0 0 3px #d9b45a80,0 2px 8px #00000059}.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.35rem}.card--special .card__glyph{width:32px;height:32px}.card__name{font-size:.47rem;letter-spacing:0}.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}.special__body .kind-icon{width:1.2em;height:1.2em;flex:none;fill:#f2d893}.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}