/* Kombi-Kompass — Dashboard. Grün heißt: der Tipp würde jetzt aufgehen. */

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

:root{
  --bg:#EAEEE9;
  --surface:#FFFFFF;
  --surface-2:#F4F7F2;
  --line:#D6DDD4;
  --line-strong:#BFC9BC;
  --ink:#121A15;
  --ink-2:#38453D;
  --muted:#5F6E64;
  --accent:#1F4FD8;
  --accent-soft:#E6ECFD;
  --on-accent:#FFFFFF;
  --good:#12854A;
  --good-bg:rgba(18,133,74,.10);
  --bad:#BE2437;
  --bad-bg:rgba(190,36,55,.09);
  --wait:#6B7A70;
  --wait-bg:rgba(107,122,112,.09);
  --shadow:0 1px 2px rgba(18,26,21,.05), 0 10px 30px rgba(18,26,21,.07);
  --r:14px;
  --r-sm:9px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1411;
    --surface:#151C18;
    --surface-2:#1B241F;
    --line:#28322C;
    --line-strong:#3A473F;
    --ink:#E8EFE9;
    --ink-2:#C2CEC5;
    --muted:#8D9C92;
    --accent:#7799FF;
    --accent-soft:#1C2740;
    --on-accent:#0B1020;
    --good:#33C075;
    --good-bg:rgba(51,192,117,.13);
    --bad:#E3495C;
    --bad-bg:rgba(227,73,92,.13);
    --wait:#8D9C92;
    --wait-bg:rgba(141,156,146,.11);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#0E1411; --surface:#151C18; --surface-2:#1B241F; --line:#28322C;
  --line-strong:#3A473F; --ink:#E8EFE9; --ink-2:#C2CEC5; --muted:#8D9C92;
  --accent:#7799FF; --accent-soft:#1C2740; --on-accent:#0B1020;
  --good:#33C075; --good-bg:rgba(51,192,117,.13);
  --bad:#E3495C;  --bad-bg:rgba(227,73,92,.13);
  --wait:#8D9C92; --wait-bg:rgba(141,156,146,.11);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.35);
}

