/* Anya's Pokémon Quest — UI layer. Tokens mirror site/shared/magic.css ("Follow the Star").
   Perf rule for this page: never use backdrop-filter or CSS blur over the WebGL canvas. */
:root {
  --tw0: #1E1236; --tw1: #2D1B4E; --tw2: #4A2975; --dusk: #6A4296; --lavender: #A57BC8; --lilac: #C8A0E4;
  --pink: #FFB8D4; --magenta: #D946A8; --magenta-soft: #F06FB8; --gold: #FFD54F; --gold-deep: #FFB300; --cream: #FFF4E0;
  --ink: #2D1B4E; --paper: #FFF8EC; --paper-2: #FFEFD9; --mint: #6FE0C8; --sky: #8FB8E8;
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1); --snap: cubic-bezier(0.16, 1, 0.3, 1); --glide: cubic-bezier(0.37, 0, 0.63, 1);
  --font-display: 'Fredoka', 'Quicksand', system-ui, sans-serif; --font-ui: 'Quicksand', system-ui, sans-serif;
  --safe-t: max(12px, env(safe-area-inset-top)); --safe-b: max(12px, env(safe-area-inset-bottom));
  --safe-l: max(12px, env(safe-area-inset-left)); --safe-r: max(12px, env(safe-area-inset-right));
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --pop: linear(0, 0.0431, 0.1532, 0.3033, 0.4705, 0.6366, 0.7882, 0.9167, 1.0178, 1.0905, 1.1364, 1.1589, 1.1624, 1.1516, 1.1313, 1.1056, 1.0781, 1.0516, 1.0279, 1.0082, 0.9931, 0.9826, 0.9763, 0.9736, 0.9738, 0.9761, 0.9798, 0.9841, 0.9886, 0.9928, 0.9965, 0.9995, 1.0017, 1.0032, 1.004, 1.0043, 1.0042, 1.0037, 1.0031, 1.0024, 1);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--tw1); -webkit-tap-highlight-color: transparent; }
body { font-family: var(--font-ui); font-weight: 700; color: var(--cream); touch-action: none; -webkit-user-select: none; user-select: none; position: fixed; inset: 0; overscroll-behavior: none; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#ui > * { pointer-events: auto; }
#ui .pe-none { pointer-events: none; }

/* ---------------------------------------------------------------- boot */
#boot { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; gap: 18px; justify-items: center;
  background: radial-gradient(120% 80% at 50% 110%, #A57BC8 0%, #4A2975 45%, #1E1236 100%); transition: opacity 0.6s var(--glide); }
#boot.gone { opacity: 0; pointer-events: none; }
.boot-star { width: 64px; height: 64px; background: url(../../shared/star-spin.webp) 0 0 / 2400% 100% no-repeat; animation: bootspin 0.9s steps(24, jump-none) infinite; filter: drop-shadow(0 0 14px rgba(255, 200, 80, 0.7)); }
@keyframes bootspin { to { background-position: 100% 0; } }
.boot-text { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.02em; opacity: 0.9; }
.boot-bar { width: 180px; height: 8px; border-radius: 8px; background: rgba(255, 244, 224, 0.15); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--magenta-soft)); border-radius: 8px; transition: width 0.25s var(--snap); }

/* ---------------------------------------------------------------- HUD */
.hud { position: fixed; left: var(--safe-l); right: var(--safe-r); top: var(--safe-t); display: flex; align-items: flex-start; gap: 10px; z-index: 20; transition: transform 0.45s var(--snap), opacity 0.35s; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud.hidden { transform: translateY(-140%); opacity: 0; }
.hud-left { display: flex; gap: 8px; }
.icon-btn { -webkit-appearance: none; appearance: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--cream);
  background: rgba(45, 27, 78, 0.78); border: 2px solid rgba(255, 244, 224, 0.35); box-shadow: 0 6px 16px -6px rgba(10, 4, 24, 0.6); transition: transform 0.4s var(--pop), background 0.2s; }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:active { transform: scale(0.88); transition-duration: 0.08s; }
