/* ============================================================
   FACT FEUD — theme
   Palette from the class style guide:
   navy #233166 · orange #f36e23 · amber #faae1c · pale #c9d6ee · soft #4d5b8c
   Display: Iowan Old Style / Georgia. Body: system. Util: mono.
   ============================================================ */
:root {
  --navy:#233166; --navy-deep:#161f47; --navy-black:#0d1330;
  --orange:#f36e23; --amber:#faae1c; --pale:#c9d6ee; --white:#fff; --soft:#4d5b8c;
  --good:#2f9e57; --bad:#c9372c;
  --display:"Iowan Old Style", Georgia, "Times New Roman", serif;
  --body:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --util:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gold-grad:linear-gradient(180deg,#ffe9a8 0%, var(--amber) 38%, var(--orange) 100%);
  --tile-grad:linear-gradient(180deg,#3a4d99 0%, var(--navy) 55%, var(--navy-deep) 100%);
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--body); font-size:16px; line-height:1.5; color:var(--pale);
  min-height:100vh;
  background:
    radial-gradient(circle, rgba(201,214,238,.13) 2px, transparent 2.6px) 0 0/28px 28px,
    radial-gradient(120% 90% at 50% 0%, #2c3c7e 0%, var(--navy-deep) 55%, var(--navy-black) 100%);
  background-attachment: fixed;
}

/* ---------- Logo badge (original Fact Feud mark) ---------- */
.ff-badge { display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  padding:.55rem 1.9rem .7rem; border-radius:50%/46%;
  background:
    radial-gradient(circle, rgba(255,255,255,.14) 1.5px, transparent 2px) 0 0/14px 14px,
    radial-gradient(90% 120% at 50% 10%, #3a4d99, var(--navy) 70%);
  border:3px solid #fff;
  box-shadow:0 0 0 6px var(--orange), 0 0 0 8px #a8420f, 0 8px 24px rgba(0,0,0,.55);
  user-select:none; }
.ff-badge .line { font-family:var(--display); font-weight:700; font-style:italic;
  letter-spacing:.04em; line-height:.92; text-transform:uppercase;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(1px 2px 0 var(--navy-black)) drop-shadow(0 0 6px rgba(0,0,0,.4)); }
.ff-badge.big .line { font-size:clamp(1.6rem, 4.5vw, 2.6rem); }
.ff-badge.small .line { font-size:1.05rem; }
.ff-badge .line:last-child { padding-left:.9em; }

/* ---------- Structural ---------- */
.ff-shell { max-width:1180px; margin:0 auto; padding:1.1rem 1.1rem 3rem; }
.ff-topbar { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.ff-topbar .spacer { flex:1; }
h1,h2,h3 { font-family:var(--display); color:var(--white); }
h2 { font-size:1.25rem; margin:1.4rem 0 .6rem; }
a { color:var(--amber); }
.muted { color:var(--soft); }
.eyebrow { display:inline-block; font-family:var(--util); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--navy-black); background:var(--gold-grad);
  padding:.28rem .8rem; border-radius:99px; font-weight:700; }

/* ---------- Board tiles ---------- */
.tile { background:var(--tile-grad); border:2px solid var(--amber); border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 14px rgba(250,174,28,.22), 0 6px 18px rgba(0,0,0,.45);
  padding:1rem 1.2rem; }
.tile.quiet { border-color:var(--soft); box-shadow:0 4px 14px rgba(0,0,0,.35); }

/* ---------- Buttons & inputs ---------- */
button, .btn { font-family:var(--body); font-weight:700; cursor:pointer; border-radius:10px;
  border:2px solid var(--navy-black); padding:.5rem 1rem; font-size:.95rem;
  background:var(--gold-grad); color:var(--navy-black);
  box-shadow:0 2px 0 var(--navy-black), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .05s ease; }
button:hover { filter:brightness(1.06); }
button:active { transform:translateY(2px); box-shadow:0 0 0 var(--navy-black); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:3px solid var(--amber); outline-offset:2px; }
button.ghost { background:transparent; color:var(--pale); border-color:var(--soft); box-shadow:none; }
button.danger { background:linear-gradient(180deg,#ff8f7e,#c9372c); color:#fff; }
button.big { font-size:1.15rem; padding:.8rem 1.4rem; }
button:disabled { opacity:.45; cursor:not-allowed; }
input, select, textarea { font-family:var(--body); font-size:1rem; color:var(--navy-black);
  background:var(--white); border:2px solid var(--soft); border-radius:9px; padding:.5rem .7rem; }
textarea { width:100%; min-height:4.2rem; }
label { display:block; font-size:.82rem; font-weight:700; color:var(--pale); margin:.6rem 0 .2rem; }
.row { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }

/* ---------- Reveal flip tile (signature element) ---------- */
.flip { perspective:1100px; width:min(340px, 80vw); height:150px; margin:0 auto; }
.flip .inner { position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.7,.25,1); }
.flip.revealed .inner { transform:rotateX(180deg); }
.flip .face { position:absolute; inset:0; backface-visibility:hidden; display:flex;
  align-items:center; justify-content:center; border-radius:16px;
  background:var(--tile-grad); border:3px solid var(--amber);
  box-shadow:0 0 22px rgba(250,174,28,.3), 0 8px 20px rgba(0,0,0,.5); }
.flip .front { font-family:var(--display); font-size:4rem; font-weight:700; color:var(--amber); }
.flip .back { transform:rotateX(180deg); font-family:var(--display); font-weight:700;
  font-size:clamp(2rem, 6vw, 3.2rem);
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(1px 2px 0 var(--navy-black)); }
@media (prefers-reduced-motion: reduce) {
  .flip .inner { transition:none; }
  * { animation:none !important; }
}

/* ---------- Citation card ---------- */
.citation { background:var(--white); color:var(--navy); border-radius:10px;
  border-left:8px solid var(--orange); padding:.8rem 1rem .8rem 1.1rem; font-size:.92rem;
  box-shadow:0 6px 16px rgba(0,0,0,.4); }
.citation .cite-label { font-family:var(--util); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--orange); font-weight:700; display:block; margin-bottom:.25rem; }
.citation p { margin:0; padding-left:1.4em; text-indent:-1.4em; /* hanging indent, like a real bibliography */ }
.citation a { color:var(--navy); word-break:break-all; }

/* ---------- Player cards ---------- */
.player { text-align:center; padding:.9rem .6rem; border-radius:14px;
  background:var(--tile-grad); border:2px solid var(--soft); min-width:150px; }
.player.hot { border-color:var(--amber); box-shadow:0 0 18px rgba(250,174,28,.45); }
.player .pname { font-family:var(--display); font-size:1.25rem; color:var(--white); font-weight:700; }
.player .pscore { font-family:var(--display); font-size:2.6rem; font-weight:700;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.player .pkey { font-family:var(--util); font-size:.68rem; color:var(--pale); opacity:.8; }

/* ---------- Toast ---------- */
#ff-toast { position:fixed; left:50%; bottom:1.2rem; transform:translate(-50%, 20px);
  background:var(--good); color:#fff; font-weight:700; padding:.6rem 1.2rem; border-radius:99px;
  opacity:0; pointer-events:none; transition:.25s; z-index:99; box-shadow:0 6px 18px rgba(0,0,0,.5); }
#ff-toast.show { opacity:1; transform:translate(-50%,0); }
#ff-toast.bad { background:var(--bad); }

/* ---------- Admin tables ---------- */
table.list { width:100%; border-collapse:collapse; font-size:.92rem; }
table.list th { text-align:left; font-family:var(--util); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--amber); padding:.4rem .5rem; border-bottom:2px solid var(--soft); }
table.list td { padding:.45rem .5rem; border-bottom:1px solid rgba(77,91,140,.4); color:var(--pale); }
table.list tr.sel td { background:rgba(250,174,28,.12); }
table.list tr:hover td { background:rgba(201,214,238,.07); cursor:pointer; }
.pill { display:inline-block; font-family:var(--util); font-size:.68rem; background:var(--soft);
  color:#fff; border-radius:99px; padding:.1rem .55rem; margin:.06rem .12rem .06rem 0; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:820px) { .grid2 { grid-template-columns:1fr; } }