@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#08090b;--panel:#101215;--border:#26292d;--text:#f0f1ed;--muted:#929790;--lime:#cefa73;--violet:#b1a0ff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px 'DM Sans',sans-serif}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{background:var(--lime);color:#151b0b;border:1px solid transparent;border-radius:7px;padding:13px 20px;font-weight:700;cursor:pointer;transition:.18s}button:hover{filter:brightness(1.12);transform:translateY(-1px)}button:disabled{opacity:.4;cursor:default;transform:none}button.secondary{background:#1a1d20;border-color:#34383c;color:var(--text)}button.text-button{background:none;color:var(--muted);padding:9px 0;font-weight:500}input,select{background:#0b0d0e;border:1px solid #34383c;color:var(--text);border-radius:6px;padding:13px 14px;width:100%;outline:none}input:focus,select:focus{border-color:var(--lime);box-shadow:0 0 0 2px #cefa7319}button:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:4px}label{display:block;font-size:13px;color:#c9ccc7;margin:16px 0}label input,label select{margin-top:8px}a{color:inherit;text-decoration:none}header{height:94px;margin:0 auto;max-width:1180px;padding:0 30px;display:flex;align-items:center;gap:28px;border-bottom:1px solid var(--border)}.brand{font:700 33px 'Space Grotesk',sans-serif;letter-spacing:-2px}.brand span{font-size:13px;margin-left:4px;color:var(--lime)}.eyebrow,.section-label{font-size:10px;letter-spacing:2px;font-weight:600}.eyebrow{color:var(--muted)}.accent{color:var(--lime)}#account{margin-left:auto;display:flex;gap:14px;align-items:center;font-size:12px}main{max-width:1120px;margin:auto;padding:0 30px}.intro{padding:65px 0 25px}h1{font:500 clamp(42px,6.5vw,78px)/1.04 'Space Grotesk',sans-serif;letter-spacing:-3px;margin:24px 0}h1 em{font-style:normal;color:var(--lime)}p{line-height:1.75;color:#abb0a9}h2{font:500 26px/1.25 'Space Grotesk',sans-serif;letter-spacing:-.7px;margin:17px 0}.intro p{font-size:16px}.preview{display:flex;align-items:center;margin:12px 0 50px;gap:0;max-width:735px}.mini-pill{padding:17px 23px;border:1px solid #71824c;border-radius:40px;color:var(--lime);font-size:11px;letter-spacing:1px;white-space:nowrap;background:#cefa7308}.mini-pill.violet{color:var(--violet);border-color:#605983;background:#b1a0ff08}.mini-film{border:1px solid #34383c;padding:17px 20px;border-radius:7px;white-space:nowrap;font-size:13px}.mini-film small{color:var(--muted);margin-left:12px}.line{flex:1;height:1px;background:#454b40;min-width:20px}.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:27px 0;margin-bottom:36px}.rules>div{display:flex;gap:16px}.rules strong{color:var(--lime);font:400 13px 'Space Grotesk';padding-top:3px}.rules small{display:block;margin-top:7px;font-size:12px;color:var(--muted)}.setup-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:22px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:30px}.section-label{color:var(--muted)}.panel p{font-size:13px}.panel h2{font-size:24px}.muted{color:var(--muted)}.actions{display:flex;gap:10px}.join-row{display:flex;gap:10px;border-top:1px solid var(--border);padding-top:20px;margin-top:24px}.join-row input{max-width:200px}.join-row button{white-space:nowrap}.score-example{margin:30px 0;padding:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.score-example>span{font-size:12px;color:var(--muted)}.score-example strong{display:block;color:var(--lime);font:500 42px 'Space Grotesk';margin-top:8px}.score-example small{font-size:11px;letter-spacing:2px}#notice:not(:empty){position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:10;border:1px solid #837147;background:#2b2517;color:#ffe8b0;border-radius:8px;padding:15px 22px;box-shadow:0 10px 40px #0008;max-width:90vw}#history-section{margin:70px 0 45px}.history-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.history-heading h2{font-size:23px}.search-row{display:flex;gap:10px;align-items:end}.search-row label{flex:1}.search-row button{margin-bottom:16px;white-space:nowrap}.history-heading button{margin:0}.history-heading input{max-width:230px}.empty{border:1px dashed var(--border);padding:28px;color:var(--muted);text-align:center;border-radius:8px}.history-item{padding:18px 0;border-top:1px solid var(--border)}.history-item summary{display:flex;gap:15px;align-items:center;cursor:pointer;flex-wrap:wrap;font-size:13px}.history-item strong{color:var(--lime);margin-left:auto}.history-item small{color:var(--muted)}.history-path{line-height:2;color:#b8bcb6;font-size:13px;margin-top:14px}.badge{padding:4px 7px;border:1px solid #34383c;border-radius:4px;font-size:9px;letter-spacing:1px;text-transform:uppercase}footer{max-width:1120px;margin:auto;padding:25px 30px 40px;border-top:1px solid var(--border);display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;font-size:9px;letter-spacing:1px;color:var(--muted)}footer p{font-size:10px;margin:0;width:100%;letter-spacing:0}.game-heading{display:flex;justify-content:space-between;align-items:center;margin:40px 0 25px}#scoreboard{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 30px}.player-score{border:1px solid var(--border);border-radius:7px;padding:12px 17px;background:var(--panel);color:var(--text);font-size:12px}.player-score.active{border-color:var(--lime)}.player-score b{color:var(--lime);margin-left:18px}.player-score small{display:block;color:var(--muted);margin-top:8px}.round-meta{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:2px;color:var(--muted);border-top:1px solid var(--border);padding:25px 0}.round-meta strong{font:400 32px 'Space Grotesk';color:var(--text);font-variant-numeric:tabular-nums}.round-meta strong.urgent{color:#ff9f89}.actors{display:grid;grid-template-columns:1fr 60px 1fr;align-items:center;gap:20px;margin:10px auto 30px;max-width:800px}.actor-pill{border:1px solid #6e8541;border-radius:65px;padding:14px 22px 14px 14px;display:flex;align-items:center;gap:18px;background:linear-gradient(110deg,#cefa730d,transparent);min-height:108px}.actor-pill.target{border-color:#686087;background:linear-gradient(110deg,#b1a0ff0d,transparent)}.portrait{width:72px;height:72px;object-fit:cover;border-radius:50%;background:#212820;display:grid;place-items:center;font:400 24px 'Space Grotesk';color:var(--lime);flex-shrink:0}.target .portrait{background:#242131;color:var(--violet)}.actor-pill small{color:var(--muted);font-size:9px;letter-spacing:2px;display:block;margin-bottom:8px}.actor-pill b{font:500 20px 'Space Grotesk'}.versus{color:var(--muted);text-align:center;font-size:24px}.spinning .actor-pill{animation:spin .8s ease-in-out}@keyframes spin{0%{transform:rotateX(0)}50%{transform:rotateX(270deg);filter:blur(3px)}100%{transform:rotateX(360deg)}}#chain,.chain-card,#turn-status,.round-actions{max-width:650px;margin-left:auto;margin-right:auto}.chain-card{border:1px solid var(--border);border-radius:10px;padding:24px;margin-bottom:18px;background:#0e1110;position:relative}.chain-card.locked{border-color:#45765b;background:#101a15}.chain-card.locked:after{content:'';height:19px;width:1px;background:#45765b;position:absolute;bottom:-19px;left:50%}.chain-card.editing{border-color:var(--lime);box-shadow:0 0 35px #cefa7310;background:#11160f}.chain-card h3{font:500 20px 'Space Grotesk';margin:12px 0 6px}.chain-card p{margin:8px 0;font-size:13px}.chain-card .remove{position:absolute;right:20px;top:15px;background:none;color:#95b29f;padding:4px;font-size:12px}.results{display:grid;gap:6px}.results button{text-align:left;background:#1b2117;color:var(--text);border:1px solid #343e2a;font-weight:400}.selected{color:var(--lime);font-size:13px;padding:12px 0}.add-button{display:block;margin:20px auto;background:none;color:var(--lime);border:1px dashed #5c6d41;max-width:650px;width:100%}.round-actions{display:flex;justify-content:center;gap:25px;margin-top:25px;margin-bottom:30px}#turn-status{text-align:center;color:var(--lime);line-height:1.7;margin-bottom:20px}#final-results{text-align:center;margin:30px 0;padding:20px}#final-results:empty{display:none}#lobby{padding:15px 0;color:var(--muted)}[hidden]{display:none!important}@media(max-width:720px){header{padding:0 20px;height:75px;gap:15px}header>.eyebrow{display:none}main{padding:0 20px}.intro{padding-top:40px}.preview{flex-wrap:wrap}.mini-pill{padding:13px 12px;font-size:9px}.mini-film{padding:13px 10px;font-size:11px}.mini-film small{display:none}.rules{grid-template-columns:1fr;gap:20px}.setup-grid{grid-template-columns:1fr}.panel{padding:24px}.history-heading{align-items:start;flex-direction:column}.actors{grid-template-columns:1fr 22px 1fr;gap:8px}.actor-pill{padding:14px 7px;flex-direction:column;border-radius:20px;gap:10px;text-align:center;min-height:160px}.actor-pill b{font-size:16px}.portrait{width:60px;height:60px}.actor-pill small{font-size:8px}.chain-card{padding:20px}.search-row{flex-wrap:wrap}.search-row label{min-width:160px}.history-item summary{gap:8px}.game-heading h2{font-size:22px}footer{padding:25px 20px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Responsive layouts: preserve readable content instead of clipping overflow. */
input, select { font-size: 16px; min-height: 48px; min-width: 0; }
button { min-height: 44px; }
.panel, .search-row, .search-row > *, .actor-pill, .actor-pill > div,
.game-heading > div, .history-heading > div, .rules > div { min-width: 0; }
.actor-pill b, .chain-card h3, .history-path, .history-item summary,
.player-score, #account, #game-title, .results button, .selected { overflow-wrap: anywhere; }
.actors { grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); }
.actions, .round-actions { flex-wrap: wrap; }
#account { min-width: 0; }
#account > span { min-width: 0; }
#account button { flex-shrink: 0; }
.chain-card .remove { position: static; display: block; margin: 8px 0; padding: 10px 0; text-align: left; }
.history-item summary { min-height: 44px; }
#notice:not(:empty) { bottom: max(16px, env(safe-area-inset-bottom)); width: max-content; overflow-wrap: anywhere; }
header, main, footer { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
footer { padding-bottom: max(30px, env(safe-area-inset-bottom)); }

/* Tablets: give forms enough room and keep both actor portraits visible. */
@media (min-width: 721px) and (max-width: 1024px) {
  .setup-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
  .panel { padding: 24px; }
  .actions { flex-direction: column; }
  .join-row { flex-wrap: wrap; }
  .join-row input { flex: 1 1 130px; max-width: none; }
  .join-row button { flex: 1 1 110px; }
  .actors { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); gap: 12px; }
  .actor-pill { border-radius: 24px; padding: 18px 12px; gap: 12px; }
  .actor-pill b { font-size: 18px; }
  .portrait { width: 60px; height: 60px; }
  .history-heading { flex-wrap: wrap; }
  .history-heading .search-row { margin-left: auto; }
}

