:root{
  --bronze:#a06840;
  --bronze-hi:#d49060;
  --bronze-dk:#5a3820;
  --gold:#c89058;
  --gold-hi:#e8b878;
  --wood:#8b5a2b;
  --wood-dk:#5c3818;
  --text:#f5e4be;
  --text-dim:#c9a878;
  --hp:#e53b3b;
  --mp:#3b6ee5;
  --exp:#4be569;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{
  min-height:100%;
  font-family: 'Zpix', 'Press Start 2P', 'Courier New', monospace;
  background-color:#100804; 
  background: radial-gradient(ellipse at top, #2a1a10 0%, #100804 100%);
  background-color:#100804;
  color:var(--text);
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
}
body{ padding:20px 8px 40px; display:flex; justify-content:center; }
.wrap{ display:flex; flex-direction:column; gap:14px; width:100%; max-width:400px; align-items:center; }
.skill-row{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width:0;
  padding: 2px 4px;
}
.skill-icon{
  flex: 0 0 auto;
  width: 30px; height: 30px;
  background-size: 100% 100%;
  background-repeat:no-repeat;
  image-rendering:pixelated;
  border: 2px solid var(--bronze-dk);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #1a0a04;
  cursor:pointer;
  background-color: #2a1810;
  transition: transform 0.08s;
}
.skill-row.empty .skill-icon{
  background: radial-gradient(circle at 30% 30%, #5a4030 0%, #2a1810 80%);
}
.skill-icon:hover{ transform: scale(1.1); }
.skill-name{
  flex: 1 1 auto;
  min-width:0;
  color: var(--gold-hi);
  font-size: clamp(12px, 3.2vw, 14px);
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #000;
  padding: 1px 3px;
  border-radius: 2px;
  outline: none;
  cursor: text;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height:1.1;
}
.skill-name:empty::before{
  content: "填入技能";
  color: var(--text-dim);
  opacity: 0.55;
}
.skill-name:focus{
  background: rgba(255,208,80,0.18);
  box-shadow: 0 0 0 1px var(--gold-hi);
  white-space: normal;
  overflow: visible;
}
.hunt-card{
  width:100%;
  background: #1a1a1c url("assets/ui/adv/battle_bg.jpg?v=20260917e") center / 100% 100% no-repeat;
  border: 4px solid var(--bronze);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px #1a0a04, inset 0 0 0 4px var(--bronze-dk), 0 6px 20px rgba(0,0,0,0.6);
  padding: 14px 12px 12px;
}
.hunt-title{
  text-align:center; color: var(--gold-hi);
  font-size:14px; letter-spacing:3px;
  margin-bottom:10px; text-shadow: 2px 2px 0 #000;
}
.map-select{ display:flex; gap:6px; justify-content:center; margin-bottom:10px; flex-wrap:wrap; }
.map-btn{
  flex:1; min-width:88px; padding:5px 3px;
  font-size:10px; font-family:inherit;
  background: #3a2010; color: var(--text);
  border: 2px solid var(--bronze); border-radius:3px;
  cursor:pointer; line-height:1.3; text-align:center;
  box-shadow: inset 0 0 0 1px #1a0a04;
}
.map-btn .m-name{ display:block; color: var(--gold-hi); text-shadow: 1px 1px 0 #000; letter-spacing:1px; }
.map-btn .m-lv{ display:block; font-size:9px; opacity:0.8; margin-top:2px; }
.map-btn.active{
  background: var(--bronze); color: #fff;
  border-color: var(--bronze-hi);
  box-shadow: inset 0 0 0 1px #1a0a04, 0 0 8px rgba(212,144,96,0.6);
}
.map-btn.active .m-name{ color:#fff2d8; }
.adv-stage .map-atlas{
  position:absolute;
  left:4%; top:62%; width:92%; height:35%;
  overflow:hidden;
  cursor:default;                                  
}
.map-continents{
  display:flex; width:100%; height:100%;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.map-continent-page{
  position:relative;
  flex:0 0 100%; height:100%;
  scroll-snap-align:start;
}
.map-node{
  position:absolute; transform:translate(-50%,-50%);
  width:24px; height:24px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #ff7a52, #7a1c0c 75%);
  border:2px solid #2a0f04;
  box-shadow: 0 0 4px rgba(0,0,0,0.7);
  cursor:pointer;
}
.map-node.village{
  background: radial-gradient(circle at 35% 30%, #ffd98a, #a8720a 75%);
}
.map-node.active{
  border-color: var(--bronze-hi);
}
.map-node.active, .map-node.picked{
  box-shadow: 0 0 8px 3px rgba(255,200,80,0.85);
}
.map-node-label{
  position:absolute; left:50%; top:calc(100% + 2px);
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:9px; letter-spacing:1px;
  color:#fff2d8; text-shadow:1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  pointer-events:none;
}
.map-node.region{
  width:20px; height:20px;
  border-color: var(--gold);
  box-shadow: 0 0 6px rgba(255,190,80,0.7);
  z-index:3;
}
.map-node.region .map-node-label{ font-size:8px; }
.map-node.locked{
  background: radial-gradient(circle at 35% 30%, #8a8a8a, #333 75%);
  border-color:#666;
  box-shadow:none;
  opacity:0.75;
}
.map-node.locked .map-node-label{ color:#bbb; }
.map-info-card{
  position:absolute; left:50%; bottom:4%;
  transform: translateX(-50%) scale(0.9);
  min-width:110px;
  background:#241207; border:2px solid var(--bronze); border-radius:4px;
  padding:6px 10px; text-align:center;
  opacity:0; pointer-events:none;
  transition: opacity .15s, transform .15s;
  z-index:5;
}
.map-info-card.show{ opacity:1; pointer-events:auto; transform: translateX(-50%) scale(1); }
.mic-name{ color: var(--gold-hi); font-size:11px; letter-spacing:1px; text-shadow:1px 1px 0 #000; }
.mic-lv{ font-size:9px; opacity:0.8; margin:2px 0 4px; }
.mic-enter{
  font-size:10px; padding:3px 10px; font-family:inherit;
  background: var(--bronze); color:#fff;
  border:2px solid var(--bronze-hi); border-radius:3px;
  cursor:pointer;
}
.mic-btns{ display:flex; gap:6px; justify-content:center; }
.mic-enter.mic-go{ background:#3b4a2a; border-color:#7d9a52; }
.adv-stage .hilt-orb{
  position:absolute;
  left:16.5%; top:77.4%;
  width:11%; aspect-ratio:1/1;
  transform: translate(-50%,-50%);
  border-radius:50%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.90) 0%,
    rgba(180,230,255,0.75) 22%,
    rgba(90,180,255,0.45) 45%,
    rgba(60,140,255,0.16) 70%,
    rgba(60,140,255,0) 100%);
  pointer-events:none;                             
  z-index:7;                                       
  animation: hiltOrbBreath 4.5s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes hiltOrbBreath{
  0%, 100% { opacity:0.45; transform: translate(-50%,-50%) scale(0.94); }
  50%      { opacity:1;    transform: translate(-50%,-50%) scale(1.06); }
}
.map-fly{
  position:fixed; inset:0;
  display:none;
  pointer-events:none;
  z-index:2150;                                    
}
.map-fly.flying{ display:block; }
.map-fly-map, .map-fly-sword{
  position:absolute;
  background-position:center;
  background-repeat:no-repeat;
  background-size:100% 100%;
  image-rendering: pixelated;
  transform-origin: 50% 50%;
  will-change: left, top, width, height, transform, opacity;
}
.map-fly-map{
  background-image: url("assets/maps/region_whisper.png");
  border:2px solid var(--bronze);
  border-radius:3px;
  box-sizing:border-box;
}
.map-fly-sword{
  background-image: url("assets/ui/map_sword.png");
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.6));
}
.map-fly.animating .map-fly-map,
.map-fly.animating .map-fly-sword{
  transition: left 680ms cubic-bezier(.16,.85,.3,1),
              top 680ms cubic-bezier(.16,.85,.3,1),
              width 680ms cubic-bezier(.16,.85,.3,1),
              height 680ms cubic-bezier(.16,.85,.3,1),
              transform 680ms cubic-bezier(.16,.85,.3,1),
              opacity 200ms ease 520ms;            
}
.wm-overlay{
  position:fixed; inset:0; background: rgba(0,0,0,0.88); display:none;
  align-items:center; justify-content:center; z-index:2100; padding:12px;
  opacity:0; transition: opacity 260ms ease;
}
.wm-overlay.dimming{ opacity:1; }
.wm-overlay.show{ opacity:1; }
.wm-overlay .wm-inner{
  opacity:0;
  transition: opacity 240ms ease;
}
.wm-overlay.show .wm-inner{ opacity:1; }
.wm-inner{
  background: linear-gradient(#12314a, #0a2033);
  border: 4px solid var(--gold); border-radius: 3px;
  box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #a07800, 0 8px 20px rgba(0,0,0,0.8);
  padding: 12px; width: 100%; max-width: 420px; max-height: 92vh;
  display:flex; flex-direction:column; gap:10px;
}
.wm-title{
  color: var(--gold-hi); font-size: 14px; text-align:center;
  letter-spacing: 3px; text-shadow: 1px 1px 0 #000; flex:0 0 auto;
}
.wm-sword{
  width:100%; aspect-ratio: 860 / 204;
  background: url("assets/ui/map_sword.png") center / 100% 100% no-repeat;
  image-rendering: pixelated;
  pointer-events:none;
  flex:0 0 auto;
  margin-bottom:-4px;                              
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
}
.wm-canvas{
  position:relative;
  width:100%;
  aspect-ratio: 944 / 1135;                        
  background-image: url("assets/maps/region_whisper.png");
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat:no-repeat;
  image-rendering: pixelated;                      
  border:2px solid var(--bronze);
  border-radius:3px;
  overflow:hidden;
  flex:1 1 auto;
  min-height:0;
  align-self:center;
  max-height:64vh;
}
.wm-close{ flex:0 0 auto; align-self:center; }
.wm-canvas .map-node{ width:30px; height:30px; }
.adv-stage{
  position:relative;
  width:100%;
  aspect-ratio: 572 / 688;
  background: url("assets/ui/adv_frame.png") center / 100% 100% no-repeat;
  image-rendering: pixelated;
  margin-bottom: 8px;
}
.adv-stage .arena{
  position:absolute;
  left:4.7%; width:calc(88.2% + 3px); 
  top: calc(14.9% - 10px); height: calc(41% + 20px); 
  margin:0; border:none; border-radius:0;
}
.adv-stage .adv-frame-overlay{
  position:absolute;
  left:-1.13%; top:5.2%; width:99.86%;
  aspect-ratio: 548 / 403;
  background: url("assets/ui/adv_frameup.png") center / 100% 100% no-repeat;
  image-rendering: pixelated;
  pointer-events:none;
  z-index:6;
  transform: translate(3px, -3px); 
}
.arena{
  position:relative;
  height: 170px;
  background-image: url("assets/maps/whisper_isle.png");
  background-size: cover;
  background-position: center;
  background-color: #14281a;
  image-rendering: pixelated;
  border:2px solid #000;
  border-radius:2px;
  margin-bottom:10px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding: 8px 20px 14px;
}
.hero-side{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:4px;
}
.arena .idle-mob{
  position:absolute; right:14%; bottom:14px; z-index:2;
  background-repeat:no-repeat; background-size:contain; background-position:center bottom; image-rendering:pixelated;
  animation:idleMobIn .5s ease-out 1;
}
@keyframes idleMobIn{ from{ transform:translateX(60px); opacity:0; } to{ transform:none; opacity:1; } }
.arena .idle-mob.hit{ animation:idleMobHit .2s steps(2) 1; }
@keyframes idleMobHit{ 0%{ filter:brightness(3); transform:translateX(6px); } 100%{ filter:none; transform:none; } }
.arena .idle-mob.dead{ animation:idleMobDie .7s ease-in forwards; }
@keyframes idleMobDie{ 0%{ filter:brightness(2); } 100%{ opacity:0; transform:translateY(6px); } }
.arena .idle-mob.lunge{ animation:idleMobLunge .35s ease-out 1; }
@keyframes idleMobLunge{ 35%{ transform:translateX(-18px); } 100%{ transform:none; } }
.idle-mob-tag{
  position:absolute; left:50%; top:-4px; transform:translate(-50%,-100%);
  display:flex; flex-direction:column; align-items:center; gap:2px; pointer-events:none;
}
.idle-mob-name{
  font-size:9px; color:var(--gold-hi, #ffd9a0); background:rgba(0,0,0,.7); padding:1px 5px;
  text-shadow:1px 1px 0 #000; white-space:nowrap;
}
.idle-mob-hp{ width:64px; height:6px; background:#000; border:1px solid #444; overflow:hidden; }
.idle-mob-hp i{ display:block; height:100%; width:100%; background:linear-gradient(to bottom, #ff9090, var(--hp, #d33), #7a1414); transition:width .2s; }
.arena .idle-mob.dead .idle-mob-tag{ display:none; }
.atk-fx{
  position:absolute; width:56px; height:56px; z-index:5; pointer-events:none;
  background-size:contain; background-repeat:no-repeat; background-position:center; image-rendering:pixelated;
}
.atk-fx.melee{ top:20%; left:50%; margin-left:-28px; animation:fxPop .32s ease-out both; }
@keyframes fxPop{
  0%{ opacity:0; transform:scale(.5) rotate(-15deg); } 25%{ opacity:1; transform:scale(1.15) rotate(0deg); }
  70%{ opacity:1; transform:scale(1); } 100%{ opacity:0; transform:scale(1.08); }
}
.atk-fx.arrow{ width:44px; height:44px; margin-top:-22px; animation:fxArrow .22s linear both; }
@keyframes fxArrow{
  0%{ opacity:0; transform:translateX(0); } 12%{ opacity:1; }
  88%{ opacity:1; transform:translateX(var(--fly, 140px)); } 100%{ opacity:0; transform:translateX(calc(var(--fly, 140px) + 12px)); }
}
.hit-fx{
  position:absolute; width:36px; height:36px; top:20%; left:50%; margin-left:-18px; z-index:6; pointer-events:none;
  background-size:contain; background-repeat:no-repeat; background-position:center; image-rendering:pixelated;
  animation:hitFxPop .5s ease-out both;
}
@keyframes hitFxPop{
  0%{ opacity:0; transform:scale(.6) translateY(-4px); } 20%{ opacity:1; transform:scale(1.05) translateY(0); }
  70%{ opacity:1; transform:scale(1) translateY(4px); } 100%{ opacity:0; transform:scale(.95) translateY(10px); }
}
.dmg-num{
  position:absolute; top:6%; left:50%; z-index:8; pointer-events:none; white-space:nowrap;
  transform:translateX(calc(-50% + var(--dmg-x, 0px)));
  font-size:20px; font-weight:bold; color:#fff2d8;
  text-shadow:1.5px 1.5px 0 #000, -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000;
  animation:dmgPop .8s ease-out both;
}
.dmg-num.crit{ font-size:26px; color:#ffdf5c; }
.dmg-num.hero{ color:#ff6b6b; }
.dmg-num.miss{ font-size:17px; color:#b9b9b9; opacity:.85; letter-spacing:1px; }
@keyframes dmgPop{
  0%{ opacity:0; transform:translateX(calc(-50% + var(--dmg-x, 0px))) translateY(0) scale(.4); }
  15%{ opacity:1; transform:translateX(calc(-50% + var(--dmg-x, 0px))) translateY(-10px) scale(1.2); }
  35%{ opacity:1; transform:translateX(calc(-50% + var(--dmg-x, 0px))) translateY(-16px) scale(1); }
  100%{ opacity:0; transform:translateX(calc(-50% + var(--dmg-x, 0px))) translateY(-46px) scale(1); }
}
.idle-float{
  position:absolute; left:72%; top:30%; z-index:5; transform:translateX(-50%); pointer-events:none; white-space:nowrap;
  font-size:11px; color:#fff; text-shadow:1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  animation:idleFloatUp 1.2s ease-out forwards;
}
.idle-float.on-hero{ left:22%; top:22%; }
.idle-float.gain{ color:#ffe08a; }
.idle-float.lv{ color:#8affb0; top:15%; font-size:13px; }
.idle-float.dmg{ color:#ff6b6b; }
.idle-float.heal{ color:#7dff9a; }
.idle-float.info{ color:#cfe3ff; font-size:10px; }
@keyframes idleFloatUp{ 0%{ opacity:0; margin-top:6px; } 15%{ opacity:1; } 100%{ opacity:0; margin-top:-22px; } }
.arena.scroll-map{
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: auto 100%;
  animation: bgScrollRTL var(--scroll-dur, 20s) linear infinite;
  animation-play-state: paused; 
}
.arena.scroll-map.scrolling{
  animation-play-state: running;
}
@keyframes bgScrollRTL{
  from { background-position-x: 0; }
  to   { background-position-x: calc(-1 * var(--tile-w, 800px)); } 
}
.sprite{
  position:relative;
  width:64px; height:64px;
  background-size: contain;
  background-repeat:no-repeat;
  background-position:center bottom;
  image-rendering:pixelated;
}
.sprite.hero{
  width:125px; height:125px;
}
.sprite.hero.sprite-anim{
  width:200px; height:145px; 
}
.sprite.hero{ animation: breathe 2.2s ease-in-out infinite; transform-origin: bottom center; }
.sprite.hero.sprite-anim{ animation:none; transform:none; }
@keyframes breathe {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-2px) scaleY(1.03); }
}
.sprite.hero.attack{ animation: hAtk 0.4s steps(3) forwards; }
@keyframes hAtk {
  0%   { transform: translateX(0) rotate(0deg); }
  35%  { transform: translateX(55px) rotate(-18deg); }
  55%  { transform: translateX(85px) rotate(12deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
.sprite.hero.attack.ranged{ animation: hShoot 0.3s ease-out forwards; }
@keyframes hShoot {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(-8px); }
  100% { transform: translateX(0); }
}
.sprite.hero.sprite-anim.attack{ animation: none; transform: none; }
.hunt-status{
  text-align:center;
  font-size:11px;
  color: var(--gold-hi);
  padding:4px 0 8px;
  letter-spacing:1px;
  text-shadow:1px 1px 0 #000;
}
.hunt-status.searching{
  animation: statusPulse 1.2s ease-in-out infinite;
}
@keyframes statusPulse{
  0%,100%{ opacity:0.55; }
  50%{ opacity:1; }
}
.sprite.hero.wander{
  animation: none; 
}
@keyframes wander{
  0%   { transform: translateX(0) scaleX(1); }
  25%  { transform: translateX(35px) scaleX(1); }
  48%  { transform: translateX(35px) scaleX(-1); }
  75%  { transform: translateX(-15px) scaleX(-1); }
  98%  { transform: translateX(-15px) scaleX(1); }
  100% { transform: translateX(0) scaleX(1); }
}
.hunt-status{
  text-align:center;
  font-size:11px;
  color: var(--gold-hi);
  padding:4px 0 8px;
  letter-spacing:1px;
  text-shadow:1px 1px 0 #000;
}
.hunt-status.searching{
  animation: statusPulse 1.2s ease-in-out infinite;
}
@keyframes statusPulse{
  0%,100%{ opacity:0.55; }
  50%{ opacity:1; }
}
.sprite.hero.wander{
  animation: none; 
}
@keyframes wander{
  0%   { transform: translateX(0) scaleX(1); }
  25%  { transform: translateX(35px) scaleX(1); }
  48%  { transform: translateX(35px) scaleX(-1); }
  75%  { transform: translateX(-15px) scaleX(-1); }
  98%  { transform: translateX(-15px) scaleX(1); }
  100% { transform: translateX(0) scaleX(1); }
}
.hunt-controls{ display:flex; gap:5px; justify-content:center; margin-bottom:8px; }
.boss-prompt{
  display:none; flex-direction:column; align-items:center; gap:6px;
  margin:6px 0; padding:8px 10px;
  background: rgba(40,4,4,0.85);
  border:2px solid #ff5c3c; border-radius:4px;
  box-shadow: inset 0 0 0 1px #1a0a04, 0 0 8px rgba(255,80,50,0.5);
  animation: bossPromptPulse 1.1s ease-in-out infinite;
}
.boss-prompt-text{
  font-size:12px; color:#ffdca0; letter-spacing:1px;
  text-shadow:1px 1px 0 #000;
}
.boss-prompt-btns{ display:flex; gap:8px; }
@keyframes bossPromptPulse{
  0%,100%{ box-shadow: inset 0 0 0 1px #1a0a04, 0 0 6px rgba(255,80,50,0.35); }
  50%{ box-shadow: inset 0 0 0 1px #1a0a04, 0 0 14px rgba(255,80,50,0.75); }
}
.pixel-btn{
  font-family:inherit; font-size:11px;
  padding:8px 12px;
  background: linear-gradient(var(--bronze), var(--bronze-dk));
  color:#fff2d8; border:2px solid var(--bronze-hi); border-radius:3px;
  cursor:pointer; letter-spacing:1px;
  box-shadow: inset 0 0 0 1px #1a0a04, 0 2px 0 #1a0a04;
  text-shadow: 1px 1px 0 #1a0a04;
}
.pixel-btn:hover{ background: linear-gradient(var(--bronze-hi), var(--bronze)); }
.pixel-btn:active{ transform: translateY(2px); box-shadow: inset 0 0 0 1px #1a0a04; }
.log{
  background:#050d18; border:2px solid #000;
  padding:6px 8px; height:80px;
  overflow-y:auto; font-size:10px; line-height:1.6;
  color:var(--text-dim);
}
.log .l-hit{ color:#ffb466; }
.log .l-crit{ color:#ff6666; }
.log .l-gold{ color:var(--gold-hi); }
.log .l-lvl{ color:#8affa2; font-weight:bold; }
.world-chat{ margin-top:6px; border:2px solid #000; background:#050d18; }
.wc-title{
  font-size:10px; text-align:center; padding:2px 0;
  color:var(--gold-hi); background:#0a1a2c;
  border-bottom:1px solid #1a3048; letter-spacing:2px;
}
.wc-body{
  height:72px; overflow-y:auto;
  padding:4px 8px; font-size:10px; line-height:1.7;
  color:var(--text-dim);
}
.wc-line{ word-break:break-all; }
.wc-tag{ color:#5aa0e0; }
.sc-a{ color:#ffd85e; } .sc-b{ color:#8affa2; }
.sc-c{ color:#ff9ecb; } .sc-d{ color:#9ecbff; }
.card-boot-veil{ display:none; }
html.card-boot .card-boot-veil{
  display:flex; position:fixed; inset:0; background:#04070c;
  align-items:center; justify-content:center; z-index:2500;
}
.cbv-text{
  font-size:11px; color:var(--text-dim); letter-spacing:4px;
  animation: cbvPulse 1.6s ease-in-out infinite;
}
@keyframes cbvPulse{ 0%,100%{ opacity:0.35; } 50%{ opacity:1; } }
.pixel-btn.secondary{ background: linear-gradient(#3a3a3a,#1a1a1a); border-color:#666; }
.install-guide{
  position:fixed; inset:0; background:rgba(4,7,12,0.92);
  display:none; align-items:center; justify-content:center;
  z-index:2350; padding:16px; text-align:center;
}
.ig-title{
  font-size:18px; color:var(--gold-hi); letter-spacing:5px;
  text-shadow:0 0 14px rgba(255,216,94,0.35);
}
.ig-sub{ font-size:10px; color:var(--text-dim); letter-spacing:1px; line-height:1.9; margin:14px 0 22px; }
.ig-install{ width:100%; max-width:260px; }
.ig-steps{
  font-size:10px; color:var(--text); line-height:2.1; letter-spacing:1px;
  border:1px dashed var(--text-dim); border-radius:6px;
  padding:10px 14px; display:inline-block;
}
.ig-later{
  margin-top:22px; font-size:10px; color:var(--text-dim);
  text-decoration:underline; cursor:pointer;
}
.ig-rescue{ margin-top:14px; font-size:8px; color:var(--text-dim); opacity:0.7; letter-spacing:1px; }
.race-overlay{
  position:fixed; inset:0; background:#04070c; 
  display:none; align-items:center; justify-content:center;
  z-index:2200; padding:8px;
}
.race-board{
  position:relative;
  width:min(100%, calc(92vh * 474 / 569), 480px);
  aspect-ratio:474/569;
  user-select:none; -webkit-touch-callout:none;
}
.rb-bg{ position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }
.rb-scroll{
  position:absolute; left:10%; top:24%; width:31%; height:48%;
  display:flex; flex-direction:column; justify-content:center; gap:3.5%;
  text-align:center; pointer-events:none;
}
.rb-title { font-size:clamp(11px,3.4vw,15px); color:#4a3014; letter-spacing:2px; flex:none; }
.rb-phrase{ font-size:clamp(9px,2.6vw,12px);  color:#7a2c14; }
.rb-hint  { font-size:clamp(8px,2.3vw,10px);  color:#6a4a26; }
.rb-line  { font-size:clamp(8px,2.4vw,11px);  color:#5a3a1c; }
.rb-route { font-size:clamp(8px,2.4vw,11px);  color:#2c5a2c; }
.rb-trait { font-size:clamp(8px,2.2vw,10px);  color:#6a4a26; }
.rb-tip   { font-size:clamp(7px,2vw,9px);     color:#8a6a3a; }
.rb-marquee{
  position:relative; flex:1; width:100%; overflow:hidden; margin-top:4%;
  -webkit-mask-image:linear-gradient(transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.rb-marquee-inner{
  display:flex; flex-direction:column;
  animation:rbMarquee 16s linear infinite;
}
.rb-mq-block{ display:flex; flex-direction:column; gap:7px; padding:16px 0; }
@keyframes rbMarquee{
  from{ transform:translateY(0); }
  to  { transform:translateY(-50%); }
}
.rb-icon{
  position:absolute; width:11%; image-rendering:pixelated; cursor:pointer;
  filter:brightness(0.8); transition:filter .15s;
}
.rb-icon.sel{ filter:brightness(1.25) drop-shadow(0 0 6px rgba(255,216,94,0.9)); }
.rb-icon.locked{ filter:grayscale(1) brightness(0.4); cursor:default; }
.rb-royal  { left:51.9%; top:16.3%; }
.rb-knight { left:50.8%; top:27.4%; }
.rb-mage   { left:48.7%; top:36.2%; }
.rb-elf    { left:85.2%; top:17.2%; }
.rb-darkelf{ left:84.8%; top:27.6%; }
.rb-orc    { left:84.0%; top:36.6%; }
.rb-hero{
  position:absolute; left:74.3%; top:53.5%;
  width:24%; height:22%;
  background-repeat:no-repeat; background-size:100% 100%;
  transform:translate(-50%,-100%);
  image-rendering:pixelated; pointer-events:none;
  filter:drop-shadow(0 0 8px rgba(140,200,255,0.35));
}
.rb-gender{
  position:absolute; height:4.8%; width:auto;
  transform:translate(-50%,-50%);
  image-rendering:pixelated; cursor:pointer;
  filter:brightness(0.7); transition:filter .15s;
}
.rb-gender.sel{ filter:brightness(1.3) drop-shadow(0 0 5px rgba(255,216,94,0.9)); }
.rb-male  { left:61.0%; top:61.9%; }
.rb-female{ left:95.3%; top:61.9%; }
.rb-dice{
  position:absolute; left:75.6%; top:72.0%; width:10.5%;
  transform:translate(-50%,-50%);
  image-rendering:pixelated; cursor:pointer;
}
.rb-dice.roll{ animation:rbRoll .5s ease; }
@keyframes rbRoll{
  0%  { transform:translate(-50%,-50%) rotate(0deg)   scale(1); }
  50% { transform:translate(-50%,-50%) rotate(220deg) scale(1.3); }
  100%{ transform:translate(-50%,-50%) rotate(360deg) scale(1); }
}
.rb-stat{
  position:absolute; transform:translate(-50%,-50%);
  min-width:4.6%; padding:0 1px; text-align:center;
  font-size:clamp(7px,1.9vw,9px); line-height:1.35; color:#ffe9b0;
  background:rgba(8,12,18,0.88); border:1px solid #5a4a2a; border-radius:2px;
}
.rb-stat.bonus{ color:#8affa2; border-color:#7a8a3a; } 
.rb-l0{ left:68.6%; top:65.9%; } 
.rb-l1{ left:68.6%; top:68.9%; } 
.rb-l2{ left:68.6%; top:71.9%; } 
.rb-r0{ left:82.4%; top:65.9%; } 
.rb-r1{ left:82.4%; top:68.9%; } 
.rb-r2{ left:82.4%; top:71.9%; } 
.rb-name{
  position:absolute; left:74.5%; top:76.8%; width:23%; height:3.4%;
  background:transparent; border:none; outline:none;
  color:#ffe9b0; font-family:inherit; font-size:clamp(8px,2.4vw,11px);
  text-align:center;
}
.rb-name::placeholder{ color:#7a705a; }
.rb-ok, .rb-cancel{ position:absolute; cursor:pointer; border-radius:2px; }
.rb-ok    { left:75.5%; top:83.5%; width:16.5%; height:5%; }
.rb-cancel{ left:74.5%; top:88.8%; width:17.5%; height:5%; }
.rb-ok:active, .rb-cancel:active{ background:rgba(255,255,255,0.14); }
.rb-flash{
  position:absolute; left:50%; top:5%; transform:translateX(-50%);
  background:rgba(0,0,0,0.82); border:1px solid var(--gold);
  color:#ffd85e; font-size:10px; padding:4px 10px; border-radius:2px;
  opacity:0; pointer-events:none; transition:opacity .2s;
  white-space:nowrap; z-index:5;
}
.rb-flash.show{ opacity:1; }
.card-status-overlay{ position:fixed; inset:0; background: rgba(0,0,0,0.85); display:none; align-items:center; justify-content:center; z-index:2100; padding:16px; }
.card-status-inner{
  background: linear-gradient(#12314a, #0a2033);
  border: 4px solid var(--gold);
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #a07800, 0 8px 20px rgba(0,0,0,0.8);
  padding: 20px; width: 100%; max-width: 320px; text-align:center;
}
.card-status-title{
  color: var(--gold-hi); font-size: 15px;
  letter-spacing: 2px; text-shadow: 1px 1px 0 #000;
  margin-bottom: 10px;
}
.card-status-msg{ color: var(--text); font-size: 11px; line-height:1.7; white-space:pre-line; }
.card-status-actions{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.card-status-actions .pixel-btn{ width:100%; }
.card-status-actions .pixel-btn.secondary{ background: linear-gradient(#3a3a3a,#1a1a1a); border-color:#666; }
.tabs{
  display:flex;
  width:100%;
  max-width:400px;
  gap:4px;
  padding:6px;
  background:linear-gradient(180deg, #2a1810 0%, #1a0f08 100%);
  border:2px solid var(--bronze-dk);
  border-radius:4px;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
}
.tab{
  flex:1;
  font-family: inherit;
  font-size: clamp(10px, 2.6vw, 12px);
  padding: 8px 2px;
  color: var(--text-dim);
  background: linear-gradient(180deg, #3a2818 0%, #241610 100%);
  border: 2px solid var(--bronze-dk);
  border-radius: 3px;
  cursor:pointer;
  transition: all 0.15s;
  letter-spacing: 1px;
  white-space: nowrap;
}
.tab:hover{ color: var(--text); }
.tab.active{
  color: #fff2d8;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--bronze) 60%, var(--bronze-dk) 100%);
  border-color: var(--gold-hi);
  text-shadow: 1px 1px 0 var(--bronze-dk);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.4), 0 0 8px rgba(232,184,120,0.4);
}
.page{ display:none; width:100%; }
.page.active{ display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; }
.shop-frame, .ach-frame, .set-frame{
  width:100%;
  max-width:400px;
  background: linear-gradient(180deg, #3d2818 0%, #2a1810 100%);
  border: 3px solid var(--bronze-dk);
  border-radius:6px;
  padding: 12px 12px 16px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.6), 0 6px 14px rgba(0,0,0,0.6);
  color: var(--text);
}
.shop-title, .ach-title, .set-title{
  text-align:center;
  font-size: clamp(12px, 3.2vw, 14px);
  color: var(--gold-hi);
  text-shadow: 1px 1px 0 var(--bronze-dk);
  padding: 6px 0 10px;
  letter-spacing: 2px;
}
.npc-select{
  display:flex;
  gap:6px;
  margin-bottom:10px;
}
.npc-choice{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:8px 4px 6px;
  font-family:inherit;
  font-size: clamp(9px, 2.4vw, 11px);
  color: var(--text-dim);
  background: linear-gradient(180deg, #3a2818 0%, #241610 100%);
  border: 2px solid var(--bronze-dk);
  border-radius: 4px;
  cursor:pointer;
  transition: all 0.15s;
}
.npc-choice:hover{ color: var(--text); border-color: var(--bronze); }
.npc-choice.active{
  color:#fff2d8;
  background: linear-gradient(180deg, rgba(232,184,120,0.25) 0%, var(--bronze-dk) 100%);
  border-color: var(--gold-hi);
  box-shadow: 0 0 8px rgba(232,184,120,0.35);
}
.npc-choice .npc-face{
  width:44px; height:44px;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.npc-choice .npc-lbl{
  letter-spacing:1px;
  white-space:nowrap;
}
.shop-npc{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  background: rgba(0,0,0,0.35);
  border:2px solid var(--bronze-dk);
  border-radius:4px;
  margin-bottom:10px;
}
.npc-sprite{
  width:96px;
  height:96px;
  flex-shrink:0;
  background-image: url("assets/shop/npc_weapon.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  animation: npc-bob 2.2s ease-in-out infinite;
}
@keyframes npc-bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} }
.npc-bubble{
  flex:1;
  font-size: clamp(11px, 2.8vw, 13px);
  line-height: 1.5;
  color: var(--text);
  background: linear-gradient(180deg, #4a3220 0%, #2f1e10 100%);
  border:2px solid var(--gold);
  border-radius:4px;
  padding:8px 10px;
  position:relative;
}
.npc-bubble::before{
  content:"";
  position:absolute;
  left:-8px; top:50%;
  transform:translateY(-50%);
  border:6px solid transparent;
  border-right-color: var(--gold);
}
.shop-wallet{
  text-align:right;
  font-size: 12px;
  color: var(--gold-hi);
  padding: 2px 6px 8px;
}
.shop-wallet b{ font-size: 14px; color:#ffd97a; }
.shop-tabs{
  display:flex;
  gap:4px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.shop-tab{
  flex:1;
  min-width: 80px;
  font-family: inherit;
  font-size: clamp(9px, 2.4vw, 11px);
  padding: 6px 2px;
  color: var(--text-dim);
  background: linear-gradient(180deg, #3a2818 0%, #241610 100%);
  border: 2px solid var(--bronze-dk);
  border-radius: 3px;
  cursor:pointer;
}
.shop-tab.active{
  color: #fff2d8;
  background: linear-gradient(180deg, var(--bronze) 0%, var(--bronze-dk) 100%);
  border-color: var(--gold);
}
.shop-goods{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:8px;
  margin-bottom:12px;
}
.good{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  background: rgba(0,0,0,0.35);
  border:2px solid var(--bronze-dk);
  border-radius:4px;
  cursor:pointer;
  transition: all 0.15s;
}
.good:hover{ border-color: var(--gold-hi); background: rgba(232,184,120,0.1); }
.good.locked{ opacity:0.5; cursor:not-allowed; }
.good .g-icon{
  width:36px; height:36px;
  background-size: contain;
  background-position:center;
  background-repeat:no-repeat;
  image-rendering:pixelated;
  flex-shrink:0;
}
.good .g-info{ flex:1; min-width:0; }
.good .g-name{ font-size: 11px; color: var(--text); }
.good .g-price{ font-size: 10px; color: var(--gold-hi); margin-top:2px; }
.g-price-orig{ text-decoration: line-through; color: var(--text-dim); margin-right:4px; }
.shop-inv-title{
  text-align:center;
  font-size: 11px;
  color: var(--gold-hi);
  padding:8px 0 6px;
  letter-spacing: 1px;
}
.shop-inv{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:4px;
  padding:6px;
  background: rgba(0,0,0,0.4);
  border:2px inset var(--bronze-dk);
  border-radius:3px;
  min-height: 60px;
}
.inv-slot{
  aspect-ratio: 1;
  background: rgba(0,0,0,0.3);
  border:1px solid var(--bronze-dk);
  border-radius:2px;
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering:pixelated;
  cursor:pointer;
  position:relative;
}
.inv-slot .q{
  position:absolute;
  right:1px; bottom:1px;
  font-size: 8px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  background: rgba(0,0,0,0.7);
  padding: 0 2px;
  border-radius: 2px;
}
.ach-stats{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:6px;
  margin-bottom: 10px;
}
.ach-stat{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 6px 10px;
  background: rgba(0,0,0,0.35);
  border:2px solid var(--bronze-dk);
  border-radius:3px;
}
.ach-stat span{ font-size:11px; color: var(--text-dim); }
.ach-stat b{ font-size:13px; color: var(--gold-hi); }
.ach-sub{
  text-align:center;
  font-size:11px;
  color:var(--gold);
  padding:6px 0 8px;
  letter-spacing:1px;
}
.ach-badges{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:6px;
}
.badge{
  padding: 8px 6px;
  background: rgba(0,0,0,0.35);
  border:2px solid var(--bronze-dk);
  border-radius:3px;
  text-align:center;
  opacity:0.35;
  transition: all 0.2s;
}
.badge.unlocked{
  opacity:1;
  border-color: var(--gold-hi);
  background: linear-gradient(180deg, rgba(232,184,120,0.15), rgba(160,104,64,0.2));
  box-shadow: 0 0 8px rgba(232,184,120,0.3);
}
.badge .b-ico{ font-size:22px; line-height:1; }
.badge .b-name{ font-size:10px; margin-top:4px; color:var(--text); }
.badge .b-desc{ font-size:9px; color:var(--text-dim); margin-top:2px; line-height:1.3; }
.set-block{
  padding: 10px;
  margin-bottom: 10px;
  background: rgba(0,0,0,0.3);
  border:2px solid var(--bronze-dk);
  border-radius:4px;
}
.set-lbl{
  font-size: 12px;
  color: var(--gold-hi);
  margin-bottom: 8px;
  letter-spacing:1px;
}
.slot-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.slot-row .pixel-btn{ flex:1; min-width: 90px; font-size: 11px; padding: 8px 4px; }
.slot-row .job-select{ flex:1; padding: 6px; font-family: inherit; font-size: 11px; background:#241610; color:var(--text); border:2px solid var(--bronze-dk); border-radius:3px; }
.slot-btn.active{
  background: linear-gradient(180deg, var(--gold-hi), var(--bronze));
  color:#fff2d8;
  border-color: var(--gold-hi);
}
#resetBgm:disabled, #resetIntroBgm:disabled{ opacity:.4; cursor:default; }
.set-hint{
  font-size: 10px;
  color: var(--text-dim);
  margin-top:6px;
  text-align:center;
}
.pixel-btn.danger{
  background: linear-gradient(180deg, #a03030 0%, #601010 100%);
  border-color: #ff6060;
  color:#ffe0e0;
}
.job-path{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:8px;
  font-size:11px;
}
.job-path .jp-row{
  display:flex;
  justify-content:space-between;
  padding:4px 8px;
  background:rgba(0,0,0,0.3);
  border-left:3px solid var(--bronze-dk);
}
.job-path .jp-row.done{ border-left-color: var(--gold-hi); color: var(--gold-hi); }
.job-path .jp-row.current{ border-left-color:#4be569; color:#c9ffcc; }
.job-path .jp-row.locked{ opacity:0.5; }
.job-path .jp-lv{ color: var(--text-dim); font-size:10px; }
.fix-hint{ font-size:10px; color: var(--text-dim); margin-bottom:8px; line-height:1.5; }
.resume-frame{
  width:100%;
  background:
    repeating-linear-gradient(90deg, #6b4a2a 0 24px, #5a3818 24px 26px, #6b4a2a 26px 48px),
    #6b4a2a;
  border: 4px solid var(--bronze);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px #1a0a04, inset 0 0 0 4px var(--bronze-dk), 0 6px 20px rgba(0,0,0,0.6);
  padding: 12px 12px 10px;
}
.resume-title{
  text-align:center; color: var(--gold-hi);
  font-size:13px; letter-spacing:3px;
  margin-bottom:10px; text-shadow: 2px 2px 0 #000;
}
.grade-row{
  display:flex; gap:6px; justify-content:center;
  margin-bottom:10px;
}
.grade{
  flex:1; max-width:60px;
  background:#3a2010;
  border:2px solid var(--bronze-dk); border-radius:3px;
  box-shadow: inset 0 0 0 1px #1a0a04;
  text-align:center; padding:4px 0 5px;
}
.g-lbl{ display:block; font-size:10px; color:var(--text-dim); letter-spacing:1px; }
.g-val{ display:block; font-size:16px; margin-top:2px; text-shadow:1px 1px 0 #000; }
.g-S{ color:#ffd75e; } .g-A{ color:#8affa2; } .g-B{ color:#7ec8ff; }
.g-C{ color:#c9a878; } .g-D{ color:#8a7a6a; }
.resume-skill, .adv-skill-row{
  display:flex; align-items:center; gap:10px;
  background:#3a2010;
  border:2px solid var(--bronze-dk); border-radius:3px;
  box-shadow: inset 0 0 0 1px #1a0a04;
  padding:6px 8px;
}
.adv-skill{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.adv-skill:empty{ display:none; }
.resume-skill .skill-icon, .adv-skill-row .skill-icon{
  width:34px; height:34px; cursor:default;
}
.resume-skill .skill-icon:hover, .adv-skill-row .skill-icon:hover{ transform:none; }
@property --cd{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.adv-skill .skill-icon{
  position:relative;
  cursor:pointer;
  overflow:hidden;
}
.adv-skill .skill-icon:active{ transform:scale(0.94); }
.skill-cd-mask{
  position:absolute; inset:0;
  background: conic-gradient(rgba(0,0,0,0.72) var(--cd), transparent 0);
  pointer-events:none;
}
@keyframes cdSweep{
  from { --cd: 100%; }
  to   { --cd: 0%; }
}
.rs-name{
  color:var(--gold-hi); font-size:13px; letter-spacing:1px;
  text-shadow:1px 1px 0 #000;
}
.rs-lv{ color:#8affa2; font-size:11px; margin-left:2px; }
.as-cd{ color:var(--text-dim); font-size:10px; margin-left:4px; }
.rs-desc{ color:var(--text-dim); font-size:10px; margin-top:2px; line-height:1.4; }
.rs-text, .as-text{ min-width:0; }
.log .l-skill{ color:#c79bff; }
.status-head{
  display:flex; gap:6px; justify-content:center;
  margin-bottom:10px;
}
.status-head span{
  background:#3a2010; color:var(--gold-hi);
  border:2px solid var(--bronze-dk); border-radius:3px;
  box-shadow: inset 0 0 0 1px #1a0a04;
  font-size:11px; letter-spacing:1px;
  padding:4px 10px; text-shadow:1px 1px 0 #000;
}
.status-sub{
  text-align:center; color:var(--text-dim);
  font-size:10px; letter-spacing:2px; margin:8px 0 6px;
}
.status-skills{ display:flex; flex-direction:column; gap:6px; }
.rank-badge{ font-weight:bold; }
.grade{ max-width:54px; } 
.race-trait{
  text-align:center; color:var(--gold-hi);
  font-size:11px; letter-spacing:2px;
  margin:2px 0 8px; opacity:0.85;
  text-shadow:1px 1px 0 #000;
}
.tab{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:3px; padding:6px 2px;
}
.tab::before{
  content:"";
  width:32px; height:32px;
  background-size:100% 100%;
  background-repeat:no-repeat;
  image-rendering:pixelated;
}
.tab[data-tab="status"]::before{  background-image:url("assets/ui/tab_status.png"); }
.tab[data-tab="adv"]::before{     background-image:url("assets/ui/tab_adv.png"); }
.tab[data-tab="shop"]::before{    background-image:url("assets/ui/tab_shop.png"); }
.tab[data-tab="bag"]::before{     background-image:url("assets/ui/tab_bag.png"); }
.tab[data-tab="setting"]::before{ background-image:url("assets/ui/tab_setting.png"); }
.tab.active::before{ filter: drop-shadow(0 0 2px rgba(255,220,140,0.8)); }
.px-frame{
  position:relative;
  border: 4px solid var(--bronze);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px #1a0a04, inset 0 0 0 4px var(--bronze-dk), 0 6px 20px rgba(0,0,0,0.6);
  margin-top: 16px;   
  padding-top: 24px;
}
.px-plate{
  position:absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 22px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--bronze) 100%);
  border: 2px solid #1a0a04;
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--gold-hi), 0 3px 0 rgba(0,0,0,0.5);
  color: #2a1408;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: bold;
  letter-spacing: 3px;
  white-space: nowrap;
  z-index: 2;
  image-rendering: pixelated;
}
.px-plate::before, .px-plate::after{
  content:"";
  position:absolute; top:50%; transform:translateY(-50%);
  width:4px; height:4px;
  background: var(--bronze-dk);
  box-shadow: 0 0 0 1px #1a0a04;
}
.px-plate::before{ left:6px; }
.px-plate::after{ right:6px; }
.equip-doll{
  position:relative;
  width:100%;
  aspect-ratio: 681 / 1024;
  background: url("assets/ui/equip_panel.png") center / 100% 100% no-repeat;
  image-rendering: pixelated;
  margin-bottom: 8px;
}
.eq-slot{ position:absolute; border-radius:4px; }
.eq-slot.locked{ cursor:default; }
.eq-slot.empty{ cursor:pointer; }
.eq-slot.empty:hover{ box-shadow: inset 0 0 0 2px rgba(255,216,115,0.45); }
.eq-slot.filled{
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.eq-slot.filled:hover{ box-shadow: inset 0 0 0 2px var(--gold-hi); }
.eq-slot.filled img{
  width:72%; height:72%; object-fit:contain;
  image-rendering:pixelated;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6));
}
.eq-plus{
  position:absolute; right:4px; bottom:2px;
  font-size:10px; color:#ffd873; text-shadow:1px 1px 0 #000;
}
.bag-frame{
  background-image: url("assets/ui/panel_wood.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.bag-sub{
  font-size:11px; color: var(--accent, #ffd873);
  margin:10px 0 6px; letter-spacing:2px;
}
.bag-equips{ display:flex; flex-direction:column; gap:8px; }
.bag-group{ display:flex; flex-direction:column; gap:5px; }
.bag-group-lbl{
  font-size:10px; color: var(--gold-hi, #ffd873);
  letter-spacing:2px; opacity:.9;
}
.bag-eq{
  position:relative;
  display:flex; align-items:center; gap:8px;
  background: rgba(0,0,0,.35);
  border:2px solid #3a3a52; border-radius:4px;
  padding:6px 8px;
}
.bag-eq.clickable{ cursor:pointer; transition: transform .08s, border-color .08s; }
.bag-eq.clickable:hover{ transform: translateX(2px); border-color:#6a6a8a; }
.bag-eq.on{
  border-color:#ffd873;
  box-shadow: inset 0 0 6px rgba(255,216,115,.25);
  cursor:default;
}
.bag-eq-on{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:9px; color:#ffd873; letter-spacing:1px;
  border:1px solid #ffd873; border-radius:3px; padding:2px 4px;
  background: rgba(0,0,0,.4);
}
.bag-eq.empty{ opacity:.5; }
.bag-eq-ico{
  width:40px; height:40px; flex:none;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  image-rendering:pixelated;
}
.bag-eq-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.bag-eq-txt b{ font-size:12px; }
.bag-eq-txt span{ font-size:10px; opacity:.75; }
.plus{ color:#ffd873; }
.enh-card{
  flex:1; text-align:center;
  background: rgba(0,0,0,.35);
  border:2px solid #3a3a52; border-radius:4px;
  padding:8px 6px 10px;
  background-image:url("assets/ui/anvil.png");
  background-repeat:no-repeat;
  background-position:center 82%;
  background-size:44px;
  image-rendering:pixelated;
}
.enh-head{ font-size:13px; margin-bottom:4px; }
.enh-max{ font-size:10px; opacity:.6; margin-left:2px; }
.enh-info{ font-size:10px; opacity:.85; margin:2px 0; }
.enh-warn{ font-size:10px; color:#ff8a7a; margin:2px 0; }
.enh-btn{ margin-top:26px; }
.enh-btn:disabled{ opacity:.4; pointer-events:none; }
.forge-card{
  width:100%;
  grid-column: 1 / -1; 
  padding-bottom:14px;
}
.forge-wrap{ grid-column: 1 / -1; display:flex; gap:8px; margin-bottom:8px; }
.forge-slot{
  flex:1; min-width:0; text-align:center;
  background: rgba(0,0,0,.35);
  border:2px solid #3a3a52; border-radius:4px;
  padding:8px 6px 10px;
  position:relative; overflow:hidden;
}
.forge-slot-gear{
  background-image:url("assets/ui/anvil.png");
  background-repeat:no-repeat; background-position:center; background-size:55% auto;
}
.forge-slot-gear.filled{ cursor:pointer; }
.forge-slot-clear{ font-size:9px; opacity:.55; margin-top:2px; }
.forge-slot-gear.filled:hover .forge-slot-clear{ opacity:.9; color:var(--gold-hi); }
.forge-slot-scroll.filled{ cursor:pointer; }
.forge-slot-scroll.filled:hover .forge-slot-clear{ opacity:.9; color:var(--gold-hi); }
.forge-scroll-picker{ grid-column: 1 / -1; margin-top:10px; }
.forge-scroll-picker-label{
  font-size:10px; opacity:.7; text-align:center; letter-spacing:1px; margin-bottom:6px;
}
.forge-scroll-picker-grid{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.forge-scroll-picker-grid .inv-slot{ width:52px; height:52px; flex:0 0 auto; }
.inv-slot.forge-scroll-slot{
  border-color: var(--gold);
  box-shadow: inset 0 0 4px rgba(255,216,115,0.35);
}
.inv-slot.forge-scroll-slot.selected{ border-color:#8affa2; box-shadow: inset 0 0 6px rgba(138,255,162,0.6); }
.forge-ash-pile{
  width:40px; height:40px; margin:0 auto 4px;
  background:
    radial-gradient(circle at 65% 62%, rgba(255,130,60,.5) 0%, rgba(255,130,60,0) 45%),
    radial-gradient(circle at 40% 70%, rgba(70,70,70,.85) 0%, rgba(50,50,50,.6) 45%, rgba(50,50,50,0) 72%),
    radial-gradient(circle at 55% 55%, rgba(110,110,110,.6) 0%, rgba(110,110,110,0) 60%);
}
.forge-msg{ grid-column: 1 / -1; }
.forge-slot-label{ font-size:10px; color: var(--gold-hi); margin-bottom:4px; letter-spacing:1px; }
.forge-slot-empty{ font-size:11px; opacity:.7; padding:20px 4px; }
.forge-slot .bag-eq-ico{ margin:0 auto 4px; }
.forge-scroll-opt{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 4px; border-radius:3px; cursor:pointer;
  border:1px solid transparent;
}
.forge-scroll-opt.active{ border-color: var(--gold); background: rgba(255,216,115,0.12); }
.forge-scroll-ico{
  width:32px; height:32px; background-size:contain; background-repeat:no-repeat; background-position:center;
  image-rendering:pixelated;
}
.forge-scroll-name{ font-size:10px; margin-top:2px; }
.forge-scroll-qty{ font-size:9px; opacity:.75; }
.forge-btn-row{ grid-column: 1 / -1; text-align:center; margin-bottom:10px; }
.forge-btn-row .enh-btn{ width:80%; }
.forge-slot-gear.enh-ok{ animation: enhOk 0.6s ease-out; }
.forge-slot-gear.enh-fail{ animation: enhFail 0.6s ease-out; }
.forge-slot-gear.enh-ok::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:0;
  background: radial-gradient(circle at 50% 42%,
    rgba(255,255,255,.95) 0%, rgba(255,236,168,.65) 30%, rgba(255,216,115,0) 68%);
  animation: holyFlash .65s ease-out;
}
@keyframes holyFlash{
  0%{ opacity:0; transform:scale(.5); }
  25%{ opacity:1; transform:scale(1.1); }
  100%{ opacity:0; transform:scale(1.5); }
}
.forge-slot-gear.enh-fail::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:0;
  background: radial-gradient(circle at 50% 45%,
    rgba(255,255,255,.9) 0%, rgba(255,140,40,.85) 22%, rgba(120,20,10,.55) 45%, rgba(0,0,0,0) 72%);
  animation: enhBoom .6s ease-out;
}
@keyframes enhBoom{
  0%{ opacity:0; transform:scale(.3); }
  20%{ opacity:1; transform:scale(1.3); }
  55%{ opacity:.85; transform:scale(1.6); }
  100%{ opacity:0; transform:scale(2); }
}
.forge-slot-gear.enh-fail .bag-eq-ico{ animation: gearShatter .6s ease-out forwards; }
@keyframes gearShatter{
  0%  { opacity:1; transform:scale(1) rotate(0deg); filter:brightness(1) saturate(1); }
  40% { opacity:1; transform:scale(1.15) rotate(-8deg); filter:brightness(2.2) saturate(0); }
  100%{ opacity:0; transform:scale(.35) rotate(15deg); filter:brightness(2.2) saturate(0); }
}
.inv-slot.gear.selected{ border-color:#8affa2; box-shadow: inset 0 0 6px rgba(138,255,162,0.6); }
.inv-slot.gear{
  border-color: var(--gold);
  box-shadow: inset 0 0 4px rgba(255,216,115,0.35);
}
.inv-slot.gear:hover{ border-color: var(--gold-hi); }
.inv-slot .q.plus-q{ color:#ffd873; }
.bag-msg{
  margin:8px 0 2px; padding:6px 8px;
  font-size:11px; text-align:center;
  background: rgba(0,0,0,.3);
  border:1px dashed #3a3a52; border-radius:4px;
  min-height:16px;
}
.enh-card.enh-ok{ animation: enhOk 0.6s ease-out; }
@keyframes enhOk{
  0%  { box-shadow: 0 0 0 0 rgba(255,216,115,0); }
  30% { box-shadow: 0 0 18px 4px rgba(255,216,115,.9); border-color:#ffd873; filter:brightness(1.6); }
  100%{ box-shadow: 0 0 0 0 rgba(255,216,115,0); }
}
.enh-card.enh-fail{ animation: enhFail 0.45s ease-out; }
@keyframes enhFail{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); filter:brightness(.6) saturate(.3); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); filter:brightness(.6) saturate(.3); }
  80%{ transform:translateX(3px); }
}
.pxm-overlay{
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.pxm-overlay.show{ display: flex; }
.pxm-box{
  background: #a4713c;
  border: 4px solid #3a2416;
  box-shadow: inset 0 0 0 3px #c9924f, 0 6px 0 rgba(0,0,0,.35);
  border-radius: 6px;
  padding: 18px 16px 14px;
  max-width: 320px; width: 100%;
  image-rendering: pixelated;
}
.pxm-msg{
  color: #fff3d6;
  text-shadow: 1px 1px 0 #3a2416;
  font-size: 15px; line-height: 1.6;
  text-align: center;
  margin-bottom: 14px;
  word-break: break-word;
}
.pxm-btns{ display: flex; gap: 12px; justify-content: center; }
.pxm-btn{
  font: inherit; font-size: 15px;
  color: #fff3d6; text-shadow: 1px 1px 0 #3a2416;
  border: 3px solid #3a2416; border-radius: 4px;
  padding: 8px 22px;
  cursor: pointer;
  box-shadow: 0 3px 0 #3a2416;
}
.pxm-btn:active{ transform: translateY(2px); box-shadow: 0 1px 0 #3a2416; }
.pxm-ok{ background: #6d8f3c; }
.pxm-cancel{ background: #8a5a2b; }
.pxm-qty-row{
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-bottom: 8px;
}
.pxm-qty-btn{
  font: inherit; font-size: 16px;
  color: #fff3d6; text-shadow: 1px 1px 0 #3a2416;
  background: #8a5a2b;
  border: 3px solid #3a2416; border-radius: 4px;
  width: 34px; height: 34px;
  cursor: pointer;
  box-shadow: 0 3px 0 #3a2416;
}
.pxm-qty-btn:active{ transform: translateY(2px); box-shadow: 0 1px 0 #3a2416; }
.pxm-qty-input{
  min-width: 44px; text-align: center;
  font-size: 18px; color: #fff3d6; text-shadow: 1px 1px 0 #3a2416;
}
.pxm-qty-total{
  text-align: center; font-size: 13px;
  color: #ffe9b3; text-shadow: 1px 1px 0 #3a2416;
  margin-bottom: 14px;
}
*{ scrollbar-width: thin; scrollbar-color: #8a5a2b #2a1a0e; }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: #2a1a0e; border-radius: 5px; }
::-webkit-scrollbar-thumb{
  background: #8a5a2b;
  border: 2px solid #3a2416;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover{ background: #a4713c; }
.adv-hud{
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(42,26,14,.55);
  border: 3px solid #3a2416;
  border-radius: 6px;
  padding: 6px 8px;
  margin: 6px 0;
}
.ah-row{ display: flex; align-items: center; gap: 6px; }
.ah-label{
  width: 34px; flex: none;
  font-size: 11px; font-weight: bold;
  color: #fff3d6; text-shadow: 1px 1px 0 #3a2416;
}
.ah-bar{
  flex: 1; height: 10px;
  background: #2a1a0e;
  border: 2px solid #3a2416;
  border-radius: 4px;
  overflow: hidden;
}
.ah-fill{ height: 100%; width: 0%; transition: width .25s; }
.ah-hp  .ah-fill{ background: linear-gradient(#e05545, #a52c20); }
.ah-mp  .ah-fill{ background: linear-gradient(#4a7de0, #2c4fa5); }
.ah-exp .ah-fill{ background: linear-gradient(#7fd24a, #4a9420); }
.ah-text{
  width: 64px; flex: none; text-align: right;
  font-size: 11px;
  color: #fff3d6; text-shadow: 1px 1px 0 #3a2416;
}
.adv-quick{
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: rgba(42,26,14,.55);
  border: 3px solid #3a2416;
  border-radius: 6px;
  padding: 6px 8px;
  margin: 6px 0;
}
.aq-slot{
  position: relative; flex: none;
  width: 40px; height: 40px;
  background-color: #2a1a0e;
  background-size: 28px 28px;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #6b4a2b;
  border-radius: 4px;
  cursor: pointer;
  image-rendering: pixelated;
}
.aq-slot:active{ transform: translateY(1px); }
.aq-slot.empty{ filter: grayscale(1) brightness(.55); cursor: default; }
.aq-slot .q{
  position: absolute; right: 1px; bottom: 0;
  font-size: 10px; font-weight: bold;
  color: #ffd85e; text-shadow: 1px 1px 0 #3a2416;
}
.aq-msg{
  flex: 1 1 100%;
  min-height: 14px;
  font-size: 11px;
  color: #fff3d6; text-shadow: 1px 1px 0 #3a2416;
}
.adv-buff-row{
  flex: 1 1 100%;
  display: flex; gap: 6px; flex-wrap: wrap;
  min-height: 0;
}
.buff-icon{
  position: relative; flex: none;
  width: 28px; height: 28px;
  background-color: #2a1a0e;
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid var(--gold);
  border-radius: 4px;
}
.buff-icon .bq{
  position: absolute; right: 0; bottom: -1px;
  font-size: 9px; font-weight: bold;
  color: #ffd85e; text-shadow: 1px 1px 0 #3a2416;
}
.buff-icon.ending{ animation: buffBlink 0.5s steps(1) infinite; }
@keyframes buffBlink{ 50%{ opacity: 0.25; } }
.eq-slot, .inv-slot, .aq-slot,
.eq-slot img, .inv-slot img{
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  touch-action: manipulation;
}
.eq-slot img{ pointer-events: none; }
img{
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.good .g-bonus{ font-size: 10px; color: #9fd47a; margin-top:1px; }
.good .g-limit{
  font-size: 9px; color: #e0a050;
  border: 1px solid #e0a050; border-radius: 3px;
  padding: 0 3px; margin-left: 4px; vertical-align: 1px;
}
.good.race-locked{ opacity: 0.45; filter: grayscale(0.7); }
.good.race-locked:hover{ border-color: var(--bronze-dk); background: rgba(0,0,0,0.35); }
.good.selected{ border-color:#8affa2; box-shadow: inset 0 0 6px rgba(138,255,162,0.6); background: rgba(138,255,162,0.08); }
.g-detail-inline{
  font-size: 10px;
  color: #9fd47a;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(138,255,162,0.4);
  line-height: 1.4;
}
.good .g-owned-hint{
  font-size: 9px; color: #9fb0c8;
  border: 1px solid #4a5568; border-radius: 3px;
  padding: 0 3px; margin-left: 4px; vertical-align: 1px;
}
.inv-slot.cant-use{ filter: grayscale(0.8); }
.inv-slot.cant-use::after{
  content:"✕"; position:absolute; right:2px; top:0;
  font-size:10px; color:#e06050; text-shadow:1px 1px 0 #000;
}
.combat-panel{ display:flex; gap:10px; align-items:stretch; margin-top:6px; }
.combat-hero{
  width:110px; min-height:140px; flex:none;
  background-color: rgba(0,0,0,0.25);
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  border:2px solid var(--bronze-dk);
  border-radius:4px;
}
.combat-stats{ flex:1; display:flex; flex-direction:column; gap:4px; justify-content:center; min-width:0; }
.cb-row{
  display:flex; align-items:baseline; gap:6px;
  background: rgba(0,0,0,0.25);
  border:1px solid var(--bronze-dk);
  border-radius:4px;
  padding:4px 8px;
}
.cb-lbl{ font-size:11px; color:var(--text); width:58px; flex:none; }
.cb-val{ font-size:13px; color:var(--gold-hi); }
.cb-sub{ font-size:9px; color:#b9a98d; opacity:0.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.intro-overlay{
  position: fixed; inset: 0; z-index: 3000;
  background: #0a0a14;
  opacity: 1; transition: opacity 0.6s ease;
}
.intro-overlay.fade-out{ opacity: 0; pointer-events: none; }
.intro-boot{
  position: absolute; inset: 0; overflow: hidden; cursor: pointer;
  --bt-void:#03060d; --bt-navy:#0a2a52; --bt-dim:#12618f; --bt-cyan:#38d6ff; --bt-hot:#d5f8ff;
  --bt-go:#3dff8a; --bt-go-deep:#0b4a2a; --bt-rift:#ff3bd4;
  --bt-term:"VT323","DotGothic16","Zpix",monospace; --bt-title:"DotGothic16","Zpix","VT323",monospace;
  background: var(--bt-void); color: var(--bt-cyan); font-family: var(--bt-term);
  transition: opacity 0.5s ease;
}
.intro-boot.hide{ opacity: 0; pointer-events: none; }
.intro-boot > *{ position: absolute; inset: 0; }
.boot-rain{ width: 100%; height: 100%; display: block; transform-origin: 50% 55%;
  transition: transform .95s cubic-bezier(.7,0,.95,.35), filter .95s ease-in; }
.boot-shade{ pointer-events: none;
  background: radial-gradient(ellipse 95% 70% at 50% 60%, rgba(3,6,13,.84) 0, rgba(3,6,13,.84) 45%, rgba(3,6,13,.5) 72%, transparent 100%); }
.boot-scan{ pointer-events: none; z-index: 4;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.24) 2px 3px),
              radial-gradient(ellipse at center, transparent 55%, rgba(3,6,13,.84) 100%); }
.boot-flash{ pointer-events: none; z-index: 5; background: var(--bt-hot); opacity: 0; }
.boot-gate{ z-index: 2; display: grid; place-content: center; justify-items: center; gap: 26px; text-align: center;
  padding: 0 20px; box-sizing: border-box; visibility: hidden; }
.intro-boot.gate .boot-gate{ visibility: visible; }
.intro-boot.gate .boot-hud{ visibility: hidden; }
.boot-gate-a{ font-family: var(--bt-title); font-size: clamp(34px, 11vw, 64px); line-height: 1.1; min-height: 1.1em;
  letter-spacing: .08em; color: var(--bt-hot); white-space: nowrap;
  text-shadow: 3px 0 var(--bt-rift), -3px 0 var(--bt-cyan), 0 0 18px var(--bt-cyan); }
.boot-gate-b{ font-family: var(--bt-title); font-size: clamp(20px, 6vw, 28px); line-height: 1.2; letter-spacing: .2em;
  min-height: 2.4em; min-width: 9em; box-sizing: border-box; padding: 12px 20px;
  color: var(--bt-go); background: var(--bt-void); border: 2px solid transparent; text-shadow: 0 0 10px var(--bt-go); }
.boot-gate-b.on{ border-color: var(--bt-go); box-shadow: 0 0 0 2px var(--bt-go-deep), 0 0 22px var(--bt-go-deep);
  animation: bootPulse 1.1s steps(2, jump-none) infinite; }
.intro-boot.tw .boot-gate-a{ transform: translateX(7px) skewX(-9deg); text-shadow: 8px 0 var(--bt-rift), -8px 0 var(--bt-cyan); }
.intro-boot.tw .boot-gate-b{ transform: translateX(-5px); }
.boot-hud{ z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px;
  width: 100%; max-width: 580px; margin: 0 auto; box-sizing: border-box;
  padding: calc(14px + env(safe-area-inset-top)) 20px calc(26px + env(safe-area-inset-bottom));
  transition: opacity .5s, transform .9s cubic-bezier(.7,0,.95,.35); }
.boot-top{ display: flex; justify-content: space-between; gap: 12px; font-size: 16px; line-height: 1.2; letter-spacing: .12em; color: var(--bt-dim); }
.boot-top span{ min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boot-term{ display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; min-height: 0;
  font-size: clamp(17px, 4.7vw, 22px); line-height: 1.12;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38%); mask-image: linear-gradient(to bottom, transparent 0, #000 38%); }
.boot-ln{ white-space: pre; color: var(--bt-dim); flex: none; width: fit-content; max-width: 100%; overflow: hidden;
  background: var(--bt-void); padding-right: .5em; animation: bootLn .5s steps(3, end); }
.boot-ln.cmd{ color: var(--bt-hot); margin-top: .35em; }
.boot-ln .v{ color: var(--bt-cyan); }
.boot-ln .n{ color: var(--bt-hot); }
.boot-ln.zh{ font-family: var(--bt-title); font-size: .86em; line-height: 1.3; color: var(--bt-hot); }
.boot-ln.fin{ color: var(--bt-go); text-shadow: 0 0 8px var(--bt-go); }
@keyframes bootLn{ from{ color: var(--bt-hot); text-shadow: 0 0 8px var(--bt-cyan); } }
.boot-cur{ display: inline-block; width: .5em; height: .9em; background: var(--bt-hot); vertical-align: -.08em;
  animation: bootBlink .8s steps(2, jump-none) infinite; }
@keyframes bootBlink{ 50%{ opacity: 0; } }
.boot-core{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.boot-text{
  font-family: var(--bt-title); font-size: clamp(28px, 8.6vw, 46px); line-height: 1.15; min-height: 1.15em;
  letter-spacing: .06em; color: var(--bt-hot); white-space: nowrap; user-select: none;
  text-shadow: 2px 0 var(--bt-navy), -2px 0 var(--bt-navy), 0 2px var(--bt-navy), 0 -2px var(--bt-navy),
               2px 2px var(--bt-navy), -2px 2px var(--bt-navy), 0 0 14px var(--bt-cyan), 0 0 34px var(--bt-dim); 
}
.boot-dots{ display: inline-block; overflow: hidden; vertical-align: bottom; width: 0; letter-spacing: 0;
  animation: bootDots 1.4s steps(6, jump-none) infinite; }
@keyframes bootDots{ to{ width: 2.6em; } }
.boot-bar{
  display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; padding: 4px; height: 30px; box-sizing: border-box;
  border: 2px solid var(--bt-cyan); background: var(--bt-void);
  box-shadow: 0 0 0 2px var(--bt-navy), 0 0 16px var(--bt-dim), inset 0 0 0 1px var(--bt-navy);
}
.boot-bar i{ background: var(--bt-navy); opacity: .55; }
.boot-bar i.on{ background: var(--bt-cyan); opacity: 1; box-shadow: inset 0 -5px 0 var(--bt-dim), inset 0 3px 0 var(--bt-hot); }
.boot-bar i.tip{ background: var(--bt-hot); }
.boot-meta{ display: flex; justify-content: space-between; font-size: 20px; line-height: 1.2; letter-spacing: .08em;
  font-variant-numeric: tabular-nums; color: var(--bt-cyan); }
.boot-meta #bootAddr{ color: var(--bt-dim); }
.boot-enter{
  font-family: var(--bt-title); font-size: clamp(20px, 6vw, 28px); line-height: 1.2; letter-spacing: .18em; text-align: center;
  color: var(--bt-go); background: var(--bt-void); padding: 12px 10px; margin-top: 6px; box-sizing: border-box;
  border: 2px solid var(--bt-go);
  box-shadow: 0 0 0 2px var(--bt-go-deep), 0 0 22px var(--bt-go-deep), inset 0 0 0 2px var(--bt-go-deep);
  text-shadow: 0 0 10px var(--bt-go);
  user-select: none;
  visibility: hidden;
}
.boot-enter.show{ visibility: visible; animation: bootPulse 1.1s steps(2, jump-none) infinite; }
.boot-enter.busy{ visibility: visible; animation: none; }
.intro-boot.choice .boot-enter{ display: none; } 
@keyframes bootPulse{ 50%{ box-shadow: 0 0 0 2px var(--bt-go-deep), 0 0 6px var(--bt-go-deep), inset 0 0 0 2px var(--bt-go-deep); text-shadow: none; } }
.intro-boot.jolt .boot-hud, .intro-boot.jolt .boot-gate{ animation: bootJolt .32s steps(6, end); }
@keyframes bootJolt{ 20%{ transform: translateX(-7px); } 40%{ transform: translateX(6px); } 60%{ transform: translateX(-3px); } 80%{ transform: translateX(2px); } }
.intro-boot.jolt .boot-flash{ animation: bootPop .32s ease-out; }
@keyframes bootPop{ from{ opacity: .4; } to{ opacity: 0; } }
.intro-boot.warp .boot-rain{ transform: scale(1.7, 9); filter: brightness(2.4); }
.intro-boot.warp .boot-hud{ opacity: 0; transform: scale(1.25); }
.intro-boot.warp .boot-flash{ animation: bootWhite 1.25s ease-in forwards; }
@keyframes bootWhite{ 0%, 45%{ opacity: 0; } 82%, 100%{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){
  .intro-boot *, .intro-boot{ animation: none !important; transition: none !important; }
  .boot-dots{ width: 2.6em; }
}
.intro-title{
  position: absolute; inset: 0;
  background: #000; 
  display: flex; align-items: flex-end; justify-content: center;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
}
.intro-title.show{ opacity: 1; pointer-events: auto; }
.intro-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
  pointer-events: none;
  z-index: 0;
}
.intro-enter{
  position: relative; z-index: 1; 
  margin-bottom: 12vh;
  font-family: inherit;
  font-size: clamp(20px, 3.2vw, 34px); letter-spacing: 6px;
  color: #ffe9a8;
  text-shadow: 3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000;
  animation: introBlink 1.4s steps(2, jump-none) infinite;
  user-select: none;
  visibility: hidden;
}
.intro-enter.show{ visibility: visible; }
@keyframes introBlink{ 0%,100%{ opacity: 1; } 50%{ opacity: 0.15; } }
.page-status.active{ gap: 0; }
.st-stage{
  position: relative;
  width: 100%;
  aspect-ratio: 1028 / 1286;
  background: url("assets/ui/status/status_bg.png") center/100% 100% no-repeat;
  image-rendering: pixelated;
  user-select: none;
  --st-hero-scale: 1;
}
.st-plate{
  position:absolute;
  left: 25.5%; width: 49%;
  top: 1.5%;
  aspect-ratio: 610 / 215;
  background: url("assets/ui/status/name_plate.png") center/100% 100% no-repeat;
  container-type: inline-size;      
}
.st-plate-title, .st-plate-name{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-plate-title{
  left: 10.7%; right: 8.7%;
  top: 8.4%; height: 20.9%;
  font-size: 5.2cqw;
  color: var(--gold-hi);
  opacity: .9;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #000;
}
.st-plate-name{
  left: 4.9%; right: 5.1%;
  top: 32.1%; height: 41.9%;
  font-size: 10cqw;
  color: #f0dfae;
  text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.6);
}
.st-hero{
  position:absolute;
  left: 31.1%; width: 39%;
  top: 17.2%;  height: 58%;         
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  transform: scale(var(--st-hero-scale));
  transform-origin: bottom center;
  pointer-events: none;
}
.st-btn{
  position:absolute;
  aspect-ratio: 1 / 1;
  padding: 0; border: 0;
  background: center/100% 100% no-repeat;
  image-rendering: pixelated;
  cursor: pointer;
  transition: transform .08s steps(2), filter .15s;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.6));
}
.st-btn:active{ transform: translateY(2px); }
.st-btn:hover{ filter: drop-shadow(0 0 6px rgba(226,190,110,.55)); }
.st-btn:not(.locked){ overflow: visible; }
.st-btn:not(.locked)::before{
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255,214,140,0)   70%,
    rgba(255,214,140,.95) 75%,
    rgba(232,184,120,.45) 84%,
    rgba(232,184,120,0)   100%);
  pointer-events: none;
  animation: stBtnHalo 2.4s ease-in-out infinite alternate;
}
@keyframes stBtnHalo{
  from{ opacity: 1; }
  to  { opacity: .15; }
}
@media (prefers-reduced-motion: reduce){
  .st-btn:not(.locked)::before{ animation: none; opacity: .7; }
}
.st-btn.locked{
  filter: grayscale(1) brightness(.55);
  cursor: not-allowed;
}
.st-btn.locked::after{
  content: "🔒";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size: clamp(11px, 3.4vw, 16px);
  text-shadow: 0 0 4px #000;
}
.st-btn-cap{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.st-btn{ width: 12.63%; }           
.b-stats { left: 10.18%; }          
.b-skill { left:  5.13%; }          
.b-bag   { left:  9.17%; right:auto; }  
.b-pet   { right: 10.18%; }
.b-detail{ right:  5.13%; left:auto; }  
.b-clan  { right:  9.17%; }
.b-stats, .b-pet  { top: 26.6%; }
.b-skill, .b-detail { top: 43.3%; }
.b-bag,   .b-clan   { top: 59.5%; }
.b-stats { background-image: url("assets/ui/status/btn_stats.png"); }
.b-skill { background-image: url("assets/ui/status/btn_skill.png"); }
.b-detail{ background-image: url("assets/ui/status/btn_detail.png"); }
.b-pet   { background-image: url("assets/ui/status/btn_pet.png"); }
.b-bag   { background-image: url("assets/ui/status/btn_bag.png"); }
.b-clan  { background-image: url("assets/ui/status/btn_clan.png"); }
.st-bar{
  position:absolute;
  left: 22.75%; width: 54.5%;       
  bottom: 1.5%;                     
  aspect-ratio: 468 / 211;
  background: url("assets/ui/status/orb_bar.png") center/100% 100% no-repeat;
  image-rendering: pixelated;
  container-type: inline-size;      
}
.st-orb{
  position:absolute;
  top: 19.43%;                      
  width: 23.93%;                    
  height: 53.08%;                   
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.st-orb-hp{ left: 14.53%; }         
.st-orb-mp{ left: 61.54%; }         
.st-col{
  position:absolute;
  top: 0;
  height: 0;
  background: #0a0607;
  opacity: .86;                     
}
.st-expmask{
  position:absolute;
  right: 31.41%;                    
  top: 83.41%;                      
  height: 8.06%;                    
  width: 0;
  background: #12090a;
  opacity: .92;
  pointer-events: none;
}
.st-lv{
  position:absolute;
  left: 37.8%; width: 24.6%;
  top: 61.1%;  height: 9.48%;
  display:flex; align-items:center; justify-content:center;
  font-size: 4.2cqw;
  line-height: 1;
  color: #f0dfae;
  letter-spacing: .5px;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
  pointer-events: none;
}
.st-ro{
  position:absolute;
  text-align:center;
  color:#fff;
  line-height:1;
  text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
  pointer-events:none;
}
.st-ro-hp, .st-ro-mp{ top: 41%; width: 23.93%; font-size: 3.2cqw; }
.st-ro-hp{ left: 14.53%; }
.st-ro-mp{ left: 61.54%; }
.st-ro-exp{ left: 30.98%; width: 37.61%; top: 84.6%; font-size: 2.9cqw; }
.st-sub{
  position: fixed; inset: 0;
  z-index: 60;
  background: rgba(0,0,0,.78);
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
}
.st-sub.open{ display:flex; }
.st-sub-box{
  width: 100%; max-width: 400px;
  max-height: 86vh;
  display:flex; flex-direction:column;
  background: #1a1410;
  border: 3px solid var(--bronze);
  box-shadow: inset 0 0 0 1px #3a1e10, 0 6px 0 rgba(0,0,0,.5);
  border-radius: 4px;
}
.st-sub-head{
  flex: 0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 2px solid var(--bronze-dk);
  background: rgba(0,0,0,.3);
}
.st-sub-title{
  font-size: 14px;
  color: var(--gold-hi);
  letter-spacing: 2px;
  text-shadow: 1px 1px 0 #000;
}
.st-sub-x{
  flex: 0 0 auto;
  width: 28px; height: 28px;
  background: #2a1f16;
  border: 2px solid var(--bronze-dk);
  color: var(--gold-hi);
  font-size: 13px;
  cursor: pointer;
  border-radius: 3px;
}
.st-sub-x:active{ transform: translateY(1px); }
.st-sub-body, .st-sub-bag{
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
}
.st-sub-sec{
  text-align:center;
  font-size: 11px;
  color: var(--gold-hi);
  opacity: .85;
  letter-spacing: 2px;
  margin: 2px 0 8px;
}
.quest-soon{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 8px;
  padding: 36px 16px;
  text-align:center;
}
.quest-soon .qs-icon{ font-size: 34px; filter: grayscale(.3); }
.quest-soon .qs-title{
  font-size: 13px; color: var(--gold-hi);
  letter-spacing: 2px; text-shadow: 1px 1px 0 #000;
}
.quest-soon .qs-desc{
  font-size: 11px; line-height: 1.8;
  color: var(--text); opacity: .75;
}
.mini-toast{
  position: fixed;
  left: 50%; bottom: 84px;
  transform: translate(-50%, 8px);
  z-index: 90;
  padding: 7px 14px;
  background: rgba(20,14,10,.95);
  border: 2px solid var(--bronze);
  border-radius: 3px;
  color: var(--gold-hi);
  font-size: 11px;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.mini-toast.show{ opacity: 1; transform: translate(-50%, 0); }
.st-bar.adv-orb{
  position: relative;                
  left: auto; right: auto; bottom: auto;
  width: 100%;
  max-width: 300px;                  
  margin: 6px auto;
}
.page-status .resume-frame{
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  justify-content: center;
}
.st-wrap{
  position: relative;
  width: 100%;
  container-type: inline-size;       
  margin: 0 auto;
  --st-chrome: 260px;
  max-width: min(480px, calc((100dvh - var(--st-chrome)) * 1028 / 1286));
}
.st-frame{
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;             
  border-style: solid;
  border-color: transparent;
  border-top-width:    16.577cqw;   
  border-right-width:  12.545cqw;   
  border-bottom-width: 11.649cqw;   
  border-left-width:   12.545cqw;
  border-image-source: url("assets/ui/status/status_frame.png");
  border-image-slice: 185 140 130 140;
  border-image-repeat: stretch;
  image-rendering: pixelated;
}
.st-inner{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6cqw;
  padding: 2.778cqw 4.211cqw 2.957cqw;   
}
.st-stage{ width: 100%; flex: 0 0 auto; }   
.st-combat{
  width: 100%;
  padding: 6px 4px 2px;
}
.st-combat-hd{
  text-align: center;
  font-size: 11px;
  color: var(--gold-hi);
  opacity: .85;
  letter-spacing: 2px;
  margin: 0 0 6px;
}
.st-combat .combat-stats{ gap: 3px; }
.st-combat .cb-row{
  background: rgba(0,0,0,0.38);
  border-color: rgba(120,90,50,0.55);
}
.st-combat-lock{
  text-align: center;
  font-size: 11px;
  color: #b9a98d;
  opacity: .8;
  padding: 14px 0 16px;
}
.sx{
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  background: url("assets/ui/status/stats_bg.png") center/100% 100% no-repeat;
  image-rendering: pixelated;
  container-type: inline-size;      
  user-select: none;
}
.sx-svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.sx-seal{
  position: absolute;
  left: 38.48%; top: 75.59%;
  width: 22.85%; height: 22.66%;
  background: center/100% 100% no-repeat;
  image-rendering: pixelated;
}
.sx-num{
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 4.4cqw;
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  pointer-events: none;
}
.sx-cap{
  position: absolute;
  left: 50%; top: 12.9%;
  transform: translate(-50%, -50%);
  font-size: 2.5cqw;
  letter-spacing: 1px;
  color: #c69a66;
  opacity: .8;
  pointer-events: none;
}
.adv-rune{
  position: relative;
  width: 100%;
  aspect-ratio: 488 / 363;
  background: url("assets/ui/adv/hud_plate.jpg") center / 100% 100% no-repeat;
  image-rendering: pixelated;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2cqw;
  padding: 4% 0 5%;
  overflow: hidden;
}
.adv-stage + .adv-rune{ margin-top: -8px; }
.adv-rune .hunt-status{
  flex: none;
  padding: 0 14%;
  min-height: 1.3em;
  line-height: 1.3;
  font-size: clamp(10px, 3.1cqw, 14px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.adv-rune .st-bar.adv-orb{
  flex: none;
  width: 68cqw;
  max-width: none;
  margin: 0;
}
.adv-rune .adv-quick{
  flex: none;
  width: 76cqw;
  justify-content: center;
  gap: 1.2cqw 1.8cqw;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.adv-rune .aq-slot{
  width: 10cqw; height: 10cqw;
  background-size: 70% 70%;
  background-color: rgba(18,9,6,.85);
  border: 2px solid #6b4a2b;
  box-shadow: inset 0 0 0 1px #000;
}
.adv-rune .aq-slot .q{ font-size: clamp(9px, 2.6cqw, 12px); }
.adv-rune .adv-buff-row{
  min-height: 7cqw;
  justify-content: center;
  gap: 1.2cqw;
}
.adv-rune .buff-icon{
  width: 7cqw; height: 7cqw;
  background-size: 72% 72%;
}
.adv-rune .buff-icon .bq{ font-size: clamp(8px, 2.2cqw, 11px); }
.adv-rune .adv-run{
  position: absolute; left: 50%; bottom: 3.5%; transform: translateX(-50%);
  width: 26cqw; min-height: 7.4cqw; padding: 0 2cqw;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(10px, 3cqw, 14px);
  background: linear-gradient(#5a3d20, #33210f);
  color: #ffeec8; border: 2px solid #c9a961; border-radius: 3px;
  text-shadow: 1px 1px 0 #1a0a04;
  box-shadow: inset 0 0 0 1px #1a0a04, 0 2px 0 #1a0a04;
}
.adv-rune .adv-run.fight{ background: linear-gradient(#6d2323, #3a1010); border-color: #e0604a; color: #ffe0d6; } 
.adv-rune .adv-run:active{ transform: translate(-50%, 1px); box-shadow: inset 0 0 0 1px #1a0a04; }
.adv-rune .adv-run:disabled{ opacity:.45; }
.adv-rune .aq-msg{
  min-height: 3.6cqw;
  line-height: 3.6cqw;
  font-size: clamp(9px, 2.8cqw, 12px);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adv-skillpanel{
  position: relative;
  width: 100%;
  aspect-ratio: 512 / 233;
  background: url("assets/ui/adv/skill_panel.png") center / 100% 100% no-repeat;
  image-rendering: pixelated;
  container-type: inline-size;
  margin: 0 0 8px;
}
.adv-skillpanel .adv-skill{
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
}
.skb-row{
  position: absolute;
  left: 9%; right: 9%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.skb-row1{ top: 7.30%;  height: 26.61%; }   
.skb-row2{ top: 36.48%; height: 30.90%; }   
.skb-slot{
  position: relative;
  flex: none;
  width: 10.5cqw; height: 10.5cqw;
  background: rgba(14,6,5,.88);
  border: 2px solid #6b4a2b;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 6px rgba(0,0,0,.9);
  overflow: hidden;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.skb-slot.empty::after{                     
  content: "+";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 5cqw;
  line-height: 1;
  color: rgba(212,144,96,.28);
}
.skb-slot:active{ transform: translateY(1px); }
.skb-icon{
  position: absolute;
  inset: 2px;
  background: center / 100% 100% no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
.skb-slot.no-mp .skb-icon{ filter: grayscale(.7) brightness(.5); }
.skb-slot .skill-cd-mask{ inset: 2px; }
.adv-skillpanel .hunt-controls{
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  pointer-events: none;
}
.adv-skillpanel .hunt-controls .pixel-btn{
  position: absolute;
  top: 73.39%; height: 20.60%;              
  padding: 0;
  pointer-events: auto;
  background: transparent;
  border: 0;
  border-radius: 2px;
  box-shadow: none;
  font-size: clamp(10px, 3.4cqw, 15px);
  color: #fff2d8;
  text-shadow: 1px 1px 0 #1a0a04, -1px 0 0 #1a0a04, 0 -1px 0 #1a0a04;
  white-space: nowrap;
}
.adv-skillpanel #advModeBtn{ left: 20.31%; width: 61.91%; letter-spacing:1px; }
.adv-skillpanel #advModeBtn.fight{            
  background: rgba(120,26,20,.45);
  color: #ffd9cf;
  box-shadow: inset 0 0 0 2px #e0604a, inset 0 0 12px rgba(255,90,60,.35);
  border-radius: 3px;
}
.adv-skillpanel #advModeBtn.fight:hover{ background: rgba(150,34,26,.5); }
.adv-skillpanel .hunt-controls .pixel-btn:hover{ background: rgba(255,225,180,.08); }
.adv-ico{ display:inline-block; vertical-align:-1px; margin-right:5px; }
.adv-ico.play{ width:0; height:0; border-style:solid; border-width:.42em 0 .42em .7em; border-color:transparent transparent transparent currentColor; }
.adv-ico.sword{ width:.5em; height:.85em; background:currentColor; clip-path:polygon(50% 0, 100% 26%, 62% 26%, 62% 62%, 86% 62%, 62% 74%, 62% 100%, 38% 100%, 38% 74%, 14% 62%, 38% 62%, 38% 26%, 0 26%); }
.adv-ico.pause{ width:.62em; height:.84em; border-left:.22em solid currentColor; border-right:.22em solid currentColor; box-sizing:border-box; }
.adv-skillpanel .hunt-controls .pixel-btn:active{
  background: rgba(0,0,0,.28);
  transform: translateY(1px);
  box-shadow: none;
}
.adv-skillpanel .hunt-controls .pixel-btn:disabled{
  color: rgba(255,242,216,.4);
  background: rgba(0,0,0,.3);
  cursor: default;
  transform: none;
}
.skb-sub .st-sub-box{ max-width: 380px; }
.skb-sub .st-sub-body{ container-type: inline-size; }
.skb-hint{
  text-align: center;
  font-size: 11px;
  color: #f0dfae;
  min-height: 2.8em;
  line-height: 1.4;
  padding: 0 4px 6px;
}
.skb-ed-grid{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 6px;
  background: rgba(0,0,0,.35);
  border: 2px solid var(--bronze-dk);
  border-radius: 3px;
}
.skb-ed-row{ display: flex; justify-content: space-evenly; }
.skb-sub .skb-slot{ width: 15cqw; height: 15cqw; max-width: 56px; max-height: 56px; }
.skb-sub .skb-slot.empty::after{ font-size: 18px; }
.skb-slot.sel{
  border-color: #ffd85e;
  box-shadow: inset 0 0 0 1px #000, 0 0 0 2px rgba(255,216,94,.45);
}
.skb-no{
  position: absolute;
  left: 2px; top: 0;
  font-size: 9px;
  color: rgba(240,223,174,.55);
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
}
.skb-tools{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 12px;
}
.skb-tools .pixel-btn{ font-size: 11px; padding: 6px 12px; }
.skb-tools .pixel-btn:disabled{ opacity: .4; cursor: default; }
.skb-list{ display: flex; flex-direction: column; gap: 6px; }
.skb-item{
  display: flex;
  align-items: center;
  gap: 10px;
  background: #3a2010;
  border: 2px solid var(--bronze-dk);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #1a0a04;
  padding: 6px 8px;
  cursor: pointer;
}
.skb-item.sel{ border-color: #ffd85e; }
.skb-item .skill-icon{ width: 34px; height: 34px; }
.skb-item .skill-icon:hover{ transform: none; }
.skb-item .rs-text{ flex: 1 1 auto; }
.skb-at{
  flex: none;
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
}
.skb-at.on{ color: #8affa2; }
.skb-foot{
  text-align: center;
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 10px;
}
body.act-open{ overflow:hidden; }
.act-root{
  position:fixed; inset:0; z-index:20000; display:none;
  background:#050302; overflow:hidden;
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  font-family:'Zpix','Press Start 2P','Courier New',monospace;
}
.act-root.show{ display:block; }
.act-root, .act-root *{ touch-action:none; -webkit-tap-highlight-color:transparent; } 
.act-screen{ position:absolute; left:50%; top:50%; transform-origin:50% 50%; overflow:hidden; }
.act-stage{
  position:absolute; left:50%; top:50%; width:640px; height:360px;
  transform-origin:50% 50%; overflow:hidden; background:#1a0f08;
  image-rendering:pixelated;
}
.act-world{ position:absolute; left:0; top:0; height:360px; will-change:transform; }
.act-bg{
  position:absolute; left:0; top:0; height:360px;
  background-repeat:no-repeat; background-size:auto 100%;
  image-rendering:pixelated;
}
.act-ents, .act-fx{ position:absolute; left:0; top:0; width:0; height:0; }
.act-fx{ z-index:1000; }
.act-ent{ position:absolute; left:0; top:0; width:0; height:0; will-change:transform; }
.act-shadow{
  position:absolute; left:0; top:0; width:calc(58px * var(--act-sh-s, 1)); height:calc(14px * var(--act-sh-s, 1));
  background-image:var(--act-sh-img, radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 60%, rgba(0,0,0,0) 72%));
  background-size:100% 100%; background-repeat:no-repeat;
  opacity:var(--act-sh-a, .5); image-rendering:pixelated; pointer-events:none;
}
.act-body{ position:absolute; left:0; top:0; width:0; height:0; transform-origin:0 0; }
.act-herobox{
  position:absolute; width:200px; height:145px;
  background-repeat:no-repeat; image-rendering:pixelated;
}
.act-herobox.charging{ animation:actCharge .26s ease-in-out infinite alternate; }
@keyframes actCharge{ from{ filter:drop-shadow(0 0 2px #ffcc33) brightness(1.1); } to{ filter:drop-shadow(0 0 7px #ff9a00) brightness(1.45); } }
.act-herobox.hurtflash{ animation:actHurt .22s steps(2) 1; }
@keyframes actHurt{ 0%{ filter:brightness(3) sepia(1) hue-rotate(-40deg) saturate(6); } 100%{ filter:none; } }
.act-herobox.healflash{ animation:actHeal .5s ease-out 1; }
@keyframes actHeal{ 0%{ filter:drop-shadow(0 0 8px #6dff8a) brightness(1.5); } 100%{ filter:none; } }
.act-herobox.reviveflash{ animation:actRevive .9s ease-out 1; }
@keyframes actRevive{ 0%,40%{ filter:drop-shadow(0 0 10px #ffe08a) brightness(1.8); } 100%{ filter:none; } }
.act-hero-ent.iframe .act-body{ animation:actBlink .12s steps(2) infinite; }
@keyframes actBlink{ 50%{ opacity:.35; } }
.act-mobspr{
  position:absolute; background-repeat:no-repeat; background-size:contain; image-rendering:pixelated;
}
.act-mobspr.hurt{ animation:actMobHurt .16s steps(2) 1; }
@keyframes actMobHurt{ 0%{ filter:brightness(4); } 100%{ filter:none; } }
.act-mob-ent.windup .act-mobspr{ animation:actWindup .09s linear infinite; }
@keyframes actWindup{
  0%{ transform:translateX(-1.5px); filter:drop-shadow(0 0 3px #ff2a1a) sepia(.6) saturate(4) hue-rotate(-30deg); }
  100%{ transform:translateX(1.5px); filter:drop-shadow(0 0 6px #ff2a1a) sepia(.6) saturate(4) hue-rotate(-30deg); }
}
.act-body.lunge .act-mobspr{ animation:actLunge .2s ease-out 1; }
@keyframes actLunge{ 40%{ transform:translateX(-14px); } 100%{ transform:none; } }
.act-mob-ent.dead{ animation:actDie .7s ease-in forwards; }
@keyframes actDie{ 0%{ opacity:1; filter:brightness(2); } 30%{ filter:none; } 100%{ opacity:0; } }
.act-mob-ent.dead .act-mobtag{ display:none; }
.act-mob-ent.has-anim.dead{ animation:actDieAnim var(--die-ms, 1s) linear forwards; }
@keyframes actDieAnim{ 0%{ opacity:1; filter:brightness(1.8); } 6%{ filter:none; } 75%{ opacity:1; } 100%{ opacity:0; } }
.act-ghostbox{ opacity:.82; filter:drop-shadow(0 0 3px #7fd0ff) drop-shadow(0 0 6px rgba(80,160,255,.55)) saturate(.55) brightness(1.08); }
.act-ghost-ent.hunting .act-ghostbox{ filter:drop-shadow(0 0 3px #ff5a5a) drop-shadow(0 0 7px rgba(255,40,40,.6)) saturate(.6) brightness(1.05); }
.act-ghostbox.hurt{ animation:actMobHurt .16s steps(2) 1; }
.act-mob-ent.windup .act-ghostbox{ animation:actGhostWindup .09s linear infinite; }
@keyframes actGhostWindup{ 0%{ transform:translateX(-1.5px); } 100%{ transform:translateX(1.5px); } }
.act-body.lunge .act-ghostbox{ animation:actLunge .2s ease-out 1; }
.act-ghosttag .n{ color:#bfe6ff; }
.act-ghost-ent.hunting .act-ghosttag .n{ color:#ff9a9a; }
.act-ghosttag .hpb{ width:48px; opacity:1; }
.act-ghosttag .hpb i{ background:linear-gradient(#9ad8ff, #2c6fb3); }
.pixel-btn.pvp-on{ color:#ffd0d0; border-color:#b33; }
.set-hint.pvp-evil{ color:#ff8a8a; }
.act-mobtag{
  position:absolute; left:0; top:0; white-space:nowrap; text-align:center; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.act-mobtag .n{ font-size:9px; color:#fff2d8; text-shadow:1px 1px 0 #000, -1px 0 0 #000; }
.act-mobtag .n.hard{ color:#ff8a70; }
.act-mobtag .hpb{ width:40px; height:4px; background:#200; border:1px solid #000; display:block; opacity:0; }
.act-mobtag.hurt .hpb{ opacity:1; }
.act-mobtag .hpb i{ display:block; height:100%; background:linear-gradient(#ff6b5a, #b31d12); }
.act-fximg{ position:absolute; image-rendering:pixelated; pointer-events:none; --fx-flip:1; }
.act-coin{ position:absolute; left:0; top:0; image-rendering:pixelated; pointer-events:none; z-index:5; will-change:transform; }
.act-fximg.fx-slash{ animation:actSlash linear forwards; }
@keyframes actSlash{ 0%{ opacity:1; transform:scaleX(var(--fx-flip)) scale(.6); } 100%{ opacity:0; transform:scaleX(var(--fx-flip)) scale(1.15); } }
.act-fximg.fx-heavy{ animation:actHeavy ease-out forwards; filter:drop-shadow(0 0 6px #ffb020) drop-shadow(0 0 2px #fff) brightness(1.3); }
@keyframes actHeavy{
  0%{ opacity:1; transform:scaleX(var(--fx-flip)) rotate(-25deg) scale(.5); }
  45%{ opacity:1; transform:scaleX(var(--fx-flip)) rotate(8deg) scale(1.15); }
  100%{ opacity:0; transform:scaleX(var(--fx-flip)) rotate(15deg) scale(1.3); }
}
.act-fximg.fx-blood{ animation:actBlood ease-out forwards; }
@keyframes actBlood{ 0%{ opacity:1; transform:scale(.5); } 100%{ opacity:0; transform:scale(1.4); } }
.act-ring{
  position:absolute; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%;
  border:3px solid #ffd060; box-shadow:0 0 8px #ff9a00; pointer-events:none;
  animation:actRing .4s ease-out forwards;
}
.act-ring.ring-r{ border-color:#ffb49a; box-shadow:0 0 8px rgba(255,60,40,.85), 0 0 3px #fff; } 
.act-fxsheet.fx-red{ filter:drop-shadow(0 0 2px rgba(255,230,220,.9)) drop-shadow(0 0 7px rgba(255,40,30,.7)); } 
@keyframes actRing{ 0%{ opacity:1; transform:scale(calc(var(--s) * 1)); } 100%{ opacity:0; transform:scale(calc(var(--s) * 7)); } }
.act-fxsheet{ position:absolute; pointer-events:none; image-rendering:pixelated; background-repeat:no-repeat; background-position:0 0;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.9)) drop-shadow(0 0 6px rgba(200,205,215,.55)); } 
.act-aura{ position:absolute; left:0; top:0; width:0; height:0; pointer-events:none; }
.act-aura i, .act-aura b{ position:absolute; display:block; image-rendering:pixelated; background-repeat:no-repeat; }
.aura-fortitude .au-circle{
  width:calc(104px * var(--s)); height:calc(32.5px * var(--s)); left:calc(-52px * var(--s)); top:calc(-16px * var(--s));
  background-image:url("assets/effects/fx_fortitude_circle.png"); background-size:800% 100%; z-index:-1; opacity:0;
  filter:drop-shadow(0 0 4px #4fa8ff); animation:auCircle 2.6s ease-out forwards;
}
@keyframes auCircle{ 0%{ opacity:0; transform:scale(.3); } 12%{ opacity:1; transform:scale(1.08); } 20%{ transform:scale(1); } 75%{ opacity:.95; } 100%{ opacity:0; transform:scale(1.1); } }
.aura-fortitude .au-pulse{
  width:calc(34px * var(--s)); height:calc(10px * var(--s)); left:calc(-17px * var(--s)); top:calc(-5px * var(--s));
  border:2px solid #dff7ff; border-radius:50%; box-shadow:0 0 6px #4fa8ff, inset 0 0 4px #4fa8ff; z-index:-1; opacity:0;
  animation:auPulse .6s ease-out forwards;
}
.aura-fortitude .au-pulse.p2{ animation-delay:.42s; }
@keyframes auPulse{ 0%{ opacity:1; transform:scale(.5); } 100%{ opacity:0; transform:scale(3.6); } }
.aura-fortitude .au-streak{
  width:calc(72px * var(--s)); height:calc(120px * var(--s)); left:calc(-36px * var(--s)); top:calc(-122px * var(--s));
  background-image:url("assets/effects/fx_fortitude_streak.png"); background-size:800% 100%; z-index:-1; opacity:0;
  filter:drop-shadow(0 0 3px #4fa8ff); animation:auStreak 2.4s ease-out forwards;
}
@keyframes auStreak{ 0%{ opacity:0; } 10%{ opacity:1; } 60%{ opacity:.85; } 100%{ opacity:0; } }
.aura-fortitude .au-shield{
  width:calc(64px * var(--s)); height:calc(64px * var(--s)); left:calc(-32px * var(--s)); top:calc(-88px * var(--s));
  background-image:url("assets/effects/fx_fortitude_shield.png"); background-size:1600% 100%; z-index:3;
  filter:drop-shadow(0 0 2px #bfefff) drop-shadow(0 0 8px #3c8cff); animation:auShield 2.1s ease-in-out forwards;
}
@keyframes auShield{ 0%{ transform:translateY(6px); } 22%{ transform:translateY(0) scale(1.05); } 30%{ transform:scale(1); } 60%{ transform:translateY(-3px); } 100%{ transform:translateY(-10px); } }
.aura-fortitude .au-c{
  width:calc(3px * var(--s)); height:calc(3px * var(--s)); left:0; top:calc(-56px * var(--s));
  background:#dff7ff; box-shadow:0 0 4px #4fa8ff; z-index:4; opacity:0;
  animation:auConv .38s ease-in var(--d) forwards;
}
@keyframes auConv{ 0%{ opacity:0; transform:translate(calc(var(--dx) * var(--s)), calc(var(--dy) * var(--s))); } 30%{ opacity:1; } 100%{ opacity:.2; transform:translate(0, 0); } }
.aura-fortitude .au-b{
  width:calc(3px * var(--s)); height:calc(3px * var(--s)); left:0; top:calc(-56px * var(--s));
  background:#fff; box-shadow:0 0 4px #4fa8ff; z-index:4; opacity:0;
  animation:auBurst .55s ease-out .42s forwards;
}
@keyframes auBurst{ 0%{ opacity:1; transform:translate(0, 0); } 70%{ opacity:.9; } 100%{ opacity:0; transform:translate(calc(var(--dx) * var(--s)), calc(var(--dy) * var(--s))); } }
.aura-fortitude .au-p{
  width:calc(3px * var(--s)); height:calc(3px * var(--s)); left:calc(var(--x) * var(--s)); top:calc(-8px * var(--s));
  background:#dff7ff; box-shadow:0 0 4px #4fa8ff, 0 0 1px #fff; z-index:4; opacity:0;
  animation:auRise var(--t) ease-out var(--d) forwards;
}
.aura-fortitude .au-p.sp, .aura-fortitude .au-b.sp{
  width:calc(11px * var(--s)); height:calc(11px * var(--s)); margin:calc(-4px * var(--s)) 0 0 calc(-4px * var(--s));
  background:url("assets/effects/fx_sparkle.png") 0 0 / 100% 100% no-repeat; box-shadow:none; filter:drop-shadow(0 0 3px #6cc4ff);
}
@keyframes auRise{ 0%{ opacity:0; transform:translateY(0); } 15%{ opacity:1; } 70%{ opacity:.9; } 100%{ opacity:0; transform:translateY(calc(var(--h) * var(--s) * -1)); } }
.hero-side > .act-aura{ left:50%; top:100%; }
.hero-side{ isolation:isolate; } 
.hero-side.buff-glow{ animation:auBody 1s ease-out; }
.act-herobox.buff-glow{ animation:auBody 1s ease-out; }
@keyframes auBody{ 0%{ filter:brightness(1.9) drop-shadow(0 0 6px #7fd0ff); } 100%{ filter:none; } }
.act-proj{ position:absolute; left:0; top:0; width:48px; height:auto; image-rendering:pixelated; pointer-events:none; }
.act-proj.heavy{ width:72px; filter:drop-shadow(0 0 5px #ffb020) brightness(1.4); }
.act-float{
  position:absolute; transform:translate(-50%,-50%); white-space:nowrap; pointer-events:none;
  font-size:12px; color:#fff; text-shadow:1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  animation:actFloat .9s ease-out forwards;
}
@keyframes actFloat{ 0%{ opacity:0; margin-top:4px; } 12%{ opacity:1; margin-top:-6px; } 100%{ opacity:0; margin-top:-30px; } }
.act-float.dmg-heavy{ font-size:15px; color:#ffd060; }
.act-float.dmg-crit{ font-size:17px; color:#ff5a3a; }
.act-float.dmg-hero{ color:#ff6b6b; }
.act-float.miss, .act-float.info{ color:#cfc3ad; font-size:10px; }
.act-float.dodge{ color:#8fe3ff; font-size:12px; }
.act-float.heal{ color:#6dff8a; }
.act-float.gain{ color:#ffe08a; font-size:10px; }
.act-hud{ position:absolute; inset:0; pointer-events:none; z-index:2000; }
@keyframes actLow{ 50%{ filter:brightness(1.6) drop-shadow(0 0 4px #ff3b3b); } }
.act-hudbar{
  position:absolute; left:50%; bottom:0; width:440px; aspect-ratio:512 / 98; transform:translateX(-50%);
  background:url("assets/ui/act/hud_slots.png") 0 0 / 100% 100% no-repeat; image-rendering:pixelated; 
  pointer-events:none;
}
.act-orbbar{
  position:absolute; left:50%; bottom:0; width:440px; aspect-ratio:512 / 98; transform:translateX(-50%);
  background:url("assets/ui/act/hud_orbs.png") 0 0 / 100% 100% no-repeat; image-rendering:pixelated;
  pointer-events:none;
}
.act-hudbar.low ~ .act-orbbar .act-orb-hp{ animation:actLow .7s steps(2) infinite; }
.act-gauge{ position:absolute; }
.act-gauge.hp{ left:15.33%; top:30.15%; width:17.43%; height:21.1%; }   
.act-gauge.mp{ left:67.24%; top:30.15%; width:17.43%; height:21.1%; }   
.act-gauge.xp{ left:33.24%; top:78.9%;  width:33.72%; height:7.04%; }  
.act-gauge .drain{ position:absolute; top:0; bottom:0; width:0; display:block; overflow:hidden; transition:width .2s; }
.act-gauge.hp .drain, .act-gauge.xp .drain{ right:0; }   
.act-gauge.mp .drain{ left:0; }                          
.act-gauge .drain u{
  position:absolute; top:0; height:100%; background:rgba(16,6,9,.88);
  -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.act-gauge.hp, .act-gauge.mp, .act-gauge.xp{ container-type:inline-size; }  
.act-gauge.hp .drain u{ right:0; width:100cqw; -webkit-mask-image:url("assets/ui/act/gauge2_hp_mask.png"); mask-image:url("assets/ui/act/gauge2_hp_mask.png"); }
.act-gauge.mp .drain u{ left:0;  width:100cqw; -webkit-mask-image:url("assets/ui/act/gauge2_mp_mask.png"); mask-image:url("assets/ui/act/gauge2_mp_mask.png"); }
.act-gauge.xp .drain u{ right:0; width:100cqw; -webkit-mask-image:url("assets/ui/act/gauge2_xp_mask.png"); mask-image:url("assets/ui/act/gauge2_xp_mask.png"); }
.act-orbbar .act-orb{ top:21.11%; width:10.92%; height:57.29%; }          
.act-orbbar .act-orb-hp{ left:35.82%; }                                    
.act-orbbar .act-orb-mp{ left:53.64%; }                                    
.act-orbtxt{
  position:absolute; top:50%; transform:translate(-50%,-50%); font-size:9px; color:#fff; pointer-events:none;
  text-shadow:1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
.act-orbtxt.hp{ left:41.28%; }
.act-orbtxt.mp{ left:59.1%; }
.act-lv{ position:absolute; left:50%; top:61.2%; transform:translate(-50%,-50%); font-size:6px; line-height:1; white-space:nowrap; color:#ffe08a; text-shadow:1px 1px 0 #000; } 
.act-slot{
  position:absolute; width:5.5%; height:28.7%; border-radius:50%; pointer-events:auto; cursor:pointer;
  background-size:78%; background-position:center; background-repeat:no-repeat; image-rendering:pixelated;
}
.act-slot:active{ filter:brightness(1.4); }
.act-slot.empty{ filter:grayscale(1) brightness(.55); }
.act-slot.no-mp{ filter:brightness(.5) saturate(.6); }
.act-slot.cd::after{ content:""; position:absolute; inset:0; border-radius:50%; background:rgba(0,0,0,.55); }
.act-slot .q{ position:absolute; right:-1px; bottom:-2px; font-size:8px; color:#fff; text-shadow:1px 1px 0 #000, -1px 0 0 #000; }
.act-slot .k{ position:absolute; left:0; top:-3px; font-size:6px; color:#c9a878; text-shadow:1px 1px 0 #000; }
.act-slot .cdt{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:9px; color:#fff; text-shadow:1px 1px 0 #000; z-index:1; }
.act-buffs{ position:absolute; left:8px; top:8px; display:flex; gap:4px; }
.act-buff{
  position:relative; width:22px; height:22px; background-size:contain; background-repeat:no-repeat; image-rendering:pixelated;
  background-color:rgba(20,10,4,.6); border:1px solid #8b5a2b; box-shadow:inset 0 0 0 1px #1a0a04;
}
.act-buff b{ position:absolute; right:-1px; bottom:-3px; font-size:8px; font-weight:normal; color:#fff; text-shadow:1px 1px 0 #000, -1px 0 0 #000; }
.act-buff.ending{ animation:actLow .5s steps(2) infinite; }
.act-hud-r{
  position:absolute; right:44px; top:8px; text-align:right; font-size:10px; color:#ffe9b0;
  text-shadow:1px 1px 0 #000; line-height:1.6;
}
.act-help{
  position:absolute; left:50%; top:40px; transform:translateX(-50%); text-align:center;
  font-size:9px; line-height:1.6; color:#fff2d8; background:rgba(0,0,0,.55); padding:4px 10px;
  border:1px solid rgba(255,230,180,.3); transition:opacity .8s; white-space:nowrap;
}
.act-help.hide{ opacity:0; }
.act-banner{
  position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); z-index:2100;
  font-size:22px; color:#ffe08a; letter-spacing:2px; white-space:nowrap; opacity:0; pointer-events:none;
  text-shadow:2px 2px 0 #5a1a00, -1px -1px 0 #000, 0 0 12px #ff9a00;
}
.act-banner.show{ animation:actBanner 1.8s ease-out forwards; }
@keyframes actBanner{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.6); } 15%{ opacity:1; transform:translate(-50%,-50%) scale(1.1); } 25%{ transform:translate(-50%,-50%) scale(1); } 80%{ opacity:1; } 100%{ opacity:0; } }
.act-ctrl{ position:absolute; inset:0; z-index:3000; pointer-events:none; }
.act-joyzone{ position:absolute; left:0; bottom:0; width:calc(var(--joy-size) + 48px); height:calc(var(--joy-size) + 90px); pointer-events:auto; touch-action:none; }
.act-ctrl{ --joy-size:124px; --atk-size:92px; --skill-size:62px; }
.act-joy{
  position:absolute; left:22px; bottom:18px; width:var(--joy-size); height:var(--joy-size);
  background:url("assets/ui/act/btn_ring.png") center / 100% 100% no-repeat; image-rendering:pixelated;
  opacity:.45;                          
}
.act-joyzone:active .act-joy{ opacity:.7; }
.act-knob{
  position:absolute; left:50%; top:50%; width:42%; height:42%; margin:-21% 0 0 -21%; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #d49060, #5a3820); border:2px solid #1a0a04; opacity:.85;
}
.act-btns{ position:absolute; right:14px; bottom:14px; width:170px; height:160px; pointer-events:none; }
.act-btn{
  position:absolute; pointer-events:auto; touch-action:none; cursor:pointer; padding:0; border:0;
  background:url("assets/ui/act/btn_ring.png") center / 100% 100% no-repeat; image-rendering:pixelated;
  font-family:inherit; color:#fff2d8;
}
.act-btn.on{ transform:scale(.92); filter:brightness(1.3); }
.act-a{ right:0; bottom:0; width:var(--atk-size); height:var(--atk-size); }
.act-b{ right:calc(var(--atk-size) * .78); bottom:calc(var(--atk-size) * .82); width:var(--skill-size); height:var(--skill-size); }
.act-a .sword{
  position:absolute; left:50%; top:50%; width:22%; height:62%; transform:translate(-50%,-50%) rotate(45deg);
  background:linear-gradient(#6b3b1c, #3a1d0c) center bottom / 22% 20% no-repeat;          
  filter:drop-shadow(1px 1px 0 #000) drop-shadow(-1px -1px 0 #000);
}
.act-a .sword::before{                                                                         
  content:""; position:absolute; left:28%; top:0; width:44%; height:74%;
  background:linear-gradient(90deg, #f4f8ff 0 50%, #9aa8ba 50% 100%);
  clip-path:polygon(50% 0, 100% 14%, 100% 100%, 0 100%, 0 14%);
}
.act-a .sword::after{                                                                          
  content:""; position:absolute; left:-10%; top:73%; width:120%; height:8%;
  background:linear-gradient(#ffe08a, #c9a961 60%, #7a5a2a); border-radius:1px;
}
.act-b .ico{ position:absolute; left:22%; top:22%; width:56%; height:56%; border-radius:50%; background-size:cover; background-position:center; image-rendering:pixelated; }
.act-b .cdt{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; text-shadow:1px 1px 0 #000, -1px -1px 0 #000; z-index:1; }
.act-b.cd .ico, .act-b.no-mp .ico{ filter:brightness(.4) grayscale(.7); }
.act-pause{
  position:absolute; right:8px; top:8px; width:30px; height:30px; pointer-events:auto;
  font-family:inherit; font-size:10px; color:#fff2d8; cursor:pointer;
  background:linear-gradient(var(--bronze, #a06840), var(--bronze-dk, #5a3820));
  border:2px solid var(--bronze-hi, #d49060); box-shadow:inset 0 0 0 1px #1a0a04;
}
@media (hover:hover) and (pointer:fine){ .act-joyzone, .act-btns{ display:none; } }
.act-menu{
  position:absolute; inset:0; z-index:4000; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6);
}
.act-menu.show{ display:flex; }
.act-death{
  position:absolute; inset:0; z-index:4500; display:flex; align-items:center; justify-content:center;
  background:#000; opacity:0; pointer-events:none; transition:opacity 2s ease;
}
.act-death.show{ opacity:1; pointer-events:auto; }
.act-death-quote{
  color:#d8b978; font-size:14px; text-align:center; padding:0 24px; line-height:1.6;
  text-shadow:1px 1px 2px #000; opacity:0; transition:opacity 1s ease;
}
.act-death-quote.show{ opacity:1; }
.act-panel{
  background:linear-gradient(#3a2414, #1e1108); border:3px solid var(--bronze-hi, #d49060);
  box-shadow:inset 0 0 0 2px #1a0a04, 0 6px 24px rgba(0,0,0,.7);
  padding:12px 14px; color:var(--text, #f5e4be); font-size:10px; max-height:94%; overflow:auto;
}
.act-menu-panel{ width:min(760px, 96%); }
.act-menu-head{ font-size:13px; color:#ffe08a; margin-bottom:8px; }
.act-menu-head small{ font-size:9px; color:var(--text-dim, #c9a878); }
.act-menu-cols{ display:flex; gap:14px; flex-wrap:wrap; }
.act-menu-col{ flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:7px; }
.act-row{ display:flex; flex-wrap:wrap; gap:6px; }
.act-stats{ background:rgba(0,0,0,.35); border:1px solid #5a3820; padding:6px 8px; line-height:1.8; font-size:9px; }
.act-stats b{ color:#ffe08a; font-weight:normal; }
.act-sub{ color:#ffcf8a; font-size:10px; border-bottom:1px solid #5a3820; padding-bottom:2px; margin-top:2px; }
.act-chars{ display:grid; grid-template-columns:repeat(2, 1fr); gap:4px; }
.act-chip{
  font-family:inherit; font-size:9px; padding:5px 7px; cursor:pointer; color:#fff2d8;
  background:#2a180c; border:1px solid #8b5a2b; border-radius:2px; text-align:left;
}
.act-chip.on{ background:#6e3a14; border-color:#ffcf8a; color:#ffe9b0; }
.act-chip.danger{ border-color:#c0392b; color:#ff9a8a; }
.act-slider{ display:flex; align-items:center; gap:6px; font-size:9px; }
.act-pick-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:5px; margin:6px 0 8px; max-height:220px; overflow:auto; }
.act-pick{
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 3px; cursor:pointer;
  font-family:inherit; color:#fff2d8; background:#2a180c; border:1px solid #8b5a2b; border-radius:2px;
}
.act-pick i{ width:28px; height:28px; background-size:contain; background-repeat:no-repeat; background-position:center; image-rendering:pixelated; }
.act-pick b{ font-size:9px; font-weight:normal; text-align:center; }
.act-pick small{ font-size:8px; color:#c9a878; }
.act-pick.clear{ border-color:#c0392b; }
.act-slider input{ flex:1; accent-color:#d49060; }
.act-slider span{ width:34px; text-align:right; color:#ffe08a; }
.act-note{ font-size:8px; color:var(--text-dim, #c9a878); line-height:1.5; }
.act-herobox.act-fall{ animation:actFall 2s ease-out forwards; transform-origin:50% 100%; } 
@keyframes actFall{ 0%{ transform:rotate(0deg); opacity:1; } 60%{ transform:rotate(85deg) translateY(6px); opacity:1; } 100%{ transform:rotate(85deg) translateY(6px); opacity:.35; } }
.act-mob-ent.boss .act-mobtag .n{ color:#ffd76b; font-size:10px; }
.act-mob-ent.boss .act-mobtag .hpb{ width:70px; height:5px; }
.act-tp-beam{ top:0 !important; height:360px !important; z-index:1500; }
.act-mapname{ color:#cfe8ff; font-size:9px; }
.act-buffs{ display:flex; gap:3px; margin-top:4px; min-height:0; }
.act-buff{ position:relative; width:16px; height:16px; background-size:contain; background-repeat:no-repeat; image-rendering:pixelated; border:1px solid #5a3820; }
.act-buff b{ position:absolute; right:-2px; bottom:-3px; font-size:7px; font-weight:normal; color:#fff; text-shadow:1px 1px 0 #000; }
.act-buff.ending{ animation:actLow .5s steps(2) infinite; }
.act-skills, .act-quick{
  position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:3px; pointer-events:auto;
}
.act-skills{ top:8px; }
.act-quick{ top:34px; }
.act-skslot, .act-qslot{
  position:relative; width:22px; height:22px; cursor:pointer;
  background-color:rgba(20,10,4,.72); background-size:contain; background-repeat:no-repeat; background-position:center;
  image-rendering:pixelated; border:1px solid var(--bronze, #a06840); box-shadow:inset 0 0 0 1px #1a0a04;
}
.act-qslot{ width:24px; height:24px; }
.act-skslot.locked{ filter:grayscale(1) brightness(.55); cursor:not-allowed; }
.act-skslot.no-mp{ filter:brightness(.5) saturate(.6); }
.act-skslot.cd::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.55); }
.act-skslot .cdt{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:9px; color:#fff; text-shadow:1px 1px 0 #000; z-index:1; }
.act-qslot .q{ position:absolute; right:1px; bottom:0; font-size:8px; color:#fff; text-shadow:1px 1px 0 #000; }
.act-qslot .k{ position:absolute; left:1px; top:0; font-size:6px; color:#c9a878; text-shadow:1px 1px 0 #000; }
.act-qslot.empty{ filter:grayscale(1) brightness(.5); }
.act-note.warn{ color:#ff9a8a; }
.act-floor{ position:absolute; left:0; top:0; width:0; height:0; z-index:0; } 
.act-quake-zone{
  position:absolute; box-sizing:border-box; overflow:hidden; pointer-events:none;
  border:2px solid #ff2a1a;
  background:rgba(190,16,8,.16);
  box-shadow:inset 0 0 0 2px rgba(40,0,0,.45), 0 0 10px rgba(255,40,20,.55);
  animation:actZoneBlink .44s steps(2) infinite;
}
.act-quake-zone .fill{ 
  position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(0);
  background:rgba(255,52,24,.34);
  border-right:3px solid #ffd0a0; box-sizing:border-box;
}
.act-quake-zone.rev .fill{ transform-origin:100% 50%; border-right:0; border-left:3px solid #ffd0a0; }
.act-quake-zone .arrows{ 
  position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, transparent 0 12px, rgba(255,120,80,.30) 12px 18px);
  background-size:40px 100%;
  animation:actZoneFlow .5s steps(4) infinite;
}
.act-quake-zone.rev .arrows{ background:repeating-linear-gradient(65deg, transparent 0 12px, rgba(255,120,80,.30) 12px 18px); background-size:40px 100%; animation-direction:reverse; }
.act-quake-zone.soon{ animation-duration:.16s; border-color:#ff6a3a; } 
.act-quake-zone.go{ animation:actZoneGo .26s steps(3) forwards; }
.act-quake-zone.out{ opacity:0; transition:opacity .24s steps(3); }
@keyframes actZoneBlink{ 0%{ border-color:#ff2a1a; } 100%{ border-color:#7a0a04; } }
@keyframes actZoneFlow{ from{ background-position:0 0; } to{ background-position:40px 0; } }
@keyframes actZoneGo{ 0%{ background:rgba(255,240,220,.7); } 100%{ background:rgba(190,16,8,.10); } }
.act-mob-ent.casting .act-mobspr{
  transform-origin:50% 100%;
  animation:actQuakeCharge .3s steps(3) infinite;
}
@keyframes actQuakeCharge{
  0%  { transform:translate(-2px,-4px) scale(1,1.05); filter:drop-shadow(0 0 4px #ff2a1a) sepia(.5) saturate(3) hue-rotate(-25deg); }
  50% { transform:translate(2px,-7px)  scale(1,1.08); filter:drop-shadow(0 0 9px #ff2a1a) sepia(.6) saturate(4) hue-rotate(-30deg) brightness(1.15); }
  100%{ transform:translate(-1px,-5px) scale(1,1.06); filter:drop-shadow(0 0 5px #ff2a1a) sepia(.5) saturate(3) hue-rotate(-25deg); }
}
.act-mob-ent.slam .act-mobspr{ transform-origin:50% 100%; animation:actSlam .38s steps(4) 1; }
@keyframes actSlam{
  0%  { transform:translateY(-12px) scale(.96,1.1); }
  25% { transform:translateY(3px)   scale(1.16,.82); filter:brightness(1.6); }
  60% { transform:translateY(0)     scale(1.05,.95); }
  100%{ transform:none; }
}
.act-mob-ent.dazed .act-mobtag::before{ 
  content:"✦ ✧ ✦"; font-size:10px; color:#ffe36b; letter-spacing:2px;
  text-shadow:1px 1px 0 #000; animation:actDazed .5s steps(2) infinite;
}
@keyframes actDazed{ 0%{ transform:translateX(-3px); } 100%{ transform:translateX(3px); } }
.act-float.skill-shout{
  font-size:17px; color:#ff4a24; letter-spacing:1px;
  text-shadow:2px 2px 0 #2a0000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  animation:actShout .9s steps(6) forwards;
}
@keyframes actShout{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(2); } 20%{ opacity:1; transform:translate(-50%,-50%) scale(1); } 80%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,-70%); } }
.act-herobox.launched{ animation:actLaunch .42s steps(6) 1; }
.act-herobox.hurtflash.launched{ animation:actHurt .22s steps(2) 1, actLaunch .42s steps(6) 1; }
@keyframes actLaunch{ 0%{ transform:none; } 35%{ transform:translateY(-22px) rotate(-6deg); } 70%{ transform:translateY(-6px); } 100%{ transform:none; } }
.act-crack{
  position:absolute; height:18px; pointer-events:none; transform-origin:0 50%;
  background:#140b06;
  animation:actCrack 1.9s steps(10) forwards;
}
.act-crack::after{ content:""; position:absolute; inset:6px 0; background:#ff8a2a; box-shadow:0 0 6px #ff5a10; animation:actCrackGlow 1.1s steps(6) forwards; }
.act-crack.c0, .act-crack.c0::after{ clip-path:polygon(0 50%,12% 28%,22% 56%,35% 18%,48% 60%,60% 32%,72% 70%,85% 38%,100% 52%,100% 74%,85% 58%,72% 92%,60% 54%,48% 82%,35% 40%,22% 78%,12% 50%,0 72%); }
.act-crack.c1, .act-crack.c1::after{ clip-path:polygon(0 40%,10% 62%,25% 30%,38% 58%,50% 20%,63% 50%,78% 26%,90% 60%,100% 44%,100% 66%,90% 82%,78% 48%,63% 72%,50% 42%,38% 80%,25% 52%,10% 84%,0 62%); }
.act-crack.c2, .act-crack.c2::after{ clip-path:polygon(0 56%,15% 36%,28% 64%,42% 30%,55% 52%,68% 22%,80% 58%,92% 34%,100% 48%,100% 70%,92% 56%,80% 80%,68% 44%,55% 74%,42% 52%,28% 86%,15% 58%,0 78%); }
@keyframes actCrack{
  0%  { transform:scaleX(0); opacity:1; }
  8%  { transform:scaleX(var(--fl,1)); opacity:1; }
  70% { transform:scaleX(var(--fl,1)); opacity:.9; }
  100%{ transform:scaleX(var(--fl,1)); opacity:0; }
}
@keyframes actCrackGlow{ 0%{ opacity:1; background:#fff0b0; } 30%{ background:#ff8a2a; } 100%{ opacity:0; background:#801800; } }
.act-slab{
  position:absolute; width:20px; height:10px; margin:-9px 0 0 -10px; pointer-events:none;
  background:linear-gradient(#8a7258 0 40%, #5a4632 40% 100%);
  border:2px solid #1a110b; box-sizing:content-box;
  animation:actSlab .7s steps(7) forwards;
}
@keyframes actSlab{
  0%  { transform:translateY(6px) scaleY(.2); opacity:1; }
  22% { transform:translateY(-14px) rotate(-14deg) scaleY(1); }
  55% { transform:translateY(-3px) rotate(9deg); opacity:1; }
  100%{ transform:translateY(3px) rotate(4deg); opacity:0; }
}
.act-rock-x{ position:absolute; width:0; height:0; pointer-events:none; animation:actRockX var(--ms,600ms) linear forwards; }
.act-rock-y{ position:absolute; left:0; top:0; animation:actRockY var(--ms,600ms) forwards; }
.act-rock{
  position:absolute; left:-6px; top:-6px; width:3px; height:3px; background:transparent;
  transform-origin:6px 6px;
  box-shadow:3px 0px 0 #1c130c, 6px 0px 0 #1c130c, 0px 3px 0 #1c130c, 3px 3px 0 #c9b08a, 6px 3px 0 #a08766, 9px 3px 0 #1c130c, 0px 6px 0 #1c130c, 3px 6px 0 #75604a, 6px 6px 0 #4a3a2c, 9px 6px 0 #1c130c, 3px 9px 0 #1c130c, 6px 9px 0 #1c130c;
  animation:actRockSpin .36s steps(4) infinite;
}
.act-rock.big{
  left:-7px; top:-7px; transform-origin:7.5px 7.5px;
  box-shadow:3px 0px 0 #1c130c, 6px 0px 0 #1c130c, 9px 0px 0 #1c130c, 0px 3px 0 #1c130c, 3px 3px 0 #c9b08a, 6px 3px 0 #a08766, 9px 3px 0 #75604a, 12px 3px 0 #1c130c, 0px 6px 0 #1c130c, 3px 6px 0 #a08766, 6px 6px 0 #75604a, 9px 6px 0 #4a3a2c, 12px 6px 0 #1c130c, 0px 9px 0 #1c130c, 3px 9px 0 #75604a, 6px 9px 0 #4a3a2c, 9px 9px 0 #4a3a2c, 12px 9px 0 #1c130c, 3px 12px 0 #1c130c, 6px 12px 0 #1c130c, 9px 12px 0 #1c130c;
  animation-duration:.5s;
}
@keyframes actRockX{ from{ transform:translateX(0); } to{ transform:translateX(var(--dx,0)); } }
@keyframes actRockY{
  0%  { transform:translateY(0); animation-timing-function:cubic-bezier(.2,.7,.4,1); }
  45% { transform:translateY(var(--up,-60px)); animation-timing-function:cubic-bezier(.6,0,.9,.4); }
  92% { transform:translateY(0); opacity:1; }
  100%{ transform:translateY(-3px); opacity:0; }
}
@keyframes actRockSpin{ to{ transform:rotate(360deg); } }
.act-dust{
  position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px; pointer-events:none;
  background:radial-gradient(circle, #d8c6a4 0 38%, #9c8a6e 39% 58%, transparent 59%);
  animation:actDust .6s steps(5) forwards;
}
@keyframes actDust{ 0%{ transform:scale(.4); opacity:.95; } 100%{ transform:translateY(-20px) scale(2.4); opacity:0; } }
.act-btns{ left:0; top:0; right:0; bottom:0; width:auto; height:auto; }
.act-a, .act-b, .act-d{ right:auto; bottom:auto; }
.act-d .dash{ position:absolute; left:50%; top:50%; width:46%; height:34%; transform:translate(-44%,-50%); filter:drop-shadow(1px 1px 0 #000); }
.act-d .dash::before, .act-d .dash::after{
  content:""; position:absolute; top:12%; width:40%; height:76%; box-sizing:border-box;
  border:solid #bff2ff; border-width:4px 4px 0 0; transform:rotate(45deg);
}
.act-d .dash::before{ left:0; opacity:.6; }
.act-d .dash::after{ left:38%; }
.act-d .pip{
  position:absolute; inset:-6px; border-radius:50%; pointer-events:none; --f:1;
  background:conic-gradient(from var(--a), var(--c, #3a86a8) 0 calc(var(--f) * 168deg), rgba(0,0,0,.55) 0 168deg, transparent 0);
  -webkit-mask:radial-gradient(circle closest-side, transparent 0 80%, #000 81% 99%, transparent 100%);
          mask:radial-gradient(circle closest-side, transparent 0 80%, #000 81% 99%, transparent 100%);
}
.act-d .pip.p0{ --a:186deg; }
.act-d .pip.p1{ --a:6deg; }
.act-d .pip.full{ --c:#6fe3ff; filter:drop-shadow(0 0 3px #6fe3ff); }
.act-d.empty .dash{ opacity:.35; }
.act-d.deny{ animation:actDeny .26s steps(4) 1; }
@keyframes actDeny{ 25%{ transform:translateX(-3px); } 75%{ transform:translateX(3px); } }
.act-hero-ent.dashing .act-herobox{ filter:brightness(1.35) drop-shadow(0 0 4px #7fe8ff); }
.act-afterimg{
  position:absolute; width:200px; height:145px; background-repeat:no-repeat; image-rendering:pixelated; pointer-events:none;
  opacity:.55; filter:sepia(1) hue-rotate(150deg) saturate(3) brightness(1.2);
  animation:actAfter .28s steps(4) forwards;
}
@keyframes actAfter{ to{ opacity:0; } }
.act-stun{ position:absolute; left:0; top:-120px; width:0; height:0; pointer-events:none; display:none; }
.act-hero-ent.stunned .act-stun{ display:block; }
.act-stun i{
  position:absolute; left:-1px; top:-1px; width:3px; height:3px; background:#fffbe0;
  box-shadow:3px 0 #ffd23a, -3px 0 #ffd23a, 0 3px #ffd23a, 0 -3px #ffd23a,
             6px 0 #5a3a00, -6px 0 #5a3a00, 0 6px #5a3a00, 0 -6px #5a3a00;
  animation:actOrbit .8s infinite;
}
.act-stun i:nth-child(2){ animation-delay:-.267s; }
.act-stun i:nth-child(3){ animation-delay:-.533s; }
@keyframes actOrbit{
  0%   { transform:translate(22px,0)    scale(1);   opacity:1;   animation-timing-function:steps(1); }
  12.5%{ transform:translate(15px,5px)  scale(1.1); opacity:1;   animation-timing-function:steps(1); }
  25%  { transform:translate(0,7px)     scale(1.2); opacity:1;   animation-timing-function:steps(1); }
  37.5%{ transform:translate(-15px,5px) scale(1.1); opacity:1;   animation-timing-function:steps(1); }
  50%  { transform:translate(-22px,0)   scale(1);   opacity:1;   animation-timing-function:steps(1); }
  62.5%{ transform:translate(-15px,-5px) scale(.8); opacity:.6;  animation-timing-function:steps(1); }
  75%  { transform:translate(0,-7px)    scale(.7);  opacity:.5;  animation-timing-function:steps(1); }
  87.5%{ transform:translate(15px,-5px) scale(.8);  opacity:.6;  animation-timing-function:steps(1); }
  100% { transform:translate(22px,0)    scale(1);   opacity:1; }
}
.act-stun.mash{ margin-left:3px; }
.act-hero-ent.stunned .act-herobox{ filter:saturate(.6) brightness(.9); }
.act-float.stun-hint{ color:#ffe36b; font-size:11px; }
.act-fps{ color:#9dff9d; font-size:9px; }
.act-fps.bad{ color:#ff7a6a; }
.act-root.ctl-edit .act-joyzone, .act-root.ctl-edit .act-btns{ display:block !important; } 
.act-root.ctl-edit .act-pause{ display:none; }
.act-root.ctl-edit .act-ctrl{ background:rgba(0,0,0,.35); pointer-events:auto; }
.act-root.ctl-edit [data-ctl]{ cursor:grab; }
.act-root.ctl-edit .act-btn, .act-root.ctl-edit .act-joyzone .act-joy{
  outline:2px dashed rgba(255,230,160,.6); outline-offset:3px; border-radius:50%; opacity:1;
}
.act-root.ctl-edit .act-joyzone{ outline:1px dotted rgba(255,230,160,.25); }
.act-root.ctl-edit .act-btn.sel, .act-root.ctl-edit .act-joyzone.sel .act-joy{ outline:3px solid #ffd000; }
.act-ctlbar{
  display:none; position:absolute; left:50%; top:10px; transform:translateX(-50%); z-index:3500;
  flex-direction:column; align-items:center; gap:6px; padding:8px 12px;
  background:rgba(20,10,4,.92); border:2px solid #a06840; box-shadow:inset 0 0 0 1px #1a0a04;
  color:#fff2d8; font-size:10px; white-space:nowrap;
}
.act-root.ctl-edit .act-ctlbar{ display:flex; }
.act-ctlbar .r{ display:flex; align-items:center; gap:8px; }
.act-ctlbar b{ color:#ffe08a; font-weight:normal; min-width:3em; text-align:right; }
.act-ctlbar .pixel-btn{ font-size:10px; padding:4px 10px; }
.act-ctlbar #actCtlPct{ min-width:3.2em; text-align:center; }
.act-slowfx{ position:absolute; inset:0; pointer-events:none; z-index:1500; display:none;
  background:radial-gradient(ellipse at center, rgba(60,100,160,.10) 40%, rgba(20,40,90,.55) 100%); }
.act-stage.bullet .act-slowfx{ display:block; animation:actSlowIn .25s steps(3) 1; }
@keyframes actSlowIn{ 0%{ background-color:rgba(200,235,255,.55); } 100%{ background-color:transparent; } }
.act-float.perfect{ font-size:16px; color:#8ff0ff; letter-spacing:1px;
  text-shadow:2px 2px 0 #062a40, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 8px #3fd0ff; }
.act-mobtag .arb{ display:block; width:70px; height:3px; background:#111820; border:1px solid #000; }
.act-mobtag .arb i{ display:block; height:100%; background:linear-gradient(#f2f6ff, #8fa6c6); }
.act-mobtag.armor-broken .arb{ animation:actArmorBlink .3s steps(2) infinite; }
@keyframes actArmorBlink{ 50%{ background:#5a1010; } }
.act-mobtag.armor-refill .arb i{ animation:actArmorRefill .6s steps(6) 1; }
@keyframes actArmorRefill{ from{ width:0 !important; filter:brightness(2); } to{ filter:none; } }
.act-float.dmg-armor{ color:#b8c8dc; }
.act-float.break-shout{ font-size:18px; color:#ffe36b; letter-spacing:1px;
  text-shadow:2px 2px 0 #5a2a00, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 10px #ffb020;
  animation:actShout .9s steps(6) forwards; }
.act-mob-ent.broken .act-mobspr{ transform-origin:50% 100%; animation:actBrokenWobble .5s steps(2) infinite; filter:grayscale(.45) brightness(.85); }
@keyframes actBrokenWobble{ 0%{ transform:rotate(-2deg); } 100%{ transform:rotate(2deg); } }
.act-break-flash{ position:absolute; width:90px; height:90px; margin:-45px 0 0 -45px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, #fff 0 30%, rgba(255,240,180,.8) 31% 55%, transparent 56%);
  animation:actBreakFlash .34s steps(4) forwards; }
@keyframes actBreakFlash{ 0%{ transform:scale(.3); opacity:1; } 100%{ transform:scale(1.6); opacity:0; } }
.act-break-ring{ position:absolute; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; pointer-events:none;
  border:4px solid #ffd76b; box-shadow:0 0 10px #ffb020, inset 0 0 6px #fff3c0; opacity:0;
  animation:actBreakRing .5s steps(6) forwards; }
@keyframes actBreakRing{ 0%{ transform:scale(.4); opacity:1; } 100%{ transform:scale(4.5); opacity:0; border-width:1px; } }
.act-shard{
  position:absolute; left:-6px; top:-4px; width:3px; height:3px; background:transparent; transform-origin:6px 4px;
  box-shadow:0 0 0 #1a1a22, 3px 0 0 #1a1a22, 6px 0 0 #1a1a22, 9px 0 0 #1a1a22,
             0 3px 0 #1a1a22, 3px 3px 0 #ffffff, 6px 3px 0 #c9d4e4, 9px 3px 0 #1a1a22,
             3px 6px 0 #1a1a22, 6px 6px 0 #7f90a8, 9px 6px 0 #1a1a22, 6px 9px 0 #1a1a22;
  animation:actRockSpin .3s steps(4) infinite;
}
.act-shard.gold{
  box-shadow:0 0 0 #2a1600, 3px 0 0 #2a1600, 6px 0 0 #2a1600, 9px 0 0 #2a1600,
             0 3px 0 #2a1600, 3px 3px 0 #fff3c0, 6px 3px 0 #ffd76b, 9px 3px 0 #2a1600,
             3px 6px 0 #2a1600, 6px 6px 0 #c98a20, 9px 6px 0 #2a1600, 6px 9px 0 #2a1600;
}
.act-mob-ent.enraged .act-body{ filter:drop-shadow(0 0 4px rgba(255,40,20,.85)); }
.act-mob-ent.roaring .act-mobspr{ transform-origin:50% 100%; animation:actRoar .14s steps(2) infinite; }
@keyframes actRoar{
  0%  { transform:translateX(-3px) scale(1.08); filter:sepia(.6) saturate(4) hue-rotate(-30deg) brightness(1.2); }
  100%{ transform:translateX(3px)  scale(1.1);  filter:sepia(.6) saturate(4) hue-rotate(-30deg) brightness(1.4); }
}
.act-roar-ring{ position:absolute; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; pointer-events:none; opacity:0;
  border:3px solid #ff3a1a; box-shadow:0 0 12px #ff2a0a;
  animation:actRoarRing .8s steps(8) forwards; }
@keyframes actRoarRing{ 0%{ transform:scale(.5); opacity:1; } 100%{ transform:scale(8); opacity:0; } }
.act-stomp-zone{
  position:absolute; box-sizing:border-box; border-radius:50%; pointer-events:none; overflow:hidden;
  border:2px solid #ff2a1a; background:rgba(190,16,8,.16);
  box-shadow:0 0 10px rgba(255,40,20,.55), inset 0 0 0 2px rgba(40,0,0,.45);
  animation:actZoneBlink .44s steps(2) infinite;
}
.act-stomp-zone .fill{ position:absolute; inset:0; border-radius:50%; transform:scale(0);
  background:radial-gradient(ellipse at center, rgba(255,60,30,.25) 0 60%, rgba(255,90,50,.45) 61% 100%);
  box-shadow:inset 0 0 0 2px #ffd0a0; }
.act-stomp-zone.soon{ animation-duration:.16s; border-color:#ff6a3a; }
.act-stomp-zone.go{ animation:actZoneGo .26s steps(3) forwards; }
.act-mob-ent.stomp-charge .act-mobspr{ transform-origin:50% 100%; animation:actStompCharge .9s steps(9) forwards; filter:drop-shadow(0 0 5px #ff2a1a); }
@keyframes actStompCharge{
  0%  { transform:none; }
  55% { transform:translateY(4px) scale(1.1,.86); }
  100%{ transform:translateY(-22px) scale(.94,1.1); }
}
.act-mob-ent.stomp-slam .act-mobspr{ transform-origin:50% 100%; animation:actStompSlam .46s steps(5) 1; }
@keyframes actStompSlam{
  0%  { transform:translateY(-22px) scale(.94,1.1); }
  20% { transform:translateY(4px) scale(1.22,.76); filter:brightness(1.7); }
  60% { transform:translateY(0) scale(1.06,.94); }
  100%{ transform:none; }
}
.act-shock{ position:absolute; box-sizing:border-box; border-radius:50%; pointer-events:none; opacity:0;
  border:3px solid #ffe0a8; box-shadow:0 0 8px #ff9a30, inset 0 0 6px rgba(255,160,60,.6);
  animation:actShock .6s steps(6) forwards; }
@keyframes actShock{ 0%{ transform:scale(.15); opacity:1; } 100%{ transform:scale(1.15); opacity:0; border-width:1px; } }
.act-stomp-flash{ position:absolute; width:120px; height:40px; margin:-20px 0 0 -60px; border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse, #fff4d0 0 30%, rgba(255,170,60,.7) 31% 60%, transparent 61%);
  animation:actBreakFlash .4s steps(4) forwards; }
.act-crack-rot{ position:absolute; width:0; height:0; pointer-events:none; transform:scaleY(.38) rotate(var(--ang, 0deg)); }
.act-dust{ animation-fill-mode:both; } 
.tab.locked{ opacity:.5; }
.tab.locked::after{ content:"🔒"; font-size:8px; margin-left:2px; vertical-align:top; }
.shop-overlay{
  position:fixed; inset:0; z-index:21000; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.72); padding:10px; box-sizing:border-box;
}
.shop-ov-box{ position:relative; width:min(520px, 100%); max-height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.shop-ov-box .shop-frame{ margin:0; }
.shop-ov-x{ position:absolute; right:6px; top:6px; z-index:5; }
.shop-overlay .npc-select{ display:none; } 
.shop-overlay.rot{ inset:auto; left:50%; top:50%; width:100vh; height:100vw; transform:translate(-50%,-50%) rotate(90deg); }
.mini-toast{ z-index:22000; } 
.arena.village-view{ background-size:auto 100%; background-repeat:no-repeat; animation:none; }
.vshop-btn{
  position:absolute; right:8px; bottom:10px; z-index:7; width:52px; height:52px; padding:0; cursor:pointer;
  border-radius:50%; border:3px solid #d49060; font-family:inherit;
  background:radial-gradient(circle at 35% 30%, #6a4226, #2a160a 75%);
  box-shadow:0 0 0 2px #1a0a04, 0 3px 0 rgba(0,0,0,.55), inset 0 0 6px rgba(255,210,140,.25);
  animation:vshopGlow 1.6s ease-in-out infinite;
}
.vshop-btn i{ position:absolute; left:50%; top:44%; width:34px; height:34px; transform:translate(-50%,-50%);
  background:url("assets/ui/tab_shop.png") center / contain no-repeat; image-rendering:pixelated; }
.vshop-btn span{ position:absolute; left:50%; bottom:-3px; transform:translateX(-50%); white-space:nowrap;
  font-size:9px; color:#ffe08a; background:#1a0a04; border:1px solid #8b5a2b; padding:0 4px; line-height:1.4; }
.vshop-btn:active{ transform:translateY(1px); filter:brightness(1.2); }
@keyframes vshopGlow{ 50%{ box-shadow:0 0 0 2px #1a0a04, 0 3px 0 rgba(0,0,0,.55), 0 0 10px rgba(255,210,120,.6); } }
.vjoke-bubble{
  position:absolute; left:18%; top:18%; z-index:8; max-width:60%; padding:4px 8px; pointer-events:none;
  font-size:10px; color:#1a0a04; background:#fff4d8; border:2px solid #1a0a04; box-shadow:0 2px 0 rgba(0,0,0,.4);
  animation:vjokeIn .25s steps(3) 1;
}
@keyframes vjokeIn{ from{ transform:translateY(6px); opacity:0; } to{ transform:none; opacity:1; } }
.shop-overlay.pick .npc-select{ display:flex; } 
.act-npc{ cursor:pointer; }
.act-npcimg{ position:absolute; left:0; bottom:0; width:auto; transform:translateX(-50%); image-rendering:auto; pointer-events:auto;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.act-npctag{ position:absolute; left:0; transform:translateX(-50%); white-space:nowrap; text-align:center; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; line-height:1.35; }
.act-npctag .n{ font-size:10px; color:#ffe9a8; text-shadow:1px 1px 0 #000, -1px 0 0 #000; }
.act-npctag .t{ font-size:8px; color:#e8d8b8; text-shadow:1px 1px 0 #000; }
.act-npcask{
  position:absolute; left:0; transform:translateX(-50%); display:none; white-space:nowrap; pointer-events:none;
  font-size:10px; color:#1a0a04; background:#ffe08a; border:2px solid #1a0a04; padding:1px 6px;
  box-shadow:0 2px 0 rgba(0,0,0,.5); animation:actAskBob .5s steps(2) infinite;
}
.act-npc.near .act-npcask{ display:block; }
.act-npc.near .act-npcimg{ filter:drop-shadow(0 0 3px #ffe08a) drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
@keyframes actAskBob{ 50%{ margin-top:-3px; } }
.shop-ov-box{ padding-top:24px; box-sizing:border-box; } 
.shop-ov-x{ top:34px; }
.wm-overlay.over-act{ z-index:21000; }
.wm-overlay.over-act.rot{ inset:auto; left:50%; top:50%; width:100vh; height:100vw; transform:translate(-50%,-50%) rotate(90deg); }
.wm-overlay.over-act{ padding:8px; box-sizing:border-box; }
.wm-overlay.over-act .wm-inner{ height:100%; max-height:100%; width:auto; max-width:none; box-sizing:border-box; align-items:center; }
.wm-overlay.over-act .wm-canvas{ flex:1 1 auto; min-height:0; height:100%; width:auto; }
html:has(body.act-open), body.act-open{ background:#050302; overscroll-behavior:none; }
body.act-open .wrap{ visibility:hidden; }
.act-root, .act-root *{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.act-root img{ -webkit-user-drag:none; }
.pxm-overlay{ z-index:22500; }
.mini-toast{ z-index:23000; }
.shop-overlay.rot ~ .pxm-overlay{ inset:auto; left:50%; top:50%; width:100vh; height:100vw; transform:translate(-50%,-50%) rotate(90deg); }
#netVeil{
  position:fixed; inset:0; z-index:99999;
  background:rgba(8,6,4,.92);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
#netVeil .net-veil-box{
  max-width:340px; width:100%; text-align:center;
  border:3px solid #5a4a2d; background:#141018;
  box-shadow:0 0 0 3px #0a0806, 0 8px 24px rgba(0,0,0,.6);
  padding:22px 18px;
}
#netVeil .net-veil-title{
  font-size:16px; color:#e8c87a; letter-spacing:1px; margin-bottom:10px;
  text-shadow:2px 2px 0 #0a0806;
}
#netVeil .net-veil-msg{
  font-size:12px; color:#b9ac95; line-height:1.7; margin-bottom:16px;
}
#netVeil .pixel-btn{ min-width:120px; }
.dg-tabs{ display:flex; gap:6px; margin:4px 0 10px; }
.dg-tab{
  flex:1; font-family:inherit; font-size:12px; letter-spacing:2px; padding:7px 0;
  background:#1a0f08; color:var(--text-dim); border:2px solid #4a2e18; border-radius:3px; cursor:pointer;
}
.dg-tab.active{ background:linear-gradient(var(--bronze), var(--bronze-dk)); color:#fff2d8; border-color:var(--bronze-hi); }
.dg-pane{ display:none; }
.dg-pane.active{ display:block; }
.dg-list{ display:flex; flex-direction:column; gap:10px; }
.dg-card{
  display:flex; gap:10px; align-items:stretch; padding:8px;
  background:rgba(0,0,0,.35); border:2px solid #5a3a20; border-radius:4px;
}
.dg-art{
  flex:0 0 42%; aspect-ratio:1/1; background-size:contain; background-repeat:no-repeat; background-position:center bottom;
  background-color:#140a06; border:2px solid #2a170c; image-rendering:pixelated;
}
.dg-info{ flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; }
.dg-name{ font-size:15px; color:var(--gold-hi); letter-spacing:2px; }
.dg-tag{ font-size:10px; color:var(--text-dim); }
.dg-test{ color:#ffb080; border:1px solid #a0502a; padding:0 4px; margin-left:4px; }
.dg-desc{ font-size:11px; line-height:1.6; }
.dg-note{ font-size:10px; color:#ffb080; }
.dg-go{ margin-top:auto; }
.dg-go:disabled{ filter:grayscale(1); opacity:.6; cursor:not-allowed; }
.dg-why{ font-size:10px; color:#e07a6a; }
.act-root.raid .act-hud .act-hud-r, .act-root.raid .act-hud .act-help{ display:none; }
.act-root.raid .act-hud .act-buffs{ top:auto; bottom:calc(var(--hudbar-h, 90px) + 6px); left:50%; transform:translateX(-50%); } 
.raid-ping{ position:absolute; right:52px; top:36px; font-size:9px; color:#9fe6a0; text-align:right; line-height:1.4; }
.raid-ping small{ font-size:7px; color:#c9d6c9; }
.raid-ping.mid{ color:#ffd76a; } .raid-ping.bad{ color:#ff7a6a; }
.act-root.raid .act-slot.raid-off{ opacity:.35; filter:grayscale(1); }
.act-root.raid img{ -webkit-user-drag:none; -webkit-touch-callout:none; }
.raid-dragon, .raid-dragon *, .raid-ally, .raid-ally *{ pointer-events:none; }
.raid-hud{ position:absolute; inset:0; z-index:1500; pointer-events:none; font-size:10px; color:#fff2d8;
  text-shadow:1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.raid-hud button{ pointer-events:auto; }
.raid-boss{ position:absolute; left:50%; top:8px; transform:translateX(-50%); width:320px; text-align:center; }
.raid-boss-name{ font-size:12px; letter-spacing:2px; margin-bottom:3px; color:#ffe08a; }
.raid-test{ font-size:9px; color:#ffb080; border:1px solid #a0502a; padding:0 3px; margin-left:4px; }
.raid-bar{ position:relative; height:10px; background:#1a0605; border:2px solid #000; box-shadow:0 0 0 1px #6b3a1a; }
.raid-bar i{ display:block; height:100%; width:100%; background:linear-gradient(#ff6b5a, #9a1a10); transition:width .15s steps(4); }
.raid-bar b{ position:absolute; inset:0; font-weight:normal; font-size:8px; line-height:10px; }
.raid-boss.enraged .raid-bar i{ background:linear-gradient(#ff3a2a, #6a0000); animation:raidEnrage .5s steps(2) infinite; }
.raid-boss.enraged .raid-boss-name{ color:#ff6a50; }
@keyframes raidEnrage{ 50%{ filter:brightness(1.5); } }
.raid-me{ position:absolute; left:8px; top:8px; width:150px; }
.raid-me-name{ margin-bottom:2px; }
.raid-me-bar i{ background:linear-gradient(#6dff8a, #1f8a3a); }
.raid-me-sk{ margin-top:3px; font-size:9px; color:#bfe6ff; }
.raid-party{ position:absolute; left:8px; top:8px; width:72px; display:flex; flex-direction:column; gap:2px; } 
.raid-party .rp{ position:relative; height:9px; background:#101810; border:1px solid #000; }
.raid-party .rp span{ position:relative; z-index:1; font-size:7px; padding-left:2px; line-height:9px; white-space:nowrap; overflow:hidden; display:block; text-overflow:ellipsis; }
.raid-party .rp i{ position:absolute; left:0; top:0; bottom:0; background:linear-gradient(#4a9a5a, #1f5a2a); }
.raid-party .rp.dc{ opacity:.45; }
.raid-party .rp.down i{ background:#555; }
.raid-exit{ position:absolute; right:52px; top:8px; font-family:inherit; font-size:10px; padding:4px 8px;
  background:#3a1a10; color:#ffd9d2; border:2px solid #a83a2c; border-radius:3px; cursor:pointer; }
.raid-veil, .raid-res{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); pointer-events:auto; }
.raid-veil.show, .raid-res.show{ display:flex; }
.rv-box, .rr-box{ min-width:220px; max-width:360px; padding:12px 16px; background:#1a0f08; border:2px solid var(--bronze-hi, #c9a961);
  display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; }
.rv-t, .rr-t{ font-size:14px; color:#ffe08a; letter-spacing:2px; }
.rv-m, .rr-note{ font-size:10px; color:#cfc3ad; line-height:1.6; }
.rr-rows{ width:100%; display:flex; flex-direction:column; gap:3px; }
.rr-row{ display:grid; grid-template-columns:1fr auto 48px; gap:8px; font-size:10px; text-align:left; }
.rr-row span:nth-child(n+2){ text-align:right; }
.rr-row.me{ color:#ffe08a; }
.raid-ally.me .raid-tag .n{ color:#ffe08a; }
.raid-ally .raid-tag .hpb{ opacity:1; }
.raid-ally .raid-tag .hpb i{ background:linear-gradient(#6dff8a, #1f8a3a); }
.raid-ally.dc{ opacity:.45; }
.raid-ally.down .act-herobox{ filter:grayscale(1) brightness(.7); }
.raid-dragon .raid-dbody{ position:absolute; left:0; top:0; width:0; height:0; transform-origin:0 0; }
.raid-dimg{ position:absolute; image-rendering:pixelated; background-repeat:no-repeat; transform-origin:50% 100%; }
.raid-dragon.flip .raid-dbody{ transform:scaleX(-1); }
.raid-dshadow{ width:380px !important; height:32px !important; transform:translate(calc(-50% + 105px),-50%); } 
.raid-dragon.flip .raid-dshadow{ transform:translate(calc(-50% - 105px),-50%); }
@keyframes raidBreath{ 0%,100%{ transform:scale(1, 1); } 50%{ transform:scale(1.015, 1.03); } }
.raid-dragon.casting .raid-dimg{ filter:drop-shadow(0 0 6px #ff7a2a) brightness(1.15); }   
@keyframes raidCast{ 0%{ transform:translateX(-2px); } 100%{ transform:translateX(2px); } }
.raid-dragon.enraged .raid-dimg{ filter:drop-shadow(0 0 5px #ff2a1a) saturate(1.4) hue-rotate(-12deg); }
.raid-dragon.enraged.casting .raid-dimg{ filter:drop-shadow(0 0 9px #ff2a1a) brightness(1.3); }
.raid-dimg.hitflash{ filter:brightness(2.2) !important; }
.raid-dragon.slam .raid-dimg{ animation:raidSlam .38s ease-out 1; }
@keyframes raidSlam{ 0%{ transform:translateY(-10px) scaleY(1.04); } 40%{ transform:translateY(4px) scaleY(.95); } 100%{ transform:none; } }
.raid-dragon.dead .raid-dimg{ animation:raidDown 1.6s ease-in forwards; }
@keyframes raidDown{ 0%{ transform:none; opacity:1; } 100%{ transform:translateY(30px) scaleY(.85); opacity:0; filter:grayscale(1); } }
.raid-claw-fx{ position:absolute; width:220px; height:120px; margin:-60px 0 0 -110px; pointer-events:none;
  background:url("assets/effects/fx_slash_wide.png") center/contain no-repeat; image-rendering:pixelated;
  transform:scaleX(-1); animation:raidClaw .36s steps(4) forwards; }
.raid-claw-fx.r{ transform:none; }
@keyframes raidClaw{ 0%{ opacity:0; } 25%{ opacity:1; } 100%{ opacity:0; } }
.raid-dragon .raid-dbody{ transition:opacity .15s; }
.raid-dragon.see-through .raid-dbody{ opacity:.4; }
.raid-stars{ display:none; pointer-events:none; }
.raid-stars.on{ display:block; }
.raid-rock-shadow{ position:absolute; border-radius:50%; transform:translate(-50%,-50%) scale(.55); opacity:.25;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.8) 0%, rgba(40,10,4,.6) 50%, rgba(255,80,40,.28) 70%, rgba(0,0,0,0) 72%);
  box-shadow:0 0 0 3px rgba(255,100,60,.85) inset, 0 0 6px rgba(255,80,40,.6); }  
.raid-rock-shadow.soon{ animation:raidRockSoon .16s steps(2) infinite; }
@keyframes raidRockSoon{ 50%{ box-shadow:0 0 0 4px rgba(255,220,120,1) inset, 0 0 10px rgba(255,120,60,.9); } }
.act-pause{ display:flex; align-items:center; justify-content:center; padding:0; }
.act-pause svg{ width:18px; height:18px; display:block; pointer-events:none; }
.act-exit{ right:46px; }
.act-exit.arm{ border-color:#ffe14a; box-shadow:inset 0 0 0 1px #1a0a04, 0 0 6px #ffe14a; }
.act-hud-r{ right:82px; } 
.story-ov{
  --sw: min(92vw, 430px, calc((100vh - 76px) / 2.26));
  position:fixed; inset:0; z-index:21500; display:flex; align-items:center; justify-content:center;
  background:#07070d; overflow:hidden; cursor:pointer;
  font-family:"Zpix","DotGothic16","PingFang TC","Microsoft JhengHei",sans-serif;
  transition:opacity .7s ease; -webkit-user-select:none; user-select:none; touch-action:none;
}
@supports (height: 100dvh){ .story-ov{ --sw: min(92vw, 430px, calc((100dvh - 76px) / 2.26)); } }
.story-ov.out{ opacity:0; pointer-events:none; }
.story-ov::before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1.6px) 0 0/7px 7px; }
.story-page{ position:relative; width:var(--sw); display:flex; flex-direction:column; gap:calc(var(--sw) * .028); }
.story-ov.s2 .story-page{ animation:storyShake .55s linear .42s; } 
.story-panel{
  position:relative; overflow:hidden; background:#000; opacity:0; visibility:hidden;
  border:3px solid #f1ead8; outline:3px solid #000; box-shadow:5px 6px 0 rgba(0,0,0,.75);
}
.story-panel img{ display:block; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; -webkit-user-drag:none; pointer-events:none; }
.story-panel.p1{ aspect-ratio:572/306; transform:rotate(-.8deg); }
.story-panel.p2{ aspect-ratio:566/309; transform:rotate(.9deg); width:104%; margin-left:-2%; z-index:2; }
.story-panel.p3{ aspect-ratio:358/392; }
.story-panel.p3 img{ object-position:50% 78%; }
.story-ov.s1 .p1{ visibility:visible; animation:storyIn1 5s ease-out forwards; } 
.story-ov.s1 .p1 img{ animation:storySink 18s ease-out forwards; }
.story-water{ position:absolute; inset:-20%; pointer-events:none; mix-blend-mode:screen; opacity:.5;
  background:repeating-linear-gradient(115deg, transparent 0 22px, rgba(120,170,255,.10) 22px 30px, transparent 30px 61px);
  animation:storyWater 7s linear infinite; }
.story-rays{ position:absolute; inset:-30% -45% 0 -45%; pointer-events:none; mix-blend-mode:screen; transform-origin:50% 0; filter:blur(8px);
  background:
    linear-gradient(101deg, transparent 20%, rgba(150,200,255,.30) 27%, transparent 35%, transparent 45%, rgba(175,220,255,.40) 50%, transparent 58%, transparent 68%, rgba(140,190,255,.24) 73%, transparent 80%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.5) 55%, transparent 96%); mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.5) 55%, transparent 96%);
  animation:storyRays 9s ease-in-out infinite alternate, storyRaysGlow 5.4s ease-in-out infinite alternate; }
.story-rays.b{ inset:-30% -45% 0 -45%; filter:blur(14px); opacity:.7;
  background:linear-gradient(94deg, transparent 32%, rgba(200,230,255,.22) 38%, transparent 46%, transparent 60%, rgba(190,225,255,.2) 65%, transparent 72%);
  animation:storyRaysB 11s ease-in-out -3s infinite alternate, storyRaysGlow 7s ease-in-out -2s infinite alternate; }
.story-ov.s2 .story-rays{ display:none; }
.story-bubbles{ position:absolute; inset:0; pointer-events:none; }
.story-bubbles i{ position:absolute; bottom:-12px; width:var(--s); height:var(--s); border:2px solid rgba(200,225,255,.75); border-radius:50%;
  opacity:0; animation:storyBubble var(--t) linear var(--d) infinite; }
.story-ov.s2 .p1{ filter:brightness(.55) saturate(.7); transition:filter .3s; }
.story-ov.s2 .story-water, .story-ov.s2 .story-bubbles{ display:none; }
.story-ov.s2 .p2{ visibility:visible; animation:storyIn2 .7s cubic-bezier(.16,1.1,.3,1) forwards; } 
.story-lines{ position:absolute; inset:-60%; pointer-events:none; opacity:.55; mix-blend-mode:screen;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.0) 0 3deg, rgba(255,255,255,.55) 3deg 3.6deg, rgba(255,255,255,0) 3.6deg 8deg);
  -webkit-mask-image:radial-gradient(circle, transparent 0 26%, #000 46%); mask-image:radial-gradient(circle, transparent 0 26%, #000 46%);
  animation:storyLines .45s steps(3) infinite; }
.story-bang{ position:absolute; right:5%; top:4%; font:900 calc(var(--sw) * .13)/1 "Press Start 2P","Zpix",sans-serif; color:#ffe45c; letter-spacing:-2px;
  text-shadow:3px 3px 0 #000, -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 0 3px 0 #000, 0 -3px 0 #000, 3px 0 0 #000, -3px 0 0 #000, 6px 6px 0 rgba(0,0,0,.6); transform:rotate(12deg) scale(0); }
.story-ov.s2 .story-bang{ animation:storyBang .35s cubic-bezier(.2,1.6,.4,1) .75s forwards; }
.story-flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
.story-white{ position:absolute; inset:0; z-index:20; background:#fff; opacity:0; pointer-events:none; transition:opacity var(--white-in, 1100ms) ease-in; }
.story-ov.white .story-white{ opacity:1; }
.story-ov.whited{ background:#fff; }
.story-ov.whited > :not(.story-white){ display:none; }
.story-ov.whited::before{ display:none; }
.story-ov.s2 .story-flash{ animation:storyFlash .7s ease-out .36s; }
.story-ov.s3 .p3{ visibility:visible; animation:storyIn3 3.2s ease-out forwards; } 
.story-ov.s3 .p3 img{ animation:storyPan 12s ease-out forwards; }
.story-sun{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(105deg, transparent 30%, rgba(255,236,170,.35) 48%, transparent 62%); background-size:260% 100%; background-position:120% 0; }
.story-ov.s3 .story-sun{ animation:storySun 3.4s ease-out 2.6s forwards; }
.story-ov.s3 .p2{ filter:brightness(.6) saturate(.7); transition:filter .5s; }
.story-ov.s3 .story-lines{ animation:none; opacity:.25; }
.story-ov.leave .p1{ animation:storyOut1 1.9s ease-in forwards; }
.story-ov.leave .p2{ animation:storyOut2 1.9s ease-in .28s forwards; }
.story-ov.leave .story-bang, .story-ov.leave .story-lines{ display:none; }
.story-hint{ position:absolute; left:0; right:0; bottom:calc(10px + env(safe-area-inset-bottom)); text-align:center; font-size:13px; letter-spacing:3px;
  color:#f3d98a; text-shadow:2px 2px 0 #000; opacity:0; pointer-events:none; }
.story-ov.hint .story-hint{ animation:storyBlink 1.2s steps(2) infinite; opacity:1; }
.story-skip{ position:absolute; right:10px; top:calc(10px + env(safe-area-inset-top)); z-index:5; padding:6px 10px; font:inherit; font-size:11px; letter-spacing:1px;
  color:#b9b29c; background:rgba(0,0,0,.55); border:1px solid #5d5848; border-radius:3px; cursor:pointer; }
@media (orientation: landscape){
  .story-ov{ --sw: min(calc((100vh - 64px) / 1.17), 48vw, 560px); }
  .story-page{ width:auto; display:grid; grid-template-columns:var(--sw) calc(var(--sw) * .84); grid-template-rows:auto auto; gap:calc(var(--sw) * .03) calc(var(--sw) * .045); }
  .story-panel.p2{ width:100%; margin-left:0; }
  .story-panel.p3{ grid-column:2; grid-row:1 / span 2; aspect-ratio:auto; height:100%; transform:rotate(.6deg); }
  .story-panel.p3 img{ object-position:50% 60%; }
  .story-ov.s3 .p3{ animation-name:storyIn3L; }
}
@keyframes storyIn1{ from{ opacity:0; transform:translateX(-22%) rotate(-.8deg); } to{ opacity:1; transform:translateX(0) rotate(-.8deg); } }
@keyframes storyIn2{ from{ opacity:0; transform:translateX(115%) rotate(4deg); } 35%{ opacity:1; } to{ opacity:1; transform:translateX(0) rotate(.9deg); } }
@keyframes storyOut1{ from{ opacity:1; transform:translateX(0) rotate(-.8deg); } to{ opacity:0; transform:translateX(-45%) rotate(-.8deg); } }
@keyframes storyOut2{ from{ opacity:1; transform:translateX(0) rotate(.9deg); } to{ opacity:0; transform:translateX(-45%) rotate(.9deg); } }
@keyframes storyIn3{ from{ opacity:0; transform:translateX(-18%); } to{ opacity:1; transform:translateX(0); } }
@keyframes storyIn3L{ from{ opacity:0; transform:translateX(-18%) rotate(.6deg); } to{ opacity:1; transform:translateX(0) rotate(.6deg); } }
@keyframes storySink{ from{ transform:scale(1.16) translateY(-4%); } to{ transform:scale(1.02) translateY(1%); } }
@keyframes storyRays{ from{ transform:skewX(-7deg) translateX(-3%); } to{ transform:skewX(7deg) translateX(3%); } }
@keyframes storyRaysB{ from{ transform:skewX(6deg) translateX(3%); } to{ transform:skewX(-6deg) translateX(-3%); } }
@keyframes storyRaysGlow{ from{ opacity:.45; } to{ opacity:1; } }
@keyframes storyWater{ from{ transform:translateX(0); } to{ transform:translateX(61px); } }
@keyframes storyBubble{ 0%{ transform:translate(0,0); opacity:0; } 12%{ opacity:.9; } 50%{ transform:translate(6px,-90px); } 100%{ transform:translate(-4px,-220px); opacity:0; } }
@keyframes storyShake{ 0%,100%{ transform:translate(0,0); } 12%{ transform:translate(-9px,5px); } 26%{ transform:translate(8px,-6px); } 40%{ transform:translate(-6px,-4px); } 55%{ transform:translate(5px,4px); } 72%{ transform:translate(-3px,2px); } 88%{ transform:translate(2px,-1px); } }
@keyframes storyLines{ to{ transform:rotate(8deg); } }
@keyframes storyBang{ to{ transform:rotate(12deg) scale(1); } }
@keyframes storyFlash{ 0%{ opacity:0; } 12%{ opacity:.95; } 100%{ opacity:0; } }
@keyframes storyPan{ from{ transform:scale(1.12) translateY(3%); } to{ transform:scale(1) translateY(0); } }
@keyframes storySun{ to{ background-position:-60% 0; } }
@keyframes storyBlink{ 0%{ opacity:1; } 100%{ opacity:.25; } }
@media (prefers-reduced-motion: reduce){
  .story-ov.s2 .story-page, .story-lines, .story-water, .story-bubbles i, .story-rays{ animation:none !important; }
}
.story-dlg{
  --dh: 390px;
  --fh: min(calc(var(--dh) * .4), 300px);
  position:absolute; inset:0; z-index:4200; cursor:pointer; opacity:0; transition:opacity .25s ease;
  background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,0) 100%);
  font-family:"Zpix","DotGothic16","PingFang TC","Microsoft JhengHei",sans-serif; -webkit-user-select:none; user-select:none;
}
.story-dlg.show{ opacity:1; }
.story-dlg-row{
  position:absolute; left:50%; bottom:max(5%, env(safe-area-inset-bottom)); transform:translateX(-50%);
  display:flex; align-items:flex-end; gap:calc(var(--fh) * .07);
  width:min(92%, calc(var(--fh) * 4.6)); box-sizing:border-box;
}
.story-dlg-face{
  flex:0 0 auto; height:var(--fh); width:auto; display:block;
  image-rendering:pixelated; pointer-events:none; -webkit-user-drag:none;
  filter:drop-shadow(3px 3px 0 rgba(0,0,0,.45));
  transform:translateX(-18px); opacity:0; transition:transform .32s ease-out, opacity .32s ease-out;
}
.story-dlg.show .story-dlg-face{ transform:none; opacity:1; }
.story-dlg-box{
  position:relative; flex:1 1 0; min-width:0; min-height:calc(var(--fh) * .66); margin-bottom:3px;
  padding:calc(var(--fh) * .13) calc(var(--fh) * .12) calc(var(--fh) * .15); box-sizing:border-box;
  color:#f5e4be; background:linear-gradient(#1b1626f5, #0d0b16f5);
  border:3px solid #c9a961; outline:3px solid #150d05; box-shadow:inset 0 0 0 2px #3a2a12, 0 5px 0 rgba(0,0,0,.5);
  transform:translateY(12px); transition:transform .25s ease-out;
}
.story-dlg.show .story-dlg-box{ transform:none; }
.story-dlg-name{
  position:absolute; left:12px; top:0; transform:translateY(-62%); padding:.3em .9em; font-size:clamp(11px, calc(var(--fh) * .085), 18px); letter-spacing:2px; white-space:nowrap;
  color:#2a1500; background:linear-gradient(#f3d98a, #c9a961); border:2px solid #150d05; box-shadow:0 2px 0 #150d05;
}
.story-dlg-text{ font-size:clamp(14px, calc(var(--fh) * .105), 24px); line-height:1.7; letter-spacing:1px; text-shadow:1px 1px 0 #000; min-height:3.4em; word-break:break-all; }
.story-dlg-next{ position:absolute; right:12px; bottom:5px; font-size:clamp(11px, calc(var(--fh) * .08), 16px); color:#f3d98a; opacity:0; }
.story-dlg.done .story-dlg-next{ opacity:1; animation:storyDlgNext .7s steps(2) infinite; }
.story-dlg-page{ position:absolute; right:calc(12px + 2em); bottom:6px; font-size:clamp(9px, calc(var(--fh) * .065), 13px); color:#8d8468; }
.story-dlg.noface .story-dlg-face{ display:none; }
@keyframes storyDlgNext{ 0%{ transform:translateY(0); } 100%{ transform:translateY(3px); } }
.story-dlg.free{ position:fixed; z-index:21400; --fh: min(calc(var(--dh) * .3), 220px); }
.story-dlg.free .story-dlg-row{ width:94%; }
.demo-login{ position:fixed; inset:0; z-index:2400; display:none; align-items:center; justify-content:center;
  padding:24px 20px calc(24px + env(safe-area-inset-bottom)); overflow-y:auto;
  background:radial-gradient(ellipse at 50% 30%, #2a1020 0%, #0a0a14 70%); color:#e8dcc0; }
.demo-login .dl-box{ width:100%; max-width:340px; display:flex; flex-direction:column; align-items:stretch; text-align:center; }
.demo-login .dl-logo{ width:min(80vw,320px); height:auto; margin:0 auto; filter:drop-shadow(0 6px 18px rgba(0,0,0,.6)); }
.demo-login .dl-sub{ margin:12px 0 18px; font-size:12px; letter-spacing:2px; color:#c9a961; }
.demo-login .dl-lbl{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px; text-align:left; font-size:12px; letter-spacing:2px; color:#c9a961; }
.demo-login .dl-in{ font:inherit; font-size:16px; padding:10px 12px; color:#f5e4be; background:#0d0a08; border:2px solid #6b5a2d; border-radius:4px;
  -webkit-user-select:text; user-select:text; }
.demo-login .dl-in:focus{ outline:none; border-color:#f3d98a; box-shadow:0 0 0 2px rgba(243,217,138,.25); }
.demo-login .dl-msg{ min-height:18px; margin:2px 0 8px; font-size:12px; color:#ff9a8a; }
.demo-login .dl-btn{ font:inherit; font-size:18px; font-weight:bold; letter-spacing:6px; padding:12px; color:#2a1500; cursor:pointer;
  background:linear-gradient(#f3d98a,#c9a961); border:2px solid #f3d98a; border-radius:6px; box-shadow:0 4px 0 #7a5d1c, 0 8px 20px rgba(0,0,0,.5); }
.demo-login .dl-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #7a5d1c; }
.demo-login .dl-btn:disabled{ opacity:.6; }
.demo-login .dl-note{ margin-top:14px; font-size:11px; color:#9a9080; }
.dg-card.dg-locked .dg-art{ filter:grayscale(.85) brightness(.55); }
.dg-card.dg-locked .dg-name, .dg-card.dg-locked .dg-tag{ opacity:.6; }