/* ============================================================
   wordscape2.css — alleen het WOORDKRUIS 2-eigene: het in-pagina startmenu,
   de parkeerlijst en de logboek-statistieken. Het speelveld (raster/wiel/…)
   komt uit games/wordscape/wordkruis.css (gedeeld, klasse .wk-game).
   Menu staat in de sectie → gescoped onder #wordscape2; de parkeerlijst +
   logstats renderen in de gedeelde modal → ongescoped (uniek benoemd).
   ============================================================ */

  .gone{ display:none !important; }

  /* ---- startmenu (in de pagina zelf, niet als pop-up) — gecentreerd op het volle vh-scherm ---- */
  #w2menuView{ display:flex; align-items:center; justify-content:center; min-height:92vh; padding:8vh 2vh 2vh; }
  #wordscape2 .menupanel{ width:100%; max-width:min(540px,86vw); background:var(--panel); border:1px solid var(--line);
    border-radius:2.4vh; padding:3.4vh 3.4vh 3vh; box-shadow:0 12px 30px rgba(0,0,0,.25); }
  #wordscape2 .menupanel h2{ margin:0 0 .5vh; font-size:3.6vh; } #wordscape2 .menupanel h2 b{ color:var(--accent); }
  #wordscape2 .menusub{ margin:0 0 1.8vh; color:var(--muted); font-family:var(--mono); font-size:2vh; }
  #wordscape2 .menusizes{ display:grid; grid-template-columns:repeat(2,1fr); gap:2vh; margin:.4vh 0 2vh; }
  #wordscape2 .sizeopt{ display:flex; flex-direction:column; align-items:center; gap:1.2vh; padding:2vh 1.4vh 1.6vh;
    background:var(--panel-2); border:1px solid var(--line); border-radius:2vh; cursor:pointer;
    color:var(--text); font-family:var(--display); transition:border-color .15s, transform .08s, background .15s; }
  #wordscape2 .sizeopt:hover{ border-color:var(--accent); transform:translateY(-2px); background:#2b3060; }
  #wordscape2 .sizeopt:active{ transform:translateY(0); }
  #wordscape2 .sizeopt:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
  /* mini-wiel = px (JS plaatst de letters in een vast 92px-stelsel: R=30, midden 46,46) */
  #wordscape2 .miniwheel{ position:relative; width:92px; height:92px; pointer-events:none; }
  #wordscape2 .miniwheel::before{ content:''; position:absolute; inset:6px; border-radius:50%;
    background:radial-gradient(circle at 50% 38%, rgba(56,214,224,.12), rgba(20,22,43,0) 70%);
    border:1px dashed rgba(150,154,205,.30); }
  #wordscape2 .mtileo{ position:absolute; width:25px; height:25px; margin:-12.5px 0 0 -12.5px; border-radius:50%;
    background:linear-gradient(180deg,#3b4282,#272c59); border:1px solid #4a5099; color:#eef0ff;
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; text-transform:uppercase;
    box-shadow:0 2px 5px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14); }
  #wordscape2 .sizeopt:hover .mtileo{ background:linear-gradient(180deg,#63e7f1,#2cc7d3); color:#06303a; border-color:#9af3f8; }
  #wordscape2 .sizelabel{ font-family:var(--mono); font-size:2vh; font-weight:700; color:var(--muted); }
  #wordscape2 .sizeopt:hover .sizelabel{ color:var(--accent); }
  #wordscape2 .menufull{ width:100%; padding:1.7vh; margin-top:1.2vh; font-size:2.1vh; }
  #wordscape2 .menucoins{ margin-top:2vh; text-align:center; font-family:var(--mono); font-size:2.2vh; color:var(--gold); }

  /* ---- parkeerlijst (rendert in de gedeelde modal, dus ongescoped) ---- */
  .parkitem{ display:flex; gap:14px; align-items:center; padding:12px 2px; border-bottom:1px solid var(--line); }
  .parkitem:last-child{ border-bottom:0; }
  .parkprev{ flex:0 0 auto; padding:4px; background:#15172f; border:1px solid var(--line); border-radius:8px; }
  .pgrid{ display:grid; gap:2px; }
  .pgrid i{ width:9px; height:9px; border-radius:2px; background:#2a2f5a; border:1px solid #3a4078; }
  .pgrid i.pon{ background:linear-gradient(180deg,#63e4ed,#34c4ce); border-color:#88f1f8; }
  .parkinfo{ flex:1; min-width:0; }
  .parkh{ font-weight:700; font-size:16px; margin-bottom:3px; }
  .parkact{ display:flex; gap:8px; margin-top:8px; }
  .parkact .btn{ font-size:13px; padding:9px 14px; }

  /* ---- logboek: voltooiing per lettergrootte (gedeelde modal, ongescoped) ---- */
  .logstats{ display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
  .lstat{ display:grid; grid-template-columns:80px 1fr auto; gap:9px; align-items:center; font-family:var(--mono); font-size:15px; }
  .lstatk{ color:var(--text); font-weight:700; }
  .lstatbar{ height:10px; background:var(--panel-2); border:1px solid var(--line); border-radius:999px; overflow:hidden; }
  .lstatbar i{ display:block; height:100%; background:linear-gradient(90deg,#34c4ce,#63e4ed); }
  .lstatv{ color:var(--muted); white-space:nowrap; }
  .lstatp{ grid-column:2/-1; color:var(--muted); font-size:13px; margin-top:-6px; }
  .logsub{ font-size:16px; margin:16px 0 6px; }