/* Phones, including narrow 320px screens. */
@media (max-width: 720px) {
  header { min-height: 75px; height: auto; padding-top: 12px; padding-bottom: 12px; }
  #account { gap: 10px; }
  h1 { font-size: clamp(38px, 10vw, 64px); letter-spacing: -2px; }
  .intro { padding-top: 32px; }
  .eyebrow, .section-label { line-height: 1.7; }
  .preview { flex-direction: column; align-items: center; margin-bottom: 32px; }
  .preview .line { flex: none; width: 1px; min-width: 1px; height: 18px; }
  .mini-pill { padding: 13px 24px; font-size: 11px; }
  .mini-film { font-size: 13px; padding: 15px 20px; }
  .mini-film small { display: inline; }
  .setup-grid { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: 20px; }
  .actions, .join-row { flex-direction: column; }
  .actions button, .join-row input, .join-row button, #create { width: 100%; max-width: none; }
  .game-heading { align-items: flex-start; flex-direction: column; gap: 0; margin: 24px 0 12px; }
  .game-heading h2 { margin-bottom: 8px; }
  #scoreboard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .player-score { width: 100%; text-align: left; padding: 12px; }
  .player-score b { display: block; margin: 8px 0 0; }
  .round-meta { padding: 16px 0; letter-spacing: 1px; gap: 8px; }
  .round-meta strong { font-size: 28px; }
  .actors { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); gap: 6px; align-items: stretch; }
  .versus { align-self: center; font-size: 20px; }
  .actor-pill { min-height: 164px; padding: 14px 8px; }
  .actor-pill small { letter-spacing: 1px; line-height: 1.5; }
  .chain-card { padding: 18px; }
  .chain-card h3 { line-height: 1.4; }
  .search-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .search-row label { min-width: 0; width: 100%; margin-bottom: 0; }
  .search-row button { width: 100%; margin: 0 0 12px; white-space: normal; }
  #lock-link, #use-target { width: 100%; }
  #use-target { text-align: left; line-height: 1.5; }
  .results button { line-height: 1.5; }
  .round-actions { gap: 12px; }
  .round-actions button { flex: 1 1 120px; }
  .history-heading, #history-form { width: 100%; }
  .history-heading input { max-width: none; }
  #history-section { margin-top: 44px; }
  .history-item summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .history-item summary > b, .history-item summary > span:not(.badge), .history-item summary > small { grid-column: 1 / -1; }
  .history-item .badge { justify-self: start; }
  .history-item strong { margin-left: 0; justify-self: end; }
}
@media (hover: none) { button:hover { transform: none; filter: none; } }

