/* live.css - shared room, tool and player UI for quiz/werkzeuge. */

.tool-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1rem;
  align-items:stretch;
  margin:1.2rem 0;
}

.tool-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.5rem;
  width:100%;
  min-height:180px;
  padding:1rem;
  text-align:left;
  color:inherit;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.tool-card:hover,
.tool-card:focus-visible{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
}

.tool-card__icon{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background:color-mix(in srgb,var(--accent) 14%,var(--panel));
  color:var(--accent);
  font-size:1.45rem;
  flex:0 0 auto;
}

.tool-card__title{
  font-weight:850;
  color:var(--head);
  font-size:1.08rem;
  line-height:1.2;
}

.tool-card__desc{
  color:var(--muted);
  font-size:.92rem;
  line-height:1.45;
}

.tool-card__tag{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin-top:auto;
  padding:.18rem .58rem;
  border-radius:var(--radius-pill);
  color:var(--muted);
  background:var(--soft);
  font-size:.74rem;
  font-weight:800;
}

.live-pick__btn{
  display:flex;
  align-items:center;
  gap:.8rem;
  width:100%;
  min-height:92px;
  padding:1rem;
  text-align:left;
  color:var(--ink);
  background:var(--panel);
  border:1.5px solid var(--line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow);
}

.live-pick__btn:hover,
.live-pick__btn:focus-visible{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,var(--panel));
}

.live-pick__btn .em{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:0 0 auto;
  border-radius:12px;
  background:var(--soft);
  font-size:1.55rem;
}

.live-pick__btn strong{
  display:block;
  color:var(--head);
  line-height:1.2;
}

.live-pick__btn small{
  display:block;
  margin-top:.18rem;
  color:var(--muted);
  font-weight:600;
}

.join-card{
  max-width:620px;
  margin:1rem auto;
}

.room-code{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:6ch;
  padding:.16rem .55rem;
  border-radius:10px;
  background:var(--head);
  color:#fff;
  font-family:var(--font-mono);
  font-size:1.25rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 6px 16px rgba(0,0,0,.16);
}

div.room-code{
  display:flex;
  width:max-content;
  margin:.6rem auto;
  padding:.35rem .85rem;
  font-size:2rem;
}

.live-note{
  margin:.8rem 0;
  padding:.75rem .9rem;
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));
  border-left-width:4px;
  border-radius:var(--radius-btn);
  background:color-mix(in srgb,var(--accent) 9%,var(--panel));
  color:var(--ink);
}

.qr{
  display:grid;
  place-items:center;
  min-height:180px;
  margin:.7rem auto;
}

.qr svg{
  max-width:min(300px,78vw);
  height:auto;
  background:#fff;
  border-radius:8px;
  padding:.5rem;
  box-shadow:0 8px 22px rgba(0,0,0,.14);
}

.lobby-people{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  justify-content:center;
  margin:1rem auto;
  max-width:760px;
}

.lobby-people span:not(.qz-muted){
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:.2rem .7rem;
  border-radius:var(--radius-pill);
  background:var(--soft);
  border:1px solid var(--line);
  color:var(--head);
  font-weight:800;
}

.big-q{
  max-width:900px;
  margin:1rem auto;
  color:var(--head);
  font-size:2rem;
  font-weight:900;
  line-height:1.2;
  text-align:center;
}

.play-tiles{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem;
  margin:1rem auto;
  max-width:900px;
}

.play-tile{
  display:flex;
  align-items:center;
  gap:.7rem;
  min-height:72px;
  padding:1rem;
  color:#fff;
  border:0;
  border-radius:14px;
  box-shadow:0 5px 0 rgba(0,0,0,.25);
  font-weight:900;
  font-size:1.05rem;
  text-align:left;
}

.play-tile .sym{
  display:inline-grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:0 0 auto;
  border-radius:8px;
  background:rgba(255,255,255,.22);
  font-size:1.2rem;
}

.play-tile.chosen,
.play-tile[aria-pressed="true"]{
  outline:4px solid #fff;
  outline-offset:-3px;
  filter:brightness(1.08);
}

.play-tile:disabled{
  cursor:default;
  opacity:.72;
}

.play-tile.t0{ background:var(--k-red); }
.play-tile.t1{ background:var(--k-blue); }
.play-tile.t2{ background:var(--k-yellow); }
.play-tile.t3{ background:var(--k-green); }
.play-tile.t4{ background:#7d3cc9; }
.play-tile.t5{ background:#0c8e7a; }
.play-tile.t6{ background:#b8860b; }
.play-tile.t7{ background:#3a3326; }

.live-bars{
  display:flex;
  flex-direction:column;
  gap:.65rem;
  margin:.8rem 0;
}

.live-bar{
  display:grid;
  grid-template-columns:minmax(7rem,1.1fr) minmax(120px,2fr) auto;
  align-items:center;
  gap:.65rem;
}

.live-bar__label{
  min-width:0;
  font-weight:800;
  color:var(--head);
  overflow-wrap:anywhere;
}

.live-bar__track{
  height:18px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--soft);
  overflow:hidden;
}

.live-bar__fill{
  height:100%;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .35s var(--ease);
}

.live-bar__n{
  color:var(--muted);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

@media (max-width:640px){
  .tool-grid{
    grid-template-columns:1fr;
  }

  /* Kahoot-Kompaktraster: 4 Kacheln müssen ohne Scrollen auf einen
     Handy-Screen passen (Zeitdruck!) — 2×2 statt 1 Spalte. */
  .play-tiles{
    grid-template-columns:1fr 1fr;
    gap:.55rem;
  }

  .play-tile{
    min-height:64px;
    padding:.7rem .8rem;
    font-size:.95rem;
  }

  .live-bar{
    grid-template-columns:1fr;
    gap:.25rem;
  }

  .big-q{
    font-size:1.45rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .tool-card,
  .live-bar__fill{
    transition:none;
  }

  .tool-card:hover,
  .tool-card:focus-visible{
    transform:none;
  }
}