:root {
  --lime: #8be000;
  --ink: #1d1d1d;
  --paper: #fff8e6;
  --gold: #ffe14d;
  --slime: #7cff2e;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #9fd3ff;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  color: var(--ink);
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; /* no iPhone "Copy / Copy Link" bubble when you hold a finger down */
  overscroll-behavior: none;
}
[hidden] { display: none !important; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; cursor: pointer; color: var(--ink); }

/* ---------- panels ---------- */
.panel {
  width: 100%; max-width: 400px; background: var(--paper);
  border: 4px solid var(--ink); border-radius: 18px; padding: 18px;
  box-shadow: 0 8px 0 var(--ink);
}
#lobby {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(20, 40, 10, 0.35); overflow-y: auto; touch-action: pan-y;
}
#lobby .panel { max-height: calc(100% - 8px); overflow-y: auto; touch-action: pan-y; margin: auto; }
.game-name {
  margin: 0; text-align: center; font-family: "Arial Black", Impact, sans-serif;
  font-size: 30px; line-height: 1.05; color: var(--lime);
  -webkit-text-stroke: 1.5px var(--ink); text-shadow: 0 4px 0 var(--ink);
}
.tagline { text-align: center; margin: 8px 0 12px; font-size: 14px; }
label, .label { display: block; font-weight: bold; margin: 12px 0 6px; }
.row { display: flex; gap: 8px; }
input[type="text"], #name-input, #chat-input, .modal-body input, .modal-body select {
  font: inherit; font-size: 17px; padding: 9px 11px; min-width: 0;
  border: 3px solid var(--ink); border-radius: 10px; background: #fff;
  -webkit-user-select: text; user-select: text;
}
#name-input { flex: 1; }
#random-name { font-size: 22px; width: 52px; border: 3px solid var(--ink); border-radius: 10px; background: var(--gold); }
.tabards { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.tabards button { height: 34px; border-radius: 8px; border: 3px solid var(--ink); }
.picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.picks button {
  padding: 6px 4px; border: 3px solid var(--ink); border-radius: 10px; background: #fff;
  font-size: 12px; font-weight: bold; line-height: 1.15; min-height: 44px;
}
button[aria-pressed="true"] { outline: 4px solid var(--lime); outline-offset: 1px; background: #efffd6; }
.big {
  width: 100%; margin-top: 16px; padding: 14px; font-size: 22px; font-weight: bold;
  background: var(--lime); border: 4px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink);
}
.big:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.big:disabled { opacity: 0.6; }
#lobby-status { min-height: 1.2em; margin: 10px 0 0; text-align: center; font-weight: bold; color: #b3261e; }
.lobby-foot { text-align: center; margin: 6px 0 0; }
.linkish { background: none; border: none; padding: 4px; font-size: 14px; font-weight: bold; color: #2a5d00; text-decoration: underline; }
.credit { text-align: center; font-size: 12px; color: #6b5a2b; margin: 8px 0 0; font-style: italic; }
#loading {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(circle at 50% 40%, #b8f06a, #5aa52a); transition: opacity 0.5s; padding: 16px; text-align: center;
}
#loading.gone { opacity: 0; pointer-events: none; }
#loading .game-name { font-size: 40px; }
#loading .loading-text { font-weight: bold; font-size: 17px; margin: 10px 0 0; }
#loading .credit { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); left: 0; right: 0; font-size: 15px; color: #1d3a0a; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud button, #hud form, #hud input, #chat-log, #top-left, #minimap { pointer-events: auto; }
#top-left { position: absolute; top: calc(26px + env(safe-area-inset-top)); /* clear of the very top edge, where Safari's own pop-ups appear */ left: calc(10px + env(safe-area-inset-left)); max-width: 46%; cursor: pointer; }
#world-info { display: none; margin-top: 3px; background: rgba(0, 0, 0, 0.45); color: #fff; padding: 3px 8px; border-radius: 8px; font-size: 11px; }
#top-left.open #world-info { display: inline-block; }
#world-info b { color: var(--gold); }
#my-score {
  background: rgba(255, 225, 77, 0.92); color: var(--ink); border: 2px solid var(--ink); padding: 1px 8px; border-radius: 9px;
  font-size: 13px; display: inline-block; white-space: nowrap;
}
#my-score:empty { display: none; }
#my-score.bump { animation: bump 0.35s; }
@keyframes bump { 40% { transform: scale(1.15); } }
#board { list-style: none; margin: 4px 0 0; padding: 0; font-size: 11px; width: 140px; max-width: 100%; }
#board li { display: flex; gap: 4px; background: rgba(0, 0, 0, 0.32); color: #fff; border-radius: 6px; padding: 0 6px; margin-bottom: 2px; white-space: nowrap; }
#board li.empty { color: #ddd; }
#top-left.open #board { width: 190px; font-size: 12px; }
#top-left.open #board li { background: rgba(0, 0, 0, 0.55); padding: 1px 7px; }
#board li .rank { width: 14px; text-align: center; color: #ddd; }
#board li .name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
#board li small { font-size: 9px; }
#board li.me { background: rgba(90, 150, 0, 0.7); }
#board li .score { color: var(--gold); font-weight: bold; }
.float-score {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none; z-index: 4;
  font-family: "Arial Black", Impact, sans-serif; font-size: 20px; color: var(--gold); -webkit-text-stroke: 1px var(--ink); text-shadow: 0 3px 0 var(--ink);
  animation: floatUp 1.4s ease-out forwards; white-space: nowrap;
}
.float-score.mine { font-size: 32px; color: var(--slime); }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, -20%) scale(0.5); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }
#top-right { position: absolute; top: calc(8px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#minimap { width: 76px; height: 120px; border: 3px solid var(--ink); border-radius: 10px; background: #2d4a1e; opacity: 0.92; }
.mini-buttons { display: flex; gap: 6px; align-items: flex-start; }
.mini-buttons button { width: 44px; height: 42px; border-radius: 12px; border: 3px solid var(--ink); background: var(--paper); padding: 0; line-height: 1; }
.mini-buttons button i { font-style: normal; display: block; font-size: 16px; }
.mini-buttons button span { display: block; font-size: 9.5px; font-weight: bold; margin-top: 1px; }
#hud #btn-clip {
  width: 66px; height: 54px; background: radial-gradient(circle at 40% 35%, #ff8a8a, #e8323c); color: #fff; position: relative;
  box-shadow: 0 4px 0 var(--ink);
}
#btn-clip i { font-size: 22px; }
#btn-clip span { font-size: 11.5px; -webkit-text-stroke: 0.3px var(--ink); }
#btn-clip .callout {
  display: none; position: absolute; right: -4px; top: calc(100% + 12px); white-space: nowrap;
  font-style: normal; font-weight: bold; font-size: 15px; color: var(--ink); background: var(--gold); border: 3px solid var(--ink);
  border-radius: 12px; padding: 6px 10px; pointer-events: none;
}
#btn-clip .callout::after { content: ""; position: absolute; right: 24px; top: -10px; border: 7px solid transparent; border-bottom-color: var(--ink); border-top: 0; }
#btn-clip.pulse { animation: clipPulse 0.7s ease-in-out infinite alternate; }
#btn-clip.pulse .callout { display: block; }
@keyframes clipPulse { from { transform: scale(1); box-shadow: 0 4px 0 var(--ink), 0 0 0 0 rgba(255, 60, 60, 0.9); } to { transform: scale(1.12); box-shadow: 0 4px 0 var(--ink), 0 0 0 14px rgba(255, 60, 60, 0); } }

