:root {
  --ink: #3c3151;
  --muted: #807391;
  --cream: #fffaf1;
  --paper: #fffefb;
  --pink: #ff739d;
  --pink-dark: #e84d80;
  --yellow: #ffd85c;
  --mint: #70dfb5;
  --sky: #76cdf6;
  --purple: #9b7ae8;
  --red: #ff6b64;
  --line: rgba(70, 50, 90, .12);
  --shadow: 0 18px 45px rgba(87, 48, 102, .16);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-width: 320px; min-height: 100%; background: #ffeef3; }

body {
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Yu Gothic UI", "Hiragino Maru Gothic ProN", Meiryo, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

button { color: inherit; font: inherit; }
button:not(:disabled) { cursor: pointer; }
button:focus-visible { outline: 4px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px var(--purple); }
.hidden { display: none !important; }

.app {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 28%, rgba(255,255,255,.7) 0 3px, transparent 4px),
    linear-gradient(145deg, #fff1b8 0%, #ffe7ef 38%, #e8e0ff 100%);
  background-size: 90px 90px, 130px 130px, auto;
}

.app::before, .app::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

.app::before { left: -210px; top: 30%; background: rgba(255, 169, 188, .22); }
.app::after { right: -240px; bottom: -130px; background: rgba(118, 205, 246, .22); }

.topbar {
  position: relative;
  z-index: 30;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: clamp(15px, 3vw, 42px);
  padding: 10px clamp(14px, 3.5vw, 55px);
  border-bottom: 3px solid rgba(255,255,255,.7);
  background: rgba(255, 250, 246, .82);
  box-shadow: 0 5px 20px rgba(91, 45, 91, .08);
  backdrop-filter: blur(18px);
}

.brand { flex: 0 0 auto; display: flex; align-items: center; gap: 11px; padding: 0; border: 0; background: transparent; text-align: left; }
.brand > span:last-child { display: flex; flex-direction: column; }
.brand b { color: var(--pink-dark); font-size: 16px; font-weight: 900; letter-spacing: .02em; }
.brand small { margin-top: 1px; color: #a58ca7; font: 900 8px/1.3 system-ui, sans-serif; letter-spacing: .17em; }
.brand-face { position: relative; width: 49px; height: 44px; border: 3px solid #4b3c56; border-radius: 47% 47% 50% 50%; background: #fff7dc; box-shadow: inset 0 -7px rgba(255,210,109,.3); }
.brand-face::before, .brand-face::after { content: ""; position: absolute; z-index: -1; top: 1px; width: 18px; height: 29px; border: 3px solid #4b3c56; background: #e9b76c; }
.brand-face::before { left: -9px; border-radius: 70% 30% 60% 55%; transform: rotate(17deg); }
.brand-face::after { right: -9px; border-radius: 30% 70% 55% 60%; transform: rotate(-17deg); }
.brand-face i::before, .brand-face i::after { content: ""; position: absolute; top: 17px; width: 5px; height: 7px; border-radius: 50%; background: #4b3c56; }
.brand-face i::before { left: 12px; }
.brand-face i::after { right: 12px; }
.brand-face i { position: absolute; inset: 0; }
.brand-face i { background: radial-gradient(circle at 50% 65%, #ff8da9 0 3px, transparent 4px); }

.profile { flex: 1; display: flex; justify-content: center; gap: clamp(18px, 5vw, 65px); }
.profile > span { display: flex; flex-direction: column; min-width: 110px; }
.profile small { color: #9a889f; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.profile b { margin-top: 2px; font: 900 20px/1.1 system-ui, sans-serif; }
.profile em { font-style: normal; }
.profile i { color: #b4a5b7; font-size: 11px; font-style: normal; }
.profile > span:last-child b { color: #f0aa17; }

.header-actions { display: flex; gap: 8px; }
.circle-button { width: 42px; height: 42px; border: 2px solid rgba(91,64,105,.13); border-radius: 50%; background: #fff; box-shadow: 0 5px 12px rgba(75,48,94,.08); font-weight: 1000; transition: .18s; }
.circle-button:hover { transform: translateY(-2px) rotate(-4deg); border-color: var(--pink); }

.screen { position: relative; z-index: 2; }
.title-screen { min-height: calc(100dvh - 76px); display: grid; grid-template-columns: minmax(360px, .92fr) minmax(420px, 1.08fr); align-items: center; gap: 34px; max-width: 1400px; margin: auto; padding: 50px clamp(22px, 5vw, 76px) 150px; }
.title-copy { position: relative; z-index: 3; max-width: 610px; }
.eyebrow { margin: 0; color: #86758f; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.eyebrow span { display: inline-block; margin-right: 7px; padding: 6px 10px; border-radius: 20px; color: #fff; background: var(--pink); font: 900 9px/1 system-ui, sans-serif; letter-spacing: .13em; box-shadow: 0 5px 13px rgba(232,77,128,.2); }
.title-copy h1 { margin: 15px 0 13px; font-size: clamp(58px, 7vw, 98px); line-height: .83; letter-spacing: -.09em; transform: rotate(-2deg); }
.title-copy h1 span { display: block; padding-left: 5px; color: #554366; font-size: .57em; letter-spacing: .02em; }
.title-copy h1 b { color: transparent; background: linear-gradient(108deg, #ff548d 10%, #ff8f5b 52%, #efb828 90%); background-clip: text; -webkit-background-clip: text; filter: drop-shadow(0 7px 0 #fff) drop-shadow(0 12px 13px rgba(172,76,96,.16)); }
.lead { color: #796a84; font-size: clamp(14px, 1.4vw, 19px); line-height: 1.8; }
.lead strong { color: var(--ink); font-weight: 900; }

.title-features { display: flex; gap: 9px; margin: 23px 0; }
.title-features > span { display: grid; grid-template-columns: 32px auto; grid-template-rows: auto auto; min-width: 105px; padding: 10px 12px; border: 2px solid rgba(255,255,255,.9); border-radius: 16px; background: rgba(255,255,255,.62); box-shadow: 0 8px 22px rgba(87,57,105,.08); }
.title-features i { grid-row: 1/3; align-self: center; font-size: 23px; font-style: normal; }
.title-features b { font: 1000 18px/1.1 system-ui, sans-serif; }
.title-features small { margin-top: 2px; color: #9a879e; font-size: 9px; font-weight: 900; }

.title-actions { display: flex; gap: 10px; align-items: stretch; }
.primary-button, .secondary-button { border-radius: 18px; font-weight: 900; transition: transform .16s, filter .16s, box-shadow .16s; }
.primary-button:hover, .secondary-button:hover { transform: translateY(-3px); filter: brightness(1.03); }
.primary-button:active, .secondary-button:active { transform: translateY(1px) scale(.98); }
.primary-button { min-width: 250px; min-height: 66px; display: grid; grid-template-columns: 36px auto; grid-template-rows: auto auto; align-items: center; padding: 11px 26px 10px 18px; color: #fff; border: 0; background: linear-gradient(120deg, var(--pink), #ff936c); box-shadow: 0 9px 0 #c93e6b, 0 17px 28px rgba(211,57,109,.23); text-shadow: 0 1px 1px rgba(104,21,61,.2); }
.primary-button > span { grid-row: 1/3; font-size: 23px; }
.primary-button b { align-self: end; font-size: 17px; }
.primary-button small { align-self: start; opacity: .84; font: 800 9px/1.4 system-ui, sans-serif; letter-spacing: .08em; }
.secondary-button { min-width: 170px; padding: 11px 18px; border: 2px solid rgba(94,62,106,.13); background: rgba(255,255,255,.84); box-shadow: 0 8px 0 rgba(155,122,232,.18), 0 13px 22px rgba(84,57,96,.09); }
.secondary-button span { margin-right: 4px; font-size: 18px; }
.secondary-button b { font-size: 13px; }
.primary-button.compact { min-width: 220px; min-height: 58px; grid-template-columns: 30px auto; border-radius: 15px; box-shadow: 0 7px 0 #c93e6b, 0 14px 22px rgba(211,57,109,.2); }

.record-strip { width: min(480px, 100%); display: flex; align-items: center; justify-content: space-around; margin-top: 28px; padding: 13px 17px; border: 2px dashed rgba(91,58,105,.13); border-radius: 17px; background: rgba(255,255,255,.44); }
.record-strip div { text-align: center; }
.record-strip small { display: block; color: #99889f; font-size: 9px; font-weight: 900; }
.record-strip b { font: 1000 17px/1.5 system-ui, sans-serif; }
.record-strip > i { width: 1px; height: 25px; background: var(--line); }

.world-card { position: relative; z-index: 3; overflow: hidden; padding: 22px; border: 4px solid #fff; border-radius: 30px; background: rgba(255,255,255,.78); box-shadow: var(--shadow), inset 0 0 0 1px rgba(104,70,110,.08); transform: rotate(1deg); }
.world-card::before { content: ""; position: absolute; inset: 0; opacity: .26; pointer-events: none; background-image: radial-gradient(#f2a1b7 1px, transparent 1px); background-size: 16px 16px; }
.world-head { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.world-head p { margin: 0; display: flex; flex-direction: column; }
.world-head small { color: var(--pink); font: 900 9px/1 system-ui, sans-serif; letter-spacing: .16em; }
.world-head b { margin-top: 4px; font-size: 20px; font-weight: 1000; }
.world-head > span { padding: 7px 10px; border-radius: 20px; color: #fff; background: #6fcfb1; font: 900 9px/1 system-ui, sans-serif; letter-spacing: .08em; }

.stage-map { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; padding: 18px; border-radius: 22px; background: linear-gradient(145deg, #d8f2ff, #efffdc 53%, #fff0c8); box-shadow: inset 0 0 0 2px rgba(94,97,112,.07); }
.stage-map::before { content: ""; position: absolute; inset: 20% 7%; border: 4px dashed rgba(255,255,255,.9); border-radius: 50%; transform: rotate(-8deg); }
.stage-button { position: relative; z-index: 2; min-height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 7px 4px; border: 3px solid #fff; border-radius: 18px; background: var(--stage-color, #ff9fbc); box-shadow: 0 6px 0 var(--stage-shadow, #df7093), 0 9px 12px rgba(62,51,74,.1); transition: .15s; }
.stage-button:not(:disabled):hover { transform: translateY(-3px) rotate(-2deg); filter: saturate(1.1); }
.stage-button.current { animation: stageBounce 1.4s ease-in-out infinite; box-shadow: 0 6px 0 var(--stage-shadow, #df7093), 0 0 0 5px rgba(255,216,92,.52); }
.stage-button.locked { color: #968d9c; border-color: rgba(255,255,255,.7); background: #d7d0da; box-shadow: 0 6px 0 #afa5b3; filter: grayscale(.4); }
.stage-button .stage-emoji { font-size: 25px; filter: drop-shadow(0 2px 0 rgba(255,255,255,.7)); }
.stage-button b { font: 1000 12px/1.1 system-ui, sans-serif; }
.stage-button small { width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; font-weight: 900; }
.stage-button .map-stars { color: #fff7a0; height: 11px; font-size: 10px; letter-spacing: 1px; text-shadow: 0 1px 1px rgba(89,62,50,.25); }
@keyframes stageBounce { 50% { transform: translateY(-4px); } }
.map-tip { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 13px; padding: 10px 12px; border-radius: 14px; background: rgba(255,241,175,.8); }
.map-tip > span { font-size: 22px; }
.map-tip p { margin: 0; display: flex; flex-direction: column; }
.map-tip b { font-size: 11px; }
.map-tip small { margin-top: 2px; color: #8c7d74; font-size: 9px; }

.parade { position: absolute; z-index: 2; left: 5%; right: 5%; bottom: 20px; height: 110px; display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 4vw, 62px); pointer-events: none; }
.parade::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 4px; height: 17px; border-radius: 50%; background: rgba(126,84,121,.11); filter: blur(7px); }
.parade-dog { position: relative; width: 74px; height: 65px; border: 3px solid #4a3d53; border-radius: 45% 45% 48% 48%; background: var(--fur, #fff5d8); box-shadow: inset 0 -10px rgba(255,177,101,.2), 0 8px 0 rgba(112,76,108,.1); animation: dogMarch .72s ease-in-out infinite alternate; }
.parade-dog::before, .parade-dog::after { content: ""; position: absolute; z-index: -1; top: 3px; width: 28px; height: 40px; border: 3px solid #4a3d53; background: var(--ear, var(--fur)); }
.parade-dog::before { left: -15px; border-radius: 70% 25% 60% 55%; transform: rotate(15deg); }
.parade-dog::after { right: -15px; border-radius: 25% 70% 55% 60%; transform: rotate(-15deg); }
.parade-dog i::before, .parade-dog i::after { content: ""; position: absolute; top: 21px; width: 7px; height: 9px; border-radius: 50%; background: #4a3d53; }
.parade-dog i::before { left: 18px; }
.parade-dog i::after { right: 18px; }
.parade-dog i { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 61%, #fffaf0 0 13px, transparent 14px), radial-gradient(ellipse at 50% 61%, #4a3d53 0 4px, transparent 5px); }
.parade-dog b { position: absolute; left: 8px; right: 8px; bottom: -6px; height: 18px; border: 3px solid #4a3d53; border-radius: 9px; background: var(--scarf, var(--pink)); }
.parade-dog span { position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%); font-size: 10px; font-weight: 1000; white-space: nowrap; }
.parade-dog:nth-child(even) { animation-delay: -.4s; }
.dog-a { --fur: #fff3d6; --ear: #e9c37f; --scarf: #ff739d; }
.dog-b { --fur: #b7885e; --ear: #805d47; --scarf: #75d6b0; width: 86px; height: 76px; }
.dog-c { --fur: #d5efff; --ear: #91bfdd; --scarf: #58aceb; }
.dog-d { --fur: #ffcfe0; --ear: #e993b3; --scarf: #a17be7; }
.dog-e { --fur: #f4ad55; --ear: #9d6339; --scarf: #ea5c58; width: 82px; height: 73px; }
.dog-f { --fur: #ddd0ff; --ear: #9c85ce; --scarf: #7354bd; }
@keyframes dogMarch { to { transform: translateY(-7px) rotate(1deg); } }

/* Battle */
.battle-screen { min-height: calc(100dvh - 76px); padding: 13px clamp(10px, 2vw, 28px) 22px; background: linear-gradient(160deg, rgba(255,255,255,.43), rgba(255,232,205,.38)); }
.battle-hud { max-width: 1460px; margin: 0 auto 10px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.base-meter { display: flex; align-items: center; gap: 9px; min-width: 0; }
.base-meter > span { font-size: 27px; }
.base-meter p { flex: 1; min-width: 0; margin: 0; }
.base-meter small { display: block; margin-bottom: 3px; overflow: hidden; color: #7d7088; font-size: 9px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.base-meter i { display: block; overflow: hidden; height: 13px; border: 3px solid #fff; border-radius: 20px; background: rgba(69,49,78,.16); box-shadow: 0 2px 6px rgba(67,44,81,.12); }
.base-meter i b { display: block; width: 100%; height: 100%; border-radius: 20px; background: linear-gradient(90deg, #68d7ae, #9bea7a); transition: width .3s; }
.enemy-meter i b { margin-left: auto; background: linear-gradient(90deg, #ff846f, #ff5d88); }
.base-meter strong { min-width: 42px; font: 1000 13px/1 system-ui, sans-serif; }
.enemy-meter { text-align: right; }
.stage-chip { min-width: 210px; text-align: center; padding: 7px 18px; border: 3px solid #fff; border-radius: 17px; background: rgba(255,255,255,.78); box-shadow: 0 5px 13px rgba(75,53,90,.09); }
.stage-chip small { display: block; color: var(--pink); font: 900 9px/1 system-ui, sans-serif; letter-spacing: .12em; }
.stage-chip b { display: block; margin-top: 3px; font-size: 13px; }
.stage-chip span { display: block; color: #8d7e94; font: 800 10px/1.2 system-ui, sans-serif; }

.battle-layout { max-width: 1460px; margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; }
.field-card, .unit-panel { border: 3px solid #fff; border-radius: 24px; background: rgba(255,255,255,.78); box-shadow: 0 13px 30px rgba(81,52,96,.13); }
.field-card { overflow: hidden; }
.canvas-wrap { position: relative; overflow: hidden; background: #bdeaff; }
#gameCanvas { width: 100%; height: auto; max-height: calc(100dvh - 260px); display: block; touch-action: none; }
.canvas-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 5px solid rgba(255,255,255,.38); }
.wave-banner { position: absolute; top: 16%; left: 50%; min-width: 285px; padding: 12px 24px; transform: translateX(-50%) rotate(-2deg); text-align: center; border: 4px solid #fff; border-radius: 19px; color: #fff; background: linear-gradient(120deg, #ff6c96, #ff9b62); box-shadow: 0 7px 0 rgba(171,54,98,.32), 0 13px 27px rgba(90,47,86,.19); animation: bannerPop .38s cubic-bezier(.18,.89,.32,1.28); }
.wave-banner small { display: block; font: 900 9px/1 system-ui, sans-serif; letter-spacing: .17em; }
.wave-banner b { display: block; margin-top: 3px; font-size: 17px; }
@keyframes bannerPop { from { opacity: 0; transform: translateX(-50%) scale(.45) rotate(-7deg); } }
.pause-panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background: rgba(63,44,83,.72); backdrop-filter: blur(5px); }
.pause-panel span { display: grid; place-items: center; width: 65px; height: 65px; border: 4px solid #fff; border-radius: 50%; font: 1000 25px/1 system-ui, sans-serif; }
.pause-panel b { margin-top: 11px; font-size: 23px; }
.pause-panel small { margin-top: 3px; opacity: .82; }
.field-message { position: absolute; left: 50%; bottom: 13px; max-width: 80%; padding: 7px 15px; transform: translateX(-50%); border-radius: 20px; color: #fff; background: rgba(62,46,77,.77); font-size: 10px; font-weight: 900; text-align: center; pointer-events: none; transition: opacity .3s; }

.resource-row { min-height: 79px; display: grid; grid-template-columns: 1fr auto 1.1fr auto; align-items: center; gap: 10px; padding: 10px 13px; }
.fish-meter { display: flex; align-items: center; gap: 8px; }
.fish-meter > span { font-size: 30px; animation: fishWiggle 2s ease-in-out infinite; }
@keyframes fishWiggle { 50% { transform: rotate(-8deg) translateY(-2px); } }
.fish-meter p { margin: 0; }
.fish-meter small { display: block; color: #8c7b91; font-size: 9px; font-weight: 900; }
.fish-meter b { font: 1000 18px/1.2 system-ui, sans-serif; }
.fish-meter em, .fish-meter i { font-style: normal; }
.fish-meter em { color: #438bac; }
.fish-meter i { color: #9f91a4; font-size: 11px; }
.wallet-button { display: grid; grid-template-columns: 28px auto auto; align-items: center; gap: 7px; padding: 8px 10px; border: 2px solid #fff; border-radius: 14px; background: linear-gradient(135deg, #e5fbff, #ddf7ec); box-shadow: 0 4px 0 #b5dcd5; }
.wallet-button > span { font-size: 19px; }
.wallet-button p { margin: 0; text-align: left; }
.wallet-button b { display: block; font-size: 10px; }
.wallet-button small { display: block; color: #499477; font-size: 8px; font-weight: 900; }
.wallet-button > em { font-size: 9px; font-style: normal; font-weight: 1000; }
.cheer-meter { min-width: 120px; }
.cheer-meter small { display: block; color: #8a7b91; font-size: 9px; font-weight: 900; }
.cheer-meter i { display: block; overflow: hidden; height: 12px; margin-top: 3px; border: 2px solid #e7dceb; border-radius: 20px; background: #eee8f0; }
.cheer-meter i b { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #ff6d9d, #ffcf55, #70ddb0, #72c4f4, #a87bea); transition: width .2s; }
.cheer-meter strong { display: block; margin-top: 2px; color: var(--purple); font: 1000 10px/1 system-ui, sans-serif; }
.rainbow-button { display: grid; grid-template-columns: 34px auto auto; align-items: center; gap: 6px; padding: 8px 10px; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(120deg, #f8578b, #f5b64b 34%, #56cba2 65%, #8a6ee7); box-shadow: 0 5px 0 #7460b3, 0 8px 17px rgba(100,70,145,.2); }
.rainbow-button:disabled { filter: grayscale(.8); opacity: .5; box-shadow: 0 4px 0 #a79dad; }
.rainbow-button > span { font-size: 25px; }
.rainbow-button p { margin: 0; text-align: left; }
.rainbow-button b { display: block; font-size: 10px; }
.rainbow-button small { display: block; font-size: 7px; font-weight: 800; }
.rainbow-button kbd { opacity: .75; font: 900 8px/1 system-ui, sans-serif; }

.unit-panel { align-self: start; padding: 15px; }
.unit-panel-head { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 2px 12px; }
.unit-panel-head p { margin: 0; display: flex; flex-direction: column; }
.unit-panel-head small { color: var(--pink); font: 900 8px/1 system-ui, sans-serif; letter-spacing: .14em; }
.unit-panel-head b { margin-top: 4px; font-size: 17px; }
.unit-panel-head > span { color: #99889e; font-size: 8px; font-weight: 900; }
.unit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.unit-card { position: relative; overflow: hidden; min-height: 96px; display: grid; grid-template-columns: 52px 1fr; grid-template-rows: 1fr auto; align-items: center; gap: 2px 7px; padding: 8px; border: 2px solid #fff; border-radius: 16px; background: linear-gradient(145deg, var(--unit-pale), #fff); box-shadow: 0 5px 0 var(--unit-shadow), 0 8px 13px rgba(70,49,81,.1); transition: .14s; touch-action: manipulation; }
.unit-card:not(:disabled):hover { transform: translateY(-2px); filter: saturate(1.08); }
.unit-card:not(:disabled):active { transform: translateY(3px); box-shadow: 0 2px 0 var(--unit-shadow); }
.unit-card.unaffordable { filter: saturate(.55); opacity: .67; }
.unit-card.locked { filter: grayscale(.9); opacity: .58; }
.unit-card .unit-face { grid-row: 1/3; position: relative; width: 50px; height: 47px; display: grid; place-items: center; border: 3px solid #4c3e56; border-radius: 45% 45% 48% 48%; background: var(--unit-color); font-size: 23px; }
.unit-card .unit-face::before, .unit-card .unit-face::after { content: ""; position: absolute; z-index: -1; top: 4px; width: 17px; height: 27px; border: 3px solid #4c3e56; background: var(--unit-shadow); }
.unit-card .unit-face::before { left: -10px; border-radius: 75% 25% 65% 50%; transform: rotate(14deg); }
.unit-card .unit-face::after { right: -10px; border-radius: 25% 75% 50% 65%; transform: rotate(-14deg); }
.unit-card .unit-copy { min-width: 0; display: flex; flex-direction: column; text-align: left; }
.unit-card .unit-copy b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.unit-card .unit-copy small { color: #887990; font-size: 8px; font-weight: 800; }
.unit-card .unit-price { justify-self: start; padding: 3px 7px; border-radius: 10px; color: #287a9e; background: rgba(255,255,255,.74); font: 1000 10px/1 system-ui, sans-serif; }
.unit-card .key { position: absolute; top: 4px; right: 6px; color: rgba(66,47,77,.35); font: 1000 9px/1 system-ui, sans-serif; }
.cooldown-cover { position: absolute; inset: auto 0 0; height: 0; display: grid; place-items: center; color: #fff; background: rgba(72,51,84,.74); transition: height .1s linear; pointer-events: none; }
.cooldown-cover b { font: 1000 12px/1 system-ui, sans-serif; }
.unit-card .lock-copy { grid-column: 2; font-size: 9px; font-weight: 900; }

.item-box { margin-top: 14px; padding-top: 12px; border-top: 2px dashed rgba(95,67,107,.14); }
.item-box-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 8px; }
.item-box-head b { font-size: 11px; }
.item-box-head small { color: #9a899f; font: 900 8px/1 system-ui, sans-serif; }
.item-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.item-card { position: relative; min-height: 58px; display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 5px; padding: 7px; border: 2px solid #fff; border-radius: 12px; background: linear-gradient(145deg, #fff, var(--item-color)); box-shadow: 0 3px 0 rgba(83,61,91,.32); transition: .14s; }
.item-card:not(:disabled):hover { transform: translateY(-2px); }
.item-card:disabled { filter: grayscale(.75); opacity: .52; }
.item-card > span { font-size: 23px; }
.item-card p { min-width: 0; margin: 0; text-align: left; }
.item-card p b { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.item-card p small { display: block; overflow: hidden; color: #89798f; font-size: 7px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.item-card em { color: var(--item-color); font: 1000 11px/1 system-ui, sans-serif; font-style: normal; }
.item-card kbd { position: absolute; top: 3px; right: 4px; color: rgba(64,47,74,.38); font: 900 7px/1 system-ui, sans-serif; }

.battle-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 13px; }
.battle-controls button { min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 13px; background: #f7f1fb; box-shadow: 0 4px 0 #d6c7dd; }
.battle-controls button span { font-size: 16px; }
.battle-controls button b { font-size: 9px; }
.battle-controls button small { color: #98889e; font-size: 7px; font-weight: 900; }
.control-tip { margin: 12px 2px 0; color: #93849a; font-size: 9px; font-weight: 700; line-height: 1.55; }

/* Modals */
.overlay { position: fixed; z-index: 100; inset: 0; overflow-y: auto; display: grid; place-items: center; padding: 28px 15px; background: rgba(68,46,79,.62); backdrop-filter: blur(9px); }
.modal { position: relative; width: min(720px, 100%); padding: 34px; border: 5px solid #fff; border-radius: 30px; background: var(--paper); box-shadow: 0 24px 70px rgba(44,27,57,.33), inset 0 0 0 2px rgba(109,77,115,.06); animation: modalPop .25s cubic-bezier(.18,.89,.32,1.2); }
@keyframes modalPop { from { opacity: 0; transform: scale(.85) translateY(20px); } }
.modal::before { content: ""; position: absolute; inset: 0; border-radius: 24px; opacity: .2; pointer-events: none; background-image: radial-gradient(#f39db4 1px, transparent 1px); background-size: 18px 18px; }
.modal > * { position: relative; }
.modal h2 { margin: 11px 0 7px; color: var(--ink); font-size: clamp(25px, 4vw, 37px); font-weight: 1000; letter-spacing: -.04em; }
.modal-lead { margin: 0; color: #85758c; font-size: 12px; line-height: 1.7; }
.close-button { position: absolute; z-index: 4; top: 15px; right: 15px; width: 42px; height: 42px; border: 2px solid #eadfea; border-radius: 50%; background: #fff; font-size: 22px; font-weight: 900; box-shadow: 0 4px 10px rgba(71,47,79,.1); }
.team-cookie { position: absolute; top: 37px; right: 78px; padding: 8px 12px; border-radius: 14px; background: #fff1bc; color: #856528; font-size: 10px; font-weight: 900; }
.team-cookie b { margin-left: 5px; font: 1000 15px/1 system-ui, sans-serif; }
.squad-builder { margin-top: 18px; padding: 13px; border-radius: 19px; background: linear-gradient(135deg, #fff1c7, #ffe6ef); box-shadow: inset 0 0 0 2px #fff; }
.squad-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 10px; }
.squad-heading p { margin: 0; display: flex; flex-direction: column; }
.squad-heading small { color: var(--pink); font: 900 8px/1 system-ui, sans-serif; letter-spacing: .15em; }
.squad-heading b { margin-top: 3px; font-size: 15px; }
.squad-heading > span { color: #8e7d91; font-size: 8px; font-weight: 800; }
.squad-picker { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.squad-dog { min-width: 0; padding: 7px 2px 5px; border: 2px solid transparent; border-radius: 13px; background: rgba(255,255,255,.7); box-shadow: 0 3px 0 rgba(91,64,101,.11); }
.squad-dog span, .squad-dog b, .squad-dog small { display: block; }
.squad-dog span { font-size: 20px; }
.squad-dog b { margin-top: 2px; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.squad-dog small { color: #9a899e; font-size: 7px; font-weight: 900; }
.squad-dog.selected { border-color: var(--pink); background: #fff; box-shadow: 0 3px 0 #e7658d, 0 0 0 3px rgba(255,115,157,.12); transform: translateY(-1px); }
.squad-dog.selected small { color: var(--pink-dark); }
.squad-dog.pending { border-color: #f0ac22; background: #fff7c7; box-shadow: 0 3px 0 #cc8c18, 0 0 0 4px rgba(255,216,92,.34); animation: squadPulse .7s ease-in-out infinite alternate; }
.squad-dog.pending small { color: #a16b08; }
.squad-dog.replaceable { border-color: #75bfe8; background: #eef9ff; box-shadow: 0 3px 0 #559ac3; }
.squad-dog.replaceable small { color: #32799e; }
.squad-dog.locked { filter: grayscale(1); opacity: .46; }
@keyframes squadPulse { to { transform: translateY(-3px) scale(1.03); } }
.upgrade-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
.upgrade-card { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 10px; padding: 12px; border: 2px solid #fff; border-radius: 18px; background: linear-gradient(140deg, var(--unit-pale), #fff); box-shadow: 0 5px 13px rgba(70,47,82,.08); }
.upgrade-card.locked { filter: grayscale(.85); opacity: .58; }
.upgrade-avatar { width: 55px; height: 55px; display: grid; place-items: center; border: 3px solid #4c3e56; border-radius: 44% 44% 50% 50%; background: var(--unit-color); font-size: 25px; }
.upgrade-copy { min-width: 0; display: flex; flex-direction: column; }
.upgrade-copy b { font-size: 13px; }
.upgrade-copy small { color: #8f7f95; font-size: 8px; font-weight: 800; }
.level-pips { display: flex; gap: 2px; margin-top: 5px; }
.level-pips i { width: 9px; height: 5px; border-radius: 4px; background: #e3dae5; }
.level-pips i.on { background: var(--pink); }
.upgrade-button { min-width: 66px; padding: 8px 7px; border: 0; border-radius: 12px; color: #fff; background: var(--purple); box-shadow: 0 4px 0 #7255b4; }
.upgrade-button:disabled { color: #988f9c; background: #ddd6df; box-shadow: 0 4px 0 #bbb1bf; }
.upgrade-button b, .upgrade-button small { display: block; }
.upgrade-button b { font-size: 9px; }
.upgrade-button small { margin-top: 2px; font-size: 8px; font-weight: 900; }
.save-note { margin: 17px 0 0; color: #9c8da1; font-size: 9px; text-align: center; }

.how-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 19px; }
.how-grid article { position: relative; min-height: 128px; padding: 17px 16px 13px 55px; border: 2px solid #fff; border-radius: 18px; background: linear-gradient(140deg, #fff5d2, #fff); box-shadow: 0 5px 12px rgba(70,47,80,.07); }
.how-grid article:nth-child(2) { background: linear-gradient(140deg, #ddf8ee, #fff); }
.how-grid article:nth-child(3) { background: linear-gradient(140deg, #e3f3ff, #fff); }
.how-grid article:nth-child(4) { background: linear-gradient(140deg, #f2e6ff, #fff); }
.how-grid article > span { position: absolute; left: 14px; top: 15px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: var(--pink); font: 1000 14px/1 system-ui, sans-serif; }
.how-grid article b { font-size: 14px; }
.how-grid article p { margin: 6px 0 0; color: #7f7186; font-size: 10px; font-weight: 700; line-height: 1.65; }
.help-note { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 6px 9px; align-items: center; margin: 14px 0 20px; padding: 10px 13px; border-radius: 13px; background: #fff0f4; font-size: 9px; }
.help-note b { color: var(--pink-dark); }
.help-modal .primary-button { margin: auto; }

.stage-modal { width: min(580px, 100%); padding-top: 140px; text-align: center; }
.stage-illustration { position: absolute; left: 0; right: 0; top: 0; height: 125px; overflow: hidden; border-radius: 24px 24px 45% 45%; background: linear-gradient(#99ddff 0 63%, #8fdfa1 64%); }
.stage-illustration > span { position: absolute; z-index: 2; left: 50%; top: 30px; transform: translateX(-50%); font-size: 56px; filter: drop-shadow(0 6px 0 rgba(255,255,255,.4)); }
.stage-illustration::before, .stage-illustration::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.83); }
.stage-illustration::before { width: 100px; height: 29px; left: 12%; top: 25px; box-shadow: 250px 28px rgba(255,255,255,.74); }
.stage-illustration::after { left: -10%; right: -10%; bottom: -50px; height: 100px; background: rgba(61,176,102,.27); }
.stage-modal > p:not(.eyebrow) { color: #827389; font-size: 12px; }
.stage-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0 23px; }
.stage-info div { padding: 11px 7px; border-radius: 14px; background: #f7f0f5; }
.stage-info small { display: block; color: #9a899e; font-size: 8px; font-weight: 900; }
.stage-info b { display: block; margin-top: 5px; font-size: 10px; }
.stage-info div:first-child b { color: #f0ac22; letter-spacing: 1px; }
.stage-squad { margin: -10px 0 20px; padding: 10px; border-radius: 15px; background: #fff4d6; }
.stage-squad > small { display: block; margin-bottom: 7px; color: #907f8d; font-size: 8px; font-weight: 900; }
.stage-squad > div { display: flex; justify-content: center; gap: 6px; }
.stage-squad span { min-width: 50px; padding: 5px; border: 2px solid #fff; border-radius: 11px; background: var(--unit-pale); }
.stage-squad i, .stage-squad b { display: block; }
.stage-squad i { font-size: 17px; font-style: normal; }
.stage-squad b { margin-top: 2px; font-size: 7px; }
.stage-modal .primary-button { margin: auto; }

.result-modal { width: min(610px, 100%); text-align: center; padding-top: 102px; }
.result-burst { position: absolute; left: 50%; top: -38px; width: 140px; height: 140px; transform: translateX(-50%); display: grid; place-items: center; }
.result-burst::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: linear-gradient(140deg, #ffe76d, #ff889f); box-shadow: 0 0 0 8px #fff, 0 9px 25px rgba(149,73,85,.23); }
.result-burst > span { position: relative; z-index: 2; font-size: 61px; animation: trophyBounce .8s ease-in-out infinite alternate; }
.result-burst i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); box-shadow: 70px 40px #70d8ae, -67px 55px #74c8f1, 52px 106px #9b7ae8; }
.result-burst i:nth-child(2) { transform: rotate(60deg); }
.result-burst i:nth-child(3) { transform: rotate(120deg); }
@keyframes trophyBounce { to { transform: translateY(-7px) rotate(3deg); } }
.result-modal > p:not(.eyebrow) { margin: 5px auto 8px; max-width: 440px; color: #85768c; font-size: 12px; line-height: 1.65; }
.result-stars { min-height: 50px; color: #f7ba28; font-size: 42px; letter-spacing: 7px; text-shadow: 0 3px 0 #d68b28; }
.result-reward { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 15px 0; }
.result-reward div { padding: 12px 6px; border-radius: 15px; background: #f7f0f6; }
.result-reward small { display: block; color: #99899f; font-size: 8px; font-weight: 900; }
.result-reward b { display: block; margin-top: 5px; font: 1000 14px/1 system-ui, sans-serif; }
.unlock-card { display: flex; align-items: center; gap: 12px; margin: 11px 0; padding: 10px 16px; border: 2px solid #fff; border-radius: 16px; background: linear-gradient(120deg, #fff1a6, #ffe1ec); box-shadow: 0 5px 14px rgba(102,68,83,.1); text-align: left; }
.unlock-card > span { font-size: 30px; }
.unlock-card p { margin: 0; display: flex; flex-direction: column; }
.unlock-card small { color: var(--pink); font: 900 8px/1 system-ui, sans-serif; letter-spacing: .12em; }
.unlock-card b { margin-top: 3px; font-size: 12px; }
.result-actions { display: flex; justify-content: center; gap: 9px; margin-top: 20px; }
.result-actions .secondary-button { min-width: 115px; }

.toast { position: fixed; z-index: 200; left: 50%; bottom: max(25px, env(safe-area-inset-bottom)); max-width: min(440px, calc(100% - 30px)); padding: 11px 18px; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; border: 3px solid #fff; border-radius: 18px; color: #fff; background: rgba(65,47,78,.92); box-shadow: 0 10px 30px rgba(51,32,64,.22); font-size: 11px; font-weight: 900; text-align: center; transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1040px) {
  .title-screen { grid-template-columns: .85fr 1.15fr; gap: 18px; padding-left: 24px; padding-right: 24px; }
  .title-copy h1 { font-size: 65px; }
  .title-actions { flex-direction: column; align-items: flex-start; }
  .secondary-button { min-height: 48px; }
  .battle-layout { grid-template-columns: minmax(0, 1fr) 285px; }
  .resource-row { grid-template-columns: 1fr auto 1fr; }
  .rainbow-button { grid-column: 1/4; justify-self: center; }
  #gameCanvas { max-height: calc(100dvh - 310px); }
}

@media (min-width: 761px) and (max-width: 900px) {
  .battle-layout { display: flex; flex-direction: column; }
  .unit-panel { width: 100%; }
  .unit-grid { grid-template-columns: repeat(3, 1fr); }
  .unit-card { min-height: 82px; }
  .battle-controls { max-width: 520px; margin-left: auto; margin-right: auto; }
  .control-tip { text-align: center; }
}

@media (max-width: 760px) {
  .topbar { min-height: 62px; padding: 7px 10px; gap: 8px; }
  .brand-face { width: 41px; height: 37px; }
  .brand b { font-size: 12px; }
  .brand small { display: none; }
  .profile { justify-content: flex-end; gap: 8px; }
  .profile > span { min-width: 61px; }
  .profile small { display: none; }
  .profile b { font-size: 14px; }
  .profile i { font-size: 8px; }
  .circle-button { width: 35px; height: 35px; }
  .header-actions { gap: 4px; }

  .title-screen { min-height: calc(100dvh - 62px); display: block; padding: 29px 16px 138px; }
  .title-copy { margin: auto; text-align: center; }
  .title-copy h1 { font-size: clamp(55px, 19vw, 78px); }
  .title-copy h1 span { padding: 0; }
  .lead br { display: none; }
  .title-features { justify-content: center; }
  .title-features > span { min-width: 0; width: 31%; padding: 8px 5px; grid-template-columns: 25px auto; }
  .title-features i { font-size: 18px; }
  .title-features b { font-size: 14px; }
  .title-actions { align-items: center; }
  .primary-button { width: min(340px, 100%); }
  .secondary-button { width: min(260px, 100%); }
  .record-strip { margin-left: auto; margin-right: auto; }
  .world-card { margin-top: 31px; padding: 15px; border-radius: 24px; transform: none; }
  .stage-map { gap: 8px; padding: 10px; }
  .stage-button { min-height: 70px; border-width: 2px; border-radius: 14px; }
  .stage-button .stage-emoji { font-size: 21px; }
  .stage-button small { display: none; }
  .parade { position: relative; left: auto; right: auto; bottom: auto; height: 88px; margin-top: 35px; gap: 7vw; }
  .parade-dog { width: 49px; height: 45px; border-width: 2px; }
  .parade-dog::before, .parade-dog::after { top: 3px; width: 18px; height: 28px; border-width: 2px; }
  .parade-dog::before { left: -10px; }
  .parade-dog::after { right: -10px; }
  .parade-dog i::before, .parade-dog i::after { top: 15px; width: 5px; height: 6px; }
  .parade-dog i::before { left: 12px; }
  .parade-dog i::after { right: 12px; }
  .parade-dog b { height: 12px; border-width: 2px; }
  .dog-b, .dog-e { width: 54px; height: 50px; }

  .battle-screen { min-height: calc(100dvh - 62px); padding: 6px 5px max(12px, env(safe-area-inset-bottom)); }
  .battle-hud { grid-template-columns: 1fr 100px 1fr; gap: 5px; margin-bottom: 5px; }
  .base-meter { gap: 3px; }
  .base-meter > span { display: none; }
  .base-meter strong { min-width: 31px; font-size: 9px; }
  .base-meter small { font-size: 7px; }
  .stage-chip { min-width: 0; padding: 5px 4px; border-width: 2px; border-radius: 11px; }
  .stage-chip small { font-size: 7px; }
  .stage-chip b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .stage-chip span { font-size: 8px; }
  .battle-layout { display: flex; flex-direction: column; gap: 5px; }
  .field-card, .unit-panel { border-width: 2px; border-radius: 16px; }
  #gameCanvas { max-height: none; }
  .field-message { bottom: 6px; padding: 4px 10px; font-size: 8px; }
  .resource-row { min-height: 67px; grid-template-columns: 1fr auto 1.1fr; gap: 5px; padding: 6px; }
  .fish-meter > span { font-size: 23px; }
  .fish-meter b { font-size: 14px; }
  .wallet-button { padding: 6px; grid-template-columns: 20px auto; gap: 3px; }
  .wallet-button > em { display: none; }
  .wallet-button b { font-size: 8px; }
  .wallet-button small { font-size: 7px; }
  .cheer-meter small { font-size: 7px; }
  .rainbow-button { grid-column: 1/4; min-height: 41px; padding: 5px 10px; }
  .rainbow-button > span { font-size: 20px; }
  .rainbow-button b { font-size: 9px; }
  .rainbow-button small, .rainbow-button kbd { display: none; }
  .unit-panel { padding: 7px; }
  .unit-panel-head { margin-bottom: 6px; }
  .unit-panel-head b { font-size: 12px; }
  .unit-grid { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .unit-card { min-height: 67px; grid-template-columns: 39px 1fr; padding: 5px; gap: 2px 3px; border-radius: 11px; box-shadow: 0 3px 0 var(--unit-shadow); }
  .unit-card .unit-face { width: 37px; height: 35px; border-width: 2px; font-size: 17px; }
  .unit-card .unit-face::before, .unit-card .unit-face::after { width: 14px; height: 15px; border-width: 2px; }
  .unit-card .unit-copy b { font-size: 9px; }
  .unit-card .unit-copy small { display: none; }
  .unit-card .unit-price { padding: 2px 4px; font-size: 8px; }
  .unit-card .key { font-size: 7px; }
  .item-box { margin-top: 7px; padding-top: 7px; }
  .item-box-head { margin-bottom: 5px; }
  .item-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .item-card { min-height: 43px; display: flex; justify-content: center; padding: 4px; }
  .item-card > span { font-size: 19px; }
  .item-card p { display: none; }
  .item-card em { font-size: 9px; }
  .battle-controls { margin-top: 7px; gap: 4px; }
  .battle-controls button { min-height: 37px; flex-direction: row; gap: 4px; border-radius: 9px; box-shadow: 0 2px 0 #d6c7dd; }
  .battle-controls button span { font-size: 12px; }
  .battle-controls button b { font-size: 8px; }
  .control-tip { display: none; }

  .overlay { padding: 20px 10px; align-items: start; }
  .modal { margin: auto; padding: 28px 17px; border-width: 3px; border-radius: 23px; }
  .team-cookie { position: static; display: inline-block; margin-top: 9px; }
  .squad-builder { padding: 10px; }
  .squad-picker { grid-template-columns: repeat(3, 1fr); }
  .squad-heading { align-items: flex-start; gap: 8px; }
  .squad-heading > span { display: block; max-width: 145px; text-align: right; line-height: 1.35; }
  .upgrade-grid { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: 1fr; }
  .how-grid article { min-height: 100px; }
  .help-note { grid-template-columns: auto 1fr; }
  .stage-modal { padding-top: 130px; }
  .stage-info { grid-template-columns: 1fr; }
  .stage-info div { padding: 8px; }
  .stage-squad > div { flex-wrap: wrap; }
  .result-modal { margin-top: 45px; padding-top: 78px; }
  .result-reward { gap: 4px; }
  .result-actions { flex-wrap: wrap; }
  .result-actions .primary-button, .result-actions .secondary-button { width: auto; min-width: 105px; }
}

@media (max-width: 390px) {
  .profile > span:first-child { display: none; }
  .title-features small { display: none; }
  .stage-map { grid-template-columns: repeat(3, 1fr); }
  .unit-card { grid-template-columns: 32px 1fr; }
  .unit-card .unit-face { width: 31px; height: 30px; font-size: 14px; }
  .unit-card .unit-copy b { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}