:root {
  --sky: #1d3557;
  --sky-2: #274a78;
  --snow: #f4f7fb;
  --paper: #fffaf0;
  --ink: #1b1b1b;
  --red: #d7262b;
  --green: #2e8b3e;
  --yellow: #f2c81f;
  --muted: #5d6b7a;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sky); color: var(--ink);
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif; touch-action: none; user-select: none; -webkit-user-select: none; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.hidden { display: none !important; }

.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(29, 53, 87, 0.55); z-index: 10; }
.card { width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 24px; border-radius: 6px;
  box-shadow: 0 8px 0 rgba(0,0,0,0.25); transform: rotate(-0.6deg); }
.card.wide { width: min(720px, 100%); }
.paper { background: var(--paper); background-image: radial-gradient(rgba(0,0,0,0.035) 1px, transparent 1px); background-size: 5px 5px; }
.logo { font-size: 44px; line-height: 0.95; margin: 0 0 8px; color: var(--red); text-transform: uppercase; letter-spacing: 1px;
  text-shadow: 3px 3px 0 #fff, 5px 5px 0 rgba(0,0,0,0.2); }
.logo span { color: var(--green); }
.logo.small { font-size: 30px; }
.tag { margin: 0 0 16px; color: var(--muted); }
h2 { margin: 0 0 12px; color: var(--red); text-transform: uppercase; }

.tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.tab { flex: 1; background: #e8e2d4; color: var(--ink); }
.tab.active { background: var(--sky); color: #fff; }
label { display: block; font-weight: bold; margin: 10px 0; }
input { display: block; width: 100%; margin-top: 4px; padding: 12px; font-size: 16px; border: 3px solid var(--ink); border-radius: 4px; background: #fff; }
input:focus { outline: 3px solid var(--yellow); }
button { font: inherit; font-weight: bold; border: 0; border-radius: 4px; padding: 10px 14px; cursor: pointer;
  background: var(--green); color: #fff; box-shadow: 0 4px 0 rgba(0,0,0,0.25); }
button:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.25); }
button.big { width: 100%; font-size: 22px; padding: 14px; background: var(--red); text-transform: uppercase; margin-top: 8px; }
button.ghost { background: #e8e2d4; color: var(--ink); }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.row button { flex: 1 1 120px; }
.error { color: var(--red); min-height: 1.2em; margin: 6px 0; font-weight: bold; }
.muted { color: var(--muted); font-size: 14px; margin-top: 12px; }
.help { padding-left: 20px; line-height: 1.5; }


.table-wrap { overflow-x: auto; }
.table-wrap td.muted { white-space: normal; }
#results-next { margin: -4px 0 8px; }
.results-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 0 0 12px; }
.results-actions button { min-height: 40px; padding: 8px 18px; }
.town-landed { margin: -2px 0 10px; padding: 6px 10px; background: #dff3e3; border-left: 4px solid #2a9d4b; border-radius: 4px; font-weight: 700; color: #1d3557; }
/* While the results card is open the round HUD stays out of its way. */
#hud.results-open #banner, #hud.results-open #feed, #hud.results-open #mini, #hud.results-open .touch-btn { display: none; }
/* The Winter Season track: one row per tier, free and premium side by side. */
.season-intro { margin: 0 0 10px; color: var(--muted); }
.track-head, .tier { display: grid; grid-template-columns: 64px 1fr 1fr; gap: 8px; align-items: stretch; }
.track-head { font-size: 11px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.tier { margin-bottom: 6px; }
.tier-no { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #e8e2d4; border-radius: 4px; font: 900 16px "Arial Black", sans-serif; }
.tier-no small { font: bold 10px "Trebuchet MS", sans-serif; color: var(--muted); text-transform: uppercase; }
.reward { background: #fff; border: 2px solid #e8e2d4; border-radius: 4px; padding: 6px 8px; font-size: 13px; display: flex; flex-direction: column; justify-content: center; min-height: 44px; }
.reward small { color: var(--muted); }
.reward.none { background: transparent; border-style: dashed; color: var(--muted); align-items: center; }
.tier.got .tier-no { background: var(--green); color: #fff; }
.tier.got .reward:not(.premium) { border-color: var(--green); }
.tier.next .tier-no { background: var(--yellow); }
.tier.next .reward:not(.premium) { border-color: var(--yellow); background: #fff9df; }
.reward.premium { opacity: 0.7; }
.tier.got .reward.premium, .reward.premium.none { opacity: 0.5; }
#side-quests .ch { margin-bottom: 4px; }
.arsenal { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; text-align: left; font-size: 13px; }
.arsenal .ch.done .tick { background: #e4572e; border-color: #e4572e !important; }
.arsenal .ch.locked .tick { border-style: dashed; opacity: 0.6; }
.arsenal .ch.locked .ch-text { opacity: 0.6; }
.arsenal .ch-sub { grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin: -2px 0 4px 24px; line-height: 1.3; }
.arsenal.chests { grid-template-columns: 1fr; }
.recent .ch.done .tick { background: #2e8b3e; border-color: #2e8b3e !important; }
.recent .ch.done .ch-text { text-decoration: none; opacity: 1; }
@media (max-width: 700px) { .arsenal { grid-template-columns: 1fr; } #weapon-mast { display: none; } }
.twist.goal { background: #dff3e3; }
.goal-bar { height: 6px; background: rgba(29,53,87,0.15); border-radius: 3px; margin-top: 5px; }
.goal-bar i { display: block; height: 100%; background: #2a9d4b; border-radius: 3px; }
.twist { margin: 4px 0 8px; padding: 6px 10px; background: #fff3b0; border-radius: 4px; font-size: 13px; }
.twist b { color: var(--red); }
.twist.wod { background: #e3f1ff; }
.twist.wod b { color: #1d3557; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 6px 8px; text-align: left; border-bottom: 2px dashed #ddd; white-space: nowrap; }
th { font-size: 12px; text-transform: uppercase; color: var(--muted); }
tr.me td { background: #fff3b0; font-weight: bold; }
td.up { color: var(--green); font-weight: bold; }
td.down { color: var(--red); font-weight: bold; }
.bot { color: var(--muted); font-size: 12px; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; color: #fff; font-weight: bold;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.55); }
/* a red wedge at the screen edge pointing at whoever hit you */
#dmg-dir { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; transition: opacity 0.12s; }
#dmg-dir::before { content: ''; position: absolute; left: -60px; top: -200px; width: 120px; height: 60px;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,60,60,0) 55%, rgba(255,60,60,0.9) 100%); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
#dmg-dir.show { opacity: 1; }
#vignette { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, rgba(215,38,43,0) 55%, rgba(215,38,43,0.65) 100%); transition: opacity 0.15s; }
#splatscreen { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.95) 0 9%, transparent 10%), radial-gradient(circle at 62% 58%, rgba(255,255,255,0.9) 0 7%, transparent 8%), radial-gradient(circle at 45% 70%, rgba(255,255,255,0.85) 0 5%, transparent 6%), radial-gradient(circle at 70% 30%, rgba(255,255,255,0.8) 0 4%, transparent 5%); }
#splatscreen.show { opacity: 1; transition: none; }
#frost { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, rgba(170,220,255,0.15) 30%, rgba(200,235,255,0.85) 100%); transition: opacity 0.3s; }
#face-box { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; display: flex; align-items: center; gap: 8px; }
#face { width: 56px; height: 56px; background: #2e8b3e; border: 3px solid #fff; border-radius: 4px; box-shadow: 0 3px 0 rgba(0,0,0,0.3); }
#hp { font-size: 26px; letter-spacing: 1px; color: #ff4d4d; }
#timer { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); font-size: 26px;
  background: var(--red); padding: 2px 14px; border-radius: 4px; box-shadow: 0 4px 0 rgba(0,0,0,0.25); }
#timer.late { animation: latepulse 1s ease-in-out infinite; }
body.calm #timer.late, body.calm #squall { animation: none; }
body.calm #timer.late { background: #f2c81f; color: #3a1a00; }
#squall { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 42px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 900 13px "Arial Black", sans-serif; letter-spacing: 0.5px; color: #3a1a00; background: #f2c81f; padding: 2px 10px; border-radius: 4px; box-shadow: 0 3px 0 rgba(0,0,0,0.25); animation: squallpulse 0.8s ease-in-out infinite; }
@keyframes squallpulse { 50% { background: #fff1a8; } }
@keyframes latepulse { 50% { background: #f2c81f; color: #3a1a00; transform: translateX(-50%) scale(1.12); } }
#score { position: absolute; top: max(8px, env(safe-area-inset-top)); right: 16px; font-size: 40px; color: #f2c81f;
  text-shadow: 3px 3px 0 #7a4a00, 5px 5px 0 rgba(0,0,0,0.3); font-family: "Arial Black", "Trebuchet MS", sans-serif; }
/* Pace: where this round is heading against your average, under the score. */
#pace { position: absolute; top: calc(max(8px, env(safe-area-inset-top)) + 50px); right: 16px; font-size: 13px; font-weight: bold; color: #e8e2d4; text-shadow: 1px 1px 0 rgba(0,0,0,0.6); }
#pace:empty { display: none; }
#pace.up { color: #7fe07f; }
#pace.down { color: #ffb3a7; }
#mini { position: absolute; top: 88px; right: 12px; font-size: 13px; text-align: right; line-height: 1.4;
  background: rgba(29,53,87,0.55); border-radius: 6px; padding: 4px 10px; }
#mini:empty { display: none; }
#mini .me { color: var(--yellow); }
#mini .gap { line-height: 0.8; opacity: 0.6; }
#feed { position: absolute; top: 228px; right: 12px; font-size: 13px; text-align: right; line-height: 1.5; }
#banner { position: absolute; top: 24%; left: 0; right: 0; text-align: center; font-size: 46px; color: var(--yellow);
  text-shadow: 3px 3px 0 var(--red), 6px 6px 0 rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.2s; }
#banner.show { opacity: 1; }
.menu-note { margin: 0 0 10px; padding: 8px 12px; background: #fff3b0; border-left: 4px solid var(--red); border-radius: 6px; font-weight: 700; font-size: 14px; color: #1d3557; max-width: 420px; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; }
#crosshair::before, #crosshair::after { content: ''; position: absolute; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.45); }
#crosshair::before { left: 16px; top: 9px; width: 2px; height: 16px; }
#crosshair::after { left: 9px; top: 16px; width: 16px; height: 2px; }
#charge-ring { position: absolute; inset: -8px; border-radius: 50%; opacity: 0;
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%); mask: radial-gradient(circle, transparent 62%, #000 64%); }
#hitmark { position: absolute; inset: 0; text-align: center; line-height: 34px; font-size: 30px; color: #ff4d4d; opacity: 0; transition: opacity 0.1s; }
#hitmark.show { opacity: 1; }
#radar { position: absolute; left: 14px; bottom: max(14px, env(safe-area-inset-bottom)); width: 150px; height: 150px; }
#ammo { position: absolute; left: 172px; bottom: max(22px, env(safe-area-inset-bottom)); font-size: 34px; display: flex; align-items: center; gap: 6px;
  font-family: "Arial Black", "Trebuchet MS", sans-serif; }
.ball-icon { display: inline-block; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 40%, #cfdcea 100%);
  border: 2px solid #8aa0b8; box-shadow: 2px 2px 0 rgba(0,0,0,0.35); }
#ammo.yellow .ball-icon { background: radial-gradient(circle at 35% 35%, #fff3a8 30%, #e8c32f 100%); }
#ammo.empty { color: #ff6b6b; }
#ammo.dim { opacity: 0.45; }
#weapon { position: absolute; left: 172px; bottom: calc(max(22px, env(safe-area-inset-bottom)) + 48px); display: flex; align-items: center; gap: 8px;
  background: rgba(15,22,34,0.72); border-left: 5px solid var(--wc, #fff); padding: 6px 12px 6px 10px; border-radius: 4px;
  font-family: "Arial Black", "Trebuchet MS", sans-serif; text-transform: uppercase; }
#weapon .w-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--wc, #fff); box-shadow: 0 0 8px var(--wc, #fff); }
#weapon-name { font-size: 15px; letter-spacing: 0.02em; }
#weapon-clip { font-size: 26px; min-width: 2ch; text-align: right; color: var(--wc, #fff); }
#weapon-mast { font-size: 11px; opacity: 0.8; align-self: flex-end; padding-bottom: 5px; }
#weapon-blurb { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); max-width: min(520px, 86vw); text-align: center;
  font-size: 17px; font-style: italic; opacity: 0; transition: opacity 0.4s; text-shadow: 0 2px 6px rgba(0,0,0,0.7); pointer-events: none; }
#weapon-blurb.show { opacity: 1; }
#glare { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 45%, #fff 0%, #fff 45%, rgba(255,240,250,0.92) 100%); }
#respawn { position: absolute; top: 70%; left: 0; right: 0; text-align: center; font-size: 30px; }
#respawn small { display: block; font-size: 16px; font-weight: 700; opacity: 0.9; margin-top: 4px; }
#hud.dead #crosshair { display: none; }
#hud.dead #coach { bottom: 38%; }
/* first-match coaching: one short line at a time, low on the screen */
#coach { position: absolute; left: 50%; bottom: 20%; transform: translate(-50%, 8px); max-width: min(520px, 86vw); padding: 8px 16px;
  background: rgba(20, 30, 50, 0.78); border: 2px solid var(--yellow); border-radius: 10px; color: #fff; font-size: 18px; text-align: center;
  opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
#coach.show { opacity: 1; transform: translate(-50%, 0); }
#scoreboard { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); width: min(560px, 92vw);
  background: rgba(29,53,87,0.85); border-radius: 8px; padding: 12px; }
#scoreboard td, #scoreboard th { border-bottom: 1px solid rgba(255,255,255,0.15); color: #fff; }
#scoreboard tr.me td { background: rgba(242,200,31,0.25); }
#stick { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.4); }
#knob { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.65); }
#fire { position: absolute; right: max(28px, env(safe-area-inset-right)); bottom: 20%; width: 92px; height: 92px; border-radius: 50%; pointer-events: auto;
  background: radial-gradient(circle at 35% 35%, #fff 35%, #c9d8ea 100%); border: 4px solid rgba(215,38,43,0.85); box-shadow: 0 5px 0 rgba(0,0,0,0.3); padding: 0; }
#fire.down { transform: scale(0.92); border-color: #f2c81f; }
#quit { position: absolute; top: 76px; left: 12px; pointer-events: auto; font-size: 12px; padding: 5px 9px; }
#map-btn { position: absolute; top: 76px; left: 76px; pointer-events: auto; font-size: 12px; padding: 5px 9px; }
#unstick { position: absolute; top: 76px; left: 130px; pointer-events: auto; font-size: 12px; padding: 5px 9px; white-space: nowrap; }
#unstick:disabled { opacity: 0.55; }
.touch-btn { position: absolute; width: 66px; height: 66px; border-radius: 50%; pointer-events: auto; padding: 0;
  font: 900 13px "Arial Black", sans-serif; color: #fff; background: rgba(29,53,87,0.55); border: 3px solid rgba(255,255,255,0.7); }
.touch-btn.down { transform: scale(0.9); background: rgba(242,200,31,0.6); }
#jump { right: calc(max(28px, env(safe-area-inset-right)) + 104px); bottom: calc(20% - 10px); }
#slide { right: calc(max(28px, env(safe-area-inset-right)) + 14px); bottom: calc(20% + 106px); width: 56px; height: 56px; font-size: 11px; }
#taunt { right: calc(max(28px, env(safe-area-inset-right)) + 84px); bottom: calc(20% + 106px); width: 48px; height: 48px; font-size: 22px; }
/* your own taunt, since you can't see your own head */
#mybubble { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -150%) scale(0.9); background: #fff; color: #1b1b1b; padding: 8px 16px; border-radius: 18px;
  font-size: 18px; white-space: nowrap; opacity: 0; transition: opacity 0.15s, transform 0.15s; }
#mybubble.show { opacity: 1; transform: translate(-50%, -150%) scale(1); }
#stamina { position: absolute; left: 50%; bottom: 64px; width: 180px; height: 8px; margin-left: -90px; border-radius: 4px;
  background: rgba(0,0,0,0.35); border: 2px solid rgba(255,255,255,0.75); overflow: hidden; transition: opacity 0.4s; opacity: 0; }
#stamina-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #f2c81f, #7fe07f); }
#district { position: absolute; top: max(48px, calc(env(safe-area-inset-top) + 40px)); left: 0; right: 0; text-align: center;
  font: 900 18px "Arial Black", sans-serif; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.5); letter-spacing: 1px; opacity: 0; }
#district.pop { animation: districtpop 2.6s ease-out; }
@keyframes districtpop { 0% { opacity: 0; transform: translateY(-6px); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
#bigmap-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(13,27,46,0.7); pointer-events: auto; }
#bigmap { width: min(92vw, calc(84vh * 1.25)); height: auto; border: 4px solid #fff; border-radius: 6px; box-shadow: 0 8px 0 rgba(0,0,0,0.3); }
#bigmap-wrap small { color: #fff; font-weight: bold; }
.help-clerk { margin: 0 0 10px; display: flex; align-items: center; gap: 10px; font-weight: bold; }
.help-clerk .ghost { margin: 0; }
/* The Town Clerk's button sits at the bottom right of the menu; keep the player card clear of it. */
@media (min-width: 721px) and (min-height: 481px) { #menu .player-card { margin-bottom: 58px; } }
.help-map { display: block; width: 100%; height: auto; border-radius: 6px; border: 3px solid #1d3557; margin: 8px 0 12px; }
#clickplay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(29,53,87,0.45); font-size: 40px; pointer-events: none; }
#clickplay small { font-size: 15px; font-weight: normal; }

/* The rotate prompt: a bright bar on the menus (so you can still sign in or read), a full-screen card in a round. */
#rotate { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: var(--yellow); color: var(--ink); text-align: center;
  padding: 8px 12px; font-weight: bold; font-size: 14px; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 10px; }
#rotate.hidden { display: none; }
#rotate small { display: none; }
#rotate .phone { width: 14px; height: 22px; border: 2px solid var(--ink); border-radius: 3px; position: relative; flex: none; animation: rotate-phone 2.2s ease-in-out infinite; }
#rotate .phone span { position: absolute; left: 50%; bottom: 2px; width: 4px; height: 2px; margin-left: -2px; background: var(--ink); border-radius: 1px; }
#rotate.full { bottom: 0; background: rgba(13, 27, 42, 0.96); color: #fff; flex-direction: column; gap: 14px; padding: 24px; font-size: 22px; pointer-events: auto; }
#rotate.full .phone { width: 42px; height: 68px; border-color: #fff; border-width: 3px; border-radius: 7px; margin-bottom: 8px; }
#rotate.full .phone span { width: 12px; height: 3px; margin-left: -6px; bottom: 5px; background: #fff; }
#rotate.full small { display: block; font-weight: normal; font-size: 15px; opacity: 0.85; max-width: 320px; line-height: 1.4; }
@keyframes rotate-phone { 0%, 20% { transform: rotate(0); } 50%, 70% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }

@media (max-width: 700px), (max-height: 500px) {
  .logo { font-size: 34px; }
  #banner { font-size: 28px; }
  #timer { font-size: 18px; }
  #score { font-size: 28px; }
  #pace { top: calc(max(8px, env(safe-area-inset-top)) + 36px); right: 16px; font-size: 11px; }
  .menu-note { font-size: 12px; padding: 5px 10px; }
  #feed, #mini { display: none; }
  #face { width: 40px; height: 40px; }
  #hp { font-size: 18px; }
  #radar { width: 104px; height: 104px; left: auto; right: 14px; top: 56px; bottom: auto; }
  #ammo { left: auto; right: 132px; top: 58px; bottom: auto; font-size: 24px; }
  #weapon { left: auto; right: 12px; top: 98px; bottom: auto; padding: 4px 8px; }
  #weapon-name { font-size: 11px; }
  #weapon-clip { font-size: 18px; }
  .ball-icon { width: 24px; height: 24px; }
  #quit { top: 60px; }
  #unstick { top: 60px; }
  #map-btn { top: 60px; left: 70px; }
  #banner { top: 130px; }
  #stamina { bottom: 16px; width: 120px; margin-left: -60px; }
  #district { font-size: 14px; }
}

/* ---------- Title screens (sign in + start) ---------- */
.title-screen { background: linear-gradient(90deg, rgba(13,27,46,0.72) 0%, rgba(13,27,46,0.35) 55%, rgba(13,27,46,0.15) 100%); padding: 0; }
.title-layout { width: min(1180px, 100%); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: max(16px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 16px max(24px, env(safe-area-inset-left)); }
.title-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; flex: 0 1 min(440px, 48vw); max-height: 100%; overflow-y: auto; scrollbar-width: none; padding: 8px 4px; }   /* taller than the screen (notices, a short laptop): scroll it, do not clip the logo or the sound row */
.title-left::-webkit-scrollbar { display: none; }
.brand-logo { margin: 0; display: flex; align-items: center; gap: clamp(8px, 1.4vw, 18px); }
.brand-logo img { display: block; flex: none; height: clamp(90px, 15vw, 190px); width: auto; filter: drop-shadow(0 8px 14px rgba(10,20,40,0.45)); }
.brand-logo img:not(.brand-emblem) { flex: 0 1 auto; min-width: 0; height: auto; width: clamp(244px, 40.7vw, 515px); }   /* the wordmark shrinks to the room left beside the emblem instead of being cut off (seen at 1280 wide) */
#auth .title-left { flex: 0 1 min(680px, 56vw); }   /* the sign-up screen has no hero beside it, so the title gets the room */
.brand-logo .brand-emblem { height: clamp(70px, 11vw, 140px); animation: coinspin 6s ease-in-out infinite; }
.brand-logo.small img { height: clamp(64px, 9vw, 120px); }
.brand-logo.small .brand-emblem { height: clamp(50px, 7vw, 92px); }
.loader-logo { justify-content: center; }
.loader-logo img { height: clamp(110px, 22vw, 260px); animation: logodrop 0.7s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes logodrop { from { transform: translateY(-40vh) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes coinspin { 0%, 70%, 100% { transform: rotateY(0); } 85% { transform: rotateY(360deg); } }
.paper-logo { margin: 0; display: flex; flex-direction: column; gap: 6px; font: 900 clamp(34px, 6.2vw, 74px)/1 "Arial Black", "Trebuchet MS", sans-serif; }
.paper-logo.small { font-size: clamp(26px, 4.2vw, 50px); }
.logo-word { display: flex; gap: 3px; }
.logo-word:nth-child(2) { margin-left: 0.6em; }
.logo-letter { display: inline-block; padding: 0.04em 0.12em 0.02em; background: var(--bg); color: #fff; border: 3px solid #fff; border-radius: 3px;
  transform: translateY(var(--dy)) rotate(var(--rot)); box-shadow: 4px 5px 0 rgba(0,0,0,0.35); text-shadow: 2px 2px 0 rgba(0,0,0,0.25);
  animation: letterwobble 3.2s ease-in-out infinite; animation-delay: calc(var(--dy) * 60); }
@keyframes letterwobble { 0%, 100% { transform: translateY(var(--dy)) rotate(var(--rot)); } 50% { transform: translateY(calc(var(--dy) - 4px)) rotate(calc(var(--rot) * -0.6)); } }
.beta { display: none; margin: 8px 0 0; padding: 4px 10px; background: var(--yellow); color: var(--ink); border-radius: 6px; font-size: 13px; width: fit-content; max-width: 420px; }
html[data-beta="1"] .beta { display: block; }
.title-tag { margin: 0; color: #fff; font-size: clamp(14px, 1.6vw, 19px); font-weight: bold; text-shadow: 0 2px 0 rgba(0,0,0,0.45); }
.title-lineup { display: flex; gap: 4px; }
.title-lineup canvas { width: clamp(70px, 10vw, 128px); height: auto; aspect-ratio: 1; filter: drop-shadow(0 6px 0 rgba(0,0,0,0.25)); animation: hop 1.8s ease-in-out infinite; }
.title-lineup canvas:nth-child(2n) { animation-delay: -0.9s; }
.auth-card { flex: 0 0 min(380px, 100%); }

.main-nav { display: flex; flex-direction: column; gap: 10px; width: min(380px, 100%); }
.nav-btn { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 12px 18px; font: 900 22px "Arial Black", "Trebuchet MS", sans-serif;
  text-transform: uppercase; letter-spacing: 1px; background: rgba(255,250,240,0.95); color: var(--sky); border-left: 8px solid var(--sky-2);
  box-shadow: 0 5px 0 rgba(0,0,0,0.3); transform: rotate(-0.6deg); transition: transform 0.12s, background 0.12s; }
.nav-btn:nth-child(2n) { transform: rotate(0.5deg); }
.nav-btn small { font: bold 12px "Trebuchet MS", sans-serif; text-transform: none; letter-spacing: 0; opacity: 0.85; }
.nav-btn:hover, .nav-btn:focus-visible { outline: none; transform: translateX(10px) rotate(0deg); background: #fff; border-left-color: var(--yellow); }
.nav-btn:hover span::before, .nav-btn:focus-visible span::before { content: '▶ '; color: var(--red); }
.nav-btn.primary { background: var(--red); color: #fff; border-left-color: #8e1418; font-size: 34px; padding: 14px 20px; animation: pulse 1.6s ease-in-out infinite; }
.nav-btn.primary:hover, .nav-btn.primary:focus-visible { background: #e8322f; border-left-color: var(--yellow); }
.nav-btn.quiet { background: rgba(255,250,240,0.6); font-size: 15px; padding: 8px 18px; }
@keyframes pulse { 0%, 100% { box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 0 rgba(242,200,31,0.6); } 50% { box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 10px rgba(242,200,31,0); } }
.online-pill { margin: 0; align-self: flex-start; background: rgba(13,27,46,0.7); color: #7fe07f; font-weight: bold; padding: 6px 12px; border-radius: 20px; font-size: 14px; }
.online-pill:empty { display: none; }
/* The town news sits in the sky between the logo and the player card, where every screen height has room for it. */
.town-news { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 3; margin: 0; width: max-content; max-width: min(440px, 36vw); text-align: center; background: rgba(13,27,46,0.6); color: #e8e2d4; font-size: 12px; font-style: italic; padding: 5px 12px; border-radius: 14px; }
.town-news:empty { display: none; }
.twist .tmw { display: block; font-size: 11px; opacity: 0.75; font-weight: normal; margin-top: 2px; }
@media (max-width: 1000px), (max-height: 520px) { .town-news { display: none; } }
@media (pointer: coarse) {
  .small-btn, #rec, .chip, .ctab { min-height: 38px; }
  .nav-btn, .auth-card .ghost { min-height: 36px; }
  input[type="checkbox"] { width: 20px; height: 20px; }
}
/* Short laptop screens: tighter menu so Settings and Log out stay on screen without scrolling. */
@media (min-width: 701px) and (max-height: 860px) {
  .title-left { gap: 10px; }
  .main-nav { gap: 6px; }
  .nav-btn { padding: 8px 16px; font-size: 19px; }
  .nav-btn.primary { padding: 10px 18px; font-size: 28px; }
  .nav-btn.quiet { padding: 6px 16px; font-size: 14px; }
  .brand-logo.small img { height: clamp(56px, 7vw, 96px); }
  .brand-logo.small .brand-emblem { height: clamp(44px, 5.5vw, 76px); }
  .menu-note { font-size: 13px; padding: 6px 10px; }
}
.town-news b { font-style: normal; color: #ffd34d; letter-spacing: 0.04em; margin-right: 6px; }

.player-card { flex: 0 0 min(340px, 100%); padding: 16px; border-radius: 6px; box-shadow: 0 8px 0 rgba(0,0,0,0.3); transform: rotate(1deg);
  display: flex; flex-direction: column; align-items: center; gap: 6px; max-height: calc(100vh - 32px); overflow: auto; }
.pc-stage { width: 100%; display: flex; justify-content: center; background: linear-gradient(#8fc0e8, #dcecf9 70%, #f4f8fc 70%); border-radius: 4px; border: 3px solid var(--sky); }
#menu-player { width: 190px; height: 190px; animation: hop 2.2s ease-in-out infinite; }
.pc-name { font: 900 26px "Arial Black", sans-serif; color: var(--sky); }
.pc-tier { font-weight: bold; color: var(--muted); }
.pc-next { font-size: 12px; color: var(--muted); }
/* end-of-round awards: a row of small rosettes */
.rival { margin: -6px 0 10px; font-weight: bold; color: var(--sky); }
.awards { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.award { display: flex; flex-direction: column; padding: 6px 10px; background: #fff; border: 2px solid #e8e2d4; border-radius: 6px; font-size: 13px; min-width: 150px; }
.award b { color: var(--red); font-size: 14px; }
.award small { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.award.mine { border-color: var(--yellow); background: #fff9df; }
.award.near { border-style: dashed; border-color: var(--yellow); background: #fffdf3; }
.award.near b { color: #8a6d00; }
.xp { position: relative; width: 100%; height: 18px; background: #e8e2d4; border-radius: 9px; overflow: hidden; border: 2px solid var(--sky); }
.xp-fill { height: 100%; background: linear-gradient(90deg, var(--yellow), #f07c1f); }
.xp span { position: absolute; inset: 0; text-align: center; font-size: 11px; font-weight: bold; line-height: 14px; }
.profile { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; }
.last-round { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: #1d3557; opacity: 0.85; }
.stat { background: #fff; border: 2px solid #e8e2d4; border-radius: 4px; padding: 4px; text-align: center; display: flex; flex-direction: column; }
.stat b { font-size: 18px; color: var(--sky); }
.stat span { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.top3 { width: 100%; }
.top3-title { font-weight: 900; color: var(--red); text-transform: uppercase; font-size: 12px; margin: 4px 0; }
.top3-row { display: flex; gap: 6px; font-size: 14px; padding: 2px 0; }
.top3-row b { flex: 1; }
.top3-row.me b { color: var(--red); }

/* ---------- Select player ---------- */
#select, #creator { padding: 0; background: #9cc7ea; }
#select-bg, #creator-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.select-wrap { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) 12px 10px; }
.select-title { margin: 0; font-family: "Arial Black", "Trebuchet MS", sans-serif; font-size: clamp(30px, 7vw, 72px); text-transform: uppercase; letter-spacing: 3px;
  color: #d6cfa0; text-shadow: 3px 3px 0 #8a8256, 6px 6px 0 #5b5536, 9px 9px 0 rgba(0,0,0,0.25); }
.select-info { display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(13,27,46,0.6); color: #fff; padding: 8px 18px; border-radius: 6px; min-width: min(380px, 90vw); }
.select-info b { font: 900 22px "Arial Black", sans-serif; color: var(--yellow); letter-spacing: 1px; }
.select-info span { font-size: 14px; }
.select-info small { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #9fe0ff; font-weight: bold; }
.lineup-row { margin-top: auto; margin-bottom: 2vh; display: flex; align-items: flex-end; width: 100%; gap: 4px; }
.arrow { flex: 0 0 auto; align-self: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; font-size: 20px; background: rgba(13,27,46,0.65); }
.lineup { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: clamp(2px, 1.2vw, 16px); min-width: 0; }
.pick { display: flex; flex-direction: column; align-items: center; background: none; box-shadow: none; padding: 0; color: inherit; cursor: pointer; flex: 0 1 170px; min-width: 0; }
.pick:active { transform: none; box-shadow: none; }
.pick canvas { width: 100%; max-width: 170px; aspect-ratio: 1; display: block; transition: transform 0.2s, filter 0.2s; filter: saturate(0.85) brightness(0.92); }
.pick .pick-name { margin-top: 12px; font-family: "Arial Black", "Trebuchet MS", sans-serif; font-size: clamp(11px, 1.9vw, 24px); color: #f2e31f;
  text-shadow: 2px 2px 0 #6b5a00, 4px 4px 0 rgba(0,0,0,0.3); white-space: nowrap; }
.pick.custom .pick-name { color: #9fe0ff; text-shadow: 2px 2px 0 #1d3557, 4px 4px 0 rgba(0,0,0,0.3); }
.pick.selected canvas { transform: scale(1.18) translateY(-6px); filter: none drop-shadow(0 0 12px rgba(255,255,255,0.9)); animation: hop 0.6s ease-in-out infinite; }
.pick.selected .pick-name { color: #fff; text-shadow: 2px 2px 0 #d7262b, 4px 4px 0 rgba(0,0,0,0.3); }
.pick.selected::before { content: '▼'; color: #f2e31f; font-size: 26px; text-shadow: 2px 2px 0 #6b5a00; animation: hop 0.6s ease-in-out infinite; }
.pick:not(.selected)::before { content: ' '; font-size: 26px; }
.pick.custom-empty canvas { opacity: 0.75; }
.pick:hover canvas { filter: none; }
@keyframes hop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.select-actions { display: flex; gap: 10px; width: min(520px, 100%); }
.select-actions button { flex: 1; margin: 0; }
.select-actions .big { flex: 2; font-size: 26px; }
.select-hint { margin: 6px 0 0; color: #fff; font-size: 12px; font-weight: bold; text-shadow: 0 1px 0 rgba(0,0,0,0.6); }

/* ---------- Creator ---------- */
.creator-layout { position: relative; width: min(1180px, 100%); height: 100%; display: grid; grid-template-columns: 1fr minmax(320px, 470px); gap: 20px; align-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
.creator-stage { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.creator-title { font-size: clamp(24px, 4.4vw, 52px); text-align: center; }
.podium { position: relative; width: min(46vh, 100%); aspect-ratio: 1; }
.podium::after { content: ''; position: absolute; left: 15%; right: 15%; bottom: 0; height: 9%; border-radius: 50%; background: #8a7f74; box-shadow: 0 6px 0 #6f655b; z-index: 0; }
#creator-canvas { position: relative; z-index: 1; width: 100%; height: 100%; animation: hop 2s ease-in-out infinite; }
.stage-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
#settings input[type=range] { width: 100%; margin-top: 6px; }
#settings .set-val { float: right; font-weight: normal; color: var(--muted); }
#settings label.check { font-weight: normal; display: flex; gap: 10px; align-items: center; justify-content: flex-start; }
#settings label.check input { display: inline-block; width: 20px; height: 20px; margin: 0; padding: 0; flex: none; }
#settings select { width: 100%; margin-top: 6px; padding: 6px; font: inherit; }
.chip { padding: 6px 12px; font-size: 14px; background: rgba(13,27,46,0.7); border-radius: 18px; }
.creator-panel { border-radius: 6px; box-shadow: 0 8px 0 rgba(0,0,0,0.3); padding: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 24px); min-height: 0; }
.ctabs { display: flex; gap: 4px; flex-wrap: wrap; }
.ctab { flex: 1 1 auto; padding: 8px 6px; font-size: 14px; background: #e8e2d4; color: var(--ink); text-transform: uppercase; box-shadow: none; border-radius: 4px 4px 0 0; }
.ctab.on { background: var(--sky); color: #fff; }
.cpane { border-top: 4px solid var(--sky); padding: 12px 2px 4px; overflow: auto; flex: 1; min-height: 120px; display: flex; flex-direction: column; gap: 14px; }
.crow-label { font-weight: 900; text-transform: uppercase; font-size: 13px; color: var(--sky); margin-bottom: 6px; }
.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; padding: 0; border: 3px solid rgba(0,0,0,0.12); box-shadow: 0 2px 0 rgba(0,0,0,0.25); position: relative; }
.swatch.on { border-color: var(--ink); outline: 3px solid var(--yellow); }
.swatch.none { background: #fff; color: var(--red); font-size: 16px; }
.swatch.custom { display: inline-block; margin: 0; cursor: pointer; background: conic-gradient(#d7262b, #f2c81f, #2e8b3e, #18a8a0, #2f6fd0, #7b3fa0, #d7262b); }
.swatch.custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; cursor: pointer; }
.options { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.option { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; background: #fff; color: var(--ink); font-size: 12px;
  border: 3px solid #e8e2d4; box-shadow: 0 3px 0 rgba(0,0,0,0.15); }
.option.on { border-color: var(--sky); background: #e6f0fb; }
.option.locker span { font-weight: 700; text-align: center; line-height: 1.15; }
.option.locker small { font-size: 10px; color: #5b6b80; text-align: center; line-height: 1.15; }
.option.locked { opacity: 0.62; }
.option.locked .thumb { filter: grayscale(0.7); }
.option .thumb { width: 60px; height: 60px; }
.creator-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.creator-actions .big { grid-column: 1 / -1; margin: 0; }

@media (max-width: 760px) {
  .title-layout { flex-direction: column; justify-content: flex-start; overflow: auto; }
  .player-card { transform: none; flex-basis: auto; }
  .creator-layout { grid-template-columns: 1fr; overflow: auto; align-items: start; }
  .podium { width: min(34vh, 70vw); }
}
@media (max-height: 500px) {
  .title-layout { gap: 14px; }
  .paper-logo { font-size: clamp(22px, 4.4vw, 36px); }
  .paper-logo.small { font-size: clamp(18px, 3.2vw, 26px); }
  .logo-letter { border-width: 2px; box-shadow: 2px 3px 0 rgba(0,0,0,0.35); }
  .auth-card { padding: 14px; }
  .auth-card label { margin: 6px 0; }
  .auth-card input { padding: 8px; }
  .title-lineup { display: none; }
  .nav-btn { font-size: 14px; padding: 6px 12px; }
  .nav-btn.primary { font-size: 22px; padding: 8px 14px; grid-column: 1 / -1; }
  .nav-btn small { display: none; }
  .main-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: min(440px, 100%); }
  .nav-btn, .auth-card .ghost, .chip { min-height: 32px; }   /* short screens: 32 px targets so the two-column menu still fits without a scroll */
  .title-left { gap: 6px; }
  .brand-logo.small img { height: 44px; }
  .brand-logo.small .brand-emblem { height: 36px; }
  .menu-note { margin-bottom: 4px; }
  .auth-card .ghost { padding: 7px 10px; font-size: 13px; }
  button.big { padding: 9px; font-size: 18px; }
  .player-card { padding: 10px; gap: 4px; }
  #menu-player { width: 110px; height: 110px; }
  .pc-name { font-size: 18px; }
  .select-wrap { padding: 6px; }
  .select-title { font-size: 28px; }
  .select-info { padding: 4px 12px; }
  .select-info b { font-size: 16px; }
  .select-info span { font-size: 12px; }
  .pick canvas { max-width: 96px; }
  .pick .pick-name { margin-top: 4px; }
  .select-hint { display: none; }
  .select-actions .big { font-size: 18px; padding: 8px; }
  .creator-layout { grid-template-columns: 1fr 1.2fr; gap: 10px; }
  .creator-title { font-size: 22px; }
  .podium { width: min(52vh, 100%); }
  .creator-panel { padding: 10px; }
  .cpane { gap: 8px; padding-top: 8px; }
  .swatch { width: 28px; height: 28px; }
  .option .thumb { width: 44px; height: 44px; }
  .options { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}

/* ---------- Clips ---------- */
#rec { position: absolute; top: max(12px, env(safe-area-inset-top)); left: calc(50% + 70px); pointer-events: auto; display: flex; align-items: center; gap: 6px;
  background: rgba(29,53,87,0.75); font-size: 14px; padding: 6px 10px; }
#rec .dot { width: 12px; height: 12px; border-radius: 50%; background: #e8322f; }
#rec.on { background: #e8322f; }
#rec.on.auto { background: rgba(232,50,47,0.55); }
#rec.on .dot { background: #fff; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
#clip { z-index: 20; }
#poster { z-index: 20; }
#poster-img { width: min(100%, 52vh); aspect-ratio: 1; display: block; margin: 0 auto 8px; border-radius: 6px; background: #cfe6f7; box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
#results-share { margin: 0 0 10px; padding: 6px 16px; font-size: 14px; }
#clip-video { width: 100%; max-height: 50vh; background: #000; border-radius: 6px; display: block; }
.x-btn { background: #111; }
#results-clip { margin-top: 10px; background: #111; }
@media (max-width: 700px), (max-height: 500px) { #rec { left: calc(50% + 50px); font-size: 12px; padding: 4px 8px; } }

/* ---------- Loading screen (layered paper scene, no script needed) ---------- */
#loader { position: fixed; inset: 0; z-index: 50; overflow: hidden; background: #2f7fd8; transition: opacity 0.6s ease, visibility 0.6s; }
#loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
#loader > div { position: absolute; }
#loader > svg { position: absolute; }
.ld-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.ld-far { animation: drift 50s ease-in-out infinite alternate; }
.ld-near { animation: drift 34s ease-in-out infinite alternate-reverse; }
.ld-trees { animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
.ld-win { animation: flicker 3s steps(2) infinite; }
.ld-win:nth-child(3n) { animation-delay: -1.1s; }
@keyframes flicker { 50% { fill-opacity: 0.7; } }
.ld-snow { inset: -10% 0 0 0; pointer-events: none; opacity: 0.85;
  background-image: radial-gradient(circle, #fff 0 1.5px, transparent 2px), radial-gradient(circle, #fff 0 1px, transparent 1.5px), radial-gradient(circle, rgba(255,255,255,0.8) 0 2px, transparent 2.5px);
  background-size: 120px 140px, 70px 90px, 190px 210px; background-position: 0 0, 30px 40px, 80px 10px; animation: snowfall 9s linear infinite; }
.ld-snow-near { background-size: 260px 300px, 340px 360px, 420px 400px; animation-duration: 6s; opacity: 0.95; filter: blur(0.6px);
  background-image: radial-gradient(circle, #fff 0 3px, transparent 3.5px), radial-gradient(circle, #fff 0 2.5px, transparent 3px), radial-gradient(circle, #fff 0 3.5px, transparent 4px); }
@keyframes snowfall { from { transform: translateY(0); } to { transform: translateY(10%); } }
.ld-center { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6vh; padding: 16px; text-align: center; }
.loader-logo { font-size: clamp(30px, 7vw, 86px); align-items: center; filter: drop-shadow(0 10px 18px rgba(10,20,40,0.35)); }
.loader-logo .logo-word:nth-child(2) { margin-left: 0; }
.loader-logo .logo-letter { animation: letterdrop 0.7s cubic-bezier(.2,1.6,.4,1) both, letterwobble 3.2s ease-in-out 0.8s infinite; }
@keyframes letterdrop { from { transform: translateY(-60vh) rotate(-40deg); } to { transform: translateY(var(--dy)) rotate(var(--rot)); } }
.ld-cast { display: flex; align-items: flex-end; justify-content: center; height: clamp(90px, 22vh, 220px); }
.ld-cast canvas { height: 100%; width: auto; aspect-ratio: 1; margin: 0 -1.5vh; }
.ld-bar { width: min(460px, 80vw); height: 22px; border-radius: 12px; background: rgba(13,27,46,0.55); padding: 4px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.3); }
.ld-fill { position: relative; height: 100%; width: calc(var(--p, 0) * 100%); min-width: 14px; border-radius: 8px;
  background: linear-gradient(90deg, #f2c81f, #f07c1f 60%, #d7262b); transition: width 0.45s ease; animation: creep 6s ease-out both; }
#loader.live .ld-fill { animation: none; }
@keyframes creep { from { width: 4%; } to { width: 38%; } }
.ld-ball { position: absolute; right: -13px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 35%, #cfdcea 100%); box-shadow: 0 2px 4px rgba(0,0,0,0.4); animation: roll 0.9s linear infinite; }
.ld-ball::after { content: ''; position: absolute; left: 6px; top: 8px; width: 5px; height: 3px; border-radius: 2px; background: rgba(140,160,190,0.7); }
@keyframes roll { to { transform: rotate(360deg); } }
.ld-status { margin: 0; color: #fff; background: rgba(13,27,46,0.6); padding: 4px 16px; border-radius: 16px; font: 900 clamp(14px, 1.8vw, 20px) "Arial Black", "Trebuchet MS", sans-serif; letter-spacing: 0.5px; text-shadow: 0 2px 0 rgba(0,0,0,0.35); }
.ld-tip { margin: 0; max-width: 560px; color: #1d3557; background: rgba(255,250,240,0.92); padding: 8px 16px; border-radius: 20px; font-weight: bold; font-size: 14px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.18); transition: opacity 0.3s; }
@media (max-height: 500px) {
  .ld-center { gap: 6px; }
  .ld-cast { height: 30vh; }
  .ld-tip { font-size: 12px; padding: 4px 12px; }
}
.ll0 { --bg: #d7262b; --rot: -6deg; --dy: -4px; }
.ll1 { --bg: #2e8b3e; --rot: 5deg; --dy: 4px; }
.ll2 { --bg: #2f6fd0; --rot: 3deg; --dy: 3px; }
.ll3 { --bg: #f2c81f; --rot: 1deg; --dy: 2px; }
.ll4 { --bg: #7b3fa0; --rot: -1deg; --dy: 1px; }
.ll5 { --bg: #f07c1f; --rot: -3deg; --dy: 0px; }
.ll6 { --bg: #d7262b; --rot: -5deg; --dy: -1px; }
.ll7 { --bg: #2e8b3e; --rot: 6deg; --dy: -2px; }
.ll8 { --bg: #f07c1f; --rot: 4deg; --dy: -3px; }
.ll9 { --bg: #d7262b; --rot: 2deg; --dy: -4px; }
.ll10 { --bg: #2e8b3e; --rot: 0deg; --dy: 4px; }
.ll11 { --bg: #2f6fd0; --rot: -2deg; --dy: 3px; }
.ll12 { --bg: #f2c81f; --rot: -4deg; --dy: 2px; }
.ll13 { --bg: #7b3fa0; --rot: -6deg; --dy: 1px; }
.ll14 { --bg: #f07c1f; --rot: 5deg; --dy: 0px; }
.ll15 { --bg: #d7262b; --rot: 3deg; --dy: -1px; }

/* ---------- Title polish: falling snow, your player standing big ---------- */
.title-screen { overflow: hidden; }
.title-screen .title-layout { position: relative; z-index: 1; }
.title-snow { position: absolute; z-index: 0; }
#menu-hero { position: absolute; z-index: 1; left: 50%; bottom: -2vh; height: min(58vh, 520px); width: auto; aspect-ratio: 1; transform: translateX(-38%);
  pointer-events: none; filter: drop-shadow(0 10px 14px rgba(10,20,40,0.35)); }
.hero-mound { position: absolute; z-index: 1; left: 50%; bottom: -9vh; width: min(52vh, 460px); height: 16vh; transform: translateX(-30%);
  border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, #ffffff 0 45%, #dbe7f4 75%); box-shadow: 0 -6px 18px rgba(10,20,40,0.25); }
.main-nav .nav-btn { border-radius: 10px; transform: none; backdrop-filter: blur(6px); }
.main-nav .nav-btn:nth-child(2n) { transform: none; }
.main-nav .nav-btn:hover, .main-nav .nav-btn:focus-visible { transform: translateX(10px); }
.player-card { border-radius: 14px; transform: none; }
.auth-card { border-radius: 14px; transform: none; }
@media (max-width: 1100px), (max-height: 560px) { #menu-hero, .hero-mound { display: none; } }
.sound-row { display: flex; gap: 8px; }

/* ---------- Party and team match ---------- */
.nav-btn.team { background: linear-gradient(90deg, rgba(215,38,43,0.95) 0 50%, rgba(47,111,208,0.95) 50% 100%); color: #fff; border-left-color: #fff; }
.nav-btn.team:hover, .nav-btn.team:focus-visible { background: linear-gradient(90deg, #e8322f 0 50%, #3b7fe6 50% 100%); }
.party-card { text-align: center; }
.party-join { display: flex; gap: 8px; margin-top: 12px; }
.party-join input { margin: 0; text-transform: uppercase; letter-spacing: 6px; font: 900 22px "Arial Black", sans-serif; text-align: center; }
.party-code { font: 900 52px "Arial Black", sans-serif; letter-spacing: 10px; color: var(--sky); background: #fff; border: 4px dashed var(--sky); border-radius: 10px; padding: 6px; margin: 8px 0; user-select: all; -webkit-user-select: all; }
.party-members { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; text-align: left; }
.party-members li { background: #fff; border: 2px solid #e8e2d4; border-radius: 8px; padding: 8px 12px; font-weight: bold; display: flex; justify-content: space-between; }
.party-members li small { color: var(--muted); }
.party-mode { display: flex; gap: 8px; justify-content: center; }
.party-mode .chip { background: #e8e2d4; color: var(--ink); }
.party-mode .chip.on { background: var(--sky); color: #fff; }
.party-mode .chip:disabled { opacity: 0.6; cursor: default; }
#party-card .big, .party-card .big { margin-top: 12px; }
.party-card .ghost { margin-top: 8px; width: 100%; }
#teamscore { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 40px); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center;
  font: 900 20px "Arial Black", sans-serif; }
#teamscore span { padding: 2px 12px; border-radius: 4px; box-shadow: 0 3px 0 rgba(0,0,0,0.25); min-width: 60px; text-align: center; }
#teamscore .red { background: #d7262b; } #teamscore .blue { background: #2f6fd0; }
#teamscore b { font-size: 13px; }
@media (max-width: 700px), (max-height: 500px) { #teamscore { font-size: 14px; top: 40px; } #teamscore span { min-width: 40px; } }
.dot-red { color: #d7262b; } .dot-blue { color: #2f6fd0; }

/* combos, score pop-ups, progress */
#combo { position: absolute; right: 7%; top: 38%; font: 900 40px "Arial Black", sans-serif; color: #fff; opacity: 0;
  text-shadow: 3px 3px 0 var(--red), 5px 5px 0 rgba(0,0,0,0.3); transform: rotate(-6deg) scale(0.6); transition: opacity 0.25s, transform 0.15s; pointer-events: none; }
#combo.show { opacity: 1; transform: rotate(-6deg) scale(1); }
#combo.pop { transform: rotate(-6deg) scale(1.25); }
#combo small { display: block; font-size: 15px; color: var(--yellow); text-shadow: 2px 2px 0 rgba(0,0,0,0.45); }
#popups { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.popup { position: absolute; left: 22px; top: -30px; white-space: nowrap; font: 900 22px "Arial Black", sans-serif; color: var(--yellow);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.55); animation: popup 0.9s ease-out forwards; }
.popup.big { font-size: 30px; color: #fff; text-shadow: 2px 2px 0 var(--red), 4px 4px 0 rgba(0,0,0,0.35); }
@keyframes popup { 0% { transform: translateY(8px) scale(0.6); opacity: 0; } 15% { transform: translateY(0) scale(1.15); opacity: 1; }
  70% { opacity: 1; } 100% { transform: translateY(-46px) scale(1); opacity: 0; } }
.daily { margin: 10px 0 4px; padding: 10px 12px; border-radius: 14px; background: rgba(29,53,87,0.07); text-align: left; font-size: 13px; }
.daily-head { display: flex; flex-wrap: wrap; gap: 2px 10px; justify-content: space-between; align-items: center; font-weight: 800; margin-bottom: 6px; color: #1d3557; }
.daily-head .flame { color: #e4572e; }
.week-dots { display: flex; gap: 5px; margin: -2px 0 6px; }
.week-dots .dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #c9b48a; background: transparent; }
.week-dots .dot.on { background: #e4572e; border-color: #e4572e; }
.week-dots .dot.today { border-color: #1d3557; }
.week-dots .dot.today.on { border-color: #e4572e; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #1d3557; }
.ch { display: grid; grid-template-columns: 18px 1fr auto; gap: 6px; align-items: center; margin: 4px 0; line-height: 1.25; }
.ch .tick { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #9aa3ad; }
.ch.done .tick { background: #2e8b3e; border-color: #2e8b3e; box-shadow: inset 0 0 0 3px #fff; }
.ch.done .ch-text { text-decoration: line-through; opacity: 0.6; }
.ch.contract { margin-top: 8px; padding-top: 7px; border-top: 1px dashed rgba(29,53,87,0.3); }
.ch.contract .ch-text::before { content: 'WEEKLY CONTRACT · '; font-weight: 800; color: #1d3557; }
.ch.contract .tick { border-color: #1d3557; }
.ch-xp .swap { margin-left: 6px; padding: 0 6px; font-size: 13px; line-height: 18px; vertical-align: middle; border: 2px solid #e8e2d4; background: #fff; color: #555; box-shadow: none; }
.ch-xp .swap:hover { border-color: var(--sky); color: var(--sky); }
@media (pointer: coarse) { .ch-xp .swap { padding: 2px 12px; font-size: 16px; line-height: 22px; } }
.ch .ch-bar { grid-column: 2 / 4; height: 5px; border-radius: 3px; background: rgba(0,0,0,0.1); overflow: hidden; }
.ch .ch-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f2b81f, #e4572e); width: 0; }
.ch .ch-xp { font-weight: 800; color: #2f6fd0; font-size: 12px; }
.ch.flash { animation: chflash 1.2s ease-out; }
@keyframes chflash { 0%, 40% { background: rgba(242,184,31,0.45); border-radius: 8px; } 100% { background: transparent; } }
.results-xp { margin: 0 0 12px; text-align: left; }
.mvp { float: right; display: flex; align-items: center; gap: 8px; margin: -6px -6px 6px 12px; padding: 6px 12px 6px 6px; background: #fff3b0; border: 2px solid #e9c46a; border-radius: 12px; text-align: left; max-width: 46%; }
.mvp canvas { width: 72px; height: 72px; background: #cfe6f7; border-radius: 8px; flex: none; }
.mvp b { display: block; color: #1d3557; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.mvp span { display: block; font-weight: 800; font-size: 16px; line-height: 1.15; }
.mvp small { display: block; font-size: 12px; opacity: 0.8; }
@media (max-width: 700px) { .mvp { max-width: 60%; } .mvp canvas { width: 56px; height: 56px; } }
.rx-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.rx-top b { font: 900 28px "Arial Black", sans-serif; color: #2f6fd0; }
.rx-top span { font-weight: 800; color: #1d3557; }
.rx-top span.up { color: #e4572e; animation: levelpulse 0.6s ease-out 3; }
@keyframes levelpulse { 50% { transform: scale(1.15); } }
.rx-bar .xp-fill { transition: width 0.25s linear; }
.rx-lines { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.rx-lines span { background: #fff; border: 2px solid rgba(29,53,87,0.15); border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 700; }
.rx-lines span b { color: #2e8b3e; }
@media (max-width: 760px) { #combo { font-size: 26px; right: 4%; } .popup { font-size: 17px; } .popup.big { font-size: 22px; } }

.check-row { display: flex; align-items: center; gap: 8px; font-weight: 700; margin: 4px 0 2px; cursor: pointer; }
.check-row input { width: 20px; height: 20px; margin: 0; accent-color: var(--red); }
.age-note { margin: 10px 0 0; font-size: 12px; opacity: 0.7; text-align: center; }
.terms-note { margin: 6px 0 8px; opacity: 0.85; }
.terms-note a { color: inherit; text-decoration: underline; }
.claim .terms-note { text-align: left; margin: 4px 0 6px; }
/* The sign-up screen's one line of proof that the town is awake: who is playing and what happened since yesterday. */
.auth-town { margin: -6px 0 10px; font-size: 13px; color: #e8e2d4; opacity: 0.9; }
.auth-town b { color: #7fe07f; margin-right: 8px; }
.auth-town:empty { display: none; }
#guest-go, #guest-continue { width: 100%; margin-top: 8px; }
.claim { margin: 14px 0 6px; padding: 10px 12px; border: 2px dashed #c9b48a; border-radius: 10px; }
.claim h3 { margin: 0 0 4px; }
.claim label { display: block; margin: 6px 0; }
.claim input { width: 100%; box-sizing: border-box; }

#soap { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 74px); left: 50%; transform: translateX(-50%); text-align: center;
  background: rgba(20,32,56,0.6); border-radius: 12px; padding: 4px 14px; font-size: 13px; white-space: nowrap; pointer-events: none; }
#soap b { display: block; font: 900 15px "Arial Black", sans-serif; letter-spacing: 0.5px; }
#soap.mine b { color: #7fe07f; } #soap.enemy b { color: #ff7a7a; } #soap.contest b { color: #f2c81f; }
@media (max-width: 700px), (max-height: 500px) { #soap { top: 70px; font-size: 11px; padding: 2px 10px; } #soap b { font-size: 12px; } }

.report { display: inline-flex; gap: 4px; }
.report-btn { font-size: 11px; padding: 2px 7px; border-radius: 10px; background: rgba(255,255,255,0.12); color: inherit; border: 1px solid rgba(255,255,255,0.3); cursor: pointer; }
.report-btn:hover { background: rgba(255,77,109,0.35); }
.report small { font-size: 11px; opacity: 0.8; }

/* ---------- Shop ---------- */
.card.shop { width: min(820px, 100%); }
.shop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.shop-head h2 { margin: 0; }
.shop-pay { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.shop-tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.shop-tabs button { flex: 1; font: 900 14px "Arial Black", "Trebuchet MS", sans-serif; padding: 8px 10px; border-radius: 8px; border: 2px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; }
.shop-tabs button.on { background: var(--ink); color: #fff; }
.shop-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
/* Every item is pictured: the thing itself, or your own character wearing it. */
.item .pic { display: flex; align-items: center; justify-content: center; gap: 4px; height: 96px; margin: 0 0 2px; border-radius: 6px; border: 1px solid #d8dee4; background: linear-gradient(180deg, #eef5fb, #dfe9f2); overflow: hidden; }
.item .pic canvas { height: 88px; width: auto; max-width: 100%; }
.item .pic.strip canvas { height: 60px; }
.item .pic.wide canvas { height: auto; width: 100%; max-height: 88px; }
.item .stats { display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px; }
.item .stats span { background: #eef3f7; border: 1px solid #d8dee4; border-radius: 4px; padding: 1px 6px; }
.ch .kit { margin-left: 8px; font: bold 11px "Trebuchet MS", sans-serif; padding: 3px 8px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; cursor: pointer; }
.ch .kit.on { background: var(--yellow); }
.shop-tiers button { font: bold 12px "Trebuchet MS", sans-serif; padding: 5px 10px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; }
.shop-tiers button.on { background: var(--ink); color: #fff; }
.shop-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; text-align: left; }
.item { position: relative; display: grid; gap: 4px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; box-shadow: 3px 3px 0 rgba(0,0,0,0.15); }
.item.owned { background: #eef8ef; }
.item.legendary { border-color: #b8860b; background: linear-gradient(160deg, #fff8dc, #fff); }
.item b { font-size: 15px; line-height: 1.2; }
.item .muted, .muted { font-size: 12px; color: var(--muted); }
.item .tag { position: absolute; top: -9px; right: 10px; font: bold 10px "Trebuchet MS", sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--yellow); border: 2px solid var(--ink); }
.item .tag.ph { background: #e6e9ec; }
.item .contents { font-size: 11px; color: #3b4a50; line-height: 1.3; }
.item .buy { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.item .buy b { font-size: 17px; }
.item .buy button { font: 900 13px "Arial Black", "Trebuchet MS", sans-serif; padding: 6px 12px; border-radius: 6px; border: 2px solid var(--ink); background: var(--yellow); color: var(--ink); cursor: pointer; }
.item .buy button:disabled { background: #e6e9ec; cursor: default; }
.item .buy .own { font-weight: bold; color: var(--green); }
.checkout { margin: 14px 0; padding: 14px 16px; border: 3px solid var(--ink); border-radius: 10px; background: #fff; text-align: left; box-shadow: 6px 6px 0 rgba(0,0,0,0.2); }
.checkout h3 { margin: 0 0 4px; }
.co-contents { font-size: 12px; color: #3b4a50; margin-bottom: 8px; }
.co-pay { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.co-pay button { flex: 1; min-width: 120px; padding: 10px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); font: bold 14px "Trebuchet MS", sans-serif; cursor: pointer; text-align: left; }
.co-pay button.on { background: var(--ink); color: #fff; }
.co-pay button:disabled { opacity: 0.55; cursor: default; }
.co-pay button small { display: block; font-weight: normal; font-size: 11px; opacity: 0.85; }
.co-wallet { font-size: 13px; margin: 6px 0; }
.co-wallet code { font-family: ui-monospace, Menlo, Consolas, monospace; background: #f1f3f5; padding: 2px 6px; border-radius: 6px; }
.co-quote { margin: 10px 0; padding: 10px 12px; border-radius: 8px; background: #f1f3f5; font-size: 14px; }
.co-quote b { font-size: 22px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.co-quote .ttl { font-weight: bold; color: var(--red); }
.co-twice { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; padding: 8px 10px; border: 2px solid var(--red); border-radius: 8px; background: #fff4f2; font-size: 13px; }
.co-twice input { width: 20px; height: 20px; flex: none; }
.co-msg { min-height: 1.2em; font-weight: bold; font-size: 14px; margin: 8px 0; }
.co-msg.bad { color: var(--red); }
.co-rules { font-size: 12px; color: #3b4a50; margin: 6px 0; }
.co-rules ul { margin: 6px 0 0; padding-left: 18px; }
.co-actions { display: flex; gap: 8px; margin-top: 10px; }
.co-actions button { padding: 10px 16px; border-radius: 8px; border: 2px solid var(--ink); background: #fff; color: var(--ink); font: 900 15px "Arial Black", "Trebuchet MS", sans-serif; cursor: pointer; }
.co-actions button.primary { background: var(--yellow); }
.co-actions button:disabled { opacity: 0.5; cursor: default; }
.hall { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 12px; text-align: left; font-size: 13px; }
.hall span b { font-family: ui-monospace, Menlo, Consolas, monospace; color: #b8860b; margin-right: 6px; }
.limit-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; margin-bottom: 12px; }
.limit-row input { width: 80px; padding: 6px 8px; border: 2px solid var(--ink); border-radius: 6px; font: inherit; }
.limit-row button { padding: 6px 12px; border-radius: 6px; border: 2px solid var(--ink); background: #fff; color: var(--ink); font: bold 13px "Trebuchet MS", sans-serif; cursor: pointer; }
.shop-orders button.mini, #shop-orders button.mini { padding: 3px 10px; border-radius: 6px; border: 2px solid var(--ink); background: #fff; color: var(--ink); font: bold 12px "Trebuchet MS", sans-serif; cursor: pointer; }
.co-wallet button { padding: 6px 12px; border-radius: 6px; border: 2px solid var(--ink); background: var(--green); color: #fff; font: bold 13px "Trebuchet MS", sans-serif; cursor: pointer; }
#weapon.wrapped { --wc: #e8b923 !important; }
#weapon.wrapped b { color: #b8860b; }

/* ---------- Connect wallet (public/js/wallet.js, copied from the website; same classes) ---------- */
.shop .bar-nav .wrap { display: flex; justify-content: flex-end; }
.wallet-btn { font: 800 13px "Trebuchet MS", sans-serif; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; background: var(--yellow); color: var(--ink); border: 3px solid var(--yellow); padding: 9px 14px; box-shadow: 3px 3px 0 var(--red); }
.wallet-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--red); }
.wallet-btn.is-on { background: var(--ink); color: var(--snow); border-color: var(--snow); font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0; text-transform: none; display: inline-flex; align-items: center; gap: 8px; }
.wallet-btn.is-on::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; margin-right: 8px; vertical-align: 1px; }
.wallet-btn .wm-logo { width: 18px; height: 18px; border-radius: 5px; }
.wm { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px max(16px, env(safe-area-inset-left, 0px)); }
.wm[hidden] { display: none; }
.wm-backdrop { position: absolute; inset: 0; background: rgba(10, 14, 18, .66); backdrop-filter: blur(4px); }
.wm-box { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #ffffff; color: #14171a; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 8px 8px 0 var(--ink); padding: 20px 20px 16px; text-align: left; user-select: text; -webkit-user-select: text; }
.wm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.wm-title { flex: 1; margin: 0; font-weight: 800; font-size: 1.2rem; line-height: 1.2; letter-spacing: 0; text-transform: none; }
.wm-net { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: #f1f3f5; color: #3b4a50; }
.wm-net::before { content: ""; width: 12px; height: 10px; background: linear-gradient(90deg, #9945ff, #14f195); clip-path: polygon(15% 0, 100% 0, 85% 30%, 0 30%, 15% 35%, 100% 35%, 85% 65%, 0 65%, 15% 70%, 100% 70%, 85% 100%, 0 100%); }
.wm-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f1f3f5; color: #14171a; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.wm-close:hover { background: #e3e7ea; }
.wm-sec { margin: 14px 0 8px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6b7880; }
.wm-sec:first-child { margin-top: 0; }
.wm-rows, .wm-grid { list-style: none; margin: 0; padding: 0; }
.wm-rows { display: grid; gap: 6px; }
.wm-row-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 2px solid #e6e9ec; border-radius: 14px; background: #ffffff; color: #14171a; font: 800 1rem "Trebuchet MS", sans-serif; cursor: pointer; text-align: left; }
.wm-row-item:hover, .wm-row-item:focus-visible { border-color: var(--ink); background: #fff8dc; }
.wm-logo { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; overflow: hidden; background: #f1f3f5; }
.wm-logo img { width: 100%; height: 100%; display: block; }
.wm-logo.is-letter { background: var(--ink); color: var(--snow); font-weight: 900; }
.wm-name { flex: 1; }
.wm-pill { font-size: .7rem; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: #dcfce7; color: #166534; }
.wm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wm-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border: 2px solid #e6e9ec; border-radius: 16px; background: #ffffff; color: #14171a; text-decoration: none; text-align: center; }
.wm-tile:hover, .wm-tile:focus-visible { border-color: var(--ink); background: #fff8dc; }
.wm-tile .wm-logo { width: 44px; height: 44px; border-radius: 12px; }
.wm-tile-name { font-weight: 800; font-size: .82rem; line-height: 1.15; overflow-wrap: anywhere; }
.wm-tile-tag { font-size: .68rem; font-weight: 800; color: #6b7880; text-transform: uppercase; letter-spacing: .08em; }
.wm-more { display: block; width: 100%; margin-top: 8px; padding: 10px; border: 2px dashed #c9d0d5; border-radius: 12px; background: transparent; font: 800 .88rem "Trebuchet MS", sans-serif; color: #3b4a50; cursor: pointer; }
.wm-more:hover { border-color: var(--ink); color: var(--ink); }
.wm-hint { margin: 10px 0 0; font-size: .85rem; color: #4a565c; }
.wm-connected { display: grid; gap: 10px; }
.wm-connected[hidden], .wm-body[hidden] { display: none; }
.wm-label { margin: 0; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--green); }
.wm-addr { overflow-wrap: anywhere; font-family: ui-monospace, Menlo, Consolas, monospace; background: #f1f3f5; border-radius: 12px; padding: 12px; }
.wm-row { display: flex; gap: 8px; flex-wrap: wrap; }
.wm-action { flex: 1; padding: 11px 14px; border: 2px solid var(--ink); border-radius: 12px; background: #ffffff; font: 800 .9rem "Trebuchet MS", sans-serif; cursor: pointer; }
.wm-action.is-red { background: var(--red); border-color: var(--red); color: #ffffff; }
.wm-msg { min-height: 1.2em; margin: 10px 0 0; font-weight: 800; font-size: .88rem; }
.wm-msg:empty { display: none; }
.wm-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e6e9ec; display: grid; gap: 6px; }
.wm-safe { margin: 0; font-size: .78rem; color: #5b676d; }
.wm-learn { font-size: .8rem; font-weight: 800; color: var(--ink); }

/* ---------- the shops in the town and the siding range ---------- */
#zone { position: absolute; left: 50%; bottom: 27%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; pointer-events: none; }
#zone b { font: 900 20px "Arial Black", sans-serif; letter-spacing: 1px; text-shadow: 0 2px 0 rgba(0,0,0,0.55); }
#zone span { font-size: 13px; opacity: 0.9; text-shadow: 0 1px 0 rgba(0,0,0,0.6); max-width: 70vw; }
#zone button { pointer-events: auto; margin-top: 2px; font: 900 15px "Arial Black", "Trebuchet MS", sans-serif; padding: 9px 18px; border-radius: 999px; border: 3px solid #fff; background: var(--yellow); color: var(--ink); cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,0.35); }
#zone.range button { background: #4b5320; color: #fff; }
#range-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 92vw); max-height: 80vh; overflow: auto; pointer-events: auto; background: rgba(15,22,34,0.93); border: 3px solid #fff; border-radius: 10px; padding: 12px 14px; color: #fff; }
#range-panel .rp-head { display: flex; align-items: center; gap: 10px; }
#range-panel .rp-head b { font: 900 18px "Arial Black", sans-serif; flex: 1; }
#range-panel .rp-head span { font-size: 13px; color: var(--yellow); }
#range-panel .rp-head button { font-size: 12px; padding: 4px 10px; }
#range-panel p { font-size: 12px; margin: 6px 0 10px; color: #c9d3df; }
#rp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
#rp-list button { display: grid; gap: 2px; text-align: left; padding: 7px 9px; border-radius: 8px; border: 2px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.08); color: #fff; cursor: pointer; font-size: 12px; }
#rp-list button b { font-size: 13px; }
#rp-list button .rp-pic { width: 100%; max-width: 128px; height: auto; border-radius: 6px; background: rgba(0,0,0,0.25); }
#rp-list button small { color: #c9d3df; }
#rp-list button.on { border-color: var(--yellow); background: rgba(242,200,31,0.25); }
#rp-list button.top { opacity: 0.55; cursor: not-allowed; border-style: dashed; }
#rp-list button.top small { color: #ffb0b0; }
.fit { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 14px; align-items: start; margin: 0 0 12px; padding: 12px; border: 2px solid var(--ink); border-radius: 8px; background: linear-gradient(180deg, #f6eef3, #fff); }
.fit-podium { width: 100%; }
#fit-canvas { position: relative; z-index: 1; width: 100%; height: 100%; }
.fit-btns { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.fit-btns .chip { color: #fff; cursor: pointer; border: 0; }
.fit-side h3 { margin: 0 0 4px; }
.fit-side p { font-size: 13px; margin: 0 0 8px; }
#fit-extra { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
#fit-extra canvas { height: 56px; width: auto; border-radius: 6px; border: 1px solid #d8dee4; background: #eef5fb; }
#fit-extra span { font-size: 12px; align-self: center; }
#fit-wear { font: 900 14px "Arial Black", "Trebuchet MS", sans-serif; padding: 8px 14px; border-radius: 6px; border: 2px solid var(--ink); background: var(--yellow); color: var(--ink); cursor: pointer; }
.item .buy .tryon { background: #fff; }
@media (max-width: 700px) { .fit { grid-template-columns: 1fr; } .fit-podium { width: min(60vw, 240px); margin: 0 auto; } }

.now-playing { font-size: 12px; opacity: 0.75; margin: -4px 0 6px 26px; min-height: 1em; }
/* The page X sends you back to after linking */
body.x-linked { display: grid; place-items: center; min-height: 100vh; margin: 0; background: #1d2733; }
body.x-linked .card { max-width: 420px; padding: 24px; }
.x-status { font-size: 13px; margin: 6px 0 0; }
.x-status a { color: #2f5fd0; }
.x-status button { background: none; border: 0; color: #2f5fd0; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }

/* ---------- Presale panel (menu and results screens), in the social banners' look ---------- */
@font-face { font-family: Bowlby; src: url('/fonts/bowlby-one.woff2') format('woff2'); font-display: swap; }
.presale { position: fixed; top: 12px; right: 12px; z-index: 12; width: min(420px, calc(100vw - 24px)); height: 160px; overflow: hidden;
  color: #0a1424; border: 0; border-radius: 14px; box-shadow: 0 10px 26px rgba(0,0,0,0.38);
  background:
    url('/brand/mountains.svg') center bottom / 100% 66% no-repeat,
    radial-gradient(circle, #fff 0 1.6px, transparent 2.1px) 0 0 / 46px 56px,
    radial-gradient(circle, rgba(255,255,255,0.9) 0 1.1px, transparent 1.6px) 23px 28px / 46px 56px,
    linear-gradient(#81b7dc 0%, #bddcf1 60%, #cfe7f6 100%);
  animation: presale-in 0.5s ease-out; }
.presale.hidden { display: none; }
@keyframes presale-in { from { transform: translateY(-18px); opacity: 0; } to { transform: none; opacity: 1; } }
/* the screens make room for it: the player card drops below it, the round-over card starts under it */
#menu.presale-top .player-card { margin-top: 176px; max-height: calc(100vh - 208px); }
#results.presale-top .card { margin-top: 64px; max-height: calc(100vh - 96px); }
.presale-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.presale-text { position: absolute; left: var(--side, 150px); right: var(--side, 150px); top: 10px; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1; transition: opacity 0.35s; }
.presale.presale-hit .presale-text { opacity: 0; transition: none; }
.presale-head { display: inline-block; background: #f6c536; color: #0a1424; border: 2px solid #0a1424; padding: 5px 10px 3px; font-family: Bowlby, "Arial Black", "Trebuchet MS", sans-serif; font-weight: 400; font-size: 15px; letter-spacing: 0.01em; text-transform: uppercase; transform: rotate(-2deg); box-shadow: 4px 4px 0 #0a1424; white-space: nowrap; }
.presale-coin { width: 20px; height: 20px; border-radius: 50%; vertical-align: -4px; margin-right: 6px; }
.presale-line { margin-top: 9px; font-size: 12px; font-weight: 700; color: #0a1424; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; display: flex; align-items: baseline; gap: 7px; }
.presale-clock { font-family: Bowlby, "Arial Black", "Trebuchet MS", sans-serif; font-weight: 400; font-size: 27px; color: #0a1424; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; text-shadow: 2px 2px 0 #fff; text-transform: none; }
.presale-date { margin-top: 5px; font-size: 12px; font-weight: 700; color: #0a1424; }
.presale-btn { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%) rotate(-2deg); z-index: 1; background: #ff3d2e; color: #fff; border: 2px solid #0a1424; border-radius: 4px;
  padding: 5px 18px 3px; font-family: Bowlby, "Arial Black", "Trebuchet MS", sans-serif; font-weight: 400; font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; box-shadow: 4px 4px 0 #0a1424; transition: transform 0.1s; }
.presale-btn:hover { transform: translate(-50%, -2px) rotate(-2deg); background: #ff5546; }
.presale-btn:active { transform: translate(-50%, 2px) rotate(-2deg); box-shadow: 2px 2px 0 #0a1424; }
.presale.presale-narrow .presale-head { font-size: 13px; }
.presale.presale-narrow .presale-clock { font-size: 21px; }
.presale.presale-narrow .presale-line { gap: 5px; font-size: 11px; }
.presale.presale-compact { width: auto; height: auto; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,0.35); background-size: 100% 100%, 46px 56px, 46px 56px, auto; }
.presale.presale-compact .presale-fx { display: none; }
.presale.presale-compact .presale-text { position: static; flex-direction: row; align-items: center; gap: 8px; opacity: 1 !important; }
.presale.presale-compact .presale-head { font-size: 11px; padding: 3px 7px 2px; box-shadow: 3px 3px 0 #0a1424; }
.presale.presale-compact .presale-coin { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.presale.presale-compact .presale-line { margin-top: 0; font-size: 10px; }
.presale.presale-compact .presale-clock { font-size: 17px; }
.presale.presale-compact .presale-date { display: none; }
.presale.presale-compact .presale-btn { position: static; transform: rotate(-2deg); padding: 4px 12px 2px; font-size: 14px; box-shadow: 3px 3px 0 #0a1424; }
.presale.presale-compact .presale-btn:hover { transform: translateY(-1px) rotate(-2deg); }
@media (max-width: 720px), (max-height: 480px) {
  .presale, .presale.presale-compact { top: auto; right: auto; bottom: 8px; left: 50%; transform: translateX(-50%); animation: none; }
  #menu.presale-top .player-card { margin-top: 0; max-height: calc(100vh - 32px); }
  #results.presale-top .card { margin-top: 0; max-height: calc(100vh - 32px); }
}