@font-face { font-family: 'Titan One'; src: url('../assets/fonts/TitanOne-latin.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Rubik'; src: url('../assets/fonts/Rubik-latin.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
:root { color-scheme: dark; font-family: 'Rubik', 'Microsoft YaHei UI', system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { background: #0d1020; color: #fff; }
.iw-login-page { min-height: 100dvh; overflow: hidden; background:
  radial-gradient(circle at 78% 15%, rgba(47,91,255,.5), transparent 30%),
  radial-gradient(circle at 15% 82%, rgba(255,63,158,.38), transparent 34%),
  linear-gradient(145deg, #10162d, #171027 48%, #090b17); }
.iw-login-page::before { content: ''; position: fixed; inset: 0; opacity: .22; pointer-events: none;
  background: radial-gradient(circle, #fff 1px, transparent 1.5px) 0 0 / 17px 17px; transform: rotate(-5deg) scale(1.1); }
.iw-login { position: fixed; inset: 0; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
.iw-login__card { position: relative; width: min(440px, 100%); padding: 36px; border: 3px solid #15121c; border-radius: 32px; background: rgba(30,24,48,.96); box-shadow: 0 8px 0 #15121c, 0 28px 80px rgba(0,0,0,.48), inset 0 0 0 2px rgba(255,255,255,.12); transform: rotate(-.4deg); }
.iw-login__mark { position: absolute; right: 28px; top: 26px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: #a6f01a; color: #15121c; font-size: 30px; box-shadow: 0 4px 0 #15121c; transform: rotate(9deg); }
.iw-login__eyebrow { margin: 0 0 8px; color: #a6f01a; font-size: 12px; font-weight: 900; letter-spacing: .18em; }
.iw-login h1 { margin: 0; font: 400 clamp(48px, 12vw, 72px)/.9 'Titan One', sans-serif; letter-spacing: .03em; text-shadow: 0 5px 0 #15121c; }
.iw-login__sub { margin: 10px 0 30px; color: #cbc5dc; font-weight: 800; }
.iw-login form { display: grid; gap: 18px; }
.iw-login label { display: grid; gap: 8px; font-size: 14px; font-weight: 900; letter-spacing: .06em; }
.iw-login input { width: 100%; min-height: 50px; border: 2px solid rgba(255,255,255,.18); border-radius: 13px; padding: 0 15px; background: #15121c; color: #fff; font: 700 17px/1 'Rubik', sans-serif; outline: none; }
.iw-login input:focus { border-color: #a6f01a; box-shadow: 0 0 0 4px rgba(166,240,26,.18); }
.iw-login button { min-height: 54px; border: 0; border-radius: 14px; background: #a6f01a; color: #15121c; cursor: pointer; font: 900 19px/1 'Rubik', sans-serif; box-shadow: 0 5px 0 #547d0a; transition: transform .12s, filter .12s; }
.iw-login button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.iw-login button:active { transform: translateY(3px); box-shadow: 0 2px 0 #547d0a; }
.iw-login button:disabled { cursor: wait; opacity: .65; }
.iw-login__message { min-height: 21px; margin: -4px 0 0; color: #ff7790; font-size: 14px; font-weight: 800; }
.iw-login__message.is-ok { color: #a6f01a; }
.iw-login__note { margin: 20px 0 0; color: #a9a2bb; font-size: 12px; line-height: 1.6; }

/* Authenticated game shell. Kept separate from the original menu CSS. */
.iw-public-bar { position: fixed; z-index: 96; top: calc(10px + env(safe-area-inset-top)); left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 9px; max-width: calc(100vw - 24px); padding: 7px 10px; border: 2px solid #15121c; border-radius: 999px; background: rgba(21,18,28,.92); box-shadow: 0 4px 0 rgba(0,0,0,.45); color: #fff; font: 800 12px/1 'Rubik', system-ui, sans-serif; pointer-events: auto; transition: opacity .2s, visibility .2s; }
.iw-public-bar.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.iw-public-bar__user { white-space: nowrap; }
.iw-public-bar__role { padding: 5px 8px; border-radius: 999px; background: #a6f01a; color: #15121c; white-space: nowrap; }
.iw-public-bar__relay { white-space: nowrap; color: #ffd65c; }
.iw-public-bar__relay[data-state="connected"] { color: #a6f01a; }
.iw-public-bar__relay[data-state="failed"] { color: #ff718a; }
.iw-public-bar button { border: 0; border-radius: 999px; padding: 7px 10px; background: #38304a; color: #fff; cursor: pointer; font: 800 12px/1 'Rubik', system-ui; }
.iw-public-bar button:hover { background: #514466; }
.iw-public-bar__admin { background: #2f5bff !important; }
.iw-admin { position: fixed; z-index: 210; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(5,5,12,.78); backdrop-filter: blur(10px); color: #fff; font: 500 14px/1.45 'Rubik', 'Microsoft YaHei UI', system-ui; pointer-events: auto; }
.iw-admin[hidden] { display: none; }
.iw-admin__panel { width: min(1040px, 100%); max-height: min(840px, calc(100dvh - 48px)); overflow: auto; padding: 24px; border: 2px solid rgba(255,255,255,.18); border-radius: 22px; background: #1d1830; box-shadow: 0 18px 80px rgba(0,0,0,.6); }
.iw-admin__head { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.iw-admin h2, .iw-admin h3 { margin: 0; }
.iw-admin h2 { font: 400 30px/1 'Titan One', sans-serif; }
.iw-admin h3 { margin-top: 24px; font-size: 17px; }
.iw-admin__close, .iw-admin button { border: 0; border-radius: 9px; padding: 9px 12px; background: #3a3150; color: #fff; cursor: pointer; font-weight: 800; }
.iw-admin button:hover { filter: brightness(1.18); }
.iw-admin__create { display: grid; grid-template-columns: 1fr 1fr 130px auto; gap: 10px; margin-top: 12px; }
.iw-admin input, .iw-admin select { min-width: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; padding: 10px; background: #100d1d; color: #fff; font: inherit; }
.iw-admin__create button { background: #a6f01a; color: #15121c; }
.iw-admin__message { min-height: 20px; color: #ff718a; font-weight: 800; }
.iw-admin__grid { overflow-x: auto; margin-top: 10px; }
.iw-admin table { width: 100%; border-collapse: collapse; min-width: 760px; }
.iw-admin th, .iw-admin td { padding: 10px 8px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.1); }
.iw-admin th { color: #bdb5cf; font-size: 12px; text-transform: uppercase; }
.iw-admin td button { padding: 6px 8px; margin: 2px 4px 2px 0; font-size: 12px; }
.iw-admin td button.is-danger { background: #b72f4a; }
.iw-admin__status { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.iw-admin__cards { display: grid; gap: 7px; margin-top: 10px; }
.iw-admin__card { padding: 10px 12px; border-radius: 10px; background: #100d1d; }
.iw-admin__password { position: fixed; z-index: 220; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.6); }
.iw-admin__password[hidden] { display: none; }
.iw-admin__password-card { width: min(380px, calc(100vw - 40px)); display: grid; gap: 12px; padding: 20px; border-radius: 16px; background: #2a2340; }
.iw-admin__password-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 720px) { .iw-public-bar { font-size: 10px; gap: 5px; } .iw-public-bar__online { display: none; } .iw-admin__create, .iw-admin__status { grid-template-columns: 1fr; } }