:root{
  --bg:#0f172a; --card:#0b1221; --text:#e5e7eb; --muted:#94a3b8;
  --accent:#60a5fa; --ok:#10b981; --warn:#f59e0b; --danger:#ef4444;
  --border: rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#0f172a;
  color:var(--text); font:16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
}
.wrap{max-width:1000px;margin:0 auto;padding:20px}
@media (max-width:768px){ .wrap{padding:12px} }
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.pill{background:#0c1324;border:1px solid var(--border);padding:.35rem .7rem;border-radius:999px;color:var(--muted)}
.pill.ok{color:#bbf7d0;border-color:rgba(16,185,129,.6)}
.grid{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media (max-width:900px){ .grid{grid-template-columns:1fr} }
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid var(--border); border-radius:14px; padding:14px
}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:.5rem 0}
@media (max-width:768px){ .row input{flex:1;min-width:0} }
input,select,button{
  background:#0b1020;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px 12px;
  font-size:16px
}
button{cursor:pointer;font-size:16px}
@media (max-width:768px){ button{padding:12px 16px;min-height:44px} }
.primary{background:linear-gradient(180deg, rgba(34,197,94,.1), rgba(34,197,94,.06)); border-color:rgba(34,197,94,.5)}
.accent{background:linear-gradient(180deg, rgba(96,165,250,.14), rgba(96,165,250,.06)); border-color:rgba(96,165,250,.5)}
.ghost{background:transparent}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.tiny{font-size:.8rem}
.big{font-weight:800;font-size:1.4rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0}
@media (max-width:600px){ .two{grid-template-columns:1fr} }
.list{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:8px;max-height:300px;overflow:auto}
.tile{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;background:#0c1222;border:1px solid var(--border);border-radius:10px}
.who{font-weight:700}
.timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.8rem}
.timer.ok{color:#bbf7d0}.timer.warn{color:#fde68a}.timer.danger{color:#fecaca}

/* Room code display styles */
.room-code-display {
  display: flex;
  align-items: center;
  gap: 8px;
}
.room-code {
  background: linear-gradient(180deg, rgba(96,165,250,.14), rgba(96,165,250,.06));
  border: 1px solid rgba(96,165,250,.5);
  color: var(--accent);
  font-weight: 800;
  font-size: 1.1rem;
  padding: 6px 12px;
  border-radius: 8px;
  letter-spacing: 2px;
}
.room-code-big {
  background: linear-gradient(180deg, rgba(96,165,250,.14), rgba(96,165,250,.06));
  border: 1px solid rgba(96,165,250,.5);
  color: var(--accent);
  font-weight: 800;
  font-size: 2.5rem;
  padding: 16px 24px;
  border-radius: 12px;
  letter-spacing: 4px;
  text-align: center;
  margin: 12px 0;
}
.room-info {
  text-align: center;
}
.room-code-large {
  margin: 16px 0;
}

/* Chair section and floating assume chair button */
.chair-section {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.floating-assume-chair {
  background: linear-gradient(135deg, rgba(96,165,250,.2), rgba(96,165,250,.1));
  border: 2px solid rgba(96,165,250,.7);
  color: var(--accent);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: gentle-pulse 2s ease-in-out infinite;
  box-shadow: 0 4px 12px rgba(96,165,250,.2);
  white-space: nowrap;
  font-size: 0.9rem;
}

.floating-assume-chair:hover {
  background: linear-gradient(135deg, rgba(96,165,250,.3), rgba(96,165,250,.15));
  border-color: rgba(96,165,250,.9);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(96,165,250,.3);
}

.floating-assume-chair:active {
  transform: translateY(0);
}

@keyframes gentle-pulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(96,165,250,.2);
  }
  50% {
    box-shadow: 0 4px 16px rgba(96,165,250,.4);
  }
}

.assume-chair-status {
  text-align: center;
  margin: 8px 0;
  min-height: 1.2rem;
}

@media (max-width: 768px) {
  .header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .chair-section {
    justify-content: center;
  }
  
  .floating-assume-chair {
    font-size: 0.85rem;
    padding: 6px 12px;
  }
  
  /* Better mobile spacing */
  .card {
    padding: 12px;
  }
  
  /* Make room code display more compact on mobile */
  .room-code-display {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  /* Ensure touch-friendly buttons */
  button {
    width: 100%;
  }
  
  /* Better input sizing on mobile */
  input[type="number"] {
    width: 100px !important;
  }
  
  /* Optimize room code display for mobile */
  .room-code-big {
    font-size: 2rem;
    padding: 12px 16px;
    letter-spacing: 3px;
  }
}