:root { --bg: #1a2540; --player: #00e87a; --bot: #ff3264; --accent: #00d4ff; --gold: #ffc820; --text: #f0f6ff; --text-dim: rgba(180,210,255,0.6); --font: 'Rajdhani', 'Segoe UI', Tahoma, sans-serif; --topbar-h: 52px; } * { margin:0; padding:0; box-sizing:border-box; } html,body { width:100%; height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family:var(--font); user-select:none; } #game-wrapper { width:100vw; height:100vh; } #arena-container { width:100%; height:100%; position:relative; overflow:hidden; background: radial-gradient(ellipse at 50% 35%, #243060 0%, #1a2448 45%, #111d3a 100%); } /* ── TOP BAR ────────────────────────────── */ #top-bar { position:absolute; top:0; left:0; right:0; min-height:var(--topbar-h); background: linear-gradient(180deg, rgba(18,26,55,0.98) 0%, rgba(12,20,42,0.96) 100%); border-bottom:1px solid rgba(0,212,255,0.15); box-shadow:0 2px 20px rgba(0,0,0,0.5); display:flex; align-items:stretch; z-index:20; flex-wrap:wrap; } canvas { position:absolute; top: calc(var(--topbar-h) + 3px); left:3px; width: calc(100% - 6px); height: calc(100% - var(--topbar-h) - 6px); cursor:crosshair; display:block; } /* ── SCORE BAR ──────────────────────────── */ #score-bar { display:contents; } .score-2p-wrap { display:contents; } .corner-panel { display:flex; align-items:center; gap:5px; padding:0 8px; min-width:0; flex-shrink:0; } .player-corner { background: linear-gradient(90deg, rgba(0,232,122,0.12) 0%, transparent 100%); } .bot-corner { background: linear-gradient(270deg, rgba(255,50,100,0.12) 0%, transparent 100%); } /* ── MENU MODE: top-bar'da skor ve timer gizli ── */ #top-bar.menu-mode .corner-panel { visibility:hidden; pointer-events:none; } #top-bar.menu-mode .score-2p-wrap > * { visibility:hidden; } #top-bar.menu-mode .score-multi-wrap { display:none !important; } #top-bar.menu-mode #game-msg { display:none !important; } #top-bar.menu-mode #game-timer { display:none !important; } #top-bar.menu-mode #live-controls { display:none !important; } #top-bar.menu-mode #speed-controls { display:none !important; } #top-bar.menu-mode #end-controls-bar { display:none !important; } #top-bar.menu-mode #p1-status, #top-bar.menu-mode #p2-status, #top-bar.menu-mode #p2-controls-hint { display:none !important; } /* MENU butonu menüde biraz belirgin ama sade */ #top-bar.menu-mode .menu-btn { font-size:0.72rem !important; padding:6px 18px !important; font-weight:700 !important; letter-spacing:2px !important; border-color:rgba(100,150,200,0.35) !important; background:rgba(80,120,180,0.10) !important; color:#8aaace !important; } /* ── MULTI-PLAYER SCORE CHIPS ──────────── */ .score-multi-wrap { display:flex; flex-wrap:nowrap; align-items:center; gap:3px; padding:0 6px; overflow:hidden; min-width:0; flex-shrink:1; } .score-chip { position:relative; display:flex; align-items:center; gap:3px; padding:2px 5px; border-radius:100px; border:1px solid rgba(255,255,255,0.12); background:rgba(0,0,0,0.25); white-space:nowrap; font-family:'Courier New',monospace; cursor:default; flex-shrink:1; min-width:0; } .score-chip:hover .chip-tooltip { display:block; } .chip-tooltip { display:none; position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%); background:rgba(10,14,30,0.97); border:1px solid rgba(255,255,255,0.2); border-radius:4px; padding:4px 8px; font-size:.65rem; letter-spacing:1px; color:#fff; white-space:nowrap; z-index:999; pointer-events:none; } .score-chip .chip-label { font-size:.56rem; font-weight:900; letter-spacing:.5px; padding:1px 5px; border-radius:100px; overflow:hidden; text-overflow:ellipsis; max-width:72px; white-space:nowrap; } .score-chip .chip-army { font-size:.75rem; font-weight:900; letter-spacing:0; } .score-chip .chip-prod { font-size:.55rem; color:var(--text-dim); } .corner-panel.player-corner { order:-1; } .corner-panel.bot-corner { order:1; } .chip-green { border-color:rgba(0,232,122,0.35); } .chip-green .chip-label { background:var(--player); color:#000; } .chip-green .chip-army { color:var(--player); } .chip-red { border-color:rgba(255,50,100,0.35); } .chip-red .chip-label { background:var(--bot); color:#fff; } .chip-red .chip-army { color:var(--bot); } .chip-blue { border-color:rgba(0,170,255,0.35); } .chip-blue .chip-label { background:#00aaff; color:#000; } .chip-blue .chip-army { color:#00aaff; } .chip-orange { border-color:rgba(255,153,0,0.35); } .chip-orange .chip-label { background:#ff9900; color:#000; } .chip-orange .chip-army { color:#ff9900; } .chip-purple { border-color:rgba(204,68,255,0.35); } .chip-purple .chip-label { background:#cc44ff; color:#fff; } .chip-purple .chip-army { color:#cc44ff; } .chip-teal { border-color:rgba(0,204,170,0.35); } .chip-teal .chip-label { background:#00ccaa; color:#000; } .chip-teal .chip-army { color:#00ccaa; } .chip-crimson { border-color:rgba(255,68,68,0.35); } .chip-crimson .chip-label { background:#ff4444; color:#fff; } .chip-crimson .chip-army { color:#ff4444; } .chip-yellow { border-color:rgba(255,221,0,0.35); } .chip-yellow .chip-label { background:#ffdd00; color:#000; } .chip-yellow .chip-army { color:#ffdd00; } .score-chip.chip-dead { opacity:0.35; filter:grayscale(0.7); } .score-multi-wrap.split-left { flex:0 1 auto; max-width:45%; background:linear-gradient(90deg,rgba(0,232,122,0.07) 0%,transparent 100%); padding-left:8px; border-radius:0 4px 4px 0; } .score-multi-wrap.split-right { flex:0 1 auto; max-width:45%; background:linear-gradient(270deg,rgba(255,50,100,0.07) 0%,transparent 100%); padding-right:8px; border-radius:4px 0 0 4px; justify-content:flex-end; } .label-row { display:flex; align-items:center; gap:4px; flex-shrink:0; } .role-badge { font-size:.75rem; letter-spacing:2px; font-weight:900; padding:3px 8px; border-radius:100px; white-space:nowrap; line-height:1.3; } .role-badge.player { color:#000; background:var(--player); box-shadow:0 0 10px rgba(0,232,122,0.6); } .role-badge.bot { color:#fff; background:var(--bot); box-shadow:0 0 10px rgba(255,50,100,0.6); } .player-name { font-size:.75rem; letter-spacing:1px; font-weight:900; padding:3px 9px; border-radius:100px; max-width:110px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:2px solid rgba(255,255,255,0.25); color:rgba(255,255,255,0.85); background:rgba(255,255,255,0.06); } .player-name:empty { display:none; } .base-name { font-size:.75rem; letter-spacing:2px; font-weight:900; padding:3px 7px; border-radius:100px; max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block; } .base-name.player { color:#000; background:var(--player); box-shadow:0 0 14px rgba(0,232,122,0.7); } .base-name.bot { color:#fff; background:var(--bot); box-shadow:0 0 14px rgba(255,50,100,0.7); } .army-count { font-size:1.1rem; font-weight:900; font-family:'Courier New',monospace; letter-spacing:1px; } .army-count.player { color:var(--player); text-shadow:0 0 10px rgba(0,232,122,0.7); } .army-count.bot { color:var(--bot); text-shadow:0 0 10px rgba(255,50,100,0.7); } .prod-count { font-size:.7rem; color:var(--text-dim); font-family:'Courier New',monospace; } .boost-btn { font-size:.68rem; font-weight:800; padding:4px 8px; border:1px solid rgba(255,255,255,0.2); border-radius:100px; cursor:pointer; transition:.15s; white-space:nowrap; letter-spacing:1px; background:transparent; } .player-boost { color:var(--player); border-color:rgba(0,232,122,0.4); } .player-boost:hover { background:rgba(0,232,122,0.15); border-color:var(--player); } .bot-boost { color:var(--bot); border-color:rgba(255,50,100,0.4); } .bot-boost:hover { background:rgba(255,50,100,0.15); border-color:var(--bot); } #center-controls { flex:1; min-width:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:6px; padding:0 10px; } .cc-slot { display:flex; align-items:center; gap:6px; } .cc-right-slot { justify-content:flex-end; } /* ── BUTTONS — pill shape ──────────────── */ .icon-btn { font-family: 'Rajdhani', var(--font); font-size:.78rem; font-weight:700; letter-spacing:2px; padding:5px 14px; border:1px solid rgba(100,160,230,0.40); border-radius:100px; cursor:pointer; background:rgba(60,110,190,0.22); color:#b8d8f8; transition:.12s; white-space:nowrap; } .icon-btn:hover { background:rgba(80,140,220,0.34); border-color:rgba(150,200,255,0.65); color:#dff0ff; } .icon-btn.active { background:var(--player); color:#001a0a; border-color:var(--player); box-shadow:0 0 12px rgba(0,232,122,0.45); } /* SUCCESS — START, CONFIRM, PLAY AGAIN */ .icon-btn.success { color:#00f080; border-color:rgba(0,210,110,0.60); background:rgba(0,160,70,0.28); } .icon-btn.success:hover { background:rgba(0,190,90,0.42); border-color:#00e87a; color:#44ffaa; box-shadow:0 0 12px rgba(0,220,120,0.30); } /* DANGER — CANCEL, DELETE */ .icon-btn.danger { color:#ff7090; border-color:rgba(230,50,90,0.60); background:rgba(180,20,50,0.30); } .icon-btn.danger:hover { background:rgba(210,30,65,0.45); border-color:#ff3264; color:#ff90b0; box-shadow:0 0 12px rgba(255,50,100,0.30); } /* WARNING — RESTART, irreversible actions */ .icon-btn.warning { color:#ffb060; border-color:rgba(230,120,30,0.55); background:rgba(160,70,0,0.28); } .icon-btn.warning:hover { background:rgba(200,90,0,0.40); border-color:#ff9944; color:#ffc880; } /* PAUSE — gold/amber */ .icon-btn.pause { color:#ffd040; border-color:rgba(240,190,20,0.55); background:rgba(150,110,0,0.28); } .icon-btn.pause:hover { background:rgba(190,145,0,0.42); border-color:#ffd040; color:#ffe880; } /* MENU nav button — subtle slate */ .icon-btn.menu-btn { color:#8aaace; border-color:rgba(100,150,200,0.35); background:rgba(50,80,140,0.18); } .icon-btn.menu-btn:hover { background:rgba(80,120,180,0.28); border-color:rgba(140,190,240,0.60); color:#b8d4f4; } .spd-label { font-size:.6rem; color:var(--text-dim); letter-spacing:2px; } .control-group { display:flex; align-items:center; gap:4px; } #game-timer { font-family:'Courier New',monospace; font-size:.95rem; font-weight:700; color:rgba(180,210,255,0.7); letter-spacing:3px; min-width:58px; text-align:center; } #game-msg { font-size:.65rem; color:var(--text-dim); letter-spacing:2px; } /* ── PAUSE OVERLAY ──────────────────────── */ #pause-overlay { position:absolute; top:var(--topbar-h); left:0; right:0; bottom:0; display:none; z-index:15; background:rgba(0,0,0,0.5); justify-content:center; align-items:center; font-size:3rem; font-weight:900; letter-spacing:10px; backdrop-filter:blur(3px); } /* ══════════════════════════════════════════ MENU OVERLAY ══════════════════════════════════════════ */ #ui-overlay { position:absolute; top:var(--topbar-h); left:0; right:0; bottom:0; display:flex; justify-content:center; align-items:center; z-index:50; background: radial-gradient(ellipse at 50% 40%, rgba(20,32,70,0.60) 0%, rgba(8,14,32,0.72) 100%); backdrop-filter:blur(0px); } /* ── MENU PANEL — şeffaf, havada ─────── */ #menu-panel { overflow:visible; display:flex; flex-direction:column; align-items:center; gap:16px; padding:20px 0 24px; background:transparent; border:none; box-shadow:none; } /* ── TITLE ────────────────────────────── */ #ui-title-block { text-align:center; } /* ── voronoy NEON PANEL ── */ #ui-title-panel { position: relative; display: inline-block; padding: 3px 8px 5px; background: linear-gradient(180deg, rgba(6,16,46,0.94) 0%, rgba(3,11,34,0.97) 55%, rgba(5,14,42,0.94) 100%); border: 1px solid rgba(0,212,255,0.32); border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,212,255,0.08), 0 0 18px rgba(0,212,255,0.20), inset 0 1px 0 rgba(0,212,255,0.22), inset 0 0 30px rgba(0,150,255,0.05); } #ui-title-panel::before { content:''; position:absolute; top:0; left:12%; right:12%; height:1px; background: linear-gradient(90deg, transparent, rgba(0,212,255,0.70), transparent); } #ui-title-panel::after { content:''; position:absolute; bottom:0; left:18%; right:18%; height:1px; background: linear-gradient(90deg, transparent, rgba(0,180,255,0.38), transparent); } #ui-title-inner { padding: 2px 20px 1px; border-top: 1px solid rgba(0,212,255,0.14); border-bottom: 1px solid rgba(0,212,255,0.10); } #ui-title-svg { display: block; width: 480px; height: 64px; } /* ── 3-LAYER INLINE SLAB SERIF ── Base: thick dark stroke = slab body shadow Fill: gradient blue fill = letter color Inline: thin bright white stroke = the inline highlight line All use Alfa Slab One — heavy slab serif ── */ .vtitle-base { font-family: 'Alfa Slab One', serif; font-size: 58px; text-anchor: middle; dominant-baseline: auto; fill: none; stroke: rgba(0,30,80,0.95); stroke-width: 14px; stroke-linejoin: round; paint-order: stroke fill; } .vtitle-fill { font-family: 'Alfa Slab One', serif; font-size: 58px; text-anchor: middle; dominant-baseline: auto; fill: url(#vtitle-grad); stroke: rgba(0,80,160,0.75); stroke-width: 3px; paint-order: stroke fill; } .vtitle-inline { font-family: 'Alfa Slab One', serif; font-size: 58px; text-anchor: middle; dominant-baseline: auto; fill: none; /* Inline = very thin bright stroke sitting on top */ stroke: rgba(140,230,255,0.95); stroke-width: 1.2px; } /* SVG gradient for vtitle-fill — defined inline in the SVG defs */ #ui-subtitle { display:none; } /* ══════════════════════════════════════════ voronoy SVG WRAP ══════════════════════════════════════════ */ #voronoy-menu-wrap { width: min(720px, 90vw); aspect-ratio: 800 / 600; position:relative; overflow:visible; } #voronoy-menu { width:100%; height:100%; display:block; overflow:visible; } /* ══════════════════════════════════════════ POLYGON LAYER SYSTEM 1. .vpoly — base fill (dark-ish) 2. .vbright — edge-vivid color overlay (injected via JS) 3. .vdark — dark center vignette 4. .vshine — top-left specular highlight 5. .vglow — outer edge radial color (existing, reused) ══════════════════════════════════════════ */ .vpoly { fill: rgba(0,0,0,0); /* filled by vbright below */ stroke: none; transition: fill 0.20s; } .vborder { display:none; } /* Base solid fill — sits at bottom */ .vbase { stroke: none; transition: fill 0.20s; pointer-events: none; } /* Rounded border ring — uses #rcell-ring filter. Fill (not stroke) colored: the filter masks it to just the band between outer & inner rounded shapes. Corners follow the exact same rounding as the cell itself. */ .vring { stroke: none; pointer-events: none; opacity: 0.88; transition: opacity 0.20s; filter: url(#rcell-ring); } /* Dark center vignette */ .vdark { fill: url(#grad-darkcenter); pointer-events: none; } /* Top-left specular shine */ .vshine { fill: url(#grad-shine); pointer-events: none; opacity: 0.80; transition: opacity 0.20s; } /* Edge color glow */ .vglow { pointer-events: none; opacity: 0.65; transition: opacity 0.20s; } .vcell { cursor:pointer; filter:url(#rcell); transition: filter 0.20s; } .vcell:hover .vshine { opacity: 1.0; } .vcell:hover .vglow { opacity: 1.0; } .vcell:hover .vring { opacity: 1.0; } .vcell:active { opacity: 0.82; } .blank-cell { cursor:default; pointer-events:all; } /* ── SIZE CELLS — blue ── */ .size-cell .vbase { fill: rgba(18,48,148,0.88); } .size-cell .vring { fill: rgba(100,175,255,0.90); } .size-cell:hover .vbase { fill: rgba(26,62,175,0.92); } .size-cell:hover { filter: url(#rcell) drop-shadow(0 0 10px rgba(80,160,255,0.55)); } .size-cell.active .vbase { fill: rgba(0,105,50,0.88); } .size-cell.active .vring { fill: rgba(0,220,110,0.95); } .size-cell.active { filter: url(#rcell) drop-shadow(0 0 14px rgba(0,210,100,0.65)); } .size-cell.active .vt-main { fill:#00e87a !important; } .size-cell.active .vt-sub { fill:rgba(0,210,100,0.75) !important; } /* ── PLAYER CELL — green ── */ .player-cell .vbase { fill: rgba(0,100,45,0.88); } .player-cell .vring { fill: rgba(0,220,108,0.90); } .player-cell:hover .vbase { fill: rgba(0,120,55,0.92); } .player-cell:hover { filter: url(#rcell) drop-shadow(0 0 10px rgba(0,210,100,0.55)); } .player-cell .vt-main { fill: rgba(100,255,175,0.95); } .player-cell .vt-vs { fill: rgba(60,220,130,0.55); } /* ── NEUTRAL CELL — steel blue ── */ .neutral-cell .vbase { fill: rgba(22,55,180,0.88); } .neutral-cell .vring { fill: rgba(90,170,255,0.90); } .neutral-cell:hover .vbase { fill: rgba(30,68,205,0.92); } .neutral-cell:hover { filter: url(#rcell) drop-shadow(0 0 10px rgba(80,155,255,0.55)); } .neutral-cell .vt-main { fill: rgba(165,215,255,0.95); } .neutral-cell .vt-vs { fill: rgba(120,175,255,0.50); } /* ── BOT CELL — red ── */ .bot-cell .vbase { fill: rgba(135,14,38,0.88); } .bot-cell .vring { fill: rgba(240,55,95,0.90); } .bot-cell:hover .vbase { fill: rgba(160,18,48,0.92); } .bot-cell:hover { filter: url(#rcell) drop-shadow(0 0 10px rgba(230,45,85,0.55)); } .bot-cell .vt-main { fill: rgba(255,125,150,0.95); } .bot-cell .vt-vs { fill: rgba(255,80,110,0.50); } /* ── AUTH CELL — dark navy ── */ .google-cell .vbase { fill: rgba(10,30,90,0.88); } .google-cell .vring { fill: rgba(0,195,248,0.85); } .google-border { display:none; } .google-cell:hover .vbase { fill: rgba(14,40,112,0.92); } .google-cell:hover { filter: url(#rcell) drop-shadow(0 0 8px rgba(0,190,245,0.45)); } /* ── LEADERBOARD — gold ── */ .replay-cell .vbase { fill: rgba(88,62,0,0.88); } .replay-cell .vring { fill: rgba(225,178,0,0.90); } .replay-border { display:none; } .replay-cell:hover .vbase { fill: rgba(110,78,0,0.92); } .replay-cell:hover { filter: url(#rcell) drop-shadow(0 0 10px rgba(220,175,0,0.55)); } .replay-cell .vt-main { fill: rgba(255,222,80,0.95); } .replay-cell .vt-sub { fill: rgba(240,195,55,0.65); } /* ── FFA CELL — orange ── */ .ffa-cell .vbase { fill: rgba(120,48,0,0.88); } .ffa-cell .vring { fill: rgba(248,132,0,0.90); } .ffa-cell:hover .vbase { fill: rgba(145,58,0,0.92); } .ffa-cell:hover { filter: url(#rcell) drop-shadow(0 0 10px rgba(240,120,0,0.55)); } .ffa-cell .vt-main { fill: rgba(255,178,62,0.95); } .ffa-cell .vt-vs { fill: rgba(255,130,25,0.55); } /* ── TEAM CELL — steel blue ── */ .team-cell .vbase { fill: rgba(0,55,112,0.88); } .team-cell .vring { fill: rgba(50,165,245,0.90); } .team-cell:hover .vbase { fill: rgba(0,70,138,0.92); } .team-cell:hover { filter: url(#rcell) drop-shadow(0 0 10px rgba(40,162,240,0.55)); } .team-cell .vt-main { fill: rgba(122,205,255,0.95); } .team-cell .vt-vs { fill: rgba(90,165,255,0.50); } .team-cell .vt-sub { fill: rgba(90,165,255,0.55); } /* ── BLANK ── */ .blank-cell .vbase { fill: rgba(8,14,36,0.60); } .blank-cell .vring { fill: rgba(60,90,180,0.08); } .blank-cell:hover .vbase { fill: rgba(12,20,48,0.70); } .blank-border { display:none; } /* ══════════════════════════════════════════ SVG TEXT ══════════════════════════════════════════ */ .vt-main { font-family: 'Rajdhani', var(--font); font-size:27px; font-weight:700; fill:rgba(220,235,255,0.95); text-anchor:middle; dominant-baseline:middle; letter-spacing:3px; pointer-events:none; transition:fill 0.18s; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.8)); } .vt-sub { font-family: 'Rajdhani', var(--font); font-size:14px; font-weight:600; fill:rgba(160,200,255,0.65); text-anchor:middle; dominant-baseline:middle; letter-spacing:3px; pointer-events:none; } .vt-vs { font-family: 'Rajdhani', var(--font); font-size:15px; font-weight:600; fill:rgba(160,190,255,0.50); text-anchor:middle; dominant-baseline:middle; letter-spacing:5px; pointer-events:none; } .size-cell:hover .vt-main { fill:#ffffff; } .size-cell:hover .vt-sub { fill:rgba(140,190,255,0.65); } /* ── METALLIC TEXT per cell ───────────────────────── Each cell's vt-main gets a 2-stop metallic gradient via SVG paint trick (filter + fill combo) We use paint-server fills defined inline per class ── */ /* Size cells — icy blue metal */ .size-cell .vt-main { fill: #ffffff; filter: drop-shadow(0 1px 0 rgba(0,80,180,0.9)) drop-shadow(0 -1px 0 rgba(200,240,255,0.6)); } .size-cell .vt-sub { fill: rgba(255,255,255,0.75); } /* Player cell — bright green metal */ .player-cell .vt-main { fill: rgba(130,255,185,0.95); filter: drop-shadow(0 1px 0 rgba(0,90,40,0.9)) drop-shadow(0 -1px 0 rgba(180,255,200,0.6)); } /* Neutral cell — steel blue */ .neutral-cell .vt-main { fill: rgba(175,220,255,0.95); filter: drop-shadow(0 1px 0 rgba(0,60,160,0.9)) drop-shadow(0 -1px 0 rgba(200,235,255,0.6)); } /* Bot cell — hot pink metal */ .bot-cell .vt-main { fill: rgba(255,145,165,0.95); filter: drop-shadow(0 1px 0 rgba(140,0,35,0.9)) drop-shadow(0 -1px 0 rgba(255,185,195,0.6)); } /* Leaderboard — gold metal */ .replay-cell .vt-main { fill: rgba(255,228,80,0.97); filter: drop-shadow(0 1px 0 rgba(120,80,0,0.9)) drop-shadow(0 -1px 0 rgba(255,240,150,0.8)); } /* FFA — orange metal */ .ffa-cell .vt-main { fill: rgba(255,185,65,0.97); filter: drop-shadow(0 1px 0 rgba(120,50,0,0.9)) drop-shadow(0 -1px 0 rgba(255,210,130,0.7)); } /* Team — cyan steel */ .team-cell .vt-main { fill: rgba(140,215,255,0.95); filter: drop-shadow(0 1px 0 rgba(0,55,130,0.9)) drop-shadow(0 -1px 0 rgba(190,235,255,0.6)); } /* Hover: all brighten */ .vcell:hover .vt-main { opacity: 1; } /* ── GLASS GLOSS HIGHLIGHT ─────────────────────────── Top ~45% of each cell gets a white→transparent sweep giving the glossy "glass button" look from the ref. The rect+clipPath approach handles irregular polygons. ── */ /* Gloss appears normally at rest, intensifies on hover */ .vcell .vgloss { pointer-events: none; opacity: 0.75; transition: opacity 0.20s; } .vcell:hover .vgloss { opacity: 1.0; } /* 1v1 label override — bigger and brighter than vt-sub */ .vt-1v1 { font-family: 'Rajdhani', var(--font); font-size: 18px !important; font-weight: 700; fill: rgba(175,220,255,0.88) !important; letter-spacing: 4px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)); } /* ── END CONTROLS ─────────────────────── */ #end-controls { display:none; } /* ── WARNING TEXT ─────────────────────── */ .warning-text { position:absolute; font-weight:bold; font-size:1rem; pointer-events:none; text-shadow:0 0 8px black; animation:fadeUp 1s forwards; z-index:60; text-align:center; transform:translateX(-50%); letter-spacing:2px; font-family:'Courier New',monospace; } .auto-text { font-size:.8rem; color:rgba(255,255,255,0.7); } @keyframes fadeUp { 0% { opacity:1; transform:translateX(-50%) translateY(0); } 100% { opacity:0; transform:translateX(-50%) translateY(-40px); } } /* ── DRAG HINT ────────────────────────── */ #drag-hint { position:absolute; display:none; pointer-events:none; z-index:65; width:22px; height:22px; margin-left:-11px; margin-top:-11px; border-radius:50%; border:2px solid rgba(0,232,122,0.85); box-shadow:0 0 10px rgba(0,232,122,0.5), inset 0 0 6px rgba(0,232,122,0.2); animation:pulse .7s ease-in-out infinite; } @keyframes pulse { 0%,100% { transform:scale(1); opacity:.8; } 50% { transform:scale(1.4); opacity:1; } } /* ── REPLAY BROWSER ──────────────────── */ #replay-browser-overlay { font-family:var(--font); } #replay-browser-panel { background:linear-gradient(145deg,rgba(22,34,70,0.98) 0%,rgba(14,22,48,0.99) 100%); border:1px solid rgba(0,212,255,0.20); border-radius:10px; width:min(1100px,95vw); max-height:88vh; display:flex; flex-direction:column; box-shadow:0 0 60px rgba(0,0,0,0.8),0 0 120px rgba(0,100,200,0.1); overflow:hidden; } #replay-list { overflow-y:auto; flex:1; padding:4px 0; scrollbar-width:thin; scrollbar-color:rgba(0,212,255,0.3) transparent; } .replay-row { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.05); transition:background 0.15s; border-radius:4px; } .replay-row:hover { background:rgba(0,212,255,0.08); } .replay-info { flex:1; display:flex; flex-wrap:wrap; gap:6px 14px; cursor:pointer; align-items:center; } .replay-mode { font-size:0.75rem; font-weight:900; letter-spacing:2px; min-width:36px; } .replay-title { font-size:0.8rem; color:rgba(200,220,255,0.85); flex:1; min-width:120px; } .replay-meta { font-size:0.7rem; color:rgba(160,190,255,0.4); font-family:'Courier New',monospace; letter-spacing:1px; } .replay-date { font-size:0.65rem; color:rgba(160,190,255,0.25); } .replay-del-btn { background:none; border:1px solid rgba(255,50,100,0.25); color:rgba(255,80,120,0.55); padding:3px 8px; cursor:pointer; font-size:0.8rem; border-radius:100px; transition:0.15s; } .replay-del-btn:hover { background:rgba(255,50,100,0.15); border-color:#ff3264; color:#ff3264; } /* Single-line BOT VS BOT — slightly smaller to fit cell width */ .vt-bvb { font-size: 19px !important; letter-spacing: 1px !important; } /* ── voronoy logo image ── */ #ui-title-block { text-align:center; } #ui-title-img { display: block; height: 72px; width: auto; margin: 0 auto; filter: drop-shadow(0 0 8px rgba(0,200,255,0.5)); } .shop-cell .vpoly{fill:rgba(50,28,0,0.97);}.shop-cell .vborder{stroke:rgba(212,165,20,0.72);}.shop-cell:hover .vpoly{fill:rgba(70,40,0,0.98);}.shop-cell:hover .vborder{stroke:rgba(255,210,40,0.95);opacity:1;}.shop-cell:hover{filter:drop-shadow(0 0 20px rgba(220,170,0,0.6));}.shop-cell .vt-main{fill:rgba(255,210,50,0.97)!important;}.shop-cell .vt-sub{fill:rgba(230,180,40,0.65);} /* ═══════════════════════════════════════════════════════════════════ MOBILE RESPONSIVE — width-based, no portrait lock Desktop (max-width > 768px): untouched, full experience Mobile (max-width ≤ 768px): compact layout, fits screen ═══════════════════════════════════════════════════════════════════ */ /* ── Mobile ≤ 768px ── */ @media screen and (max-width: 768px) { html, body { overflow: hidden !important; position: fixed !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } #game-wrapper { width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important; position: fixed !important; top: 0 !important; left: 0 !important; border: none !important; border-radius: 0 !important; overflow: hidden !important; } #arena-container { border-radius: 0 !important; border: none !important; } #ui-overlay { width: 100% !important; height: 100% !important; border-radius: 0 !important; } #menu-panel { width: 100% !important; height: 100% !important; border-radius: 0 !important; padding: 4px !important; } #ui-title-block { padding: 2px !important; } #ui-title-block img { max-width: 90px !important; max-height: 36px !important; } #voronoy-menu-wrap { width: min(720px, 96vw) !important; aspect-ratio: 800 / 600 !important; } /* ── Top bar compact ── */ #top-bar { padding: 2px 4px !important; height: auto !important; min-height: 28px !important; gap: 2px !important; } .icon-btn { font-size: 0.6rem !important; padding: 2px 8px !important; letter-spacing: 1px !important; } .menu-btn { font-size: 0.7rem !important; } /* ── Topbar logo (hidden on desktop, shown on mobile) ── */ #topbar-logo { display: inline-block !important; height: 20px !important; width: auto !important; flex-shrink: 0 !important; margin-right: 4px !important; filter: drop-shadow(0 0 4px rgba(0,200,255,0.4)); cursor: pointer; } #game-msg { font-size: 0.7rem !important; } #game-timer { font-size: 0.75rem !important; } .score-2p-wrap { gap: 4px !important; } .base-name { font-size: 0.65rem !important; } .role-badge { font-size: 0.65rem !important; padding: 2px 5px !important; } .player-name { font-size: 0.65rem !important; max-width: 70px !important; padding: 2px 6px !important; } .army-count { font-size: 0.7rem !important; } .prod-count { font-size: 0.55rem !important; } .boost-btn { font-size: 0.5rem !important; padding: 1px 4px !important; } #cell-hover-info { font-size: 0.7rem !important; } #hvb-topbar-info, #net-topbar-info, #bvb-topbar-info { font-size: 0.7rem !important; letter-spacing: 1px !important; margin-left: 4px !important; } /* ── Auth cell inputs ── */ #guest-name-input { font-size: 0.6rem !important; padding: 2px 4px !important; } #auth-username-display { font-size: 0.65rem !important; } #auth-elo-display, #auth-rank-display { font-size: 0.5rem !important; } /* ── Reduce background visibility ── */ #arena-container { background: #050a18 !important; } #menu-panel { background: rgba(5,10,24,0.96) !important; } #ui-overlay { background: rgba(5,10,24,0.92) !important; } /* ── Modals / overlays ── */ #premium-overlay > div, #account-overlay > div, #rules-modal, #replay-browser-overlay > div, #auth-modal { max-height: 85vh !important; padding: 12px 16px !important; overflow-y: auto !important; } #premium-overlay, #account-overlay, #replay-browser-overlay { backdrop-filter: blur(4px) !important; } #rules-modal { padding: 16px 20px !important; max-height: 88vh !important; } #rules-modal h2 { font-size: 1.1rem !important; margin-bottom: 14px !important; letter-spacing: 4px !important; } .rules-text { font-size: 0.78rem !important; } .rules-item { margin-bottom: 12px !important; padding-bottom: 12px !important; } #matchmaking-overlay h2 { font-size: 1.2rem !important; margin-bottom: 10px !important; } } /* ── Mobile portrait: handled at end of file (highest CSS priority) ── */ /* ── Very small screens ≤ 480px (foldable phones etc.) ── */ @media screen and (max-width: 480px) { #voronoy-menu-wrap { width: min(720px, 98vw) !important; } #top-bar { padding: 1px 2px !important; min-height: 22px !important; } .icon-btn { font-size: 0.5rem !important; padding: 1px 5px !important; } .base-name { font-size: 0.55rem !important; } .role-badge { font-size: 0.55rem !important; padding: 2px 4px !important; } .player-name { font-size: 0.55rem !important; max-width: 55px !important; padding: 2px 4px !important; border-width: 1px !important; } .army-count { font-size: 0.6rem !important; } .prod-count { font-size: 0.45rem !important; } #game-timer { font-size: 0.6rem !important; } #game-msg { font-size: 0.6rem !important; } #ui-title-block img { max-width: 60px !important; max-height: 24px !important; } } /* ═══════════════════════════════════════════════════════════════════ START PROMPT ═══════════════════════════════════════════════════════════════════ */ @keyframes startPromptPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.65; transform:scale(0.97); } } @keyframes searchPulse { 0%,100% { opacity:1; } 50% { opacity:0.45; } } #start-prompt { display: none; align-items: center; justify-content: center; } #start-prompt.visible { display: flex; } /* ═══════════════════════════════════════════════════════════════════ voronoy MENU CELL STATES ═══════════════════════════════════════════════════════════════════ */ /* ── voronoy Menu Cell States ── */ #voronoy-menu .cell { transition: filter 0.18s ease, opacity 0.18s ease; cursor: pointer; } #voronoy-menu .cell path:first-child { transition: filter 0.18s ease; } #voronoy-menu .cell:hover:not(.dimmed) { filter: brightness(1.25) saturate(1.18) !important; } #voronoy-menu .cell.selected { filter: brightness(1.5) saturate(1.30) drop-shadow(0 0 18px rgba(255,255,255,0.28)) !important; } #voronoy-menu .cell.highlighted { animation: vm-pulse 1.4s ease-in-out infinite alternate; } #voronoy-menu .cell.dimmed { opacity: 0.14 !important; filter: brightness(0.30) saturate(0.20) !important; pointer-events: none !important; cursor: default !important; } #cell_map_xl { pointer-events: none !important; cursor: default !important; } /* ── HvB Mode Overrides ── */ #hvb-mode-layer { pointer-events: none !important; } #voronoy-menu.hvb-mode #hvb-mode-layer { pointer-events: all !important; } #voronoy-menu.hvb-mode #cell_ffa > text, #voronoy-menu.hvb-mode #cell_ffa > image, #voronoy-menu.hvb-mode #cell_bvb > text, #voronoy-menu.hvb-mode #cell_bvb > image, #voronoy-menu.hvb-mode #cell_map_m > text, #voronoy-menu.hvb-mode #cell_map_m > image, #voronoy-menu.hvb-mode #cell_map_m > foreignObject, #voronoy-menu.hvb-mode #cell_settings > text, #voronoy-menu.hvb-mode #cell_settings > image, #voronoy-menu.hvb-mode #cell_team > text, #voronoy-menu.hvb-mode #cell_team > image, #voronoy-menu.hvb-mode #cell_map_s > text, #voronoy-menu.hvb-mode #cell_map_s > image, #voronoy-menu.hvb-mode #cell_premium > text, #voronoy-menu.hvb-mode #cell_premium > line, #voronoy-menu.hvb-mode #cell_ffa_mode > text, #voronoy-menu.hvb-mode #cell_ffa_mode > image, #voronoy-menu.hvb-mode .hvb-gear { display: none !important; } #voronoy-menu.hvb-mode #cell_map_l { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.hvb-mode #cell_map_l > text { display: none !important; } #voronoy-menu.hvb-mode #cell_market { pointer-events: none !important; } #voronoy-menu.hvb-mode #cell_market > text { display: none !important; } #voronoy-menu.hvb-mode #cell_premium { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.hvb-mode #cell_team { pointer-events: none !important; } #voronoy-menu.hvb-mode #cell_map_s { pointer-events: none !important; } #voronoy-menu.hvb-mode #cell_ffa_mode { pointer-events: none !important; } #voronoy-menu.hvb-mode #cell_hvb { pointer-events: none !important; cursor: default !important; } /* ── BvB mode ─────────────────────────────────────────── */ #bvb-mode-layer { pointer-events: none !important; } #voronoy-menu.bvb-mode #bvb-mode-layer { pointer-events: all !important; } /* hide original content in cells that get new bvb overlay text */ #voronoy-menu.bvb-mode #cell_hvb > text, #voronoy-menu.bvb-mode #cell_hvb > image, #voronoy-menu.bvb-mode #cell_ffa > text, #voronoy-menu.bvb-mode #cell_ffa > image, #voronoy-menu.bvb-mode #cell_map_m > text, #voronoy-menu.bvb-mode #cell_map_m > image, #voronoy-menu.bvb-mode #cell_map_m > foreignObject, #voronoy-menu.bvb-mode #cell_ffa_mode > text, #voronoy-menu.bvb-mode #cell_ffa_mode > image, #voronoy-menu.bvb-mode #cell_map_s > text, #voronoy-menu.bvb-mode #cell_map_s > image, #voronoy-menu.bvb-mode #cell_settings > text, #voronoy-menu.bvb-mode #cell_settings > image, #voronoy-menu.bvb-mode #cell_settings > path.hvb-gear, #voronoy-menu.bvb-mode #cell_team > text, #voronoy-menu.bvb-mode #cell_team > image, #voronoy-menu.bvb-mode #cell_premium > text { display: none !important; } #voronoy-menu.bvb-mode #cell_premium > line { display: none !important; } #voronoy-menu.bvb-mode #cell_market > text { display: none !important; } /* active cells in bvb-mode */ #voronoy-menu.bvb-mode #cell_map_l { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.bvb-mode #cell_map_l > text { display: none !important; } #voronoy-menu.bvb-mode #cell_market { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.bvb-mode #cell_map_xl { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.bvb-mode #cell_premium { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.bvb-mode #cell_ffa_mode { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.bvb-mode #cell_map_s { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.bvb-mode #cell_settings { pointer-events: all !important; cursor: pointer !important; } /* inactive cells */ #voronoy-menu.bvb-mode #cell_bvb { pointer-events: none !important; } #voronoy-menu.bvb-mode #cell_hvb { pointer-events: none !important; } #voronoy-menu.bvb-mode #cell_ffa { pointer-events: none !important; } #voronoy-menu.bvb-mode #cell_map_m { pointer-events: none !important; } #voronoy-menu.bvb-mode #cell_team { pointer-events: none !important; } /* ── Net (1v1) mode ───────────────────────────────────── */ #net-mode-layer { pointer-events: none !important; } #voronoy-menu.net-mode #net-mode-layer { pointer-events: all !important; } #voronoy-menu.net-mode #cell_ffa_mode > text, #voronoy-menu.net-mode #cell_ffa_mode > image, #voronoy-menu.net-mode #cell_map_s > text, #voronoy-menu.net-mode #cell_map_s > image, #voronoy-menu.net-mode #cell_settings > text, #voronoy-menu.net-mode #cell_settings > image, #voronoy-menu.net-mode #cell_settings > path.hvb-gear, #voronoy-menu.net-mode #cell_hvb > text, #voronoy-menu.net-mode #cell_hvb > image, #voronoy-menu.net-mode #cell_bvb > text, #voronoy-menu.net-mode #cell_bvb > image, #voronoy-menu.net-mode #cell_map_m > text, #voronoy-menu.net-mode #cell_map_m > image, #voronoy-menu.net-mode #cell_map_m > foreignObject, #voronoy-menu.net-mode #cell_team > text, #voronoy-menu.net-mode #cell_team > image, #voronoy-menu.net-mode #cell_premium > text { display: none !important; } #voronoy-menu.net-mode #cell_premium > line { display: none !important; } #voronoy-menu.net-mode #cell_map_l { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.net-mode #cell_map_l > text { display: none !important; } #voronoy-menu.net-mode #cell_premium { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.net-mode #cell_ffa_mode { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.net-mode #cell_map_s { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.net-mode #cell_settings { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.net-mode #cell_ffa { pointer-events: none !important; } #voronoy-menu.net-mode #cell_hvb { pointer-events: none !important; } #voronoy-menu.net-mode #cell_bvb { pointer-events: none !important; } #voronoy-menu.net-mode #cell_map_m { pointer-events: none !important; } #voronoy-menu.net-mode #cell_team { pointer-events: none !important; } #voronoy-menu.net-mode #cell_market { pointer-events: none !important; } #voronoy-menu.net-mode #cell_market > text { display: none !important; } #voronoy-menu.net-mode #cell_map_xl { pointer-events: none !important; } @keyframes vm-pulse { from { filter: brightness(1.28) saturate(1.18); } to { filter: brightness(1.55) saturate(1.40) drop-shadow(0 0 14px rgba(255,255,255,0.22)); } } /* ── Team mode ───────────────────────────────────────────── */ #team-mode-layer { pointer-events: none !important; } #voronoy-menu.team-mode #team-mode-layer { pointer-events: all !important; } #voronoy-menu.team-mode #cell_hvb > text, #voronoy-menu.team-mode #cell_hvb > image, #voronoy-menu.team-mode #cell_ffa > text, #voronoy-menu.team-mode #cell_ffa > image, #voronoy-menu.team-mode #cell_bvb > text, #voronoy-menu.team-mode #cell_bvb > image, #voronoy-menu.team-mode #cell_map_m > text, #voronoy-menu.team-mode #cell_map_m > image, #voronoy-menu.team-mode #cell_map_m > foreignObject, #voronoy-menu.team-mode #cell_ffa_mode > text, #voronoy-menu.team-mode #cell_ffa_mode > image, #voronoy-menu.team-mode #cell_map_s > text, #voronoy-menu.team-mode #cell_map_s > image, #voronoy-menu.team-mode #cell_settings > text, #voronoy-menu.team-mode #cell_settings > image, #voronoy-menu.team-mode #cell_settings > path.hvb-gear, #voronoy-menu.team-mode #cell_premium > text { display: none !important; } #voronoy-menu.team-mode #cell_premium > line { display: none !important; } #voronoy-menu.team-mode #cell_map_l { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.team-mode #cell_map_l > text { display: none !important; } #voronoy-menu.team-mode #cell_premium { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.team-mode #cell_hvb { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.team-mode #cell_ffa { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.team-mode #cell_bvb { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.team-mode #cell_map_m { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.team-mode #cell_ffa_mode { pointer-events: none !important; } #voronoy-menu.team-mode #cell_map_s { pointer-events: none !important; } #voronoy-menu.team-mode #cell_settings { pointer-events: none !important; } #voronoy-menu.team-mode #cell_market { pointer-events: none !important; } #voronoy-menu.team-mode #cell_market > text { display: none !important; } #voronoy-menu.team-mode #cell_map_xl { pointer-events: none !important; } #voronoy-menu.team-mode #cell_team { pointer-events: none !important; cursor: default !important; } /* ── FFA mode ────────────────────────────────────────────── */ #ffa-mode-layer { pointer-events: none !important; } #voronoy-menu.ffa-mode #ffa-mode-layer { pointer-events: all !important; } #voronoy-menu.ffa-mode #cell_hvb > text, #voronoy-menu.ffa-mode #cell_hvb > image, #voronoy-menu.ffa-mode #cell_ffa > text, #voronoy-menu.ffa-mode #cell_ffa > image, #voronoy-menu.ffa-mode #cell_bvb > text, #voronoy-menu.ffa-mode #cell_bvb > image, #voronoy-menu.ffa-mode #cell_map_m > text, #voronoy-menu.ffa-mode #cell_map_m > image, #voronoy-menu.ffa-mode #cell_map_m > foreignObject, #voronoy-menu.ffa-mode #cell_team > text, #voronoy-menu.ffa-mode #cell_team > image, #voronoy-menu.ffa-mode #cell_map_s > text, #voronoy-menu.ffa-mode #cell_map_s > image, #voronoy-menu.ffa-mode #cell_settings > text, #voronoy-menu.ffa-mode #cell_settings > image, #voronoy-menu.ffa-mode #cell_settings > path.hvb-gear, #voronoy-menu.ffa-mode #cell_premium > text { display: none !important; } #voronoy-menu.ffa-mode #cell_premium > line { display: none !important; } #voronoy-menu.ffa-mode #cell_map_l { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.ffa-mode #cell_map_l > text { display: none !important; } #voronoy-menu.ffa-mode #cell_premium { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.ffa-mode #cell_ffa { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.ffa-mode #cell_bvb { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.ffa-mode #cell_map_m { pointer-events: all !important; cursor: pointer !important; } #voronoy-menu.ffa-mode #cell_hvb { pointer-events: none !important; } #voronoy-menu.ffa-mode #cell_team { pointer-events: none !important; } #voronoy-menu.ffa-mode #cell_map_s { pointer-events: none !important; } #voronoy-menu.ffa-mode #cell_settings { pointer-events: none !important; } #voronoy-menu.ffa-mode #cell_market { pointer-events: none !important; } #voronoy-menu.ffa-mode #cell_market > text { display: none !important; } #voronoy-menu.ffa-mode #cell_map_xl { pointer-events: none !important; } #voronoy-menu.ffa-mode #cell_ffa_mode { pointer-events: none !important; cursor: default !important; } /* ═══════════════════════════════════════════════════════════════════ RULES MODAL & NOT READY TOAST ═══════════════════════════════════════════════════════════════════ */ /* ── RULES MODAL ── */ #rules-modal-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,5,20,0.82); backdrop-filter: blur(6px); align-items: center; justify-content: center; } #rules-modal-overlay.visible { display: flex; } #rules-modal { background: linear-gradient(160deg, rgba(0,15,50,0.97) 0%, rgba(5,10,35,0.99) 100%); border: 1.5px solid rgba(0,212,255,0.35); border-radius: 14px; box-shadow: 0 0 40px rgba(0,180,255,0.18), 0 0 80px rgba(0,100,200,0.10); padding: 36px 40px 32px 40px; max-width: 840px; width: 90vw; max-height: 85vh; overflow-y: auto; position: relative; font-family: 'Rajdhani','Segoe UI',sans-serif; } #rules-modal::-webkit-scrollbar { width: 4px; } #rules-modal::-webkit-scrollbar-track { background: transparent; } #rules-modal::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.3); border-radius: 4px; } #rules-modal-close { position: absolute; top: 14px; right: 18px; background: none; border: none; color: rgba(0,212,255,0.6); font-size: 1.4rem; cursor: pointer; line-height: 1; transition: color 0.2s; } #rules-modal-close:hover { color: #fff; } #rules-modal h2 { color: #00d4ff; font-size: 1.6rem; letter-spacing: 8px; margin: 0 0 28px 0; text-align: center; text-shadow: 0 0 18px rgba(0,212,255,0.5); } .rules-item { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(0,212,255,0.08); } .rules-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .rules-num { flex-shrink: 0; width: 30px; height: 30px; border: 1.5px solid rgba(0,212,255,0.45); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 900; color: #00d4ff; letter-spacing: 0; text-shadow: 0 0 8px rgba(0,212,255,0.5); margin-top: 1px; } .rules-text { color: rgba(200,225,255,0.88); font-size: 0.92rem; font-weight: 600; line-height: 1.55; letter-spacing: 0.3px; } .rules-text strong { color: #ffd700; font-weight: 900; } .rules-text .highlight { color: #00ff88; font-weight: 900; } /* ── NOT READY TOAST ── */ #not-ready-toast { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.85); z-index: 10000; background: rgba(0,10,30,0.95); border: 1.5px solid rgba(255,175,50,0.55); border-radius: 10px; padding: 18px 40px; color: #ffa830; font-family: 'Rajdhani','Segoe UI',sans-serif; font-size: 1.1rem; font-weight: 900; letter-spacing: 4px; box-shadow: 0 0 30px rgba(255,150,20,0.22); opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; } #not-ready-toast.show { display: block; opacity: 1; transform: translate(-50%, -50%) scale(1); } /* ═══════════════════════════════════════════════════════════════════ NON-BLOCKING 1V1 SEARCH — INLINE TOPBAR ═══════════════════════════════════════════════════════════════════ */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #net-search-indicator { display: none; align-items: center; gap: 6px; margin-left: 8px; font-family: 'Courier New', monospace; white-space: nowrap; animation: none; } #net-search-indicator .icon-btn.danger { font-size: 0.55rem; padding: 2px 8px; letter-spacing: 1px; margin-left: 4px; } /* ── Mobile responsive ── */ @media screen and (max-width: 768px) { #net-search-indicator { gap: 4px !important; margin-left: 4px !important; } #fsb-text { font-size: 0.6rem !important; letter-spacing: 1px !important; } #fsb-timer { font-size: 0.5rem !important; } #fsb-spinner { width: 10px !important; height: 10px !important; } #net-search-indicator .icon-btn.danger { font-size: 0.45rem !important; padding: 1px 6px !important; } } /* ═══════════════════════════════════════════════════════════════════ MOBILE PORTRAIT — rotate entire arena-container as one unit Topbar + menu + canvas + background parcels all rotate together. Applied ONLY during menu state via body.portrait-menu class. Rotation math: Element is 100vh wide (long) x 100vw tall (short). CSS rotate(90deg) CW maps (x,y) → (-y, x). After translateX(100vw): (-y + 100vw, x). Corners → (0,0), (100vw,0), (100vw,100vh), (0,100vh) ✓ fills screen ═══════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) and (orientation: portrait) { /* Hide big title logo — it's now in the topbar */ #ui-title-block { display: none !important; } /* Rotate game-wrapper (contains canvas + topbar + menu overlay): width=100vh (long edge), height=100vw (short edge) translateX(100vw) shifts the rotated element so it fills the screen */ #game-wrapper { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vh !important; height: 100vw !important; max-width: none !important; max-height: none !important; transform: translateX(100vw) rotate(90deg) !important; transform-origin: top left !important; overflow: visible !important; border-radius: 0 !important; border: none !important; } /* Make arena-container fill the rotated game-wrapper */ #arena-container { width: 100% !important; height: 100% !important; position: relative !important; overflow: hidden !important; } /* Voronoi logo inside topbar */ #topbar-logo { display: inline-block !important; height: 20px !important; width: auto !important; flex-shrink: 0 !important; margin-right: 6px !important; filter: drop-shadow(0 0 5px rgba(0,200,255,0.45)); cursor: pointer; } /* Compact topbar within rotated container */ #top-bar { min-height: 30px !important; padding: 2px 8px !important; z-index: 60 !important; } /* Transparent overlay so canvas arena shows behind menu */ #ui-overlay { background: transparent !important; backdrop-filter: none !important; } #menu-panel { background: transparent !important; overflow: visible !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } /* Menu SVG: 800/600 aspect ratio, fills available space */ #voronoy-menu-wrap { width: 90% !important; max-width: 820px !important; height: auto !important; max-height: 86% !important; aspect-ratio: 800 / 600 !important; transform: none !important; overflow: visible !important; } }