/* ============================================================================
 * Squeak & Destroy — HTML MENU system (DOM overlay over the game canvas).
 * A real, professional design system: consistent spacing scale, one source of
 * truth for colors/radii, reusable components. The CANVAS stays for gameplay;
 * only the MENUS live here.
 * ==========================================================================*/
:root{
  /* palette (dark, spooky-cute) */
  /* lighter, warmer dark theme (user: világosabb menü, mint a landing) */
  --bg-0:#1e2530; --bg-1:#283242; --bg-2:#323d50;
  --panel:rgba(46,58,76,0.72); --panel-2:rgba(34,44,60,0.58);
  --border:rgba(255,255,255,0.10); --border-2:rgba(255,255,255,0.16);
  --ink:#f3ead6; --ink-dim:#9fb3c6; --ink-soft:#c7d6e4;
  --accent:#a06cff; --accent-2:#7c4dff;       /* purple */
  --green:#4caf6e; --green-2:#3c8f59;
  --orange:#E8711A; --orange-2:#ff8a36;       /* brand orange */
  --blue:#3f86c4; --blue-2:#356fa6;
  --red:#d9534f; --red-2:#b8413e;
  --gold:#e0a93f; --gold-2:#c9952f;
  --shadow:0 10px 30px rgba(0,0,0,0.45);
  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  /* radii */
  --r1:8px; --r2:12px; --r3:18px; --r-pill:999px;
  --font:'Baloo 2','Segoe UI',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* Kill any unwanted HORIZONTAL page scroll on mobile. Vertical scrolling for
   long menus is intentional and stays untouched. Scoped to when the menu
   overlay is active so it never affects the in-game canvas layout. */
html:has(#menu-root.show), body:has(#menu-root.show){ overflow-x:hidden; max-width:100%; }

/* ---- root overlay ---- */
#menu-root{
  position:fixed; inset:0; z-index:30; max-width:100vw;
  font-family:var(--font); color:var(--ink);
  display:none;                      /* shown when CA.state.mode===MENU */
  background:
    radial-gradient(1200px 700px at 70% -10%, #36465f 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 110%, #2a3650 0%, transparent 55%),
    linear-gradient(160deg,#222b3a 0%,#1b2330 100%);
  overflow:hidden; -webkit-tap-highlight-color:transparent;
}
#menu-root.show{ display:block; }
/* floating ambient bubbles */
#menu-root::before, #menu-root::after{
  content:''; position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 40% 35%, rgba(255,255,255,0.05), transparent 70%);
}
#menu-root::before{ width:420px; height:420px; top:-120px; right:-80px; }
#menu-root::after{ width:520px; height:520px; bottom:-180px; left:-120px; }

/* ---- screens ---- */
.screen{
  position:absolute; inset:0; display:none;
  flex-direction:column; align-items:center;
  padding:max(env(safe-area-inset-top),var(--s4)) var(--s4) var(--s4);
  overflow-x:hidden;                 /* clip any sideways content leak */
  opacity:0; transform:translateY(8px); transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.screen.active{ display:flex; opacity:1; transform:none; }
.screen-scroll{ width:100%; max-width:880px; margin:0 auto; overflow-y:auto; overflow-x:hidden; flex:1;
  display:flex; flex-direction:column; gap:var(--s4); padding-bottom:var(--s6);
  scrollbar-width:thin; scrollbar-color:var(--accent) transparent; }
.screen-scroll::-webkit-scrollbar{ width:8px; }
.screen-scroll::-webkit-scrollbar-thumb{ background:var(--accent-2); border-radius:var(--r-pill); }
/* HUB tab-bar: ALWAYS-visible horizontal scrollbar so players know it drags right (Jani) */
.hub-tabs{ scrollbar-width:thin; scrollbar-color:var(--orange,#E8711A) rgba(255,255,255,.10); }
.hub-tabs::-webkit-scrollbar{ height:7px; -webkit-appearance:none; }
.hub-tabs::-webkit-scrollbar-track{ background:rgba(255,255,255,.10); border-radius:6px; }
.hub-tabs::-webkit-scrollbar-thumb{ background:var(--orange,#E8711A); border-radius:6px; min-width:40px; }
/* ◀ ▶ scroll arrows flanking the tab strip so the scroll is obvious */
.hub-tabs-wrap{ display:flex; align-items:stretch; gap:4px; width:100%; max-width:920px; margin:0 auto; }
.hub-arrow{ flex:0 0 auto; align-self:center; width:34px; height:34px; border:none; cursor:pointer;
  border-radius:50%; background:var(--orange,#E8711A); color:#fff;
  font-size:16px; line-height:1; font-weight:800; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.35); transition:opacity .18s ease, transform .12s ease, filter .15s; }
/* hover only on real pointers — avoids sticky :hover after a tap on touch */
@media (hover:hover){ .hub-arrow:hover{ filter:brightness(1.08); transform:scale(1.06); } }
.hub-arrow:active{ transform:scale(.9); }
/* disabled end: fade out cleanly instead of a washed-out brown ghost (Jani: "bénácska") */
.hub-arrow.off{ opacity:0; pointer-events:none; transform:scale(.85); }

/* ---- header (title + back) ---- */
.screen-head{ width:100%; max-width:880px; margin:0 auto var(--s4);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s3); }
.screen-title{ grid-column:2; font-size:clamp(20px,3.6vw,30px); font-weight:800; letter-spacing:.3px;
  display:flex; align-items:center; gap:var(--s2); white-space:nowrap; }
.btn-back{ grid-column:1; justify-self:start; }

/* ---- buttons ---- */
.btn{ -webkit-appearance:none; appearance:none; border:none; cursor:pointer;
  font-family:var(--font); font-weight:700; color:#fff; font-size:16px;
  padding:12px 20px; border-radius:var(--r2); display:inline-flex; align-items:center;
  justify-content:center; gap:var(--s2); line-height:1; user-select:none;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 45%), var(--blue);
  box-shadow:0 2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .08s var(--ease), filter .15s var(--ease), box-shadow .15s; }
@media (hover:hover){ .btn:hover{ filter:brightness(1.08); } }
.btn:active{ transform:translateY(1px); box-shadow:0 1px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.btn--green{ background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 45%), var(--green); }
.btn--purple{ background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 45%), var(--accent-2); }
.btn--red{ background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 45%), var(--red); }
.btn--gold{ background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 45%), var(--gold); color:#3a2a08; }
.btn--ghost{ background:var(--panel); border:1px solid var(--border); box-shadow:none; color:var(--ink); }
@media (hover:hover){ .btn--ghost:hover{ background:var(--bg-2); } }
.btn--lg{ font-size:19px; padding:16px 26px; }
.btn--block{ width:100%; }
.btn--sm{ font-size:14px; padding:9px 14px; border-radius:var(--r1); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; filter:grayscale(.3); }

/* ---- panels & cards ---- */
.panel{ width:100%; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--r3); box-shadow:var(--shadow); backdrop-filter:blur(6px);
  padding:var(--s5); }
.card{ background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r2); padding:var(--s4); }
.section{ display:flex; flex-direction:column; gap:var(--s3); }
.section > h3{ font-size:13px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--ink-dim); margin:0; }
.muted{ color:var(--ink-dim); font-size:13px; }
.row{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.row--between{ justify-content:space-between; }
.spacer{ flex:1; }

/* ---- option chips / pills (selectable) ---- */
.chips{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.chip{ -webkit-appearance:none; appearance:none; cursor:pointer; font-family:var(--font);
  font-weight:600; font-size:14px; color:var(--ink-soft); border:1px solid var(--border);
  background:rgba(255,255,255,.05); padding:9px 14px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; gap:6px; transition:all .12s var(--ease); white-space:nowrap; }
@media (hover:hover){ .chip:hover{ background:rgba(255,255,255,.10); } }
.chip.sel{ background:var(--accent-2); border-color:transparent; color:#fff; box-shadow:0 2px 10px rgba(124,77,255,.35); }
.chip.locked{ opacity:.4; cursor:not-allowed; }
.chip--grid{ border-radius:var(--r1); }

/* grid of options (maps/modes) */
.opt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:var(--s2); }
.opt-grid .chip{ justify-content:center; border-radius:var(--r1); }

/* ---- form fields ---- */
.field{ display:flex; flex-direction:column; gap:6px; }
.field > label{ font-size:13px; font-weight:700; color:var(--ink-soft); }
.input{ font-family:var(--font); font-size:16px; color:var(--ink); background:rgba(0,0,0,.30);
  border:1px solid var(--border); border-radius:var(--r1); padding:12px 14px; outline:none; width:100%;
  transition:border-color .15s, box-shadow .15s; }
.input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(160,108,255,.20); }
.input::placeholder{ color:var(--ink-dim); }

/* toggle switch — game-style pill control (chunky track + satisfying knob) */
.switch{ display:inline-flex; align-items:center; gap:var(--s2); cursor:pointer; user-select:none;
  min-height:44px; }                       /* keep a ≥44px touch target */
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch .track{ width:58px; height:32px; border-radius:var(--r-pill); flex:none; position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18)),
    var(--bg-1);
  border:1px solid var(--border-2);
  /* recessed OFF look: inner shadow carves the channel */
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.05);
  transition:background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.switch .track::after{ content:''; position:absolute; top:3px; left:3px; width:24px; height:24px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffffff, #d7dde6 70%, #c3cbd6);
  box-shadow:0 2px 4px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.12), inset 0 1px 1px rgba(255,255,255,.9);
  transition:transform .22s var(--ease), background .2s var(--ease); }
