:root {
  --ink: #0E0F0D; --lake: #0F1E1C; --lake2: #16302B; --paper: #D9CFB8; --paper2: #B9AC8F; --bone: #EDE6D3;
  --cin: #B8342A; --verd: #4E8C7A; --ash: #7A7A72; --azur: #2F5D8C; --plum: #6E2E4A; --gold: #C89B3C; --pearl: #F3EEDF;
  --disp: "Cormorant Garamond", "Noto Serif", Georgia, serif;
  --body: "Noto Serif", Georgia, serif;
  --brush: "Ma Shan Zheng", "Noto Serif", serif;
  --m: max(16px, env(safe-area-inset-left));
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--bone); font-family: var(--body); -webkit-tap-highlight-color: transparent; }
body { touch-action: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; border-radius: 0; }
button:focus-visible { outline: 1px dashed var(--bone); outline-offset: 2px; }
#game { position: fixed; inset: 0; }
#game canvas { display: block; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- top bar ---------- */
#top { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: max(10px, env(safe-area-inset-top)) var(--m) 0; z-index: 20; pointer-events: none; }
#top > * { pointer-events: auto; }
.purse { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.cur { display: inline-flex; align-items: center; gap: 6px; background: rgba(14,15,13,.82); border: 1px solid rgba(237,230,211,.35); padding: 3px 9px 3px 5px; font-variant-numeric: tabular-nums; font-size: 15px; }
.cur b { font-family: var(--disp); font-weight: 700; font-size: 19px; line-height: 1; letter-spacing: .02em; }
.coin-ico { width: 18px; height: 18px; border-radius: 50%; background: #8a6a33; border: 1.5px solid #c9a35a; position: relative; display: inline-block; }
.coin-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; background: var(--ink); border: 1px solid #c9a35a; }
.drop-ico { width: 13px; height: 17px; display: inline-block; background: var(--verd); clip-path: polygon(50% 0, 85% 52%, 92% 72%, 78% 92%, 50% 100%, 22% 92%, 8% 72%, 15% 52%); }
.snd { background: rgba(14,15,13,.82); border: 1px solid rgba(237,230,211,.35); width: 34px; height: 30px; padding: 0; font-family: var(--brush); font-size: 19px; line-height: 1; }
.snd.off { color: var(--ash); text-decoration: line-through; text-decoration-color: var(--cin); }
.tab-btn { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: 5px 12px 5px 8px; font-family: var(--disp); font-weight: 700; font-size: 17px; display: inline-flex; gap: 8px; align-items: center; box-shadow: 3px 0 0 var(--paper2); }
.key { font-family: var(--body); font-size: 10px; letter-spacing: .04em; border: 1px solid currentColor; padding: 1px 4px; color: var(--cin); border-color: var(--cin); line-height: 1.2; }
@media (hover: none) { .kb, .tab-btn .key { display: none; } }

/* ---------- home ---------- */
#home { position: fixed; inset: 0; z-index: 10; pointer-events: none; display: grid; grid-template-rows: auto 1fr auto; padding: calc(56px + env(safe-area-inset-top)) var(--m) max(16px, env(safe-area-inset-bottom)); }
#home > * { pointer-events: auto; }
.cover { position: relative; display: flex; gap: 14px; align-items: flex-start; justify-self: start; pointer-events: none !important; }
.vert { writing-mode: vertical-rl; font-family: var(--brush); font-size: 30px; color: var(--paper); letter-spacing: .1em; border-left: 1px solid rgba(217,207,184,.5); border-right: 1px solid rgba(217,207,184,.5); padding: 6px 4px; line-height: 1; margin-top: 4px; }
h1 { margin: 0; font-family: var(--disp); font-weight: 600; line-height: .95; display: flex; flex-direction: column; }
h1 .sc { font-variant: small-caps; text-transform: lowercase; font-size: 24px; letter-spacing: .2em; color: var(--paper); font-weight: 600; }
h1 .big { font-size: clamp(46px, 15vw, 100px); font-weight: 700; color: var(--bone); letter-spacing: .01em; margin: 6px 0 4px; line-height: .92; }
h1 .big > span { display: block; white-space: nowrap; }
@media (min-width: 900px) { h1 .big > span { display: inline; } }
h1 .en { font-style: italic; font-weight: 500; font-size: 19px; color: var(--paper2); letter-spacing: .06em; }
.seal { background: var(--cin); color: var(--paper); font-family: var(--brush); display: inline-grid; place-items: center; line-height: 1; }
.title-seal { position: absolute; right: -62px; bottom: -6px; width: 52px; height: 52px; grid-template-columns: 1fr; font-size: 22px; padding: 3px; transform: rotate(4deg); border: 2px solid var(--cin); outline: 1px solid var(--paper); outline-offset: -5px; }
.title-seal span { display: block; }
@media (min-width: 700px) { .title-seal { right: -84px; bottom: 0; width: 64px; height: 64px; font-size: 27px; } }
#menu { align-self: end; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; margin-bottom: 18px; margin-left: calc(-1 * var(--m)); }
.strip { position: relative; display: flex; align-items: center; gap: 12px; min-width: 250px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-left: none; padding: 9px 18px 9px calc(var(--m) + 4px); font-family: var(--disp); font-weight: 700; font-size: 20px; text-align: left; transition: transform 220ms ease-out; box-shadow: inset -4px 0 0 var(--paper2); }
.strip:hover, .strip:focus-visible, .strip:active { transform: translateX(8px); }
.strip .cn { font-family: var(--brush); font-weight: 400; font-size: 20px; color: var(--cin); width: 22px; }
.strip small { font-family: var(--body); font-size: 12px; font-weight: 400; color: #5b5645; margin-left: auto; padding-left: 10px; }
.strip.primary { min-width: 290px; font-size: 23px; background: var(--bone); }
.strip.primary .cn { font-size: 24px; }
#scope { grid-column: 1 / -1; grid-row: 3; margin: 0; font-size: 11px; color: var(--paper2); }
.daily-seal { position: absolute; right: var(--m); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 30px); width: 66px; height: 66px; border: 2px dashed var(--cin); background: transparent; color: var(--cin); font-family: var(--brush); font-size: 30px; display: grid; place-items: center; animation: pulse 2.6s ease-in-out infinite; }
.daily-seal.stamped { background: var(--cin); color: var(--paper); border-style: solid; animation: none; }
@keyframes pulse { 50% { transform: scale(1.08); opacity: .65; } }
@media (orientation: landscape) and (min-width: 700px) {
  #home { grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; }
  #menu { grid-column: 1; grid-row: 2; }
  .cover { grid-column: 1 / span 2; }
}
@media (max-height: 640px) and (orientation: portrait) { .strip { padding-top: 6px; padding-bottom: 6px; font-size: 18px; } h1 .big { font-size: 40px; } }
@media (max-height: 520px) { .daily-seal { top: calc(52px + env(safe-area-inset-top)); bottom: auto; width: 52px; height: 52px; font-size: 24px; } #menu { flex-direction: row; flex-wrap: wrap; margin-left: 0; gap: 5px; } .strip { min-width: 0; border-left: 1px solid var(--ink); padding: 6px 10px; font-size: 16px; } .strip.primary { min-width: 0; font-size: 17px; } h1 .big { font-size: 36px; } .vert { display: none; } }

/* ---------- hud ---------- */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#hud > * { pointer-events: auto; }
#hint { position: absolute; left: var(--m); right: calc(var(--m) + 50px); top: calc(48px + env(safe-area-inset-top)); font-family: var(--disp); font-size: 18px; font-weight: 600; line-height: 1.2; color: var(--bone); pointer-events: none !important; max-width: 520px; text-shadow: 0 1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 -1px 0 var(--ink); }
#hint.alarm { color: var(--cin); }
#hint .kbh { font-family: var(--body); font-size: 11px; font-weight: 400; color: var(--paper2); }
#bossbar { position: absolute; left: var(--m); right: var(--m); top: calc(92px + env(safe-area-inset-top)); max-width: 760px; margin: 0 auto; pointer-events: none !important; }
.bname { background: var(--ink); padding: 2px 8px; align-self: flex-start; width: max-content; max-width: 100%; font-family: var(--disp); font-weight: 700; font-size: 19px; display: flex; align-items: baseline; gap: 8px; color: var(--bone); margin-bottom: 2px; }
.bname .bg { font-family: var(--brush); color: var(--cin); font-size: 24px; font-weight: 400; }
.bstrip { position: relative; height: 30px; background: var(--paper); border: 1px solid var(--ink); }
.bstrip canvas { width: 100%; height: 100%; display: block; }
.pseal { position: absolute; top: -8px; width: 22px; height: 22px; border: 1.5px solid var(--cin); color: var(--cin); background: var(--paper); font-family: var(--brush); font-size: 14px; display: grid; place-items: center; transform: translateX(-50%); }
.pseal.p2 { left: 66%; } .pseal.p3 { left: 33%; }
.pseal.on { background: var(--cin); color: var(--paper); animation: stamp 120ms ease-out; }
#tug { position: absolute; left: var(--m); right: calc(var(--m) + 50px); top: calc(150px + env(safe-area-inset-top)); max-width: 560px; height: 30px; display: flex; align-items: center; gap: 6px; pointer-events: none !important; }
#bossbar[hidden] ~ #tug { top: calc(100px + env(safe-area-inset-top)); }
#tug canvas { flex: 1; height: 22px; min-width: 0; }
.ticon { font-family: var(--brush); font-size: 18px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--bone); background: var(--ink); color: var(--bone); }
.ticon.fish { color: var(--cin); border-color: var(--cin); }
#gauge { position: absolute; right: calc(var(--m) - 6px); top: 34%; height: 34%; min-height: 200px; width: 40px; background: rgba(14,15,13,.78); padding: 4px 0; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none !important; }
.glabel { font-family: var(--brush); font-size: 18px; color: var(--paper); }
.glabel.small { font-size: 15px; }
#slips { flex: 1; width: 26px; display: flex; flex-direction: column-reverse; gap: 2px; border-left: 1px solid rgba(237,230,211,.5); border-right: 1px solid rgba(237,230,211,.5); padding: 2px; }
#slips i { flex: 1; background: rgba(217,207,184,.12); border: 1px solid rgba(217,207,184,.25); display: block; }
#slips i.on { background: var(--verd); border-color: #6fae9b; }
#slips i.dz { border-color: rgba(184,52,42,.55); }
#slips i.on.dz { background: var(--cin); border-color: #e25a4a; }
#gauge.shake #slips { animation: jit 70ms linear infinite; }
@keyframes jit { 25% { transform: translate(1px, -1px); } 50% { transform: translate(-1px, 1px); } 75% { transform: translate(1px, 1px); } }
#knots { width: 24px; height: 92px; overflow: visible; }
#knots .k { fill: var(--paper); stroke: var(--ink); stroke-width: 1; transition: transform 400ms ease-in, opacity 400ms ease-in; transform-box: fill-box; transform-origin: center; }
#knots .k.fray { fill: var(--paper2); }
#knots .k.gone { opacity: 0; transform: translateY(30px) rotate(40deg); }
#reel { position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: 112px; height: 112px; border-radius: 50%; border: none; padding: 0; background: #6a5232; color: var(--bone); display: grid; place-items: center; touch-action: none; }
#reel svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#reel .rim { fill: none; stroke: var(--verd); stroke-width: 6; }
#reel .fill { fill: none; stroke: var(--bone); stroke-width: 6; stroke-dasharray: 289; stroke-dashoffset: 289; }
#reel .hole { position: absolute; width: 18px; height: 18px; border: 1.5px solid #a8885a; background: var(--ink); top: 18px; left: 50%; margin-left: -9px; }
#reel::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1px solid #a8885a; }
#reel .lbl { position: relative; font-family: var(--disp); font-weight: 700; font-size: 17px; line-height: 1; text-align: center; margin-top: 10px; }
#reel .key { position: absolute; bottom: 9px; background: #6a5232; }
#reel.held { background: #57422a; }
#reel.strike { background: var(--cin); animation: pulse 0.3s ease-in-out infinite; }
#reel.strike .rim { stroke: var(--bone); }
#helpBtn { position: absolute; left: var(--m); bottom: max(26px, env(safe-area-inset-bottom)); width: 40px; height: 40px; border: 1px solid var(--bone); background: var(--ink); font-family: var(--disp); font-weight: 700; font-size: 22px; }
#summon { position: absolute; right: var(--m); bottom: calc(max(22px, env(safe-area-inset-bottom)) + 124px); background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: 6px 10px; font-family: var(--disp); font-weight: 700; font-size: 16px; display: flex; gap: 6px; align-items: center; max-width: 46vw; text-align: left; line-height: 1.1; }
#summon .cn { font-family: var(--brush); color: var(--cin); font-size: 22px; font-weight: 400; }
@media (orientation: landscape) and (min-width: 700px) {
  #reel { left: auto; right: calc(var(--m) + 56px); transform: none; width: 124px; height: 124px; }
  #summon { bottom: calc(max(22px, env(safe-area-inset-bottom)) + 140px); right: calc(var(--m) + 56px); }
  #gauge { top: 22%; height: 40%; }
}
@media (max-height: 560px) { #gauge { top: 26%; height: 36%; min-height: 150px; } #reel { width: 96px; height: 96px; } }
#power { position: absolute; left: 50%; bottom: calc(max(22px, env(safe-area-inset-bottom)) + 120px); transform: translateX(-50%); width: 190px; height: 34px; pointer-events: none !important; }
#power canvas { width: 100%; height: 100%; }
@media (orientation: landscape) and (min-width: 700px) { #power { left: auto; right: calc(var(--m) + 25px); transform: none; bottom: calc(max(22px, env(safe-area-inset-bottom)) + 136px); } }
#bitemark { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-family: var(--brush); font-size: 74px; color: var(--cin); pointer-events: none !important; animation: stamp 120ms ease-out; }
#bitemark small { display: block; font-family: var(--disp); font-size: 16px; text-align: center; color: var(--bone); letter-spacing: .1em; }
#tele { position: absolute; inset: 0; pointer-events: none !important; }
#tele .blot { position: absolute; right: -40px; top: 18%; width: 62%; height: 64%; background: var(--ink); clip-path: polygon(100% 0, 60% 8%, 72% 18%, 38% 26%, 55% 36%, 20% 48%, 46% 56%, 10% 70%, 50% 76%, 34% 88%, 70% 92%, 100% 100%); transform-origin: right center; animation: bloom var(--tw, .8s) ease-out forwards; border-left: 2px solid var(--cin); opacity: .92; }
#tele .glyph { position: absolute; right: 18%; top: 34%; font-family: var(--brush); font-size: min(30vw, 160px); color: var(--cin); line-height: 1; animation: stamp 120ms ease-out; }
#tele .tlabel { position: absolute; right: 16%; top: calc(34% + min(30vw, 160px) + 6px); font-family: var(--disp); font-weight: 700; font-size: 24px; color: var(--bone); background: var(--ink); padding: 2px 10px; border: 1px solid var(--cin); }
@keyframes bloom { from { transform: scaleX(.1) scaleY(.6); opacity: .2; } to { transform: none; opacity: .92; } }
@keyframes stamp { from { transform: scale(1.3); } to { transform: none; } }
#bitemark { animation-name: stampc; } @keyframes stampc { from { transform: translate(-50%, -50%) scale(1.3); } to { transform: translate(-50%, -50%); } }
#blindfx { position: absolute; inset: 0; pointer-events: none !important; background: var(--ink); opacity: 0; animation: blind 2.2s ease-out; clip-path: polygon(0 10%, 20% 0, 50% 6%, 80% 0, 100% 12%, 96% 50%, 100% 88%, 70% 100%, 40% 94%, 10% 100%, 0 80%, 5% 45%); }
#blindfx.day { background: var(--bone); }
@keyframes blind { 0% { opacity: 0; } 8% { opacity: .9; } 50% { opacity: .75; } 100% { opacity: 0; } }

/* ---------- toast ---------- */
#toast { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 40; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: 10px 18px; font-family: var(--disp); font-weight: 700; font-size: 21px; max-width: min(88vw, 460px); text-align: center; opacity: 0; transition: opacity 250ms; pointer-events: none; box-shadow: 4px 4px 0 var(--ink); }
#toast.on { opacity: 1; }
#toast.bad { border-left: 6px solid var(--cin); }
#toast small { display: block; font-family: var(--body); font-weight: 400; font-size: 13px; color: #4c473a; }

/* ---------- ink wash ---------- */
#ink { position: fixed; inset: -10%; z-index: 60; pointer-events: none; background: var(--ink); opacity: 0; clip-path: circle(0% at 50% 50%); }
#ink.flood { animation: flood 700ms ease-in-out; }
@keyframes flood { 0% { opacity: .2; clip-path: circle(0% at 30% 60%); } 45% { opacity: 1; clip-path: circle(80% at 50% 50%); } 60% { opacity: 1; clip-path: circle(80% at 50% 50%); } 100% { opacity: 0; clip-path: circle(80% at 50% 50%); } }

/* ---------- sheets (paper panels) ---------- */
#sheet { position: fixed; inset: 0; z-index: 30; background: rgba(14,15,13,.55); }
#sheet .paper { position: absolute; top: 0; bottom: 0; right: 0; width: min(100%, 640px); background: var(--paper); color: var(--ink); display: flex; flex-direction: column; border-left: 1px solid var(--ink); box-shadow: -6px 0 0 var(--paper2); animation: slidein 260ms ease-out; }
#sheet.wide .paper { width: min(100%, 980px); }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sh { display: flex; align-items: center; justify-content: space-between; padding: max(14px, env(safe-area-inset-top)) var(--m) 10px; border-bottom: 1px solid var(--ink); gap: 10px; }
.sh h2 { margin: 0; font-family: var(--disp); font-weight: 700; font-size: 28px; line-height: 1; display: flex; align-items: baseline; gap: 10px; }
.sh h2 .cn { font-family: var(--brush); font-weight: 400; color: var(--cin); font-size: 30px; }
.close { background: var(--ink); color: var(--paper); border: none; padding: 7px 12px; font-family: var(--disp); font-weight: 700; font-size: 17px; }
.sbody { flex: 1; overflow: auto; padding: 14px var(--m) max(20px, env(safe-area-inset-bottom)); touch-action: pan-y; -webkit-overflow-scrolling: touch; user-select: text; }
.sbody h3 { font-family: var(--disp); font-size: 22px; margin: 16px 0 6px; }
.sbody p { line-height: 1.5; margin: 6px 0; font-size: 14px; }
.btn { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: 8px 14px; font-family: var(--disp); font-weight: 700; font-size: 17px; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.red { background: var(--cin); border-color: var(--cin); color: var(--paper); }
.btn[disabled] { opacity: .4; cursor: default; }
.tabs { display: flex; gap: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; border-bottom: 1px solid var(--ink); margin: 0 calc(-1 * var(--m)) 12px; padding: 0 var(--m); }
.tabs button { flex: none; white-space: nowrap; background: transparent; border: 1px solid transparent; border-bottom: none; padding: 7px 12px 6px; font-family: var(--disp); font-weight: 700; font-size: 17px; margin-bottom: -1px; color: #4c473a; display: inline-flex; gap: 5px; align-items: baseline; }
.tabs button .cn { font-family: var(--brush); font-weight: 400; color: var(--cin); }
.tabs button.on { border-color: var(--ink); background: var(--bone); color: var(--ink); }
.tabs button.sealed { color: #8a826c; }
.wax { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--cin); border: 1px solid #7c1f17; margin-left: 2px; vertical-align: -2px; }

/* ledger */
.row { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(14,15,13,.3); }
.row canvas { width: 64px; height: 48px; border: 1px solid var(--ink); background: var(--bone); }
.row .nm { font-family: var(--disp); font-weight: 700; font-size: 19px; line-height: 1.1; }
.row .ds { font-size: 12px; color: #4c473a; margin: 2px 0; }
.row .delta { color: #2f6b59; font-size: 13px; font-variant-numeric: tabular-nums; }
.row .cost { font-size: 13px; font-variant-numeric: tabular-nums; display: flex; gap: 10px; align-items: center; margin-top: 2px; }
.row .cost .coin-ico { width: 13px; height: 13px; } .row .cost .coin-ico::after { width: 4px; height: 4px; margin: -2px; }
.row .cost .drop-ico { width: 10px; height: 13px; }
.buy { width: 58px; height: 58px; background: var(--cin); color: var(--paper); border: none; font-family: var(--brush); font-size: 24px; line-height: 1; display: grid; place-items: center; }
.buy small { font-family: var(--disp); font-size: 12px; font-weight: 700; display: block; }
.buy[disabled] { background: transparent; color: #9c937c; border: 1.5px dashed #9c937c; cursor: default; }
.buy.equip { background: var(--ink); }
.buy.equipped { background: transparent; color: var(--verd); border: 1.5px solid var(--verd); }

/* creel grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.tile { position: relative; background: var(--bone); border: 1px solid var(--ink); padding: 6px; text-align: left; color: var(--ink); display: flex; flex-direction: column; }
.tile canvas { width: 100%; height: auto; aspect-ratio: 16/10; display: block; }
.tile .tn { font-family: var(--disp); font-weight: 700; font-size: 15px; line-height: 1.1; }
.tile .tw { font-family: var(--disp); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums lining-nums; }
.tile .tw span { font-size: 12px; font-weight: 600; margin-left: 3px; }
.tile .tp { font-size: 11px; color: #4c473a; }
.tile.sel { outline: 2px solid var(--cin); outline-offset: 1px; }

/* rarity treatments: colour AND a different border, so they read in grey too */
.r0 { border: 1px solid var(--ash) !important; }
.r1 { border: 4px double var(--verd) !important; }
.r2 { border: 1.5px solid var(--azur) !important; }
.r2::before, .r2::after { content: ""; position: absolute; width: 12px; height: 12px; border: 3px solid var(--azur); pointer-events: none; }
.r2::before { top: -4px; left: -4px; border-right: none; border-bottom: none; }
.r2::after { bottom: -4px; right: -4px; border-left: none; border-top: none; }
.r3 { border: 6px solid transparent !important; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 3 Q3 0 6 3 T12 3 T18 3 T24 3 M3 0 V24 M0 21 Q3 24 6 21 T12 21 T18 21 T24 21 M21 0 V24' fill='none' stroke='%236E2E4A' stroke-width='2'/%3E%3C/svg%3E") 6 round !important; }
.r4 { border: 2px solid var(--gold) !important; background-image: radial-gradient(circle, var(--gold) 0 1.1px, transparent 1.3px), radial-gradient(circle, var(--gold) 0 .8px, transparent 1px) !important; background-size: 37px 29px, 23px 41px !important; background-position: 3px 7px, 15px 2px !important; }
.r5 { border: 2px solid var(--cin) !important; }
.r6 { border: 1px solid var(--pearl) !important; background: var(--ink) !important; color: var(--pearl) !important; }
.r6 .tp, .r6 .ds { color: #b9b29d !important; }
.r7 { border: 1px solid #050605 !important; background: #050605 !important; color: var(--bone) !important; }
.r7::after { content: ""; position: absolute; inset: 2px; border: 2px solid var(--bone); filter: url(#rough); pointer-events: none; }
.r7 .tp { color: #9c937c !important; }
.tierseal { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; font-family: var(--brush); font-size: 15px; display: grid; place-items: center; border: 1px solid currentColor; }
.tierseal.round { border-radius: 50%; background: var(--cin); color: var(--paper); border-color: var(--cin); width: 28px; height: 28px; }
.tierseal.sq { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* bestiary book */
.book { position: relative; display: grid; grid-template-columns: 1fr; gap: 0; background: var(--bone); border: 1px solid var(--ink); padding-left: 26px; min-height: 60vh; }
.book::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 20px; background: var(--ink); }
.book::after { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 8px; background: repeating-linear-gradient(to bottom, transparent 0 22px, var(--paper) 22px 24px, transparent 24px 26px, var(--paper) 26px 28px, transparent 28px 60px); }
#sheet.wide .book { grid-template-columns: 1fr 1fr; }
#sheet.wide .book .pg + .pg { border-left: 1px solid rgba(14,15,13,.4); }
.pg { padding: 14px 16px 18px; position: relative; min-width: 0; touch-action: pan-y; }
.pg .no { position: absolute; top: 10px; right: 14px; font-family: var(--disp); font-size: 13px; color: #6b6452; }
.pg canvas { width: 100%; height: auto; display: block; margin: 6px 0; }
.pg h4 { margin: 0; font-family: var(--disp); font-size: 25px; line-height: 1.05; padding-right: 40px; }
.pg .cnn { font-family: var(--brush); font-size: 20px; color: var(--cin); }
.pg .vin { font-style: italic; font-size: 13px; color: #4c473a; }
.pg .stats { display: flex; gap: 14px; align-items: baseline; margin: 6px 0; flex-wrap: wrap; }
.pg .stats .w { font-family: var(--disp); font-weight: 700; font-size: 30px; font-variant-numeric: tabular-nums lining-nums; }
.pg .stats .w span { font-size: 14px; margin-left: 3px; }
.pg .cols { columns: 2 190px; column-gap: 18px; column-rule: 1px solid rgba(14,15,13,.25); font-size: 12.5px; line-height: 1.45; }
.pg .cols div { break-inside: avoid; margin-bottom: 8px; }
.pg .cols b { font-family: var(--disp); font-size: 15px; display: block; }
.pg .lore { font-style: italic; font-size: 13px; border-top: 1px solid rgba(14,15,13,.3); padding-top: 6px; }
.pg.unk h4 { color: var(--ash); }
.rseal { display: inline-grid; place-items: center; width: 34px; height: 34px; font-family: var(--brush); font-size: 20px; border: 1.5px solid; position: absolute; top: 34px; right: 14px; }
.bnav { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 8px; }
.bnav .pages { font-family: var(--disp); font-size: 15px; }
.idx { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.idx button { width: 32px; height: 32px; font-family: var(--brush); font-size: 17px; border: 1px solid var(--ink); background: var(--bone); padding: 0; }
.idx button.unk { color: #a59c86; border-style: dashed; }
.idx button.on { background: var(--ink); color: var(--paper); }
.sealed-chapter { border: 1px solid var(--ink); background: var(--bone); padding: 26px; text-align: center; min-height: 40vh; display: grid; place-items: center; align-content: center; gap: 10px; }
.sealed-chapter .wax.big { width: 70px; height: 70px; display: grid; place-items: center; font-family: var(--brush); color: var(--paper); font-size: 30px; }

/* quest scroll */
.scroll { position: relative; margin: 0 auto; max-width: 520px; }
.scroll .rod { height: 16px; background: var(--ink); position: relative; margin: 0 -14px; }
.scroll .rod::before, .scroll .rod::after { content: ""; position: absolute; top: -3px; width: 12px; height: 22px; background: #6a5232; border: 1px solid var(--ink); }
.scroll .rod::before { left: -6px; } .scroll .rod::after { right: -6px; }
.scroll .sheetq { background: var(--bone); border-left: 1px solid var(--ink); border-right: 1px solid var(--ink); overflow: hidden; animation: unroll 600ms ease-out; transform-origin: top; padding: 6px 16px; }
@keyframes unroll { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.q { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(14,15,13,.25); align-items: center; position: relative; }
.q .qn { font-family: var(--disp); font-weight: 700; font-size: 18px; }
.q .qd { font-size: 12.5px; color: #4c473a; }
.q .qp { font-size: 12px; font-variant-numeric: tabular-nums; margin-top: 3px; }
.q .bar { height: 5px; background: rgba(14,15,13,.15); margin-top: 3px; }
.q .bar i { display: block; height: 100%; background: var(--ink); }
.q .rw { font-size: 12px; color: #2f6b59; }
.q.done .qn, .q.done .qd { color: #7c7562; }
.check { position: absolute; left: -6px; top: 50%; width: 70px; height: 44px; transform: translateY(-50%); pointer-events: none; }
.check path { fill: none; stroke: var(--cin); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 120; stroke-dashoffset: 0; animation: brush 400ms ease-out; }
@keyframes brush { from { stroke-dashoffset: 120; } }

/* achievement seals */
.seals { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; }
.sealc { text-align: center; }
.sealc .stone { width: 70px; height: 70px; margin: 0 auto 6px; border: 2px solid #8a826c; color: #8a826c; font-family: var(--brush); font-size: 38px; display: grid; place-items: center; background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(14,15,13,.06) 4px 5px); }
.sealc.on .stone { background: var(--cin); border-color: var(--cin); color: var(--paper); outline: 1px solid var(--paper); outline-offset: -6px; }
.sealc .an { font-family: var(--disp); font-weight: 700; font-size: 14px; line-height: 1.1; }
.sealc .ad { font-size: 11px; color: #5b5645; }
.board { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.board td { padding: 5px 4px; border-bottom: 1px solid rgba(14,15,13,.2); }
.board td.v { text-align: right; font-family: var(--disp); font-weight: 700; font-size: 17px; }
.board tr.mine td { background: rgba(184,52,42,.12); }
.board a { color: var(--ink); }

/* daily */
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 12px 0; }
.day { border: 1px dashed #8a826c; aspect-ratio: 1; display: grid; place-items: center; align-content: center; font-size: 10px; text-align: center; padding: 2px; gap: 2px; }
.day b { font-family: var(--brush); font-size: 20px; font-weight: 400; }
.day.got { background: var(--cin); color: var(--paper); border: 1px solid var(--cin); }
.day.today { border: 2px solid var(--cin); color: var(--cin); }
.bigseal { width: 120px; height: 120px; margin: 18px auto; border: 3px dashed var(--cin); color: var(--cin); font-family: var(--brush); font-size: 64px; display: grid; place-items: center; background: transparent; }
.bigseal.stamped { background: var(--cin); color: var(--paper); border-style: solid; animation: stamp 120ms ease-out; }

/* ---------- catch reveal: the specimen page ---------- */
#reveal { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; background: rgba(14,15,13,.6); padding: 16px; overflow: auto; }
.spec { position: relative; width: min(100%, 560px); background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: 16px 18px 16px; animation: unroll var(--rd, .5s) ease-out; overflow: hidden; }
#reveal.shake .spec { translate: 0 0; } #reveal.shake { animation: kick 180ms linear; }
@keyframes kick { 25% { transform: translate(3px, -2px); } 50% { transform: translate(-3px, 2px); } 75% { transform: translate(2px, 1px); } }
.spec .top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.spec .top .newe { color: var(--cin); font-weight: 600; }
.spec canvas { width: 100%; height: auto; display: block; margin: 4px 0; position: relative; }
.spec h3 { margin: 0; font-family: var(--disp); font-weight: 700; font-size: clamp(24px, 6vw, 32px); line-height: 1.05; position: relative; padding-right: 70px; }
.spec .cnv { font-family: var(--brush); color: var(--cin); font-size: 20px; }
.spec .viv { font-style: italic; font-size: 13px; color: #4c473a; }
.spec .wt { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 2px; }
.spec .wt b { font-family: var(--disp); font-weight: 700; font-size: clamp(54px, 15vw, 84px); line-height: .9; font-variant-numeric: tabular-nums lining-nums; }
.spec .wt span { font-size: 15px; }
.spec .lore { font-style: italic; font-size: 13.5px; line-height: 1.45; margin: 6px 0; }
.spec .gain { font-size: 13px; color: #2f6b59; }
.spec .acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.spec .stampseal { position: absolute; right: 18px; top: 46px; width: 64px; height: 64px; font-family: var(--brush); font-size: 34px; display: grid; place-items: center; opacity: 0; border: 2px solid; z-index: 3; }
.spec .stampseal.hit { opacity: 1; animation: thunk 120ms ease-out; }
@keyframes thunk { from { transform: scale(1.3) rotate(-6deg); } to { transform: rotate(-6deg); } }
.spec .hide { opacity: 0; transition: opacity 300ms; }
.spec .show { opacity: 1; }
.spec.t0 .stampseal { color: var(--ash); }
.spec.t1 { border: 4px double var(--verd); } .spec.t1 .stampseal { color: var(--verd); }
.spec.t2 { border: 2px solid var(--azur); } .spec.t2 .stampseal { color: var(--azur); }
.spec.t2::before, .spec.t2::after { content: ""; position: absolute; width: 22px; height: 22px; border: 4px solid var(--azur); z-index: 2; }
.spec.t2::before { top: 4px; left: 4px; border-right: none; border-bottom: none; } .spec.t2::after { bottom: 4px; right: 4px; border-left: none; border-top: none; }
.spec.t3 { border: 8px solid transparent; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 3 Q3 0 6 3 T12 3 T18 3 T24 3 M3 0 V24 M0 21 Q3 24 6 21 T12 21 T18 21 T24 21 M21 0 V24' fill='none' stroke='%236E2E4A' stroke-width='2'/%3E%3C/svg%3E") 8 round; }
.spec.t3 .stampseal { color: var(--plum); }
.spec.t4 { border: 2px solid var(--gold); background-image: radial-gradient(circle, var(--gold) 0 1.3px, transparent 1.5px), radial-gradient(circle, var(--gold) 0 .9px, transparent 1.1px); background-size: 53px 37px, 29px 47px; background-position: 7px 11px, 21px 3px; }
.spec.t4 .stampseal { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.spec.t5 { border: 2px solid var(--cin); }
.spec.t5 .stampseal { border-radius: 50%; width: 84px; height: 84px; font-size: 46px; background: var(--cin); color: var(--paper); border-color: var(--cin); }
.spec.t5 h3::before { content: attr(data-n); position: absolute; left: 0; top: 0; color: rgba(14,15,13,.45); filter: url(#bleed); transform: scale(1.03); transform-origin: left; z-index: -1; }
.spec.t6 { background: var(--ink); color: var(--pearl); border: 1px solid var(--pearl); }
.spec.t6 .viv, .spec.t6 .top { color: #c9c2ad; }
.spec.t6 .gain { color: #7fbfa9; }
.spec.t6 .rays { position: absolute; left: 50%; top: 32%; width: 900px; height: 900px; margin: -450px; background: repeating-conic-gradient(from 0deg, rgba(243,238,223,.3) 0 0.4deg, transparent 0.4deg 6deg); animation: spin 60s linear infinite; pointer-events: none; -webkit-mask: radial-gradient(circle, transparent 0 60px, #000 61px); mask: radial-gradient(circle, transparent 0 60px, #000 61px); }
.spec.t6 .stampseal { color: var(--pearl); border-color: var(--pearl); }
.spec.t6 .btn { background: var(--pearl); color: var(--ink); } .spec.t6 .btn.ghost { background: transparent; color: var(--pearl); border-color: var(--pearl); }
@keyframes spin { to { transform: rotate(360deg); } }
.spec.t7 { background: #050605; color: var(--bone); border: none; padding: 24px 28px; }
.spec.t7::before { content: ""; position: absolute; inset: 3px; border: 2px solid var(--bone); filter: url(#rough); pointer-events: none; z-index: 2; }
.spec.t7 .burn { position: absolute; inset: -30px; pointer-events: none; z-index: 4; border: 0 solid #000; filter: url(#ragged); animation: burn 1.6s ease-in forwards; }
@keyframes burn { 0% { border-width: 0; } 55% { border-width: 64px; } 100% { border-width: 40px; } }
.spec.t7 .viv, .spec.t7 .top { color: #b9b29d; }
.spec.t7 .stampseal { background: var(--bone); color: #050605; border-color: var(--bone); border-radius: 50%; width: 90px; height: 90px; font-size: 50px; }
.spec.t7 .btn { background: var(--bone); color: var(--ink); } .spec.t7 .btn.ghost { background: transparent; color: var(--bone); border-color: var(--bone); }
.spec.t7 .gain { color: #7fbfa9; }

.help ol { padding-left: 20px; font-size: 14px; line-height: 1.5; }
.help li { margin-bottom: 6px; }
.help .kk { display: inline-block; border: 1px solid var(--cin); color: var(--cin); font-size: 11px; padding: 0 4px; }
.tiny { font-size: 11px; color: #5b5645; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  #ink { display: none; }
}

#depthRule { position: absolute; left: 6px; width: 120px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none !important; border-left: 1px solid rgba(237,230,211,.28); }
#depthRule span { font-family: var(--disp); font-style: italic; font-weight: 600; font-size: 13px; color: rgba(217,207,184,.6); padding-left: 7px; position: relative; line-height: 1.1; }
#depthRule span::before { content: ""; position: absolute; left: -1px; top: 6px; width: 5px; border-top: 1px solid rgba(237,230,211,.5); }
#depthRule small { display: block; font-style: normal; font-weight: 500; font-size: 10.5px; color: rgba(185,172,143,.55); font-family: var(--body); }

#foe { position: absolute; left: var(--m); top: calc(184px + env(safe-area-inset-top)); font-family: var(--disp); font-weight: 700; font-size: 16px; color: var(--bone); background: rgba(14,15,13,.75); padding: 2px 8px; pointer-events: none !important; max-width: 70vw; }
#bossbar[hidden] ~ #foe { top: calc(134px + env(safe-area-inset-top)); }
#foe small { display: block; font-family: var(--body); font-weight: 400; font-size: 11px; color: var(--paper2); }
.qqq { font-family: var(--disp); font-weight: 700; letter-spacing: .08em; color: #ff4a5a; font-size: 64px; }
#announce { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); text-align: center; pointer-events: none !important; width: min(92vw, 560px); animation: annIn 3.2s ease-out forwards; padding: 14px 10px; }
@keyframes annIn { 0% { opacity: 0; transform: translateX(-50%) scale(1.15); } 10% { opacity: 1; transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
#announce .ag { font-family: var(--brush); font-size: 72px; line-height: 1; }
#announce .at { font-family: var(--disp); font-weight: 700; font-size: clamp(22px, 6.4vw, 40px); line-height: 1; position: relative; font-variant: small-caps; letter-spacing: .04em; }
#announce .as { font-family: var(--disp); font-style: italic; font-size: 17px; margin-top: 6px; color: var(--paper); }
#announce .ar { display: inline-block; margin-top: 8px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; padding: 2px 10px; }
#announce.t4 { color: #e8c060; background: linear-gradient(transparent, rgba(14,15,13,.85) 20%, rgba(14,15,13,.85) 80%, transparent); }
#announce.t4 .ag { color: #C89B3C; }
#announce.t5 { color: var(--bone); background: rgba(14,15,13,.82); border-top: 2px solid var(--cin); border-bottom: 2px solid var(--cin); }
#announce.t5 .ag, #announce.t5 .ar { color: var(--cin); }
#announce.t5 .at::after { content: attr(data-t); position: absolute; left: 0; right: 0; top: 0; color: var(--cin); transform: translate(4px, -3px); opacity: .7; mix-blend-mode: screen; animation: jit 90ms linear infinite; }
#announce.t6 { color: var(--ink); background: var(--pearl); border: 1px solid var(--ink); }
#announce.t6 .as { color: #3a372e; }
#announce.t7 { color: var(--bone); background: #050605; border: 2px solid var(--bone); filter: url(#rough); }
#veins { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 9; }
#veins svg { width: 100%; height: 100%; }
#veins path { fill: none; stroke: var(--cin); stroke-width: .5; vector-effect: non-scaling-stroke; stroke-width: 3px; }
body.fx-mythic #veins { animation: veins 1.6s ease-in-out infinite; }
body.fx-divine #veins path { stroke: var(--pearl); } body.fx-divine #veins { animation: veins 2.4s ease-in-out infinite; }
body.fx-legend #veins path { stroke: var(--gold); } body.fx-legend #veins { animation: veins 3s ease-in-out infinite; }
@keyframes veins { 50% { opacity: .75; } }
.stars { display: flex; gap: 4px; align-items: center; margin: 2px 0 4px; }
.stars i { width: 16px; height: 16px; background: rgba(14,15,13,.2); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.stars i.on { background: #C89B3C; }
.spec.t6 .stars i, .spec.t7 .stars i { background: rgba(237,230,211,.25); } .spec.t6 .stars i.on, .spec.t7 .stars i.on { background: #e8c060; }
.stars .rec { margin-left: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cin); font-weight: 600; }
.idx button.secret.unk { border-color: var(--cin); color: var(--cin); }

#tip { position: absolute; left: var(--m); right: var(--m); bottom: calc(max(22px, env(safe-area-inset-bottom)) + 126px); max-width: 520px; margin: 0 auto; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); display: flex; gap: 10px; align-items: center; padding: 7px 8px 7px 12px; font-size: 13px; line-height: 1.35; animation: slidein 260ms ease-out; }
#tip b { font-family: var(--disp); font-size: 15px; }
#tip button { flex: none; background: var(--ink); color: var(--paper); border: none; padding: 6px 10px; font-family: var(--disp); font-weight: 700; font-size: 15px; }
@media (orientation: landscape) and (min-width: 700px) { #tip { right: calc(var(--m) + 200px); bottom: 26px; left: calc(var(--m) + 56px); } }

/* ============================================================================
   PREMIUM DARK-FANTASY OVERHAUL
   Deep ancient ocean at night: near-black navy and teal, antique gold trim,
   glass panels, bioluminescent glow. Replaces the parchment/woodblock skin.
   ============================================================================ */
:root{
  --ink:#04070d; --lake:#071018; --lake2:#0b2029;
  --paper:#e9e3d3; --paper2:#9fb0b8; --bone:#f3edde;
  --cin:#d0402f; --verd:#3fa87a; --ash:#7d8a8f; --azur:#3a7fc0; --plum:#7b3a6a;
  --gold:#c9a24b; --gold2:#e7cd86; --pearl:#f6f1e2;
  --cyan:#46c6e8; --ember:#ef6a34; --violet:#8b6cf0; --jade:#3fa87a;
  --glass-l:linear-gradient(155deg, rgba(14,32,44,.92), rgba(5,11,18,.96));
  --glass-d:linear-gradient(160deg, rgba(10,24,34,.96), rgba(4,9,15,.98));
  --line:rgba(201,162,75,.42); --line2:rgba(70,198,232,.30);
}
html,body{background:var(--ink);}
#game canvas{background:var(--ink);}
[hidden]{display:none !important;}

/* ---------- ornament helper: thin gold corner filigree ---------- */
.filigree{position:relative;}
.filigree::before,.filigree::after{content:"";position:absolute;width:16px;height:16px;pointer-events:none;border-color:var(--gold);opacity:.85;}
.filigree::before{top:-1px;left:-1px;border-top:1.5px solid var(--gold);border-left:1.5px solid var(--gold);}
.filigree::after{bottom:-1px;right:-1px;border-bottom:1.5px solid var(--gold);border-right:1.5px solid var(--gold);}

/* ---------- hide the tourist-style kanji on chrome ---------- */
.strip .cn,.sh h2 .cn,.tabs button .cn,.title-seal,.vert{display:none !important;}

/* ---------- top bar ---------- */
.cur{background:var(--glass-d);border:1px solid var(--line);box-shadow:inset 0 0 0 1px rgba(70,198,232,.10);}
.cur b{color:var(--gold2);}
.coin-ico{background:radial-gradient(circle at 35% 30%, #e7cd86, #a9791f);border-color:var(--gold2);}
.coin-ico::after{background:var(--ink);border-color:var(--gold2);}
.drop-ico{background:linear-gradient(180deg,var(--cyan),var(--verd));box-shadow:0 0 6px rgba(70,198,232,.6);}
.snd{background:var(--glass-d);border:1px solid var(--line);color:var(--gold2);}
.snd.off{color:var(--ash);text-decoration-color:var(--cin);}
.tab-btn{background:var(--glass-d);color:var(--bone);border:1px solid var(--line);box-shadow:2px 2px 0 rgba(0,0,0,.5);}
.tab-btn .key{color:var(--cyan);border-color:var(--cyan);}

/* ---------- home ---------- */
.cover{align-items:flex-start;}
h1 .sc{color:var(--gold2);font-size:22px;letter-spacing:.34em;text-shadow:0 0 18px rgba(70,198,232,.35);}
h1 .big{color:var(--bone);text-shadow:0 0 30px rgba(70,198,232,.45),0 0 8px rgba(180,230,255,.35);}
h1 .en{color:rgba(159,176,184,.85);font-style:italic;}

#menu{align-items:stretch;}
.strip{position:relative;min-width:270px;background:var(--glass-l);color:var(--bone);border:1px solid var(--line);border-left:3px solid var(--gold);
  padding:10px 20px 10px calc(var(--m) + 8px);font-weight:600;letter-spacing:.02em;
  box-shadow:inset 0 0 24px rgba(70,198,232,.07),0 4px 14px rgba(0,0,0,.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform 220ms ease-out,box-shadow 220ms ease-out,border-color 220ms ease-out;
}
.strip::after{content:"";position:absolute;top:5px;bottom:5px;right:6px;width:14px;border:1px solid var(--line2);border-left:none;opacity:.6;pointer-events:none;}
.strip:hover,.strip:focus-visible,.strip:active{transform:translateX(8px);border-color:var(--gold2);box-shadow:inset 0 0 30px rgba(70,198,232,.16),0 0 22px rgba(70,198,232,.28),0 4px 14px rgba(0,0,0,.5);}
.strip small{color:var(--cyan);}
.strip.primary{min-width:310px;background:linear-gradient(155deg,rgba(24,54,70,.95),rgba(8,20,30,.97));border-left-color:var(--cyan);color:var(--pearl);}
.strip.primary small{color:var(--gold2);}
#scope{color:rgba(159,176,184,.7);}
.daily-seal{border:2px dashed var(--gold);color:var(--gold2);text-shadow:0 0 14px rgba(201,162,75,.6);background:rgba(8,18,26,.5);}
.daily-seal.stamped{background:radial-gradient(circle at 40% 35%,var(--ember),var(--cin));color:var(--pearl);border-style:solid;}

/* ---------- hud chrome ---------- */
#hint{color:var(--bone);text-shadow:0 1px 3px #000,0 0 14px rgba(0,0,0,.9);}
#hint.alarm{color:var(--ember);text-shadow:0 0 14px rgba(239,106,52,.7),0 1px 3px #000;}
#depthRule span{color:rgba(159,176,184,.75);}
#depthRule span::before{border-top-color:var(--cyan);}
#depthRule small{color:rgba(159,176,184,.5);}
#gauge{background:var(--glass-d);border:1px solid var(--line);box-shadow:inset 0 0 18px rgba(70,198,232,.12);}
.glabel{color:var(--gold2);}
#slips i{background:rgba(70,198,232,.10);border:1px solid rgba(70,198,232,.28);}
#slips i.on{background:linear-gradient(180deg,var(--cyan),var(--verd));border-color:var(--cyan);box-shadow:0 0 8px rgba(70,198,232,.7);}
#slips i.dz{border-color:rgba(208,64,47,.6);}
#slips i.on.dz{background:linear-gradient(180deg,var(--ember),var(--cin));border-color:var(--ember);box-shadow:0 0 10px rgba(239,106,52,.8);}
#knots .k{fill:var(--gold2);stroke:var(--ink);}
#knots .k.fray{fill:var(--ember);}
#tug .ticon{background:var(--glass-d);border:1px solid var(--line);color:var(--gold2);}
#tug .ticon.fish{color:var(--ember);border-color:var(--ember);}
#bossbar .bname{background:var(--glass-d);border:1px solid var(--line);color:var(--gold2);}
#bossbar .bstrip{background:var(--glass-d);border:1px solid var(--line);}
#bossbar .pseal{border-color:var(--gold);color:var(--gold2);background:var(--ink);}
#bossbar .pseal.on{background:var(--cin);color:var(--pearl);border-color:var(--cin);}
#reel{background:radial-gradient(circle at 38% 32%,#2a4a56,#0a1a24 70%);border:1px solid var(--line);box-shadow:0 0 26px rgba(70,198,232,.28),inset 0 0 20px rgba(0,0,0,.7);color:var(--pearl);}
#reel .rim{stroke:var(--gold);}
#reel .fill{stroke:var(--cyan);filter:drop-shadow(0 0 4px rgba(70,198,232,.9));}
#reel .hole{border-color:var(--gold2);background:var(--ink);}
#reel::before{border-color:rgba(201,162,75,.6);}
#reel.held{background:radial-gradient(circle at 38% 32%,#35606f,#0b2230 70%);}
#reel.strike{background:radial-gradient(circle at 38% 32%,var(--ember),var(--cin) 75%);box-shadow:0 0 40px rgba(239,106,52,.8);}
#reel.strike .rim{stroke:var(--pearl);}
#helpBtn{border:1px solid var(--gold);background:var(--glass-d);color:var(--gold2);}
#summon{background:var(--glass-d);color:var(--gold2);border:1px solid var(--line);}
#summon .cn{color:var(--ember);}
#foe{background:var(--glass-d);color:var(--gold2);border:1px solid var(--line2);}
#foe small{color:var(--paper2);}
#tip{background:var(--glass-d);color:var(--bone);border:1px solid var(--line);}
#tip b{color:var(--gold2);}
#tip button{background:var(--gold);color:var(--ink);}

/* ---------- toast ---------- */
#toast{background:var(--glass-d);color:var(--bone);border:1px solid var(--line);box-shadow:0 0 30px rgba(0,0,0,.7);}
#toast.bad{border-left:4px solid var(--ember);box-shadow:0 0 26px rgba(239,106,52,.4);}
#toast small{color:var(--paper2);}

/* ---------- sheets: dark glass with gold trim ---------- */
#sheet{background:rgba(3,6,11,.74);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
#sheet .paper{background:var(--glass-d);color:var(--bone);border-left:1px solid var(--line);box-shadow:-8px 0 30px rgba(0,0,0,.7),inset 1px 0 0 rgba(70,198,232,.12);}
#sheet .paper::before{content:"";position:absolute;top:0;bottom:0;left:4px;width:2px;background:linear-gradient(180deg,transparent,rgba(201,162,75,.5),transparent);pointer-events:none;}
.sh{border-bottom:1px solid var(--line);}
.sh h2{color:var(--gold2);letter-spacing:.03em;}
.close{background:var(--gold);color:var(--ink);}
.sbody p{color:var(--paper);}
.sbody h3{color:var(--gold2);}
.btn{background:linear-gradient(180deg,#2a4a56,#14242e);color:var(--pearl);border:1px solid var(--line);}
.btn.ghost{background:transparent;color:var(--gold2);border:1px solid var(--line);}
.btn.red{background:linear-gradient(180deg,var(--ember),var(--cin));border-color:var(--ember);color:var(--pearl);}
.btn[disabled]{opacity:.4;}
.tabs{border-bottom:1px solid var(--line);}
.tabs button{color:var(--paper2);}
.tabs button.on{background:linear-gradient(180deg,rgba(70,198,232,.18),rgba(70,198,232,.05));border-color:var(--line);color:var(--pearl);box-shadow:0 0 14px rgba(70,198,232,.25);}
.tabs button.sealed{color:var(--ash);}
.wax{background:radial-gradient(circle at 35% 30%,var(--ember),var(--cin));border-color:#7c1f17;}

/* ledger rows */
.row{border-bottom:1px solid rgba(70,198,232,.14);}
.row canvas{background:rgba(4,10,16,.9);border:1px solid var(--line2);}
.row .nm{color:var(--pearl);}
.row .ds{color:var(--paper2);}
.row .delta{color:var(--cyan);}
.row .cost{color:var(--gold2);}
.buy{background:linear-gradient(180deg,var(--gold2),var(--gold));color:var(--ink);}
.buy.equip{background:linear-gradient(180deg,#2a4a56,#14242e);color:var(--pearl);}
.buy.equipped{background:transparent;color:var(--verd);border:1.5px solid var(--verd);}
.buy[disabled]{background:transparent;color:var(--ash);border:1.5px dashed var(--ash);}

/* creel grid */
.tile{background:var(--glass-l);border:1px solid var(--line);color:var(--bone);box-shadow:inset 0 0 20px rgba(70,198,232,.06);}
.tile canvas{background:rgba(4,10,16,.75);}
.tile .tn{color:var(--pearl);}
.tile .tw{color:var(--gold2);}
.tile .tp{color:var(--paper2);}
.tile.sel{outline:2px solid var(--cyan);outline-offset:1px;box-shadow:0 0 20px rgba(70,198,232,.4);}
.tierseal{border-color:currentColor;}
.tierseal.round{background:var(--cin);color:var(--pearl);border-color:var(--cin);}
.tierseal.sq{background:var(--gold);color:var(--ink);border-color:var(--gold);}

/* bestiary book */
.book{background:var(--glass-d);border:1px solid var(--line);box-shadow:inset 0 0 40px rgba(70,198,232,.05);}
.book::before{background:linear-gradient(180deg,#1a0f14,#0a0608);}
.book::after{background:repeating-linear-gradient(to bottom,transparent 0 22px,var(--gold) 22px 24px,transparent 24px 26px,var(--gold2) 26px 28px,transparent 28px 60px);opacity:.5;}
#sheet.wide .book .pg + .pg{border-left:1px solid rgba(70,198,232,.22);}
.pg{color:var(--paper);}
.pg .no{color:var(--paper2);}
.pg canvas{filter:drop-shadow(0 0 12px rgba(70,198,232,.15));}
.pg h4{color:var(--pearl);}
.pg .cnn{color:var(--gold2);}
.pg .vin{color:var(--paper2);}
.pg .stats .w{color:var(--gold2);}
.pg .cols{border-color:rgba(70,198,232,.2);}
.pg .cols b{color:var(--gold2);}
.pg .lore{border-top:1px solid rgba(70,198,232,.25);color:var(--paper);}
.pg.unk h4{color:var(--ash);}
.idx button{background:var(--glass-l);border:1px solid var(--line);color:var(--gold2);}
.idx button.unk{color:var(--ash);border-style:dashed;border-color:var(--ash);}
.idx button.on{background:linear-gradient(180deg,rgba(70,198,232,.25),rgba(70,198,232,.06));color:var(--pearl);border-color:var(--cyan);box-shadow:0 0 12px rgba(70,198,232,.4);}
.sealed-chapter{border:1px solid var(--line);background:var(--glass-d);color:var(--paper);}
.sealed-chapter .wax.big{background:radial-gradient(circle at 35% 30%,var(--ember),var(--cin));color:var(--pearl);}

/* quest scroll */
.scroll .rod{background:linear-gradient(180deg,var(--gold2),#7a5a1e);}
.scroll .rod::before,.scroll .rod::after{background:linear-gradient(180deg,#2a4a56,#0b1a22);border-color:var(--line);}
.scroll .sheetq{background:var(--glass-d);border-left:1px solid var(--line);border-right:1px solid var(--line);color:var(--paper);}
.q{border-bottom:1px solid rgba(70,198,232,.14);}
.q .qn{color:var(--pearl);}
.q .qd{color:var(--paper2);}
.q .bar{background:rgba(70,198,232,.15);}
.q .bar i{background:linear-gradient(90deg,var(--cyan),var(--verd));box-shadow:0 0 8px rgba(70,198,232,.6);}
.q .rw{color:var(--cyan);}
.q.done .qn,.q.done .qd{color:var(--ash);}

/* achievement seals */
.sealc .stone{border-color:var(--line);color:var(--ash);background:repeating-linear-gradient(45deg,transparent 0 4px,rgba(70,198,232,.06) 4px 5px);}
.sealc.on .stone{background:radial-gradient(circle at 40% 35%,var(--ember),var(--cin));border-color:var(--ember);color:var(--pearl);box-shadow:0 0 18px rgba(239,106,52,.5);outline-color:var(--gold2);}
.sealc .an{color:var(--pearl);}
.sealc .ad{color:var(--paper2);}
.board td{border-bottom:1px solid rgba(70,198,232,.18);}
.board td.v{color:var(--gold2);}
.board tr.mine td{background:rgba(70,198,232,.12);}
.board a{color:var(--cyan);}

/* daily */
.day{border:1px dashed var(--line);color:var(--paper2);}
.day b{color:var(--gold2);}
.day.got{background:radial-gradient(circle at 40% 35%,var(--ember),var(--cin));color:var(--pearl);border:1px solid var(--cin);}
.day.today{border:2px solid var(--gold);color:var(--gold2);}
.bigseal{border:3px dashed var(--gold);color:var(--gold2);background:rgba(8,18,26,.4);}
.bigseal.stamped{background:radial-gradient(circle at 40% 35%,var(--ember),var(--cin));color:var(--pearl);border-style:solid;}

/* ---------- catch reveal: dark cinematic specimen card ---------- */
#reveal{background:radial-gradient(circle at 50% 40%,rgba(8,22,32,.82),rgba(2,4,8,.94));}
.spec{background:var(--glass-d);color:var(--bone);border:1px solid var(--line);box-shadow:0 0 60px rgba(0,0,0,.8),inset 0 0 60px rgba(70,198,232,.06);}
.spec .top{color:var(--paper2);}
.spec .top .newe{color:var(--ember);}
.spec canvas{filter:drop-shadow(0 0 22px rgba(70,198,232,.25));}
.spec h3{color:var(--pearl);}
.spec .cnv{color:var(--gold2);}
.spec .viv{color:var(--paper2);}
.spec .wt b{color:var(--gold2);text-shadow:0 0 24px rgba(201,162,75,.5);}
.spec .lore{color:var(--paper);}
.spec .gain{color:var(--cyan);}
.spec .stampseal.hit{box-shadow:0 0 24px rgba(208,64,47,.6);}
.spec.t0 .stampseal{color:var(--ash);}
.spec.t1{border:2px solid var(--verd);box-shadow:0 0 34px rgba(63,168,122,.35),inset 0 0 50px rgba(63,168,122,.06);} .spec.t1 .stampseal{color:var(--verd);}
.spec.t2{border:2px solid var(--azur);box-shadow:0 0 34px rgba(58,127,192,.4),inset 0 0 50px rgba(58,127,192,.08);} .spec.t2 .stampseal{color:var(--azur);}
.spec.t2::before,.spec.t2::after{border-color:var(--azur);}
.spec.t3{border:2px solid var(--violet);box-shadow:0 0 38px rgba(139,108,240,.42),inset 0 0 50px rgba(139,108,240,.08);border-image:none;} .spec.t3 .stampseal{color:var(--violet);}
.spec.t4{border:2px solid var(--ember);background-image:radial-gradient(circle,rgba(239,106,52,.55) 0 1.3px,transparent 1.5px),radial-gradient(circle,rgba(208,64,47,.5) 0 .9px,transparent 1.1px),var(--glass-d);background-size:53px 37px,29px 47px,100% 100%;box-shadow:0 0 44px rgba(239,106,52,.5);} .spec.t4 .stampseal{background:linear-gradient(180deg,var(--ember),var(--cin));color:var(--pearl);border-color:var(--ember);}
.spec.t5{border:2px solid var(--cin);box-shadow:0 0 52px rgba(208,64,47,.6);} .spec.t5 .stampseal{border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--ember),var(--cin));color:var(--pearl);border-color:var(--cin);}
.spec.t5 h3::before{content:attr(data-n);color:rgba(239,106,52,.4);filter:url(#bleed);transform:scale(1.03);transform-origin:left;position:absolute;left:0;top:0;z-index:-1;}
.spec.t6{background:radial-gradient(circle at 50% 35%,rgba(30,70,90,.6),rgba(2,5,9,.98));color:var(--pearl);border:1px solid var(--cyan);box-shadow:0 0 60px rgba(70,198,232,.45);} .spec.t6 .viv,.spec.t6 .top{color:#bcd4dc;} .spec.t6 .gain{color:var(--cyan);}
.spec.t6 .stampseal{color:var(--pearl);border-color:var(--pearl);}
.spec.t6 .rays{background:repeating-conic-gradient(from 0deg,rgba(70,198,232,.28) 0 0.4deg,transparent 0.4deg 6deg);}
.spec.t7{background:#02040a;color:var(--bone);border:1px solid var(--gold);box-shadow:0 0 70px rgba(239,106,52,.4);} .spec.t7 .viv,.spec.t7 .top{color:#c7bfae;} .spec.t7 .gain{color:var(--cyan);}
.spec.t7 .stampseal{background:linear-gradient(180deg,var(--ember),var(--cin));color:var(--pearl);border-color:var(--ember);border-radius:50%;}
.spec.t7::before{border:1px solid var(--gold);}
.spec.t7 .burn{border-color:#02040a;}

/* ---------- announcement: cinematic ---------- */
#announce .ag{color:var(--gold2);text-shadow:0 0 30px rgba(201,162,75,.7);}
#announce .at{color:var(--pearl);text-shadow:0 0 26px rgba(70,198,232,.6);}
#announce .as{color:var(--paper);}
#announce .ar{color:var(--cyan);}
#announce.t4{color:var(--pearl);background:linear-gradient(transparent,rgba(3,6,11,.9) 20%,rgba(3,6,11,.9) 80%,transparent);}
#announce.t4 .ag{color:var(--ember);}
#announce.t5{color:var(--pearl);background:linear-gradient(transparent,rgba(3,6,11,.92) 22%,rgba(3,6,11,.92) 78%,transparent);border-top:2px solid var(--cin);border-bottom:2px solid var(--cin);}
#announce.t5 .ag,#announce.t5 .ar{color:var(--ember);}
#announce.t6{color:var(--pearl);background:radial-gradient(circle at 50% 50%,rgba(30,70,90,.55),rgba(2,5,9,.92));border:1px solid var(--cyan);} #announce.t6 .as{color:#bcd4dc;}
#announce.t7{color:var(--bone);background:#02040a;border:2px solid var(--gold);filter:none;}
#bitemark{color:var(--ember);text-shadow:0 0 24px rgba(239,106,52,.7);}
.qqq{color:var(--ember);text-shadow:0 0 20px rgba(239,106,52,.7);}
#tele .blot{background:#02040a;border-left:2px solid var(--ember);}
#tele .glyph{color:var(--ember);text-shadow:0 0 40px rgba(239,106,52,.8);}
#tele .tlabel{background:#02040a;border:1px solid var(--ember);color:var(--pearl);}
#blindfx{background:#02040a;} #blindfx.day{background:var(--pearl);}

/* ---------- misc ---------- */
.tiny{color:var(--paper2);}
.stars i{background:rgba(159,176,184,.2);} .stars i.on{background:var(--gold);box-shadow:0 0 10px rgba(201,162,75,.7);}
.stars .rec{color:var(--ember);}
.spec.t6 .stars i,.spec.t7 .stars i{background:rgba(246,241,226,.22);} .spec.t6 .stars i.on,.spec.t7 .stars i.on{background:var(--cyan);}
.help ol{color:var(--paper);} .help .kk{color:var(--cyan);border-color:var(--cyan);}

/* softer rarity marks: no heavy filled red stamp */
.spec .stampseal{width:52px;height:52px;font-size:26px;background:transparent !important;border:1.5px solid currentColor !important;text-shadow:0 0 14px rgba(0,0,0,.6);box-shadow:none;}
.spec.t4 .stampseal{color:var(--ember);}
.spec.t5 .stampseal{width:62px;height:62px;font-size:30px;color:var(--ember);}
.spec.t6 .stampseal{color:var(--cyan);}
.spec.t7 .stampseal{color:var(--ember);}
.bigseal{box-shadow:0 0 20px rgba(201,162,75,.25);}

/* keep the daily seal clear of the menu panels */
#menu{padding-right:88px;}
@media (max-height:520px){ #menu{padding-right:0;} }

/* menu width on wide screens; clearer buy/claim buttons without glyphs */
#menu{max-width:min(560px,100%);}
.buy{font-family:var(--disp);}
.buy small{font-size:14px;letter-spacing:.03em;}

/* ============================================================================
   CREATURE ARTWORK: real images layered over the drawn game
   ============================================================================ */

/* in-lake overlay: the SURFACE! burst and the STRUGGLING silhouette */
#beastfx{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden;display:none;}
#beastfx.on{display:block;}
.bfx-pos{position:absolute;left:50%;top:50%;width:0;height:0;}
.bfx-hero{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:block;opacity:0;will-change:transform,filter,opacity;}
#beastfx.surfacing .bfx-hero{
  animation:bfxBurst 1.3s cubic-bezier(.2,.85,.25,1) both;
  opacity:1 !important;
  filter:brightness(1.05) saturate(1.15)
         drop-shadow(0 0 24px rgba(70,198,232,.75))
         drop-shadow(0 0 46px rgba(239,106,52,.55)) !important;
}
@keyframes bfxBurst{
  0%{transform:translate(-50%,72%) scale(.72);opacity:0;}
  16%{opacity:1;}
  52%{transform:translate(-50%,-58%) scale(1.05);}
  100%{transform:translate(-50%,-50%) scale(1);opacity:1;}
}
.bfx-label{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:8px;font-family:var(--disp);font-weight:700;font-size:clamp(20px,6.4vw,36px);letter-spacing:.14em;color:var(--pearl);white-space:nowrap;opacity:0;text-shadow:0 0 24px rgba(70,198,232,.85),0 0 44px rgba(239,106,52,.6);}
#beastfx.surfacing .bfx-label{animation:bfxLabel 1.6s ease-out both;}
@keyframes bfxLabel{0%{opacity:0;transform:translateX(-50%) scale(.8);}14%{opacity:1;}68%{opacity:1;}100%{opacity:0;transform:translateX(-50%) scale(1.02);}}
.bfx-flash{position:absolute;inset:0;opacity:0;background:radial-gradient(circle at 50% 55%,rgba(205,240,255,.9),rgba(255,180,90,.3) 38%,transparent 68%);}
.bfx-flash.go{animation:bfxFlash 620ms ease-out;}
@keyframes bfxFlash{0%{opacity:0;}12%{opacity:1;}100%{opacity:0;}}

/* floating embers around the creature */
.bfx-embers{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.bfx-embers i{position:absolute;left:var(--x);bottom:-8px;width:var(--sz);height:var(--sz);border-radius:50%;
  background:radial-gradient(circle,#ffe0a0,#ef6a34 55%,rgba(239,106,52,0));
  box-shadow:0 0 8px rgba(239,106,52,.85);
  animation:bfxEmber var(--d) linear infinite;animation-delay:var(--dl);opacity:0;}
@keyframes bfxEmber{0%{transform:translateY(0) scale(.6);opacity:0;}12%{opacity:.9;}100%{transform:translateY(-780px) scale(1.15);opacity:0;}}

/* bestiary card: rarity-coloured glowing frame, or a dark silhouette */
.bestcard{position:relative;width:100%;aspect-ratio:420/230;display:grid;place-items:center;margin:6px 0;
  border:2px solid var(--rc,#c9a24b);border-radius:5px;
  background:radial-gradient(circle at 50% 58%,rgba(8,22,32,.92),rgba(3,7,12,.99));
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 28px -6px var(--rc,#c9a24b);overflow:hidden;}
.bestcard::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 44px rgba(70,198,232,.10);}
.bestcard.unk{border-style:dashed;border-color:var(--ash);box-shadow:none;}
.beastimg{position:relative;z-index:1;max-width:90%;max-height:90%;display:block;
  filter:drop-shadow(0 0 16px rgba(70,198,232,.45)) drop-shadow(0 0 30px rgba(239,106,52,.35));}
.beastimg.silhouette{filter:brightness(0) drop-shadow(0 0 1px rgba(214,232,240,.8)) drop-shadow(0 0 12px rgba(70,198,232,.38));opacity:.88;}

/* the LEGEND CAUGHT result card */
.spec.imgcard{padding:22px 22px 20px;text-align:center;overflow:hidden;}
.spec.imgcard .legendline{font-family:var(--disp);font-weight:700;font-size:clamp(17px,5.2vw,27px);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ember);text-shadow:0 0 22px rgba(239,106,52,.85),0 0 44px rgba(70,198,232,.45);margin-bottom:6px;}
.imgstage{position:relative;display:grid;place-items:center;min-height:min(50vh,340px);margin:4px 0 8px;}
.glowring{position:absolute;width:min(80%,420px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(239,106,52,.55),rgba(208,64,47,.3) 40%,rgba(70,198,232,.24) 60%,transparent 74%);
  filter:blur(12px);animation:bfxPulse 4.6s ease-in-out infinite;}
.beasthero{position:relative;z-index:1;max-width:min(100%,560px);max-height:min(50vh,360px);display:block;
  animation:bfxFloat 5.6s ease-in-out infinite;
  filter:drop-shadow(0 0 18px rgba(70,198,232,.6)) drop-shadow(0 0 38px rgba(239,106,52,.5));}
@keyframes bfxFloat{0%,100%{transform:translateY(-8px);}50%{transform:translateY(8px);}}
@keyframes bfxPulse{0%,100%{transform:scale(.96);opacity:.85;}50%{transform:scale(1.07);opacity:1;}}
.spec.imgcard .rarlabel{display:inline-block;margin:4px auto 8px;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--pearl);border-top:1px solid currentColor;border-bottom:1px solid currentColor;padding:3px 14px;text-shadow:0 0 16px rgba(70,198,232,.6);}
.spec.imgcard .stars6{display:flex;gap:5px;justify-content:center;margin:4px 0 8px;}
.spec.imgcard .stars6 i{width:20px;height:20px;background:var(--gold);box-shadow:0 0 10px rgba(201,162,75,.85);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}
.spec.imgcard .banner{display:inline-block;margin:2px 0 10px;padding:4px 16px;font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--pearl);background:linear-gradient(180deg,var(--ember),var(--cin));box-shadow:0 0 26px rgba(239,106,52,.6);}
.spec.imgcard .wt{justify-content:center;}
.spec.imgcard .acts{justify-content:center;}
.bfx-embers.card{position:absolute;inset:0;overflow:hidden;pointer-events:none;}