#status {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none;
  font-family: "Arial Black", Impact, sans-serif; font-size: 24px; color: var(--slime);
  -webkit-text-stroke: 1.2px var(--ink); text-shadow: 0 3px 0 var(--ink); width: 90%;
}
#held {
  position: absolute; bottom: calc(240px + env(safe-area-inset-bottom)); right: calc(14px + env(safe-area-inset-right));
  background: rgba(0, 0, 0, 0.55); color: #fff; padding: 4px 9px; border-radius: 10px; font-size: 13px;
}

#stick-base {
  position: absolute; width: 130px; height: 130px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18); border: 3px solid rgba(255, 255, 255, 0.5);
  left: calc(26px + env(safe-area-inset-left)); bottom: calc(36px + env(safe-area-inset-bottom));
  display: none;
}
#stick-knob {
  position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-radius: 50%; background: rgba(139, 224, 0, 0.85); border: 3px solid var(--ink);
}
.touch #stick-base { display: block; }

#actions {
  position: absolute; right: calc(12px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
#context { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 240px; }
#context button {
  border: 3px solid var(--ink); border-radius: 14px; background: var(--gold); font-weight: bold; font-size: 16px;
  padding: 10px 12px; box-shadow: 0 4px 0 var(--ink); animation: pop 0.2s;
}
.action-grid {
  display: grid; grid-template-columns: 50px 50px 50px 50px; grid-template-rows: 46px 66px 66px 42px; gap: 8px;
  grid-template-areas: "zoom bell food hop" "throw throw main main" "throw throw main main" ". . brake brake";
}
.action-grid button { border: 3px solid var(--ink); background: rgba(255, 248, 230, 0.9); touch-action: none; padding: 0; line-height: 1; }
.action-grid button i { font-style: normal; display: block; font-size: 19px; }
.action-grid button span { display: block; font-size: 10px; font-weight: bold; margin-top: 2px; white-space: nowrap; }
.action-grid .small { border-radius: 14px; }
#btn-zoom { grid-area: zoom; } #btn-shops { grid-area: bell; } #btn-food { grid-area: food; } #btn-hop { grid-area: hop; }
#btn-throw { grid-area: throw; border-radius: 50%; width: 88%; height: auto; aspect-ratio: 1; align-self: center; justify-self: center; position: relative; background: #ffd6a5; }
#btn-throw i { font-size: 30px; }
#btn-throw span { font-size: 12px; }
#btn-throw .count { position: absolute; right: -4px; top: -4px; background: var(--ink); color: #fff; border-radius: 10px; font-size: 12px; padding: 2px 6px; margin: 0; }
#btn-main {
  grid-area: main; border-radius: 50%; aspect-ratio: 1; width: 100%; height: auto; align-self: center; border-width: 4px;
  background: radial-gradient(circle at 40% 35%, #c6ff5a, var(--lime)); box-shadow: 0 5px 0 var(--ink);
}
#btn-main i { font-size: 26px; }
#btn-main span { font-family: "Arial Black", Impact, sans-serif; font-size: 16px; margin-top: 3px; }
#btn-main.cooling { background: #c9c9c0; }
#btn-main.joust { background: radial-gradient(circle at 40% 35%, #fff3a0, #ffc400); animation: throb 0.9s infinite alternate; }
#btn-main.joust span { font-size: 18px; }
#btn-main.locked { background: radial-gradient(circle at 40% 35%, #ffb0a0, #ff3b3b); color: #fff; animation: none; }
#btn-main.locked span { font-size: 13px; -webkit-text-stroke: 0.5px var(--ink); }
@keyframes throb { from { transform: scale(1); box-shadow: 0 5px 0 var(--ink), 0 0 0 0 rgba(255, 210, 0, 0.9); } to { transform: scale(1.06); box-shadow: 0 5px 0 var(--ink), 0 0 0 10px rgba(255, 210, 0, 0); } }

