/* ===== 共通 ===== */
:root { --ink: #1b2350; --pop: "Mochiy Pop One", "Hiragino Maru Gothic ProN", sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #2c63db;
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  color: var(--ink); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: none; overscroll-behavior: none;
}
button { font: inherit; color: inherit; border: none; background: none; padding: 0; cursor: pointer; }
svg { display: block; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.pop {
  font-family: var(--pop); color: #fff; letter-spacing: 0.02em;
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink);
}
.pop.sm { font-size: 17px; -webkit-text-stroke: 4px var(--ink); text-shadow: 0 2px 0 var(--ink); }
.pop.xs { font-size: 14px; -webkit-text-stroke: 3px var(--ink); text-shadow: none; }
.center { text-align: center; }
.h1 { font-size: 28px; text-align: center; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 18px; border: 3px solid var(--ink);
  box-shadow: inset 0 -7px 0 rgba(0,0,0,0.2), inset 0 4px 0 rgba(255,255,255,0.5), 0 5px 0 var(--ink);
  font-family: var(--pop); color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  transition: transform 0.06s;
}
.btn:active { transform: translateY(4px); box-shadow: inset 0 -4px 0 rgba(0,0,0,0.2), inset 0 3px 0 rgba(255,255,255,0.5), 0 1px 0 var(--ink); }
.btn-green { background: linear-gradient(#9af06a, #3fb82a); }
.btn-pink  { background: linear-gradient(#ff8cc0, #e8468a); }
.btn-blue  { background: linear-gradient(#6ec0ff, #2a7de6); }
.panel {
  background: linear-gradient(#fffaf0, #f6e3b8); border: 3px solid var(--ink); border-radius: 22px;
  box-shadow: inset 0 -6px 0 rgba(150,96,10,0.18), 0 6px 0 var(--ink);
}
.hud {
  border: 3px solid var(--ink); border-radius: 16px; background: rgba(19,32,90,0.9);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.15), 0 4px 0 var(--ink);
}
.bar { border-radius: 9px; border: 2.5px solid var(--ink); background: #0b1440; overflow: hidden; }
.bar > div { height: 100%; width: 0%; box-shadow: inset 0 3px 0 rgba(255,255,255,0.4); transition: width 0.3s; }

/* ===== 画面の入れ物 ===== */
.screen {
  position: fixed; inset: 0; display: none; flex-direction: column; align-items: center;
  padding: calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 16px);
  overflow: hidden;
}
.screen.active { display: flex; }
.screen > * { position: relative; }
.bg-sky { background: linear-gradient(180deg, #4a9bff 0%, #2c63db 55%, #1a3a96 100%); }
.bg-blue { background: linear-gradient(180deg, #2f6de0 0%, #234fb8 60%, #183584 100%); }
.bg-purple { background: radial-gradient(circle at 50% 30%, #6a4cff 0%, #3b2aa8 45%, #1d1760 100%); }
.rays {
  position: absolute !important; left: 50%; top: 30%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.09) 0deg 9deg, rgba(255,255,255,0) 9deg 18deg);
  animation: spin 60s linear infinite; pointer-events: none;
}
.rays.gold { background: repeating-conic-gradient(from 0deg, rgba(255,214,74,0.16) 0deg 8deg, rgba(255,214,74,0) 8deg 16deg); animation-duration: 30s; }
@keyframes spin { to { transform: rotate(360deg); } }
.stripes { position: absolute !important; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 18px, rgba(255,255,255,0) 18px 36px); pointer-events: none; }
.cloud { position: absolute !important; background: rgba(255,255,255,0.85); border-radius: 40px; animation: drift 14s ease-in-out infinite alternate; }
.c1 { left: -30px; top: 16%; width: 150px; height: 46px; }
.c2 { left: 30px; top: 13%; width: 70px; height: 56px; }
.c3 { right: -24px; top: 25%; width: 130px; height: 40px; opacity: 0.85; animation-delay: -5s; }
.c4 { right: 30px; top: 23%; width: 60px; height: 46px; opacity: 0.85; animation-delay: -5s; }
@keyframes drift { to { transform: translateX(24px); } }

/* ===== 1. だれが あそぶ？ ===== */
#screen-who { justify-content: center; gap: 18px; }
.logo { display: flex; flex-direction: column; align-items: center; }
.mascot { width: 176px; height: 112px; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.logo-text { font-size: 62px; line-height: 1; color: #ffd54a; margin-top: -6px; }
.logo-ribbon {
  margin-top: 8px; padding: 6px 26px; background: #ff5fa2; border: 3px solid var(--ink); border-radius: 10px;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.18), 0 4px 0 var(--ink); transform: rotate(-2deg);
}
.logo-ribbon .pop { font-size: 20px; -webkit-text-stroke: 4px var(--ink); text-shadow: none; }
.who-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 380px; margin-top: 6px; }
.who-card { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.portrait { position: relative; height: 150px; border-radius: 14px; border: 3px solid var(--ink); overflow: hidden; }
.portrait svg { width: 100%; height: 100%; }
.portrait.ane { background: radial-gradient(circle at 50% 38%, #ffd0e4 0%, #ff8cbf 60%, #e2558f 100%); }
.portrait.oto { background: radial-gradient(circle at 50% 38%, #cfe8ff 0%, #6fb4ff 60%, #2f7ce0 100%); }
.lv {
  position: absolute; left: 6px; top: 6px; width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(#ffe68a, #f0a81c); border: 3px solid var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.lv small { font-size: 9px; font-weight: 800; }
.lv b { font-family: var(--pop); font-size: 15px; font-weight: normal; }
.who-name { text-align: center; font-family: var(--pop); font-size: 17px; }
.who-btn { height: 52px; font-size: 20px; }
.ver { position: absolute !important; left: 18px; bottom: calc(env(safe-area-inset-bottom) + 14px); font-size: 12px; font-weight: 800; color: #cfe0ff; }

/* ===== 2. なにで あそぶ？ ===== */
#screen-menu { padding-bottom: 0; gap: 12px; }
.menu-top { width: 100%; display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 50px; height: 50px; border-radius: 14px; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  background: radial-gradient(circle at 50% 40%, #ffd0e4, #ff7eb6); overflow: hidden; flex-shrink: 0;
}
.avatar.oto { background: radial-gradient(circle at 50% 40%, #cfe8ff, #6fb4ff); }
.avatar svg { width: 100%; height: 100%; }
.menu-who { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; }
.lv-bar { width: 130px; height: 14px; }
.lv-bar > div { background: linear-gradient(#9af06a, #3fb82a); }
.star-pill { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px 0 6px; border-radius: 20px; border: 3px solid var(--ink); background: #13205a; }
.star-pill svg { width: 26px; height: 26px; }
.menu-h1 { margin: 4px 0 2px; }
.arena-list { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; min-height: 0; }
.arena { position: relative; border: 3px solid var(--ink); border-radius: 24px; overflow: hidden; box-shadow: 0 6px 0 var(--ink); flex: 1 1 0; min-height: 150px; max-height: 220px; }
.arena-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.arena-foot {
  position: absolute; left: 0; right: 0; bottom: 0; height: 72px; padding: 0 12px 0 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(18,26,74,0.9); border-top: 3px solid var(--ink);
}
.arena-name { font-size: 22px; }
.arena-sub { font-size: 12px; font-weight: 800; color: #d6e2ff; margin-top: 2px; }
.play-btn { width: 92px; height: 50px; font-size: 20px; flex-shrink: 0; }
.best {
  position: absolute; right: 10px; top: 10px; display: flex; align-items: center; gap: 4px; padding: 4px 10px 4px 6px;
  border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(#ffe68a, #f0a81c);
  font-family: var(--pop); font-size: 13px;
}
.best svg { width: 18px; height: 18px; }
.best svg use { color: var(--ink); }
.arena.locked { flex: 0 0 70px; min-height: 70px; background: #2a3470; display: flex; align-items: center; gap: 12px; padding: 0 16px; box-shadow: 0 5px 0 var(--ink); }
.lock-ico { width: 40px; height: 40px; border-radius: 12px; border: 3px solid var(--ink); background: #4a5594; display: flex; align-items: center; justify-content: center; }
.lock-ico svg { width: 22px; height: 22px; }
.lock-title { font-family: var(--pop); font-size: 18px; color: #c6cdf0; }
.lock-sub { font-size: 12px; font-weight: 800; color: #9aa3d6; }
.bottom-nav {
  width: calc(100% + 32px); margin-top: 4px; background: #13205a; border-top: 3px solid #0b1440;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
  padding: 6px 4px calc(env(safe-area-inset-bottom) + 10px);
}
.bottom-nav button { height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: var(--pop); font-size: 12px; color: #9fbfff; }
.bottom-nav button svg { width: 30px; height: 30px; }
.bottom-nav .center {
  height: 76px; margin: -18px 2px 0; border-radius: 20px 20px 16px 16px; border: 3px solid #0b1440;
  background: linear-gradient(#5b8fff, #2f5ed8); box-shadow: inset 0 4px 0 rgba(255,255,255,0.35);
}
.bottom-nav .center svg { width: 34px; height: 34px; }

/* ===== 3. プレイ中（上にのせる表示） ===== */
.hud-layer { pointer-events: none; }
.hud-top { width: 100%; display: flex; align-items: flex-start; gap: 8px; }
.timer { height: 46px; padding: 0 12px 0 8px; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.timer svg { width: 26px; height: 26px; }
.timer .pop { font-size: 22px; }
.timer.hurry { background: rgba(200,40,40,0.92); animation: pulse 0.5s ease-in-out infinite alternate; }
@keyframes pulse { to { transform: scale(1.08); } }
.rank { flex-grow: 1; padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; }
.rank-row { display: flex; align-items: center; gap: 6px; }
.rank-no { width: 16px; font-size: 11px; font-weight: 800; color: #c6cdf0; text-align: center; }
.rank-no svg { width: 16px; height: 14px; }
.rank-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); flex-shrink: 0; }
.rank-bar { flex-grow: 1; height: 9px; border-radius: 6px; background: #0b1440; }
.rank-bar > div { height: 100%; border-radius: 6px; transition: width 0.3s; }
.rank-me { width: 38px; white-space: nowrap; font-size: 11px; font-weight: 800; color: #fff; }
.pause { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; pointer-events: auto; flex-shrink: 0; }
.pause svg { width: 20px; height: 20px; }
.banner {
  margin-top: 28px; padding: 8px 22px; border: 3px solid var(--ink); border-radius: 14px;
  background: linear-gradient(#ffe66b, #f7b21e); box-shadow: inset 0 -5px 0 rgba(150,96,10,0.25), 0 5px 0 var(--ink);
  transform: rotate(-3deg) scale(0.4); opacity: 0; transition: transform 0.25s cubic-bezier(.3,1.6,.5,1), opacity 0.2s;
}
.banner.show { transform: rotate(-3deg) scale(1); opacity: 1; }
.banner.red { background: linear-gradient(#ff8a80, #e8413a); }
.banner .pop { font-size: 20px; -webkit-text-stroke: 5px var(--ink); text-shadow: none; white-space: nowrap; }
.hint {
  margin-top: auto; margin-bottom: 12px; padding: 8px 18px; border-radius: 999px; border: 3px solid var(--ink);
  background: rgba(255,255,255,0.92); font-family: var(--pop); font-size: 15px; transition: opacity 0.6s;
}
.gauge { width: 100%; height: 58px; padding: 0 10px; display: flex; align-items: center; gap: 10px; }
.gauge-lv {
  width: 44px; height: 44px; border-radius: 12px; border: 3px solid var(--ink); background: linear-gradient(#ff8cc0, #e8468a);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0;
}
.gauge-lv small { font-size: 8px; font-weight: 800; color: #fff; }
.gauge-lv .pop { font-size: 16px; }
.gauge-lv.oto { background: linear-gradient(#6ec0ff, #2a7de6); }
.gauge-mid { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gauge-bar { height: 16px; }
.gauge-bar > div { background: linear-gradient(#ffb3d6, #ff5fa2); }
.gauge-bar.oto > div { background: linear-gradient(#b3dcff, #2f86ff); }
.gauge-text { font-size: 11px; font-weight: 800; color: #c6cdf0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gauge-next { width: 44px; height: 44px; border-radius: 12px; border: 3px solid var(--ink); background: #2a3470; flex-shrink: 0; }

/* 一時停止 */
.dim { background: rgba(10,14,40,0.6); justify-content: center; }
.dialog { width: 100%; max-width: 300px; padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.dialog-title { font-family: var(--pop); font-size: 24px; text-align: center; }
.btn.wide { height: 58px; font-size: 22px; }

/* ===== 4. けっか ===== */
#screen-result { justify-content: center; gap: 8px; }
.ribbon { width: 300px; height: 64px; flex-shrink: 0; }
.ribbon .tail { position: absolute; top: 14px; width: 50px; height: 44px; background: #c73a78; border: 3px solid var(--ink); }
.ribbon .tail.l { left: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 26% 50%); }
.ribbon .tail.r { right: 0; clip-path: polygon(0 0, 100% 0, 74% 50%, 100% 100%, 0 100%); }
.ribbon-body {
  position: absolute; left: 26px; right: 26px; top: 0; height: 56px; border-radius: 10px; border: 3px solid var(--ink);
  background: linear-gradient(#ff8cc0, #e8468a); box-shadow: inset 0 -6px 0 rgba(0,0,0,0.18), 0 5px 0 var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.ribbon-body .pop { font-size: 30px; }
.stars { display: flex; align-items: flex-end; gap: 4px; height: 90px; }
.stars svg { width: 58px; height: 58px; opacity: 0; transform: scale(2.2); }
.stars svg.mid { width: 84px; height: 84px; margin-bottom: 14px; }
.stars svg.l { rotate: -12deg; } .stars svg.r { rotate: 12deg; }
.stars svg.in { animation: stamp 0.35s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes stamp { to { opacity: 1; transform: scale(1); } }
.trophy-big { width: 130px; height: 130px; animation: bob 2.4s ease-in-out infinite; }
.award-panel { width: 100%; max-width: 340px; padding: 12px 14px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; }
.award-plate {
  margin-top: -30px; padding: 4px 18px; border-radius: 12px; border: 3px solid var(--ink);
  background: linear-gradient(#ffe66b, #f7b21e); box-shadow: 0 4px 0 var(--ink);
  font-family: var(--pop); font-size: 19px; white-space: nowrap;
}
.stat-grid { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat { border-radius: 14px; background: #fff; border: 2.5px solid #e4cf9e; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stat small { font-size: 12px; font-weight: 800; color: #6a5a38; }
.stat b { font-family: var(--pop); font-size: 24px; font-weight: normal; }
.stat b.gold { color: #c46a00; }
.new-wrap { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.new-items { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.result-btns { width: 100%; max-width: 360px; display: flex; gap: 12px; margin-top: 12px; }
.btn.big { flex-grow: 1; height: 64px; font-size: 22px; }
.btn.big.back { flex-grow: 0; width: 104px; font-size: 18px; }

/* 図鑑カード（けっか・ずかん共通） */
.card {
  position: relative; border-radius: 16px; border: 3px solid var(--ink);
  background: linear-gradient(#e6f2ff, #a9d0ff); box-shadow: inset 0 -5px 0 rgba(0,0,0,0.15), 0 4px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center;
}
.card.rare { background: linear-gradient(#fff4b8, #ffc93c); }
.card.locked { background: #26306a; }
.card canvas { width: 62px; height: 62px; }
.card .nm { font-size: 12px; font-weight: 800; line-height: 1.2; padding: 0 2px; }
.card .ct { font-size: 11px; font-weight: 800; color: #3d4a80; }
.card .q { font-family: var(--pop); font-size: 18px; color: #9aa3d6; }
.card .tag { position: absolute; top: -10px; right: -8px; padding: 1px 7px; border-radius: 8px; border: 2.5px solid var(--ink); background: #e8413a; transform: rotate(8deg); }
.card .tag.new { background: #39c16c; }
.card .tag .pop { font-size: 11px; -webkit-text-stroke: 3px var(--ink); text-shadow: none; }
.new-items .card { width: 92px; height: 104px; }

/* ===== 5. ずかん・きろく ===== */
.screen.scroll { overflow-y: auto; touch-action: pan-y; }
.sub-top { width: 100%; display: flex; align-items: center; gap: 10px; }
.sub-top .h1 { flex-grow: 1; margin-right: 56px; font-size: 30px; }
.back-btn {
  width: 46px; height: 46px; border-radius: 14px; border: 3px solid var(--ink); flex-shrink: 0;
  background: linear-gradient(#e9eefc, #b9c6ea); box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15), 0 4px 0 var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.back-btn svg { width: 22px; height: 22px; }
.progress { width: 100%; max-width: 400px; height: 52px; margin-top: 14px; display: flex; align-items: center; gap: 10px; padding: 0 12px; flex-shrink: 0; }
.progress svg { width: 28px; height: 28px; }
.gold-bar { flex-grow: 1; height: 16px; }
.gold-bar > div { background: linear-gradient(#ffe66b, #f7b21e); }
.tabs { width: 100%; max-width: 400px; margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex-shrink: 0; }
.tab { height: 40px; border-radius: 12px; border: 3px solid var(--ink); background: #2a3a8a; box-shadow: 0 3px 0 var(--ink); font-family: var(--pop); font-size: 15px; color: #c6d4ff; }
.tab.on { background: linear-gradient(#ffe66b, #f7b21e); color: var(--ink); }
.zukan-grid { width: 100%; max-width: 400px; margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; padding-bottom: 24px; }
.zukan-grid .card { height: 128px; }
.record-panel { width: 100%; max-width: 360px; margin-top: 24px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.rec-row { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 2.5px solid #e4cf9e; border-radius: 14px; padding: 10px 14px; }
.rec-row span { font-weight: 800; }
.rec-row b { font-family: var(--pop); font-size: 20px; font-weight: normal; }

/* ===== セーブ共有・きせかえ・しんか ===== */
.bg-pink { background: linear-gradient(180deg, #ff9ccb 0%, #e8589a 60%, #b8336f 100%); }
.bg-green { background: linear-gradient(180deg, #5fcf6a 0%, #2f9e4a 60%, #1e6e35 100%); }
.who-canvas { width: 100%; height: 100%; display: block; }
.avatar canvas { width: 100%; height: 100%; display: block; }
.who-foot { position: absolute !important; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 14px); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sync-chip { font-size: 12px; font-weight: 800; color: #eaf1ff; background: rgba(11,20,64,0.45); padding: 6px 12px; border-radius: 999px; }
.gear { width: 48px; height: 48px; border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(#e9eefc, #b9c6ea); box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15), 0 4px 0 var(--ink); display: flex; align-items: center; justify-content: center; }
.gear svg { width: 24px; height: 24px; }
.sub-top .star-pill { flex-shrink: 0; }
.sub-top .star-pill ~ .h1, .sub-top .h1:has(+ .star-pill) { margin-right: 0; }
.stage { width: 100%; max-width: 400px; height: 230px; margin-top: 14px; flex-shrink: 0; position: relative; background: radial-gradient(circle at 50% 60%, #fffaf0, #f6e3b8); }
.stage canvas { width: 100%; height: 100%; display: block; }
.tabs.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dress-grid { width: 100%; max-width: 400px; margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-bottom: 28px; }
.card.wear { height: 150px; padding: 4px 4px 8px; background: linear-gradient(#fffaf0, #f6e3b8); font: inherit; color: var(--ink); }
.card.wear canvas, .card.evo canvas { width: 100%; height: 92px; }
.card.wear.shop { background: linear-gradient(#e6f2ff, #a9d0ff); }
.card.wearing { outline: 4px solid #ffd54a; outline-offset: -1px; }
.card .ct.on { color: #c46a00; }
.price { display: flex; align-items: center; gap: 3px; font-family: var(--pop); font-size: 15px; }
.price svg { width: 18px; height: 18px; }
.toast { position: fixed !important; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 30px); transform: translate(-50%, 20px); opacity: 0; transition: all 0.25s; background: rgba(19,32,90,0.95); color: #fff; font-family: var(--pop); font-size: 16px; padding: 10px 18px; border-radius: 999px; border: 3px solid var(--ink); white-space: nowrap; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.modal { position: fixed !important; inset: 0; background: rgba(10,14,40,0.6); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 5; }
.modal[hidden], .levelup[hidden] { display: none; }
#buy-canvas { width: 100%; height: 170px; }
.buy-text { display: flex; align-items: center; justify-content: center; gap: 4px; font-family: var(--pop); font-size: 20px; }
.buy-text svg { width: 26px; height: 26px; }
.levelup { position: fixed !important; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20,12,70,0.75); overflow: hidden; }
.levelup-card { width: 100%; max-width: 320px; padding: 18px 18px 22px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; animation: popin 0.4s cubic-bezier(.3,1.6,.5,1); }
@keyframes popin { from { transform: scale(0.3); opacity: 0; } }
.lu-title { font-size: 32px; text-align: center; color: #ffd54a; }
#lu-canvas { width: 100%; height: 190px; }
.lu-text { text-align: center; font-family: var(--pop); font-size: 18px; }
.evo-stage { height: 250px; }
.evo-plate { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(#ffe66b, #f7b21e); font-family: var(--pop); font-size: 18px; white-space: nowrap; }
.evo-lv { background: var(--ink); color: #fff; border-radius: 9px; padding: 2px 8px; font-size: 14px; }
.evo-progress { width: 100%; max-width: 400px; margin-top: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.evo-progress .gold-bar { height: 16px; }
.evo-next { font-size: 13px; font-weight: 800; color: #eaf1ff; text-align: center; }
.evo-list { width: 100%; max-width: 400px; margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-bottom: 28px; }
.card.evo { height: 140px; padding: 4px 4px 8px; }
.family { width: 100%; max-width: 380px; margin-top: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.6; }
.family p { margin: 0; }
.family label { font-weight: 800; font-size: 14px; }
.family input { font: inherit; font-size: 18px; padding: 12px 14px; border-radius: 14px; border: 3px solid var(--ink); background: #fff; color: var(--ink); -webkit-user-select: text; user-select: text; }
.family-status { font-weight: 800; color: #6a5a38; }
.text-btn { font-size: 14px; font-weight: 800; color: #b8336f; text-decoration: underline; padding: 6px; }
.evo-stage canvas { height: calc(100% - 46px); }