/* Qwixx online – Stylesheet */
:root{
  --bg:#0f1220; --panel:#1a1e33; --panel2:#232845; --line:#333a5c;
  --text:#e8ebff; --muted:#9aa2c8; --accent:#6c7bff; --accent2:#8a97ff;
  --red:#e5484d; --yellow:#e5b800; --green:#37a86a; --blue:#3b82f6;
  --ok:#37a86a; --err:#e5484d;
  --shadow:0 8px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:linear-gradient(160deg,#0f1220,#151a30);
  color:var(--text); min-height:100vh;
}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  border:1px solid var(--line);background:var(--panel2);color:var(--text);
  padding:.55em 1em;border-radius:10px;cursor:pointer;font-size:.95rem;
  transition:.15s;font-weight:600;
}
.btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent2)}
.btn.ghost{background:transparent}
.btn.big{padding:.75em 1.3em;font-size:1.05rem;width:100%}
.btn.warn{background:#7a2230;border-color:#7a2230}

/* ---- Auth ---- */
.auth-body{display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:32px;width:100%;max-width:400px;box-shadow:var(--shadow)
}
.logo{font-size:2.4rem;margin:0;text-align:center;font-weight:800;letter-spacing:-1px}
.logo span{color:var(--accent2);font-weight:400;font-size:1.1rem;vertical-align:super;margin-left:2px}
.subtitle{text-align:center;color:var(--muted);margin:.2em 0 1.5em}
.tabs{display:flex;gap:8px;margin-bottom:18px}
.tab{flex:1;text-align:center;padding:.6em;border-radius:10px;background:var(--panel2);color:var(--muted);font-weight:600}
.tab.active{background:var(--accent);color:#fff}
.tab:hover{text-decoration:none}
.auth-form label{display:block;margin-bottom:14px;font-size:.9rem;color:var(--muted)}
.auth-form input{
  display:block;width:100%;margin-top:6px;padding:.7em;border-radius:10px;
  border:1px solid var(--line);background:#0e1224;color:var(--text);font-size:1rem
}
.auth-form input:focus{outline:none;border-color:var(--accent)}
.hint{text-align:center;color:var(--muted);margin-top:16px;font-size:.9rem}
.alert{padding:.8em 1em;border-radius:10px;margin-bottom:16px;font-size:.92rem}
.alert.error{background:rgba(229,72,77,.15);border:1px solid var(--err);color:#ffb4b6}

/* ---- Topbar ---- */
.topbar{
  display:flex;align-items:center;gap:14px;padding:12px 20px;
  background:var(--panel);border-bottom:1px solid var(--line)
}
.brand{font-weight:800;font-size:1.3rem;color:var(--text)}
.brand span{color:var(--accent2);font-weight:400;font-size:.8rem;vertical-align:super}
.spacer{flex:1}
.user{color:var(--muted);font-size:.92rem}

/* ---- Lobby ---- */
.lobby{max-width:900px;margin:0 auto;padding:24px 16px}
.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:20px;margin-bottom:16px
}
.card h2{margin:0 0 .4em;font-size:1.15rem}
.card p{color:var(--muted);margin:.2em 0 1em}
.join-form{display:flex;gap:8px}
.code-input{
  flex:1;padding:.7em;border-radius:10px;border:1px solid var(--line);
  background:#0e1224;color:var(--text);font-size:1.1rem;letter-spacing:2px;font-weight:700
}
.code-input:focus{outline:none;border-color:var(--accent)}
.game-list{list-style:none;margin:0;padding:0}
.game-list li a{
  display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;
  background:var(--panel2);margin-bottom:8px;color:var(--text)
}
.game-list li a:hover{text-decoration:none;border:1px solid var(--accent);padding:11px}
.code-badge{font-weight:800;letter-spacing:2px;background:#0e1224;padding:.3em .6em;border-radius:8px}
.status{font-size:.85rem;padding:.2em .6em;border-radius:20px}
.status-waiting{background:rgba(229,184,0,.2);color:#ffe27a}
.status-active{background:rgba(55,168,106,.2);color:#8ff0bd}
.host-badge{background:var(--accent);color:#fff;font-size:.72rem;padding:.2em .5em;border-radius:20px;margin-left:auto}
.muted{color:var(--muted)}
.rules-hint{text-align:center;margin:10px 0}
.rules{display:none}
.rules.open{display:block}
.rules ul{color:var(--muted);line-height:1.6;padding-left:1.2em}

/* ---- Spiel ---- */
#game{max-width:1200px;margin:0 auto;padding:16px}
.loading{text-align:center;color:var(--muted);padding:60px}

.waitroom{max-width:520px;margin:30px auto;text-align:center}
.big-code{
  font-size:2.6rem;font-weight:800;letter-spacing:6px;background:#0e1224;
  padding:.3em .5em;border-radius:14px;display:inline-block;margin:.3em 0;border:1px solid var(--line)
}
.copy-hint{color:var(--muted);font-size:.9rem}
.player-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0}
.chip{background:var(--panel2);padding:.4em .8em;border-radius:20px;border:1px solid var(--line)}
.chip.host{border-color:var(--accent)}

.game-top{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:16px
}
.turn-info{font-size:1.05rem}
.turn-info strong{color:var(--accent2)}
.badge-your-turn{background:var(--ok);color:#04210f;padding:.25em .7em;border-radius:20px;font-weight:700;font-size:.9rem}

.dice{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.die{
  width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.4rem;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)
}
.die.white{background:#f4f6ff;color:#1a1e33}
.die.red{background:var(--red);color:#fff}
.die.yellow{background:var(--yellow);color:#3a2f00}
.die.green{background:var(--green);color:#fff}
.die.blue{background:var(--blue);color:#fff}
.die.empty{background:#0e1224;color:#444c78;border:1px dashed var(--line);box-shadow:none}
.white-sum{margin-left:6px;color:var(--muted);font-size:.92rem}
.actions{margin-left:auto;display:flex;gap:8px}

.boards{display:flex;flex-direction:column;gap:16px}
.board{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px
}
.board.me{border-color:var(--accent)}
.board.active-player{box-shadow:0 0 0 2px var(--ok) inset}
.board-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.board-head .name{font-weight:700}
.board-head .score{margin-left:auto;font-weight:800;font-size:1.1rem}
.mini-badge{font-size:.72rem;padding:.15em .5em;border-radius:12px;background:var(--panel2);color:var(--muted)}
.mini-badge.turn{background:var(--ok);color:#04210f}
.mini-badge.you{background:var(--accent);color:#fff}

.row{display:flex;align-items:center;gap:5px;margin-bottom:6px;overflow-x:auto;padding-bottom:2px}
.row-color{width:16px;height:36px;border-radius:6px;flex:0 0 auto}
.row-color.red{background:var(--red)} .row-color.yellow{background:var(--yellow)}
.row-color.green{background:var(--green)} .row-color.blue{background:var(--blue)}
.cell{
  flex:0 0 auto;width:34px;height:36px;border-radius:8px;border:1px solid var(--line);
  background:#0e1224;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.95rem;color:var(--text);position:relative
}
.cell.red-t{color:#ff9a9c} .cell.yellow-t{color:#ffdf6b}
.cell.green-t{color:#8ff0bd} .cell.blue-t{color:#9cc0ff}
.cell.marked{background:#0a2a17;border-color:var(--ok)}
.cell.marked::after{content:"✕";position:absolute;font-size:1.15rem;color:#fff;font-weight:900}
.cell.lock{font-size:1rem}
.cell.clickable{cursor:pointer}
.cell.clickable:hover{background:#161c33}
.cell.undoable{cursor:pointer;outline:2px dashed var(--muted);outline-offset:-3px}
.cell.undoable:hover{outline-color:var(--err)}
.cell.rowlocked{opacity:.4}
.penbox{display:flex;align-items:center;gap:6px;margin-top:8px}
.penbox .lbl{font-size:.82rem;color:var(--muted)}
.pen{width:22px;height:22px;border-radius:6px;border:1px solid var(--line);background:#0e1224;
  display:flex;align-items:center;justify-content:center;font-size:.8rem}
.pen.on{background:#7a2230;border-color:var(--err);color:#fff}
.pen.on::after{content:"✕"}

.side{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}
.log{flex:1;min-width:260px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px;max-height:220px;overflow:auto}
.log h3{margin:.2em 0 .6em;font-size:.95rem;color:var(--muted)}
.log .entry{font-size:.88rem;color:var(--muted);padding:.2em 0;border-bottom:1px solid rgba(255,255,255,.04)}

.finished-banner{
  background:linear-gradient(120deg,var(--accent),var(--green));
  color:#fff;border-radius:14px;padding:18px;text-align:center;margin-bottom:16px;font-size:1.2rem;font-weight:700
}
.scoretable{width:100%;border-collapse:collapse;margin-top:8px}
.scoretable th,.scoretable td{padding:.5em;border-bottom:1px solid var(--line);text-align:left}
.scoretable .win{color:#8ff0bd;font-weight:800}

.hintbar{background:rgba(108,123,255,.12);border:1px solid var(--accent);border-radius:10px;
  padding:.6em 1em;margin-bottom:12px;font-size:.92rem}

/* Auswahl-Popover (weiß vs. farbe bei gleicher Zahl) */
.popover{
  position:absolute;z-index:50;background:var(--panel2);border:1px solid var(--accent);
  border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow)
}
.popover button{white-space:nowrap;font-size:.82rem;padding:.4em .6em}

.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:var(--panel2);border:1px solid var(--line);color:var(--text);
  padding:.7em 1.2em;border-radius:10px;opacity:0;transition:.25s;pointer-events:none;z-index:100;max-width:90vw
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:var(--err);background:#3a1a20}

@media(max-width:640px){
  .lobby-grid{grid-template-columns:1fr}
  .actions{margin-left:0;width:100%}
  .game-top{gap:10px}
}