:root{--bg-0: #0b0e24;--bg-1: #141a3a;--panel: rgba(255, 255, 255, .06);--panel-border: rgba(255, 255, 255, .12);--text: #eef1ff;--muted: #a6acd6;--accent: #ff7b3d;--accent-2: #7c5cff;--good: #22c55e;--bad: #ef4444;--c-blue: #3b82f6;--c-red: #ef4444;--c-yellow: #eab308;--c-green: #22c55e;--radius: 14px;--shadow: 0 10px 30px rgba(0, 0, 0, .35)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Segoe UI,system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:radial-gradient(1200px 800px at 20% -10%,#21285a 0%,transparent 60%),radial-gradient(1000px 700px at 100% 0%,#3a1c5a 0%,transparent 55%),linear-gradient(160deg,var(--bg-0),var(--bg-1));background-attachment:fixed;-webkit-font-smoothing:antialiased;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}.app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}.btn,.card,.pile,.card--clickable{touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--panel-border);background:#ffffff14;color:var(--text);font:inherit;font-weight:600;padding:10px 16px;border-radius:10px;cursor:pointer;transition:transform .08s ease,background .15s ease,opacity .15s ease}.btn:hover:not(:disabled){background:#ffffff29}.btn:active:not(:disabled){transform:translateY(1px) scale(.99)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--primary{background:linear-gradient(135deg,var(--accent),#ff5470);border-color:transparent;color:#fff}.btn--primary:hover:not(:disabled){filter:brightness(1.08);background:linear-gradient(135deg,var(--accent),#ff5470)}.btn--lg{padding:14px 20px;font-size:1.05rem;width:100%}.btn--ghost{background:transparent;color:var(--muted)}.btn--tiny{padding:2px 8px;font-size:.8rem}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;color:var(--muted);font-size:.9rem}.field--inline{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}.field input[type=text],.field input[type=number],.field input:not([type]),.field select,.home__code,.home__join input{font:inherit;padding:12px 14px;border-radius:10px;border:1px solid var(--panel-border);background:#00000040;color:var(--text)}.field input[type=range]{flex:1}.dot{width:9px;height:9px;border-radius:50%;display:inline-block}.dot--on{background:var(--good);box-shadow:0 0 8px var(--good)}.dot--off{background:#6b7194}.badge{font-size:.72rem;padding:2px 8px;border-radius:999px;font-weight:700}.badge--host{background:#ff7b3d33;color:var(--accent)}.badge--bot{background:#7c5cff38;color:#b9a8ff}.conn-banner{background:#b45309;color:#fff;text-align:center;padding:6px;font-weight:600;font-size:.85rem}.home{margin:auto;width:min(440px,92vw);padding:max(24px,env(safe-area-inset-top)) 0 max(48px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px;max-height:100%;overflow-y:auto}.home__hero{text-align:center}.home__title{font-size:clamp(2.4rem,8vw,3.4rem);margin:0;letter-spacing:-1px;font-weight:800}.home__title-accent{background:linear-gradient(120deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.home__tag{color:var(--muted);margin:8px 0 0}.home__divider{text-align:center;color:var(--muted);font-size:.85rem;margin:6px 0;position:relative}.home__divider span{background:transparent;padding:0 10px}.home__join{display:flex;gap:10px}.home__code{flex:1;text-transform:uppercase;letter-spacing:4px;font-weight:700;text-align:center}.home__error{color:#ffb4b4;margin:10px 0 0;font-size:.9rem}.home__how{color:var(--muted);font-size:.9rem}.home__how summary{cursor:pointer;font-weight:600;color:var(--text)}.home__how ul{margin:12px 0 0;padding-left:18px;line-height:1.6}.lobby{margin:auto;width:min(520px,94vw);padding:max(20px,env(safe-area-inset-top)) 0 max(40px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px;max-height:100%;overflow-y:auto}.lobby__head{display:flex;align-items:center;justify-content:space-between}.lobby__label{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:1px}.lobby__code{font-size:2rem;font-weight:800;letter-spacing:6px}.lobby__h2{margin:0 0 12px;font-size:1rem}.lobby__players{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.lobby__player{display:flex;align-items:center;gap:10px;padding:8px 4px}.lobby__pname{flex:1;font-weight:600}.lobby__badges{display:flex;gap:6px}.lobby__controls{display:flex;flex-direction:column;gap:6px}.lobby__row{display:flex;align-items:flex-end;gap:10px}.lobby__row .field{flex:1;margin-bottom:0}.lobby__waiting{text-align:center;color:var(--muted)}.lobby__advanced{border:1px solid var(--panel-border);border-radius:10px;padding:10px 12px;background:#00000026}.lobby__advanced summary{cursor:pointer;font-weight:600;color:var(--text);list-style:none}.lobby__advanced summary::-webkit-details-marker{display:none}.lobby__advanced summary:before{content:"▸";display:inline-block;margin-right:8px;color:var(--muted);transition:transform .15s ease}.lobby__advanced[open] summary:before{transform:rotate(90deg)}.lobby__advanced-body{display:flex;flex-direction:column;gap:12px;margin-top:14px}.lobby__advanced-body .field{margin-bottom:0}.lobby__window{display:flex;gap:10px}.lobby__window .field{flex:1}.lobby__hint{margin:0;color:var(--muted);font-size:.82rem}.game{flex:1;display:grid;grid-template-rows:auto 1fr auto;gap:10px;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));min-height:0;overflow:hidden}.game__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.game__room{color:var(--muted);font-size:.8rem;white-space:nowrap}.opponents{display:flex;flex-wrap:wrap;gap:14px}.opponent{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 10px;border-radius:12px}.opponent--winner{background:#ffc83c1f;box-shadow:0 0 0 1px #ffc83c66}.opponent__fan{display:flex;position:relative;height:40px;align-items:center}.opponent__fan .card--sm{margin-left:-14px}.opponent__fan .card--sm:first-child{margin-left:0}.opponent__done{color:var(--good);font-weight:800;font-size:1.4rem}.opponent__meta{display:flex;align-items:center;gap:6px;font-size:.85rem}.opponent__count{background:#00000059;border-radius:999px;padding:1px 8px;font-weight:700}.table{display:flex;align-items:center;justify-content:center;gap:clamp(12px,4vw,40px);min-height:0}.piles{display:flex;gap:clamp(12px,4vw,36px)}.pile{position:relative;background:transparent;border:2px dashed rgba(255,255,255,.14);border-radius:18px;padding:10px;cursor:pointer;transition:transform .1s ease,border-color .15s ease,box-shadow .15s ease}.pile--target{border-color:var(--good);box-shadow:0 0 24px #22c55e73}.pile--illegal{border-color:var(--bad)}.pile:active{transform:scale(.97)}.pile__count{position:absolute;top:-8px;right:-8px;background:#0009;border-radius:999px;padding:1px 8px;font-size:.75rem;font-weight:700}.pile__hint{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:.75rem;color:var(--muted)}.stock{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.9}.stock__count{font-weight:700}.stock__label{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.hand-area{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:0}.hand__hint{color:var(--muted);font-size:.85rem}.hand{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-height:32vh;overflow-y:auto;padding:8px}.hand__empty{color:var(--muted);padding:20px}.card{--card-bg: #444;position:relative;border:none;border-radius:12px;background:linear-gradient(160deg,color-mix(in srgb,var(--card-bg) 88%,white 12%),var(--card-bg));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 6px 14px #00000059,inset 0 0 0 2px #ffffff24;font-family:inherit;cursor:default;flex:0 0 auto;padding:0}.card--clickable{cursor:pointer;transition:transform .1s ease,box-shadow .12s ease}.card--clickable:hover{transform:translateY(-6px)}.card--sm{width:34px;height:48px}.card--md{width:60px;height:84px}.card--lg{width:clamp(60px,15vw,88px);height:clamp(84px,21vw,124px)}.card--blue{--card-bg: var(--c-blue)}.card--red{--card-bg: var(--c-red)}.card--yellow{--card-bg: var(--c-yellow);color:#3b2c00}.card--green{--card-bg: var(--c-green)}.card--back{background:repeating-linear-gradient(45deg,#2a2f66,#2a2f66 6px,#343b7d 6px,#343b7d 12px);box-shadow:0 6px 14px #00000059,inset 0 0 0 2px #ffffff1a}.card__icon{font-size:clamp(1.6rem,6vw,2.4rem);line-height:1}.card__move{margin-top:4px;font-size:.7rem;text-transform:uppercase;letter-spacing:1px;font-weight:700;opacity:.85}.card__corner{position:absolute;font-size:.7rem}.card__corner--tl{top:5px;left:6px}.card__corner--br{bottom:5px;right:6px;transform:rotate(180deg)}.card--selected{transform:translateY(-14px);box-shadow:0 14px 24px #00000080,0 0 0 3px var(--accent)}.card--playable{box-shadow:0 6px 14px #00000059,inset 0 0 0 2px #ffffff24,0 0 0 2px #ffffff80}.card--dimmed{opacity:.5}.flight{position:fixed;top:0;left:0;z-index:15;pointer-events:none;transform-origin:top left;will-change:transform;filter:drop-shadow(0 12px 20px rgba(0,0,0,.45));animation:fly .42s cubic-bezier(.33,0,.2,1) forwards}.flight .card{width:100%;height:100%;box-shadow:inset 0 0 0 2px #ffffff24}@keyframes fly{0%{transform:translate(var(--fx),var(--fy)) scale(var(--fs))}to{transform:translate(var(--tx),var(--ty)) scale(1)}}@media(prefers-reduced-motion:reduce){.flight{display:none}}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#040614b8;display:flex;align-items:center;justify-content:center;padding:20px;z-index:20;animation:fade .2s ease}.overlay__card{width:min(360px,92vw);text-align:center;display:flex;flex-direction:column;gap:12px}.overlay__trophy{font-size:3.4rem}.overlay__you{color:var(--good);font-weight:700;margin:0}.toasts{position:fixed;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:30;pointer-events:none;max-width:92vw}.toast{padding:10px 16px;border-radius:999px;font-weight:600;font-size:.9rem;box-shadow:var(--shadow);animation:pop .2s ease;background:#2a2f66}.toast--penalty{background:#7a1f2b}.toast--race{background:#7a5a1f}.toast--refresh{background:#1f5a4a}.toast--error{background:#7a1f1f}@keyframes pop{0%{transform:translateY(8px) scale(.96);opacity:0}}@keyframes fade{0%{opacity:0}}@media(max-width:640px){.card__corner{display:none}.game{gap:8px}.game__top{align-items:center}.opponents{gap:6px}.opponent{flex-direction:row;align-items:center;gap:6px;padding:5px 10px;background:var(--panel);border:1px solid var(--panel-border);border-radius:999px}.opponent__fan{display:none}.opponent__meta{font-size:.82rem}.opponent__count{padding:1px 7px}.hand{gap:6px;max-height:44vh;padding:6px 2px}.hand .card--lg{width:52px;height:74px}.hand .card__icon{font-size:1.5rem}.hand .card__move{font-size:.55rem;margin-top:2px}.hand__hint{font-size:.78rem}.table{gap:14px;align-items:flex-end;padding-bottom:6vh}.piles{gap:16px}.pile{padding:8px}.game__room{font-size:.72rem}}@media(max-height:520px){.game{gap:6px;padding:6px max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left))}.opponent{flex-direction:row;align-items:center;gap:6px;padding:4px 8px;background:var(--panel);border-radius:999px}.opponent__fan{display:none}.table{gap:16px}.pile .card--lg,.stock .card--lg{width:56px;height:78px}.hand{max-height:48vh;gap:5px}.hand .card--lg{width:46px;height:64px}.hand .card__icon{font-size:1.3rem}.hand .card__move,.hand__hint,.game__room{font-size:.66rem}.stock__label{display:none}}