:root{--felt: #123a26;--felt-deep: #0b1f15;--ink: #f4f1e8;--ink-soft: rgba(244, 241, 232, .62);--ink-faint: rgba(244, 241, 232, .34);--gold: #f2c14e;--gold-deep: #b98d1d;--warn: #ff8a3d;--danger: #e2523f;--good: #63c88a;--panel: rgba(11, 24, 18, .86);--panel-edge: rgba(244, 241, 232, .14);--card-red: #d63b2f;--card-yellow: #efb61f;--card-green: #2f9e51;--card-blue: #2b6fd1;--radius: .9rem;--shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, .45)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(circle at 50% 12%,#1a3a2a 0%,var(--felt-deep) 62%,#060d09 100%);color:var(--ink);font-family:Trebuchet MS,Segoe UI,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}.app{min-height:100%;display:flex;flex-direction:column}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--panel-edge);background:#f4f1e814;color:var(--ink);border-radius:999px;padding:.6rem 1.1rem;font:inherit;font-weight:600;cursor:pointer;transition:transform .12s ease,background .12s ease,opacity .12s ease;min-height:2.75rem}.btn:hover:not(:disabled){background:#f4f1e829}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.38;cursor:default}.btn--primary{background:linear-gradient(180deg,var(--gold) 0%,var(--gold-deep) 100%);color:#23180a;border-color:transparent}.btn--uno{background:linear-gradient(180deg,#ff9f45,#d9541f);color:#23120a;border-color:transparent}.btn--warn{border-color:#ff8a3d8c}.btn--catch{background:#e2523f3d;border-color:#e2523f99}.btn--small{padding:.35rem .8rem;min-height:2.25rem;font-size:.92rem}.btn--wide{width:100%}.btn--start{margin:0 auto;max-width:34rem}.link{background:none;border:0;color:var(--ink-soft);text-decoration:underline;cursor:pointer;font:inherit;padding:.35rem}.field{display:grid;gap:.35rem}.field>span{font-size:.9rem;color:var(--ink-soft)}input,select{font:inherit;color:var(--ink);background:#060e0ab8;border:1px solid var(--panel-edge);border-radius:.6rem;padding:.65rem .8rem;min-height:2.75rem;width:100%}input:focus-visible,select:focus-visible,.btn:focus-visible,.card:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.pick{position:relative;display:inline-flex}.pick__button{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.5rem .85rem;border-radius:.6rem;border:1px solid var(--panel-edge);background:#060e0ac7;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}.pick__button:hover:not(:disabled){border-color:#f2c14e8c}.pick__button:disabled{opacity:.45;cursor:default}.pick__button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.pick__caret{color:var(--ink-faint);font-size:.8em}.pick__button:hover:not(:disabled) .pick__caret{color:var(--gold)}.pick--compact .pick__button{min-height:2.25rem;padding:.3rem .7rem;font-size:.92rem}.pick__list{position:absolute;top:calc(100% + .35rem);right:0;z-index:30;margin:0;padding:.3rem;list-style:none;min-width:100%;background:#0a150ff7;border:1px solid var(--gold);border-radius:.7rem;box-shadow:var(--shadow)}.pick__option{display:flex;align-items:center;gap:.4rem;padding:.5rem .7rem;border-radius:.45rem;color:var(--ink);white-space:nowrap;cursor:pointer;min-height:2.5rem}.pick__option--active{background:#f2c14e2e}.pick__option--on{font-weight:700}.pick__check{width:1em;color:var(--gold)}.panel{background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--radius);padding:1.1rem;display:grid;gap:.9rem;box-shadow:var(--shadow)}.panel--muted{background:#0b18128c}.panel__title{margin:0;font-size:1.05rem;display:flex;justify-content:space-between}.panel__count{color:var(--ink-soft);font-weight:400}.notice{margin:0;color:var(--ink-soft);font-size:.92rem}.notice--warn{color:var(--warn)}.banner{margin:0;padding:.5rem 1rem;background:#e2523fe6;color:#fff;text-align:center;font-weight:600}.tag{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;padding:.14rem .5rem;border-radius:999px;background:#f4f1e824;color:var(--ink-soft)}.tag--uno{background:#ff8a3d3d;color:var(--warn)}.tag--away{background:#e2523f38;color:#ffb4a6}.tag--ready{background:#63c88a38;color:var(--good)}.card{position:relative;display:inline-grid;place-items:center;border-radius:.55rem;border:.16rem solid #f7f4ec;background:#2b2b2b;color:#f7f4ec;font-weight:700;cursor:default;padding:0;box-shadow:0 .35rem .8rem #00000073;flex:0 0 auto}.card--sm{width:2.4rem;height:3.6rem;font-size:1rem}.card--md{width:3.4rem;height:5.1rem;font-size:1.5rem}.card--lg{width:4.6rem;height:6.9rem;font-size:2rem}.card--red{background:var(--card-red)}.card--yellow{background:var(--card-yellow);color:#3a2a04}.card--green{background:var(--card-green)}.card--blue{background:var(--card-blue)}.card--wild{background:conic-gradient(var(--card-red) 0 25%,var(--card-yellow) 0 50%,var(--card-green) 0 75%,var(--card-blue) 0)}.card--back{background:repeating-linear-gradient(45deg,#1d1a16 0,#1d1a16 6px,#262119 6px,#262119 12px)}.card__face{font-size:1em;text-shadow:0 .12rem 0 rgba(0,0,0,.35)}.card__corner{position:absolute;font-size:.5em;opacity:.9}.card__corner--tl{top:.15rem;left:.25rem}.card__corner--br{bottom:.15rem;right:.25rem;transform:rotate(180deg)}button.card{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}button.card:disabled{cursor:default;filter:saturate(.4) brightness(.72)}.card--playable{box-shadow:0 0 0 .16rem var(--gold),0 .5rem 1rem #00000080}button.card--playable:hover{transform:translateY(-.55rem)}.card--selected{outline:.18rem solid var(--warn);outline-offset:.1rem}.home{width:min(34rem,100%);margin:0 auto;padding:clamp(1rem,4vw,2.5rem) 1rem 3rem;display:grid;gap:1.2rem}.home__head{text-align:center}.home__title{margin:0;font-size:clamp(2.4rem,9vw,3.6rem);letter-spacing:.02em;background:linear-gradient(96deg,var(--card-red),var(--card-yellow) 34%,var(--card-green) 66%,var(--card-blue));-webkit-background-clip:text;background-clip:text;color:transparent}.home__claim{margin:.2rem 0 0;color:var(--ink-soft)}.home__join{display:grid;gap:.7rem}.lobby{width:min(42rem,100%);margin:0 auto;padding:clamp(1rem,4vw,2rem) 1rem 3rem;display:grid;gap:1rem}.lobby__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.lobby__kicker{margin:0;font-size:.8rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.12em}.lobby__code{margin:0;font-size:clamp(1.8rem,7vw,2.6rem);font-weight:700;letter-spacing:.14em}.lobby__head-actions{display:flex;gap:.5rem;flex-wrap:wrap}.seats{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}.seats__row{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border-radius:.65rem;background:#f4f1e80f}.seats__row--you{outline:1px solid var(--gold)}.seats__name{font-weight:600;flex:1 1 auto}.seats__tags{display:flex;gap:.3rem;flex-wrap:wrap}.rules{border:0;margin:0;padding:0;display:grid;gap:.75rem}.rules__row{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer}.rules__row input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1.4rem;height:1.4rem;min-height:0;margin-top:.2rem;flex:0 0 auto;padding:0;border-radius:.4rem;border:2px solid var(--panel-edge);background:#060e0ac7;display:grid;place-items:center;cursor:pointer}.rules__row input[type=checkbox]:after{content:"✓";font-size:.95rem;font-weight:700;color:#23180a;opacity:0}.rules__row input[type=checkbox]:checked{background:linear-gradient(180deg,var(--gold) 0%,var(--gold-deep) 100%);border-color:transparent}.rules__row input[type=checkbox]:checked:after{opacity:1}.rules__row input[type=checkbox]:hover:not(:disabled){border-color:#f2c14e8c}.rules__row input[type=checkbox]:disabled{cursor:default}.rules__row--inline{align-items:center;justify-content:space-between}.rules__label{display:block;font-weight:600}.rules__hint{display:block;font-size:.86rem;color:var(--ink-soft)}.rules:disabled{opacity:.7}.chat{background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--radius);padding:.8rem;display:grid;gap:.6rem;min-height:12rem}.chat--compact{min-height:0;height:100%;padding:.6rem}.chat__stream{overflow-y:auto;max-height:14rem;display:grid;gap:.3rem;align-content:start}.chat--compact .chat__stream{max-height:none}.chat__empty{margin:0;color:var(--ink-faint)}.chat__line{margin:0;font-size:.94rem}.chat__line--own .chat__name{color:var(--gold)}.chat__name{font-weight:700;margin-right:.4rem;color:var(--ink-soft)}.chat__text{overflow-wrap:anywhere}.chat__form{display:flex;gap:.5rem}.game{flex:1 1 auto;display:grid;grid-template-columns:1fr 19rem;grid-template-rows:auto 1fr auto;grid-template-areas:"bar bar" "stage side" "hand hand";gap:.6rem;padding:.6rem;min-height:100vh;min-height:100dvh}.game--waiting{display:grid;place-items:center}.game__bar{grid-area:bar;display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--radius);padding:.5rem .8rem}.game__status{margin:0;font-weight:600}.game__status--mine{color:var(--gold)}.game__bar-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.game__stage{grid-area:stage;position:relative;border-radius:var(--radius);overflow:hidden;background:radial-gradient(circle at 50% 40%,#1d4c33,#0a1a12 74%);min-height:20rem}.game__stage canvas{display:block;width:100%;height:100%;touch-action:none}.stage-loading{display:grid;place-items:center;height:100%;color:var(--ink-soft)}.game__side{grid-area:side;display:grid;grid-template-rows:auto 1fr;gap:.5rem;min-height:0}.tabs{display:flex;gap:.4rem}.tabs__tab{flex:1 1 auto;border:1px solid var(--panel-edge);background:#f4f1e80f;color:var(--ink-soft);border-radius:.6rem;padding:.4rem;font:inherit;cursor:pointer;min-height:2.4rem}.tabs__tab--on{background:#f2c14e2e;color:var(--ink);border-color:var(--gold)}.log{background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--radius);padding:.7rem;overflow-y:auto;min-height:0;font-size:.92rem}.log__line{margin:0 0 .35rem;color:var(--ink-soft)}.log__line:last-of-type{color:var(--ink)}.game__hand{grid-area:hand;background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--radius);padding:.7rem;display:grid;gap:.6rem}.game__hand-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}.game__hand-title{font-weight:600;display:inline-flex;align-items:center;gap:.5rem}.actions{display:flex;gap:.5rem;flex-wrap:wrap}.hand-rail{display:flex;gap:.4rem;overflow-x:auto;padding:.5rem .2rem .7rem;scrollbar-width:thin}.hand-rail--quiet{position:absolute;left:-10000px;height:1px;overflow:hidden}.hand-rail--quiet:focus-within{position:static;left:auto;height:auto;overflow-x:auto}.board{height:100%;display:grid;grid-template-rows:auto 1fr;gap:1rem;padding:1rem}.board__seats{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}.seat{display:grid;gap:.15rem;justify-items:center;min-width:6.5rem;padding:.55rem .7rem;border-radius:.75rem;background:#06100bb3;border:1px solid var(--panel-edge)}.seat--active{border-color:var(--gold);box-shadow:0 0 0 .12rem #f2c14e59}.seat--away{opacity:.55}.seat__name{font-weight:600}.seat__count{font-size:1.5rem;font-weight:700}.seat__tags{display:flex;gap:.25rem;flex-wrap:wrap;justify-content:center}.board__center{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,5vw,3rem);position:relative}.pile{display:grid;gap:.4rem;justify-items:center}.pile__label{font-size:.85rem;color:var(--ink-soft)}.pile--active .card{box-shadow:0 0 0 .2rem currentColor,0 .5rem 1rem #00000080}.pile--red{color:var(--card-red)}.pile--yellow{color:var(--card-yellow)}.pile--green{color:var(--card-green)}.pile--blue{color:var(--card-blue)}.board__direction{font-size:2.4rem;color:var(--ink-faint)}.prompt{position:absolute;left:50%;bottom:1.2rem;transform:translate(-50%);background:var(--panel);border:1px solid var(--gold);border-radius:var(--radius);padding:.9rem;display:grid;gap:.7rem;box-shadow:var(--shadow);width:min(24rem,calc(100% - 2rem));z-index:5}.prompt__title{margin:0;font-weight:600;text-align:center}.prompt__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.prompt__list{display:grid;gap:.4rem;max-height:14rem;overflow-y:auto}.prompt__option{display:flex;justify-content:space-between;gap:.6rem;padding:.6rem .8rem;border-radius:.6rem;border:1px solid var(--panel-edge);background:#f4f1e812;color:var(--ink);font:inherit;cursor:pointer;min-height:2.75rem}.prompt__option:hover{background:#f4f1e826}.prompt__count{color:var(--ink-soft)}.swatch{border:0;border-radius:.6rem;padding:.85rem;font:inherit;font-weight:700;color:#12100c;cursor:pointer;min-height:3rem}.swatch--red{background:var(--card-red);color:#fff}.swatch--yellow{background:var(--card-yellow)}.swatch--green{background:var(--card-green);color:#fff}.swatch--blue{background:var(--card-blue);color:#fff}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#040a07c7;z-index:20;padding:1rem}.overlay__card{background:var(--panel);border:1px solid var(--gold);border-radius:1.2rem;padding:1.4rem;width:min(30rem,100%);display:grid;gap:.8rem;box-shadow:var(--shadow)}.overlay__kicker{margin:0;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:var(--ink-soft)}.overlay__title{margin:0;font-size:1.9rem}.overlay__points{margin:0;color:var(--gold);font-weight:600}.overlay__actions{display:grid;gap:.5rem}.ranking{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}.ranking__row{display:grid;grid-template-columns:2rem 1fr auto;gap:.6rem;padding:.45rem .6rem;border-radius:.55rem;background:#f4f1e80f}.ranking__row--you{outline:1px solid var(--gold)}.ranking__place{font-weight:700;color:var(--gold)}.ranking__value{color:var(--ink-soft);font-size:.9rem}.turn-timer{position:relative;width:2.6rem;height:2.6rem;display:grid;place-items:center}.turn-timer svg{position:absolute;top:0;right:0;bottom:0;left:0;transform:rotate(-90deg)}.turn-timer__track{fill:none;stroke:#f4f1e829;stroke-width:4}.turn-timer__value{fill:none;stroke:var(--ink-soft);stroke-width:4;stroke-linecap:round}.turn-timer--mine .turn-timer__value{stroke:var(--gold)}.turn-timer--warn .turn-timer__value{stroke:var(--danger)}.turn-timer__label{font-size:.9rem;font-weight:700}.toasts{position:fixed;left:50%;bottom:1rem;transform:translate(-50%);display:grid;gap:.4rem;z-index:40;width:min(26rem,calc(100% - 2rem))}.toast{border:1px solid var(--panel-edge);background:#0c1812f0;color:var(--ink);border-radius:.7rem;padding:.6rem .9rem;font:inherit;text-align:left;cursor:pointer;box-shadow:var(--shadow)}.toast--warn{border-color:var(--warn)}.toast--good{border-color:var(--good)}@media(max-width:900px){.game{grid-template-columns:1fr;grid-template-areas:"bar" "stage" "hand" "side";padding:.45rem}.game__side{max-height:14rem}.game__stage{min-height:42vh}.card--md{width:3rem;height:4.5rem;font-size:1.3rem}.card--lg{width:3.8rem;height:5.7rem;font-size:1.7rem}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}