body{
  background:var(--bg);color:var(--ink);
  font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
.wrap{
  max-width:1180px;margin:0 auto;padding-inline:16px;
  /* Im Startbildschirm-Modus liegt die Seite unter der Statusleiste des
     iPhones — env() hält den Bereich frei. Im Browser ist der Wert 0. */
  padding-block:calc(18px + env(safe-area-inset-top,0px)) 96px;
}
@media(min-width:700px){ .wrap{padding-inline:20px} }

/* ---------- Kopf ---------- */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-bottom:14px}
@media(max-width:560px){
  /* Auf dem Handy: Name, Uhrzeit und Vollbild in eine eigene, linksbündige
     Zeile — sonst franst die Kopfzeile aus und frisst den halben Bildschirm. */
  .top-right{width:100%;margin-left:0;gap:10px}
  .top-right .btn{padding:6px 13px;font-size:13.5px}
}
.brand{display:flex;align-items:baseline;gap:9px}
.brand h1{
  font-family:"Anton",Impact,sans-serif;font-weight:400;letter-spacing:.02em;
  font-size:clamp(21px,5.5vw,34px);line-height:1;margin:0;text-transform:uppercase;
}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;transform:translateY(-3px)}
.top-right{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.who{font-size:13.5px;color:var(--muted)}
.who b{color:var(--ink)}

button{font:inherit;color:inherit;cursor:pointer}
.btn{
  display:inline-flex;align-items:center;gap:7px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:999px;padding:8px 15px;
  font-size:14.5px;font-weight:600;transition:background .14s,border-color .14s,transform .06s;
}
.btn:hover{background:var(--surface-2);border-color:var(--muted)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-quiet{background:transparent;border-color:transparent;color:var(--muted);padding:6px 10px}
.btn-quiet:hover{background:var(--surface-2);color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

input,select{
  font:inherit;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:6px 9px;max-width:100%;
}
input[type=number]{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:14.5px}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}
label{font-size:13px;color:var(--muted)}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.hint{font-size:12.5px;color:var(--muted)}
.err{margin-top:10px;font-size:13.5px;color:var(--bad)}

/* ---------- Anmeldung ---------- */
.gate{position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:20px}
.gate-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:24px}
.gate-card h2{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:30px;margin:0 0 4px}
.gate-card p{margin:0 0 18px;color:var(--muted);font-size:14.5px}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field input{width:100%;padding:9px 11px;font-size:15px}
.gate-card .btn{width:100%;justify-content:center;margin-top:6px}

/* ---------- Zusammenfassung ---------- */
.summary{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;
  background:var(--surface);border:1px solid var(--line);border-left-width:6px;
  border-radius:var(--r);box-shadow:var(--shadow);padding:16px 20px;margin-bottom:16px;
}
.summary.good{border-left-color:var(--good)}
.summary.bad{border-left-color:var(--bad)}
.summary.wait{border-left-color:var(--wait)}
.sum-head{font-family:"Anton",Impact,sans-serif;font-size:clamp(23px,3.4vw,32px);line-height:1;text-transform:uppercase}
.sum-counts{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 12px;
  font-size:13.5px;font-weight:600;border:1px solid var(--line);
}
.chip.good{color:var(--good);background:var(--good-bg);border-color:var(--good)}
.chip.bad{color:var(--bad);background:var(--bad-bg);border-color:var(--bad)}
.chip.wait{color:var(--wait);background:var(--wait-bg)}
.sum-money{margin-left:auto;display:flex;gap:8px 16px;flex-wrap:wrap}
.money dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.money dd{margin:1px 0 0;font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:500;font-variant-numeric:tabular-nums}
.stamp{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}

/* ---------- Tipp-Kacheln ---------- */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.tile{
  border:1px solid var(--line);border-left-width:7px;border-radius:var(--r);
  padding:15px 17px;display:flex;flex-direction:column;gap:3px;min-height:158px;background:var(--surface);
}
.tile.good{border-left-color:var(--good);background:var(--good-bg)}
.tile.bad{border-left-color:var(--bad);background:var(--bad-bg)}
.tile.wait{border-left-color:var(--wait);background:var(--wait-bg)}
.tile.push{border-left-color:var(--wait);background:var(--wait-bg)}
.tile-pick{font-size:clamp(16px,2vw,20px);font-weight:700;letter-spacing:-.01em}
.tile-game{font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tile-score{font-family:"IBM Plex Mono",monospace;font-weight:600;color:var(--ink-2)}
.tile-state{
  font-family:"Anton",Impact,sans-serif;font-size:clamp(26px,3.8vw,40px);
  line-height:1.02;text-transform:uppercase;margin-top:7px;
}
.tile.good .tile-state{color:var(--good)}
.tile.bad .tile-state{color:var(--bad)}
.tile.wait .tile-state,.tile.push .tile-state{color:var(--wait)}
.tile-detail{font-size:14.5px;color:var(--ink-2)}
.tile-foot{margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:9px}
.final{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:2px 9px;border:1px solid currentColor;
}
.tile-odds{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--muted)}

/* ---------- Hochladen ---------- */
.drop{
  border:1.5px dashed var(--line-strong);border-radius:var(--r);background:var(--surface);
  padding:24px 20px;text-align:center;transition:border-color .15s,background .15s;margin-bottom:16px;
}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop h2{font-size:17px;margin:0 0 5px;font-weight:700}
.drop p{margin:0 0 14px;color:var(--muted);font-size:14px}
.drop .row{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.thinking{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:14.5px;padding:6px 0 0}
.spin{width:15px;height:15px;border:2px solid var(--line-strong);border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}

/* ---------- Korrektur ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.panel-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);flex-wrap:wrap}
.panel-head h2{font-size:14.5px;margin:0;font-weight:700}
.panel-head .count{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted);margin-left:auto}
.panel-foot{display:flex;gap:9px;padding:13px 16px;border-top:1px solid var(--line);background:var(--surface-2);flex-wrap:wrap;align-items:center}

.row-edit{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.row-edit:first-child{border-top:0}
.row-edit.unsure{background:var(--wait-bg)}
.row-edit select{min-width:132px}
.row-edit .src{flex-basis:100%;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-edit .odds-in{width:78px;text-align:right}
.row-edit .line-in{width:74px;text-align:right}
.row-edit .player-in{min-width:150px;flex:1}
.flag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bad)}

/* ---------- Scheine & Tafel ---------- */
.saved{list-style:none;margin:0;padding:0}
.saved li{display:flex;align-items:center;gap:10px;padding:9px 16px;border-top:1px solid var(--line);font-size:14.5px}
.saved li:first-child{border-top:0}
.saved .when{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);margin-left:auto}
.empty{padding:14px 16px;color:var(--muted);font-size:14px}

.board{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));padding:14px 16px}
.board-card{border:1px solid var(--line);border-left-width:6px;border-radius:var(--r);background:var(--surface);padding:14px 16px}
.board-card.mine{outline:2px solid var(--accent);outline-offset:-1px}
.board-top{display:flex;align-items:baseline;gap:8px;margin-bottom:9px;flex-wrap:wrap}
.board-owner{font-weight:700;font-size:16px}
.board-state{margin-left:auto;font-weight:700;font-size:14px}
.board-legs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.board-legs li{display:flex;align-items:baseline;gap:8px;font-size:14px}
.board-legs .w{font-weight:700;margin-left:auto;white-space:nowrap}