/* ON state: brand orange, lit-up channel with glow + inset depth */
.switch input:checked + .track{
  background:linear-gradient(180deg, var(--orange-2), var(--orange));
  border-color:rgba(232,113,26,.85);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.35), inset 0 0 8px rgba(255,170,90,.5),
    0 0 0 1px rgba(232,113,26,.35), 0 0 14px rgba(232,113,26,.45); }
.switch input:checked + .track::after{ transform:translateX(26px);
  background:radial-gradient(circle at 35% 30%, #fff8f0, #ffe2c4 75%, #ffd2a3); }
/* keyboard accessibility: visible focus ring on the track */
.switch input:focus-visible + .track{ outline:2px solid var(--orange-2); outline-offset:2px; }
.switch:active .track::after{ width:27px; }   /* tactile squish on press */

/* range slider — recessed channel + chunky on-brand knob to match the toggle */
.range{ -webkit-appearance:none; appearance:none; width:100%; height:10px; border-radius:var(--r-pill);
  background:var(--bg-1); border:1px solid var(--border-2);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.05);
  outline:none; cursor:pointer; }
.range::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffffff, #d7dde6 70%, #c3cbd6);
  box-shadow:0 2px 4px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.9), 0 0 10px rgba(232,113,26,.4);
  cursor:pointer; border:2px solid var(--orange); transition:transform .12s var(--ease); }
