:root { color-scheme: dark; --green:#14f195; --cyan:#00d1ff; --purple:#9945ff; --ink:#070910; --panel:#111622; --line:#273149; --text:#f1f5ff; --muted:#93a1b9; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--ink); }
body { margin:0; min-height:100vh; color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:radial-gradient(circle at 12% -8%,rgba(20,241,149,.14),transparent 30rem),radial-gradient(circle at 88% 0,rgba(153,69,255,.18),transparent 32rem),#080a10; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.hidden { display:none!important; }
.site-header { width:min(1200px,calc(100% - 36px)); margin:auto; padding:24px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; flex-direction:column; color:inherit; text-decoration:none; font-weight:900; line-height:1; }
.brand>span { display:flex; align-items:center; gap:6px; font-size:1.5rem; background:linear-gradient(100deg,var(--green),var(--cyan),var(--purple)); color:transparent; background-clip:text; -webkit-background-clip:text; }
.brand img { image-rendering:pixelated; }
.brand small { margin-top:4px; color:#74829b; font-size:.55rem; letter-spacing:.32em; }
.site-header nav { display:flex; gap:22px; }
.site-header nav a { color:#aeb9ca; text-decoration:none; font-size:.88rem; font-weight:750; }
.site-header nav a:hover,.site-header nav a:focus-visible { color:white; }
.pvp-shell { width:min(1200px,calc(100% - 36px)); margin:0 auto; padding:38px 0 70px; }
.eyebrow,.card-kicker { display:block; margin:0 0 10px; color:var(--green); font-size:.72rem; font-weight:900; letter-spacing:.18em; }
.entry-view { min-height:calc(100vh - 150px); display:grid; grid-template-columns:minmax(0,1.08fr) minmax(390px,.8fr); gap:clamp(34px,7vw,90px); align-items:center; }
.entry-copy h1,.lobby-heading h1,.battle-topline h1 { margin:0; letter-spacing:-.055em; line-height:.96; }
.entry-copy h1 { max-width:720px; font-size:clamp(3.2rem,7vw,6.8rem); }
.entry-copy h1 em { color:transparent; background:linear-gradient(100deg,var(--green),var(--cyan) 45%,var(--purple)); background-clip:text; -webkit-background-clip:text; font-style:normal; }
.entry-copy>p:not(.eyebrow) { max-width:650px; margin:26px 0; color:#aab5c8; font-size:1.04rem; line-height:1.72; }
.trust-row { display:flex; flex-wrap:wrap; gap:12px; }
.trust-row span { padding:9px 12px; border:1px solid #26324a; border-radius:999px; color:#bdc7d8; font-size:.78rem; font-weight:700; background:rgba(13,18,29,.65); }
.trust-row i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--green); box-shadow:0 0 9px var(--green); }
.room-console,.invite-card,.players-card,.command-card { border:1px solid var(--line); border-radius:22px; background:linear-gradient(150deg,rgba(21,27,42,.96),rgba(10,13,21,.96)); box-shadow:0 28px 70px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.05); }
.room-console { padding:18px; }
.console-tabs { display:grid; grid-template-columns:1fr 1fr; padding:4px; border-radius:13px; background:#090c13; }
.console-tabs button { border:0; border-radius:10px; padding:12px; color:#77859d; background:transparent; font-weight:800; }
.console-tabs button.active { color:#fff; background:#1c2537; box-shadow:inset 0 1px rgba(255,255,255,.07); }
#roomForm { padding:20px 5px 5px; }
label { display:grid; gap:8px; color:#cbd4e4; font-size:.8rem; font-weight:800; }
input,select { width:100%; border:1px solid #33405a; border-radius:11px; padding:12px 13px; color:#f4f7ff; background:#0d121d; outline:none; }
input:focus,select:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(20,241,149,.1); }
.team-picker { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:13px; }
.team-strip { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:5px; margin:20px 0; padding:13px; border:1px solid #253149; border-radius:14px; background:#0b1019; }
.team-strip figure { min-width:0; margin:0; text-align:center; }
.team-strip img { width:64px; height:64px; object-fit:contain; image-rendering:pixelated; }
.team-strip figcaption { overflow:hidden; color:#9ba9be; font-size:.68rem; font-weight:750; text-overflow:ellipsis; }
.team-strip>b { color:#45536b; }
.primary-button,.ready-button { width:100%; border:0; border-radius:12px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; color:#07100c; background:linear-gradient(100deg,var(--green),#38dcbb); font-weight:900; box-shadow:0 12px 28px rgba(20,241,149,.12); }
.primary-button:hover,.ready-button:hover:not(:disabled) { filter:brightness(1.08); transform:translateY(-1px); }
.primary-button:disabled,.ready-button:disabled { cursor:not-allowed; filter:grayscale(.7); opacity:.55; }
.form-status,.mini-status { min-height:1.2em; margin:11px 0 0; color:#8998af; font-size:.76rem; line-height:1.45; }
.form-status.error,.mini-status.error { color:#ff8585; }
.lobby-heading,.battle-topline { display:flex; justify-content:space-between; align-items:end; gap:20px; margin:14px 0 28px; }
.lobby-heading h1,.battle-topline h1 { font-size:clamp(2.4rem,5vw,4.8rem); }
.lobby-heading h1 span { color:var(--cyan); }
.connection-badge { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid #2c374e; border-radius:999px; color:#a8b3c6; font-size:.78rem; font-weight:800; }
.connection-badge i { width:8px; height:8px; border-radius:50%; background:#ffb84d; }
.connection-badge.online i { background:var(--green); box-shadow:0 0 9px var(--green); }
.lobby-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.invite-card,.players-card { padding:27px; }
.invite-card h2 { margin:0 0 8px; font-size:1.65rem; }
.invite-card>p { color:#96a4ba; line-height:1.55; }
.copy-field { display:flex; gap:8px; margin-top:24px; }
.copy-field input { min-width:0; }
.copy-field button,#forfeitButton,#rematchButton { border:1px solid #3a4760; border-radius:10px; padding:10px 14px; color:#e8edfa; background:#202a3e; font-weight:800; }
.player-cards { display:grid; gap:10px; margin:14px 0 18px; }
.player-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border:1px solid #2b374e; border-radius:13px; background:#0d121d; }
.player-card strong { display:block; }
.player-card small { color:#7f8da3; }
.player-card>span { padding:5px 8px; border-radius:999px; color:#818fa5; background:#171f2f; font-size:.65rem; font-weight:900; }
.player-card>span.ready { color:#07100c; background:var(--green); }
.battle-topline>div:last-child { display:flex; align-items:center; gap:12px; color:#9eabc0; font-size:.84rem; font-weight:800; }
.battle-grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:22px; }
.arena-card { position:relative; overflow:hidden; min-height:620px; border:8px solid #171d2a; border-radius:23px; color:#27312a; background:linear-gradient(#c5f6ed 0 62%,#77d9a4 62%); box-shadow:0 30px 75px rgba(0,0,0,.42),inset 0 0 0 2px #38445a; image-rendering:pixelated; }
.arena-sky { position:absolute; inset:0 0 38%; opacity:.55; background:radial-gradient(circle at 80% 20%,#fff 0 4%,transparent 4.5%),linear-gradient(155deg,transparent 64%,rgba(0,174,159,.22) 64% 67%,transparent 67%),repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 2px,transparent 2px 7px); }
.combatant { position:absolute; left:5%; right:5%; display:flex; align-items:center; justify-content:space-between; }
.enemy-combatant { top:8%; }
.player-combatant { bottom:14%; }
.combatant img { width:clamp(120px,23vw,230px); height:clamp(120px,23vw,230px); object-fit:contain; image-rendering:pixelated; filter:drop-shadow(12px 15px 0 rgba(36,91,65,.18)); }
.enemy-combatant img { order:2; }
.player-combatant img { transform:scaleX(-1); }
.status-panel { width:min(47%,330px); padding:13px 15px; border:3px solid #43564b; border-radius:9px 7px 18px 7px; background:#fffde4; box-shadow:7px 8px 0 rgba(51,84,65,.4); }
.status-panel>div:first-child { display:flex; justify-content:space-between; gap:8px; }
.hp { height:12px; margin:10px 0 5px; overflow:hidden; border:3px solid #4d5d52; border-radius:999px; background:#25362d; }
.hp i { display:block; width:100%; height:100%; background:#3ce782; transition:width .55s; }
.status-panel small { display:block; text-align:right; }
.battle-message { position:absolute; left:0; right:0; bottom:0; min-height:84px; padding:20px 24px; border-top:6px solid var(--purple); color:#fff; background:#248365; font:900 clamp(1rem,2.4vw,1.45rem)/1.35 "Courier New",monospace; text-shadow:2px 2px #1c5948; }
.command-card { overflow:hidden; min-height:620px; display:flex; flex-direction:column; }
.command-head { display:flex; justify-content:space-between; gap:10px; padding:18px; border-bottom:1px solid #28334a; color:#d8e0ee; font-size:.74rem; font-weight:900; letter-spacing:.12em; }
.command-head small { color:#7f8da4; letter-spacing:0; }
.move-buttons,.switch-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:15px 15px 0; }
.move-buttons button,.switch-buttons button { min-height:58px; border:1px solid #32405a; border-radius:10px; padding:9px; color:#e6ecf8; background:#192235; text-align:left; font-size:.78rem; font-weight:850; }
.move-buttons button small,.switch-buttons button small { display:block; margin-top:4px; color:#7f8da2; font-size:.63rem; }
.move-buttons button:hover:not(:disabled),.switch-buttons button:hover:not(:disabled) { border-color:var(--green); background:#213047; }
.move-buttons button:disabled,.switch-buttons button:disabled { cursor:not-allowed; opacity:.42; }
.battle-log-wrap { min-height:0; margin-top:16px; padding:16px; border-top:1px solid #273249; flex:1; }
.battle-log-wrap h2 { margin:0 0 10px; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; }
.battle-log { max-height:225px; margin:0; padding-left:24px; overflow:auto; color:#8f9db2; font-size:.74rem; line-height:1.55; }
.battle-log li:first-child { color:#e4eaf5; }
.result-card { margin-top:22px; padding:26px; border:1px solid rgba(20,241,149,.35); border-radius:18px; text-align:center; background:linear-gradient(110deg,rgba(20,241,149,.08),rgba(153,69,255,.1)); }
.result-card h2 { margin:0 0 8px; font-size:2rem; }
.result-card p:not(.eyebrow) { color:#9ca9bc; }
@media(max-width:900px){.entry-view{grid-template-columns:1fr;min-height:auto;padding-top:25px}.entry-copy h1{font-size:clamp(3.1rem,12vw,6rem)}.lobby-grid,.battle-grid{grid-template-columns:1fr}.command-card{min-height:auto}.battle-log{max-height:180px}}
@media(max-width:620px){.site-header,.pvp-shell{width:min(100% - 22px,580px)}.site-header nav a:nth-child(3){display:none}.site-header nav{gap:14px}.pvp-shell{padding-top:15px}.entry-view{gap:26px}.entry-copy h1{font-size:3.2rem}.team-picker{grid-template-columns:1fr}.lobby-heading,.battle-topline{align-items:flex-start;flex-direction:column}.lobby-grid{gap:14px}.invite-card,.players-card{padding:20px}.copy-field{align-items:stretch;flex-direction:column}.arena-card{min-height:480px}.combatant img{width:125px;height:125px}.status-panel{width:58%;padding:9px;font-size:.78rem}.battle-message{min-height:70px;padding:14px;font-size:.95rem}.move-buttons,.switch-buttons{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}