/* Telegram sets --tg-theme-* on the page; the fallbacks cover a plain browser in light or dark mode. */
@font-face {
  font-family: "NinjaPixel";
  src: url("assets/ui/NormalFont.ttf") format("truetype");
  font-display: swap;
}
:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #8a8a8e);
  --link: var(--tg-theme-link-color, #2a7de1);
  --button: var(--tg-theme-button-color, #2a7de1);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --section: var(--tg-theme-section-bg-color, var(--tg-theme-secondary-bg-color, #f1f1f4));
  --sep: var(--tg-theme-section-separator-color, rgba(127, 127, 127, 0.25));
  --accent: var(--tg-theme-accent-text-color, #2a7de1);
  --bad: var(--tg-theme-destructive-text-color, #d93a3a);
  --good: #2e9e5b;
  --gold: #e6b422;
  --pixel: "NinjaPixel", ui-monospace, Menlo, monospace;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not(.tg) {
    --bg: #17181c; --text: #f2f2f2; --hint: #8d8f96; --section: #23252b; --link: #5ea8ff; --accent: #5ea8ff;
    --button: #3b82f6;
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #1b1f2a; color: var(--text);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none; touch-action: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: 0.5; }
[hidden] { display: none !important; }

#game { position: fixed; inset: 0; }
#game canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

.pixel-title { font-family: var(--pixel); letter-spacing: 0.02em; }

/* ---------- loading ---------- */
.loading { position: fixed; inset: 0; display: grid; place-items: center; background: #1b1f2a; color: #f2f2f2; z-index: 100; }
.loading-card { text-align: center; padding: 16px; }
.loading .pixel-title { font-size: 28px; margin-bottom: 16px; color: #ffd23f; }
.loading p { color: #c9cbd3; }
.spinner { width: 28px; height: 28px; margin: 12px auto; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: #ffd23f; border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- HUD ---------- */
.hud { position: fixed; top: 0; left: 0; right: 0; z-index: 10; padding: calc(8px + var(--safe-top)) 16px 0; pointer-events: none; }
.hud-top {
  display: flex; align-items: center; gap: 10px; max-width: 520px; margin: 0 auto;
  background: rgba(20, 22, 30, 0.82); color: #fff; border-radius: 12px; padding: 8px 12px; border: 2px solid #3a3f52;
}
.hud-level { font-family: var(--pixel); font-size: 18px; color: #ffd23f; white-space: nowrap; }
.lv-label { font-size: 12px; color: #c9cbd3; }
.hud-mid { flex: 1; min-width: 0; }
.hud-place { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xpbar { height: 6px; background: #3a3f52; border-radius: 3px; overflow: hidden; margin-top: 4px; }
.xpfill { height: 100%; width: 0; background: linear-gradient(90deg, #4aa3ff, #8fd0ff); transition: width 0.8s ease; }

.hud-buttons {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; gap: 6px; justify-content: center;
  padding: 8px 10px calc(10px + var(--safe-bottom));
}
.hud-buttons button {
  flex: 1; max-width: 120px; border: 2px solid #2a2e3d; background: #f4e3c1; color: #3b2a16;
  border-radius: 10px; padding: 9px 4px; font-family: var(--pixel); font-size: 14px;
  box-shadow: 0 3px 0 #2a2e3d;
}
.hud-buttons button:active { transform: translateY(2px); box-shadow: 0 1px 0 #2a2e3d; }

/* ---------- D-pad ---------- */
.dpad {
  position: fixed; z-index: 9; right: 16px; bottom: calc(70px + var(--safe-bottom));
  width: 132px; height: 132px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 2px;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.dpad button {
  border: 2px solid #2a2e3d; background: rgba(244, 227, 193, 0.85); color: #3b2a16; border-radius: 8px;
  font-size: 16px; padding: 0; touch-action: none;
}
.dpad button.on { background: #ffd23f; }
.dpad [data-dir="up"] { grid-area: 1 / 2; }
.dpad [data-dir="left"] { grid-area: 2 / 1; }
.dpad [data-dir="right"] { grid-area: 2 / 3; }
.dpad [data-dir="down"] { grid-area: 3 / 2; }

/* ---------- layers: full screens and bottom sheets ---------- */
#layers { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.screen, .sheet-wrap { pointer-events: auto; }
.screen {
  position: absolute; inset: 0; background: var(--bg); color: var(--text); overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
  padding: calc(8px + var(--safe-top)) 16px calc(24px + var(--safe-bottom));
}
.screen-inner { max-width: 640px; margin: 0 auto; }
.screen-head { display: flex; align-items: center; gap: 8px; padding: 6px 0 10px; position: sticky; top: calc(-8px - var(--safe-top)); background: var(--bg); z-index: 2; }
.screen-head h1 { flex: 1; margin: 0; font-size: 20px; font-family: var(--pixel); font-weight: normal; }
.close { border: 0; background: var(--section); border-radius: 50%; width: 34px; height: 34px; font-size: 18px; line-height: 1; }
.tg .close.tg-hide { display: none; }

.sheet-wrap { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  width: 100%; max-width: 560px; max-height: 85%; overflow-y: auto; touch-action: pan-y;
  background: var(--bg); color: var(--text); border-radius: 16px 16px 0 0;
  padding: 16px 16px calc(16px + var(--safe-bottom)); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  animation: up 0.18s ease-out;
}
@keyframes up { from { transform: translateY(30px); opacity: 0; } }
.sheet h2 { margin: 0 0 4px; font-size: 20px; font-family: var(--pixel); font-weight: normal; }

.card { background: var(--section); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.card h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hint); font-weight: 600; }
.hint { color: var(--hint); font-size: 13px; margin: 6px 0; }
.err { color: var(--bad); font-size: 14px; margin: 8px 0; }
.ok { color: var(--good); }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.row > button { flex: 1; min-width: 120px; }
.primary { background: var(--button); color: var(--button-text); border: 0; border-radius: 10px; padding: 11px 14px; font-weight: 600; }
.ghost { background: transparent; border: 1px solid var(--sep); border-radius: 10px; padding: 10px 14px; }
.small { padding: 6px 10px; font-size: 13px; min-width: 0 !important; flex: 0 0 auto !important; }
input[type="search"], input[type="text"] {
  font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--sep);
  border-radius: 10px; padding: 10px 12px; width: 100%; min-width: 0;
}
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--sep); font-size: 14px; }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--hint); }
.kv span:last-child { text-align: right; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--sep); }
.list li:last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 0; }
.list .sub { color: var(--hint); font-size: 13px; }
.pick { width: 100%; text-align: left; background: transparent; border: 0; padding: 0; }

.chip {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; margin: 0 4px 2px 0;
  text-transform: uppercase; letter-spacing: 0.03em; border: 1px solid rgba(0, 0, 0, 0.25); white-space: nowrap;
}
.badge-mark { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; margin: 0 4px 2px 0; white-space: nowrap; }
.mark-blue { background: #1f4fd6; color: #fff; }
.mark-ranked { background: var(--good); color: #fff; }
.mark-unranked { background: var(--section); color: var(--hint); border: 1px solid var(--sep); }
.mark-party { background: var(--gold); color: #2a1f00; }

.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; border: 1px solid rgba(0, 0, 0, 0.3); }
.continent-head { margin: 16px 0 4px; font-size: 13px; text-transform: uppercase; color: var(--hint); letter-spacing: 0.05em; }

/* ---------- gifts ---------- */
.gift-img {
  width: 64px; height: 64px; border-radius: 12px; flex: 0 0 auto; position: relative; overflow: hidden;
  display: grid; place-items: center; border: 2px solid rgba(0, 0, 0, 0.2); image-rendering: auto;
}
.gift-img img { width: 100%; height: 100%; object-fit: contain; padding: 3px; display: block; }
.gift-img .ph { font-family: var(--pixel); font-size: 22px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.gift-card { display: flex; gap: 12px; align-items: flex-start; }
.gift-card .grow { flex: 1; min-width: 0; }
.gift-name { font-weight: 700; font-size: 16px; margin-bottom: 2px; overflow-wrap: anywhere; }
.gift-sub { color: var(--hint); font-size: 13px; }
/* giftTitle: the number sits on its own line under the name */
.gt-name, .gt-num { display: block; }
.gt-num { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.85em; opacity: 0.85; }
.gift.in-party { outline: 2px solid var(--gold); }
/* the head of a gift card in the backdrop's colours (RULES_DRAFT "backdrop tinting") */
.gift-card.tinted { border-radius: 10px; padding: 10px; }
.gift-card.tint-shadow .gift-name, .gift-card.tint-shadow .gift-sub { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.gift-card.tinted .gift-sub { opacity: 0.92; }
.gift-card.tinted .gift-img { border-color: rgba(255, 255, 255, 0.35); }
details > summary { cursor: pointer; color: var(--link); font-size: 14px; margin-top: 8px; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.stat { display: grid; grid-template-columns: 92px 40px 1fr; gap: 8px; align-items: center; font-size: 13px; padding: 2px 0; }
.stat .bar { height: 6px; background: var(--sep); border-radius: 3px; overflow: hidden; }
.stat .bar div { height: 100%; background: var(--accent); }
.ability-opt { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 14px; }
.ability-opt input { margin-top: 3px; }
.move-line { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; }
.party-bar {
  position: sticky; bottom: calc(-24px - var(--safe-bottom)); background: var(--bg); padding: 10px 0 calc(10px + var(--safe-bottom));
  border-top: 1px solid var(--sep); display: flex; gap: 8px; align-items: center; z-index: 2;
}
.party-bar .grow { flex: 1; font-size: 14px; }
.toggle { border: 1px solid var(--sep); background: var(--bg); border-radius: 10px; padding: 7px 10px; font-size: 13px; white-space: nowrap; }
.toggle.on { background: var(--gold); color: #2a1f00; border-color: var(--gold); font-weight: 700; }

/* ---------- guide speech ---------- */
.speech { display: flex; gap: 12px; align-items: flex-start; }
.face { width: 76px; height: 76px; flex: 0 0 auto; image-rendering: pixelated; border: 3px solid #3b2a16; border-radius: 8px; background: #f4e3c1; }
.speech-text { flex: 1; min-width: 0; }
.speech-name { font-family: var(--pixel); font-size: 15px; color: var(--accent); margin-bottom: 4px; }
.speech-text p { margin: 0 0 6px; }

/* ---------- toast ---------- */
.toast {
  position: fixed; z-index: 60; left: 16px; right: 16px; top: calc(70px + var(--safe-top)); margin: 0 auto; max-width: 480px;
  background: rgba(20, 22, 30, 0.92); color: #fff; border-radius: 10px; padding: 10px 14px; font-size: 14px; text-align: center;
  pointer-events: none;
}

/* ---------- battle ---------- */
.battle-ui { position: fixed; inset: 0; z-index: 15; display: flex; flex-direction: column; color: #1a1a1a; touch-action: manipulation; }
.arena { position: relative; flex: 1 1 auto; min-height: 300px; display: flex; flex-direction: column; padding: 8px 10px 6px; }
/* triple battles: 3 places a side, left, centre and right, as seen on the screen */
.field-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.arena-gap { flex: 1 1 auto; min-height: 8px; }
.place { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; border-radius: 12px; padding: 3px; transition: background 0.2s; }
.place.empty .infobox { visibility: hidden; }
.place.choosing { background: rgba(255, 210, 63, 0.35); }
.place.target-ok { background: rgba(229, 72, 77, 0.28); cursor: pointer; }
.place.target-no { opacity: 0.45; }
.mon-img {
  position: relative; width: min(24vw, 104px); aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center; border: 3px solid #2a2e3d; background: #fff; transition: transform 0.15s ease, opacity 0.3s ease;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}
.mon-img.blank { border: 2px dashed rgba(42, 46, 61, 0.35); background: rgba(255, 255, 255, 0.15); box-shadow: none; }
.mon-img img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.mon-img .ph { font-family: var(--pixel); font-size: 24px; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }
.mon-img.choosing { outline: 3px solid #ffd23f; outline-offset: 2px; }
.mon-img.target-ok { outline: 3px solid #e5484d; outline-offset: 2px; animation: pulse 0.9s ease-in-out infinite; }
@keyframes pulse { 50% { outline-color: #ffb3b5; } }
.mon-img.lunge-you { transform: translateY(-14px); }
.mon-img.lunge-foe { transform: translateY(14px); }
.mon-img.hit { animation: blink 0.45s steps(2) 1; }
.mon-img.faint { transform: translateY(20px); opacity: 0; }
.mon-img.out { opacity: 0; transform: scale(0.6); }
@keyframes blink { 50% { opacity: 0.2; } }
.shake { animation: shake 0.3s linear 1; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.infobox {
  width: 100%; background: #fdf6e3; border: 2px solid #2a2e3d; border-radius: 8px;
  padding: 3px 5px 4px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); min-width: 0;
}
.infobox .nm { font-weight: 800; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.infobox .chips { margin: 1px 0 2px; white-space: nowrap; overflow: hidden; }
.infobox .chip { font-size: 8px; padding: 0 4px; }
.hpline { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; }
.hpbar { flex: 1; height: 7px; background: #3a3f52; border-radius: 4px; overflow: hidden; border: 1px solid #2a2e3d; }
.hpfill { height: 100%; width: 100%; background: #3fbf5f; transition: width 0.6s ease, background-color 0.3s; }
.hpnum { font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; }
.ab { font-size: 9px; color: #5b4a2a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 11px; }
.infobox.tint-shadow .nm, .infobox.tint-shadow .hpline, .infobox.tint-shadow .hpnum, .infobox.tint-shadow .ab { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.infobox.tinted .ab { color: inherit; opacity: 0.92; }
.trainer-tag { align-self: flex-end; margin-top: 6px; font-size: 12px; color: #fff; text-shadow: 0 1px 2px #000; font-weight: 700; max-width: 70%; text-align: right; }

.bwho { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: -4px 0 6px; min-height: 18px; }
.bwho-place { font-weight: 800; text-transform: uppercase; font-size: 11px; background: #2a2e3d; color: #ffd23f; border-radius: 5px; padding: 1px 6px; }
.bwho-name { font-weight: 700; flex: 1; min-width: 0; line-height: 1.2; }
.bwho-name .gt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bwho-step { font-size: 11px; opacity: 0.75; }
.move.picked { outline: 3px solid #ffd23f; outline-offset: 1px; }
.earned { display: flex; align-items: center; gap: 8px; }

.bpanel {
  flex: 0 0 auto; background: #f4e3c1; border-top: 4px solid #2a2e3d;
  padding: 10px 16px calc(12px + var(--safe-bottom)); color: #2a1f00;
}
.blog {
  min-height: 44px; background: #fffaf0; border: 3px solid #2a2e3d; border-radius: 10px; padding: 8px 10px; font-size: 15px;
  font-weight: 600; margin-bottom: 8px; cursor: pointer; user-select: none;
}
.blog .more { float: right; animation: bob 0.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }
.moves { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.move {
  text-align: left; border: 3px solid #2a2e3d; border-radius: 10px; padding: 5px 8px; color: #fff; min-height: 46px;
  box-shadow: 0 3px 0 #2a2e3d;
}
.move:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #2a2e3d; }
.move .mn { font-weight: 800; font-size: 13px; display: block; }
.move:disabled { opacity: 0.45; }
.move .mm { font-size: 11px; opacity: 0.9; }
.bturn-timer { min-height: 16px; font-size: 12px; font-weight: 700; text-align: right; margin: -4px 2px 4px; font-variant-numeric: tabular-nums; }
.bturn-timer.low { color: #c0392b; }
.bactions { display: flex; gap: 8px; margin-top: 8px; }
.bactions button:disabled { opacity: 0.5; }
.bactions button { flex: 1; border: 3px solid #2a2e3d; background: #fffaf0; border-radius: 10px; padding: 8px; font-weight: 700; box-shadow: 0 3px 0 #2a2e3d; }

.party-pick { display: grid; gap: 8px; }
.party-pick button { display: flex; align-items: center; gap: 10px; text-align: left; border: 2px solid var(--sep); background: var(--section); border-radius: 12px; padding: 8px; }
.party-pick button .gift-img { width: 48px; height: 48px; }
.party-pick .hpbar { height: 6px; margin-top: 4px; }

.result-title { font-family: var(--pixel); font-size: 30px; text-align: center; margin: 8px 0; }
.result-title.win { color: var(--gold); }
.levelup { text-align: center; font-family: var(--pixel); color: var(--good); font-size: 18px; margin: 8px 0; }
.big-xp { height: 12px; background: var(--sep); border-radius: 6px; overflow: hidden; margin: 6px 0; }
.big-xp div { height: 100%; width: 0; background: linear-gradient(90deg, #4aa3ff, #8fd0ff); transition: width 1.2s ease; }

/* ---------- map key ---------- */
.map-key {
  position: fixed; z-index: 9; left: 16px; bottom: calc(66px + var(--safe-bottom)); background: rgba(20, 22, 30, 0.82); color: #fff;
  border-radius: 10px; padding: 6px 10px; font-size: 12px; pointer-events: none;
}
.map-key div { white-space: nowrap; }
.route-key { display: inline-block; width: 16px; height: 0; border-top: 2px dashed #9cc3e0; margin-right: 6px; vertical-align: middle; }

@media (min-width: 700px) {
  .arena { padding-left: calc(50% - 300px); padding-right: calc(50% - 300px); }
  .bpanel { padding-left: calc(50% - 300px); padding-right: calc(50% - 300px); }
}

/* The pixel font has a very narrow space. */
.screen-head h1, .speech-name, .sheet h2, .result-title, .levelup, .hud-buttons button, .pixel-title, .hud-level { word-spacing: 0.4em; text-transform: uppercase; }
/* Its lowercase i is hard to read, so pixel text is always in capitals. */

/* checkmarks (Telegram verified style) */
.checkmark { flex: 0 0 auto; vertical-align: middle; }
.checks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 4px; margin: 6px 0 4px; }
.check-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.check-cell .nm { font-size: 10px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; color: var(--hint); }
.check-cell.won .nm { color: var(--text); font-weight: 600; }
.check-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.check-gold { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; }
.break-card { border: 2px solid #e5484d; }
.mark-rental { background: #fde68a; color: #5b3d00; }

/* keys.js: where the keyboard cursor is (desktop only; taps never show it) */
button:focus-visible, summary:focus-visible, a:focus-visible, input:focus-visible, .place:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; }

/* ---------- the item shop and battle items (GAME_DESIGN "Battle items and currency") ---------- */
.shop-balance { text-align: center; }
.coin-big { font-family: var(--pixel); font-size: 34px; color: #ffd23f; text-shadow: 0 2px 0 #2a2e3d; }
.bundle-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bundle { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 10px; }
.bundle strong { font-size: 18px; }
.bundle .stars { font-weight: 700; margin-top: 4px; }
.item-list { display: flex; flex-direction: column; gap: 8px; }
.item-row { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; }
.item-row .grow { display: flex; flex-direction: column; min-width: 0; }
.item-row .sub, .toggle .sub { color: var(--hint); font-size: 13px; }
.item-row .count { font-weight: 700; white-space: nowrap; }
.toggle { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; cursor: pointer; }
.toggle .grow { display: flex; flex-direction: column; }
.toggle input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.memecoins-won { font-weight: 700; color: #b8860b; }
.bug-text { width: 100%; box-sizing: border-box; font: inherit; padding: 10px; border-radius: 10px; border: 1px solid var(--hint); background: var(--card, transparent); color: inherit; resize: vertical; }

/* Status (Sid, 20 Oct) */
.status-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.status-num { font-family: var(--pixel); font-size: 40px; line-height: 1; }
.tier-badge { display: inline-block; font-weight: 800; padding: 2px 10px; border-radius: 999px; background: #8a6a4a; color: #fff; }
.tier-silver .tier-badge { background: #9aa4b1; } .tier-gold .tier-badge { background: #d4a72c; color: #2a1f00; }
.tier-platinum .tier-badge { background: #5fb3b3; } .tier-diamond .tier-badge { background: linear-gradient(90deg, #7fd3ff, #c58bff); color: #12121a; }
.status-change.up { color: #2e9e4f; } .status-change.down { color: #d64545; }
.welcome-pack { border: 2px solid #d4a72c; background: linear-gradient(180deg, rgba(255,210,63,0.18), transparent); }
.row.wrap { flex-wrap: wrap; }
.symbol-chip, .model-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; margin: 2px; }
.model-chip { background: #3a3f52; color: #9aa1b5; } .model-chip.got { background: #2e9e4f; color: #fff; }
.upgrade-box { margin: 8px 0; padding: 8px; border-radius: 10px; background: rgba(255,210,63,0.08); }
.wild-won { font-weight: 700; color: #2e9e4f; }
.gift-hp { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 2px; } .fainted-tag { color: #d64545; }
.tourney-box { position: fixed; left: 10px; right: 10px; bottom: calc(64px + var(--safe-bottom)); z-index: 9; background: #2a2e3dee; color: #fff; border: 2px solid #d4a72c; border-radius: 12px; padding: 8px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.tourney-box .tb-title { font-weight: 800; flex: 1 1 100%; } .tourney-box .tb-sub { font-size: 12px; opacity: 0.85; flex: 1; }

/* ---------- story quests and puzzles ---------- */
.quest-card h3 { margin: 2px 0 4px; }
.quest-card.locked { opacity: 0.6; }
.slide-grid { display: grid; gap: 4px; width: min(100%, 320px); margin: 10px auto; aspect-ratio: 1; }
.slide-tile { border: 2px solid #2a2e3d; border-radius: 8px; background: #f4e3c1; color: #3b2a16; font-family: var(--pixel); font-size: 22px; box-shadow: 0 3px 0 #2a2e3d; }
.slide-tile.gap { background: transparent; border-style: dashed; box-shadow: none; }
.box-grid { display: grid; width: min(100%, 360px); margin: 10px auto; touch-action: none; }
.box-cell { aspect-ratio: 1; background: #d8c6a0; position: relative; display: flex; align-items: center; justify-content: center; }
.box-cell.wall { background: #4a3b2a; box-shadow: inset 0 -3px 0 #2e2418; }
.box-cell.goal::after { content: ""; width: 40%; height: 40%; border-radius: 50%; border: 3px solid #c0392b; position: absolute; }
.box-cell.crate { background: #d8c6a0; }
.box-cell.crate::before { content: ""; position: absolute; inset: 10%; background: #b07a3c; border: 3px solid #6b4520; border-radius: 4px; box-shadow: inset 0 0 0 3px #c9944f; z-index: 1; }
.box-cell.crate.goal::before { background: #5aa05a; border-color: #2f6b2f; box-shadow: inset 0 0 0 3px #7cc17c; }
.box-cell.me img { width: 90%; height: 90%; image-rendering: pixelated; z-index: 2; }
.box-pad { display: grid; grid-template: repeat(3, 44px) / repeat(3, 44px); gap: 4px; justify-content: center; margin: 6px auto; }
.box-pad button { border: 2px solid #2a2e3d; border-radius: 8px; background: #f4e3c1; font-size: 18px; }
.box-pad .pad-U { grid-area: 1 / 2; } .box-pad .pad-L { grid-area: 2 / 1; } .box-pad .pad-R { grid-area: 2 / 3; } .box-pad .pad-D { grid-area: 3 / 2; }
.clues { padding-left: 22px; line-height: 1.45; }
.clues li { margin: 4px 0; }
.logic-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.logic-table th, .logic-table td { border: 1px solid var(--line, #8888); padding: 6px 4px; text-align: left; font-size: 14px; }
.logic-table select { width: 100%; font-size: 14px; padding: 4px; }

/* ---------- right-to-left languages ---------- */
/* Text and menus mirror; the game canvas, the D-pad (it stays on the right) and the puzzle grids keep their layout. */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .loading-card { text-align: center; }
[dir="rtl"] .kv span:last-child { text-align: left; }
[dir="rtl"] .pick, [dir="rtl"] .item-row, [dir="rtl"] .party-pick button { text-align: right; }
[dir="rtl"] .status-dot, [dir="rtl"] .route-key { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .badge-mark { margin: 0 0 2px 4px; }
[dir="rtl"] .clues { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .logic-table th, [dir="rtl"] .logic-table td { text-align: right; }
[dir="rtl"] .trainer-tag { align-self: flex-start; text-align: left; }
[dir="rtl"] .map-key { left: auto; right: 16px; }
[dir="rtl"] #game, [dir="rtl"] .dpad, [dir="rtl"] .slide-grid, [dir="rtl"] .box-grid, [dir="rtl"] .box-pad { direction: ltr; }
/* battle places are left, centre and right as seen on the screen, so their row keeps its order */
[dir="rtl"] .field-row { direction: ltr; }
[dir="rtl"] .field-row .place { direction: rtl; }

/* ---------- the one Menu (Sid, 20 Oct) ---------- */
.hud-buttons .menu-button { flex: 0 1 220px; max-width: 220px; position: relative; font-size: 16px; }
.news-dot { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 50%; background: #e74c3c; border: 2px solid #2a2e3d; }
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.menu-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; border: 2px solid #2a2e3d; background: #f4e3c1; color: #3b2a16; font-size: 13px; }
.menu-item .menu-icon { font-size: 22px; }
.news .news-item { padding: 8px 0; border-top: 1px solid #8884; }
.news .news-item.tappable { cursor: pointer; }
.news .news-title { font-weight: 700; }
.teleport-search { width: 100%; padding: 8px; font-size: 16px; margin-bottom: 8px; }

/* ---------- Gift Tactics (GAME_DESIGN "Gift Tactics") ---------- */
.tactics-body { padding-bottom: 12px; }
.tx-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-weight: 700; }
.tx-turn.a { color: #2e86de; } .tx-turn.b { color: #c0392b; }
.tx-board { display: grid; gap: 1px; width: min(100%, 460px); margin: 0 auto; background: #2a2e3d; border: 2px solid #2a2e3d; border-radius: 6px; overflow: hidden; touch-action: manipulation; }
.tx-cell { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.tx-cell.plain { background: #9bc46a; } .tx-cell.road { background: #cdb68a; } .tx-cell.forest { background: #3f7d3c; }
.tx-cell.hill { background: #8fa356; } .tx-cell.mountain { background: #7d6e62; } .tx-cell.water { background: #3b78c4; }
.tx-cell.shallows { background: #80b8e2; } .tx-cell.snow { background: #eef3f7; }
.tx-cell.reach::after { content: ""; position: absolute; inset: 0; background: #2e86de55; box-shadow: inset 0 0 0 2px #2e86dea0; }
.tx-cell.pending::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px #ffd23f; }
.tx-cell.target::before { content: ""; position: absolute; inset: 0; background: #e74c3c55; box-shadow: inset 0 0 0 2px #e74c3c; z-index: 3; pointer-events: none; }
.tx-building { position: absolute; font-size: 70%; bottom: 0; right: 1px; z-index: 1; padding: 0 2px; border-radius: 4px; }
.tx-building.a { background: #2e86dec0; } .tx-building.b { background: #c0392bc0; } .tx-building.none { background: #888c; }
.tx-unit { position: relative; width: 88%; height: 88%; border-radius: 6px; border: 2px solid; z-index: 2; background: #fff3; }
.tx-unit.a { border-color: #2e86de; } .tx-unit.b { border-color: #c0392b; }
.tx-unit.done { filter: grayscale(0.8) brightness(0.8); }
.tx-unit.ghost { opacity: 0.6; }
.tx-unit.sel { box-shadow: 0 0 0 2px #ffd23f; }
.tx-unit .tx-img { width: 100%; height: 100%; border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.tx-unit .tx-img img { width: 100%; height: 100%; object-fit: contain; }
.tx-hp { position: absolute; left: 1px; right: 1px; bottom: 1px; height: 3px; background: #0006; border-radius: 2px; }
.tx-hp > div { height: 100%; background: #2ecc71; border-radius: 2px; }
.tx-gob { position: absolute; top: -6px; left: -6px; font-size: 11px; }
.tx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; min-height: 36px; }
.tx-log { font-size: 13px; opacity: 0.85; line-height: 1.4; }

/* ---------- Goblin Tower (the roguelike) ---------- */
.rg-member { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid #8883; }
.rg-member.fainted { opacity: 0.5; }
.rg-member .rg-img { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; }
.rg-member .rg-img img { width: 100%; height: 100%; object-fit: contain; }
.rg-member .tx-hp { position: static; height: 5px; margin: 3px 0; }
.rg-gear { display: inline-block; font-size: 12px; padding: 2px 6px; border-radius: 8px; margin: 2px 4px 2px 0; background: #8882; }
.rg-gear.r-rare { background: #2e86de33; } .rg-gear.r-epic { background: #9b59b644; } .rg-gear.r-legendary { background: #f1c40f55; }

/* ---------- Gift Commander (the card game) ---------- */
.cg-card { position: relative; width: 104px; min-height: 140px; flex: none; border: 3px solid; border-radius: 10px; background: #f8efd9; color: #2a2015; padding: 6px 6px 4px; font-size: 11px; display: flex; flex-direction: column; gap: 3px; }
.cg-card.small { width: 92px; min-height: 120px; }
.cg-card.dim { opacity: 0.55; }
.cg-card.r-rare { box-shadow: 0 0 0 2px #2e86de55; } .cg-card.r-epic { box-shadow: 0 0 0 2px #9b59b688; } .cg-card.r-legendary { box-shadow: 0 0 0 3px #f1c40faa; }
.cg-cost { position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; border-radius: 50%; background: #2e86de; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.cg-name { font-weight: 800; font-size: 12px; margin-top: 6px; line-height: 1.15; }
.cg-type { font-size: 9px; color: #fff; border-radius: 6px; padding: 1px 5px; align-self: flex-start; text-shadow: 0 1px 1px #0008; }
.cg-text { font-size: 10px; line-height: 1.2; }
.cg-stats { font-weight: 800; margin-top: auto; }
.cg-kw { font-size: 9px; font-style: italic; }
.cg-count { position: absolute; top: 2px; right: 4px; font-weight: 800; }
.cg-row, .cg-hand { display: flex; gap: 8px; overflow-x: auto; padding: 10px 4px; }
.cg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; padding-top: 8px; }
.cg-pick .row { justify-content: center; }
.cg-seat { border: 2px solid #8884; border-radius: 10px; padding: 6px; margin: 4px 0; }
.cg-seat.active { border-color: #ffd23f; } .cg-seat.out { opacity: 0.4; }
.cg-seat .row { gap: 8px; align-items: center; flex-wrap: wrap; }
.cg-life { font-weight: 800; }
.cg-board { display: flex; gap: 6px; flex-wrap: wrap; min-height: 54px; padding-top: 4px; }
.cg-unit { min-width: 64px; max-width: 90px; border: 2px solid #8886; border-radius: 8px; padding: 3px 5px; font-size: 11px; background: #fff1; }
.cg-unit.ready { border-color: #2ecc71; cursor: pointer; } .cg-unit.guard { box-shadow: inset 0 0 0 2px #95a5a6; } .cg-unit.cmd { border-color: #f1c40f; }
.cg-unit .cg-cmd-img { width: 28px; height: 28px; border-radius: 6px; overflow: hidden; }
.cg-unit .cg-cmd-img img { width: 100%; height: 100%; object-fit: contain; }
.cg-uname { font-weight: 700; line-height: 1.1; }
.cg-divider { height: 2px; background: #8884; margin: 6px 0; }
.cg-controls { gap: 8px; align-items: center; margin-top: 4px; }

/* ---------- the launcher (the main app) ---------- */
.launch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 10px 0; }
.launch-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: start; padding: 12px; border-radius: 14px; border: 2px solid #2a2e3d; background: #f4e3c1; color: #3b2a16; }
.launch-card .sub { color: #5a4630; font-size: 12px; }
.launch-card.shop { background: #ffe9a6; }
.launch-icon { font-size: 28px; }

/* Gift Arena (webapp/js/moba.js) */
.moba-map { display: block; width: 100%; max-width: 720px; margin: 8px auto; border-radius: 10px; }
button.rg-member { width: 100%; text-align: left; background: none; border: 2px solid transparent; border-radius: 10px; }
button.rg-member.picked { border-color: #ffd23f; }