/* Playcer's Arcade – gemeinsame Menü-Optik (Vorlage: DRIFTER-Karten mit Buttons).
   Nur Systemschriften, keine externen Ressourcen. */
:root{
  --bg:#070a1a;
  --card:rgba(20,28,60,0.86);
  --line:#2c3c68;
  --text:#eaf0ff;
  --muted:#93a4d0;
  --gold:#ffd86b;
  --cyan:#5ad2ff;
  --field:#223056;
  --ok:#37c76a;
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; overflow:hidden; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
button, input, textarea{ font-family:inherit; color:inherit; }
/* iOS-Homescreen-App: Vollbild-Ebenen bis unter den Home-Balken ziehen (sonst bleibt unten ein Streifen) */
.fullscreen, .overlay{ height:100vh; height:100lvh; height:var(--app-h, 100lvh); }

.overlay{ position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  padding:calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  background:rgba(7,10,26,0.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.overlay.hidden{ display:none; }
.card{ width:100%; max-width:360px; max-height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--card); border:1px solid var(--line); border-radius:22px; padding:24px 20px;
  text-align:center; color:var(--text); box-shadow:0 10px 40px rgba(0,0,0,.45); }
.logo{ font-size:40px; font-weight:800; letter-spacing:1px; color:#eafcff; text-shadow:0 0 18px var(--cyan); }
.logo.small{ font-size:26px; }
.tag{ color:var(--muted); font-size:14px; margin-top:4px; line-height:1.4; }
.rec{ margin:16px 0; font-size:18px; font-weight:700; color:var(--gold); }
.rec.small{ font-size:14px; color:#c9d4f0; margin-top:-8px; }
.section{ margin-top:18px; text-align:left; font-size:12px; font-weight:800; letter-spacing:1.5px; color:var(--muted); text-transform:uppercase; }

.big{ width:100%; border:none; border-radius:16px; padding:17px; font-size:18px; font-weight:800; letter-spacing:.3px;
  cursor:pointer; margin-top:12px; transition:transform .08s, box-shadow .2s; }
.big:active{ transform:translateY(1px) scale(.99); }
.big:disabled{ opacity:.45; }
.primary{ color:#052029; background:linear-gradient(135deg,#7ff0e0,#43b6f0);
  box-shadow:0 6px 20px rgba(70,190,220,.35), inset 0 1px 0 rgba(255,255,255,.45); }
.wa{ color:#062b13; background:linear-gradient(135deg,#4ce07a,#22c657); box-shadow:0 6px 20px rgba(37,200,90,.32); }
.ghost{ width:100%; border:1px solid rgba(140,180,255,.28); border-radius:16px; padding:14px; font-size:16px; font-weight:700;
  cursor:pointer; margin-top:12px; background:rgba(255,255,255,.05); color:#d7e2ff; transition:transform .08s, background .2s; }
.ghost:active{ transform:scale(.98); background:rgba(255,255,255,.10); }

.setrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 4px;
  border-bottom:1px solid var(--line); font-size:16px; text-align:left; }
.setrow .val{ color:var(--muted); font-variant-numeric:tabular-nums; }
.toggle{ border:none; border-radius:12px; padding:8px 16px; font-weight:800; cursor:pointer; background:var(--ok); color:#062b13; white-space:nowrap; }
.toggle.off{ background:#33406b; color:#9fb0d8; }
.toggle:disabled{ cursor:default; }
.seg{ display:flex; background:#1a2448; border-radius:12px; padding:3px; gap:3px; }
.seg button{ border:none; background:none; color:#9fb0d8; font-weight:800; padding:7px 12px; border-radius:9px; cursor:pointer; }
.seg button.on{ background:var(--ok); color:#062b13; }

.field{ background:var(--field); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:10px 12px;
  font-size:16px; font-weight:700; width:100%; -webkit-user-select:text; user-select:text; }
.nameinput{ background:var(--field); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:8px 12px;
  font-size:16px; font-weight:700; width:150px; max-width:55%; text-align:right; -webkit-user-select:text; user-select:text; }
textarea.field{ font-size:13px; font-weight:500; font-family:ui-monospace,Menlo,monospace; resize:none; height:90px; }
.addrow{ display:flex; gap:8px; margin:6px 0 2px; }
.addrow input{ flex:1; min-width:0; background:var(--field); border:1px solid var(--line); color:var(--text); border-radius:10px;
  padding:10px 12px; font-size:15px; -webkit-user-select:text; user-select:text; }
.addrow button{ border:none; border-radius:10px; background:#3a68d8; color:#fff; font-weight:800; padding:0 16px; font-size:15px; cursor:pointer; white-space:nowrap; }

.tabs{ display:flex; gap:6px; margin:12px 0 4px; }
.tabs button{ flex:1; border:1px solid var(--line); background:rgba(255,255,255,.04); color:#9fb0d8; border-radius:12px;
  padding:9px 4px; font-weight:800; font-size:14px; cursor:pointer; }
.tabs button.on{ background:#2a3a6e; color:#fff; border-color:#4a64a8; }

.shoprow{ display:flex; align-items:center; gap:12px; padding:9px 4px; border-bottom:1px solid var(--line); }
.sname{ flex:1; text-align:left; font-weight:700; font-size:16px; }

.brow{ display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line); font-size:16px; }
.brow .rank{ width:26px; color:var(--muted); font-weight:800; text-align:center; }
.brow .bn{ flex:1; font-weight:700; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brow .bs{ font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; }
.brow.me .bn{ color:#8fe3ff; }

#toast{ position:fixed; left:50%; bottom:calc(26px + var(--safe-bottom)); transform:translateX(-50%); z-index:60; max-width:90%;
  background:var(--field); color:var(--text); padding:12px 18px; border-radius:14px; font-weight:700; text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,.4); display:none; }
#toast.show{ display:block; }