:root{color-scheme:dark;font-family:Inter,Segoe UI,Roboto,sans-serif;background:radial-gradient(circle at top,#0f172a,#020617 70%);color:#e2e8f0}*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100dvh;display:flex;justify-content:center;align-items:stretch;padding:clamp(1rem,2vw,3rem);overflow-x:hidden}.app-shell{width:min(1120px,100%);display:grid;grid-template-columns:minmax(0,1fr);--shell-gap: clamp(1.25rem, 2vw, 2rem);gap:var(--shell-gap);transition:gap .25s ease,grid-template-columns .25s ease}.panel{background:#0f172ad9;border:1px solid rgba(148,163,184,.1);border-radius:20px;box-shadow:0 30px 60px -40px #0f172ae6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);overflow:hidden;display:flex;flex-direction:column}.panel__header{padding:clamp(1.5rem,2vw,2.25rem);border-bottom:1px solid rgba(148,163,184,.08)}.panel__header h1{margin:0 0 .5rem;font-size:clamp(1.4rem,2vw,1.8rem);letter-spacing:.02em}.panel__header p{margin:0;color:#94a3b8;font-size:.95rem;line-height:1.5}.panel__content{flex:1;padding:clamp(1.5rem,2vw,2rem);display:flex;flex-direction:column;gap:clamp(1.25rem,2vw,2rem)}.screen{display:none;flex-direction:column;gap:1rem}.screen.active{display:flex}.form-group{display:flex;flex-direction:column;gap:.65rem}.form-group label{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:#94a3b8}.form-group input{background:#1e293be6;border:1px solid rgba(148,163,184,.2);border-radius:12px;padding:.85rem 1rem;color:inherit;font-size:.95rem;transition:border .2s ease,box-shadow .2s ease}.form-group input:focus{outline:none;border-color:#38bdf8;box-shadow:0 0 0 3px #38bdf833}.button-row{display:flex;flex-direction:column;gap:.75rem}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:12px;padding:.85rem 1.1rem;font-weight:600;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}button.primary{background:linear-gradient(135deg,#2563eb,#38bdf8);color:#fff;box-shadow:0 14px 30px -18px #2563eb}button.secondary{background:#1e293be6;color:#cbd5f5;border:1px solid rgba(148,163,184,.16)}button.danger{background:linear-gradient(135deg,#dc2626,#f97316);color:#fff;box-shadow:0 14px 30px -18px #f97316}button:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}button:not(:disabled):hover{transform:translateY(-2px)}.status-banner{padding:.85rem 1rem;border-radius:14px;background:#1e293be6;border:1px solid rgba(148,163,184,.18);color:#cbd5f5;font-size:.9rem;line-height:1.4}.status-banner.success{border-color:#4ade8066;background:#16653466;color:#bbf7d0}.status-banner.error{border-color:#f8717159;background:#7f1d1d66;color:#fecaca}.canvas-area{position:relative;flex:1;padding:clamp(1.25rem,2vw,2rem);display:flex;flex-direction:column;align-items:stretch;gap:clamp(1rem,2vw,1.5rem)}.canvas-frame{position:relative;border-radius:26px;background:radial-gradient(circle at center,#0f172af2,#020617f2);padding:clamp(1rem,1.5vw,1.5rem);border:1px solid rgba(148,163,184,.16);box-shadow:inset 0 0 0 1px #94a3b81a;display:flex;justify-content:center;align-items:center;min-height:640px;flex:1 1 auto}.canvas-frame canvas{border-radius:18px;max-width:100%;image-rendering:pixelated}.canvas-menu-toggle{position:absolute;top:clamp(.75rem,1.2vw,1.1rem);left:clamp(.75rem,1.2vw,1.1rem);z-index:5;padding:.65rem 1.1rem;border-radius:999px;background:#0f172ad1;border:1px solid rgba(148,163,184,.22);color:#e2e8f0;font-size:.85rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;display:none;transition:background .2s ease,transform .2s ease}.canvas-menu-toggle:hover{background:#1e293be6;transform:translateY(-1px)}.app-shell.is-playing{grid-template-columns:minmax(0,1fr);gap:0}.app-shell.is-playing .panel:first-child{opacity:0;pointer-events:none;transform:translate(-32px);transition:opacity .25s ease,transform .25s ease}.app-shell.is-playing .canvas-menu-toggle{display:inline-flex;align-items:center;justify-content:center}.app-shell.is-playing.is-menu-open{grid-template-columns:minmax(0,1fr);gap:var(--shell-gap)}.app-shell.is-playing.is-menu-open .panel:first-child{opacity:1;pointer-events:auto;transform:none}.hud{margin-top:clamp(1.2rem,2vw,1.8rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.85rem;flex-shrink:0}.stat-card{padding:1rem 1.1rem;background:#0f172ad9;border:1px solid rgba(148,163,184,.12);border-radius:14px;display:flex;flex-direction:column;gap:.35rem;min-height:90px}.stat-card h3{margin:0;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#94a3b8}.stat-card strong{font-size:1.8rem;font-weight:700}.player-list{display:flex;flex-direction:column;gap:.55rem}.player-list__item{padding:.65rem .75rem;border-radius:12px;background:#1e293bcc;border:1px solid transparent;display:flex;justify-content:space-between;align-items:center;font-size:.9rem}.player-list__item.is-local{border-color:#38bdf866;box-shadow:0 0 0 1px #38bdf84d}.player-list__badge{display:inline-flex;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;border-radius:50%;font-weight:700;font-size:.9rem;background:#334155e6}.key-hints{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:.5rem;font-size:.85rem;color:#94a3b8}.key-hints span{display:inline-flex;align-items:center;gap:.6rem}.keycap{display:inline-flex;align-items:center;justify-content:center;min-width:1.8rem;height:1.8rem;border-radius:8px;background:#1e293be6;border:1px solid rgba(148,163,184,.16);font-size:.8rem;font-weight:600}.touch-controls{position:absolute;left:0;right:0;bottom:clamp(.75rem,5vw,2rem);display:none;justify-content:space-between;align-items:flex-end;gap:clamp(1.25rem,6vw,3rem);padding:0 clamp(.75rem,4vw,1.75rem);pointer-events:none;z-index:6}.touch-controls--visible{display:flex}.touch-controls__movement{pointer-events:auto;flex:1;max-width:clamp(150px,45vw,220px);display:flex;justify-content:flex-start;touch-action:none}.touch-joystick{position:relative;width:clamp(120px,32vw,156px);aspect-ratio:1 / 1;border-radius:50%;background:#0f172ac7;border:1px solid rgba(148,163,184,.35);box-shadow:inset 0 0 0 1px #94a3b81f,0 20px 45px -36px #0f172ae6;touch-action:none;-webkit-user-select:none;user-select:none}.touch-joystick:after{content:"";position:absolute;top:18%;right:18%;bottom:18%;left:18%;border-radius:50%;border:1px dashed rgba(148,163,184,.25)}.touch-joystick__thumb{position:absolute;--offset-x: 0px;--offset-y: 0px;width:clamp(52px,20vw,66px);aspect-ratio:1 / 1;border-radius:50%;background:linear-gradient(135deg,#38bdf8,#2563eb);border:2px solid rgba(226,232,240,.35);box-shadow:0 14px 28px -18px #2563ebd9;left:calc(50% + var(--offset-x));top:calc(50% + var(--offset-y));transform:translate(-50%,-50%);transition:box-shadow .2s ease,filter .18s ease;pointer-events:none}.touch-button{pointer-events:auto;min-width:clamp(108px,28vw,152px);padding:clamp(.85rem,3vw,1.1rem);border-radius:999px;background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 24px 38px -32px #f97316e6;touch-action:none;-webkit-user-select:none;user-select:none}.touch-button:active{transform:scale(.96)}@media (min-width: 960px){body{padding:clamp(1.5rem,2vw,3rem)}.app-shell{grid-template-columns:minmax(280px,320px) 1fr}.app-shell.is-playing{grid-template-columns:0 1fr}.app-shell.is-playing.is-menu-open{grid-template-columns:minmax(280px,320px) 1fr;gap:var(--shell-gap)}.hud{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}@media (max-width: 960px){body{padding:.75rem}.app-shell{grid-template-columns:minmax(0,1fr);gap:clamp(.75rem,3vw,1.25rem)}.panel{order:2}.canvas-area{order:1;padding:clamp(.75rem,3vw,1.25rem);padding-bottom:clamp(4.5rem,18vw,7.5rem)}.hud{margin-bottom:clamp(4rem,18vw,7rem)}.canvas-frame{min-height:auto;aspect-ratio:1 / 1}.hud{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 640px){body{padding:.5rem}.panel__header h1{font-size:1.2rem}.panel__content{padding:1rem;gap:1rem}.button-row{flex-direction:column}.key-hints{display:none}.canvas-frame{padding:clamp(.65rem,2vw,1rem)}.stat-card strong{font-size:1.5rem}.hud{margin-bottom:clamp(4.5rem,22vw,7.5rem)}.touch-controls{bottom:clamp(.5rem,5vw,1.25rem);padding:0 clamp(.5rem,6vw,1.25rem);gap:clamp(1rem,6vw,2.5rem)}.touch-joystick{width:clamp(104px,42vw,132px)}.touch-joystick__thumb{width:clamp(44px,26vw,56px)}.touch-button{min-width:clamp(88px,34vw,124px)}}