/* arcade.css — Shell der Lern-Arcade (Engine-Overlay + Launcher).
   Baut auf core/base.css + Theme-Tokens auf. */

/* ---- Launcher (Spielauswahl) ---- */
.arc-hero{ text-align:center; padding:1rem 0 .4rem; }
.arc-hero h1{ margin:.2rem 0; color:var(--navy); font-size:clamp(1.6rem,5vw,2.4rem); }
.arc-hero p{ color:var(--muted); max-width:680px; margin:.2rem auto; }
.arc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.1rem; margin:1.4rem 0; }
.arc-card{ position:relative; display:flex; flex-direction:column; gap:.4rem; text-align:left; padding:0; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow);
  cursor:pointer; text-decoration:none; color:inherit; transition:transform var(--dur) var(--ease); }
.arc-card:hover{ transform:translateY(-4px); }
.arc-card__art{ height:120px; padding:0; overflow:hidden; display:grid; place-items:center; font-size:3.4rem;
  background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 28%,var(--panel)), color-mix(in srgb,var(--accent2) 26%,var(--panel))); }
/* Cover-SVG füllt die Kachel randlos (eigene Hintergrund-Gradients je Spiel). */
.arc-card__art > svg{ display:block; width:100%; height:100%; }
.arc-card__body{ padding:.4rem 1rem 1rem; }
.arc-card__title{ font-weight:800; color:var(--navy); font-size:1.15rem; }
.arc-card__desc{ color:var(--muted); font-size:.9rem; }
.arc-card__meta{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.5rem; }
.arc-tag{ font-size:.7rem; font-weight:700; padding:.12rem .55rem; border-radius:var(--radius-pill); background:var(--soft); color:var(--muted); }
.arc-tag.fach{ background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); }
.arc-card__prog{ position:absolute; top:.6rem; right:.6rem; background:rgba(0,0,0,.35); color:#fff;
  font-size:.72rem; font-weight:800; padding:.1rem .5rem; border-radius:var(--radius-pill); }

/* ---- Spiel-Stage ---- */
.ar-stage{ position:relative; width:100%; height:min(76vh,640px); background:#0c1020; border-radius:var(--radius-card);
  overflow:hidden; box-shadow:var(--shadow); outline:none; touch-action:none; user-select:none; }
.ar-stage:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.ar-canvas{ display:block; width:100%; height:100%; }

/* HUD */
.ar-hud{ position:absolute; inset:0 0 auto 0; display:flex; justify-content:space-between; align-items:flex-start;
  padding:.5rem .6rem; pointer-events:none; gap:.5rem; }
.ar-hud__left,.ar-hud__right{ display:flex; gap:.4rem; flex-wrap:wrap; pointer-events:auto; }
.ar-chip{ background:rgba(12,16,32,.62); color:#fff; font-weight:800; font-size:.86rem;
  padding:.25rem .6rem; border-radius:var(--radius-pill); backdrop-filter:blur(3px); }
.ar-extra{ background:rgba(47,95,176,.8); }
.ar-ico{ width:44px; height:44px; min-height:44px; padding:0; border-radius:50%; background:rgba(12,16,32,.62); color:#fff;
  font-size:1.1rem; display:grid; place-items:center; border:0; cursor:pointer; }
/* Touch-Ziele für Editor-Werkzeuge & Slider (Tablet/Beamer). */
.wk-tool{ min-height:44px; }
.wk-range input[type=range], .wk-select select{ min-height:36px; }
.wk-range input[type=range]{ height:28px; }
.ar-ico:hover{ background:rgba(12,16,32,.85); }

/* Overlay (Intro/Sieg/Game-Over/Pause) */
.ar-overlay{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; padding:1rem;
  background:rgba(6,9,20,.72); backdrop-filter:blur(4px); z-index:5; }
.ar-overlay.show{ display:flex; }
.ar-card{ background:var(--paper); color:var(--ink); border-radius:var(--radius-card); box-shadow:var(--shadow);
  padding:1.3rem 1.4rem; max-width:520px; width:100%; text-align:center; max-height:92%; overflow:auto; }
