* { box-sizing: border-box; }
    :root {
      --safe-top: max(10px, env(safe-area-inset-top));
      --safe-right: max(10px, env(safe-area-inset-right));
      --safe-bottom: max(10px, env(safe-area-inset-bottom));
      --safe-left: max(10px, env(safe-area-inset-left));
      --ink: #172033;
      --panel: rgba(255,255,255,.94);
      --line: rgba(23,32,51,.14);
      --accent: #ff4b4b;
      --accent-2: #1ba7ff;
    }

    html, body {
      margin: 0; height: 100%; overflow: hidden;
      background: #91ddff;
      color: var(--ink); font-family: Inter, system-ui, Segoe UI, Arial, sans-serif;
      touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
      overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
    }
    img, canvas { -webkit-user-drag: none; user-drag: none; }
    body::before{
      content:""; position:fixed; inset:0; pointer-events:none; opacity:.35;
      background: linear-gradient(180deg, rgba(255,255,255,.48), transparent 42%);
    }

    canvas { display:block; width:100vw; height:100vh; }

    #topbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 30;
      min-height: 56px; display:flex; align-items:center; gap:10px;
      padding: calc(var(--safe-top) + 2px) var(--safe-right) 8px var(--safe-left);
      background: linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.56));
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
    }
    .pill {
      display:inline-flex; align-items:center; gap:8px;
      min-height:38px; padding:8px 12px; border-radius:12px;
      background: rgba(255,255,255,.78);
      border: 1px solid var(--line);
      box-shadow: 0 8px 22px rgba(23,32,51,.08);
      white-space: nowrap; font-size: 14px;
    }
    #brand { font-weight: 800; letter-spacing: .3px; }
    #homeLink {
      text-decoration:none;
      color:var(--ink);
      flex-shrink:0;
    }
    #hotbar {
      display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; flex:1; min-width:0;
      scrollbar-width: thin; scrollbar-color: var(--accent) transparent;
    }
    #hotbar::-webkit-scrollbar { height:4px; }
    #hotbar::-webkit-scrollbar-thumb { background:var(--accent); border-radius:999px; }

    .hook-flash {
      position:fixed;
      z-index:24;
      left:50%;
      top:calc(var(--safe-top) + 112px);
      transform:translateX(-50%);
      pointer-events:none;
      color:#4b1515;
      background:rgba(255,255,255,.92);
      border:1px solid rgba(255,75,75,.35);
      border-radius:999px;
      padding:7px 12px;
      font-size:12px;
      font-weight:800;
      opacity:0;
      transition:opacity .16s ease;
      box-shadow:0 12px 24px rgba(23,32,51,.14);
    }
    .hook-flash.show { opacity:1; }

    button, .ui-btn, select {
      appearance:none; border:1px solid rgba(23,32,51,.16);
      background: rgba(255,255,255,.9); color:var(--ink); border-radius:10px;
      padding:8px 12px; font-weight:700; cursor:pointer; transition:.15s ease;
      min-height: 40px;
    }
    button:hover, .ui-btn:hover, select:hover { background:var(--accent); color:white; box-shadow:0 10px 22px rgba(255,75,75,.22); }
    #hotbar button { flex:0 0 auto; min-width:34px; min-height:34px; padding:6px 9px; border-radius:8px; }
    #hotbar .world-tag {
      flex:0 0 auto; align-self:center; white-space:nowrap;
      font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
      color:var(--accent); opacity:.85; padding:0 6px 0 10px;
      border-left:2px solid rgba(255,75,75,.35);
    }
    #hotbar .world-tag:first-child { border-left:0; padding-left:4px; }
    #hotbar button.active { background:var(--accent); color:white; }
    #hotbar button.completed { border-color: rgba(36,173,91,.7); color:#0d6b33; }
    #hotbar button.locked { opacity:.35; cursor:not-allowed; }

    #hud {
      position: fixed; left: var(--safe-left); right: var(--safe-right);
      top: calc(var(--safe-top) + 62px); z-index: 20; display:grid;
      grid-template-columns: repeat(4, max-content); gap:10px; justify-content:space-between;
      pointer-events:none; font-size:13px; text-shadow:0 1px 0 rgba(255,255,255,.75);
    }
    #hud .pill { pointer-events:none; min-width: 0; justify-content:center; }
    #hud small { opacity:.72; }

    #bottomHint {
      position:fixed; z-index:20; left:50%; transform:translateX(-50%);
      bottom: calc(var(--safe-bottom) + 8px);
      font-size:12px; opacity:.85;
      background: rgba(255,255,255,.78); border:1px solid var(--line);
      border-radius:999px; padding:8px 12px; backdrop-filter: blur(6px); text-align:center;
      max-width: min(92vw, 900px);
    }

    .screen {
      position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center;
      background: rgba(18,28,44,.46);
      padding:24px;
    }
    .screen.active { display:flex; }
    .panel {
      width:min(820px, 100%); max-height: min(88vh, 1100px); overflow:auto;
      border-radius: 14px; padding: 22px;
      background: var(--panel); border:1px solid var(--line);
      box-shadow: 0 24px 80px rgba(23,32,51,.28);
    }
    .title {
      font-size: clamp(28px, 5vw, 46px); margin:0 0 10px;
      color: var(--ink);
    }
    .subtitle { opacity:.84; margin:0 0 16px; }
    .row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
    .grid2 { display:grid; grid-template-columns: 1.15fr .85fr; gap:16px; }
    .card {
      border:1px solid var(--line); border-radius:10px; padding:14px;
      background: rgba(255,255,255,.74);
    }
    .stats {
      display:grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap:10px; margin: 18px 0 22px;
    }
    .stat {
      border-radius:10px; padding:14px 10px; background: rgba(244,248,255,.92);
      border:1px solid var(--line); text-align:center;
    }
    .stat .k { font-size:12px; opacity:.75; }
    .stat .v { font-size:26px; font-weight:900; color:var(--accent-2); margin-top:6px; }

    .setting { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06); }
    .setting:last-child { border-bottom:none; }
    .setting label { font-weight:700; }
    .setting small { display:block; opacity:.72; margin-top:3px; font-weight:400; }
    input[type="range"] { width: 180px; }
    input[type="checkbox"] { width:22px; height:22px; accent-color:#0ff; }

    .skins { display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; }
    .skinBtn { padding:12px; min-height:68px; display:flex; align-items:center; justify-content:center; position:relative; }
    .skinBtn.active { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; }
    .skinDot { width:24px; height:24px; border-radius:50%; border:2px solid rgba(255,255,255,.75); }

    /* Startbildschirm Runde 5 */
    .bigtitle {
      font-size: clamp(32px, 6vw, 56px); font-weight:900; letter-spacing:-.02em;
      background: linear-gradient(90deg, var(--accent), #ff9a3d);
      -webkit-background-clip:text; background-clip:text; color:transparent;
      text-shadow:0 6px 30px rgba(255,75,75,.25);
    }
    .modeRow { display:flex; flex-wrap:wrap; gap:10px; margin: 4px 0 18px; }
    .modeRow button { font-size:15px; padding:12px 18px; }
    button.primary { background:var(--accent); color:#fff; border-color:transparent; box-shadow:0 10px 24px rgba(255,75,75,.28); }
    button.primary:hover { filter:brightness(1.06); }
    .worlds { display:grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap:10px; margin-bottom:18px; }
    .world-tile {
      text-align:left; border:1px solid var(--line); border-radius:10px; padding:12px 10px;
      background: rgba(255,255,255,.74); cursor:pointer; transition:.15s ease; min-height:74px;
    }
    .world-tile:hover { background:var(--accent); color:#fff; box-shadow:0 10px 22px rgba(255,75,75,.22); }
    .world-tile .wn { font-weight:800; font-size:13px; }
    .world-tile .wp { font-size:12px; opacity:.75; margin-top:6px; }
    .world-tile.locked { opacity:.45; cursor:not-allowed; }
    .world-tile.done .wn::after { content:" ✓"; color:#21b35a; }

    #game.fadein { animation: gfade .4s ease; }
    @keyframes gfade { from { opacity:0; transform:scale(1.015); } to { opacity:1; transform:none; } }

    /* ---------- Level-Editor ---------- */
    #editorBar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: none;
      flex-wrap: wrap; align-items: center; gap: 8px;
      padding: calc(var(--safe-top) + 2px) var(--safe-right) 8px var(--safe-left);
      background: linear-gradient(to bottom, rgba(255,255,255,.94), rgba(255,255,255,.7));
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
    }
    body.editor-active #editorBar { display: flex; }
    body.editor-active #topbar,
    body.editor-active #hud,
    body.editor-active #bottomHint { display: none; }
    /* Der vom Portal injizierte "Startseite"-Button (arcade-common.js) liegt
       fix oben links und verdeckt sonst die ersten Toolbar-Buttons — im
       Editor nach unten links ausweichen. */
    body.editor-active .arcade-back {
      top: auto;
      bottom: max(12px, env(safe-area-inset-bottom));
    }
    .ed-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .ed-actions { margin-left: auto; }
    #editorBar button, #editorBar select {
      min-height: 36px; padding: 6px 10px; font-size: 13px; border-radius: 8px;
    }
    #editorBar button.active { background: var(--accent); color: #fff; border-color: transparent; }
    #edName { min-height: 36px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); font-weight: 700; width: 150px; }

    /* Eigene-Level-Karte auf dem Startscreen */
    #customCard { margin-top: 16px; }
    .customList { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow: auto; }
    .customRow {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
      background: rgba(244,248,255,.9);
    }
    .customRow .cname { font-weight: 800; flex: 1; min-width: 120px; }
    .customRow .cmeta { font-size: 11px; opacity: .7; }
    .customRow button { min-height: 32px; padding: 4px 10px; font-size: 12px; border-radius: 8px; }
    .customEmpty { opacity: .7; font-size: 13px; padding: 6px 2px; }
    .importRow { margin-top: 10px; }
    .importRow input {
      flex: 1; min-width: 160px; min-height: 38px; padding: 6px 10px;
      border-radius: 8px; border: 1px solid var(--line); font-family: ui-monospace, monospace; font-size: 12px;
    }
    .importMsg { font-size: 12px; margin-top: 6px; min-height: 16px; font-weight: 700; }
    .importMsg.ok { color: #0d6b33; }
    .importMsg.err { color: #b3261e; }

    @media (max-width: 680px) {
      .ed-actions { margin-left: 0; }
      #edName { width: 120px; }
    }

    @media (max-width: 960px) {
      .grid2 { grid-template-columns: 1fr; }
      .stats { grid-template-columns: repeat(2, 1fr); }
      .skins { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 680px) {
      #topbar { gap: 8px; }
      #homeLink { padding-inline:10px; }
      #brand { display:none; }
      #hud { grid-template-columns: repeat(2, minmax(0,1fr)); justify-content:stretch; }
      #hud .pill { width:100%; justify-content:space-between; }
      .stats { grid-template-columns: 1fr 1fr; }
      .skins { grid-template-columns: repeat(2, 1fr); }
      #bottomHint { left:12px; right:12px; transform:none; }
    }