.quest-chip { -webkit-appearance: none; appearance: none; margin: 0 auto; max-width: min(46vw, 460px); display: flex; align-items: center; gap: 9px; padding: 9px 16px 9px 10px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #FFF8EC, #FFE9CF); color: var(--ink); border: 2.5px solid #2D1B4E; box-shadow: inset 0 0 0 2px var(--gold), 0 8px 20px -8px rgba(10, 4, 24, 0.7);
  font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.15; text-align: left; }
.quest-chip .qstar { width: 26px; height: 26px; flex: none; color: var(--gold-deep); filter: drop-shadow(0 1px 0 #B97800); }
.quest-chip .qstar svg { width: 100%; height: 100%; }
.quest-chip .qtext { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.quest-chip.bump { animation: chipbump 0.7s var(--pop); }
.quest-chip.pulse .qstar { animation: qspin 1.6s var(--glide) infinite; }
@keyframes chipbump { 0% { transform: scale(0.8); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes qspin { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(20deg) scale(1.15); } }
.partner-card { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 22px; cursor: pointer;
  background: rgba(45, 27, 78, 0.8); border: 2px solid rgba(255, 213, 79, 0.55); box-shadow: 0 8px 20px -8px rgba(10, 4, 24, 0.7); min-width: 190px; }
.pc-portrait { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #FFF4E0, #FFB8D4); border: 2px solid var(--gold); flex: none; }
.pc-portrait img { width: 118%; height: 118%; object-fit: cover; object-position: 50% 18%; margin: -9% 0 0 -9%; }
.pc-body { flex: 1; min-width: 0; }
.pc-top { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.pc-lv { color: var(--gold); font-size: 13px; }
.pc-clock { margin-left: auto; font-size: 14px; }
.pc-hearts { display: flex; gap: 2px; margin: 2px 0 4px; }
.pc-hearts.pop { animation: heartpop 0.7s var(--pop); }
@keyframes heartpop { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } }
.hrt { width: 17px; height: 15px; position: relative;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'><path d='M10 17.5C4 13 0 9.5 0 5.4 0 2.3 2.4 0 5.4 0 7.4 0 9 1 10 2.6 11 1 12.6 0 14.6 0 17.6 0 20 2.3 20 5.4c0 4.1-4 7.6-10 12.1z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'><path d='M10 17.5C4 13 0 9.5 0 5.4 0 2.3 2.4 0 5.4 0 7.4 0 9 1 10 2.6 11 1 12.6 0 14.6 0 17.6 0 20 2.3 20 5.4c0 4.1-4 7.6-10 12.1z'/></svg>") center/contain no-repeat;
  background: linear-gradient(90deg, #FF5F9E var(--f), rgba(255, 244, 224, 0.28) var(--f)); }
.pc-hp { height: 7px; border-radius: 6px; background: rgba(255, 244, 224, 0.18); overflow: hidden; }
.pc-hp i { display: block; height: 100%; width: 100%; border-radius: 6px; background: linear-gradient(90deg, #7ADC7A, #3FAF5C); transition: width 0.5s var(--snap); }
.pc-hp i.warn { background: linear-gradient(90deg, #FFD54F, #F0A500); } .pc-hp i.crit { background: linear-gradient(90deg, #FF8A8A, #E04848); }

/* ---------------------------------------------------------------- action button */
.action-btn { position: fixed; right: calc(var(--safe-r) + 8px); bottom: calc(var(--safe-b) + 8px); width: 104px; height: 104px; border-radius: 50%; z-index: 22; cursor: pointer;
  -webkit-appearance: none; appearance: none; border: 4px solid #fff; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: radial-gradient(circle at 35% 28%, #FFF3B8 0%, #FFD54F 45%, #FFB300 100%); box-shadow: 0 14px 30px -10px rgba(10, 4, 24, 0.8), inset 0 -5px 0 rgba(180, 100, 0, 0.35);
  transform: scale(0); transition: transform 0.45s var(--pop); font-family: var(--font-display); }
.action-btn.show { transform: scale(1); }
.action-btn.hidden { transform: scale(0) !important; }
.action-btn.nudge .ab-icon { animation: abwig 0.8s var(--pop); }
.action-btn:active { transform: scale(0.9); transition-duration: 0.08s; }
.ab-icon { font-size: 36px; line-height: 1; }
.ab-label { font-size: 16px; font-weight: 700; margin-top: 2px; }
@keyframes abwig { 0% { transform: rotate(-18deg) scale(0.6); } 50% { transform: rotate(10deg) scale(1.15); } 100% { transform: none; } }

/* ---------------------------------------------------------------- joystick */
.joy { position: fixed; left: 0; top: 0; z-index: 15; opacity: 0; transition: opacity 0.15s; }
.joy.on { opacity: 1; }
.joy-base { position: absolute; width: 124px; height: 124px; left: -62px; top: -62px; border-radius: 50%; border: 3px solid rgba(255, 244, 224, 0.55); background: rgba(45, 27, 78, 0.28); }
.joy-knob { position: absolute; width: 58px; height: 58px; left: -29px; top: -29px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #FFD54F 70%); box-shadow: 0 6px 14px rgba(10, 4, 24, 0.45); }

/* ---------------------------------------------------------------- dialog */
.dialog { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 6px); width: min(780px, calc(100vw - 24px)); z-index: 30; transform: translate(-50%, 140%); transition: transform 0.5s var(--snap); }
.dialog.open { transform: translate(-50%, 0); }
.dlg-card { position: relative; background: var(--paper); color: var(--ink); border: 4px solid #2D1B4E; border-radius: 22px; padding: 22px 26px 22px; min-height: 118px;
  box-shadow: inset 0 0 0 3px var(--gold), 0 18px 40px -14px rgba(10, 4, 24, 0.8); }
.dialog.has-portrait .dlg-card { padding-left: 132px; }
.dlg-portrait { position: absolute; left: 14px; bottom: 14px; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; z-index: 2; display: none;
  background: radial-gradient(circle at 50% 30%, #FFF8EC, #FFD9E8); border: 4px solid #2D1B4E; box-shadow: inset 0 0 0 3px var(--gold); }
.dialog.has-portrait .dlg-portrait { display: block; animation: portraitpop 0.55s var(--pop); }
.dlg-portrait img { width: 132%; height: 132%; object-fit: cover; object-position: 50% 8%; margin: -4% 0 0 -16%; }
@keyframes portraitpop { from { transform: scale(0.4) rotate(-12deg); } to { transform: none; } }
.dlg-name { position: absolute; top: -18px; left: 22px; padding: 5px 16px; border-radius: 999px; background: var(--nc, var(--magenta)); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 17px; border: 3px solid #2D1B4E; }
.dialog.has-portrait .dlg-name { left: 128px; }
.dlg-text { font-family: var(--font-ui); font-weight: 700; font-size: clamp(18px, 2.4vw, 22px); line-height: 1.45; min-height: 2.9em; padding-right: 40px; }
.dlg-text .w { display: inline-block; white-space: nowrap; }
.dlg-text .ch { display: inline-block; opacity: 0; }
.dlg-text .ch.in { opacity: 1; display: inline-block; animation: chpop 0.28s var(--pop) both; }
.dlg-text .ch.instant { animation: none; }
@keyframes chpop { from { transform: translateY(6px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.dlg-next { position: absolute; right: 22px; bottom: 10px; color: var(--magenta); font-size: 18px; animation: bob 0.8s var(--glide) infinite alternate; }
@keyframes bob { to { transform: translateY(4px); } }
.dlg-speak { position: absolute; right: 14px; top: 12px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(45, 27, 78, 0.3); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.dlg-speak svg { width: 18px; height: 18px; }
.dlg-choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.dlg-choice { -webkit-appearance: none; appearance: none; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 18px; padding: 12px 22px; border-radius: 999px; border: 3px solid #2D1B4E; color: var(--ink);
  background: linear-gradient(180deg, #FFFFFF, #FFE5D9); box-shadow: 0 5px 0 #2D1B4E; animation: choicein 0.45s var(--pop) both; animation-delay: calc(var(--i) * 70ms); }
.dlg-choice:first-child { background: linear-gradient(180deg, #FFE48A, #FFB84D); }
.dlg-choice:active { transform: translateY(4px); box-shadow: 0 1px 0 #2D1B4E; }
@keyframes choicein { from { transform: translateY(14px) scale(0.8); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- toasts, banner, iris, flash */
.toasts { position: fixed; top: calc(var(--safe-t) + 70px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 40; }
.toast { display: flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: rgba(45, 27, 78, 0.9); border: 2px solid var(--gold); color: var(--cream);
  font-family: var(--font-display); font-weight: 600; font-size: 17px; transform: translateY(-20px) scale(0.7); opacity: 0; transition: transform 0.5s var(--pop), opacity 0.3s; box-shadow: 0 10px 24px -10px rgba(10, 4, 24, 0.8); }
.toast.in { transform: none; opacity: 1; } .toast.out { transform: translateY(-14px) scale(0.9); opacity: 0; }
.toast .t-icon { font-size: 20px; }
.toast.heart { border-color: #FF8FC0; } .toast.gold { background: linear-gradient(90deg, #6A4296, #D946A8); }
.zone-banner { position: fixed; left: var(--safe-l); top: calc(var(--safe-t) + 64px); z-index: 18; transform: translateX(-120%); transition: transform 0.7s var(--snap); }
.zone-banner.in { transform: none; }
.zb-card { padding: 12px 26px 12px 18px; border-radius: 0 999px 999px 0; background: linear-gradient(90deg, rgba(45, 27, 78, 0.94), rgba(106, 66, 150, 0.88)); border: 2px solid rgba(255, 213, 79, 0.6); border-left: none; }
.zb-title { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--gold); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.zb-sub { font-size: 14px; opacity: 0.9; }
.iris { position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%; opacity: 0; }
.iris.ready { opacity: 1; }
.soft-flash { position: fixed; inset: 0; z-index: 25; opacity: 0; }

/* ---------------------------------------------------------------- menu */
.menu { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(20, 10, 40, 0); transition: background 0.35s; padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); }
.menu.open { background: rgba(20, 10, 40, 0.66); }
.menu-card { position: relative; width: min(900px, 96vw); height: min(640px, 88vh); display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border: 4px solid #2D1B4E; border-radius: 28px;
  box-shadow: inset 0 0 0 3px var(--gold), 0 30px 60px -20px rgba(10, 4, 24, 0.85); transform: translateY(30px) scale(0.92); opacity: 0; transition: transform 0.5s var(--pop), opacity 0.25s; overflow: hidden; }
.menu.open .menu-card { transform: none; opacity: 1; }
.menu-tabs { display: flex; gap: 6px; padding: 14px 64px 10px 14px; overflow-x: auto; flex: none; }
.menu-tabs button { -webkit-appearance: none; appearance: none; flex: none; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 16px; padding: 9px 14px; border-radius: 999px; border: 2.5px solid #2D1B4E; background: #fff; color: var(--ink); }
.menu-tabs button.on { background: linear-gradient(180deg, #FFE48A, #FFB84D); box-shadow: 0 3px 0 #2D1B4E; }
.menu-close { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid #2D1B4E; background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.menu-close svg { width: 20px; height: 20px; }
.menu-body { flex: 1; overflow-y: auto; padding: 8px 18px 22px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.dex-head { font-family: var(--font-display); font-size: 18px; margin: 4px 2px 10px; }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
.dex-card { -webkit-appearance: none; appearance: none; cursor: pointer; border-radius: 18px; border: 3px solid #2D1B4E; background: #fff; padding: 6px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform 0.3s var(--pop); font-family: var(--font-display); color: var(--ink); }
.dex-card:active { transform: scale(0.94); }
.dex-card.friend { background: radial-gradient(circle at 50% 40%, #fff, color-mix(in srgb, var(--dc) 45%, #fff)); }
.dex-card.unknown .dex-art { filter: brightness(0) opacity(0.25); }
.dex-no { align-self: flex-start; font-size: 12px; opacity: 0.6; }
.dex-art { width: 88px; height: 88px; display: grid; place-items: center; }
.dex-art img { width: 100%; height: 100%; object-fit: contain; }
.dex-name { font-size: 15px; font-weight: 600; }
.dex-detail { margin-top: 14px; }
.dex-detail.in .dd-card { animation: choicein 0.4s var(--pop) both; }
.dd-card { border-radius: 20px; border: 3px solid #2D1B4E; padding: 14px 18px; background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--dc, #FFD54F) 22%, #fff)); }
.dd-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; display: flex; align-items: center; gap: 10px; }
.dd-badge { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--magenta); color: #fff; }
.dd-badge.seen { background: #8a7aa8; }
.dd-text { font-size: 18px; line-height: 1.45; margin-top: 6px; }
.dd-hab { margin-top: 8px; font-size: 15px; opacity: 0.8; }
.partner-sheet { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ps-art { width: min(260px, 40vw); filter: drop-shadow(0 12px 20px rgba(45, 27, 78, 0.3)); }
.ps-info { flex: 1; min-width: 240px; }
.ps-name { font-family: var(--font-display); font-weight: 700; font-size: 30px; } .ps-name span { font-size: 18px; color: var(--magenta); }
.ps-row { font-size: 18px; margin: 6px 0; } .ps-row b { color: #E0406A; letter-spacing: 1px; }
.ps-moves { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.ps-moves span { padding: 7px 14px; border-radius: 999px; border: 2.5px solid #2D1B4E; background: #FFF1D6; font-family: var(--font-display); font-weight: 600; }
.ps-tip { font-size: 16px; padding: 10px 14px; border-radius: 14px; background: #F4E8FF; }
.bag-list, .quest-list { display: flex; flex-direction: column; gap: 10px; }
.bag-item, .quest-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; border: 2.5px solid rgba(45, 27, 78, 0.8); background: #fff; font-size: 17px; }
.bi-icon { font-size: 30px; } .bi-name { font-family: var(--font-display); font-weight: 600; font-size: 19px; } .bi-name b { color: var(--magenta); margin-left: 6px; } .bi-desc { font-size: 15px; opacity: 0.85; }
.quest-row.locked { opacity: 0.45; } .quest-row.now { background: linear-gradient(90deg, #FFF3C4, #fff); border-color: var(--gold-deep); } .q-hint { font-size: 14px; opacity: 0.8; }
.settings { display: flex; flex-direction: column; gap: 16px; font-size: 19px; }
.settings label { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; border-radius: 16px; background: #fff; border: 2.5px solid rgba(45, 27, 78, 0.8); }
.settings input[type=range] { width: 50%; accent-color: var(--magenta); }
.settings input[type=checkbox] { width: 28px; height: 28px; accent-color: var(--magenta); }
.settings select { font-size: 17px; padding: 6px 10px; border-radius: 10px; font-family: var(--font-ui); font-weight: 700; }
.btn-danger { -webkit-appearance: none; appearance: none; cursor: pointer; padding: 12px; border-radius: 999px; border: 2.5px solid #9a2a4a; background: #FFE8EE; color: #9a2a4a; font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.credits { font-size: 14px; opacity: 0.7; text-align: center; line-height: 1.5; }

@media (max-width: 720px) {
  .partner-card { min-width: 0; padding-right: 8px; } .pc-body { display: none; }
  .quest-chip { font-size: 14px; }
  .dialog.has-portrait .dlg-card { padding-left: 22px; padding-top: 30px; }
  .dlg-portrait { width: 72px; height: 72px; left: auto; right: 12px; top: -46px; bottom: auto; }
  .dialog.has-portrait .dlg-name { left: 22px; }
  .action-btn { width: 88px; height: 88px; } .ab-icon { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .dlg-text .ch.in { animation: none; } }

/* ---------------------------------------------------------------- title screen */
.title-screen { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 20px;
  background: radial-gradient(90% 70% at 50% 45%, rgba(30, 18, 54, 0) 40%, rgba(30, 18, 54, 0.55) 100%); opacity: 0; transition: opacity 0.7s var(--glide); cursor: pointer; }
.title-screen.in { opacity: 1; } .title-screen.out { opacity: 0; pointer-events: none; }
.ts-logo { text-align: center; transform: translateY(-4vh); }
.ts-logo h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 7.2vw, 86px); color: #FFE48A; line-height: 1;
  text-shadow: 0 4px 0 #B8567E, 0 8px 0 #6A3A8A, 0 16px 30px rgba(20, 8, 40, 0.6); letter-spacing: 0.01em; }
.ts-logo h1 span { display: inline-block; opacity: 0; transform: translateY(40px) scale(0.4) rotate(-12deg); }
.title-screen.in .ts-logo h1 span { animation: tsl 0.9s var(--pop) forwards; animation-delay: calc(0.35s + var(--i) * 45ms); }
@keyframes tsl { to { opacity: 1; transform: none; } }
.title-screen.in .ts-logo h1 span { --float: calc(var(--i) * 0.13s); }
.ts-sub { margin-top: 12px; font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 2.6vw, 28px); color: var(--cream); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0; animation: fadein 1s 1.4s forwards; text-shadow: 0 2px 10px rgba(20, 8, 40, 0.7); }
.ts-star { width: 84px; height: 84px; margin: 0 auto 10px; background: url(../../shared/star-spin.webp) 0 0 / 2400% 100% no-repeat; animation: bootspin 1.2s steps(24, jump-none) infinite; filter: drop-shadow(0 0 18px rgba(255, 200, 80, 0.8)); }
@keyframes fadein { to { opacity: 1; } }
.ts-card { display: flex; align-items: center; gap: 12px; padding: 10px 20px 10px 10px; border-radius: 999px; background: rgba(45, 27, 78, 0.82); border: 2px solid rgba(255, 213, 79, 0.6); color: var(--cream); font-size: 17px; line-height: 1.35; opacity: 0; animation: fadein 0.8s 1.8s forwards; }
.ts-card img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: radial-gradient(circle, #FFF4E0, #FFB8D4); border: 2px solid var(--gold); }
.ts-card b { color: var(--gold); font-family: var(--font-display); font-weight: 600; font-size: 19px; }
.ts-play { -webkit-appearance: none; appearance: none; cursor: pointer; margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: 28px; padding: 16px 54px; border-radius: 999px; border: 4px solid #fff; color: var(--ink);
  background: radial-gradient(circle at 35% 25%, #FFF3B8, #FFD54F 50%, #FFB300); box-shadow: 0 14px 34px -10px rgba(10, 4, 24, 0.8), inset 0 -5px 0 rgba(180, 100, 0, 0.35);
  opacity: 0; animation: fadein 0.6s 2s forwards, playpulse 1.6s 2.6s var(--glide) infinite; }
@keyframes playpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.ts-hint { font-size: 15px; opacity: 0; animation: fadein 1s 2.6s forwards; color: var(--cream); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.title-screen.out .ts-logo { transform: translateY(-12vh) scale(0.9); transition: transform 0.7s var(--snap); }

/* ---------------------------------------------------------------- letterbox + cinematic title */
.letterbox i { position: fixed; left: 0; right: 0; height: 11vh; background: #140c26; z-index: 26; transition: transform 0.8s var(--snap); }
.letterbox i:first-child { top: 0; transform: translateY(-100%); } .letterbox i:last-child { bottom: 0; transform: translateY(100%); }
.letterbox.on i { transform: none; }
.cine-title { position: fixed; left: 0; right: 0; top: 22vh; z-index: 27; text-align: center; opacity: 0; transition: opacity 0.6s; }
.cine-title.on { opacity: 1; }
.ct-main { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 5.4vw, 64px); color: #FFE9FF; text-shadow: 0 0 24px rgba(255, 160, 220, 0.8), 0 4px 0 #9A4AA8; }
.ct-main span { display: inline-block; opacity: 0; transform: translateY(30px) scale(0.3); }
.cine-title.on .ct-main span { animation: tsl 0.8s var(--pop) forwards; animation-delay: calc(var(--i) * 40ms); }
.ct-sub { margin-top: 10px; font-family: var(--font-display); font-size: clamp(16px, 2.2vw, 24px); color: var(--gold); letter-spacing: 0.15em; opacity: 0; animation: fadein 1s 1.2s forwards; }

/* ---------------------------------------------------------------- battle UI */
#ui .battle-ui { position: fixed; inset: 0; z-index: 24; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
#ui .battle-ui.on { opacity: 1; pointer-events: auto; }
.b-card { position: fixed; min-width: min(300px, 44vw); padding: 10px 16px 12px; border-radius: 18px; background: var(--paper); color: var(--ink); border: 4px solid #2D1B4E; box-shadow: inset 0 0 0 3px var(--gold), 0 12px 26px -12px rgba(10, 4, 24, 0.8); }
.b-enemy { left: calc(var(--safe-l) + 6px); top: calc(var(--safe-t) + 6px); transform: translateX(-130%); transition: transform 0.6s var(--snap); }
.b-mine { right: calc(var(--safe-r) + 6px); bottom: calc(var(--safe-b) + 150px); transform: translateX(130%); transition: transform 0.6s var(--snap) 0.15s; }
.battle-ui.on .b-enemy, .battle-ui.on .b-mine { transform: none; }
.bc-top { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-display); font-weight: 700; font-size: 21px; gap: 12px; }
.bc-lv { font-size: 16px; color: var(--magenta); }
.bc-hp { position: relative; height: 14px; margin-top: 6px; border-radius: 10px; background: #E9DCC4; border: 2.5px solid #2D1B4E; overflow: hidden; }
.bc-hp i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 8px; }
.bc-hp .ghost { background: #FFB3C1; transition: width 0.6s ease-out; }
.bc-hp .fill { background: linear-gradient(180deg, #8BE88B, #3FAF5C); transition: width 0.35s var(--snap); }
.bc-hp .fill.warn { background: linear-gradient(180deg, #FFE07A, #F0A500); } .bc-hp .fill.crit { background: linear-gradient(180deg, #FF9A9A, #E04848); }
.bc-hptext { text-align: right; font-size: 14px; margin-top: 3px; }
.bc-xp { height: 6px; border-radius: 5px; background: #E9DCC4; overflow: hidden; margin-top: 4px; } .bc-xp i { display: block; height: 100%; background: linear-gradient(90deg, #7FC8F8, #3A8AD8); transition: width 0.6s var(--snap); }
.b-bottom { position: fixed; left: var(--safe-l); right: var(--safe-r); bottom: var(--safe-b); display: flex; gap: 10px; align-items: stretch; transform: translateY(130%); transition: transform 0.55s var(--snap) 0.1s; }
.battle-ui.on .b-bottom { transform: none; }
.b-msg { flex: 1; position: relative; min-height: 124px; padding: 18px 22px; border-radius: 22px; background: var(--paper); color: var(--ink); border: 4px solid #2D1B4E; box-shadow: inset 0 0 0 3px var(--gold);
  font-family: var(--font-ui); font-weight: 700; font-size: clamp(19px, 2.5vw, 24px); line-height: 1.4; }
.b-next { position: absolute; right: 18px; bottom: 10px; color: var(--magenta); animation: bob 0.8s var(--glide) infinite alternate; }
.b-cmds, .b-moves { display: none; grid-template-columns: 1fr 1fr; gap: 10px; width: min(460px, 48vw); }
.b-cmds.on, .b-moves.on { display: grid; animation: choicein 0.35s var(--pop); }
.b-cmds button, .b-moves button { -webkit-appearance: none; appearance: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; padding: 8px 12px; border-radius: 18px; border: 3.5px solid #2D1B4E;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 2.1vw, 22px); color: var(--ink); background: linear-gradient(180deg, #FFFFFF, #FFE9DE); box-shadow: 0 5px 0 #2D1B4E; }
.b-cmds button span, .b-moves button span { font-size: 1.3em; }
.b-cmds button:active, .b-moves button:active { transform: translateY(4px); box-shadow: 0 1px 0 #2D1B4E; }
.b-cmds button[data-cmd="fight"] { background: linear-gradient(180deg, #FFE48A, #FFB84D); }
.b-cmds button[data-cmd="befriend"] { background: linear-gradient(180deg, #FFD1E6, #FF9EC8); }
.b-moves button { background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--mc, #FFE48A) 45%, #fff)); }
.b-moves button.back { grid-column: 1 / -1; min-height: 44px; font-size: 17px; background: #fff; }
.b-ring { position: fixed; width: 160px; height: 160px; transform: translate(-50%, -50%) scale(0.4); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.4s var(--pop); z-index: 25; }
.b-ring.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.b-ring svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.35)); }
.b-ring-tip { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap; margin-top: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(45, 27, 78, 0.9); color: var(--cream); font-family: var(--font-display); font-size: 17px; }
.b-pops { position: fixed; inset: 0; pointer-events: none; z-index: 26; }
.b-pop { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-display); font-weight: 700; font-size: 30px; color: #fff; text-shadow: 0 3px 0 #2D1B4E, 0 0 14px rgba(0, 0, 0, 0.4); animation: popup 1.1s var(--snap) forwards; }
.b-pop.crit { color: #FFE066; font-size: 38px; } .b-pop.heal { color: #9FFFC0; } .b-pop.word { color: #FFE9A8; font-size: 34px; } .b-pop.word.big { font-size: 48px; color: #FFB8E0; }
@keyframes popup { 0% { transform: translate(-50%, -20%) scale(0.3); opacity: 0; } 20% { transform: translate(-50%, -70%) scale(1.25); opacity: 1; } 40% { transform: translate(-50%, -80%) scale(1); } 100% { transform: translate(-50%, -150%) scale(1); opacity: 0; } }
.b-newfriend { position: fixed; inset: 0; z-index: 28; display: grid; place-items: center; background: rgba(20, 10, 40, 0); pointer-events: none; transition: background 0.4s; }
.b-newfriend.on { background: rgba(20, 10, 40, 0.55); pointer-events: auto; }
.nf-card { position: relative; width: min(460px, 90vw); padding: 24px 26px; border-radius: 30px; text-align: center; color: var(--ink); background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--dc) 35%, #fff)); border: 4px solid #2D1B4E; box-shadow: inset 0 0 0 3px var(--gold), 0 30px 60px -20px rgba(10, 4, 24, 0.9);
  transform: scale(0.5) rotate(-6deg); opacity: 0; transition: transform 0.6s var(--pop), opacity 0.3s; overflow: hidden; }
.b-newfriend.on .nf-card { transform: none; opacity: 1; }
.nf-burst { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, rgba(255, 213, 79, 0.25) 0 10deg, transparent 10deg 20deg); animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.nf-card img { position: relative; width: 190px; height: 190px; object-fit: contain; animation: bob 1.2s var(--glide) infinite alternate; }
.nf-title { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--magenta); letter-spacing: 0.1em; text-transform: uppercase; }
.nf-name { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 38px; }
.nf-text { position: relative; font-size: 18px; line-height: 1.45; margin-top: 6px; }
.nf-tip { position: relative; margin-top: 12px; font-size: 15px; opacity: 0.85; }
@media (max-width: 720px) {
  .b-bottom { flex-direction: column; } .b-cmds, .b-moves { width: 100%; }
  .b-mine { bottom: calc(var(--safe-b) + 260px); } .b-msg { min-height: 96px; }
  .bc-top { font-size: 17px; }
}

/* ---------------------------------------------------------------- keyboard play (laptop-first)
   Key hints only show on keyboard devices (body.kbd-hints, toggled by Input on key vs touch). */
.b-cmds button, .b-moves button, .dlg-choice { position: relative; }
body.kbd-hints .kfocus { outline: none; box-shadow: 0 5px 0 #2D1B4E, 0 0 0 4px #FFF4E0, 0 0 0 8px #FFB84D !important; transform: translateY(-2px); }
body.kbd-hints .b-cmds button[data-key]::after, body.kbd-hints .b-moves button[data-key]::after, body.kbd-hints .dlg-choice[data-key]::after {
  content: attr(data-key); position: absolute; top: -9px; left: -9px; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box;
  display: grid; place-items: center; border-radius: 7px; background: #2D1B4E; color: #FFF4E0;
  font: 700 13px/1 var(--font-display); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); pointer-events: none; }
.ab-key { display: none; }
body.kbd-hints .ab-key { display: block; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); padding: 3px 8px; border-radius: 7px;
  background: #2D1B4E; color: #FFF4E0; font: 700 12px/1 var(--font-display); letter-spacing: 0.02em; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); pointer-events: none; }