.range::-webkit-slider-thumb:active{ transform:scale(1.12); }
.range::-moz-range-thumb{ width:24px; height:24px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffffff, #d7dde6 70%, #c3cbd6);
  box-shadow:0 2px 4px rgba(0,0,0,.5), 0 0 10px rgba(232,113,26,.4); border:2px solid var(--orange); }
.range:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--orange-2); outline-offset:2px; }
.range-row{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--s3); }
.range-val{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--gold); min-width:42px; text-align:right; }

/* segmented control (e.g. difficulty) — recessed group, lit-up selected pill */
.seg{ display:inline-flex; background:var(--bg-1); border:1px solid var(--border-2); border-radius:var(--r1);
  padding:3px; gap:3px; box-shadow:inset 0 2px 5px rgba(0,0,0,.5); }
.seg button{ -webkit-appearance:none; appearance:none; border:none; background:transparent; cursor:pointer;
  font-family:var(--font); font-weight:700; font-size:14px; color:var(--ink-soft);
  padding:8px 14px; min-height:38px; border-radius:7px; transition:all .14s var(--ease); }
@media (hover:hover){ .seg button:hover:not(.sel){ color:var(--ink); background:rgba(255,255,255,.06); } }
.seg button.sel{ background:linear-gradient(180deg, var(--orange-2), var(--orange)); color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25), 0 0 10px rgba(232,113,26,.4);
  text-shadow:0 1px 1px rgba(0,0,0,.3); }
