:root{--ink-950:#14161a;--ink-900:#181b20;--ink-800:#1c1f25;--ink-700:#262a31;--ink-600:#333841;--paper-100:#ede7d8;--paper-300:#c9c4b6;--flame-500:#ff4d23;--flame-600:#e23e17;--volt-300:#d7ff4f;--volt-700:#4f5c17;--steel-500:#5b626c;--steel-300:#8a919b;--font-display:"Big Shoulders Display", "Arial Narrow", sans-serif;--font-body:"Archivo", "Helvetica Neue", Arial, sans-serif}html,body,#root{background:var(--ink-950);width:100%;height:100%;color:var(--paper-100);font-family:var(--font-body);margin:0}*{box-sizing:border-box}button,input{font:inherit;color:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}::selection{background:var(--flame-500);color:var(--ink-950)}.screen{background:radial-gradient(ellipse 900px 500px at 18% -10%, #ff4d2329, transparent 60%), radial-gradient(ellipse 700px 500px at 100% 100%, #d7ff4f12, transparent 55%), var(--ink-950);width:100%;height:100%;display:flex;position:relative}.app-overlay-shell{overflow:hidden}.game-layer{z-index:0;position:absolute;inset:0}.game-layer--passive{pointer-events:none}.game-layer--active{pointer-events:auto}.ui-overlay{z-index:2;opacity:1;visibility:visible;pointer-events:auto;transition:opacity .32s,visibility .32s;position:absolute;inset:0}.ui-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.screen--loading{justify-content:center;align-items:center}.loading-pill{font-family:var(--font-display);letter-spacing:.02em;border:2px solid var(--ink-600);color:var(--paper-100);border-radius:2px;padding:14px 30px;font-size:22px;font-weight:800;position:relative}.loading-pill:after{content:"";border:2px solid var(--flame-500);clip-path:inset(0 88% 0 0);border-radius:2px;animation:1.1s linear infinite sweep;position:absolute;inset:-2px}@keyframes sweep{0%{clip-path:inset(0 88% 0 0)}50%{clip-path:inset(0 0 0 88%)}to{clip-path:inset(0 88% 0 0)}}.brand-block{text-transform:uppercase;line-height:.86;font-family:var(--font-display);letter-spacing:-.01em;-webkit-user-select:none;user-select:none;margin-bottom:4px;font-size:clamp(48px,4.6vw,72px);font-weight:900}.brand-line--red{color:var(--flame-500)}.brand-line--gold{color:var(--paper-100);-webkit-text-stroke:1.5px var(--flame-500)}.brand-tag{letter-spacing:.14em;text-transform:uppercase;color:var(--steel-300);margin-bottom:20px;padding-left:2px;font-size:12px;font-weight:700}.lobby-screen,.app-shell{grid-template-columns:300px minmax(0,1fr);gap:24px;width:100%;height:100%;padding:28px;display:grid}.sidebar{flex-direction:column;gap:16px;min-width:0;display:flex}.panel{background:var(--ink-800);border:1px solid var(--ink-600);border-radius:3px;padding:18px 20px;position:relative}.panel:before{content:"";background:var(--flame-500);width:3px;position:absolute;top:0;bottom:0;left:0}.panel h2{font-family:var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--steel-300);margin:0 0 10px;font-size:15px;font-weight:700}.panel--profile{flex-direction:column;gap:14px;display:flex}.panel--profile p{font-family:var(--font-display);letter-spacing:-.01em;color:var(--paper-100);margin:0;font-size:30px;font-weight:800}.panel--profile button{color:#fff;background:#5865f2;border:0;border-radius:2px;padding:12px 18px;font-size:14px;font-weight:700;transition:filter .14s,transform .14s}.panel--profile button:hover{filter:brightness(1.08);transform:translateY(-1px)}.panel--meta{gap:8px;font-size:12.5px;display:grid}.meta-row{border-bottom:1px solid var(--ink-700);justify-content:space-between;gap:12px;padding:6px 0;display:flex}.meta-row:last-child{border-bottom:0}.meta-row__label{color:var(--steel-300);text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:700}.meta-row__value{font-variant-numeric:tabular-nums;color:var(--paper-100);text-align:right;text-overflow:ellipsis;white-space:nowrap;max-width:160px;overflow:hidden}.create-room-button{background:var(--flame-500);width:100%;color:var(--ink-950);font-family:var(--font-display);letter-spacing:.01em;border:0;border-radius:2px;justify-content:center;align-items:center;gap:10px;margin-top:auto;padding:18px 22px;font-size:20px;font-weight:800;transition:filter .14s,transform .14s;display:flex;box-shadow:0 0 #ff4d2380}.create-room-button:hover{filter:brightness(1.08);transform:translateY(-1px)}.create-room-button:active{transform:translateY(0)}.error-banner{border:1px solid var(--flame-500);color:var(--paper-100);background:#ff4d231f;border-radius:2px;padding:10px 14px;font-size:13px;line-height:1.4}.room-page{flex-direction:column;gap:18px;height:100%;min-height:0;display:flex}.room-page__header{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px;display:flex}.room-page__title{align-items:center;gap:14px;display:flex}.room-page__number{font-family:var(--font-display);color:var(--paper-100);font-variant-numeric:tabular-nums;font-size:56px;font-weight:900;line-height:1}.state-chip{letter-spacing:.08em;text-transform:uppercase;color:var(--ink-950);background:var(--volt-300);border-radius:2px;padding:5px 12px;font-size:11px;font-weight:800}.room-page__owner{color:var(--steel-300);font-size:13px;font-weight:600}.room-page__grid{flex:1;grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr);gap:18px;min-height:0;display:grid}.room-page__roster,.room-page__settings,.room-page__map{flex-direction:column;gap:14px;display:flex;overflow-y:auto}.room-page__right-column{flex-direction:column;gap:18px;min-height:0;display:flex}.map-select{background:var(--ink-800);color:var(--paper-100);border:1px solid var(--ink-700);border-radius:2px;padding:10px 12px;font-size:14px;font-weight:600}.map-select:disabled{opacity:.6}.roster-list{background:repeating-linear-gradient(135deg, var(--ink-700) 0 8px, var(--ink-800) 8px 16px);border-radius:2px;gap:2px;padding:1px;display:grid}.roster-row{background:var(--ink-800);justify-content:space-between;align-items:center;gap:14px;padding:12px 14px;font-size:14px;font-weight:600;display:flex}.roster-row__name{align-items:center;gap:10px;display:flex}.avatar{object-fit:cover;border-radius:2px;flex-shrink:0;width:26px;height:26px}.avatar--fallback{background:var(--ink-700);color:var(--flame-500);font-family:var(--font-display);justify-content:center;align-items:center;font-size:13px;font-weight:800;display:flex}.roster-row__tag{letter-spacing:.06em;text-transform:uppercase;color:var(--steel-300);border:1px solid var(--ink-600);border-radius:2px;padding:2px 7px;font-size:10px;font-weight:800}.roster-row__tag--owner{color:var(--ink-950);background:var(--flame-500);border-color:var(--flame-500)}.settings-form{flex-direction:column;gap:16px;display:flex}.settings-row{letter-spacing:.03em;text-transform:uppercase;color:var(--steel-300);flex-direction:column;gap:6px;font-size:12px;font-weight:700;display:flex}.settings-row input[type=number]{border:1px solid var(--ink-600);background:var(--ink-900);color:var(--paper-100);text-transform:none;letter-spacing:normal;border-radius:2px;padding:9px 12px;font-size:15px;font-weight:600}.settings-row input[type=number]:disabled{opacity:.6}.settings-row__duration{align-items:center;gap:12px;display:flex}.settings-row__duration input[type=range]{accent-color:var(--flame-500);flex:1}.settings-row__duration-value{font-family:var(--font-display);color:var(--paper-100);text-transform:none;letter-spacing:normal;text-align:right;font-variant-numeric:tabular-nums;min-width:64px;font-size:16px;font-weight:800}.settings-form button{background:var(--flame-500);color:var(--ink-950);border:0;border-radius:2px;padding:11px 18px;font-size:14px;font-weight:800}.settings-form__hint{text-transform:none;letter-spacing:normal;color:var(--steel-300);margin:0;font-size:12.5px;font-weight:500}.room-page__footer{border-top:1px solid var(--ink-700);flex-wrap:wrap;justify-content:flex-end;gap:10px;padding-top:14px;display:flex}.room-page__footer button{border:1px solid var(--ink-600);color:var(--paper-100);background:0 0;border-radius:2px;padding:10px 20px;font-size:14px;font-weight:700}.room-page__footer button.is-primary{background:var(--flame-500);border-color:var(--flame-500);color:var(--ink-950)}.room-page__footer button.is-ready{background:var(--volt-300);border-color:var(--volt-300);color:var(--ink-950)}@media (width<=900px){.room-page__grid{grid-template-columns:1fr}}.content{min-width:0;min-height:0}.rooms-shell{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-auto-rows:min-content;align-content:start;gap:18px;height:100%;min-height:0;padding:4px 4px 4px 0;display:grid;overflow-y:auto}.empty-state{border:1px dashed var(--ink-600);height:100%;min-height:240px;color:var(--steel-300);text-align:center;border-radius:3px;grid-column:1/-1;place-items:center;padding:24px;font-size:15px;display:grid}.room-card{background:var(--ink-800);border:1px solid var(--ink-600);border-radius:3px;flex-direction:column;padding:0;display:flex;position:relative;overflow:hidden}.room-card--active{border-color:var(--flame-500)}.room-card--active:before,.room-card--active:after{content:"";border:2px solid var(--flame-500);z-index:1;width:16px;height:16px;position:absolute}.room-card--active:before{border-bottom:0;border-right:0;top:-1px;left:-1px}.room-card--active:after{border-top:0;border-left:0;bottom:-1px;right:-1px}.room-card__body{flex-direction:column;flex:1;gap:12px;padding:18px 20px 14px;display:flex}.room-card__header{align-items:baseline;gap:12px;display:flex}.room-card__title{font-family:var(--font-display);color:var(--paper-100);font-variant-numeric:tabular-nums;font-size:34px;font-weight:900;line-height:1}.room-card__subtitle{color:var(--steel-300);text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:700}.room-card__roster{background:repeating-linear-gradient(135deg, var(--ink-700) 0 8px, var(--ink-800) 8px 16px);border-radius:2px;flex:1;align-content:start;gap:2px;padding:1px;display:grid}.room-card__empty{background:var(--ink-800);color:var(--steel-300);padding:12px 10px;font-size:13px}.member-row{background:var(--ink-800);justify-content:space-between;align-items:center;gap:14px;padding:8px 10px;font-size:13.5px;font-weight:600;display:flex}.member-row__state{letter-spacing:.06em;text-transform:uppercase;color:var(--steel-300);border:1px solid var(--ink-600);border-radius:2px;padding:3px 8px;font-size:10.5px;font-weight:800}.member-row__state--ready{color:var(--ink-950);background:var(--volt-300);border-color:var(--volt-300)}.room-card__footer{border-top:1px solid var(--ink-700);background:var(--ink-900);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:12px 20px;display:flex}.room-card__count{font-family:var(--font-display);color:var(--steel-300);font-variant-numeric:tabular-nums;font-size:15px;font-weight:800}.room-card__actions{flex-wrap:wrap;gap:8px;display:flex}.room-card button{border:1px solid var(--ink-600);color:var(--paper-100);background:0 0;border-radius:2px;padding:8px 16px;font-size:13px;font-weight:700;transition:background .14s,border-color .14s,color .14s}.room-card button:hover{border-color:var(--paper-300)}.room-card button.is-primary{background:var(--flame-500);border-color:var(--flame-500);color:var(--ink-950)}.room-card button.is-primary:hover{background:var(--flame-600);border-color:var(--flame-600)}.room-card button.is-ready{background:var(--volt-300);border-color:var(--volt-300);color:var(--ink-950)}@media (width<=1100px){.lobby-screen,.app-shell{grid-template-columns:1fr;height:auto;min-height:100%}}@media (width<=720px){.lobby-screen,.app-shell{gap:16px;padding:16px}.brand-block{font-size:clamp(38px,13vw,56px)}.rooms-shell{grid-template-columns:1fr}.room-card__actions{width:100%}.room-card__actions button{flex:auto}}.touch-controls{pointer-events:none;z-index:10;position:absolute;inset:0}.touch-controls__cluster{pointer-events:auto;gap:12px;display:flex;position:absolute;bottom:22px}.touch-controls__cluster--steer{left:22px}.touch-controls__cluster--throttle{flex-direction:column;align-items:center;right:22px}.touch-controls__throttle-row{gap:12px;display:flex}.touch-btn{border:1px solid var(--ink-600);width:60px;height:60px;color:var(--paper-100);touch-action:none;-webkit-user-select:none;user-select:none;background:#1c1f25d9;border-radius:2px;justify-content:center;align-items:center;font-size:20px;display:flex}.touch-btn--attack{background:var(--flame-500);border-color:var(--flame-500);color:var(--ink-950)}.touch-btn--drift{background:var(--volt-300);border-color:var(--volt-300);color:var(--ink-950)}.touch-controls__exit{border:1px solid var(--ink-600);color:var(--paper-100);text-transform:uppercase;letter-spacing:.06em;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;background:#1c1f25d9;border-radius:2px;padding:9px 16px;font-size:12px;font-weight:700;position:absolute;top:16px;right:16px}