/* Final countdown: slow glow, with a static red state for reduced motion. */
#arena.critical .actor-pill, #arena.critical .chain-card.editing {
  border-color: #ff655f;
  background-color: #301211;
  animation: countdown-glow 1.2s ease-in-out infinite;
}
#arena.critical #timer { color: #ff817b; }
@keyframes countdown-glow {
  0%, 100% { box-shadow: 0 0 10px #ff494933, inset 0 0 10px #ff494911; }
  50% { box-shadow: 0 0 28px #ff494980, inset 0 0 18px #ff494922; }
}
@media (prefers-reduced-motion: reduce) {
  #arena.critical .actor-pill, #arena.critical .chain-card.editing {
    animation: none; box-shadow: 0 0 18px #ff494960;
  }
}
#arena { overflow-anchor: none; }
#editor, #turn-status, #final-results, .chain-card { scroll-margin-top: 20px; }
#final-results .actions { justify-content: center; }

@media(max-width:720px){header{flex-wrap:wrap}header>a[href='/watch']{font-size:12px;min-height:44px;display:flex;align-items:center}}

/* A small, click-through clock follows the player once the main clock leaves view. */
#floating-clock {
  position: fixed;
  top: calc(var(--viewport-top, 0px) + max(12px, env(safe-area-inset-top)));
  right: max(14px, env(safe-area-inset-right));
  z-index: 8;
  pointer-events: none;
  user-select: none;
  min-width: 104px;
  padding: 9px 14px;
  border: 1px solid #62743f;
  border-radius: 14px;
  background: #10150ff0;
  box-shadow: 0 4px 20px #0008;
  text-align: center;
}
#floating-clock small { display: block; color: var(--muted); font-size: 9px; letter-spacing: 1.5px; }
#floating-clock strong { display: block; color: var(--lime); font: 500 28px 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; }
#floating-clock.urgent strong { color: #ff9f89; }
#floating-clock.critical { border-color: #ff655f; background: #301211f0; animation: countdown-glow 1.2s ease-in-out infinite; }
#editor, #turn-status, #final-results, .chain-card { scroll-margin-top: 92px; }
@media (prefers-reduced-motion: reduce) { #floating-clock.critical { animation: none; box-shadow: 0 0 18px #ff494960; } }