/* SHOT CLOCK title screen, class picker, game browser, editor, and rules. Loads last. */

/* ---------- home ---------- */
.home { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.home-hero { display: grid; gap: 16px; justify-items: start; align-content: center; position: relative; isolation: isolate; min-width: 0; }
.home-hero::before {
  content: ''; position: absolute; left: 30%; top: 30%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(255, 200, 80, .1) 0deg 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 30%); mask: radial-gradient(circle, #000 0%, transparent 30%);
  animation: rays 50s linear infinite; pointer-events: none;
}
.home-title { display: flex; align-items: center; flex-wrap: nowrap; gap: clamp(12px, 1.6vw, 26px); margin: 0; }
.home-title > span:last-child {
  font: 800 clamp(56px, 5.8vw, 128px)/.9 var(--display); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap;
  background: linear-gradient(180deg, #fff7da 0%, #f6cf62 36%, #d29a27 60%, #f7d97c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .045em #000; paint-order: stroke fill;
  filter: drop-shadow(1px 1px 0 var(--extrude)) drop-shadow(2px 2px 0 var(--extrude)) drop-shadow(2px 3px 0 var(--extrude-2)) drop-shadow(3px 4px 0 var(--extrude-2)) drop-shadow(6px 10px 14px rgba(0,0,0,.65));
  display: inline-block; transform: skewX(-6deg);
}
.logo-mark.huge { font-size: clamp(30px, 3.4vw, 70px); padding: .18em .16em .14em; border-width: 4px; border-radius: 14px; }
.home-tag { margin: 0; font: 700 clamp(20px, 2.1vw, 36px)/1.1 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--text); }
.home-join { margin: 0; color: var(--muted); font-size: clamp(16px, 1.3vw, 22px); }
.home-join strong { color: var(--gold); }
.home-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.patch-notes { margin-top: 8px; padding: 14px 16px; border: 1px dashed color-mix(in srgb, var(--gold) 45%, var(--line)); border-radius: 12px; background: color-mix(in srgb, #000 70%, transparent); max-width: 520px; }
.patch-notes .eyebrow { margin-bottom: 8px; }
.patch { padding-block: 4px; }
.patch-title { margin: 0; display: flex; gap: 10px; align-items: baseline; font: 700 16px/1.2 var(--display); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.patch.latest .patch-title { color: var(--text); font-size: 18px; }
.patch-v { font: 700 13px/1 var(--led); color: var(--gold); min-width: 3.2em; }
.patch ul { margin: 6px 0 4px; padding-left: 20px; display: grid; gap: 3px; font-size: 14px; color: var(--text); }

.home-classes { display: grid; gap: 14px; align-content: center; }
.class-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); }
.class-card {
  position: relative; display: grid; gap: 8px; align-content: start; text-align: left; cursor: pointer;
  min-height: clamp(150px, 22vh, 230px); padding: clamp(16px, 1.8vw, 26px); border-radius: 16px;
  background: radial-gradient(rgba(220, 174, 69, .08) 1.2px, transparent 1.6px) 0 0 / 9px 9px, #000;
  border: 2px solid #2e281e; color: var(--text); box-shadow: 8px 8px 0 #000;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  animation: cardIn .5s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(var(--i, 0) * 70ms);
}
.class-card:hover, .class-card:focus-visible { transform: translate(-3px, -3px) rotate(-.6deg); border-color: var(--gold); box-shadow: 11px 11px 0 #000, 0 0 40px color-mix(in srgb, var(--gold) 25%, transparent); }
@keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.class-num { font: 700 clamp(20px, 1.8vw, 30px)/1 var(--led); color: var(--gold); text-shadow: 0 0 .25em color-mix(in srgb, var(--gold) 60%, transparent); }
.class-name { font: 800 clamp(26px, 2.6vw, 46px)/.95 var(--display); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
.class-meta { font: 600 14px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.class-progress { display: grid; gap: 6px; margin-top: auto; font-size: 13px; color: var(--muted); }
.class-progress .bar { height: 6px; border-radius: 999px; background: #1d1912; overflow: hidden; }
.class-progress .bar i { display: block; height: 100%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }

/* ---------- class view ---------- */
.classview { display: grid; grid-template-rows: auto 1fr auto; gap: 18px; align-content: start; }
.class-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.class-head-text { min-width: 0; }
.class-head-text p { margin: 4px 0 0; }
.class-title { margin: 0; font: 800 clamp(34px, 4vw, 72px)/.95 var(--display); text-transform: uppercase;
  background: linear-gradient(180deg, #fff7da 0%, #f6cf62 36%, #d29a27 60%, #f7d97c 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .04em #000; paint-order: stroke fill; filter: drop-shadow(2px 3px 0 var(--extrude-2)) drop-shadow(4px 8px 12px rgba(0,0,0,.6)); }
.title-input { font: 800 clamp(26px, 3vw, 48px)/1 var(--display) !important; text-transform: uppercase; min-height: 60px !important; }
.units { display: grid; gap: clamp(18px, 2.4vh, 30px); }
.unit { display: grid; gap: 12px; }
.unit-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.unit-num { font: 800 15px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); background: linear-gradient(180deg, #f7d77a, #d6a234); padding: 7px 14px 6px; transform: skewX(-12deg); box-shadow: 3px 3px 0 #000, 0 0 0 2px #000; }
.unit-name { margin: 0; font: 800 clamp(22px, 2vw, 34px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.unit-input { max-width: 420px; font: 700 20px/1 var(--display) !important; text-transform: uppercase; }
.unit-tools { display: flex; gap: 6px; margin-left: auto; }
.unit-tools .btn { min-height: 36px; padding: 0 12px; font-size: 13px; }
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.game-card {
  display: grid; gap: 6px; align-content: start; text-align: left; cursor: pointer; color: var(--text);
  padding: 16px 18px; border-radius: 12px; background: #000; border: 2px solid #2e281e; min-height: 132px;
  transition: transform .12s, border-color .12s;
}
.game-card:hover, .game-card:focus-visible { border-color: var(--gold); transform: translateY(-2px); }
.game-name { font: 800 clamp(20px, 1.6vw, 28px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.game-meta { font: 600 13px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.game-preview { font-size: 13px; color: var(--muted); line-height: 1.35; }
.played { justify-self: start; margin-top: 4px; font: 700 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.played.new { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.game-card.add { place-content: center; text-align: center; border-style: dashed; color: var(--gold); font: 800 20px/1 var(--display); text-transform: uppercase; }
body.editing .game-card:not(.add) { border-style: dashed; border-color: color-mix(in srgb, var(--gold) 45%, #2e281e); }
.add-unit { justify-self: start; }
.save-bar {
  position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; align-items: center; gap: 12px;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel) 96%, transparent); box-shadow: 0 -10px 40px rgba(0,0,0,.6);
}
.save-bar #saveState { margin-right: auto; }
.back-link { justify-self: start; }

/* ---------- game drawer ---------- */
.gdrawer {
  position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); overflow: auto;
  display: grid; gap: 14px; align-content: start; background: var(--panel); border-left: 2px solid var(--gold);
  box-shadow: -30px 0 80px rgba(0,0,0,.7);
  padding: calc(18px + env(safe-area-inset-top, 0px)) calc(22px + env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) 22px;
  animation: drawerIn .35s cubic-bezier(.2, 1, .3, 1);
}
@keyframes drawerIn { from { transform: translateX(40px); opacity: 0; } }
.gd-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gd-title { margin: 0; font: 800 clamp(36px, 3.2vw, 56px)/.95 var(--display); text-transform: uppercase; color: var(--text); }
.gd-task { margin: 0; font-size: 18px; }
.gd-meta { margin: 0; font: 600 14px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.gd-prompts { display: flex; flex-wrap: wrap; gap: 6px; }
.gd-prompts span { font: 700 14px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; padding: 7px 10px; border-radius: 6px; background: #000; border: 1px solid #2e281e; color: #cbbfa9; }
.gd-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.gdrawer .btn.primary.big { width: 100%; }

/* ---------- passcode box ---------- */
.passbox {
  position: fixed; z-index: 80; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px));
  display: grid; gap: 12px; padding: 22px; border-radius: 14px; background: var(--panel); border: 2px solid var(--gold);
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.7), 0 30px 80px rgba(0,0,0,.7);
}
.passbox p { margin: 0; }

/* ---------- rules ---------- */
.rules {
  position: fixed; inset: 0; z-index: 70; overflow: auto; display: grid; place-items: center; isolation: isolate;
  background: radial-gradient(ellipse at 50% 40%, rgba(40, 32, 14, .96), rgba(0, 0, 0, .98));
  padding: max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.rules::before {
  content: ''; position: fixed; left: 50%; top: 45%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(255, 196, 70, .12) 0deg 6deg, transparent 6deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 32%); mask: radial-gradient(circle, #000 0%, transparent 32%);
  animation: rays 30s linear infinite;
}
.rules-inner { width: min(1400px, 100%); display: grid; gap: clamp(18px, 3vh, 34px); }
.rule-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); }
.rule-card {
  display: grid; gap: 10px; align-content: start; padding: clamp(16px, 1.8vw, 28px); border-radius: 16px; background: #000; border: 2px solid #2e281e;
  box-shadow: 8px 8px 0 #000; transform: rotate(calc((var(--i) - 1.5) * .8deg));
  animation: cardIn .55s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i) * 140ms);
}
.rule-num { font: 700 clamp(56px, 6vw, 110px)/1 var(--led); color: var(--gold); text-shadow: 0 0 .05em #fff3c4, 0 0 .25em color-mix(in srgb, var(--gold) 70%, transparent); }
.rule-card h3 { margin: 0; font: 800 clamp(34px, 3.4vw, 64px)/.95 var(--display); text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #f3ede1 55%, #cfc6b4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .04em #000; paint-order: stroke fill; }
.rule-card p { margin: 0; font-size: clamp(16px, 1.3vw, 22px); line-height: 1.35; }
.house { display: grid; gap: 10px; }
.house-list { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; font: 700 clamp(18px, 1.6vw, 28px)/1.25 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.house-list { padding-left: 2.2em; }
.house-list li { padding-left: .4em; }
.house-list li::marker { color: var(--gold); font-family: var(--display); font-weight: 800; }
.house-edit { display: grid; gap: 10px; max-width: 900px; }
.rules-actions { display: flex; gap: 12px; align-items: center; }
.lobby-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .home { grid-template-columns: minmax(0, 1fr); }
  .class-grid, .rule-cards { grid-template-columns: minmax(0, 1fr); }
  .class-head { grid-template-columns: minmax(0, 1fr) auto; }
  .class-head #backBtn { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .class-card, .rule-card, .gdrawer, .home-hero::before, .rules::before { animation: none; }
}
body[data-screen=home] .beams, body[data-screen=class] .beams, body[data-screen=results] .beams { display: block; }

.game-card.trivia .game-meta { color: #8fd0ff; }
.game-card.trivia { border-color: #1e2d3a; }
.game-card.trivia:hover { border-color: #8fd0ff; }

/* ---------- team randomizer ---------- */
.teamsbox .teams-inner { width: min(1400px, 100%); display: grid; gap: 18px; align-content: start; }
.teams-controls { display: grid; grid-template-columns: auto auto 1fr; gap: 24px; align-items: end; }
.teams-controls p { margin: 0 0 12px; }
.teams-stage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.team-card { background: #000; border: 3px solid var(--c); border-radius: 16px; padding: 16px 18px; display: grid; gap: 12px; align-content: start; box-shadow: 8px 8px 0 #000, 0 0 40px color-mix(in srgb, var(--c) 25%, transparent); }
.team-card.in { animation: cardIn .5s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i) * 120ms); }
.team-head { display: flex; align-items: center; gap: 12px; }
.team-head h3 { margin: 0; font: 800 clamp(24px, 2.4vw, 40px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--c); }
.team-swatch { width: 18px; height: 18px; border-radius: 4px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.team-members { display: flex; flex-wrap: wrap; gap: 8px; }
.team-member { font: 800 clamp(16px, 1.4vw, 24px)/1 var(--display); text-transform: uppercase; letter-spacing: .03em; padding: 9px 12px 8px; border-radius: 8px; background: #f3ede1; color: #100f0d; border: 2px solid #000; box-shadow: 3px 3px 0 #000; }
.team-member.in { animation: sticker .55s cubic-bezier(.2, 1.8, .4, 1) both; animation-delay: calc(400ms + var(--j) * 90ms); }
.name { position: relative; }
.name[style*="--team"] { border-color: var(--team) !important; box-shadow: 4px 4px 0 var(--team) !important; }
.name-team { position: absolute; left: 8px; bottom: -11px; font: 700 10px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; background: var(--team); color: #100f0d; padding: 3px 6px; border-radius: 4px; }
.team-leaders { list-style: none; padding: 0; margin: 10px 0 18px; display: grid; gap: 4px; }
.team-leaders li { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font: 800 clamp(18px, 1.5vw, 24px)/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.team-leaders li::before { content: ''; width: 14px; height: 14px; border-radius: 3px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.team-leaders li span:last-child { color: var(--gold); font-family: var(--led); }
@media (max-width: 900px) { .teams-controls { grid-template-columns: minmax(0, 1fr); } }