.banner{
  display:flex;gap:9px;align-items:flex-start;padding:10px 14px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface-2);font-size:13.5px;color:var(--ink-2);margin-bottom:14px;
}

/* ---------- Vollbild fürs Tablet ---------- */
body.fullscreen .top,
body.fullscreen .drop,
body.fullscreen .panel,
body.fullscreen .foot{display:none}
body.fullscreen .wrap{padding-block:14px;max-width:none}
body.fullscreen .tiles{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
body.fullscreen .tile{min-height:190px}
body.fullscreen .tile-state{font-size:clamp(30px,5vw,56px)}
.exit-full{position:fixed;right:16px;bottom:16px;z-index:70;box-shadow:var(--shadow)}

.foot{margin-top:28px;color:var(--muted);font-size:12.5px;line-height:1.6;border-top:1px solid var(--line);padding-top:14px}
.foot b{color:var(--ink-2);font-weight:600}


/* ---------- Bereichsleiste unten ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -2px 14px rgba(18,26,21,.06);
}
:root[data-theme="dark"] .tabbar{box-shadow:0 -2px 14px rgba(0,0,0,.35)}
.tabbar button{
  position:relative;border:0;background:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 4px 8px;font-size:11.5px;font-weight:600;letter-spacing:.01em;
  color:var(--muted);transition:color .14s;
}
.tabbar button::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:32px;height:3px;border-radius:0 0 3px 3px;background:transparent;transition:background .14s;
}
.tabbar button[aria-selected="true"]{color:var(--accent)}
.tabbar button[aria-selected="true"]::before{background:var(--accent)}
.tabbar .ic{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab-dot{
  position:absolute;top:7px;right:calc(50% - 18px);
  width:8px;height:8px;border-radius:50%;background:var(--bad);
  border:1.5px solid var(--surface);
}

/* Bereiche */
.view{display:block}

/* Leerer Zustand */
.blank{
  border:1.5px dashed var(--line-strong);border-radius:var(--r);background:var(--surface);
  padding:28px 22px;text-align:center;
}
.blank h2{font-size:18px;margin:0 0 6px;font-weight:700}
.blank p{margin:0 0 16px;color:var(--muted);font-size:14.5px;max-width:40ch;margin-inline:auto}

/* Im Vollbild zählt nur die Tafel */
body.fullscreen .tabbar,
body.fullscreen .blank{display:none}
body.fullscreen .wrap{padding-block-end:14px}


/* ---------- Hinweis zum Installieren ---------- */
.install{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;
  padding:12px 14px;border-radius:var(--r);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.install img{border-radius:10px;flex:none}
.install-txt{display:flex;flex-direction:column;gap:2px;font-size:13.5px;line-height:1.45;min-width:0}
.install-txt b{font-size:14.5px}
.install-txt span{color:var(--muted)}
.install .btn-primary{flex:none}
.install .btn-quiet{flex:none;margin-left:auto;align-self:flex-start;font-size:15px}
.install .btn-primary + .btn-quiet{margin-left:0}
@media(max-width:480px){ .install{flex-wrap:wrap} .install .btn-primary{width:100%;justify-content:center} }