/* online.css – tidy spacing + Online Accent (Amber) */

.online-page{
  --o-accent: rgba(255,176,76,.95);
  --o-accentSoft: rgba(255,176,76,.14);
}

/* Header badge (Online tint) */
.online-page .badge{
  font-size:12px;
  color:var(--muted);
  border:1px solid rgba(255,255,255,.12);
  padding:4px 10px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,176,76,.12), rgba(255,120,102,.08));
}

/* Shell: sauber, align oben */
.online-shell{
  display:grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 980px){
  .online-shell{ grid-template-columns: 1fr; }
}

/* Columns */
.online-left{ min-width: 0; }
.online-right{ position: relative; }

/* Sticky right side (feels “app-like”) */
.online-side{
  position: sticky;
  top: 86px;
  max-height: calc(100vh - 110px);
  overflow: auto;
}

/* Panels (weil styles.css kein .panel definiert) */
.panel{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background:
    radial-gradient(900px 260px at 18% 0%, var(--o-accentSoft), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 70%),
    rgba(12,18,28,.58);
  box-shadow: var(--shadow);
}

.online-section{
  padding: 16px;
}

/* Views */
.online-view{ display:none; }
.online-view.active{ display:block; }

/* Head */
.online-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.online-title{
  margin:0 0 6px;
  font-size: 30px;
  letter-spacing:.2px;
}
.online-status{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}

/* WS dot */
.dot{
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}
.dot.on{
  background: var(--o-accent);
  box-shadow: 0 0 0 1px rgba(255,176,76,.40);
}

/* HERO ROW */
.hero-row{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  margin: 12px 0 14px;
}
@media (max-width: 980px){
  .hero-row{ grid-template-columns: 1fr; }
}

/* Join + Info cards */
.join-card, .info-card{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(255,176,76,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 72%),
    rgba(12,18,28,.62);
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06) inset;
  padding: 14px;
  overflow:hidden;
  backdrop-filter: blur(10px);
}

/* Unified card header */
.card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.kicker{ font-size:12px; color: var(--muted); }
.card-title{ font-size:18px; font-weight: 900; margin-top: 2px; }
.card-h2{ margin: 8px 0 6px; }

/* Mini preview */
.mini-preview{
  width: 150px;
  height: 80px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(280px 140px at 30% 20%, rgba(255,176,76,.14), transparent 60%),
    rgba(0,0,0,.16);
  overflow:hidden;
}
.preview-svg{ width:100%; height:100%; display:block; opacity:.95; }
.strokePath{
  fill:none;
  stroke: rgba(232,238,252,.88);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: draw 2.6s ease-in-out infinite;
}
.p2{ stroke-width: 5; opacity:.65; animation-delay: .22s; }
@keyframes draw{
  0%   { stroke-dashoffset: 420; opacity:0; }
  12%  { opacity:1; }
  60%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity:0; }
}

/* Info top */
.info-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.mini-pill{
  font-size:12px;
  color: var(--muted);
  border:1px solid rgba(255,255,255,.12);
  padding:4px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.04);
}
.live{ position:relative; padding-left: 20px; }
.live::before{
  content:"";
  position:absolute; left:10px; top:50%;
  width:7px; height:7px; border-radius:999px;
  transform: translate(-50%,-50%);
  background: var(--o-accent);
  box-shadow: 0 0 0 6px rgba(255,176,76,.14);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow: 0 0 0 5px rgba(255,176,76,.12); opacity:.95; }
  50%{ box-shadow: 0 0 0 10px rgba(255,176,76,0); opacity:1; }
}
.progressRing{
  width:28px; height:28px; border-radius:999px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
  animation: ring 3s linear infinite;
}
@keyframes ring{
  0%{ background: conic-gradient(rgba(255,176,76,.90) 0 0%, rgba(255,255,255,.10) 0); }
  100%{ background: conic-gradient(rgba(255,176,76,.90) 0 100%, rgba(255,255,255,.10) 0); }
}

.bullets{ margin: 10px 0 12px; padding-left: 18px; }
.bullets li{ margin: 6px 0; }

/* Form spacing */
.form-grid{
  display:grid;
  gap: 10px;
}
.btn-row{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

/* Inputs/select (safe) */
.field span{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
input, select{
  width:100%;
  height:44px;
  padding: 0 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  color: var(--text);
  outline:none;
}
input:focus, select:focus{
  border-color: rgba(255,176,76,.40);
  box-shadow: 0 0 0 4px rgba(255,176,76,.12);
}

/* Lobby grid */
.lobby-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 980px){
  .lobby-grid{ grid-template-columns: 1fr; }
}

/* Lobby cards */
.lobby-card{
  padding: 16px;
  overflow:hidden;
}

/* Small “section headline” (Punkt links) */
.section-headline{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 8px;
}
.section-headline h2{
  margin:0;
  font-size: 18px;
  letter-spacing:.2px;
}
.section-dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--o-accent);
  box-shadow: 0 0 0 5px rgba(255,176,76,.12);
}