.ar-card h2{ margin:.1rem 0 .6rem; color:var(--navy); }
.ar-prose{ text-align:left; color:var(--ink); margin:.5rem 0; }
.ar-prose p{ margin:.4rem 0; }
.ar-controls{ text-align:left; background:var(--soft); border-radius:var(--radius-btn); padding:.6rem .8rem; margin:.6rem 0; font-size:.92rem; }
.ar-controls kbd{ font-family:var(--font-mono); background:var(--panel); border:1px solid var(--line);
  border-bottom-width:2px; border-radius:6px; padding:.05rem .4rem; font-size:.85em; }
.ar-row{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-top:.9rem; }
.ar-big{ font-size:1.8rem; font-weight:900; color:var(--accent); margin:.3rem 0; }
.ar-sub{ color:var(--muted); margin:.2rem 0; }
.ar-learn{ color:var(--muted); font-size:.85rem; font-style:italic; margin-top:.6rem; }

/* Toaster im Spiel */
.ar-toast-wrap{ position:absolute; left:0; right:0; bottom:1rem; display:flex; flex-direction:column; align-items:center;
  gap:.4rem; pointer-events:none; z-index:4; }
.ar-toast{ background:rgba(12,16,32,.9); color:#fff; font-weight:800; padding:.5rem .9rem; border-radius:var(--radius-pill);
  opacity:0; transform:translateY(10px); transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease); }
