/* shared.css — theme tokens + base for both player and admin pages.
   Playful Kahoot-style vivid rainbow. Thai-friendly system font stack. */

:root {
  /* Brand + surfaces */
  --stpi-navy: #0f1b4c;
  --bg-grad-a: #7b2ff7;
  --bg-grad-b: #f107a3;
  --panel: rgba(255, 255, 255, 0.96);
  --panel-solid: #ffffff;
  --ink: #1b1340;
  --ink-soft: #5a5378;
  --white: #ffffff;

  /* The four choice colors (position 1..4). */
  --c1: #e21b3c; /* red    */
  --c2: #1368ce; /* blue   */
  --c3: #d89e00; /* yellow */
  --c4: #26890c; /* green  */
  --c1-lo: #b3122c;
  --c2-lo: #0e4f9e;
  --c3-lo: #a87a00;
  --c4-lo: #1c6a08;

  --gold: #ffd23f;
  --silver: #cfd8e3;
  --bronze: #e08a3c;

  --radius: 18px;
  --radius-lg: 26px;
  --shadow: 0 10px 30px rgba(20, 10, 50, 0.28);
  --shadow-sm: 0 4px 14px rgba(20, 10, 50, 0.18);

  --font: "Noto Sans Thai", "Sarabun", "Leelawadee UI", "Segoe UI",
    system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--font);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

body {
  background: linear-gradient(135deg, var(--bg-grad-a) 0%, var(--bg-grad-b) 100%);
  background-attachment: fixed;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

.brand-logo {
  height: 44px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.hidden { display: none !important; }

.card {
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px;
}

/* Springy entrance used across screens */
@keyframes popIn {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes floatUpFade {
  0% { transform: translateY(0) scale(0.7); opacity: 0; }
  25% { transform: translateY(-8px) scale(1.15); opacity: 1; }
  100% { transform: translateY(-120px) scale(1.1); opacity: 0; }
}
@keyframes spinnerRot { to { transform: rotate(360deg); } }

.spinner {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spinnerRot 0.9s linear infinite;
  margin: 18px auto;
}

/* Choice color/shape helpers shared by player buttons + admin tiles */
.choice-c1 { background: var(--c1); box-shadow: 0 6px 0 var(--c1-lo); }
.choice-c2 { background: var(--c2); box-shadow: 0 6px 0 var(--c2-lo); }
.choice-c3 { background: var(--c3); box-shadow: 0 6px 0 var(--c3-lo); }
.choice-c4 { background: var(--c4); box-shadow: 0 6px 0 var(--c4-lo); }