/* Basic page + responsive layout */
:root{
  --bg: #0d0d0d;
  --panel: #151515;
  --accent: #f6c427; /* Guesser color requested */
  --muted: #bdbdbd;
  --btn: #ff4444;
  --btn-hover: #cc0000;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Arial; background:var(--bg); color:#fff; -webkit-font-smoothing:antialiased;}
a{color:inherit}

/* Header logo - centered, no outer boxed container */
.site-header{display:flex; justify-content:center; align-items:center; padding:12px 8px 6px 8px;}
.logo{max-width:320px; width:76%; height:auto; display:block;}

/* App root layout - full width, elements flow */
.app-root{width:100%; max-width:1100px; margin: 6px auto 40px auto; padding: 0 12px;}

/* Small util */
.lead { color:var(--muted); font-size:0.95rem; margin-top:6px; margin-bottom:8px; }

/* Buttons - large tap targets for mobile */
button{background:var(--btn); color:white; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:700; font-size:1rem;}
button:hover{background:var(--btn-hover);}

/* Inputs - restored stylized version you preferred */
input[type="text"], input[type="number"] {
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color: #fff;
  outline: none;
  font-size:1rem;
}
input:focus { box-shadow: 0 4px 18px rgba(0,0,0,0.6) inset, 0 0 0 4px rgba(246,196,39,0.06); }

/* Scoreboard - top area on many screens */
.scoreboard {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin:10px 0 16px 0;
}

/* Score cards - stylized */
.scorecard {
  min-width:110px;
  max-width:160px;
  background: linear-gradient(180deg, #121214, #0f0f0f);
  border-radius:12px;
  padding:10px 12px;
  text-align:center;
  box-shadow: 0 8px 22px rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.03);
  position:relative;
}
.score-name { color:var(--muted); font-weight:700; font-size:0.95rem; }
.score-value { font-size:1.5rem; font-weight:900; color:var(--accent); margin-top:6px; }

/* Guesser highlight specifics */
.guesser-highlight {
  border: 2px solid var(--accent);
  box-shadow: 0 6px 20px rgba(246,196,39,0.12), 0 0 20px rgba(246,196,39,0.06) inset;
  transform: translateZ(0);
  animation: guesserPulse 2s ease-in-out infinite;
}
@keyframes guesserPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

/* Guesser ribbon - stylized banner */
.guesser-ribbon {
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%) translateY(-10px);
  background: linear-gradient(180deg, var(--accent), #d9a71a);
  color: #111;
  font-weight:900;
  padding:6px 12px;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(246,196,39,0.14);
  font-size:0.85rem;
  opacity:0;
  animation: ribbonIn 700ms cubic-bezier(.2,1.2,.2,1) forwards;
}
@keyframes ribbonIn {
  0% { transform:translateX(-50%) translateY(-22px) scale(0.9); opacity:0; }
  60% { transform:translateX(-50%) translateY(2px) scale(1.06); opacity:1; }
  100% { transform:translateX(-50%) translateY(0) scale(1); opacity:1; }
}

/* Player cards (article selection) - restored previous style */
.card-grid { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:8px; }
.player-card {
  background: linear-gradient(180deg,#151515,#0f0f0f);
  border-radius:12px;
  width:170px;
  min-height:120px;
  padding:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.03);
}
.player-name { font-weight:800; color:var(--accent); text-align:center; margin-bottom:6px; }
.small-muted { font-size:0.92rem; color:var(--muted); margin-bottom:8px; text-align:center; }

/* Saved badge */
.ready-badge { background:#2a9d2a; color:#042; padding:6px 10px; border-radius:999px; font-weight:800; }

/* Round header / timer area */
.round-header { display:flex; align-items:center; justify-content:center; gap:16px; margin:12px 0; flex-wrap:wrap; }
.round-title { font-weight:900; color:var(--accent); font-size:1.1rem; letter-spacing:0.6px; }
.timer { color:var(--muted); font-weight:700; }

/* Award screen message */
.award-msg { font-size:1.05rem; color:var(--muted); margin-top:8px; }

/* Modal */
.modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); z-index:120; }
.modal.hidden { display:none; }
.modal-content { width:92%; max-width:780px; background:#0b0b0b; border-radius:14px; padding:18px; color:#fff; position:relative; box-shadow: 0 18px 60px rgba(0,0,0,0.7); border:1px solid rgba(255,255,255,0.03); }
.modal-close { position:absolute; right:10px; top:8px; border:none; background:transparent; color:#fff; font-size:18px; cursor:pointer; }

/* Confetti canvas */
.confetti-canvas { position:fixed; inset:0; z-index:110; pointer-events:none; display:block; }
.confetti-canvas.hidden{display:none;}

/* Utilities */
.center { text-align:center; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.space-top { margin-top:12px; }

/* Responsive */
@media (max-width:760px){
  .player-card { width:46%; }
  .logo { max-width:280px; }
}
@media (max-width:480px){
  .player-card { width:100%; }
  .logo { max-width:86%; }
  .scorecard { min-width:100px; max-width:220px; }
  button { width:100%; }
}