.seg button:focus-visible{ outline:2px solid var(--orange-2); outline-offset:2px; }

/* ---- main menu specific ---- */
.home{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--s6); width:100%; max-width:1040px;
  margin:auto; align-items:center; height:100%; padding:var(--s4); }
.home-brand{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s2); }
.home-brand img{ width:min(64vw,460px); height:auto; filter:drop-shadow(0 12px 24px rgba(0,0,0,.45));
  animation:float 4s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
/* honour OS "reduce motion" — stop the bobbing brand logo */
@media (prefers-reduced-motion:reduce){ .home-brand img{ animation:none; } }
.home-title{ font-size:clamp(28px,5vw,52px); font-weight:800; line-height:1;
  background:linear-gradient(90deg,#ffd76a,#ff9bb3,#8fd0ff); -webkit-background-clip:text;
  background-clip:text; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.5); }
.home-tagline{ color:var(--ink-dim); font-size:clamp(13px,2vw,17px); font-weight:600; }
.home-slogan{ color:var(--orange,#E8711A); font-size:clamp(13px,2vw,18px); font-weight:800; letter-spacing:.3px; }
.home-menu{ display:flex; flex-direction:column; gap:var(--s3); width:100%; max-width:380px; }
.home-menu .btn{ justify-content:center; }
.home-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.home-foot{ position:absolute; bottom:var(--s3); left:0; right:0; text-align:center; color:var(--ink-dim); font-size:12px; }
.home-foot .ver{ position:absolute; right:var(--s4); bottom:0; opacity:.7; }

/* ---- mobile / landscape phone ---- */
@media (max-width:820px), (max-height:560px){
  /* leave room at the bottom so the absolute footer never covers the last
     buttons, and honour the iOS home-indicator safe area. */
  /* fill the column & scroll INTERNALLY; the footer below (made static) then sits
     under the scroll area instead of floating over the last buttons. flex:1 +
     min-height:0 is required for a flex child to become its own scroll container. */
  /* drop the desktop height:100% — with flex:1 the flex column sizes the home to
     the leftover space ABOVE the static footer. Keeping height:100% would force
     the home to a full viewport and shove the footer off-screen (cut-off). */
  /* portrait phone: lay out naturally (no internal scroll container — that caused
     a stray scrollbar even when it fit). The SCREEN scrolls only if content truly
     overflows; the footer (margin-top:auto) pins to the viewport bottom otherwise. */
  .screen{ overflow-y:auto; justify-content:flex-start; }
  .home{ display:flex; flex-direction:column; align-items:center;
    grid-template-columns:none; gap:var(--s3); width:100%; max-width:560px;
    height:auto; flex:0 0 auto; overflow:visible;
    padding:var(--s2) var(--s3); }
  .home-brand img{ width:min(40vh,260px); }
  .home-menu{ max-width:520px; margin:0 auto; gap:var(--s2); }
  /* slightly smaller big buttons so all of them fit a phone without scrolling */
  .btn--lg{ font-size:17px; padding:13px 22px; }
  /* keep the safe-area top padding so the ‹ Back button clears the notch /
     status-bar clock (the old rule dropped it, hiding & blocking Back). Applies
     in BOTH portrait (max-width:820px) and landscape phone (max-height:560px),
     since this combined query matches either. Also honour the left inset so a
     landscape notch never overlaps the Back button. */
  .screen{ padding:max(env(safe-area-inset-top),var(--s4))
                   max(env(safe-area-inset-right),var(--s3))
                   max(env(safe-area-inset-bottom),var(--s3))
                   max(env(safe-area-inset-left),var(--s3)); }
  /* generous Back tap target on phones (>=44px) even though it's a --sm button */
  .btn-back{ min-height:44px; min-width:44px; padding-top:11px; padding-bottom:11px; }
  /* the most-tapped New Game controls need >=44px touch targets on phones.
     Desktop sizes stay untouched — only bumped inside this touch query. */
  .chip{ min-height:44px; padding:11px 16px; }
  .seg button{ min-height:44px; }
  .panel{ padding:var(--s4); }
  /* footer: STATIC (in normal flow) at the bottom of the flex column, so it never
     floats over the menu buttons; respects the home-indicator safe area.
     margin-top:auto pins it to the very BOTTOM of the viewport even when the
     home content is short (so it never floats mid-screen). */
  .home-foot{ position:static; flex:none; width:100%; margin-top:auto;
    font-size:11px; line-height:1.35;
    padding:var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom)); }
  .home-foot .ver{ position:static; display:inline; right:auto; margin-left:6px; }
}

/* ---- SHORT landscape (phones turned sideways): the logo eats the whole
   viewport and only ~1 of 6 menu buttons shows. Shrink the brand, tighten the
   gaps, and go back to a 2-column grid (brand left, menu right) so the menu is
   visible without scrolling. Height-only query → never affects portrait phones
   or tablets in portrait. */
@media (max-height:560px){
  .home{ grid-template-columns:1.1fr 1fr; gap:var(--s3);
    padding:var(--s2) var(--s3); align-items:center;
    overflow-y:auto; min-height:0; }   /* short-landscape: allow scroll so no button is cut off */
  .home-brand{ gap:var(--s1); }
  .home-brand img{ max-height:min(34vh,150px); width:auto; }
  .home-menu{ gap:var(--s2); max-width:380px; margin:0; }
  .home-menu .btn{ padding:9px 16px; font-size:15px; }
  .home-menu .btn--lg{ font-size:16px; padding:11px 18px; }
}

/* ============================================================================
 * LEVEL EDITOR — hybrid DOM toolbar over the canvas paint preview.
 *
 * The editor screen is the ONE transparent DOM screen: the CANVAS draws the
 * background, title, Back button and the paint surface; only the toolbar panel
 * here is opaque + interactive. Everything else lets pointer events fall
 * through to the canvas so painting works outside the panel.
 * ==========================================================================*/
/* When the editor screen is active, make the whole overlay transparent + click
   through (so the canvas underneath shows & receives paint taps). */
#menu-root:has(.screen--editor.active){
  background:none; pointer-events:none;
}
#menu-root:has(.screen--editor.active)::before,
#menu-root:has(.screen--editor.active)::after{ display:none; }