/* Players list */
.players{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin-top: 10px;
}
.player-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}
.player-left{
  display:flex;
  align-items:center;
  gap: 10px;
}
.player-badge{
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.18);
}
.player-badge.ready{ background: var(--o-accent); }
.player-badge.solved{ background: rgba(136,255,204,.85); }
.hostTag{
  font-size:12px;
  color: var(--muted);
  border:1px solid rgba(255,255,255,.12);
  padding:2px 8px;
  border-radius:999px;
  background: rgba(255,255,255,.04);
}

/* Online primary buttons (scope only) */
.online-page .btn.primary{
  border-color: rgba(255,176,76,.40);
  background: linear-gradient(180deg, rgba(255,176,76,.22), rgba(255,176,76,.10));
  box-shadow: 0 18px 44px rgba(255,176,76,.12);
  color:#fff3e6;
}
.online-page .btn.primary:hover{
  background: linear-gradient(180deg, rgba(255,176,76,.28), rgba(255,176,76,.12));
}

/* Chips & scoreboard */
.online-mini{ display:flex; gap:10px; flex-wrap:wrap; }

.chip{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--muted);
}

.scoreboard{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top: 10px;
}
.score-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}

.sepLine{
  border:0;
  border-top:1px solid rgba(255,255,255,.10);
  margin: 14px 0;
}

/* Modal: nur optische Online-Tönung */
.modal{
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(255,176,76,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 70%),
    rgba(12,18,28,.92);
}


/* ===== Right side cleanup (Scoreboard + Chat) ===== */

.online-page .online-side{
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Section wrapper */
.online-page .side-section{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height: 0; /* wichtig für scroll areas */
}

.online-page .side-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.online-page .side-head h2{
  margin:0;
  font-size: 18px;
  letter-spacing:.2px;
}

/* Scoreboard list spacing */
.online-page .scoreboard{
  margin-top: 0;
}

/* Chat input row (nicht .guess benutzen -> kollidiert) */
.online-page .chatbar{
  display:flex;
  gap:10px;
  align-items:center;
}

.online-page .chatbar input{
  flex:1;
  min-width: 0;
}

/* Chat log: echte “Box”, scrollbar, nicht unendlich */
.online-page .chatlog{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  padding: 10px;
  min-height: 220px;
  max-height: 360px;
  overflow: auto;
}

/* Messages inside log (falls deine globalen .msg existieren) */
.online-page .chatlog .msg{
  margin: 0 0 10px;
  line-height: 1.35;
}
.online-page .chatlog .msg:last-child{
  margin-bottom: 0;
}

/* HR Abstand etwas tighter */
.online-page .sepLine{
  margin: 2px 0;
}

/* Mobile: right side nicht sticky/scrollbar, sondern normal */
@media (max-width: 980px){
  .online-page .online-side{
    position: static;
    max-height: none;
    overflow: visible;
  }
  .online-page .chatlog{
    max-height: 320px;
  }
}

/* ===========================
   GAME VIEW – CLEAN LAYOUT
   =========================== */

.game-grid{
  display:grid;
  grid-template-columns: 1fr 0; /* right sidebar is outside (aside), so game uses 1 col */
  gap:14px;
}

.game-canvas{
  padding:14px;
}

/* Canvas soll "app-like" wirken und nicht riesig nach unten drücken */
#game canvas{
  width:100%;
  height: min(62vh, 720px);
  display:block;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}

/* Statusbar kompakter */
#game .statusbar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:space-between;
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}

/* Antwort-Card unter dem Canvas */
.answer-card{
  margin-top:12px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 70%),
    rgba(12,18,28,.55);
  box-shadow:
    0 18px 60px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.04) inset;
}

.answer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.answer-head h2{
  margin:0;
}

.answer-actions{
  display:flex;
  gap:10px;
}

/* Guess Form: Input + Button in einer Reihe */
.guess-wide{
  display:flex;
  gap:10px;
  align-items:center;
}

.guess-wide input{
  flex:1;
  min-width: 180px;
}

/* Log kompakt + scrollbar statt riesig */
.log-compact{
  margin-top:10px;
  max-height: 180px;
  overflow:auto;
  padding-right:6px;
}

/* RIGHT ASIDE: sticky + volle Höhe, damit es nicht “komisch” floated */
.online-side{
  position: sticky;
  top: 86px;
  height: calc(100vh - 110px);
  overflow:auto;
}

/* Abstand zwischen Scoreboard und Chat im Aside */
.online-side h2{
  margin-top: 0;
}

@media (max-width: 980px){
  #game canvas{ height: min(52vh, 560px); }
  .online-side{ position: static; height:auto; }
  .guess-wide{ flex-direction: column; align-items: stretch; }
}

html { background: var(--bg); }
body { background: none; }

body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(106,166,255,.25), transparent 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(136,255,204,.16), transparent 55%),
    var(--bg);
}