:root { --bg: #07080d; --panel: rgba(18, 21, 32, .86); --panel2: rgba(255,255,255,.05); --line: rgba(255,255,255,.1); --ink: #eef1f7; --muted: rgba(238,241,247,.62);
  --cyan: #49d6ff; --pink: #ff4fa3; --lime: #7dff8a; --gold: #ffd36b; --red: #ff5a4d; color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { background: radial-gradient(1200px 600px at 15% -10%, rgba(73,214,255,.16), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(255,79,163,.14), transparent 55%), var(--bg); background-attachment: fixed; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px); z-index: 0; }
a { color: var(--cyan); }
main { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-left)) 40px; }
header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.logo { display: flex; flex-direction: column; margin-right: auto; text-decoration: none; }
.logo b { font: 900 30px/1 system-ui; letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(90deg, var(--cyan), var(--pink) 60%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo span { font-size: 13px; color: var(--muted); margin-top: 6px; }
#who { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px system-ui; padding: 7px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); white-space: nowrap; }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; }
.pill.on i { background: var(--lime); box-shadow: 0 0 10px var(--lime); } .pill.off i { background: var(--red); }
.btn { font: 700 14px system-ui; color: var(--ink); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 10px 14px; cursor: pointer; white-space: nowrap; transition: background .15s, transform .15s; min-height: 42px; }
.btn:hover, .btn:focus-visible { background: rgba(255,255,255,.14); outline: none; }
.btn:focus-visible { box-shadow: 0 0 0 2px var(--cyan); }
.btn.pri { color: #071016; background: linear-gradient(90deg, var(--cyan), var(--lime)); border: 0; }
.btn.hot { color: #fff; background: linear-gradient(90deg, #ff3d7f, #ff7a3d); border: 0; }
.btn.big { width: 100%; padding: 13px; font-size: 15.5px; }
.btn:disabled { opacity: .5; cursor: default; }
.link { background: none; border: 0; color: var(--cyan); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
h1 { font: 800 28px/1.15 system-ui; margin: 0 0 10px; }
h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font: 800 13px system-ui; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 26px 0 12px; }
h2 em { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 13px; opacity: .8; }
h2 .sp { flex: 1; }
.lead { color: var(--muted); margin: 0 0 18px; }
.small { font-size: 13px; color: var(--muted); }
label { display: block; font-weight: 600; font-size: 13px; margin: 0 0 6px; color: var(--muted); }
input:not([type=checkbox]):not([type=radio]) { width: 100%; font: 16px system-ui; color: var(--ink); background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; outline: none; }
input:focus { border-color: var(--cyan); }
.codein { font: 700 26px ui-monospace, monospace !important; letter-spacing: .3em; text-align: center; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--ink); margin-bottom: 16px; }
.check input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.err { color: var(--red); min-height: 1.4em; margin: 10px 0 0; font-weight: 600; }
#auth { display: grid; place-items: center; min-height: 60vh; }
.authcard { width: min(480px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.live { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.lcard { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(255,79,163,.12), rgba(73,214,255,.08)); border: 1px solid rgba(255,79,163,.3); }
.lcard .ic { font-size: 30px; }
.lcard .tx { flex: 1; min-width: 0; } .lcard b { display: block; } .lcard span { color: var(--muted); font-size: 13px; }
.empty { color: var(--muted); padding: 16px; border: 1px dashed var(--line); border-radius: 14px; }
.joinform { display: flex; gap: 8px; letter-spacing: 0; text-transform: none; }
.joinform input { width: 110px !important; margin: 0 !important; padding: 9px 12px !important; text-transform: uppercase; font: 700 15px ui-monospace, monospace !important; letter-spacing: .12em; }
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.gcard { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.gcard .cov { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #12203a, #2a1030); display: grid; place-items: center; font-size: 64px; overflow: hidden; }
.gcard .cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcard .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.gcard b { font: 800 18px system-ui; } .gcard p { margin: 0; color: var(--muted); font-size: 14px; flex: 1; }
.gcard .meta { font-size: 12.5px; color: var(--muted); }
.gcard .ac { display: flex; gap: 8px; flex-wrap: wrap; } .gcard .ac .btn { flex: 1; }
footer { margin-top: 40px; color: var(--muted); font-size: 13px; text-align: center; } footer a { color: var(--muted); }
dialog { background: #10131d; color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 0; width: min(440px, calc(100% - 32px)); }
dialog::backdrop { background: rgba(0,0,0,.6); }
.dlg { padding: 22px; } .dlg h3 { margin: 0 0 14px; font: 800 20px system-ui; }
.dlg .row { display: flex; gap: 10px; align-items: center; margin-top: 10px; } .dlg .row input { margin: 0; } .dlg .row .btn { flex: none; }
.dlg .row:last-child { justify-content: flex-end; }
.opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; color: var(--ink); font-weight: 400; cursor: pointer; }
.opt input { margin-top: 4px; } .opt:has(input:checked) { border-color: var(--cyan); background: rgba(73,214,255,.07); }
.danger { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; } .danger summary { cursor: pointer; color: var(--red); font-weight: 600; }
#gamewin { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: #000; }
#gamewin[hidden] { display: none; }
#gamewin .bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 12px; padding-top: max(6px, env(safe-area-inset-top)); background: linear-gradient(90deg, #0b1a2e, #0b0f1a 50%, #2a0f22); border-bottom: 2px solid; border-image: linear-gradient(90deg, var(--cyan), var(--pink)) 1; font: 600 13px system-ui; }
#gamewin .t { font: 900 15px system-ui; letter-spacing: .12em; text-transform: uppercase; }
#gamewin .room { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--muted); }
#gamewin .room b { color: var(--gold); font-family: ui-monospace, monospace; letter-spacing: .12em; }
#gamewin .sp { flex: 1; } #gamewin .hint { color: var(--muted); font-weight: 500; font-size: 12.5px; flex: 0 1 auto; min-width: 0; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gamewin .bar { flex-wrap: nowrap; } #gamewin .room { flex-wrap: nowrap; white-space: nowrap; min-width: 0; overflow: hidden; }
.mini { display: inline-flex; gap: 6px; align-items: center; font: 700 12px system-ui; color: var(--ink); background: rgba(73,214,255,.1); border: 1px solid rgba(255,79,163,.45); border-radius: 9px; padding: 5px 10px; cursor: pointer; margin: 0; }
#gwFrame { flex: 1; width: 100%; border: 0; background: #000; }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: #151a28; border: 1px solid var(--line); border-radius: 12px; padding: 11px 16px; font-weight: 600; display: none; max-width: calc(100% - 32px); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
@media (max-width: 900px) { #gamewin .bar { flex-wrap: wrap; } #gamewin .hint { display: none; } }
@media (max-width: 640px) { h1 { font-size: 23px; } .authcard { padding: 20px; } #gamewin .hint { display: none; } h2 .joinform { width: 100%; } h2 .joinform input { flex: 1; width: auto !important; } }
/* simple pages (privacy, terms, admin) */
.doc { max-width: 760px; margin: 0 auto; } .doc h1 { margin-top: 10px; } .doc h2 { text-transform: none; letter-spacing: 0; font-size: 18px; color: var(--ink); }
.doc p, .doc li { color: rgba(238,241,247,.85); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; } th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } th { color: var(--muted); font-weight: 600; }
.tablewrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.stat { display: inline-block; margin: 0 18px 10px 0; } .stat b { font-size: 24px; display: block; }
/* admin: publish a game + sign-in email */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.adm2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.drop { display: grid; place-items: center; text-align: center; gap: 8px; min-height: 150px; padding: 18px; border: 2px dashed rgba(73,214,255,.45); border-radius: 14px; background: rgba(73,214,255,.05); cursor: pointer; transition: background .15s, border-color .15s; }
.drop.over { background: rgba(73,214,255,.14); border-color: var(--cyan); }
.drop b { font-size: 16px; } .drop input { display: none; }
.pkg { margin-top: 12px; } .pkg .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.bar2 { height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin: 10px 0 4px; } .bar2 i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--lime)); transition: width .2s; }
.ok { color: var(--lime); font-weight: 600; } .warn { color: var(--gold); font-weight: 600; }
.panel form .row { display: flex; gap: 10px; flex-wrap: wrap; }