.screen--editor{
  /* transparent; canvas shows through. The section never eats taps — only the
     toolbar panel (and the load modal) opt back in below. */
  background:none; pointer-events:none;
  display:none; padding:0;
  /* anchor the toolbar to the LEFT (desktop). align-items:flex-start keeps the
     panel from stretching full-height; justify-content:flex-start pins left. */
  flex-direction:row; align-items:flex-start; justify-content:flex-start;
}
.screen--editor.active{ display:flex; }

/* the toolbar column — the only interactive part of the overlay */
.ed-tools{
  pointer-events:auto;
  width:296px; max-width:42vw;
  margin:max(env(safe-area-inset-top),84px) 0 var(--s4) var(--s4);
  max-height:calc(100vh - 100px);
  overflow-y:auto; overflow-x:hidden;
  gap:var(--s4);
  scrollbar-width:thin; scrollbar-color:var(--accent) transparent;
}
.ed-tools::-webkit-scrollbar{ width:8px; }
.ed-tools::-webkit-scrollbar-thumb{ background:var(--accent-2); border-radius:var(--r-pill); }
.ed-tools .section{ gap:var(--s2); }
.ed-backrow{ margin-bottom:var(--s1); }
.ed-back{ align-self:flex-start; }

/* chip grids inside the editor: keep them compact + wrapping */
.ed-chips{ gap:6px; }
.ed-chips .chip{ padding:7px 10px; font-size:13px; }
/* segmented controls fill the width (Draw/Erase, Round/Square) */
.ed-seg{ display:flex; width:100%; }
.ed-seg button{ flex:1; min-height:36px; padding:8px 6px; }
/* brush value pill */
.ed-brushval{ font-variant-numeric:tabular-nums; font-weight:800; color:var(--accent); font-size:13px; }
.ed-range{ width:100%; }
/* extras: 3-column button grid */
.ed-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.ed-grid3 .btn{ padding:8px 4px; font-size:12px; min-height:38px; }
.ed-ex.ed-on{ /* toggled-on extra (mirror / grid) gets the accent fill */
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 45%), var(--blue);
  color:#fff; border-color:transparent; }
