@font-face { font-family: "Galmuri11"; src: url("./assets/fonts/Galmuri11.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Galmuri11"; font-weight: 700; src: url("./assets/fonts/Galmuri11-Bold.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Galmuri9"; src: url("./assets/fonts/Galmuri9.woff2") format("woff2"); font-display: block; }

:root {
  --u: 2px;              /* one game pixel on screen, set from JS */
  --ink: #0b0a10;
  --panel: #17142a;
  --panel2: #221d3d;
  --line: #3b3366;
  --hi: #8f84d8;
  --text: #f1ecff;
  --dim: #a59fc4;
  --gold: #ffd84a;
  --fire: #ff8a2a;
  --water: #58b4ec;
  --wind: #6fe3b4;
  --earth: #d39a52;
  --light: #fff09a;
  --dark: #a970e0;
  /* semantic roles (use these, not raw hex, in rules below) */
  --well: #0e0c1c;        /* sunken boxes: bars, inputs, medallions */
  --line-soft: #2e2752;   /* quiet dividers inside panels */
  --good: #3ec466;        /* health, on, success */
  --bad: #e8405a;         /* danger, low health */
  --gold-deep: #6a4a10;   /* gold button face */
  --grade3: #c684ff;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #07060d; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
body { color: var(--text); font-family: "Galmuri11", system-ui, sans-serif; display: grid; place-items: center; }

#stage { position: relative; width: calc(480 * var(--u)); height: calc(270 * var(--u)); }
#view { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
#ui { position: absolute; inset: 0; pointer-events: none; font-size: calc(var(--u) * 8); line-height: 1.35; }
#ui > * { pointer-events: auto; }
#ui .pass { pointer-events: none; }

/* ---------- generic pieces ---------- */
.panel {
  background: var(--panel); border: var(--u) solid var(--line);
  box-shadow: 0 0 0 var(--u) var(--ink), inset 0 var(--u) 0 var(--line-soft), inset 0 calc(var(--u) * -1) 0 var(--well);
  padding: calc(var(--u) * 6);
}
.btn {
  font: inherit; color: var(--text); background: var(--panel2); cursor: pointer;
  border: var(--u) solid var(--hi); box-shadow: 0 0 0 var(--u) var(--ink), inset 0 calc(var(--u) * -2) 0 #120f24;
  padding: calc(var(--u) * 3) calc(var(--u) * 7); font-size: calc(var(--u) * 8);
}
.btn { transition: transform 160ms cubic-bezier(.34, 1.56, .64, 1), filter 120ms; }
.btn:hover:not(:disabled) { filter: brightness(1.12); }
.btn:active:not(:disabled), .btn.on { transform: translateY(var(--u)) scale(.94); box-shadow: 0 0 0 var(--u) var(--ink); transition-duration: 50ms; }
.btn.primary { background: #4b2c8a; border-color: var(--grade3); }
.btn.gold { background: var(--gold-deep); border-color: var(--gold); color: #fff6c4; }
.btn:disabled { opacity: .45; cursor: default; }
.row { display: flex; gap: calc(var(--u) * 4); align-items: center; }
.col { display: flex; flex-direction: column; gap: calc(var(--u) * 4); }
.dim { color: var(--dim); }
.small { font-size: calc(var(--u) * 6.5); }
.big { font-size: calc(var(--u) * 11); }
.gold-t { color: var(--gold); }
.el-fire { color: var(--fire); } .el-water { color: var(--water); } .el-wind { color: var(--wind); } .el-earth { color: var(--earth); }
.el-light { color: var(--light); } .el-dark { color: var(--dark); }
.bar { height: calc(var(--u) * 4); background: var(--well); border: var(--u) solid var(--ink); position: relative; }
.bar > i { position: absolute; inset: 0; right: auto; background: var(--good); box-shadow: inset 0 var(--u) 0 #ffffff40, inset 0 calc(var(--u) * -1) 0 #00000040; }
.bar > .chip { position: absolute; inset: 0; right: auto; width: 100%; background: #fff6e8; transition: width 420ms cubic-bezier(.5, 0, .75, 0) 220ms; }
@media (prefers-reduced-motion: reduce) { .btn, .bar > .chip { transition: none !important; } .harvest { animation: none; } }
.stars { color: var(--gold); letter-spacing: calc(var(--u) * -1); }

.toast {
  position: absolute; left: 50%; top: calc(var(--u) * 30); transform: translateX(-50%);
  background: #0b0a10e0; border: var(--u) solid var(--hi); padding: calc(var(--u) * 3) calc(var(--u) * 8);
  pointer-events: none; animation: toast 2.2s forwards; white-space: nowrap;
}
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 6px); } 10%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* ---------- touch controls ---------- */
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#touch[hidden] { display: none; }
#stick { position: absolute; left: 4vmin; bottom: 6vmin; width: 30vmin; height: 30vmin; border-radius: 50%; background: #ffffff10; border: 2px solid #ffffff30; pointer-events: auto; }
#knob { position: absolute; left: 50%; top: 50%; width: 12vmin; height: 12vmin; margin: -6vmin 0 0 -6vmin; border-radius: 50%; background: #ffffff40; border: 2px solid #ffffff80; }
#buttons { position: absolute; right: 3vmin; bottom: 4vmin; width: 42vmin; height: 40vmin; pointer-events: none; }
.tbtn { position: absolute; pointer-events: auto; width: 13vmin; height: 13vmin; border-radius: 50%; border: 2px solid #ffffffa0; background: #1b1734c0; color: #fff; font-family: "Galmuri11"; font-size: 4vmin; overflow: hidden; padding: 0; }
.tbtn b { position: relative; z-index: 2; }
.tbtn .cd { position: absolute; inset: 0; background: conic-gradient(#000a var(--cd, 0turn), transparent 0); z-index: 1; }
.tbtn.big { width: 19vmin; height: 19vmin; right: 0; bottom: 0; font-size: 5vmin; background: #4b2c8ac0; }
.tbtn.small { width: 10vmin; height: 10vmin; right: 21vmin; bottom: 0; font-size: 3vmin; }
#b-s1 { right: 21vmin; bottom: 11vmin; }
#b-s2 { right: 12vmin; bottom: 21vmin; }
#b-ult { right: 0; bottom: 21vmin; background: #6a4a10c0; border-color: var(--gold); }
.tbtn.locked { display: none; }
.tbtn.ready-ult { box-shadow: 0 0 3vmin var(--gold); }

/* ---------- icons ---------- */
.ic { display: inline-block; width: calc(var(--u) * 6); height: calc(var(--u) * 6); vertical-align: -8%; image-rendering: pixelated; }
.ic-ess { background: radial-gradient(circle at 40% 35%, #fff 0 18%, #7ee88a 19% 55%, #24924e 56% 70%, transparent 71%); }
.ic-gem { background: conic-gradient(from 45deg, #ecc8ff, #9a48ec, #6b2cc0, var(--grade3), #ecc8ff); clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); }
.ic-evo { background: conic-gradient(from 0deg, var(--gold), #f0b424, #fff6c4, var(--gold)); clip-path: polygon(50% 0, 90% 30%, 90% 70%, 50% 100%, 10% 70%, 10% 30%); }
.ic-awake { background: conic-gradient(from 0deg, #ff7a8a, var(--grade3), var(--water), #6fe3b4, var(--gold), #ff7a8a); clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%); }
.ic-shard { background: linear-gradient(135deg, #d8f4ff, var(--water)); clip-path: polygon(30% 0, 100% 30%, 70% 100%, 0 70%); }

/* ---------- run HUD ---------- */
.hud { position: absolute; inset: 0; }
.hud-top { position: absolute; left: calc(var(--u) * 6); right: calc(var(--u) * 24); top: calc(var(--u) * 5); display: flex; gap: calc(var(--u) * 8); align-items: flex-start; text-shadow: 0 var(--u) 0 #000; }
.hud-hp { width: calc(var(--u) * 120); }
.hud-name { font-size: calc(var(--u) * 7); white-space: nowrap; }
.hpbar { height: calc(var(--u) * 7); margin-top: var(--u); }
.hpbar span { position: absolute; inset: 0; font-size: calc(var(--u) * 6); line-height: calc(var(--u) * 5.6); text-align: center; color: #fff; text-shadow: var(--u) 0 0 #000, calc(var(--u) * -1) 0 0 #000, 0 var(--u) 0 #000, 0 calc(var(--u) * -1) 0 #000; }
.hud-floor { margin-left: auto; font-size: calc(var(--u) * 9); white-space: nowrap; }
.hud-floor .wv { font-size: calc(var(--u) * 7); }
.hud-loot { display: flex; flex-direction: column; align-items: flex-end; font-size: calc(var(--u) * 7); min-width: calc(var(--u) * 40); }
.pausebtn { position: absolute; right: calc(var(--u) * 5); top: calc(var(--u) * 5); padding: calc(var(--u) * 1) calc(var(--u) * 4); font-size: calc(var(--u) * 7); }
.bossbar { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--u) * 26); width: calc(var(--u) * 220); text-align: center; text-shadow: 0 var(--u) 0 #000; }
.bossbar .bname { color: var(--gold); font-size: calc(var(--u) * 8); }
.bossbar .bar { height: calc(var(--u) * 5); }
.bossbar .bar i { background: linear-gradient(#ff6a5a, #c42a3a); }
.skills { position: absolute; right: calc(var(--u) * 6); bottom: calc(var(--u) * 5); display: flex; gap: calc(var(--u) * 3); }
body.touch .skills { display: none; }
.sk { position: relative; min-width: calc(var(--u) * 46); white-space: nowrap; padding: calc(var(--u) * 2) calc(var(--u) * 3); background: #0b0a10c8; border: var(--u) solid var(--line); font-size: calc(var(--u) * 6); overflow: hidden; }
.sk b { color: var(--gold); margin-right: calc(var(--u) * 2); }
.sk .cdv { position: absolute; inset: 0; right: auto; width: calc(var(--cd, 0) * 100%); background: #00000090; }
.sk.ready { border-color: var(--hi); }
.sk.ult { border-color: var(--gold-deep); } .sk.ult.ready { border-color: var(--gold); box-shadow: 0 0 calc(var(--u) * 4) #ffd84a80; }
.sk span { position: relative; }
.banner { position: absolute; left: 0; right: 0; top: calc(var(--u) * 46); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); }
.bn { font-size: calc(var(--u) * 13); font-weight: 700; text-shadow: 0 0 0 #000, var(--u) var(--u) 0 #000, calc(var(--u) * -1) var(--u) 0 #000, var(--u) calc(var(--u) * -1) 0 #000, calc(var(--u) * -1) calc(var(--u) * -1) 0 #000; animation: bn 2.2s forwards; }
.bn.small { font-size: calc(var(--u) * 9); }
@keyframes bn { 0% { opacity: 0; transform: scale(1.6); letter-spacing: .4em; } 12% { opacity: 1; transform: scale(1); letter-spacing: .05em; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.cutin { position: absolute; inset: 0; display: grid; align-items: center; overflow: hidden; }
.ci-band { height: calc(var(--u) * 40); background: linear-gradient(90deg, transparent, #0b0a10e8 15%, #0b0a10e8 85%, transparent); border-top: var(--u) solid var(--c); border-bottom: var(--u) solid var(--c); display: flex; flex-direction: column; justify-content: center; align-items: center; animation: ci 1.1s forwards; }
.ci-band b { font-size: calc(var(--u) * 18); color: var(--c); text-shadow: 0 0 calc(var(--u) * 6) var(--c); letter-spacing: .1em; }
.ci-band span { font-size: calc(var(--u) * 7); color: var(--dim); }
@keyframes ci { 0% { transform: translateX(100%) skewX(-20deg); } 18% { transform: translateX(0) skewX(-8deg); } 80% { transform: translateX(-3%) skewX(-8deg); opacity: 1; } 100% { transform: translateX(-100%) skewX(-20deg); opacity: 0; } }

/* ---------- overlays & cards ---------- */
.overlay { position: absolute; inset: 0; background: #07060dd0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 4); animation: fadein .25s; z-index: 6; }
@keyframes fadein { from { opacity: 0; } }
.ov-title { font-size: calc(var(--u) * 12); font-weight: 700; margin-bottom: calc(var(--u) * 4); text-align: center; }
.ov-title .dim { display: block; font-size: calc(var(--u) * 7); font-weight: 400; }
.cards { display: flex; gap: calc(var(--u) * 8); }
.card { font: inherit; color: var(--text); width: calc(var(--u) * 104); height: calc(var(--u) * 128); background: linear-gradient(var(--panel2), var(--panel)); border: var(--u) solid var(--g); box-shadow: 0 0 0 var(--u) var(--ink), inset 0 0 calc(var(--u) * 10) #0008; display: flex; flex-direction: column; align-items: center; padding: calc(var(--u) * 8) calc(var(--u) * 6); gap: calc(var(--u) * 6); cursor: pointer; animation: cardin .4s backwards; }
.card:nth-child(2) { animation-delay: .08s; } .card:nth-child(3) { animation-delay: .16s; }
@keyframes cardin { from { transform: translateY(20px) rotate(-3deg); opacity: 0; } }
.card:hover, .card:focus { transform: translateY(calc(var(--u) * -3)); background: linear-gradient(#2a2449, #1c1833); outline: var(--u) solid var(--g); outline-offset: var(--u); }
.cmed { width: calc(var(--u) * 28); height: calc(var(--u) * 28); display: grid; place-items: center; background: var(--well); border: var(--u) solid var(--g); box-shadow: inset 0 calc(var(--u) * 2) 0 #ffffff14, 0 0 0 var(--u) var(--ink); transform: rotate(45deg); margin: calc(var(--u) * 4) 0 calc(var(--u) * 2); }
.cmed img { width: calc(var(--u) * 22); height: calc(var(--u) * 22); image-rendering: pixelated; transform: rotate(-45deg); }
.settings { width: calc(var(--u) * 220); display: flex; flex-direction: column; gap: calc(var(--u) * 4); padding: calc(var(--u) * 8); }
.settings .ov-title { margin-bottom: 0; }
.set-group { display: flex; flex-direction: column; border-top: var(--u) solid var(--line); padding-top: calc(var(--u) * 3); }
.set-group > b { font-size: calc(var(--u) * 6.5); color: var(--hi); font-weight: 400; margin-bottom: calc(var(--u) * 1); }
.set-row { display: flex; justify-content: space-between; align-items: center; height: calc(var(--u) * 12); font-size: calc(var(--u) * 7.5); cursor: pointer; }
.set-row input[type=checkbox] { appearance: none; width: calc(var(--u) * 16); height: calc(var(--u) * 8); background: var(--well); border: var(--u) solid var(--line); position: relative; cursor: pointer; margin: 0; }
.set-row input[type=checkbox]::after { content: ""; position: absolute; top: var(--u); left: var(--u); width: calc(var(--u) * 4); height: calc(var(--u) * 4); background: var(--hi); transition: transform 120ms ease-out, background 120ms; }
.set-row input[type=checkbox]:checked { border-color: var(--good); }
.set-row input[type=checkbox]:checked::after { transform: translateX(calc(var(--u) * 8)); background: var(--good); }
.set-row input[type=range] { width: calc(var(--u) * 70); accent-color: var(--hi); }
.set-foot { border-top: var(--u) solid var(--line); padding-top: calc(var(--u) * 4); }
.btn.danger { border-color: #a8384a; color: #ffb0b8; }
.cg { color: var(--g); font-size: calc(var(--u) * 6.5); }
.cn { font-size: calc(var(--u) * 10); font-weight: 700; text-align: center; }
.ct { font-size: calc(var(--u) * 7.5); color: var(--dim); text-align: center; line-height: 1.5; }
.keys { position: absolute; bottom: calc(var(--u) * 8); }
.pausemenu label { gap: calc(var(--u) * 3); }

/* ---------- title ---------- */
.title-ui { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }
.subtitle { margin-top: calc(var(--u) * 128); display: flex; gap: calc(var(--u) * 2); font-weight: 700; font-size: calc(var(--u) * 14); }
.subtitle span { display: inline-block; background: linear-gradient(#fff6c4 0 35%, var(--gold) 36% 60%, #c48412 61%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 var(--u) 0 var(--ink)) drop-shadow(var(--u) 0 0 var(--ink)) drop-shadow(calc(var(--u) * -1) 0 0 var(--ink)) drop-shadow(0 calc(var(--u) * -1) 0 var(--ink)) drop-shadow(0 calc(var(--u) * 2) 0 #2a1450);
  animation: subin .5s backwards; }
.subtitle .sp { width: calc(var(--u) * 6); }
.subtitle span:nth-child(1) { animation-delay: 1.65s } .subtitle span:nth-child(2) { animation-delay: 1.72s } .subtitle span:nth-child(3) { animation-delay: 1.79s }
.subtitle span:nth-child(5) { animation-delay: 1.86s } .subtitle span:nth-child(6) { animation-delay: 1.93s }
@keyframes subin { from { opacity: 0; transform: translateY(calc(var(--u) * -8)) scale(1.8); } }
.tagline { margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 7); color: #c8c0ff; letter-spacing: .25em; text-shadow: 0 var(--u) 0 #000; animation: fadein 1s 2.2s backwards; }
.press { position: absolute; bottom: calc(var(--u) * 40); font-size: calc(var(--u) * 8); color: #fff; text-shadow: 0 var(--u) 0 #000; animation: blink 1.2s infinite, fadein .5s 2.4s backwards; }
@keyframes blink { 50% { opacity: .25; } }
.title-btns { position: absolute; bottom: calc(var(--u) * 30); display: flex; gap: calc(var(--u) * 6); animation: fadein .3s; }
.title-btns[hidden] { display: none; }
.ver { position: absolute; right: calc(var(--u) * 4); bottom: calc(var(--u) * 3); font-size: calc(var(--u) * 5); }

/* ---------- select ---------- */
.select-ui { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }
.sel-title { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 11); font-weight: 700; text-shadow: 0 var(--u) 0 #000; }
.sel-row { position: absolute; top: calc(var(--u) * 158); display: flex; gap: calc(var(--u) * 24); }
.sel-slot { font: inherit; color: var(--text); width: calc(var(--u) * 80); background: #0b0a10a0; border: var(--u) solid var(--line); padding: calc(var(--u) * 2); cursor: pointer; display: flex; flex-direction: column; align-items: center; font-size: calc(var(--u) * 8); }
.sel-slot span { font-size: calc(var(--u) * 6); color: var(--c); }
.sel-slot.on { border-color: var(--c); box-shadow: 0 0 calc(var(--u) * 6) var(--c); }
.sel-info { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); bottom: calc(var(--u) * 8); padding: calc(var(--u) * 5) calc(var(--u) * 8); }
.grow-list { width: calc(var(--u) * 210); line-height: 1.6; }
.grow-list b { color: var(--hi); display: inline-block; width: calc(var(--u) * 20); }

/* ---------- garden ---------- */
.g-top { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 5); display: flex; gap: calc(var(--u) * 8); background: #0b0a10b0; border: var(--u) solid var(--line); padding: calc(var(--u) * 2) calc(var(--u) * 6); font-size: calc(var(--u) * 7.5); pointer-events: none; }
.g-bar { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 6); display: flex; justify-content: center; gap: calc(var(--u) * 5); }
.g-bar .go { font-size: calc(var(--u) * 10); padding: calc(var(--u) * 3) calc(var(--u) * 12); }
.g-title { position: absolute; right: calc(var(--u) * 6); top: calc(var(--u) * 5); font-size: calc(var(--u) * 6); padding: calc(var(--u) * 1) calc(var(--u) * 4); }
.harvest { position: absolute; font-size: calc(var(--u) * 6.5); padding: calc(var(--u) * 1) calc(var(--u) * 4); animation: bob 1.4s infinite; }
.harvest[hidden] { display: none; }
@keyframes bob { 50% { transform: translateY(calc(var(--u) * -2)); } }
.msg { max-width: calc(var(--u) * 300); }
.sp-wrap { position: relative; width: calc(var(--u) * 440); height: calc(var(--u) * 230); display: flex; gap: calc(var(--u) * 6); }
.sp-list { width: calc(var(--u) * 132); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 3); align-content: start; overflow-y: auto; max-height: 100%; padding-right: calc(var(--u) * 2); }
.sp-cell { position: relative; font: inherit; color: var(--text); background: var(--well); border: var(--u) solid var(--g); padding: var(--u); cursor: pointer; aspect-ratio: 1; display: grid; place-items: center; }
.sp-cell.on { box-shadow: 0 0 0 var(--u) #fff, 0 0 calc(var(--u) * 5) var(--g); }
.sp-cell img, .sp-ic, .sp-big { image-rendering: pixelated; width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
.sp-big { width: calc(var(--u) * 56); height: calc(var(--u) * 56); background: radial-gradient(var(--line-soft), transparent 70%); }
.sp-cell .lv { position: absolute; bottom: 0; right: var(--u); font-size: calc(var(--u) * 5.5); text-shadow: 0 var(--u) 0 #000; }
.sp-cell .tag { position: absolute; top: 0; left: 0; font-size: calc(var(--u) * 5); background: #c48412; padding: 0 var(--u); }
.sp-cell .tag.sub { background: #1c76bc; }
.sp-detail { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 3); overflow-y: auto; }
.moves { display: flex; flex-direction: column; gap: var(--u); font-size: calc(var(--u) * 6.5); background: var(--well); padding: calc(var(--u) * 3); border: var(--u) solid var(--line-soft); }
.mv b { color: var(--hi); display: inline-block; min-width: calc(var(--u) * 22); }
.acts { flex-wrap: wrap; gap: calc(var(--u) * 3); margin-top: auto; }
.acts .btn { font-size: calc(var(--u) * 7); padding: calc(var(--u) * 2) calc(var(--u) * 5); }
.dev-acts { margin-top: 0; align-items: center; border-top: var(--u) dashed #3cd650; padding-top: calc(var(--u) * 3); }
.sp-wrap .x { position: absolute; right: calc(var(--u) * 4); top: calc(var(--u) * 4); font-size: calc(var(--u) * 6); padding: var(--u) calc(var(--u) * 4); }
.fac-wrap { width: calc(var(--u) * 300); display: flex; flex-direction: column; gap: calc(var(--u) * 5); }
.fac { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--u) calc(var(--u) * 6); background: var(--well); padding: calc(var(--u) * 4); border: var(--u) solid var(--line-soft); }
.fac .small { grid-column: 1; }
.fac .btn { grid-column: 2; grid-row: 1 / span 2; font-size: calc(var(--u) * 7); }

/* ---------- absorb / results / gacha ---------- */
.absorb-cap { position: absolute; left: 0; right: 0; top: calc(var(--u) * 40); display: flex; flex-direction: column; align-items: center; opacity: 0; transition: opacity .4s, transform .4s; transform: translateY(calc(var(--u) * 6)); text-shadow: 0 var(--u) 0 #000; }
.absorb-cap.on { opacity: 1; transform: none; }
.absorb-cap b { font-size: calc(var(--u) * 16); letter-spacing: .1em; }
.absorb-cap span { font-size: calc(var(--u) * 8); color: var(--dim); }
.skip { position: absolute; right: calc(var(--u) * 6); bottom: calc(var(--u) * 6); font-size: calc(var(--u) * 6.5); padding: var(--u) calc(var(--u) * 5); }
.res-list { min-width: calc(var(--u) * 160); display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.rrow { display: flex; gap: calc(var(--u) * 4); align-items: center; font-size: calc(var(--u) * 9); }
.rrow b { margin-left: auto; color: var(--gold); }
.gacha-ui { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }
.ga-title { margin-top: calc(var(--u) * 26); font-size: calc(var(--u) * 14); font-weight: 700; color: #c4ecff; text-shadow: 0 0 calc(var(--u) * 6) var(--water), 0 var(--u) 0 #000; letter-spacing: .2em; }
.ga-rates { margin-top: calc(var(--u) * 2); text-shadow: 0 var(--u) 0 #000; }
.ga-btns { position: absolute; bottom: calc(var(--u) * 14); display: flex; gap: calc(var(--u) * 8); }
.ga-btns .btn { font-size: calc(var(--u) * 9); padding: calc(var(--u) * 4) calc(var(--u) * 10); }
.gacha-ui .back { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 5); font-size: calc(var(--u) * 6.5); padding: var(--u) calc(var(--u) * 5); }
.ga-results { margin-top: calc(var(--u) * 24); display: grid; grid-template-columns: repeat(5, calc(var(--u) * 70)); gap: calc(var(--u) * 5); justify-content: center; }
.ga-card { background: linear-gradient(#17142aee, #0e0c1cee); border: var(--u) solid var(--g); display: flex; flex-direction: column; align-items: center; padding: calc(var(--u) * 3) 0; font-size: calc(var(--u) * 7); animation: flip .5s backwards; }
.ga-card img { width: calc(var(--u) * 40); height: calc(var(--u) * 40); image-rendering: pixelated; }
.ga-card.g3 { box-shadow: 0 0 calc(var(--u) * 6) var(--g); }
.ga-card.g4 { box-shadow: 0 0 calc(var(--u) * 10) var(--g), inset 0 0 calc(var(--u) * 8) #ffd84a50; animation: flip .5s backwards, glowp 1.2s infinite; }
.ga-card .new { color: #7ee88a; }
@keyframes flip { from { transform: rotateY(90deg) scale(.6); opacity: 0; } }
@keyframes glowp { 50% { box-shadow: 0 0 calc(var(--u) * 16) var(--g), inset 0 0 calc(var(--u) * 8) #ffd84a80; } }

#rotate { display: none; position: fixed; inset: 0; z-index: 50; background: #07060d; color: #f1ecff; flex-direction: column; align-items: center; justify-content: center; font-size: 5vw; text-align: center; }
#rotate div { font-size: 14vw; animation: rot 2s infinite; }
@keyframes rot { 50% { transform: rotate(90deg); } }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }

/* ---------- boss presentation ---------- */
.letterbox i { position: absolute; left: 0; right: 0; height: calc(var(--u) * 26); background: #000; transition: transform .6s cubic-bezier(.2,.8,.2,1); z-index: 3; }
.letterbox i:first-child { top: 0; transform: translateY(-100%); }
.letterbox i:last-child { bottom: 0; transform: translateY(100%); }
.letterbox.on i { transform: none; }
.titlecard { position: absolute; left: 0; right: 0; top: calc(var(--u) * 150); display: flex; flex-direction: column; align-items: center; z-index: 4; animation: tc 2.5s forwards; }
.tc-sub { font-size: calc(var(--u) * 8); color: #c8c0ff; letter-spacing: .5em; text-shadow: 0 var(--u) 0 #000; }
.tc-name { font-size: calc(var(--u) * 22); font-weight: 700; color: #fff; letter-spacing: .12em; text-shadow: 0 0 calc(var(--u) * 8) var(--c), calc(var(--u) * 2) calc(var(--u) * 2) 0 #000; }
.tc-line { display: block; height: var(--u); width: calc(var(--u) * 260); background: linear-gradient(90deg, transparent, var(--c), #fff, var(--c), transparent); margin-top: calc(var(--u) * 3); animation: tcl .8s backwards .2s; }
@keyframes tc { 0% { opacity: 0; transform: scale(1.4); filter: blur(4px); } 12% { opacity: 1; transform: scale(1); filter: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes tcl { from { transform: scaleX(0); } }
.bossbar { width: calc(var(--u) * 260); top: calc(var(--u) * 22); }
.bossbar .bname { font-size: calc(var(--u) * 9); font-weight: 700; color: #fff; text-shadow: 0 0 calc(var(--u) * 4) #ffb84a, 0 var(--u) 0 #000; }
.bossbar .bname small { display: block; font-size: calc(var(--u) * 5.5); color: #c8c0ff; letter-spacing: .3em; font-weight: 400; }
.bframe { padding: var(--u); background: linear-gradient(var(--gold-deep), #2a1a06); border: var(--u) solid var(--gold); box-shadow: 0 0 0 var(--u) #000, 0 0 calc(var(--u) * 6) #ffb84a60; position: relative; }
.bframe::before, .bframe::after { content: ""; position: absolute; top: 50%; width: calc(var(--u) * 6); height: calc(var(--u) * 6); background: var(--gold); transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 0 var(--u) #000; }
.bframe::before { left: calc(var(--u) * -4); } .bframe::after { right: calc(var(--u) * -4); }
.bossbar .bar { height: calc(var(--u) * 6); border: 0; background: #1a0a10; }
.bossbar .bar i { background: linear-gradient(#ff8a6a, #e8303a 50%, #8a1020); z-index: 2; }
.bossbar .bar .lag { position: absolute; inset: 0; right: auto; background: #ffe0a0; z-index: 1; }
.bossbar .bar .notch { position: absolute; left: 50%; top: 0; bottom: 0; width: var(--u); background: var(--gold); z-index: 3; }
.bossbar.p2 .bframe { border-color: #ff6a2a; box-shadow: 0 0 0 var(--u) #000, 0 0 calc(var(--u) * 8) #ff6a2a; animation: p2 1s infinite; }
@keyframes p2 { 50% { box-shadow: 0 0 0 var(--u) #000, 0 0 calc(var(--u) * 14) #ff6a2a; } }

/* ---------- accounts ---------- */
.btn.sm { font-size: calc(var(--u) * 6.5); padding: var(--u) calc(var(--u) * 5); }
.acct { position: absolute; right: calc(var(--u) * 5); top: calc(var(--u) * 5); display: flex; gap: calc(var(--u) * 4); align-items: center; font-size: calc(var(--u) * 7); text-shadow: 0 var(--u) 0 #000; }
.devtag { background: #0a3c16; color: #a4ffa8; border: var(--u) solid #3cd650; padding: 0 var(--u); font-size: calc(var(--u) * 5.5); }
.auth-box { width: calc(var(--u) * 230); display: flex; flex-direction: column; gap: calc(var(--u) * 5); }
.auth .tabs { display: flex; }
.auth .tab { flex: 1; font: inherit; color: var(--dim); background: var(--well); border: var(--u) solid var(--line); padding: calc(var(--u) * 3); cursor: pointer; }
.auth .tab.on { color: var(--text); background: var(--panel2); border-color: var(--hi); }
.auth input { font: inherit; font-size: calc(var(--u) * 8); color: var(--text); background: var(--ink); border: var(--u) solid var(--line); padding: calc(var(--u) * 3) calc(var(--u) * 4); outline: none; width: 100%; user-select: text; -webkit-user-select: text; }
.auth input:focus { border-color: var(--hi); }
.auth .err { color: #ff8a8a; min-height: calc(var(--u) * 8); font-size: calc(var(--u) * 6.5); }
.auth .note { line-height: 1.6; }
.devgift .ov-title .dim { color: #3cd650; }
.term { background: #020a04; color: #3cd650; border: var(--u) solid #106624; padding: calc(var(--u) * 4); font-family: "Galmuri9", monospace; font-size: calc(var(--u) * 6.5); white-space: pre-wrap; margin: 0 0 calc(var(--u) * 4); text-shadow: 0 0 calc(var(--u) * 3) #3cd650; }

/* ---------- dex ---------- */
.dex-wrap { width: calc(var(--u) * 440); height: calc(var(--u) * 238); display: flex; flex-direction: column; gap: calc(var(--u) * 4); }
.dex-body { flex: 1; display: flex; gap: calc(var(--u) * 6); min-height: 0; }
.dex-grid { width: calc(var(--u) * 250); overflow-y: auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(var(--u) * 2); align-content: start; padding-right: calc(var(--u) * 2); }
.dex-head { grid-column: 1 / -1; font-size: calc(var(--u) * 7); font-weight: 700; margin-top: calc(var(--u) * 2); border-bottom: var(--u) solid var(--line-soft); }
.dex-cell { font: inherit; color: var(--g); background: var(--well); border: var(--u) solid var(--line-soft); display: flex; flex-direction: column; align-items: center; padding: var(--u) 0; cursor: pointer; font-size: calc(var(--u) * 4.5); letter-spacing: -0.05em; }
.dex-cell img { width: calc(var(--u) * 26); height: calc(var(--u) * 26); image-rendering: pixelated; }
.dex-cell.on { border-color: var(--g); box-shadow: 0 0 calc(var(--u) * 4) var(--g); }
.un img, img.un { filter: brightness(0) drop-shadow(0 0 1px #5a508a); opacity: .7; }
.dex-info { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.trait { color: #9bdcff; } .trait b { color: #c4ecff; }
.g-bar .btn { padding: calc(var(--u) * 3) calc(var(--u) * 6); }

/* ---- spirit care ---- */
.care-box { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--u) * 4); width: calc(var(--u) * 300); display: flex; flex-direction: column; gap: calc(var(--u) * 2); padding: calc(var(--u) * 4) calc(var(--u) * 6); }
.care-box .acts { margin-top: 0; gap: calc(var(--u) * 3); }
.care-box .btn.sm, .care-wrap .btn.sm { font-size: calc(var(--u) * 6.5); padding: calc(var(--u) * 2) calc(var(--u) * 4); }
.cb-head { gap: calc(var(--u) * 4); align-items: center; }
.cbar { display: inline-block; width: calc(var(--u) * 34); height: calc(var(--u) * 4); background: #1a1626; border: var(--u) solid var(--line-soft); vertical-align: middle; margin-right: calc(var(--u) * 3); }
.cbar i { display: block; height: 100%; }
.hearts { display: flex; align-items: center; gap: calc(var(--u) * 1); }
.hrt { display: inline-block; width: calc(var(--u) * 5); height: calc(var(--u) * 5); background: var(--line-soft); clip-path: polygon(50% 100%, 0 40%, 0 15%, 20% 0, 50% 20%, 80% 0, 100% 15%, 100% 40%); }
.hrt.on { background: #ff5a8a; }
.hrt-t { color: #ff7aa8; }
.seed-list { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 3); max-height: calc(var(--u) * 150); overflow-y: auto; }
.seed { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: var(--u); font-size: calc(var(--u) * 7); }
.care-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 3); max-height: calc(var(--u) * 110); overflow-y: auto; }
.care-cell { display: flex; gap: calc(var(--u) * 3); align-items: center; text-align: left; background: var(--well); border: var(--u) solid var(--line-soft); color: var(--text); font: inherit; font-size: calc(var(--u) * 6.5); padding: calc(var(--u) * 2); cursor: pointer; }
.care-cell:hover { border-color: var(--hi); }
.chip { display: inline-block; border: var(--u) solid var(--c); color: var(--c); padding: 0 calc(var(--u) * 2); margin: var(--u) 0; }
.inp { font: inherit; font-size: calc(var(--u) * 9); color: var(--text); background: var(--ink); border: var(--u) solid var(--line); padding: calc(var(--u) * 3) calc(var(--u) * 4); outline: none; width: calc(var(--u) * 120); text-align: center; user-select: text; -webkit-user-select: text; }
.badge { display: inline-block; min-width: calc(var(--u) * 7); background: #ff5a6a; color: #fff; border-radius: calc(var(--u) * 4); font-size: calc(var(--u) * 5.5); padding: 0 calc(var(--u) * 1.5); margin-left: var(--u); }
.sp-portrait { width: calc(var(--u) * 84); height: calc(var(--u) * 84); flex: none; background: radial-gradient(var(--line-soft) 0%, var(--panel) 55%, transparent 72%); border-bottom: var(--u) solid var(--line); }
.hpbar > i { background: var(--good); } .hpbar.low > i { background: var(--bad); }