/* Fredoka (SIL Open Font License, see fonts/OFL.txt), hosted here so no
   third party sees who visits. */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/fredoka-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/fredoka-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #2d3150;
  --ink-soft: #5d6386;
  --paper: #ffffff;
  --paper-2: #f4f7ff;
  --line: #dfe5f6;
  --sky-1: #bfe6ff;
  --sky-2: #e8f6ff;
  --primary: #ff6f91;
  --primary-dark: #e04c72;
  --blue: #4d9dff;
  --blue-dark: #2f7ce0;
  --yellow: #ffc23d;
  --green: #3ccf7a;
  --danger: #ff5d5d;
  --radius: 18px;
  --shadow: 0 6px 0 rgba(45, 49, 80, 0.12), 0 12px 30px rgba(45, 49, 80, 0.12);
  --font: 'Fredoka', 'Nunito', 'Arial Rounded MT Bold', ui-rounded, system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-1), var(--sky-2) 60%, #fff4fa) fixed;
  background-color: var(--sky-2);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }

#bubbles-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.7) 0 18px, transparent 19px),
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.55) 0 30px, transparent 31px),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.5) 0 22px, transparent 23px),
    radial-gradient(circle at 25% 75%, rgba(255,255,255,.45) 0 12px, transparent 13px),
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.35) 0 8px, transparent 9px);
}

.screen { position: relative; z-index: 1; min-height: 100vh; padding: 16px; }

h1, h2, h3 { margin: 0 0 8px; font-weight: 700; }
h3 { font-size: 1.1rem; color: var(--ink); }
.mt { margin-top: 18px; }
.hint { color: var(--ink-soft); font-size: .9rem; margin: 4px 0 12px; }
.error { color: var(--danger); min-height: 1.2em; margin: 8px 0 0; font-weight: 500; }
.row { display: flex; align-items: center; }
.row.gap { gap: 8px; flex-wrap: wrap; }
.row.between { justify-content: space-between; gap: 8px; }
.row.center { justify-content: center; }

.panel {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

/* ---------- buttons & fields ---------- */
.btn {
  font: inherit; font-weight: 600; font-size: 1rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 2px solid var(--line);
  border-bottom-width: 4px;
  border-radius: 14px;
  padding: 9px 16px;
  cursor: pointer;
  transition: transform .08s ease, filter .15s ease;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.04); transform: translateY(-1px); }
.btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.btn.primary { background: var(--primary); border-color: var(--primary-dark); color: #fff; }
.btn.blue { background: var(--blue); border-color: var(--blue-dark); color: #fff; }
.btn.green { background: var(--green); border-color: #26a75e; color: #fff; }
.btn.danger { background: #fff0f0; border-color: #ffc9c9; color: #d63c3c; }
.btn.big { font-size: 1.2rem; padding: 12px 22px; }
.btn.small { font-size: .9rem; padding: 6px 12px; border-radius: 12px; }
.btn.wide { width: 100%; margin-top: 10px; }
.btn.on { background: var(--yellow); border-color: #e0a21d; }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-weight: 500; }
.field > span { font-size: .9rem; color: var(--ink-soft); }
input, select {
  font: inherit; color: var(--ink);
  background: var(--paper-2);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
  min-width: 0;
}
input[type=range] { padding: 0; accent-color: var(--primary); }
.check { display: flex; align-items: center; gap: 8px; margin: 8px 0; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--primary); }

/* ---------- main menu ---------- */
.menu-wrap { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 2vh; }
.logo { text-align: center; }
.logo canvas { width: min(560px, 92vw); height: auto; display: block; margin: 0 auto -10px; }
.logo h1 {
  font-size: clamp(2.6rem, 9vw, 4.4rem); letter-spacing: 1px; color: var(--blue-dark);
  text-shadow: 0 4px 0 #fff, 0 8px 0 rgba(45,49,80,.12);
}
.logo h1 span { color: var(--primary); }
.tagline { margin: 0; color: var(--ink-soft); font-weight: 500; }
.menu-panel { width: 100%; }
.menu-buttons { display: flex; flex-direction: column; gap: 10px; }
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wallet { display: flex; gap: 12px; justify-content: center; margin-top: 14px; font-weight: 600; }
.wallet span { background: var(--paper-2); border-radius: 999px; padding: 4px 12px; border: 2px solid var(--line); }
.wallet .shells::before { content: '🐚 '; }
.wallet span[hidden] { display: none; }
.changelog { max-width: 760px; margin: 0 auto; }
.changelog article + article { border-top: 2px solid var(--line); margin-top: 14px; padding-top: 14px; }
.changelog h3 { margin: 0 0 4px; }
.changelog time { color: var(--ink-soft); font-size: .85rem; }
.changelog ul { margin: 8px 0 0; padding-left: 20px; }
.changelog li { margin: 4px 0; }
.mode-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.2; }
.mode-btn small { font-size: .82rem; font-weight: 500; opacity: .92; }
.mode-intro { max-width: 900px; margin: 0 auto 14px; text-align: center; color: var(--ink-soft); }
.lobby-conn { max-width: 1100px; margin: 0 auto 10px; text-align: center; font-size: .92rem; padding: 6px 12px; border-radius: 12px; background: var(--paper-2); }
.lobby-conn[data-mode="direct"] { background: #e3f9ec; color: #1d7a46; }
.lobby-conn[data-mode="relay"] { background: #fff4cc; color: #7a5600; }
.tag.link-direct { background: #e3f9ec; color: #1d7a46; }
.tag.link-relay { background: #fff4cc; color: #7a5600; }
.rooms-empty { text-align: center; padding: 18px 8px; color: var(--ink-soft); }
.rooms-empty p { margin: 0 0 12px; }
.share-btn { display: block; margin: 14px auto 0; }
.share-modal { width: min(440px, 100%); max-height: 92vh; overflow: auto; }
#share-preview { display: block; width: min(280px, 70vw); aspect-ratio: 1; margin: 6px auto 12px; border-radius: 16px; box-shadow: var(--shadow); }
.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.share-grid [data-share="native"] { grid-column: 1 / -1; }
.share-grid [hidden] { display: none; }
#share-hint { margin: 10px 0 0; font-size: .82rem; }
.board-share { margin-bottom: 10px; }
.dedication { margin: 10px 0 0; text-align: center; font-size: .78rem; color: var(--ink-soft); opacity: .8; font-style: italic; }

/* ---------- screen header ---------- */
.screen-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; max-width: 1100px; margin: 0 auto 14px; }
.screen-head > :first-child { justify-self: start; }
.screen-head > :last-child { justify-self: end; }
.screen-head h2 { font-size: 1.6rem; margin: 0; text-align: center; }
.screen-head .wallet { margin: 0; }
.conn { font-weight: 600; font-size: .9rem; padding: 4px 10px; border-radius: 999px; background: #ffe1e1; color: #c23b3b; }
.conn:empty { visibility: hidden; }
.conn.ok { background: #dcf8e8; color: #1f8a4c; }

.setup-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; max-width: 1100px; margin: 0 auto; align-items: start; }

/* ---------- player slots ---------- */
.slots { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.slot {
  display: grid; grid-template-columns: 56px minmax(120px, 1fr) auto; gap: 10px; align-items: center;
  background: var(--paper-2); border: 2px solid var(--line); border-radius: 14px; padding: 6px 10px;
}
.slot .portrait { width: 56px; height: 56px; border-radius: 12px; background: #fff; cursor: pointer; border: 2px solid var(--line); }
.slot .portrait.static { cursor: default; }
.slot .slot-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.slot .slot-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .slot-sub { font-size: .85rem; color: var(--ink-soft); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.slot .slot-controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.slot select { padding: 4px 8px; font-size: .9rem; }
.team-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.tag { font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #e9eeff; color: var(--ink-soft); }
.tag.ready { background: #dcf8e8; color: #1f8a4c; }
.tag.host { background: #fff1c9; color: #a5770c; }
.tag.you { background: #ffe0ea; color: var(--primary-dark); }
.team-btns { display: flex; gap: 4px; }
.team-btns button { width: 26px; height: 26px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.team-btns button.sel { border-color: var(--ink); }

.match-settings { display: flex; flex-direction: column; gap: 4px; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 4px 0 12px; }
.map-card { border: 3px solid transparent; border-radius: 12px; padding: 4px; background: var(--paper-2); cursor: pointer; text-align: center; font: inherit; color: inherit; }
.map-card canvas { width: 100%; height: auto; border-radius: 8px; display: block; }
.map-card span { font-size: .82rem; font-weight: 600; display: block; margin-top: 2px; }
.map-card.sel { border-color: var(--primary); background: #fff0f5; }
.map-card:disabled { cursor: default; opacity: 1; }
.area-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.area-btns .btn { font-size: .85rem; padding: 4px 10px; }
.area-btns .btn.has:not(.on) { border-color: var(--primary); }
.map-grid .hint { grid-column: 1 / -1; }
.mode-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.mode-btns .btn { white-space: normal; font-size: .95rem; }
.mode-desc { font-size: .88rem; color: var(--ink-soft); margin: 2px 0 10px; min-height: 2.4em; }
.inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- online ---------- */
.code-input { text-transform: uppercase; letter-spacing: 4px; font-weight: 700; width: 120px; text-align: center; font-size: 1.2rem; }
.room-list { display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow: auto; }
.room-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--paper-2); border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.room-item b { display: block; }
.room-item small { color: var(--ink-soft); }
details summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); }
.chat { margin-top: 12px; }
.chat-log { height: 150px; overflow-y: auto; background: var(--paper-2); border-radius: 12px; padding: 8px 10px; font-size: .9rem; margin-bottom: 8px; border: 2px solid var(--line); }
.chat-log p { margin: 2px 0; overflow-wrap: anywhere; }
.chat-log .sys { color: var(--ink-soft); font-style: italic; }
.chat input { flex: 1; }

/* ---------- game ---------- */
#screen-game { padding: 8px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Buttons: no grey flash, long-press menu or double-tap zoom on phones. */
button { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.game-layout { display: flex; gap: 10px; height: calc(100vh - 16px); max-width: 1400px; margin: 0 auto; }
.stage { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 4px 6px; font-weight: 600; }
#hud-ping { display: inline-block; margin-left: 6px; font-size: .78rem; font-variant-numeric: tabular-nums; padding: 1px 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); }
#hud-ping[hidden] { display: none; }
#hud-ping::before { content: '● '; }
#hud-ping[data-q="good"]::before { color: var(--green); }
#hud-ping[data-q="ok"]::before { color: var(--yellow); }
#hud-ping[data-q="bad"]::before { color: var(--danger); }
.timer { font-size: 1.6rem; font-weight: 700; background: #fff; border-radius: 999px; padding: 2px 18px; box-shadow: var(--shadow); font-variant-numeric: tabular-nums; }
.timer.low { color: var(--danger); }
#game-canvas { display: block; margin: 0 auto; border-radius: 12px; box-shadow: var(--shadow); touch-action: none; }
.hud { width: 250px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.hud-card { background: #fff; border-radius: 14px; padding: 8px 10px; box-shadow: var(--shadow); }
.hud-local .who { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 4px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; text-align: center; font-size: .8rem; }
.stat-row div { background: var(--paper-2); border-radius: 8px; padding: 3px 2px; }
.stat-row b { display: block; font-size: 1rem; }
.stat-row .maxed b { color: var(--primary-dark); }
.inv { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.inv .slot-item { position: relative; width: 36px; height: 36px; border-radius: 10px; background: var(--paper-2); border: 2px solid var(--line); }
.inv .slot-item.sel { border-color: var(--primary); background: #fff0f5; }
.inv .slot-item canvas { width: 100%; height: 100%; }
.inv { align-items: center; flex-wrap: nowrap; }
.inv .slot-item b { position: absolute; left: 2px; top: -1px; font-size: .62rem; color: var(--ink-soft); }
.inv .slot-item.empty-slot { opacity: .5; }
.inv .empty { font-size: .8rem; color: var(--ink-soft); }
.status-line { font-size: .8rem; margin-top: 4px; min-height: 1em; color: var(--ink-soft); }
.status-line .curse { color: #8a3fd1; font-weight: 600; }
.hud-players { display: flex; flex-direction: column; gap: 4px; }
.hud-player { display: grid; grid-template-columns: 34px 1fr auto; gap: 6px; align-items: center; background: #fff; border-radius: 12px; padding: 4px 8px; border-left: 6px solid #ccc; box-shadow: 0 2px 0 rgba(0,0,0,.06); }
.hud-player canvas { width: 34px; height: 34px; }
.hud-player .nm { font-size: .85rem; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hud-player .st { font-size: .75rem; color: var(--ink-soft); }
.hud-player.dead { opacity: .45; }
.hud-player.trapped .st { color: var(--blue-dark); font-weight: 600; }

.touch-controls { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; padding: 12px; pointer-events: none; }
.touch-controls button { pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; font: inherit; font-size: 1.3rem; border: none; border-radius: 50%; background: rgba(255,255,255,.75); box-shadow: var(--shadow); width: 58px; height: 58px; color: var(--ink); }
.touch-controls button.pressed { background: var(--yellow); }
/* Joystick: put a thumb anywhere in the zone; the base jumps there and the
   knob follows the thumb. */
.joy { --base: 124px; --knob: 54px; position: relative; width: calc(var(--base) + 48px); height: calc(var(--base) + 48px); pointer-events: auto; touch-action: none; }
.joy-base { position: absolute; left: 50%; top: 50%; width: var(--base); height: var(--base); margin: calc(var(--base) / -2) 0 0 calc(var(--base) / -2); border-radius: 50%; background: rgba(255,255,255,.35); border: 3px solid rgba(255,255,255,.85); box-shadow: var(--shadow); transition: opacity .15s; }
.joy-knob { position: absolute; left: 50%; top: 50%; width: var(--knob); height: var(--knob); margin: calc(var(--knob) / -2) 0 0 calc(var(--knob) / -2); border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: 0 3px 8px rgba(45,49,80,.25); }
.joy.active .joy-knob { background: var(--yellow); }
.actions { display: flex; align-items: flex-end; gap: 10px; }
.actions .place { width: 78px; height: 78px; font-size: 2rem; background: rgba(77,157,255,.85); }
.slot-btns { display: grid; grid-template-columns: repeat(3, 44px); gap: 6px; }
.touch-controls .slot-btns button { width: 44px; height: 44px; border-radius: 12px; font-size: .8rem; position: relative; padding: 0; opacity: .45; }
.touch-controls .slot-btns button.has { opacity: 1; }
.slot-btns button canvas { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
.slot-btns button span { position: absolute; left: 3px; top: 1px; font-size: .65rem; font-weight: 700; }

.overlay { position: fixed; inset: 0; background: rgba(45,49,80,.45); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px; }
.modal { width: min(380px, 100%); text-align: center; }
.wide-modal { width: min(820px, 100%); max-height: 90vh; overflow: auto; text-align: left; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 10px; }
.pick { font: inherit; color: inherit; background: var(--paper-2); border: 3px solid var(--line); border-radius: 14px; padding: 6px; cursor: pointer; text-align: center; }
.pick canvas { width: 80px; height: 80px; }
.pick b { display: block; }
.pick small { color: var(--ink-soft); }
.pick.sel { border-color: var(--primary); }
.pick.locked { opacity: .55; }

/* ---------- results ---------- */
#screen-results { display: flex; align-items: center; justify-content: center; }
.results { width: min(640px, 100%); text-align: center; }
.results h2 { font-size: 2.4rem; }
.results-table { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; text-align: left; }
.res-row { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 10px; align-items: center; background: var(--paper-2); border-radius: 12px; padding: 4px 10px; border-left: 6px solid #ccc; }
.res-row.win { background: #fff7d6; }
.res-row canvas { width: 44px; height: 44px; }
.res-row span { font-size: .9rem; color: var(--ink-soft); }
.reward { font-weight: 600; font-size: 1.1rem; color: #a5770c; }

/* ---------- cards: critters & shop ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; max-width: 1100px; margin: 0 auto; }
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.card canvas.preview { width: 120px; height: 120px; align-self: center; }
.card h3 { margin: 0; }
.card .blurb { font-size: .9rem; color: var(--ink-soft); margin: 0; flex: 1; }
.bars { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; }
.bar { display: grid; grid-template-columns: 62px 1fr 34px; align-items: center; gap: 6px; }
.bar .track { height: 10px; background: var(--paper-2); border-radius: 999px; position: relative; overflow: hidden; border: 1px solid var(--line); }
.bar .max { position: absolute; inset: 0 auto 0 0; background: #ffd1df; border-radius: 999px; }
.bar .start { position: absolute; inset: 0 auto 0 0; background: var(--primary); border-radius: 999px; }
.traits { font-size: .82rem; color: #8a3fd1; font-weight: 600; min-height: 1em; }
.price { font-weight: 700; }
.tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 0 auto 14px; max-width: 1100px; }
.tabs button { font: inherit; font-weight: 600; border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 16px; cursor: pointer; color: var(--ink); }
.tabs button.active { background: var(--primary); border-color: var(--primary-dark); color: #fff; }
.qty { display: inline-flex; align-items: center; gap: 4px; }
.qty button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); background: #fff; font: inherit; font-weight: 700; cursor: pointer; color: var(--ink); }

/* ---------- how to & settings ---------- */
.howto, .settings { max-width: 900px; margin: 0 auto; }
.howto h3 { margin-top: 16px; }
.keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.keys div { background: var(--paper-2); border-radius: 12px; padding: 10px; }
kbd { font-family: inherit; font-weight: 600; background: #fff; border: 2px solid var(--line); border-bottom-width: 3px; border-radius: 6px; padding: 0 6px; font-size: .85rem; }
.item-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.item-entry { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; background: var(--paper-2); border-radius: 12px; padding: 6px 10px; }
.item-entry canvas { width: 40px; height: 40px; }
.item-entry b { display: block; font-size: .95rem; }
.item-entry span { font-size: .82rem; color: var(--ink-soft); }
.settings hr { border: none; border-top: 2px solid var(--line); margin: 16px 0; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; z-index: 50; font-weight: 500; box-shadow: var(--shadow); max-width: calc(100% - 32px); text-align: center; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .setup-grid { grid-template-columns: 1fr; }
  .game-layout { flex-direction: column; height: auto; }
  .stage { height: auto; }
  .touch-controls { position: static; padding: 10px 4px 0; }
  .hud { width: 100%; flex-direction: row; flex-wrap: wrap; overflow: visible; }
  .hud > * { flex: 1 1 260px; }
  .screen-head h2 { font-size: 1.3rem; }
}
@media (max-width: 520px) {
  .slot { grid-template-columns: 48px 1fr; }
  .slot .portrait { width: 48px; height: 48px; }
  .slot .slot-controls { grid-column: 1 / -1; justify-content: flex-start; }
  .inline-fields { grid-template-columns: 1fr; }
  .screen-head { grid-template-columns: auto 1fr; }
  .screen-head > :last-child { grid-column: 1 / -1; justify-self: center; }
}

/* ---------- accounts ---------- */
.account-line { margin-top: 10px; text-align: center; font-size: .9rem; color: var(--ink-soft); display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.account-line b { color: var(--ink); }
#account-form .field { margin-bottom: 10px; }
#account-form .field input { width: 100%; }

/* ---------- levels, leaderboards, dialogs ---------- */
.level-badge { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; font-weight: 600; font-size: .9rem; }
.level-badge .lv { background: var(--primary); color: #fff; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.level-badge .bar { flex: 1; height: 10px; background: var(--paper-2); border: 2px solid var(--line); border-radius: 999px; overflow: hidden; }
.level-badge .bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffc23d, #ff6f91); }
.level-badge small { color: var(--ink-soft); white-space: nowrap; }
.lv-tag { display: inline-block; background: var(--paper-2); border: 2px solid var(--line); border-radius: 999px; padding: 0 7px; font-size: .75rem; font-weight: 700; margin-left: 6px; vertical-align: middle; }
.board { max-width: 760px; margin: 0 auto; }
.board-row { display: grid; grid-template-columns: 44px 40px 1fr auto; gap: 10px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.board-row canvas { width: 36px; height: 36px; }
.board-row .rank { font-weight: 700; text-align: center; color: var(--ink-soft); }
.board-row.top1 .rank, .board-row.top2 .rank, .board-row.top3 .rank { font-size: 1.3rem; }
.board-row.me { background: #fff0f5; border-radius: 10px; }
.board-row .val { font-weight: 700; text-align: right; }
.board-row .val small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .75rem; }
.board-note { color: var(--ink-soft); font-size: .85rem; text-align: center; margin: 10px 0 0; }
.link-btn { background: none; border: none; color: var(--blue, #4d9dff); font: inherit; font-size: .9rem; margin-top: 10px; cursor: pointer; text-decoration: underline; }
#dialog .modal { width: min(460px, 100%); text-align: left; }
#dialog .field { margin-bottom: 10px; display: block; }
#dialog .field input, #dialog .field textarea { width: 100%; }
#dialog textarea { min-height: 110px; resize: vertical; font: inherit; border-radius: 10px; border: 2px solid var(--line); padding: 8px; }
.recovery-code { display: block; font-size: 1.4rem; font-weight: 700; letter-spacing: .08em; text-align: center; background: var(--paper-2); border: 2px dashed var(--line); border-radius: 12px; padding: 12px; margin: 10px 0; user-select: all; }
.reward-line { font-weight: 600; }
.reward-line .up { color: var(--primary); display: block; font-size: 1.15rem; }

/* ---------- shop extras ---------- */
.shop-note { max-width: 1100px; margin: 0 auto 12px; text-align: center; color: var(--ink-soft); font-size: .9rem; }
.refund-note { max-width: 760px; margin: 0 auto 14px; padding: 10px 14px; background: var(--paper-2); border: 2px solid var(--line); border-radius: 12px; text-align: center; font-size: .92rem; color: var(--ink); }
.shop-heading { max-width: 1100px; margin: 18px auto 8px; padding: 0 4px; }
.support-panel { max-width: 760px; margin: 0 auto; text-align: center; }
.support-panel .tiers { margin: 14px 0; }
.card .row.gap { flex-wrap: wrap; }
.card .btn { max-width: 100%; white-space: normal; }
.badge-heart { margin-left: 4px; }
.gift-btn { width: 100%; margin: 0 0 12px; background: linear-gradient(90deg, #ffe08a, #ffc4dc); font-weight: 700; animation: gift-wiggle 2.4s ease-in-out infinite; }
@keyframes gift-wiggle { 0%, 90%, 100% { transform: rotate(0); } 93% { transform: rotate(-2deg); } 96% { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .gift-btn { animation: none; } }

/* ---------- free & private ---------- */
.free-line { margin: 10px 0 0; text-align: center; font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.free-line .link-btn { margin: 0 0 0 4px; font-size: .85rem; }
.about { max-width: 760px; margin: 0 auto; }
.about h3 { margin: 16px 0 6px; }
.about h3:first-child { margin-top: 0; }
.about ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.welcome { width: min(440px, 100%); }
.welcome-points { text-align: left; list-style: none; padding: 0; margin: 12px 0 16px; display: grid; gap: 10px; }
.welcome-points li { padding-left: 28px; position: relative; }
.welcome-points li::before { content: '✓'; position: absolute; left: 4px; top: 0; color: #3ccf7a; font-weight: 700; }
.welcome .link-btn { display: block; margin: 10px auto 0; }
.danger-zone { margin-top: 12px; }

/* ---------- chat during online matches ---------- */
.topbar-btns { display: flex; gap: 6px; }
.canvas-wrap { position: relative; width: fit-content; margin: 0 auto; }
.game-chat { position: absolute; left: 10px; bottom: 10px; width: min(380px, calc(100% - 24px)); pointer-events: none; z-index: 5; }
.game-chat-log p { margin: 3px 0; padding: 3px 9px; border-radius: 10px; background: rgba(32, 36, 64, .72); color: #fff; font-size: .9rem; width: fit-content; max-width: 100%; overflow-wrap: anywhere; animation: chat-fade 10s forwards; }
.game-chat-log p.sys { background: rgba(32, 36, 64, .5); font-style: italic; }
.game-chat-log b { color: #ffd8e4; }
.game-chat.open .game-chat-log p { animation: none; opacity: 1; }
.game-chat-form { pointer-events: auto; margin-top: 6px; }
.game-chat-form input { width: 100%; font: inherit; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--primary); background: rgba(255, 255, 255, .96); }
@keyframes chat-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 860px) { .game-chat { bottom: auto; top: 8px; } }

/* Phones: d-pad, six item slots and the balloon button all fit across the screen. */
@media (max-width: 460px) {
  .touch-controls { gap: 6px; }
  .joy { --base: 108px; --knob: 48px; }
  .slot-btns { grid-template-columns: repeat(3, 36px); gap: 5px; }
  .touch-controls .slot-btns button { width: 36px; height: 36px; border-radius: 10px; }
  .actions { gap: 6px; }
  .actions .place { width: 66px; height: 66px; font-size: 1.7rem; }
}
@media (max-width: 360px) {
  .joy { --base: 96px; --knob: 42px; }
  .slot-btns { grid-template-columns: repeat(3, 30px); gap: 4px; }
  .touch-controls .slot-btns button { width: 30px; height: 30px; }
  .actions .place { width: 56px; height: 56px; font-size: 1.5rem; }
}

/* ---------- account card and support button on the menu ---------- */
.account-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: -4px 0 14px; padding: 10px 12px; border-radius: 14px; background: var(--paper-2); border: 2px solid var(--line); }
.account-card .who { font-size: 1rem; }
.account-card.guest { background: linear-gradient(135deg, #eef6ff, #fff0f6); border-color: #cfe3ff; }
.account-card .pitch { flex: 1 1 220px; font-size: .9rem; line-height: 1.35; }
.account-card .row.gap { flex-wrap: nowrap; }
.support-btn { background: #fff0f6; border-color: #ffc4dc; }
#account-switch { display: block; margin: 12px auto 0; }
#account-form [hidden] { display: none !important; }
.pack-icon { font-size: 4.5rem; line-height: 1; margin: 18px 0 8px; text-align: center; }
.mute-float {
  position: fixed; top: 12px; right: 12px; z-index: 40;
  width: 48px; height: 48px; border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer;
  background: var(--paper); border: 3px solid var(--line); box-shadow: var(--shadow);
}
.mute-float:hover { border-color: var(--primary); }
.mute-float[aria-pressed="true"] { background: var(--paper-2); }
/* The game has its own mute button in the top bar. */
body[data-screen="game"] .mute-float { display: none; }
/* Narrow screens: keep it clear of the page headers. */
@media (max-width: 1240px) { .mute-float { top: auto; bottom: 12px; } }
.skin-btn { display: inline-flex; align-items: center; gap: 2px; padding: 2px 10px 2px 4px; }
.skin-btn canvas { width: 32px; height: 32px; }
.picker-grid > .hint { grid-column: 1 / -1; }

/* ---------- friends ---------- */
.small-hint { font-size: .8rem; margin: -2px 0 10px; }
.friends-btn { position: relative; }
.friends-count { font-size: .75rem; font-weight: 700; background: #dcf8e8; color: #1f8a4c; border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.friends-count.alert { background: var(--primary); color: #fff; }
.friends-count[hidden] { display: none; }
.lobby-friends { margin-top: 10px; }
.friends-modal { width: min(460px, 100%); max-height: 90vh; overflow: auto; text-align: left; }
.friends-me { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--paper-2); border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 8px 0; }
.friends-add { display: flex; gap: 8px; }
.friends-add input { flex: 1; min-width: 0; }
.friends-modal h3 { margin: 16px 0 6px; font-size: 1rem; }
.friend-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.friend-row:last-child { border-bottom: 0; }
.friend-row .portrait { width: 44px; height: 44px; border-radius: 10px; background: #fff; border: 2px solid var(--line); }
.friend-row.offline .portrait { opacity: .5; }
.friend-row b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-row small { color: var(--ink-soft); display: flex; align-items: center; gap: 5px; }
.friend-btns { display: flex; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #c5c9d8; flex: none; }
.dot.on { background: #2fbf6c; }
.room-item .room-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.room-item .portrait { width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 2px solid var(--line); flex: none; }
.room-item .room-join { display: flex; gap: 6px; flex: none; }
.room-item .room-join input { width: 72px; }
.room-item.locked { background: var(--paper); }
.notices { position: fixed; right: 16px; bottom: 76px; display: flex; flex-direction: column; gap: 8px; z-index: 45; width: min(340px, calc(100% - 32px)); }
.notice { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; background: var(--paper); border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow); }
.notice .portrait { width: 40px; height: 40px; border-radius: 10px; background: var(--paper-2); }
.notice p { margin: 0 0 6px; }
.notice .row { gap: 6px; }
@media (max-width: 560px) { .notices { right: 16px; left: 16px; width: auto; top: 16px; bottom: auto; } }
.friend-btns .tag { white-space: nowrap; align-self: center; }