/* "how to play": one step per screen */
#tutorial { position: fixed; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.5); pointer-events: auto; }
#tutorial .panel { position: relative; text-align: center; }
#tutorial .skip { position: absolute; top: 10px; right: 10px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; font-size: 13px; padding: 4px 10px; }
#tutorial .step { font-size: 56px; line-height: 1.1; margin: 6px 0 2px; }
#tutorial .title { margin: 4px 0 6px; font-family: "Arial Black", Impact, sans-serif; font-size: 22px; }
#tutorial .text { font-size: 18px; line-height: 1.35; min-height: 72px; }
#tutorial .practice { margin: 10px auto 0; cursor: pointer; }
#tutorial .practice .ring-wrap { width: 150px; margin: 0 auto; background: radial-gradient(circle, #6aa84f 0, #3d6b2e 70%); border-radius: 50%; }
#tutorial .practice .ring-shield { font-size: 60px; }
#tutorial .practice-word { margin-top: 8px; font-weight: bold; font-size: 18px; min-height: 24px; }
#tutorial .dots { display: flex; gap: 6px; justify-content: center; margin: 12px 0 10px; }
#tutorial .dots i { width: 10px; height: 10px; border-radius: 50%; background: #d8ccaa; }
#tutorial .dots i.on { background: var(--lime); outline: 2px solid var(--ink); }
#tutorial .nav { display: flex; justify-content: space-between; gap: 10px; }
#tutorial .nav .btn { flex: 1; font-size: 18px; padding: 12px; border: 3px solid var(--ink); border-radius: 12px; font-weight: bold; background: var(--lime); box-shadow: 0 4px 0 var(--ink); }
#tutorial .nav .btn.alt { background: #fff; }
#btn-main.foot { background: radial-gradient(circle at 40% 35%, #ffd0a0, #ff8a3d); }
#btn-main.fish { background: radial-gradient(circle at 40% 35%, #ffc4b5, #ff6f59); }
#btn-main.fish span { font-size: 13px; }
/* market popups: the dyer's colours, flowers */
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.swatches button { height: 58px; border: 3px solid var(--ink); border-radius: 12px; font-size: 11px; font-weight: bold; color: #fff; text-shadow: 0 1px 2px #000; padding: 2px; display: flex; align-items: flex-end; justify-content: center; }
.swatches button:disabled { opacity: 0.45; filter: grayscale(0.6); }
.swatches button small { display: block; font-size: 10px; }
.pick-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.pick-list button { text-align: left; border: 3px solid var(--ink); border-radius: 12px; background: #fff; font-size: 15px; padding: 10px 12px; line-height: 1.3; }
.pick-list button:active { background: #efffd6; }
.flower-card { text-align: center; }
.flower-card .bouquet { font-size: 84px; line-height: 1; animation: pop 0.4s; }
.flower-card .msg { font-size: 19px; font-weight: bold; margin: 10px 0; line-height: 1.35; }
.flower-card .from { color: #b3261e; font-weight: bold; }
#btn-brake { grid-area: brake; border-radius: 16px; background: #ff8a65; display: flex; align-items: center; justify-content: center; gap: 5px; }
#btn-brake i { font-size: 16px; } #btn-brake span { font-size: 14px; margin: 0; }
.action-grid button.held { transform: scale(0.92); filter: brightness(0.85); }
body:not(.touch) #btn-brake { visibility: hidden; }

/* swap sides: joystick on the right, buttons on the left */
.swap #stick-base { left: auto; right: calc(26px + env(safe-area-inset-right)); }
.swap #actions { right: auto; left: calc(12px + env(safe-area-inset-left)); align-items: flex-start; }
.swap #context { justify-content: flex-start; }
.swap .action-grid { grid-template-areas: "hop hop bell zoom" "main main throw throw" "main main throw throw" "brake brake . ."; }
.swap #btn-hop { justify-self: start; }
.swap #held { right: auto; left: calc(14px + env(safe-area-inset-left)); }
.swap #chat { left: auto; right: calc(10px + env(safe-area-inset-right)); align-items: flex-end; }

#keys-help {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); max-width: 44vw; text-align: center;
  background: rgba(0, 0, 0, 0.5); color: #fff; padding: 4px 10px; border-radius: 10px; font-size: 11px;
}
.touch #keys-help { display: none; }

/* ---------- chat (always on screen) ---------- */
#chat {
  position: absolute; left: calc(10px + env(safe-area-inset-left)); bottom: calc(8px + env(safe-area-inset-bottom));
  width: min(56vw, 360px); display: flex; flex-direction: column; gap: 3px; pointer-events: none;
}
#chat-log { display: flex; flex-direction: column; gap: 2px; justify-content: flex-end; pointer-events: none !important; }
#chat-log .msg { background: rgba(0, 0, 0, 0.32); color: #fff; font-size: 12px; line-height: 1.25; padding: 2px 7px; border-radius: 7px; overflow-wrap: anywhere; text-shadow: 0 1px 1px #000; }
#chat-log .who { color: var(--gold); font-weight: bold; cursor: pointer; pointer-events: auto; }
#chat-log .sys { color: #9fe8ff; }
#chat-form { display: flex; gap: 5px; pointer-events: auto; }
#chat-form input { flex: 1; font-size: 16px; padding: 5px 9px; border-width: 2px; background: rgba(255, 255, 255, 0.55); }
#chat.open #chat-form input { background: #fff; }
#chat-form button { border: 2px solid var(--ink); border-radius: 10px; background: var(--lime); font-weight: bold; padding: 0 9px; opacity: 0.85; }
.touch #stick-base { bottom: calc(150px + env(safe-area-inset-bottom)); }

/* ---------- joust: the closing shield ring ---------- */
body.jousting #actions, body.jousting #chat, body.jousting #stick-base, body.jousting #top-left, body.jousting #top-right { visibility: hidden; }
#joust {
  position: fixed; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.6)); touch-action: none; cursor: pointer;
}
.joust-vs { position: absolute; top: calc(10% + env(safe-area-inset-top)); color: #fff; font-weight: bold; text-shadow: 0 2px 0 #000; font-size: 17px; text-align: center; width: 90%; }
.ring-wrap { position: relative; width: min(42vw, 190px); aspect-ratio: 1; }
.ring-target { position: absolute; inset: 0; border-radius: 50%; border: 10px solid rgba(255, 210, 63, 0.45); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5), inset 0 0 0 3px rgba(0, 0, 0, 0.5); }
.ring-closer { position: absolute; inset: 0; border-radius: 50%; border: 9px solid #fff; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #000; will-change: transform; }
.ring-closer.gold { border-color: #ffd23f; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #000, 0 0 30px 10px rgba(255, 210, 63, 0.85); }
.ring-closer.late { border-color: #ff7a6b; opacity: 0.7; }
.ring-shield { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: min(18vw, 84px); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.5)); }
.joust-hint { color: #fff; font-weight: bold; text-shadow: 0 2px 0 #000; text-align: center; font-size: 22px; }
.joust-hint b { color: #ffd23f; }
.joust-mine { min-height: 34px; font-family: "Arial Black", Impact, sans-serif; font-size: 28px; color: #fff; -webkit-text-stroke: 1.2px var(--ink); text-shadow: 0 3px 0 var(--ink); }
.joust-mine.gold { color: #ffd23f; }
#joust.done .ring-wrap, #joust.done .joust-hint, #joust.done .joust-vs { display: none; }
.joust-result { font-family: "Arial Black", Impact, sans-serif; font-size: 40px; color: var(--slime); -webkit-text-stroke: 1.5px var(--ink); text-shadow: 0 4px 0 var(--ink); text-align: center; width: 92%; }
.joust-result small { display: block; font-family: "Trebuchet MS", sans-serif; font-size: 16px; color: #fff; -webkit-text-stroke: 0; text-shadow: 0 2px 0 #000; margin-top: 6px; }

/* had a few: a warm wobbly haze round the edges */
body.haze #splatter { background: radial-gradient(ellipse at center, transparent 55%, rgba(255, 170, 40, 0.28) 100%); animation: haze 2.4s ease-in-out infinite alternate; }
@keyframes haze { from { transform: scale(1) rotate(-0.6deg); } to { transform: scale(1.05) rotate(0.6deg); } }

/* brain freeze: the screen frosts over */
#frost {
  position: fixed; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(220, 245, 255, 0.75) 80%, rgba(255, 255, 255, 0.95) 100%);
  box-shadow: inset 0 0 80px 30px rgba(170, 225, 255, 0.9); animation: freezeIn 0.4s;
}
#frost::before { content: "❄ ❄ ❄ ❄ ❄ ❄"; position: absolute; top: 6%; width: 100%; text-align: center; font-size: 30px; color: #fff; letter-spacing: 6vw; text-shadow: 0 0 8px #8fd3ff; }
#frost::after { content: "❄ ❄ ❄ ❄ ❄"; position: absolute; bottom: 30%; width: 100%; text-align: center; font-size: 26px; color: #fff; letter-spacing: 8vw; text-shadow: 0 0 8px #8fd3ff; }
#frost.melt { opacity: 0; transition: opacity 0.9s; }
@keyframes freezeIn { from { opacity: 0; transform: scale(1.1); } }

/* green slime on your screen when you get slimed */
#splatter { position: fixed; inset: 0; pointer-events: none; }
#splatter i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c8ff8a, var(--slime) 40%, #3fa000); opacity: 0.85; animation: drip 3s forwards; }
@keyframes drip { 0% { transform: scale(0.2); } 10% { transform: scale(1); } 80% { opacity: 0.85; } 100% { transform: translateY(60px) scale(1); opacity: 0; } }

/* ---------- speech bubbles from the park's characters ---------- */
.npc-bubble.chef { background: #ffd400; max-width: 220px; }
.npc-bubble.king { background: #ffe9a8; border-color: #8a0f20; }
.npc-bubble {
  position: fixed; z-index: 5; transform: translate(-50%, -100%); background: #fffdf2; border: 3px solid var(--ink); border-radius: 12px;
  padding: 4px 8px; font-size: 12.5px; font-weight: bold; max-width: 200px; pointer-events: auto; animation: pop 0.2s;
}

/* ---------- modal & toast ---------- */
#modal { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; touch-action: pan-y; }
.modal-panel { position: relative; max-height: calc(100% - 10px); overflow-y: auto; touch-action: pan-y; }
.modal-panel .close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; font-weight: bold; }
.modal-body h2 { margin: 0 0 10px; font-family: "Arial Black", Impact, sans-serif; font-size: 22px; padding-right: 40px; }
.modal-body p { margin: 8px 0; }
.modal-body .opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 2px dashed #e0d6bd; }
.modal-body .opt input[type="range"] { width: 50%; }
.modal-body .btn { border: 3px solid var(--ink); border-radius: 10px; background: var(--gold); font-weight: bold; padding: 8px 12px; margin: 4px 4px 0 0; }
.modal-body .btn.alt { background: #fff; }
.modal-body .players { max-height: 40vh; overflow-y: auto; }
.modal-body .players .opt span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-body .code { font-family: monospace; font-size: 22px; background: var(--gold); padding: 4px 10px; border-radius: 8px; border: 3px dashed var(--ink); display: inline-block; }
.modal-body .linkbox { width: 100%; font-size: 13px; }
.modal-body video { width: 100%; max-height: 50vh; border-radius: 10px; background: #000; }
.modal-body .stats { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; font-size: 14px; }
.toggle { width: 54px; height: 30px; border-radius: 15px; border: 3px solid var(--ink); background: #ddd; position: relative; flex: none; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); transition: left 0.15s; }
.toggle[aria-pressed="true"] { background: var(--lime); outline: none; }
.toggle[aria-pressed="true"]::after { left: 26px; }

#toast {
  position: fixed; top: 21%; left: 50%; transform: translate(-50%, -50%) scale(0.85); z-index: 15;
  font-family: "Arial Black", Impact, sans-serif; font-size: 26px; color: #fff; text-align: center;
  -webkit-text-stroke: 1.2px var(--ink); text-shadow: 0 3px 0 var(--ink);
  opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; width: 88%;
}
#toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#toast.herald {
  font-family: "Trebuchet MS", system-ui, sans-serif; font-weight: bold; font-size: 15px; -webkit-text-stroke: 0; text-shadow: none;
  width: auto; max-width: min(80vw, 420px); background: rgba(20, 20, 20, 0.6); padding: 6px 12px; border-radius: 12px; top: 15%;
}
#toast.warn {
  font-size: 30px; color: var(--gold); top: 27%; white-space: pre-line;
  animation: warnPulse 0.5s ease-in-out infinite alternate;
}
@keyframes warnPulse { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(1.06); } }

@media (max-width: 500px) {
  #toast { font-size: 20px; }
  #toast.warn { font-size: 24px; }
  #status { font-size: 20px; }
  .joust-result { font-size: 32px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .action-grid { grid-template-rows: 42px 56px 56px 44px; grid-template-columns: 42px 42px 42px 42px; }
  #chat { bottom: 8px; left: 190px; width: 32vw; }
  .swap #chat { left: auto; right: 210px; }
}
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* up a tree: no joystick (drag anywhere to look round instead) */
body.treetop #stick-base { display: none !important; }

/* the Shrooms: kaleidoscope colours and a wobbly screen */
body.tripping #game { animation: tripping 1.8s linear infinite; }
@keyframes tripping {
  0% { filter: hue-rotate(0deg) saturate(2.2); transform: scale(1.06) rotate(-1.6deg); }
  25% { transform: scale(1.1) rotate(0deg) skewX(2deg); }
  50% { filter: hue-rotate(180deg) saturate(2.8); transform: scale(1.06) rotate(1.6deg); }
  75% { transform: scale(1.1) rotate(0deg) skewX(-2deg); }
  100% { filter: hue-rotate(360deg) saturate(2.2); transform: scale(1.06) rotate(-1.6deg); }
}
#trip {
  position: fixed; inset: -30%; z-index: 2; pointer-events: none; mix-blend-mode: overlay; opacity: 0.55;
  background: repeating-conic-gradient(from 0deg, #ff3fa4 0deg 20deg, #ffd23f 20deg 40deg, #2ef2ff 40deg 60deg, #8be000 60deg 80deg, #9b6bd6 80deg 100deg);
  animation: kaleido 6s linear infinite;
}
@keyframes kaleido { to { transform: rotate(360deg) scale(1.2); } }
/* the paparazzi's flashes */
body.pap #splatter { background: rgba(255, 255, 255, 0.55); }
.picks button:disabled { opacity: 0.5; }
/* this week's scoreboard (shown when you tap the scoreboard) */
#week-board { display: none; margin-top: 4px; width: 190px; background: rgba(60, 10, 20, 0.7); color: #fff; border-radius: 8px; padding: 3px 7px; font-size: 11.5px; }
#top-left.open #week-board { display: block; }
#week-board ol { margin: 2px 0 0; padding-left: 16px; }
#week-board li span { display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
#week-board li b { float: right; color: var(--gold); }
.idea-form input { flex: 1; }
.idea-list { max-height: 42vh; overflow-y: auto; }
.idea-list .opt span { flex: 1; font-size: 14px; }

/* 🛍️ Shops list */
.modal-body .shops { display: flex; flex-direction: column; gap: 6px; }
.modal-body .shops button {
  display: grid; grid-template-columns: 34px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left;
  border: 3px solid var(--ink); border-radius: 12px; background: #fff; padding: 6px 10px; font: inherit; color: var(--ink);
}
.modal-body .shops button i { grid-row: span 2; font-style: normal; font-size: 24px; text-align: center; }
.modal-body .shops button b { font-size: 15px; }
.modal-body .shops button small { grid-column: 2; font-size: 12px; color: #6b5a2b; }
.modal-body .shops button em { grid-row: 1 / span 2; grid-column: 3; font-style: normal; font-size: 12px; color: #6b5a2b; }
.modal-body .shops button[aria-pressed="true"] { background: var(--gold); }

/* the big map */
#minimap { cursor: pointer; }
#bigmap { position: fixed; inset: 0; z-index: 25; background: #6b6f75; }
#bigmap canvas { width: 100%; height: 100%; display: block; }
.bigmap-hint {
  position: absolute; left: 50%; bottom: calc(8px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: rgba(255, 248, 230, 0.92); border: 2px solid var(--ink); border-radius: 10px; padding: 3px 10px; font-weight: bold; font-size: 13px;
}
.modal-body .clip-what { margin: -4px 0 8px; font-weight: bold; font-size: 16px; color: #b3261e; }

/* who made the game (loading screen + Settings) */
.maker { text-align: center; }
.maker p { margin: 6px 0; }
.maker-line { font-weight: bold; font-size: 14px; }
.maker-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.maker-links a { text-decoration: none; color: var(--ink); }
.maker .tip { font-size: 13px; color: #6b5a2b; }
.modal-body .maker { margin-top: 14px; padding-top: 10px; border-top: 2px dashed #e0d6bd; }
#loading .maker { position: absolute; bottom: calc(20px + env(safe-area-inset-bottom)); left: 0; right: 0; color: #1d3a0a; }
#loading .maker-links a { border: 3px solid var(--ink); border-radius: 10px; background: var(--gold); font-weight: bold; padding: 8px 12px; font-size: 14px; }
#context a.quiet {
  border: 2px solid var(--ink); border-radius: 14px; background: rgba(255, 248, 230, 0.85); color: var(--ink); font-weight: bold; font-size: 13px;
  padding: 8px 10px; text-decoration: none; align-self: center; pointer-events: auto;
}

/* 🍻 the card at the pub bar */
#tipcard {
  position: absolute; left: 50%; top: 30%; transform: translateX(-50%); width: min(320px, 86vw); z-index: 6;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; padding: 12px 14px 12px; box-shadow: 0 4px 0 var(--ink);
  pointer-events: auto; animation: fadein 0.3s;
}
#tipcard p { margin: 0 22px 10px 0; font-size: 14px; line-height: 1.35; }
#tipcard .x { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; font-weight: bold; padding: 0; }
#tipcard .row { display: flex; gap: 8px; flex-wrap: wrap; }
#tipcard .row > * { flex: 1 1 120px; border: 3px solid var(--ink); border-radius: 12px; font-weight: bold; font-size: 14px; padding: 9px 8px; text-align: center; color: var(--ink); text-decoration: none; }
#tipcard .have { background: #fff; }
#tipcard .buy { background: linear-gradient(#ffe680, #ffc93b); box-shadow: 0 0 10px rgba(255, 201, 59, 0.6); }

/* the small, once-in-a-while reminder */
#tipnudge {
  position: absolute; left: 50%; top: calc(8px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 6px; background: rgba(255, 248, 230, 0.95); border: 2px solid var(--ink); border-radius: 12px; padding: 4px 4px 4px 10px;
  pointer-events: auto; font-size: 13px; white-space: nowrap; animation: fadein 0.6s;
}
#tipnudge a { color: var(--ink); font-weight: bold; text-decoration: none; }
#tipnudge button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; font-weight: bold; padding: 0; font-size: 12px; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* a pint pouring, on screen, when someone buys the devs one */
#pour { position: fixed; left: 50%; top: 24%; transform: translateX(-50%); z-index: 30; pointer-events: none; text-align: center; }
#pour .glass { width: 56px; height: 84px; margin: 0 auto; border: 4px solid var(--ink); border-top: none; border-radius: 0 0 10px 10px; background: rgba(220, 240, 255, 0.5); position: relative; overflow: hidden; }
#pour .beer { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(#fff3d6 0 14px, #3a1d0c 14px); }
#pour b { display: block; margin-top: 6px; font-family: "Arial Black", Impact, sans-serif; font-size: 22px; color: #fff; -webkit-text-stroke: 1px var(--ink); opacity: 0; }
#pour.go .beer { animation: fillup 1.4s ease-out forwards; }
#pour.go b { animation: fadein 0.4s 1.4s forwards; }
#pour.go { animation: fadeout 0.5s 2.7s forwards; }
@keyframes fillup { to { height: 100%; } }
@keyframes fadeout { to { opacity: 0; } }

/* 🔊 Tap for sound: only when the phone has blocked the sound */
#tap-sound {
  position: fixed; left: 50%; top: calc(8px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 40;
  border: 3px solid var(--ink); border-radius: 14px; background: var(--gold); font-weight: bold; font-size: 16px; padding: 8px 14px; box-shadow: 0 3px 0 var(--ink);
}

/* ---------- where pop-ups go on a phone held upright ----------
   The score and scoreboard are top-left, the map and Menu / Clip buttons are
   top-right, and the joystick and big buttons fill the bottom. So messages,
   reminders and the sound button sit in the clear band in the middle, just
   below the map column, and never cover any of those. (Sideways, the top
   centre is already clear.) */
@media (orientation: portrait) {
  #toast, #toast.herald, #toast.warn { top: calc(242px + env(safe-area-inset-top)); }
  #tipnudge, #tap-sound { top: calc(198px + env(safe-area-inset-top)); }
  #tipcard { top: calc(206px + env(safe-area-inset-top)); }
  #tipcard p { font-size: 13px; }
}

/* 📲 the one-time "Add to Home Screen" tip (iPhone / iPad only) */
#a2hs {
  position: absolute; left: 50%; top: calc(8px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 7; width: max-content; max-width: min(92vw, 380px);
  display: flex; align-items: center; gap: 8px; background: rgba(255, 248, 230, 0.96); border: 2px solid var(--ink); border-radius: 12px;
  padding: 6px 6px 6px 10px; font-size: 13px; line-height: 1.3; pointer-events: auto; animation: fadein 0.6s;
}
#a2hs button { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; font-weight: bold; padding: 0; font-size: 12px; }
#a2hs .share-ico { font-size: 12px; }
@media (orientation: portrait) { #a2hs { top: calc(198px + env(safe-area-inset-top)); } }
#loading .inspired { font-size: 13px; font-style: italic; margin-bottom: 2px; }
#safe-chip { display: inline-block; margin-top: 3px; background: rgba(42, 125, 0, 0.85); color: #fff; font-size: 11px; font-weight: bold; border-radius: 8px; padding: 1px 7px; }

/* 📬 the postman's letters */
.modal-body .letter { background: #fbf1d6; border: 2px solid #c9a66b; border-radius: 6px; padding: 14px 16px; margin-top: 4px; box-shadow: inset 0 0 18px rgba(160, 120, 60, 0.25); transform: rotate(-0.6deg); }
.modal-body .letter-from { font-size: 14px; color: #6b4a2b; margin: 0 0 8px; }
.modal-body .letter-text { font-family: Georgia, "Times New Roman", serif; font-size: 17px; line-height: 1.45; margin: 0; }
.modal-body .letter-seal { text-align: right; font-size: 22px; margin: 6px 0 0; }
/* clip: the "making your video" bar and the big share button */
.modal-body .clip-making { text-align: center; padding: 30px 0; }
.modal-body .clip-making .bar { height: 14px; border: 3px solid var(--ink); border-radius: 8px; overflow: hidden; background: #fff; }
.modal-body .clip-making .bar i { display: block; height: 100%; width: 0; background: var(--lime); transition: width 0.2s; }
.modal-body .share-big { display: block; width: 100%; font-size: 19px; padding: 14px; margin: 10px 0 4px; }

/* 📣 the shout wheel */
#shout-wheel { position: fixed; inset: 0; z-index: 18; background: rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; }
#shout-wheel .ring { position: relative; width: min(92vw, 380px); aspect-ratio: 1; }
#shout-wheel button {
  position: absolute; transform: translate(-50%, -50%); max-width: 104px; border: 3px solid var(--ink); border-radius: 12px;
  background: var(--paper); font-weight: bold; font-size: 12px; line-height: 1.15; padding: 6px 7px; box-shadow: 0 3px 0 var(--ink);
}
#shout-wheel .hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 34px; }
#btn-shout.cooling { opacity: 0.45; }
.modal-body .caption-box { font-size: 13px; background: #fff; border: 2px dashed #c9b98a; border-radius: 8px; padding: 6px 8px; }

/* ⟳ Respawn (only when you're stuck) and the "whoops, tap to reload" screen */
#respawn-btn {
  position: absolute; left: 50%; top: 40%; transform: translateX(-50%); z-index: 8; pointer-events: auto;
  border: 3px solid var(--ink); border-radius: 14px; background: var(--gold); font-weight: bold; font-size: 18px; padding: 10px 18px; box-shadow: 0 4px 0 var(--ink);
}
#oops { position: fixed; inset: 0; z-index: 100; background: #8be000; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; }
#oops .oops-big { font-family: "Arial Black", Impact, sans-serif; font-size: 36px; margin: 0; }
#oops .oops-why { font-size: 17px; font-weight: bold; }
#oops button { border: 3px solid #1d1d1d; border-radius: 14px; background: #ffe14d; font-weight: bold; font-size: 20px; padding: 12px 22px; box-shadow: 0 4px 0 #1d1d1d; }