@font-face { font-family: Bangers; src: url("assets/fonts/bangers-regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
* { box-sizing: border-box; }
:root {
  --ink: #171526;
  --night: #211d43;
  --night-deep: #111021;
  --panel: #30295a;
  --panel-light: #463a7a;
  --paper: #fff3c9;
  --muted: #c9c2ed;
  --cyan: #45e5d1;
  --yellow: #ffd45b;
  --coral: #ff6d78;
  --violet: #9b7cff;
}
body { margin: 0; overscroll-behavior: none; background: #0b0915; color: var(--paper); font: 15px "Trebuchet MS", system-ui, sans-serif; }
html, body { width: 100%; height: 100%; overflow: hidden; }
.boot-screen { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 45%, rgba(48,41,90,.76), rgba(11,9,21,.98) 70%); opacity: 1; transition: opacity .22s ease; }
.boot-screen[hidden] { display: none; }
.boot-screen.is-hidden { opacity: 0; pointer-events: none; }
.boot-card { display: grid; justify-items: center; gap: 12px; width: min(100%, 300px); padding: 22px 20px; border: 2px solid rgba(201,194,237,.26); border-radius: 16px; background: rgba(33,29,67,.94); box-shadow: 0 5px 0 rgba(9,8,18,.72); text-align: center; }
.boot-title { color: var(--paper); font: 900 21px "Arial Black", "Trebuchet MS", sans-serif; }
.boot-status, .boot-percent { color: var(--muted); font-size: 12px; font-weight: 800; }
.boot-progress { width: 100%; height: 12px; overflow: hidden; border: 2px solid var(--ink); border-radius: 999px; background: rgba(9,8,18,.8); }
.boot-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), #66d9b5); transition: width .14s ease-out; }
.boot-retry { padding: 8px 14px; border: 2px solid var(--ink); border-radius: 10px; background: var(--panel-light); color: var(--paper); font: inherit; font-weight: 800; }
main { height: 100vh; height: 100dvh; min-height: 0; max-width: 520px; margin: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; background-image: linear-gradient(180deg, rgba(8,11,29,.32) 0%, rgba(8,11,29,.06) 54%, rgba(8,11,29,.72) 100%), url("assets/forest_battle_bg.webp"); background-position: center; background-size: cover; background-repeat: no-repeat; }
.hud-top { display: grid; grid-template-columns: minmax(76px, .8fr) minmax(180px, 1.8fr) auto; align-items: start; gap: 8px; }
.hud-top[hidden] { display: none; }
.player-badge { display: grid; gap: 4px; min-width: 0; padding: 7px 8px; border: 2px solid rgba(23,21,38,.9); border-radius: 14px; background: rgba(33,29,67,.78); box-shadow: 0 3px 0 rgba(9,8,18,.72); backdrop-filter: blur(3px); }
.player-name-label { overflow: hidden; color: var(--yellow); font-size: 10px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.player-badge .stats { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--paper); }
.player-badge .bar { height: 8px; border-width: 2px; }
.stage-cluster { display: grid; gap: 3px; min-width: 0; padding-top: 2px; }
.coin { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 2px solid rgba(201,196,224,.28); border-radius: 12px; background: linear-gradient(145deg, rgba(40,45,68,.94), rgba(23,25,43,.96)); color: var(--paper); box-shadow: 0 3px 0 rgba(7,8,15,.72); font-weight: 900; }
.coin-icon { display: inline-block; flex: 0 0 29px; width: 29px; height: 29px; background: url("assets/dragon_eye_coin_spin_90.png") 0 0 / 1000% 900% no-repeat; filter: drop-shadow(0 1px 2px rgba(0,0,0,.58)); animation: balanceCoinSpin 3s steps(1, end) infinite; }
.coin b { font-size: 14px; }
.coin strong { font-size: 18px; }
@keyframes balanceCoinSpin {
  0%, 100% { background-position: 0% 0%; }
  1.1111% { background-position: 11.1111% 0%; }
  2.2222% { background-position: 22.2222% 0%; }
  3.3333% { background-position: 33.3333% 0%; }
  4.4444% { background-position: 44.4444% 0%; }
  5.5556% { background-position: 55.5556% 0%; }
  6.6667% { background-position: 66.6667% 0%; }
  7.7778% { background-position: 77.7778% 0%; }
  8.8889% { background-position: 88.8889% 0%; }
  10% { background-position: 100% 0%; }
  11.1111% { background-position: 0% 12.5%; }
  12.2222% { background-position: 11.1111% 12.5%; }
  13.3333% { background-position: 22.2222% 12.5%; }
  14.4444% { background-position: 33.3333% 12.5%; }
  15.5556% { background-position: 44.4444% 12.5%; }
  16.6667% { background-position: 55.5556% 12.5%; }
  17.7778% { background-position: 66.6667% 12.5%; }
  18.8889% { background-position: 77.7778% 12.5%; }
  20% { background-position: 88.8889% 12.5%; }
  21.1111% { background-position: 100% 12.5%; }
  22.2222% { background-position: 0% 25%; }
  23.3333% { background-position: 11.1111% 25%; }
  24.4444% { background-position: 22.2222% 25%; }
  25.5556% { background-position: 33.3333% 25%; }
  26.6667% { background-position: 44.4444% 25%; }
  27.7778% { background-position: 55.5556% 25%; }
  28.8889% { background-position: 66.6667% 25%; }
  30% { background-position: 77.7778% 25%; }
  31.1111% { background-position: 88.8889% 25%; }
  32.2222% { background-position: 100% 25%; }
  33.3333% { background-position: 0% 37.5%; }
  34.4444% { background-position: 11.1111% 37.5%; }
  35.5556% { background-position: 22.2222% 37.5%; }
  36.6667% { background-position: 33.3333% 37.5%; }
  37.7778% { background-position: 44.4444% 37.5%; }
  38.8889% { background-position: 55.5556% 37.5%; }
  40% { background-position: 66.6667% 37.5%; }
  41.1111% { background-position: 77.7778% 37.5%; }
  42.2222% { background-position: 88.8889% 37.5%; }
  43.3333% { background-position: 100% 37.5%; }
  44.4444% { background-position: 0% 50%; }
  45.5556% { background-position: 11.1111% 50%; }
  46.6667% { background-position: 22.2222% 50%; }
  47.7778% { background-position: 33.3333% 50%; }
  48.8889% { background-position: 44.4444% 50%; }
  50% { background-position: 55.5556% 50%; }
  51.1111% { background-position: 66.6667% 50%; }
  52.2222% { background-position: 77.7778% 50%; }
  53.3333% { background-position: 88.8889% 50%; }
  54.4444% { background-position: 100% 50%; }
  55.5556% { background-position: 0% 62.5%; }
  56.6667% { background-position: 11.1111% 62.5%; }
  57.7778% { background-position: 22.2222% 62.5%; }
  58.8889% { background-position: 33.3333% 62.5%; }
  60% { background-position: 44.4444% 62.5%; }
  61.1111% { background-position: 55.5556% 62.5%; }
  62.2222% { background-position: 66.6667% 62.5%; }
  63.3333% { background-position: 77.7778% 62.5%; }
  64.4444% { background-position: 88.8889% 62.5%; }
  65.5556% { background-position: 100% 62.5%; }
  66.6667% { background-position: 0% 75%; }
  67.7778% { background-position: 11.1111% 75%; }
  68.8889% { background-position: 22.2222% 75%; }
  70% { background-position: 33.3333% 75%; }
  71.1111% { background-position: 44.4444% 75%; }
  72.2222% { background-position: 55.5556% 75%; }
  73.3333% { background-position: 66.6667% 75%; }
  74.4444% { background-position: 77.7778% 75%; }
  75.5556% { background-position: 88.8889% 75%; }
  76.6667% { background-position: 100% 75%; }
  77.7778% { background-position: 0% 87.5%; }
  78.8889% { background-position: 11.1111% 87.5%; }
  80% { background-position: 22.2222% 87.5%; }
  81.1111% { background-position: 33.3333% 87.5%; }
  82.2222% { background-position: 44.4444% 87.5%; }
  83.3333% { background-position: 55.5556% 87.5%; }
  84.4444% { background-position: 66.6667% 87.5%; }
  85.5556% { background-position: 77.7778% 87.5%; }
  86.6667% { background-position: 88.8889% 87.5%; }
  87.7778% { background-position: 100% 87.5%; }
  88.8889% { background-position: 0% 100%; }
  90% { background-position: 11.1111% 100%; }
  91.1111% { background-position: 22.2222% 100%; }
  92.2222% { background-position: 33.3333% 100%; }
  93.3333% { background-position: 44.4444% 100%; }
  94.4444% { background-position: 55.5556% 100%; }
  95.5556% { background-position: 66.6667% 100%; }
  96.6667% { background-position: 77.7778% 100%; }
  97.7778% { background-position: 88.8889% 100%; }
  98.8889% { background-position: 100% 100%; }
}
@media (prefers-reduced-motion: reduce) { .coin-icon { animation-duration: 6s; } }
.stats, .note { font-size: 13px; color: var(--muted); font-weight: 700; }
.bar { height: 14px; border: 3px solid var(--ink); border-radius: 999px; overflow: hidden; background: #0b0a16; box-shadow: inset 0 2px 0 rgba(255,255,255,.08); }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), #8bffbe); transition: width .14s ease-out; }
.stage-row { position: relative; display: grid; align-items: center; }
.stage-track { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; min-width: 0; }
.stage-track > i { height: 4px; background: repeating-linear-gradient(90deg, #766ca5 0 7px, transparent 7px 13px); }
.stage-node { display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid var(--ink); border-radius: 50%; background: #393259; color: var(--muted); box-shadow: 0 3px 0 #0b0915; font: 900 12px "Arial Black", "Trebuchet MS", sans-serif; }
.stage-node.done { background: #423b70; color: var(--cyan); }
.stage-node.current { width: 40px; height: 40px; background: linear-gradient(145deg, #45e5d1, #47a9e8); color: var(--ink); box-shadow: 0 4px 0 #176d83, 0 0 18px rgba(69,229,209,.42); }
.boss-button { position: absolute; top: 45px; right: 0; z-index: 5; min-height: 42px; padding: 5px 8px; border: 3px solid var(--ink); border-radius: 10px; background: linear-gradient(#ff8a45, #ef482f); color: white; box-shadow: 0 4px 0 #8c251f; font: 900 10px "Arial Black", "Trebuchet MS", sans-serif; line-height: 1.1; text-align: center; }
.boss-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #8c251f; }
.boss-button[hidden] { display: none; }
.stage-status { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 16px; color: var(--muted); font-size: 10px; font-weight: 800; text-align: center; }
.boss-timer { color: var(--yellow); font: 900 13px "Arial Black", "Trebuchet MS", sans-serif; }
.view { display: none; flex: 1 1 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; contain: layout style paint; }
.view.on { display: block; }
#hunt.view.on { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.arena { flex: 1; min-height: 440px; position: relative; text-align: center; overflow: hidden; padding: 0; contain: layout paint; touch-action: manipulation; background: transparent; }
.arena > * { position: relative; z-index: 1; }
.arena { touch-action: none; user-select: none; }
.rune-layer { position: absolute; inset: 0; z-index: 12; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rune-layer path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rune-trail { stroke: #ffd9a0; stroke-width: 4; opacity: 0; transition: opacity .35s; }
.rune-layer.drawing .rune-trail { opacity: .32; }
.rune-layer.fading .rune-trail { opacity: 0; }
.rune-seal { stroke: #ffb94f; stroke-width: 5; opacity: 0; }
.rune-layer.recognized .rune-trail { opacity: .12; }
.rune-charge { stroke: #fff2b7; stroke-width: 3; opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rune-circle { fill: none; stroke: #ffc46b; stroke-width: 2; opacity: 0; }
.rune-inner-ring { stroke-width: 1; opacity: .45; stroke-dasharray: 6 12; }
.rune-medallion { opacity: .2; stroke: #a78359; }
.rune-medallion-ring { fill: #21192d; fill-opacity: .7; stroke-width: 1.5; }
.rune-glyph { stroke-width: 2; }
.explosive-mark, .seal-explosion { position: absolute; left: 50%; top: 56%; width: 1px; height: 1px; z-index: 6; pointer-events: none; }
.seal-fireball { position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: -14px; transform: translate(var(--orb-x), var(--orb-y)); }
.seal-fireball b { position: relative; display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 3px #ff9e2599) drop-shadow(0 0 7px #ff581b55); animation: sealFireballAppear .22s ease-out both; }
.flame-sphere { position: absolute; left: 0; bottom: 0; z-index: 2; width: 28px; height: 28px; animation: flameSphereGlow .55s var(--flame-phase) ease-in-out infinite alternate; }
.flame-tongue { position: absolute; bottom: 14px; display: block; transform-origin: 50% 100%; background: #ff9328; clip-path: polygon(50% 0, 76% 30%, 100% 72%, 84% 100%, 16% 100%, 0 72%, 28% 42%); animation: flameTongueDance .36s var(--flame-phase) ease-in-out infinite alternate; }
.flame-tongue::after { content: ''; position: absolute; left: 32%; bottom: 0; width: 50%; height: 70%; background: #ffda62; clip-path: polygon(55% 0, 100% 75%, 80% 100%, 0 100%); }
.flame-main { left: 8px; width: 17px; height: 25px; }
.flame-left { left: 1px; width: 13px; height: 17px; animation-duration: .29s; animation-direction: alternate-reverse; }
.flame-right { left: 18px; width: 12px; height: 20px; animation-duration: .43s; }
.seal-fireball b::before { content: ''; position: absolute; left: 14px; top: 3px; width: 2px; height: 3px; background: #ffe190; box-shadow: -9px 5px #ffb63b, 9px -2px #ffcb68; animation: flameEmbers .6s var(--flame-phase) linear infinite; }
.seal-fireball.flying b { animation: none; transform: rotate(-90deg); }
.seal-fireball.flying { animation: sealFireballFlight .28s ease-in both; }
.seal-fireball.flying::before { content: ''; position: absolute; right: 12px; top: 4px; width: 48px; height: 20px; background: linear-gradient(90deg, transparent, #ef471866 20%, #ff9526cc 70%, #ffe58a); filter: drop-shadow(0 0 3px #ff8f35); animation: flameTailDance .12s ease-in-out infinite alternate; }
@keyframes sealFireballAppear { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes flameTongueDance { from { transform: scale(.96, .9) skewX(-5deg); clip-path: polygon(50% 0, 76% 30%, 100% 72%, 84% 100%, 16% 100%, 0 72%, 28% 42%); } to { transform: scale(1.02, 1.08) skewX(5deg); clip-path: polygon(62% 0, 70% 35%, 100% 72%, 84% 100%, 16% 100%, 0 72%, 20% 35%); } }
@keyframes flameSphereGlow { from { filter: brightness(1); } to { filter: brightness(1.09); } }
@keyframes flameEmbers { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(5px, -24px); } }
@keyframes flameTailDance { from { clip-path: polygon(0 36%, 24% 54%, 42% 8%, 58% 32%, 82% 0, 100% 35%, 100% 80%, 74% 100%, 46% 69%, 22% 82%); } to { clip-path: polygon(0 65%, 24% 35%, 42% 32%, 58% 5%, 82% 22%, 100% 35%, 100% 80%, 74% 85%, 46% 100%, 22% 53%); } }
@keyframes sealFireballFlight { from { transform: translate(var(--orb-x), var(--orb-y)) rotate(var(--orb-angle)) scale(1); } to { transform: translate(0, 0) rotate(var(--orb-angle)) scale(.7); } }
.seal-explosion { width: 50px; height: 50px; transform: translate(-50%, -50%); opacity: 0; }
.seal-explosion i { position: absolute; inset: 0; background: radial-gradient(circle, #fff4ba, #ffb23eaa 25%, #ff5d1b66 45%, transparent 70%); clip-path: polygon(50% 0, 61% 30%, 91% 14%, 72% 43%, 100% 55%, 69% 64%, 83% 94%, 54% 74%, 31% 100%, 35% 69%, 0 66%, 27% 46%, 9% 14%, 40% 31%); }
.seal-explosion.burst { animation: sealFireballImpact .24s ease-out; }
@keyframes sealFireballImpact { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.7) rotate(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2) rotate(18deg); } }
.explosive-skill svg { width: 100%; height: 100%; }
.explosive-info { left: 70px; }
@media (prefers-reduced-motion: reduce) { .seal-fireball b, .seal-fireball b::before, .flame-sphere, .flame-tongue { animation: none; } .seal-fireball.flying::before { animation: none; clip-path: polygon(0 50%, 80% 0, 100% 50%, 80% 100%); } .seal-explosion.burst { animation-duration: .15s; } }
.rune-sparks { stroke: #ffe1a0; stroke-width: 2; }
.rune-sparks path { opacity: 0; }
.rune-layer.recognized .rune-seal { animation: runeIgnite 1.3s ease-out both; }
.rune-layer.recognized .rune-charge { animation: runeCharge 1.3s ease-out both; }
.rune-layer.recognized .rune-circle { animation: runeCircle 1.3s ease-out both; }
.rune-layer.recognized .rune-medallion { animation: runeMedallion .12s var(--rune-delay) ease-out both; }
.rune-layer.recognized .rune-sparks path { animation: runeSpark .5s .78s ease-out both; }
@keyframes runeIgnite { 0% { opacity: .5; } 35% { opacity: .9; } 55% { opacity: 1; stroke: #ffc46b; } 60% { opacity: 1; stroke: #ff694a; filter: drop-shadow(0 0 8px #ff7a20); } 100% { opacity: 0; } }
@keyframes runeCharge { 0% { opacity: 1; stroke-dashoffset: 1; } 45%, 60% { opacity: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px #ffd080); } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes runeCircle { 0% { opacity: 0; transform: scale(.85) rotate(-12deg); } 25%, 48% { opacity: .65; transform: scale(1) rotate(0deg); } 55% { opacity: .9; transform: scale(.94); } 62% { opacity: .85; transform: scale(1.08); stroke: #ff8150; } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes runeSpark { 0% { opacity: .9; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)); } }
@keyframes runeMedallion { 0% { opacity: .2; stroke: #a78359; filter: none; } 70% { opacity: 1; stroke: #fff7ca; filter: drop-shadow(0 0 6px #ffb347); } 100% { opacity: 1; stroke: #ffe59b; filter: drop-shadow(0 0 4px #ffab39); } }
.skill-rune-hint { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.skill-rune-hint svg { width: 15px; height: 18px; flex-shrink: 0; }
.skill-rune-hint path { fill: none; stroke: #ffd479; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.skill-info .skill-rune-hint span { color: #d9cbe2; font-size: 10px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .rune-layer.recognized .rune-seal, .rune-layer.recognized .rune-circle { animation: none; opacity: .7; } .rune-layer.recognized .rune-charge, .rune-layer.recognized .rune-sparks path { animation: none; } }
.enemy-info { position: absolute; z-index: 4; left: 50%; top: calc(50% - 180px); width: min(86%, 390px); transform: translateX(-50%); pointer-events: none; }
.arena h2 { margin: 0; color: var(--paper); font: 900 18px "Arial Black", "Trebuchet MS", sans-serif; text-shadow: 2px 2px 0 var(--ink); }
.arena small { color: #f5e8ff; font-weight: 800; }
.enemy-hud { margin-top: 5px; }
.hp { height: 15px; border-radius: 3px; transform: skewX(-10deg); background: #151323; box-shadow: 0 3px 0 #090812, inset 0 2px 0 rgba(255,255,255,.08); }
.hp i { background: linear-gradient(90deg, var(--coral), #ffb15f); }
.arena.boss-fight { background: radial-gradient(circle at 50% 58%, rgba(255,58,68,.16), transparent 42%); }
.arena.boss-fight h2 { color: var(--yellow); }
.monster { position: absolute; width: 300px; height: 300px; left: 50%; top: 56%; transform: translate(-50%, -50%); object-fit: contain; image-rendering: pixelated; pointer-events: none; -webkit-tap-highlight-color: transparent; user-select: none; will-change: contents; }
.monster.boss-sprite { image-rendering: auto; }
.arena > .monster-arrival-wind { position: absolute; z-index: 3; transform: translate(-50%, -50%); pointer-events: none; }
.monster-arrival-wind svg { width: 100%; height: 100%; overflow: visible; }
.arrival-stream { stroke: #b8e8f2; stroke-width: 3; stroke-linejoin: bevel; stroke-linecap: round; transform-origin: 150px 180px; opacity: 0; animation: monsterWindGather 800ms ease-out both; }
.arrival-stream .arrival-thread { stroke: #e5faff; stroke-width: 1.3; opacity: .6; }
.arrival-stream-mid { animation-delay: 55ms; stroke-width: 2.5; }
.arrival-stream-high { animation-delay: 100ms; stroke-width: 2; }
.arrival-motes { stroke: #d8f4fa; stroke-width: 2; stroke-linecap: round; transform-origin: 150px 180px; animation: monsterWindScatter 850ms ease-out both; }
@keyframes monsterWindGather {
  0% { opacity: 0; transform: translateY(30px) scaleX(.7); stroke-dasharray: 60 420; stroke-dashoffset: 120; }
  22% { opacity: .75; }
  58% { opacity: .6; transform: translateY(-8px) scaleX(1); stroke-dasharray: 220 260; stroke-dashoffset: -150; }
  100% { opacity: 0; transform: translateY(-32px) scaleX(1.18); stroke-dasharray: 35 445; stroke-dashoffset: -370; }
}
@keyframes monsterWindScatter {
  0%, 35% { opacity: 0; transform: scale(.8); }
  55% { opacity: .6; }
  100% { opacity: 0; transform: scale(1.25) translateY(-12px); }
}
.slash-layer { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.click-slash { --angle: 0deg; --shift-x: 0px; --shift-y: 0px; --cut-brightness: 1; --cut-duration: 220ms; --cut-width: 230px; --cut-start: inset(0 100% 0 0); position: absolute; left: 50%; top: 56%; width: var(--cut-width); height: var(--cut-width); opacity: 0; transform-origin: center; background: url("assets/click-slash-thin-v1.png") center / contain no-repeat; filter: var(--strike-filter, none) brightness(var(--cut-brightness)); }
.click-slash.play { animation: clickComboCut var(--cut-duration) ease-out both; }
.loot-layer { position: absolute; inset: 0; z-index: 7; overflow: hidden; pointer-events: none; }
.damage-layer { position: absolute; inset: 0; z-index: 8; overflow: hidden; pointer-events: none; }
.damage-pop { --damage-tilt: 0deg; position: absolute; display: block; color: var(--coral); font: 900 17px "Arial Black", "Trebuchet MS", sans-serif; line-height: 1; text-shadow: 2px 2px 0 var(--ink), 0 0 8px rgba(255,109,120,.55); white-space: nowrap; transform: translate(-50%, 0); animation: damagePop 1.05s ease-out forwards; }
.damage-pop[hidden] { display: none; }
.damage-pop.damage-miss { color: #67c5ff; text-shadow: 2px 2px 0 #102344, 0 0 9px rgba(76,174,255,.78); }
.damage-pop.damage-skill { --damage-tilt: -5deg; color: var(--yellow); font: 400 44px Bangers, Impact, "Arial Black", sans-serif; letter-spacing: 1px; text-shadow: 3px 3px 0 #6c321d, 0 0 7px #ffb14a, 0 0 18px rgba(255,212,91,.75); }
.damage-pop.damage-critical { color: #ffe680; text-shadow: 2px 2px 0 #49311b, 0 0 10px rgba(255,202,75,.92), 0 0 20px rgba(255,178,55,.56); }
.damage-pop.damage-glancing { color: #85d7ff; text-shadow: 2px 2px 0 #102344, 0 0 9px rgba(76,174,255,.72); }
.damage-pop.damage-bleed { color: #ff91a4; text-shadow: 2px 2px 0 #421827, 0 0 9px rgba(255,87,122,.76); }
.loot-drop { position: absolute; left: 50%; top: 61%; width: 1px; height: 1px; contain: layout; }
.loot-coin { --spin-delay: 0ms; position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; opacity: 0; background: url("assets/dragon_eye_coin_spin_90.png") 0 0 / 1000% 900% no-repeat; filter: drop-shadow(0 0 2px rgba(255,236,143,.9)) drop-shadow(0 0 7px rgba(255,178,43,.7)) drop-shadow(0 2px 1px rgba(0,0,0,.5)); animation: balanceCoinSpin 3s steps(1, end) var(--spin-delay) infinite; }
.loot-gem { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; object-fit: contain; opacity: 0; filter: brightness(1.4) saturate(1.12) drop-shadow(0 0 3px rgba(104,255,245,.95)) drop-shadow(0 0 8px rgba(0,210,220,.75)) drop-shadow(0 2px 2px rgba(0,0,0,.65)); }
.arena.respawning .enemy-info { visibility: hidden; }
.loot-reward { position: absolute; left: 0; top: -50px; display: grid; gap: 2px; min-width: 100px; transform: translateX(-50%); color: var(--yellow); font: 900 17px "Arial Black", "Trebuchet MS", sans-serif; text-align: center; text-shadow: 2px 2px 0 var(--ink), 0 0 9px rgba(255,212,79,.55); opacity: 0; animation: lootRewardFloat 1.35s ease-out forwards; }
.loot-reward small { color: var(--cyan); font: 900 13px "Arial Black", "Trebuchet MS", sans-serif; }
@keyframes lootRewardFloat {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.85); }
  14% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  62% { opacity: 1; transform: translate(-50%, -45px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -68px) scale(.95); }
}
@keyframes damagePop {
  0% { opacity: 0; transform: translate(-50%, 12px) rotate(var(--damage-tilt)) scale(.82); }
  12% { opacity: 1; transform: translate(-50%, 0) rotate(var(--damage-tilt)) scale(1.08); }
  70% { opacity: 1; transform: translate(-50%, -112px) rotate(var(--damage-tilt)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -142px) rotate(var(--damage-tilt)) scale(.96); }
}
@keyframes clickComboCut {
  0% { opacity: 0; clip-path: var(--cut-start); transform: translate(calc(-50% + var(--shift-x)), calc(-50% + var(--shift-y))) rotate(var(--angle)) scale(.92, 1.196); }
  12% { opacity: 1; }
  35% { opacity: 1; clip-path: inset(0); transform: translate(calc(-50% + var(--shift-x)), calc(-50% + var(--shift-y))) rotate(var(--angle)) scale(1, 1.3); }
  60% { opacity: .85; clip-path: inset(0); }
  100% { opacity: 0; clip-path: inset(0); transform: translate(calc(-50% + var(--shift-x)), calc(-50% + var(--shift-y))) rotate(var(--angle)) scale(1.03, 1.339); }
}
.hit { animation: hit .18s; }
@keyframes hit { 50% { transform: translate(-50%, -50%) scale(1.04); filter: brightness(1.18); } }
.skill-bar { position: relative; display: flex; align-items: center; gap: 8px; min-height: 68px; padding: 2px 8px 7px; }
.skill-button { --cooldown-angle: 0deg; position: relative; width: 62px; height: 62px; padding: 0; overflow: hidden; border: 3px solid var(--ink); border-radius: 15px; background: #2c254d; box-shadow: 0 4px 0 #090812; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-touch-callout: none; transition: opacity .15s ease, transform .08s ease, box-shadow .08s ease; }
.skill-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #090812; }
.skill-button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skill-button.cooling { opacity: .58; }
.cooldown-shade { position: absolute; inset: 3px; border-radius: 10px; background: conic-gradient(rgba(5,4,13,.78) 0deg var(--cooldown-angle), transparent var(--cooldown-angle) 360deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); pointer-events: none; }
.cooldown-time { position: absolute; inset: 0; display: grid; place-items: center; color: white; font: 900 17px "Arial Black", "Trebuchet MS", sans-serif; text-shadow: 0 2px 2px #000; pointer-events: none; }
.skill-info { position: absolute; left: 8px; bottom: calc(100% + 6px); z-index: 8; display: none; min-width: 190px; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 13px; background: linear-gradient(145deg, #514684, #2d2755); box-shadow: 0 5px 0 #090812; text-align: left; pointer-events: none; }
.skill-info.on { display: grid; gap: 4px; }
.skill-info strong { color: var(--yellow); font: 900 14px "Arial Black", "Trebuchet MS", sans-serif; }
.skill-info span { color: var(--paper); font-size: 12px; font-weight: 800; }
.skill-info { left: 0; bottom: calc(100% + 6px); width: min(220px,calc(100vw - 30px)); min-width: 0; padding: 5px 14px 15px; border: 0; border-radius: 0; background: transparent; box-shadow: none; isolation: isolate; }
.skill-info::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("assets/skill-info-stone-v1.webp") center / 100% 100% no-repeat; opacity: .85; pointer-events: none; }
.skill-info.on { display: block; }
.skill-info-heading { display: flex; align-items: center; gap: 6px; height: 34px; padding-bottom: 4px; }
.skill-info-heading img, .skill-info-heading > svg { width: 24px; height: 22px; object-fit: contain; flex-shrink: 0; }
.skill-info-heading strong { color: #ffc46a; font: 900 13px/1.15 "Trebuchet MS",sans-serif; text-shadow: 0 2px #241625; }
.skill-info-stats { margin: 2px 0 0; }
.skill-info-stats > div { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 5px; min-height: 20px; border-bottom: 1px solid #9d7ca54d; }
.skill-info-stats > div:last-child { border-bottom: 0; }
.skill-info-stats dt { color: #f5e8d6; font-size: 11px; font-weight: 700; }
.skill-info-stats dd { margin: 0; color: #ffd479; font-size: 12px; font-weight: 900; text-align: right; }
.skill-info-stats .skill-info-damage { min-height: 29px; }
.skill-info-damage dd b { display: block; font-size: 14px; }
.skill-info-damage dd small { display: block; color: #d9cbe2; font-size: 10px; font-weight: 600; }
.skill-button { border: 0; border-radius: 0; background: #2b1725; clip-path: polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px); }
.skill-button img { object-fit: fill; }
.forge-screen { position: relative; display: grid; align-content: start; gap: 9px; min-height: 610px; overflow: hidden; padding: 11px; border: 2px solid rgba(176,153,101,.55); border-radius: 20px; background: radial-gradient(circle at 72% 12%, rgba(67,91,139,.18), transparent 34%), #101a2d; box-shadow: 0 5px 0 #090812, inset 0 0 0 1px rgba(255,255,255,.04); }
.forge-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(198,164,106,.035) 24px), repeating-linear-gradient(90deg, transparent 0 23px, rgba(198,164,106,.025) 24px); }
.forge-screen > * { position: relative; z-index: 1; }
.forge-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 1px 2px 2px; }
.forge-heading h2 { margin: 0; color: var(--paper); font: 900 20px "Arial Black", "Trebuchet MS", sans-serif; letter-spacing: .4px; }
.forge-heading .note { color: #c6a46a; text-align: right; font-size: 11px; }
.forge-mode-tabs { display: grid; align-self: start; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.forge-mode-tab { box-sizing: border-box; height: 46px; min-height: 46px; padding: 6px; border: 1px solid rgba(198,164,106,.5); border-radius: 10px; background: rgba(13,22,41,.82); color: var(--muted); font: 900 11px "Arial Black", "Trebuchet MS", sans-serif; text-transform: uppercase; }
.forge-mode-tab.active { border-color: #c6a46a; background: rgba(47,62,92,.82); color: var(--paper); box-shadow: inset 0 0 0 1px rgba(198,164,106,.2); }
.forge-mode-tab:disabled { opacity: .55; }
.forge-craft-mode { display: grid; gap: 9px; }
.forge-craft-mode[hidden], .forge-merge-mode[hidden] { display: none; }
.forge-merge-mode { display: grid; gap: 8px; max-height: calc(100dvh - 210px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 3px 5px; }
.merge-heading { display: grid; gap: 3px; text-align: center; }
.merge-heading strong, .merge-inventory-section > strong { color: #c6a46a; font: 900 13px "Arial Black", "Trebuchet MS", sans-serif; }
.merge-heading small { color: var(--muted); font-size: 10px; line-height: 1.3; }
.merge-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 6px; }
.merge-slot { position: relative; display: grid; place-items: center; justify-self: center; width: 82%; aspect-ratio: 1; min-width: 0; min-height: 0; padding: 0; border: 1px dashed rgba(198,164,106,.56); border-radius: 9px; background: rgba(13,22,41,.78); color: #c6a46a; font-size: 20px; }
.merge-slot.filled { cursor: pointer; }
.merge-chances { display: grid; gap: 4px; padding: 8px; border: 1px solid rgba(198,164,106,.4); border-radius: 10px; background: rgba(13,22,41,.76); color: var(--muted); font-size: 10px; font-weight: 800; text-align: center; }
.merge-chances strong { color: var(--paper); font-size: 12px; }
.merge-button { min-height: 44px; border: 2px solid var(--ink); border-radius: 12px; background: linear-gradient(180deg, #ffcb62, #df742c); color: #241327; box-shadow: 0 4px 0 #8d3f2b; font: 900 18px Bangers, Impact, sans-serif; letter-spacing: 1px; }
.merge-button:disabled { opacity: .5; filter: grayscale(.25); }
.merge-inventory-section { display: grid; gap: 5px; }
.merge-inventory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; align-items: start; gap: 7px; max-height: 272px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.merge-inventory-item { --rarity-color: rgba(107,121,164,.5); position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; min-height: 0; overflow: hidden; padding: 0; border: 1px solid var(--rarity-color); border-radius: 9px; background: rgba(18,20,38,.9); color: var(--paper); }
.merge-inventory-item.selected { border-color: #56b9f5; background: linear-gradient(145deg, rgba(41,68,105,.96), rgba(27,31,60,.98)); box-shadow: 0 0 7px rgba(86,185,245,.32); }
.merge-inventory-item img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.62); }
.merge-rarity-badge, .merge-level-badge { position: absolute; z-index: 2; padding: 1px 3px; border: 1px solid color-mix(in srgb, var(--rarity-color) 68%, transparent); border-radius: 4px; background: rgba(13,16,36,.88); font-size: 7px; font-weight: 900; line-height: 1; white-space: nowrap; pointer-events: none; }
.merge-rarity-badge { top: 4px; left: 4px; color: var(--rarity-color); }
.merge-level-badge { top: 4px; right: 4px; bottom: auto; color: var(--paper); }
.merge-inventory-shell .merge-level-badge { top: auto; bottom: 4px; right: 4px; }
.merge-inventory-item:disabled { opacity: .35; }
.merge-status { min-height: 16px; color: var(--muted); font-size: 10px; font-weight: 800; text-align: center; }
.forge-result.failed { --rarity-color: #ff6d78; --rarity-glow: rgba(255,109,120,.3); }
.forge-result.failed .forge-result-art img { display: none; }
.forge-craft-mode { position: relative; }
.forge-workbench { display: block; min-height: 0; }
.forge-recipe-picker { position: relative; z-index: 10; justify-self: start; margin-bottom: 7px; }
.forge-recipe-picker-button { display: grid; grid-template-columns: 28px minmax(0,1fr) 16px; align-items: center; gap: 7px; min-width: 156px; min-height: 43px; padding: 5px 8px; border: 1px solid rgba(198,164,106,.62); border-radius: 10px; background: rgba(28,42,67,.9); color: var(--paper); text-align: left; font: inherit; cursor: pointer; }
.forge-recipe-picker-button:disabled { cursor: default; opacity: .62; }
.forge-recipe-picker-icon { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(198,164,106,.7); border-radius: 8px; color: #dfbd7c; font-size: 15px; }
.forge-recipe-picker-copy { display: grid; min-width: 0; gap: 2px; }
.forge-recipe-picker-copy small { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .7px; }
.forge-recipe-picker-copy strong { overflow: hidden; color: var(--paper); font-size: 10px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.forge-recipe-picker-chevron { color: #dfbd7c; font-size: 18px; line-height: 1; text-align: center; }
.forge-recipe-menu { position: absolute; top: calc(100% + 5px); left: 0; z-index: 20; width: min(280px, calc(100vw - 40px)); max-height: 280px; overflow-y: auto; padding: 7px; border: 1px solid rgba(198,164,106,.7); border-radius: 12px; background: rgba(13,22,41,.98); box-shadow: 0 8px 20px rgba(0,0,0,.42); }
.forge-recipe-menu[hidden] { display: none; }
.forge-recipe-menu-heading { margin: 1px 3px 6px; color: #c6a46a; font: 900 10px "Arial Black", "Trebuchet MS", sans-serif; letter-spacing: .8px; }
.forge-recipes { min-width: 0; padding: 9px 7px; border: 1px solid rgba(198,164,106,.55); border-radius: 14px; background: rgba(13,22,41,.82); }
.forge-recipes h3 { margin: 0 0 3px; color: #c6a46a; font: 900 13px "Arial Black", "Trebuchet MS", sans-serif; letter-spacing: 1px; text-align: center; }
.forge-recipes p { margin: 0 0 7px; color: var(--muted); font-size: 10px; text-align: center; }
.forge-recipe-list { display: grid; gap: 6px; }
.forge-recipe { display: grid; grid-template-columns: 25px minmax(0,1fr); align-items: center; gap: 5px; min-height: 70px; padding: 6px 5px; border: 1px solid rgba(169,185,218,.26); border-radius: 9px; background: rgba(28,42,67,.65); color: var(--paper); text-align: left; cursor: pointer; font: inherit; }
.forge-recipe.selected { border-color: #c6a46a; background: rgba(47,62,92,.82); box-shadow: inset 0 0 0 1px rgba(198,164,106,.2); }
.forge-recipe:active { transform: translateY(1px); }
.forge-recipe-icon { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(198,164,106,.55); border-radius: 7px; color: #c6a46a; font-size: 15px; }
.forge-recipe-copy { min-width: 0; }
.forge-recipe strong { display: block; color: var(--paper); font-size: 10px; line-height: 1.15; overflow-wrap: anywhere; }
.forge-recipe small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.forge-recipe-cost { display: block; margin-top: 4px; color: #dfbd7c; font-size: 8px; line-height: 1.2; overflow-wrap: anywhere; }
.forge-center { display: grid; grid-template-rows: minmax(0,1fr); gap: 7px; min-width: 0; }
.forge-core { position: relative; display: grid; place-items: center; min-height: 420px; border: 1px solid rgba(198,164,106,.55); border-radius: 16px; background: radial-gradient(circle at 50% 48%, rgba(99,121,165,.19), transparent 45%), rgba(9,17,33,.68); overflow: hidden; }
.forge-core::before, .forge-core::after { content: ""; position: absolute; border: 1px solid rgba(198,164,106,.48); border-radius: 50%; transform: rotate(-12deg); }
.forge-core::before { width: 224px; height: 224px; box-shadow: 0 0 18px rgba(109,129,173,.13), inset 0 0 18px rgba(198,164,106,.10); }
.forge-core::after { width: 174px; height: 174px; border-color: rgba(109,129,173,.52); transform: rotate(17deg); }
.forge-rune { position: absolute; width: 244px; height: 244px; border: 1px dashed rgba(198,164,106,.36); border-radius: 50%; animation: forgeRuneSpin 16s linear infinite; }
.forge-rune::before, .forge-rune::after { content: "✦"; position: absolute; color: #c6a46a; font-size: 12px; opacity: .85; }
.forge-rune::before { left: 16px; top: 36px; }
.forge-rune::after { right: 18px; bottom: 34px; }
.forge-core-gem { position: relative; z-index: 1; display: grid; place-items: center; width: 82px; height: 82px; border: 2px solid #c6a46a; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8ca0c4, #3c4d70 56%, #17233b 100%); box-shadow: 0 0 22px rgba(138,159,202,.38), inset 0 0 15px rgba(255,255,255,.10); animation: forgeCorePulse 1.8s ease-in-out infinite; }
.forge-core-gem::after { content: "✦"; color: #f2dfb0; font-size: 24px; text-shadow: 0 0 10px rgba(198,164,106,.75); }
.forge-core-label { position: absolute; bottom: 10px; color: var(--muted); font-size: 10px; font-weight: 800; }
.forge-core-slots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.forge-core-slot { position: absolute; z-index: 2; display: grid; place-items: center; width: 62px; height: 53px; padding: 3px; border: 1px dashed rgba(169,185,218,.42); border-radius: 9px; background: rgba(17,29,52,.9); color: #a9b8ce; font: inherit; font-size: 18px; box-shadow: 0 3px 0 rgba(4,8,17,.55); pointer-events: auto; }
.forge-core-slot.loaded { border-style: solid; border-color: #78e0bd; background: rgba(41,75,75,.9); box-shadow: 0 0 10px rgba(120,224,189,.2), 0 3px 0 rgba(4,8,17,.55); cursor: pointer; }
.forge-core-slot.loaded { animation: forgeSlotGlow 1.7s ease-in-out infinite; }
.forge-core-slot.partial { border-color: rgba(169,185,218,.5); background: rgba(17,29,52,.92); color: #a9b8ce; cursor: pointer; }
.forge-core-slot.empty { opacity: .55; pointer-events: none; }
.forge-core-slot:disabled { opacity: .86; }
.forge-core-slot small { display: block; margin-top: 1px; color: var(--muted); font-size: 8px; line-height: 1; }
.forge-core-slot img { width: 21px; height: 21px; object-fit: contain; filter: brightness(1.4) saturate(1.12) drop-shadow(0 0 2px rgba(104,255,245,.9)) drop-shadow(0 0 7px rgba(0,210,220,.7)); }
.forge-core-slot.slot-top { top: 18px; left: 50%; transform: translateX(-50%); }
.forge-core-slot.slot-left { left: 12px; top: 50%; transform: translateY(-50%); }
.forge-core-slot.slot-right { right: 12px; top: 50%; transform: translateY(-50%); }
.forge-core-slot .forge-slot-icon { width: 25px; height: 25px; border: 0; border-radius: 6px; background: transparent; font-size: 14px; }
.forge-core-slot .forge-slot-icon img { width: 23px; height: 23px; }
.forge-screen.crafting .forge-core-gem { animation: forgeCoreCraft 1.3s ease-in-out infinite; }
.forge-screen.crafting .forge-rune { animation-duration: 1.1s; }
.forge-screen.crafting .forge-core { box-shadow: inset 0 0 45px rgba(255,171,47,.52); }
.forge-slot-panel { display: grid; gap: 5px; padding: 7px; border: 1px solid rgba(198,164,106,.45); border-radius: 12px; background: rgba(13,22,41,.82); }
.forge-slot-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.forge-slot-heading strong { color: #c6a46a; font: 900 10px "Arial Black", "Trebuchet MS", sans-serif; letter-spacing: .8px; }
.forge-slot-heading small { color: var(--muted); font-size: 8px; text-align: right; }
.forge-material-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.forge-material-slot { display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 4px; min-width: 0; min-height: 43px; padding: 4px; border: 1px dashed rgba(169,185,218,.4); border-radius: 8px; background: rgba(18,29,50,.82); color: var(--paper); text-align: left; font: inherit; }
.forge-material-slot.filled { border-style: solid; border-color: #c6a46a; background: linear-gradient(145deg, rgba(64,72,104,.9), rgba(26,35,61,.92)); box-shadow: inset 0 0 0 1px rgba(198,164,106,.16), 0 0 8px rgba(198,164,106,.12); cursor: pointer; }
.forge-material-slot:disabled { opacity: .82; }
.forge-material-slot.filled:disabled { opacity: 1; }
.forge-slot-icon { width: 24px; height: 24px; border-radius: 6px; font-size: 13px; }
.forge-slot-icon img { width: 20px; height: 20px; }
.forge-slot-copy { min-width: 0; }
.forge-slot-copy strong { display: block; color: var(--paper); font-size: 8px; line-height: 1.15; overflow-wrap: anywhere; }
.forge-slot-copy small { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; line-height: 1.1; }
.forge-materials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; border: 1px solid rgba(198,164,106,.5); border-radius: 14px; background: rgba(13,22,41,.82); }
.forge-material { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 6px 3px 5px; border: 1px solid rgba(169,185,218,.24); border-radius: 9px; background: rgba(28,42,67,.62); color: var(--paper); text-align: center; font: inherit; cursor: pointer; }
.forge-material.required { border-color: rgba(198,164,106,.62); }
.forge-material.loaded { border-color: #78e0bd; background: rgba(41,75,75,.72); box-shadow: 0 0 8px rgba(120,224,189,.14); }
.forge-material.partial { border-color: rgba(169,185,218,.55); background: rgba(36,48,73,.78); }
.forge-material.unavailable { border-color: rgba(255,109,120,.5); }
.forge-material:disabled { cursor: default; opacity: .55; }
.forge-material.loaded:disabled { opacity: 1; }
.forge-material-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(198,164,106,.6); border-radius: 50%; background: #223451; color: #c6a46a; font-size: 18px; }
.forge-material-icon img { width: 27px; height: 27px; object-fit: contain; filter: brightness(1.4) saturate(1.12) drop-shadow(0 0 2px rgba(104,255,245,.9)) drop-shadow(0 0 7px rgba(0,210,220,.7)); }
.forge-sprite-icon::before { content: ""; display: block; width: 27px; height: 27px; background: url("assets/dragon_eye_coin_spin_90.png") 0 0 / 1000% 900% no-repeat; }
.forge-core-slot .forge-sprite-icon::before { width: 23px; height: 23px; }
.forge-material:nth-child(1) .forge-material-icon { background: #3b304d; color: #dfbd7c; }
.forge-material:nth-child(3) .forge-material-icon { background: #263d55; color: #bed0df; }
.forge-material strong { max-width: 100%; min-height: 22px; font-size: 10px; line-height: 1.1; overflow-wrap: anywhere; }
.forge-material small { color: var(--muted); font-size: 9px; font-weight: 800; }
.forge-material-action { display: none; }
.forge-reward-overlay { position: fixed; inset: 0; z-index: 10001; display: grid; place-items: center; overflow-y: auto; overscroll-behavior: contain; padding: 12px; background: rgba(7,8,18,.82); backdrop-filter: blur(3px); }
.player-name-overlay { position: fixed; inset: 0; z-index: 10002; display: grid; place-items: center; padding: 18px; background: rgba(7,8,18,.9); backdrop-filter: blur(5px); }
.player-name-overlay[hidden] { display: none; }
.player-name-dialog { display: grid; gap: 12px; width: min(100%, 360px); padding: 20px; border: 2px solid rgba(255,212,91,.78); border-radius: 18px; background: linear-gradient(155deg, rgba(48,41,90,.99), rgba(17,16,33,.99)); box-shadow: 0 0 24px rgba(255,212,91,.2), 0 6px 0 #090812; }
.player-name-dialog h2 { margin: 0; color: var(--paper); font: 900 21px "Arial Black", "Trebuchet MS", sans-serif; text-align: center; }
.player-name-dialog p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.45; text-align: center; }
.player-name-dialog form { display: grid; gap: 8px; }
.player-name-dialog label { color: var(--yellow); font-size: 12px; font-weight: 900; }
.player-name-dialog input { min-height: 44px; padding: 9px 11px; border: 2px solid rgba(169,185,218,.55); border-radius: 10px; outline: none; background: rgba(13,16,36,.9); color: var(--paper); font: 700 16px "Trebuchet MS", system-ui, sans-serif; }
.player-name-dialog input:focus { border-color: var(--cyan); box-shadow: 0 0 10px rgba(69,229,209,.3); }
.player-name-dialog button { min-height: 46px; margin-top: 2px; border: 2px solid #171526; border-radius: 12px; background: linear-gradient(180deg, #ffcb62, #df742c); color: #241327; box-shadow: 0 4px 0 #8d3f2b; font: 900 15px "Arial Black", "Trebuchet MS", sans-serif; }
.player-name-error { min-height: 16px; color: #ff8b98; font-size: 11px; font-weight: 800; }
.forge-reward-overlay:not([hidden]) { animation: forgeBackdropReveal .24s ease-out both; }
.forge-reward-overlay[hidden] { display: none; }
.merge-failure-toast { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 14px); left: 50%; z-index: 10003; width: min(calc(100vw - 28px), 420px); padding: 13px 16px; border: 1px solid rgba(255,109,120,.68); border-left: 4px solid #ff6d78; border-radius: 13px; background: linear-gradient(145deg, #35253f, #17172d); color: var(--paper); box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 0 12px rgba(255,109,120,.22); font: 800 14px/1.35 "Trebuchet MS", sans-serif; text-align: center; opacity: 0; transform: translate(-50%,-8px); pointer-events: none; }
.merge-failure-toast.show { animation: mergeFailureToastIn .22s ease-out forwards; }
.merge-failure-toast.hiding { animation: mergeFailureToastOut .2s ease-in forwards; }
.merge-failure-toast[hidden] { display: none; }
.forge-result { --rarity-color: var(--yellow); --rarity-glow: rgba(255,209,90,.4); position: relative; display: grid; justify-items: center; align-content: start; gap: 10px; width: min(90vw, 380px); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 12px; border: 3px solid var(--rarity-color); border-radius: 25px; background: linear-gradient(155deg, rgba(24,25,53,.99), rgba(13,16,36,.99)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rarity-color) 22%, transparent), 0 0 16px var(--rarity-glow), 0 5px 0 #090812; opacity: 0; transform: translateY(12px) scale(.47); pointer-events: none; }
.forge-result.show { animation: forgeResultReveal .58s cubic-bezier(.2,.8,.25,1) forwards; pointer-events: auto; }
.forge-result-art { position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; aspect-ratio: 1 / .96; overflow: hidden; border: 3px solid var(--rarity-color); border-radius: 19px; background: linear-gradient(145deg, #34343a 0%, #252630 54%, #1b1d28 100%); box-shadow: inset 0 0 28px rgba(0,0,0,.52), 0 1px 2px color-mix(in srgb, var(--rarity-color) 14%, transparent); }
.forge-result-art .merge-rarity-badge, .forge-result-art .merge-level-badge { padding: 4px 7px; border-radius: 8px; font-size: 13px; }
.forge-result-art .merge-rarity-badge { top: 7px; left: 7px; right: auto; bottom: auto; transform: scale(1.4); transform-origin: top left; }
.forge-result-art .merge-level-badge { top: auto; right: 7px; bottom: 7px; left: auto; transform: scale(1.4); transform-origin: bottom right; }
.forge-result-art::before { position: absolute; inset: 6%; z-index: 0; background: radial-gradient(ellipse 38% 30% at 46% 51%, var(--rarity-glow), transparent 100%), radial-gradient(ellipse 29% 34% at 64% 43%, color-mix(in srgb, var(--rarity-glow) 68%, transparent), transparent 100%), radial-gradient(ellipse 45% 38% at 56% 62%, color-mix(in srgb, var(--rarity-glow) 48%, transparent), transparent 100%); filter: blur(24px); content: ""; pointer-events: none; }
.forge-result.show .forge-result-art::before { animation: forgeHazeBloom 2.1s ease-out both; }
.forge-result-art img { position: absolute; top: 50%; left: 50%; z-index: 1; display: block; width: 96%; height: 96%; max-width: none; object-fit: contain; transform-origin: center; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--rarity-color) 26%, transparent)) drop-shadow(0 3px 5px rgba(0,0,0,.48)); }
.forge-result-spark { position: absolute; z-index: 0; width: 2px; height: 2px; border-radius: 50%; background: color-mix(in srgb, var(--rarity-color) 36%, white); box-shadow: 0 0 5px 1px color-mix(in srgb, var(--rarity-color) 76%, transparent), 0 0 10px 2px color-mix(in srgb, var(--rarity-color) 30%, transparent); opacity: .88; }
.forge-result.show .forge-result-spark { animation: forgeSparkDrift 1.44s ease-out both; }
.forge-result.show .spark-two { animation-delay: .04s; }
.forge-result.show .spark-three { animation-delay: .08s; }
.forge-result.show .spark-four { animation-delay: .12s; }
.forge-result.show .spark-five { animation-delay: .16s; }
.forge-result.show .spark-six { animation-delay: .2s; }
.forge-result.show .spark-seven { animation-delay: .24s; }
.forge-result.show .spark-eight { animation-delay: .28s; }
.forge-result.show .spark-nine { animation-delay: .32s; }
.forge-result.show .spark-ten { animation-delay: .36s; }
.forge-result-spark.spark-one::before, .forge-result-spark.spark-one::after, .forge-result-spark.spark-three::before, .forge-result-spark.spark-three::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: color-mix(in srgb, var(--rarity-color) 22%, white); content: ""; }
.forge-result-spark.spark-one::before, .forge-result-spark.spark-three::before { width: 1px; height: 7px; }
.forge-result-spark.spark-one::after, .forge-result-spark.spark-three::after { width: 7px; height: 1px; }
.forge-result-spark.spark-one { top: 20%; left: 48%; }
.forge-result-spark.spark-two { top: 34%; right: 18%; opacity: .7; }
.forge-result-spark.spark-three { bottom: 22%; left: 23%; opacity: .82; }
.forge-result-spark.spark-four { bottom: 31%; right: 28%; opacity: .68; }
.forge-result-spark.spark-five { top: 27%; left: 23%; opacity: .72; }
.forge-result-spark.spark-six { top: 46%; left: 16%; width: 1px; height: 1px; opacity: .78; }
.forge-result-spark.spark-seven { top: 56%; right: 14%; opacity: .84; }
.forge-result-spark.spark-eight { bottom: 17%; right: 39%; width: 1px; height: 1px; opacity: .76; }
.forge-result-spark.spark-nine { top: 68%; left: 41%; opacity: .66; }
.forge-result-spark.spark-ten { top: 18%; right: 29%; width: 1px; height: 1px; opacity: .72; }
.forge-result strong { display: block; max-width: 100%; color: var(--paper); font: 900 clamp(17px,5vw,23px) "Arial Black", "Trebuchet MS", sans-serif; letter-spacing: .025em; line-height: 1.12; text-align: center; text-transform: none; overflow-wrap: anywhere; }
.forge-result.show > strong { animation: forgeTextReveal .28s .16s ease-out both; }
.forge-result-rarity { min-width: 58%; padding: 8px 18px; border: 3px solid var(--rarity-color); border-radius: 12px; color: var(--rarity-color); background: linear-gradient(110deg, color-mix(in srgb, var(--rarity-color) 18%, #201d2c), rgba(37,34,47,.88)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rarity-color) 18%, transparent), 0 2px 4px rgba(0,0,0,.24); font-size: clamp(16px,4.8vw,21px); font-weight: 900; letter-spacing: .04em; line-height: 1; text-align: center; text-transform: uppercase; }
.forge-result.show > .forge-result-rarity { animation: forgeTextReveal .28s .22s ease-out both; }
.forge-result-divider { position: relative; width: calc(100% - 26px); height: 2px; margin: -2px auto 1px; border-radius: 50%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rarity-color) 52%, transparent) 18%, color-mix(in srgb, var(--rarity-color) 65%, white) 50%, color-mix(in srgb, var(--rarity-color) 52%, transparent) 82%, transparent); box-shadow: 0 0 7px color-mix(in srgb, var(--rarity-color) 35%, transparent); }
.forge-result-divider::after { position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border: 1px solid color-mix(in srgb, var(--rarity-color) 72%, white); border-radius: 1px; background: color-mix(in srgb, var(--rarity-color) 78%, white); box-shadow: 0 0 5px var(--rarity-glow); content: ""; transform: translate(-50%,-50%) rotate(45deg); }
.forge-result-divider[hidden] { display: none; }
.forge-result-stat { display: flex; align-items: center; width: 100%; min-height: 78px; padding: 8px 14px; border: 2px solid rgba(107,104,150,.34); border-radius: 15px; color: var(--paper); background: linear-gradient(110deg, #202440, #1b203b); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 3px 8px rgba(0,0,0,.2); }
.forge-result.show > .forge-result-stat { animation: forgeTextReveal .28s .28s ease-out both; }
.forge-result-description { display: grid; width: 100%; min-width: 0; color: var(--paper); font: 900 clamp(15px,4.5vw,19px)/1.15 "Arial Black", "Trebuchet MS", sans-serif; letter-spacing: .035em; text-transform: none; }
.forge-result-stat-line { display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: center; min-height: 29px; color: var(--paper); white-space: nowrap; }
.forge-result-stat-line + .forge-result-stat-line { border-top: 1px solid rgba(243,232,200,.13); }
.forge-result-stat-line::before { color: currentColor; content: "✦"; font: 700 11px/1 "Segoe UI Symbol", "Arial Unicode MS", sans-serif; opacity: .82; }
.forge-result-equip { width: 100%; min-height: 64px; margin-top: 1px; padding: 12px 16px; border: 2px solid color-mix(in srgb, var(--rarity-color) 76%, white); border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--rarity-color) 72%, white) 0%, var(--rarity-color) 55%, color-mix(in srgb, var(--rarity-color) 72%, #192032) 100%); color: #16182a; box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 4px 8px rgba(0,0,0,.3); font: 900 clamp(20px,5.8vw,26px) "Arial Black", "Trebuchet MS", sans-serif; text-transform: uppercase; }
.forge-result.show > .forge-result-equip:not([hidden]) { animation: forgeTextReveal .28s .34s ease-out both; }
.forge-result.show > .forge-result-equip:disabled { animation: none; opacity: .36; filter: grayscale(.7) brightness(.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 4px rgba(0,0,0,.35); cursor: default; }
.forge-result-equip[hidden] { display: none; }
.inventory-screen { display: grid; gap: 9px; padding: 12px; border: 3px solid var(--ink); border-radius: 19px; background: linear-gradient(145deg, var(--panel-light), var(--panel)); box-shadow: 0 5px 0 #090812; }
.inventory-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inventory-header h2 { margin: 0; color: var(--paper); font: 900 18px "Arial Black", "Trebuchet MS", sans-serif; }
.inventory-header > span { color: var(--muted); font-size: 11px; font-weight: 800; }
.inventory-categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.inventory-category { min-width: 0; min-height: 34px; padding: 6px 4px; border: 2px solid rgba(107,121,164,.52); border-radius: 10px; background: rgba(17,16,33,.68); color: var(--muted); font: 900 10px "Arial Black", "Trebuchet MS", sans-serif; text-transform: uppercase; }
.inventory-category.active { border-color: #56b9f5; background: linear-gradient(145deg, rgba(48,94,144,.7), rgba(34,46,80,.9)); color: #e5f5ff; box-shadow: 0 0 8px rgba(86,185,245,.35); }
.inventory-section { min-width: 0; }
.inventory-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-height: calc(100dvh - 340px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 3px 4px 1px; }
.inventory-list.has-weapons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inventory-cell { --rarity-color: rgba(107,121,164,.5); position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; padding: 4px; border: 2px solid var(--rarity-color); border-radius: 10px; background: linear-gradient(145deg, rgba(18,20,38,.94), rgba(36,31,67,.94)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); color: var(--paper); cursor: pointer; }
.inventory-cell.selected { border-color: #56b9f5; background: linear-gradient(145deg, rgba(41,68,105,.96), rgba(27,31,60,.98)); box-shadow: 0 0 0 1px rgba(86,185,245,.22), 0 0 9px rgba(86,185,245,.38); }
.inventory-cell-icon { display: grid; place-items: center; width: 100%; height: 100%; }
.inventory-cell-icon img { width: 100%; height: 100%; object-fit: contain; }
.inventory-cell-icon .coin-icon { flex-basis: 46px; width: 46px; height: 46px; }
.inventory-cell-icon .coin-icon, .inventory-selected-icon .coin-icon { animation: none; background-position: 0 0; }
.inventory-cell-equipped { position: absolute; top: 4px; right: 4px; left: auto; color: #a8f1df; font-size: 10px; font-weight: 900; text-shadow: 0 0 5px rgba(69,229,209,.55); }
.inventory-cell-quantity { position: absolute; right: 4px; bottom: 3px; padding: 1px 4px; border-radius: 6px; background: rgba(13,16,36,.86); color: var(--paper); font-size: 9px; font-weight: 900; }
.inventory-cell-rarity, .inventory-cell-level { position: absolute; z-index: 2; padding: 1px 4px; border: 1px solid color-mix(in srgb, var(--rarity-color) 68%, transparent); border-radius: 6px; background: rgba(13,16,36,.9); font-size: 8px; font-weight: 900; line-height: 1.1; white-space: nowrap; pointer-events: none; }
.inventory-cell-rarity { top: 5px; left: 5px; color: var(--rarity-color); }
.inventory-cell-level { right: 5px; bottom: 5px; color: var(--paper); }
.equipped-weapon-summary { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 68px; padding: 6px; border: 2px solid rgba(107,121,164,.45); border-radius: 12px; background: linear-gradient(120deg, rgba(18,20,38,.92), rgba(36,31,67,.92)); }
.inventory-selected-icon { display: grid; place-items: center; width: 50px; height: 50px; overflow: hidden; border: 1px solid var(--rarity-color, #56b9f5); border-radius: 9px; background: #241a3c url("assets/equipment/icon-frame.png") center / 100% 100% no-repeat; box-shadow: 0 0 7px var(--rarity-glow, transparent); }
.inventory-selected-icon img { width: 100%; height: 100%; object-fit: contain; }
.inventory-selected-icon .coin-icon { flex-basis: 44px; width: 44px; height: 44px; }
.inventory-selected-details { display: grid; gap: 3px; min-width: 0; }
.inventory-selected-details strong { overflow: hidden; color: var(--rarity-color, var(--paper)); font: 900 12px "Arial Black", "Trebuchet MS", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.inventory-selected-details small { color: var(--muted); font-size: 10px; font-weight: 800; }
.inventory-selected-actions { display: grid; gap: 4px; width: min(92px, 27vw); }
.inventory-equip, .inventory-dismantle { width: 100%; min-height: 31px; padding: 4px 5px; border: 1px solid var(--rarity-color, #56b9f5); border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--rarity-color, #56b9f5) 74%, white), var(--rarity-color, #56b9f5)); color: var(--ink); font: 900 9px "Arial Black", "Trebuchet MS", sans-serif; }
.inventory-dismantle { border-color: rgba(255,117,132,.78); background: linear-gradient(180deg, #ff9ca4, #d95066); color: #281421; }
.inventory-equip:disabled { opacity: .62; }
.weapon-card-shell { position: relative; display: block; width: 100%; min-width: 0; min-height: 0; aspect-ratio: .92; }
.inventory-card-shell, .merge-inventory-shell { overflow: hidden; border: 2px solid var(--rarity-color); border-radius: 10px; background: linear-gradient(145deg, rgba(18,20,38,.94), rgba(36,31,67,.94)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.inventory-card-shell.selected, .merge-inventory-shell.selected { border-color: #56b9f5; background: linear-gradient(145deg, rgba(41,68,105,.96), rgba(27,31,60,.98)); box-shadow: 0 0 0 1px rgba(86,185,245,.22), 0 0 9px rgba(86,185,245,.38); }
.inventory-card-shell .inventory-cell, .merge-inventory-shell .merge-inventory-item { position: absolute; inset: 0 0 23px; width: 100%; height: auto; aspect-ratio: auto; overflow: hidden; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.inventory-card-shell .inventory-cell.selected, .merge-inventory-shell .merge-inventory-item.selected { border: 0; background: transparent; box-shadow: none; }
.inventory-card-shell .inventory-cell-icon img, .merge-inventory-shell .merge-inventory-item img { position: absolute; top: 50%; left: 50%; width: 78%; height: 78%; object-fit: contain; transform: translate(-50%, -50%) scale(1.17); }
.inventory-card-shell .inventory-cell-icon img { width: 80%; height: 80%; }
.merge-slot-shell { width: 82%; justify-self: center; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--rarity-color); border-radius: 9px; background: rgba(18,20,38,.94); }
.merge-slot-shell .merge-slot { position: absolute; inset: 0 0 13px; width: 100%; height: auto; aspect-ratio: auto; border: 0; border-radius: 0; background: transparent; }
.merge-slot-shell .merge-slot img { position: absolute; top: 50%; left: 50%; width: 72%; height: 72%; object-fit: contain; transform: translate(-50%, -50%) scale(1.17); }
.merge-slot-shell .merge-level-badge { top: auto; right: 3px; bottom: 3px; transform: scale(.875); transform-origin: bottom right; }
.weapon-card-shell > .weapon-star-strip { position: absolute; inset: auto 0 0; z-index: 4; width: 100%; height: 23px; gap: 2px; transform: none; border-top: 1px solid rgba(201,194,237,.24); background: rgba(13,20,37,.5); }
.merge-slot-shell > .weapon-star-strip { height: 13px; }
.weapon-card-shell .weapon-star-trigger { width: 22px; height: 21px; padding: 2px; }
.merge-slot-shell .weapon-star-trigger { width: 11px; height: 12px; padding: 1px; }
.weapon-star-strip { position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 2px; }
.weapon-star-trigger { display: grid; place-items: center; width: 22px; height: 24px; padding: 2px; border: 0; border-radius: 0; outline: 0; background: transparent; color: #817d96; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.weapon-star-trigger svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: filter .15s ease, transform .15s ease, color .15s ease; }
.weapon-star-trigger path { fill: #24243a; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.weapon-star-trigger.unlocked { color: #ffd45b; }
.weapon-star-trigger.unlocked path { fill: #efc353; }
.weapon-star-trigger.unlocked svg { filter: drop-shadow(0 0 3px rgba(255,212,91,.5)); }
.weapon-star-trigger.next { color: #d6bd82; }
.weapon-star-trigger.locked { color: #79758e; }
.weapon-star-trigger:hover svg, .weapon-star-trigger[aria-expanded="true"] svg, .weapon-star-trigger:focus-visible svg { color: #fff0b1; filter: drop-shadow(0 0 3px #ffd45b) drop-shadow(0 0 7px rgba(255,212,91,.8)); transform: scale(1.12); }
.weapon-star-trigger[aria-expanded="true"] path, .weapon-star-trigger:focus-visible path { stroke-width: 1.8; }
.inventory-summary-stars { position: static; gap: 3px; }
.inventory-summary-stars .weapon-star-trigger { width: 24px; height: 28px; padding: 3px; }
.forge-result-stars { position: absolute; z-index: 4; bottom: 8px; left: 50%; transform: translateX(-50%); }
.forge-result-stars[hidden] { display: none; }
.forge-result-stars .weapon-star-strip { position: static; gap: 5px; }
.forge-result-stars .weapon-star-trigger { width: 29px; height: 30px; font-size: 24px; }
.inventory-weapon-detail { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 6px 8px; padding: 8px; border: 1px solid color-mix(in srgb, var(--rarity-color) 48%, #3b405e); border-radius: 12px; background: linear-gradient(145deg, #25243f, #14192e); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 5px 15px rgba(0,0,0,.2); }
.inventory-weapon-header { grid-column: 1 / -1; display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: center; gap: 8px; }
.inventory-weapon-detail .inventory-selected-icon { width: 44px; height: 44px; border-radius: 8px; }
.inventory-weapon-detail .inventory-selected-details { gap: 3px; }
.inventory-weapon-detail .inventory-selected-details strong { overflow: visible; white-space: normal; overflow-wrap: anywhere; font-size: 13px; line-height: 1.2; color: var(--paper); }
.inventory-weapon-detail .inventory-selected-details small { color: var(--rarity-color); font-size: 10px; }
.inventory-weapon-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; padding: 2px 8px; border: 1px solid rgba(138,144,180,.22); border-radius: 7px; background: rgba(9,14,28,.4); }
.inventory-weapon-stat { display: flex; justify-content: space-between; align-items: center; gap: 5px; min-width: 0; min-height: 26px; color: var(--paper); font: 800 12px "Trebuchet MS", sans-serif; }
.inventory-weapon-stat + .inventory-weapon-stat { padding-left: 8px; border-left: 1px solid rgba(138,144,180,.15); }
.inventory-weapon-stat > span:first-child::before { content: "◆"; margin-right: 4px; font-size: 5px; vertical-align: 2px; opacity: .65; }
.inventory-weapon-stars { grid-column: 1; display: grid; align-items: center; justify-items: start; }
.inventory-weapon-section-label { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.inventory-weapon-detail .inventory-selected-actions { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; padding-top: 0; border-top: 0; }
.inventory-weapon-detail .inventory-equip, .inventory-weapon-detail .inventory-dismantle { min-width: 0; min-height: 32px; padding: 4px 3px; font-size: 10px; }
.inventory-weapon-detail .inventory-equip:disabled { opacity: .38; filter: saturate(.35); }
.inventory-screen:has(.inventory-weapon-detail) .inventory-list { max-height: clamp(100px, calc(100dvh - 305px), 520px); }
.weapon-star-popover { position: fixed; z-index: 10006; display: grid; gap: 6px; width: min(270px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); overflow-y: auto; padding: 12px; border: 2px solid rgba(255,212,91,.72); border-radius: 12px; background: linear-gradient(150deg, #302954, #151a31); color: var(--paper); box-shadow: 0 10px 26px rgba(0,0,0,.6), 0 0 14px rgba(255,212,91,.15); }
.weapon-star-popover[hidden] { display: none; }
.weapon-star-popover-close { position: absolute; top: 5px; right: 6px; width: 25px; height: 25px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.weapon-star-popover > small { padding-right: 22px; color: #ffd45b; font-size: 10px; font-weight: 900; }
.weapon-star-popover > strong { padding-right: 22px; font: 900 14px "Arial Black", "Trebuchet MS", sans-serif; }
.weapon-star-popover > p { margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.35; }
.weapon-star-popover-cost { display: flex; align-items: center; gap: 4px; padding-top: 4px; border-top: 1px solid rgba(198,164,106,.3); }
.weapon-star-popover-cost[hidden], .weapon-star-popover-buy[hidden] { display: none; }
.weapon-star-popover-cost img { width: 24px; height: 24px; object-fit: contain; }
.weapon-star-popover-cost strong { color: var(--paper); font-size: 14px; }
.weapon-star-popover-cost small { margin-left: auto; color: var(--muted); font-size: 10px; }
.weapon-star-popover-buy { min-height: 34px; border: 1px solid #ffd45b; border-radius: 8px; background: linear-gradient(180deg, #ffde78, #dca347); color: #1b1932; font: 900 11px "Arial Black", "Trebuchet MS", sans-serif; cursor: pointer; }
.weapon-star-popover-buy:disabled { opacity: .5; cursor: default; }
.inventory-empty-slot { grid-column: 1 / -1; margin: 0; padding: 10px; color: var(--muted); font-size: 12px; text-align: center; }
.inventory-action-overlay { position: fixed; inset: 0; z-index: 10004; display: grid; place-items: center; padding: 18px; background: rgba(7,8,18,.84); backdrop-filter: blur(4px); }
.inventory-action-overlay[hidden] { display: none; }
.inventory-action-dialog { display: grid; gap: 12px; width: min(100%, 360px); max-height: calc(100dvh - 36px); overflow-y: auto; padding: 18px; border: 2px solid rgba(255,117,132,.72); border-radius: 16px; background: linear-gradient(155deg, rgba(45,37,68,.99), rgba(17,16,33,.99)); box-shadow: 0 0 20px rgba(255,117,132,.16), 0 6px 0 #090812; }
.inventory-action-dialog h2 { margin: 0; color: var(--paper); font: 900 18px "Arial Black", "Trebuchet MS", sans-serif; text-align: center; }
.inventory-dismantle-weapon { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px; border: 1px solid rgba(169,185,218,.32); border-radius: 12px; background: rgba(13,16,36,.58); }
.inventory-dismantle-art { display: grid; place-items: center; width: 76px; height: 76px; overflow: hidden; border: 1px solid rgba(169,185,218,.32); border-radius: 10px; background: radial-gradient(circle, rgba(124,145,187,.22), rgba(18,20,38,.9) 72%); }
.inventory-dismantle-art img { width: 100%; height: 100%; object-fit: contain; }
.inventory-dismantle-stats { display: grid; gap: 7px; min-width: 0; }
.inventory-dismantle-stat { display: grid; gap: 2px; min-width: 0; }
.inventory-dismantle-stat small { color: var(--muted); font-size: 10px; font-weight: 800; }
.inventory-dismantle-stat strong { overflow: hidden; color: var(--rarity-color, var(--paper)); font: 900 12px "Arial Black", "Trebuchet MS", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.inventory-dismantle-reward { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 8px 11px; border: 1px solid rgba(198,164,106,.48); border-radius: 11px; background: linear-gradient(120deg, rgba(61,49,76,.55), rgba(20,24,47,.88)); }
.inventory-dismantle-reward > small { color: var(--paper); font: 900 11px "Arial Black", "Trebuchet MS", sans-serif; }
.inventory-dismantle-reward-value { display: flex; align-items: center; gap: 5px; }
.inventory-dismantle-reward-value img { width: 38px; height: 38px; object-fit: contain; }
.inventory-dismantle-reward-value strong { min-width: 18px; color: var(--paper); font: 900 18px "Arial Black", "Trebuchet MS", sans-serif; text-align: right; }
.inventory-action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.inventory-action-buttons button { min-height: 42px; border-radius: 10px; font: 900 11px "Arial Black", "Trebuchet MS", sans-serif; }
.inventory-action-cancel { border: 1px solid rgba(169,185,218,.55); background: rgba(17,24,43,.94); color: var(--paper); }
.inventory-action-confirm { border: 1px solid #c84a60; background: linear-gradient(180deg, #ff9ca4, #d95066); color: #281421; }
.inventory-action-toast { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 14px); left: 50%; z-index: 10005; width: min(calc(100vw - 28px), 400px); padding: 11px 15px; border: 1px solid rgba(86,185,245,.72); border-left: 4px solid #56b9f5; border-radius: 12px; background: linear-gradient(145deg, #273858, #17172d); color: var(--paper); box-shadow: 0 8px 24px rgba(0,0,0,.5); font: 800 13px/1.35 "Trebuchet MS", sans-serif; text-align: center; transform: translateX(-50%); }
.inventory-action-toast[hidden] { display: none; }
.forge-status { min-height: 17px; color: var(--muted); font-size: 11px; font-weight: 800; text-align: center; }
.forge-craft-button { min-height: 58px; border: 3px solid var(--ink); border-radius: 16px; background: linear-gradient(180deg, #ffcb62, #df742c); color: #241327; box-shadow: 0 5px 0 #8d3f2b, 0 0 18px rgba(255,160,63,.24); font: 900 30px Bangers, Impact, sans-serif; letter-spacing: 1.5px; text-shadow: 1px 1px 0 rgba(255,245,180,.55); cursor: pointer; transition: transform .08s ease, filter .15s ease, opacity .15s ease; }
.forge-craft-button:active { transform: translateY(4px); box-shadow: 0 1px 0 #8d3f2b; }
.forge-craft-button:disabled { cursor: default; opacity: .55; filter: grayscale(.2); }
@keyframes forgeRuneSpin { to { transform: rotate(360deg); } }
@keyframes forgeCorePulse { 0%, 100% { transform: scale(.96); filter: brightness(.92); } 50% { transform: scale(1.02); filter: brightness(1.15); } }
@keyframes forgeCoreCraft { 0%, 100% { transform: scale(.94) rotate(-3deg); filter: brightness(.95); } 42% { transform: scale(1.14) rotate(3deg); filter: brightness(1.5); } 65% { transform: scale(1.02) rotate(0); filter: brightness(1.18); } }
@keyframes forgeSlotGlow { 0%, 100% { box-shadow: 0 0 7px rgba(120,224,189,.18), 0 3px 0 rgba(4,8,17,.55); } 50% { box-shadow: 0 0 14px rgba(120,224,189,.45), 0 3px 0 rgba(4,8,17,.55); } }
@keyframes forgeBackdropReveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes forgeResultReveal { 0% { opacity: 0; transform: translateY(18px) scale(.44); } 65% { opacity: 1; transform: translateY(-2px) scale(.51); } 100% { opacity: 1; transform: translateY(0) scale(.5); } }
@keyframes mergeFailureToastIn { from { opacity: 0; transform: translate(-50%,-8px); } to { opacity: 1; transform: translate(-50%,0); } }
@keyframes mergeFailureToastOut { from { opacity: 1; transform: translate(-50%,0); } to { opacity: 0; transform: translate(-50%,-8px); } }
@keyframes forgeHazeBloom { 0% { opacity: .15; transform: scale(.72); } 28%, 82% { opacity: .9; transform: scale(1.12); } 100% { opacity: .65; transform: scale(1); } }
@keyframes forgeSparkDrift { 0% { opacity: 0; transform: translateY(7px) scale(.45); } 20% { opacity: 1; transform: translateY(0) scale(1.3); } 78% { opacity: 1; transform: translateY(-2px) scale(1); } 100% { opacity: .45; transform: translateY(-8px) scale(.85); } }
@keyframes forgeTextReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.card { display: grid; gap: 8px; padding: 14px; border: 3px solid var(--ink); border-radius: 19px; background: linear-gradient(145deg, var(--panel-light), var(--panel)); box-shadow: 0 5px 0 #090812; }
.card > b { color: var(--yellow); font: 900 16px "Arial Black", "Trebuchet MS", sans-serif; text-shadow: 1px 1px 0 var(--ink); }
.talent-screen { display: grid; gap: 0; overflow: hidden; border: 2px solid #56627a; border-radius: 20px; background: linear-gradient(180deg, rgba(31,42,59,.98), rgba(10,13,21,.99)); box-shadow: 0 5px 0 #090812, inset 0 0 0 3px rgba(4,6,11,.35); }
.talent-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 15px 14px 11px; border-bottom: 1px solid rgba(169,179,197,.18); }
.talent-header h2 { margin: 0; color: var(--paper); font: 900 18px "Arial Black", "Trebuchet MS", sans-serif; }
.talent-points { padding: 6px 9px; border: 1px solid #9d7d3e; border-radius: 7px; background: rgba(231,184,91,.12); color: var(--yellow); font-size: 12px; font-weight: 900; white-space: nowrap; }
.talent-branches { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid rgba(169,179,197,.18); background: rgba(6,8,13,.25); }
.talent-branch { min-height: 47px; padding: 7px 3px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: 800 11px "Trebuchet MS", system-ui, sans-serif; cursor: pointer; }
.talent-branch.on { border-bottom-color: var(--yellow); background: rgba(231,184,91,.07); color: var(--paper); }
.talent-tree { position: relative; min-height: 365px; padding: 18px 20px; background: radial-gradient(circle at 50% 48%, rgba(82,118,151,.15), transparent 47%), repeating-linear-gradient(0deg, transparent 0 27px, rgba(169,179,197,.045) 28px), repeating-linear-gradient(90deg, transparent 0 27px, rgba(169,179,197,.045) 28px); }
.talent-tree-line { position: absolute; height: 2px; transform-origin: left center; background: linear-gradient(90deg, rgba(231,184,91,.7), rgba(86,98,122,.48)); }
.talent-tree-line.line-a { width: 105px; left: 50%; top: 50%; transform: rotate(-148deg); }
.talent-tree-line.line-b { width: 105px; left: 50%; top: 50%; transform: rotate(-32deg); }
.talent-tree-line.line-c { width: 105px; left: 50%; top: 50%; transform: rotate(148deg); }
.talent-tree-line.line-d { width: 82px; left: 50%; top: 50%; transform: rotate(32deg); }
.talent-node { position: absolute; z-index: 2; width: 68px; height: 68px; padding: 4px; border: 2px solid #56627a; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #35455d, #111725 68%); color: var(--muted); font: 800 10px "Trebuchet MS", system-ui, sans-serif; text-align: center; cursor: pointer; box-shadow: 0 3px 0 #06070c, inset 0 0 0 3px rgba(0,0,0,.18); }
.talent-node strong { display: block; margin-top: 5px; color: var(--paper); font-size: 18px; line-height: 1; }
.talent-node span { display: block; margin-top: 4px; white-space: nowrap; }
.talent-node.learned { border-color: var(--yellow); background: radial-gradient(circle at 35% 28%, #705d31, #302717 68%); }
.talent-node.available { border-color: var(--cyan); box-shadow: 0 0 13px rgba(85,200,216,.3), 0 3px 0 #06070c; }
.talent-node.locked { opacity: .48; }
.talent-node.selected { outline: 2px solid var(--paper); outline-offset: 4px; }
.talent-node-center { left: calc(50% - 45px); top: calc(50% - 45px); width: 90px; height: 90px; border-color: var(--yellow); }
.talent-node-center strong { margin-top: 11px; font-size: 26px; }
.talent-node-north { left: calc(50% - 34px); top: 18px; }
.talent-node-west { left: 20px; top: calc(50% - 34px); }
.talent-node-east { right: 20px; top: calc(50% - 34px); }
.talent-node-south { left: calc(50% - 34px); bottom: 17px; }
.talent-detail { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; padding: 13px 14px 12px; border-top: 1px solid rgba(169,179,197,.22); background: linear-gradient(180deg, #202b3e, #141b2a); }
.talent-detail-heading { display: contents; }
.talent-detail-heading strong { color: var(--paper); font-size: 15px; }
.talent-detail-heading span { color: var(--yellow); font-size: 12px; font-weight: 900; }
.talent-detail p { grid-column: 1 / -1; min-height: 31px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.talent-learn { grid-column: 1 / -1; min-height: 38px; border: 1px solid #ad8643; border-radius: 6px; background: linear-gradient(180deg, #c69a4b, #8b642b); color: #17130b; font: 900 13px "Trebuchet MS", system-ui, sans-serif; cursor: pointer; }
.talent-learn:disabled { opacity: .5; cursor: default; }
.buy, .nav button { border: 3px solid var(--ink); border-radius: 14px; background: #4b427d; color: var(--paper); padding: 12px; box-shadow: 0 4px 0 #121020; font: 800 14px "Trebuchet MS", system-ui, sans-serif; text-align: left; transition: transform .08s ease, box-shadow .08s ease, background .12s ease; }
.buy:active, .nav button:active { transform: translateY(3px); box-shadow: 0 1px 0 #121020; }
.nav { display: grid; flex-shrink: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: auto; }
.nav button { min-width: 0; min-height: 58px; padding: 7px 3px; text-align: center; line-height: 1.15; font-size: 12px; }
.nav .on { background: var(--coral); color: var(--ink); box-shadow: 0 4px 0 #9f384d; }
.nav svg { display: block; width: 22px; height: 22px; margin: 0 auto 4px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.nav-label { display: block; }

/* Hunt HUD: stable top and bottom rails leave the forest clear for combat. */
main.hunt-active { gap: 10px; padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom)); background-image: linear-gradient(180deg, rgba(6,15,29,.6), rgba(6,15,29,.04) 44%, rgba(6,15,29,.2) 70%, rgba(6,15,29,.85)), url("assets/forest_battle_bg.webp"); }
.hunt-active .hud-top { position: relative; z-index: 20; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 48px auto; align-items: stretch; gap: 9px; }
.hunt-active .player-badge { position: relative; grid-column: 1; grid-row: 1; height: 48px; grid-template-columns: 26px minmax(0, 1fr); align-content: center; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid rgba(198,164,106,.3); border-radius: 11px; background: linear-gradient(150deg, rgba(32,44,64,.96), rgba(12,22,38,.93)); box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 4px 12px rgba(0,0,0,.16); backdrop-filter: none; }
.player-emblem { display: grid; place-items: center; width: 26px; height: 30px; border: 1px solid #a18c61; border-radius: 8px 8px 10px 10px; background: linear-gradient(155deg, #475165, #1d2d44); color: #e7c88a; font-size: 20px; text-shadow: 0 0 12px rgba(234,194,116,.35); }
.player-identity { min-width: 0; }
.hunt-active .player-name-label { display: block; overflow: hidden; color: var(--paper); font-size: 14px; font-weight: 800; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.player-meta { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 3px; overflow: hidden; white-space: nowrap; }
.hunt-active .player-badge .stats, #huntPassiveIncome { color: #b6c2d4; font-size: 11px; font-weight: 600; line-height: 1.2; }
.player-experience { position: absolute; right: 8px; bottom: 3px; left: 8px; min-width: 0; padding: 0; }
.experience-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hunt-active .player-experience .bar { height: 3px; border: 0; background: #0a1526; }
.hunt-active .player-experience .bar i { background: linear-gradient(90deg, #429fb7, #80d9d3); }
.hunt-wallet { position: relative; grid-column: 2; grid-row: 1; min-width: 0; }
.hunt-active .coin { position: relative; width: 100%; height: 48px; justify-content: center; gap: 7px; min-width: 0; padding: 5px 32px 5px 8px; border: 1px solid rgba(198,164,106,.35); border-radius: 11px; background: linear-gradient(145deg, rgba(42,42,50,.96), rgba(19,25,39,.96)); color: #f6dca0; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); font-weight: 800; font-variant-numeric: tabular-nums; }
.hunt-wallet .coin-icon { animation: none; }
.hunt-wallet .coin strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.wallet-toggle { position: absolute; right: 1px; bottom: 1px; display: grid; place-items: center; width: 30px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #d9bf86; cursor: pointer; }
.wallet-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.wallet-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.wallet-toggle:hover, .wallet-toggle[aria-expanded="true"] { background: rgba(224,190,123,.1); }
.wallet-resources { position: absolute; top: calc(100% + 8px); right: 0; z-index: 10; width: min(320px, calc(100vw - 24px)); padding: 10px; border: 1px solid rgba(198,164,106,.6); border-radius: 12px; background: linear-gradient(145deg, #202c40, #0e192c); box-shadow: 0 8px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); }
.wallet-resources[hidden] { display: none; }
.wallet-resources-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: #efdcaf; font: 700 14px "Trebuchet MS", system-ui, sans-serif; }
.wallet-resources-heading button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 7px; background: rgba(155,177,205,.08); color: #b9c8dc; font: 400 23px/1 system-ui, sans-serif; cursor: pointer; }
.wallet-resources-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: min(360px, 50dvh); overflow-y: auto; overscroll-behavior: contain; }
.wallet-resource { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 8px; border: 1px solid rgba(151,178,211,.2); border-radius: 9px; background: rgba(8,18,34,.55); }
.wallet-resource img { flex-shrink: 0; width: 32px; height: 36px; object-fit: contain; }
.wallet-resource-copy { display: grid; gap: 4px; min-width: 0; font-family: "Trebuchet MS", system-ui, sans-serif; }
.wallet-resource-copy span { color: #bdc9da; font-size: 12px; line-height: 1.2; overflow-wrap: anywhere; }
.wallet-resource-copy strong { color: #fff0c5; font-size: 16px; line-height: 1.2; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hunt-active .stage-cluster { grid-column: 1 / -1; gap: 0; padding: 11px 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.hunt-active .stage-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0; }
.hunt-location { display: grid; gap: 3px; min-width: 0; }
.hunt-location strong { color: #efdcaf; font-size: 14px; font-weight: 800; }
.hunt-active .stage-track { grid-column: 2; grid-row: 1; grid-template-columns: 32px 18px 44px 18px 32px; width: 144px; min-height: 64px; padding-top: 20px; justify-self: center; }
.hunt-active .stage-track > i { height: 2px; background: rgba(162,177,200,.35); }
.hunt-active .stage-node { position: relative; width: 32px; height: 32px; border: 2px solid rgba(197,218,223,.65); background: linear-gradient(rgba(6,16,29,.15), rgba(6,16,29,.35)), url("assets/forest_battle_bg.webp") center / cover; color: #b9ccd2; box-shadow: 0 2px 7px rgba(0,0,0,.3); font: 800 14px "Trebuchet MS", system-ui, sans-serif; }
.stage-number { position: absolute; right: -8px; bottom: calc(100% + 6px); left: -8px; text-align: center; line-height: 1; text-shadow: 0 2px 4px #061222; font-variant-numeric: tabular-nums; }
.hunt-active .stage-node.done { border-color: rgba(151,209,206,.75); color: #b6d7d4; }
.hunt-active .stage-node.current { width: 44px; height: 44px; border-color: #f0d391; background: linear-gradient(rgba(6,16,29,0), rgba(6,16,29,.15)), url("assets/forest_battle_bg.webp") center / cover; color: #fff3c9; box-shadow: 0 0 0 3px rgba(236,203,131,.09), 0 3px 12px rgba(0,0,0,.4); font-size: 18px; }
.stage-node.empty, .stage-node.empty + i { visibility: hidden; }
.stage-actions { grid-column: 3; grid-row: 1; justify-self: end; display: grid; align-items: center; width: 72px; min-height: 40px; margin-top: 20px; }
.hunt-active .stage-actions .boss-button { width: 100%; min-height: 40px; padding: 5px 4px; font-size: 11px; }
.leave-boss-button { display: grid; place-content: center; gap: 2px; width: 100%; min-height: 40px; padding: 5px 3px; border: 1px solid #f78c81; border-bottom: 3px solid #962f36; border-radius: 7px; background: linear-gradient(180deg, #f36a60, #d44448); color: #fff2dd; box-shadow: 0 2px 0 rgba(80,21,30,.6); font-family: "Trebuchet MS", system-ui, sans-serif; text-align: center; cursor: pointer; }
.leave-boss-button span { font-size: 11px; font-weight: 900; line-height: 1.1; }
.leave-boss-button small { font-size: 9px; font-weight: 800; line-height: 1.1; letter-spacing: .7px; }
.leave-boss-button:disabled { opacity: .45; cursor: default; }
.stage-actions > [hidden] { display: none; }
.boss-progress { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 40px; color: #fff0c5; text-align: center; pointer-events: none; }
.boss-progress-icon { width: 30px; height: 30px; filter: drop-shadow(0 2px 2px #090817); }
.boss-progress strong { font: 900 14px/1 "Trebuchet MS", system-ui, sans-serif; font-variant-numeric: tabular-nums; text-shadow: 0 2px 2px #080918, 1px 0 #080918, -1px 0 #080918; }
.boss-time-bar { height: 4px; margin-top: 5px; overflow: hidden; border-radius: 2px; background: rgba(30,26,12,.8); transform: skewX(-10deg); }
.boss-time-bar[hidden] { display: none; }
.boss-time-bar i { display: block; width: 100%; height: 100%; transform-origin: left center; background: linear-gradient(90deg, #e2af35, #ffe083); }
.hunt-active .stage-status { justify-content: space-between; min-height: 24px; gap: 8px; text-align: left; }
.hunt-progress-copy { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 8px; min-width: 0; color: #bac7d8; font-size: 12px; font-weight: 600; }
.hunt-active .boss-timer { flex-shrink: 0; padding: 4px 8px; border: 1px solid rgba(255,130,124,.4); border-radius: 6px; background: rgba(126,49,49,.25); color: #ffb4a5; font: 800 13px "Trebuchet MS", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.hunt-active .boss-timer:empty { display: none; }
.hunt-active .boss-button { position: static; min-height: 44px; flex-shrink: 0; padding: 8px 12px; border: 1px solid #d4b378; border-radius: 9px; background: linear-gradient(180deg, #efd19a, #ba8c4f); color: #231e23; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); font: 800 12px "Trebuchet MS", system-ui, sans-serif; }
.hunt-progress { height: 3px; overflow: hidden; border-radius: 3px; background: #0a1424; }
.hunt-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #458f9f, #8acfc8); transition: width .2s ease; }
.stage-cluster.boss-ready .hunt-progress i { background: linear-gradient(90deg, #a8844a, #ebcb87); }
.stage-cluster.boss-active .hunt-progress { display: none; }
.hunt-active #hunt { gap: 8px; }
.hunt-active .arena { min-height: 0; container-type: size; }
.hunt-active .arena::before { content: ""; position: absolute; top: calc(56% + 80px); left: 50%; width: 170px; height: 38px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(4,10,20,.6), transparent 68%); pointer-events: none; }
.hunt-active .enemy-info { top: 12px; text-align: center; }
.hunt-active .enemy-info h2 { width: 100%; text-align: center; }
.hunt-active .monster { width: clamp(240px, 72vw, 300px); height: auto; aspect-ratio: 1; }
.hunt-active .nav { gap: 4px; padding: 5px; border: 1px solid rgba(198,164,106,.3); border-radius: 15px; background: rgba(13,24,40,.96); box-shadow: 0 5px 16px rgba(0,0,0,.2); }
.hunt-active .nav button { min-height: 57px; padding: 7px 1px 6px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #a9b8ce; box-shadow: none; font: 700 11px "Trebuchet MS", system-ui, sans-serif; }
.hunt-active .nav button.on { border-color: rgba(103,192,203,.35); background: linear-gradient(180deg, rgba(49,92,112,.6), rgba(27,48,70,.7)); color: #f5e7c8; box-shadow: inset 0 1px 0 rgba(134,220,223,.08); }
.hunt-active .nav button.on svg { color: #92d9d6; }
.hunt-active .nav button:active, .hunt-active .boss-button:active, .leave-boss-button:active { transform: translateY(1px); }
.hunt-active button:focus-visible { outline: 2px solid #e9cf8e; outline-offset: 3px; }
@media (max-width: 380px) {
  main.hunt-active { padding-inline: 9px; }
  .hunt-active .hud-top { gap: 7px; }
  .hunt-active .player-badge { grid-template-columns: 24px minmax(0, 1fr); padding-inline: 6px; gap: 6px; }
  .player-emblem { width: 24px; height: 28px; font-size: 18px; }
  .hunt-active .player-name-label { font-size: 13px; }
  .hunt-wallet .coin strong { font-size: 14px; }
  .hunt-active .stage-track { grid-template-columns: 28px 16px 38px 16px 28px; width: 126px; }
  .hunt-active .stage-node { width: 28px; height: 28px; }
  .hunt-active .stage-node.current { width: 38px; height: 38px; }
  .stage-actions { width: 64px; }
  .hunt-active .nav button { font-size: 10px; }
}
@media (max-width: 380px) {
  .weapon-card-shell .weapon-star-trigger { width: 15px; }
  .nav { gap: 4px; }
  .nav button { padding-inline: 1px; font-size: 10px; }
  .forge-screen { padding: 9px; }
  .forge-workbench { display: block; min-height: 0; }
  .forge-recipe-picker { margin-bottom: 6px; }
  .forge-core { min-height: 360px; }
  .forge-recipe { grid-template-columns: 22px minmax(0, 1fr); min-height: 65px; padding-inline: 3px; }
  .forge-recipe-icon { width: 22px; height: 22px; font-size: 13px; }
  .forge-recipe strong { font-size: 9px; }
  .forge-recipe small { font-size: 8px; }
  .forge-core::before { width: 200px; height: 200px; }
  .forge-core::after { width: 156px; height: 156px; }
  .forge-rune { width: 216px; height: 216px; }
  .forge-core-slot.slot-left { left: 5px; }
  .forge-core-slot.slot-right { right: 5px; }
  .forge-result { width: min(90vw, 360px); padding: 10px; }
  .forge-result-art { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .click-slash.play { animation-duration: .2s; }
  .forge-screen.crafting .forge-core { animation-duration: 1.2s; }
  .forge-core-slot.loaded { animation-duration: .01ms; }
  .forge-reward-overlay:not([hidden]), .forge-result.show, .forge-result.show *, .forge-result.show .forge-result-art::before, .merge-failure-toast.show, .merge-failure-toast.hiding { animation-duration: .01ms !important; animation-delay: 0ms !important; }
}

.skill-axe-slash { filter: none; position: absolute; left: 50%; top: 56%; width: 340px; height: 114px; background: url("assets/skill-axe-straight-v2.png") center / contain no-repeat; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) rotate(0deg); transform-origin: center; }
.skill-axe-slash.play { animation: skillAxeCleave .75s ease-out both; }
@keyframes skillAxeCleave {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate(-58%, -46%) rotate(0deg) scale(.86); }
  7% { opacity: 1; clip-path: inset(0 65% 0 0); }
  18% { opacity: 1; clip-path: inset(0); transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  36% { opacity: .95; clip-path: inset(0); }
  70% { opacity: .45; clip-path: inset(0); }
  100% { opacity: 0; clip-path: inset(0); transform: translate(-43%, -53%) rotate(0deg) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .skill-axe-slash.play { animation-duration: .2s; } }

.weapon-hit-effects { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.weapon-hit-particle { position: absolute; display: block; width: 5px; height: 12px; opacity: 0; border-radius: 50%; background: var(--hit-color); pointer-events: none; box-shadow: 0 0 5px var(--hit-color); }
.weapon-hit-particle[hidden] { display: none; }
.weapon-hit-particle.star, .weapon-hit-particle.trail-star, .weapon-hit-particle.burst-star { width: 18px; height: 18px; border-radius: 0; clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%); }
.weapon-hit-particle.trail-star { width: 17px; height: 23px; }
.weapon-hit-particle.burst-star { width: 27px; height: 27px; }

.weapon-hit-particle.fine-spark { width: 2px; height: 7px; box-shadow: 0 0 3px var(--hit-color); }
.weapon-hit-particle.speck { width: 3px; height: 3px; border-radius: 50%; box-shadow: 0 0 2px var(--hit-color); }
.weapon-hit-particle.tiny-star { width: 7px; height: 7px; border-radius: 0; box-shadow: none; clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%); }

.arena-menu-button { position: absolute; z-index: 9; display: grid; place-items: center; width: 48px; height: 48px; padding: 4px; border: 0; border-radius: 13px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.arena-menu-button img { display: block; width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); transition: transform .12s ease, filter .12s ease; }
.arena-menu-button:active img { transform: scale(.94); filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)) brightness(1.08); }
.arena-menu-button:focus-visible { outline: 2px solid #92d9d6; outline-offset: 2px; }
.quest-open-button { left: -6px; top: 100px; }
/* Shared fantasy frame: dark slate, aged gold, restrained bevels. */
:root { --frame-gold: #b59454; --frame-highlight: #edcf87; --frame-surface: #19222b; --frame-inset: #101820; }
.fantasy-frame { border: 2px solid var(--frame-gold); border-radius: 7px; background: linear-gradient(135deg, #27313a, var(--frame-surface) 45%, #121b23); box-shadow: inset 0 0 0 3px #111820, inset 0 0 0 4px #65573d, 0 18px 60px #000b; }
.quests-dialog { box-sizing: border-box; width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 36px); margin: auto; padding: 15px; overflow-y: auto; color: #f4e8cd; scrollbar-color: #8e7648 #101820; }
.quests-dialog::backdrop { background: rgba(4,9,15,.82); backdrop-filter: blur(3px); }
.quests-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 5px 0 13px; border-bottom: 1px solid #786440; }
.quests-heading { display: flex; align-items: center; gap: 10px; }
.quests-heading img { object-fit: contain; }
.quests-eyebrow { display: block; color: #baa272; font: 700 10px "Trebuchet MS", sans-serif; letter-spacing: 1.4px; text-transform: uppercase; }
.quests-header h2 { margin: 2px 0 0; color: #f3d79a; font: 700 25px Georgia, serif; text-shadow: 0 2px #000; }
.quests-close { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 1px solid #786440; border-radius: 4px; background: linear-gradient(#303942,#171f28); color: #d7bd87; font: 28px Georgia, serif; cursor: pointer; box-shadow: inset 0 1px #ffffff12; }
.quest-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; padding: 0 0 10px; border-bottom: 1px solid #786440; }
.quest-tabs button { min-height: 44px; padding: 8px 4px; border: 1px solid #4c4f50; border-radius: 4px; background: #121b24; color: #969eaa; font: 700 14px "Trebuchet MS", sans-serif; cursor: pointer; }
.quest-tabs button[aria-selected="true"] { border-color: #bea065; background: linear-gradient(#5a4a30,#302b25); color: #ffe4a7; box-shadow: inset 0 2px #e8c77a44; }
.quest-panel { min-height: 180px; padding: 12px 0 0; }
.quest-panel[hidden] { display: none; }
.quest-empty { margin: 44px 12px; color: #9da5ad; font-size: 15px; line-height: 1.5; text-align: center; }
.quest-chapter { display: flex; align-items: center; justify-content: space-between; padding: 0 3px 12px; }
.quest-chapter h3 { margin: 3px 0 0; font: 700 18px Georgia,serif; color: #e8d2a5; }
#questChapterProgress { color: #baa272; font-size: 12px; }
.quest-story-list { display: grid; gap: 8px; }
.quest-card { display: grid; grid-template-columns: 42px minmax(0,1fr) 78px; gap: 9px; align-items: center; padding: 11px 9px; border: 1px solid #535147; border-radius: 4px; background: linear-gradient(110deg,#29323a,#1c252e); box-shadow: inset 0 1px #ffffff0b, 0 2px 3px #0004; }
.quest-icon { display: grid; place-items: center; width: 42px; height: 48px; border: 1px solid #947c4c; border-radius: 3px; background: radial-gradient(ellipse at top,#58503b,#15212b); color: #e8c781; font: 29px Georgia,serif; text-shadow: 0 2px 3px #000; }
.quest-objective h3 { margin: 0 0 4px; color: #f4e5c5; font: 700 13px "Trebuchet MS",sans-serif; }
.quest-objective p { margin: 0 0 7px; color: #b8bec4; font-size: 11px; line-height: 1.35; }
.quest-progress { position: relative; height: 17px; overflow: hidden; background: #0c141d; border: 1px solid #454b4f; border-radius: 2px; }
.quest-progress > span { display: block; height: 100%; background: linear-gradient(#ac8b4e,#705832); transition: width .15s; }
.quest-progress b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 10px "Trebuchet MS",sans-serif; color: #fff0d1; text-shadow: 0 1px 2px #000; }
.quest-reward { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 7px; font: 700 12px "Trebuchet MS",sans-serif; }
.quest-reward-gold { color: #f2c85e; }
.quest-reward-shards { color: #a6d8ea; }
.quest-reward button { width: 100%; min-height: 36px; padding: 6px 2px; border: 1px solid #625b47; border-radius: 3px; background: #232b31; color: #a2a6a8; font: 700 11px "Trebuchet MS",sans-serif; cursor: pointer; }
.quest-reward button[aria-disabled="true"] { cursor: default; }
.quest-complete { border-color: #a48d56; }
.quest-complete .quest-progress > span { background: linear-gradient(#7b995b,#476038); }
.quest-complete button[aria-disabled="false"] { border-color: #d3b377; background: linear-gradient(#aa8545,#6d4c25); color: #fff0ce; box-shadow: inset 0 1px #ffe5a35c; }
.quest-claimed { opacity: .65; }
.quest-claimed button { color: #a5be8b; background: #1a2923; }
.quest-status { margin: 10px 2px 0; min-height: 16px; font-size: 11px; color: #d8c391; }
.quest-ready-badge { position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; padding: 0 3px; border: 1px solid #e5c58d; border-radius: 50%; background: #914129; color: #fff4d4; font: 700 10px/17px "Trebuchet MS",sans-serif; box-shadow: 0 2px 4px #0008; }
.quest-ready-badge[hidden] { display: none; }
.quests-dialog button:focus-visible, .quest-panel:focus-visible { outline: 2px solid #edcf87; outline-offset: 2px; }
@media (max-width: 360px) { .quests-dialog { padding: 12px; } .quest-card { grid-template-columns: 32px minmax(0,1fr) 66px; gap: 6px; padding: 9px 6px; } .quest-icon { width: 32px; height: 42px; font-size: 24px; } .quest-objective h3 { font-size: 12px; } }


.quest-reward-tokens { display: inline-flex; align-items: center; gap: 4px; color: #f2d592; }

.quest-stars { display: flex; gap: 3px; margin: -2px 0 6px; color: #0c141d; font-size: 16px; line-height: 1; text-shadow: 0 1px #ffffff14; }
.quest-stars .earned { color: #edc369; text-shadow: 0 1px 2px #000; }

/* Stone plates: universal low-poly fantasy window skin. */
.quests-dialog.fantasy-frame { border: 5px solid #77628f; border-radius: 12px; padding: 12px; color: #f9edd5; background: linear-gradient(145deg,#4a3e61 0%,#302940 34%,#252237 100%); box-shadow: inset 0 0 0 2px #b49bd055,inset 0 0 0 5px #171525,0 16px 50px #000b; scrollbar-color: #9478b6 #211e30; }
.quests-header { position: relative; justify-content: center; min-height: 64px; margin: 0 0 9px; padding: 10px 42px 7px; border: 0; border-radius: 6px; background: linear-gradient(155deg,#706084 0%,#57496e 35%,#403752 36%,#514461 75%,#3b324d); box-shadow: inset 0 2px #bda6d170,inset 0 -3px #1c192b; }
.quests-heading { display: flex; justify-content: center; }
.quests-header h2 { margin: 0; color: #fff0cf; font: 900 29px "Trebuchet MS",sans-serif; text-shadow: 0 2px #15111e,1px 0 #15111e,-1px 0 #15111e; }
.quests-rune { position: absolute; top: -11px; left: calc(50% - 13px); width: 26px; height: 26px; border: 2px solid #a087ba; background: #423450; color: #ffb247; text-align: center; font: 900 22px/22px Georgia,serif; transform: rotate(0deg); border-radius: 4px; text-shadow: 0 0 5px #f58c2740; }
.quests-close { position: absolute; right: 6px; top: 12px; width: 36px; height: 36px; border: 2px solid #967aae; border-radius: 5px; background: linear-gradient(135deg,#665175,#392d4b); color: #ffae43; font: 900 30px/1 "Trebuchet MS",sans-serif; box-shadow: inset 0 2px #bea2d640,inset 0 -2px #1a1525; }
.quest-tabs { gap: 5px; padding-bottom: 10px; border-bottom: 2px solid #1c192b; }
.quest-tabs button { border: 2px solid #69557f; border-radius: 5px; background: linear-gradient(160deg,#4b3d61,#2d263d); color: #bfb4d2; box-shadow: inset 0 2px #bca1d72b,inset 0 -2px #15111f; }
.quest-tabs button[aria-selected="true"] { border-color: #ffc469; background: linear-gradient(150deg,#ffb744,#d87b1d 48%,#e68b24 49%,#bf5e13); color: #fff0d1; text-shadow: 0 2px #733512; box-shadow: inset 0 2px #ffedb790,inset 0 -3px #8e401d; }
.quest-panel { padding-top: 9px; }
.quest-chapter { padding: 2px 2px 12px; }
.quest-chapter h3 { margin: 0; color: #fff0d4; font: 900 19px "Trebuchet MS",sans-serif; text-shadow: 0 2px #191321; }
#questChapterProgress { color: #ffbf52; font-size: 13px; font-weight: 900; }
.quest-card { grid-template-columns: 48px minmax(0,1fr) 75px; padding: 9px 7px; gap: 8px; border: 2px solid #65517c; border-radius: 6px; background: linear-gradient(135deg,#4b3b5e,#332b44 55%,#292439); box-shadow: inset 0 2px #a18aba40,inset 0 -2px #171320,0 2px 3px #0005; }
.quest-icon { width: 48px; height: 52px; border: 0; background: transparent; box-shadow: none; }
.quest-icon img { display: block; width: 48px; height: auto; border-radius: 7px; }
.quest-objective h3 { color: #fff4df; font-size: 13px; text-shadow: 0 1px 2px #16111e; }
.quest-objective p { color: #c9bcdf; font-size: 11px; margin-bottom: 6px; }
.quest-progress { height: 17px; border: 1px solid #80709b; border-radius: 3px; background: #1c192c; }
.quest-progress > span,.quest-complete .quest-progress > span { background: linear-gradient(#c9a5ef,#9470bd); box-shadow: inset 0 1px #e8ceff; }
.quest-progress b { color: #fff8eb; }
.quest-stars { color: #181322; text-shadow: 0 1px #bda7d344; }
.quest-stars .earned { color: #ffbf47; text-shadow: 0 1px 2px #321711; }
.quest-reward-tokens { color: #ffca69; font-size: 13px; }
.quest-reward button { min-height: 36px; border: 2px solid #bd792b; border-radius: 5px; background: linear-gradient(145deg,#cb8c38,#a75e23); color: #eed1a8; text-shadow: 0 1px #683515; box-shadow: inset 0 1px #ffc66870,inset 0 -2px #78401e; }
.quest-complete { border-color: #aa80ce; }
.quest-complete button[aria-disabled="false"] { border-color: #ffd077; background: linear-gradient(145deg,#ffbe4e,#ee8e22 50%,#d67318); color: #fff8db; box-shadow: inset 0 2px #ffeac080,inset 0 -2px #984611,0 0 8px #f09a2633; }
.quest-claimed button { background: #433851; border-color: #76628c; color: #c6b6d9; text-shadow: none; }
.quest-status { color: #c9b6df; }
.quests-dialog button:focus-visible,.quest-panel:focus-visible { outline-color: #ffc96b; }
@media (max-width:360px) { .quests-dialog.fantasy-frame { padding: 9px; border-width: 4px; } .quest-card { grid-template-columns: 36px minmax(0,1fr) 66px; gap: 6px; padding: 8px 5px; } .quest-icon,.quest-icon img { width: 36px; } .quest-objective h3 { font-size: 12px; } .quest-reward button { font-size: 10px; } }

/* Fixed corner geometry; the inner content scrolls independently of the stone rim. */
.quests-dialog.fantasy-frame { padding: 0; overflow: hidden; border: 20px solid transparent; border-radius: 0; border-image: url("assets/quest-stone-frame-v1.svg") 32 / 20px / 0 stretch; clip-path: polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px); box-shadow: none; }
.quests-frame-content { max-height: calc(100dvh - 76px); overflow-y: auto; overflow-x: hidden; padding: 12px 4px 8px; scrollbar-width: thin; scrollbar-color: #9478b6 #211e30; }
@media (max-width: 360px) { .quests-dialog.fantasy-frame { border-width: 16px; border-image-width: 16px; clip-path: polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px); } .quests-frame-content { max-height: calc(100dvh - 68px); padding: 12px 3px 6px; } }

/* Approved raster geometry: separate cap, rails and foot keep the header unstretched. */
.quests-dialog.fantasy-frame { position: fixed; height: min(800px, calc(100dvh - 36px)); max-height: calc(100dvh - 36px); padding: 0 0 20px; border: 0; border-image: none; border-radius: 0; clip-path: none; background: transparent; box-shadow: none; overflow: hidden; isolation: isolate; }
.quests-dialog[open] { display: flex; flex-direction: column; }
.quests-frame-art { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; pointer-events: none; z-index: -1; }
.quests-frame-art::before { content: ""; position: absolute; inset: 38px 12px 14px; background: #272136; z-index: -1; clip-path: polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px); }
.quests-frame-art img { display: block; width: 100%; pointer-events: none; }
.quests-frame-top { aspect-ratio: 932 / 190; }
.quests-frame-body { height: 100%; min-height: 0; }
.quests-frame-bottom { aspect-ratio: 932 / 56; }
.quests-dialog .quests-header { flex: 0 0 auto; width: 100%; aspect-ratio: 932 / 190; height: auto; min-height: 0; padding: 9px 44px 0; margin: 0 0 6px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.quests-header h2 { font-size: clamp(24px,6.6vw,32px); }
.quests-dialog .quests-close { top: 50%; right: 17px; transform: translateY(-40%); width: 34px; height: 34px; }
.quests-dialog .quests-frame-content { flex: 1 1 auto; min-height: 0; max-height: none; margin: 0 13px; padding: 3px 5px 7px; overflow-x: hidden; overflow-y: auto; }
@media (max-width:360px) { .quests-dialog.fantasy-frame { padding: 0 0 18px; border: 0; clip-path: none; } .quests-dialog .quests-frame-content { margin: 0 11px; padding: 3px 4px 6px; } .quests-dialog .quests-close { right: 14px; width: 30px; height: 30px; font-size: 26px; } }

/* Faceted orange reward skin and matching quest palette. */
.quest-reward button,.quest-complete button[aria-disabled="false"],.quest-claimed button { min-height: 38px; border: 0; border-radius: 0; padding: 6px 4px; background: transparent url("assets/quest-reward-button-v1.webp") center / 100% 100% no-repeat; box-shadow: none; color: #fff0d7; font-size: 12px; font-weight: 900; text-shadow: 0 1px 1px #623016,1px 0 #623016,-1px 0 #623016; transition: filter .12s,transform .12s; }
.quest-reward button[aria-disabled="true"] { filter: saturate(.8) brightness(.88); }
.quest-complete button[aria-disabled="false"] { filter: brightness(1.08); }
.quest-reward button[aria-disabled="false"]:active { transform: translateY(1px) scale(.97); filter: brightness(.94); }
.quest-claimed button { filter: grayscale(.8) brightness(.72); }
.quest-progress { border-color: #77638d; background: #1b182a; }
.quest-progress > span,.quest-complete .quest-progress > span { background: linear-gradient(160deg,#bb98df 0%,#b08cd5 44%,#9572bc 45%,#8463a8 100%); box-shadow: inset 0 1px #d8b9f1,inset 0 -2px #614777; }
.quest-stars { color: #1d182c; -webkit-text-stroke: .45px #79638e; text-shadow: none; }
.quest-stars .earned { color: #ffbf43; -webkit-text-stroke: .45px #a66620; text-shadow: 0 1px #57311b; }
.quest-reward-tokens,#questChapterProgress { color: #ffc76b; }
.quest-status { color: #dbcaef; }
.quest-ready-badge { border-color: #ffcb70; background: #d17a22; color: #fff1d5; }
@media (max-width:360px) { .quest-reward button { font-size: 11px; padding: 6px 2px; } }

/* Inventory shares the approved stone frame and faceted quest controls. */
#hunt.view.on { overflow: hidden; }
.hud-top,.skill-bar { flex-shrink: 0; }
@supports (width: 1cqh) { .hunt-active .monster { width: min(clamp(240px,72vw,300px),68cqh); } }
#inventory.view.on { overflow: hidden; }
#inventory .inventory-screen { height: 100%; display: flex; flex-direction: column; }
#inventory .inventory-header { flex-shrink: 0; }
#inventory .inventory-frame-content { flex: 1 1 0; min-height: 0; grid-template-rows: auto minmax(0,1fr) auto; }
#inventory .inventory-section { min-height: 0; }
#inventory .inventory-list,#inventory .inventory-screen:has(.inventory-weapon-detail) .inventory-list { height: 100%; max-height: none; grid-auto-rows: max-content; align-content: start; }
.inventory-screen { position: relative; isolation: isolate; gap: 0; padding: 0 0 18px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.inventory-frame-art { position: absolute; inset: 0; z-index: -1; display: grid; grid-template-rows: auto minmax(0,1fr) auto; pointer-events: none; }
.inventory-frame-art::before { content: ""; position: absolute; inset: 38px 12px 14px; z-index: -1; background: #272136; clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px); }
.inventory-frame-art img { display: block; width: 100%; }
.inventory-header { aspect-ratio: 932 / 190; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 20px 0; }
.inventory-header h2 { font-size: clamp(22px,6.3vw,30px); color: #fff1c9; text-shadow: 0 2px #171222; }
.inventory-header > span { color: #d4c1e7; font-size: 11px; }
.inventory-frame-content { display: grid; gap: 10px; min-width: 0; margin: 7px 13px 0; padding: 0 7px 6px; }
.inventory-category { min-height: 42px; border: 0; border-radius: 0; color: #d5c5e8; background: linear-gradient(150deg,#615070,#453854 48%,#372b48 49%,#33273f); box-shadow: inset 0 2px #887499,inset 2px 0 #77628c,inset -2px 0 #473653,inset 0 -3px #1b1529; clip-path: polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px); font-size: 11px; text-transform: none; }
.inventory-category.active { border: 0; background: transparent url("assets/quest-reward-button-v1.webp") center / 100% 100% no-repeat; color: #fff0d7; box-shadow: none; text-shadow: 0 1px #623016; }
.inventory-list { scrollbar-width: thin; scrollbar-color: #9478b6 #211e30; }
.inventory-cell,.inventory-card-shell { border-radius: 0; border-color: color-mix(in srgb,var(--rarity-color) 70%,#756187); background: linear-gradient(145deg,#453751,#30263e 48%,#292135 49%,#251e31); box-shadow: inset 0 2px #8a719760,inset 2px 0 #8a719740,inset 0 -3px #17121f; clip-path: polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px); }
.inventory-cell.selected,.inventory-card-shell.selected { border-color: #ffbe5b; background: linear-gradient(145deg,#635074,#3e304c 48%,#372a43 49%,#2f233c); box-shadow: inset 0 2px #f4c88280,inset 0 -3px #17121f; }
.inventory-card-shell .inventory-cell,.inventory-card-shell .inventory-cell.selected { clip-path: none; background: transparent; box-shadow: none; }
.inventory-cell-quantity,.inventory-cell-rarity,.inventory-cell-level { border-radius: 2px; background: #21192ed9; }
.equipped-weapon-summary,.inventory-weapon-detail { border: 2px solid #756185; border-radius: 0; background: linear-gradient(145deg,#4e3f5b,#362c45 46%,#30263e 47%,#2a2136); box-shadow: inset 0 2px #a68abc60,inset 2px 0 #a68abc30,inset 0 -3px #1a1425; clip-path: polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px); }
.inventory-selected-icon,.inventory-weapon-detail .inventory-selected-icon { border-radius: 0; clip-path: polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px); }
.inventory-weapon-stats { border-radius: 2px; border-color: #826b9845; background: #20192d80; }
.inventory-equip,.inventory-dismantle,.inventory-weapon-detail .inventory-equip,.inventory-weapon-detail .inventory-dismantle,.inventory-action-confirm,.weapon-star-popover-buy { min-height: 38px; border: 0; border-radius: 0; background: transparent url("assets/quest-reward-button-v1.webp") center / 100% 100% no-repeat; color: #fff0d7; box-shadow: none; text-shadow: 0 1px #623016; font-weight: 900; }
.inventory-dismantle,.inventory-weapon-detail .inventory-dismantle,.inventory-action-confirm { filter: hue-rotate(-17deg) saturate(.8); }
.inventory-equip:disabled,.inventory-weapon-detail .inventory-equip:disabled,.weapon-star-popover-buy:disabled { opacity: .65; filter: saturate(.25) brightness(.8); }
.inventory-category:focus-visible,.inventory-cell:focus-visible,.inventory-selected-actions button:focus-visible { outline: 2px solid #ffe5a9; outline-offset: -4px; }
.inventory-selected-actions button:not(:disabled):active { transform: translateY(1px); }
.inventory-action-dialog,.weapon-star-popover { border: 3px solid #826c95; border-radius: 2px; background: linear-gradient(145deg,#4e3f5b,#30263e); box-shadow: inset 0 2px #b197c570,inset 0 -3px #1a1425,0 8px 24px #08060db3; }
.inventory-dismantle-weapon,.inventory-dismantle-art,.inventory-dismantle-reward { border-radius: 2px; border-color: #806a92; background-color: #292135; }
.inventory-action-cancel { border-radius: 0; border-color: #9d83b1; background: linear-gradient(145deg,#615070,#372b48); clip-path: polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px); }
@media (max-width:360px) { .inventory-frame-content { margin-right: 11px; margin-left: 11px; padding-right: 5px; padding-left: 5px; } .inventory-category { font-size: 10px; } .inventory-weapon-detail .inventory-selected-actions { gap: 4px; } .inventory-weapon-detail .inventory-equip,.inventory-weapon-detail .inventory-dismantle { font-size: 9px; } }
/* Progress transfer between browser origins. */
.save-transfer-dialog { width: min(340px, calc(100vw - 40px)); max-height: 80dvh; overflow: auto; padding: 20px; color: #fff0c5; background: #30273f; border: 3px solid #75618a; border-radius: 12px; box-shadow: inset 0 0 0 2px #171321, 0 12px 35px #0009; }
.save-transfer-dialog::backdrop { background: #080b15b8; }
.save-transfer-dialog h2 { margin: 0 0 12px; font-size: 22px; }
.save-transfer-dialog p { font-size: 14px; line-height: 1.45; }
.save-transfer-dialog button { display: block; width: 100%; margin-top: 10px; padding: 10px; color: #fff0c5; background: #493953; border: 1px solid #96749d; border-radius: 6px; font: inherit; font-size: 14px; }
.save-transfer-dialog button[hidden] { display: none; }
#confirmSaveImport { background: #93612b; border-color: #dca655; }
#openSaveTransfer { padding: 0; cursor: pointer; font-family: inherit; }