:root{--bg: #0b0f1a;--bg-glow-a: #241b4d;--bg-glow-b: #0b3b45;--surface: rgba(255, 255, 255, .045);--surface-strong: rgba(255, 255, 255, .08);--border: rgba(255, 255, 255, .09);--border-strong: rgba(255, 255, 255, .18);--text: #eef2ff;--text-dim: #99a3c0;--accent: #7c5cff;--accent-2: #22d3ee;--win: #34d399;--lose: #fb7185;--draw: #fbbf24;--radius: 18px;--radius-sm: 12px;--tap: 56px;--gutter: 16px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background:radial-gradient(60% 45% at 15% 0%,var(--bg-glow-a) 0%,transparent 70%),radial-gradient(55% 45% at 90% 100%,var(--bg-glow-b) 0%,transparent 70%);opacity:.85;pointer-events:none}button,input{font:inherit;color:inherit}h1,h2,p,ol,ul{margin:0}ol,ul{list-style:none;padding:0}.screen{display:flex;flex-direction:column;gap:14px;min-height:100dvh;max-width:520px;margin:0 auto;padding:calc(var(--safe-top) + 18px) var(--gutter) calc(var(--safe-bottom) + 24px)}.screen--center{justify-content:center}.screen--room{height:100dvh;overflow:hidden}.connbar{position:fixed;top:0;left:0;right:0;z-index:10;padding:calc(var(--safe-top) + 6px) 12px 6px;background:#7c5cff38;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text);font-size:.8rem;text-align:center;letter-spacing:.04em}.hero{text-align:center;padding:8px 0 4px}.hero__emojis{display:flex;justify-content:center;gap:10px;font-size:2.4rem;margin-bottom:10px}.hero__emojis span{animation:float 3s ease-in-out infinite}.hero__emojis span:nth-child(2){animation-delay:.25s}.hero__emojis span:nth-child(3){animation-delay:.5s}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(-5deg)}}.hero__title{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;background:linear-gradient(105deg,var(--accent-2),var(--accent) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero__subtitle{margin-top:6px;color:var(--text-dim);font-size:.95rem}.card{display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.card__title{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}.card__text{color:var(--text-dim);font-size:.9rem}.field{display:flex;flex-direction:column;gap:7px}.field__label{color:var(--text-dim);font-size:.8rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.field__input{width:100%;min-height:var(--tap);padding:0 16px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:#00000047;font-size:16px;outline:none;transition:border-color .16s ease,box-shadow .16s ease}.field__input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #7c5cff3d}.field__input--code{font-size:1.7rem;font-weight:800;letter-spacing:.4em;text-align:center;text-indent:.4em;font-family:ui-monospace,SF Mono,Cascadia Mono,Menlo,monospace}.field__hint{color:var(--text-dim);font-size:.8rem}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 20px;border:1px solid transparent;border-radius:var(--radius-sm);background:var(--surface-strong);font-size:1rem;font-weight:650;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .12s ease,filter .16s ease,opacity .16s ease}.button:active:not(:disabled){transform:scale(.975)}.button:disabled{opacity:.45;cursor:not-allowed}.button--primary{background:linear-gradient(120deg,var(--accent),#9b6bff 55%,var(--accent-2));color:#0a0a14;font-weight:750;box-shadow:0 8px 22px -10px #7c5cffd9}.button--secondary{border-color:var(--border-strong);background:var(--surface)}.button--ghost{background:transparent;border-color:var(--border);color:var(--text-dim)}.button--block{width:100%}.button--small{min-height:40px;padding:0 14px;font-size:.85rem}.alert{padding:11px 14px;border-radius:var(--radius-sm);border:1px solid transparent;font-size:.87rem;animation:slide-in .2s ease}.alert--error{border-color:#fb718566;background:#fb718521;color:#ffd4da}.alert--info{border-color:#22d3ee66;background:#22d3ee1f;color:#c4f5ff}.alert--warn{border-color:#fbbf2466;background:#fbbf241f;color:#ffeab8}@keyframes slide-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.topbar__eyebrow{color:var(--text-dim);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}.topbar__name{font-size:1.1rem;font-weight:700}.room-code{display:flex;align-items:baseline;gap:9px;padding:8px 14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);cursor:pointer}.room-code__label{color:var(--text-dim);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}.room-code__value{font-size:1.15rem;font-weight:800;letter-spacing:.16em;font-family:ui-monospace,SF Mono,Cascadia Mono,Menlo,monospace}.room-code__share{color:var(--accent-2);font-size:1rem}.board{display:flex;flex-direction:column;gap:4px}.board__row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);background:#ffffff07}.board__row--me{background:#7c5cff29;box-shadow:inset 0 0 0 1px #7c5cff59}.board__rank{font-size:.95rem;font-weight:700;text-align:center;color:var(--text-dim)}.board__name{font-weight:620;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board__stats{display:flex;align-items:baseline;gap:5px;font-size:.85rem;color:var(--text-dim)}.board__stats strong{color:var(--text);font-size:1rem}.board__sep{margin-right:4px}.board__rate{min-width:46px;text-align:right;font-variant-numeric:tabular-nums}.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.scoreboard__side{display:flex;flex-direction:column;gap:2px;min-width:0;transition:opacity .2s ease}.scoreboard__side--right{align-items:flex-end;text-align:right}.scoreboard__side.is-offline{opacity:.45}.scoreboard__name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-dim);font-size:.85rem;font-weight:600}.scoreboard__side.is-locked .scoreboard__name{color:var(--accent-2)}.scoreboard__score{font-size:2rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.scoreboard__vs{padding:5px 10px;border-radius:999px;background:#0000004d;color:var(--text-dim);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}.stage{display:flex;flex:1;align-items:center;justify-content:center;min-height:0}.stage__panel{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;text-align:center;animation:pop-in .26s ease}.stage__panel--play{gap:20px}@keyframes pop-in{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}.stage__title{font-size:1.35rem;font-weight:750;letter-spacing:-.015em}.stage__text{color:var(--text-dim);font-size:.92rem}.stage__hint{min-height:1.4em;color:var(--text-dim);font-size:.86rem}.pulse{font-size:3rem;animation:pulse 1.9s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:.75}50%{transform:scale(1.14);opacity:1}}.big-code{padding:12px 22px;border:1px dashed var(--border-strong);border-radius:var(--radius);background:#00000042;font-size:2.6rem;font-weight:850;letter-spacing:.3em;text-indent:.3em;font-family:ui-monospace,SF Mono,Cascadia Mono,Menlo,monospace;background-image:linear-gradient(105deg,var(--accent-2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}.ready-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.pill{padding:7px 14px;border:1px solid var(--border);border-radius:999px;background:#0000003d;color:var(--text-dim);font-size:.84rem;font-weight:600;transition:all .2s ease}.pill--on{border-color:#34d3998c;background:#34d39929;color:#bdf5df}.countdown{position:relative;width:148px;height:148px}.countdown__ring{width:100%;height:100%;transform:rotate(-90deg)}.countdown__track{fill:none;stroke:#ffffff17;stroke-width:8}.countdown__progress{fill:none;stroke:var(--accent-2);stroke-width:8;stroke-linecap:round;transition:stroke .25s ease}.countdown--urgent .countdown__progress{stroke:var(--lose)}.countdown__value{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.countdown__number{font-size:3.2rem;font-weight:850;line-height:1;font-variant-numeric:tabular-nums}.countdown--urgent .countdown__number{color:var(--lose);animation:throb .45s ease-in-out infinite}@keyframes throb{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}.countdown__label{color:var(--text-dim);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}.moves{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}.move{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:1 / 1;padding:8px;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);cursor:pointer;transition:transform .14s ease,border-color .18s ease,opacity .18s ease,background .18s ease}.move:active:not(:disabled){transform:scale(.94)}.move__emoji{font-size:2.5rem;line-height:1}.move__label{color:var(--text-dim);font-size:.78rem;font-weight:600}.move--selected{border-color:var(--accent);background:#7c5cff33;box-shadow:0 0 0 3px #7c5cff3d}.move--selected .move__label{color:var(--text)}.move--dimmed{opacity:.3}.move:disabled{cursor:default}.move--selected:disabled{opacity:1}.reveal__hands{display:flex;align-items:center;justify-content:center;gap:16px;width:100%}.reveal__hand{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;flex:1}.reveal__emoji{font-size:4rem;line-height:1;animation:shake .42s ease}.reveal__hand:last-child .reveal__emoji{animation-delay:.06s}@keyframes shake{0%{transform:translateY(-22px) rotate(-16deg);opacity:0}55%{transform:translateY(4px) rotate(6deg);opacity:1}to{transform:none}}.reveal__who{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-dim);font-size:.82rem;font-weight:600}.reveal__vs{color:var(--text-dim);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}.reveal__verdict{font-size:2.1rem;font-weight:850;letter-spacing:-.02em;animation:verdict .36s .18s both ease}.reveal__verdict--win{color:var(--win);text-shadow:0 0 34px rgba(52,211,153,.45)}.reveal__verdict--lose{color:var(--lose)}.reveal__verdict--draw,.reveal__verdict--none{color:var(--draw)}@keyframes verdict{0%{opacity:0;transform:scale(.75)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(max-height:700px){.countdown{width:118px;height:118px}.countdown__number{font-size:2.6rem}.move__emoji{font-size:2.1rem}.scoreboard__score{font-size:1.6rem}.reveal__emoji{font-size:3.2rem}.reveal__verdict{font-size:1.8rem}.big-code{font-size:2.1rem}}:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}