.ar-toast.show{ opacity:1; transform:none; }
.ar-toast.ach{ background:linear-gradient(90deg,#b8860b,#e0a830); }
.ar-toast.good{ background:var(--ok); }
.ar-toast.bad{ background:var(--bad); }

/* Achievement-Liste unter dem Spiel */
.ach-list{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0; }
.ach-item{ display:flex; align-items:center; gap:.5rem; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-btn); padding:.45rem .7rem; box-shadow:var(--shadow); font-size:.86rem; opacity:.5; }
.ach-item.got{ opacity:1; border-color:color-mix(in srgb,var(--warn) 50%,var(--line)); }
.ach-item .ico{ font-size:1.3rem; }
.ach-item .lbl{ font-weight:800; color:var(--navy); }
.ach-item .ds{ color:var(--muted); font-size:.8rem; }

.arc-back{ display:inline-flex; align-items:center; gap:.3rem; }

/* ---- Globale Bestenliste (im Spiel-Overlay) ---- */
.ar-lb{ margin-top:1rem; text-align:left; }
.ar-lb__head{ font-weight:900; color:var(--navy); margin-bottom:.4rem; }
.ar-lb__form{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.6rem; }
.ar-lb__name{ flex:1; min-width:8rem; }
.ar-lb__send{ white-space:nowrap; }
.ar-lb__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.25rem; max-height:240px; overflow:auto; }
.ar-lb__list.ar-lb__big{ max-height:50vh; }
.ar-lb__row{ display:flex; align-items:center; gap:.6rem; background:var(--soft); border-radius:var(--radius-btn); padding:.35rem .6rem; }
.ar-lb__row.me{ outline:2px solid var(--accent); background:color-mix(in srgb,var(--accent) 14%,var(--soft)); }
.ar-lb__rk{ min-width:1.8rem; font-weight:900; color:var(--muted); text-align:center; }
.ar-lb__nm{ flex:1; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-lb__sc{ font-weight:900; color:var(--accent); }
.ar-lb__muted{ color:var(--muted); font-style:italic; list-style:none; }

/* ============================================================
   Level-Editor + Community-/Schülermodus (workshop.js)
   ============================================================ */
/* Tabs über dem Spielbereich */
.arc-tabs{ display:flex; gap:.4rem; flex-wrap:wrap; margin:.2rem 0 .8rem; }
.arc-tab{ font-weight:800; font-size:.92rem; padding:.45rem .9rem; border-radius:var(--radius-pill);
  background:var(--soft); color:var(--muted); border:1px solid var(--line); cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.arc-tab:hover{ background:color-mix(in srgb,var(--accent) 14%,var(--soft)); }
.arc-tab.on{ background:var(--accent); color:#fff; border-color:transparent; }

/* gesperrter Editor / leere Community */
.wk-locked, .wk-empty{ text-align:center; max-width:560px; margin:2.4rem auto; color:var(--muted); }
.wk-locked__art, .wk-empty__art{ font-size:3.4rem; }
.wk-locked h3, .wk-empty h3{ color:var(--navy); margin:.4rem 0; }
.wk-muted{ color:var(--muted); font-size:.88rem; }

/* ---- Editor-Layout ---- */
.wk{ display:flex; flex-direction:column; gap:.6rem; }
.wk-head{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.wk-head .wk-spacer{ flex:1; }
.wk-name, .wk-author{ padding:.45rem .7rem; border-radius:var(--radius-pill); border:1px solid var(--line);
  background:var(--panel); color:var(--ink, var(--navy)); font:inherit; }
.wk-name{ flex:1; min-width:160px; } .wk-author{ width:140px; }
.wk-main{ display:grid; grid-template-columns:1fr 290px; gap:.8rem; align-items:stretch; }
@media (max-width:760px){ .wk-main{ grid-template-columns:1fr; } }
.wk-stage{ position:relative; height:min(70vh,560px); background:#0c1020; border-radius:var(--radius-card);
  overflow:hidden; box-shadow:var(--shadow); touch-action:none; user-select:none; }
.wk-canvas{ display:block; width:100%; height:100%; }
.wk-toast{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%) translateY(8px);
  background:rgba(12,16,32,.86); color:#fff; padding:.4rem .8rem; border-radius:var(--radius-pill);
  font-size:.85rem; font-weight:700; opacity:0; transition:opacity var(--dur), transform var(--dur); pointer-events:none; max-width:90%; }
.wk-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.wk-side{ display:flex; flex-direction:column; gap:.6rem; min-width:0; }
.wk-palette{ display:grid; grid-template-columns:repeat(2,1fr); gap:.35rem; }
.wk-tool{ display:flex; align-items:center; gap:.3rem; font-size:1.1rem; padding:.4rem .5rem; border-radius:12px;
  background:var(--soft); border:1px solid var(--line); cursor:pointer; color:var(--navy); }
.wk-tool span{ font-size:.74rem; font-weight:700; }
.wk-tool.on{ background:var(--accent); color:#fff; border-color:transparent; }
.wk-props{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-card); padding:.6rem .7rem; }
.wk-props__head{ font-weight:800; color:var(--navy); margin-bottom:.4rem; }
.wk-range, .wk-select{ display:flex; flex-direction:column; gap:.15rem; margin:.45rem 0; font-size:.8rem; color:var(--muted); }
.wk-range input[type=range]{ width:100%; }
.wk-select select{ padding:.35rem .5rem; border-radius:10px; border:1px solid var(--line); background:var(--panel); font:inherit; color:var(--navy); }
.wk-del{ width:100%; margin-top:.5rem; }
.wk-hint{ font-size:.78rem; color:var(--muted); line-height:1.4; }
.btn.small{ padding:.3rem .7rem; font-size:.82rem; }
.btn.danger{ background:#c4313e; color:#fff; }
.btn.danger:hover{ background:#a8262f; }

/* Probeflug-Overlay (über dem Editor) */
.wk-probe-overlay{ position:fixed; inset:0; z-index:60; background:rgba(6,8,18,.92);
  display:flex; flex-direction:column; padding:.6rem; gap:.5rem; }
.wk-probe-head{ display:flex; align-items:center; gap:.6rem; color:#fff; }
.wk-probe-head strong{ font-size:1.05rem; } .wk-probe-head .wk-probe-back{ margin-left:auto; }
.wk-probe-host{ flex:1; min-height:0; }
.wk-probe-host .ar-stage{ height:100%; }

/* ---- Community-Liste ---- */
.wk-comm-bar{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin:.2rem 0 1rem; }
.wk-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.wk-card{ display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow); }
.wk-thumb{ width:100%; height:auto; aspect-ratio:8/5; background:#0c1020; display:block; }
.wk-card__body{ padding:.5rem .7rem .7rem; display:flex; flex-direction:column; gap:.25rem; }
.wk-card__title{ font-weight:800; color:var(--navy); }
.wk-card__meta{ font-size:.8rem; color:var(--muted); }
.wk-card__stats{ font-size:.78rem; color:var(--muted); }
.wk-card__row{ display:flex; gap:.4rem; margin-top:.35rem; }
.wk-play-host{ }
.wk-play-host .ar-stage{ height:min(76vh,640px); }