/* ==========================================================
   Warehouse Games – gemeinsames Theme (Farben von them-consulting.com)
   ========================================================== */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700;9..40,800&display=swap");

:root{
  /* THEM Markenfarben */
  --them-primary:#008791;      /* Petrol / Teal – Hauptfarbe */
  --them-primary-dark:#006a72;
  --them-brand:#6fb9c0;        /* helles Teal */
  --them-dark:#252626;         /* Ink / dunkel */
  --them-ink-soft:#5b5d5d;
  --them-soft:#d3dfe3;         /* Hellgrau-Blau */
  --them-line:#e2e8ea;
  --them-bg:#ffffff;
  --them-bg-alt:#f4f7f8;
  --them-tint:rgba(0,135,145,.1);
  --them-shadow:0 2px 8px rgba(37,38,38,.04),0 18px 40px -24px rgba(37,38,38,.25);
  --them-shadow-lg:0 30px 70px -40px rgba(37,38,38,.5);

  /* Lager-Akzente (sparsam) */
  --wh-carton:#c8955c; --wh-carton-dark:#a8743e; --wh-tape:#e8cfa4;
  --wh-steel:#8fa3ad;  --wh-warn:#f2a900;  --wh-ok:#2e9e6a;  --wh-bad:#d9534f;

  /* Spielfarben (gut unterscheidbar, zu Teal passend) */
  --g1:#008791; --g2:#e4572e; --g3:#f2a900; --g4:#5b3fa8; --g5:#2e9e6a; --g6:#d6336c;
  --g7:#1f5fa8; --g8:#8a5a2b; --g9:#6fb9c0; --g10:#5b5d5d; --g11:#9bbf2e;

  --font:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--them-bg-alt);color:var(--them-dark);font-family:var(--font);
  user-select:none;-webkit-user-select:none;touch-action:manipulation}
button{font:inherit;color:inherit}

/* ---------- App-Rahmen ---------- */
.app{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;max-width:760px;margin:0 auto}
.topbar{display:flex;align-items:center;gap:8px;padding:10px 12px 6px;padding-top:max(10px,env(safe-area-inset-top))}
.topbar .back{text-decoration:none;color:var(--them-primary);font-size:26px;line-height:1;padding:2px 8px 4px 0;font-weight:500}
.topbar h1{font-size:18px;font-weight:800;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px}
.pill{background:rgba(255,255,255,.85);border:1px solid var(--them-line);border-radius:999px;padding:5px 11px;font-size:13px;color:var(--them-ink-soft);
  box-shadow:var(--them-shadow);white-space:nowrap;backdrop-filter:blur(6px)}
.pill b{color:var(--them-dark)}

.toolbar{display:flex;gap:8px;justify-content:center;padding:8px 10px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.tb{background:rgba(255,255,255,.92);border:1px solid var(--them-line);border-radius:14px;padding:9px 12px;min-width:58px;font-size:13px;font-weight:500;
  display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;box-shadow:var(--them-shadow);color:var(--them-dark)}
.tb span{font-size:19px;line-height:1;color:var(--them-primary)}
.tb:active{transform:scale(.95)}
.tb:disabled{opacity:.4}
.tb.on{background:var(--them-primary);color:#fff;border-color:var(--them-primary)}
.tb.on span{color:#fff}

.tabs{display:flex;margin:6px 12px;background:#fff;border:1px solid var(--them-line);border-radius:14px;padding:4px;box-shadow:var(--them-shadow)}
.tabs button{flex:1;border:none;background:none;padding:9px;border-radius:10px;font-weight:700;color:var(--them-ink-soft);cursor:pointer}
.tabs button.on{background:var(--them-primary);color:#fff}

/* ---------- Overlay / Karten ---------- */
.ov{position:fixed;inset:0;z-index:20;background:rgba(37,38,38,.45);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:20px}
.ov.show{display:flex}
.card{background:#fff;border:1px solid var(--them-line);border-radius:20px;padding:22px;max-width:360px;width:100%;text-align:center;
  box-shadow:var(--them-shadow-lg);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--them-primary),var(--them-brand))}
.card h2{margin:6px 0 8px;font-size:22px;font-weight:800;letter-spacing:-.3px}
.card p{color:var(--them-ink-soft);margin:6px 0 14px;line-height:1.45;font-size:15px}
.card p b{color:var(--them-dark)}
.btn{background:var(--them-primary);color:#fff;border:none;border-radius:12px;padding:12px 20px;font-weight:700;font-size:16px;cursor:pointer;margin:4px;
  box-shadow:0 8px 18px -10px rgba(0,135,145,.8)}
.btn:active{transform:scale(.97)}
.btn.sec{background:var(--them-bg-alt);color:var(--them-dark);border:1px solid var(--them-line);box-shadow:none}
.stars{font-size:36px;letter-spacing:6px;color:var(--wh-warn);min-height:44px}

.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%) translateY(20px);opacity:0;z-index:19;
  background:var(--them-dark);color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;transition:.25s;pointer-events:none;white-space:nowrap;box-shadow:var(--them-shadow-lg)}
.toast.show{opacity:1;transform:translateX(-50%)}

/* ---------- Hintergrund-Bausteine ---------- */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%,var(--them-bg-alt) 55%,var(--them-soft) 100%)}
.hazard{background:repeating-linear-gradient(45deg,var(--wh-warn) 0 12px,var(--them-dark) 12px 24px)}
.brand-strip{height:4px;background:linear-gradient(90deg,var(--them-primary),var(--them-brand))}
/* Level-Auswahl (Tipp auf die Level-Pille) */
.pill.lvp{cursor:pointer}
.pill.lvp::after{content:" ▾";color:var(--them-primary)}
.lvgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;max-height:50vh;overflow:auto;padding:4px 2px 8px;margin-bottom:8px}
.lvgrid button{border:1px solid var(--them-line);background:var(--them-bg-alt);border-radius:10px;padding:7px 0 5px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;display:flex;flex-direction:column;align-items:center;color:inherit}
.lvgrid button small{font-size:10px;color:var(--wh-warn);letter-spacing:1px;min-height:12px}
.lvgrid button.cur{background:var(--them-primary);color:#fff;border-color:var(--them-primary)}
.lvgrid button.cur small{color:#fff}