/* Chips & Thrills: seaside showbill. Plum ink outlines, hard offset shadows,
   ticket-stub panels, and a chasing marquee of bulbs round the HUD. */
@font-face { font-family: 'Bungee'; src: url('../fonts/bungee.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('../fonts/fredoka-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('../fonts/fredoka-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('../fonts/fredoka-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --ink: #2b1b3d;
  --ink-2: #4a3563;
  --paper: #fff4d6;
  --paper-2: #f7e6bd;
  --sea: #1d6f86;
  --surf: #3ec1d3;
  --floss: #ff8fab;
  --mustard: #f6c445;
  --tomato: #e63946;
  --mint: #9bf6a3;
  --shadow: 4px 4px 0 var(--ink);
  --shadow-sm: 2px 2px 0 var(--ink);
  --r: 10px;
  --display: 'Bungee', 'Impact', sans-serif;
  --body: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--sea); color: var(--ink); font: 400 15px/1.45 var(--body); -webkit-font-smoothing: antialiased; overflow: hidden; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: .01em; line-height: 1.1; }
.muted { color: var(--ink-2); opacity: .8; font-size: .92em; }

/* ---------- buttons, chips, fields ---------- */
.btn { background: var(--mustard); border: 2px solid var(--ink); border-radius: 8px; box-shadow: var(--shadow-sm); padding: .45em .9em; font-weight: 600; transition: transform .08s, box-shadow .08s; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: var(--shadow-sm); }
.btn-big { width: 100%; font-family: var(--display); font-size: 1.05rem; padding: .7em 1em; background: var(--tomato); color: #fff; }
.btn-small { padding: .25em .6em; font-size: .88rem; }
.btn-ghost { background: var(--paper); }
.btn-mint { background: var(--mint); }
.btn-pink { background: var(--floss); }
.btn-red { background: var(--tomato); color: #fff; }
.chip { display: inline-block; background: var(--paper); border: 2px solid var(--ink); border-radius: 99px; padding: .05em .65em; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.chip-flame { background: var(--mustard); }
.field { display: grid; gap: .25em; font-weight: 600; font-size: .9rem; }
.field input, .field select, textarea, .ask input { background: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: .45em .6em; width: 100%; }
.stack { display: grid; gap: .6em; }
.row { display: flex; gap: .5em; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: .5em; }

/* ---------- ticket panels ---------- */
.ticket { background: var(--paper); border: 3px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); position: relative; }
.ticket-head { display: flex; justify-content: space-between; align-items: center; gap: .6em; padding: .7em 1em .6em; border-bottom: 3px dashed var(--ink); position: relative; }
.ticket-head::before, .ticket-head::after { content: ''; position: absolute; bottom: -11px; width: 18px; height: 18px; border-radius: 50%; background: var(--sea); border: 3px solid var(--ink); }
.ticket-head::before { left: -12px; clip-path: inset(0 0 0 50%); }
.ticket-head::after { right: -12px; clip-path: inset(0 50% 0 0); }
.ticket-head h2 { font-size: 1.15rem; }
.ticket-body { padding: .9em 1em 1em; }

/* ---------- title screen ---------- */
#title { position: fixed; inset: 0; overflow-y: auto; background:
  repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 22px, transparent 22px 44px), var(--sea); }
.title-wrap { max-width: 1060px; margin: 0 auto; padding: 28px 16px 40px; }
.marquee { text-align: center; margin: 8px auto 26px; }
.logo { display: inline-block; font-size: clamp(2rem, 8.5vw, 5rem); color: var(--mustard); padding: .18em .5em .1em;
  background: var(--tomato); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 8px 8px 0 var(--ink);
  text-shadow: 4px 4px 0 var(--ink); transform: rotate(-2deg); position: relative; }
.logo::after { content: ''; position: absolute; inset: 7px; border-radius: 12px; pointer-events: none;
  background: radial-gradient(circle, #fff7b0 0 3px, transparent 4px) 0 0 / 18px 18px; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); padding: 6px;
  animation: bulbs 1.2s steps(2) infinite; }
@keyframes bulbs { to { background-position: 9px 0; } }
.strap { color: var(--paper); font-size: 1.1rem; margin: 18px 0 0; font-weight: 600; text-shadow: 2px 2px 0 var(--ink); }
.title-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; align-items: start; }
.title-side { display: grid; gap: 22px; }
@media (max-width: 820px) { .title-grid { grid-template-columns: 1fr; } }
.locations { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.loc { display: grid; grid-template-columns: 74px 1fr auto; gap: 12px; align-items: center; padding: 10px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; }
.loc canvas { width: 74px; height: 56px; border-radius: 6px; border: 2px solid var(--ink); }
.loc h3 { font-size: 1rem; }
.loc p { margin: .15em 0 0; font-size: .88rem; }
.loc.locked { opacity: .55; background: var(--paper-2); }
.loc .loc-meta { font-size: .8rem; color: var(--ink-2); }
.loc-won { color: #b7860b; font-weight: 700; }
.daily-twist { font-family: var(--display); font-size: 1.25rem; margin: 0 0 .25em; color: var(--tomato); }
.mini-board { margin: .6em 0 .9em; padding-left: 1.4em; font-size: .92rem; }
.mini-board li { padding: .1em 0; }
.mini-board b { float: right; font-variant-numeric: tabular-nums; }
.ai-line { margin: .5em 0 0; font-size: .86rem; padding: .35em .6em; border-radius: 8px; background: var(--paper-2); border: 2px dashed var(--ink-2); }
.ai-line.on { background: #e3fbe6; border-style: solid; }
.events { text-align: center; color: var(--paper); font-weight: 600; margin: 22px 0 0; }
.events b { background: var(--ink); color: var(--mustard); padding: .15em .55em; border-radius: 6px; }
.foot { text-align: center; color: rgba(255,244,214,.75); font-size: .8rem; margin-top: 26px; }

/* ---------- game layout ---------- */
#game { position: fixed; inset: 0; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
#hud { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: stretch; gap: 4px; padding: 8px 10px 10px; background: var(--ink); color: var(--paper);
  border-bottom: 4px solid var(--mustard); overflow-x: auto; scrollbar-width: none; }
#hud::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; pointer-events: none;
  background: radial-gradient(circle, #fff7b0 0 2px, transparent 2.5px) 0 50% / 14px 4px; animation: chase 1s linear infinite; }
@keyframes chase { to { background-position: 14px 50%; } }
.hud-brand { font-family: var(--display); background: var(--tomato); color: var(--mustard); border: 2px solid var(--paper); border-radius: 8px; padding: 0 .6em; font-size: 1rem; text-shadow: 2px 2px 0 var(--ink); flex: none; }
.hud-stat { display: grid; padding: 0 .75em; border-left: 2px dotted rgba(255,244,214,.3); min-width: max-content; }
.hud-stat .lbl { font-size: .72rem; opacity: .75; }
.hud-stat b { font-family: var(--display); font-weight: 400; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.hud-cash b { color: var(--mint); }
.hud-cash.neg b { color: var(--floss); }
.hud-rating b { color: var(--mustard); letter-spacing: .05em; }
.hud-mode { background: var(--floss); color: var(--ink); border-radius: 8px; border: 2px solid var(--paper); display: flex; align-items: center; font-weight: 700; padding: 0 .7em; }
.hud-help { margin-left: auto; flex: none; width: 38px; background: var(--paper); color: var(--ink); border: 2px solid var(--paper); border-radius: 50%; font-family: var(--display); font-size: 1.05rem; }
.speed { margin-left: 8px; display: flex; gap: 3px; flex: none; }
.speed button { background: var(--ink-2); color: var(--paper); border: 2px solid var(--paper); border-radius: 6px; min-width: 38px; font-weight: 700; font-size: .85rem; }
.speed button.on { background: var(--mustard); color: var(--ink); }

#tools, #desk { position: absolute; z-index: 15; display: flex; flex-direction: column; gap: 6px; padding: 8px 6px; background: var(--paper); border: 3px solid var(--ink); box-shadow: var(--shadow); border-radius: 12px; }
#tools { left: 10px; top: 76px; max-height: calc(100vh - 88px); overflow-y: auto; scrollbar-width: none; }
#desk { right: 10px; top: 76px; max-height: calc(100vh - 88px); overflow-y: auto; scrollbar-width: none; }
#tools button, #desk button { position: relative; display: grid; justify-items: center; gap: 1px; width: 64px; padding: 6px 2px 4px; background: transparent; border: 2px solid transparent; border-radius: 8px; font-size: .7rem; font-weight: 600; }
#tools button:hover, #desk button:hover { background: var(--paper-2); }
#tools button.on, #desk button.on { background: var(--mustard); border-color: var(--ink); }
/* Both bars shrink their buttons to fit the screen height (desktop sizes only; phones have their own layout). */
@media (min-width: 761px) {
  #tools { --n: 9; } #desk { --n: 14; }
  #tools, #desk { gap: 3px; padding: 6px 5px; overflow: visible; max-height: none; }
  #tools button, #desk button { --bh: clamp(30px, calc((100vh - 104px) / var(--n) - 3px), 58px); height: var(--bh); padding: 2px; align-content: center; }
  #tools .ic, #desk .ic { width: clamp(16px, calc(var(--bh) * 0.44), 26px); height: clamp(16px, calc(var(--bh) * 0.44), 26px); }
  #tools button span, #desk button span { font-size: clamp(.58rem, calc(var(--bh) * 0.2), .7rem); line-height: 1.1; }
}
@media (min-width: 761px) and (max-height: 700px) {
  #tools button span, #desk button span { display: none; }
  #tools button, #desk button { width: 44px; }
  #drawer { left: 72px; }
  #advisor { left: 74px; }
  #windows { right: 70px; }
}
.badge { position: absolute; top: 0; right: 4px; background: var(--tomato); color: #fff; font-style: normal; font-size: .68rem; min-width: 18px; height: 18px; border-radius: 9px; border: 2px solid var(--ink); display: grid; place-items: center; padding: 0 3px; }

.ic { width: 26px; height: 26px; background: var(--ink); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; display: block; }
.ic-hand { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 13V5a1.5 1.5 0 0 1 3 0v6M11 11V4a1.5 1.5 0 0 1 3 0v7M14 11V5.5a1.5 1.5 0 0 1 3 0V14c0 4-3 7-7 7-3 0-4.5-1.5-6-4l-2-3.5a1.5 1.5 0 0 1 2.6-1.5L8 15'/></svg>"); }
.ic-path { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M4 21 9 3M20 21 15 3M12 5v2M12 11v2M12 17v2'/></svg>"); }
.ic-ride { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='10' r='7'/><path d='M12 3v14M5 10h14M7 5l10 10M17 5 7 15M8 21l4-4 4 4'/></svg>"); }
.ic-shop { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M3 9 5 4h14l2 5c0 1.5-1.2 2.5-2.5 2.5S16 10.5 16 9c0 1.5-1.8 2.5-4 2.5S8 10.5 8 9c0 1.5-1.2 2.5-2.5 2.5S3 10.5 3 9ZM5 12v8h14v-8M10 20v-5h4v5'/></svg>"); }
.ic-bin { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M5 7h14l-1.5 14h-11ZM4 7h16M9 4h6v3M10 11v6M14 11v6'/></svg>"); }
.ic-tree { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M12 3a6 6 0 0 1 5.6 8.2A4 4 0 0 1 15 18H9a4 4 0 0 1-2.6-6.8A6 6 0 0 1 12 3ZM12 18v4M9 22h6'/></svg>"); }
.ic-staff { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='8' r='3.5'/><path d='M5 21c0-4 3-6.5 7-6.5s7 2.5 7 6.5M7 6h10M8.5 4.5h7'/></svg>"); }
.ic-dozer { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M3 14h12v4H3zM5 14V9h6l2 5M15 15h3l3-5M19 10v8'/><circle cx='6' cy='19.5' r='1.5'/><circle cx='12' cy='19.5' r='1.5'/></svg>"); }
.ic-coin { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M14.5 8.5a2.5 2.5 0 0 0-4.5 1.5v5.5M8.5 12.5h4M8.5 15.5h7'/></svg>"); }
.ic-flask { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M9 3h6M10 3v6L4.5 19a1.5 1.5 0 0 0 1.3 2h12.4a1.5 1.5 0 0 0 1.3-2L14 9V3M7 15h10'/></svg>"); }
.ic-bubble { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M4 5h16v11H10l-5 4v-4H4z'/><circle cx='9' cy='10.5' r='.5' fill='black'/><circle cx='12' cy='10.5' r='.5' fill='black'/><circle cx='15' cy='10.5' r='.5' fill='black'/></svg>"); }
.ic-phone { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><rect x='6' y='2.5' width='12' height='19' rx='2.5'/><path d='M11 18.5h2M9.5 9.5l2 2 3.5-4'/></svg>"); }
.ic-bulb { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3Z'/></svg>"); }
.ic-crate { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5zM3 7.5l9 4.5 9-4.5M12 12v9M7.5 5.2l9 4.6'/></svg>"); }
.ic-paper { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M4 4h13v15a2 2 0 0 0 2 2H6a2 2 0 0 1-2-2zM17 8h3v11a2 2 0 0 1-2 2M7 8h7M7 12h7M7 16h4'/></svg>"); }
.ic-card { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><rect x='2.5' y='5' width='19' height='14' rx='1.5'/><path d='M12 7v10M5 9h4M5 12h4M15 8h4v4h-4zM14.5 15h5'/></svg>"); }
.ic-flag { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M5 21V3M5 4h12l-3 4 3 4H5'/></svg>"); }
.ic-map { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3zM9 3v15M15 6v15'/></svg>"); }
.ic-hall { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M3 9l9-6 9 6M5 9v9M9.5 9v9M14.5 9v9M19 9v9M3 21h18M3 18h18'/></svg>"); }
.ic-bus { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><rect x='4' y='3' width='16' height='15' rx='3'/><path d='M4 11h16M8 18v3M16 18v3'/><circle cx='8' cy='14.5' r='1' fill='black'/><circle cx='16' cy='14.5' r='1' fill='black'/></svg>"); }
.ic-town { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M3 21V11l5-4 5 4v10M13 21V8l4-4 4 4v13M3 21h18M7 21v-4h2v4M16 10h2M16 14h2'/></svg>"); }
.ic-coast { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M2 17c2 0 2-1.5 4-1.5S8 17 10 17s2-1.5 4-1.5 2 1.5 4 1.5 2-1.5 4-1.5M2 21c2 0 2-1.5 4-1.5S8 21 10 21s2-1.5 4-1.5 2 1.5 4 1.5 2-1.5 4-1.5'/><circle cx='6' cy='8' r='2'/><circle cx='18' cy='6' r='2'/><path d='M6 10v3M18 8v5M8 8h8'/></svg>"); }
.ic-trophy { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M7 4h10v5a5 5 0 0 1-10 0zM7 6H4a3 3 0 0 0 3 4M17 6h3a3 3 0 0 1-3 4M12 14v3M8 21h8l-1-4H9z'/></svg>"); }

/* drawer of build items */
#drawer { position: absolute; z-index: 14; left: 92px; top: 76px; width: min(390px, calc(100vw - 190px)); max-height: calc(100vh - 200px); display: flex; flex-direction: column;
  background: var(--paper); border: 3px solid var(--ink); box-shadow: var(--shadow); border-radius: 12px; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: .5em; padding: .6em .8em; border-bottom: 3px dashed var(--ink); }
.drawer-head h3 { font-size: 1rem; }
.drawer-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; padding: 10px; overflow-y: auto; }
.item { display: grid; justify-items: center; gap: 2px; padding: 4px 4px 6px; background: #fff; border: 2px solid var(--ink); border-radius: 8px; text-align: center; font-size: .8rem; line-height: 1.2; position: relative; }
.item canvas { width: 100%; max-width: 112px; height: auto; aspect-ratio: 112 / 96; }
.item b { font-weight: 600; }
.item .price { font-family: var(--display); font-size: .78rem; color: var(--sea); }
.item.on { background: var(--mustard); }
.item.locked { opacity: .45; }
.item.locked::after { content: 'Research'; position: absolute; top: 6px; right: 6px; font-size: .62rem; background: var(--ink); color: var(--paper); padding: 1px 5px; border-radius: 4px; }
.item.custom::before { content: 'Lab'; position: absolute; top: 6px; left: 6px; font-size: .62rem; background: var(--floss); border: 1px solid var(--ink); padding: 0 5px; border-radius: 4px; }
.item.event::before { content: 'Event'; position: absolute; top: 6px; left: 6px; font-size: .62rem; background: var(--tomato); color: #fff; padding: 0 5px; border-radius: 4px; }

/* floating windows */
#windows { position: absolute; z-index: 16; right: 90px; top: 76px; bottom: 16px; display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 10px; pointer-events: none; }
.win { width: min(350px, calc(100vw - 110px)); pointer-events: auto; background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; max-height: 100%; min-height: 0; }
.win-head { display: flex; align-items: center; gap: .5em; padding: .5em .5em .45em .8em; border-bottom: 3px dashed var(--ink); }
.win-head h3 { font-size: .98rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-close { background: var(--tomato); color: #fff; border: 2px solid var(--ink); border-radius: 6px; width: 28px; height: 28px; font-weight: 700; line-height: 1; }
.win-body { padding: .7em .85em .85em; overflow-y: auto; min-height: 0; }
.win-body h4 { font-family: var(--display); font-weight: 400; font-size: .85rem; margin: .9em 0 .35em; }
.win-body h4:first-child { margin-top: 0; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: .15em .8em; font-size: .9rem; margin: 0; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar { height: 12px; background: #fff; border: 2px solid var(--ink); border-radius: 7px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--mint); }
.bar.warn > i { background: var(--mustard); }
.bar.bad > i { background: var(--tomato); }
.need { display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: center; font-size: .84rem; margin: 3px 0; }
.thoughts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.thoughts li { background: #fff; border: 2px solid var(--ink); border-radius: 10px 10px 10px 2px; padding: .3em .6em; font-size: .88rem; }
.thoughts li.bad { background: #ffe1e4; }
.thoughts li.good { background: #e3fbe6; }
.thoughts li b { float: right; font-variant-numeric: tabular-nums; margin-left: .5em; }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper button { width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper-2); font-weight: 700; }
.stepper output { min-width: 64px; text-align: center; font-family: var(--display); font-size: .95rem; }
.seg { display: inline-flex; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; flex-wrap: wrap; }
.seg button { border: 0; border-right: 2px solid var(--ink); background: #fff; padding: .25em .6em; font-size: .82rem; font-weight: 600; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--mustard); }
.persona { background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: .55em .7em; margin-bottom: .6em; font-size: .88rem; }
.persona b { font-family: var(--display); font-weight: 400; }
.persona .handle { color: var(--sea); font-weight: 600; }
.chat { display: grid; gap: 6px; margin: .6em 0; }
.msg { padding: .35em .65em; border: 2px solid var(--ink); border-radius: 12px; max-width: 88%; font-size: .9rem; }
.msg.them { background: #fff; border-bottom-left-radius: 3px; }
.msg.me { background: var(--surf); justify-self: end; border-bottom-right-radius: 3px; }
.msg.sys { background: var(--paper-2); justify-self: center; font-size: .8rem; border-style: dashed; }
.chat-form { display: flex; gap: 6px; }
.chat-form input { flex: 1; min-width: 0; background: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: .4em .6em; }
.typing { font-style: italic; opacity: .7; }
.ai-tag { font-size: .68rem; font-weight: 700; background: var(--mint); border: 1px solid var(--ink); border-radius: 4px; padding: 0 4px; vertical-align: middle; }
.ai-tag.off { background: var(--paper-2); }

/* parkgram */
.post { background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: .55em .7em; margin-bottom: 8px; }
.post-head { display: flex; align-items: center; gap: .5em; font-size: .84rem; }
.avatar { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font-family: var(--display); font-size: .8rem; flex: none; }
.post p { margin: .35em 0 .2em; font-size: .92rem; }
.post .tags { color: var(--sea); font-weight: 600; font-size: .82rem; }
.post .mood { margin-left: auto; font-weight: 700; }
.buzz-meter { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin-bottom: .8em; font-weight: 600; font-size: .9rem; }

/* lab */
.lab-card { background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: .6em; margin-top: .6em; display: grid; grid-template-columns: 112px 1fr; gap: .6em; align-items: center; }
.lab-card h5 { font-family: var(--display); font-weight: 400; font-size: .95rem; margin: 0 0 .2em; }
.lab-card p { margin: .1em 0; font-size: .82rem; }
.stats3 { display: flex; gap: .4em; flex-wrap: wrap; font-size: .76rem; font-weight: 700; }
.stats3 span { border: 2px solid var(--ink); border-radius: 6px; padding: 0 .4em; background: var(--paper); }
.ideas { display: flex; gap: 5px; flex-wrap: wrap; margin: .4em 0; }
.ideas button { font-size: .76rem; background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: 99px; padding: .1em .55em; }
.tabs { display: flex; gap: 4px; margin-bottom: .7em; }
.tabs button { flex: 1; border: 2px solid var(--ink); border-radius: 8px; background: #fff; font-weight: 600; padding: .3em; font-size: .85rem; }
.tabs button.on { background: var(--mustard); }
.exch { display: grid; grid-template-columns: 90px 1fr; gap: 8px; align-items: center; background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 6px; margin-bottom: 8px; }
.exch canvas { width: 90px; height: auto; }
.exch h5 { margin: 0; font-family: var(--display); font-weight: 400; font-size: .85rem; }
.exch p { margin: .1em 0; font-size: .78rem; }

/* advisor */
#advisor { position: absolute; z-index: 15; left: 94px; bottom: 12px; display: flex; align-items: flex-end; gap: 8px; max-width: min(560px, calc(100vw - 20px)); pointer-events: none; }
#penny { width: 84px; height: 84px; flex: none; background: var(--floss); border: 3px solid var(--ink); border-radius: 50%; box-shadow: var(--shadow-sm); pointer-events: auto; cursor: pointer; }
.bubble { pointer-events: auto; background: var(--paper); border: 3px solid var(--ink); border-radius: 14px 14px 14px 2px; box-shadow: var(--shadow); padding: .55em .7em; min-width: 220px; }
.bubble p { margin: 0 0 .45em; font-weight: 600; font-size: .95rem; }
.bubble.worried { background: #fff0c2; }
.bubble.cross { background: #ffe1e4; }
.bubble.excited { background: #e3fbe6; }
.ask { display: flex; gap: 6px; }
.ask input { padding: .3em .5em; font-size: .86rem; }
#advisor.min .bubble { display: none; }
#advisor.min #penny { width: 58px; height: 58px; }
#penny { transition: width .2s, height .2s; }

#visit-bar { position: absolute; z-index: 17; left: 50%; bottom: 12px; transform: translateX(-50%); background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; box-shadow: var(--shadow); padding: .5em .8em; display: flex; gap: .6em; align-items: center; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 20px); }
.stamp { width: 40px; height: 40px; border-radius: 50%; border: 2px dashed var(--ink); background: #fff; font-family: var(--display); font-size: .6rem; }
.stamp:hover { background: var(--mustard); }

/* toasts */
#toasts { position: absolute; z-index: 30; top: 74px; left: 50%; transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; pointer-events: none; width: min(520px, calc(100vw - 20px)); }
.toast { pointer-events: auto; background: var(--paper); border: 3px solid var(--ink); border-radius: 10px; box-shadow: var(--shadow-sm); padding: .4em .8em; font-weight: 600; font-size: .9rem; animation: drop .25s ease-out; cursor: pointer; }
.toast.good { background: #e3fbe6; }
.toast.bad { background: #ffe1e4; }
.toast.gold { background: var(--mustard); }
@keyframes drop { from { transform: translateY(-14px); opacity: 0; } }

/* modal */
#modal { position: fixed; inset: 0; z-index: 50; background: rgba(43,27,61,.6); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.modal-card { background: var(--paper); border: 4px solid var(--ink); border-radius: 14px; box-shadow: 8px 8px 0 var(--ink); width: min(620px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 1.1em 1.2em 1.2em; position: relative; }
.modal-card h2 { font-size: 1.5rem; margin-bottom: .4em; }
.modal-actions { display: flex; gap: .6em; justify-content: flex-end; margin-top: 1em; flex-wrap: wrap; }
.spin-in { animation: spinin .9s cubic-bezier(.2,.9,.3,1.2); }
@keyframes spinin { from { transform: rotate(-720deg) scale(.05); } }
.pop-in { animation: popin .35s cubic-bezier(.2,.9,.3,1.3); }
@keyframes popin { from { transform: scale(.7); opacity: 0; } }

/* newspaper */
.paper { background: #f4efe2; color: #1b1b1b; border: 3px solid var(--ink); padding: 1em 1.1em; font-family: Georgia, 'Times New Roman', serif; }
.paper .masthead { font-family: var(--display); text-align: center; font-size: 1.5rem; border-bottom: 3px double #1b1b1b; padding-bottom: .2em; }
.paper .dateline { display: flex; justify-content: space-between; font-size: .76rem; border-bottom: 1px solid #1b1b1b; padding: .2em 0; margin-bottom: .5em; }
.paper .headline { font-family: var(--display); font-size: clamp(1.4rem, 5vw, 2.1rem); line-height: 1; margin: .2em 0; text-transform: uppercase; }
.paper .sub { font-style: italic; font-size: 1.02rem; margin: 0 0 .5em; }
.paper .art { columns: 2 220px; column-gap: 1.2em; font-size: .95rem; line-height: 1.5; margin: 0; }
.paper .verdict { font-family: var(--display); color: #b7860b; font-size: 1.1rem; }
.paper .quote { border-left: 4px solid #1b1b1b; padding-left: .6em; margin: .7em 0 0; font-style: italic; }
.letter { background: #fffdf5; border: 2px solid var(--ink); padding: 1em 1.1em; font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: 1.25rem; line-height: 1.35; margin-top: .8em; transform: rotate(-.6deg); }
.letter .seal { font-family: var(--display); font-size: .7rem; background: var(--tomato); color: #fff; border-radius: 50%; width: 52px; height: 52px; display: grid; place-items: center; float: right; transform: rotate(12deg); border: 2px solid var(--ink); text-align: center; line-height: 1; }

/* postcards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pcard { background: #fff; border: 2px solid var(--ink); border-radius: 6px; padding: .5em; font-size: .78rem; box-shadow: var(--shadow-sm); cursor: pointer; text-align: left; }
.pcard:nth-child(odd) { transform: rotate(-1.2deg); }
.pcard:nth-child(even) { transform: rotate(1deg); }
.pcard h5 { font-family: var(--display); font-weight: 400; margin: 0 0 .2em; font-size: .82rem; }
.postcard-big { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; background: #fff; border: 3px solid var(--ink); padding: 1em; }
.postcard-big .front { background: linear-gradient(var(--surf), var(--sea)); border: 2px solid var(--ink); display: grid; place-items: center; min-height: 170px; color: var(--mustard); font-family: var(--display); text-align: center; font-size: 1.3rem; text-shadow: 2px 2px 0 var(--ink); padding: .5em; }
.postcard-big .back { font-family: 'Segoe Script', 'Brush Script MT', cursive; font-size: 1.02rem; line-height: 1.4; border-left: 2px dashed var(--ink); padding-left: 1em; }
@media (max-width: 560px) { .postcard-big { grid-template-columns: 1fr; } .postcard-big .back { border-left: 0; padding-left: 0; } }

/* awards */
.awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.award { border: 2px solid var(--ink); border-radius: 10px; padding: .45em .55em; background: var(--paper-2); font-size: .8rem; opacity: .55; }
.award.got { background: var(--mustard); opacity: 1; }
.award b { display: block; font-family: var(--display); font-weight: 400; font-size: .8rem; }
.golden { text-align: center; }
.golden .tix { display: inline-block; font-family: var(--display); font-size: 2rem; background: linear-gradient(135deg, #ffe680, #f6c445 45%, #fff3b0 55%, #e0a91d); border: 4px solid var(--ink); border-radius: 12px; padding: .5em 1em; box-shadow: 6px 6px 0 var(--ink); transform: rotate(-3deg); }

/* haggle */
.haggle-meter { margin: .5em 0; }
.haggle-meter .lbls { display: flex; justify-content: space-between; font-size: .76rem; font-weight: 600; }
.patience { letter-spacing: .15em; color: var(--tomato); font-weight: 700; }

/* charts */
.chart { width: 100%; height: 120px; display: block; background: #fff; border: 2px solid var(--ink); border-radius: 8px; }
table.ledger { width: 100%; border-collapse: collapse; font-size: .84rem; font-variant-numeric: tabular-nums; }
table.ledger td, table.ledger th { padding: .15em .3em; text-align: right; }
table.ledger td:first-child, table.ledger th:first-child { text-align: left; }
table.ledger tr.total td { border-top: 2px solid var(--ink); font-weight: 700; }
.neg { color: var(--tomato); }
.pos { color: #217a3a; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  #hud { padding: 6px; gap: 2px; }
  .hud-stat { padding: 0 .5em; }
  .hud-stat b { font-size: .9rem; }
  .hud-brand { font-size: .8rem; }
  #tools { left: 0; right: 0; top: auto; bottom: 0; flex-direction: row; overflow-x: auto; border-radius: 0; border-width: 3px 0 0; padding: 4px; box-shadow: none; }
  #tools button, #desk button { width: 58px; flex: none; }
  #desk { top: 70px; right: 6px; bottom: auto; max-height: calc(100vh - 230px); overflow-y: auto; padding: 4px; }
  #desk button span { display: none; }
  #desk button { width: 44px; }
  #drawer { left: 6px; right: 56px; width: auto; top: auto; bottom: 80px; max-height: 46vh; }
  #drawer-hint { display: none; }
  #game:has(#drawer:not([hidden])) #advisor, #game:has(.win) #advisor { display: none; }
  #windows { left: 6px; right: 56px; top: 70px; bottom: 150px; }
  .win { width: 100%; }
  #advisor { left: 8px; bottom: 76px; }
  #penny { width: 56px; height: 56px; }
  .bubble { min-width: 0; }
  .bubble .ask { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* maps + council */
.map-key { height: 14px; border: 2px solid var(--ink); border-radius: 7px; margin: .4em 0 .2em; }
.cllr { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: .45em .6em; }
.cllr b { font-weight: 700; }
.cllr p { margin: .2em 0 0; font-size: .9rem; }
.cllr .avatar { color: #fff; text-shadow: 1px 1px 0 var(--ink); font-size: .72rem; }
.cllr-lean { font-size: .78rem; font-weight: 600; margin-top: 2px; }
.cllr .bar { margin-top: 4px; }
.hearing textarea { margin-top: .6em; }
.hearing .stack { gap: 6px; }
.vote { font-family: var(--display); font-size: .78rem; padding: .05em .5em; border: 2px solid var(--ink); border-radius: 6px; }
.vote.aye { background: var(--mint); }
.vote.nay { background: #ffb3ba; }
.verdict { font-family: var(--display); font-size: 1.1rem; margin: .6em 0 0; padding: .3em .6em; border: 3px solid var(--ink); border-radius: 8px; }
.verdict.good { background: var(--mint); }
.verdict.bad { background: #ffb3ba; }

/* coast line */
.coast-line { position: relative; display: grid; gap: 8px; padding-left: 18px; }
.coast-line::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 4px; background: repeating-linear-gradient(#8e95a3 0 6px, #7a5a3a 6px 9px); border-radius: 2px; }
.stop { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: .4em .6em; }
.stop.mine { background: var(--mustard); }
.stop.invented { background: var(--paper-2); }
.stop-dot { position: absolute; left: -17px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; }
.stop-dot.on { background: var(--tomato); }
.mini-board li.me { font-weight: 700; }

/* how to play */
.modal-card:has(.help) { width: min(820px, 100%); }
.help-body { display: grid; grid-template-columns: 190px 1fr; gap: 16px; align-items: start; }
.help-nav { display: grid; gap: 4px; position: sticky; top: 0; }
.help-nav button { text-align: left; background: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: .35em .6em; font-weight: 600; font-size: .9rem; }
.help-nav button.on { background: var(--mustard); }
.help-pane h3 { font-size: 1.1rem; margin-bottom: .5em; }
.help-pane p { margin: 0 0 .7em; max-width: 62ch; }
.help-list, .help-steps { margin: 0 0 .8em; padding-left: 1.2em; display: grid; gap: .4em; max-width: 62ch; }
.help-keys { display: grid; grid-template-columns: max-content 1fr; gap: .35em 1em; margin: 0; }
.help-keys dt { font-family: var(--display); font-size: .82rem; background: #fff; border: 2px solid var(--ink); border-radius: 6px; padding: .05em .45em; justify-self: start; }
.help-keys dd { margin: 0; align-self: center; }
@media (max-width: 640px) { .help-body { grid-template-columns: 1fr; } .help-nav { position: static; grid-template-columns: repeat(2, 1fr); } }

/* elections */
.cand { background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: .55em .7em; display: grid; gap: .3em; }
.cand.endorsed { background: #e3fbe6; }
.cand p { margin: 0; font-size: .9rem; }
.cand .slogan { font-family: var(--display); font-size: .85rem; color: var(--tomato); }
.cand .rule { font-weight: 600; }