.ed-act{ flex:1; }
.ed-save{ margin-top:var(--s1); }

/* saved-maps modal (interactive — opts back into pointer events) */
.ed-modal{
  pointer-events:auto;
  position:fixed; inset:0; z-index:5;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,20,30,0.62); padding:var(--s4);
}
.ed-modal-card{ width:min(460px,92vw); max-height:80vh; overflow-y:auto; gap:var(--s3); }
.ed-loadlist{ gap:var(--s2); }
.ed-loadrow{ gap:var(--s2); }
.ed-loadname{ font-size:14px; }

/* ---- editor on phones / portrait: toolbar becomes a bottom sheet so it never
   hides the (canvas) paint preview, which sizes itself full-width there. ---- */
@media (max-width:720px){
  .screen--editor{ flex-direction:column; align-items:stretch; justify-content:flex-end; }
  .ed-tools{
    width:auto; max-width:none;
    margin:0; border-radius:var(--r3) var(--r3) 0 0;
    max-height:46vh;
    padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  }
  .ed-chips .chip{ font-size:13px; }
}

/* New Game lenyílók (Jani: gombtenger helyett dropdown a sok választáshoz) */
.ng-select{
  width:100%; box-sizing:border-box; appearance:none; -webkit-appearance:none;
  background:rgba(20,30,42,.7) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><path fill='%23cfe6f2' d='M7 10l5 5 5-5z'/></svg>") no-repeat right 12px center;
  color:var(--ink,#eaf2f8); border:2px solid rgba(255,255,255,.14); border-radius:12px;
  padding:12px 38px 12px 14px; font:600 16px var(--font); cursor:pointer; outline:none;
}
@media (hover:hover){ .ng-select:hover{ border-color:rgba(232,113,26,.5); } }
.ng-select:focus{ border-color:#E8711A; }
.ng-select option{ background:#16202c; color:#eaf2f8; }

/* New Game: pálya-előnézet + faj-leírás + véletlen-csapat gomb */
/* a preview a Napi kihívás kártya mintájára: TELJES kép, natural arány (2.4:1
   banner), nincs levágás/zoom (Jani: "teljeset használj, ne kicsi/levágott") */
.ng-map-prev{ display:block; width:100%; height:auto;
  border-radius:12px; margin-top:8px; border:2px solid rgba(255,255,255,.12); background:#0e1620;
  box-shadow:0 4px 14px rgba(0,0,0,.35); }
.ng-sp-desc{ font-size:12.5px; line-height:1.35; margin-top:6px; min-height:1.2em; opacity:.85; }