:root{
  --ink:#fff9ec;
  --muted:#d9d5c6;
  --gold:#ffd35f;
  --panel:rgba(15,28,39,.88);
  --line:rgba(255,255,255,.16);
  --shadow:0 16px 38px rgba(0,0,0,.32);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#0b1d29;color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
body{padding:12px}
button{font:inherit;color:inherit}
img{display:block;max-width:100%}
.bg-layer{position:fixed;inset:0;background:linear-gradient(rgba(7,20,28,.34),rgba(7,20,28,.72)),url("assets/world_bg.webp") center/cover no-repeat;z-index:-2}
.app-shell{width:min(1320px,100%);margin:0 auto}
.screen{display:none}
.screen.active{display:block}
.hidden{display:none!important}

.map-hero,.hud,.panel-card,.board-panel,.story-stage,.modal-card{
  box-shadow:var(--shadow);backdrop-filter:blur(8px)
}
.map-hero{
  background:linear-gradient(rgba(18,32,42,.65),rgba(16,29,38,.82)),url("assets/world_bg.webp") center/cover no-repeat;
  border:1px solid var(--line);border-radius:28px;padding:22px;min-height:88vh;
}
.eyebrow{font-size:.7rem;letter-spacing:.15em;font-weight:900;color:#ffd76a}
.map-card{max-width:560px;background:rgba(15,28,39,.78);border:1px solid var(--line);border-radius:22px;padding:18px}
.map-card h1,.map-info h2,.mission-card h1,.board-top h2{font-family:Georgia,serif;margin:.18rem 0 .34rem}
.map-card p,.map-info p{color:var(--muted);line-height:1.5}
.map-path-wrap{position:relative;margin:28px auto 18px;max-width:900px;padding:42px 10px 34px}
.map-path{position:absolute;left:8%;right:8%;top:56%;height:8px;border-radius:999px;background:linear-gradient(90deg,#e4c261,#d5efff,#b896ff);box-shadow:0 0 18px rgba(255,225,139,.25)}
.level-node{
  position:relative;z-index:2;width:120px;min-height:120px;border-radius:999px;border:3px solid rgba(255,255,255,.24);
  background:linear-gradient(180deg,#284964,#193244);display:flex;flex-direction:column;justify-content:center;align-items:center;
  color:var(--ink);font-weight:900;box-shadow:0 0 0 rgba(0,0,0,0);cursor:pointer
}
.level-node:nth-of-type(2){margin-left:6%}
.level-node:nth-of-type(3){margin-left:35%;margin-top:-20px}
.level-node:nth-of-type(4){margin-left:auto}
.level-node .node-num{font-size:1.7rem;color:#ffd96e}
.level-node small{display:block;width:80px;line-height:1.15;margin-top:6px;color:#e8e2cf}
.level-node.selected{box-shadow:0 0 0 4px rgba(255,218,103,.28),0 0 28px rgba(255,218,103,.34)}
.level-node.locked{filter:grayscale(.65) brightness(.75);cursor:not-allowed}
.level-node.locked::after{content:"🔒";position:absolute;right:10px;top:10px;font-size:1rem}
.map-info{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;background:rgba(15,28,39,.78);border:1px solid var(--line);border-radius:22px;padding:16px;max-width:760px;margin:0 auto}
.map-preview img{height:110px;width:110px;object-fit:cover;border-radius:18px}
.map-goals{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.map-goals span{background:rgba(255,255,255,.08);padding:8px 10px;border-radius:999px;border:1px solid var(--line);font-size:.78rem}
.map-actions{text-align:center;margin-top:18px}
.primary-btn,.small-btn,.tiny-toggle{
  border:1px solid rgba(255,255,255,.18);border-radius:14px;background:#3e8c53;padding:13px 18px;font-weight:800;cursor:pointer
}
.small-btn{padding:9px 12px;background:#2e6b8f}
.alt-btn{background:#486278}
.tiny-toggle{padding:8px 10px;background:#23445d;margin-top:10px;font-size:.78rem}

.hud{display:flex;justify-content:space-between;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:12px 16px}
.brand-title{font-family:Georgia,serif;color:#ffd467;font-weight:900;font-size:1.35rem;text-shadow:0 2px 4px #000}
.brand-sub{font-size:.78rem;color:var(--muted);margin-top:2px}
.hud-stats{display:flex;gap:10px}
.hud-chip{min-width:84px;text-align:center;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:14px;padding:7px 11px}
.hud-chip span{display:block;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}
.hud-chip strong{font-size:1.05rem}

.story-stage{
  position:relative;display:grid;grid-template-columns:210px 1fr 210px;gap:14px;margin-top:12px;padding:14px;border:1px solid var(--line);
  border-radius:24px;background:linear-gradient(rgba(16,30,37,.16),rgba(16,30,37,.5)),url("assets/world_bg.webp") center/cover no-repeat;overflow:hidden;
  transform:translate3d(0,0,0)
}
.story-stage.shake-sm{animation:shakeSm .25s linear 1}
.story-stage.shake-lg{animation:shakeLg .38s linear 1}
.character-card,.mission-card{position:relative;z-index:2;background:rgba(13,25,34,.69);border:1px solid rgba(255,255,255,.18);border-radius:20px;backdrop-filter:blur(7px)}
.character-card{padding:10px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.character-card img{width:100%;height:220px;object-fit:cover;border-radius:14px}
.character-card strong{display:block;color:#ffd86e;margin-top:8px}
.character-card span{display:block;font-size:.78rem;color:#f2ead6;line-height:1.35}
.mission-card{padding:16px}
.mission-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.mission-actions{display:flex;gap:8px}
.meter-head{display:flex;justify-content:space-between;font-size:.8rem;font-weight:800}
.meter{height:13px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden;margin-top:6px}
.meter-fill{height:100%;width:100%;background:linear-gradient(90deg,#f45d45,#f8b04d);border-radius:inherit;transition:width .28s ease}
.goal-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px}
.goal-chip{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.07);border-radius:12px;padding:6px}
.goal-chip img{width:32px;height:32px;border-radius:8px}
.goal-chip span{font-size:.72rem}
.goal-chip b{color:#ffd86e}
.battle-message{text-align:center;margin-top:12px;padding:9px;background:rgba(0,0,0,.18);border-radius:12px;font-weight:700;font-size:.86rem}

.play-layout{display:grid;grid-template-columns:220px minmax(0,1fr) 240px;gap:12px;margin-top:12px}
.panel-card,.board-panel{background:var(--panel);border:1px solid var(--line);border-radius:22px}
.panel-card{padding:13px;margin-bottom:12px}
.friend,.spell-row{display:flex;gap:9px;align-items:center;margin-top:10px}
.friend img{width:48px;height:48px;object-fit:cover;border-radius:12px}
.friend b,.spell-row b{display:block;font-size:.85rem;color:#ffe192}
.friend span,.spell-row span{display:block;font-size:.69rem;color:var(--muted);line-height:1.25}
.booster{width:100%;display:grid;grid-template-columns:34px 1fr 30px;gap:8px;align-items:center;text-align:left;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:13px;padding:9px;margin-top:8px;cursor:pointer}
.booster:disabled{opacity:.45;cursor:not-allowed}
.booster>span{font-size:1.3rem}.booster b{display:block;font-size:.8rem}.booster small{display:block;color:var(--muted);font-size:.67rem}.booster em{font-style:normal;background:#224f6b;border-radius:999px;text-align:center;padding:4px;font-weight:900}
.board-panel{padding:14px}
.board-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.cast-info{text-align:right}.cast-info span{display:block;color:var(--muted);font-size:.75rem}.cast-info strong{display:block;color:#ffe07a}
.board{
  margin-top:12px;display:grid;grid-template-columns:repeat(var(--board-size,6),minmax(0,1fr));gap:clamp(3px, calc(10px - var(--board-size,6) * .5px), 7px);touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:100%
}
.cell{position:relative;aspect-ratio:1;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(#263747,#182633);display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 10px rgba(0,0,0,.22);transition:transform .12s ease,filter .12s ease,opacity .15s ease}
.cell.selected{transform:scale(.88);filter:brightness(1.18);box-shadow:0 0 0 2px #ffe07a,0 0 18px rgba(255,224,122,.5)}
.cell.pop{transform:scale(.15) rotate(12deg);opacity:0}
.cell.spawn .rune-img{animation:dropIn .28s ease-out both}
.cell.cast-glow{animation:castGlow .42s ease-out}
.rune-img{width:84%;height:84%;object-fit:cover;border-radius:12px;pointer-events:none}
.blocker-img{position:absolute;inset:8%;width:84%;height:84%;object-fit:cover;border-radius:10px;z-index:3;pointer-events:none;box-shadow:0 4px 9px rgba(0,0,0,.33)}
.blocker-hp{position:absolute;right:4px;top:4px;z-index:4;background:#6d331e;color:white;border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;font-size:.7rem;font-weight:900;border:2px solid #ffc16b}
.locked .rune-img{filter:brightness(.45) saturate(.6)}
.hammer-mode .cell.blocked{outline:3px solid #ffd566;outline-offset:-3px;animation:pulseOutline 1s infinite}
.spell-tip{margin-top:10px;background:rgba(255,255,255,.06);border-radius:12px;padding:9px;text-align:center;color:var(--muted);font-size:.76rem}
.spellbook .spell-row img{width:42px;height:42px;object-fit:cover;border-radius:10px}
.stars{font-size:1.5rem;letter-spacing:.08em;color:#ffd85c;margin:8px 0}
#status{font-size:.78rem;color:var(--muted)}
.spell-fx,.flash-wash{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.flash-wash{opacity:0}
.flash-wash.active{animation:flashWash .42s ease-out}
.fx-particle{position:absolute;width:10px;height:10px;border-radius:50%;animation:burst .95s ease-out forwards}
.fx-spark{position:absolute;font-size:1.15rem;font-weight:900;animation:sparkFly 1s ease-out forwards;text-shadow:0 0 10px currentColor}
.fx-ring{position:absolute;left:50%;top:50%;width:30px;height:30px;border:4px solid currentColor;border-radius:50%;transform:translate(-50%,-50%);animation:ring .78s ease-out forwards;box-shadow:0 0 18px currentColor}
.fx-beam{position:absolute;left:18%;top:56%;height:6px;width:60%;border-radius:999px;transform-origin:left center;animation:beamFlash .46s ease-out forwards;box-shadow:0 0 20px currentColor}
.damage-float{position:absolute;left:50%;top:28%;z-index:8;font-size:2rem;font-weight:900;transform:translateX(-50%);text-shadow:0 3px 6px #000}
.damage-float.go{animation:damage .7s ease-out forwards}
.modal{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.64);display:grid;place-items:center;padding:18px}
.modal.hidden{display:none}
.modal-card{width:min(420px,100%);background:#173044;border:1px solid rgba(255,255,255,.2);border-radius:24px;padding:24px;text-align:center}
.modal-icon{font-size:3rem}.modal-card p{color:var(--muted);line-height:1.5}
@keyframes burst{to{transform:translate(var(--x),var(--y)) scale(.15);opacity:0}}
@keyframes sparkFly{0%{opacity:0;transform:scale(.5)}20%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1.2)}}
@keyframes ring{to{width:320px;height:320px;opacity:0}}
@keyframes beamFlash{0%{transform:scaleX(.1);opacity:0}25%{opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes damage{0%{opacity:0;transform:translate(-50%,12px) scale(.7)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-48px) scale(1.15)}}
@keyframes pulseOutline{50%{outline-color:white}}
@keyframes flashWash{0%{opacity:0}35%{opacity:.10}100%{opacity:0}}
@keyframes castGlow{0%{filter:brightness(1)}50%{filter:brightness(1.55)}100%{filter:brightness(1)}}
@keyframes dropIn{0%{transform:translateY(-18px) scale(.88);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes shakeSm{0%,100%{transform:translate(0,0)}20%{transform:translate(-4px,1px)}40%{transform:translate(4px,-1px)}60%{transform:translate(-3px,1px)}80%{transform:translate(3px,0)}}
@keyframes shakeLg{0%,100%{transform:translate(0,0)}15%{transform:translate(-8px,3px)}30%{transform:translate(8px,-2px)}45%{transform:translate(-6px,-2px)}60%{transform:translate(7px,2px)}75%{transform:translate(-5px,1px)}}
@media(max-width:1000px){.play-layout{grid-template-columns:1fr}.left-panel,.right-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px}.panel-card{margin-bottom:0}.story-stage{grid-template-columns:150px 1fr 150px}.character-card img{height:160px}}
@media(max-width:700px){
  body{padding:7px}.hud{flex-wrap:wrap}.hud-stats{width:100%;justify-content:space-between}.hud-chip{flex:1;min-width:0}
  .story-stage{grid-template-columns:1fr}.character-card{display:none}.goal-row{grid-template-columns:1fr 1fr}
  .left-panel,.right-panel{grid-template-columns:1fr}.board{gap:5px}.cell{border-radius:10px}.board-panel{padding:10px}
  .rune-img{width:88%;height:88%}.play-layout{gap:8px}.map-info{grid-template-columns:1fr}.map-preview img{margin:0 auto}
  .map-path-wrap{padding-top:18px}.level-node{width:94px;min-height:94px}.level-node small{width:62px;font-size:.64rem}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}}

.cell.selected::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:10px;
  border:3px solid rgba(255,230,130,.95);
  box-shadow:0 0 18px rgba(255,220,90,.65);
  pointer-events:none;
  z-index:5;
}


/* ===== Portrait-first mobile tuning (9:16 phones) ===== */
html,body{
  min-height:100dvh;
}
body{
  padding:6px;
}
.app-shell{
  width:min(calc(100vw - 12px), calc((100dvh - 12px) * 9 / 16), 480px);
  margin:0 auto;
}
.map-hero{
  min-height:calc(100dvh - 12px);
  padding:14px;
  border-radius:22px;
}
.map-card{
  padding:14px;
}
.map-card h1{
  font-size:1.55rem;
}
.map-card p{
  font-size:.9rem;
}
.map-path-wrap{
  margin:18px auto 14px;
  padding:14px 0 20px;
}
.map-path{
  top:50%;
  left:10%;
  right:10%;
  height:7px;
}
.level-node{
  width:88px;
  min-height:88px;
}
.level-node .node-num{
  font-size:1.45rem;
}
.level-node small{
  width:58px;
  font-size:.62rem;
}
.map-info{
  grid-template-columns:86px 1fr;
  gap:10px;
  padding:12px;
}
.map-preview img{
  width:80px;
  height:80px;
}
.map-goals span{
  font-size:.72rem;
  padding:6px 8px;
}
.primary-btn,.small-btn,.tiny-toggle{
  border-radius:12px;
}
.primary-btn{
  padding:12px 16px;
}

.hud{
  gap:8px;
  padding:10px 12px;
  border-radius:18px;
}
.brand-title{
  font-size:1.08rem;
}
.brand-sub{
  font-size:.72rem;
}
.hud-stats{
  gap:6px;
}
.hud-chip{
  min-width:64px;
  padding:6px 8px;
}
.hud-chip span{
  font-size:.6rem;
}
.hud-chip strong{
  font-size:.95rem;
}

.story-stage{
  grid-template-columns:1fr;
  gap:8px;
  padding:10px;
  margin-top:8px;
  border-radius:18px;
}
.character-card{
  display:none;
}
.mission-card{
  padding:12px;
  border-radius:16px;
}
.mission-top{
  gap:8px;
}
.mission-card h1{
  font-size:1.1rem;
}
.goal-row{
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.goal-chip{
  padding:5px 6px;
}
.goal-chip img{
  width:26px;
  height:26px;
}
.goal-chip span{
  font-size:.68rem;
}
.battle-message{
  margin-top:10px;
  padding:8px;
  font-size:.8rem;
}

.play-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:8px;
}
.board-panel,.panel-card{
  border-radius:18px;
}
.board-panel{
  order:1;
  padding:10px;
}
.left-panel{
  order:2;
}
.right-panel{
  order:3;
}
.left-panel,.right-panel{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.panel-card{
  margin-bottom:0;
  padding:10px;
}
.board-top{
  gap:8px;
}
.board-top h2{
  font-size:1.05rem;
}
.cast-info span{
  font-size:.68rem;
}
.cast-info strong{
  font-size:.95rem;
}
.board{
  margin-top:10px;
  gap:4px;
}
.cell{
  border-radius:10px;
}
.rune-img{
  width:88%;
  height:88%;
  border-radius:8px;
}
.blocker-img{
  border-radius:8px;
}
.blocker-hp{
  min-width:18px;
  height:18px;
  font-size:.62rem;
  border-width:1px;
}
.spell-tip{
  margin-top:8px;
  padding:8px;
  font-size:.68rem;
}
.friend,.spell-row{
  gap:8px;
  margin-top:8px;
}
.friend img,.spellbook .spell-row img{
  width:40px;
  height:40px;
  border-radius:10px;
}
.friend b,.spell-row b{
  font-size:.8rem;
}
.friend span,.spell-row span{
  font-size:.66rem;
}
.booster{
  grid-template-columns:30px 1fr 26px;
  gap:8px;
  padding:8px;
  margin-top:7px;
}
.booster > span{
  font-size:1.1rem;
}
.booster b{
  font-size:.78rem;
}
.booster small{
  font-size:.62rem;
}
.booster em{
  padding:3px;
  font-size:.72rem;
}
.stars{
  font-size:1.28rem;
  margin:6px 0;
}
#status{
  font-size:.72rem;
}
.tiny-toggle{
  width:100%;
  font-size:.72rem;
  padding:8px 10px;
}
.modal-card{
  width:min(360px, 100%);
  border-radius:20px;
  padding:18px;
}
.modal-icon{
  font-size:2.4rem;
}
.modal-card p{
  font-size:.92rem;
}

/* Strong portrait-specific rules */
@media (max-width: 520px), (orientation: portrait){
  .app-shell{
    width:min(calc(100vw - 12px), calc((100dvh - 12px) * 9 / 16), 430px);
  }
  .map-info{
    grid-template-columns:1fr;
    text-align:center;
  }
  .map-preview img{
    margin:0 auto;
  }
  .mission-actions{
    display:flex;
    gap:6px;
  }
  .small-btn{
    padding:8px 10px;
    font-size:.78rem;
  }
  .eyebrow{
    font-size:.62rem;
  }
  .board{
    gap:4px;
  }
  .cell.selected::after{
    inset:4px;
    border-width:2px;
  }
}

/* A little extra compaction for very short phone viewports */
@media (max-width: 430px) and (max-height: 780px){
  .hud{
    padding:8px 10px;
  }
  .story-stage{
    padding:8px;
  }
  .mission-card{
    padding:10px;
  }
  .board-panel,.panel-card{
    padding:9px;
  }
  .goal-chip span{
    font-size:.64rem;
  }
  .friend span,.spell-row span{
    font-size:.62rem;
  }
}

.board, .cell, .rune-img, .blocker-img{
  touch-action:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;
}




/* ===== Fight view immediately above the crystal board ===== */
.board-battle{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:8px;
  align-items:center;
  margin-bottom:10px;
  padding:8px 10px;
  min-height:92px;
  overflow:hidden;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(90deg,rgba(30,72,105,.72),rgba(29,42,54,.75) 48%,rgba(91,49,34,.72)),
    url("assets/world_bg.webp") center/cover no-repeat;
}
.board-fighter{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.enemy-fighter{
  justify-content:flex-end;
}
.fighter-image{
  flex:0 0 auto;
  width:70px;
  height:76px;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.16);
  box-shadow:0 5px 12px rgba(0,0,0,.28);
}
.fighter-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-image img{
  object-position:center 26%;
}
.enemy-image img{
  object-position:center 22%;
}
.fighter-copy{
  min-width:0;
}
.fighter-copy strong{
  display:block;
  margin-top:2px;
  font-size:.9rem;
  color:#fff2c4;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.enemy-copy{
  text-align:right;
}
.board-battle-center{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  gap:4px;
  color:#ffd869;
  font-weight:900;
  text-shadow:0 2px 4px rgba(0,0,0,.5);
}
.battle-burst{
  font-size:.8rem;
  animation:battleTwinkle 1.8s ease-in-out infinite;
}
.board-fight-fx{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  overflow:hidden;
}
.fight-bolt{
  position:absolute;
  left:20%;
  top:50%;
  width:60%;
  height:5px;
  border-radius:999px;
  transform-origin:left center;
  animation:fightBolt .48s ease-out forwards;
  box-shadow:0 0 16px currentColor;
}
.fight-spark{
  position:absolute;
  left:50%;
  top:50%;
  font-weight:900;
  animation:fightSpark .75s ease-out forwards;
  text-shadow:0 0 8px currentColor;
}
@keyframes battleTwinkle{
  0%,100%{opacity:.45;transform:scale(.8)}
  50%{opacity:1;transform:scale(1.2)}
}
@keyframes fightBolt{
  0%{opacity:0;transform:scaleX(.1)}
  25%{opacity:1}
  100%{opacity:0;transform:scaleX(1)}
}
@keyframes fightSpark{
  0%{opacity:0;transform:translate(0,0) scale(.5)}
  25%{opacity:1}
  100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.15)}
}

@media (max-width:520px), (orientation:portrait){
  .board-battle{
    min-height:82px;
    padding:7px 8px;
    margin-bottom:8px;
    border-radius:13px;
  }
  .fighter-image{
    width:58px;
    height:64px;
    border-radius:10px;
  }
  .fighter-copy strong{
    font-size:.78rem;
  }
  .board-battle-center{
    font-size:.76rem;
  }
}


/* ===== Combat HP + block/counter feedback ===== */
.fighter-hp{
  width:100%;
  min-width:74px;
  height:7px;
  margin-top:5px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.16);
}
.fighter-hp-fill{
  height:100%;
  width:100%;
  border-radius:inherit;
  transition:width .25s ease;
}
.hero-hp-fill{
  background:linear-gradient(90deg,#59dc78,#a8ee77);
}
.enemy-hp-fill{
  background:linear-gradient(90deg,#ff6b4f,#ffb04f);
}
.enemy-block{
  animation:blockPulse .5s ease-out;
}
.hero-hit{
  animation:heroHit .34s ease-out;
}
.hero-heal{
  animation:heroHeal .55s ease-out;
}
.block-shield{
  position:absolute;
  left:66%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:6;
  width:54px;
  height:64px;
  border-radius:50% 50% 42% 42%;
  border:4px solid #9bd8ff;
  background:linear-gradient(180deg,rgba(170,228,255,.35),rgba(63,126,181,.2));
  box-shadow:0 0 20px #79c8ff;
  animation:blockShield .65s ease-out forwards;
}
.heal-pop{
  position:absolute;
  left:26%;
  top:42%;
  z-index:7;
  color:#7dff9b;
  font-size:1.3rem;
  font-weight:900;
  text-shadow:0 0 10px #2fcf67;
  animation:healRise .75s ease-out forwards;
}
.enemy-counter-bolt{
  position:absolute;
  right:18%;
  top:57%;
  width:48%;
  height:6px;
  transform-origin:right center;
  border-radius:999px;
  background:#d88455;
  box-shadow:0 0 18px #d88455;
  animation:counterBolt .45s ease-out forwards;
}
@keyframes blockPulse{
  0%,100%{filter:brightness(1)}
  45%{filter:brightness(1.55) saturate(.7)}
}
@keyframes heroHit{
  0%,100%{transform:translateX(0)}
  30%{transform:translateX(-5px) rotate(-2deg)}
  60%{transform:translateX(4px) rotate(2deg)}
}
@keyframes heroHeal{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.45) drop-shadow(0 0 12px #66ff8b)}
}
@keyframes blockShield{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}
}
@keyframes healRise{
  0%{opacity:0;transform:translateY(10px) scale(.75)}
  25%{opacity:1}
  100%{opacity:0;transform:translateY(-28px) scale(1.1)}
}
@keyframes counterBolt{
  0%{opacity:0;transform:scaleX(.1)}
  25%{opacity:1}
  100%{opacity:0;transform:scaleX(1)}
}


/* V12 mobile stability: keep tile layers compositor-friendly while tracing. */
.board{
  contain:layout paint;
}
.cell{
  will-change:transform,filter;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.rune-img,.blocker-img{
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.cell.selected{
  /* Selection should not trigger expensive image re-compositing. */
  filter:none;
}




/* ===== V16 map polish ===== */
.map-card{
  background:linear-gradient(180deg, rgba(12,27,41,.86), rgba(20,39,58,.74));
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.map-path{
  background:linear-gradient(90deg, rgba(255,217,110,.9), rgba(186,162,255,.95));
  box-shadow:0 0 18px rgba(205,183,255,.35);
}
.level-node{
  overflow:visible;
}
.level-node .node-icon{
  position:absolute;
  top:-13px;
  left:50%;
  transform:translateX(-50%);
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#183b58,#0e2236);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 12px rgba(0,0,0,.22);
  font-size:1rem;
}
.level-node.selected{
  transform:translateY(-2px) scale(1.03);
}
.level-node.cleared{
  box-shadow:0 0 0 3px rgba(121,239,164,.22), 0 0 22px rgba(121,239,164,.28);
}
.level-node.cleared::before{
  content:"✓";
  position:absolute;
  right:10px;
  bottom:9px;
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#2b9b57;
  color:white;
  font-weight:800;
  font-size:.76rem;
  border:1px solid rgba(255,255,255,.22);
}
.map-info{
  grid-template-columns:180px 1fr;
  background:linear-gradient(180deg, rgba(10,25,40,.84), rgba(17,33,49,.76));
  box-shadow:0 12px 26px rgba(0,0,0,.2);
}
.map-preview.duo{
  display:grid;
  grid-template-columns:64px 1fr 64px;
  align-items:center;
  gap:10px;
}
.map-preview.duo img{
  width:64px;
  height:64px;
  border-radius:16px;
  object-fit:cover;
  border:2px solid rgba(255,255,255,.14);
  box-shadow:0 6px 12px rgba(0,0,0,.24);
}
.map-preview-vs{
  text-align:center;
  font-weight:900;
  letter-spacing:.08em;
  color:#ffd96e;
  text-shadow:0 2px 6px rgba(0,0,0,.38);
}
.map-detail{
  min-width:0;
}
.map-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.map-pill{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  color:#f0ead7;
  font-size:.76rem;
}
.map-goals span{
  background:rgba(255,255,255,.06);
}
.map-summary{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.map-status{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,217,110,.12);
  color:#ffe08a;
  border:1px solid rgba(255,217,110,.16);
  font-size:.8rem;
  font-weight:700;
}
.map-best{
  color:#d7d4c8;
  font-size:.84rem;
}
.map-actions .primary-btn{
  min-width:210px;
}

@media (max-width: 520px), (orientation: portrait){
  .map-info{
    grid-template-columns:1fr;
  }
  .map-preview.duo{
    grid-template-columns:56px 1fr 56px;
    justify-items:center;
  }
  .map-preview.duo img{
    width:56px;
    height:56px;
    border-radius:14px;
  }
  .map-summary{
    gap:8px;
  }
  .level-node .node-icon{
    width:30px;
    height:30px;
    top:-10px;
    font-size:.88rem;
  }
}


/* ===== V17 storybook map splash ===== */
.storybook-splash{
  position:relative;
  overflow:hidden;
  max-width:900px;
  margin:0 auto 16px;
  padding:18px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 18% 24%, rgba(255,216,110,.16), transparent 26%),
    radial-gradient(circle at 84% 28%, rgba(116,196,255,.18), transparent 24%),
    linear-gradient(180deg, rgba(13,32,49,.92), rgba(23,48,71,.84));
  box-shadow:0 18px 40px rgba(0,0,0,.26);
}
.splash-ribbon{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 12px;
  border-radius:999px;
  background:linear-gradient(180deg, #355d82, #1e3953);
  color:#ffe18e;
  border:1px solid rgba(255,255,255,.12);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
}
.splash-content{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:12px;
  align-items:center;
  margin-top:10px;
}
.splash-copy h1{
  font-family:Georgia,serif;
  margin:.2rem 0 .4rem;
  font-size:2rem;
  color:#fff1c7;
}
.splash-copy p{
  margin:0;
  line-height:1.55;
  color:#e1d7c4;
}
.splash-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.splash-badge{
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#f7edd7;
  font-size:.76rem;
}
.splash-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.map-progress-text{
  margin-top:10px;
  color:#b8d9ff;
  font-size:.82rem;
  font-weight:700;
}
.splash-cast{
  position:relative;
  min-height:180px;
}
.splash-wimble,.splash-dog,.splash-goldy{
  position:absolute;
  object-fit:cover;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.28));
}
.splash-wimble{
  right:38px;
  bottom:-4px;
  width:162px;
  height:162px;
  border-radius:26px;
}
.splash-dog{
  left:34px;
  bottom:10px;
  width:84px;
  height:84px;
  border-radius:20px;
}
.splash-goldy{
  right:0;
  top:10px;
  width:68px;
  height:68px;
  border-radius:18px;
}
.cast-orb{
  position:absolute;
  border-radius:999px;
  filter:blur(2px);
  opacity:.85;
}
.orb-left{
  width:88px;
  height:88px;
  left:6px;
  top:26px;
  background:radial-gradient(circle, rgba(96,243,173,.7), rgba(96,243,173,.1) 65%, transparent 70%);
  animation:orbFloat 4.3s ease-in-out infinite;
}
.orb-right{
  width:118px;
  height:118px;
  right:40px;
  top:30px;
  background:radial-gradient(circle, rgba(255,211,94,.75), rgba(255,211,94,.08) 62%, transparent 72%);
  animation:orbFloat 5.2s ease-in-out infinite reverse;
}
.splash-stars{
  pointer-events:none;
}
.splash-stars span{
  position:absolute;
  color:#ffe18c;
  text-shadow:0 0 12px rgba(255,225,140,.55);
  animation:twinkleFloat 2.6s ease-in-out infinite;
}
.splash-stars span:nth-child(1){left:18px;top:22px;font-size:1rem;}
.splash-stars span:nth-child(2){left:49%;top:18px;font-size:.95rem;animation-delay:.3s;}
.splash-stars span:nth-child(3){right:24px;top:28px;font-size:1.05rem;animation-delay:.9s;}
.splash-stars span:nth-child(4){left:43%;bottom:18px;font-size:.82rem;animation-delay:.55s;}
.splash-stars span:nth-child(5){right:112px;bottom:18px;font-size:1rem;animation-delay:1.1s;}

.map-path{
  position:relative;
  overflow:hidden;
}
.map-path::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  transform:translateX(-120%);
  animation:pathShimmer 2.9s linear infinite;
}
.level-node.selected{
  animation:selectedPulse 2.1s ease-in-out infinite;
}
.level-node:hover:not(.locked){
  transform:translateY(-2px) scale(1.03);
}
.map-card{
  position:relative;
}
.map-card::after{
  content:"";
  position:absolute;
  right:14px;
  top:14px;
  width:46px;
  height:46px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,216,110,.42), transparent 62%);
  filter:blur(2px);
}

@keyframes twinkleFloat{
  0%,100%{opacity:.35; transform:translateY(0) scale(.85);}
  50%{opacity:1; transform:translateY(-5px) scale(1.15);}
}
@keyframes orbFloat{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-8px) scale(1.06);}
}
@keyframes pathShimmer{
  0%{transform:translateX(-120%);}
  100%{transform:translateX(120%);}
}
@keyframes selectedPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(255,218,103,.24),0 0 28px rgba(255,218,103,.28);}
  50%{box-shadow:0 0 0 5px rgba(255,218,103,.36),0 0 34px rgba(255,218,103,.42);}
}

@media (max-width: 520px), (orientation: portrait){
  .storybook-splash{
    padding:14px;
    border-radius:22px;
    margin-bottom:12px;
  }
  .splash-content{
    grid-template-columns:1fr;
    gap:10px;
  }
  .splash-copy h1{
    font-size:1.6rem;
  }
  .splash-cast{
    min-height:138px;
  }
  .splash-wimble{
    right:20px;
    width:122px;
    height:122px;
    border-radius:22px;
  }
  .splash-dog{
    left:20px;
    width:66px;
    height:66px;
    border-radius:18px;
  }
  .splash-goldy{
    right:0;
    top:8px;
    width:54px;
    height:54px;
  }
  .map-progress-text{
    font-size:.76rem;
  }
  .splash-actions{
    gap:6px;
  }
}


/* ===== V18 magic impact upgrade ===== */
.board-wrap{
  position:relative;
  margin-top:12px;
}
.board-wrap .board{
  margin-top:0;
}
.board-fx{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:visible;
  z-index:8;
}
.board-burst{
  position:absolute;
  width:18px;
  height:18px;
  border-radius:999px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, var(--burst-color), transparent 72%);
  box-shadow:0 0 18px var(--burst-glow);
  animation:boardBurst .5s ease-out forwards;
}
.board-fx-particle{
  position:absolute;
  z-index:2;
  transform:translate(-50%,-50%);
  font-size:1rem;
  font-weight:900;
  text-shadow:0 0 10px currentColor;
  animation:boardParticle 820ms ease-out forwards;
}
.board-fx-label{
  position:absolute;
  z-index:3;
  transform:translate(-50%,-50%);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.06em;
  white-space:nowrap;
  animation:boardLabel 1s ease-out forwards;
}

.cell.spell-fire{animation:spellFire 420ms ease-out}
.cell.spell-fire::before,
.cell.spell-ice::before,
.cell.spell-water::before,
.cell.spell-nature::before,
.cell.spell-wind::before,
.cell.spell-star::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:12px;
  z-index:4;
  pointer-events:none;
}
.cell.spell-fire::before{
  background:radial-gradient(circle at 50% 75%, rgba(255,172,84,.95), rgba(255,95,45,.75) 45%, transparent 70%);
  box-shadow:0 0 18px rgba(255,125,70,.65);
  animation:spellOver 420ms ease-out;
}
.cell.spell-ice::before{
  background:linear-gradient(180deg, rgba(230,250,255,.92), rgba(134,217,255,.35) 55%, transparent 78%);
  box-shadow:0 0 18px rgba(103,199,255,.55);
  clip-path:polygon(50% 0%, 78% 28%, 66% 100%, 33% 100%, 19% 31%);
  animation:spellOver 420ms ease-out;
}
.cell.spell-water::before{
  background:radial-gradient(circle at 50% 55%, rgba(188,241,255,.92), rgba(76,195,243,.55) 42%, transparent 72%);
  box-shadow:0 0 18px rgba(85,216,255,.55);
  animation:splashOver 420ms ease-out;
}
.cell.spell-nature::before{
  content:"✿";
  display:grid;
  place-items:center;
  color:#89ef9f;
  font-size:1.25rem;
  text-shadow:0 0 12px rgba(137,239,159,.55);
  background:radial-gradient(circle, rgba(113,229,123,.18), transparent 70%);
  animation:bloomOver 460ms ease-out;
}
.cell.spell-wind::before{
  content:"🌀";
  display:grid;
  place-items:center;
  font-size:1rem;
  background:radial-gradient(circle, rgba(178,140,255,.18), transparent 70%);
  animation:spinOver 420ms ease-out;
}
.cell.spell-star::before{
  content:"★";
  display:grid;
  place-items:center;
  font-size:1.2rem;
  color:#ffe27e;
  text-shadow:0 0 14px rgba(255,216,90,.75);
  background:radial-gradient(circle, rgba(255,216,90,.18), transparent 70%);
  animation:starOver 420ms ease-out;
}

.story-stage.shake-sm,.board-panel.shake-sm{animation:shakeSm .25s linear 1}
.story-stage.shake-lg,.board-panel.shake-lg{animation:shakeLg .42s linear 1}

@keyframes boardBurst{
  0%{opacity:.9; transform:translate(-50%,-50%) scale(.25);}
  100%{opacity:0; transform:translate(-50%,-50%) scale(2.8);}
}
@keyframes boardParticle{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.4);}
  25%{opacity:1;}
  100%{opacity:0; transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1.25);}
}
@keyframes boardLabel{
  0%{opacity:0; transform:translate(-50%, 2px) scale(.78);}
  20%{opacity:1;}
  100%{opacity:0; transform:translate(-50%, -34px) scale(1.08);}
}
@keyframes spellOver{
  0%{opacity:0; transform:scale(.55);}
  35%{opacity:1;}
  100%{opacity:0; transform:scale(1.08);}
}
@keyframes splashOver{
  0%{opacity:0; transform:scale(.45);}
  35%{opacity:1;}
  100%{opacity:0; transform:scale(1.18);}
}
@keyframes bloomOver{
  0%{opacity:0; transform:scale(.35) rotate(-18deg);}
  35%{opacity:1;}
  100%{opacity:0; transform:scale(1.18) rotate(14deg);}
}
@keyframes spinOver{
  0%{opacity:0; transform:scale(.4) rotate(-90deg);}
  35%{opacity:1;}
  100%{opacity:0; transform:scale(1.1) rotate(90deg);}
}
@keyframes starOver{
  0%{opacity:0; transform:scale(.3) rotate(-25deg);}
  35%{opacity:1;}
  100%{opacity:0; transform:scale(1.15) rotate(20deg);}
}


/* ===== V19 reactions + finishers + result FX ===== */
.enemy-hit{animation:enemyHit .34s ease-out;}
.enemy-hit-big{animation:enemyHitBig .48s ease-out;}
.enemy-defeated{animation:enemyDefeated .75s ease-out; filter:saturate(.7) brightness(1.12);}
.enemy-hit-flare{
  position:absolute; right:18%; top:48%; width:92px; height:92px; border-radius:50%;
  transform:translate(50%,-50%);
  background:radial-gradient(circle, rgba(255,214,96,.92), rgba(255,103,76,.55) 38%, transparent 68%);
  filter:blur(1px); z-index:6; animation:enemyHitFlare .5s ease-out forwards;
}
.enemy-hit-flare.big{ width:126px; height:126px; }
.enemy-hit-text{
  position:absolute; right:18%; top:34%; transform:translate(50%,-50%); z-index:7;
  color:#ffe49a; font-weight:900; font-size:1rem; letter-spacing:.04em;
  text-shadow:0 3px 10px rgba(0,0,0,.55), 0 0 14px rgba(255,212,94,.55);
  animation:enemyHitText .9s ease-out forwards;
}
.enemy-hit-text.big{ font-size:1.2rem; }
.finisher-fx{
  position:absolute; inset:0; z-index:8; pointer-events:none; display:grid; place-items:center;
}
.finisher-label{
  padding:10px 16px; border-radius:999px; border:2px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(18,34,52,.92), rgba(12,24,38,.88));
  color:var(--finisher-color); font-weight:900; letter-spacing:.08em; text-shadow:0 0 14px color-mix(in srgb, var(--finisher-color) 70%, white 30%);
  box-shadow:0 0 24px color-mix(in srgb, var(--finisher-color) 50%, transparent 50%);
  animation:finisherLabel .9s ease-out forwards;
}
.finisher-fx.grand .finisher-label{ font-size:1.2rem; padding:12px 20px; }
.finisher-fx.burst .finisher-label{ font-size:1rem; }
.finisher-particle{
  position:absolute; left:50%; top:50%; font-size:1.1rem; font-weight:900; text-shadow:0 0 12px currentColor;
  animation:finisherParticle .95s ease-out forwards;
}
.result-fx{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:21; }
.modal-card{ position:relative; overflow:hidden; }
.modal-card.victory-mode{ animation:modalWin .72s ease-out; box-shadow:0 0 0 1px rgba(255,220,106,.22), 0 18px 42px rgba(0,0,0,.35), 0 0 32px rgba(255,220,106,.18); }
.modal-card.defeat-mode{ animation:modalLose .72s ease-out; box-shadow:0 18px 42px rgba(0,0,0,.38), 0 0 28px rgba(122,154,255,.12); }
.result-particle{ position:absolute; z-index:22; font-size:1.25rem; opacity:0; text-shadow:0 0 14px currentColor; }
.result-particle.win{ color:#ffe085; animation:resultFall 1.2s ease-out forwards; }
.result-particle.lose{ color:#bfd5ff; animation:resultDrift 1.05s ease-out forwards; }

@keyframes enemyHit{
  0%,100%{ transform:translateX(0) scale(1); filter:brightness(1); }
  25%{ transform:translateX(6px) scale(1.02); filter:brightness(1.25); }
  65%{ transform:translateX(-10px) scale(.98); }
}
@keyframes enemyHitBig{
  0%,100%{ transform:translateX(0) scale(1); filter:brightness(1); }
  20%{ transform:translateX(9px) scale(1.04); filter:brightness(1.32) saturate(1.15); }
  45%{ transform:translateX(-14px) scale(.96); }
  70%{ transform:translateX(6px) scale(1.02); }
}
@keyframes enemyDefeated{
  0%{ transform:scale(1); opacity:1; }
  35%{ transform:scale(1.08) rotate(-2deg); opacity:1; }
  75%{ transform:scale(.92) rotate(2deg); opacity:.75; }
  100%{ transform:scale(.96); opacity:.55; }
}
@keyframes enemyHitFlare{
  0%{ opacity:0; transform:translate(50%,-50%) scale(.3); }
  25%{ opacity:1; }
  100%{ opacity:0; transform:translate(50%,-50%) scale(1.35); }
}
@keyframes enemyHitText{
  0%{ opacity:0; transform:translate(50%,0) scale(.7); }
  20%{ opacity:1; }
  100%{ opacity:0; transform:translate(50%,-34px) scale(1.08); }
}
@keyframes finisherLabel{
  0%{ opacity:0; transform:scale(.62) translateY(10px); }
  20%{ opacity:1; }
  100%{ opacity:0; transform:scale(1.06) translateY(-8px); }
}
@keyframes finisherParticle{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.45); }
  20%{ opacity:1; }
  100%{ opacity:0; transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1.35); }
}
@keyframes modalWin{
  0%{ transform:scale(.86) translateY(12px); opacity:0; }
  55%{ transform:scale(1.04) translateY(-4px); opacity:1; }
  100%{ transform:scale(1) translateY(0); }
}
@keyframes modalLose{
  0%{ transform:scale(.9) translateY(12px); opacity:0; }
  35%{ transform:scale(1.02) translateY(-2px); opacity:1; }
  70%{ transform:scale(.98) translateX(-5px); }
  100%{ transform:scale(1) translateX(0); }
}
@keyframes resultFall{
  0%{ opacity:0; transform:translate(0,0) scale(.5); }
  18%{ opacity:1; }
  100%{ opacity:0; transform:translate(var(--x), var(--y)) rotate(120deg) scale(1.1); }
}
@keyframes resultDrift{
  0%{ opacity:0; transform:translate(0,0) scale(.5); }
  20%{ opacity:1; }
  100%{ opacity:0; transform:translate(var(--x), var(--y)) rotate(-40deg) scale(1.05); }
}


/* ===== V20 character combat + intro overlay ===== */
.fighter-companions{
  display:flex;
  gap:6px;
  margin-top:6px;
}
.companion-mini{
  width:28px;
  height:28px;
  object-fit:cover;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 3px 8px rgba(0,0,0,.22);
}
.level-intro{
  position:absolute;
  inset:10px 10px auto 10px;
  z-index:30;
  display:grid;
  place-items:center;
}
.level-intro.hidden{ display:none; }
.level-intro-card{
  width:100%;
  max-width:520px;
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(17,35,53,.95), rgba(12,25,39,.94));
  box-shadow:0 18px 34px rgba(0,0,0,.32), 0 0 22px rgba(255,220,120,.12);
  text-align:left;
}
.level-intro-card h3{
  margin:.3rem 0 .55rem;
  color:#ffe8a8;
}
.intro-opponent{
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 0 10px;
}
.intro-opponent img{
  width:64px;
  height:64px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.18);
}
.intro-opponent b{
  display:block;
  color:#fff2c4;
}
.intro-opponent span{
  display:block;
  color:#d9d1bf;
  font-size:.84rem;
  margin-top:2px;
}
.board-panel{ position:relative; overflow:hidden; }
.hero-image.caster-pulse, .wimble-card.caster-pulse{ animation:casterPulse .48s ease-out; }
.troll-card.enemy-targeted{ animation:targetPulse .55s ease-out; }
.hero-image.hero-cast{ animation:heroCast .42s ease-out; }
.enemy-image.enemy-cast{ animation:enemyCast .42s ease-out; }
.companion-mini.dog-pounce{ animation:dogPounce .42s ease-out; }
.companion-mini.goldy-swoop{ animation:goldySwoop .5s ease-out; }
.impact-flash{
  position:absolute;
  width:42px;
  height:42px;
  border-radius:999px;
  transform:translate(-50%,-50%);
  filter:blur(1px);
  opacity:.95;
  z-index:6;
  animation:impactFlash .45s ease-out forwards;
}
.impact-flash.big{ width:68px; height:68px; }
.assist-sprite{
  position:absolute;
  width:34px;
  height:34px;
  object-fit:cover;
  border-radius:999px;
  transform:translate(-50%,-50%);
  z-index:7;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  animation:assistFly .55s ease-out forwards;
}
.assist-sprite.goldy-assist{ width:30px; height:30px; }
.assist-label{
  position:absolute;
  transform:translate(-50%,-50%);
  z-index:8;
  font-weight:900;
  font-size:.8rem;
  color:#fff0b1;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
  animation:assistLabel .7s ease-out forwards;
}
.enemy-attack-label{ color:#ffd8a1; }
.enemy-strike{
  position:absolute;
  left:0;
  top:0;
  height:6px;
  border-radius:999px;
  transform-origin:left center;
  animation:enemyStrikeFlash .46s ease-out forwards;
  box-shadow:0 0 18px currentColor;
  z-index:5;
}
.mud-strike{ height:8px; box-shadow:0 0 18px rgba(199,141,90,.75); }
.moon-strike{ height:6px; box-shadow:0 0 18px rgba(200,194,255,.75); }
.crystal-strike{ height:7px; box-shadow:0 0 18px rgba(121,216,255,.85); }
.goldy-spark{ font-size:1rem; }

/* override beam positions to use real anchors */
.fx-beam, .fight-bolt{
  left:0;
  top:0;
  transform-origin:left center;
}
@keyframes beamFlash{0%{transform:translateY(-50%) rotate(var(--rot)) scaleX(.1);opacity:0}25%{opacity:1}100%{transform:translateY(-50%) rotate(var(--rot)) scaleX(1);opacity:0}}
@keyframes fightBolt{0%{opacity:0;transform:translateY(-50%) rotate(var(--rot)) scaleX(.1)}25%{opacity:1}100%{opacity:0;transform:translateY(-50%) rotate(var(--rot)) scaleX(1)}}
@keyframes enemyStrikeFlash{0%{opacity:0;transform:translateY(-50%) rotate(var(--rot)) scaleX(.1)}25%{opacity:1}100%{opacity:0;transform:translateY(-50%) rotate(var(--rot)) scaleX(1)}}
@keyframes casterPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04); filter:brightness(1.3)}}
@keyframes targetPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03); filter:brightness(1.25)}}
@keyframes heroCast{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(4px) scale(1.04)}}
@keyframes enemyCast{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(-4px) scale(1.04)}}
@keyframes dogPounce{0%,100%{transform:translateY(0) scale(1)}45%{transform:translate(5px,-6px) scale(1.12)}}
@keyframes goldySwoop{0%,100%{transform:translateY(0) scale(1)}45%{transform:translate(5px,-8px) scale(1.18)}}
@keyframes impactFlash{0%{opacity:0; transform:translate(-50%,-50%) scale(.2)}25%{opacity:1}100%{opacity:0; transform:translate(-50%,-50%) scale(1.8)}}
@keyframes assistFly{0%{opacity:0; transform:translate(-50%,-50%) scale(.6)}18%{opacity:1}100%{opacity:0; transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.05)}}
@keyframes assistLabel{0%{opacity:0; transform:translate(-50%,-50%) scale(.7)}20%{opacity:1}100%{opacity:0; transform:translate(-50%,-22px) scale(1.04)}}

@media (max-width: 520px), (orientation: portrait){
  .level-intro{ inset:8px 8px auto 8px; }
  .level-intro-card{ padding:13px; border-radius:18px; }
  .level-intro-card h3{ font-size:1.1rem; }
  .intro-opponent img{ width:56px; height:56px; }
  .companion-mini{ width:24px; height:24px; }
}


/* ===== V21 economy + Wendy shop ===== */
.map-economy-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.gold-chip,.reserve-chip{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff1c4;
  font-size:.8rem;
  font-weight:800;
}
.reserve-chip{ color:#d7efff; }
.shop-shell{
  max-width:980px;
  margin:0 auto;
  display:grid;
  gap:14px;
}
.shop-hero-card,.shop-note-card{
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(17,35,53,.92), rgba(11,25,38,.9));
  box-shadow:0 18px 36px rgba(0,0,0,.24);
}
.shop-topline{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.shop-hero-layout{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:16px;
  align-items:center;
  margin-top:10px;
}
.shop-wendy{
  width:170px;
  height:190px;
  object-fit:cover;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 18px rgba(0,0,0,.26);
}
.shop-copy h1{
  margin:.1rem 0 .4rem;
  color:#ffe8b0;
}
.shop-copy p{ margin:0 0 10px; color:#e0d8c7; line-height:1.55; }
.shop-reserve-summary{
  margin-bottom:12px;
  color:#bce8ff;
  font-weight:700;
}
.shop-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
.shop-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  width:100%;
  text-align:left;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(26,44,64,.88), rgba(16,31,47,.86));
  color:#f5edd9;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.shop-item strong{ display:block; color:#fff0be; }
.shop-item small{ display:block; color:#d5d0c0; margin-top:2px; }
.shop-item em{ font-style:normal; color:#ffd86a; font-weight:900; }
.shop-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  font-size:1.3rem;
}
.shop-item.too-expensive{
  opacity:.58;
}
.shop-item:disabled{ cursor:not-allowed; }
.shop-note-card p{ margin:.35rem 0 0; color:#ddd3be; }

@media (max-width: 700px), (orientation: portrait){
  .shop-hero-layout{
    grid-template-columns:1fr;
  }
  .shop-wendy{
    width:132px;
    height:152px;
  }
  .shop-grid{
    grid-template-columns:1fr;
  }
  .gold-chip,.reserve-chip{
    font-size:.74rem;
  }
}


/* ===== V22 chest, daily specials, loadout ===== */
.shop-daily-special{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,216,106,.22);
  background:rgba(255,216,106,.12);
  color:#ffe6a0;
  font-size:.8rem;
  font-weight:800;
  margin-bottom:10px;
}
.shop-item.daily-special{
  border-color:rgba(255,216,106,.35);
  box-shadow:0 0 0 1px rgba(255,216,106,.12), 0 12px 24px rgba(0,0,0,.18), 0 0 18px rgba(255,216,106,.12);
}
.loadout-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.loadout-grid{
  grid-template-columns:1fr 1fr;
}
.loadout-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(26,44,64,.88), rgba(16,31,47,.86));
  color:#f5edd9;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.loadout-item strong{ display:block; color:#fff0be; }
.loadout-item small{ color:#d5d0c0; }
.loadout-stepper{
  display:flex;
  align-items:center;
  gap:10px;
}
.step-btn{
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff1cc;
  font-size:1.1rem;
  font-weight:900;
}
.reward-chest-box{
  margin:10px auto 12px;
  display:grid;
  place-items:center;
  gap:8px;
}
.reward-chest-box.hidden{ display:none; }
.reward-chest{
  width:92px;
  height:92px;
  border-radius:22px;
  display:grid;
  place-items:center;
  font-size:2.6rem;
  background:linear-gradient(180deg, #754b1f, #4e3014);
  border:2px solid rgba(255,228,151,.28);
  box-shadow:0 10px 22px rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.08);
}
.reward-chest.opening{ animation:chestBounce 1.05s ease-in-out forwards; }
.reward-chest.opened{ animation:chestGlow .8s ease-out forwards; background:linear-gradient(180deg, #8a5a23, #5c3716); }
.reward-reveal.hidden{ display:none; }
.reward-reveal{
  display:grid;
  gap:4px;
  animation:rewardReveal .45s ease-out;
}
.reward-line{
  color:#ffe390;
  font-weight:900;
  font-size:1.02rem;
}
.reward-line.minor{
  color:#dfe8ff;
  font-size:.88rem;
}
@keyframes chestBounce{
  0%,100%{ transform:translateY(0) scale(1); }
  18%{ transform:translateY(-6px) scale(1.02); }
  40%{ transform:translateY(0) scale(.98) rotate(-2deg); }
  62%{ transform:translateY(-9px) scale(1.04) rotate(2deg); }
  82%{ transform:translateY(0) scale(1) rotate(0deg); }
}
@keyframes chestGlow{
  0%{ box-shadow:0 10px 22px rgba(0,0,0,.28); }
  50%{ box-shadow:0 10px 22px rgba(0,0,0,.28), 0 0 26px rgba(255,220,112,.4); }
  100%{ box-shadow:0 10px 22px rgba(0,0,0,.28), 0 0 16px rgba(255,220,112,.2); }
}
@keyframes rewardReveal{
  0%{ opacity:0; transform:translateY(6px) scale(.96); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

@media (max-width: 700px), (orientation: portrait){
  .loadout-grid{ grid-template-columns:1fr; }
}


/* ===== V23 splash portrait fix ===== */
.splash-cast{
  position:relative;
  min-height:220px;
  display:grid;
  grid-template-columns:1fr 1.15fr 1fr;
  gap:12px;
  align-items:end;
}
.splash-portrait{
  position:relative;
  display:grid;
  justify-items:center;
  align-self:end;
}
.splash-portrait span{
  margin-top:8px;
  color:#fff0c4;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.04em;
}
.portrait-frame{
  position:relative;
  width:104px;
  height:118px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(28,52,76,.92), rgba(17,34,51,.9));
  box-shadow:0 10px 20px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
  display:grid;
  place-items:end center;
}
.main-portrait-frame{ width:154px; height:176px; border-radius:28px; }
.small-portrait-frame{ width:88px; height:102px; }
.splash-figure{
  position:relative;
  width:80%;
  height:80%;
  object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.26));
  z-index:2;
}
.main-portrait-frame .splash-figure{ width:86%; height:86%; }
.small-portrait-frame .splash-figure{ width:78%; height:78%; }
.portrait-glow{
  position:absolute;
  inset:auto 12px 30px;
  height:34px;
  border-radius:999px;
  filter:blur(12px);
  opacity:.8;
}
.glow-dog{ background:radial-gradient(circle, rgba(133,240,171,.85), transparent 70%); }
.glow-wimble{ background:radial-gradient(circle, rgba(255,213,110,.9), transparent 70%); }
.glow-goldy{ background:radial-gradient(circle, rgba(149,213,255,.9), transparent 70%); }
.portrait-dog{ transform:translateY(14px); }
.portrait-goldy{ transform:translateY(-6px); }

/* ===== V23 charms + reward rarity + shop restock ===== */
.charm-panel-card{
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(17,35,53,.92), rgba(11,25,38,.9));
  box-shadow:0 18px 36px rgba(0,0,0,.24);
}
.charm-panel-card h2{ margin:.3rem 0 .3rem; color:#ffe8b0; }
.charm-intro{ margin:0 0 12px; color:#d9cfbc; }
.equipped-slots{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:14px;
}
.equipped-slot{
  display:grid;
  gap:6px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
}
.equipped-slot b{ color:#fff1c9; }
.equipped-slot span{ color:#d7ebff; font-weight:700; }
.charm-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}
.charm-card{
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(27,45,66,.88), rgba(16,31,47,.86));
  color:#f4ebd7;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.charm-card strong{ display:block; color:#fff1be; margin-top:4px; }
.charm-card small{ display:block; color:#d5cfbf; margin-top:2px; }
.charm-card em{ display:block; color:#bce8ff; font-style:normal; margin:8px 0; }
.charm-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.charm-icon{ font-size:1.3rem; }
.charm-actions{ display:grid; gap:6px; margin-top:8px; }
.rarity-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.05em;
}
.rarity-pill.common{ background:rgba(111,227,135,.14); color:#c8ffd1; border-color:rgba(111,227,135,.24); }
.rarity-pill.rare{ background:rgba(121,191,255,.14); color:#cae8ff; border-color:rgba(121,191,255,.28); }
.rarity-pill.epic{ background:rgba(207,139,255,.16); color:#f0d4ff; border-color:rgba(207,139,255,.32); }
.restock-pop{ animation:restockPop .75s ease-out; }
.reward-reveal .rarity-pill{ justify-self:center; }

@keyframes restockPop{
  0%{ transform:scale(.92); box-shadow:0 0 0 rgba(255,216,106,0); }
  50%{ transform:scale(1.03); box-shadow:0 0 0 1px rgba(255,216,106,.25), 0 0 18px rgba(255,216,106,.18); }
  100%{ transform:scale(1); box-shadow:inherit; }
}

@media (max-width: 700px), (orientation: portrait){
  .splash-cast{ grid-template-columns:1fr 1fr 1fr; min-height:180px; gap:8px; }
  .portrait-frame{ width:78px; height:90px; border-radius:18px; }
  .main-portrait-frame{ width:120px; height:138px; border-radius:22px; }
  .small-portrait-frame{ width:72px; height:84px; }
  .splash-portrait span{ font-size:.68rem; }
  .equipped-slots,.charm-grid{ grid-template-columns:1fr; }
}


/* ===== V24 stability guards ===== */
.level-intro.hidden,
.modal.hidden,
.screen:not(.active){
  pointer-events:none !important;
}

.level-intro:not(.hidden){
  pointer-events:auto;
}

.board,
.cell,
.rune-img,
.blocker-img{
  touch-action:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
}



/* ===== V25 splash art + treasure chest asset ===== */
.single-splash-art{
  min-height:260px;
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:24px;
}
.splash-friends-art{
  width:100%;
  min-height:260px;
  max-height:360px;
  display:block;
  object-fit:cover;
  object-position:center 38%;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}
.reward-chest{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.reward-chest img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.28));
}
@media (max-width: 520px), (orientation: portrait){
  .single-splash-art{min-height:210px;}
  .splash-friends-art{min-height:210px;max-height:280px;}
}


/* ===== V26 screen cleanup and path map ===== */
.splash-screen-shell,
.map-screen-shell{
  background:linear-gradient(rgba(18,32,42,.72),rgba(14,26,34,.86));
  border:1px solid var(--line);
  border-radius:26px;
  padding:14px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
}
.splash-screen-card{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  padding:18px;
  background:linear-gradient(180deg, rgba(13,32,49,.92), rgba(23,48,71,.84));
}
.splash-screen-layout{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:14px;
  align-items:center;
  margin-top:10px;
}
.splash-screen-copy h1{
  font-family:Georgia,serif;
  margin:.18rem 0 .42rem;
  font-size:2rem;
  color:#fff1c7;
}
.splash-screen-copy p{margin:0;color:#e1d7c4;line-height:1.55}
.clean-actions{margin-top:16px}
.compact-economy{margin-top:12px}
.splash-screen-art-wrap{display:flex;justify-content:center;align-items:center}
.splash-screen-art{
  width:min(100%, 470px);
  border-radius:26px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 36px rgba(0,0,0,.3);
}
.map-topbar-card{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  background:rgba(15,28,39,.78);
  border:1px solid var(--line);
  border-radius:22px;
  padding:14px;
}
.map-topbar-card h1{font-family:Georgia,serif;margin:.16rem 0 .34rem}
.map-topbar-card p{margin:0;color:var(--muted);max-width:600px;line-height:1.45}
.map-screen-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.journey-map-card{
  position:relative;
  margin-top:14px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 34px rgba(0,0,0,.28);
}
.journey-scene-img{
  width:100%;
  height:auto;
  display:block;
}
.journey-map-overlay{position:absolute;inset:0}
.journey-node{
  position:absolute !important;
  width:96px;
  min-height:96px;
  border-width:3px;
  background:linear-gradient(180deg, rgba(23,62,90,.95), rgba(18,41,58,.95));
  box-shadow:0 10px 20px rgba(0,0,0,.28);
}
.journey-node small{width:64px;font-size:.66rem}
.journey-node.node-0{left:5%;bottom:7%}
.journey-node.node-1{left:17%;top:44%}
.journey-node.node-2{right:19%;top:8%}
.map-bottom-actions{margin-top:14px}

/* tighter game play area */
.hud{margin-bottom:8px}
.story-stage{
  grid-template-columns:1fr !important;
  gap:0;
  padding:8px;
  margin-top:8px;
  border-radius:18px;
}
.story-stage .character-card{display:none !important}
.story-stage .mission-card{
  padding:10px 12px;
  border-radius:15px;
}
.story-stage .mission-card h1{font-size:1rem}
.story-stage .goal-row{grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.story-stage .goal-chip{padding:5px}
.story-stage .goal-chip img{width:24px;height:24px}
.story-stage .goal-chip span{font-size:.65rem}
.story-stage .battle-message{font-size:.78rem;padding:8px;margin-top:8px}
.play-layout{grid-template-columns:1fr !important;gap:8px;margin-top:8px}
.board-panel{order:1;padding:10px;border-radius:18px}
.left-panel{order:2;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.right-panel{order:3;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.panel-card{margin-bottom:0;padding:10px;border-radius:18px}
.companions .friend,.spellbook .spell-row{margin-top:8px}
.friend img,.spellbook .spell-row img{width:38px;height:38px}
.friend b,.spell-row b{font-size:.8rem}
.friend span,.spell-row span{font-size:.63rem}
.boosters{display:block}
.boosters .booster{grid-template-columns:28px 1fr 24px;padding:8px;margin-top:7px}
.status-card{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.board-battle{min-height:82px;margin-bottom:8px;padding:8px}
.fighter-image{width:60px;height:66px}
.fighter-copy strong{font-size:.95rem}
.board-wrap{margin-top:10px}
.board{gap:4px;margin-top:0}
.cell{border-radius:10px}
.spell-tip{margin-top:8px;font-size:.68rem;padding:8px}

@media (max-width: 740px){
  .splash-screen-layout{grid-template-columns:1fr}
  .map-topbar-card{flex-direction:column}
  .map-screen-actions{justify-content:flex-start}
  .journey-node{width:84px;min-height:84px}
  .journey-node small{width:56px;font-size:.62rem}
}
@media (max-width: 520px), (orientation: portrait){
  .splash-screen-shell,.map-screen-shell{padding:10px;border-radius:22px}
  .splash-screen-card{padding:14px;border-radius:22px}
  .splash-screen-copy h1{font-size:1.68rem}
  .journey-node{width:76px;min-height:76px}
  .journey-node .node-num{font-size:1.2rem}
  .journey-node small{width:48px;font-size:.56rem}
  .journey-node.node-0{left:4%;bottom:6%}
  .journey-node.node-1{left:15%;top:43%}
  .journey-node.node-2{right:14%;top:7%}
  .story-stage .goal-row{grid-template-columns:1fr 1fr}
  .left-panel,.right-panel{grid-template-columns:1fr}
}

/* extra compact utility cards */
.companions,
.spellbook{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
}
.companions .eyebrow,
.spellbook .eyebrow,
.boosters .eyebrow,
.status-card .eyebrow{grid-column:1/-1}
.companions .friend,
.spellbook .spell-row{
  margin-top:0;
  padding:6px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.status-card .stars{margin:4px 0}
@media (max-width:520px), (orientation:portrait){
  .left-panel,.right-panel{grid-template-columns:1fr 1fr}
  .companions,.spellbook{grid-template-columns:1fr}
}


/* ===== V27 compact gameplay shell ===== */
.game-quickbar{
  display:flex;
  gap:6px;
  margin-top:8px;
  padding:6px;
  overflow-x:auto;
  scrollbar-width:none;
  background:rgba(12,27,39,.78);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.16);
}
.game-quickbar::-webkit-scrollbar{display:none}
.quickbar-btn{
  flex:1 0 auto;
  min-width:88px;
  min-height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#f8efd9;
  font-weight:800;
  font-size:.74rem;
  padding:7px 9px;
  cursor:pointer;
}
.quickbar-btn span{margin-left:3px}
.quickbar-btn.active{
  background:#2f688b;
  border-color:rgba(150,220,255,.28);
  box-shadow:0 0 16px rgba(92,187,240,.12);
}
.game-drawer.collapsed{display:none !important}
.game-drawer:not(.collapsed){animation:drawerReveal .2s ease-out}
@keyframes drawerReveal{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}

/* Keep the puzzle as the visual center of gravity */
.play-layout{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:6px !important;
  margin-top:6px !important;
}
.board-panel{
  order:1 !important;
  padding:8px !important;
  border-radius:16px !important;
}
.compact-utility-zone{
  order:2 !important;
  display:block !important;
}
.compact-utility-zone .panel-card{
  margin-top:6px !important;
  margin-bottom:0 !important;
}

/* Mission drawer becomes compact instead of a full hero panel */
.story-stage{
  margin-top:6px !important;
  padding:7px !important;
  border-radius:16px !important;
  grid-template-columns:1fr !important;
  gap:0 !important;
}
.story-stage .character-card{display:none !important}
.story-stage .mission-card{
  padding:9px 10px !important;
  border-radius:13px !important;
}
.story-stage .mission-card h1{
  font-size:.98rem !important;
  margin:.08rem 0 .2rem !important;
}
.story-stage .mission-top{align-items:center}
.story-stage .goal-row{
  grid-template-columns:repeat(4,1fr) !important;
  gap:4px !important;
  margin-top:7px !important;
}
.story-stage .goal-chip{
  padding:4px !important;
  min-width:0;
}
.story-stage .goal-chip img{width:22px !important;height:22px !important}
.story-stage .goal-chip span{font-size:.61rem !important}
.story-stage .battle-message{
  margin-top:6px !important;
  padding:6px 8px !important;
  font-size:.72rem !important;
}

/* Compress the battle strip */
.board-battle{
  min-height:68px !important;
  margin-bottom:6px !important;
  padding:6px 8px !important;
  border-radius:13px !important;
}
.fighter-image{
  width:50px !important;
  height:54px !important;
  border-radius:11px !important;
}
.board-fighter{gap:6px !important}
.fighter-copy .eyebrow{font-size:.54rem !important}
.fighter-copy strong{font-size:.78rem !important}
.fighter-hp{height:8px !important}
.companion-mini{width:20px !important;height:20px !important}
.fighter-companions{gap:4px !important;margin-top:3px !important}
.board-battle-center{font-size:.72rem !important}

/* Compress board chrome without shrinking the gems */
.board-top{min-height:34px}
.board-top h2{font-size:.94rem !important;margin:.05rem 0 !important}
.board-top .eyebrow{font-size:.54rem !important}
.cast-info span{font-size:.62rem !important}
.cast-info strong{font-size:.82rem !important}
.board-wrap{margin-top:6px !important}
.spell-tip{
  margin-top:6px !important;
  padding:6px 8px !important;
  font-size:.62rem !important;
  line-height:1.25;
}

/* HUD takes only one short row on phones */
.hud{
  padding:7px 9px !important;
  gap:7px !important;
  border-radius:15px !important;
}
.brand-title{font-size:.92rem !important}
.brand-sub{font-size:.62rem !important}
.hud-stats{gap:4px !important}
.hud-chip{
  min-width:54px !important;
  padding:4px 6px !important;
  border-radius:10px !important;
}
.hud-chip span{font-size:.52rem !important}
.hud-chip strong{font-size:.82rem !important}

/* Drawers are compact cards */
#friendsPanel,#boostersPanel,#spellbookPanel,#statusPanel{
  padding:9px !important;
  border-radius:15px !important;
}
#friendsPanel .friend,
#spellbookPanel .spell-row{
  margin-top:5px !important;
  padding:5px !important;
}
#friendsPanel .friend img,
#spellbookPanel .spell-row img{
  width:34px !important;
  height:34px !important;
}
#boostersPanel .booster{
  margin-top:5px !important;
  padding:7px !important;
}
#statusPanel .stars{margin:3px 0 !important}

@media (max-width:520px), (orientation:portrait){
  .game-quickbar{margin-top:6px;padding:5px;gap:5px}
  .quickbar-btn{min-width:76px;min-height:34px;font-size:.68rem;padding:6px 7px}
  .quickbar-btn span{display:inline}
  .story-stage .goal-row{grid-template-columns:1fr 1fr !important}
  .spell-tip{display:none}
  .board-panel{padding:7px !important}
}

@media (max-width:390px){
  .quickbar-btn{min-width:66px;font-size:.62rem}
  .quickbar-btn span{display:block;margin-left:0;margin-top:1px}
}


/* ===== V28 title-plaque button styling ===== */
:root{
  --plaque-navy-top:#294d74;
  --plaque-navy-mid:#183857;
  --plaque-navy-bot:#122b44;
  --plaque-gold-1:#f7dc83;
  --plaque-gold-2:#d9a83a;
  --plaque-gold-3:#9a6d17;
}

.primary-btn,
.small-btn,
.tiny-toggle,
.quickbar-btn,
.step-btn,
.shop-item,
.loadout-item,
.booster,
.level-node,
.map-pill{
  position:relative;
}

.primary-btn,
.small-btn,
.tiny-toggle,
.quickbar-btn,
.step-btn{
  color:var(--plaque-gold-1);
  border:2px solid rgba(224,181,74,.9);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, var(--plaque-navy-top), var(--plaque-navy-mid) 52%, var(--plaque-navy-bot)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 8px 18px rgba(0,0,0,.26),
    0 0 0 1px rgba(86,52,6,.34);
  text-shadow:0 1px 0 rgba(78,50,5,.9), 0 0 9px rgba(255,214,120,.12);
  font-weight:900;
}
.primary-btn:hover,
.small-btn:hover,
.tiny-toggle:hover,
.quickbar-btn:hover,
.step-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 10px 20px rgba(0,0,0,.30),
    0 0 0 1px rgba(86,52,6,.38),
    0 0 18px rgba(255,214,120,.10);
}
.primary-btn:active,
.small-btn:active,
.tiny-toggle:active,
.quickbar-btn:active,
.step-btn:active{
  transform:translateY(1px) scale(.99);
}
.primary-btn::before,
.small-btn::before,
.tiny-toggle::before,
.quickbar-btn::before,
.step-btn::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:inherit;
  border:1px solid rgba(255,226,145,.12);
  pointer-events:none;
}
.primary-btn{ border-radius:18px; }
.small-btn{ border-radius:15px; }
.tiny-toggle{ border-radius:14px; }
.step-btn{ border-radius:12px; }

.quickbar-btn{
  min-height:40px;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, #25476b, #183753 55%, #102840) border-box;
}
.quickbar-btn span{font-weight:900; letter-spacing:.02em}
.quickbar-btn.active{
  color:#fff2c7;
  background:
    linear-gradient(180deg, rgba(255,232,170,.08), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, #315a85, #214568 55%, #16324c) border-box;
  border-color:#f0c85e;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px rgba(120,79,14,.42),
    0 0 18px rgba(255,214,120,.14),
    0 10px 20px rgba(0,0,0,.28);
}

.shop-item,
.loadout-item,
.booster{
  border:2px solid rgba(224,181,74,.52);
  background:linear-gradient(180deg, rgba(38,69,101,.94), rgba(20,42,66,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(0,0,0,.18);
}
.shop-item strong,
.loadout-item strong,
.booster b,
.level-node small,
.map-pill{
  color:#ffefbe;
}
.shop-item em,
.booster em,
.level-node .node-num{
  color:#ffd76b;
}
.shop-icon{
  background:rgba(255,214,120,.08);
  border:1px solid rgba(255,214,120,.18);
}
.level-node{
  border:2px solid rgba(224,181,74,.78);
  background:linear-gradient(180deg, rgba(40,74,108,.97), rgba(19,42,64,.97));
  box-shadow:0 12px 20px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.level-node.selected{
  box-shadow:0 0 0 4px rgba(255,218,103,.22),0 0 28px rgba(255,218,103,.22), 0 12px 20px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.map-pill{
  color:var(--plaque-gold-1);
  border:1px solid rgba(224,181,74,.55);
  background:linear-gradient(180deg, rgba(37,70,102,.92), rgba(18,41,63,.92));
  text-shadow:0 1px 0 rgba(78,50,5,.8);
}
#playLevelBtn,
#enterMapBtn,
#introBtn,
#modalBtn{
  font-size:1rem;
  letter-spacing:.02em;
}


/* ===== V29 plaque-styled drawers/panels ===== */
.game-drawer,
.mission-card,
.character-card,
.compact-utility-zone .panel-card,
#friendsPanel,
#boostersPanel,
#spellbookPanel,
#statusPanel,
.board-panel,
.hud-chip{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(38,73,109,.96), rgba(22,46,71,.96) 56%, rgba(15,35,55,.96)) border-box !important;
  border:2px solid rgba(224,181,74,.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 10px 22px rgba(0,0,0,.20) !important;
}

.story-stage,
.compact-utility-zone .panel-card,
.board-panel{
  position:relative;
  overflow:hidden;
}
.story-stage::before,
.compact-utility-zone .panel-card::before,
.board-panel::before,
.mission-card::before,
.character-card::before,
.hud-chip::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:inherit;
  border:1px solid rgba(255,229,158,.12);
  pointer-events:none;
}

.story-stage .eyebrow,
.compact-utility-zone .eyebrow,
.board-top .eyebrow,
.hud-chip span,
.mission-top .eyebrow{
  color:#f7d576 !important;
  text-shadow:0 1px 0 rgba(77,50,8,.85);
  letter-spacing:.12em;
}

.story-stage .mission-card h1,
.compact-utility-zone b,
.compact-utility-zone strong,
.board-top h2,
.hud-chip strong,
.fighter-copy strong,
.mission-top h1,
.meter-head span,
.battle-message,
.goal-chip span,
.spell-row b,
.friend b,
.status-card strong{
  color:#fff1c4 !important;
}

.story-stage .mission-card,
.character-card,
.goal-chip,
.friend,
.spell-row,
.status-card,
.booster,
#friendsPanel .friend,
#spellbookPanel .spell-row,
#statusPanel .status-card,
#boostersPanel .booster{
  background:rgba(7,18,31,.20) !important;
  border-color:rgba(224,181,74,.20) !important;
}

.battle-message,
.spell-tip{
  background:linear-gradient(180deg, rgba(8,18,29,.66), rgba(14,29,46,.72)) !important;
  border:1px solid rgba(224,181,74,.28) !important;
  color:#f3e7c8 !important;
}

.goal-chip{
  border:1px solid rgba(224,181,74,.22) !important;
}
.goal-chip b,
.cast-info strong,
.board-top strong,
.map-status,
.map-best,
.shop-item em,
.booster em{
  color:#ffd86b !important;
}

.board-battle{
  background:
    linear-gradient(rgba(14,26,36,.26),rgba(14,26,36,.58)),
    url("assets/world_bg.webp") center/cover no-repeat !important;
  border:2px solid rgba(224,181,74,.42) !important;
  box-shadow:0 10px 20px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.compact-utility-zone .panel-card h2,
.compact-utility-zone .panel-card h3,
#statusPanel h3,
#spellbookPanel h3,
#friendsPanel h3,
#boostersPanel h3{
  color:#fff0bf;
}

.game-drawer:not(.collapsed){
  animation:drawerReveal .22s ease-out;
}

@media (max-width:520px), (orientation:portrait){
  .story-stage::before,
  .compact-utility-zone .panel-card::before,
  .board-panel::before,
  .mission-card::before,
  .character-card::before,
  .hud-chip::before{
    inset:4px;
  }
}


/* ===== V30 splash + player menu ===== */
.splash-image-shell{
  display:flex;
  justify-content:center;
  align-items:center;
}
.splash-image-card{
  position:relative;
  width:min(100%, 430px);
  border-radius:28px;
  overflow:hidden;
  border:3px solid rgba(221,181,77,.8);
  box-shadow:0 20px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1);
}
.splash-full-image{
  display:block;
  width:100%;
  height:auto;
}
.splash-image-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(7,12,22,0.06) 0%, rgba(7,12,22,0.10) 30%, rgba(6,10,18,0.38) 68%, rgba(5,9,17,0.60) 100%);
  pointer-events:none;
}
.splash-button-stack{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:calc(100% - 32px);
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}
.glow-btn{
  width:min(100%, 295px);
  box-shadow:0 0 0 1px rgba(89,56,8,.4), 0 0 18px rgba(255,217,118,.18), 0 12px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.secondary-plate{ opacity:.98; }
.text-link-btn{
  appearance:none;
  border:none;
  background:none;
  color:#ffe8ae;
  font-weight:700;
  text-shadow:0 1px 0 rgba(64,40,8,.9);
  text-decoration:underline;
  font-size:.95rem;
  padding:2px 8px;
}
.text-link-btn:hover{ color:#fff3cf; }

.player-shell{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.player-hero-card,
.player-create-card,
.player-card{
  border-radius:24px;
  padding:16px;
  border:2px solid rgba(224,181,74,.55);
  background:linear-gradient(180deg, rgba(36,69,101,.94), rgba(18,39,61,.95));
  box-shadow:0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
}
.player-hero-card{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}
.player-hero-card h1{ margin:.2rem 0 .45rem; font-family:Georgia,serif; color:#fff1c4; }
.player-hero-card p,.player-help{ color:#e5d7b8; }
.player-create-row{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
}
.player-name-input{
  flex:1;
  min-width:0;
  padding:12px 14px;
  border-radius:15px;
  border:2px solid rgba(224,181,74,.45);
  background:rgba(9,21,34,.72);
  color:#fff3d2;
  font-size:1rem;
}
.player-name-input::placeholder{ color:#b8c0cc; }
.players-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.player-card.current{
  box-shadow:0 0 0 4px rgba(255,216,107,.12), 0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
}
.player-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.player-card h3{ margin:.15rem 0 0; font-size:1.3rem; color:#fff4d3; }
.player-coin-chip{
  padding:8px 12px;
  border-radius:999px;
  color:#ffe18c;
  border:1px solid rgba(224,181,74,.5);
  background:rgba(8,19,30,.4);
  font-weight:800;
}
.player-stats-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.player-stats-grid div{
  padding:10px 8px;
  border-radius:16px;
  background:rgba(7,17,28,.25);
  border:1px solid rgba(224,181,74,.16);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.player-stats-grid b{ color:#ffe08f; font-size:1rem; }
.player-stats-grid span{ color:#e6dbc3; font-size:.78rem; }
.player-card-actions{ margin-top:12px; display:flex; justify-content:flex-end; }

@media (max-width: 520px), (orientation: portrait){
  .splash-image-card{ width:min(100%, 402px); border-radius:24px; }
  .splash-button-stack{ bottom:14px; width:calc(100% - 22px); gap:8px; }
  .glow-btn{ width:min(100%, 270px); }
  .player-hero-card, .player-create-row{ flex-direction:column; }
  .player-stats-grid{ grid-template-columns:1fr 1fr 1fr; }
  .player-card-actions .small-btn{ width:100%; }
}


/* ===== V31 unified storybook plaque theme ===== */
:root{
  --storybook-navy-1:#2b527c;
  --storybook-navy-2:#1b3d60;
  --storybook-navy-3:#102b44;
  --storybook-ink:#081525;
  --storybook-gold-1:#ffe8a2;
  --storybook-gold-2:#e2b552;
  --storybook-gold-3:#9d6f1b;
  --storybook-cream:#f4ead1;
}

body, .app-shell{
  color:var(--storybook-cream);
}

/* unified plaque container treatment */
.map-topbar-card,
.map-info,
.shop-hero-card,
.shop-note-card,
.player-hero-card,
.player-create-card,
.player-card,
.level-intro-card,
.modal-card,
.story-stage,
.board-panel,
.game-drawer,
.panel-card,
.board-battle,
.hud-chip,
.charm-card,
.charm-panel-card,
.loadout-item,
.shop-item,
.equipped-slot,
.gameScreen .gold-chip,
.gameScreen .reserve-chip,
.mapScreen .gold-chip,
.mapScreen .reserve-chip,
.shopScreen .gold-chip,
.loadoutScreen .gold-chip,
#shopDailySpecial,
#shopReserveSummary,
#loadoutSummary,
#mapStatus,
#mapBest{
  background:
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(43,82,124,.97), rgba(25,55,85,.97) 56%, rgba(15,35,55,.98)) border-box !important;
  border:2px solid rgba(226,181,82,.66) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 10px 22px rgba(0,0,0,.24),
    0 0 0 1px rgba(87,57,12,.18) !important;
  color:var(--storybook-cream);
}

.map-topbar-card,
.map-info,
.shop-hero-card,
.shop-note-card,
.player-hero-card,
.player-create-card,
.player-card,
.level-intro-card,
.modal-card,
.story-stage,
.board-panel,
.game-drawer,
.panel-card,
.board-battle,
.charm-card,
.charm-panel-card,
.loadout-item,
.shop-item,
.equipped-slot{
  position:relative;
  overflow:hidden;
}

.map-topbar-card::before,
.map-info::before,
.shop-hero-card::before,
.shop-note-card::before,
.player-hero-card::before,
.player-create-card::before,
.player-card::before,
.level-intro-card::before,
.modal-card::before,
.story-stage::before,
.board-panel::before,
.game-drawer::before,
.panel-card::before,
.board-battle::before,
.charm-card::before,
.charm-panel-card::before,
.loadout-item::before,
.shop-item::before,
.equipped-slot::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:inherit;
  border:1px solid rgba(255,232,164,.12);
  pointer-events:none;
}

/* typography */
h1,h2,h3,.brand-title,.brand-sub,
.map-title,
.player-card h3,
.level-intro-card h2,
.modal-card h2,
#missionTitle,
#mapTitle,
.shop-copy h1,
.player-hero-card h1,
.player-create-card h2,
.board-top h2{
  color:#fff1c6 !important;
  text-shadow:0 1px 0 rgba(77,50,8,.92), 0 0 14px rgba(255,219,113,.06);
}

p, small, .friend span, .spell-row span, .status-card span, .shop-copy p,
.player-help, .player-stats-grid span, .map-detail p, .battle-message, .spell-tip,
#modalText, #shopGreeting, #introText, #introFlavor, .loadout-item small, .shop-item small{
  color:#eadfc6 !important;
}

.eyebrow,
.map-pill,
.gold-chip,
.reserve-chip,
.rarity-pill,
.player-coin-chip,
.goal-chip b,
.goal-chip span,
.meter-head span,
.fighter-copy strong,
.status-card strong,
.friend b,
.spell-row b,
.loadout-item strong,
.shop-item strong,
#rewardGold,
#rewardLoot,
#rewardRarity,
#mapEnemyName,
#mapMissionName,
#mapMoves,
#mapStatus,
#mapBest,
#mapProgressText,
#chainCount,
#spellName,
#boardEnemyName,
.cast-info strong,
.hud-chip strong,
.player-stats-grid b,
#shopDailySpecial{
  color:var(--storybook-gold-1) !important;
  text-shadow:0 1px 0 rgba(80,52,10,.92);
}

.eyebrow{
  letter-spacing:.13em !important;
}

/* input / links */
.player-name-input{
  background:linear-gradient(180deg, rgba(11,24,37,.88), rgba(7,18,29,.92)) !important;
  border:2px solid rgba(226,181,82,.52) !important;
  color:#fff1cb !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.18);
}
.text-link-btn{
  color:#ffe3a0 !important;
  text-shadow:0 1px 0 rgba(84,56,10,.92);
}
.text-link-btn:hover{ color:#fff0c8 !important; }

/* map and nodes */
.map-goals span,
.goal-chip,
.player-stats-grid div,
.shop-icon,
.companions .friend,
.spellbook .spell-row,
.status-card,
.boosters .booster,
.charm-intro,
.shop-daily-special,
.map-summary > div{
  background:rgba(7,18,31,.24) !important;
  border:1px solid rgba(226,181,82,.20) !important;
}

.level-node,
.journey-node{
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(47,91,137,.98), rgba(26,58,89,.98) 56%, rgba(17,39,61,.98)) border-box !important;
  border:2px solid rgba(226,181,82,.76) !important;
  box-shadow:0 12px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.09) !important;
}
.level-node.selected,
.journey-node.selected{
  box-shadow:0 0 0 4px rgba(255,214,107,.18),0 0 26px rgba(255,214,107,.18),0 12px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.09) !important;
}
.level-node small,
.journey-node small,
.node-num{ color:var(--storybook-gold-1) !important; }

/* modals and intro */
.reward-chest-box,
.reward-chest,
.reward-reveal{
  background:rgba(8,20,32,.28) !important;
  border-color:rgba(226,181,82,.24) !important;
}
#rewardGold{font-size:2rem}
.modal-card .primary-btn,
.level-intro-card .primary-btn{margin-top:10px}

/* utility bars */
.quickbar-btn,
.tiny-toggle,
.step-btn,
.small-btn,
.primary-btn{
  color:var(--storybook-gold-1) !important;
}

/* board helpers */
.spell-tip,
.battle-message{
  background:linear-gradient(180deg, rgba(8,20,32,.72), rgba(12,28,44,.82)) !important;
  border:1px solid rgba(226,181,82,.26) !important;
}
.board-battle{
  background:
    linear-gradient(rgba(14,26,36,.34),rgba(14,26,36,.64)),
    url("assets/world_bg.webp") center/cover no-repeat !important;
}
.board-panel,
.story-stage,
.game-drawer,
.panel-card{backdrop-filter:blur(8px)}

/* splash specific */
.splash-image-card{
  box-shadow:0 18px 38px rgba(0,0,0,.34), 0 0 0 1px rgba(87,57,12,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.splash-image-card::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:22px;
  border:1px solid rgba(255,232,164,.10);
  pointer-events:none;
}

/* shop / loadout / charms extras */
.charm-common{border-color:rgba(226,181,82,.30) !important}
.charm-rare{box-shadow:0 0 0 1px rgba(126,165,255,.24), 0 10px 22px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important}
.charm-epic{box-shadow:0 0 0 1px rgba(204,125,255,.30), 0 10px 22px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important}

/* gentle consistency on all screens */
.screen.active{animation:none}

@media (max-width: 520px), (orientation: portrait){
  .map-topbar-card::before,
  .map-info::before,
  .shop-hero-card::before,
  .shop-note-card::before,
  .player-hero-card::before,
  .player-create-card::before,
  .player-card::before,
  .level-intro-card::before,
  .modal-card::before,
  .story-stage::before,
  .board-panel::before,
  .game-drawer::before,
  .panel-card::before,
  .board-battle::before,
  .charm-card::before,
  .charm-panel-card::before,
  .loadout-item::before,
  .shop-item::before,
  .equipped-slot::before,
  .splash-image-card::after{ inset:4px; }
}


/* ===== V32 Wendy rustic shop scene ===== */
.wendy-shop-scene-card{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  border:2px solid rgba(226,181,82,.72);
  box-shadow:0 18px 38px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08);
  min-height:360px;
  background:#10283f;
}
.wendy-shop-scene{
  display:block;
  width:100%;
  height:auto;
  min-height:360px;
  object-fit:cover;
  object-position:center;
}
.wendy-shop-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(4,10,16,.12) 0%, rgba(4,10,16,.02) 38%, rgba(5,11,18,.54) 78%, rgba(4,9,16,.76) 100%);
}
.wendy-shop-topbar{
  position:absolute;
  top:14px;
  left:14px;
  right:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.wendy-shop-caption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  padding:14px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(22,51,79,.86), rgba(10,28,45,.92));
  border:2px solid rgba(226,181,82,.58);
  box-shadow:0 10px 24px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
}
.wendy-shop-caption .eyebrow{color:#ffe49a !important;}
.wendy-shop-caption p{margin:.35rem 0 .65rem;color:#f3e8cf !important;line-height:1.45;}
.wendy-shop-caption .shop-daily-special{margin-bottom:8px;}
.wendy-shop-caption .shop-reserve-summary{margin-bottom:0;}
#shopScreen .shop-grid{margin-top:12px;}
#shopScreen .shop-item{min-height:94px;}
#shopScreen .shop-note-card{margin-top:12px;}
@media (max-width:700px), (orientation:portrait){
  .wendy-shop-scene-card{min-height:330px;}
  .wendy-shop-scene{min-height:330px;aspect-ratio:16/11;object-fit:cover;object-position:42% center;}
  .wendy-shop-topbar{top:10px;left:10px;right:10px;}
  .wendy-shop-caption{left:10px;right:10px;bottom:10px;padding:11px;border-radius:17px;}
  .wendy-shop-caption p{font-size:.82rem;}
  .wendy-shop-caption .shop-daily-special,.wendy-shop-caption .shop-reserve-summary{font-size:.72rem;}
}


/* ===== V33 portrait-native Wendy shop scene ===== */
.wendy-shop-scene-card{
  min-height: 520px;
  aspect-ratio: 9 / 16;
  max-width: 430px;
  margin-inline: auto;
}
.wendy-shop-scene{
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: center center;
}
.wendy-shop-topbar{
  top: 14px;
  left: 14px;
  right: 14px;
}
.wendy-shop-caption{
  left: 14px;
  right: 14px;
  bottom: 14px;
}
@media (max-width: 700px), (orientation: portrait){
  .wendy-shop-scene-card{
    min-height: 560px;
    aspect-ratio: 9 / 16;
    max-width: 100%;
  }
  .wendy-shop-scene{
    min-height: 560px;
    object-position: center center;
  }
}


/* ===== V34 player menu + charm interaction fixes ===== */
#playerMenuScreen.active{
  display:block;
}
.player-card-actions .small-btn{
  min-width:180px;
}
.player-card.current{
  border-color:rgba(255,218,104,.88) !important;
  box-shadow:0 0 0 3px rgba(255,218,104,.13),0 12px 24px rgba(0,0,0,.24) !important;
}
.charm-actions button:disabled,
.charm-locked-btn{
  opacity:.46;
  filter:saturate(.55);
  cursor:not-allowed;
}
.charm-actions button:not(:disabled){
  cursor:pointer;
}
.equipped-slot span{
  min-height:1.3em;
}


/* ===== V35 fixed Wendy portrait shop screen ===== */
.wendy-shop-scene-card{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  border:2px solid rgba(226,181,82,.72);
  box-shadow:0 18px 38px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08);
  min-height:520px;
  aspect-ratio:9/16;
  max-width:430px;
  margin-inline:auto;
  background:#10283f;
}
.wendy-shop-scene-card::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:22px;
  border:1px solid rgba(255,232,164,.12);
  pointer-events:none;
  z-index:3;
}
.wendy-shop-scene{
  display:block;
  width:100%;
  height:100%;
  min-height:520px;
  object-fit:cover;
  object-position:center center;
}
.wendy-shop-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(4,10,16,.10) 0%, rgba(4,10,16,.02) 36%, rgba(5,11,18,.42) 72%, rgba(4,9,16,.76) 100%);
}
.wendy-shop-topbar{
  position:absolute;
  top:14px;
  left:14px;
  right:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  z-index:2;
}
.wendy-shop-caption{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  padding:14px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(22,51,79,.86), rgba(10,28,45,.92));
  border:2px solid rgba(226,181,82,.58);
  box-shadow:0 10px 24px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
  z-index:2;
}
.wendy-shop-caption .eyebrow{ color:#ffe49a !important; }
.wendy-shop-caption p{ margin:.35rem 0 .65rem; color:#f3e8cf !important; line-height:1.45; }
.wendy-shop-caption .shop-daily-special{ margin-bottom:8px; }
.wendy-shop-caption .shop-reserve-summary{ margin-bottom:0; }
#shopScreen .shop-grid{ margin-top:12px; }
#shopScreen .shop-note-card{ margin-top:12px; }
@media (max-width:700px), (orientation:portrait){
  .wendy-shop-scene-card{ min-height:560px; max-width:100%; }
  .wendy-shop-scene{ min-height:560px; }
  .wendy-shop-topbar{ top:10px; left:10px; right:10px; }
  .wendy-shop-caption{ left:10px; right:10px; bottom:10px; padding:11px; border-radius:17px; }
  .wendy-shop-caption p{ font-size:.82rem; }
  .wendy-shop-caption .shop-daily-special,
  .wendy-shop-caption .shop-reserve-summary{ font-size:.72rem; }
}


/* ===== V36 Wendy shelf styling + quicker level start ===== */
#shopScreen .shop-grid,
.loadout-grid,
.charm-grid{
  gap: 14px;
}

#shopScreen .shop-item,
.loadout-item,
.charm-card,
.equipped-slot{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 2px solid rgba(219,175,93,.78) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(74,112,160,.98), rgba(37,73,112,.98) 52%, rgba(16,42,69,.98)) border-box !important;
  box-shadow:
    0 14px 26px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.25) !important;
}

#shopScreen .shop-item::before,
.loadout-item::before,
.charm-card::before,
.equipped-slot::before{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 8px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,231,176,.28), rgba(255,231,176,.05));
  pointer-events: none;
}

#shopScreen .shop-item::after,
.loadout-item::after,
.charm-card::after,
.equipped-slot::after{
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 18px;
  border: 1px solid rgba(255,231,176,.12);
  pointer-events: none;
}

#shopScreen .shop-item{
  padding: 18px 16px;
  align-items: center;
}

#shopScreen .shop-item strong,
.loadout-item strong,
.charm-card strong,
.equipped-slot b{
  display: inline-block;
  color: #fff1c6 !important;
  text-shadow: 0 1px 0 rgba(84,56,10,.92);
}

#shopScreen .shop-item small,
.loadout-item small,
.charm-card small,
.equipped-slot span,
.charm-card em{
  color: #efe3cb !important;
}

#shopScreen .shop-item em{
  color: #ffe8a8 !important;
  font-style: normal;
  font-weight: 800;
  font-size: 1.28rem;
  text-shadow: 0 1px 0 rgba(84,56,10,.92);
}

.shop-icon,
.charm-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(7,20,34,.18));
  border: 2px solid rgba(219,175,93,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.18);
}
.charm-icon{ font-size: 1.85rem; }
.shop-icon{ font-size: 1.65rem; }

.loadout-item,
.equipped-slot{
  padding: 16px 14px;
}
.loadout-stepper{
  gap: 10px;
}
.loadout-stepper span{
  min-width: 22px;
  text-align: center;
  color: #fff1c6;
  font-weight: 800;
}

.charm-panel-card{
  margin-top: 14px;
}
.charm-panel-card h2{
  margin-bottom: 6px;
}
.charm-intro{
  margin-bottom: 14px;
}
.charm-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.charm-card{
  padding: 16px 14px 14px;
}
.charm-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.charm-card em{
  display:block;
  margin: 6px 0 12px;
}
.charm-actions{
  display:grid;
  gap:8px;
}
.charm-actions .small-btn{
  width:100%;
}
.equipped-slots{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin: 14px 0 16px;
}
.equipped-slot{
  min-height: 104px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
}
.equipped-slot button{ align-self:flex-start; }

/* make shop, loadout, and charm cards feel like inventory from Wendy's shelves */
#shopScreen .shop-item,
.loadout-item,
.charm-card{
  backdrop-filter: blur(6px);
}

@media (max-width: 700px), (orientation: portrait){
  #shopScreen .shop-item,
  .loadout-item,
  .charm-card,
  .equipped-slot{
    border-radius: 20px;
  }
  .shop-icon,
  .charm-icon{
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }
  .equipped-slots{
    grid-template-columns: 1fr;
  }
}


/* ===== V37 loadout inventory-table styling ===== */
.loadout-hero-card{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 2px solid rgba(209,169,95,.84) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 16%),
    linear-gradient(180deg, rgba(112,74,38,.98), rgba(87,58,31,.99) 48%, rgba(58,35,18,1) 100%) !important;
  box-shadow: 0 20px 34px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,234,185,.16), inset 0 -1px 0 rgba(0,0,0,.28) !important;
}
.loadout-hero-card::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:22px;
  border:1px dashed rgba(255,227,157,.23);
  pointer-events:none;
}
.loadout-hero-card::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:56px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(35,19,10,.42), rgba(255,230,173,.08), rgba(35,19,10,.34));
  opacity:.85;
  pointer-events:none;
}
.loadout-hero-card .shop-copy,
.loadout-hero-card .shop-topline{
  position:relative;
  z-index:1;
}
.loadout-hero-card .eyebrow{
  color:#ffe29a !important;
}
.loadout-hero-card h1{
  color:#fff2cf !important;
  text-shadow:0 1px 0 rgba(74,43,11,.9);
}
.loadout-hero-card p{
  color:#f3e5d2 !important;
}
.loadout-hero-card .gold-chip{
  background:linear-gradient(180deg, rgba(103,77,45,.92), rgba(78,56,31,.98)) !important;
}
.loadout-hero-card .shop-reserve-summary{
  background:linear-gradient(180deg, rgba(23,51,80,.84), rgba(10,29,47,.90));
  border:2px solid rgba(219,175,93,.56);
  border-radius:18px;
  padding:10px 12px;
  color:#fff1c6 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.loadout-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.loadout-grid{
  position:relative;
}
.loadout-grid::before{
  content:"WIMBLE'S PACKED SUPPLIES";
  display:block;
  width:max-content;
  max-width:100%;
  margin:2px 0 10px;
  padding:8px 14px;
  border-radius:999px;
  border:2px solid rgba(219,175,93,.65);
  background:linear-gradient(180deg, rgba(21,48,77,.96), rgba(11,28,46,.98));
  color:#ffe7ab;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.18em;
}
.loadout-item{
  min-height:88px;
  align-items:center;
}
.loadout-item .shop-icon{
  background:linear-gradient(180deg, rgba(126,88,48,.30), rgba(31,51,72,.16));
}
.loadout-item[data-loadout="hammer"] .shop-icon::after,
.loadout-item[data-loadout="shuffle"] .shop-icon::after,
.loadout-item[data-loadout="burst"] .shop-icon::after,
.loadout-item[data-loadout="extraMoves"] .shop-icon::after{
  content:"";
  position:absolute;
}
.step-btn{
  min-width:34px;
  min-height:34px;
  border-radius:12px;
}

.charm-panel-card{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  border:2px solid rgba(209,169,95,.84) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 20%),
    linear-gradient(180deg, rgba(48,76,112,.98), rgba(28,52,83,.98) 48%, rgba(15,33,58,.99) 100%) !important;
  box-shadow: 0 18px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.charm-panel-card::before{
  content:"TRINKET SHELF";
  position:absolute;
  top:16px;
  right:16px;
  padding:6px 11px;
  border-radius:999px;
  border:1px solid rgba(255,231,173,.25);
  background:rgba(11,28,46,.38);
  color:#ffe7ab;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.16em;
}
.charm-panel-card h2,
.charm-panel-card .charm-intro,
.charm-panel-card .eyebrow{
  position:relative;
  z-index:1;
}
.charm-panel-card h2{
  color:#fff2cf !important;
}
.charm-card{
  min-height:210px;
}
.charm-card strong{ font-size:1.06rem; }
.charm-card .rarity-pill{ margin-left:auto; }
.charm-card small{ display:block; margin-top:2px; }
.charm-card em{ font-style:normal; font-weight:700; }
.charm-card.charm-common .charm-icon{ box-shadow: 0 0 0 2px rgba(117,201,126,.18), inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.18); }
.charm-card.charm-rare .charm-icon{ box-shadow: 0 0 0 2px rgba(146,164,255,.18), inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.18); }
.charm-card.charm-epic .charm-icon{ box-shadow: 0 0 0 2px rgba(255,207,105,.18), inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.18); }
.equipped-slot{
  min-height:110px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 18%),
    linear-gradient(180deg, rgba(64,95,136,.98), rgba(31,58,90,.98) 52%, rgba(14,35,60,.99)) border-box !important;
}
.equipped-slot span{ font-weight:700; }
.equipped-slot button{ margin-top:auto; }

@media (max-width:700px), (orientation:portrait){
  .loadout-hero-card::after{ top:52px; left:12px; right:12px; }
  .loadout-grid::before{ font-size:.68rem; letter-spacing:.15em; }
  .charm-panel-card::before{ top:12px; right:12px; }
}


/* ===== V38 player menu + map screen polish ===== */
.player-shell,
.map-screen-shell{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.player-shell::before,
.map-screen-shell::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  pointer-events:none;
}

.player-hero-card{
  background:
    linear-gradient(180deg, rgba(7,20,32,.26), rgba(7,20,32,.44)),
    url("assets/splash_friends.webp") center 22%/cover no-repeat,
    linear-gradient(180deg, rgba(43,82,124,.97), rgba(25,55,85,.97) 56%, rgba(15,35,55,.98)) !important;
  min-height:168px;
  align-items:flex-end;
}
.player-hero-card > div,
.player-create-card > *,
.player-card > *{
  position:relative;
  z-index:1;
}
.player-hero-card p{
  max-width:520px;
  text-shadow:0 1px 0 rgba(6,14,24,.7);
}
.player-hero-actions{
  display:flex;
  align-items:flex-start;
}

.player-create-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(87,58,31,.99), rgba(60,39,21,.99) 55%, rgba(38,23,12,.99)) border-box !important;
}
.player-create-card .eyebrow{
  color:#ffe29a !important;
}
.player-create-row{
  margin-top:12px;
}
.player-create-row .primary-btn{
  white-space:nowrap;
}
.players-grid{
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:14px;
}
.player-card{
  min-height:218px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(43,82,124,.97), rgba(25,55,85,.97) 56%, rgba(15,35,55,.98)) border-box !important;
}
.player-card-top{
  align-items:center;
}
.player-card h3{
  font-size:1.18rem;
}
.player-card.current{
  box-shadow:0 0 0 4px rgba(255,216,107,.12), 0 0 24px rgba(255,214,107,.15), 0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.player-card.current::after{
  content:"CURRENT";
  position:absolute;
  right:14px;
  bottom:14px;
  padding:6px 10px;
  border-radius:999px;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.12em;
  color:#ffe8ae;
  background:rgba(9,22,35,.55);
  border:1px solid rgba(226,181,82,.26);
}
.player-stats-grid{
  gap:10px;
}
.player-stats-grid div{
  border-radius:18px;
}
.player-card-actions{
  margin-top:14px;
}
.player-card-actions .small-btn{
  width:100%;
}

.map-topbar-card{
  background:
    linear-gradient(180deg, rgba(6,17,28,.24), rgba(6,17,28,.36)),
    url("assets/world_map_levels.webp") center 18%/cover no-repeat,
    linear-gradient(180deg, rgba(43,82,124,.97), rgba(25,55,85,.97) 56%, rgba(15,35,55,.98)) !important;
  min-height:160px;
  align-items:flex-end;
}
.map-topbar-card > div,
.map-screen-actions,
.map-info > *{
  position:relative;
  z-index:1;
}
.map-screen-actions.top-actions{
  flex-wrap:wrap;
  justify-content:flex-end;
}
.journey-map-card{
  border-radius:28px !important;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(43,82,124,.97), rgba(25,55,85,.97) 56%, rgba(15,35,55,.98)) border-box !important;
  border:2px solid rgba(226,181,82,.72) !important;
  box-shadow:0 16px 30px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.journey-map-card::before{
  content:"FOLLOW THE ENCHANTED PATH";
  position:absolute;
  left:14px;
  top:14px;
  z-index:2;
  padding:7px 12px;
  border-radius:999px;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.15em;
  color:#ffe7ab;
  background:rgba(9,24,38,.62);
  border:1px solid rgba(226,181,82,.24);
}
.journey-scene-img{
  filter:saturate(1.02) contrast(1.01);
}
.journey-map-overlay{
  background:linear-gradient(180deg, rgba(4,11,18,.08), rgba(4,11,18,.18));
}
.journey-node{
  backdrop-filter:blur(6px);
}
.journey-node small{
  width:84px;
  text-align:center;
  line-height:1.15;
}

.map-info{
  gap:16px;
  align-items:center;
}
.map-preview.duo{
  display:grid;
  grid-template-columns:80px auto 80px;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.map-preview-vs{
  color:#ffe8ae;
  font-weight:900;
  letter-spacing:.14em;
  text-align:center;
  text-shadow:0 1px 0 rgba(84,56,10,.92);
}
.map-hero-img,
.map-enemy-img{
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:18px;
  border:2px solid rgba(226,181,82,.52);
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.map-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 10px;
}
.map-pill{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
}
.map-summary{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.map-summary > div{
  padding:9px 12px;
  border-radius:14px;
  font-weight:800;
}
.map-bottom-actions{
  display:flex;
  justify-content:center;
}
.map-bottom-actions .primary-btn{
  min-width:220px;
}

@media (max-width:700px), (orientation:portrait){
  .players-grid{ grid-template-columns:1fr; }
  .player-hero-card,
  .map-topbar-card{ min-height:unset; }
  .map-preview.duo{ grid-template-columns:68px auto 68px; gap:8px; }
  .map-hero-img,
  .map-enemy-img{ width:68px; height:68px; border-radius:16px; }
  .journey-map-card::before{ top:10px; left:10px; font-size:.62rem; }
  .journey-node small{ width:64px; font-size:.60rem; }
  .map-bottom-actions .primary-btn{ min-width:min(100%, 260px); }
}


/* ===== V39 gameplay HUD polish ===== */
#gameScreen{
  display:flex;
  flex-direction:column;
  gap:8px;
}

#gameScreen .hud{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:2px solid rgba(226,181,82,.72) !important;
  background:
    linear-gradient(180deg, rgba(7,18,29,.30), rgba(7,18,29,.46)),
    url("assets/world_bg.webp") center 28%/cover no-repeat,
    linear-gradient(180deg, rgba(43,82,124,.97), rgba(25,55,85,.97) 56%, rgba(15,35,55,.98)) !important;
  box-shadow:0 16px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08) !important;
  padding:12px 14px;
}
#gameScreen .hud::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:18px;
  border:1px solid rgba(255,232,164,.12);
  pointer-events:none;
}
#gameScreen .brand,
#gameScreen .hud-stats{
  position:relative;
  z-index:1;
}
#gameScreen .brand-title{
  font-size:1.26rem;
  color:#fff1c6 !important;
}
#gameScreen .brand-sub{
  color:#f0e1c2 !important;
}
#gameScreen .hud-stats{
  gap:8px;
}
#gameScreen .hud-chip{
  min-width:78px;
  border-radius:16px;
  padding:8px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(65,103,145,.98), rgba(32,63,95,.98) 58%, rgba(16,36,58,.98)) border-box !important;
  border:2px solid rgba(226,181,82,.58) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.18) !important;
}
#gameScreen .hud-chip span{ color:#e8dbbf !important; }
#gameScreen .hud-chip strong{ color:#fff0c3 !important; font-size:1.08rem; }

#gameScreen .game-quickbar{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin-top:0;
  padding:0;
}
#gameScreen .quickbar-btn{
  min-height:48px;
  border-radius:16px;
  border:2px solid rgba(226,181,82,.60) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(53,93,136,.98), rgba(27,58,90,.98) 56%, rgba(14,35,57,.98)) border-box !important;
  box-shadow:0 8px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
  color:#ffe8ac !important;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-weight:900;
}
#gameScreen .quickbar-btn span{ font-weight:900; }
#gameScreen .quickbar-btn.active{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(82,129,68,.98), rgba(49,100,58,.98) 58%, rgba(28,63,38,.98)) border-box !important;
  box-shadow:0 0 0 3px rgba(255,216,107,.12),0 10px 18px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

#gameScreen .story-stage{
  border-radius:26px;
  padding:10px;
  gap:10px;
  background:
    linear-gradient(rgba(9,19,30,.28),rgba(9,19,30,.52)),
    url("assets/world_bg.webp") center/cover no-repeat !important;
}
#gameScreen .mission-card,
#gameScreen .character-card{
  background:linear-gradient(180deg, rgba(18,40,61,.80), rgba(9,24,38,.84)) !important;
  border:2px solid rgba(226,181,82,.40) !important;
}
#gameScreen .character-card img{
  border-radius:16px;
  border:2px solid rgba(226,181,82,.34);
}
#gameScreen .mission-card{
  padding:14px;
}
#gameScreen .mission-top h1{
  font-size:1.55rem;
}
#gameScreen .mission-actions{ gap:6px; }
#gameScreen .goal-row{ gap:8px; }
#gameScreen .goal-chip{
  border-radius:14px;
  background:rgba(8,20,32,.32) !important;
}
#gameScreen .battle-message{
  font-size:.84rem;
  padding:10px 12px;
  border-radius:14px;
}

#gameScreen .play-layout{
  grid-template-columns:200px minmax(0,1fr) 220px;
  gap:10px;
  margin-top:0;
}
#gameScreen .compact-utility-zone .panel-card,
#gameScreen .board-panel{
  border-radius:22px;
}
#gameScreen .compact-utility-zone .panel-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(43,82,124,.97), rgba(25,55,85,.97) 56%, rgba(15,35,55,.98)) border-box !important;
  border:2px solid rgba(226,181,82,.66) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#gameScreen .panel-card .eyebrow{
  display:inline-block;
  margin-bottom:8px;
}
#gameScreen .booster{
  border-radius:14px;
  background:rgba(8,20,32,.28) !important;
  border:1px solid rgba(226,181,82,.22) !important;
}
#gameScreen .spell-row,
#gameScreen .friend{
  padding:6px;
  border-radius:14px;
  background:rgba(8,20,32,.18);
}
#gameScreen .spell-row + .spell-row,
#gameScreen .friend + .friend{ margin-top:8px; }

#gameScreen .board-panel{
  padding:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(43,82,124,.97), rgba(25,55,85,.97) 56%, rgba(15,35,55,.98)) border-box !important;
  border:2px solid rgba(226,181,82,.70) !important;
  box-shadow:0 16px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#gameScreen .board-battle{
  border-radius:20px;
  padding:10px;
  margin-bottom:8px;
  border:2px solid rgba(226,181,82,.42) !important;
  background:
    linear-gradient(180deg, rgba(10,23,36,.30), rgba(10,23,36,.54)),
    url("assets/world_bg.webp") center/cover no-repeat !important;
}
#gameScreen .board-fighter{
  gap:8px;
}
#gameScreen .fighter-copy{
  gap:4px;
}
#gameScreen .fighter-image{
  border-radius:18px;
  overflow:hidden;
  border:2px solid rgba(226,181,82,.40);
  box-shadow:0 8px 18px rgba(0,0,0,.20);
}
#gameScreen .board-battle-center{
  color:#ffe7ab;
}
#gameScreen .board-top{
  padding:10px 12px;
  border-radius:16px;
  margin-bottom:8px;
  background:linear-gradient(180deg, rgba(8,20,32,.46), rgba(14,31,49,.62));
  border:1px solid rgba(226,181,82,.24);
}
#gameScreen .board-top h2{
  margin:.18rem 0 .12rem;
  font-size:1.35rem;
}
#gameScreen .board-wrap{
  margin-top:0;
  border-radius:18px;
  padding:8px;
  background:linear-gradient(180deg, rgba(7,17,28,.24), rgba(7,17,28,.42));
  border:1px solid rgba(226,181,82,.18);
}
#gameScreen .board{
  gap:6px;
}
#gameScreen .spell-tip{
  margin-top:8px;
  padding:9px 12px;
  border-radius:14px;
  font-size:.78rem;
}

#gameScreen .status-card .stars{
  margin:6px 0;
}
#gameScreen #status{
  margin-bottom:8px;
}

@media (max-width:1000px){
  #gameScreen .play-layout{
    grid-template-columns:1fr;
  }
}

@media (max-width:700px), (orientation:portrait){
  #gameScreen{ gap:6px; }
  #gameScreen .hud{
    padding:10px 12px;
    border-radius:20px;
  }
  #gameScreen .brand-title{ font-size:1.1rem; }
  #gameScreen .game-quickbar{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:6px;
  }
  #gameScreen .quickbar-btn{
    min-height:42px;
    border-radius:14px;
    font-size:.66rem;
    gap:2px;
    flex-direction:column;
    padding:5px 4px;
  }
  #gameScreen .quickbar-btn span{
    display:block;
    margin:0;
    font-size:.62rem;
    line-height:1.05;
  }
  #gameScreen .story-stage{
    padding:8px;
    gap:8px;
    border-radius:22px;
  }
  #gameScreen .mission-card{ padding:12px; }
  #gameScreen .mission-top h1{ font-size:1.28rem; }
  #gameScreen .goal-row{ grid-template-columns:1fr 1fr; }
  #gameScreen .play-layout{ gap:8px; }
  #gameScreen .board-panel{ padding:8px; }
  #gameScreen .board-battle{ padding:8px; }
  #gameScreen .board-top{ padding:8px 10px; }
  #gameScreen .board-top h2{ font-size:1.18rem; }
  #gameScreen .spell-tip{ font-size:.72rem; }
  #gameScreen .hud-stats{ width:100%; justify-content:space-between; }
  #gameScreen .hud-chip{ flex:1; min-width:0; }
}


/* ===== V40 reward chest + modal polish ===== */
.modal{
  backdrop-filter: blur(8px);
  background: radial-gradient(circle at 50% 18%, rgba(255,239,177,.07), rgba(4,10,16,.78) 44%, rgba(4,10,16,.86) 100%) !important;
}
.modal-card{
  width:min(430px, 100%) !important;
  position:relative;
  overflow:hidden;
  border-radius:28px !important;
  padding:18px 18px 20px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(43,82,124,.98), rgba(26,57,88,.98) 56%, rgba(14,35,56,.99)) border-box !important;
  border:2px solid rgba(226,181,82,.72) !important;
  box-shadow:0 22px 42px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.modal-card::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:22px;
  border:1px solid rgba(255,232,164,.12);
  pointer-events:none;
}
.modal-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 10px;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid rgba(255,232,164,.26);
  background:rgba(9,24,38,.48);
  color:#ffe7ab;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.16em;
  text-shadow:0 1px 0 rgba(84,56,10,.92);
}
.modal-icon{
  width:86px;
  height:86px;
  margin:0 auto 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:24px;
  font-size:2.6rem !important;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)), linear-gradient(180deg, rgba(76,119,166,.98), rgba(33,65,96,.98));
  border:2px solid rgba(226,181,82,.56);
  box-shadow:0 12px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12);
}
.modal-card h2{
  margin:.1rem 0 .45rem;
  font-size:1.8rem !important;
}
.modal-card p{
  max-width:34ch;
  margin:0 auto 12px;
  color:#efe4ca !important;
}
.modal-card.victory-mode .modal-icon{
  background:linear-gradient(180deg, rgba(255,246,196,.16), rgba(255,255,255,0)), linear-gradient(180deg, rgba(97,133,72,.98), rgba(47,90,52,.98));
}
.modal-card.defeat-mode .modal-icon{
  background:linear-gradient(180deg, rgba(215,228,255,.14), rgba(255,255,255,0)), linear-gradient(180deg, rgba(76,104,148,.98), rgba(35,58,88,.98));
}

.reward-chest-box{
  margin:12px auto 14px;
  padding:14px 12px 12px;
  border-radius:22px;
  border:2px solid rgba(226,181,82,.40) !important;
  background:linear-gradient(180deg, rgba(8,20,32,.36), rgba(13,29,46,.58)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.20);
}
.reward-chest-box::before{
  content:"WENDY'S REWARD CHEST";
  display:inline-block;
  margin-bottom:10px;
  padding:6px 11px;
  border-radius:999px;
  border:1px solid rgba(255,232,164,.22);
  background:rgba(9,24,38,.50);
  color:#ffe7ab;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.16em;
}
.reward-chest{
  position:relative;
  width:132px !important;
  height:132px !important;
  margin:0 auto 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:24px !important;
  background:radial-gradient(circle at 50% 32%, rgba(255,240,185,.26), rgba(255,255,255,0) 54%), linear-gradient(180deg, rgba(103,73,38,.98), rgba(70,43,19,.99));
  border:2px solid rgba(226,181,82,.60) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12);
}
.reward-chest::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:-10px;
  height:16px;
  border-radius:999px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.34), rgba(0,0,0,0) 70%);
  z-index:-1;
}
.reward-chest img{
  width:84px !important;
  height:84px !important;
  object-fit:contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.24));
}
.reward-reveal{
  display:grid;
  gap:8px;
  padding:10px 12px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(7,19,30,.24), rgba(7,19,30,.42));
  border:1px solid rgba(226,181,82,.20);
}
.reward-line{
  justify-content:center;
}
#rewardGold{
  font-size:2.15rem !important;
  line-height:1;
}
#rewardRarity{
  justify-self:center;
  min-width:126px;
}
#rewardLoot{
  font-size:.96rem;
}
.modal-card .primary-btn{
  min-width:210px;
}

/* Level intro / result cards match the new reward presentation even if the intro overlay is re-enabled later */
.level-intro{
  backdrop-filter: blur(6px);
  background: radial-gradient(circle at 50% 16%, rgba(255,239,177,.08), rgba(4,10,16,.52) 38%, rgba(4,10,16,.72) 100%);
}
.level-intro-card{
  position:relative;
  overflow:hidden;
  border-radius:26px !important;
  padding:18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(43,82,124,.98), rgba(26,57,88,.98) 56%, rgba(14,35,56,.99)) border-box !important;
  border:2px solid rgba(226,181,82,.72) !important;
  box-shadow:0 18px 36px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.level-intro-card::before{
  content:"BATTLE PREVIEW";
  position:static;
  display:inline-block;
  margin-bottom:10px;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid rgba(255,232,164,.24);
  background:rgba(9,24,38,.48);
  color:#ffe7ab;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.16em;
}
.level-intro-card h3{
  font-size:1.5rem !important;
  margin-bottom:10px;
}
.intro-opponent{
  padding:10px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(8,20,32,.22), rgba(8,20,32,.40));
  border:1px solid rgba(226,181,82,.20);
}
.intro-opponent img{
  border-radius:16px;
  border:2px solid rgba(226,181,82,.30);
}
.level-intro-card p{
  color:#efe4ca !important;
}
.level-intro-card .primary-btn{
  min-width:220px;
}

@media (max-width:700px), (orientation:portrait){
  .modal-card{
    width:min(94vw, 420px) !important;
    border-radius:24px !important;
    padding:16px 14px 18px !important;
  }
  .modal-icon{
    width:76px; height:76px; border-radius:22px; font-size:2.2rem !important;
  }
  .modal-card h2{ font-size:1.52rem !important; }
  .reward-chest{ width:116px !important; height:116px !important; border-radius:22px !important; }
  .reward-chest img{ width:72px !important; height:72px !important; }
  #rewardGold{ font-size:1.9rem !important; }
  .level-intro-card{ padding:15px !important; }
  .level-intro-card h3{ font-size:1.24rem !important; }
}


/* ===== V41 global consistency pass ===== */
:root{
  --ui-radius-xl: 28px;
  --ui-radius-lg: 22px;
  --ui-radius-md: 18px;
  --ui-radius-sm: 14px;
  --ui-gap-xl: 14px;
  --ui-gap-lg: 12px;
  --ui-gap-md: 10px;
  --ui-gap-sm: 8px;
  --ui-title: clamp(1.42rem, 2.5vw, 1.86rem);
  --ui-subtitle: clamp(1.08rem, 2vw, 1.32rem);
  --ui-body: .94rem;
  --ui-small: .79rem;
}

html, body{
  font-size:16px;
}
body{
  line-height:1.35;
}

/* Shared vertical rhythm */
.screen.active > * + *,
.player-shell > * + *,
.map-screen-shell > * + *,
.shop-shell > * + *,
.loadout-shell > * + *,
#gameScreen > * + *{
  margin-top:0;
}

/* Headings and copy */
h1, h2, h3, .brand-title, .map-title, .player-hero-card h1, .shop-copy h1,
.level-intro-card h3, .modal-card h2, #missionTitle, #mapMissionName, .board-top h2{
  line-height:1.05;
}
h1, .brand-title, .map-title, .player-hero-card h1, .shop-copy h1{
  font-size:var(--ui-title) !important;
}
h2, .board-top h2, .panel-card h2, .charm-panel-card h2{
  font-size:var(--ui-subtitle) !important;
}
p, .brand-sub, .shop-copy p, .player-hero-card p, .modal-card p, .battle-message,
.spell-tip, .map-detail p, .player-help, .status-card span, .friend span, .spell-row span,
.loadout-item small, .shop-item small{
  font-size:var(--ui-body);
}
.eyebrow, .map-pill, .rarity-pill, .player-coin-chip, .gold-chip, .reserve-chip,
.shop-reserve-summary, .shop-daily-special, .map-summary > div, .player-stats-grid span,
.goal-chip span, .hud-chip span, .spell-tip, .battle-message{
  font-size:var(--ui-small) !important;
}

/* Button hierarchy and sizing */
.primary-btn,
.small-btn,
.quickbar-btn,
.tiny-toggle,
.step-btn,
.text-link-btn{
  transition:transform .14s ease, box-shadow .18s ease, filter .18s ease;
}
.primary-btn{
  min-height:46px;
  padding:12px 18px;
  font-size:.97rem;
  font-weight:900;
  letter-spacing:.02em;
}
.small-btn,
.tiny-toggle{
  min-height:40px;
  padding:10px 14px;
  font-size:.86rem;
  font-weight:800;
}
.step-btn{
  min-height:34px;
  min-width:34px;
  font-size:1rem;
  padding:0;
}
.text-link-btn{
  padding:4px 8px;
  font-size:.87rem;
}
.primary-btn:hover,
.small-btn:hover,
.quickbar-btn:hover,
.tiny-toggle:hover,
.step-btn:hover,
.text-link-btn:hover{ filter:brightness(1.04); }

/* Shared card rounding */
.player-hero-card,
.player-create-card,
.player-card,
.map-topbar-card,
.map-info,
.journey-map-card,
.shop-hero-card,
.shop-note-card,
.wendy-shop-scene-card,
.loadout-hero-card,
.charm-panel-card,
.story-stage,
.board-panel,
.game-drawer,
.panel-card,
.modal-card,
.level-intro-card,
.loadout-item,
.shop-item,
.charm-card,
.equipped-slot,
.hud,
.board-battle{
  border-radius:var(--ui-radius-xl) !important;
}
.hud-chip,
.goal-chip,
.player-stats-grid div,
.map-summary > div,
.shop-icon,
.charm-icon,
.status-card,
.friend,
.spell-row,
.booster,
.reward-reveal,
.board-top,
.board-wrap,
.battle-message,
.spell-tip{
  border-radius:var(--ui-radius-md) !important;
}

/* Icon sizing */
.shop-icon,
.charm-icon{
  width:60px;
  height:60px;
  font-size:1.72rem;
}
.modal-icon{
  width:82px;
  height:82px;
  font-size:2.5rem !important;
}
.map-hero-img,
.map-enemy-img,
.character-card img{
  border-radius:18px !important;
}
.fighter-image{
  border-radius:18px !important;
}

/* Space tightening for lists and utility cards */
.player-stats-grid,
.map-summary,
.goal-row,
.equipped-slots,
.charm-grid,
.loadout-grid,
#shopScreen .shop-grid,
.game-quickbar,
.play-layout,
.left-panel,
.right-panel,
.companions,
.spellbook{
  gap:var(--ui-gap-lg) !important;
}
.friend,
.spell-row,
.status-card,
.booster,
.shop-item,
.loadout-item,
.charm-card,
.equipped-slot{
  padding:12px;
}

/* Better button alignment inside cards */
.player-card-actions,
.loadout-actions,
.map-screen-actions,
.map-bottom-actions,
.mission-actions{
  gap:var(--ui-gap-sm);
}
.player-card-actions .small-btn,
.map-bottom-actions .primary-btn{
  min-width:0;
}

/* More consistent pills/chips */
.gold-chip,
.reserve-chip,
.player-coin-chip,
.map-pill,
.rarity-pill{
  padding:7px 11px;
  line-height:1;
}
.rarity-pill{
  font-weight:900;
}

/* Modal/result consistency */
.modal-card .primary-btn,
.level-intro-card .primary-btn{
  min-height:44px;
}
.reward-line{ line-height:1.1; }

/* Gameplay readability */
#gameScreen .hud-chip strong,
#gameScreen .goal-chip b,
#gameScreen .fighter-copy strong,
#gameScreen .status-card strong,
#gameScreen .friend b,
#gameScreen .spell-row b{
  font-size:.96rem;
}
#gameScreen .quickbar-btn{
  letter-spacing:.01em;
}
#gameScreen .board-top h2{
  line-height:1.1;
}

/* Portrait-specific tightening */
@media (max-width:700px), (orientation:portrait){
  html, body{ font-size:15px; }
  .primary-btn{ min-height:42px; padding:10px 15px; font-size:.9rem; }
  .small-btn, .tiny-toggle{ min-height:37px; padding:9px 12px; font-size:.8rem; }
  .shop-icon, .charm-icon{ width:54px; height:54px; font-size:1.5rem; }
  .modal-icon{ width:74px; height:74px; font-size:2.2rem !important; }
  .player-hero-card,
  .player-create-card,
  .player-card,
  .map-topbar-card,
  .map-info,
  .journey-map-card,
  .shop-hero-card,
  .shop-note-card,
  .wendy-shop-scene-card,
  .loadout-hero-card,
  .charm-panel-card,
  .story-stage,
  .board-panel,
  .game-drawer,
  .panel-card,
  .modal-card,
  .level-intro-card,
  .loadout-item,
  .shop-item,
  .charm-card,
  .equipped-slot,
  .hud,
  .board-battle{ border-radius:22px !important; }
  .hud-chip,
  .goal-chip,
  .player-stats-grid div,
  .map-summary > div,
  .shop-icon,
  .charm-icon,
  .status-card,
  .friend,
  .spell-row,
  .booster,
  .reward-reveal,
  .board-top,
  .board-wrap,
  .battle-message,
  .spell-tip{ border-radius:14px !important; }
  .friend,
  .spell-row,
  .status-card,
  .booster,
  .shop-item,
  .loadout-item,
  .charm-card,
  .equipped-slot{ padding:10px; }
}


/* ===== V42 magic-board and feedback polish ===== */
.screen.active{
  animation: screenLiftIn .26s ease-out;
}

.cell{
  transition:transform .12s ease,filter .12s ease,opacity .15s ease,box-shadow .18s ease, border-color .18s ease;
}
.cell.selected{
  transform:scale(.90);
  filter:brightness(1.2) saturate(1.08);
}
.cell.selected::after{
  animation:selectedRunePulse .68s ease-in-out infinite alternate;
}
.cell.selected-fire{ box-shadow:0 0 0 2px rgba(255,160,92,.96), 0 0 22px rgba(255,120,70,.62), inset 0 0 16px rgba(255,138,77,.18); }
.cell.selected-ice{ box-shadow:0 0 0 2px rgba(158,227,255,.96), 0 0 22px rgba(103,199,255,.58), inset 0 0 16px rgba(142,220,255,.18); }
.cell.selected-water{ box-shadow:0 0 0 2px rgba(126,229,255,.96), 0 0 22px rgba(85,216,255,.58), inset 0 0 16px rgba(85,216,255,.18); }
.cell.selected-nature{ box-shadow:0 0 0 2px rgba(141,245,150,.96), 0 0 22px rgba(107,229,126,.58), inset 0 0 16px rgba(107,229,126,.18); }
.cell.selected-wind{ box-shadow:0 0 0 2px rgba(212,184,255,.96), 0 0 22px rgba(198,168,255,.58), inset 0 0 16px rgba(198,168,255,.18); }
.cell.selected-star{ box-shadow:0 0 0 2px rgba(255,231,133,.98), 0 0 24px rgba(255,216,96,.68), inset 0 0 16px rgba(255,216,96,.18); }

.board-burst{
  width:22px;
  height:22px;
}
.board-burst.cast-burst{
  animation:boardBurstCast .62s ease-out forwards;
}
.board-burst.trace-burst{
  width:14px;
  height:14px;
  opacity:.95;
  animation:boardBurstTrace .34s ease-out forwards;
}
.fire-burst{ filter:saturate(1.08); }
.star-burst{ filter:saturate(1.14) brightness(1.05); }
.board-fx-particle{
  font-size:1.08rem;
  animation:boardParticle 900ms ease-out forwards;
}
.board-fx-particle.cast-particle{
  text-shadow:0 0 12px currentColor, 0 0 20px currentColor;
}
.board-fx-particle.trace-particle{
  font-size:.85rem;
  opacity:.9;
  animation:traceParticle 620ms ease-out forwards;
}
.board-fx-particle.rune-trail{
  font-size:.82rem;
  opacity:.92;
  animation:runeTrail 720ms ease-out forwards;
}
.board-fx-particle.fire-particle{ filter:drop-shadow(0 0 7px rgba(255,110,55,.75)); }
.board-fx-particle.star-particle{ filter:drop-shadow(0 0 8px rgba(255,216,96,.82)); }
.board-fx-particle.water-particle{ filter:drop-shadow(0 0 7px rgba(85,216,255,.78)); }
.board-fx-particle.nature-particle{ filter:drop-shadow(0 0 7px rgba(107,229,126,.78)); }
.board-fx-particle.ice-particle{ filter:drop-shadow(0 0 7px rgba(142,220,255,.78)); }
.board-fx-particle.wind-particle{ filter:drop-shadow(0 0 7px rgba(198,168,255,.78)); }

.cell.spell-fire{ animation:spellFire 560ms ease-out; }
.cell.spell-fire::before{
  inset:6px;
  background:
    radial-gradient(circle at 50% 82%, rgba(255,205,108,.98), rgba(255,109,46,.84) 42%, transparent 70%),
    radial-gradient(circle at 30% 60%, rgba(255,243,181,.80), transparent 36%);
  box-shadow:0 0 22px rgba(255,110,55,.74), inset 0 -8px 10px rgba(255,190,92,.18);
  animation:flameOver 600ms ease-out;
}
.cell.spell-ice::before{
  box-shadow:0 0 22px rgba(103,199,255,.62);
  animation:iceShatterOver 560ms ease-out;
}
.cell.spell-water::before{
  inset:6px;
  background:radial-gradient(circle at 50% 55%, rgba(225,250,255,.92), rgba(76,195,243,.62) 42%, transparent 72%);
  box-shadow:0 0 22px rgba(85,216,255,.62);
  animation:splashOver 560ms ease-out;
}
.cell.spell-nature::before{
  font-size:1.38rem;
  animation:bloomOver 620ms ease-out;
}
.cell.spell-wind::before{
  font-size:1.08rem;
  animation:spinOver 560ms ease-out;
}
.cell.spell-star::before{
  font-size:1.38rem;
  text-shadow:0 0 16px rgba(255,216,90,.82), 0 0 24px rgba(255,238,158,.42);
  animation:starOver 620ms ease-out;
}

.battle-message,
.spell-tip,
.hud-chip,
.goal-chip,
.quickbar-btn,
.primary-btn,
.small-btn,
.panel-card,
.board-panel,
.modal-card{
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
}
.quickbar-btn:active,
.primary-btn:active,
.small-btn:active{
  transform:translateY(1px) scale(.985);
}

@keyframes screenLiftIn{
  0%{ opacity:0; transform:translateY(8px) scale(.992); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes selectedRunePulse{
  0%{ opacity:.8; transform:scale(.98); }
  100%{ opacity:1; transform:scale(1.03); }
}
@keyframes boardBurstCast{
  0%{opacity:.95; transform:translate(-50%,-50%) scale(.18);}
  100%{opacity:0; transform:translate(-50%,-50%) scale(calc(3.1 * var(--burst-scale, 1)));}
}
@keyframes boardBurstTrace{
  0%{opacity:.95; transform:translate(-50%,-50%) scale(.22);}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.85);}
}
@keyframes traceParticle{
  0%{opacity:.05; transform:translate(-50%,-50%) scale(.55);}
  22%{opacity:1;}
  100%{opacity:0; transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(.92);}
}
@keyframes runeTrail{
  0%{opacity:.1; transform:translate(-50%,-50%) scale(.45);}
  20%{opacity:1;}
  100%{opacity:0; transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(var(--s,1));}
}
@keyframes flameOver{
  0%{opacity:0; transform:scale(.5) translateY(6px);}
  35%{opacity:1;}
  100%{opacity:0; transform:scale(1.1) translateY(-6px);}
}
@keyframes iceShatterOver{
  0%{opacity:0; transform:scale(.45) rotate(-12deg);}
  35%{opacity:1;}
  100%{opacity:0; transform:scale(1.12) rotate(12deg);}
}

@media (max-width:700px), (orientation:portrait){
  .screen.active{ animation-duration:.22s; }
  .board-fx-particle.cast-particle{ font-size:.98rem; }
  .board-fx-particle.trace-particle{ font-size:.78rem; }
}


/* ===== V43 sound polish + enemy attack FX ===== */
.enemy-attack-label{
  font-size:.86rem;
  letter-spacing:.04em;
  text-shadow:0 2px 10px rgba(0,0,0,.62), 0 0 14px currentColor;
}
.mud-spark{ color:#d5a06e !important; }
.moon-spark{ color:#e5ddff !important; }
.crystal-spark{ color:#d7f7ff !important; }
.moon-echo,
.crystal-echo{
  opacity:.88;
}
.moon-echo{
  height:4px !important;
  box-shadow:0 0 18px rgba(215,204,255,.85) !important;
}
.crystal-echo{
  height:5px !important;
  box-shadow:0 0 20px rgba(191,240,255,.88) !important;
}
.hero-splash{
  position:absolute;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:6;
}
.mud-splash{
  width:64px;
  height:64px;
  border-radius:40% 60% 52% 48% / 52% 44% 56% 48%;
  background:radial-gradient(circle at 50% 45%, rgba(236,196,149,.95), rgba(181,118,71,.75) 38%, transparent 70%);
  filter:blur(.5px);
  animation:heroSplashPop .6s ease-out forwards;
}
.moon-halo{
  width:88px;
  height:88px;
  border-radius:50%;
  border:3px solid rgba(224,215,255,.82);
  box-shadow:0 0 20px rgba(215,204,255,.6), inset 0 0 12px rgba(255,255,255,.22);
  animation:moonHalo .72s ease-out forwards;
}
.crystal-shatter{
  width:84px;
  height:84px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(224,250,255,.2), transparent 62%);
  animation:crystalShatter .66s ease-out forwards;
}
.crystal-shatter::before,
.crystal-shatter::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:5px;
  height:38px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(223,247,255,.95), rgba(127,225,255,.2));
  box-shadow:0 0 10px rgba(185,240,255,.8);
  transform-origin:center center;
}
.crystal-shatter::before{ transform:translate(-50%,-50%) rotate(28deg); }
.crystal-shatter::after{ transform:translate(-50%,-50%) rotate(-34deg); }
.dog-react{ animation:dogReact .42s ease-out; }
.goldy-react{ animation:goldyReact .45s ease-out; }

@keyframes heroSplashPop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.35) rotate(-14deg); }
  28%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.15) rotate(10deg); }
}
@keyframes moonHalo{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.5); }
  25%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.16); }
}
@keyframes crystalShatter{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.4) rotate(-12deg); }
  24%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.2) rotate(12deg); }
}
@keyframes dogReact{
  0%,100%{ transform:translateY(0) scale(1); }
  45%{ transform:translate(-2px,-6px) scale(1.08); }
}
@keyframes goldyReact{
  0%,100%{ transform:translateY(0) scale(1); }
  45%{ transform:translate(3px,-7px) scale(1.14); }
}


/* ===== V44 screen isolation + more levels + mixed spellbook ===== */

/* Critical screen-isolation fix:
   an earlier #gameScreen {display:flex} rule overrode .screen{display:none}.
   Inactive screens must never render beneath Splash, Shop, Loadout, or Player Menu. */
.screen:not(.active){
  display:none !important;
  pointer-events:none !important;
}
.screen.active{
  display:block;
}
#gameScreen.active{
  display:flex;
}

/* Six-stop adventure map */
.journey-node.node-0{left:4%;bottom:7%}
.journey-node.node-1{left:14%;top:49%}
.journey-node.node-2{left:36%;top:22%}
.journey-node.node-3{right:27%;top:10%}
.journey-node.node-4{right:5%;top:43%}
.journey-node.node-5{right:18%;bottom:5%}
.journey-node.cleared::after{
  content:"✓";
  position:absolute;
  right:7px;
  top:7px;
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#183525;
  background:#9cf0a8;
  border:2px solid #ffe8a8;
  font-size:.72rem;
  font-weight:900;
}

/* Mixed spellbook */
.mixed-spells-header{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(226,181,82,.22);
}
.mixed-spells-header small{
  display:block;
  margin-top:3px;
  color:#e9ddc2 !important;
}
.mix-spell-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
  padding:9px;
  border-radius:14px;
  background:rgba(8,20,32,.24);
  border:1px solid rgba(226,181,82,.20);
  transition:opacity .18s ease, filter .18s ease, transform .18s ease;
}
.mix-spell-row .mix-icon{
  width:48px;
  height:42px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.05rem;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.01));
  border:1px solid rgba(226,181,82,.20);
}
.mix-spell-row b{
  display:block;
  color:#fff0c3;
  font-size:.85rem;
}
.mix-spell-row span:not(.mix-icon){
  display:block;
  color:#e7dbc0;
  font-size:.68rem;
  line-height:1.25;
}
.mix-spell-row.locked{
  opacity:.48;
  filter:grayscale(.72);
}
.mix-spell-row.locked .mix-icon::after{
  content:"🔒";
  margin-left:4px;
  font-size:.75rem;
}
.mix-spell-row.learned{
  box-shadow:0 0 0 1px rgba(255,216,107,.14), inset 0 1px 0 rgba(255,255,255,.05);
}
.mix-spell-row.learned .mix-icon{
  box-shadow:0 0 14px rgba(255,216,107,.12);
}

/* New enemy attack visual variants */
.ember-strike{
  height:8px !important;
  background:linear-gradient(90deg,#ffb25d,#ff6043) !important;
  box-shadow:0 0 24px rgba(255,105,62,.88) !important;
}
.mirror-strike{
  height:5px !important;
  background:linear-gradient(90deg,#d9c5ff,#ff9fe8,#c9e9ff) !important;
  box-shadow:0 0 24px rgba(238,157,255,.78) !important;
}
.storm-strike{
  height:7px !important;
  background:linear-gradient(90deg,#d8f8ff,#7fb9ff,#cfb6ff) !important;
  box-shadow:0 0 26px rgba(115,190,255,.90) !important;
}

/* Map nodes get a little more room for six stages */
@media (max-width:700px), (orientation:portrait){
  .journey-node{
    width:68px !important;
    min-height:68px !important;
  }
  .journey-node .node-num{
    font-size:1.05rem !important;
  }
  .journey-node small{
    width:48px !important;
    font-size:.51rem !important;
  }
  .journey-node.node-0{left:3%;bottom:5%}
  .journey-node.node-1{left:11%;top:51%}
  .journey-node.node-2{left:33%;top:24%}
  .journey-node.node-3{right:24%;top:8%}
  .journey-node.node-4{right:3%;top:44%}
  .journey-node.node-5{right:15%;bottom:3%}
}


/* ===== V45 second northern map + improved dragon portrait ===== */
.journey-map-stack{display:flex;flex-direction:column;gap:12px}
.north-map-card,.south-map-card{overflow:hidden}
.north-map-card .journey-scene-img,.south-map-card .journey-scene-img{display:block;width:100%;height:auto}
.journey-map-connector{text-align:center;padding:10px 14px;border-radius:18px;color:#fff1c4;font-weight:700;letter-spacing:.02em;background:linear-gradient(180deg, rgba(19,34,50,.86), rgba(10,20,31,.92));border:2px solid rgba(225,182,82,.42);box-shadow:0 12px 28px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06)}
.south-map-card .south-node-0{left:5%;bottom:7%}
.south-map-card .south-node-1{left:17%;top:44%}
.south-map-card .south-node-2{right:19%;top:8%}
.north-map-card .north-node-3{left:48%;top:79%}
.north-map-card .north-node-4{left:20%;top:43%}
.north-map-card .north-node-5{right:11%;top:9%}
.journey-map-stack .journey-node{width:92px;min-height:92px}
.journey-map-stack .journey-node small{width:64px;font-size:.64rem}
.north-map-card .journey-node.selected{box-shadow:0 0 0 3px rgba(255,233,155,.22),0 12px 34px rgba(0,0,0,.28)}
@media (max-width:700px), (orientation:portrait){
  .journey-map-stack{gap:10px}
  .journey-map-connector{font-size:.78rem;padding:9px 12px}
  .journey-map-stack .journey-node{width:78px;min-height:78px}
  .journey-map-stack .journey-node .node-num{font-size:1.18rem}
  .journey-map-stack .journey-node small{width:50px;font-size:.54rem}
  .south-map-card .south-node-0{left:4%;bottom:6%}
  .south-map-card .south-node-1{left:14%;top:45%}
  .south-map-card .south-node-2{right:14%;top:7%}
  .north-map-card .north-node-3{left:45%;top:79%}
  .north-map-card .north-node-4{left:16%;top:45%}
  .north-map-card .north-node-5{right:7%;top:10%}
}


/* ===== V47 map region polish + travel north transition ===== */
.map-region-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.region-chip{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:999px;border:1px solid rgba(232,197,110,.42);background:linear-gradient(180deg, rgba(26,42,64,.88), rgba(12,20,32,.9));color:#fff1c7;font-weight:700;font-size:.78rem;letter-spacing:.03em;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 18px rgba(0,0,0,.15)}
.region-chip.ember{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,152,90,.18),0 8px 18px rgba(0,0,0,.18)}
.region-chip.marsh{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(198,141,255,.18),0 8px 18px rgba(0,0,0,.18)}
.region-chip.storm{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(102,182,255,.18),0 8px 18px rgba(0,0,0,.18)}
.travel-north-banner{position:relative;overflow:hidden;margin:8px 0 2px;border-radius:24px;border:2px solid rgba(232,197,110,.45);background:radial-gradient(circle at 20% 30%, rgba(255,172,92,.18), transparent 26%),radial-gradient(circle at 80% 30%, rgba(144,190,255,.18), transparent 24%),linear-gradient(180deg, rgba(22,36,55,.96), rgba(8,15,24,.96));box-shadow:0 16px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);transform-origin:center top;animation:travelBannerIn .5s ease both}
.travel-north-inner{text-align:center;padding:16px 18px 18px}
.travel-north-inner h3{margin:2px 0 6px;color:#fff2c8;font-size:1.35rem}
.travel-north-inner p{margin:0;color:#e8edf5;font-size:.94rem}
@keyframes travelBannerIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.map-screen-shell[data-theme="south"] .map-info{background:radial-gradient(circle at 15% 20%, rgba(255,220,122,.14), transparent 30%),linear-gradient(180deg, rgba(20,37,57,.94), rgba(9,18,29,.96))}
.map-screen-shell[data-theme="ember"] .map-info{background:radial-gradient(circle at 12% 18%, rgba(255,120,68,.18), transparent 30%),linear-gradient(180deg, rgba(49,23,20,.90), rgba(17,18,28,.96))}
.map-screen-shell[data-theme="marsh"] .map-info{background:radial-gradient(circle at 12% 18%, rgba(203,132,255,.18), transparent 30%),linear-gradient(180deg, rgba(31,24,52,.92), rgba(12,18,31,.96))}
.map-screen-shell[data-theme="storm"] .map-info{background:radial-gradient(circle at 12% 18%, rgba(107,195,255,.18), transparent 30%),linear-gradient(180deg, rgba(20,30,56,.92), rgba(10,16,28,.96))}
.map-screen-shell[data-theme="ember"] .map-pill,.map-screen-shell[data-theme="ember"] .map-status{border-color:rgba(255,145,76,.42)}
.map-screen-shell[data-theme="marsh"] .map-pill,.map-screen-shell[data-theme="marsh"] .map-status{border-color:rgba(204,152,255,.42)}
.map-screen-shell[data-theme="storm"] .map-pill,.map-screen-shell[data-theme="storm"] .map-status{border-color:rgba(114,193,255,.42)}
.map-region-line{margin:4px 0 10px;color:#fff0c7;font-weight:600;font-size:.95rem}
.north-map-card::after,.south-map-card::after{content:'';position:absolute;inset:auto 0 0 0;height:26%;background:linear-gradient(180deg, transparent, rgba(9,14,24,.18) 40%, rgba(9,14,24,.36));pointer-events:none}
.north-map-card::before{content:'NORTHERN ROAD'}
.south-map-card::before{content:'SOUTHERN ROAD'}
.north-map-card .north-node-3.selected,.north-map-card .north-node-3{box-shadow:0 0 0 1px rgba(255,140,80,.16)}
.north-map-card .north-node-4.selected,.north-map-card .north-node-4{box-shadow:0 0 0 1px rgba(211,150,255,.16)}
.north-map-card .north-node-5.selected,.north-map-card .north-node-5{box-shadow:0 0 0 1px rgba(122,201,255,.16)}
@media (max-width:700px), (orientation:portrait){.map-region-strip{gap:6px;margin-top:10px}.region-chip{padding:6px 10px;font-size:.68rem}.travel-north-inner{padding:14px 14px 16px}.travel-north-inner h3{font-size:1.1rem}.travel-north-inner p{font-size:.84rem}.map-region-line{font-size:.84rem;margin-bottom:8px}}


/* ===== V48 map storytelling + animated north route ===== */
.north-map-card{overflow:hidden}
.north-map-card::before{z-index:2}
.north-map-card::after{z-index:1}
.north-map-card .journey-scene-img{filter:saturate(1.05) contrast(1.02)}
.north-map-card .journey-map-overlay{position:relative;z-index:3}
.north-map-card .journey-map-overlay::before,
.north-map-card .journey-map-overlay::after{
  content:'';position:absolute;pointer-events:none;inset:0;border-radius:inherit;
}
.north-map-card .journey-map-overlay::before{
  background:
    radial-gradient(circle at 22% 34%, rgba(255,126,76,.28), transparent 17%),
    radial-gradient(circle at 50% 54%, rgba(202,148,255,.22), transparent 18%),
    radial-gradient(circle at 78% 26%, rgba(120,205,255,.24), transparent 17%);
  animation:northGlowDrift 7s ease-in-out infinite alternate;
}
.north-map-card .journey-map-overlay::after{
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.18), transparent 7%),
    radial-gradient(circle at 26% 25%, rgba(255,255,255,.12), transparent 5%),
    radial-gradient(circle at 60% 58%, rgba(255,255,255,.10), transparent 4%);
  animation:stormTwinkle 4.8s linear infinite;
  mix-blend-mode:screen;
}
@keyframes northGlowDrift{0%{transform:translateX(-1.5%) translateY(0);opacity:.72}100%{transform:translateX(1.5%) translateY(-1.5%);opacity:1}}
@keyframes stormTwinkle{0%,100%{opacity:.35}25%{opacity:.9}50%{opacity:.48}75%{opacity:.72}}
.north-node-3{animation:emberPulse 2.2s ease-in-out infinite}
.north-node-4{animation:marshPulse 2.8s ease-in-out infinite}
.north-node-5{animation:stormPulse 2.1s ease-in-out infinite}
@keyframes emberPulse{0%,100%{box-shadow:0 0 0 1px rgba(255,146,82,.20),0 0 18px rgba(255,110,56,.16)}50%{box-shadow:0 0 0 1px rgba(255,166,92,.45),0 0 24px rgba(255,110,56,.34)}}
@keyframes marshPulse{0%,100%{box-shadow:0 0 0 1px rgba(205,150,255,.20),0 0 18px rgba(187,118,255,.16)}50%{box-shadow:0 0 0 1px rgba(225,170,255,.45),0 0 24px rgba(187,118,255,.34)}}
@keyframes stormPulse{0%,100%{box-shadow:0 0 0 1px rgba(122,201,255,.20),0 0 18px rgba(102,170,255,.16)}50%{box-shadow:0 0 0 1px rgba(160,220,255,.45),0 0 24px rgba(102,170,255,.34)}}
.map-story-card{
  border-radius:22px;
  border:1px solid rgba(232,197,110,.35);
  background:linear-gradient(180deg, rgba(20,33,51,.95), rgba(9,16,26,.96));
  padding:14px 16px;
  color:#eef2f9;
  box-shadow:0 12px 26px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.05);
}
.map-story-card strong{display:block;color:#fff3ca;line-height:1.35;margin:2px 0 8px}
.map-story-card p{margin:0;font-size:.92rem;color:#dce5f1;line-height:1.45}
.north-story-card{background:linear-gradient(180deg, rgba(40,26,45,.94), rgba(10,17,29,.96))}
.south-story-card{background:linear-gradient(180deg, rgba(21,38,57,.94), rgba(9,17,29,.96))}
.charm-shelf-card{margin-top:4px}
.charm-shop-grid{grid-template-columns:1fr 1fr}
.charm-shop-item{min-height:92px}
.charm-shop-item .shop-icon{font-size:1.45rem}
.charm-card[data-charm-card="hearthspark"] .charm-top .charm-icon,
.charm-card[data-charm-card="galefeather"] .charm-top .charm-icon,
.charm-card[data-charm-card="luckyacorn"] .charm-top .charm-icon{font-size:1.2rem}
@media (max-width:700px), (orientation:portrait){
  .map-story-card{padding:12px 14px;border-radius:18px}
  .map-story-card p{font-size:.84rem}
  .charm-shop-grid{grid-template-columns:1fr}
}


/* ===== V49 level-map state fixes ===== */
/* Only one completion checkmark. Older styles defined both ::before and ::after. */
.journey-node.cleared::before{
  content:none !important;
  display:none !important;
}
.journey-node.cleared::after{
  content:"✓" !important;
  right:6px !important;
  top:6px !important;
  bottom:auto !important;
}

/* A cleared node can never also display the lock icon. */
.journey-node.cleared.locked::after{
  content:"✓" !important;
}
.journey-node.locked:not(.cleared)::after{
  content:"🔒" !important;
  right:7px !important;
  top:7px !important;
  width:auto !important;
  height:auto !important;
  background:none !important;
  border:none !important;
  color:inherit !important;
  font-size:.95rem !important;
}

/* Clean map art now carries scenery/path only; interactive nodes supply all numbers/status. */
.journey-map-card .journey-node{
  z-index:5;
}


/* ===== V50 north-map level button fix ===== */
/* V48 animation styling accidentally changed the north overlay from absolute to relative,
   collapsing it below the image and taking the level buttons with it. */
.north-map-card,
.south-map-card{
  position:relative !important;
}
.north-map-card .journey-map-overlay,
.south-map-card .journey-map-overlay{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:4 !important;
  pointer-events:none;
}
.north-map-card .journey-node,
.south-map-card .journey-node{
  position:absolute !important;
  z-index:8 !important;
  pointer-events:auto !important;
  touch-action:manipulation;
}
/* Decorative north effects live behind the buttons and cannot intercept taps. */
.north-map-card .journey-map-overlay::before,
.north-map-card .journey-map-overlay::after{
  z-index:0 !important;
  pointer-events:none !important;
}
/* Reassert Level 4-6 positions against earlier global journey-node rules. */
.north-map-card .north-node-3{left:48% !important; top:79% !important; right:auto !important; bottom:auto !important;}
.north-map-card .north-node-4{left:20% !important; top:43% !important; right:auto !important; bottom:auto !important;}
.north-map-card .north-node-5{right:11% !important; top:9% !important; left:auto !important; bottom:auto !important;}
.south-map-card .south-node-0{left:5% !important; bottom:7% !important; right:auto !important; top:auto !important;}
.south-map-card .south-node-1{left:17% !important; top:44% !important; right:auto !important; bottom:auto !important;}
.south-map-card .south-node-2{right:19% !important; top:8% !important; left:auto !important; bottom:auto !important;}

@media (max-width:700px), (orientation:portrait){
  .north-map-card .north-node-3{left:45% !important; top:79% !important;}
  .north-map-card .north-node-4{left:16% !important; top:45% !important;}
  .north-map-card .north-node-5{right:7% !important; top:10% !important;}
  .south-map-card .south-node-0{left:4% !important; bottom:6% !important;}
  .south-map-card .south-node-1{left:14% !important; top:45% !important;}
  .south-map-card .south-node-2{right:14% !important; top:7% !important;}
}

/* ===== V51 spellbook repair + map start popup ===== */
#spellbookPanel{
  max-height:min(72vh, 760px);
  overflow:auto;
}
#spellbookPanel .eyebrow{
  display:block;
}
.spellbook-basics,
.mixed-spell-list{
  display:grid;
  gap:10px;
  margin-top:10px;
}
#spellbookPanel .spell-row,
#spellbookPanel .mix-spell-row{
  display:grid !important;
  grid-template-columns:48px minmax(0, 1fr) !important;
  align-items:start;
  gap:10px;
  margin-top:0 !important;
  min-height:72px;
  padding:10px !important;
  overflow:hidden;
}
#spellbookPanel .spell-row img,
#spellbookPanel .mix-icon{
  width:48px !important;
  height:48px !important;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#spellbookPanel .spell-copy,
#spellbookPanel .mix-copy{
  min-width:0;
}
#spellbookPanel .spell-copy b,
#spellbookPanel .mix-copy b{
  display:block;
  margin:0 0 2px;
  line-height:1.2;
}
#spellbookPanel .spell-copy span,
#spellbookPanel .mix-copy span,
#spellbookPanel .mix-copy small{
  display:block;
  position:static !important;
  width:auto !important;
  margin:0;
  line-height:1.28;
  white-space:normal;
}
#spellbookPanel .mix-copy small{
  margin-top:4px;
  color:#fff1c7;
  opacity:.92;
  font-size:.68rem;
}
#spellbookPanel .mix-spell-row.locked{opacity:.65;filter:grayscale(.35)}

.level-select-popup{
  position:sticky;
  bottom:calc(env(safe-area-inset-bottom) + 10px);
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:14px auto 0;
  padding:12px 14px;
  max-width:760px;
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(38,73,109,.98), rgba(15,35,55,.98)) border-box;
  border:2px solid rgba(224,181,74,.68);
  box-shadow:0 12px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.level-select-popup-copy{
  display:grid;
  gap:2px;
  min-width:0;
}
.level-select-popup-copy strong{
  color:#fff0bf;
  font-size:1.05rem;
  line-height:1.15;
}
.level-select-popup-copy small{
  color:#e8edf5;
  opacity:.9;
}
.level-select-popup-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.level-select-popup.hidden{display:none !important}
.level-select-popup.locked .primary-btn{opacity:.72}

@media (max-width:700px), (orientation:portrait){
  .map-bottom-actions{display:none !important;}
  .level-select-popup{
    margin-top:10px;
    padding:12px;
    border-radius:18px;
    flex-direction:column;
    align-items:stretch;
  }
  .level-select-popup-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .level-select-popup-actions .small-btn,
  .level-select-popup-actions .primary-btn{
    width:100%;
    min-width:0;
  }
  #spellbookPanel{
    max-height:64vh;
  }
}


/* ===== V52 Level 6 survival tools ===== */
.survival-charm{
  box-shadow:0 0 0 1px rgba(126,201,255,.14), 0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.survival-charm-card{
  background:
    radial-gradient(circle at 85% 12%, rgba(125,208,255,.12), transparent 28%),
    linear-gradient(180deg, rgba(58,91,130,.98), rgba(27,55,87,.98) 56%, rgba(13,32,55,.99)) !important;
}
.survival-charm-card.owned-charm{
  box-shadow:0 0 0 2px rgba(154,224,255,.18), 0 0 24px rgba(96,187,255,.12), 0 12px 24px rgba(0,0,0,.22) !important;
}


/* ===== V53 Far North map + reliable mixed magic ===== */
.far-north-map-card{
  position:relative !important;
  overflow:hidden;
}
.far-north-map-card .journey-scene-img{
  display:block;
  width:100%;
  height:auto;
  filter:saturate(1.08) contrast(1.02);
}
.far-north-map-card .journey-map-overlay{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:4 !important;
  pointer-events:none;
}
.far-north-map-card .journey-node{
  position:absolute !important;
  z-index:8 !important;
  pointer-events:auto !important;
  touch-action:manipulation;
}
.far-north-map-card::before{
  content:"FAR NORTHERN ROAD";
  z-index:3;
}
.far-north-map-card .far-node-6{left:46% !important;top:79% !important;}
.far-north-map-card .far-node-7{left:18% !important;top:43% !important;}
.far-north-map-card .far-node-8{right:8% !important;top:8% !important;left:auto !important;}
.far-north-story-card{
  background:
    radial-gradient(circle at 16% 14%, rgba(106,198,112,.14), transparent 30%),
    radial-gradient(circle at 82% 16%, rgba(205,135,255,.12), transparent 28%),
    linear-gradient(180deg, rgba(24,42,48,.96), rgba(10,18,30,.98));
}

.map-screen-shell[data-theme="whisper"] .map-info{
  background:radial-gradient(circle at 14% 18%, rgba(94,190,104,.20), transparent 30%),linear-gradient(180deg, rgba(22,50,36,.94), rgba(9,20,25,.97));
}
.map-screen-shell[data-theme="prism"] .map-info{
  background:radial-gradient(circle at 14% 18%, rgba(221,132,255,.20), transparent 30%),linear-gradient(180deg, rgba(46,27,64,.94), rgba(14,18,34,.97));
}
.map-screen-shell[data-theme="frostfire"] .map-info{
  background:
    radial-gradient(circle at 12% 20%, rgba(114,211,255,.19), transparent 28%),
    radial-gradient(circle at 88% 20%, rgba(255,112,65,.15), transparent 26%),
    linear-gradient(180deg, rgba(24,36,62,.95), rgba(15,18,28,.98));
}

.mix-status{
  display:block;
  margin-top:3px;
  color:#cbd7e8;
  font-size:.65rem;
  line-height:1.15;
  transition:.18s ease;
}
.mix-status.active{
  color:#ffe7a3;
  text-shadow:0 0 10px rgba(255,215,95,.30);
}
.mixed-spell-list .mix-spell-row.learned{
  border-color:rgba(244,205,104,.42) !important;
}
.mixed-spell-list .mix-spell-row.learned .mix-icon{
  animation:mixIconGlow 2s ease-in-out infinite;
}
@keyframes mixIconGlow{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.05);filter:brightness(1.18)}
}

.thorn-strike{
  height:7px !important;
  background:linear-gradient(90deg,#b8f17f,#5fc46b) !important;
  box-shadow:0 0 24px rgba(91,202,101,.85) !important;
}
.prism-strike{
  height:6px !important;
  background:linear-gradient(90deg,#8fdcff,#e7a2ff,#ffd878,#9bffbe) !important;
  box-shadow:0 0 25px rgba(220,144,255,.82) !important;
}
.frostfire-strike{
  height:8px !important;
  background:linear-gradient(90deg,#8fe0ff,#dff8ff 45%,#ff9b65 55%,#ff664d) !important;
  box-shadow:0 0 28px rgba(134,211,255,.88) !important;
}

@media (max-width:700px), (orientation:portrait){
  .far-north-map-card .far-node-6{left:44% !important;top:79% !important;}
  .far-north-map-card .far-node-7{left:14% !important;top:45% !important;}
  .far-north-map-card .far-node-8{right:6% !important;top:9% !important;}
}


/* ===== V55 Mixed Magic reliability + feedback ===== */
.mix-status{
  min-height:18px;
  padding-top:2px;
}
.mix-status.active{
  color:#ffe49a !important;
  font-weight:900;
  letter-spacing:.01em;
  text-shadow:0 0 12px rgba(255,216,96,.34);
}

.mixed-spell-banner{
  position:absolute;
  left:50%;
  top:44%;
  z-index:60;
  transform:translate(-50%,-50%) scale(.78);
  display:flex;
  align-items:center;
  gap:10px;
  min-width:230px;
  max-width:86%;
  padding:12px 16px;
  border-radius:20px;
  border:2px solid rgba(255,221,116,.85);
  background:
    radial-gradient(circle at 18% 20%, rgba(255,245,190,.18), transparent 28%),
    linear-gradient(180deg, rgba(39,72,111,.97), rgba(18,39,64,.98));
  box-shadow:0 0 28px rgba(255,216,96,.32), 0 16px 34px rgba(0,0,0,.34);
  opacity:0;
  pointer-events:none;
}
.mixed-spell-banner.show{
  animation:mixedBannerPop 1.15s ease-out both;
}
.mixed-banner-icon{
  font-size:1.65rem;
  filter:drop-shadow(0 0 10px rgba(255,222,113,.45));
}
.mixed-spell-banner small{
  display:block;
  color:#ffe8a8;
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.16em;
}
.mixed-spell-banner strong{
  display:block;
  color:#fff5d7;
  font-size:1.15rem;
  line-height:1.05;
}
@keyframes mixedBannerPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
  28%{transform:translate(-50%,-50%) scale(1)}
  82%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-54%) scale(.96)}
}


/* ===== V56 mixed-spell second-step visibility ===== */
.cell.mix-target{
  position: relative;
}
.cell.mix-target::before{
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 18px;
  border: 2px dashed rgba(255,235,163,.72);
  opacity: .88;
  animation: mixTargetPulse 1.2s ease-in-out infinite;
  pointer-events: none;
}
.cell.mix-target-fire::before{ border-color: rgba(255,154,102,.86); box-shadow: 0 0 16px rgba(255,118,73,.25); }
.cell.mix-target-ice::before{ border-color: rgba(145,224,255,.9); box-shadow: 0 0 16px rgba(98,194,255,.26); }
.cell.mix-target-water::before{ border-color: rgba(120,231,255,.9); box-shadow: 0 0 16px rgba(85,216,255,.26); }
.cell.mix-target-nature::before{ border-color: rgba(146,245,156,.9); box-shadow: 0 0 16px rgba(106,228,126,.26); }
.cell.mix-target-wind::before{ border-color: rgba(219,190,255,.92); box-shadow: 0 0 16px rgba(198,168,255,.28); }
.cell.mix-target-star::before{ border-color: rgba(255,231,133,.96); box-shadow: 0 0 18px rgba(255,216,96,.3); }
.cell.selection-next{
  transform: scale(.93);
  filter: brightness(1.08);
}
.cell.selection-next::after{
  content: '';
  position: absolute;
  inset: 13px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,.82);
  box-shadow: 0 0 14px rgba(255,255,255,.24);
  animation: selectionNextBlink .95s ease-in-out infinite;
  pointer-events: none;
}
.mix-status.active{
  background: linear-gradient(180deg, rgba(255,236,170,.14), rgba(255,236,170,.04));
  border-radius: 999px;
  padding: 3px 8px;
  display: inline-block;
}
@keyframes mixTargetPulse{
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.04); opacity: 1; }
}
@keyframes selectionNextBlink{
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}


/* ===== V57 clearer mixed spell selection + second-group consumption ===== */
.board.mix-primed-board{box-shadow:0 0 0 2px rgba(255,220,119,.18),0 0 24px rgba(255,217,101,.10)}
.cell.mix-target{z-index:2}
.cell.mix-target::before{inset:5px!important;border-width:3px!important;border-style:solid!important;opacity:.95!important;animation:mixTargetPulseV57 1s ease-in-out infinite!important}
.cell.mix-target::after{content:"NEXT";position:absolute;left:50%;bottom:3px;transform:translateX(-50%);z-index:8;padding:2px 5px;border-radius:999px;background:rgba(12,28,45,.84);border:1px solid rgba(255,236,165,.55);color:#fff0b8;font-size:.42rem;font-weight:900;letter-spacing:.07em;pointer-events:none}
.cell.mix-second-selected{transform:scale(.86)!important;filter:brightness(1.32) saturate(1.18)!important;box-shadow:0 0 0 4px rgba(255,244,184,.92),0 0 28px rgba(255,220,100,.74),inset 0 0 22px rgba(255,236,155,.24)!important}
.cell.mix-second-selected::after{content:"MIX";background:rgba(93,55,137,.92);color:#fff6cf;border-color:rgba(255,235,154,.86)}
.cell.mix-consume{animation:mixConsumeV57 .32s ease-in forwards!important}
@keyframes mixTargetPulseV57{0%,100%{transform:scale(.95);filter:brightness(1);opacity:.72}50%{transform:scale(1.04);filter:brightness(1.28);opacity:1}}
@keyframes mixConsumeV57{0%{transform:scale(.86);opacity:1;filter:brightness(1.45)}45%{transform:scale(1.04);opacity:1;filter:brightness(1.8)}100%{transform:scale(.18);opacity:0;filter:brightness(2.1)}}


/* ===== V58 splash controls hardening ===== */
#splashScreen.active{
  position:relative;
  z-index:1;
}
#splashScreen .splash-image-card{
  isolation:isolate;
}
#splashScreen .splash-image-overlay{
  z-index:2;
  pointer-events:none !important;
}
#splashScreen .splash-button-stack{
  z-index:20 !important;
  pointer-events:auto !important;
}
#splashScreen .splash-button-stack button{
  position:relative;
  z-index:30 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  -webkit-user-select:none;
  user-select:none;
}
#enterMapBtn,
#playerActionBtn,
#newPlayerBtn,
#openPlayerMenuLink{
  pointer-events:auto !important;
}


/* ===== V60 compact loadout + charm bag ===== */
#loadoutScreen .shop-shell{
  gap:12px !important;
}

#loadoutScreen .loadout-hero-card{
  padding:14px !important;
}
#loadoutScreen .loadout-hero-card h1{
  margin:.15rem 0 .25rem !important;
}
#loadoutScreen .loadout-hero-card p{
  margin:.25rem 0 .55rem !important;
}

#loadoutScreen .loadout-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
}
#loadoutScreen .loadout-item{
  min-height:0 !important;
  padding:10px !important;
  gap:8px !important;
}
#loadoutScreen .loadout-item .shop-icon{
  width:38px !important;
  height:38px !important;
  font-size:1.25rem !important;
}
#loadoutScreen .loadout-item strong{
  font-size:.82rem !important;
}
#loadoutScreen .loadout-item small{
  font-size:.68rem !important;
}
#loadoutScreen .loadout-stepper{
  gap:5px !important;
}
#loadoutScreen .step-btn{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
}

#loadoutScreen .charm-panel-card{
  padding:14px !important;
}
#loadoutScreen .charm-panel-card h2{
  margin:.15rem 0 .2rem !important;
}
#loadoutScreen .charm-intro{
  margin:.15rem 0 .7rem !important;
}

#loadoutScreen .equipped-slots{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:9px !important;
}
#loadoutScreen .equipped-slot{
  min-height:0 !important;
  padding:9px !important;
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center !important;
  gap:7px !important;
}
#loadoutScreen .equipped-slot b{
  font-size:.72rem !important;
}
#loadoutScreen .equipped-slot span{
  font-size:.72rem !important;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#loadoutScreen .equipped-slot .small-btn{
  padding:5px 7px !important;
  min-height:30px !important;
  font-size:.62rem !important;
}

.charm-bag-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  margin-bottom:8px;
}
.charm-bag-header p{
  margin:2px 0 0 !important;
  color:#dce5ef;
  font-size:.72rem;
}
.bag-count{
  flex:0 0 auto;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(224,181,74,.34);
  color:#ffe6a4;
  background:rgba(8,20,34,.36);
  font-size:.66rem;
  font-weight:800;
}

.charm-bag-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}
.charm-bag-slot{
  position:relative;
  aspect-ratio:1;
  min-height:62px;
  display:grid;
  place-items:center;
  border-radius:16px;
  border:2px solid rgba(224,181,74,.25);
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.07), transparent 44%),
    linear-gradient(180deg, rgba(35,67,98,.92), rgba(15,37,59,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 7px 15px rgba(0,0,0,.18);
  color:#fff;
  cursor:pointer;
  touch-action:manipulation;
}
.charm-bag-slot .bag-charm-icon{
  font-size:1.65rem;
  line-height:1;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.3));
}
.charm-bag-slot small{
  position:absolute;
  right:5px;
  bottom:4px;
  display:grid;
  place-items:center;
  min-width:21px;
  height:21px;
  padding:0 5px;
  border-radius:999px;
  background:#11283d;
  border:1px solid rgba(255,225,139,.45);
  color:#ffe8a4;
  font-size:.62rem;
  font-weight:900;
}
.charm-bag-slot.unowned{
  opacity:.42;
  filter:grayscale(.72);
}
.charm-bag-slot.owned{
  border-color:rgba(231,192,91,.58);
}
.charm-bag-slot.equipped{
  border-color:#ffe17f;
  box-shadow:
    0 0 0 2px rgba(255,224,127,.17),
    0 0 18px rgba(255,211,87,.19),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.charm-bag-slot.equipped::before{
  content:"✓";
  position:absolute;
  left:5px;
  top:5px;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#75d887;
  border:1px solid #fff0b6;
  color:#17351e;
  font-weight:900;
  font-size:.7rem;
}

/* Charm information popup */
.charm-info-modal{
  position:fixed;
  inset:0;
  z-index:140;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(4,11,19,.72);
  backdrop-filter:blur(5px);
}
.charm-info-modal.hidden{
  display:none !important;
}
.charm-info-card{
  position:relative;
  width:min(92vw,380px);
  padding:22px 18px 18px;
  border-radius:24px;
  border:2px solid rgba(232,194,92,.72);
  background:
    radial-gradient(circle at 50% 5%, rgba(255,224,126,.12), transparent 28%),
    linear-gradient(180deg, rgba(38,73,109,.99), rgba(14,34,55,.99));
  box-shadow:0 24px 60px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07);
  text-align:center;
}
.charm-info-close{
  position:absolute;
  right:10px;
  top:9px;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(234,205,133,.42);
  background:rgba(8,20,32,.55);
  color:#fff0c5;
  font-size:1.35rem;
  line-height:1;
}
.charm-info-icon{
  width:74px;
  height:74px;
  margin:0 auto 8px;
  display:grid;
  place-items:center;
  border-radius:20px;
  border:2px solid rgba(236,204,111,.54);
  background:rgba(7,18,31,.34);
  font-size:2.35rem;
}
.charm-info-card h2{
  margin:8px 0 5px;
  color:#fff2c6;
}
.charm-info-card p{
  margin:0 auto 9px;
  color:#eef3f8;
  line-height:1.4;
}
.charm-info-owned{
  margin:8px auto 13px;
  color:#ffe08a;
  font-weight:900;
}
.charm-info-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.charm-info-actions .small-btn{
  grid-column:1 / -1;
}

@media (max-width:520px), (orientation:portrait){
  #loadoutScreen .loadout-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  #loadoutScreen .loadout-item{
    grid-template-columns:34px minmax(0,1fr) !important;
  }
  #loadoutScreen .loadout-stepper{
    grid-column:1 / -1;
    justify-content:center;
  }
  .charm-bag-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
  }
  .charm-bag-slot{
    min-height:58px;
    border-radius:14px;
  }
  .charm-bag-slot .bag-charm-icon{
    font-size:1.5rem;
  }
}


/* ===== V61 Underhill levels + animated board helpers ===== */
.underhill-map-card{
  position:relative !important;
  overflow:hidden;
}
.underhill-map-card .journey-map-overlay{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:4 !important;
  pointer-events:none;
}
.underhill-map-card .journey-node{
  position:absolute !important;
  z-index:8 !important;
  pointer-events:auto !important;
  touch-action:manipulation;
}
.underhill-map-card::before{content:"UNDERHILL PASSAGE";z-index:3}
.underhill-map-card .under-node-9{left:46% !important;top:78% !important}
.underhill-map-card .under-node-10{left:18% !important;top:43% !important}
.underhill-map-card .under-node-11{right:8% !important;top:8% !important;left:auto !important}
.underhill-story-card{
  background:
    radial-gradient(circle at 18% 18%,rgba(190,137,75,.18),transparent 28%),
    radial-gradient(circle at 82% 18%,rgba(113,213,160,.10),transparent 28%),
    linear-gradient(180deg,rgba(54,39,31,.97),rgba(18,22,25,.98));
}
.map-screen-shell[data-theme="underhill"] .map-info,
.map-screen-shell[data-theme="root"] .map-info,
.map-screen-shell[data-theme="vault"] .map-info{
  background:
    radial-gradient(circle at 12% 18%,rgba(192,137,76,.18),transparent 30%),
    linear-gradient(180deg,rgba(57,41,32,.95),rgba(15,21,25,.98));
}

.board-helper-sprite{
  position:absolute;
  width:86px;
  height:86px;
  margin-left:-43px;
  margin-top:-43px;
  z-index:90;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:400% 100%;
  background-position:0 0;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.35));
  animation:
    helperFrames .42s steps(3,end) infinite,
    helperEnter .66s cubic-bezier(.2,.75,.25,1) forwards;
}
.board-helper-sprite.dog-board-helper{width:102px;height:102px;margin-left:-51px;margin-top:-51px}
.board-helper-sprite.gnome-board-helper{width:92px;height:92px;margin-left:-46px;margin-top:-46px}
.board-helper-sprite.returning{
  animation:
    helperFrames .42s steps(3,end) infinite,
    helperExit .38s ease-in forwards;
}
.board-helper-label{
  position:absolute;
  z-index:94;
  transform:translate(-50%,-50%);
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(255,233,159,.78);
  background:rgba(20,36,54,.92);
  color:#fff0b7;
  font-weight:900;
  font-size:.72rem;
  letter-spacing:.06em;
  box-shadow:0 5px 15px rgba(0,0,0,.26);
}
@keyframes helperFrames{
  from{background-position:0 0}
  to{background-position:100% 0}
}
@keyframes helperEnter{
  0%{transform:translate(var(--from-x),var(--from-y)) scale(.72);opacity:0}
  20%{opacity:1}
  78%{transform:translate(0,0) scale(1.05)}
  100%{transform:translate(0,0) scale(1)}
}
@keyframes helperExit{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--from-x),var(--from-y)) scale(.72);opacity:0}
}
.dirt-strike{height:8px !important;background:linear-gradient(90deg,#e0b27a,#9b6739) !important;box-shadow:0 0 22px rgba(177,111,58,.8) !important}
.root-strike{height:8px !important;background:linear-gradient(90deg,#b3ee86,#57af63) !important;box-shadow:0 0 22px rgba(94,190,100,.82) !important}
.vault-strike{height:8px !important;background:linear-gradient(90deg,#ffd76f,#e29046) !important;box-shadow:0 0 24px rgba(246,184,79,.82) !important}

#friendsPanel .friend img[src*="_sprite"]{
  object-fit:cover;
  object-position:left center;
}

@media (max-width:700px), (orientation:portrait){
  .underhill-map-card .under-node-9{left:44% !important;top:79% !important}
  .underhill-map-card .under-node-10{left:14% !important;top:45% !important}
  .underhill-map-card .under-node-11{right:6% !important;top:9% !important}
  .board-helper-sprite{width:72px;height:72px;margin-left:-36px;margin-top:-36px}
  .board-helper-sprite.dog-board-helper{width:86px;height:86px;margin-left:-43px;margin-top:-43px}
  .board-helper-sprite.gnome-board-helper{width:78px;height:78px;margin-left:-39px;margin-top:-39px}
}


/* ===== V64 board magic polish ===== */
.board-panel.magic-pulse-sm{ animation:boardMagicPulseSm .52s ease-out; }
.board-panel.magic-pulse-lg{ animation:boardMagicPulseLg .76s ease-out; }
.trace-link{
  position:absolute;
  height:7px;
  border-radius:999px;
  transform-origin:left center;
  pointer-events:none;
  opacity:.92;
  z-index:1;
  mix-blend-mode:screen;
  box-shadow:0 0 10px currentColor, 0 0 18px currentColor;
  animation:traceLinkFade .3s ease-out forwards;
}
.fire-link{ color:#ff8b57; background:linear-gradient(90deg, rgba(255,199,124,.15), rgba(255,122,77,.95), rgba(255,230,169,.15)); }
.ice-link{ color:#a5ebff; background:linear-gradient(90deg, rgba(240,250,255,.18), rgba(142,220,255,.95), rgba(217,247,255,.18)); }
.water-link{ color:#6ce2ff; background:linear-gradient(90deg, rgba(218,249,255,.18), rgba(85,216,255,.95), rgba(189,243,255,.18)); }
.nature-link{ color:#7ef08a; background:linear-gradient(90deg, rgba(218,255,224,.18), rgba(107,229,126,.95), rgba(220,255,226,.18)); }
.wind-link{ color:#d1b8ff; background:linear-gradient(90deg, rgba(243,236,255,.18), rgba(198,168,255,.95), rgba(245,239,255,.18)); }
.star-link{ color:#ffe37d; background:linear-gradient(90deg, rgba(255,247,212,.18), rgba(255,216,96,.98), rgba(255,247,212,.18)); }
.cast-sigil,
.cast-wave,
.cast-title{ position:absolute; pointer-events:none; z-index:4; transform:translate(-50%,-50%); }
.cast-sigil{
  width:var(--sigil-size,120px);
  height:var(--sigil-size,120px);
  border-radius:50%;
  border:2px solid var(--sigil-color, #fff);
  background:
    radial-gradient(circle, transparent 42%, color-mix(in srgb, var(--sigil-color, #fff) 32%, transparent) 43%, transparent 48%),
    conic-gradient(from 0deg, transparent 0 10%, color-mix(in srgb, var(--sigil-color, #fff) 75%, white) 12%, transparent 16% 28%, color-mix(in srgb, var(--sigil-color, #fff) 70%, white) 30%, transparent 34% 46%, color-mix(in srgb, var(--sigil-color, #fff) 78%, white) 48%, transparent 52% 64%, color-mix(in srgb, var(--sigil-color, #fff) 72%, white) 66%, transparent 70% 82%, color-mix(in srgb, var(--sigil-color, #fff) 80%, white) 84%, transparent 88% 100%);
  box-shadow:0 0 18px var(--sigil-glow, rgba(255,255,255,.5)), inset 0 0 14px color-mix(in srgb, var(--sigil-color, #fff) 35%, transparent);
  animation:castSigilSpin .9s ease-out forwards;
}
.cast-sigil::before,
.cast-sigil::after{
  content:"";
  position:absolute;
  inset:10%;
  border-radius:50%;
  border:1px solid color-mix(in srgb, var(--sigil-color, #fff) 72%, white);
  opacity:.82;
}
.cast-sigil::after{
  inset:28%;
  border-style:dashed;
  animation:castSigilSpinReverse .9s linear forwards;
}
.sigil-core{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:1.6rem;
  color:var(--sigil-color, #fff);
  text-shadow:0 0 14px var(--sigil-glow, rgba(255,255,255,.5));
}
.cast-wave{
  width:var(--wave-size,140px);
  height:var(--wave-size,140px);
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--sigil-color, #fff) 42%, transparent) 0, color-mix(in srgb, var(--sigil-color, #fff) 24%, transparent) 30%, transparent 66%);
  box-shadow:0 0 26px var(--sigil-glow, rgba(255,255,255,.5));
  animation:castWavePulse .72s ease-out forwards;
}
.cast-title{
  font-size:.84rem;
  font-weight:900;
  letter-spacing:.12em;
  white-space:nowrap;
  animation:castTitleRise .9s ease-out forwards;
}
@keyframes traceLinkFade{
  0%{ opacity:0; transform:translateY(-50%) scaleX(.25); }
  25%{ opacity:1; }
  100%{ opacity:0; transform:translateY(-50%) scaleX(1.05); }
}
@keyframes castSigilSpin{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.35) rotate(-20deg); }
  20%{ opacity:.96; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.14) rotate(90deg); }
}
@keyframes castSigilSpinReverse{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(-140deg); }
}
@keyframes castWavePulse{
  0%{ opacity:.15; transform:translate(-50%,-50%) scale(.35); }
  30%{ opacity:.6; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.2); }
}
@keyframes castTitleRise{
  0%{ opacity:0; transform:translate(-50%,-50%) translateY(10px) scale(.92); }
  15%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-50%) translateY(-26px) scale(1.02); }
}
@keyframes boardMagicPulseSm{
  0%{ box-shadow:0 0 0 rgba(0,0,0,0); filter:brightness(1); }
  35%{ box-shadow:0 0 0 2px rgba(255,221,133,.24), 0 0 22px rgba(116,198,255,.18); filter:brightness(1.05) saturate(1.06); }
  100%{ box-shadow:0 0 0 rgba(0,0,0,0); filter:brightness(1); }
}
@keyframes boardMagicPulseLg{
  0%{ box-shadow:0 0 0 rgba(0,0,0,0); filter:brightness(1); transform:translateZ(0); }
  18%{ box-shadow:0 0 0 2px rgba(255,221,133,.26), 0 0 30px rgba(116,198,255,.2); filter:brightness(1.08) saturate(1.08); }
  42%{ transform:translateY(-1px) scale(1.006); }
  100%{ box-shadow:0 0 0 rgba(0,0,0,0); filter:brightness(1); transform:translateZ(0); }
}
@media (max-width:700px), (orientation:portrait){
  .trace-link{ height:6px; }
  .cast-title{ font-size:.76rem; }
  .sigil-core{ font-size:1.35rem; }
}


/* ===== V65 mixed magic, companions, and boss board FX ===== */
.mixed-board-field{
  position:absolute;
  z-index:20;
  width:min(76%, 330px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  border-radius:50%;
  border:3px solid color-mix(in srgb,var(--mix-a) 70%, white);
  background:
    radial-gradient(circle, color-mix(in srgb,var(--mix-a) 22%, transparent) 0 28%, transparent 58%),
    conic-gradient(from 0deg,
      var(--mix-a), transparent 12%, var(--mix-b) 24%, transparent 38%,
      var(--mix-a) 50%, transparent 64%, var(--mix-b) 76%, transparent 90%, var(--mix-a));
  box-shadow:
    0 0 26px color-mix(in srgb,var(--mix-a) 55%, transparent),
    0 0 48px color-mix(in srgb,var(--mix-b) 38%, transparent),
    inset 0 0 28px color-mix(in srgb,var(--mix-a) 24%, transparent);
  color:white;
  font-size:2rem;
  text-shadow:0 0 14px var(--mix-a),0 0 20px var(--mix-b);
  pointer-events:none;
  animation:mixedFieldCast 1.05s ease-out forwards;
}
.mixed-board-field::before,
.mixed-board-field::after{
  content:"";
  position:absolute;
  inset:12%;
  border-radius:50%;
  border:2px dashed color-mix(in srgb,var(--mix-b) 75%, white);
  animation:mixedRingSpin 1.05s linear forwards;
}
.mixed-board-field::after{
  inset:29%;
  border-style:solid;
  animation-direction:reverse;
}
.mixed-board-particle{
  position:absolute;
  z-index:21;
  transform:translate(-50%,-50%);
  font-size:1.15rem;
  text-shadow:0 0 10px currentColor;
  pointer-events:none;
  animation:mixedParticleFly 1s ease-out forwards;
}

.companion-magic-field{
  position:absolute;
  z-index:92;
  width:96px;
  height:96px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  border-radius:50%;
  border:2px solid var(--companion-color);
  color:var(--companion-color);
  font-size:1.8rem;
  background:radial-gradient(circle, color-mix(in srgb,var(--companion-color) 34%, transparent), transparent 68%);
  box-shadow:0 0 24px color-mix(in srgb,var(--companion-color) 58%, transparent);
  pointer-events:none;
  animation:companionMagicPop .74s ease-out forwards;
}
.companion-magic-particle{
  position:absolute;
  z-index:93;
  transform:translate(-50%,-50%);
  pointer-events:none;
  text-shadow:0 0 9px currentColor;
  animation:companionParticle .75s ease-out forwards;
}

.board.enemy-board-cast{
  animation:enemyBoardPulse .88s ease-out;
}
.cell.enemy-corrupted-tile{
  z-index:5;
  filter:brightness(.8) saturate(1.35);
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--enemy-magic) 75%, white),
    inset 0 0 24px color-mix(in srgb,var(--enemy-magic) 35%, transparent),
    0 0 22px color-mix(in srgb,var(--enemy-magic) 45%, transparent) !important;
  animation:enemyTileCorrupt .75s ease-in-out;
}
.enemy-board-rune{
  position:absolute;
  z-index:96;
  transform:translate(-50%,-50%);
  font-size:1.4rem;
  pointer-events:none;
  text-shadow:0 0 12px currentColor,0 0 20px currentColor;
  animation:enemyRuneDrop .85s ease-out forwards;
}

@keyframes mixedFieldCast{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-40deg)}
  18%{opacity:1}
  56%{opacity:.94;transform:translate(-50%,-50%) scale(.96) rotate(20deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.24) rotate(70deg)}
}
@keyframes mixedRingSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(190deg)}
}
@keyframes mixedParticleFly{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}
  22%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--mx)),calc(-50% + var(--my))) rotate(var(--mr)) scale(1.12)}
}
@keyframes companionMagicPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.28)}
  35%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.34)}
}
@keyframes companionParticle{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  25%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(.9)}
}
@keyframes enemyBoardPulse{
  0%,100%{filter:brightness(1)}
  35%{filter:brightness(.82) contrast(1.13)}
  58%{filter:brightness(1.06)}
}
@keyframes enemyTileCorrupt{
  0%{transform:scale(1);filter:brightness(1)}
  35%{transform:scale(.9) rotate(-2deg);filter:brightness(.72) saturate(1.55)}
  70%{transform:scale(1.03) rotate(1deg)}
  100%{transform:scale(1);filter:brightness(1)}
}
@keyframes enemyRuneDrop{
  0%{opacity:0;transform:translate(-50%,-75%) scale(1.6)}
  25%{opacity:1}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-35%) scale(.72)}
}

@media (max-width:700px), (orientation:portrait){
  .mixed-board-field{width:min(72%,280px);font-size:1.6rem}
  .companion-magic-field{width:82px;height:82px}
  .enemy-board-rune{font-size:1.2rem}
}


/* ===== V66 heavier board magic ===== */
.trace-link{
  height:9px;
  opacity:1;
  overflow:visible;
  animation:traceLinkFade var(--trace-duration,560ms) ease-out forwards;
}
.trace-link::before{
  content:"";
  position:absolute;
  inset:-6px 0;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  filter:blur(2px);
  opacity:.95;
  animation:traceCoreSlide var(--trace-duration,560ms) linear forwards;
}
.trace-orb{
  position:absolute;
  z-index:3;
  transform:translate(-50%,-50%);
  font-size:1rem;
  width:18px;
  height:18px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0 18%, var(--trace-color) 36%, transparent 72%);
  box-shadow:0 0 12px var(--trace-glow), 0 0 20px var(--trace-color);
  pointer-events:none;
  animation:traceOrbTravel var(--trace-duration,560ms) ease-out forwards;
}
.trace-orb::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:1px solid color-mix(in srgb, var(--trace-color) 72%, white);
  opacity:.82;
}
.cell.spell-charge{
  z-index:3;
  animation:spellChargePulse 420ms ease-out;
}
.cell.spell-charge::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:16px;
  border:2px solid var(--charge-color, #fff);
  box-shadow:0 0 18px var(--charge-glow, rgba(255,255,255,.7)), inset 0 0 18px color-mix(in srgb, var(--charge-color, #fff) 22%, transparent);
  background:radial-gradient(circle, color-mix(in srgb, var(--charge-color, #fff) 22%, transparent), transparent 70%);
  animation:spellChargeFlash .42s ease-out;
}
.board-sky-beam{
  position:absolute;
  z-index:5;
  transform:translate(-50%,-100%);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), color-mix(in srgb, var(--beam-color) 90%, white) 28%, color-mix(in srgb, var(--beam-color) 78%, transparent) 60%, transparent 100%);
  box-shadow:0 0 16px var(--beam-glow), 0 0 26px var(--beam-color);
  pointer-events:none;
  animation:boardSkyBeam .9s ease-out forwards;
}
.board-spell-crest,
.board-cast-ribbon{
  position:absolute;
  z-index:6;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.board-spell-crest{
  font-size:1.55rem;
  text-shadow:0 0 16px var(--crest-glow), 0 0 24px var(--crest-glow);
  animation:boardSpellCrest .96s ease-out forwards;
}
.board-cast-ribbon{
  padding:6px 12px;
  border-radius:999px;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.13em;
  white-space:nowrap;
  background:rgba(12,22,44,.68);
  border:1px solid color-mix(in srgb, currentColor 52%, #d8c07b);
  box-shadow:0 0 14px var(--ribbon-glow), inset 0 0 10px rgba(255,255,255,.06);
  text-shadow:0 0 10px var(--ribbon-glow);
  animation:castRibbonRise 1.2s ease-out forwards;
}
.battle-spell-trail{
  position:absolute;
  height:10px;
  border-radius:999px;
  transform:translateY(-50%) rotate(var(--rot));
  transform-origin:left center;
  box-shadow:0 0 14px var(--trail-glow), 0 0 24px var(--trail-glow);
  opacity:.96;
  pointer-events:none;
  animation:battleTrailPulse .9s ease-out forwards;
}
.battle-spell-trail.mixed-trail{
  height:11px;
  filter:saturate(1.15);
}
.battle-spell-orb{
  position:absolute;
  z-index:30;
  transform:translate(-50%,-50%);
  font-size:1.1rem;
  text-shadow:0 0 14px var(--trail-glow), 0 0 22px var(--trail-glow);
  pointer-events:none;
  animation:battleOrbTravel .88s ease-out forwards;
  animation-delay:var(--travel-delay, 0ms);
}
.mixed-board-field{
  width:min(84%, 370px);
  font-size:2.3rem;
  box-shadow:
    0 0 32px color-mix(in srgb,var(--mix-a) 62%, transparent),
    0 0 58px color-mix(in srgb,var(--mix-b) 46%, transparent),
    inset 0 0 36px color-mix(in srgb,var(--mix-a) 28%, transparent);
  animation:mixedFieldCast 1.22s ease-out forwards;
}
.mixed-board-sweep{
  position:absolute;
  z-index:19;
  width:min(92%, 420px);
  height:32px;
  transform:translate(-50%,-50%) rotate(var(--rot,0deg));
  border-radius:999px;
  background:linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--mix-a) 82%, white) 20%, color-mix(in srgb, var(--mix-b) 88%, white) 52%, color-mix(in srgb, var(--mix-a) 82%, white) 82%, transparent 100%);
  box-shadow:0 0 18px color-mix(in srgb,var(--mix-a) 50%, transparent), 0 0 28px color-mix(in srgb,var(--mix-b) 42%, transparent);
  opacity:0;
  pointer-events:none;
  animation:mixedSweep 1.06s ease-out forwards;
  animation-delay:var(--delay,0ms);
}
.mixed-board-particle{
  font-size:1.35rem;
  animation:mixedParticleFly 1.14s ease-out forwards;
}
@keyframes traceCoreSlide{
  0%{ transform:translateX(-18%); opacity:0; }
  15%{ opacity:1; }
  100%{ transform:translateX(118%); opacity:0; }
}
@keyframes traceOrbTravel{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.45); }
  12%{ opacity:1; }
  100%{ opacity:0; transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.2); }
}
@keyframes spellChargePulse{
  0%{ transform:scale(1); filter:brightness(1); }
  36%{ transform:scale(1.06); filter:brightness(1.16) saturate(1.18); }
  100%{ transform:scale(1); filter:brightness(1); }
}
@keyframes spellChargeFlash{
  0%{ opacity:0; transform:scale(.6); }
  35%{ opacity:1; transform:scale(1.04); }
  100%{ opacity:0; transform:scale(1.24); }
}
@keyframes boardSkyBeam{
  0%{ opacity:0; transform:translate(-50%,-100%) scaleY(.25); }
  20%{ opacity:.94; }
  100%{ opacity:0; transform:translate(-50%,-100%) scaleY(1.06); }
}
@keyframes boardSpellCrest{
  0%{ opacity:0; transform:translate(-50%,-20%) scale(.4) rotate(-12deg); }
  26%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-150%) scale(1.22) rotate(18deg); }
}
@keyframes castRibbonRise{
  0%{ opacity:0; transform:translate(-50%,-50%) translateY(14px) scale(.88); }
  18%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-50%) translateY(-24px) scale(1.02); }
}
@keyframes battleTrailPulse{
  0%{ opacity:0; transform:translateY(-50%) rotate(var(--rot)) scaleX(.15); }
  18%{ opacity:1; }
  100%{ opacity:0; transform:translateY(-50%) rotate(var(--rot)) scaleX(1.04); }
}
@keyframes battleOrbTravel{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.45); }
  14%{ opacity:1; }
  100%{ opacity:0; transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.14); }
}
@keyframes mixedSweep{
  0%{ opacity:0; transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scaleX(.18); }
  20%{ opacity:.95; }
  100%{ opacity:0; transform:translate(-50%,-50%) rotate(calc(var(--rot,0deg) + 6deg)) scaleX(1.08); }
}
@media (max-width:700px), (orientation:portrait){
  .trace-link{ height:8px; }
  .board-cast-ribbon{ font-size:.7rem; padding:5px 10px; }
  .mixed-board-field{ width:min(80%, 300px); font-size:1.85rem; }
  .mixed-board-sweep{ width:min(86%, 320px); height:26px; }
}


/* ===== V67 companion visibility fix ===== */
.board-helper-sprite{
  width:118px !important;
  height:118px !important;
  margin-left:-59px !important;
  margin-top:-59px !important;
  z-index:120 !important;
  background-size:400% 100% !important;
  filter:
    drop-shadow(0 7px 8px rgba(0,0,0,.46))
    drop-shadow(0 0 12px rgba(255,231,142,.42));
}
.board-helper-sprite.goldy-board-helper{
  width:128px !important;
  height:128px !important;
  margin-left:-64px !important;
  margin-top:-64px !important;
  filter:
    drop-shadow(0 8px 9px rgba(0,0,0,.46))
    drop-shadow(0 0 16px rgba(255,216,72,.68));
}
.board-helper-sprite.dog-board-helper{
  width:124px !important;
  height:124px !important;
  margin-left:-62px !important;
  margin-top:-62px !important;
}
.board-helper-sprite.gnome-board-helper{
  width:116px !important;
  height:116px !important;
  margin-left:-58px !important;
  margin-top:-58px !important;
}
.board-helper-sprite.helper-impact{
  filter:
    drop-shadow(0 8px 9px rgba(0,0,0,.52))
    drop-shadow(0 0 22px rgba(255,226,112,.82))
    brightness(1.16);
}
.board-helper-label{
  z-index:125 !important;
  padding:6px 11px !important;
  font-size:.78rem !important;
  background:rgba(12,29,47,.96) !important;
  box-shadow:0 7px 18px rgba(0,0,0,.42), 0 0 12px rgba(255,218,100,.24) !important;
}
@media (max-width:700px), (orientation:portrait){
  .board-helper-sprite{
    width:104px !important;
    height:104px !important;
    margin-left:-52px !important;
    margin-top:-52px !important;
  }
  .board-helper-sprite.goldy-board-helper{
    width:116px !important;
    height:116px !important;
    margin-left:-58px !important;
    margin-top:-58px !important;
  }
  .board-helper-sprite.dog-board-helper{
    width:110px !important;
    height:110px !important;
    margin-left:-55px !important;
    margin-top:-55px !important;
  }
}

/* V68 character tile styling */
.cell.character-tile{
  border-color: rgba(255,223,126,.78);
  box-shadow: 0 0 0 2px rgba(255,214,100,.28), 0 0 16px rgba(255,201,77,.24), inset 0 0 18px rgba(255,248,206,.12);
  overflow: visible;
}
.cell.character-tile .rune-img{
  width: 88%;
  height: 88%;
  object-fit: cover;
  border-radius: 12px;
}
.character-rune-badge{
  position: absolute;
  right: 3px;
  bottom: 3px;
  z-index: 7;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(11,25,42,.9);
  border: 1px solid rgba(255,225,133,.62);
  color: #fff1bc;
  font-size: .42rem;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
  pointer-events: none;
}
.character-tile-label{
  position:absolute;
  left:50%;
  top:4px;
  transform:translateX(-50%);
  z-index:7;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(13,31,50,.88);
  border:1px solid rgba(255,221,117,.52);
  color:#ffeeb4;
  font-size:.42rem;
  font-weight:900;
  letter-spacing:.05em;
  line-height:1;
  pointer-events:none;
  max-width: calc(100% - 8px);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.cell.character-tile.selected{
  transform: scale(.84);
}
.cell.character-tile::before{
  content:'';
  position:absolute;
  inset:4px;
  border-radius:12px;
  border:1px solid rgba(255,237,174,.36);
  box-shadow: inset 0 0 18px rgba(255,240,184,.1);
  pointer-events:none;
}
.character-tile-wimble{ background: radial-gradient(circle at 50% 28%, rgba(255,237,170,.22), rgba(28,47,74,.98)); }
.character-tile-goldy{ background: radial-gradient(circle at 50% 28%, rgba(255,248,173,.24), rgba(28,47,74,.98)); }
.character-tile-dog{ background: radial-gradient(circle at 50% 28%, rgba(165,244,255,.22), rgba(28,47,74,.98)); }
.character-tile-dirtgnome{ background: radial-gradient(circle at 50% 28%, rgba(170,239,144,.22), rgba(28,47,74,.98)); }


.mix-section-title{margin:14px 0 6px; color:#ffd971; font-size:.78rem; font-weight:900; letter-spacing:.18em; text-transform:uppercase;}
.character-guide-icon{display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0;}
.character-guide-icon img{width:100%; height:100%; object-fit:cover; border-radius:12px;}


/* ===== V71 character tile art refresh ===== */
.cell.character-tile{
  --tile-accent:#ffd85a;
  --tile-accent-glow:rgba(255,216,90,.55);
  border-color: color-mix(in srgb, var(--tile-accent) 82%, white 18%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--tile-accent) 72%, white 28%),
    0 0 18px var(--tile-accent-glow),
    inset 0 0 18px rgba(255,248,206,.14);
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--tile-accent) 22%, transparent), rgba(28,47,74,.98));
}
.cell.character-tile .rune-img{
  width: 90%;
  height: 90%;
  object-fit: contain;
  border-radius: 14px;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,.22));
}
.cell.character-tile::before{
  content:'';
  position:absolute;
  inset:4px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--tile-accent) 46%, white 54%);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--tile-accent) 10%, transparent);
  pointer-events:none;
}
.character-rune-badge,
.character-tile-label{
  border-color: color-mix(in srgb, var(--tile-accent) 55%, white 45%);
  color: #fff6d0;
  box-shadow: 0 0 10px color-mix(in srgb, var(--tile-accent) 18%, transparent);
}
.character-tile-wimble{ --tile-accent:#ffd85a; --tile-accent-glow:rgba(255,216,90,.45); }
.character-tile-goldy{ --tile-accent:#39d0ff; --tile-accent-glow:rgba(57,208,255,.42); }
.character-tile-dog{ --tile-accent:#5edb6b; --tile-accent-glow:rgba(94,219,107,.4); }
.character-tile-dirtgnome{ --tile-accent:#b28cff; --tile-accent-glow:rgba(178,140,255,.42); }
.character-tile-wendy{ --tile-accent:#39d0ff; --tile-accent-glow:rgba(57,208,255,.42); }
.character-tile-floyd{ --tile-accent:#f5f7ff; --tile-accent-glow:rgba(184,221,255,.42); }


/* ===== V72 companion polish + tighter battle presentation ===== */
.battle-card .companions-mini,
.battle-portrait-card .companions-mini{
  gap:8px;
}
.companion-mini{
  width:30px !important;
  height:30px !important;
  object-fit:cover;
  border-radius:999px;
  padding:2px;
  background:rgba(10,25,43,.95);
  box-shadow:0 3px 8px rgba(0,0,0,.35), inset 0 0 10px rgba(255,255,255,.08);
}
.companion-mini.goldy-mini{
  border:2px solid rgba(255,221,97,.95);
  box-shadow:0 3px 8px rgba(0,0,0,.35), 0 0 12px rgba(255,221,97,.34), inset 0 0 10px rgba(255,255,255,.08);
}
.companion-mini.dog-mini{
  border:2px solid rgba(104,226,119,.95);
  box-shadow:0 3px 8px rgba(0,0,0,.35), 0 0 12px rgba(104,226,119,.28), inset 0 0 10px rgba(255,255,255,.08);
}
.board-helper-sprite{
  border-radius:18px;
  background-color:transparent;
}
.board-helper-sprite::after{
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:22px;
  border:2px solid rgba(255,227,136,.55);
  box-shadow:0 0 14px rgba(255,221,97,.32), inset 0 0 12px rgba(255,255,255,.08);
  pointer-events:none;
}
.board-helper-sprite.dog-board-helper::after{
  border-color:rgba(104,226,119,.6);
  box-shadow:0 0 14px rgba(104,226,119,.28), inset 0 0 12px rgba(255,255,255,.08);
}
.board-helper-sprite.goldy-board-helper::after{
  border-color:rgba(255,221,97,.7);
  box-shadow:0 0 16px rgba(255,221,97,.34), inset 0 0 12px rgba(255,255,255,.08);
}
.board-helper-sprite.gnome-board-helper::after{
  border-color:rgba(185,152,255,.68);
  box-shadow:0 0 16px rgba(185,152,255,.32), inset 0 0 12px rgba(255,255,255,.08);
}
@media (max-width:700px), (orientation:portrait){
  .companion-mini{ width:26px !important; height:26px !important; }
}


/* ===== V74 explicit character-tile outlines ===== */
.cell.character-tile{
  border:3px solid #ffd85a !important;
  box-shadow:0 0 0 2px rgba(255,216,90,.32), 0 0 18px rgba(255,216,90,.36), inset 0 0 14px rgba(255,255,255,.08) !important;
}
.cell.character-element-fire{
  border-color:#ff5b43 !important;
  box-shadow:0 0 0 2px rgba(255,91,67,.34), 0 0 18px rgba(255,91,67,.5), inset 0 0 14px rgba(255,91,67,.12) !important;
}
.cell.character-element-ice{
  border-color:#f7fbff !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.55), 0 0 19px rgba(155,222,255,.58), inset 0 0 14px rgba(213,244,255,.16) !important;
}
.cell.character-element-water{
  border-color:#32bfff !important;
  box-shadow:0 0 0 2px rgba(50,191,255,.4), 0 0 19px rgba(50,191,255,.58), inset 0 0 14px rgba(50,191,255,.13) !important;
}
.cell.character-element-nature{
  border-color:#59df68 !important;
  box-shadow:0 0 0 2px rgba(89,223,104,.38), 0 0 19px rgba(89,223,104,.5), inset 0 0 14px rgba(89,223,104,.12) !important;
}
.cell.character-element-wind{
  border-color:#b889ff !important;
  box-shadow:0 0 0 2px rgba(184,137,255,.4), 0 0 19px rgba(184,137,255,.56), inset 0 0 14px rgba(184,137,255,.13) !important;
}
.cell.character-element-star{
  border-color:#ffd84f !important;
  box-shadow:0 0 0 2px rgba(255,216,79,.42), 0 0 19px rgba(255,216,79,.55), inset 0 0 14px rgba(255,216,79,.13) !important;
}
.cell.character-tile::before{
  border-color:rgba(255,255,255,.42) !important;
}
.cell.character-tile .character-rune-badge{
  color:#fff !important;
}


/* ===== V75 character wild tiles ===== */
.cell.character-tile{
  position:relative;
  border:3px solid #ffd85a !important;
  box-shadow:
    0 0 0 2px rgba(255,225,122,.46),
    0 0 18px rgba(255,206,62,.60),
    0 0 30px rgba(255,196,30,.24),
    inset 0 0 14px rgba(255,246,196,.14) !important;
  animation:characterWildGlow 1.65s ease-in-out infinite;
  overflow:hidden;
}
.cell.character-tile::after{
  content:"";
  position:absolute;
  inset:-35%;
  pointer-events:none;
  background:linear-gradient(115deg,
    transparent 34%,
    rgba(255,255,255,.08) 43%,
    rgba(255,246,180,.72) 49%,
    rgba(255,255,255,.18) 55%,
    transparent 64%);
  transform:translateX(-70%) rotate(3deg);
  animation:characterWildShimmer 2.15s linear infinite;
  z-index:6;
}
.cell.character-tile .rune-img,
.cell.character-tile .character-rune-badge,
.cell.character-tile .character-tile-label{
  position:relative;
  z-index:7;
}
.cell.character-tile::before{
  border-color:rgba(255,234,150,.74) !important;
  box-shadow:inset 0 0 16px rgba(255,218,88,.16) !important;
}
.cell.character-element-fire,
.cell.character-element-ice,
.cell.character-element-water,
.cell.character-element-nature,
.cell.character-element-wind,
.cell.character-element-star{
  border-color:#ffd85a !important;
  box-shadow:
    0 0 0 2px rgba(255,225,122,.46),
    0 0 18px rgba(255,206,62,.60),
    0 0 30px rgba(255,196,30,.24),
    inset 0 0 14px rgba(255,246,196,.14) !important;
}
.cell.character-tile.selected{
  box-shadow:
    0 0 0 3px rgba(255,249,211,.80),
    0 0 25px rgba(255,216,79,.90),
    0 0 42px rgba(255,187,0,.42),
    inset 0 0 18px rgba(255,255,255,.18) !important;
}
@keyframes characterWildGlow{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.11);}
}
@keyframes characterWildShimmer{
  0%{transform:translateX(-72%) rotate(3deg); opacity:.25;}
  35%{opacity:.85;}
  70%,100%{transform:translateX(72%) rotate(3deg); opacity:.18;}
}
@media (prefers-reduced-motion:reduce){
  .cell.character-tile, .cell.character-tile::after{animation:none !important;}
}

/* ===== V76 Power Orb tile and blast ===== */
.cell.power-orb-tile{
  position:relative;
  border:3px solid rgba(255,236,170,.95) !important;
  box-shadow:
    0 0 0 2px rgba(255,230,142,.42),
    0 0 20px rgba(150,214,255,.32),
    0 0 30px rgba(255,120,255,.26),
    inset 0 0 18px rgba(255,255,255,.18) !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.28), rgba(56,32,98,.92) 62%),
    linear-gradient(160deg, rgba(117,241,255,.24), rgba(255,124,238,.14));
  overflow:hidden;
}
.cell.power-orb-tile.selected{
  box-shadow:
    0 0 0 3px rgba(255,250,233,.92),
    0 0 26px rgba(130,224,255,.86),
    0 0 42px rgba(255,117,237,.54),
    inset 0 0 18px rgba(255,255,255,.22) !important;
}
.power-orb-shell,
.power-orb-core,
.power-orb-glyph,
.power-orb-label{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.power-orb-shell{
  width:70%;
  height:70%;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 32%, rgba(255,255,255,.95), rgba(194,255,255,.65) 18%, rgba(142,189,255,.55) 36%, rgba(215,92,255,.54) 64%, rgba(49,26,92,.9) 100%);
  box-shadow:
    0 0 12px rgba(122,227,255,.72),
    0 0 22px rgba(224,118,255,.58),
    inset 0 0 16px rgba(255,255,255,.4);
  animation:powerOrbPulse 1.5s ease-in-out infinite;
}
.power-orb-core{
  width:34%;
  height:34%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.98), rgba(255,247,178,.86) 52%, rgba(255,255,255,0) 76%);
  filter:blur(.2px);
  animation:powerOrbCoreFlash 1.5s ease-in-out infinite;
}
.power-orb-glyph{
  font-size:26px;
  color:#fff5c2;
  text-shadow:0 0 12px rgba(255,240,171,.75), 0 0 20px rgba(111,224,255,.54);
  z-index:2;
  animation:powerOrbSpin 3.6s linear infinite;
}
.power-orb-label{
  top:auto;
  left:50%;
  bottom:4px;
  transform:translateX(-50%);
  font-size:10px;
  letter-spacing:.12em;
  font-weight:900;
  color:#fff7d4;
  text-shadow:0 1px 5px rgba(0,0,0,.55), 0 0 8px rgba(165,230,255,.5);
  text-transform:uppercase;
}
.cell.power-orb-tile::after{
  content:"";
  position:absolute;
  inset:-28%;
  background:conic-gradient(from 0deg, rgba(255,255,255,0) 0 20%, rgba(255,255,255,.18) 22%, rgba(145,232,255,.34) 32%, rgba(255,111,245,.22) 44%, rgba(255,255,255,0) 56% 100%);
  animation:powerOrbHalo 3.2s linear infinite;
  pointer-events:none;
  opacity:.8;
}
.power-orb-blast{
  position:absolute;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:40;
}
.power-orb-beam{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,0), var(--orb-color), rgba(255,255,255,.92), var(--orb-color), rgba(255,255,255,0));
  box-shadow:0 0 16px var(--orb-glow), 0 0 28px var(--orb-glow);
  opacity:0;
  animation:powerOrbBeam .58s ease-out forwards;
}
.power-orb-beam-h{ height:16px; }
.power-orb-beam-v{
  width:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0), var(--orb-color), rgba(255,255,255,.92), var(--orb-color), rgba(255,255,255,0));
}
.power-orb-ring{
  position:absolute;
  left:50%;
  top:50%;
  width:28px;
  height:28px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:3px solid rgba(255,255,255,.92);
  box-shadow:0 0 16px var(--orb-glow), 0 0 28px var(--orb-glow);
  animation:powerOrbRing .7s ease-out forwards;
}
.power-orb-flash{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:30px;
  color:#fff6cb;
  text-shadow:0 0 16px var(--orb-glow), 0 0 28px rgba(255,255,255,.6);
  animation:powerOrbFlash .62s ease-out forwards;
}
@keyframes powerOrbPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);}
  50%{transform:translate(-50%,-50%) scale(1.08);}
}
@keyframes powerOrbCoreFlash{
  0%,100%{transform:translate(-50%,-50%) scale(.86); opacity:.78;}
  50%{transform:translate(-50%,-50%) scale(1.14); opacity:1;}
}
@keyframes powerOrbSpin{
  from{transform:translate(-50%,-50%) rotate(0deg);}
  to{transform:translate(-50%,-50%) rotate(360deg);}
}
@keyframes powerOrbHalo{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@keyframes powerOrbBeam{
  0%{opacity:0; filter:blur(5px);}
  18%{opacity:1; filter:blur(0);}
  100%{opacity:0; filter:blur(3px);}
}
@keyframes powerOrbRing{
  0%{opacity:.95; transform:translate(-50%,-50%) scale(.4);}
  100%{opacity:0; transform:translate(-50%,-50%) scale(7.2);}
}
@keyframes powerOrbFlash{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.4);}
  18%{opacity:1; transform:translate(-50%,-50%) scale(1.18);}
  100%{opacity:0; transform:translate(-50%,-50%) scale(2.3);}
}
@media (prefers-reduced-motion:reduce){
  .power-orb-shell,
  .power-orb-core,
  .power-orb-glyph,
  .cell.power-orb-tile::after,
  .power-orb-beam,
  .power-orb-ring,
  .power-orb-flash{animation:none !important;}
}

/* ===== V77 Power Orb tutorial + Mega Orb sweep ===== */
.cell.power-orb-mega-target{
  animation:powerOrbMegaTarget .72s ease-out 1 !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.88), 0 0 28px rgba(255,224,106,.92), 0 0 44px rgba(125,223,255,.72) !important;
}
@keyframes powerOrbMegaTarget{
  0%{transform:scale(1); filter:brightness(1);}
  38%{transform:scale(1.09); filter:brightness(1.8);}
  100%{transform:scale(.92); filter:brightness(1.1);}
}
.power-orb-tutorial{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(8,10,24,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.power-orb-tutorial-card{
  width:min(430px,92vw);
  border:2px solid rgba(255,231,141,.88);
  border-radius:24px;
  padding:26px 24px 22px;
  text-align:center;
  color:#f8f5ff;
  background:
    radial-gradient(circle at 50% 0%, rgba(104,214,255,.2), transparent 38%),
    radial-gradient(circle at 85% 22%, rgba(233,114,255,.18), transparent 34%),
    linear-gradient(160deg, rgba(38,28,72,.98), rgba(17,23,49,.98));
  box-shadow:0 18px 70px rgba(0,0,0,.5), 0 0 40px rgba(117,219,255,.2), inset 0 0 34px rgba(255,255,255,.035);
  animation:powerOrbTutorialIn .34s cubic-bezier(.2,.9,.25,1.15) both;
}
.power-orb-tutorial-orb{
  width:88px;
  height:88px;
  margin:0 auto 12px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 34% 30%, #fff 0 7%, #d8ffff 15%, #82d9ff 33%, #c47cff 58%, #4a276f 82%, #1b1737 100%);
  box-shadow:0 0 18px rgba(135,229,255,.9), 0 0 38px rgba(221,117,255,.65), inset 0 0 18px rgba(255,255,255,.55);
  animation:powerOrbTutorialPulse 1.45s ease-in-out infinite;
}
.power-orb-tutorial-orb span{
  font-size:36px;
  color:#fff8c9;
  text-shadow:0 0 14px rgba(255,244,173,.95);
  animation:powerOrbSpin 3.4s linear infinite;
}
.power-orb-tutorial-kicker{
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  color:#ffe38b;
  margin-bottom:6px;
}
.power-orb-tutorial-card h2{
  margin:0 0 12px;
  font-size:30px;
  line-height:1;
}
.power-orb-tutorial-card p{
  margin:8px auto;
  max-width:360px;
  font-size:15px;
  line-height:1.45;
  color:#e9e8f5;
}
.power-orb-tutorial-card b{ color:#fff3ae; }
.power-orb-tutorial-mega{
  margin-top:13px !important;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(255,225,118,.34);
  background:rgba(255,217,85,.08);
}
.power-orb-tutorial-btn{
  margin-top:17px;
  min-width:150px;
  border:0;
  border-radius:999px;
  padding:12px 22px;
  font:inherit;
  font-weight:900;
  font-size:15px;
  color:#33220b;
  background:linear-gradient(#fff2a7,#f7c951);
  box-shadow:0 5px 18px rgba(0,0,0,.25), 0 0 18px rgba(255,218,83,.25);
  cursor:pointer;
}
.power-orb-tutorial-btn:active{ transform:translateY(1px) scale(.99); }
@keyframes powerOrbTutorialIn{
  from{opacity:0; transform:translateY(16px) scale(.94);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes powerOrbTutorialPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.07);}
}
@media (prefers-reduced-motion:reduce){
  .cell.power-orb-mega-target,
  .power-orb-tutorial-card,
  .power-orb-tutorial-orb,
  .power-orb-tutorial-orb span{animation:none !important;}
}

/* ===== V78 compact Wendy shop ===== */
#shopScreen .compact-shop-section{
  margin-top:16px;
  padding:14px;
  border:1px solid rgba(255,222,145,.24);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(50,34,28,.94), rgba(28,23,28,.96));
  box-shadow:0 12px 28px rgba(0,0,0,.22), inset 0 0 24px rgba(255,214,122,.035);
}
#shopScreen .shop-section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
#shopScreen .shop-section-heading .eyebrow{
  color:#ffe39a;
  letter-spacing:.13em;
  font-weight:900;
}
#shopScreen .shop-section-heading p{
  margin:4px 0 0;
  color:#cfc6b8;
  font-size:.78rem;
  line-height:1.3;
}
#shopScreen .shop-icon-grid,
#shopScreen .charm-shop-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
  margin:0 !important;
}
#shopScreen .compact-shop-item,
#shopScreen .charm-shop-item.compact-shop-item{
  position:relative;
  width:100% !important;
  min-width:0 !important;
  aspect-ratio:1 / 1;
  min-height:0 !important;
  padding:8px 5px 7px !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  text-align:center !important;
  border-radius:15px !important;
  border:1px solid rgba(255,224,153,.32) !important;
  background:
    radial-gradient(circle at 50% 26%, rgba(255,239,189,.10), transparent 42%),
    linear-gradient(165deg, rgba(74,55,51,.96), rgba(37,31,38,.98)) !important;
  box-shadow:0 7px 16px rgba(0,0,0,.25), inset 0 0 15px rgba(255,255,255,.025) !important;
  cursor:pointer !important;
  overflow:hidden;
  opacity:1 !important;
  transform:none;
}
#shopScreen .compact-shop-item:hover,
#shopScreen .compact-shop-item:active{
  border-color:rgba(255,220,115,.72) !important;
  box-shadow:0 7px 18px rgba(0,0,0,.28), 0 0 14px rgba(255,208,90,.16) !important;
}
#shopScreen .compact-shop-item .shop-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  font-size:1.65rem !important;
  line-height:1;
  border-radius:12px;
  background:rgba(14,12,18,.34);
  box-shadow:inset 0 0 12px rgba(255,255,255,.04);
}
#shopScreen .compact-shop-item strong{
  display:block !important;
  width:100%;
  color:#fff1c8 !important;
  font-size:.68rem !important;
  line-height:1.05 !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#shopScreen .compact-shop-item em{
  position:absolute !important;
  right:5px !important;
  bottom:5px !important;
  padding:2px 5px !important;
  border-radius:999px;
  background:rgba(13,11,15,.72) !important;
  color:#ffd86a !important;
  font-size:.57rem !important;
  line-height:1.1 !important;
  font-style:normal !important;
}
#shopScreen .compact-shop-item.too-expensive{
  filter:saturate(.78) brightness(.88);
}
#shopScreen .compact-shop-item.too-expensive em{
  color:#d0c6b3 !important;
}
#shopScreen .compact-shop-item.daily-special{
  border-color:#ffd65c !important;
  box-shadow:0 0 0 2px rgba(255,214,92,.13), 0 7px 18px rgba(0,0,0,.28), 0 0 17px rgba(255,204,70,.20) !important;
}
#shopScreen .compact-shop-item.daily-special::after{
  content:'★';
  position:absolute;
  top:5px;
  right:6px;
  color:#ffe17b;
  font-size:.65rem;
  text-shadow:0 0 8px rgba(255,218,93,.55);
}
.shop-item-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(9,8,12,.72);
  backdrop-filter:blur(5px);
}
.shop-item-modal.hidden{display:none !important;}
.shop-item-detail-card{
  position:relative;
  width:min(92vw,420px);
  padding:26px 22px 20px;
  border-radius:24px;
  border:1px solid rgba(255,224,147,.52);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,220,132,.15), transparent 38%),
    linear-gradient(170deg, #4b3630 0%, #2d2530 58%, #211d28 100%);
  box-shadow:0 25px 70px rgba(0,0,0,.55), inset 0 0 28px rgba(255,238,188,.04);
  color:#f8edd6;
  text-align:center;
  animation:shopDetailIn .18s ease-out both;
}
.shop-detail-x{
  position:absolute;
  top:10px;
  right:12px;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(15,12,17,.45);
  color:#f9e7c6;
  font-size:1.35rem;
  cursor:pointer;
}
.shop-detail-icon{
  width:82px;
  height:82px;
  margin:2px auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:19px;
  font-size:2.75rem;
  background:linear-gradient(155deg, rgba(255,235,172,.16), rgba(31,25,37,.62));
  border:1px solid rgba(255,221,128,.35);
  box-shadow:0 0 24px rgba(255,211,94,.10), inset 0 0 18px rgba(255,255,255,.04);
}
.shop-item-detail-card .eyebrow{color:#ffd975;}
.shop-item-detail-card h2{
  margin:5px 0 8px;
  color:#fff0bf;
  font-size:1.45rem;
}
.shop-detail-description{
  margin:0 auto 10px;
  max-width:340px;
  color:#ded5c7;
  font-size:.9rem;
  line-height:1.48;
}
.shop-detail-owned{
  display:inline-block;
  margin:2px 0 14px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:#cfc6da;
  font-size:.76rem;
}
.shop-detail-wallet{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:0 0 15px;
}
.shop-detail-wallet span{
  padding:9px 8px;
  border-radius:13px;
  background:rgba(13,11,16,.38);
  color:#cfc6b8;
  font-size:.72rem;
}
.shop-detail-wallet b{
  display:block;
  margin-top:3px;
  color:#ffd86a;
  font-size:1rem;
}
.shop-detail-actions{
  display:grid;
  grid-template-columns:1fr auto;
  gap:9px;
}
.shop-purchase-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  filter:saturate(.45);
}
@keyframes shopDetailIn{
  from{opacity:0; transform:translateY(8px) scale(.97);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
@media(max-width:520px){
  #shopScreen .compact-shop-section{padding:11px;}
  #shopScreen .shop-icon-grid,
  #shopScreen .charm-shop-grid{gap:7px !important;}
  #shopScreen .compact-shop-item{border-radius:12px !important; padding:6px 3px !important;}
  #shopScreen .compact-shop-item .shop-icon{width:36px;height:36px;font-size:1.4rem !important;}
  #shopScreen .compact-shop-item strong{font-size:.59rem !important;}
  #shopScreen .compact-shop-item em{font-size:.52rem !important;right:3px !important;bottom:3px !important;}
  .shop-item-detail-card{padding:24px 16px 16px;}
  .shop-detail-actions{grid-template-columns:1fr;}
  .shop-detail-actions .small-btn{width:100%;}
}

/* ===== V79 global leaderboard ===== */
.leaderboard-shell{
  width:min(980px,calc(100% - 24px));
  margin:0 auto;
  padding:20px 0 42px;
}
.leaderboard-hero-card{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:22px;
  padding:22px;
  border:1px solid rgba(255,220,127,.26);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(29,45,70,.97),rgba(53,36,76,.96));
  box-shadow:0 18px 44px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.06);
}
.leaderboard-hero-card h1{margin:4px 0 6px;font-size:clamp(28px,5vw,44px);}
.leaderboard-hero-card p{margin:0;max-width:660px;color:rgba(245,247,255,.78);line-height:1.5;}
.leaderboard-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.leaderboard-me-card{
  margin:14px 0;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 14px;
  align-items:center;
  padding:14px 18px;
  border-radius:17px;
  border:1px solid rgba(255,216,90,.38);
  background:linear-gradient(135deg,rgba(255,215,88,.13),rgba(91,61,141,.2));
  box-shadow:0 8px 26px rgba(0,0,0,.18);
}
.leaderboard-me-card .eyebrow{grid-row:1 / span 2;align-self:center;}
.leaderboard-me-card strong{font-size:20px;color:#fff2b0;}
.leaderboard-me-card span:last-child{color:rgba(245,247,255,.75);font-size:13px;}
.leaderboard-table-card{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  background:rgba(15,25,43,.93);
  box-shadow:0 18px 44px rgba(0,0,0,.22);
}
.leaderboard-table-head,.leaderboard-row{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) 88px 120px;
  gap:10px;
  align-items:center;
  padding:12px 18px;
}
.leaderboard-table-head{
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(238,244,255,.55);
  background:rgba(255,255,255,.045);
}
.leaderboard-row{min-height:54px;border-top:1px solid rgba(255,255,255,.06);}
.leaderboard-row:nth-child(even){background:rgba(255,255,255,.022);}
.leaderboard-row.is-me{
  background:linear-gradient(90deg,rgba(255,213,75,.13),rgba(101,202,255,.08));
  box-shadow:inset 3px 0 #ffd85a;
}
.leaderboard-rank{font-size:18px;font-weight:900;color:#ffe58b;}
.leaderboard-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f8fbff;}
.leaderboard-score{text-align:right;font-variant-numeric:tabular-nums;font-weight:900;color:#fff0a9;}
.leaderboard-empty{padding:34px 18px;text-align:center;color:rgba(240,245,255,.65);}
.leaderboard-status{margin:12px 4px 0;text-align:center;color:rgba(235,242,255,.62);font-size:12px;}
@media(max-width:650px){
  .leaderboard-hero-card{display:block;}
  .leaderboard-actions{justify-content:flex-start;margin-top:14px;}
  .leaderboard-table-head,.leaderboard-row{grid-template-columns:50px minmax(0,1fr) 54px 86px;padding-left:10px;padding-right:10px;font-size:12px;}
  .leaderboard-table-head{font-size:9px;}
  .leaderboard-me-card{grid-template-columns:1fr;}
  .leaderboard-me-card .eyebrow{grid-row:auto;}
}


/* ===== V80 expanding board progression ===== */
.board[data-board-size="7"] .cell{border-radius:12px;}
.board[data-board-size="8"] .cell{border-radius:10px;}
.board[data-board-size="9"] .cell{border-radius:8px;}
.board[data-board-size="8"] .rune-img,
.board[data-board-size="9"] .rune-img{width:90%;height:90%;border-radius:7px;}
.board[data-board-size="8"] .power-orb-glyph,
.board[data-board-size="9"] .power-orb-glyph{font-size:20px;}
.board[data-board-size="8"] .character-tile-label,
.board[data-board-size="9"] .character-tile-label,
.board[data-board-size="8"] .character-rune-badge,
.board[data-board-size="9"] .character-rune-badge{font-size:8px;}
@media(max-width:700px), (orientation:portrait){
  .board[data-board-size="7"]{gap:4px;}
  .board[data-board-size="8"]{gap:3px;}
  .board[data-board-size="9"]{gap:2px;}
  .board[data-board-size="8"] .cell,
  .board[data-board-size="9"] .cell{border-radius:7px;}
  .board[data-board-size="9"] .blocker-hp{min-width:14px;height:14px;font-size:.5rem;right:1px;top:1px;}
  .board[data-board-size="9"] .power-orb-label{display:none;}
}

/* ===== V81 loadout hero artwork ===== */
#loadoutScreen .loadout-bag-hero{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:24px;
  border:3px solid rgba(222,177,80,.92);
  background:#0c2741;
  box-shadow:
    0 14px 26px rgba(0,0,0,.28),
    0 0 0 2px rgba(255,232,164,.16),
    inset 0 1px 0 rgba(255,255,255,.16);
}
#loadoutScreen .loadout-bag-hero::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:18px;
  border:1px solid rgba(255,237,179,.28);
  pointer-events:none;
  z-index:2;
}
#loadoutScreen .loadout-bag-hero img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:center;
}
#loadoutScreen .loadout-bag-title{
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  width:max-content;
  max-width:calc(100% - 28px);
  padding:7px 14px;
  border-radius:999px;
  border:2px solid rgba(237,194,99,.88);
  background:linear-gradient(180deg, rgba(20,52,84,.94), rgba(8,27,46,.96));
  color:#ffe7a8;
  font-size:.76rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.13em;
  text-align:center;
  text-shadow:0 2px 4px rgba(0,0,0,.6);
  box-shadow:0 4px 12px rgba(0,0,0,.28);
  white-space:nowrap;
}
#loadoutScreen .loadout-grid::before{
  display:none !important;
  content:none !important;
}
@media (max-width:520px), (orientation:portrait){
  #loadoutScreen .loadout-bag-hero{
    border-radius:20px;
  }
  #loadoutScreen .loadout-bag-hero img{
    aspect-ratio:4 / 3;
  }
  #loadoutScreen .loadout-bag-title{
    top:9px;
    padding:6px 10px;
    font-size:.62rem;
    letter-spacing:.10em;
  }
}

/* ===== V82 later-level mechanics and 8x8 cap ===== */
.map-goals .mechanic-goal{
  border-color:rgba(205,160,255,.7);
  background:linear-gradient(180deg,rgba(91,55,145,.88),rgba(49,31,90,.92));
  color:#f3ddff;
}

.rift-road-map-card .rift-node-12{left:45% !important;top:78% !important;}
.rift-road-map-card .rift-node-13{left:16% !important;top:43% !important;}
.rift-road-map-card .rift-node-14{right:7% !important;top:9% !important;left:auto !important;}
.rift-deep-map-card .rift-node-15{left:44% !important;top:79% !important;}
.rift-deep-map-card .rift-node-16{left:15% !important;top:43% !important;}
.rift-deep-map-card .rift-node-17{right:7% !important;top:8% !important;left:auto !important;}
.rift-road-map-card,.rift-deep-map-card{
  box-shadow:0 0 0 2px rgba(181,126,255,.16),0 18px 40px rgba(33,13,67,.28);
}
.rift-road-map-card::after,.rift-deep-map-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(145deg,rgba(163,98,255,.08),transparent 42%,rgba(80,224,255,.07));
}

.cell .frozen-overlay,.cell .portal-overlay,.cell .curse-overlay{
  position:absolute;z-index:14;pointer-events:none;display:grid;place-items:center;
  text-shadow:0 1px 5px rgba(0,0,0,.75);
}
.cell.frozen-crystal{
  box-shadow:inset 0 0 0 2px rgba(198,243,255,.8),inset 0 0 18px rgba(116,218,255,.38),0 0 12px rgba(135,224,255,.25);
}
.frozen-overlay{
  inset:3px;border-radius:14px;color:#e9fbff;font-size:clamp(14px,3.3vw,24px);
  background:linear-gradient(145deg,rgba(219,250,255,.22),rgba(82,174,230,.18));
  border:1px solid rgba(223,251,255,.58);
}
.cell.thaw-pop{animation:thawPop .38s ease-out 1;}
@keyframes thawPop{0%{filter:brightness(1.5);transform:scale(1)}50%{filter:brightness(1.9);transform:scale(1.08)}100%{filter:brightness(1);transform:scale(1)}}

.cell.portal-cell{
  box-shadow:inset 0 0 0 2px rgba(217,158,255,.78),0 0 14px rgba(180,91,255,.34);
}
.portal-overlay{
  width:44%;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:50%;color:#f1d4ff;font-size:clamp(16px,3.5vw,26px);
  border:2px solid rgba(217,167,255,.84);
  box-shadow:0 0 12px rgba(176,82,255,.7),inset 0 0 10px rgba(102,218,255,.35);
  animation:portalSpin 2.5s linear infinite;
}
@keyframes portalSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.cell.cursed-cell{
  box-shadow:inset 0 0 0 2px rgba(242,105,255,.74),0 0 13px rgba(224,74,255,.32);
}
.curse-overlay{
  right:3px;top:3px;min-width:24px;height:24px;padding:0 5px;border-radius:999px;
  background:rgba(83,29,111,.92);border:1px solid rgba(249,170,255,.8);color:#ffd9ff;
  font-size:11px;font-weight:900;
}

.cell.grand-power-orb{
  border-color:#fff1a8 !important;
  box-shadow:0 0 0 3px rgba(255,238,136,.64),0 0 28px rgba(255,210,68,.84),0 0 46px rgba(160,104,255,.48),inset 0 0 18px rgba(255,255,255,.26) !important;
  animation:grandOrbPulse 1.05s ease-in-out infinite;
}
.cell.grand-power-orb .power-orb-shell{filter:saturate(1.2) brightness(1.18);}
@keyframes grandOrbPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}

@media (max-width:700px), (orientation:portrait){
  .rift-road-map-card .rift-node-12,.rift-deep-map-card .rift-node-15{left:42% !important;top:78% !important;}
  .rift-road-map-card .rift-node-13,.rift-deep-map-card .rift-node-16{left:12% !important;top:44% !important;}
  .rift-road-map-card .rift-node-14,.rift-deep-map-card .rift-node-17{right:5% !important;top:9% !important;}
}
@media (prefers-reduced-motion:reduce){.portal-overlay,.cell.grand-power-orb{animation:none !important}}
.cell.blocker-shiftstone .blocker-img{
  filter:drop-shadow(0 0 7px rgba(190,154,122,.72)) brightness(1.08);
  animation:shiftStoneRumble 1.7s ease-in-out infinite;
}
.cell.blocker-shiftstone{box-shadow:inset 0 0 0 2px rgba(202,169,133,.5),0 0 12px rgba(163,121,87,.3)}
@keyframes shiftStoneRumble{0%,100%{transform:translate(0,0)}48%{transform:translate(-1px,0)}52%{transform:translate(1px,0)}}
@media (prefers-reduced-motion:reduce){.cell.blocker-shiftstone .blocker-img{animation:none !important}}


/* ===== V83 polish: centered character tiles + square enemy frames + homeward map art ===== */
.cell.character-tile{
  display:grid !important;
  place-items:center !important;
}
.cell.character-tile .rune-img{
  width:76% !important;
  height:76% !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:translateY(1px);
}
.character-tile-label{
  top:4px !important;
  max-width:calc(100% - 10px) !important;
}
.character-rune-badge{
  right:4px !important;
  bottom:4px !important;
}
#gameScreen .fighter-image,
#gameScreen .hero-image,
#gameScreen .enemy-image{
  width:76px !important;
  height:76px !important;
  border-radius:16px !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#gameScreen .fighter-image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
#gameScreen .hero-image img{object-position:center 24% !important;}
#gameScreen .enemy-image img{object-position:center 22% !important;}
.map-hero-img,
.map-enemy-img,
.intro-opponent img{
  width:80px !important;
  height:80px !important;
  aspect-ratio:1 / 1 !important;
  border-radius:16px !important;
  object-fit:cover !important;
  display:block !important;
}
.loadout-bag-hero img{
  object-position:center center;
}


/* ===== V84 journey extras + boss markers ===== */
.journey-legend{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:8px 0 18px;}
.legend-chip{padding:8px 12px;border-radius:999px;background:rgba(12,39,77,.72);border:1px solid rgba(239,201,107,.4);color:#f4ead1;font-size:.78rem;box-shadow:0 10px 24px rgba(0,0,0,.14);}
.legend-chip b{margin-right:6px;}
.journey-map-overlay{position:relative;}
.journey-extra-node{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:15px;border:2px solid rgba(255,224,145,.86);background:linear-gradient(180deg,rgba(29,74,132,.96),rgba(20,44,83,.96));box-shadow:0 10px 26px rgba(0,0,0,.32),0 0 0 3px rgba(255,233,155,.08);display:flex;align-items:center;justify-content:center;z-index:4;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;}
.journey-extra-node:hover:not(.locked){transform:translate(-50%,-50%) scale(1.07);box-shadow:0 14px 30px rgba(0,0,0,.38),0 0 20px rgba(255,220,120,.28);}
.journey-extra-node .journey-extra-icon{font-size:1.15rem;line-height:1;}
.journey-extra-node.type-friend{background:linear-gradient(180deg,#3d6fc0,#173f78);}
.journey-extra-node.type-story{background:linear-gradient(180deg,#7a58cc,#38286f);}
.journey-extra-node.type-treasure{background:linear-gradient(180deg,#a66d1c,#684116);}
.journey-extra-node.locked{filter:grayscale(.7);opacity:.45;cursor:not-allowed;}
.journey-extra-node.claimed::after{content:'✓';position:absolute;right:-5px;top:-6px;width:18px;height:18px;border-radius:999px;background:#f5d86f;color:#17365c;font-size:.75rem;font-weight:900;display:flex;align-items:center;justify-content:center;border:2px solid #fff4cb;}
.level-node.miniboss-node::before,.level-node.boss-node::before{position:absolute;left:8px;top:8px;width:22px;height:22px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:900;border:2px solid rgba(255,244,203,.95);box-shadow:0 8px 18px rgba(0,0,0,.28);z-index:2;}
.level-node.miniboss-node::before{content:'◆';background:linear-gradient(180deg,#7b5cda,#4e379f);color:#fff4d4;}
.level-node.boss-node::before{content:'👑';background:linear-gradient(180deg,#b8841c,#7a4c0f);font-size:.72rem;}
.travel-north-banner.unlock-pop .travel-north-inner{animation:regionUnlockPulse .7s ease 2;}
@keyframes regionUnlockPulse{0%{transform:scale(.96);opacity:.2;}55%{transform:scale(1.03);opacity:1;}100%{transform:scale(1);opacity:1;}}
.journey-event-modal{position:fixed;inset:0;background:rgba(5,14,28,.72);display:flex;align-items:center;justify-content:center;padding:18px;z-index:40;}
.journey-event-card{position:relative;max-width:420px;width:min(100%,420px);background:linear-gradient(180deg,#204a81,#102d55);border:2px solid rgba(240,208,117,.84);border-radius:24px;padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.35);color:#f6eed6;}
.journey-event-close-x{position:absolute;right:12px;top:10px;border:0;background:transparent;color:#f6eed6;font-size:1.5rem;cursor:pointer;}
.journey-event-badge{display:inline-block;padding:6px 12px;border-radius:999px;background:rgba(255,226,147,.18);border:1px solid rgba(255,226,147,.42);font-size:.72rem;letter-spacing:.08em;margin-bottom:10px;}
.journey-event-card h3{margin:0 0 8px;font-size:1.5rem;}
.journey-event-card p{margin:0 0 14px;line-height:1.45;color:#eae0c5;}
.journey-event-reward{padding:10px 12px;border-radius:16px;background:rgba(9,20,39,.34);border:1px dashed rgba(255,226,147,.35);margin-bottom:16px;font-size:.92rem;}
.journey-event-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
.mechanic-goal.mini{background:rgba(109,82,198,.18);border-color:rgba(171,155,242,.45);}
.mechanic-goal.boss{background:rgba(180,121,18,.16);border-color:rgba(244,214,125,.45);}
@media (max-width: 680px){.journey-extra-node{width:38px;height:38px;border-radius:13px;}.journey-extra-node .journey-extra-icon{font-size:1rem;}.journey-legend{gap:8px;}.legend-chip{font-size:.68rem;padding:6px 10px;}}

/* V86 Skybridge Roost final guardian node */
.rift-node-18{left:82%;top:12%;}
@media(max-width:680px){.rift-node-18{left:80%;top:11%;}}


/* ===== V87 rift-map node visibility + trail pad placement ===== */
.rift-road-map-card,
.rift-deep-map-card{
  position:relative !important;
  overflow:hidden;
}
.rift-road-map-card .journey-scene-img,
.rift-deep-map-card .journey-scene-img{
  display:block;
  width:100%;
  height:auto;
}
.rift-road-map-card .journey-map-overlay,
.rift-deep-map-card .journey-map-overlay{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:4 !important;
  pointer-events:none;
}
.rift-road-map-card .journey-node,
.rift-deep-map-card .journey-node{
  position:absolute !important;
  z-index:8 !important;
  pointer-events:auto !important;
  touch-action:manipulation;
}
.rift-road-map-card::before{content:"RIFT ROAD";z-index:3;}
.rift-deep-map-card::before{content:"RIFTHEART ROAD";z-index:3;}

/* Levels 13-15 placed directly on the three open pads along the rift road */
.rift-road-map-card .rift-node-12{left:24% !important;top:70% !important;right:auto !important;bottom:auto !important;}
.rift-road-map-card .rift-node-13{left:22.5% !important;top:40.5% !important;right:auto !important;bottom:auto !important;}
.rift-road-map-card .rift-node-14{left:74% !important;top:8% !important;right:auto !important;bottom:auto !important;}

/* Levels 16-19 aligned to the visible pads/trail on the final homeward map */
.rift-deep-map-card .rift-node-15{left:19% !important;top:76% !important;right:auto !important;bottom:auto !important;}
.rift-deep-map-card .rift-node-16{left:29% !important;top:49.5% !important;right:auto !important;bottom:auto !important;}
.rift-deep-map-card .rift-node-17{left:71% !important;top:15.5% !important;right:auto !important;bottom:auto !important;}
.rift-deep-map-card .rift-node-18{left:54% !important;top:31.5% !important;right:auto !important;bottom:auto !important;}

@media (max-width:700px), (orientation:portrait){
  .rift-road-map-card .rift-node-12{left:22% !important;top:70.5% !important;}
  .rift-road-map-card .rift-node-13{left:20.5% !important;top:41.5% !important;}
  .rift-road-map-card .rift-node-14{left:72% !important;top:8.5% !important;}
  .rift-deep-map-card .rift-node-15{left:17% !important;top:76.5% !important;}
  .rift-deep-map-card .rift-node-16{left:27% !important;top:50.5% !important;}
  .rift-deep-map-card .rift-node-17{left:69% !important;top:16% !important;}
  .rift-deep-map-card .rift-node-18{left:52% !important;top:32.5% !important;}
}


/* ===== V88 map polish: region frames, glowing trail links, current-level pulse ===== */
.journey-map-card .journey-node{
  backdrop-filter: blur(2px);
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}
.journey-map-card .journey-node:hover:not(.locked){
  transform: translateY(-2px) scale(1.03);
}
.journey-map-stack .journey-node.selected{
  animation: mapNodePulse 1.45s ease-in-out infinite;
}
@keyframes mapNodePulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(255,232,153,.24), 0 12px 26px rgba(0,0,0,.26), 0 0 0 rgba(255,214,99,0); transform:scale(1); }
  50%{ box-shadow:0 0 0 5px rgba(255,232,153,.34), 0 14px 34px rgba(0,0,0,.32), 0 0 24px rgba(255,214,99,.36); transform:scale(1.04); }
}
.journey-node.unlocked-node:not(.locked) .node-num{ color:#fff0b2; }

/* Region-colored frames */
.south-map-card .journey-node{ border-color:rgba(244,191,88,.88); background:linear-gradient(180deg, rgba(42,87,118,.95), rgba(20,46,69,.96)); box-shadow:0 12px 20px rgba(0,0,0,.28), 0 0 16px rgba(244,191,88,.14), inset 0 1px 0 rgba(255,255,255,.10); }
.north-map-card .journey-node{ border-color:rgba(255,155,92,.86); background:linear-gradient(180deg, rgba(95,60,39,.94), rgba(44,28,24,.97)); box-shadow:0 12px 20px rgba(0,0,0,.28), 0 0 16px rgba(255,130,84,.16), inset 0 1px 0 rgba(255,255,255,.08); }
.far-north-map-card .journey-node{ border-color:rgba(150,224,255,.88); background:linear-gradient(180deg, rgba(46,64,106,.95), rgba(22,31,64,.98)); box-shadow:0 12px 20px rgba(0,0,0,.28), 0 0 18px rgba(141,215,255,.18), inset 0 1px 0 rgba(255,255,255,.08); }
.underhill-map-card .journey-node{ border-color:rgba(190,152,101,.88); background:linear-gradient(180deg, rgba(79,58,41,.95), rgba(37,27,22,.98)); box-shadow:0 12px 20px rgba(0,0,0,.28), 0 0 18px rgba(204,156,102,.16), inset 0 1px 0 rgba(255,255,255,.07); }
.rift-road-map-card .journey-node,
.rift-deep-map-card .journey-node{ border-color:rgba(181,126,255,.92); background:linear-gradient(180deg, rgba(69,53,122,.95), rgba(28,24,66,.98)); box-shadow:0 12px 20px rgba(0,0,0,.30), 0 0 20px rgba(181,126,255,.18), inset 0 1px 0 rgba(255,255,255,.08); }

/* Trail links that glow as the player unlocks pads */
.journey-trail-link{
  position:absolute;
  height:12px;
  margin-top:-6px;
  transform-origin:left center;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.10), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  opacity:.32;
  z-index:6;
  pointer-events:none;
}
.journey-trail-link::before{
  content:'';
  position:absolute;
  inset:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.12), rgba(255,255,255,.08));
  opacity:.9;
}
.journey-trail-link.unlocked{ opacity:.9; }
.journey-trail-link.cleared{ opacity:1; }
.journey-trail-link.active{ animation: trailLinkPulse 1.2s ease-in-out infinite; }
@keyframes trailLinkPulse{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.22); }
}
.south-map-card .journey-trail-link{ background:linear-gradient(90deg, rgba(255,205,104,.16), rgba(255,232,168,.34), rgba(255,205,104,.16)); border-color:rgba(255,214,123,.28); box-shadow:0 0 16px rgba(255,214,123,.14); }
.south-map-card .journey-trail-link.unlocked::before{ background:linear-gradient(90deg, rgba(255,216,116,.58), rgba(255,248,199,.92), rgba(255,216,116,.58)); box-shadow:0 0 18px rgba(255,214,123,.48); }
.north-map-card .journey-trail-link{ background:linear-gradient(90deg, rgba(255,140,84,.14), rgba(255,186,134,.28), rgba(255,140,84,.14)); border-color:rgba(255,161,105,.26); box-shadow:0 0 16px rgba(255,137,81,.14); }
.north-map-card .journey-trail-link.unlocked::before{ background:linear-gradient(90deg, rgba(255,154,91,.54), rgba(255,217,171,.90), rgba(255,154,91,.54)); box-shadow:0 0 18px rgba(255,154,91,.44); }
.far-north-map-card .journey-trail-link{ background:linear-gradient(90deg, rgba(109,210,255,.14), rgba(180,240,255,.28), rgba(109,210,255,.14)); border-color:rgba(134,226,255,.24); box-shadow:0 0 16px rgba(117,215,255,.14); }
.far-north-map-card .journey-trail-link.unlocked::before{ background:linear-gradient(90deg, rgba(126,228,255,.56), rgba(224,248,255,.92), rgba(126,228,255,.56)); box-shadow:0 0 18px rgba(126,228,255,.46); }
.underhill-map-card .journey-trail-link{ background:linear-gradient(90deg, rgba(177,140,92,.14), rgba(223,195,140,.28), rgba(177,140,92,.14)); border-color:rgba(210,176,127,.24); box-shadow:0 0 16px rgba(195,160,114,.14); }
.underhill-map-card .journey-trail-link.unlocked::before{ background:linear-gradient(90deg, rgba(204,168,113,.56), rgba(245,229,181,.90), rgba(204,168,113,.56)); box-shadow:0 0 18px rgba(204,168,113,.42); }
.rift-road-map-card .journey-trail-link,
.rift-deep-map-card .journey-trail-link{ background:linear-gradient(90deg, rgba(162,114,255,.16), rgba(213,186,255,.30), rgba(162,114,255,.16)); border-color:rgba(196,150,255,.26); box-shadow:0 0 16px rgba(167,119,255,.16); }
.rift-road-map-card .journey-trail-link.unlocked::before,
.rift-deep-map-card .journey-trail-link.unlocked::before{ background:linear-gradient(90deg, rgba(181,130,255,.58), rgba(244,228,255,.94), rgba(181,130,255,.58)); box-shadow:0 0 18px rgba(181,130,255,.48); }

/* Late map path polish */
.rift-road-map-card .journey-node.selected,
.rift-deep-map-card .journey-node.selected{
  box-shadow:0 0 0 4px rgba(222,196,255,.28), 0 14px 30px rgba(0,0,0,.30), 0 0 30px rgba(168,116,255,.36);
}

@media (prefers-reduced-motion:reduce){
  .journey-map-stack .journey-node.selected,
  .journey-trail-link.active{ animation:none !important; }
}


/* ===== V89 map life + progression flow ===== */
/* Sparkles drifting along unlocked paths */
.journey-trail-link.unlocked::after{
  content:'';
  position:absolute;
  top:50%;
  left:0%;
  width:12px;
  height:12px;
  margin:-6px 0 0 -6px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(255,245,191,.95) 28%, rgba(255,233,145,.55) 58%, rgba(255,255,255,0) 74%);
  box-shadow:0 0 10px rgba(255,244,190,.92), 0 0 18px rgba(255,216,120,.62);
  animation: trailSparkleDrift 2.8s linear infinite;
}
.journey-trail-link.cleared::after{
  animation-duration: 1.9s;
}
.journey-trail-link.active::after{
  width:14px;
  height:14px;
  margin:-7px 0 0 -7px;
  animation-duration: 1.35s;
}
@keyframes trailSparkleDrift{
  0%{ left:0%; opacity:0; transform:scale(.55); }
  12%{ opacity:1; }
  82%{ opacity:1; }
  100%{ left:100%; opacity:0; transform:scale(1.12); }
}

/* Cleared level pennants */
.journey-node.cleared::after{
  content:'';
  position:absolute;
  right:-7px;
  top:-10px;
  width:16px;
  height:16px;
  background:linear-gradient(180deg, #ffe38b, #d59a21);
  clip-path:polygon(0 0, 100% 18%, 58% 50%, 100% 82%, 0 100%);
  box-shadow:0 2px 7px rgba(0,0,0,.24);
  transform-origin:left center;
  animation: clearedFlagWave 1.7s ease-in-out infinite;
  z-index:3;
}
.journey-node.cleared .node-num::before{
  content:'';
  position:absolute;
  right:-4px;
  top:-12px;
  width:2px;
  height:18px;
  background:rgba(255,246,214,.92);
  box-shadow:0 0 3px rgba(0,0,0,.18);
}
@keyframes clearedFlagWave{
  0%,100%{ transform:rotate(-8deg) scaleX(1); }
  50%{ transform:rotate(6deg) scaleX(.96); }
}

/* Treasure nodes visually open when claimed */
.journey-extra-node.type-treasure{ overflow:visible; }
.journey-extra-node.type-treasure.claimed{
  background:linear-gradient(180deg,#c58a2b,#8a5a1d);
  box-shadow:0 14px 28px rgba(0,0,0,.34), 0 0 20px rgba(255,212,116,.38);
}
.journey-extra-node.type-treasure.claimed .journey-extra-icon{
  transform: translateY(-1px) scale(1.08);
  filter: drop-shadow(0 0 7px rgba(255,231,158,.65));
}
.journey-extra-node.type-treasure.claimed::before{
  content:'';
  position:absolute;
  top:-10px;
  left:8px;
  right:8px;
  height:10px;
  border-radius:10px 10px 2px 2px;
  background:linear-gradient(180deg,#f6ce72,#b27620);
  transform:rotate(-20deg);
  transform-origin:left bottom;
  box-shadow:0 4px 10px rgba(0,0,0,.24);
}
.journey-extra-node.type-treasure.claimed::after{
  content:'✨';
  position:absolute;
  right:-6px;
  top:-8px;
  width:20px;
  height:20px;
  border-radius:999px;
  background:#f5d86f;
  color:#17365c;
  font-size:.8rem;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #fff4cb;
  box-shadow:0 0 10px rgba(255,221,118,.4);
}

@media (prefers-reduced-motion:reduce){
  .journey-trail-link.unlocked::after,
  .journey-node.cleared::after{ animation:none !important; }
}


/* ===== V90 between-level travel + dialogue + chapter celebrations ===== */
.journey-transition{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:
    radial-gradient(circle at 50% 30%, rgba(96,166,255,.18), transparent 34%),
    linear-gradient(180deg, rgba(4,13,28,.82), rgba(7,18,35,.94));
  backdrop-filter:blur(7px);
}
.journey-transition-card{
  position:relative;
  width:min(92vw,500px);
  border-radius:28px;
  padding:28px 24px 24px;
  text-align:center;
  color:#f8efd8;
  background:
    radial-gradient(circle at 50% 0%, rgba(90,167,255,.18), transparent 34%),
    linear-gradient(180deg,#214d82 0%,#122f56 55%,#0e2544 100%);
  border:2px solid rgba(240,207,115,.82);
  box-shadow:0 28px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
  animation:journeyCardArrive .55s ease-out both;
}
.journey-transition-card::before{
  content:'';
  position:absolute;
  inset:-35%;
  background:conic-gradient(from 0deg, transparent 0 22%, rgba(255,232,154,.12) 28%, transparent 34% 60%, rgba(117,211,255,.12) 68%, transparent 76%);
  animation:journeyAuraSpin 8s linear infinite;
  pointer-events:none;
}
.journey-transition-card > *{position:relative;z-index:1;}
.journey-transition-badge{
  display:inline-block;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid rgba(255,228,145,.42);
  background:rgba(255,229,146,.12);
  color:#ffe8a7;
  letter-spacing:.12em;
  font-size:.72rem;
  font-weight:900;
}
.journey-transition-icon{
  margin:12px 0 4px;
  font-size:3rem;
  filter:drop-shadow(0 0 14px rgba(255,225,129,.36));
  animation:journeyIconFloat 1.8s ease-in-out infinite;
}
.journey-transition-card h2{margin:4px 0 8px;font-size:clamp(1.6rem,5vw,2.3rem);color:#fff2c5;}
.journey-transition-card p{margin:0 auto 18px;max-width:42ch;line-height:1.45;color:#e9dfc7;}
.journey-dialogue{
  margin:16px 0 18px;
  text-align:left;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(6,19,37,.38);
  border:1px solid rgba(255,231,160,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.journey-speaker{font-size:.72rem;letter-spacing:.12em;font-weight:900;color:#f6cf6d;text-transform:uppercase;margin-bottom:5px;}
.journey-quote{font-size:1rem;line-height:1.4;color:#fff6de;font-style:italic;}
.journey-transition.chapter-complete{
  background:
    radial-gradient(circle at 50% 25%, rgba(255,205,86,.20), transparent 34%),
    linear-gradient(180deg, rgba(20,14,38,.82), rgba(13,24,48,.95));
}
.journey-transition.chapter-complete .journey-transition-card{
  border-color:rgba(255,220,112,.96);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,194,72,.20), transparent 34%),
    radial-gradient(circle at 14% 24%, rgba(134,102,255,.14), transparent 30%),
    linear-gradient(180deg,#4b3a78 0%,#21385f 48%,#132949 100%);
  box-shadow:0 28px 80px rgba(0,0,0,.44),0 0 34px rgba(255,205,92,.18),inset 0 1px 0 rgba(255,255,255,.09);
}
.journey-transition.chapter-complete .journey-transition-icon{font-size:3.4rem;animation:chapterTrophyPop 1.2s ease-in-out infinite;}
@keyframes journeyCardArrive{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes journeyAuraSpin{to{transform:rotate(360deg)}}
@keyframes journeyIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes chapterTrophyPop{0%,100%{transform:scale(1)}50%{transform:scale(1.10) rotate(2deg)}}
@media (max-width:600px){.journey-transition-card{padding:22px 18px 20px;border-radius:24px}.journey-dialogue{padding:12px 14px}.journey-transition-icon{font-size:2.7rem}}
@media (prefers-reduced-motion:reduce){.journey-transition-card,.journey-transition-card::before,.journey-transition-icon,.journey-transition.chapter-complete .journey-transition-icon{animation:none !important}}


/* ===== V91 manual map editor ===== */
.map-edit-toggle{
  border-color:rgba(255,221,126,.62) !important;
}
.map-edit-panel{
  margin:12px 0 18px;
  padding:14px;
  border-radius:20px;
  border:2px solid rgba(239,201,107,.56);
  background:linear-gradient(180deg,rgba(34,67,100,.96),rgba(14,34,55,.98));
  box-shadow:0 16px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
  color:#f6eed6;
}
.map-edit-copy{display:flex;flex-direction:column;gap:5px;}
.map-edit-copy strong{color:#ffe39a;font-size:1rem;}
.map-edit-copy span{font-size:.78rem;line-height:1.35;color:#ddd5bf;}
.map-edit-readout{
  margin-top:4px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(7,18,32,.38);
  border:1px solid rgba(255,222,135,.24);
  color:#fff1bb !important;
  font-variant-numeric:tabular-nums;
}
.map-edit-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.map-position-output{
  width:100%;
  min-height:170px;
  margin-top:12px;
  resize:vertical;
  border-radius:14px;
  border:1px solid rgba(255,224,145,.36);
  background:#081828;
  color:#f8eecf;
  padding:10px;
  font:600 .72rem/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.map-edit-mode .journey-map-card{
  outline:2px dashed rgba(255,226,132,.34);
  outline-offset:-5px;
}
.map-edit-mode .journey-node{
  cursor:grab !important;
  touch-action:none !important;
  z-index:30 !important;
  animation:none !important;
  box-shadow:0 0 0 4px rgba(255,233,151,.22),0 12px 28px rgba(0,0,0,.32) !important;
}
.map-edit-mode .journey-node::after{
  content:'↕';
  position:absolute;
  left:50%;
  bottom:-15px;
  transform:translateX(-50%);
  width:24px;
  height:20px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(7,23,42,.9);
  border:1px solid rgba(255,229,148,.55);
  color:#ffe69d;
  font-size:.7rem;
  box-shadow:0 5px 12px rgba(0,0,0,.24);
}
.map-edit-mode .journey-node.map-node-dragging{
  cursor:grabbing !important;
  transform:scale(1.08) !important;
  filter:brightness(1.14);
  box-shadow:0 0 0 5px rgba(255,236,166,.42),0 0 28px rgba(255,214,109,.45),0 18px 34px rgba(0,0,0,.35) !important;
}
.map-edit-mode .journey-trail-link,
.map-edit-mode .journey-extra-node{opacity:.28 !important;}
@media (max-width:700px){
  .map-edit-panel{padding:12px;margin-top:10px;}
  .map-edit-actions .small-btn{font-size:.68rem;padding:8px 10px;}
  .map-position-output{min-height:140px;font-size:.66rem;}
}


/* ===== V92 map editor recovery + Level 15 visibility ===== */
.map-edit-level-select{
  min-height:38px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,224,145,.38);
  background:#0b2740;
  color:#f8edcc;
  font-weight:800;
  max-width:220px;
}
.map-edit-mode .journey-node,
.map-edit-mode .journey-node.locked{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  filter:none !important;
}
.map-edit-mode .journey-node.locked::after{
  opacity:.55;
}
/* Hard safety position for Level 15 if no saved manual position exists. */
.rift-road-map-card .rift-node-14{
  left:60% !important;
  top:7% !important;
  right:auto !important;
  bottom:auto !important;
  z-index:12 !important;
}
@media (max-width:700px){
  .map-edit-level-select{max-width:100%;width:100%;}
  .rift-road-map-card .rift-node-14{left:58% !important;top:7% !important;}
}


/* ===== V94 map enemy portraits on level buttons ===== */
.journey-map-card .journey-node{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  padding:8px 6px 7px;
  overflow:visible;
}
.journey-map-card .journey-node .node-portrait{
  width:42px;
  height:42px;
  border-radius:999px;
  overflow:hidden;
  display:block;
  border:2px solid rgba(255,241,204,.9);
  box-shadow:0 5px 12px rgba(0,0,0,.34), 0 0 0 2px rgba(255,255,255,.08);
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), rgba(16,23,38,.86));
  margin-top:6px;
  flex:0 0 auto;
}
.journey-map-card .journey-node .node-portrait-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 28%;
  display:block;
}
.journey-map-card .journey-node .node-num{
  position:absolute;
  left:-7px;
  top:-10px;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,235,165,.98), rgba(214,156,44,.96));
  color:#193558 !important;
  font-size:.92rem !important;
  font-weight:900;
  box-shadow:0 6px 14px rgba(0,0,0,.28);
  border:2px solid rgba(255,249,228,.96);
  z-index:4;
}
.journey-map-card .journey-node small{
  width:72px !important;
  margin-top:auto;
  font-size:.59rem !important;
  line-height:1.05;
  text-align:center;
  color:#f7efd6;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.journey-map-overlay .journey-node.miniboss-node::before,
.journey-map-overlay .journey-node.boss-node::before{
  left:auto !important;
  right:-7px !important;
  top:auto !important;
  bottom:-8px !important;
  z-index:5 !important;
}
.journey-map-card .journey-node.locked .node-portrait-img{
  filter:grayscale(.85) brightness(.86);
}
.journey-map-card .journey-node.cleared .node-portrait{
  box-shadow:0 5px 12px rgba(0,0,0,.34), 0 0 0 2px rgba(255,255,255,.08), 0 0 16px rgba(255,220,120,.28);
}
.map-edit-mode .journey-node .node-portrait{
  opacity:.95;
}
@media (max-width:700px), (orientation:portrait){
  .journey-map-card .journey-node .node-portrait{
    width:36px;
    height:36px;
    margin-top:4px;
  }
  .journey-map-card .journey-node .node-num{
    width:26px;
    height:26px;
    font-size:.8rem !important;
    left:-6px;
    top:-8px;
  }
  .journey-map-card .journey-node small{
    width:58px !important;
    font-size:.49rem !important;
  }
}


/* ===== V95 enhanced map icons: boss sizing, rarity rings, hold preview ===== */
.journey-map-card .journey-node .node-portrait{
  position:relative;
  width:40px;
  height:40px;
  border:2px solid rgba(232,241,255,.92);
  box-shadow:0 5px 12px rgba(0,0,0,.34), 0 0 0 2px rgba(255,255,255,.08), 0 0 14px rgba(142,197,255,.14);
}
.journey-map-card .journey-node.unlocked-node .node-portrait{
  border-color:rgba(225,240,255,.98);
}
.journey-map-card .journey-node .node-portrait::before{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:999px;
  border:2px solid rgba(195,222,255,.55);
  box-shadow:0 0 14px rgba(146,197,255,.22);
  pointer-events:none;
}
.journey-map-card .journey-node.miniboss-node .node-portrait{
  width:46px;
  height:46px;
  border-color:rgba(230,215,255,.96);
  box-shadow:0 6px 14px rgba(0,0,0,.34), 0 0 0 2px rgba(255,255,255,.10), 0 0 16px rgba(179,132,255,.26);
}
.journey-map-card .journey-node.miniboss-node .node-portrait::before{
  inset:-5px;
  border-color:rgba(188,142,255,.72);
  box-shadow:0 0 16px rgba(188,142,255,.32);
}
.journey-map-card .journey-node.boss-node .node-portrait{
  width:52px;
  height:52px;
  border-color:rgba(255,244,201,.98);
  box-shadow:0 7px 16px rgba(0,0,0,.36), 0 0 0 2px rgba(255,255,255,.12), 0 0 20px rgba(248,204,96,.34);
}
.journey-map-card .journey-node.boss-node .node-portrait::before{
  inset:-6px;
  border:3px solid rgba(246,206,103,.82);
  box-shadow:0 0 18px rgba(246,206,103,.38);
}
.journey-map-card .journey-node.boss-node .node-portrait::after,
.journey-map-card .journey-node.miniboss-node .node-portrait::after{
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:999px;
  border-top:2px solid rgba(255,255,255,.45);
  border-left:2px solid transparent;
  border-right:2px solid transparent;
  border-bottom:2px solid transparent;
  opacity:.8;
  animation: portraitRingSpin 6s linear infinite;
  pointer-events:none;
}
.journey-map-card .journey-node.miniboss-node .node-portrait::after{ border-top-color:rgba(196,155,255,.62); }
.journey-map-card .journey-node.boss-node .node-portrait::after{ border-top-color:rgba(255,229,140,.76); animation-duration:4.5s; }
@keyframes portraitRingSpin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }

.map-enemy-preview{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:flex-end; justify-content:center;
  padding:18px; background:rgba(7,13,26,.58); backdrop-filter: blur(2px);
}
.map-enemy-preview.hidden{ display:none; }
.map-enemy-preview-card{
  position:relative; width:min(100%,440px);
  background:linear-gradient(180deg, rgba(26,56,96,.98), rgba(12,29,56,.98));
  border:2px solid rgba(241,209,116,.78); border-radius:24px; color:#f5edd8;
  box-shadow:0 24px 60px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.10);
  padding:18px 18px 16px;
}
.map-enemy-preview-close{
  position:absolute; right:12px; top:8px; border:0; background:transparent; color:#f5edd8; font-size:1.6rem; cursor:pointer;
}
.map-enemy-preview-top{ display:flex; gap:14px; align-items:center; margin-bottom:12px; }
.map-enemy-preview-portrait-wrap{
  width:94px; height:94px; border-radius:22px; overflow:hidden; flex:0 0 auto;
  border:3px solid rgba(255,242,194,.95); box-shadow:0 8px 18px rgba(0,0,0,.28), 0 0 20px rgba(246,206,103,.24);
  background:radial-gradient(circle at 35% 25%, rgba(255,255,255,.22), rgba(15,22,38,.88));
}
.map-enemy-preview-portrait{ width:100%; height:100%; object-fit:cover; object-position:center 26%; display:block; }
.map-enemy-preview-copy{ min-width:0; }
.map-enemy-preview-badge{ display:inline-block; padding:5px 10px; border-radius:999px; background:rgba(255,229,140,.12); border:1px solid rgba(255,229,140,.30); color:#ffe9a4; font-size:.72rem; font-weight:800; letter-spacing:.06em; margin-bottom:8px; }
.map-enemy-preview-name{ margin:0 0 4px; font-size:1.35rem; line-height:1.05; }
.map-enemy-preview-level{ color:#d7dff2; font-size:.94rem; }
.map-enemy-preview-desc{ margin:0 0 12px; color:#e6ddc7; line-height:1.42; }
.map-enemy-preview-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.map-enemy-preview-tag{ padding:7px 10px; border-radius:999px; background:rgba(9,19,37,.42); border:1px solid rgba(236,206,119,.22); color:#f5edd8; font-size:.78rem; }
.map-enemy-preview-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }

@media (max-width:700px), (orientation:portrait){
  .journey-map-card .journey-node .node-portrait{ width:34px; height:34px; }
  .journey-map-card .journey-node.miniboss-node .node-portrait{ width:40px; height:40px; }
  .journey-map-card .journey-node.boss-node .node-portrait{ width:45px; height:45px; }
  .map-enemy-preview{ padding:12px; }
  .map-enemy-preview-card{ padding:16px 14px 14px; border-radius:20px; }
  .map-enemy-preview-portrait-wrap{ width:82px; height:82px; border-radius:18px; }
  .map-enemy-preview-name{ font-size:1.18rem; }
}
@media (prefers-reduced-motion:reduce){
  .journey-map-card .journey-node.boss-node .node-portrait::after,
  .journey-map-card .journey-node.miniboss-node .node-portrait::after{ animation:none !important; }
}


/* ===== V96 compact map nodes + correct default selection ===== */
.journey-map-card .journey-node{
  width:66px !important;
  height:66px !important;
  min-height:66px !important;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  display:block !important;
  overflow:visible !important;
}
.journey-map-card .journey-node:hover:not(.locked){
  transform:translateY(-2px) scale(1.02);
}
.journey-map-card .journey-node .node-portrait{
  position:absolute !important;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:48px !important;
  height:48px !important;
  margin:0 !important;
  z-index:2;
  background:#162747;
}
.journey-map-card .journey-node .node-portrait-img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 24%;
}
.journey-map-card .journey-node.miniboss-node .node-portrait{
  width:54px !important;
  height:54px !important;
}
.journey-map-card .journey-node.boss-node .node-portrait{
  width:58px !important;
  height:58px !important;
}
.journey-map-card .journey-node .node-num{
  left:-4px !important;
  top:-4px !important;
  width:24px !important;
  height:24px !important;
  font-size:.73rem !important;
  z-index:5 !important;
}
.journey-map-card .journey-node small{
  position:absolute !important;
  left:50%;
  top:100%;
  transform:translate(-50%,5px);
  width:max-content !important;
  max-width:90px;
  margin:0 !important;
  padding:3px 7px;
  border-radius:11px;
  background:rgba(12,25,46,.86);
  border:1px solid rgba(241,209,116,.34);
  box-shadow:0 5px 10px rgba(0,0,0,.22);
  font-size:.53rem !important;
  line-height:1.08;
  white-space:normal;
  z-index:3;
}
.journey-node.unlocked-node:not(.locked) .node-num{ color:#193558 !important; }
.journey-node.locked:not(.cleared)::after{
  right:-2px !important;
  top:-2px !important;
  width:20px !important;
  height:20px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(15,28,49,.92) !important;
  border:1px solid rgba(255,243,205,.38) !important;
  box-shadow:0 4px 10px rgba(0,0,0,.28);
  font-size:.68rem !important;
  line-height:1;
  z-index:6 !important;
}
.journey-map-overlay .journey-node.miniboss-node::before,
.journey-map-overlay .journey-node.boss-node::before{
  right:-3px !important;
  bottom:-3px !important;
  width:22px !important;
  height:22px !important;
  font-size:.68rem !important;
  z-index:6 !important;
}
.journey-node.cleared::after{
  right:-2px !important;
  top:-2px !important;
  width:20px !important;
  height:20px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(28,92,51,.92) !important;
  border:1px solid rgba(229,255,233,.45) !important;
  font-size:.7rem !important;
  color:#efffed !important;
}
.level-select-popup{
  max-width:560px;
  padding:10px 12px;
}
.level-select-popup-copy strong{ font-size:1rem; }
.level-select-popup-copy small{ font-size:.9rem; }
@media (max-width:700px), (orientation:portrait){
  .journey-map-card .journey-node{ width:58px !important; height:58px !important; min-height:58px !important; }
  .journey-map-card .journey-node .node-portrait{ width:42px !important; height:42px !important; }
  .journey-map-card .journey-node.miniboss-node .node-portrait{ width:47px !important; height:47px !important; }
  .journey-map-card .journey-node.boss-node .node-portrait{ width:51px !important; height:51px !important; }
  .journey-map-card .journey-node .node-num{ width:22px !important; height:22px !important; font-size:.68rem !important; left:-3px !important; top:-3px !important; }
  .journey-map-card .journey-node small{ max-width:78px; font-size:.48rem !important; padding:2px 6px; transform:translate(-50%,4px); }
  .journey-map-overlay .journey-node.miniboss-node::before,
  .journey-map-overlay .journey-node.boss-node::before{ width:19px !important; height:19px !important; font-size:.6rem !important; right:-2px !important; bottom:-2px !important; }
  .journey-node.locked:not(.cleared)::after,
  .journey-node.cleared::after{ width:18px !important; height:18px !important; font-size:.6rem !important; right:-2px !important; top:-2px !important; }
  .level-select-popup{ padding:9px 10px; gap:10px; }
  .level-select-popup-copy strong{ font-size:.96rem; }
  .level-select-popup-copy small{ font-size:.84rem; }
}

/* ===== V97 reliable mobile map selection + portrait startup fix ===== */
.journey-map-card .journey-node{
  cursor:pointer !important;
  touch-action:manipulation !important;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.journey-map-card .journey-node:active:not(.locked){
  transform:scale(.96) !important;
}
.journey-map-card .journey-node.selected .node-portrait{
  box-shadow:0 0 0 3px rgba(255,238,174,.74),0 7px 16px rgba(0,0,0,.34),0 0 22px rgba(255,216,100,.42) !important;
}
.level-select-popup.hidden{
  display:none !important;
}
@media (max-width:700px), (orientation:portrait){
  .level-select-popup{
    position:sticky;
    bottom:calc(env(safe-area-inset-bottom) + 8px);
    max-width:92%;
    margin:8px auto 0;
  }
}


/* ===== V98 expanded shop / tool kit ===== */

#boostersPanel:not(.collapsed){
  max-height:min(62vh,540px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
#boostersPanel .booster:nth-of-type(n+5){
  border-color:rgba(214,177,92,.42);
  background:linear-gradient(180deg,rgba(52,72,89,.96),rgba(22,38,54,.98));
}
#loadoutScreen .loadout-item[data-loadout="potion"],
#loadoutScreen .loadout-item[data-loadout="timeCrystal"],
#loadoutScreen .loadout-item[data-loadout="frostBell"],
#loadoutScreen .loadout-item[data-loadout="pickaxe"]{
  border-color:rgba(225,185,92,.4);
  background:linear-gradient(165deg,rgba(43,73,90,.95),rgba(24,39,55,.98));
}
@media(max-width:520px){
  #shopScreen .new-shop-item::before{font-size:.38rem;padding:2px 4px;}
}


/* ===== V99 persistent story / transition cards ===== */
.travel-north-inner{ position:relative; }
.travel-north-close{
  position:absolute;
  right:10px;
  top:8px;
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(255,235,174,.42);
  background:rgba(10,26,45,.58);
  color:#fff2bf;
  font-size:1.25rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
}
.travel-north-close:active{ transform:scale(.96); }

/* ===== V100 Battle Bag + contextual consumable prompts ===== */
.battle-bag-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:8px 0 10px;
  padding:9px 10px;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(31,61,91,.96),rgba(15,35,55,.98));
  border:1px solid rgba(224,181,74,.5);
  box-shadow:0 8px 18px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08);
}
.battle-bag-label{display:flex;align-items:center;gap:6px;min-width:115px;color:#fff0bf;}
.battle-bag-label span{font-size:1.05rem}.battle-bag-label b{font-size:.78rem;white-space:nowrap}.battle-bag-label small{display:none;color:#d8e3ef;font-size:.65rem}
.battle-bag-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.battle-bag-item{
  position:relative;
  width:46px;
  min-width:46px;
  height:46px;
  padding:3px;
  border-radius:13px;
  border:1px solid rgba(237,207,123,.55);
  background:linear-gradient(180deg,rgba(57,92,125,.98),rgba(25,52,76,.98));
  color:#fff5d6;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 5px 10px rgba(0,0,0,.22);
}
.battle-bag-item>span{font-size:1.1rem;line-height:1}.battle-bag-item>small{font-size:.43rem;line-height:1;color:#e8edf5}.battle-bag-item>em{position:absolute;right:-4px;top:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#f0c857;color:#17365c;border:1px solid #fff3bd;font-style:normal;font-weight:900;font-size:.63rem;box-shadow:0 3px 7px rgba(0,0,0,.24)}
.battle-bag-item:disabled{opacity:.36;filter:grayscale(.45);cursor:not-allowed}.battle-bag-item.active{box-shadow:0 0 0 2px rgba(255,225,125,.35),0 0 14px rgba(255,214,105,.35)}

.battle-item-prompt{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(4,12,23,.72);backdrop-filter:blur(3px)}
.battle-item-prompt.hidden{display:none!important}
.battle-item-prompt-card{position:relative;width:min(100%,420px);padding:22px 20px 18px;border-radius:24px;text-align:center;background:linear-gradient(180deg,#234d82,#102c51);border:2px solid rgba(239,203,105,.86);box-shadow:0 24px 60px rgba(0,0,0,.38);color:#f7efd7}
.battle-item-prompt-close{position:absolute;right:12px;top:9px;border:0;background:transparent;color:#f7efd7;font-size:1.55rem;cursor:pointer}
.battle-item-prompt-icon{font-size:2.8rem;filter:drop-shadow(0 6px 10px rgba(0,0,0,.2));margin-bottom:5px}.battle-item-prompt-card h2{margin:6px 0 8px;font-size:1.42rem}.battle-item-prompt-card p{margin:0 auto 16px;max-width:340px;line-height:1.45;color:#e4e8ee}.battle-item-prompt-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}

@media(max-width:700px),(orientation:portrait){
  .battle-bag-bar{display:block;padding:8px;margin:7px 0 9px}.battle-bag-label{justify-content:center;margin-bottom:7px}.battle-bag-label small{display:none}.battle-bag-actions{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.battle-bag-item{width:100%;min-width:0;height:43px;border-radius:11px}.battle-bag-item>span{font-size:1rem}.battle-bag-item>small{font-size:.39rem}.battle-bag-item>em{right:-2px;top:-4px;min-width:16px;height:16px;font-size:.56rem}.battle-item-prompt{padding:12px}.battle-item-prompt-card{padding:20px 14px 15px;border-radius:20px}.battle-item-prompt-actions{display:grid;grid-template-columns:1fr 1fr}.battle-item-prompt-actions button{width:100%;min-width:0}
}


/* ===== V101 first-time player onboarding ===== */
.new-player-guide{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:18px; background:rgba(5,12,23,.72); backdrop-filter:blur(3px);
}
.new-player-guide.hidden{display:none !important;}
.new-player-guide-card{
  position:relative; width:min(100%,460px); max-height:calc(100vh - 36px); overflow:auto;
  padding:20px 20px 18px; border-radius:26px; color:#f7efd9;
  background:
    radial-gradient(circle at 20% 0%, rgba(111,192,255,.18), transparent 35%),
    linear-gradient(180deg, rgba(30,66,105,.99), rgba(12,31,58,.99));
  border:2px solid rgba(239,203,108,.84);
  box-shadow:0 28px 70px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.10);
  text-align:center;
}
.new-player-guide-close{
  position:absolute; right:12px; top:9px; border:0; background:transparent; color:#fff2c9;
  font-size:1.7rem; line-height:1; cursor:pointer; z-index:2;
}
.new-player-guide-hero{
  width:112px; height:112px; margin:0 auto 10px; border-radius:50%; overflow:hidden;
  border:3px solid rgba(255,230,151,.9); background:rgba(8,22,40,.38);
  box-shadow:0 8px 22px rgba(0,0,0,.28), 0 0 24px rgba(255,218,111,.18);
}
.new-player-guide-hero img{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block;}
.new-player-guide-card h2{margin:7px 0 10px;font-size:1.65rem;line-height:1.05;color:#fff0bd;}
.new-player-guide-story{margin:0 auto 14px;line-height:1.48;color:#e9e2cf;}
.new-player-guide-steps{display:grid;gap:9px;text-align:left;margin:14px 0 18px;}
.new-player-guide-steps>div{
  display:grid; grid-template-columns:32px 1fr; gap:10px; align-items:center;
  padding:10px 11px; border-radius:15px; background:rgba(8,20,37,.38);
  border:1px solid rgba(255,225,143,.18);
}
.new-player-guide-steps b{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#ffe69d,#c98d24);color:#173556;
  border:2px solid rgba(255,250,227,.9);
}
.new-player-guide-steps span{font-size:.92rem;line-height:1.3;}
.new-player-guide-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

.journey-node.new-player-target{
  z-index:30 !important;
  animation:newPlayerTargetPulse 1.05s ease-in-out infinite !important;
}
.journey-node.new-player-target::after{
  content:'START HERE' !important;
  position:absolute !important;
  left:50% !important; top:auto !important; bottom:calc(100% + 8px) !important; right:auto !important;
  transform:translateX(-50%); width:max-content !important; height:auto !important;
  padding:5px 9px !important; border-radius:999px !important;
  background:#ffe078 !important; color:#173556 !important; border:2px solid #fff5cf !important;
  box-shadow:0 7px 18px rgba(0,0,0,.28),0 0 18px rgba(255,220,105,.38) !important;
  font-size:.58rem !important; font-weight:900 !important; letter-spacing:.05em; z-index:12 !important;
}
@keyframes newPlayerTargetPulse{
  0%,100%{transform:scale(1);filter:brightness(1);}
  50%{transform:scale(1.09);filter:brightness(1.18);}
}

/* Make the first Level 1 tutorial feel instructional rather than like another generic intro. */
.level-intro-card{max-width:440px;}
.level-intro:not(.hidden) .level-intro-card{animation:tutorialCardIn .28s ease-out both;}
@keyframes tutorialCardIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

@media (max-width:700px), (orientation:portrait){
  .new-player-guide{padding:12px;align-items:flex-end;}
  .new-player-guide-card{padding:17px 14px 14px;border-radius:22px;max-height:86vh;}
  .new-player-guide-hero{width:88px;height:88px;}
  .new-player-guide-card h2{font-size:1.35rem;}
  .new-player-guide-story{font-size:.91rem;}
  .new-player-guide-steps>div{padding:9px 10px;grid-template-columns:28px 1fr;}
  .new-player-guide-steps b{width:27px;height:27px;}
  .new-player-guide-steps span{font-size:.84rem;}
  .new-player-guide-actions{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .journey-node.new-player-target,.level-intro:not(.hidden) .level-intro-card{animation:none !important;}
}


/* ===== V102 splash title card ===== */
#splashScreen .splash-title-card{
  position:absolute;
  left:50%;
  top:24px;
  transform:translateX(-50%);
  width:min(84%, 320px);
  z-index:12;
  text-align:center;
  padding:14px 18px 12px;
  border-radius:18px;
  border:2px solid rgba(233,191,82,.82);
  background:linear-gradient(180deg, rgba(39,69,106,.90), rgba(18,35,67,.92));
  box-shadow:0 16px 30px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(96,63,14,.28);
  backdrop-filter: blur(2px);
}
#splashScreen .splash-title-card::before{
  content:'';
  position:absolute;
  inset:6px;
  border-radius:14px;
  border:1px solid rgba(255,233,166,.18);
  pointer-events:none;
}
#splashScreen .splash-title-main{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  flex-wrap:wrap;
  gap:2px 6px;
  position:relative;
  z-index:1;
}
#splashScreen .splash-title-line{
  font-family:Georgia, 'Times New Roman', serif;
  font-weight:700;
  letter-spacing:.02em;
  color:#efbd46;
  text-shadow:0 1px 0 rgba(255,244,190,.75), 0 2px 0 rgba(148,94,14,.86), 0 4px 10px rgba(0,0,0,.38);
  line-height:.92;
}
#splashScreen .splash-title-wimble,
#splashScreen .splash-title-wizard{
  font-size:3.05rem;
}
#splashScreen .splash-title-the{
  font-size:1.55rem;
  margin:0 .05em .18em;
}
#splashScreen .splash-title-sub{
  margin-top:8px;
  font-family:Georgia, 'Times New Roman', serif;
  font-size:1.02rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#ffe4a0;
  text-shadow:0 1px 0 rgba(77,46,8,.95), 0 3px 8px rgba(0,0,0,.32);
  position:relative;
  z-index:1;
}
#splashScreen .splash-title-stars{
  position:absolute;
  inset:10px 14px auto;
  display:flex;
  justify-content:space-between;
  color:#ffe79b;
  opacity:.92;
  pointer-events:none;
}
#splashScreen .splash-title-stars span{
  font-size:.9rem;
  text-shadow:0 0 10px rgba(255,225,122,.45);
}
#splashScreen .splash-button-stack{
  bottom:14px;
}
#splashScreen .splash-button-stack .primary-btn{
  min-height:48px;
}
@media (max-width: 520px), (orientation: portrait){
  #splashScreen .splash-title-card{
    top:18px;
    width:min(86%, 290px);
    padding:12px 14px 10px;
    border-radius:16px;
  }
  #splashScreen .splash-title-card::before{ inset:4px; border-radius:12px; }
  #splashScreen .splash-title-wimble,
  #splashScreen .splash-title-wizard{ font-size:2.45rem; }
  #splashScreen .splash-title-the{ font-size:1.24rem; margin-bottom:.12em; }
  #splashScreen .splash-title-sub{ font-size:.86rem; letter-spacing:.14em; margin-top:6px; }
  #splashScreen .splash-button-stack{ width:calc(100% - 22px); bottom:12px; }
}


/* ===== V103 player delete controls ===== */
.player-card-actions{
  gap:9px;
  flex-wrap:wrap;
}
.player-card-actions .player-delete-btn{
  border-color:rgba(229,112,104,.62) !important;
  background:linear-gradient(180deg, rgba(112,43,44,.94), rgba(67,27,31,.97)) !important;
  color:#ffe1dd !important;
  box-shadow:0 8px 16px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.player-card-actions .player-delete-btn:hover{
  border-color:rgba(255,151,142,.82) !important;
  filter:brightness(1.08);
}
@media (max-width:700px), (orientation:portrait){
  .player-card-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .player-card-actions .small-btn{ width:100%; }
}


/* ===== V85 leave battle + stronger mobile FX polish ===== */
#leaveBattleBtn.danger-btn{
  background:linear-gradient(180deg, rgba(122,53,44,.98), rgba(82,30,26,.98));
  border-color:rgba(255,180,156,.42);
  color:#ffe8d8;
  box-shadow:0 10px 22px rgba(72,22,19,.28), inset 0 0 0 1px rgba(255,255,255,.06);
}
#leaveBattleBtn.danger-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(72,22,19,.34), inset 0 0 0 1px rgba(255,255,255,.09);
}
#leaveBattleBtn.danger-btn:active{ transform:translateY(1px); }
#gameScreen .mission-actions{ flex-wrap:wrap; gap:8px; }

/* Keep wild/special character tiles visually centered even with labels and badges. */
.cell.character-tile{
  padding-top:10px;
  box-sizing:border-box;
}
.cell.character-tile .rune-img{
  width:72% !important;
  height:72% !important;
  margin-top:8px;
  object-fit:contain !important;
  object-position:center center !important;
}
.character-tile-label{
  top:3px !important;
  font-size:.40rem !important;
}
.character-rune-badge{
  min-width:20px;
  text-align:center;
}

/* Slightly stronger helper presence so the assists are easier to notice. */
.board-helper-sprite{ filter:drop-shadow(0 8px 12px rgba(0,0,0,.36)) saturate(1.06); }
.board-helper-label{ font-size:.76rem; }

@media (max-width:700px), (orientation:portrait){
  #gameScreen .mission-actions{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    width:100%;
  }
  #gameScreen .mission-actions .small-btn{ width:100%; }
  .board-burst.cast-burst{ filter:brightness(1.08) saturate(1.08); }
  .board-fx-particle{ font-size:1.12rem; }
  .cell.character-tile{ padding-top:8px; }
  .cell.character-tile .rune-img{ width:70% !important; height:70% !important; margin-top:7px; }
}


/* ===== V106 cache-bust + visible verification ===== */
.build-badge{
  position:absolute;
  top:10px;
  right:10px;
  z-index:40;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(6,20,36,.88);
  color:#ffe08a;
  border:1px solid rgba(255,224,138,.68);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.06em;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  pointer-events:none;
}
.splash-image-card{position:relative;}
.danger-quick-btn{
  background:linear-gradient(180deg, rgba(130,58,48,.96), rgba(84,31,28,.98)) !important;
  border-color:rgba(255,185,160,.42) !important;
  color:#ffe7db !important;
}
.danger-quick-btn span{color:#ffe7db !important;}
.board-helper-sprite{z-index:120 !important;}
.board-helper-label{z-index:125 !important;}
.companion-magic-field{z-index:118 !important;}
.board-fx{z-index:110 !important;}
@media (max-width:700px), (orientation:portrait){
  .game-quickbar{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  }
  .danger-quick-btn{
    box-shadow:0 0 0 1px rgba(255,214,190,.15),0 8px 18px rgba(65,18,16,.30) !important;
  }
  .build-badge{
    top:8px;
    right:8px;
    font-size:.64rem;
  }
}


/* ===== V107 centered wild tiles + visible helpers + forced gameplay FX ===== */
.cell.character-tile{
  position:relative !important;
  display:block !important;
  padding:0 !important;
  overflow:hidden !important;
}
.cell.character-tile .character-portrait-img,
.cell.character-tile .rune-img.character-portrait-img{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:82% !important;
  height:82% !important;
  margin:0 !important;
  transform:translate(-50%,-50%) !important;
  object-fit:contain !important;
  object-position:center center !important;
  border-radius:12px !important;
  z-index:8 !important;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.28)) !important;
}
.cell.character-tile .character-tile-label,
.cell.character-tile .character-rune-badge{display:none !important;}
.cell.character-tile::before{z-index:9 !important;}
.cell.character-tile::after{z-index:10 !important;opacity:.32;}

.board-helper-character{
  position:absolute;
  width:112px;
  height:112px;
  margin-left:-56px;
  margin-top:-56px;
  object-fit:contain;
  object-position:center;
  z-index:160 !important;
  pointer-events:none;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.42));
  animation:helperCharacterEnter .72s cubic-bezier(.18,.78,.22,1) forwards, helperCharacterBob .45s ease-in-out .72s 2 alternate;
}
.board-helper-character.goldy-board-helper{width:100px;height:100px;margin-left:-50px;margin-top:-50px;}
.board-helper-character.dog-board-helper{width:124px;height:124px;margin-left:-62px;margin-top:-62px;}
.board-helper-character.gnome-board-helper{width:116px;height:116px;margin-left:-58px;margin-top:-58px;}
.board-helper-character.helper-impact{filter:drop-shadow(0 0 18px rgba(255,224,116,.85)) drop-shadow(0 10px 12px rgba(0,0,0,.42));}
.board-helper-character.returning{animation:helperCharacterExit .58s ease-in forwards !important;}
.board-helper-label-big{
  z-index:170 !important;
  font-size:.86rem !important;
  padding:6px 12px !important;
  box-shadow:0 0 18px rgba(255,217,93,.36),0 6px 18px rgba(0,0,0,.3) !important;
}
@keyframes helperCharacterEnter{
  0%{transform:translate(var(--from-x),var(--from-y)) scale(.55) rotate(-8deg);opacity:0;}
  35%{opacity:1;}
  82%{transform:translate(0,0) scale(1.10) rotate(2deg);opacity:1;}
  100%{transform:translate(0,0) scale(1);opacity:1;}
}
@keyframes helperCharacterBob{
  from{transform:translateY(0) scale(1);}
  to{transform:translateY(-10px) scale(1.06);}
}
@keyframes helperCharacterExit{
  0%{transform:translate(0,0) scale(1);opacity:1;}
  100%{transform:translate(var(--from-x),var(--from-y)) scale(.62) rotate(7deg);opacity:0;}
}

.board-cast-pulse{animation:boardCastPulseV107 .72s ease-out !important;}
.board-cast-fire{--cast-pulse-color:rgba(255,93,55,.72);}
.board-cast-ice{--cast-pulse-color:rgba(164,230,255,.72);}
.board-cast-water{--cast-pulse-color:rgba(66,198,255,.72);}
.board-cast-nature{--cast-pulse-color:rgba(85,221,103,.72);}
.board-cast-wind{--cast-pulse-color:rgba(183,134,255,.72);}
.board-cast-star{--cast-pulse-color:rgba(255,216,77,.78);}
@keyframes boardCastPulseV107{
  0%{box-shadow:inset 0 0 0 0 var(--cast-pulse-color),0 0 0 rgba(255,255,255,0);transform:scale(1);}
  35%{box-shadow:inset 0 0 34px 8px var(--cast-pulse-color),0 0 26px 3px var(--cast-pulse-color);transform:scale(1.012);}
  100%{box-shadow:inset 0 0 0 0 rgba(255,255,255,0),0 0 0 rgba(255,255,255,0);transform:scale(1);}
}

/* A subtle idle shimmer makes it obvious that the board itself is animated. */
.cell:not(.blocked):not(.locked) .rune-img:not(.character-portrait-img){
  animation:runeIdleV107 2.8s ease-in-out infinite;
}
.cell:nth-child(3n) .rune-img:not(.character-portrait-img){animation-delay:-.65s;}
.cell:nth-child(4n) .rune-img:not(.character-portrait-img){animation-delay:-1.25s;}
@keyframes runeIdleV107{
  0%,100%{transform:translateY(0) scale(1);filter:brightness(1);}
  50%{transform:translateY(-1.5px) scale(1.035);filter:brightness(1.08);}
}

/* The user explicitly wants gameplay animation. Restore only gameplay FX if iOS Reduce Motion is on. */
@media (prefers-reduced-motion:reduce){
  .board-cast-pulse{animation:boardCastPulseV107 .72s ease-out !important;}
  .board-helper-character{animation:helperCharacterEnter .72s cubic-bezier(.18,.78,.22,1) forwards, helperCharacterBob .45s ease-in-out .72s 2 alternate !important;}
  .board-helper-character.returning{animation:helperCharacterExit .58s ease-in forwards !important;}
  .board-burst{animation:boardBurst .58s ease-out forwards !important;}
  .board-fx-particle{animation:boardParticle 920ms ease-out forwards !important;}
  .cast-sigil{animation-duration:1s !important;animation-iteration-count:1 !important;}
  .cast-wave{animation-duration:.9s !important;animation-iteration-count:1 !important;}
}

@media (max-width:700px), (orientation:portrait){
  .cell.character-tile .character-portrait-img,
  .cell.character-tile .rune-img.character-portrait-img{width:86% !important;height:86% !important;}
  .board-helper-character{width:100px;height:100px;margin-left:-50px;margin-top:-50px;}
  .board-helper-character.dog-board-helper{width:112px;height:112px;margin-left:-56px;margin-top:-56px;}
}


/* ===== V108 integrated Wimble title + CSS wizard hat ===== */
#splashScreen .splash-title-wimble{
  display:inline-flex;
  align-items:flex-end;
  white-space:nowrap;
}
#splashScreen .splash-logo-w{
  position:relative;
  display:inline-block;
  isolation:isolate;
  margin-right:.01em;
}
#splashScreen .css-wizard-hat{
  position:absolute;
  left:-.12em;
  top:-.49em;
  width:.92em;
  height:.66em;
  transform:rotate(-12deg);
  transform-origin:50% 80%;
  pointer-events:none;
  z-index:3;
  filter:drop-shadow(0 .055em .035em rgba(0,0,0,.45));
}
/* pointed crown */
#splashScreen .css-wizard-hat::before{
  content:"";
  position:absolute;
  left:.19em;
  top:.02em;
  width:.52em;
  height:.50em;
  background:linear-gradient(135deg,#70a8ff 0%,#3475cf 38%,#183f91 72%,#11265f 100%);
  clip-path:polygon(48% 0%,66% 28%,82% 58%,100% 100%,4% 100%,24% 60%);
  border-radius:52% 48% 15% 16% / 60% 58% 12% 14%;
  box-shadow:inset .06em .03em .04em rgba(255,255,255,.25), inset -.05em -.03em .06em rgba(4,14,45,.4);
}
/* brim */
#splashScreen .css-wizard-hat::after{
  content:"";
  position:absolute;
  left:.04em;
  bottom:.02em;
  width:.84em;
  height:.18em;
  border-radius:50%;
  background:linear-gradient(180deg,#4d8ce4 0%,#2456a6 62%,#17396f 100%);
  box-shadow:inset 0 .035em .025em rgba(255,255,255,.24),0 .035em .03em rgba(0,0,0,.35);
}
#splashScreen .css-hat-star{
  position:absolute;
  z-index:4;
  left:.43em;
  top:.28em;
  color:#f6d36c;
  font-family:Georgia,serif;
  font-size:.19em;
  line-height:1;
  text-shadow:0 0 .08em rgba(255,223,120,.75);
}
/* a subtle gold band that belongs to the hat itself */
#splashScreen .css-wizard-hat .css-hat-star::before{
  content:"";
  position:absolute;
  width:.48em;
  height:.075em;
  left:-.20em;
  top:.58em;
  border-radius:.08em;
  background:linear-gradient(90deg,#9c6718,#f4ce68,#9c6718);
  transform:rotate(-2deg);
  box-shadow:0 .015em .02em rgba(0,0,0,.35);
}
@media (max-width:520px), (orientation:portrait){
  #splashScreen .css-wizard-hat{left:-.11em;top:-.48em;}
}

/* ===== v114 simplified Wimble's Bag ===== */
.bag-screen-inner{padding-bottom:34px}
.bag-header-card{display:flex;align-items:center;justify-content:space-between;gap:16px}
.bag-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.bag-section-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:18px 4px 10px}
.bag-section-heading h2{margin:.15rem 0 0}.bag-section-heading p{margin:0;max-width:420px;color:#cbd8e7;font-size:.84rem;text-align:right}
.bag-inventory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.bag-inventory-item{position:relative;min-height:118px;border:2px solid rgba(222,184,85,.72);border-radius:20px;background:linear-gradient(180deg,rgba(43,80,119,.96),rgba(26,55,88,.98));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 7px 18px rgba(0,0,0,.2);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px 10px 12px;color:#fff4ce}
.bag-item-icon{font-size:2rem;line-height:1;margin-bottom:8px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3))}
.bag-inventory-item strong{font-size:.76rem;line-height:1.1;max-width:95px}
.bag-item-count{position:absolute;right:8px;top:8px;min-width:27px;height:27px;padding:0 7px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#efc95a;color:#17375d;border:2px solid #fff0ad;font-size:.78rem;font-weight:900;box-shadow:0 3px 8px rgba(0,0,0,.28)}
@media(max-width:760px){
  .bag-header-card{align-items:flex-start}.bag-header-actions{flex-direction:column;align-items:flex-end}
  .bag-section-heading{align-items:flex-start;flex-direction:column}.bag-section-heading p{text-align:left}
  .bag-inventory-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .bag-inventory-item{min-height:92px;border-radius:15px;padding:11px 5px 8px}.bag-item-icon{font-size:1.55rem;margin-bottom:6px}.bag-inventory-item strong{font-size:.58rem}.bag-item-count{right:4px;top:4px;min-width:22px;height:22px;font-size:.66rem;padding:0 5px}
}


/* ===== v115 bag page cleanup ===== */
#loadoutScreen .loadout-hero-card::after{display:none !important;}
#loadoutScreen .charm-panel-card::before{display:none !important;}
#loadoutScreen .loadout-hero-card{padding:16px !important;}
#loadoutScreen .loadout-hero-card h1{margin:.1rem 0 .1rem !important;}
#loadoutScreen .loadout-hero-card p{display:none !important;}
#loadoutScreen .bag-section-heading{margin:16px 4px 10px !important;align-items:flex-start !important;}
#loadoutScreen .bag-section-heading p{display:none !important;}
#loadoutScreen .charm-panel-card{padding:16px !important;}
#loadoutScreen .charm-panel-card h2{margin:.15rem 0 .55rem !important;}
#loadoutScreen .charm-intro{display:none !important;}
#loadoutScreen .charm-bag-header{margin-top:14px !important;margin-bottom:10px !important;align-items:center !important;}
#loadoutScreen .charm-bag-header p{display:none !important;}
#loadoutScreen .equipped-slots{margin-top:4px !important;}
#loadoutScreen .equipped-slot{padding:10px !important;}
@media(max-width:760px){
  #loadoutScreen .loadout-hero-card{gap:12px !important;}
  #loadoutScreen .bag-header-actions{width:auto !important;}
  #loadoutScreen .charm-bag-header{align-items:center !important;}
}


/* ===== v117 map fix: make Levels 17-19 clearly visible, with Level 18 centered between them ===== */
.rift-deep-map-card .rift-node-16{left:24% !important;top:58% !important;right:auto !important;bottom:auto !important;z-index:9 !important;}
.rift-deep-map-card .rift-node-17{left:50% !important;top:34% !important;right:auto !important;bottom:auto !important;z-index:10 !important;}
.rift-deep-map-card .rift-node-18{left:78% !important;top:14% !important;right:auto !important;bottom:auto !important;z-index:9 !important;}
@media (max-width:700px), (orientation:portrait){
  .rift-deep-map-card .rift-node-16{left:23% !important;top:59% !important;}
  .rift-deep-map-card .rift-node-17{left:50% !important;top:35% !important;}
  .rift-deep-map-card .rift-node-18{left:77% !important;top:15% !important;}
}


/* ===== v120 global settings button + modal ===== */
.global-settings-btn{
  position:fixed;
  top:max(12px, env(safe-area-inset-top));
  right:max(12px, env(safe-area-inset-right));
  z-index:55;
  width:48px;
  height:48px;
  border-radius:50%;
  border:2px solid rgba(255,232,173,.9);
  background:linear-gradient(180deg, rgba(34,78,125,.96), rgba(16,42,74,.98));
  box-shadow:0 14px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
  color:#fff4cd;
  font-size:1.25rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.global-settings-btn:active{transform:scale(.97);}
.settings-modal{
  position:fixed;
  inset:0;
  z-index:70;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(5,14,28,.72);
}
.settings-panel{
  position:relative;
  width:min(100%, 430px);
  border-radius:24px;
  border:2px solid rgba(240,208,117,.84);
  background:linear-gradient(180deg,#204a81,#102d55);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  color:#f6eed6;
  padding:20px 18px 18px;
}
.settings-close{
  position:absolute;
  right:12px;
  top:10px;
  border:0;
  background:transparent;
  color:#f6eed6;
  font-size:1.5rem;
  cursor:pointer;
}
.settings-panel h2{margin:.2rem 0 1rem;color:#fff2cf;}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 8px;}
.settings-row strong{display:block;color:#fff2cf;}
.settings-row small{display:block;color:#dce5ef;margin-top:2px;}
.settings-slider-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px;color:#f3e6c5;font-weight:700;}
.settings-slider{width:100%;margin:0 0 10px;accent-color:#efc95a;}
.settings-note{margin-top:10px;padding:10px 12px;border-radius:16px;background:rgba(9,20,39,.34);border:1px dashed rgba(255,226,147,.35);font-size:.88rem;color:#eae0c5;}
@media (max-width:680px){
  .global-settings-btn{top:max(10px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right));width:44px;height:44px;font-size:1.1rem;}
  .settings-panel{padding:18px 14px 16px;border-radius:22px;}
}


/* ===== v121 audio UX upgrades ===== */
.track-now-playing{
  position:fixed;
  top:max(12px, env(safe-area-inset-top));
  left:max(12px, env(safe-area-inset-left));
  z-index:54;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,232,173,.55);
  background:rgba(11,30,56,.84);
  color:#fff0c4;
  box-shadow:0 12px 28px rgba(0,0,0,.24);
  font-size:.88rem;
  max-width:min(72vw, 330px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.track-now-playing .track-note{font-size:1rem;flex:0 0 auto;}
.track-now-playing.muted{opacity:.78;color:#d6dde7;}
.splash-audio-toggle{
  position:absolute;
  right:16px;
  bottom:16px;
  z-index:5;
}
.settings-now-playing{
  margin:0 0 12px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(9,20,39,.34);
  border:1px dashed rgba(255,226,147,.35);
  color:#f3e6c5;
  font-size:.92rem;
}
.settings-now-playing span{color:#fff4cd;font-weight:800;}
@media (max-width:680px){
  .track-now-playing{top:auto;bottom:max(10px, env(safe-area-inset-bottom));left:10px;right:64px;max-width:none;font-size:.8rem;padding:9px 12px;}
  .splash-audio-toggle{right:12px;bottom:12px;}
}


/* ===== v122 now-playing shortcut ===== */
.track-now-playing{appearance:none;-webkit-appearance:none;text-align:left;cursor:pointer;}
.track-now-playing:active{transform:scale(.985);}
.track-now-playing:focus-visible{outline:2px solid #ffe8a4;outline-offset:3px;}


/* ===== v125 splash music button fix ===== */
#splashScreen .splash-audio-toggle{
  top:56px !important;
  right:10px !important;
  bottom:auto !important;
  z-index:48 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}
@media (max-width:680px){
  #splashScreen .splash-audio-toggle{
    top:52px !important;
    right:8px !important;
  }
}


/* ===== v126 track toast cleanup + riftheart node fix ===== */
.track-now-playing{
  top:max(12px, env(safe-area-inset-top)) !important;
  left:max(12px, env(safe-area-inset-left)) !important;
  right:auto !important;
  bottom:auto !important;
  max-width:min(calc(100vw - 24px), 360px) !important;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .35s ease, transform .35s ease, visibility .35s ease;
  z-index:56;
}
.track-now-playing.visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);}
.track-now-playing.hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);}
.track-now-playing-main{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1 1 auto;
  text-align:left;
  padding:0;
  cursor:pointer;
}
.track-now-playing-main #trackNowPlayingText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.track-now-playing-close{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(255,232,173,.45);
  background:rgba(255,255,255,.08);
  color:#fff0c4;
  font-size:1rem;
  line-height:1;
  cursor:pointer;
}
.track-now-playing-close:active{transform:scale(.97);}
@media (max-width:680px){
  .track-now-playing{
    top:max(8px, env(safe-area-inset-top)) !important;
    left:8px !important;
    max-width:min(calc(100vw - 16px), 340px) !important;
    padding:8px 10px;
    font-size:.78rem;
  }
}
.rift-deep-map-card .rift-node-17{left:64% !important; top:29% !important; right:auto !important; bottom:auto !important; z-index:10 !important;}
.rift-deep-map-card .rift-node-18{left:72% !important; top:12% !important; right:auto !important; bottom:auto !important; z-index:9 !important;}
@media (max-width:700px), (orientation:portrait){
  .rift-deep-map-card .rift-node-17{left:63% !important; top:30% !important;}
  .rift-deep-map-card .rift-node-18{left:70% !important; top:13% !important;}
}

/* ===== v145 controlled Level 20 test ===== */
.sky-cloud-map-card{
  position:relative;
  overflow:hidden;
}
.sky-cloud-map-card .journey-scene-img{
  display:block;
  width:100%;
  height:auto;
}
.sky-cloud-map-card .journey-map-overlay{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:12 !important;
  pointer-events:none;
}
.sky-cloud-map-card .journey-node{
  position:absolute !important;
  z-index:18 !important;
  pointer-events:auto !important;
}
.sky-cloud-map-card .sky-cloud-node-19{
  left:18.74% !important;
  top:62.08% !important;
  right:auto !important;
  bottom:auto !important;
}

/* ===== v146 controlled Levels 21–22 test ===== */
.sky-cloud-map-card .sky-cloud-node-20{
  left:52.99% !important;
  top:38.56% !important;
  right:auto !important;
  bottom:auto !important;
}
.sky-cloud-map-card .sky-cloud-node-21{
  left:31.72% !important;
  top:8.30% !important;
  right:auto !important;
  bottom:auto !important;
}

/* ===== v147 controlled Levels 23–25 test ===== */
.sky-moon-map-card{
  position:relative;
  overflow:hidden;
}
.sky-moon-map-card .journey-scene-img{
  display:block;
  width:100%;
  height:auto;
}
.sky-moon-map-card .journey-map-overlay{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:12 !important;
  pointer-events:none;
}
.sky-moon-map-card .journey-node{
  position:absolute !important;
  z-index:18 !important;
  pointer-events:auto !important;
}
.sky-moon-map-card .sky-moon-node-22{left:22.09% !important;top:39.57% !important;right:auto !important;bottom:auto !important;}
.sky-moon-map-card .sky-moon-node-23{left:10.86% !important;top:17.15% !important;right:auto !important;bottom:auto !important;}
.sky-moon-map-card .sky-moon-node-24{left:29.93% !important;top:82.80% !important;right:auto !important;bottom:auto !important;}

/* ===== v148 controlled Levels 26–28 test ===== */
.sky-lantern-map-card{
  position:relative;
  overflow:hidden;
}
.sky-lantern-map-card .journey-scene-img{
  display:block;
  width:100%;
  height:auto;
}
.sky-lantern-map-card .journey-map-overlay{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:12 !important;
  pointer-events:none;
}
.sky-lantern-map-card .journey-node{
  position:absolute !important;
  z-index:18 !important;
  pointer-events:auto !important;
}
.sky-lantern-map-card .sky-lantern-node-25{
  left:23.98% !important;
  top:64.54% !important;
  right:auto !important;
  bottom:auto !important;
}
.sky-lantern-map-card .sky-lantern-node-26{
  left:63.69% !important;
  top:55.93% !important;
  right:auto !important;
  bottom:auto !important;
}
.sky-lantern-map-card .sky-lantern-node-27{
  left:37.13% !important;
  top:16.40% !important;
  right:auto !important;
  bottom:auto !important;
}

/* ===== v149 controlled Levels 29–30 test ===== */
.sky-final-map-card{position:relative;overflow:hidden;}
.sky-final-map-card .journey-scene-img{display:block;width:100%;height:auto;}
.sky-final-map-card .journey-map-overlay{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;z-index:12 !important;pointer-events:none;}
.sky-final-map-card .journey-node{position:absolute !important;z-index:18 !important;pointer-events:auto !important;}
.sky-final-map-card .sky-final-node-28{left:50.75% !important;top:77.83% !important;right:auto !important;bottom:auto !important;}
.sky-final-map-card .sky-final-node-29{left:56.58% !important;top:6.47% !important;right:auto !important;bottom:auto !important;}

/* ===== v151 boss victory + tuned reward UI ===== */
.reward-boss-art.hidden,
.reward-bonus.hidden{display:none !important;}

.reward-boss-art{
  width:min(100%, 300px);
  margin:0 auto 12px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,223,126,.42);
  background:rgba(10,24,40,.9);
  box-shadow:0 12px 28px rgba(0,0,0,.3), 0 0 24px rgba(255,219,112,.12);
}
.reward-boss-art img{
  display:block;
  width:100%;
  height:170px;
  object-fit:cover;
}
.reward-boss-caption{
  padding:9px 12px 10px;
  color:#fff0b6;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.reward-bonus{
  margin:10px auto 0;
  width:min(100%, 320px);
  padding:9px 12px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(62,103,153,.9), rgba(28,59,96,.96));
  border:1px solid rgba(255,226,139,.35);
  color:#fff3c8;
  font-size:.82rem;
  font-weight:850;
  line-height:1.35;
}


/* ===== v152 mobile victory modal scrolling fix =====
   Tall boss reward screens must scroll as a whole instead of being vertically
   centered beyond the viewport. Keep Continue/Next Level reachable on iPhone.
*/
.modal{
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  place-items:start center !important;
  align-items:start !important;
  justify-items:center !important;
  padding-top:max(18px, env(safe-area-inset-top)) !important;
  padding-right:18px !important;
  padding-bottom:max(110px, calc(env(safe-area-inset-bottom) + 96px)) !important;
  padding-left:18px !important;
}

.modal-card{
  margin:0 auto !important;
  max-height:none !important;
  min-height:0 !important;
  overflow:visible !important;
}

/* Keep the action available at the bottom of the card while the user scrolls. */
#modalBtn{
  position:sticky !important;
  bottom:max(10px, env(safe-area-inset-bottom)) !important;
  z-index:30 !important;
  display:block !important;
  width:min(100%, 320px) !important;
  margin:16px auto 2px !important;
  box-shadow:0 10px 26px rgba(0,0,0,.36), 0 0 0 4px rgba(17,42,67,.88) !important;
}

/* A little less vertical bulk on phones without sacrificing the new artwork. */
@media (max-width:700px), (max-height:820px){
  .modal-card{
    padding:14px 14px 18px !important;
  }
  .modal-badge{
    margin-bottom:7px !important;
    padding:5px 11px !important;
  }
  .modal-icon{
    width:66px !important;
    height:66px !important;
    font-size:2rem !important;
    margin-bottom:6px !important;
  }
  .modal-card h2{
    font-size:1.48rem !important;
    line-height:1.08 !important;
    margin:.05rem 0 .35rem !important;
  }
  .reward-chest-box{
    margin:8px auto 10px !important;
    padding:10px !important;
  }
  .reward-chest-box::before{
    margin-bottom:7px !important;
    padding:5px 9px !important;
  }
  .reward-chest{
    width:92px !important;
    height:92px !important;
    margin-bottom:7px !important;
  }
  .reward-chest img{
    width:62px !important;
    height:62px !important;
  }
  .reward-reveal{
    gap:6px !important;
    padding:8px 9px !important;
  }
  .reward-boss-art{
    width:min(100%, 280px) !important;
    margin-bottom:8px !important;
  }
  .reward-boss-art img{
    height:132px !important;
  }
  .reward-boss-caption{
    padding:7px 9px 8px !important;
    font-size:.68rem !important;
  }
  #rewardGold{
    font-size:1.8rem !important;
  }
  .reward-bonus{
    margin-top:6px !important;
    padding:7px 9px !important;
  }
  .modal-card p{
    margin-bottom:8px !important;
    font-size:.86rem !important;
    line-height:1.35 !important;
  }
}

/* ===== v153 Wizard Growth ===== */
.wizard-growth-card{margin:14px 0 18px;padding:16px;border-radius:22px;background:linear-gradient(180deg,rgba(35,79,122,.96),rgba(20,48,80,.98));border:2px solid rgba(240,197,88,.78);box-shadow:0 12px 28px rgba(0,0,0,.24)}
.wizard-growth-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.wizard-growth-heading h2{margin:2px 0 0;color:#fff1bf}
.wizard-rank-chip{padding:7px 11px;border-radius:999px;color:#213b5d;background:linear-gradient(180deg,#ffe98f,#d6a83b);font-weight:900;border:1px solid rgba(255,255,255,.65)}
.wizard-growth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.wizard-growth-grid>div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:10px;border-radius:15px;background:rgba(9,31,54,.55);border:1px solid rgba(255,224,133,.22)}
.wizard-growth-grid span{grid-row:1/3;font-size:1.45rem}.wizard-growth-grid b{color:#fff3c8;font-size:1rem}.wizard-growth-grid small{color:#c8d8e8;font-size:.72rem}.wizard-growth-note{margin:11px 0 0;color:#dce9f6;font-size:.82rem;line-height:1.35}


/* ===== v154 victory panel portrait framing + action button placement ===== */
.reward-boss-art{
  width:min(100%, 320px) !important;
  margin:0 auto 14px !important;
  border-radius:20px !important;
  overflow:hidden !important;
  border:1px solid rgba(255,223,126,.42) !important;
  background:linear-gradient(180deg, rgba(15,30,51,.98), rgba(11,23,40,.96)) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.30), 0 0 24px rgba(255,219,112,.12) !important;
}
.reward-boss-art img{
  display:block !important;
  width:100% !important;
  height:190px !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:
    radial-gradient(circle at center, rgba(39,78,126,.28), rgba(12,24,41,.92) 70%),
    linear-gradient(180deg, rgba(17,31,52,.96), rgba(8,18,30,.98)) !important;
  padding:8px !important;
}
.modal{
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  place-items:start center !important;
  align-items:start !important;
  justify-items:center !important;
  padding-top:max(18px, env(safe-area-inset-top)) !important;
  padding-right:18px !important;
  padding-bottom:max(40px, calc(env(safe-area-inset-bottom) + 32px)) !important;
  padding-left:18px !important;
}
.modal-card{
  margin:0 auto !important;
  max-height:none !important;
  min-height:0 !important;
  overflow:visible !important;
  padding-bottom:24px !important;
}
#modalBtn{
  position:static !important;
  bottom:auto !important;
  z-index:30 !important;
  display:block !important;
  width:min(100%, 320px) !important;
  margin:20px auto 6px !important;
  box-shadow:0 10px 26px rgba(0,0,0,.36), 0 0 0 4px rgba(17,42,67,.88) !important;
}
#modalText{
  text-align:center !important;
  margin:8px auto 0 !important;
  max-width:330px !important;
}
@media (max-width:700px), (max-height:820px){
  .reward-boss-art{
    width:min(100%, 286px) !important;
    margin-bottom:10px !important;
  }
  .reward-boss-art img{
    height:156px !important;
    padding:6px !important;
  }
  #modalBtn{
    width:min(100%, 330px) !important;
    margin:18px auto 4px !important;
  }
}


/* ===== v155 journey companion art + victory panel polish ===== */
.journey-companions{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:10px;
  margin:8px auto 16px;
  padding:10px 12px 12px;
  max-width:360px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(7,22,39,.34), rgba(10,26,44,.18));
  border:1px solid rgba(255,230,154,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.journey-companion{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  min-width:74px;
}
.journey-companion img{
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.28));
}
.journey-companion span{
  font-size:.70rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffe9a6;
  font-weight:900;
}
.journey-companion-dog img{ width:62px; height:62px; }
.journey-companion-wimble img{ width:86px; height:86px; }
.journey-companion-goldy img{ width:52px; height:52px; }
.journey-companion-wimble{ transform:translateY(1px); }
.journey-companion-goldy{ transform:translateY(-8px); }
.journey-transition.chapter-complete .journey-companions{
  background:linear-gradient(180deg, rgba(54,36,84,.34), rgba(20,24,57,.18));
  border-color:rgba(255,220,128,.24);
}

.reward-chest-box{
  width:min(100%, 360px) !important;
  margin:10px auto 12px !important;
  padding:14px 14px 16px !important;
  border-radius:26px !important;
  background:linear-gradient(180deg, rgba(25,58,96,.72), rgba(11,28,50,.82)) !important;
  border:1px solid rgba(255,220,126,.28) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 30px rgba(0,0,0,.20) !important;
}
.reward-chest{
  width:108px !important;
  height:108px !important;
  margin:0 auto 10px !important;
  box-shadow:0 10px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.reward-reveal{
  gap:8px !important;
}
.reward-boss-caption{
  letter-spacing:.08em !important;
  line-height:1.28 !important;
}
#rewardGold{
  display:block !important;
  line-height:1.02 !important;
  text-shadow:0 2px 12px rgba(255,210,92,.14) !important;
}
.reward-line.minor{
  max-width:290px !important;
  margin:0 auto !important;
}
.reward-bonus{
  max-width:290px !important;
  margin:8px auto 0 !important;
}
.modal-card h2{
  line-height:1.08 !important;
}
#modalBtn{
  margin-top:22px !important;
}

@media (max-width: 600px){
  .journey-companions{
    gap:8px;
    margin:6px auto 14px;
    padding:8px 10px 10px;
  }
  .journey-companion{ min-width:64px; }
  .journey-companion-dog img{ width:54px; height:54px; }
  .journey-companion-wimble img{ width:76px; height:76px; }
  .journey-companion-goldy img{ width:44px; height:44px; }
  .journey-companion span{ font-size:.64rem; }
  .reward-chest-box{
    width:min(100%, 330px) !important;
    padding:12px 12px 14px !important;
  }
  .reward-chest{
    width:94px !important;
    height:94px !important;
    margin-bottom:8px !important;
  }
  .reward-boss-caption{ font-size:.70rem !important; }
}

/* ===== v156 destination-map story cards ===== */
.story-journey-hero,
.journey-map-hero{
  position:relative;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,224,138,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 30px rgba(0,0,0,.22);
}
.story-journey-hero{height:160px;margin:-2px 0 13px;border-radius:18px;}
.journey-map-hero{height:190px;margin:12px auto 14px;max-width:390px;border-radius:22px;}
.story-map-shade,
.journey-map-hero-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(5,19,35,.02) 25%,rgba(5,19,35,.18) 56%,rgba(5,19,35,.68) 100%),
    linear-gradient(90deg,rgba(5,19,35,.14),transparent 38%,transparent 68%,rgba(5,19,35,.12));
}
.story-trio,
.journey-map-trio{
  position:absolute;inset:auto 0 0;height:72%;
  display:flex;align-items:flex-end;justify-content:center;gap:0;pointer-events:none;
}
.story-trio img,.journey-map-trio img{
  object-fit:contain;filter:drop-shadow(0 9px 12px rgba(0,0,0,.42));transform-origin:50% 100%;
}
.story-trio-wimble,.journey-map-wimble{width:88px;height:112px;z-index:3;transform:translateX(8px) rotate(-2deg);}
.story-trio-dog,.journey-map-dog{width:62px;height:70px;z-index:4;transform:translate(-6px,2px);}
.story-trio-goldy,.journey-map-goldy{width:50px;height:50px;z-index:5;transform:translate(-16px,-60px) rotate(8deg);}
.journey-transition-card{max-height:calc(100dvh - 28px);overflow-y:auto;-webkit-overflow-scrolling:touch;}
.journey-map-hero::after,.story-journey-hero::after{
  content:'';position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(180deg,transparent,rgba(5,17,30,.22));pointer-events:none;
}
.story-journey-hero[data-level="0"],.story-journey-hero[data-level="1"],.story-journey-hero[data-level="2"],
.journey-map-hero[data-level="0"],.journey-map-hero[data-level="1"],.journey-map-hero[data-level="2"]{background-position:center 58%;}
.story-journey-hero[data-level="3"],.story-journey-hero[data-level="4"],.story-journey-hero[data-level="5"]{background-position:center 54%;}
.story-journey-hero[data-level="9"],.story-journey-hero[data-level="10"],.story-journey-hero[data-level="11"]{background-position:center 61%;}
.story-journey-hero[data-level="19"],.story-journey-hero[data-level="20"],.story-journey-hero[data-level="21"]{background-position:center 56%;}
.story-journey-hero[data-level="25"],.story-journey-hero[data-level="26"],.story-journey-hero[data-level="27"]{background-position:center 57%;}
.story-journey-hero[data-level="28"],.story-journey-hero[data-level="29"]{background-position:center 50%;}
@media (max-width:600px){
  .story-journey-hero{height:140px;}
  .journey-map-hero{height:166px;margin:10px auto 12px;}
  .story-trio-wimble,.journey-map-wimble{width:76px;height:98px;}
  .story-trio-dog,.journey-map-dog{width:54px;height:62px;}
  .story-trio-goldy,.journey-map-goldy{width:44px;height:44px;transform:translate(-14px,-52px) rotate(8deg);}
}

/* ===== v157 Bag / Inventory cleanup ===== */
.bag-section-heading{
  align-items:flex-end !important;
  gap:12px;
}
.bag-section-note{
  max-width:220px;
  text-align:right;
  color:#cbd9e7;
  font-size:.72rem;
  line-height:1.3;
}
.bag-subsection-label{
  margin:13px 2px 8px;
  color:#f4d677;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.14em;
}
.bag-inventory-item{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  min-height:122px;
  width:100%;
  text-align:center;
  color:inherit;
  font:inherit;
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.bag-inventory-item:hover,
.bag-inventory-item:focus-visible{
  transform:translateY(-2px);
  border-color:#ffe18a !important;
  box-shadow:0 12px 25px rgba(0,0,0,.25),0 0 18px rgba(255,218,107,.12);
  outline:none;
}
.bag-inventory-item small{
  display:block;
  margin-top:5px;
  color:#c8d8e8;
  font-size:.68rem;
  line-height:1.2;
}
.bag-item-count{
  min-width:30px !important;
  height:30px !important;
  padding:0 8px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:.88rem !important;
  font-weight:950 !important;
  color:#183451 !important;
  background:linear-gradient(180deg,#fff0a0,#e8bd4a) !important;
  border:2px solid rgba(255,255,255,.7) !important;
  box-shadow:0 5px 13px rgba(0,0,0,.22) !important;
}

.bag-item-info-card .bag-item-availability{
  margin:10px 0 2px;
  padding:9px 11px;
  border-radius:13px;
  background:rgba(88,166,114,.16);
  border:1px solid rgba(132,220,158,.30);
  color:#dff6df;
  font-size:.78rem;
  font-weight:800;
}

.journey-keepsakes-card{
  margin:18px 0;
  padding:16px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(48,72,105,.82),rgba(22,43,69,.94));
  border:1px solid rgba(239,201,99,.42);
  box-shadow:0 12px 28px rgba(0,0,0,.20);
}
.journey-keepsakes-card h2{
  margin:2px 0 0;
  color:#fff1bd;
}
.keepsake-note{
  margin:8px 0 13px;
  color:#d6e0eb;
  font-size:.78rem;
  line-height:1.4;
}
.keepsake-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.keepsake-slot{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:9px;
  align-items:center;
  min-height:66px;
  padding:9px 10px;
  border-radius:15px;
  background:rgba(9,25,43,.48);
  border:1px solid rgba(255,225,137,.16);
  transition:opacity .2s ease, filter .2s ease, border-color .2s ease;
}
.keepsake-slot > span{
  grid-row:1/3;
  font-size:1.55rem;
}
.keepsake-slot strong{
  color:#fff0b4;
  font-size:.76rem;
  line-height:1.15;
}
.keepsake-slot small{
  color:#afc3d5;
  font-size:.66rem;
}
.keepsake-slot.locked{
  opacity:.38;
  filter:grayscale(.85);
}
.keepsake-slot.locked::after{
  content:'🔒';
  position:absolute;
  right:7px;
  top:7px;
  font-size:.7rem;
}
.keepsake-slot.collected{
  border-color:rgba(255,220,102,.55);
  box-shadow:inset 0 0 18px rgba(255,210,82,.06);
}
.keepsake-slot.collected::after{
  content:'✓';
  position:absolute;
  right:7px;
  top:6px;
  width:17px;
  height:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#17314d;
  background:#f3d266;
  font-size:.68rem;
  font-weight:950;
}

/* Make equipped charms easier to read at a glance. */
.equipped-slots{
  gap:10px !important;
  margin-bottom:16px !important;
}
.equipped-slot{
  min-height:72px;
  border:1px solid rgba(255,218,105,.35) !important;
  background:linear-gradient(180deg,rgba(35,75,116,.72),rgba(18,45,75,.82)) !important;
}
.equipped-slot > span{
  color:#fff0b4 !important;
  font-weight:850 !important;
}

/* Charm quantities stay visible; nothing is being cleared. */
.charm-bag-slot small{
  min-width:25px;
  height:25px;
  padding:0 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(7,23,39,.82);
  border:1px solid rgba(255,222,130,.38);
  color:#ffeaa7;
  font-weight:900;
}

@media (max-width:600px){
  .bag-section-heading{align-items:flex-start !important;flex-direction:column;}
  .bag-section-note{text-align:left;max-width:none;}
  .bag-inventory-item{min-height:112px;}
  .keepsake-grid{grid-template-columns:1fr 1fr;}
}

/* ===== v158 Equipped charms + collection filter ===== */
.equipped-charms-showcase{
  margin-top:15px;
  padding-top:14px;
  border-top:1px solid rgba(255,222,132,.24);
}
.equipped-charms-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}
.equipped-charms-title small{
  max-width:210px;
  text-align:right;
  color:#bed0e0;
  font-size:.68rem;
  line-height:1.25;
}
#loadoutScreen .equipped-slots-large{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
  margin:0 !important;
}
#loadoutScreen .equipped-slot-large{
  min-height:108px !important;
  padding:11px !important;
  display:grid !important;
  grid-template-columns:72px minmax(0,1fr) !important;
  grid-template-rows:1fr auto !important;
  gap:8px 10px !important;
  border:2px solid rgba(255,218,105,.48) !important;
  border-radius:18px !important;
  background:
    radial-gradient(circle at 24% 34%, rgba(255,228,138,.12), transparent 38%),
    linear-gradient(180deg,rgba(43,86,128,.88),rgba(18,45,75,.94)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 9px 20px rgba(0,0,0,.19) !important;
}
.equipped-charm-icon{
  grid-row:1/3;
  width:70px;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  border-radius:18px;
  font-size:2.65rem;
  line-height:1;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.16), transparent 48%),
    linear-gradient(180deg,rgba(24,58,92,.96),rgba(10,31,53,.98));
  border:2px solid rgba(255,226,137,.54);
  box-shadow:0 7px 16px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.07);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.18));
}
.equipped-charm-icon.empty{
  color:#8fa8bb;
  opacity:.62;
  font-size:2rem;
}
.equipped-charm-copy{
  min-width:0;
  align-self:center;
}
#loadoutScreen .equipped-charm-copy b{
  display:block;
  margin-bottom:3px;
  color:#c4d7e8;
  font-size:.64rem !important;
  letter-spacing:.10em;
  text-transform:uppercase;
}
#loadoutScreen .equipped-charm-copy span{
  display:block;
  color:#fff0b4 !important;
  font-size:.84rem !important;
  font-weight:900 !important;
  line-height:1.15;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
#loadoutScreen .equipped-slot-large .small-btn{
  grid-column:2;
  justify-self:start;
  padding:5px 10px !important;
  min-height:29px !important;
  font-size:.62rem !important;
}

/* All / Collected / Uncollected switch */
.charm-filter-toggle{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:7px;
}
.charm-filter-btn{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(255,220,120,.28);
  background:rgba(10,31,53,.66);
  color:#cbd9e7;
  border-radius:999px;
  padding:6px 10px;
  font-size:.66rem;
  font-weight:850;
  cursor:pointer;
  touch-action:manipulation;
}
.charm-filter-btn.active{
  color:#193652;
  border-color:#ffe18a;
  background:linear-gradient(180deg,#ffe891,#d9ad3d);
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}
.charm-bag-slot.filter-hidden{
  display:none !important;
}

@media (max-width:600px){
  .equipped-charms-title{
    align-items:flex-start;
    flex-direction:column;
  }
  .equipped-charms-title small{
    max-width:none;
    text-align:left;
  }
  #loadoutScreen .equipped-slots-large{
    grid-template-columns:1fr 1fr !important;
  }
  #loadoutScreen .equipped-slot-large{
    min-height:128px !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;
    text-align:center;
  }
  .equipped-charm-icon{
    grid-row:auto;
    width:68px;
    height:68px;
    justify-self:center;
  }
  #loadoutScreen .equipped-slot-large .small-btn{
    grid-column:auto;
    justify-self:center;
  }
  .charm-filter-toggle{
    gap:4px;
  }
  .charm-filter-btn{
    padding:6px 9px;
  }
}

/* ===== v159 signature boss rewards ===== */
.level-popup-reward{margin-top:7px;padding:7px 9px;border-radius:12px;color:#fff0b3;background:rgba(85,58,13,.34);border:1px solid rgba(255,220,103,.36);font-size:.68rem;font-weight:850;line-height:1.28}
.level-popup-reward.hidden,.map-guaranteed-reward.hidden{display:none !important}
.map-guaranteed-reward{margin:12px 0 2px;padding:10px 12px;border-radius:14px;background:radial-gradient(circle at 20% 30%,rgba(255,223,118,.10),transparent 38%),linear-gradient(180deg,rgba(63,49,17,.68),rgba(32,34,40,.62));border:1px solid rgba(255,218,96,.38);color:#ffe9a2;font-size:.78rem;font-weight:900;line-height:1.35}
.signature-charm{position:relative;border-color:rgba(255,211,79,.48) !important;background:radial-gradient(circle at 50% 34%,rgba(255,226,118,.11),transparent 45%),linear-gradient(180deg,rgba(41,70,105,.90),rgba(18,39,65,.96)) !important}
.signature-charm::before{content:'BOSS';position:absolute;left:6px;top:6px;padding:2px 5px;border-radius:999px;background:linear-gradient(180deg,#ffe47a,#c99123);color:#263852;font-size:.48rem;font-weight:950;letter-spacing:.08em;box-shadow:0 3px 8px rgba(0,0,0,.22)}
.signature-charm.filter-hidden{display:none !important}
.signature-charm .bag-charm-icon{filter:drop-shadow(0 0 7px rgba(255,211,73,.20))}

/* ===== v160 late-game balance pass =====
   No layout changes. Combat tuning only.
*/

/* ===== v161 Enchanted Sea Levels 31–33 ===== */
.enchanted-sea-map-card{position:relative;overflow:hidden}.enchanted-sea-map-card .journey-scene-img{display:block;width:100%;height:auto}.enchanted-sea-map-card .journey-map-overlay{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:12!important;pointer-events:none}.enchanted-sea-map-card .journey-node{position:absolute!important;z-index:18!important;pointer-events:auto!important}.enchanted-sea-map-card .sea-node-30{left:18%!important;top:72%!important}.enchanted-sea-map-card .sea-node-31{left:58%!important;top:45%!important}.enchanted-sea-map-card .sea-node-32{left:34%!important;top:14%!important}.enchanted-sea-story-card{border-color:rgba(93,222,216,.32)!important;background:radial-gradient(circle at 80% 15%,rgba(123,233,226,.10),transparent 38%),linear-gradient(180deg,rgba(21,66,89,.90),rgba(15,42,65,.94))!important}.cell.tide-row-cell{box-shadow:inset 0 0 0 2px rgba(107,235,239,.42),inset 0 0 18px rgba(75,207,221,.14)!important}.cell.tide-row-cell::before{content:'';position:absolute;left:3px;right:3px;bottom:3px;height:3px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(129,244,242,.78),transparent);pointer-events:none;animation:tideGlow 1.8s ease-in-out infinite}@keyframes tideGlow{0%,100%{opacity:.35;transform:scaleX(.55)}50%{opacity:1;transform:scaleX(1)}}

/* ===== V164 Enchanted Sea deep-road map (Levels 34-36) ===== */
.enchanted-sea-deep-map-card{position:relative;overflow:hidden}
.enchanted-sea-deep-map-card .journey-scene-img{display:block;width:100%;height:auto}
.enchanted-sea-deep-map-card .journey-map-overlay{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:12!important;pointer-events:none}
.enchanted-sea-deep-map-card .journey-node{position:absolute!important;z-index:18!important;pointer-events:auto!important}
.enchanted-sea-deep-map-card .sea2-node-33{left:10.5%!important;top:74%!important}
.enchanted-sea-deep-map-card .sea2-node-34{left:45.5%!important;top:46.5%!important}
.enchanted-sea-deep-map-card .sea2-node-35{left:73%!important;top:17%!important;right:auto!important;bottom:auto!important}
.enchanted-sea-deep-story-card{
  border-color:rgba(120,222,252,.34)!important;
  background:
    radial-gradient(circle at 82% 16%,rgba(160,236,255,.14),transparent 36%),
    linear-gradient(180deg,rgba(18,68,93,.92),rgba(14,40,63,.96))!important
}

/* ===== v165 Level 36 map-node visibility fix ===== */
@media (max-width:700px){
  .enchanted-sea-deep-map-card .sea2-node-35{
    left:71% !important;
    top:16.5% !important;
  }
}


/* ===== v166 Moonlit Sea Road levels 37-38 ===== */
.moon-observatory-map-card{position:relative;overflow:hidden}
.moon-observatory-map-card .journey-scene-img{display:block;width:100%;height:auto}
.moon-observatory-map-card .journey-map-overlay{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:12!important;pointer-events:none}
.moon-observatory-map-card .journey-node{position:absolute!important;z-index:18!important;pointer-events:auto!important}
.moon-observatory-map-card .abyss-node-36{left:11%!important;top:76%!important}
.moon-observatory-map-card .abyss-node-37{left:43%!important;top:46%!important}
.moon-observatory-story-card{border-color:rgba(150,197,255,.34)!important;background:radial-gradient(circle at 80% 15%, rgba(181,216,255,.12), transparent 38%),linear-gradient(180deg, rgba(25,58,96,.92), rgba(15,34,64,.95))!important}
.moon-observatory-map-card .journey-node{border-color:rgba(178,215,255,.92);background:linear-gradient(180deg, rgba(46,71,118,.95), rgba(18,34,67,.98));box-shadow:0 12px 20px rgba(0,0,0,.30),0 0 20px rgba(123,196,255,.20),inset 0 1px 0 rgba(255,255,255,.08)}
.moon-observatory-map-card .journey-node.selected{box-shadow:0 0 0 3px rgba(196,229,255,.22),0 12px 34px rgba(0,0,0,.28)}
@media (max-width: 700px){
  .moon-observatory-map-card .abyss-node-36{left:9%!important;top:77%!important}
  .moon-observatory-map-card .abyss-node-37{left:42%!important;top:47%!important}
}


/* ===== v167 map quick-play + forced final 31-33 portraits ===== */
.map-screen{padding-bottom:118px !important;}
.map-quick-play-bar{
  position:fixed;
  left:50%;
  bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%);
  z-index:950;
  width:min(620px, calc(100vw - 24px));
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 11px 10px 15px;
  border:2px solid rgba(243,205,101,.76);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(23,59,91,.97),rgba(12,37,61,.985));
  box-shadow:0 12px 32px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
#mapScreen.active .map-quick-play-bar{display:flex;}
.map-quick-play-copy{min-width:0;display:flex;flex-direction:column;gap:2px;}
.map-quick-play-eyebrow{font-size:.58rem;font-weight:950;letter-spacing:.12em;color:#f5d873;}
.map-quick-play-copy strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff2bd;font-size:.84rem;}
.map-quick-play-btn{flex:0 0 auto;min-width:116px !important;margin:0 !important;padding:10px 14px !important;}
@media (max-width:600px){
  .map-screen{padding-bottom:108px !important;}
  .map-quick-play-bar{width:calc(100vw - 18px);bottom:calc(9px + env(safe-area-inset-bottom, 0px));padding:8px 8px 8px 12px;border-radius:19px;}
  .map-quick-play-copy strong{font-size:.76rem;max-width:54vw;}
  .map-quick-play-btn{min-width:98px !important;padding:9px 11px !important;font-size:.78rem !important;}
}


/* ===== v169 sticky utility header on map screen ===== */
.map-sticky-tools{
  position:sticky;
  top:calc(8px + env(safe-area-inset-top, 0px));
  z-index:40;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:8px;
  padding:8px;
  margin-bottom:10px;
  border-radius:22px;
  border:1px solid rgba(226,181,82,.26);
  background:linear-gradient(180deg, rgba(10,22,35,.96), rgba(16,33,52,.93));
  box-shadow:0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
}
.map-tool-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:58px;
  padding:8px 6px;
  border-radius:18px;
  border:2px solid rgba(226,181,82,.34);
  background:linear-gradient(180deg, rgba(38,79,123,.96), rgba(22,54,88,.98));
  color:#fff1c8;
  font-weight:900;
  letter-spacing:.02em;
  box-shadow:0 8px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.map-tool-btn:active{transform:translateY(1px);}
.map-tool-btn .tool-icon{font-size:1.05rem;line-height:1;}
.map-tool-btn .tool-label{font-size:.7rem;line-height:1.05;white-space:nowrap;}
.map-topbar-card{
  min-height:unset;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:24px;
}
.map-topbar-card h1{
  margin:.08rem 0 .24rem;
  font-size:clamp(1.55rem, 4vw, 2.1rem);
  line-height:1.02;
}
.map-topbar-card p{
  max-width:none;
  line-height:1.35;
  font-size:.98rem;
}
.map-region-strip{margin-top:10px;}
#mapScreen .map-screen-actions.top-actions{display:none !important;}
@media (max-width: 700px), (orientation: portrait){
  .map-sticky-tools{
    gap:6px;
    padding:7px;
    border-radius:20px;
    top:calc(6px + env(safe-area-inset-top, 0px));
  }
  .map-tool-btn{
    min-height:54px;
    padding:7px 4px;
    border-radius:16px;
  }
  .map-tool-btn .tool-icon{font-size:1rem;}
  .map-tool-btn .tool-label{font-size:.64rem;}
  .map-topbar-card{padding:11px 12px;}
  .map-topbar-card p{font-size:.92rem;}
}


/* ===== v169 enhanced sticky map header with graphic icons ===== */
.map-screen{padding-bottom:118px !important;}
.map-sticky-tools-wrap{
  position:sticky;
  top:calc(6px + env(safe-area-inset-top, 0px));
  z-index:960;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.map-sticky-tools{
  position:relative;
  top:auto;
  z-index:auto;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:8px;
  padding:8px;
  margin-bottom:0;
  border-radius:22px;
  border:1px solid rgba(226,181,82,.26);
  background:linear-gradient(180deg, rgba(10,22,35,.98), rgba(16,33,52,.96));
  box-shadow:0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
}
.map-tool-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:72px;
  padding:6px 4px 7px;
  border-radius:18px;
  border:2px solid rgba(226,181,82,.34);
  background:linear-gradient(180deg, rgba(38,79,123,.98), rgba(22,54,88,.99));
  color:#fff1c8;
  font-weight:900;
  letter-spacing:.02em;
  box-shadow:0 8px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.tool-icon-img{
  width:42px;
  height:42px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.map-tool-btn .tool-label{font-size:.68rem;line-height:1.05;white-space:nowrap;margin-top:-1px;}
.map-tool-btn .tool-icon{display:none !important;}
.map-quick-play-bar.top-quick-play{
  position:relative;
  left:auto;
  bottom:auto;
  transform:none;
  z-index:auto;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 11px 10px 14px;
  border:2px solid rgba(243,205,101,.76);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(23,59,91,.98),rgba(12,37,61,.99));
  box-shadow:0 10px 24px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
#mapScreen.active .map-quick-play-bar.top-quick-play{display:flex;}
.map-quick-play-bar.top-quick-play .map-quick-play-copy strong{font-size:.92rem;max-width:60vw;}
.map-quick-play-bar.top-quick-play .map-quick-play-btn{min-width:126px !important;padding:10px 15px !important;margin:0 !important;}
.map-bottom-actions{display:none !important;}
.map-topbar-card{margin-top:10px;}
@media (max-width: 700px), (orientation: portrait){
  .map-sticky-tools-wrap{top:calc(5px + env(safe-area-inset-top, 0px));gap:7px;}
  .map-sticky-tools{gap:6px;padding:7px;border-radius:20px;}
  .map-tool-btn{min-height:66px;padding:5px 3px 6px;border-radius:16px;}
  .tool-icon-img{width:36px;height:36px;}
  .map-tool-btn .tool-label{font-size:.61rem;}
  .map-quick-play-bar.top-quick-play{padding:9px 9px 9px 12px;border-radius:18px;}
  .map-quick-play-bar.top-quick-play .map-quick-play-copy strong{font-size:.76rem;max-width:48vw;}
  .map-quick-play-bar.top-quick-play .map-quick-play-btn{min-width:102px !important;padding:9px 11px !important;font-size:.78rem !important;}
}


/* ===== v170 map region jump navigation + floating gear cleanup ===== */
.map-region-jump-strip{display:flex;flex-wrap:nowrap;gap:7px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 7px;margin-top:10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.map-region-jump-strip .map-region-jump{flex:0 0 auto;scroll-snap-align:start;cursor:pointer;font-family:inherit;appearance:none;-webkit-appearance:none;}
.map-region-jump-strip .map-region-jump:hover:not(:disabled),.map-region-jump-strip .map-region-jump:focus-visible{border-color:rgba(255,226,137,.9);transform:translateY(-1px);box-shadow:0 0 0 2px rgba(255,221,122,.12),0 8px 18px rgba(0,0,0,.2);}
.map-region-jump-strip .map-region-jump:active:not(:disabled){transform:translateY(0);}
.map-region-jump-strip .map-region-jump.region-locked{opacity:.42;}
.journey-map-card.region-jump-highlight{animation:regionJumpGlow 1.35s ease-out;}
@keyframes regionJumpGlow{0%{box-shadow:0 0 0 0 rgba(255,224,130,.9),0 16px 30px rgba(0,0,0,.26)}45%{box-shadow:0 0 0 5px rgba(255,224,130,.55),0 16px 30px rgba(0,0,0,.26)}100%{box-shadow:0 0 0 0 rgba(255,224,130,0),0 16px 30px rgba(0,0,0,.26)}}
@media (max-width:700px), (orientation:portrait){.map-region-jump-strip{gap:6px;padding-bottom:6px}.map-region-jump-strip .region-chip{padding:6px 10px;font-size:.67rem}}


/* ===== v171 Enchanted Sea finale: Levels 39-40 ===== */
.pearl-gate-map-card{position:relative;overflow:hidden}
.pearl-gate-map-card .journey-scene-img{display:block;width:100%;height:auto}
.pearl-gate-map-card .journey-map-overlay{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:12!important;pointer-events:none}
.pearl-gate-map-card .journey-node{position:absolute!important;z-index:18!important;pointer-events:auto!important;border-color:rgba(198,226,255,.92);background:linear-gradient(180deg,rgba(55,67,126,.96),rgba(25,29,72,.99));box-shadow:0 12px 22px rgba(0,0,0,.32),0 0 22px rgba(130,198,255,.24),inset 0 1px 0 rgba(255,255,255,.09)}
.pearl-gate-map-card .pearl-node-38{left:18%!important;top:73%!important}
.pearl-gate-map-card .pearl-node-39{left:64%!important;top:13%!important}
.pearl-gate-story-card{border-color:rgba(178,218,255,.38)!important;background:radial-gradient(circle at 80% 15%,rgba(223,239,255,.14),transparent 38%),linear-gradient(180deg,rgba(31,48,91,.94),rgba(15,25,58,.97))!important}
@media (max-width:700px),(orientation:portrait){
  .pearl-gate-map-card .pearl-node-38{left:15%!important;top:74%!important}
  .pearl-gate-map-card .pearl-node-39{left:61%!important;top:14%!important}
}


/* ===== v172 larger map toolbar artwork ===== */
.map-tool-btn{
  min-height:88px !important;
  padding:5px 3px 7px !important;
  overflow:visible;
}
.tool-icon-img{
  width:60px !important;
  height:60px !important;
  max-width:82% !important;
  object-fit:contain !important;
  margin:-3px auto -2px !important;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.28));
}
.map-tool-btn .tool-label{
  font-size:.69rem !important;
  line-height:1 !important;
}
@media (max-width:700px), (orientation:portrait){
  .map-sticky-tools{gap:5px !important;padding:6px !important;}
  .map-tool-btn{
    min-height:78px !important;
    padding:4px 2px 6px !important;
  }
  .tool-icon-img{
    width:52px !important;
    height:52px !important;
    max-width:90% !important;
    margin:-2px auto -2px !important;
  }
  .map-tool-btn .tool-label{font-size:.60rem !important;}
}

/* ===== v173 temporary map-position editing phase ===== */
.map-edit-launch-row{
  display:flex;
  justify-content:flex-start;
  margin-top:10px;
}
.map-edit-launch-btn{
  border-color:rgba(244,205,103,.56) !important;
  background:linear-gradient(180deg, rgba(44,86,128,.95), rgba(20,48,78,.98)) !important;
  color:#fff0b3 !important;
  box-shadow:0 8px 18px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.07);
}
.map-edit-mode .map-edit-launch-row{
  display:none;
}
@media (max-width:700px){
  .map-edit-launch-row{margin-top:8px;}
  .map-edit-launch-btn{
    width:100%;
    font-size:.74rem !important;
    padding:9px 12px !important;
  }
}

/* ===== v174 visible Edit Map entry point ===== */
.map-edit-launch-row{
  display:flex !important;
  margin-top:12px !important;
}
.map-edit-launch-btn{
  width:100% !important;
  min-height:46px;
  border:2px solid rgba(245,205,102,.78) !important;
  border-radius:16px !important;
  background:linear-gradient(180deg, rgba(48,94,140,.98), rgba(20,51,83,.99)) !important;
  color:#fff0b5 !important;
  font-weight:950 !important;
  letter-spacing:.04em;
  box-shadow:0 9px 20px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
}
.map-edit-launch-btn::before{
  content:"✦ ";
  color:#ffd85e;
}
.map-edit-mode .map-edit-launch-row{
  display:none !important;
}

/* ===== v175 all-level completion portrait audit ===== */
.reward-boss-art{
  width:min(100%, 330px) !important;
}
.reward-boss-art img{
  height:200px !important;
  object-fit:contain !important;
  object-position:center center !important;
  padding:8px !important;
}
.reward-boss-caption{
  text-align:center !important;
}

/* ===== v179 approved map positions =====
   User-approved node coordinates baked into game-v179.js.
   Levels 20-30 intentionally retain their prior default CSS positions.
*/

/* ===== v180 Enchanted Sea balance + cleanup ===== */
.map-edit-launch-row{display:none !important;}

/* ===== v182 Wendy bag mini-row + Stormbound March ===== */
.shop-bag-mini-row{
  display:flex !important;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  padding:6px 4px 7px !important;
  margin-top:6px;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.shop-bag-mini-item{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-width:46px;
  justify-content:center;
  padding:6px 8px;
  border:1px solid rgba(237,199,101,.38);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(28,67,103,.94),rgba(15,43,70,.96));
  color:#fff2bf;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.shop-bag-mini-icon{font-size:1.05rem;line-height:1;}
.shop-bag-mini-item strong{font-size:.76rem;line-height:1;color:#ffe08a;}

.stormbound-map-card{position:relative;overflow:hidden}
.stormbound-map-card .journey-scene-img{display:block;width:100%;height:auto}
.stormbound-map-card .journey-map-overlay{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  z-index:12!important;pointer-events:none
}
.stormbound-map-card .journey-node{position:absolute!important;z-index:18!important;pointer-events:auto!important}
.stormbound-map-card .stormbound-node-40{left:13.79%!important;top:60.41%!important}
.stormbound-map-card .stormbound-node-41{left:51.68%!important;top:50.06%!important}
.stormbound-map-card .stormbound-node-42{left:31.50%!important;top:13.40%!important}
.stormbound-story-card{
  border-color:rgba(187,132,255,.38)!important;
  background:
    radial-gradient(circle at 84% 16%,rgba(128,79,202,.18),transparent 38%),
    linear-gradient(180deg,rgba(28,46,82,.94),rgba(23,25,54,.97))!important;
}
@media (max-width:700px){
  .shop-bag-mini-row{gap:5px}
  .shop-bag-mini-item{min-width:43px;padding:5px 7px}
  .stormbound-map-card .stormbound-node-40{left:13.79%!important;top:60.41%!important}
  .stormbound-map-card .stormbound-node-41{left:51.68%!important;top:50.06%!important}
  .stormbound-map-card .stormbound-node-42{left:31.50%!important;top:13.40%!important}
}

/* v183: explicit ocean/stormbound 8x8 board lock and guaranteed victory portraits */

/* ===== v184 full victory portrait audit ===== */
.reward-boss-art{
  display:block;
  overflow:hidden;
}
.reward-boss-art.hidden{display:none !important;}
.reward-boss-art img,
#rewardBossImg{
  display:block !important;
  width:100% !important;
  height:220px !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 auto !important;
  padding:6px !important;
}
@media (max-width:700px){
  .reward-boss-art img,
  #rewardBossImg{
    height:190px !important;
  }
}

/* ===== v190 normalized map toolbar icon sizing ===== */
.map-tool-btn .tool-icon-img{
  width:58px !important;
  height:58px !important;
  max-width:58px !important;
  min-width:58px !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:-2px auto -1px !important;
}
@media (max-width:700px), (orientation:portrait){
  .map-tool-btn .tool-icon-img{
    width:50px !important;
    height:50px !important;
    max-width:50px !important;
    min-width:50px !important;
  }
}

/* ===== v191 Stormbound Deep Levels 44-46 ===== */
.stormbound-deep-map-card{position:relative;overflow:hidden}
.stormbound-deep-map-card .journey-scene-img{display:block;width:100%;height:auto}
.stormbound-deep-map-card .journey-map-overlay{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  z-index:12!important;pointer-events:none
}
.stormbound-deep-map-card .journey-node{
  position:absolute!important;z-index:18!important;pointer-events:auto!important
}
.stormbound-deep-map-card .stormdeep-node-43{left:6.84%!important;top:45.92%!important}
.stormbound-deep-map-card .stormdeep-node-44{left:62.67%!important;top:59.86%!important}
.stormbound-deep-map-card .stormdeep-node-45{left:36.21%!important;top:5.68%!important}
.stormbound-deep-story-card{
  border-color:rgba(156,108,255,.42)!important;
  background:
    radial-gradient(circle at 80% 18%,rgba(111,74,190,.22),transparent 38%),
    linear-gradient(180deg,rgba(26,42,78,.96),rgba(25,23,55,.98))!important;
}
@media (max-width:700px){
  .stormbound-deep-map-card .stormdeep-node-43{left:6.84%!important;top:45.92%!important}
  .stormbound-deep-map-card .stormdeep-node-44{left:62.67%!important;top:59.86%!important}
  .stormbound-deep-map-card .stormdeep-node-45{left:36.21%!important;top:5.68%!important}
}

/* ===== v193 Moonlit Carnival map-node visibility + Edit Map restore ===== */

.moonlit-carnival-map-card{
  position:relative !important;
  overflow:hidden !important;
}
.moonlit-carnival-map-card .journey-scene-img{
  display:block !important;
  width:100% !important;
  height:auto !important;
}
.moonlit-carnival-map-card .journey-map-overlay{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:12 !important;
  pointer-events:none !important;
}
.moonlit-carnival-map-card .journey-node{
  position:absolute !important;
  z-index:18 !important;
  pointer-events:auto !important;
}

/* Starting placements. Edit Map can override these and save exact positions. */
.moonlit-carnival-map-card .carnival-node-46{
  left:12.22%!important;
  top:53.86%!important;
}
.moonlit-carnival-map-card .carnival-node-47{
  left:43.39%!important;
  top:23.18%!important;
}
.moonlit-carnival-map-card .carnival-node-48{
  left:41.14%!important;
  top:8.84%!important;
}

.moonlit-carnival-story-card{
  border-color:rgba(246,186,91,.44) !important;
  background:
    radial-gradient(circle at 82% 18%,rgba(244,91,214,.16),transparent 38%),
    radial-gradient(circle at 16% 82%,rgba(70,199,255,.12),transparent 38%),
    linear-gradient(180deg,rgba(34,43,76,.96),rgba(27,25,59,.98)) !important;
}

/* v180 intentionally hid this after placements were locked. Restore it now. */
.map-edit-launch-row{
  display:flex !important;
  justify-content:center !important;
  margin-top:8px !important;
  padding:0 4px 2px !important;
}
.map-edit-launch-btn{
  min-width:132px !important;
}

/* Keep it out of the way once edit mode is active. */
.map-edit-mode .map-edit-launch-row{
  opacity:.45 !important;
}

@media (max-width:700px){
  .moonlit-carnival-map-card .carnival-node-46{
    left:12.22%!important;
    top:53.86%!important;
  }
  .moonlit-carnival-map-card .carnival-node-47{
    left:43.39%!important;
    top:23.18%!important;
  }
  .moonlit-carnival-map-card .carnival-node-48{
    left:41.14%!important;
    top:8.84%!important;
  }
  .map-edit-launch-btn{
    min-height:38px !important;
    font-size:.78rem !important;
  }
}

/* ===== v194 approved map positions ===== */
.stormbound-map-card .stormbound-node-40{left:13.79%!important;top:60.41%!important}
.stormbound-map-card .stormbound-node-41{left:51.68%!important;top:50.06%!important}
.stormbound-map-card .stormbound-node-42{left:31.50%!important;top:13.40%!important}

.stormbound-deep-map-card .stormdeep-node-43{left:6.84%!important;top:45.92%!important}
.stormbound-deep-map-card .stormdeep-node-44{left:62.67%!important;top:59.86%!important}
.stormbound-deep-map-card .stormdeep-node-45{left:36.21%!important;top:5.68%!important}

.moonlit-carnival-map-card .carnival-node-46{left:12.22%!important;top:53.86%!important}
.moonlit-carnival-map-card .carnival-node-47{left:43.39%!important;top:23.18%!important}
.moonlit-carnival-map-card .carnival-node-48{left:41.14%!important;top:8.84%!important}

/* ===== v195 Heartwood Gate + Grand Household ===== */
.grand-household-map-card{position:relative!important;overflow:hidden!important}
.grand-household-map-card .journey-scene-img{display:block!important;width:100%!important;height:auto!important}
.grand-household-map-card .journey-map-overlay{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:12!important;pointer-events:none!important}
.grand-household-map-card .journey-node{position:absolute!important;z-index:18!important;pointer-events:auto!important}
.grand-household-map-card .household-node-49{left:58%!important;top:78%!important}
.grand-household-map-card .household-node-50{left:25%!important;top:49%!important}
.grand-household-map-card .household-node-51{left:77%!important;top:36%!important}
.grand-household-map-card .household-node-52{left:53%!important;top:16%!important}
.grand-household-story-card{border-color:rgba(223,170,89,.46)!important;background:radial-gradient(circle at 82% 18%,rgba(255,174,71,.16),transparent 38%),radial-gradient(circle at 18% 82%,rgba(87,128,190,.14),transparent 36%),linear-gradient(180deg,rgba(42,37,48,.97),rgba(27,26,39,.99))!important}

/* v196 story-card and transition refresh */
.story-feature-shell{
  margin:10px 0 12px;
  padding:12px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(12,30,44,.92), rgba(17,47,71,.84));
  border:1px solid rgba(255,224,146,.24);
  box-shadow:0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
}
.boss-style-opponent{
  display:grid;
  grid-template-columns:92px 1fr;
  gap:12px;
  align-items:center;
}
.boss-style-opponent img,
.transition-feature-art img,
.map-story-feature-img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:18px;
  border:2px solid rgba(255,220,118,.62);
  background:radial-gradient(circle at top, rgba(255,231,172,.18), rgba(16,26,40,.86));
  box-shadow:0 10px 22px rgba(0,0,0,.28);
}
.boss-style-opponent b,
.transition-feature-copy strong{
  display:block;
  color:#fff3c8;
  font-size:1.08rem;
  line-height:1.2;
}
.boss-style-opponent span{
  display:block;
  margin-top:4px;
  color:#dfebfa;
  line-height:1.4;
}
.story-meta-chips,
.story-reward-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.story-meta-chips{margin-top:10px;}
.story-reward-row{margin-top:10px;}
.story-reward-row.compact{margin-top:8px;}
.story-meta-chip,
.story-reward-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(7,17,26,.45);
  border:1px solid rgba(255,255,255,.12);
  color:#f4f8ff;
  font-size:.82rem;
  line-height:1.2;
}
.story-reward-pill{
  background:linear-gradient(180deg, rgba(33,57,82,.9), rgba(18,35,51,.92));
  border-color:rgba(255,223,130,.26);
}
.story-reward-pill b{
  font-size:1rem;
  color:#ffe7a9;
}
.transition-feature-card{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:14px;
  align-items:center;
  margin:12px auto 16px;
  padding:12px;
  max-width:520px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(14,31,42,.9), rgba(22,45,61,.86));
  border:1px solid rgba(255,220,128,.26);
  box-shadow:0 16px 36px rgba(0,0,0,.24);
  text-align:left;
}
.transition-feature-label{
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#ffd983;
  margin-bottom:4px;
}
.transition-feature-meta{
  margin-top:4px;
  color:#cfe0f3;
  font-size:.88rem;
}
.map-story-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(14,34,48,.96), rgba(10,25,37,.96));
  border:1px solid rgba(255,224,146,.22);
  box-shadow:0 14px 32px rgba(0,0,0,.24);
}
.map-story-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at top right, rgba(255,231,163,.08), transparent 42%);
}
.map-story-rich{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:104px 1fr;
  gap:14px;
  align-items:start;
}
.map-story-feature{align-self:start;}
.map-story-copy{min-width:0;}
.map-story-copy strong{margin-bottom:8px;}
.map-story-mini-foes{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}
.map-story-mini-foe{
  display:flex;
  flex-direction:column;
  gap:5px;
  align-items:center;
  text-align:center;
  padding:7px 6px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.map-story-mini-foe img{
  width:44px;
  height:44px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(255,220,118,.45);
}
.map-story-mini-foe span{
  font-size:.72rem;
  line-height:1.2;
  color:#dce7f7;
}
@media (max-width: 680px){
  .transition-feature-card,
  .map-story-rich,
  .boss-style-opponent{
    grid-template-columns:1fr;
  }
  .transition-feature-art,
  .map-story-feature,
  .boss-style-opponent img{max-width:126px;}
  .map-story-mini-foes{grid-template-columns:1fr 1fr 1fr;}
}


/* ============================================================
   v197 REUSABLE STORYBOOK CARD SYSTEM
   One frame + one title plaque + one portrait frame + one reward strip.
   Applied to level intros, journey/region transitions, map story cards,
   and every victory modal. Full bespoke art is now optional for milestones.
   ============================================================ */
:root{
  --storybook-navy:#071d37;
  --storybook-navy-2:#0d3152;
  --storybook-gold:#f6c84d;
  --storybook-gold-soft:#ffe39a;
  --storybook-ink:#f9f5e9;
}

.storybook-card{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  border:0!important;
  background:
    radial-gradient(circle at 50% 0%, rgba(57,104,155,.26), transparent 38%),
    linear-gradient(180deg, rgba(8,30,54,.98), rgba(6,18,34,.99))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.48)!important;
}
.storybook-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
}
.storybook-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 26%, rgba(255,204,86,.11), transparent 38%),
    radial-gradient(circle at 20% 80%, rgba(80,107,176,.13), transparent 42%),
    linear-gradient(180deg, #0b2c4d 0%, #071b31 52%, #061426 100%);
}
.storybook-card > *{position:relative;z-index:2}

/* Shared title plaque treatment. Text remains live HTML, not baked into art. */
.storybook-card h2,
.storybook-card h3,
.storybook-level-card #introTitle{
  margin-left:auto!important;
  margin-right:auto!important;
  width:min(88%,760px);
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:15px 54px 18px!important;
  color:var(--storybook-gold-soft)!important;
  font-family:Georgia,'Times New Roman',serif!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
  text-shadow:0 2px 0 #603700,0 4px 12px rgba(0,0,0,.8)!important;
  background:url('assets/ui_storybook_title_plaque.webp') center/100% 100% no-repeat!important;
}
.storybook-card .eyebrow,
.storybook-card .journey-transition-badge,
.storybook-card .modal-badge{
  color:#ffe5a2!important;
  letter-spacing:.18em!important;
  text-shadow:0 1px 5px rgba(0,0,0,.65)!important;
}

/* Level intro */
.storybook-level-card{
  width:min(94vw,620px)!important;
  max-height:94vh;
  overflow-y:auto!important;
  padding:34px 30px 38px!important;
  border-radius:32px!important;
}
.storybook-level-card .story-journey-hero{
  border:1px solid rgba(255,216,112,.35)!important;
  border-radius:22px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 14px 30px rgba(0,0,0,.32)!important;
}
.storybook-level-card .story-feature-shell{
  border:1px solid rgba(246,200,77,.34)!important;
  background:linear-gradient(180deg,rgba(12,40,67,.92),rgba(6,24,42,.96))!important;
}

/* Portrait slots use one reusable transparent frame asset. */
.storybook-opponent-block img,
.storybook-portrait-slot img,
.storybook-card .reward-boss-art img,
.map-story-feature-img{
  position:relative;
  z-index:1;
  border:0!important;
  border-radius:50%!important;
  object-fit:cover!important;
  padding:10px!important;
  background:
    radial-gradient(circle at 50% 38%, #214f78 0%, #102f4d 58%, #081a30 100%)!important;
  box-shadow:none!important;
}
.storybook-opponent-block img{width:108px!important;height:108px!important}
.storybook-portrait-slot img{width:116px!important;height:116px!important}
.storybook-victory-card .reward-boss-art img{width:150px!important;height:150px!important}

/* Reusable reward strip */
.story-reward-row,
.storybook-victory-rewards{
  position:relative;
  padding:22px 18px 18px!important;
  justify-content:center!important;
  align-items:stretch!important;
  background:url('assets/ui_storybook_reward_banner.webp') center/100% 100% no-repeat!important;
  min-height:92px;
}
.story-reward-pill{
  min-width:116px!important;
  flex:1 1 116px!important;
  max-width:180px!important;
  justify-content:center!important;
  text-align:center!important;
  padding:10px 12px!important;
  border-color:rgba(255,220,109,.32)!important;
  background:linear-gradient(180deg,rgba(11,42,70,.88),rgba(5,24,43,.94))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}

/* Journey + region transition template */
.storybook-transition-card{
  width:min(94vw,650px)!important;
  max-height:94vh;
  overflow-y:auto!important;
  padding:32px 30px 38px!important;
  border-radius:34px!important;
}
.storybook-transition-card .journey-map-hero{
  min-height:260px!important;
  border-radius:24px!important;
  border:1px solid rgba(255,216,112,.36)!important;
  overflow:hidden!important;
  box-shadow:0 14px 32px rgba(0,0,0,.32)!important;
}
.storybook-transition-card .transition-feature-card{
  border:1px solid rgba(255,215,109,.34)!important;
  background:linear-gradient(180deg,rgba(16,48,76,.92),rgba(6,24,42,.97))!important;
}
.storybook-transition-card .journey-dialogue{
  background:linear-gradient(180deg,rgba(11,39,64,.9),rgba(5,21,38,.96))!important;
  border:1px solid rgba(255,218,120,.25)!important;
}

/* Victory template, now used by every level. */
.storybook-victory-card{
  width:min(94vw,610px)!important;
  max-height:94vh;
  overflow-y:auto!important;
  padding:34px 30px 40px!important;
  border-radius:34px!important;
}
.storybook-victory-card #modalIcon{filter:drop-shadow(0 4px 14px rgba(255,204,75,.45))}
.storybook-victory-card .reward-chest-box{
  border-radius:24px!important;
  border:1px solid rgba(255,219,116,.28)!important;
  background:linear-gradient(180deg,rgba(12,43,70,.9),rgba(5,23,41,.96))!important;
}
.storybook-victory-card .reward-boss-art{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-direction:column!important;
  gap:8px!important;
}
.storybook-victory-card .reward-boss-caption{
  color:#ffe5a2!important;
  font-family:Georgia,'Times New Roman',serif!important;
  font-size:1.05rem!important;
  text-align:center!important;
}
.storybook-victory-card #modalText{color:#f2efe5!important;font-family:Georgia,'Times New Roman',serif!important;line-height:1.55!important}

/* Map story cards also adopt the same visual family without loading bespoke card art. */
.map-story-card{
  border:1px solid rgba(246,200,77,.34)!important;
  background:
    radial-gradient(circle at 90% 10%,rgba(255,210,92,.08),transparent 36%),
    linear-gradient(180deg,rgba(9,38,63,.97),rgba(5,22,39,.98))!important;
  box-shadow:0 16px 36px rgba(0,0,0,.28)!important;
}
.map-story-card .eyebrow{
  width:min(94%,660px);
  margin:0 auto 12px!important;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 34px!important;
  background:url('assets/ui_storybook_title_plaque.webp') center/100% 100% no-repeat!important;
  color:#ffe4a0!important;
}
.map-story-mini-foe img{
  border:0!important;
  padding:4px!important;
  background:radial-gradient(circle at 50% 38%, #214f78 0%, #102f4d 58%, #081a30 100%)!important;
}

/* Buttons keep live text and are consistent across all story cards. */
.storybook-card .primary-btn{
  min-height:48px!important;
  padding:11px 24px!important;
  border:1px solid #ffd96f!important;
  color:#fff0b9!important;
  background:linear-gradient(180deg,#24547f,#153653)!important;
  box-shadow:0 0 0 2px rgba(103,67,13,.65),0 8px 18px rgba(0,0,0,.28)!important;
}
.storybook-card .primary-btn:hover{filter:brightness(1.1)}

/* Keep reusable frames crisp and readable on phones. */
@media(max-width:700px){
  .storybook-level-card,
  .storybook-transition-card,
  .storybook-victory-card{padding:26px 18px 30px!important;border-radius:26px!important}
  .storybook-card h2,
  .storybook-card h3,
  .storybook-level-card #introTitle{width:94%;min-height:62px;padding:12px 34px 15px!important;font-size:clamp(1.35rem,6vw,2rem)!important}
  .storybook-opponent-block img{width:92px!important;height:92px!important}
  .storybook-portrait-slot img{width:96px!important;height:96px!important}
  .storybook-victory-card .reward-boss-art img{width:124px!important;height:124px!important}
  .story-reward-row{padding:18px 10px 14px!important}
  .story-reward-pill{min-width:92px!important;font-size:.72rem!important}
}


/* ===== v198 responsive storybook reward panel fix ===== */
/* The reusable reward banner is decorative. Layout is handled by a responsive grid so
   reward text/icons can never spill outside the panel on phones. */
.story-reward-row,
.storybook-victory-rewards{
  width:100%!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  padding:22px 16px 18px!important;
  min-height:108px!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  background-size:100% 100%!important;
  overflow:visible!important;
}
.story-reward-row.reward-count-1,
.storybook-victory-rewards.reward-count-1{
  grid-template-columns:minmax(0,1fr)!important;
}
.story-reward-row.reward-count-2,
.storybook-victory-rewards.reward-count-2{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.story-reward-row.reward-count-4,
.storybook-victory-rewards.reward-count-4,
.story-reward-row.reward-count-5,
.storybook-victory-rewards.reward-count-5{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.story-reward-pill{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:58px!important;
  margin:0!important;
  display:flex!important;
  flex:initial!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  padding:8px 7px!important;
  border-radius:18px!important;
  white-space:normal!important;
  overflow:hidden!important;
}
.story-reward-pill b{
  flex:0 0 auto!important;
  font-size:1rem!important;
  line-height:1!important;
}
.story-reward-pill span{
  min-width:0!important;
  max-width:100%!important;
  display:block!important;
  text-align:center!important;
  font-size:.76rem!important;
  line-height:1.15!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
/* Give map story cards enough horizontal room for the reusable banner. */
.map-story-copy .story-reward-row{
  margin-left:0!important;
  margin-right:0!important;
}
@media(max-width:520px){
  .story-reward-row,
  .storybook-victory-rewards{
    gap:6px!important;
    padding:18px 10px 14px!important;
    min-height:100px!important;
  }
  .story-reward-pill{
    min-height:54px!important;
    padding:7px 5px!important;
    border-radius:15px!important;
    gap:4px!important;
  }
  .story-reward-pill b{font-size:.92rem!important}
  .story-reward-pill span{font-size:.69rem!important;line-height:1.12!important}
}
@media(max-width:390px){
  /* Three small rewards still remain a single tidy row. Four or five become 2 columns. */
  .story-reward-row,
  .storybook-victory-rewards{
    gap:5px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
  .story-reward-pill span{font-size:.64rem!important}
}


/* ===== v199 open reward chest integration =====
   User-approved open chest is the reusable container for all storybook rewards.
   Reward pills remain live HTML so every level can show its own rewards. */
.story-reward-row,
.storybook-victory-rewards{
  position:relative!important;
  isolation:isolate!important;
  width:100%!important;
  max-width:560px!important;
  margin:12px auto 0!important;
  min-height:0!important;
  aspect-ratio:3 / 2!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
  align-content:end!important;
  align-items:end!important;
  justify-items:stretch!important;
  padding:42% 7% 9% 7%!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:
    url('assets/ui_reward_chest_open.webp') center/100% 100% no-repeat!important;
  box-shadow:none!important;
}
.story-reward-row::before,
.storybook-victory-rewards::before{
  content:"REWARDS";
  position:absolute;
  z-index:2;
  left:50%;
  top:11%;
  transform:translateX(-50%);
  color:#fff0b8;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(.72rem,2.6vw,1rem);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:0 2px 3px rgba(0,0,0,.75),0 0 8px rgba(255,199,65,.5);
  pointer-events:none;
}
.story-reward-row.reward-count-1,
.storybook-victory-rewards.reward-count-1{
  grid-template-columns:minmax(0,1fr)!important;
  padding-left:27%!important;
  padding-right:27%!important;
}
.story-reward-row.reward-count-2,
.storybook-victory-rewards.reward-count-2{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  padding-left:16%!important;
  padding-right:16%!important;
}
.story-reward-row.reward-count-4,
.storybook-victory-rewards.reward-count-4{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  padding-left:5%!important;
  padding-right:5%!important;
}
.story-reward-row.reward-count-5,
.storybook-victory-rewards.reward-count-5{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  padding-left:4%!important;
  padding-right:4%!important;
}
.story-reward-pill{
  position:relative!important;
  z-index:3!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:48px!important;
  margin:0!important;
  padding:6px 6px!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex:initial!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  overflow:hidden!important;
  border-radius:14px!important;
  border:1px solid rgba(255,220,112,.58)!important;
  background:linear-gradient(180deg,rgba(10,40,67,.82),rgba(4,19,34,.9))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 8px rgba(0,0,0,.26)!important;
  backdrop-filter:blur(2px);
}
.story-reward-pill b{
  flex:0 0 auto!important;
  font-size:1.05rem!important;
  line-height:1!important;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));
}
.story-reward-pill span{
  display:block!important;
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  color:#fff4cc!important;
  font-size:.66rem!important;
  line-height:1.08!important;
  text-align:center!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
}
/* Map story rewards should use the chest without colliding with the opponent thumbnails below. */
.map-story-copy .story-reward-row{
  margin-top:10px!important;
  margin-bottom:8px!important;
}
/* The victory reveal uses the same chest, but its dedicated opening image should not duplicate
   the older generic chest artwork. */
.storybook-victory-card .reward-chest{
  width:min(76vw,430px)!important;
  margin:0 auto!important;
}
.storybook-victory-card .reward-chest img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
}
/* Compact transition cards need a slightly shorter chest so the whole card remains usable on phones. */
.storybook-transition-card .story-reward-row.compact{
  max-width:420px!important;
  margin:8px auto 0!important;
}
@media(max-width:520px){
  .story-reward-row,
  .storybook-victory-rewards{
    gap:5px!important;
    padding-top:41%!important;
    padding-bottom:8%!important;
  }
  .story-reward-row::before,
  .storybook-victory-rewards::before{
    top:10.5%;
    font-size:.68rem;
  }
  .story-reward-pill{
    min-height:43px!important;
    padding:5px 3px!important;
    border-radius:11px!important;
  }
  .story-reward-pill b{font-size:.9rem!important}
  .story-reward-pill span{font-size:.58rem!important;line-height:1.05!important}
  .story-reward-row.reward-count-4,
  .storybook-victory-rewards.reward-count-4{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    padding-left:4%!important;
    padding-right:4%!important;
  }
  .story-reward-row.reward-count-5,
  .storybook-victory-rewards.reward-count-5{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    padding-left:3%!important;
    padding-right:3%!important;
  }
}
@media(max-width:390px){
  .story-reward-pill span{font-size:.54rem!important}
  .story-reward-pill b{font-size:.84rem!important}
}


/* ===== v200 reward placement inside open chest =====
   Rewards now sit in the open wooden cavity, above the front blue chest wall. */
.story-reward-row,
.storybook-victory-rewards{
  align-content:center!important;
  align-items:center!important;
  justify-items:stretch!important;
  /* Chest cavity occupies the middle band of the art. */
  padding:31% 8% 36% 8%!important;
  gap:6px!important;
}
.story-reward-row::before,
.storybook-victory-rewards::before{
  top:29.5%!important;
  color:#fff3c2!important;
  text-shadow:0 2px 3px rgba(0,0,0,.82),0 0 10px rgba(255,186,44,.62)!important;
}
.story-reward-pill{
  min-height:42px!important;
  padding:5px 5px!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,rgba(8,36,63,.88),rgba(5,22,39,.94))!important;
  border:1px solid rgba(255,220,112,.64)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 7px rgba(0,0,0,.30),0 0 8px rgba(255,185,45,.10)!important;
}
.story-reward-row.reward-count-1,
.storybook-victory-rewards.reward-count-1{
  padding-left:29%!important;
  padding-right:29%!important;
}
.story-reward-row.reward-count-2,
.storybook-victory-rewards.reward-count-2{
  padding-left:18%!important;
  padding-right:18%!important;
}
.story-reward-row.reward-count-4,
.storybook-victory-rewards.reward-count-4{
  padding-left:5%!important;
  padding-right:5%!important;
}
.story-reward-row.reward-count-5,
.storybook-victory-rewards.reward-count-5{
  padding-left:3%!important;
  padding-right:3%!important;
}
/* Ensure map story cards do not push the chest into the opponent row. */
.map-story-copy .story-reward-row{
  margin-top:8px!important;
  margin-bottom:6px!important;
}
@media(max-width:520px){
  .story-reward-row,
  .storybook-victory-rewards{
    padding-top:30.5%!important;
    padding-bottom:35.5%!important;
    gap:4px!important;
  }
  .story-reward-row::before,
  .storybook-victory-rewards::before{
    top:28.7%!important;
    font-size:.64rem!important;
  }
  .story-reward-pill{
    min-height:38px!important;
    padding:4px 3px!important;
    border-radius:10px!important;
  }
  .story-reward-pill b{font-size:.86rem!important}
  .story-reward-pill span{font-size:.56rem!important;line-height:1.02!important}
}
@media(max-width:390px){
  .story-reward-row,
  .storybook-victory-rewards{
    padding-top:30%!important;
    padding-bottom:35%!important;
  }
  .story-reward-pill span{font-size:.52rem!important}
  .story-reward-pill b{font-size:.80rem!important}
}


/* ===== v201 Storybook Battle UI + responsive controls ===== */

/* Reusable storybook backdrop for the entire battle page. */
#gameScreen{
  position:relative;
  background:
    linear-gradient(180deg, rgba(5,16,28,.74), rgba(6,18,30,.90)),
    url("assets/ui_storybook_twilight_bg.webp") center top / cover fixed no-repeat !important;
}
#gameScreen::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,218,125,.10), transparent 30%),
    linear-gradient(90deg, rgba(13,41,61,.35), transparent 18%, transparent 82%, rgba(13,41,61,.35));
  z-index:0;
}
#gameScreen > *{
  position:relative;
  z-index:1;
}

/* Main board becomes the reusable storybook "page". */
#gameScreen .board-panel{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(12,34,52,.95), rgba(8,24,38,.97)) !important;
  border:2px solid rgba(234,191,89,.72) !important;
  box-shadow:
    0 18px 38px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 5px rgba(8,22,34,.36) !important;
}
#gameScreen .board-panel::before,
#gameScreen .board-panel::after{
  content:"✦";
  position:absolute;
  top:9px;
  color:#f5ce63;
  font-size:.85rem;
  opacity:.8;
  pointer-events:none;
}
#gameScreen .board-panel::before{left:13px}
#gameScreen .board-panel::after{right:13px}

/* Battle header feels like a framed story illustration. */
#gameScreen .board-battle{
  margin:2px 2px 10px;
  padding:8px 10px;
  border-radius:18px;
  border:1px solid rgba(242,207,113,.48);
  background:
    linear-gradient(180deg, rgba(6,19,31,.30), rgba(6,19,31,.70)),
    url("assets/ui_storybook_twilight_bg.webp") center 58% / cover no-repeat !important;
  box-shadow:inset 0 0 24px rgba(5,17,28,.35), 0 8px 16px rgba(0,0,0,.16);
}

/* Fix the six top navigation buttons. */
#gameScreen .game-quickbar{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:7px !important;
  padding:8px !important;
  border-radius:20px;
  border:1px solid rgba(229,187,86,.34);
  background:linear-gradient(180deg,rgba(8,26,42,.82),rgba(7,20,34,.90));
  box-shadow:0 10px 20px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.05);
}
#gameScreen .quickbar-btn{
  min-width:0 !important;
  min-height:58px !important;
  padding:7px 5px !important;
  border-radius:15px !important;
  flex-direction:column !important;
  gap:2px !important;
  font-size:1rem;
  line-height:1;
}
#gameScreen .quickbar-btn > span{
  display:block;
  max-width:100%;
  font-size:.66rem;
  line-height:1.05;
  white-space:normal;
  text-align:center;
  overflow-wrap:anywhere;
}

/* Battle Bag becomes a proper reusable storybook inventory tray. */
.battle-bag-bar{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  align-items:center !important;
  gap:12px !important;
  margin:8px 2px 11px !important;
  padding:11px 12px !important;
  border-radius:18px !important;
  border:1px solid rgba(239,201,102,.55) !important;
  background:
    linear-gradient(180deg,rgba(23,59,87,.94),rgba(9,29,47,.97)) !important;
  box-shadow:
    0 9px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.battle-bag-label{
  min-width:108px !important;
  justify-content:flex-start !important;
  padding-right:4px;
}
.battle-bag-label span{font-size:1.2rem !important}
.battle-bag-label b{
  font-family:Georgia,serif;
  font-size:.92rem !important;
  color:#ffe6a4;
  letter-spacing:.01em;
}

/* Prevent icon pile-up on desktop/narrow browser windows. */
.battle-bag-actions{
  display:grid !important;
  grid-template-columns:repeat(7,minmax(54px,1fr)) !important;
  gap:7px !important;
  width:100%;
  justify-content:stretch !important;
}
.battle-bag-item{
  width:100% !important;
  min-width:0 !important;
  height:64px !important;
  padding:6px 3px 4px !important;
  border-radius:14px !important;
  grid-template-rows:1fr auto !important;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.12), transparent 40%),
    linear-gradient(180deg,rgba(53,92,126,.98),rgba(22,51,75,.98)) !important;
  border:1px solid rgba(238,203,112,.58) !important;
}
.battle-bag-item>span{
  font-size:1.32rem !important;
  line-height:1 !important;
  align-self:end;
}
.battle-bag-item>small{
  font-size:.56rem !important;
  line-height:1.05 !important;
  color:#f6ebcf !important;
  white-space:normal !important;
}
.battle-bag-item>em{
  right:-3px !important;
  top:-6px !important;
  min-width:20px !important;
  height:20px !important;
  font-size:.64rem !important;
  z-index:3;
}

/* Spell area as another storybook panel. */
#gameScreen .board-top{
  margin:0 2px 10px;
  border-radius:17px;
  border:1px solid rgba(230,190,94,.35);
  background:linear-gradient(180deg,rgba(31,66,94,.68),rgba(11,33,52,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
#gameScreen .board-wrap{
  border-radius:20px;
  padding:8px;
  background:
    linear-gradient(180deg,rgba(7,25,41,.78),rgba(6,19,32,.90));
  border:1px solid rgba(234,194,99,.28);
}

/* Sidebar/drawer cards keep the same storybook family. */
#gameScreen .compact-utility-zone .panel-card,
#gameScreen #spellbookPanel,
#gameScreen #statusPanel{
  background:
    radial-gradient(circle at 50% 0%, rgba(83,123,162,.14), transparent 34%),
    linear-gradient(180deg,rgba(20,53,80,.98),rgba(9,28,45,.99)) !important;
  border:1px solid rgba(232,192,94,.50) !important;
  box-shadow:0 9px 20px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.07) !important;
}

/* Mid-width desktop / tablet: 3x2 top buttons and 4+3 Battle Bag. */
@media (max-width:900px){
  #gameScreen .game-quickbar{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .battle-bag-bar{
    grid-template-columns:1fr !important;
  }
  .battle-bag-label{
    justify-content:center !important;
    min-width:0 !important;
    margin-bottom:2px !important;
  }
  .battle-bag-actions{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    max-width:520px;
    margin:0 auto;
  }
  .battle-bag-item{
    height:58px !important;
  }
}

/* Phone: keep icons readable instead of squeezing 7 tiny buttons across. */
@media (max-width:560px), (orientation:portrait){
  #gameScreen{
    background-attachment:scroll !important;
  }
  #gameScreen .game-quickbar{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:5px !important;
    padding:6px !important;
  }
  #gameScreen .quickbar-btn{
    min-height:50px !important;
    padding:5px 3px !important;
  }
  #gameScreen .quickbar-btn > span{
    font-size:.60rem;
  }
  .battle-bag-bar{
    display:block !important;
    padding:9px 8px !important;
  }
  .battle-bag-actions{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:5px !important;
  }
  .battle-bag-item{
    height:54px !important;
  }
  .battle-bag-item>span{font-size:1.18rem !important}
  .battle-bag-item>small{font-size:.50rem !important}
}



/* =========================================================
   v202 responsive battle-header / quickbar / Battle Bag fix
   Uses the battle card's actual width instead of only viewport width.
   ========================================================= */

#gameScreen .board-panel{
  container-type:inline-size;
  max-width:100%;
  min-width:0;
  overflow:hidden;
}

/* Keep the top game controls in one compact row on both desktop and iPhone. */
#gameScreen .game-quickbar{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:5px !important;
  width:100%;
  max-width:100%;
  padding:6px !important;
  box-sizing:border-box;
  overflow:hidden !important;
}
#gameScreen .quickbar-btn{
  width:100% !important;
  min-width:0 !important;
  min-height:48px !important;
  padding:5px 2px !important;
  border-radius:13px !important;
  overflow:hidden;
}
#gameScreen .quickbar-btn > span{
  width:100%;
  max-width:100%;
  font-size:.58rem !important;
  line-height:1.02 !important;
  white-space:nowrap !important;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Battle header can never be widened by its portraits/text. */
#gameScreen .board-battle{
  grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr) !important;
  gap:5px !important;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
#gameScreen .board-fighter,
#gameScreen .fighter-copy{
  min-width:0 !important;
  max-width:100%;
}
#gameScreen .fighter-image{
  width:clamp(48px, 10cqi, 70px) !important;
  height:clamp(54px, 11cqi, 76px) !important;
}
#gameScreen .fighter-copy strong,
#gameScreen .fighter-copy small{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#gameScreen .board-battle-center{
  min-width:0;
  justify-content:center;
  gap:2px !important;
}

/* Battle Bag: the label gets a small fixed share, rewards get the rest.
   No item is allowed to impose a minimum width on the row. */
.battle-bag-bar{
  display:grid !important;
  grid-template-columns:minmax(76px,92px) minmax(0,1fr) !important;
  align-items:center !important;
  gap:7px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  padding:8px 9px !important;
  margin:7px 0 9px !important;
  overflow:hidden !important;
}
.battle-bag-label{
  min-width:0 !important;
  width:auto !important;
  padding:0 !important;
  gap:4px !important;
  justify-content:flex-start !important;
}
.battle-bag-label span{
  font-size:1rem !important;
  flex:0 0 auto;
}
.battle-bag-label b{
  min-width:0;
  font-size:.72rem !important;
  white-space:normal !important;
  line-height:1.05;
}

/* Always one row of seven items. They shrink with the actual game panel. */
.battle-bag-actions{
  display:grid !important;
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  gap:4px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  overflow:visible !important;
}
.battle-bag-item{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:52px !important;
  padding:4px 1px 3px !important;
  border-radius:11px !important;
  overflow:visible;
}
.battle-bag-item > span{
  font-size:1.03rem !important;
  line-height:1 !important;
}
.battle-bag-item > small{
  display:block !important;
  width:100%;
  max-width:100%;
  font-size:.43rem !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden;
  text-overflow:ellipsis;
}
.battle-bag-item > em{
  right:-2px !important;
  top:-5px !important;
  min-width:17px !important;
  height:17px !important;
  padding:0 3px !important;
  font-size:.55rem !important;
}

/* Actual battle-card width rules, including a narrow desktop browser window. */
@container (max-width:620px){
  #gameScreen .game-quickbar{
    gap:4px !important;
    padding:5px !important;
  }
  #gameScreen .quickbar-btn{
    min-height:44px !important;
  }
  #gameScreen .quickbar-btn > span{
    font-size:.53rem !important;
  }

  #gameScreen .board-battle{
    grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) !important;
    padding:6px 7px !important;
  }
  #gameScreen .fighter-image{
    width:50px !important;
    height:56px !important;
  }
  #gameScreen .fighter-copy strong{
    font-size:.70rem !important;
  }
  #gameScreen .fighter-copy small{
    font-size:.55rem !important;
  }
  #gameScreen .board-battle-center{
    font-size:.66rem !important;
  }
  #gameScreen .battle-burst{
    display:none;
  }

  .battle-bag-bar{
    grid-template-columns:64px minmax(0,1fr) !important;
    gap:5px !important;
    padding:7px !important;
  }
  .battle-bag-label{
    flex-direction:column;
    justify-content:center !important;
    text-align:center;
    gap:1px !important;
  }
  .battle-bag-label span{font-size:.92rem !important}
  .battle-bag-label b{font-size:.59rem !important}

  .battle-bag-actions{gap:3px !important}
  .battle-bag-item{
    height:47px !important;
    padding:3px 0 2px !important;
  }
  .battle-bag-item > span{font-size:.92rem !important}
  .battle-bag-item > small{font-size:.36rem !important}
  .battle-bag-item > em{
    min-width:15px !important;
    height:15px !important;
    font-size:.49rem !important;
  }
}

@container (max-width:430px){
  #gameScreen .game-quickbar{
    gap:3px !important;
    padding:4px !important;
  }
  #gameScreen .quickbar-btn{
    min-height:41px !important;
    padding:3px 1px !important;
  }
  #gameScreen .quickbar-btn > span{
    font-size:.48rem !important;
  }

  #gameScreen .board-battle{
    grid-template-columns:minmax(0,1fr) 23px minmax(0,1fr) !important;
    gap:3px !important;
  }
  #gameScreen .fighter-image{
    width:44px !important;
    height:50px !important;
  }
  #gameScreen .fighter-copy strong{font-size:.64rem !important}
  #gameScreen .fighter-copy small{font-size:.50rem !important}
  #gameScreen .board-battle-center{font-size:.58rem !important}

  .battle-bag-bar{
    grid-template-columns:48px minmax(0,1fr) !important;
    gap:4px !important;
    padding:6px 5px !important;
  }
  .battle-bag-label b{
    font-size:.50rem !important;
  }
  .battle-bag-actions{
    gap:2px !important;
  }
  .battle-bag-item{
    height:44px !important;
    border-radius:9px !important;
  }
  .battle-bag-item > span{font-size:.84rem !important}
  .battle-bag-item > small{font-size:.32rem !important}
  .battle-bag-item > em{
    right:-1px !important;
    top:-4px !important;
    min-width:14px !important;
    height:14px !important;
    font-size:.45rem !important;
  }
}

/* Kill the older phone/tablet overrides that turned the bag into 4+3 rows. */
@media (max-width:900px), (max-width:560px), (orientation:portrait){
  .battle-bag-bar{
    display:grid !important;
  }
  .battle-bag-actions{
    grid-template-columns:repeat(7,minmax(0,1fr)) !important;
    max-width:none !important;
  }
  #gameScreen .game-quickbar{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  }
}


/* =========================================================
   v203 - remove oversized reusable outer frame and clean UI
   ========================================================= */

/* Remove the giant full-card overlay frame that was covering content
   and creating the circular cutout/extra panels seen in intro/victory cards. */
.storybook-card::before{
  display:none !important;
  content:none !important;
  background:none !important;
}

/* Keep the storybook feel with a lightweight live CSS border instead. */
.storybook-card{
  border:1px solid rgba(236,194,88,.56)!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 50% 0%, rgba(76,116,158,.18), transparent 32%),
    linear-gradient(180deg,rgba(8,31,52,.985),rgba(5,20,35,.99))!important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06)!important;
}

/* Reduce oversized padding that was designed around the removed frame. */
.storybook-level-card,
.storybook-transition-card,
.storybook-victory-card{
  width:min(94vw,620px)!important;
  max-height:92vh!important;
  padding:20px 18px 22px!important;
  overflow-y:auto!important;
  box-sizing:border-box!important;
}

/* Title plaques remain, but are smaller and no longer collide with body content. */
.storybook-card h2,
.storybook-card h3,
.storybook-level-card #introTitle{
  width:min(96%,560px)!important;
  min-height:54px!important;
  margin:4px auto 12px!important;
  padding:9px 28px 11px!important;
  font-size:clamp(1.25rem,4.8vw,1.9rem)!important;
  line-height:1.05!important;
  box-sizing:border-box!important;
}

/* Level intro layout: portrait beside text, then metadata and rewards below. */
.storybook-level-card .story-feature-shell{
  margin:8px 0 10px!important;
  padding:10px!important;
}
.storybook-level-card .boss-style-opponent{
  display:grid!important;
  grid-template-columns:84px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:center!important;
}
.storybook-level-card .storybook-opponent-block img{
  width:82px!important;
  height:82px!important;
  padding:5px!important;
}
.storybook-level-card .story-meta-chips{
  margin-top:8px!important;
  gap:5px!important;
}
.storybook-level-card .story-meta-chip{
  min-height:28px!important;
  padding:5px 9px!important;
  font-size:.72rem!important;
}

/* Transition cards: more compact and readable. */
.storybook-transition-card .journey-map-hero{
  min-height:185px!important;
  max-height:240px!important;
}
.storybook-transition-card .transition-feature-card{
  grid-template-columns:86px minmax(0,1fr)!important;
  padding:9px!important;
  gap:10px!important;
  margin:8px auto 10px!important;
}
.storybook-transition-card .transition-feature-art{
  max-width:86px!important;
}
.storybook-transition-card .story-reward-row.compact{
  margin-top:6px!important;
}

/* Victory card: remove the oversized portrait/frame stack and keep a clean hierarchy. */
.storybook-victory-card{
  width:min(94vw,560px)!important;
}
.storybook-victory-card #modalIcon{
  font-size:1.45rem!important;
  margin:0 auto 2px!important;
}
.storybook-victory-card .reward-chest-box{
  margin-top:8px!important;
  padding:10px!important;
  border-radius:18px!important;
  overflow:visible!important;
}
.storybook-victory-card .reward-chest{
  width:min(68vw,330px)!important;
  margin:0 auto 4px!important;
}
.storybook-victory-card .reward-reveal{
  display:grid!important;
  grid-template-columns:96px minmax(0,1fr)!important;
  grid-template-areas:
    "boss gold"
    "boss rarity"
    "boss loot"
    "bonus bonus"
    "rewards rewards";
  gap:5px 10px!important;
  align-items:center!important;
  width:100%!important;
  box-sizing:border-box!important;
}
.storybook-victory-card .reward-boss-art{
  grid-area:boss!important;
  align-self:start!important;
  margin:0!important;
}
.storybook-victory-card .reward-boss-art img{
  width:92px!important;
  height:92px!important;
  padding:5px!important;
}
.storybook-victory-card .reward-boss-caption{
  font-size:.72rem!important;
  line-height:1.1!important;
  margin-top:4px!important;
}
.storybook-victory-card .reward-line{
  grid-area:gold;
  margin:0!important;
  text-align:left!important;
}
.storybook-victory-card .reward-line span{
  font-size:1.22rem!important;
}
.storybook-victory-card .rarity-pill{
  grid-area:rarity;
  justify-self:start!important;
  margin:0!important;
}
.storybook-victory-card #rewardLoot{
  grid-area:loot;
  margin:0!important;
  text-align:left!important;
  font-size:.78rem!important;
}
.storybook-victory-card #rewardBonus{
  grid-area:bonus;
}
.storybook-victory-card .storybook-victory-rewards{
  grid-area:rewards;
  margin-top:6px!important;
}
.storybook-victory-card #modalText{
  margin:10px 4px 8px!important;
  font-size:.9rem!important;
  line-height:1.35!important;
}

/* Battle screen cleanup: keep navigation compact without squeezing content. */
#gameScreen .game-quickbar{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:4px!important;
  padding:5px!important;
}
#gameScreen .quickbar-btn{
  min-height:44px!important;
  padding:4px 2px!important;
}
#gameScreen .quickbar-btn > span{
  font-size:.54rem!important;
}

/* Give the battle portraits and VS more space by shrinking decorative margins. */
#gameScreen .board-battle{
  grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)!important;
  gap:4px!important;
  padding:6px 7px!important;
}
#gameScreen .fighter-image{
  width:48px!important;
  height:54px!important;
}
#gameScreen .fighter-copy strong{
  font-size:.68rem!important;
}
#gameScreen .fighter-copy small{
  font-size:.52rem!important;
}
#gameScreen .board-battle-center{
  font-size:.58rem!important;
  min-width:0!important;
}

/* Battle bag: compact one-row version on desktop and iPhone.
   No horizontal overflow and no excessive vertical growth. */
.battle-bag-bar{
  grid-template-columns:62px minmax(0,1fr)!important;
  gap:5px!important;
  padding:6px!important;
  margin:6px 0 8px!important;
}
.battle-bag-label{
  flex-direction:column!important;
  justify-content:center!important;
  text-align:center!important;
  gap:1px!important;
}
.battle-bag-label span{
  font-size:.86rem!important;
}
.battle-bag-label b{
  font-size:.56rem!important;
}
.battle-bag-actions{
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:3px!important;
}
.battle-bag-item{
  height:45px!important;
  min-width:0!important;
  padding:3px 0 2px!important;
  border-radius:9px!important;
}
.battle-bag-item > span{
  font-size:.88rem!important;
}
.battle-bag-item > small{
  font-size:.34rem!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.battle-bag-item > em{
  right:-1px!important;
  top:-4px!important;
  min-width:14px!important;
  height:14px!important;
  padding:0 2px!important;
  font-size:.45rem!important;
}

/* Narrow screens: preserve one-row controls, but trim labels further. */
@media(max-width:520px){
  .storybook-level-card,
  .storybook-transition-card,
  .storybook-victory-card{
    padding:16px 12px 18px!important;
    border-radius:20px!important;
  }
  .storybook-card h2,
  .storybook-card h3,
  .storybook-level-card #introTitle{
    min-height:48px!important;
    padding:8px 22px 10px!important;
    font-size:clamp(1.1rem,5.5vw,1.55rem)!important;
  }
  .storybook-level-card .boss-style-opponent{
    grid-template-columns:70px minmax(0,1fr)!important;
  }
  .storybook-level-card .storybook-opponent-block img{
    width:68px!important;
    height:68px!important;
  }

  .storybook-victory-card .reward-reveal{
    grid-template-columns:78px minmax(0,1fr)!important;
  }
  .storybook-victory-card .reward-boss-art img{
    width:74px!important;
    height:74px!important;
  }
  .storybook-victory-card .reward-boss-caption{
    font-size:.62rem!important;
  }

  #gameScreen .quickbar-btn > span{
    font-size:.48rem!important;
  }
  #gameScreen .fighter-image{
    width:43px!important;
    height:49px!important;
  }
  .battle-bag-bar{
    grid-template-columns:48px minmax(0,1fr)!important;
    padding:5px 4px!important;
  }
  .battle-bag-label b{font-size:.48rem!important}
  .battle-bag-actions{gap:2px!important}
  .battle-bag-item{
    height:42px!important;
  }
  .battle-bag-item > span{font-size:.80rem!important}
  .battle-bag-item > small{font-size:.30rem!important}
}

/* Even narrower phones: hide bag item names but keep icons/counters visible. */
@media(max-width:380px){
  .battle-bag-item > small{
    display:none!important;
  }
  .battle-bag-item{
    height:38px!important;
  }
  .battle-bag-item > span{
    font-size:.82rem!important;
  }
}


/* ===== v205 victory modal cleanup =====
   Removes the duplicate top chest, keeps the rewards inside a single reusable chest,
   and stacks the victory content cleanly on phones and desktop. */
.storybook-victory-card{
  width:min(94vw,540px)!important;
  max-height:94vh!important;
  overflow-y:auto!important;
}
.storybook-victory-card #modalIcon{display:none!important}
.storybook-victory-card #modalTitle{
  margin:0 auto 8px!important;
}
.storybook-victory-card .reward-chest-box{
  margin-top:8px!important;
  padding:14px 14px 12px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,rgba(10,39,64,.96),rgba(5,22,39,.98))!important;
  border:1px solid rgba(255,219,116,.32)!important;
  overflow:visible!important;
}
.storybook-victory-card .reward-chest-box::before{content:none!important;display:none!important}
.storybook-victory-card .reward-chest{display:none!important}
.storybook-victory-card .reward-reveal{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:10px!important;
  width:100%!important;
  box-sizing:border-box!important;
}
.storybook-victory-card .reward-boss-art{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  margin:0 auto!important;
}
.storybook-victory-card .reward-boss-art img,
.storybook-victory-card #rewardBossImg{
  width:112px!important;
  height:112px!important;
  padding:6px!important;
}
.storybook-victory-card .reward-boss-caption{
  max-width:240px!important;
  margin:0 auto!important;
  text-align:center!important;
  font-size:.82rem!important;
  line-height:1.14!important;
}
.storybook-victory-card .reward-line{
  margin:0!important;
  text-align:center!important;
}
.storybook-victory-card #rewardGold{
  display:block!important;
  font-size:clamp(1.9rem,7vw,2.7rem)!important;
  line-height:1.05!important;
}
.storybook-victory-card #rewardRarity{
  align-self:center!important;
  justify-self:center!important;
  margin:0 auto!important;
}
.storybook-victory-card #rewardLoot,
.storybook-victory-card #rewardBonus{
  text-align:center!important;
  margin:0!important;
  font-size:.96rem!important;
  line-height:1.28!important;
}
.storybook-victory-card .storybook-victory-rewards{
  order:5!important;
  width:min(100%,420px)!important;
  max-width:420px!important;
  margin:4px auto 0!important;
}
/* Hide the duplicate button-like bonus strip when there is no text. */
.storybook-victory-card #rewardBonus.hidden{display:none!important}

@media(max-width:520px){
  .storybook-victory-card{
    width:min(95vw,500px)!important;
    padding:16px 12px 20px!important;
  }
  .storybook-victory-card .reward-chest-box{
    padding:12px 10px 10px!important;
    border-radius:18px!important;
  }
  .storybook-victory-card .reward-boss-art img,
  .storybook-victory-card #rewardBossImg{
    width:96px!important;
    height:96px!important;
  }
  .storybook-victory-card .reward-boss-caption{
    font-size:.74rem!important;
    max-width:220px!important;
  }
  .storybook-victory-card #rewardGold{
    font-size:clamp(1.8rem,8vw,2.3rem)!important;
  }
  .storybook-victory-card #rewardLoot,
  .storybook-victory-card #rewardBonus{
    font-size:.88rem!important;
  }
  .storybook-victory-card .storybook-victory-rewards{
    width:min(100%,390px)!important;
  }
}


/* =========================================================
   v206 unified battle + intro + transition cleanup
   ========================================================= */

/* ---------- TOP BATTLE NAV ---------- */
#gameScreen .game-quickbar{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:6px!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  padding:6px!important;
  overflow:hidden!important;
}
#gameScreen .quickbar-btn{
  min-width:0!important;
  width:100%!important;
  min-height:50px!important;
  padding:6px 3px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  gap:2px!important;
  border-radius:13px!important;
  line-height:1!important;
  font-size:1.05rem!important;
}
#gameScreen .quickbar-btn>span{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  font-size:.62rem!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* ---------- BATTLE HEADER ---------- */
#gameScreen .board-battle{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr)!important;
  align-items:center!important;
  gap:6px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  padding:8px 9px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
#gameScreen .board-fighter{
  display:grid!important;
  min-width:0!important;
  max-width:100%!important;
  gap:7px!important;
  align-items:center!important;
}
#gameScreen .hero-fighter{grid-template-columns:58px minmax(0,1fr)!important}
#gameScreen .enemy-fighter{grid-template-columns:minmax(0,1fr) 58px!important}
#gameScreen .fighter-image{
  width:58px!important;
  height:64px!important;
  min-width:0!important;
}
#gameScreen .fighter-image img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
#gameScreen .fighter-copy{
  min-width:0!important;
  max-width:100%!important;
}
#gameScreen .fighter-copy .eyebrow{font-size:.50rem!important}
#gameScreen .fighter-copy strong{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  font-size:.72rem!important;
  line-height:1.05!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#gameScreen .fighter-hp{width:100%!important;max-width:100%!important}
#gameScreen .fighter-companions{gap:3px!important;margin-top:3px!important}
#gameScreen .companion-mini{width:22px!important;height:22px!important}
#gameScreen .board-battle-center{
  min-width:0!important;
  width:30px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:.68rem!important;
}
#gameScreen .board-battle-center .battle-burst{display:none!important}

/* ---------- BATTLE BAG ---------- */
.battle-bag-bar{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  padding:7px 8px 8px!important;
  margin:7px 0 9px!important;
  overflow:hidden!important;
}
.battle-bag-label{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
  margin:0 0 6px!important;
  padding:0!important;
  text-align:center!important;
}
.battle-bag-label span{font-size:.92rem!important}
.battle-bag-label b{font-size:.66rem!important;line-height:1!important;white-space:nowrap!important}
.battle-bag-label small{display:none!important}
.battle-bag-actions{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:4px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
.battle-bag-item{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:48px!important;
  padding:4px 1px 3px!important;
  border-radius:10px!important;
  overflow:visible!important;
}
.battle-bag-item>span{font-size:.96rem!important;line-height:1!important}
.battle-bag-item>small{
  display:block!important;
  width:100%!important;
  font-size:.36rem!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.battle-bag-item>em{
  right:-1px!important;
  top:-4px!important;
  min-width:15px!important;
  height:15px!important;
  padding:0 2px!important;
  font-size:.48rem!important;
  z-index:4!important;
}

/* ---------- STORYBOOK LEVEL INTRO ---------- */
.storybook-level-card,
.storybook-transition-card{
  width:min(94vw,560px)!important;
  max-height:92vh!important;
  overflow-y:auto!important;
  padding:18px 16px 20px!important;
  border-radius:22px!important;
  box-sizing:border-box!important;
}
.storybook-level-card .story-journey-hero{
  min-height:118px!important;
  max-height:140px!important;
  border-radius:16px!important;
  margin-bottom:10px!important;
}
.storybook-card h2,
.storybook-card h3,
.storybook-level-card #introTitle{
  width:100%!important;
  min-height:0!important;
  margin:4px auto 10px!important;
  padding:0 4px 10px!important;
  background:none!important;
  border-bottom:1px solid rgba(246,200,77,.42)!important;
  color:#ffe28a!important;
  font-size:clamp(1.22rem,5.2vw,1.8rem)!important;
  line-height:1.1!important;
  text-align:center!important;
  text-shadow:0 2px 8px rgba(0,0,0,.55)!important;
}
.storybook-level-card .story-feature-shell{
  margin:7px 0 10px!important;
  padding:11px!important;
  border-radius:17px!important;
}
.storybook-level-card .boss-style-opponent{
  display:grid!important;
  grid-template-columns:78px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:center!important;
}
.storybook-level-card .storybook-opponent-block img{
  width:76px!important;
  height:76px!important;
  padding:4px!important;
}
.storybook-level-card .boss-style-opponent b{
  font-size:1rem!important;
  line-height:1.1!important;
}
.storybook-level-card .boss-style-opponent span{
  font-size:.82rem!important;
  line-height:1.32!important;
}
.storybook-level-card .story-meta-chips{
  margin-top:8px!important;
  gap:5px!important;
}
.storybook-level-card .story-meta-chip{
  min-height:27px!important;
  padding:5px 8px!important;
  font-size:.68rem!important;
}
.storybook-level-card #introText{
  margin:8px 2px 10px!important;
  font-size:.9rem!important;
  line-height:1.38!important;
}

/* ---------- STORY / REGION TRANSITION ---------- */
.storybook-transition-card .journey-map-hero{
  min-height:150px!important;
  max-height:190px!important;
  border-radius:17px!important;
  margin-bottom:10px!important;
}
.storybook-transition-card #journeyTransitionText{
  margin:7px 2px 9px!important;
  font-size:.91rem!important;
  line-height:1.38!important;
}
.storybook-transition-card .transition-feature-card{
  display:grid!important;
  grid-template-columns:78px minmax(0,1fr)!important;
  gap:10px!important;
  margin:8px auto 10px!important;
  padding:9px!important;
  border-radius:16px!important;
}
.storybook-transition-card .transition-feature-art{
  max-width:78px!important;
}
.storybook-transition-card .transition-feature-art img{
  width:76px!important;
  height:76px!important;
  padding:4px!important;
}
.storybook-transition-card .transition-feature-copy strong{
  font-size:.98rem!important;
  line-height:1.1!important;
}
.storybook-transition-card .transition-feature-meta{
  font-size:.74rem!important;
  line-height:1.2!important;
}
.storybook-transition-card .journey-dialogue{
  margin:9px 0!important;
  padding:9px 11px!important;
  border-radius:14px!important;
  font-size:.82rem!important;
  line-height:1.32!important;
}
.storybook-transition-card .story-reward-row.compact{
  width:min(100%,380px)!important;
  margin:7px auto 0!important;
}

/* ---------- RESPONSIVE TUNING ---------- */
@media(max-width:620px){
  #gameScreen .game-quickbar{gap:4px!important;padding:5px!important}
  #gameScreen .quickbar-btn{min-height:45px!important;padding:4px 2px!important}
  #gameScreen .quickbar-btn>span{font-size:.54rem!important}

  #gameScreen .board-battle{
    grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)!important;
    gap:4px!important;
    padding:6px 7px!important;
  }
  #gameScreen .hero-fighter{grid-template-columns:50px minmax(0,1fr)!important}
  #gameScreen .enemy-fighter{grid-template-columns:minmax(0,1fr) 50px!important}
  #gameScreen .fighter-image{width:50px!important;height:56px!important}
  #gameScreen .fighter-copy strong{font-size:.64rem!important}
  #gameScreen .board-battle-center{width:24px!important;font-size:.58rem!important}
  #gameScreen .companion-mini{width:19px!important;height:19px!important}

  .battle-bag-bar{padding:6px!important}
  .battle-bag-label{margin-bottom:5px!important}
  .battle-bag-label span{font-size:.84rem!important}
  .battle-bag-label b{font-size:.58rem!important}
  .battle-bag-actions{gap:3px!important}
  .battle-bag-item{height:44px!important}
  .battle-bag-item>span{font-size:.86rem!important}
  .battle-bag-item>small{font-size:.31rem!important}
}

@media(max-width:420px){
  #gameScreen .game-quickbar{gap:3px!important;padding:4px!important}
  #gameScreen .quickbar-btn{min-height:42px!important;font-size:.94rem!important}
  #gameScreen .quickbar-btn>span{font-size:.47rem!important}

  #gameScreen .board-battle{
    grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)!important;
    gap:3px!important;
    padding:5px 6px!important;
  }
  #gameScreen .hero-fighter{grid-template-columns:44px minmax(0,1fr)!important}
  #gameScreen .enemy-fighter{grid-template-columns:minmax(0,1fr) 44px!important}
  #gameScreen .fighter-image{width:44px!important;height:50px!important}
  #gameScreen .fighter-copy strong{font-size:.58rem!important}
  #gameScreen .fighter-copy .eyebrow{font-size:.44rem!important}
  #gameScreen .board-battle-center{width:20px!important;font-size:.52rem!important}
  #gameScreen .companion-mini{width:17px!important;height:17px!important}

  .battle-bag-bar{padding:5px 4px 6px!important}
  .battle-bag-label{margin-bottom:4px!important}
  .battle-bag-label b{font-size:.52rem!important}
  .battle-bag-actions{gap:2px!important}
  .battle-bag-item{height:40px!important;border-radius:8px!important}
  .battle-bag-item>span{font-size:.78rem!important}
  .battle-bag-item>small{font-size:.27rem!important}
  .battle-bag-item>em{min-width:13px!important;height:13px!important;font-size:.42rem!important}

  .storybook-level-card,
  .storybook-transition-card{padding:14px 11px 16px!important}
  .storybook-level-card .story-journey-hero{min-height:102px!important;max-height:118px!important}
  .storybook-level-card .boss-style-opponent{grid-template-columns:66px minmax(0,1fr)!important}
  .storybook-level-card .storybook-opponent-block img{width:64px!important;height:64px!important}
  .storybook-transition-card .transition-feature-card{grid-template-columns:66px minmax(0,1fr)!important}
  .storybook-transition-card .transition-feature-art{max-width:66px!important}
  .storybook-transition-card .transition-feature-art img{width:64px!important;height:64px!important}
  .storybook-transition-card .journey-map-hero{min-height:132px!important;max-height:160px!important}
}


/* ===== v207 level-intro viewport + scrolling fix =====
   The intro used to be absolutely positioned inside the game panel, so tall
   cards could be clipped by the panel on desktop. The overlay now owns the
   viewport and scrolls independently, with the Play Level button always reachable. */
#levelIntro.level-intro{
  position:fixed!important;
  inset:0!important;
  z-index:9998!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:100vh!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  padding:18px 14px max(34px, env(safe-area-inset-bottom))!important;
  background:radial-gradient(circle at 50% 10%,rgba(255,235,169,.08),rgba(4,12,21,.72) 38%,rgba(3,10,18,.88) 100%)!important;
  backdrop-filter:blur(7px)!important;
}
#levelIntro.level-intro.hidden{
  display:none!important;
}
#levelIntro .storybook-level-card{
  position:relative!important;
  flex:0 0 auto!important;
  width:min(94vw,560px)!important;
  max-width:560px!important;
  max-height:none!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  margin:0 auto!important;
  padding:18px 16px 22px!important;
  box-sizing:border-box!important;
}
/* Give the last paragraph breathing room above the action. */
#levelIntro #introText{
  margin-bottom:14px!important;
}
/* Keep the action reachable even when the card is taller than the viewport. */
#levelIntro #introBtn{
  position:sticky!important;
  bottom:max(10px, env(safe-area-inset-bottom))!important;
  z-index:20!important;
  width:min(100%,320px)!important;
  min-height:50px!important;
  margin:14px auto 2px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-shadow:0 0 0 5px rgba(6,23,39,.86),0 10px 24px rgba(0,0,0,.38)!important;
}
/* Avoid decorative/parent overflow rules clipping the overlay contents. */
#gameScreen,
#gameScreen .board-panel,
#gameScreen .game-shell{
  overflow:visible;
}

@media (min-width:900px){
  #levelIntro.level-intro{
    padding-top:24px!important;
    padding-bottom:42px!important;
  }
  #levelIntro .storybook-level-card{
    width:min(86vw,590px)!important;
    max-width:590px!important;
  }
}

@media (max-width:520px){
  #levelIntro.level-intro{
    padding:10px 8px max(24px, env(safe-area-inset-bottom))!important;
  }
  #levelIntro .storybook-level-card{
    width:min(96vw,500px)!important;
    padding:14px 11px 18px!important;
  }
  #levelIntro #introBtn{
    width:min(100%,290px)!important;
    min-height:48px!important;
    bottom:max(7px, env(safe-area-inset-bottom))!important;
  }
}


/* ===== v211 large monster art + CSS framed story cards ===== */
:root{
  --v211-card-surface: linear-gradient(180deg, rgba(12,43,70,.94), rgba(5,23,41,.97));
  --v211-frame-border: rgba(246, 205, 101, .42);
  --v211-frame-highlight: rgba(255, 236, 181, .16);
}

/* Remove PNG portrait frames and use reusable CSS framing so art stays centered. */
.storybook-opponent-block img,
.storybook-portrait-slot img,
.storybook-card .reward-boss-art img,
.map-story-feature-img,
.map-story-mini-foe img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  object-fit:cover!important;
  padding:0!important;
  border-radius:20px!important;
  border:2px solid var(--v211-frame-border)!important;
  background:linear-gradient(180deg, rgba(24,63,98,.55), rgba(6,24,42,.8))!important;
  box-shadow:
    inset 0 0 0 1px var(--v211-frame-highlight),
    0 10px 18px rgba(0,0,0,.34),
    0 0 0 1px rgba(7,18,31,.72)!important;
}

.storybook-level-card .story-feature-shell,
.storybook-transition-card .transition-feature-card,
.storybook-victory-card .reward-boss-art,
.map-story-feature{
  background:var(--v211-card-surface)!important;
  border:1px solid var(--v211-frame-border)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.20)!important;
}

/* LEVEL INTRO: large art beside copy on desktop, stacked on mobile. */
.storybook-level-card .story-feature-shell{padding:14px!important;}
.storybook-level-card .boss-style-opponent{
  display:grid!important;
  grid-template-columns:minmax(150px, 190px) minmax(0,1fr)!important;
  gap:16px!important;
  align-items:stretch!important;
}
.storybook-level-card .boss-style-opponent > div{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-width:0!important;
}
.storybook-level-card .boss-style-opponent b{
  font-size:clamp(1.05rem, 2vw, 1.28rem)!important;
  color:#fff0bf!important;
  margin-bottom:6px!important;
}
.storybook-level-card .boss-style-opponent span{
  font-size:clamp(.92rem, 1.7vw, 1.04rem)!important;
  line-height:1.45!important;
  color:#ebdfc6!important;
}
.storybook-level-card .storybook-opponent-block img{
  max-width:190px!important;
  aspect-ratio:4 / 5!important;
}

/* TRANSITION / STORY CARDS */
.storybook-transition-card .transition-feature-card{
  display:grid!important;
  grid-template-columns:minmax(156px, 198px) minmax(0,1fr)!important;
  gap:16px!important;
  align-items:stretch!important;
  padding:14px!important;
}
.storybook-transition-card .transition-feature-art,
.storybook-transition-card .storybook-portrait-slot{
  max-width:none!important;
  width:100%!important;
}
.storybook-transition-card .story-reward-row.compact{margin-top:10px!important;}
.storybook-transition-card .story-reward-row.compact,
.storybook-transition-card .story-reward-row.compact .story-reward-pill{
  min-height:0!important;
}
.storybook-transition-card .storybook-portrait-slot img{
  aspect-ratio:4 / 5!important;
}

/* VICTORY CARDS: feature the monster art more prominently, then reward text, then chest rewards. */
.storybook-victory-card .reward-chest-box{
  padding:14px!important;
}
.storybook-victory-card .reward-reveal{
  display:grid!important;
  width:100%!important;
  grid-template-columns:1fr!important;
  grid-template-areas:
    "boss"
    "gold"
    "rarity"
    "loot"
    "bonus"
    "rewards"!important;
  gap:10px!important;
  justify-items:center!important;
  align-items:start!important;
  text-align:center!important;
}
.storybook-victory-card .reward-boss-art{
  grid-area:boss!important;
  width:min(100%, 280px)!important;
  margin:0 auto!important;
  padding:12px!important;
  border-radius:22px!important;
}
.storybook-victory-card .reward-boss-art img{
  width:100%!important;
  max-width:256px!important;
  aspect-ratio:4 / 5!important;
}
.storybook-victory-card .reward-boss-caption{
  margin-top:8px!important;
  max-width:20ch!important;
  font-size:clamp(.98rem, 2.3vw, 1.16rem)!important;
  line-height:1.16!important;
}
.storybook-victory-card .reward-line,
.storybook-victory-card #rewardLoot,
.storybook-victory-card #rewardBonus,
.storybook-victory-card .rarity-pill{
  justify-self:center!important;
  text-align:center!important;
  margin:0!important;
}
.storybook-victory-card .reward-line{grid-area:gold!important;}
.storybook-victory-card .rarity-pill{grid-area:rarity!important;}
.storybook-victory-card #rewardLoot{
  grid-area:loot!important;
  max-width:28ch!important;
  font-size:clamp(.82rem, 1.8vw, .96rem)!important;
  line-height:1.35!important;
}
.storybook-victory-card #rewardBonus{
  grid-area:bonus!important;
  max-width:36ch!important;
  line-height:1.35!important;
}
.storybook-victory-card .storybook-victory-rewards{grid-area:rewards!important;}

/* MAP STORY CARDS also get the larger, cleaner art treatment. */
.map-story-feature{
  gap:14px!important;
}
.map-story-feature-img{
  max-width:220px!important;
  aspect-ratio:4 / 5!important;
}
.map-story-mini-foe img{
  width:72px!important;
  aspect-ratio:1 / 1!important;
  border-radius:14px!important;
}

/* Rewards remain reusable and responsive. */
.story-reward-row,
.storybook-victory-rewards{
  row-gap:8px!important;
}
.story-reward-pill{
  min-height:58px!important;
}

/* Mobile behavior: stack art above copy and preserve scroll room. */
@media (max-width: 760px){
  .storybook-level-card .boss-style-opponent,
  .storybook-transition-card .transition-feature-card{
    grid-template-columns:1fr!important;
  }
  .storybook-level-card .storybook-opponent-block img,
  .storybook-transition-card .storybook-portrait-slot img,
  .storybook-victory-card .reward-boss-art img,
  .map-story-feature-img{
    max-width:min(100%, 250px)!important;
    margin:0 auto!important;
  }
  .storybook-victory-card .reward-boss-art{
    width:min(100%, 250px)!important;
  }
}


/* ===== v212 definitive level intro scroll fix =====
   The intro is mounted directly under <body> by JS so it cannot be clipped by
   transformed/overflowing game containers. The overlay handles page placement,
   while the card itself owns vertical scrolling. */
#levelIntro.level-intro{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  padding:12px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  pointer-events:auto!important;
  touch-action:pan-y!important;
  overscroll-behavior:contain!important;
}
#levelIntro.level-intro.hidden{display:none!important;}
#levelIntro .storybook-level-card{
  position:relative!important;
  display:block!important;
  width:min(94vw,620px)!important;
  max-width:620px!important;
  height:auto!important;
  max-height:calc(100dvh - 24px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  touch-action:pan-y!important;
  padding:18px 16px max(88px, calc(26px + env(safe-area-inset-bottom)))!important;
  margin:0!important;
  box-sizing:border-box!important;
  scrollbar-gutter:stable!important;
}
#levelIntro #introBtn{
  position:sticky!important;
  left:0!important;
  right:0!important;
  bottom:max(8px, env(safe-area-inset-bottom))!important;
  z-index:100!important;
  display:flex!important;
  width:min(100%,340px)!important;
  min-height:52px!important;
  margin:18px auto 0!important;
  align-items:center!important;
  justify-content:center!important;
  box-shadow:0 0 0 6px rgba(6,23,39,.94),0 12px 28px rgba(0,0,0,.45)!important;
}
@media(min-width:900px){
  #levelIntro .storybook-level-card{
    max-height:calc(100dvh - 40px)!important;
  }
}
@media(max-width:520px){
  #levelIntro.level-intro{padding:6px!important;align-items:stretch!important;}
  #levelIntro .storybook-level-card{
    width:100%!important;
    max-height:calc(100dvh - 12px)!important;
    padding:13px 10px max(82px, calc(20px + env(safe-area-inset-bottom)))!important;
  }
  #levelIntro #introBtn{min-height:50px!important;width:min(100%,310px)!important;}
}


/* ===== v220 minimal, clean input stability =====
   Built from v212. No window.scrollTo tracing lock, no fixed-height battle
   viewport, no nested game scroller, and no hard scroll re-anchoring. */

/* The board alone owns drag gestures. Everything else remains normal page UI. */
#gameScreen .board-wrap,
#gameScreen #board,
#gameScreen .board,
#gameScreen .cell{
  touch-action:none !important;
  -ms-touch-action:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;
}

/* Buttons keep normal tap behavior and never shift under the finger. */
#gameScreen button,
#levelIntro button,
.modal button,
.journey-transition button{
  touch-action:manipulation !important;
}
#gameScreen button:active,
#levelIntro button:active,
.modal button:active,
.journey-transition button:active{
  transform:none !important;
}

/* No outer gameplay panel gets transformed when attacks/spells shake. */
#gameScreen .story-stage.shake-sm,
#gameScreen .story-stage.shake-lg,
#gameScreen .board-panel.shake-sm,
#gameScreen .board-panel.shake-lg{
  animation:none !important;
  transform:none !important;
}

#gameScreen .board-wrap{
  overflow:hidden !important;
}
#gameScreen #board.board-shake-sm{
  animation:v220BoardShakeSm .20s linear 1 !important;
}
#gameScreen #board.board-shake-lg{
  animation:v220BoardShakeLg .28s linear 1 !important;
}
@keyframes v220BoardShakeSm{
  0%,100%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(-2px,1px,0)}
  50%{transform:translate3d(2px,-1px,0)}
  75%{transform:translate3d(-1px,0,0)}
}
@keyframes v220BoardShakeLg{
  0%,100%{transform:translate3d(0,0,0)}
  20%{transform:translate3d(-4px,2px,0)}
  40%{transform:translate3d(4px,-2px,0)}
  60%{transform:translate3d(-3px,1px,0)}
  80%{transform:translate3d(3px,-1px,0)}
}

/* Keep attack reactions visual without moving the header geometry. */
#gameScreen .hero-fighter.hero-hit,
#gameScreen .enemy-image.enemy-cast,
#gameScreen .dog-react,
#gameScreen .goldy-react{
  transform:none !important;
}

/* Larger Battle Bag icons from the later approved pass, without changing layout architecture. */
.battle-bag-item{
  display:grid !important;
  grid-template-rows:minmax(0,1fr) auto !important;
  align-items:center !important;
  justify-items:center !important;
  padding:3px 1px 3px !important;
  height:52px !important;
}
.battle-bag-item > span{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  font-size:1.34rem !important;
  line-height:1 !important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)) !important;
}
.battle-bag-item > small{
  font-size:.34rem !important;
  line-height:1 !important;
  margin-top:1px !important;
}
.battle-bag-item > em{
  min-width:17px !important;
  height:17px !important;
  font-size:.52rem !important;
  top:-5px !important;
  right:-2px !important;
}
@media(max-width:620px){
  .battle-bag-item{height:48px !important}
  .battle-bag-item > span{font-size:1.22rem !important}
  .battle-bag-item > small{font-size:.30rem !important}
}
@media(max-width:420px){
  .battle-bag-item{height:45px !important}
  .battle-bag-item > span{font-size:1.12rem !important}
  .battle-bag-item > small{font-size:.26rem !important}
  .battle-bag-item > em{
    min-width:14px !important;
    height:14px !important;
    font-size:.44rem !important;
  }
}


/* ===== v221 precise mobile board hit-testing ===== */

/* Only the cell itself participates in pointer hit-testing.
   Rune art, counters, NEXT labels, helper badges, locks, etc. can no longer
   become accidental pointer targets on Safari. */
#gameScreen #board .cell{
  pointer-events:auto !important;
  touch-action:none !important;
}
#gameScreen #board .cell *{
  pointer-events:none !important;
}

/* Slightly enlarge the usable visual face of runes without enlarging hitboxes. */
#gameScreen #board .rune-img{
  width:90% !important;
  height:90% !important;
}

/* Remove transition-driven geometry changes while the finger is down. */
#gameScreen #board .cell{
  transition:filter .10s ease, opacity .12s ease !important;
}
#gameScreen #board .cell.selected{
  transform:none !important;
  filter:brightness(1.25) saturate(1.08) !important;
  box-shadow:
    inset 0 0 0 3px #ffe07a,
    0 0 14px rgba(255,224,122,.55) !important;
}

/* The board should never participate in browser text/drag selection. */
#gameScreen #board,
#gameScreen #board *{
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;
}


/* ===== v222 clean-core interaction invariants =====
   One page scroller. One board touch surface. No viewport re-anchoring hacks. */

/* Natural document scrolling only. */
html, body{
  overflow-x:hidden;
  scroll-behavior:auto;
}
#gameScreen.screen.active{
  position:relative !important;
  inset:auto !important;
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}

/* The tile board is the only region that owns drag gestures. */
#gameScreen #board,
#gameScreen #board .cell{
  touch-action:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;
}
#gameScreen #board .cell *{
  pointer-events:none !important;
}

/* Buttons remain ordinary taps. */
#gameScreen button,
#levelIntro button,
.modal button,
.journey-transition button{
  touch-action:manipulation !important;
}
#gameScreen button:active,
#levelIntro button:active,
.modal button:active,
.journey-transition button:active{
  transform:none !important;
}

/* Dynamic combat copy cannot reflow the board. Two-line fixed message viewport. */
#gameScreen .battle-message{
  min-height:44px !important;
  height:44px !important;
  max-height:44px !important;
  overflow:hidden !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  line-clamp:2 !important;
  line-height:1.25 !important;
  pointer-events:none !important;
}

/* Spell state area has stable geometry without becoming a nested scroller. */
#gameScreen .board-top{
  min-height:72px !important;
  box-sizing:border-box !important;
}
#gameScreen .cast-info{
  min-width:132px !important;
  max-width:52% !important;
}
#gameScreen .cast-info span,
#gameScreen .cast-info strong,
#gameScreen .cast-info small{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* Attack feedback stays inside the puzzle board. Outer panels never transform. */
#gameScreen .story-stage.shake-sm,
#gameScreen .story-stage.shake-lg,
#gameScreen .board-panel.shake-sm,
#gameScreen .board-panel.shake-lg,
#gameScreen .hero-fighter.hero-hit,
#gameScreen .enemy-image.enemy-cast,
#gameScreen .dog-react,
#gameScreen .goldy-react{
  transform:none !important;
}

/* Keep top controls and battle bag legible in normal document flow. */
#gameScreen .game-quickbar{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:4px !important;
}
#gameScreen .quickbar-btn{
  min-height:44px !important;
}
#gameScreen .battle-bag-actions{
  min-width:0 !important;
}
#gameScreen .battle-bag-item{
  min-width:0 !important;
}

/* Prevent decorative overlays from ever intercepting gameplay. */
#gameScreen #boardFx,
#gameScreen #boardFightFx,
#gameScreen .enemy-hit-flare,
#gameScreen .enemy-hit-text,
#gameScreen .hero-splash,
#gameScreen .spell-impact,
#gameScreen .spell-particle{
  pointer-events:none !important;
}

@media(max-width:420px){
  #gameScreen .board-top{min-height:68px !important;}
  #gameScreen .quickbar-btn{min-height:42px !important;}
}


/* ===== v223 fixed battle geometry =====
   Root fix for the gameplay panel shifting during enemy attacks:
   everything above the tile board has a fixed outer geometry while a battle runs.
   Dynamic text, HP changes, counters, and attack FX paint inside those boxes only. */

/* Browser scroll anchoring is not useful in an animated game screen and can
   move the page when combat DOM updates occur. */
html,
body,
#gameScreen{
  overflow-anchor:none !important;
}

/* Main HUD: fixed footprint. */
#gameScreen .hud{
  height:92px !important;
  min-height:92px !important;
  max-height:92px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  contain:layout paint !important;
  flex-wrap:nowrap !important;
}
#gameScreen .brand{
  min-width:0 !important;
  overflow:hidden !important;
}
#gameScreen .brand-title,
#gameScreen .brand-sub{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#gameScreen .hud-stats{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
}
#gameScreen .hud-chip{
  min-width:70px !important;
}

/* Top buttons: fixed footprint. */
#gameScreen .game-quickbar{
  height:56px !important;
  min-height:56px !important;
  max-height:56px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  contain:layout paint !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
}
#gameScreen .quickbar-btn{
  height:46px !important;
  min-height:46px !important;
  max-height:46px !important;
  overflow:hidden !important;
}

/* Combatants: enemy names/HP/effects cannot resize the row. */
#gameScreen .board-battle{
  height:126px !important;
  min-height:126px !important;
  max-height:126px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  contain:layout paint !important;
}
#gameScreen .board-fighter,
#gameScreen .fighter-copy,
#gameScreen .fighter-image{
  min-height:0 !important;
  max-height:100% !important;
  overflow:hidden !important;
}
#gameScreen .fighter-copy strong{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#gameScreen .fighter-image,
#gameScreen .fighter-image img{
  object-fit:cover !important;
}

/* Battle Bag: count changes never alter the row. */
#gameScreen .battle-bag-bar{
  height:78px !important;
  min-height:78px !important;
  max-height:78px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  contain:layout paint !important;
}
#gameScreen .battle-bag-label,
#gameScreen .battle-bag-actions{
  min-height:0 !important;
  max-height:100% !important;
  overflow:hidden !important;
}

/* Spell header: live spell text stays inside a fixed box. */
#gameScreen .board-top{
  height:76px !important;
  min-height:76px !important;
  max-height:76px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  contain:layout paint !important;
}
#gameScreen .board-top h2{
  margin-top:2px !important;
  margin-bottom:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#gameScreen .cast-info{
  height:60px !important;
  min-height:60px !important;
  max-height:60px !important;
  overflow:hidden !important;
}
#gameScreen .cast-info span,
#gameScreen .cast-info strong,
#gameScreen .cast-info small{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Puzzle itself has stable geometry. */
#gameScreen .board-wrap{
  contain:layout paint !important;
  overflow:hidden !important;
}

/* The optional mission drawer is completely outside layout when collapsed. */
#gameScreen .game-drawer.collapsed{
  display:none !important;
}

/* Battle item prompts must be paint-only overlays. Backdrop blur on iOS Safari
   can trigger expensive visual-viewport recomposition, so use a solid overlay. */
#battleItemPrompt{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  box-sizing:border-box !important;
  background:rgba(4,12,23,.88) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow:hidden !important;
  contain:strict !important;
}
#battleItemPrompt .battle-item-prompt-card{
  max-height:calc(100dvh - 32px) !important;
  overflow-y:auto !important;
}

/* All combat FX are visual-only. */
#gameScreen .board-fight-fx,
#gameScreen .board-fight-fx *,
#gameScreen .board-fx,
#gameScreen .board-fx *{
  pointer-events:none !important;
}

/* Phone geometry: explicitly sized for the portrait battle layout. */
@media(max-width:620px){
  #gameScreen .hud{
    height:84px !important;
    min-height:84px !important;
    max-height:84px !important;
  }
  #gameScreen .game-quickbar{
    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
  }
  #gameScreen .quickbar-btn{
    height:43px !important;
    min-height:43px !important;
    max-height:43px !important;
  }
  #gameScreen .board-battle{
    height:112px !important;
    min-height:112px !important;
    max-height:112px !important;
  }
  #gameScreen .battle-bag-bar{
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;
  }
  #gameScreen .board-top{
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;
  }
}

@media(max-width:420px){
  #gameScreen .hud{
    height:80px !important;
    min-height:80px !important;
    max-height:80px !important;
  }
  #gameScreen .game-quickbar{
    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;
  }
  #gameScreen .board-battle{
    height:106px !important;
    min-height:106px !important;
    max-height:106px !important;
  }
  #gameScreen .battle-bag-bar{
    height:68px !important;
    min-height:68px !important;
    max-height:68px !important;
  }
  #gameScreen .board-top{
    height:68px !important;
    min-height:68px !important;
    max-height:68px !important;
  }
}


/* ===== v224 transition/victory/start-card scrolling =====
   Every full-screen story overlay owns its own viewport scroll.
   The card is never clipped by the page, and the action button remains reachable. */

/* All modal-style overlays use the browser viewport directly. */
#levelIntro,
#journeyTransition,
#modal{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  box-sizing:border-box !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding:
    max(14px, env(safe-area-inset-top))
    10px
    calc(26px + env(safe-area-inset-bottom)) !important;
}

/* Hidden still means hidden. */
#levelIntro.hidden,
#journeyTransition.hidden,
#modal.hidden{
  display:none !important;
}

/* Cards grow naturally inside the scrollable viewport. */
#levelIntro .level-intro-card,
#journeyTransition .journey-transition-card,
#modal .modal-card{
  position:relative !important;
  width:min(94vw, 700px) !important;
  max-height:none !important;
  height:auto !important;
  overflow:visible !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
  flex:0 0 auto !important;
}

/* Remove any older nested-card scrolling that competes with the overlay scroll. */
#levelIntro .storybook-level-card,
#journeyTransition .storybook-transition-card,
#modal .storybook-victory-card{
  max-height:none !important;
  overflow:visible !important;
  -webkit-overflow-scrolling:auto !important;
}

/* Keep primary action buttons visible and tappable at the end of long cards. */
#introBtn,
#journeyContinueBtn,
#modalBtn{
  position:sticky !important;
  bottom:calc(10px + env(safe-area-inset-bottom)) !important;
  z-index:40 !important;
  width:min(100%, 360px) !important;
  margin:18px auto 2px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:52px !important;
  box-shadow:
    0 0 0 2px rgba(84,53,7,.72),
    0 10px 24px rgba(0,0,0,.48) !important;
}

/* Give enough bottom breathing room that sticky buttons never cover content. */
#levelIntro .level-intro-card,
#journeyTransition .journey-transition-card,
#modal .modal-card{
  padding-bottom:calc(92px + env(safe-area-inset-bottom)) !important;
}

/* Victory reward panels and long transition content must expand instead of clipping. */
#modal .reward-chest-box,
#modal .reward-reveal,
#journeyTransition .transition-feature-card,
#levelIntro .story-feature-shell{
  max-height:none !important;
  overflow:visible !important;
}

/* Safari can otherwise preserve an awkward previous scroll offset when reopening. */
#levelIntro,
#journeyTransition,
#modal{
  scroll-behavior:auto !important;
}

/* Smaller phones: use almost full width and keep a generous bottom hit area. */
@media(max-width:520px){
  #levelIntro,
  #journeyTransition,
  #modal{
    padding-left:6px !important;
    padding-right:6px !important;
  }

  #levelIntro .level-intro-card,
  #journeyTransition .journey-transition-card,
  #modal .modal-card{
    width:min(97vw, 700px) !important;
    border-radius:22px !important;
  }

  #introBtn,
  #journeyContinueBtn,
  #modalBtn{
    width:min(94%, 360px) !important;
    min-height:54px !important;
  }
}

/* v225: stable bag geometry with room for every label and count. */
#gameScreen .battle-bag-bar{
  display:grid !important;
  grid-template-rows:20px 54px !important;
  gap:6px !important;
  height:98px !important;
  min-height:98px !important;
  max-height:98px !important;
  padding:8px !important;
}
#gameScreen .battle-bag-label{
  height:20px !important;
  margin:0 !important;
  line-height:20px !important;
}
#gameScreen .battle-bag-actions{
  height:54px !important;
  max-height:none !important;
  overflow:visible !important;
  gap:3px !important;
}
#gameScreen .battle-bag-item{
  position:relative !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-rows:30px 14px !important;
  gap:2px !important;
  height:54px !important;
  min-height:54px !important;
  max-height:54px !important;
  padding:4px 1px 2px !important;
  margin:0 !important;
}
#gameScreen .battle-bag-item > span{
  font-size:1.22rem !important;
  height:30px !important;
}
#gameScreen .battle-bag-item > small{
  display:block !important;
  font-size:clamp(6px,1.7vw,9px) !important;
  line-height:14px !important;
  height:14px !important;
  margin:0 !important;
}
#gameScreen .battle-bag-item > em{
  top:1px !important;
  right:1px !important;
  height:14px !important;
  min-width:14px !important;
  font-size:8px !important;
  line-height:14px !important;
}
/* Receive touches in the board's padding as well as the tile faces. */
#gameScreen .board-wrap{touch-action:none !important}

/* v226: explicit bag placement, independent of legacy two-column rules. */
#gameScreen #battleBagBar{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:20px 54px !important;
  grid-auto-flow:row !important;
  align-content:start !important;
  align-items:start !important;
  gap:6px !important;
  height:100px !important;
  min-height:100px !important;
  max-height:100px !important;
  padding:8px !important;
  margin:7px 0 9px !important;
  box-sizing:border-box !important;
}
#gameScreen #battleBagBar > .battle-bag-label{
  grid-column:1 !important;
  grid-row:1 !important;
  width:100% !important;
  min-width:0 !important;
  justify-content:center !important;
  overflow:visible !important;
}
#gameScreen #battleBagBar > .battle-bag-actions{
  grid-column:1 !important;
  grid-row:2 !important;
  align-self:start !important;
  grid-template-rows:54px !important;
  height:54px !important;
  min-height:54px !important;
  max-height:54px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:visible !important;
}
/* Root scrolling makes Safari's browser chrome expand/collapse during battle.
   Lock the root only during battles; all battle content uses one inner scroller.
   Stable viewport height and width avoid resizing the board on toolbar changes. */
html.battle-active, body.battle-active{
  overflow:hidden !important;
  height:100% !important;
  min-height:0 !important;
  overscroll-behavior:none !important;
}
body.battle-active{position:fixed !important;inset:0 !important;padding:0 !important}
body.battle-active .app-shell{
  width:min(100%,480px) !important;
  min-height:0 !important;
  transform:none !important;
  filter:none !important;
  perspective:none !important;
}
html.battle-active #gameScreen.screen.active{
  position:fixed !important;
  inset:0 auto auto 50% !important;
  transform:translateX(-50%) !important;
  width:min(100%,480px) !important;
  max-width:480px !important;
  height:100% !important;
  height:100svh !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
  scroll-behavior:auto !important;
  scroll-snap-type:none !important;
  box-sizing:border-box !important;
  padding:8px 6px calc(24px + env(safe-area-inset-bottom)) !important;
}
html.battle-active #gameScreen > *{flex-shrink:0 !important}

/* v227: board footprint stays fixed through empty tiles and DOM updates. */
#gameScreen #board{
  aspect-ratio:1 / 1 !important;
  grid-template-rows:repeat(var(--board-size,6),minmax(0,1fr)) !important;
  grid-auto-rows:minmax(0,1fr) !important;
  box-sizing:border-box !important;
  min-height:0 !important;
  align-content:stretch !important;
}
#gameScreen #board > .cell{
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-height:100% !important;
  box-sizing:border-box !important;
  aspect-ratio:auto !important;
}

/* v228 intro taps and scrolling stay in their own viewport layer. */
#levelIntro #introBtn{
  pointer-events:auto !important;
  touch-action:manipulation !important;
}
#levelIntro .level-intro-card{
  animation:none !important;
  transform:none !important;
}

/* v229: one bounded story scroller and a permanently visible action footer. */
#levelIntro.level-intro{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  top:var(--intro-viewport-top,0px) !important;
  bottom:auto !important;
  height:var(--intro-viewport-height,100svh) !important;
  min-height:0 !important;
  max-height:var(--intro-viewport-height,100svh) !important;
  overflow:hidden !important;
  padding:8px 6px max(10px,env(safe-area-inset-bottom)) !important;
  gap:8px !important;
  touch-action:pan-y !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
#levelIntro .level-intro-card{
  flex:1 1 auto !important;
  width:min(100%,620px) !important;
  max-width:620px !important;
  min-height:0 !important;
  height:auto !important;
  max-height:100% !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  touch-action:pan-y !important;
  margin:0 !important;
  padding:12px 10px 20px !important;
  box-sizing:border-box !important;
  scroll-behavior:auto !important;
}
#levelIntro .level-intro-actions{
  position:relative !important;
  flex:0 0 58px !important;
  width:min(100%,620px) !important;
  height:58px !important;
  min-height:58px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  background:#102d45 !important;
  border-radius:16px !important;
  z-index:2 !important;
}
#levelIntro .level-intro-actions #introBtn{
  position:static !important;
  width:min(94%,360px) !important;
  height:52px !important;
  min-height:52px !important;
  margin:0 !important;
  transform:none !important;
}
#levelIntro .level-intro-card img{pointer-events:none !important}

/* v231: elemental wilds use the existing tile footprint and hit target. */
.cell.elemental-orb { --orb-color: #ff603e; }
.cell.elemental-orb-star { --orb-color: #ffd64b; }
.cell.elemental-orb-bubble { --orb-color: #32bfff; }
.cell.elemental-orb-nature { --orb-color: #60dc82; }
.cell.elemental-orb-ice { --orb-color: #9ce9ff; }
.cell.elemental-orb-wind { --orb-color: #b47bff; }
.cell.elemental-orb .power-orb-shell {
  background: radial-gradient(circle at 30% 25%, #fff 0%, var(--orb-color) 27%, #122d48 90%);
  border: 2px solid var(--orb-color);
  box-shadow: 0 0 12px var(--orb-color), inset 0 0 7px #fff8;
}
.cell.elemental-orb .power-orb-core { background: var(--orb-color); opacity: .3; }
.cell.elemental-orb .power-orb-glyph { color: #fff; text-shadow: 0 2px 4px #092033; animation: none; }
.cell.elemental-orb-ice .power-orb-shell { border-radius: 20%; transform: rotate(8deg); }
.cell.elemental-orb-nature .power-orb-glyph { color: #ffdbf8; font-size: 32px; }
.cell.elemental-orb .power-orb-label { color: #fff; text-shadow: 0 1px 3px #000; }
.cell.elemental-orb::after { display: none; }
.cell.elemental-orb .power-orb-core { animation: none; }
.cell.elemental-orb-ice .power-orb-shell { transform: translate(-50%, -50%) rotate(8deg); animation: none; }
.board[data-board-size="8"] .elemental-orb .power-orb-label,
.board[data-board-size="9"] .elemental-orb .power-orb-label { font-size: 6px; letter-spacing: .03em; bottom: 2px; }
.board[data-board-size="8"] .elemental-orb-nature .power-orb-glyph,
.board[data-board-size="9"] .elemental-orb-nature .power-orb-glyph { font-size: 21px; }

/* v232: map controls stay outside the map's scrolling content. */
html.map-active, body.map-active {
  overflow: hidden !important;
  height: 100% !important;
  min-height: 0 !important;
  overscroll-behavior: none !important;
}
body.map-active { position: fixed !important; inset: 0 !important; padding: 0 !important; }
body.map-active .app-shell { transform: none !important; filter: none !important; perspective: none !important; }
#mapScreen.screen.active {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  animation: none !important;
  width: min(100%, 480px) !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom)) !important;
}
#mapScreen > .map-screen-shell {
  height: 100%; min-height: 0; padding: 6px; gap: 8px;
  overflow: hidden; backdrop-filter: none; -webkit-backdrop-filter: none;
}
#mapScreen .map-sticky-tools-wrap {
  position: relative; top: auto; flex: 0 0 auto; margin: 0;
}
#mapScreen .map-scroll-content {
  flex: 1 1 0; min-height: 0; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 14px;
  padding-bottom: 100px; scroll-padding-top: 10px;
}
#mapScreen .map-scroll-content > * { flex-shrink: 0; }

/* v233: maps and their short transitions remain in the route;
   the large illustrated section details open on demand. */
#mapScreen .map-story-card { display: none !important; }
#mapScreen .map-topbar-card {
  position: relative !important; top: auto !important;
  height: auto !important; min-height: 0 !important; max-height: none !important;
  overflow: visible !important; padding: 12px !important;
}
#mapScreen .map-topbar-card > div { min-width: 0; }
#mapScreen .map-topbar-card h1,
#mapScreen .map-topbar-card p {
  white-space: normal !important; overflow-wrap: anywhere;
  height: auto !important; max-height: none !important;
}
#mapScreen .map-topbar-card h1 { font-size: clamp(1.2rem, 5vw, 1.65rem); line-height: 1.12; }
#mapScreen .map-region-strip {
  display: flex; flex-wrap: wrap !important; min-width: 0;
  overflow: visible !important; height: auto !important; max-height: none !important;
}
#mapScreen .region-chip { max-width: 100%; white-space: normal; }
#mapScreen .journey-map-connector { white-space: normal; overflow-wrap: anywhere; }
.map-details-overlay {
  position: fixed; inset: 0; z-index: 20000;
  background: #03131dcc; display: flex; justify-content: center; align-items: center;
  padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
}
.map-details-panel {
  display: flex; flex-direction: column; width: min(100%, 600px);
  max-height: 100%; min-height: 0; overflow: hidden;
  border: 2px solid #d6b867; border-radius: 22px;
  background: #102b40; box-shadow: 0 14px 40px #0009;
}
.map-details-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px; flex: 0 0 auto;
}
.map-details-header h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 1.1rem; color: #ffe39b; }
.map-details-header button { flex: 0 0 auto; }
.map-details-content { overflow-y: auto; min-height: 0; padding: 0 10px 12px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.map-details-content .map-story-card { display: block !important; margin: 0; min-width: 0; max-width: 100%; }
.map-details-content .map-story-copy { min-width: 0; overflow-wrap: anywhere; }
.map-details-content .map-story-rich { grid-template-columns: 1fr !important; }
.map-details-content .map-story-feature-img { width: 100px; height: 100px; object-fit: cover; margin: auto; }
.map-details-content .map-story-card .eyebrow { white-space: normal !important; overflow-wrap: anywhere; }
/* v234: new Household route maps retain native image proportions. */
.household-soft-map-card, .household-clock-map-card { position:relative; overflow:hidden; }
.household-soft-map-card .journey-scene-img, .household-clock-map-card .journey-scene-img { display:block; width:100%; height:auto; }
.household-soft-map-card .journey-map-overlay, .household-clock-map-card .journey-map-overlay { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; z-index:12; pointer-events:none; }
.household-soft-map-card .journey-node, .household-clock-map-card .journey-node { position:absolute !important; pointer-events:auto !important; z-index:18; }
.household-soft-map-card .journey-node,
.household-clock-map-card .journey-node {
  margin: 0 !important;
  right: auto !important; bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}
/* Keep the lower Cushion Canyon caption inside its short landscape map. */
.household-soft-map-card .journey-node[data-level="53"] small {
  top: auto !important; bottom: 100% !important;
  transform: translate(-50%, -4px) !important;
}

/* v235: every level intro uses the opponent painting as the entire card. */
#levelIntro .level-intro-card {
  display: flex !important; flex-direction: column !important;
  position: relative !important; isolation: isolate;
  background-image: linear-gradient(180deg, rgba(3,13,22,.65), transparent 30%, rgba(3,13,22,.15) 50%, rgba(3,13,22,.94) 92%), var(--intro-opponent-art) !important;
  background-size: cover !important;
  background-position: center, center 30% !important;
  background-repeat: no-repeat !important;
  border: 2px solid #d6b56b !important;
  padding: 16px 12px 18px !important;
}
#levelIntro .level-intro-card > * { flex-shrink: 0 !important; }
#levelIntro .level-intro-card::before,
#levelIntro .level-intro-card::after,
#levelIntro #introJourneyHero,
#levelIntro #introEnemyImg { display: none !important; }
#levelIntro .level-intro-card > .eyebrow {
  color: #ffe3a1 !important; text-shadow: 0 2px 5px #000;
  margin: 0 0 4px !important;
}
#levelIntro #introTitle {
  font-size: clamp(1.25rem, 5.5vw, 2rem) !important;
  line-height: 1.12 !important; color: #fff0be !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; background: none !important;
  white-space: normal !important; overflow-wrap: anywhere;
  text-shadow: 0 2px 5px #000, 0 0 12px #0008;
}
#levelIntro .intro-feature-shell {
  margin: clamp(190px, 38svh, 340px) 0 0 !important;
  padding: 12px !important; border: 0 !important;
  background: rgba(4,20,32,.78) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
#levelIntro .intro-opponent {
  display: block !important; padding: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
}
#levelIntro .intro-opponent > div { min-width: 0; }
#levelIntro #introEnemyName {
  display: block !important; font-size: clamp(1.15rem, 4.8vw, 1.6rem) !important;
  color: #ffe7a4 !important; line-height: 1.15 !important;
  margin: 0 0 6px !important; overflow-wrap: anywhere;
}
#levelIntro #introFlavor { display: block; font-size: .9rem !important; line-height: 1.4 !important; color: #fff6df !important; }
#levelIntro #introMetaChips { margin: 10px 0 0 !important; gap: 5px !important; }
#levelIntro #introMetaChips .story-meta-chip { padding: 5px 8px !important; font-size: .72rem !important; }
#levelIntro #introRewardRow {
  display: flex !important; flex-wrap: wrap !important; gap: 6px !important;
  padding: 0 !important; margin: 10px 0 0 !important;
  height: auto !important; min-height: 0 !important;
  aspect-ratio: auto !important; background: none !important;
}
#levelIntro #introRewardRow::before, #levelIntro #introRewardRow::after { display: none !important; }
#levelIntro #introRewardRow .story-reward-pill {
  position: static !important; transform: none !important;
  display: flex !important; align-items: center; gap: 6px;
  flex: 1 1 120px; min-width: 0 !important; max-width: 100% !important;
  min-height: 44px !important; height: auto !important; width: auto !important;
  padding: 7px !important; border-radius: 10px !important;
  background: #102f45dd !important; border: 1px solid #d6b56b88 !important;
}
#levelIntro #introRewardRow .story-reward-pill b { font-size: 1rem !important; }
#levelIntro #introRewardRow .story-reward-pill span { font-size: .74rem !important; white-space: normal !important; overflow-wrap: anywhere; }
#levelIntro #introText {
  margin: 8px 0 0 !important; padding: 10px 12px !important;
  border-radius: 12px; background: rgba(4,20,32,.85) !important;
  color: #fff6df !important; font-size: .85rem !important; line-height: 1.45 !important;
}

/* v236: map transitions and victories share the full-art intro presentation. */
#journeyTransition, #modal {
  display:flex !important; flex-direction:column !important; align-items:center !important;
  justify-content:flex-start !important; inset:auto !important;
  top:var(--story-viewport-top,0px) !important; left:0 !important;
  height:var(--story-viewport-height,100svh) !important;
  min-height:0 !important; max-height:var(--story-viewport-height,100svh) !important;
  overflow:hidden !important; gap:8px !important;
  padding:8px 6px max(10px,env(safe-area-inset-bottom)) !important;
  touch-action:pan-y !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
#journeyTransition.hidden, #modal.hidden { display:none !important; }
#journeyTransition .journey-transition-card, #modal .modal-card {
  flex:1 1 auto !important; width:min(100%,620px) !important; max-width:620px !important;
  min-height:0 !important; max-height:100% !important; margin:0 !important;
  overflow-x:hidden !important; overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important; overscroll-behavior:contain !important;
  touch-action:pan-y !important; scroll-behavior:auto !important;
  padding:16px 12px 18px !important; box-sizing:border-box !important;
}
#journeyTransition .story-overlay-actions, #modal .story-overlay-actions {
  position:relative !important; flex:0 0 58px !important; width:min(100%,620px) !important;
  height:58px !important; min-height:58px !important; display:flex !important;
  align-items:center !important; justify-content:center !important;
  background:#102d45 !important; border-radius:16px !important; z-index:40 !important;
}
#journeyTransition .story-overlay-actions #journeyContinueBtn,
#modal .story-overlay-actions #modalBtn {
  position:static !important; width:min(94%,360px) !important; height:52px !important;
  min-height:52px !important; margin:0 !important; transform:none !important;
}
#journeyTransition .journey-transition-card, #modal .modal-card.victory-mode {
  display:flex !important; flex-direction:column !important; isolation:isolate;
  border:2px solid #d6b56b !important;
  background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important;
}
#journeyTransition .journey-transition-card {
  background-image:linear-gradient(180deg,#03101bbe,transparent 30%,#03101b35 50%,#03101bef 95%),var(--transition-map-art) !important;
}
#modal .modal-card.victory-mode {
  background-image:linear-gradient(180deg,#03101ba6,transparent 30%,#03101b25 50%,#03101bf0 92%),var(--victory-opponent-art) !important;
}
#journeyTransition .journey-transition-card > *, #modal .victory-mode > * { flex-shrink:0 !important; }
#journeyTransition .journey-transition-card::before, #journeyTransition .journey-transition-card::after,
#modal .victory-mode::before, #modal .victory-mode::after,
#journeyTransitionIcon, #journeyMapHero, #journeyTransition .journey-companions,
#journeyTransition .transition-feature-art, #modal .victory-mode #modalIcon,
#modal .victory-mode #rewardChest, #modal .victory-mode #rewardBossImg { display:none !important; }
#journeyTransition #journeyTransitionBadge, #modal .victory-mode #modalBadge {
  position:static !important; align-self:flex-start; margin:0 0 4px !important;
  padding:0 !important; background:none !important; border:0 !important;
  color:#ffe3a1 !important; text-shadow:0 2px 5px #000;
  font-size:.8rem !important; letter-spacing:.14em !important;
}
#journeyTransition #journeyTransitionTitle, #modal .victory-mode #modalTitle {
  margin:0 !important; padding:0 !important; border:0 !important; background:none !important;
  color:#fff0be !important; font-size:clamp(1.25rem,5.5vw,2rem) !important; line-height:1.12 !important;
  white-space:normal !important; overflow-wrap:anywhere; text-shadow:0 2px 5px #000,0 0 12px #0008;
}
#journeyTransition #journeyTransitionText {
  margin:clamp(190px,38svh,340px) 0 0 !important; padding:12px !important;
  background:#041420c7 !important; border-radius:16px !important;
  color:#fff6df !important; font-size:.9rem !important; line-height:1.4 !important;
}
#journeyTransition .transition-feature-card {
  display:block !important; padding:12px !important; margin:8px 0 0 !important;
  background:#041420c7 !important; border:0 !important; box-shadow:none !important; border-radius:16px !important;
}
#journeyTransition .transition-feature-copy { min-width:0 !important; }
#journeyTransition #journeyTransitionEnemyName { font-size:1.15rem !important; color:#ffe7a4 !important; overflow-wrap:anywhere; }
#journeyTransition #journeyTransitionLevelMeta, #journeyTransition .transition-feature-label { font-size:.75rem !important; white-space:normal !important; }
#journeyTransition .journey-dialogue {
  margin:8px 0 0 !important; padding:10px 12px !important; background:#041420d9 !important;
  border:0 !important; border-radius:12px !important;
}
#journeyTransition #journeyQuote { font-size:.85rem !important; line-height:1.4 !important; }
#modal .victory-mode #rewardChestBox {
  display:block !important; padding:12px !important; margin:clamp(190px,38svh,340px) 0 0 !important;
  background:#041420c7 !important; border:0 !important; box-shadow:none !important;
  border-radius:16px !important; min-height:0 !important; height:auto !important;
}
#modal .victory-mode #rewardChestBox::before, #modal .victory-mode #rewardChestBox::after,
#modal .victory-mode #rewardReveal::before, #modal .victory-mode #rewardReveal::after { display:none !important; }
#modal .victory-mode #rewardReveal {
  display:block !important; padding:0 !important; margin:0 !important; background:none !important;
  border:0 !important; box-shadow:none !important; min-height:0 !important;
}
#modal .victory-mode #rewardBossArt {
  display:block !important; margin:0 0 8px !important; padding:0 !important;
  background:none !important; border:0 !important; box-shadow:none !important; min-height:0 !important;
}
#modal .victory-mode #rewardBossCaption {
  font-size:1.15rem !important; color:#ffe7a4 !important; line-height:1.2 !important; overflow-wrap:anywhere;
}
#modal .victory-mode .reward-line { display:none !important; }
#modal .victory-mode #rewardBonus { font-size:.85rem !important; line-height:1.4 !important; }
#modal .victory-mode #modalText {
  padding:10px 12px !important; margin:8px 0 0 !important; background:#041420d9 !important;
  border-radius:12px !important; font-size:.85rem !important; line-height:1.4 !important; color:#fff6df !important;
}
#journeyTransition #journeyTransitionRewardRow, #modal .victory-mode #victoryRewardRow {
  display:flex !important; flex-wrap:wrap !important; gap:6px !important;
  padding:0 !important; margin:10px 0 0 !important; height:auto !important; min-height:0 !important;
  aspect-ratio:auto !important; background:none !important;
}
#journeyTransition #journeyTransitionRewardRow::before, #journeyTransition #journeyTransitionRewardRow::after,
#modal .victory-mode #victoryRewardRow::before, #modal .victory-mode #victoryRewardRow::after { display:none !important; }
#journeyTransition #journeyTransitionRewardRow .story-reward-pill, #modal .victory-mode #victoryRewardRow .story-reward-pill {
  position:static !important; transform:none !important; display:flex !important; align-items:center; gap:6px;
  flex:1 1 120px; min-width:0 !important; max-width:100% !important; min-height:44px !important;
  height:auto !important; width:auto !important; padding:7px !important; border-radius:10px !important;
  background:#102f45dd !important; border:1px solid #d6b56b88 !important;
}
#journeyTransition #journeyTransitionRewardRow .story-reward-pill b, #modal .victory-mode #victoryRewardRow .story-reward-pill b { font-size:1rem !important; }
#journeyTransition #journeyTransitionRewardRow .story-reward-pill span, #modal .victory-mode #victoryRewardRow .story-reward-pill span {
  font-size:.74rem !important; white-space:normal !important; overflow-wrap:anywhere;
}
/* Keep story artwork above floating game controls and opaque during reveals. */
#journeyTransition, #modal { z-index:2147483000 !important; background:#081d2bec !important; }
#journeyTransition .journey-transition-card, #modal .modal-card.victory-mode { background-color:#081d2b !important; }
#modal .victory-mode #rewardBossCaption {
  max-width:none !important; margin:0 !important; text-align:left !important;
  text-transform:none !important; letter-spacing:normal !important;
}
#journeyTransition .journey-transition-card, #modal .modal-card { overflow-anchor:none !important; }
#modal .victory-mode #rewardBossArt { width:100% !important; max-width:none !important; box-sizing:border-box !important; }

/* v237: gold remains gold on every device. Portraits zoom inside fixed frames. */
.gold-coin-icon {
  display:inline-block !important; width:1.1em !important; height:1.1em !important;
  min-width:1.1em !important; max-width:1.1em !important; max-height:1.1em !important;
  padding:0 !important; margin:0 !important; border:0 !important;
  border-radius:0 !important; background:none !important; box-shadow:none !important;
  object-fit:contain !important; vertical-align:-.16em; flex:0 0 auto;
  pointer-events:none; transform:none !important;
}
#gameScreen .fighter-image { overflow:hidden !important; }
#gameScreen .fighter-image img {
  width:100% !important; height:100% !important; padding:0 !important;
  border:0 !important; margin:0 !important; object-fit:cover !important;
  transform-origin:center center !important;
}
#gameScreen #boardEnemyImg { transform:scale(1.3) !important; }
#gameScreen #boardHeroImg { transform:scale(1.16) !important; }

/* v238: additive stardust follows traces and blooms from disappearing tiles. */
#boardFx .magic-dust-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none !important; z-index:5; border:0; padding:0; margin:0;
}
#gameScreen .cell.selected {
  filter:brightness(1.12);
}
/* v239: admin controls are separate from the game and available on the leaderboard. */
#leaderboardAdmin { width:min(94vw,640px);max-height:85svh;box-sizing:border-box;overflow:auto;padding:18px;background:#102d45;color:#fff0be;border:2px solid #d6b56b;border-radius:20px; }
#leaderboardAdmin::backdrop { background:#03101bdd; }
#leaderboardAdmin [hidden] { display:none !important; }
.admin-header,.admin-tools,.admin-player-actions { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.admin-header { justify-content:space-between; }
.admin-header h2 { margin:0;font-size:1.25rem; }
#leaderboardAdmin label { display:block;margin:12px 0;font-size:.9rem; }
#leaderboardAdmin input { display:block;box-sizing:border-box;width:100%;margin-top:5px;padding:12px;border-radius:10px;border:1px solid #d6b56b;background:#071c2d;color:#fff;font-size:16px; }
#leaderboardAdmin p { font-size:.85rem;line-height:1.4; }
.admin-player { border-top:1px solid #d6b56b66;padding:12px 0; }
.admin-player strong,.admin-player small { display:block;overflow-wrap:anywhere; }
.admin-player small { margin:4px 0 8px;color:#cfdae5;font-size:.75rem; }
#adminStatus { min-height:1.4em; }
/* v240: crystals fade quickly into colored/golden falling dust. */
#gameScreen .cell.dust-charge { box-shadow:inset 0 0 12px var(--dust-color),0 0 7px var(--dust-color); }
#gameScreen .cell.pop { transform:none !important; opacity:0 !important; transition:opacity 70ms linear !important; }
/* v241: keep visible gold dust above legacy spell decorations. */
#gameScreen #boardFx .magic-dust-canvas { z-index:200 !important; }
#gameScreen .mixed-board-field,#gameScreen .mixed-board-sweep,#gameScreen .mixed-board-particle,
#gameScreen .power-orb-blast,#gameScreen .power-orb-mega-target::after { display:none !important; }
#gameScreen .finisher-particle { display:none !important; }
/* v246: narrative scenes scroll inside existing cards; their actions stay pinned. */
.home-story-scene[hidden] { display:none !important; }
#introHomeStory,#transitionHomeStory,#victoryHomeStory {
  padding:12px !important;margin:14px 0 !important;border:1px solid #d8b56b88;
  border-radius:16px;background:#0c293dee;box-sizing:border-box;
}
#introHomeStory img,#transitionHomeStory img,#victoryHomeStory img {
  display:block !important;width:100% !important;height:auto !important;aspect-ratio:3/2;
  max-height:none !important;object-fit:contain !important;border-radius:12px;
  margin:0 0 12px !important;padding:0 !important;border:0 !important;transform:none !important;
}
#introHomeStory h3,#transitionHomeStory h3,#victoryHomeStory h3 { margin:6px 0 12px !important;color:#ffe39b;font-size:1.3rem !important;line-height:1.2; }
#introHomeStory p,#transitionHomeStory p,#victoryHomeStory p { margin:10px 0 !important;color:#fff4d5;font-size:.98rem !important;line-height:1.5 !important;white-space:normal !important;text-align:left !important; }
#levelIntro .level-intro-card.has-narrative-scene,
#journeyTransition .journey-transition-card.has-narrative-scene { background-image:none !important;background-color:#0b2335 !important; }
#levelIntro .has-narrative-scene .intro-feature-shell { margin:12px 0 0 !important; }
#levelIntro .has-narrative-scene .intro-opponent {
  min-height:220px !important;padding:150px 12px 12px !important;box-sizing:border-box;
  background-image:linear-gradient(transparent,#051725ed),var(--intro-opponent-art) !important;
  background-size:cover !important;background-position:center !important;border-radius:12px !important;
}
#journeyTransition .has-narrative-scene .transition-feature-card { margin:12px 0 !important; }
#journeyTransition .journey-transition-card.has-narrative-scene { animation:none !important;opacity:1 !important;transform:none !important; }
#journeyTransition .has-narrative-scene #journeyTransitionText { margin:12px 0 0 !important; }
#modalText { white-space:pre-line; }
/* v245: optional guidance sits above the UI without resizing or trapping the board. */
#wimbleGuide[hidden] { display:none !important; }
#wimbleGuide {
  position:fixed;inset:0;z-index:150000;pointer-events:none;
  color:#fff0bf;font-family:inherit;
}
#wimbleGuide .guide-card {
  pointer-events:auto;position:absolute;left:50%;bottom:max(12px,env(safe-area-inset-bottom));
  transform:translateX(-50%);width:min(440px,calc(100% - 24px));box-sizing:border-box;
  max-height:52svh;overflow-y:auto;overscroll-behavior:contain;
  background:linear-gradient(#173d56,#092437);border:2px solid #d5b466;border-radius:20px;
  box-shadow:0 8px 30px #0009;padding:12px;
}
#wimbleGuide .guide-art { width:100%;height:112px;object-fit:cover;object-position:center 38%;border-radius:12px;display:block;margin-bottom:8px; }
#wimbleGuide small { color:#ffdc79;letter-spacing:.08em;font-size:.72rem; }
#wimbleGuide h2 { margin:5px 0;font-size:1.2rem;line-height:1.2; }
#wimbleGuide p { font-size:.92rem;line-height:1.4;margin:8px 0; }
#wimbleGuide .guide-actions { position:sticky;bottom:-12px;display:flex;gap:8px;padding:8px 0 4px;background:#0c2a3e; }
#wimbleGuide button { min-height:44px;min-width:44px;border:1px solid #d5b466;border-radius:12px;padding:8px 14px;background:#234e6a;color:#fff0bf;font:inherit;cursor:pointer; }
#wimbleGuide button:focus-visible { outline:3px solid #fff2ae;outline-offset:2px; }
#wimbleGuide .guide-actions button:first-child { background:#426783;flex:1; }
#wimbleGuide .guide-menu { max-height:80svh; }
#wimbleGuide .guide-menu button { display:block;width:100%;margin:7px 0; }
#wimbleGuide.guide-compact .guide-card { top:max(8px,env(safe-area-inset-top));bottom:auto;max-height:25svh;padding:8px 10px; }
#wimbleGuide.guide-compact p { margin:0;font-size:.85rem; }
#wimbleGuide.guide-compact .guide-actions { padding:2px 0 0; }
.guide-target { outline:2px solid #ffe59a !important;outline-offset:3px; }
#gameScreen .cell.guide-crystal { box-shadow:0 0 8px 3px #ffe59a,inset 0 0 8px #ffe59a !important; }
@media(max-height:600px){#wimbleGuide .guide-art { height:72px; }#wimbleGuide .guide-card { max-height:60svh; }}
/* v242: transparent mixed-spell circles grow richer with the traced chain. */
#boardFx .mixed-magic-circle {
  position:absolute; left:50%; top:50%; width:var(--circle-size); aspect-ratio:1;
  box-sizing:border-box; border:4px solid var(--circle-color); border-radius:50%;
  background:none; pointer-events:none !important; z-index:10; opacity:0;
  box-shadow:0 0 5px #fff7d9,0 0 16px var(--circle-color),0 0 32px var(--circle-color),inset 0 0 16px var(--circle-color);
  animation:mixed-circle-flow 900ms ease-out var(--circle-delay) both;
}
#boardFx .mixed-magic-circle.enchanted { border-style:double; border-width:7px; }
#boardFx .mixed-magic-circle::before {
  content:''; position:absolute; inset:-5px; border:10px solid var(--circle-color);
  border-radius:50%; filter:blur(7px); opacity:.65; pointer-events:none;
}
#boardFx .mixed-magic-circle.grand { outline:1px dashed #ffe79a; outline-offset:6px; }
#boardFx .mixed-circle-star {
  position:absolute; transform:translate(-50%,-50%); color:#ffe79a;
  font-size:17px; line-height:1; text-shadow:0 0 7px #ffd65a; pointer-events:none;
}
/* v244: simple luminous element drawings expand from the board center. */
#boardFx .element-outline {
  position:absolute;left:50%;top:50%;width:var(--element-size);aspect-ratio:1;
  z-index:12;pointer-events:none !important;color:var(--element-glow);
  animation:element-outline-rise 1000ms ease-out both;
}
#boardFx .element-outline svg {
  display:block;width:100%;height:100%;overflow:visible;fill:none;
  stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 3px #fff7dc) drop-shadow(0 0 9px var(--element-glow));
  pointer-events:none !important;
}
@keyframes element-outline-rise {
  0% { transform:translate(-50%,-50%) scale(.08);opacity:0;filter:blur(0); }
  15% { opacity:.95; }
  38% { transform:translate(-50%,-50%) scale(.9);opacity:.95;filter:blur(0); }
  65% { transform:translate(-50%,-50%) scale(1);opacity:.7;filter:blur(1px); }
  100% { transform:translate(-50%,-50%) scale(1.08);opacity:0;filter:blur(7px); }
}
@media (prefers-reduced-motion:reduce) {
  #boardFx .element-outline { animation:element-outline-gentle 300ms ease-out both; }
  @keyframes element-outline-gentle {
    from { transform:translate(-50%,-50%);opacity:.7; }
    to { transform:translate(-50%,-50%);opacity:0; }
  }
}
@keyframes mixed-circle-flow {
  0% { transform:translate(-50%,-50%) scale(.2) rotate(-14deg); opacity:0; }
  18% { opacity:.9; }
  70% { opacity:.6; }
  100% { transform:translate(-50%,-50%) scale(1) rotate(14deg); opacity:0; }
}
@media (prefers-reduced-motion:reduce) {
  #boardFx .mixed-magic-circle { animation:mixed-circle-gentle 300ms ease-out both; }
  @keyframes mixed-circle-gentle {
    from { transform:translate(-50%,-50%); opacity:.65; }
    to { transform:translate(-50%,-50%); opacity:0; }
  }
}

/* v248: two grounded chapters, five spaced stops per map. */
.overgrown-garden-map-card,.gnome-tree-map-card { overflow:visible !important; }
.overgrown-garden-map-card .journey-scene-img,.gnome-tree-map-card .journey-scene-img { width:100%;height:auto;display:block;aspect-ratio:2/3;object-fit:cover;border-radius:22px; }
.overgrown-garden-map-card .journey-node small,.gnome-tree-map-card .journey-node small { max-width:110px;white-space:normal;line-height:1.15; }
[data-theme="overgrowngarden"] { --region-accent:#a9d96d; }
[data-theme="gnometree"] { --region-accent:#e4b85b; }
.overgrown-garden-map-card,.gnome-tree-map-card { position:relative !important;min-height:0 !important;aspect-ratio:2/3; }
.overgrown-garden-map-card .journey-map-overlay,.gnome-tree-map-card .journey-map-overlay { position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;z-index:12;pointer-events:none; }
.overgrown-garden-map-card .journey-node,.gnome-tree-map-card .journey-node { position:absolute !important;pointer-events:auto !important;z-index:18;margin:0 !important;right:auto !important;bottom:auto !important;transform:translate(-50%,-50%) !important; }
/* Leave room for the pinned map controls when focusing a level. */
.overgrown-garden-map-card .journey-node, .gnome-tree-map-card .journey-node { scroll-margin-block:180px 80px; }
/* Give each map an interactive surface; its child buttons remain separate tap targets. */
.overgrown-garden-map-card .journey-map-overlay, .gnome-tree-map-card .journey-map-overlay { pointer-events:auto !important; }
/* Preserve the centered map position while the existing pressed animation scales it. */
.overgrown-garden-map-card .journey-node:active:not(.locked),
.gnome-tree-map-card .journey-node:active:not(.locked) { transform:translate(-50%,-50%) scale(.96) !important; }

/* v250: grounded winter maps with stable centered tap targets. */
.snowbound-trail-map-card,.frost-village-map-card { position:relative !important;overflow:visible !important;min-height:0 !important;aspect-ratio:2/3; }
.snowbound-trail-map-card .journey-scene-img,.frost-village-map-card .journey-scene-img { width:100%;height:auto;display:block;aspect-ratio:2/3;object-fit:cover;border-radius:22px; }
.snowbound-trail-map-card .journey-map-overlay,.frost-village-map-card .journey-map-overlay { position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;z-index:12;pointer-events:auto; }
.snowbound-trail-map-card .journey-node,.frost-village-map-card .journey-node { position:absolute !important;pointer-events:auto !important;z-index:18;margin:0 !important;right:auto !important;bottom:auto !important;transform:translate(-50%,-50%) !important;scroll-margin-block:180px 80px; }
.snowbound-trail-map-card .journey-node:active:not(.locked),.frost-village-map-card .journey-node:active:not(.locked) { transform:translate(-50%,-50%) scale(.96) !important; }
.snowbound-trail-map-card .journey-node small,.frost-village-map-card .journey-node small { max-width:110px;white-space:normal;line-height:1.15; }
[data-theme="snowboundtrail"] { --region-accent:#b8e4f0; }
[data-theme="frostvillage"] { --region-accent:#ffd188; }

/* v251: candy map keeps node centers stable while pressed. */
.candy-map-card { position:relative !important;overflow:visible !important;min-height:0 !important;aspect-ratio:2/3; }
.candy-map-card .journey-scene-img { width:100%;height:auto;display:block;aspect-ratio:2/3;object-fit:cover;border-radius:22px; }
.candy-map-card .journey-map-overlay { position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;z-index:12;pointer-events:auto; }
.candy-map-card .journey-node { position:absolute !important;pointer-events:auto !important;z-index:18;margin:0 !important;right:auto !important;bottom:auto !important;transform:translate(-50%,-50%) !important;scroll-margin-block:180px 80px; }
.candy-map-card .journey-node:active:not(.locked) { transform:translate(-50%,-50%) scale(.96) !important; }
.candy-map-card .journey-node small { max-width:110px;white-space:normal;line-height:1.15; }
[data-theme="candysketchlands"] { --region-accent:#ffd779; }

/* v252: lake map keeps node centers stable while pressed. */
.castle-lake-map-card { position:relative !important;overflow:visible !important;min-height:0 !important;aspect-ratio:2/3; }
.castle-lake-map-card .journey-scene-img { width:100%;height:auto;display:block;aspect-ratio:2/3;object-fit:cover;border-radius:22px; }
.castle-lake-map-card .journey-map-overlay { position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;z-index:12;pointer-events:auto; }
.castle-lake-map-card .journey-node { position:absolute !important;pointer-events:auto !important;z-index:18;margin:0 !important;right:auto !important;bottom:auto !important;transform:translate(-50%,-50%) !important;scroll-margin-block:180px 80px; }
.castle-lake-map-card .journey-node:active:not(.locked) { transform:translate(-50%,-50%) scale(.96) !important; }
.castle-lake-map-card .journey-node small { max-width:110px;white-space:normal;line-height:1.15; }
[data-theme="castlelake"] { --region-accent:#74dfeb; }

/* v253: final dungeon maps keeps node centers stable while pressed. */
:is(.hidden-passage-map-card,.homeward-dungeon-map-card) { position:relative !important;overflow:visible !important;min-height:0 !important;aspect-ratio:2/3; }
:is(.hidden-passage-map-card,.homeward-dungeon-map-card) .journey-scene-img { width:100%;height:auto;display:block;aspect-ratio:2/3;object-fit:cover;border-radius:22px; }
:is(.hidden-passage-map-card,.homeward-dungeon-map-card) .journey-map-overlay { position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;z-index:12;pointer-events:auto; }
:is(.hidden-passage-map-card,.homeward-dungeon-map-card) .journey-node { position:absolute !important;pointer-events:auto !important;z-index:18;margin:0 !important;right:auto !important;bottom:auto !important;transform:translate(-50%,-50%) !important;scroll-margin-block:180px 80px; }
:is(.hidden-passage-map-card,.homeward-dungeon-map-card) .journey-node:active:not(.locked) { transform:translate(-50%,-50%) scale(.96) !important; }
:is(.hidden-passage-map-card,.homeward-dungeon-map-card) .journey-node small { max-width:110px;white-space:normal;line-height:1.15; }
[data-theme="hiddenpassage"],[data-theme="homewarddungeon"] { --region-accent:#74dfeb; }

/* v256: later supplies use their own expandable row; the original Battle Bag stays seven columns. */
.battle-wonders { grid-column:1/-1;width:100%;box-sizing:border-box;border:1px solid #a88f50;border-radius:16px;background:linear-gradient(#17384e,#0b2437);color:#ffe5a0;margin:10px 0;padding:10px 12px; }
.battle-wonders.hidden { display:none!important; }
.battle-wonders summary { cursor:pointer;font-weight:800;font-size:14px; }
.battle-wonders summary span { float:right;font-size:12px;font-weight:500;color:#d7e6f0; }
.battle-wonders p { font-size:12px;line-height:1.4;color:#d7e6f0;margin:10px 0; }
.battle-wonder-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:4px 0; }
.battle-wonder-item { position:relative;min-width:0;min-height:75px;padding:10px 2px 6px;border:1px solid #c7ad69;border-radius:12px;background:linear-gradient(#35566a,#152d40);color:#ffe6a0;overflow:visible; }
.battle-wonder-item>span { display:block;font-size:28px;line-height:1.25; }
.battle-wonder-item>small { display:block;font-size:10px;line-height:1.3;margin-top:5px; }
.battle-wonder-item>em { position:absolute;right:2px;top:2px;min-width:16px;border-radius:8px;background:#ffe39a;color:#182c39;font-size:11px;font-weight:800;font-style:normal;padding:0 2px; }
.battle-wonder-item:disabled { opacity:.45; }
.battle-wonder-item[hidden] { display:none; }
.wonder-shop-item { min-height:136px;height:auto!important; }
.wonder-shop-item strong { white-space:normal!important;line-height:1.2; }
.wonder-shop-item small { display:block!important;font-size:10px;line-height:1.3;color:#d7e6f0; }
.wonder-shop-item.wonder-locked { opacity:.6; }
.charm-reward-source { font-size:13px;color:#ffe6a0;line-height:1.4; }

/* v257: decoration floats over the victory card and never captures taps. */
.victory-fireworks-canvas { position:fixed;left:0;top:0;z-index:2147483100;pointer-events:none!important;touch-action:auto;contain:strict; }

/* v259 compact spell header and contained combat magic. */
#gameScreen .board-top {
  height:54px!important;min-height:54px!important;max-height:54px!important;
  padding:5px 9px!important;gap:6px!important;
}
#gameScreen .board-top h2 {font-size:clamp(16px,4.4vw,20px)!important;margin:2px 0 0!important;line-height:1.12!important;}
#gameScreen .board-top .eyebrow {font-size:9px!important;line-height:1.1!important;letter-spacing:1.5px!important;}
#gameScreen .cast-info {height:42px!important;min-height:0!important;max-height:42px!important;gap:0!important;justify-content:center!important;}
#gameScreen .cast-info span {font-size:10px!important;line-height:12px!important;}
#gameScreen .cast-info strong {font-size:13px!important;line-height:15px!important;}
#gameScreen .cast-info small {font-size:10px!important;line-height:12px!important;}
.battle-magic-comet,.battle-magic-charge,.battle-magic-ring {position:absolute;pointer-events:none!important;}
.battle-magic-comet {
  width:9px;height:9px;border-radius:50%;background:currentColor;
  box-shadow:0 0 5px 2px currentColor,0 0 13px currentColor;
  animation:battleMagicFlight 330ms ease-in both;
}
.battle-magic-charge,.battle-magic-ring {
  width:var(--blast-size);height:var(--blast-size);border-radius:50%;
  border:2px solid currentColor;box-shadow:0 0 7px 2px currentColor,inset 0 0 7px currentColor;
  animation:battleMagicBloom 520ms ease-out both;
}
.battle-magic-charge {animation-duration:260ms;opacity:.7;}
@keyframes battleMagicFlight {
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  20%{opacity:.95}
  85%{opacity:.85}
  100%{opacity:0;transform:translate(calc(var(--blast-x) - 50%),calc(var(--blast-y) - 50%)) scale(1.5)}
}
@keyframes battleMagicBloom {
  0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}
  20%{opacity:.85}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}
}
@media(prefers-reduced-motion:reduce){
  .battle-magic-comet,.battle-magic-charge,.battle-magic-ring {display:none!important;animation:none!important;}
}
#gameScreen .cast-info {display:flex!important;flex-direction:column!important;}
#gameScreen .cast-info .mix-status {display:block!important;min-height:0!important;padding:0!important;margin:0!important;}

/* v261: an accessible rescue beside the puzzle, with no full-screen modal. */
.board-rescue[hidden]{display:none!important;}
.board-rescue{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0;padding:9px;border:1px solid #d8bb6c;border-radius:14px;background:#153b50;color:#ffe6a2;}
.board-rescue b,.board-rescue small{display:block;line-height:1.25;}
.board-rescue b{font-size:13px;}.board-rescue small{font-size:11px;margin-top:3px;}
.board-rescue button{flex:0 0 auto;min-height:44px;max-width:45%;padding:7px 9px;border:1px solid #e6c76b;border-radius:10px;background:#294e6b;color:#fff0bb;font:inherit;font-size:12px;font-weight:700;cursor:pointer;}

/* v266 charm feedback is paint-only, within the existing battle window. */
.charm-feedback{position:absolute;top:4px;left:8px;right:8px;z-index:30;box-sizing:border-box;padding:4px 7px;border:1px solid #f3d473;border-radius:10px;background:#071f32ed;color:#fff0b5;font:600 10px/1.25 system-ui,sans-serif;pointer-events:none!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;box-shadow:0 0 9px #e6c65d55;animation:charmHelpAppear 200ms ease-out;}
.hero-image.charm-help-glow{box-shadow:0 0 8px 3px #ffe18a,0 0 15px #e6c65d!important;}
@keyframes charmHelpAppear{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.charm-feedback{animation:none!important;}.hero-image.charm-help-glow{box-shadow:0 0 5px #ffe18a!important;}}

/* v266 Storybook: actions stay within Safari's visible viewport. */
.map-sticky-tools{grid-template-columns:repeat(6,minmax(0,1fr)) !important;}
.story-tool-icon{display:block;font-size:36px;height:52px;line-height:52px;}
.story-reader{position:fixed;z-index:2147483200;top:var(--story-viewport-top,0px);left:0;width:100%;height:var(--story-viewport-height,100dvh);box-sizing:border-box;display:flex;flex-direction:column;background:#0b2335;color:#ffebb0;padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));}
.story-reader.hidden{display:none !important;}
.story-reader header,.story-reader footer{display:flex;align-items:center;gap:12px;flex-shrink:0;width:min(100%,780px);margin:0 auto;}
.story-reader header{padding-bottom:10px;border-bottom:1px solid #ae9558;}
.story-reader h2{flex:1;font-size:clamp(18px,4vw,28px);margin:0;}
.story-reader-content{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;width:min(100%,780px);margin:0 auto;padding:16px 0;}
.story-reader footer{padding-top:10px;border-top:1px solid #ae9558;}
.story-reader footer button{flex:1;min-height:48px;}
.story-reader button[hidden]{display:none !important;}
.story-reader header button{min-height:44px;}
.story-reader-art{display:block;width:100%;max-height:48vh;object-fit:contain;border-radius:16px;background:#071725;}
.story-reader-copy{font-size:clamp(18px,3.6vw,22px);line-height:1.6;color:#fff0c9;}
.story-reader-counter{font-size:13px;color:#dcc079;}
.story-reader-end{font-weight:bold;color:#ffda6b;line-height:1.5;}
.story-book-entry{display:flex;align-items:center;gap:12px;width:100%;padding:8px;margin:10px 0;color:#ffebb0;background:#17374e;border:1px solid #ae9558;border-radius:12px;text-align:left;}
.story-book-entry img{width:100px;height:70px;object-fit:cover;border-radius:8px;flex-shrink:0;}
.story-book-entry span{font-size:17px;line-height:1.3;}
.story-book-entry small{display:block;margin-top:5px;font-size:12px;color:#d4c18c;}
.story-reader button:focus-visible{outline:3px solid #ffe480;outline-offset:2px;}

/* v266 Boss warnings are outside the board and never intercept tracing. */
.boss-intent{margin:5px 0 8px;padding:8px 10px;border:1px solid var(--intent-color,#ffda70);border-radius:12px;background:#102e42;color:#fff0c9;line-height:1.35;}
.boss-intent[hidden]{display:none !important;}
.boss-intent strong{display:block;color:var(--intent-color);font-size:12px;}
.boss-intent span{display:block;font-size:11px;margin-top:3px;}
.cell.boss-target{outline:2px solid var(--intent-color,#ffdb75);outline-offset:-2px;}
.boss-mark{position:absolute;right:2px;top:1px;font-size:12px;z-index:7;pointer-events:none;filter:drop-shadow(0 0 3px var(--intent-color));}
.settings-voice-choice{display:block;width:100%;min-height:44px;margin:8px 0 12px;background:#133447;color:#fff0c9;border:1px solid #c3a557;border-radius:10px;padding:8px;}

/* v266 Settings: visible header, independently scrolling controls, Safari viewport. */
.settings-modal{inset:auto !important;left:0;top:var(--settings-top,0px);width:100%;height:var(--settings-height,100dvh);box-sizing:border-box;z-index:2147483300;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overflow:hidden;}
.settings-panel{display:flex;flex-direction:column;max-height:100%;min-height:0;box-sizing:border-box;overflow:hidden;padding:0 !important;}
.settings-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;padding:12px 14px;border-bottom:1px solid #a48a54;}
.settings-header h2{margin:3px 0 0;font-size:22px;}
.settings-close{position:static !important;flex-shrink:0;width:44px;height:44px;border:1px solid #d8bb70;border-radius:12px;font-size:28px;line-height:1;}
.settings-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:12px 14px 18px;}
.voice-preview-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.voice-preview-buttons button{min-height:44px;flex:1 1 120px;}

/* v268: lessons fit Safari's visible viewport; content scrolls above fixed actions. */
#wimbleGuide { inset:auto;top:var(--guide-top,0px);left:0;right:0;height:var(--guide-height,100svh); }
#wimbleGuide .guide-card { display:flex;flex-direction:column;overflow:hidden;max-height:calc(var(--guide-height,100svh) * .78);padding:0; }
#wimbleGuide .guide-body { overflow-y:auto;min-height:0;padding:12px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y; }
#wimbleGuide .guide-actions { position:static;flex-shrink:0;padding:8px 12px;flex-wrap:wrap; }
#wimbleGuide .guide-counter { color:#ffdc79;font-size:.76rem;margin:8px 0; }
#wimbleGuide .guide-menu { max-height:calc(var(--guide-height,100svh) * .85); }
#wimbleGuide.guide-compact .guide-card { padding:0;max-height:min(170px,calc(var(--guide-height,100svh) * .45)); }
#wimbleGuide.guide-compact .guide-body { padding:8px 10px; }
#wimbleGuide.guide-compact .guide-actions { padding:4px 10px 8px; }
/* Explicit edges override the older important inset reset on every screen. */
.settings-modal { position:fixed !important;left:0 !important;right:auto !important;top:var(--settings-top,0px) !important;bottom:auto !important; }

/* v272 stable center anchors and map editing */
.journey-map-card .journey-node[data-map-anchor="center"]{transform:translate(-50%,-50%) !important;transform-origin:center center !important;margin:0 !important;}
.map-edit-mode .journey-map-card .journey-node{transition:none !important;animation:none !important;touch-action:none !important;}
.map-edit-mode .journey-map-card .journey-node.map-node-dragging{transform:translate(-50%,-50%) scale(1.08) !important;}
.map-edit-mode .journey-node::after{content:'+';bottom:auto;top:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:.8;}

.map-edit-mode #mapScrollContent,.map-edit-mode .journey-map-card,.map-edit-mode .journey-map-overlay{overflow-anchor:none !important;}
.map-edit-mode .map-edit-readout{height:76px;min-height:76px;box-sizing:border-box;overflow:auto;}

/* v273: preserve the approved high Tempest Forge center without clipping its button. */
.stormbound-deep-map-card{overflow:visible !important;}
.stormbound-deep-map-card .journey-scene-img{border-radius:inherit;}

/* v274 page artwork: decoration only, no changes to mobile geometry or touch handling. */
@media (min-width:0px){
  body{--page-art:url("assets/world_bg.webp");}
  body[data-page-theme="shop"]{--page-art:url("assets/page-shop-v274.webp");}
  body[data-page-theme="loadout"]{--page-art:url("assets/page-bag-v274.webp");}
  body[data-page-theme="leaderboard"]{--page-art:url("assets/page-leaderboard-v274.webp");}
  body[data-page-theme="game"]{--page-art:var(--battle-page-art,url("assets/world_bg.webp"));}
  .bg-layer{z-index:0 !important;pointer-events:none; background-image:linear-gradient(rgba(4,15,25,.16),rgba(4,15,25,.36)),var(--page-art) !important;}
  .app-shell{position:relative;z-index:1;}
  #shopScreen .shop-shell,#loadoutScreen .bag-screen-inner,#leaderboardScreen .leaderboard-shell,#playerMenuScreen .player-shell{
    background-image:linear-gradient(rgba(6,22,36,.22),rgba(6,22,36,.38)),var(--page-art) !important;
    background-size:cover;background-position:center;border-radius:24px;
    box-shadow:0 18px 60px rgba(0,0,0,.28);
  }
  #gameScreen{background-image:linear-gradient(rgba(5,20,34,.24),rgba(5,20,34,.4)),var(--battle-page-art) !important;background-size:cover;background-position:center;border-radius:24px;}
  #settingsModal{background-image:linear-gradient(rgba(3,15,25,.4),rgba(3,15,25,.62)),url("assets/page-library-v274.webp") !important;background-size:cover;background-position:center;}
  #settingsModal .settings-panel{background:linear-gradient(rgba(6,24,39,.55),rgba(6,24,39,.68)) !important;}
  #storyReader{background-image:linear-gradient(rgba(3,15,25,.08),rgba(3,15,25,.18)),url("assets/page-library-v274.webp") !important;background-size:cover;background-position:center;}
  #storyReader .story-reader-content{background:rgba(5,20,34,.18);border-radius:18px;}
  #spellbookPanel,#wimbleGuide .guide-card{background-image:linear-gradient(rgba(6,22,36,.62),rgba(6,22,36,.72)),url("assets/page-library-v274.webp") !important;background-size:cover;background-position:center;}
  body[data-page-theme="game"] .modal,#levelIntro{background-image:linear-gradient(rgba(3,15,25,.66),rgba(3,15,25,.85)),var(--battle-page-art) !important;background-size:cover;background-position:center;}
}

/* v275: artwork visible on phones, with contrast localized to text. */
#shopScreen,#loadoutScreen,#leaderboardScreen,#playerMenuScreen{background-color:transparent !important;}
#storyReader .story-reader-copy,#storyReader .story-reader-end{background:rgba(5,20,34,.62);border-radius:12px;padding:12px;box-sizing:border-box;}
#storyReader header,#storyReader footer{background:rgba(5,20,34,.45);border-radius:12px;}
#shopScreen h1,#shopScreen h2,#loadoutScreen h1,#loadoutScreen h2,#leaderboardScreen h1,#leaderboardScreen h2,#playerMenuScreen h1,#playerMenuScreen h2{ text-shadow:0 2px 4px #041420,0 0 8px #041420;}
#wimbleGuide .guide-goals{list-style:none;padding:10px;margin:10px 0;border:1px solid #e7c76f;border-radius:12px;background:rgba(4,20,32,.65);}
#wimbleGuide .guide-goals li{display:flex;align-items:center;gap:10px;padding:5px 0;font-weight:700;}
#wimbleGuide .goal-box{width:18px;height:18px;flex:0 0 18px;border:2px solid #ffe08a;border-radius:4px;background:rgba(255,224,138,.08);}

/* v276 map area details: full artwork with readable storybook text. */
.map-details-overlay{box-sizing:border-box;}
.map-details-panel{width:min(100%,720px);min-height:min(540px,85svh);max-height:calc(100svh - 24px);border:1px solid #dfc47e;background:linear-gradient(180deg,rgba(4,17,29,.2) 0%,rgba(4,17,29,.05) 35%,rgba(4,17,29,.8) 100%),var(--map-details-art,url('assets/world_bg.webp')) center/cover no-repeat !important;}
.map-details-header{align-items:flex-start;background:linear-gradient(rgba(4,17,29,.55),transparent);padding:18px 16px 24px;}
.map-details-header h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(23px,5vw,36px);font-weight:700;line-height:1.15;letter-spacing:.01em;text-transform:none;color:#ffe3a0;text-shadow:0 2px 4px #081724,0 0 12px #081724;}
.map-details-header button{min-height:44px;}
.map-details-content{padding:clamp(100px,20svh,180px) 16px 18px;}
.map-details-content .map-story-card{border:0 !important;background:rgba(4,19,31,.48) !important;box-shadow:none !important;padding:14px !important;border-radius:14px;color:#fff1ce;text-shadow:0 1px 3px #061622;}
.map-details-content .map-story-card p{color:#fff1ce;line-height:1.5;}
.map-details-content .map-story-card strong{font-family:Georgia,'Times New Roman',serif;font-size:clamp(18px,3.5vw,23px);line-height:1.4;color:#ffe3a0;}
.map-details-content .map-story-copy,.map-details-content .map-story-rich{background:transparent !important;}
.map-details-content .map-story-card .eyebrow{background:none !important;border:0 !important;box-shadow:none !important;}
@media(max-height:500px){.map-details-panel{min-height:0;}.map-details-content{padding-top:20px;}}

/* v277: map labels match the ordered Adventure Map navigation. */
#mapScreen .journey-map-card[data-map-title]::before{content:attr(data-map-title) !important;white-space:normal !important;overflow-wrap:anywhere;font-size:clamp(13px,3vw,18px);line-height:1.2;}
.map-region-jump-strip .map-region-jump{white-space:normal;line-height:1.25;}

/* Keep the selected battle view stable when refreshed tiles replace DOM nodes. */
#gameScreen{overflow-anchor:none !important;}

/* v285: Storybook book shelf; scoped to Story modal only */
#storyReader .wimble-bookshelf{margin:26px 2px 14px;padding:20px 15px 18px;border:1px solid rgba(236,197,106,.65);border-radius:20px;background:linear-gradient(155deg,#26465a 0%,#15283d 58%,#102235 100%);box-shadow:inset 0 1px rgba(255,245,200,.16),0 10px 25px rgba(0,0,0,.18);color:#ffefcb;}
#storyReader .wimble-bookshelf-heading{text-align:center;}
#storyReader .wimble-bookshelf-eyebrow{display:block;font-weight:850;font-size:10px;letter-spacing:.22em;color:#e5c679;margin-bottom:5px;}
#storyReader .wimble-bookshelf h3{font-size:clamp(23px,5vw,33px);margin:2px 0 6px;color:#ffdc7d;}
#storyReader .wimble-bookshelf-heading p{font-size:14px;line-height:1.5;color:#e6e1d3;max-width:480px;margin:0 auto 18px;}
#storyReader .wimble-book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:15px 0 20px;}
#storyReader .wimble-book-tile{min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;background:rgba(255,244,209,.08);border:1px solid rgba(255,227,157,.22);border-radius:12px;padding:10px 5px 12px;}
#storyReader .wimble-book-mini-cover{height:77px;width:61px;display:grid;place-items:center;font-size:30px;background:linear-gradient(135deg,#b48a50,#f8d998 50%,#907046);border:3px double #fff1c3;border-radius:4px 9px 9px 4px;box-shadow:4px 5px 0 #091726,5px 7px 9px #060e18;margin-bottom:8px;}
#storyReader .wimble-book-tile span{font-size:10px;line-height:1.2;color:#dfc99a;}
#storyReader .wimble-book-tile strong{font-size:12px;line-height:1.25;color:#fff4db;overflow-wrap:anywhere;}
#storyReader .wimble-book-amazon{display:block;text-align:center;padding:13px 10px;background:linear-gradient(#f5d894,#dba850);border:2px solid #fff0bc;border-radius:12px;color:#263044!important;font-size:14px;font-weight:850;text-decoration:none;box-shadow:0 4px 0 #7e562a;}
#storyReader .wimble-book-amazon:focus-visible{outline:3px solid #fff;outline-offset:4px;}
#storyReader .wimble-bookshelf-author{text-align:center;color:#d6c6a1;font-size:11px;margin:13px 0 0;}
@media(max-width:420px){#storyReader .wimble-book-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* V293: noninteractive, lightweight Wild Magic lightning effect */
.wild-magic-lightning { animation:wildMagicFade .7s ease-out forwards; }
.wild-magic-bolt { filter:drop-shadow(0 0 5px #a8eaff); animation:wildBoltFlash .38s ease-in-out 2 alternate; }
.cell.wild-magic-charged { box-shadow:inset 0 0 0 3px #d7aaff, 0 0 18px #b9d0ff !important; filter:brightness(1.18); }
@keyframes wildMagicFade { 0%,55%{opacity:1} 100%{opacity:0} }
@keyframes wildBoltFlash { 0%{opacity:.25;stroke-width:1} 60%{opacity:1;stroke-width:5} 100%{opacity:.55;stroke-width:2} }
@media (prefers-reduced-motion:reduce){.wild-magic-lightning,.wild-magic-bolt{animation:none}.cell.wild-magic-charged{filter:none}}

/* V294: five signature Wild Magic accents */
.cell.wild-magic-effect-1{box-shadow:inset 0 0 0 3px #ffe096,0 0 17px #bd91ff!important}
.cell.wild-magic-effect-2{box-shadow:inset 0 0 0 3px #a7e9ff,0 0 22px #fafaff!important}
.cell.wild-magic-effect-3{box-shadow:inset 0 0 0 3px #b7ffac,0 0 18px #ffe99d!important}
.cell.wild-magic-effect-4{box-shadow:inset 0 0 0 3px #ffbaff,0 0 25px #85faff!important}

/* V297: bold, two-stage lightning. Reduced-motion uses visible static arcs. */
.wild-magic-v297{opacity:1!important;animation:none!important;mix-blend-mode:screen;}
.wild-magic-v297-bolt{filter:drop-shadow(0 0 8px currentColor);animation:wild297Pulse .43s ease-in-out infinite alternate;}
.wild-bolt-glow{opacity:.65;filter:blur(5px) drop-shadow(0 0 12px #b5f4ff)}
.wild-bolt-core{opacity:.96;filter:drop-shadow(0 0 11px #fff)}
.wild-bolt-hot{opacity:1;filter:drop-shadow(0 0 5px white)}
.wild-magic-v297-spark{opacity:.92;filter:drop-shadow(0 0 14px #fff);animation:wild297Spark .55s ease-in-out infinite alternate;}
.cell.wild-magic-charged{outline:3px solid #d7f8ff!important;outline-offset:-3px;filter:brightness(1.48) saturate(1.35)!important;box-shadow:inset 0 0 0 4px #a7f6ff,0 0 22px 5px #b490ff!important;animation:wild297Tile .2s ease-in-out infinite alternate!important;}
@keyframes wild297Pulse{from{opacity:.62}to{opacity:1}}
@keyframes wild297Spark{from{opacity:.5}to{opacity:1}}
@keyframes wild297Tile{from{filter:brightness(1.25)}to{filter:brightness(1.7)}}
@media (prefers-reduced-motion:reduce){.wild-magic-v297-bolt,.wild-magic-v297-spark,.cell.wild-magic-charged{animation:none!important}.wild-magic-v297{mix-blend-mode:normal}}

/* V299: prominent board-spanning Wild Magic arcs and impact field */
.wild-magic-v297{mix-blend-mode:normal!important;isolation:isolate}
.wild-magic-v297-bolt.wild-bolt-glow{opacity:.85;filter:blur(6px) drop-shadow(0 0 17px #b0e7ff)}
.wild-magic-v297-bolt.wild-bolt-core{opacity:1;filter:drop-shadow(0 0 12px #fff)}
.wild-magic-v297-bolt.wild-bolt-hot{opacity:1;filter:drop-shadow(0 0 7px white)}
.wild-v299-field{opacity:.12;animation:wild299FieldPulse .32s ease-in-out infinite alternate}
@keyframes wild299FieldPulse{from{opacity:.08}to{opacity:.23}}
@media(prefers-reduced-motion:reduce){.wild-v299-field{animation:none!important;opacity:.08}.wild-magic-v297-bolt{animation:none!important}}

/* V302: larger battle portraits without crowding health bars on phone widths. */
#gameScreen .hero-fighter{grid-template-columns:clamp(64px,18vw,84px) minmax(0,1fr)!important;}
#gameScreen .enemy-fighter{grid-template-columns:minmax(0,1fr) clamp(64px,18vw,84px)!important;}
#gameScreen .board-battle .fighter-image{width:clamp(64px,18vw,84px)!important;height:clamp(73px,20vw,94px)!important;}
#gameScreen .board-battle .fighter-image img{object-fit:contain!important;object-position:center bottom!important;}
@media(max-width:390px){#gameScreen .hero-fighter{grid-template-columns:60px minmax(0,1fr)!important;}#gameScreen .enemy-fighter{grid-template-columns:minmax(0,1fr) 60px!important;}#gameScreen .board-battle .fighter-image{width:60px!important;height:70px!important;}}


/* ===== v303 charm visual polish + Old Red reward rename ===== */
.signature-charm{overflow:visible}
.signature-charm::before{content:'RELIC'}
.charm-bag-slot .bag-charm-icon,
.equipped-charm-icon,
.charm-info-icon{
  position:relative;
  overflow:hidden;
}
.charm-bag-slot .bag-charm-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(255,228,145,.40);
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.24), transparent 28%),
    radial-gradient(circle at 70% 78%, rgba(255,214,97,.16), transparent 34%),
    linear-gradient(180deg, rgba(62,92,130,.92), rgba(20,42,71,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 6px 12px rgba(0,0,0,.24);
}
.charm-bag-slot.owned .bag-charm-icon{transform:translateY(-1px)}
.signature-charm .bag-charm-icon,
.equipped-charm-icon:not(.empty),
.charm-info-icon{
  border:2px solid rgba(255,223,117,.50);
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.26), transparent 24%),
    radial-gradient(circle at 68% 78%, rgba(255,224,113,.18), transparent 32%),
    linear-gradient(180deg, rgba(50,84,123,.96), rgba(14,34,60,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 8px 18px rgba(0,0,0,.24),
    0 0 16px rgba(255,214,93,.10);
}
/* key-specific artifact themes */
.charm-bag-slot[data-charm-key="homewardcrest"] .bag-charm-icon,
.equipped-charm-icon[data-charm-key="homewardcrest"],
.charm-info-icon[data-charm-key="homewardcrest"]{
  background:
    radial-gradient(circle at 35% 28%, rgba(255,244,189,.32), transparent 24%),
    radial-gradient(circle at 70% 74%, rgba(255,80,0,.24), transparent 36%),
    linear-gradient(180deg, rgba(130,34,24,.96), rgba(62,15,14,.99));
  border-color:rgba(255,196,104,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(0,0,0,.28), 0 0 20px rgba(255,111,0,.28);
}
.charm-bag-slot[data-charm-key="homewardcrest"] .bag-charm-icon::after,
.equipped-charm-icon[data-charm-key="homewardcrest"]::after,
.charm-info-icon[data-charm-key="homewardcrest"]::after{
  content:'';
  position:absolute;
  inset:6px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(255,130,60,.18), rgba(255,230,150,.08));
  pointer-events:none;
}
.charm-bag-slot[data-charm-key="spiraldoorkey"] .bag-charm-icon,
.equipped-charm-icon[data-charm-key="spiraldoorkey"],
.charm-info-icon[data-charm-key="spiraldoorkey"],
.charm-bag-slot[data-charm-key="riftheartkey"] .bag-charm-icon,
.equipped-charm-icon[data-charm-key="riftheartkey"],
.charm-info-icon[data-charm-key="riftheartkey"]{
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.26), transparent 24%), linear-gradient(180deg, rgba(104,78,31,.96), rgba(46,34,16,.98));
}
.charm-bag-slot[data-charm-key="thunderfeather"] .bag-charm-icon,
.equipped-charm-icon[data-charm-key="thunderfeather"],
.charm-info-icon[data-charm-key="thunderfeather"],
.charm-bag-slot[data-charm-key="stormglasssigil"] .bag-charm-icon,
.equipped-charm-icon[data-charm-key="stormglasssigil"],
.charm-info-icon[data-charm-key="stormglasssigil"],
.charm-bag-slot[data-charm-key="tempestcore"] .bag-charm-icon,
.equipped-charm-icon[data-charm-key="tempestcore"],
.charm-info-icon[data-charm-key="tempestcore"]{
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.28), transparent 24%), linear-gradient(180deg, rgba(73,86,152,.96), rgba(26,33,75,.99));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 8px 18px rgba(0,0,0,.24), 0 0 18px rgba(95,122,255,.22);
}
.charm-bag-slot[data-charm-key="lakepearl"] .bag-charm-icon,
.equipped-charm-icon[data-charm-key="lakepearl"],
.charm-info-icon[data-charm-key="lakepearl"],
.charm-bag-slot[data-charm-key="pearlheart"] .bag-charm-icon,
.equipped-charm-icon[data-charm-key="pearlheart"],
.charm-info-icon[data-charm-key="pearlheart"],
.charm-bag-slot[data-charm-key="bubblemedallion"] .bag-charm-icon,
.equipped-charm-icon[data-charm-key="bubblemedallion"],
.charm-info-icon[data-charm-key="bubblemedallion"]{
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.32), transparent 24%), linear-gradient(180deg, rgba(72,130,164,.96), rgba(17,64,87,.99));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px rgba(0,0,0,.24), 0 0 18px rgba(91,203,255,.22);
}
.charm-bag-slot[data-charm-key="snowmanscarf"] .bag-charm-icon,
.equipped-charm-icon[data-charm-key="snowmanscarf"],
.charm-info-icon[data-charm-key="snowmanscarf"],
.charm-bag-slot[data-charm-key="frostfireheart"] .bag-charm-icon,
.equipped-charm-icon[data-charm-key="frostfireheart"],
.charm-info-icon[data-charm-key="frostfireheart"]{
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.34), transparent 24%), linear-gradient(180deg, rgba(119,164,190,.96), rgba(37,75,100,.99));
}
.charm-bag-slot[data-charm-key="heartwoodcharm"] .bag-charm-icon,
.equipped-charm-icon[data-charm-key="heartwoodcharm"],
.charm-info-icon[data-charm-key="heartwoodcharm"],
.charm-bag-slot[data-charm-key="gardengatecharm"] .bag-charm-icon,
.equipped-charm-icon[data-charm-key="gardengatecharm"],
.charm-info-icon[data-charm-key="gardengatecharm"],
.charm-bag-slot[data-charm-key="gnometreelantern"] .bag-charm-icon,
.equipped-charm-icon[data-charm-key="gnometreelantern"],
.charm-info-icon[data-charm-key="gnometreelantern"],
.charm-bag-slot[data-charm-key="evergreenlantern"] .bag-charm-icon,
.equipped-charm-icon[data-charm-key="evergreenlantern"],
.charm-info-icon[data-charm-key="evergreenlantern"]{
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.28), transparent 24%), linear-gradient(180deg, rgba(72,116,75,.96), rgba(28,62,34,.99));
}
.equipped-charm-icon[data-charm-key]:not(.empty){font-size:2.4rem}
.charm-info-icon[data-charm-key]{font-size:2.1rem}

/* V304 iOS volume controls: allow native horizontal range dragging inside Settings scroll. */
#settingsModal input.settings-slider{display:block;width:100%;min-height:34px;height:34px;touch-action:pan-x;pointer-events:auto;position:relative;z-index:2;accent-color:#efc95a;cursor:pointer;}
#settingsModal input.settings-slider::-webkit-slider-thumb{cursor:grab;}

/* V309 Save transfer UI: accessible on Safari and installed app */
.save-transfer-card{margin:14px 0;padding:13px;border:1px solid rgba(241,211,119,.45);border-radius:14px;background:linear-gradient(165deg,rgba(34,59,89,.98),rgba(23,39,65,.98));color:#f7e9c4}
.save-transfer-card>strong{display:block;font-size:1.05rem;margin-bottom:6px}
.save-transfer-card p{font-size:.82rem;line-height:1.4;margin:5px 0 9px}
.save-transfer-actions{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 12px}
.save-transfer-actions button{flex:1 1 115px;min-width:0}
.save-transfer-card label{display:block;font-size:.75rem;font-weight:700;margin-bottom:5px}
#saveTransferText{display:block;width:100%;max-width:100%;box-sizing:border-box;min-height:94px;resize:vertical;touch-action:pan-y;color:#11243a;background:#fff;border:2px solid #dec888;border-radius:9px;font:12px/1.35 ui-monospace,SFMono-Regular,monospace;padding:9px;user-select:text;-webkit-user-select:text}
#saveTransferStatus{overflow-wrap:anywhere}


/* V310: board-region artwork skin. Tile grid sizes remain controlled by JS. */
#gameScreen .board-wrap.board-theme-active{
  background-image:linear-gradient(rgba(4,12,22,.10),rgba(4,12,22,.22)),var(--board-theme-image) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  border:2px solid rgba(245,209,126,.72) !important;
  box-shadow:inset 0 0 0 2px rgba(14,24,42,.60),0 0 14px rgba(255,201,101,.16);
}
#gameScreen .board-wrap.board-theme-active #board{
  position:relative;
  z-index:1;
  border-radius:9px;
  background:rgba(6,17,31,.54) !important;
}
#gameScreen .board-wrap.board-theme-active #board > .cell{
  /* Opaque slots hide decorative 8x8 marks in source art for 6x6/7x7 boards. */
  isolation:isolate;
}
#gameScreen .board-wrap.board-theme-active #boardFx{z-index:4}
#gameScreen .board-wrap.board-theme-active #wildMagicNameplate{z-index:5}


/* V311: reserve a visible illustrated rim, rather than hiding theme art under opaque cells.
   No tile geometry, blockers, board dimensions, or pointer-event behavior is modified. */
#gameScreen .board-wrap.board-theme-active{
  position:relative;
  box-sizing:border-box;
  padding:45px 14px 16px !important;
  background-image:linear-gradient(to bottom,rgba(5,15,23,.05),rgba(6,14,24,.24)), var(--board-theme-image) !important;
  background-size:100% 100% !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  border:3px solid rgba(244,211,129,.85) !important;
  border-radius:20px !important;
  box-shadow:0 0 0 2px rgba(22,40,54,.90),0 6px 22px rgba(0,0,0,.34),inset 0 0 14px rgba(253,221,145,.24) !important;
}
#gameScreen .board-wrap.board-theme-active .board-theme-title{
  position:absolute;
  top:7px;left:12px;right:12px;
  display:flex;align-items:center;justify-content:center;
  min-height:27px;
  color:#fff4c8;
  font-weight:900;font-size:clamp(12px,3.7vw,18px);
  text-align:center;line-height:1.2;
  letter-spacing:.045em;
  text-shadow:0 2px 5px #07111d,0 0 9px #07111d,0 0 13px #07111d;
  pointer-events:none;
  z-index:3;
}
#gameScreen .board-wrap:not(.board-theme-active) .board-theme-title{display:none}
#gameScreen .board-wrap.board-theme-active #board{
  background:rgba(4,11,19,.80) !important;
  border:2px solid rgba(252,229,160,.46);
  box-shadow:0 0 0 2px rgba(10,26,39,.70),0 4px 12px rgba(0,0,0,.4);
  isolation:isolate;
}
@media(max-width:400px){
 #gameScreen .board-wrap.board-theme-active{padding:39px 10px 11px !important}
 #gameScreen .board-wrap.board-theme-active .board-theme-title{top:5px;min-height:25px}
}


/* V312: use the active map art behind the fight panel so the battle scene matches the current region. */
#gameScreen .board-battle{
  background-image:linear-gradient(90deg,rgba(10,28,45,.60),rgba(10,28,45,.18) 48%,rgba(32,20,18,.52)),var(--battle-page-art) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  border:1px solid rgba(246,219,140,.32) !important;
  box-shadow:inset 0 0 0 1px rgba(14,22,34,.24),0 6px 16px rgba(0,0,0,.22);
}


/* V324: precise outer-frame fit and accessible Wendy toggle.
   Inner cards are inset inside the board-panel border, not stretched against it. */
#gameScreen .board-panel{
  padding:10px 12px !important;
  min-width:0 !important;
  overflow:hidden !important;
}
#gameScreen .board-panel > .board-top,
#gameScreen .board-panel > .board-battle,
#gameScreen .board-panel > .boss-intent,
#gameScreen .board-panel > .board-rescue,
#gameScreen .board-panel > #battleWonders,
#gameScreen .board-panel > .board-wrap,
#gameScreen .board-panel > .spell-tip{
  width:calc(100% - 8px) !important;
  max-width:calc(100% - 8px) !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
#gameScreen .board-panel > .board-top,
#gameScreen .board-panel > .board-battle,
#gameScreen .board-panel > #battleWonders{overflow:hidden !important;}


#gameScreen #battleWonders > summary{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:9px !important;
  min-height:48px !important;
  padding:8px 13px !important;
  cursor:pointer !important;
  list-style:none !important;
  -webkit-tap-highlight-color:transparent;
}
#gameScreen #battleWonders > summary::-webkit-details-marker{display:none !important;}
#gameScreen #battleWonders > summary::marker{content:"";font-size:0;}
#gameScreen #battleWonders > summary::before{
  content:"";
  display:block !important;
  flex:0 0 13px !important;
  width:13px !important;
  height:13px !important;
  border-right:3px solid #fff2c7 !important;
  border-bottom:3px solid #fff2c7 !important;
  transform:rotate(-45deg);
  transition:transform .17s ease;
  margin:0 5px 0 2px !important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
#gameScreen #battleWonders[open] > summary::before{transform:rotate(45deg);}
#gameScreen #battleWonders > summary span{margin-left:auto !important;}
@media (max-width:620px){
 #gameScreen .board-panel{padding:8px 10px !important;}
 #gameScreen .board-panel > .board-top,
 #gameScreen .board-panel > .board-battle,
 #gameScreen .board-panel > .boss-intent,
 #gameScreen .board-panel > .board-rescue,
 #gameScreen .board-panel > #battleWonders,
 #gameScreen .board-panel > .board-wrap,
 #gameScreen .board-panel > .spell-tip{
   width:calc(100% - 6px) !important;
   max-width:calc(100% - 6px) !important;
 }
 #gameScreen #battleWonders > summary{min-height:45px !important;padding:7px 10px !important;}
}

/* V327: single authoritative Battle Bag layout. Older layout rules above
   conflict (fixed grid rows, height caps, and responsive display changes).
   Explicitly restore the two-row label + seven-button grid. */
#gameScreen .board-panel > #battleBagBar {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  grid-auto-flow:row !important;
  align-items:stretch !important;
  align-content:start !important;
  width:calc(100% - 8px) !important;
  max-width:calc(100% - 8px) !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:8px 10px 10px !important;
  margin:7px auto 9px !important;
  gap:8px !important;
  overflow:visible !important;
  contain:none !important;
  box-sizing:border-box !important;
}
#gameScreen .board-panel > #battleBagBar > .battle-bag-label{
  grid-column:1 !important;
  grid-row:1 !important;
  display:flex !important;
  flex-direction:row !important;
  justify-content:center !important;
  align-items:center !important;
  align-self:stretch !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:20px !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  gap:6px !important;
  overflow:visible !important;
}
#gameScreen .board-panel > #battleBagBar > .battle-bag-label b{
  font-size:.75rem !important;
  white-space:nowrap !important;
  line-height:1.15 !important;
}
#gameScreen .board-panel > #battleBagBar > .battle-bag-actions{
  grid-column:1 !important;
  grid-row:2 !important;
  display:grid !important;
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  grid-template-rows:54px !important;
  grid-auto-flow:column !important;
  align-self:stretch !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:54px !important;
  min-height:54px !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  gap:4px !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
#gameScreen .board-panel > #battleBagBar > .battle-bag-actions > .battle-bag-item {
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  justify-self:stretch !important;
  align-self:stretch !important;
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:54px !important;
  min-height:54px !important;
  max-height:54px !important;
  margin:0 !important;
  padding:5px 1px 3px !important;
  gap:3px !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
#gameScreen .board-panel > #battleBagBar .battle-bag-item > span{
  display:block !important;
  flex:none !important;
  width:100% !important;
  height:auto !important;
  font-size:1.12rem !important;
  line-height:1.15 !important;
  text-align:center !important;
}
#gameScreen .board-panel > #battleBagBar .battle-bag-item > small{
  display:block !important;
  flex:none !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  font-size:clamp(6px,1.6vw,9px) !important;
  line-height:1.1 !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#gameScreen .board-panel > #battleBagBar .battle-bag-item > em{
  top:-3px !important;
  right:-2px !important;
  min-width:16px !important;
  height:16px !important;
  padding:0 2px !important;
  font-size:9px !important;
  line-height:15px !important;
  z-index:4 !important;
}
@media(max-width:420px){
  #gameScreen .board-panel > #battleBagBar {
    width:calc(100% - 6px) !important;
    max-width:calc(100% - 6px) !important;
    padding:7px 6px 9px !important;
    gap:6px !important;
  }
  #gameScreen .board-panel > #battleBagBar > .battle-bag-actions{
    grid-template-rows:51px !important;
    height:51px !important;
    min-height:51px !important;
    gap:3px !important;
  }
  #gameScreen .board-panel > #battleBagBar > .battle-bag-actions > .battle-bag-item{
    height:51px !important;
    min-height:51px !important;
    max-height:51px !important;
  }
}

/* V328: Legible, full-width Battle Bag item controls. Keep the original seven-across order. */
#gameScreen .board-panel > #battleBagBar{
  grid-template-rows:auto 62px !important;
  gap:7px !important;
  padding:9px 8px 10px !important;
}
#gameScreen .board-panel > #battleBagBar > .battle-bag-actions{
  height:62px !important;
  min-height:62px !important;
  grid-template-rows:62px !important;
  grid-auto-flow:row !important;
  gap:4px !important;
  overflow:visible !important;
}
#gameScreen .board-panel > #battleBagBar > .battle-bag-actions > .battle-bag-item{
  height:62px !important;
  min-height:62px !important;
  max-height:62px !important;
  border-radius:10px !important;
  padding:6px 1px 5px !important;
  gap:4px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 2px 5px rgba(0,0,0,.16) !important;
}
#gameScreen .board-panel > #battleBagBar .battle-bag-item > span{
  font-size:1.35rem !important;
  line-height:1.1 !important;
  height:auto !important;
}
#gameScreen .board-panel > #battleBagBar .battle-bag-item > small{
  font-size:clamp(7px,1.85vw,10px) !important;
  line-height:1.1 !important;
  color:#fff4d5 !important;
}
#gameScreen .board-panel > #battleBagBar .battle-bag-item > em{
  min-width:18px !important;
  height:18px !important;
  line-height:17px !important;
  font-size:10px !important;
  top:-5px !important;
  right:-3px !important;
}
@media(max-width:420px){
  #gameScreen .board-panel > #battleBagBar{grid-template-rows:auto 58px !important;}
  #gameScreen .board-panel > #battleBagBar > .battle-bag-actions{
    grid-template-rows:58px !important;
    height:58px !important;
    min-height:58px !important;
    gap:3px !important;
  }
  #gameScreen .board-panel > #battleBagBar > .battle-bag-actions > .battle-bag-item{
    height:58px !important;
    min-height:58px !important;
    max-height:58px !important;
    padding:5px 0 4px !important;
  }
  #gameScreen .board-panel > #battleBagBar .battle-bag-item > span{font-size:1.23rem !important;}
  #gameScreen .board-panel > #battleBagBar .battle-bag-item > small{font-size:7px !important;}
}


/* ===== V329 screen-fit polish =====
   Goal: keep the puzzle board large, preserve readable battle portraits/icons,
   and recover vertical space above the board so the Battle Bag and top of the
   tile board are both visible on iPhone Safari. */
#gameScreen{gap:6px!important;}

/* Slim top header without hurting readability. */
#gameScreen .hud{
  padding:8px 48px 8px 9px !important;
  gap:6px !important;
  border-radius:20px !important;
  margin-bottom:4px !important;
}
#gameScreen .hud .brand-title{font-size:clamp(12px,3.55vw,18px)!important;line-height:1.08!important;}
#gameScreen .hud .brand-sub{font-size:clamp(10px,2.65vw,12px)!important;line-height:1.1!important;}
#gameScreen .hud-stats{gap:4px!important;}
#gameScreen .hud-chip{padding:4px 5px !important;min-width:64px!important;border-radius:14px!important;}
#gameScreen .hud-chip span{font-size:.50rem!important;line-height:1.05!important;}
#gameScreen .hud-chip strong{font-size:.93rem!important;line-height:1.06!important;}

/* Tighten the action row slightly. */
#gameScreen .game-quickbar{gap:5px!important;margin-top:0!important;}
#gameScreen .quickbar-btn{
  min-height:40px !important;
  padding:4px 3px !important;
  border-radius:14px !important;
  gap:2px !important;
}
#gameScreen .quickbar-btn span{font-size:.57rem!important;line-height:1.02!important;}

/* Keep everything inside the board panel border while trimming wasted padding. */
#gameScreen .board-panel{padding:8px 10px!important;}
#gameScreen .board-panel > .board-top,
#gameScreen .board-panel > .board-battle,
#gameScreen .board-panel > .boss-intent,
#gameScreen .board-panel > .board-rescue,
#gameScreen .board-panel > #battleWonders,
#gameScreen .board-panel > #battleBagBar,
#gameScreen .board-panel > .board-wrap,
#gameScreen .board-panel > .spell-tip{
  width:calc(100% - 6px)!important;
  max-width:calc(100% - 6px)!important;
}

/* Wendy summary stays readable, but uses less height. */
#gameScreen #battleWonders{margin:6px 0!important;}
#gameScreen #battleWonders > summary{
  min-height:42px !important;
  padding:6px 10px !important;
  gap:8px !important;
}
#gameScreen #battleWonders > summary::before{
  flex:0 0 14px !important;
  width:14px !important;
  height:14px !important;
  border-right:3px solid #fff2c7 !important;
  border-bottom:3px solid #fff2c7 !important;
  margin:0 4px 0 1px !important;
}
#gameScreen #battleWonders summary span{font-size:.95rem!important;}

/* Compact, readable Battle Bag. */
#gameScreen .board-panel > #battleBagBar{
  grid-template-rows:auto 54px !important;
  padding:6px 6px 8px !important;
  margin:6px auto 8px !important;
  gap:5px !important;
  border-radius:18px !important;
}
#gameScreen .board-panel > #battleBagBar > .battle-bag-label{min-height:18px!important;gap:5px!important;}
#gameScreen .board-panel > #battleBagBar > .battle-bag-label span{font-size:1rem!important;}
#gameScreen .board-panel > #battleBagBar > .battle-bag-label b{font-size:.72rem!important;line-height:1.08!important;}
#gameScreen .board-panel > #battleBagBar > .battle-bag-actions{
  grid-template-rows:54px !important;
  height:54px !important;
  min-height:54px !important;
  gap:4px !important;
}
#gameScreen .board-panel > #battleBagBar > .battle-bag-actions > .battle-bag-item{
  height:54px !important;
  min-height:54px !important;
  max-height:54px !important;
  padding:4px 1px 3px !important;
  gap:2px !important;
  border-radius:10px !important;
}
#gameScreen .board-panel > #battleBagBar .battle-bag-item > span{font-size:1.12rem!important;line-height:1.06!important;}
#gameScreen .board-panel > #battleBagBar .battle-bag-item > small{font-size:clamp(6px,1.65vw,8px)!important;line-height:1.02!important;}
#gameScreen .board-panel > #battleBagBar .battle-bag-item > em{min-width:16px!important;height:16px!important;line-height:15px!important;font-size:9px!important;top:-4px!important;right:-2px!important;}

/* The spell-board heading should be concise and dense. */
#gameScreen .board-top{
  padding:6px 10px !important;
  margin-bottom:6px !important;
  min-height:0 !important;
  align-items:center !important;
}
#gameScreen .board-top .eyebrow{font-size:.50rem!important;letter-spacing:.16em!important;margin-bottom:1px!important;}
#gameScreen .board-top h2{font-size:1.1rem!important;line-height:1.02!important;margin:0!important;}
#gameScreen .cast-info{display:flex!important;flex-direction:column!important;align-items:flex-end!important;justify-content:center!important;gap:0!important;text-align:right!important;}
#gameScreen .cast-info span{font-size:.62rem!important;line-height:1.04!important;}
#gameScreen .cast-info strong{font-size:.95rem!important;line-height:1.04!important;}
#gameScreen .cast-info .mix-status{font-size:.58rem!important;line-height:1.04!important;max-width:176px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}

/* Keep the battle panel readable, but shave padding and decorative space. */
#gameScreen .board-battle{
  padding:8px !important;
  margin-bottom:6px !important;
  border-radius:18px !important;
  grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr)!important;
  gap:4px!important;
}
#gameScreen .board-fighter{gap:6px!important;}
#gameScreen .fighter-image{width:50px!important;height:56px!important;border-radius:16px!important;}
#gameScreen .fighter-copy{gap:3px!important;}
#gameScreen .fighter-copy .eyebrow{font-size:.54rem!important;line-height:1.02!important;}
#gameScreen .fighter-copy strong{font-size:.72rem!important;line-height:1.05!important;}
#gameScreen .fighter-companions{gap:4px!important;}
#gameScreen .companion-mini{width:18px!important;height:18px!important;}
#gameScreen .board-battle-center{font-size:.64rem!important;min-width:0!important;}

#gameScreen .boss-intent{margin-top:2px!important;margin-bottom:4px!important;padding:7px 9px!important;}
#gameScreen .board-wrap{padding:7px!important;}
#gameScreen .spell-tip{margin-top:6px!important;padding:7px 10px!important;font-size:.70rem!important;}

/* Small iPhones get a slightly tighter version, but the battle panel remains readable. */
@media (max-width:420px){
  #gameScreen .hud{padding:7px 44px 7px 8px!important;}
  #gameScreen .hud-chip{padding:4px 4px!important;}
  #gameScreen .hud-chip strong{font-size:.88rem!important;}
  #gameScreen .quickbar-btn{min-height:38px!important;padding:4px 2px!important;}
  #gameScreen .quickbar-btn span{font-size:.54rem!important;}
  #gameScreen .board-panel{padding:7px 8px!important;}
  #gameScreen #battleWonders > summary{min-height:40px!important;padding:6px 9px!important;}
  #gameScreen .board-panel > #battleBagBar{grid-template-rows:auto 50px!important;padding:5px 5px 7px!important;gap:4px!important;}
  #gameScreen .board-panel > #battleBagBar > .battle-bag-actions{grid-template-rows:50px!important;height:50px!important;min-height:50px!important;gap:3px!important;}
  #gameScreen .board-panel > #battleBagBar > .battle-bag-actions > .battle-bag-item{height:50px!important;min-height:50px!important;max-height:50px!important;padding:4px 0 3px!important;}
  #gameScreen .board-panel > #battleBagBar .battle-bag-item > span{font-size:1.02rem!important;}
  #gameScreen .board-panel > #battleBagBar .battle-bag-item > small{font-size:6px!important;}
  #gameScreen .board-top{padding:5px 8px!important;}
  #gameScreen .board-top h2{font-size:1.02rem!important;}
  #gameScreen .cast-info span{font-size:.58rem!important;}
  #gameScreen .cast-info strong{font-size:.88rem!important;}
  #gameScreen .cast-info .mix-status{font-size:.56rem!important;max-width:150px!important;}
  #gameScreen .board-battle{padding:7px!important;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)!important;}
  #gameScreen .fighter-image{width:47px!important;height:53px!important;}
  #gameScreen .fighter-copy strong{font-size:.68rem!important;}
}


/* V330: actual HEADER HEIGHT fix. Override v223 fixed height/min/max rules.
   DO NOT shrink the battle portraits, bag buttons, or tile geometry. */
@media (max-width:700px), (orientation:portrait){
  #gameScreen .hud{
    height:59px !important; min-height:59px !important; max-height:59px !important;
    padding:5px 49px 5px 8px !important; gap:4px !important;
    display:flex !important; flex-wrap:nowrap !important; align-items:center !important;
  }
  #gameScreen .brand{flex:1 1 auto !important;min-width:0 !important;}
  #gameScreen .brand-title{font-size:clamp(12px,3.4vw,16px) !important;line-height:1.05 !important;margin:0 !important;}
  #gameScreen .brand-sub{font-size:10px !important;line-height:1.1 !important;margin:2px 0 0 !important;}
  #gameScreen .hud-stats{display:flex !important;flex:0 1 auto !important;width:auto !important;gap:3px !important;}
  #gameScreen .hud-chip{min-width:0 !important;width:clamp(45px,13vw,62px) !important;padding:3px 2px !important;border-radius:10px !important;}
  #gameScreen .hud-chip span{font-size:8px !important;line-height:1 !important;letter-spacing:0 !important;}
  #gameScreen .hud-chip strong{display:block !important;font-size:13px !important;line-height:1.1 !important;}
  #gameScreen .game-quickbar{height:46px !important;min-height:46px !important;max-height:46px !important;padding:3px !important;gap:4px !important;}
  #gameScreen .quickbar-btn{height:38px !important;min-height:38px !important;max-height:38px !important;padding:2px 2px !important;gap:0 !important;}
  #gameScreen .board-top{
    height:46px !important; min-height:46px !important; max-height:46px !important;
    padding:4px 9px !important; margin-bottom:5px !important;
    display:flex !important; align-items:center !important; overflow:hidden !important;
  }
  #gameScreen .board-top .eyebrow{display:none !important;}
  #gameScreen .board-top h2{font-size:clamp(14px,4vw,17px) !important;margin:0 !important;line-height:1 !important;}
  #gameScreen .cast-info{height:auto !important;min-height:0 !important;max-height:42px !important;min-width:0 !important;gap:1px !important;}
  #gameScreen .cast-info span{font-size:10px !important;line-height:1.08 !important;}
  #gameScreen .cast-info strong{font-size:12px !important;line-height:1.08 !important;}
  #gameScreen .cast-info .mix-status{display:none !important;}
  /* Board topper uses vertical space too: preserve title, trim only excess padding. */
  #gameScreen .board-wrap.board-theme-active{padding-top:57px !important;}
  #gameScreen .board-wrap.board-theme-active::before{height:73px !important;}
  #gameScreen .board-wrap.board-theme-active .board-theme-title{top:6px !important;max-height:43px !important;}
}
@media(max-width:375px){
  #gameScreen .hud{padding-right:44px !important;}
  #gameScreen .hud-chip{width:44px !important;}
  #gameScreen .brand-title{font-size:12px !important;}
}


/* v331: restore large, readable fighter portraits without increasing battle card height. */
#gameScreen .board-battle .hero-fighter{
  grid-template-columns:70px minmax(0,1fr) !important;
  gap:5px !important;
}
#gameScreen .board-battle .enemy-fighter{
  grid-template-columns:minmax(0,1fr) 70px !important;
  gap:5px !important;
}
#gameScreen .board-battle .fighter-image{
  width:70px !important;
  height:79px !important;
  min-width:0 !important;
  flex:none !important;
  border-radius:13px !important;
}
#gameScreen .board-battle #boardHeroImg{
  width:100% !important;height:100% !important;
  object-fit:cover !important;
  object-position:center 28% !important;
  transform:scale(1.28) !important;
}
#gameScreen .board-battle #boardEnemyImg{
  width:100% !important;height:100% !important;
  object-fit:cover !important;
  object-position:center 28% !important;
  transform:scale(1.16) !important;
}
#gameScreen .board-battle .fighter-copy{min-width:0 !important;}
@media(max-width:375px){
  #gameScreen .board-battle .hero-fighter{grid-template-columns:65px minmax(0,1fr) !important;}
  #gameScreen .board-battle .enemy-fighter{grid-template-columns:minmax(0,1fr) 65px !important;}
  #gameScreen .board-battle .fighter-image{width:65px !important;height:74px !important;}
}

/* v332: cast your spell charge meter with compact glowing progress UI */
#gameScreen .cast-charge-panel{
  display:grid !important;
  grid-template-columns:minmax(118px, 136px) minmax(0, 1fr) !important;
  align-items:center !important;
  gap:10px !important;
  padding:8px 12px !important;
  min-height:70px !important;
}
#gameScreen .cast-heading{min-width:0;}
#gameScreen .cast-heading .eyebrow{font-size:.56rem !important; line-height:1 !important; margin-bottom:2px !important;}
#gameScreen .cast-heading h2{font-size:clamp(14px,4.7vw,18px) !important; line-height:1.06 !important; margin:0 !important;}
#gameScreen .cast-charge-info{
  display:grid !important;
  grid-template-rows:auto auto auto auto;
  gap:3px !important;
  min-width:0 !important;
  text-align:left !important;
}
#gameScreen .cast-charge-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}
#gameScreen .cast-charge-head span,
#gameScreen .cast-charge-head strong{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#gameScreen .cast-charge-head span{font-size:.67rem !important; color:#f0e1b1 !important;}
#gameScreen .cast-charge-head strong{font-size:.84rem !important; color:#fff0b8 !important;}
#gameScreen .cast-charge-meter{
  position:relative;
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(5,12,22,.88), rgba(15,26,44,.94));
  border:1px solid rgba(236,206,104,.34);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.04);
}
#gameScreen .cast-charge-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, #62d5ff 0%, #8f82ff 42%, #ffd561 100%);
  box-shadow:0 0 10px rgba(108,209,255,.35), 0 0 18px rgba(255,213,97,.2);
  transition:width .18s ease, box-shadow .18s ease, filter .18s ease;
}
#gameScreen .cast-charge-glow{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
}
#gameScreen .cast-charge-meter.tier-1 .cast-charge-fill{box-shadow:0 0 12px rgba(108,209,255,.42), 0 0 18px rgba(255,213,97,.22);}
#gameScreen .cast-charge-meter.tier-2 .cast-charge-fill{box-shadow:0 0 14px rgba(122,144,255,.56), 0 0 22px rgba(255,213,97,.28); filter:saturate(1.08);}
#gameScreen .cast-charge-meter.tier-3 .cast-charge-fill{box-shadow:0 0 16px rgba(164,115,255,.6), 0 0 26px rgba(255,213,97,.34); filter:saturate(1.16) brightness(1.04);}
#gameScreen .cast-charge-meter.tier-4 .cast-charge-fill,
#gameScreen .cast-charge-meter.charged .cast-charge-fill{box-shadow:0 0 18px rgba(176,126,255,.72), 0 0 30px rgba(255,222,115,.46); filter:saturate(1.22) brightness(1.08); animation:castChargePulse .95s ease-in-out infinite alternate;}
@keyframes castChargePulse{
  from{transform:scaleY(1); opacity:.96;}
  to{transform:scaleY(1.03); opacity:1;}
}
#gameScreen .cast-spell-name{
  display:block !important;
  font-size:.84rem !important;
  line-height:1.08 !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#gameScreen #mixStatus{
  display:block !important;
  font-size:.67rem !important;
  line-height:1.05 !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:0 !important;
}
@media (max-width: 420px){
  #gameScreen .cast-charge-panel{grid-template-columns:minmax(102px,118px) minmax(0,1fr) !important; gap:8px !important; padding:7px 10px !important; min-height:66px !important;}
  #gameScreen .cast-heading h2{font-size:15px !important;}
  #gameScreen .cast-charge-head span{font-size:.62rem !important;}
  #gameScreen .cast-charge-head strong{font-size:.8rem !important;}
  #gameScreen .cast-spell-name{font-size:.8rem !important;}
  #gameScreen #mixStatus{font-size:.62rem !important;}
}

/* V336: restore battle projectile canvas above scene artwork/portrait cards. */
#gameScreen .board-battle{position:relative!important; isolation:isolate;}
#gameScreen .board-battle > #boardFightFx{
  position:absolute!important;inset:0!important; width:100%!important;height:100%!important;
  z-index:30!important;pointer-events:none!important;overflow:hidden!important;
  transform:none!important; margin:0!important;padding:0!important;
}
#gameScreen .board-battle > .board-fighter,
#gameScreen .board-battle > .board-battle-center{position:relative!important;z-index:2!important;}
#gameScreen .board-fight-fx .fight-bolt,
#gameScreen .board-fight-fx .battle-magic-comet,
#gameScreen .board-fight-fx .battle-magic-particle,
#gameScreen .board-fight-fx .fight-spark{
  position:absolute!important; z-index:31!important;visibility:visible!important;
}
#gameScreen .board-fight-fx .fight-bolt{min-height:6px!important;opacity:1;filter:drop-shadow(0 0 7px currentColor);}
/* Make the spell charge area compact while preserving the indicator and name. */
#gameScreen .board-top.cast-charge-panel{
  box-sizing:border-box!important;height:53px!important;min-height:53px!important;
  max-height:53px!important;padding:4px 10px!important;gap:8px!important;
  grid-template-columns:minmax(96px,116px) minmax(0,1fr)!important;
  overflow:visible!important;
}
#gameScreen .cast-charge-panel .cast-heading h2{font-size:14px!important;line-height:1.03!important;}
#gameScreen .cast-charge-panel .cast-heading .eyebrow{font-size:8px!important;margin-bottom:0!important;}
#gameScreen .cast-charge-panel .cast-info.cast-charge-info{
  box-sizing:border-box!important;height:45px!important;min-height:45px!important;
  max-height:45px!important;gap:1px!important;display:grid!important;
  grid-template-rows:11px 10px 11px 11px!important;align-content:center!important;
  overflow:visible!important;
}
#gameScreen .cast-charge-panel .cast-charge-head{min-height:0!important;line-height:11px!important;}
#gameScreen .cast-charge-panel .cast-charge-head span,
#gameScreen .cast-charge-panel .cast-charge-head strong{font-size:9px!important;line-height:11px!important;}
#gameScreen .cast-charge-panel .cast-charge-meter{box-sizing:border-box!important;height:10px!important;min-height:10px!important;max-height:10px!important;}
#gameScreen .cast-charge-panel .cast-spell-name{font-size:10px!important;line-height:11px!important;}
#gameScreen .cast-charge-panel #mixStatus{font-size:9px!important;line-height:11px!important;}
#gameScreen .cast-charge-panel .cast-charge-fill{animation:none!important;transform:none!important;}
#gameScreen .cast-charge-panel .cast-charge-spell-icon{width:23px!important;height:23px!important;font-size:12px!important;}
@media(max-width:380px){
 #gameScreen .board-top.cast-charge-panel{grid-template-columns:102px minmax(0,1fr)!important;padding:4px 8px!important;}
}


/* V337: reclaim vertical space while keeping 70px fighter portraits legible. */
#gameScreen .board-top.cast-charge-panel{
 height:46px!important; min-height:46px!important; max-height:46px!important;
 padding:3px 9px!important; margin-bottom:3px!important;gap:6px!important;
 grid-template-columns:minmax(95px,115px) minmax(0,1fr)!important;
}
#gameScreen .cast-charge-panel .cast-info.cast-charge-info{
 height:40px!important;min-height:40px!important;max-height:40px!important;
 grid-template-rows:10px 9px 10px 10px!important;gap:0!important;
}
#gameScreen .cast-charge-panel .cast-charge-meter{
 height:9px!important;min-height:9px!important;max-height:9px!important;
}
#gameScreen .cast-charge-panel .cast-spell-name{line-height:10px!important;font-size:10px!important;}
#gameScreen .cast-charge-panel #mixStatus{line-height:10px!important;font-size:9px!important;}
#gameScreen .board-battle{
 box-sizing:border-box!important; padding:4px 7px 20px!important;
 min-height:101px!important; height:auto!important;
 margin-top:0!important;margin-bottom:3px!important;
 gap:4px!important;align-items:start!important;
}
#gameScreen .board-battle .fighter-image{height:73px!important;width:66px!important;}
#gameScreen .board-battle .hero-fighter{grid-template-columns:66px minmax(0,1fr)!important;}
#gameScreen .board-battle .enemy-fighter{grid-template-columns:minmax(0,1fr) 66px!important;}
#gameScreen .board-battle .charm-feedback{
 position:absolute!important;top:auto!important;bottom:2px!important;left:7px!important;right:7px!important;
 z-index:40!important;padding:2px 6px!important;
 border-radius:7px!important;font:600 9px/1.1 system-ui,sans-serif!important;
 white-space:nowrap!important;text-overflow:ellipsis!important;overflow:hidden!important;
 display:block!important;max-height:15px!important;
 background:rgba(7,31,50,.94)!important;
}
#gameScreen .board-panel{padding-top:6px!important;padding-bottom:6px!important;}
@media(max-width:390px){
 #gameScreen .board-battle .fighter-image{width:62px!important;height:70px!important;}
 #gameScreen .board-battle .hero-fighter{grid-template-columns:62px minmax(0,1fr)!important;}
 #gameScreen .board-battle .enemy-fighter{grid-template-columns:minmax(0,1fr) 62px!important;}
 #gameScreen .board-battle{min-height:98px!important;}
}

/* V339: per-tile projectile cascade and eight-tile overcharge visuals. */
#gameScreen .board-fight-fx .v339-projectile{width:var(--bolt-size,9px)!important;height:var(--bolt-size,9px)!important;z-index:35!important;animation-duration:var(--bolt-duration,430ms)!important;filter:brightness(1.5);box-shadow:0 0 9px 3px currentColor,0 0 20px 3px currentColor!important;}
#gameScreen .board-fight-fx .v339-orb-projectile{border:2px solid #fff9c6!important;box-shadow:0 0 12px 5px #ffdf72,0 0 24px 6px currentColor!important;}
#gameScreen .board-fight-fx .v339-legendary{border-width:3px!important;filter:brightness(1.4);}
#gameScreen .board-fight-fx .v339-impact-halo{position:absolute;z-index:34;pointer-events:none;width:var(--halo-size);height:var(--halo-size);border-radius:50%;border:3px solid currentColor;background:radial-gradient(circle,#fff8cb99 0%,currentColor 20%,transparent 72%);box-shadow:0 0 20px 6px currentColor;animation:battleMagicBloom 750ms ease-out both;}
#gameScreen .cast-charge-meter.overcharged{overflow:visible!important;isolation:isolate;border-color:#fff5b0!important;box-shadow:0 0 9px 2px #ffd26a,0 0 19px 3px #aa6bff,inset 0 0 8px #fff1af!important;animation:v339MeterSurge .7s ease-in-out infinite alternate;}
#gameScreen .cast-charge-meter.overcharged::before,#gameScreen .cast-charge-meter.overcharged::after{content:'✦ ✧ ✦';position:absolute;left:0;right:0;top:-12px;text-align:center;font-size:19px;line-height:1;color:#ffe9a0;text-shadow:0 0 9px #fff,0 0 18px #aa73ff;pointer-events:none;z-index:5;animation:v339Sparks .85s ease-in-out infinite alternate;}
#gameScreen .cast-charge-meter.overcharged::after{top:auto;bottom:-13px;font-size:15px;animation-delay:-.42s;color:#c5a6ff;}
#gameScreen .cast-charge-meter.overcharged .cast-charge-fill{background:linear-gradient(90deg,#4ee4ff,#b178ff,#fff7bd,#ffc149)!important;animation:v339FillBurst .52s ease-in-out infinite alternate!important;box-shadow:0 0 12px 4px #ffd56e,0 0 25px #9a70ff!important;}
#gameScreen .cast-charge-meter.orb-infused{border-color:#ffe79a!important;}
#gameScreen .cast-charge-meter.orb-infused .cast-charge-fill{filter:brightness(1.45) saturate(1.5)!important;}
@keyframes v339MeterSurge{from{filter:brightness(1);transform:scaleY(1)}to{filter:brightness(1.45);transform:scaleY(1.12)}}
@keyframes v339FillBurst{from{opacity:.87;filter:saturate(1.2)}to{opacity:1;filter:saturate(2) brightness(1.35)}}
@keyframes v339Sparks{from{opacity:.55;transform:translateY(3px) scale(.85)}to{opacity:1;transform:translateY(-5px) scale(1.12)}}
@media(prefers-reduced-motion:reduce){#gameScreen .cast-charge-meter.overcharged,#gameScreen .cast-charge-meter.overcharged::before,#gameScreen .cast-charge-meter.overcharged::after,#gameScreen .cast-charge-meter.overcharged .cast-charge-fill{animation:none!important}#gameScreen .board-fight-fx .v339-impact-halo{display:none!important}}

/* V340: each traced tile travels as its own, visibly separated shot. */
#gameScreen .board-fight-fx .v340-sequential{animation-timing-function:linear!important;animation-fill-mode:both!important;will-change:transform,opacity;}
#gameScreen .board-fight-fx .v340-hit-ring{animation-fill-mode:both!important;}





/* V353: custom regenerated thin headers and footer strips.
   Dark integrated banner art, no cream plaque, title text over clean center. */
#gameScreen .board-wrap.board-theme-active{
  position:relative;
  box-sizing:border-box;
  padding:31px 0 13px !important;
  background:linear-gradient(180deg, rgba(6,15,23,.96), rgba(11,22,34,.92)) !important;
  border:2px solid var(--board-theme-accent, rgba(244,211,129,.85)) !important;
  border-radius:20px !important;
  box-shadow:0 0 0 2px rgba(11,23,35,.88),0 8px 22px rgba(0,0,0,.34),inset 0 0 14px rgba(255,238,190,.08) !important;
  overflow:hidden;
}
#gameScreen .board-wrap.board-theme-active::before,
#gameScreen .board-wrap.board-theme-active::after{
  content:"";
  position:absolute; left:0; right:0;
  pointer-events:none; z-index:0;
  background-repeat:no-repeat; background-position:center; background-size:100% 100%;
}
#gameScreen .board-wrap.board-theme-active::before{top:0; height:38px !important; background-image:var(--board-theme-top-image);}
#gameScreen .board-wrap.board-theme-active::after{bottom:0; height:18px !important; background-image:var(--board-theme-bottom-image);}
#gameScreen .board-wrap.board-theme-active .board-theme-title{
  position:absolute; top:7px !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important;
  width:min(66%, 308px) !important; max-width:calc(100% - 54px) !important;
  min-height:14px !important; max-height:16px !important; margin:0 !important; padding:0 4px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  color:#f8efdb !important; font-weight:900 !important; font-size:clamp(11px,3vw,14px) !important; line-height:1 !important;
  text-align:center !important; letter-spacing:.01em !important;
  text-shadow:0 1px 2px rgba(11,21,40,.95), 0 0 7px rgba(9,18,36,.85) !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; pointer-events:none; z-index:3;
}
#gameScreen .board-wrap.board-theme-active .board-theme-title[data-size="medium"]{width:min(71%, 326px) !important; font-size:clamp(10.4px,2.8vw,13px) !important;}
#gameScreen .board-wrap.board-theme-active .board-theme-title[data-size="long"]{width:min(76%, 348px) !important; font-size:clamp(9.8px,2.6vw,12px) !important;}
#gameScreen .board-wrap.board-theme-active .board-theme-title[data-size="xlong"]{width:min(82%, 370px) !important; font-size:clamp(9.2px,2.4vw,11px) !important;}
#gameScreen .board-wrap.board-theme-active #board{
  position:relative; z-index:1; margin:0 6px !important;
  background:var(--board-theme-surface, rgba(4,11,19,.90)) !important;
  border:2px solid var(--board-theme-accent, #f4d381) !important; border-radius:12px;
  box-shadow:0 0 0 2px rgba(10,26,39,.72),0 4px 12px rgba(0,0,0,.4), inset 0 0 18px rgba(255,255,255,.04);
}
#gameScreen .board-wrap.board-theme-active #boardFx{z-index:4}
#gameScreen .board-wrap.board-theme-active #wildMagicNameplate{z-index:5}
@media(max-width:400px){
  #gameScreen .board-wrap.board-theme-active{padding:30px 0 12px !important;}
  #gameScreen .board-wrap.board-theme-active::before{height:36px !important;}
  #gameScreen .board-wrap.board-theme-active::after{height:17px !important;}
  #gameScreen .board-wrap.board-theme-active .board-theme-title{top:7px !important; width:min(70%, 286px) !important; max-width:calc(100% - 34px) !important; font-size:clamp(10.5px,2.9vw,13px) !important;}
  #gameScreen .board-wrap.board-theme-active .board-theme-title[data-size="medium"]{width:min(75%, 306px) !important;}
  #gameScreen .board-wrap.board-theme-active .board-theme-title[data-size="long"]{width:min(81%, 326px) !important; font-size:clamp(9.6px,2.5vw,11.6px) !important;}
  #gameScreen .board-wrap.board-theme-active .board-theme-title[data-size="xlong"]{width:min(86%, 340px) !important; font-size:clamp(9px,2.3vw,10.8px) !important;}
  #gameScreen .board-wrap.board-theme-active #board{margin:0 4px !important;}
}

/* V354 header hard limit: new filenames bypass stale cached banners. */
#gameScreen .board-wrap.board-theme-active{padding-top:31px!important;padding-bottom:13px!important}
#gameScreen .board-wrap.board-theme-active::before{height:38px!important;background-size:100% 100%!important}
#gameScreen .board-wrap.board-theme-active::after{height:18px!important;background-size:100% 100%!important}
#gameScreen .board-wrap.board-theme-active .board-theme-title{top:7px!important;min-height:16px!important;max-height:16px!important;padding:0 4px!important;background:none!important;border:0!important;box-shadow:none!important;color:#fff2d6!important}

/* V363: attach themed header/footer directly to the board so they float above the tile area
   without consuming extra vertical layout space. */
#gameScreen .board-wrap.board-theme-active{
  position:relative !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  isolation:isolate;
}
#gameScreen .board-wrap.board-theme-active::before,
#gameScreen .board-wrap.board-theme-active::after{
  content:"";
  position:absolute;
  left:8px !important;
  right:8px !important;
  pointer-events:none;
  z-index:6 !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:100% 100% !important;
}
#gameScreen .board-wrap.board-theme-active::before{
  top:-10px !important;
  height:35px !important;
  background-image:var(--board-theme-top-image) !important;
}
#gameScreen .board-wrap.board-theme-active::after{
  bottom:-9px !important;
  height:18px !important;
  background-image:var(--board-theme-bottom-image) !important;
}
#gameScreen .board-wrap.board-theme-active #board{
  position:relative !important;
  z-index:2 !important;
  margin:0 !important;
  overflow:visible !important;
  background:var(--board-theme-surface, rgba(4,11,19,.90)) !important;
  border:2px solid var(--board-theme-accent, #f4d381) !important;
  border-radius:14px !important;
  box-shadow:0 0 0 2px rgba(10,26,39,.72),0 6px 18px rgba(0,0,0,.42), inset 0 0 18px rgba(255,255,255,.04) !important;
}
#gameScreen .board-wrap.board-theme-active #boardFx{z-index:7 !important}
#gameScreen .board-wrap.board-theme-active #wildMagicNameplate{z-index:8 !important}
#gameScreen .board-wrap .board-theme-title,
#gameScreen .board-wrap.board-theme-active .board-theme-title{display:none !important;}
@media(max-width:400px){
  #gameScreen .board-wrap.board-theme-active::before{left:6px !important; right:6px !important; top:-9px !important; height:35px !important;}
  #gameScreen .board-wrap.board-theme-active::after{left:6px !important; right:6px !important; bottom:-8px !important; height:18px !important;}
}

/* V366: targeted visual correction. Preserve V365 safe board framing. */
#gameScreen .board-wrap.board-theme-active{
  padding:35px 0 18px !important;
  margin-top:0 !important;
}
#gameScreen .board-wrap.board-theme-active::before{
  height:35px !important;
  top:0 !important;
}
#gameScreen .board-wrap.board-theme-active::after{
  height:18px !important;
  bottom:0 !important;
}
/* Give VS a reserved middle column; prevent its letters from merging with OPPONENT. */
#gameScreen .battle-spell-unified .board-battle{
  grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) !important;
  column-gap:7px !important;
}
#gameScreen .battle-spell-unified .board-battle-center{
  width:24px !important;
  min-width:24px !important;
  max-width:24px !important;
  padding-top:8px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
#gameScreen .battle-spell-unified .board-battle-center b{
  font-size:12px !important;
  line-height:16px !important;
  letter-spacing:0 !important;
}
#gameScreen .battle-spell-unified .enemy-fighter .fighter-copy .eyebrow{
  font-size:10px !important;
  letter-spacing:.07em !important;
  white-space:nowrap !important;
}
#gameScreen .battle-spell-unified .enemy-fighter .fighter-copy{
  min-width:0 !important;
  overflow:hidden !important;
}
@media(max-width:420px){
  #gameScreen .battle-spell-unified .board-battle{
    grid-template-columns:minmax(0,1fr) 21px minmax(0,1fr) !important;
    column-gap:5px !important;
  }
  #gameScreen .battle-spell-unified .board-battle-center{
    width:21px !important;min-width:21px !important;max-width:21px !important;
  }
  #gameScreen .battle-spell-unified .board-battle-center b{font-size:11px !important;}
  #gameScreen .battle-spell-unified .enemy-fighter .fighter-copy .eyebrow{font-size:9px !important;letter-spacing:.03em !important;}
}


/* ===== V373 splash button spacing fix ===== */
#wimbleInstallBtn{
  position:absolute;
  left:50%;
  bottom:190px;
  transform:translateX(-50%);
  z-index:24;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:min(calc(100% - 68px), 290px);
  min-height:30px;
  padding:7px 12px;
  border-radius:14px;
  border:1px solid rgba(233,191,82,.68);
  background:linear-gradient(180deg, rgba(41,72,109,.92), rgba(19,37,68,.96));
  color:#f8ebc2;
  font-size:.84rem;
  font-weight:800;
  line-height:1.15;
  text-align:center;
  box-shadow:0 10px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(111,74,17,.25);
}
#wimbleInstallBtn[hidden]{display:none !important;}
#splashScreen .splash-button-stack{
  bottom:max(14px, env(safe-area-inset-bottom));
  width:calc(100% - 28px);
  gap:10px;
}
#splashScreen .splash-button-stack .primary-btn,
#splashScreen .splash-button-stack .small-btn{
  width:min(100%, 308px);
  min-height:44px;
}
#splashScreen .text-link-btn{
  font-size:.92rem;
  line-height:1.15;
  margin-top:2px;
}
@media (max-width: 520px), (orientation: portrait){
  #wimbleInstallBtn{
    bottom:180px;
    width:min(calc(100% - 52px), 282px);
    font-size:.8rem;
    min-height:28px;
    padding:6px 10px;
  }
  #splashScreen .splash-button-stack{
    bottom:max(10px, env(safe-area-inset-bottom));
    width:calc(100% - 24px);
    gap:8px;
  }
  #splashScreen .splash-button-stack .primary-btn,
  #splashScreen .splash-button-stack .small-btn{
    width:min(100%, 296px);
    min-height:42px;
    padding:10px 14px;
    font-size:.98rem;
  }
  #splashScreen .text-link-btn{font-size:.88rem;}
}
@media (max-width: 390px){
  #wimbleInstallBtn{bottom:170px;width:min(calc(100% - 44px), 270px);font-size:.78rem;}
  #splashScreen .splash-button-stack .primary-btn,
  #splashScreen .splash-button-stack .small-btn{width:min(100%, 284px);}
}

/* V374 splash polish / element fireworks / movable gear */
#splashScreen .splash-button-stack{gap:9px!important;bottom:12px!important;z-index:35!important}
#splashScreen .splash-button-stack button{flex-shrink:0;min-height:48px!important;max-height:none!important;line-height:1.18!important}
#splashScreen .splash-button-stack .text-link-btn{min-height:27px!important;padding:3px 8px!important}
#splashScreen .splash-title-card{top:20px!important;padding:10px 14px 9px!important}
#splashScreen .splash-audio-toggle{top:160px!important;right:10px!important;bottom:auto!important;z-index:42!important}
#wimbleInstallBtn{bottom:275px!important;z-index:41!important;max-width:calc(100% - 40px)!important}
#wimbleInstallBtn[hidden]{display:none!important}
@media(max-width:520px){
 #splashScreen .splash-button-stack{gap:7px!important;bottom:10px!important}
 #splashScreen .splash-button-stack button{min-height:44px!important}
 #splashScreen .splash-title-card{top:15px!important}
 #splashScreen .splash-audio-toggle{top:148px!important;right:8px!important}
 #wimbleInstallBtn{bottom:245px!important}
}
@media(max-height:680px){#splashScreen .splash-button-stack{position:relative!important;left:auto!important;transform:none!important;bottom:auto!important;margin:-220px auto 10px!important}#wimbleInstallBtn{bottom:245px!important}}
.global-settings-btn{touch-action:none;user-select:none;-webkit-user-select:none}
.global-settings-btn.gear-drag-active{box-shadow:0 0 0 5px rgba(255,224,138,.35),0 14px 32px rgba(0,0,0,.45)!important;cursor:grabbing;transform:scale(1.08)}
#gameScreen .board-fight-fx{overflow:hidden}
.spell-fireworks-canvas{position:absolute!important;inset:0!important;z-index:65!important;pointer-events:none!important;width:100%;height:100%}

/* V376 visible fireworks: sprites rise from elemental symbol, impact sparks radiate on hit. */
#gameScreen #boardFightFx .v376-element-spark,
#gameScreen #boardFightFx .v376-impact-spark{
 position:absolute!important;z-index:75!important;pointer-events:none!important;
 font-size:16px!important;line-height:1!important;text-shadow:0 0 7px currentColor,0 0 13px currentColor;
 opacity:0;will-change:transform,opacity;contain:layout style;
}
#gameScreen #boardFightFx .v376-element-spark{
 animation:v376Emit .75s ease-out both!important;
}
#gameScreen #boardFightFx .v376-impact-spark{
 font-size:15px!important;
 animation:v376Burst .92s ease-out both!important;
}
@keyframes v376Emit{
 0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}
 12%{opacity:1}
 70%{opacity:1}
 100%{opacity:0;transform:translate(calc(-50% + var(--v376-dx)),calc(-50% + var(--v376-dy))) scale(1.25)}
}
@keyframes v376Burst{
 0%{opacity:1;transform:translate(-50%,-50%) scale(.45)}
 22%{opacity:1}
 100%{opacity:0;transform:translate(calc(-50% + var(--v376-dx)),calc(-50% + var(--v376-dy))) scale(.25)}
}


/* V377: bring elemental firework particles onto the tile board while tracing. */
#gameScreen #boardFx .v377-trace-symbol,
#gameScreen #boardFx .v377-trace-spark,
#gameScreen #boardFx .v377-trace-ring{
  position:absolute!important;
  z-index:215!important;
  pointer-events:none!important;
  transform:translate(-50%,-50%);
  opacity:0;
  will-change:transform,opacity;
}
#gameScreen #boardFx .v377-trace-symbol,
#gameScreen #boardFx .v377-trace-spark{
  line-height:1!important;
  text-shadow:0 0 7px currentColor,0 0 14px currentColor;
}
#gameScreen #boardFx .v377-trace-symbol{
  font-size:17px!important;
  animation:v377TraceLift .82s ease-out both!important;
}
#gameScreen #boardFx .v377-trace-spark{
  font-size:13px!important;
  animation:v377TraceBurst .9s ease-out both!important;
}
#gameScreen #boardFx .v377-trace-ring{
  width:var(--v377-ring-size,28px)!important;
  height:var(--v377-ring-size,28px)!important;
  border-radius:50%!important;
  border:2px solid currentColor!important;
  box-shadow:0 0 10px currentColor, inset 0 0 6px currentColor;
  animation:v377TraceRing .72s ease-out both!important;
}
@keyframes v377TraceLift{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}
  14%{opacity:1}
  70%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--v377-dx)),calc(-50% + var(--v377-dy))) scale(1.18)}
}
@keyframes v377TraceBurst{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(0deg) scale(.2)}
  16%{opacity:1}
  54%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--v377-dx)),calc(-50% + var(--v377-dy))) rotate(var(--v377-rot,0deg)) scale(.85)}
}
@keyframes v377TraceRing{
  0%{opacity:.9;transform:translate(-50%,-50%) scale(.25)}
  75%{opacity:.6}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}
}


/* V378: install action is part of the title card, directly below its subtitle.
   Reset all of the legacy absolute-bottom placement overrides. */
#splashScreen .splash-title-card #wimbleInstallBtn{
  position:relative!important;
  display:flex!important;
  left:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:min(100%,290px)!important;
  max-width:100%!important;
  margin:10px auto 0!important;
  min-height:32px!important;
  padding:7px 9px!important;
  font-size:clamp(.70rem,2.7vw,.83rem)!important;
  line-height:1.2!important;
  white-space:normal!important;
  border-radius:12px!important;
  z-index:4!important;
}
#splashScreen .splash-title-card #wimbleInstallBtn[hidden]{display:none!important;}
/* Music stays outside the expanded title card and away from its install link. */
#splashScreen .splash-audio-toggle{top:230px!important;right:10px!important;bottom:auto!important;}
@media(max-width:520px){
  #splashScreen .splash-audio-toggle{top:215px!important;right:9px!important;}
  #splashScreen .splash-title-card #wimbleInstallBtn{margin-top:8px!important;}
}
/* Firework spokes burst from the actual large SVG outline, visible above board FX. */
#gameScreen #boardFx .v378-outline-firework{
  position:absolute!important;
  z-index:260!important;
  pointer-events:none!important;
  display:block!important;
  font-size:var(--v378-size,16px)!important;
  font-weight:900!important;
  line-height:1!important;
  opacity:0;
  text-shadow:0 0 7px currentColor,0 0 16px currentColor,0 0 28px currentColor,0 0 40px currentColor;
  filter:drop-shadow(0 0 5px currentColor) saturate(1.2);
  will-change:transform,opacity;
  animation:v378OutlineSpark var(--v378-dur,1180ms) cubic-bezier(.14,.6,.2,1) var(--v378-delay,0ms) both!important;
}
@keyframes v378OutlineSpark{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(0deg) scale(.26)}
  8%{opacity:.98;transform:translate(-50%,-50%) rotate(calc(var(--v378-spin,260deg) * .08)) scale(1.15)}
  28%{opacity:1;transform:translate(calc(-50% + var(--v378-mid-x,0px)),calc(-50% + var(--v378-mid-y,0px))) rotate(calc(var(--v378-spin,260deg) * .38)) scale(1.08)}
  58%{opacity:1;transform:translate(calc(-50% + (var(--v378-mid-x,0px) * .55)),calc(-50% + (var(--v378-mid-y,0px) * .55))) rotate(calc(var(--v378-spin,260deg) * .62)) scale(.9)}
  82%{opacity:.82;transform:translate(calc(-50% + (var(--v378-x,0px) * .86)),calc(-50% + (var(--v378-y,0px) * .86))) rotate(calc(var(--v378-spin,260deg) * .88)) scale(.7)}
  100%{opacity:0;transform:translate(calc(-50% + var(--v378-x,0px)),calc(-50% + var(--v378-y,0px))) rotate(calc(var(--v378-spin,260deg) + var(--v378-rot,0deg))) scale(.32)}
}


/* V379: install control is BELOW, not inside, the ornate title card.
   Keep the title's exact historical width and padding via a full-width wrapper. */
#splashScreen .splash-title-group{
  position:absolute!important;
  top:20px!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  z-index:12!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:10px!important;
  pointer-events:none;
}
#splashScreen .splash-title-group > .splash-title-card{
  position:relative!important;
  top:auto!important;
  bottom:auto!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  margin:0 auto!important;
  width:min(84%,320px)!important;
  box-sizing:border-box!important;
  pointer-events:auto;
}
#splashScreen .splash-title-group > #wimbleInstallBtn{
  position:relative!important;
  display:flex!important;
  top:auto!important;
  bottom:auto!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  margin:0 auto!important;
  width:min(74%,280px)!important;
  max-width:calc(100% - 44px)!important;
  min-height:34px!important;
  padding:7px 11px!important;
  font-size:clamp(.71rem,2.7vw,.83rem)!important;
  line-height:1.2!important;
  border-radius:999px!important;
  white-space:normal!important;
  pointer-events:auto!important;
  z-index:17!important;
}
#splashScreen .splash-title-group > #wimbleInstallBtn[hidden]{display:none!important;}
@media(max-width:520px){
  #splashScreen .splash-title-group{top:15px!important;gap:9px!important;}
  #splashScreen .splash-title-group > .splash-title-card{width:min(86%,290px)!important;}
  #splashScreen .splash-title-group > #wimbleInstallBtn{width:min(74%,260px)!important;min-height:33px!important;}
}


/* V381 elemental outline motion. Six distinct trajectories, all emitted from
   the actual large SVG element outline. Visual only; pointer-transparent. */
#gameScreen #boardFx .v378-outline-firework[class*="v381-element-"]{
  /* V382: V381 accidentally selected a NONEXISTENT animation name here.
     Preserve timing without overriding each element's actual keyframes. */
  animation-duration:var(--v378-dur,1180ms)!important;
  animation-timing-function:cubic-bezier(.16,.58,.22,1)!important;
  animation-delay:var(--v378-delay,0ms)!important;
  animation-fill-mode:both!important;
}
#gameScreen #boardFx .v378-outline-firework.v381-element-fire{
  animation-name:v381FireFlicker!important;
  filter:drop-shadow(0 0 7px #ff7139) saturate(1.35);
}
#gameScreen #boardFx .v378-outline-firework.v381-element-water{
  animation-name:v381WaterSplash!important;
  filter:drop-shadow(0 0 7px #51dbff) saturate(1.25);
}
#gameScreen #boardFx .v378-outline-firework.v381-element-nature{
  animation-name:v381NatureSwirl!important;
  filter:drop-shadow(0 0 7px #71ef64) saturate(1.4);
}
#gameScreen #boardFx .v378-outline-firework.v381-element-ice{
  animation-name:v381IceDrift!important;
  filter:drop-shadow(0 0 7px #c7f7ff);
}
#gameScreen #boardFx .v378-outline-firework.v381-element-wind{
  animation-name:v381WindCorkscrew!important;
  filter:drop-shadow(0 0 7px #cbadff);
}
#gameScreen #boardFx .v378-outline-firework.v381-element-star{
  animation-name:v381StarBurst!important;
  filter:drop-shadow(0 0 8px #ffec89);
}
@keyframes v381FireFlicker{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0deg)}
  10%{opacity:1;transform:translate(-50%,-50%) scale(1.4) rotate(-20deg)}
  32%{opacity:.8;transform:translate(calc(-50% + var(--v381-ax)),calc(-50% + var(--v381-ay))) scale(1.15) rotate(32deg)}
  65%{opacity:1;transform:translate(calc(-50% + var(--v381-bx)),calc(-50% + var(--v381-by))) scale(.85) rotate(-28deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--v381-cx)),calc(-50% + var(--v381-cy))) scale(.18) rotate(var(--v381-spin))}
}
@keyframes v381WaterSplash{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(0deg)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(20deg)}
  34%{opacity:1;transform:translate(calc(-50% + var(--v381-ax)),calc(-50% + var(--v381-ay))) scale(1.05) rotate(45deg)}
  63%{opacity:1;transform:translate(calc(-50% + var(--v381-bx)),calc(-50% + var(--v381-by))) scale(.85) rotate(85deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--v381-cx)),calc(-50% + var(--v381-cy))) scale(.24) rotate(var(--v381-spin))}
}
@keyframes v381NatureSwirl{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(0deg) scale(.38)}
  12%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1.18)}
  33%{opacity:1;transform:translate(calc(-50% + var(--v381-ax)),calc(-50% + var(--v381-ay))) rotate(170deg) scale(1.05)}
  65%{opacity:.9;transform:translate(calc(-50% + var(--v381-bx)),calc(-50% + var(--v381-by))) rotate(325deg) scale(.84)}
  100%{opacity:0;transform:translate(calc(-50% + var(--v381-cx)),calc(-50% + var(--v381-cy))) rotate(var(--v381-spin)) scale(.25)}
}
@keyframes v381IceDrift{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0deg)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(20deg)}
  37%{opacity:1;transform:translate(calc(-50% + var(--v381-ax)),calc(-50% + var(--v381-ay))) scale(1) rotate(-30deg)}
  70%{opacity:.94;transform:translate(calc(-50% + var(--v381-bx)),calc(-50% + var(--v381-by))) scale(.88) rotate(42deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--v381-cx)),calc(-50% + var(--v381-cy))) scale(.3) rotate(var(--v381-spin))}
}
@keyframes v381WindCorkscrew{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(0deg) scale(.27)}
  10%{opacity:1;transform:translate(-50%,-50%) rotate(90deg) scale(1.22)}
  34%{opacity:1;transform:translate(calc(-50% + var(--v381-ax)),calc(-50% + var(--v381-ay))) rotate(270deg) scale(1.05)}
  68%{opacity:.95;transform:translate(calc(-50% + var(--v381-bx)),calc(-50% + var(--v381-by))) rotate(550deg) scale(.84)}
  100%{opacity:0;transform:translate(calc(-50% + var(--v381-cx)),calc(-50% + var(--v381-cy))) rotate(var(--v381-spin)) scale(.25)}
}
@keyframes v381StarBurst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0deg)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1.5) rotate(30deg)}
  35%{opacity:1;transform:translate(calc(-50% + var(--v381-ax)),calc(-50% + var(--v381-ay))) scale(1.25) rotate(70deg)}
  70%{opacity:.98;transform:translate(calc(-50% + var(--v381-bx)),calc(-50% + var(--v381-by))) scale(.92) rotate(140deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--v381-cx)),calc(-50% + var(--v381-cy))) scale(.3) rotate(var(--v381-spin))}
}
@media(prefers-reduced-motion:reduce){
  #gameScreen #boardFx .v378-outline-firework[class*="v381-element-"]{animation:none!important;display:none!important;}
}

/* V383: independent canvas for the large TILE BOARD element symbols. */
#gameScreen #boardFx .v383-outline-fireworks-canvas{
  position:absolute!important;inset:0!important;z-index:320!important;
  width:100%;height:100%;pointer-events:none!important;
  display:block!important;opacity:1!important;mix-blend-mode:screen;
}


/* V384 friendly contextual Wimble speech-bubble helpers. */
.v384-wimble-popup{position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(18px,calc(env(safe-area-inset-bottom) + 14px));z-index:2147482000;display:flex;justify-content:center;align-items:flex-end;gap:0;pointer-events:none;max-width:560px;margin:auto;filter:drop-shadow(0 10px 17px rgba(0,0,0,.4));animation:v384Appear .28s ease-out both}
.v384-wimble-avatar{width:clamp(74px,22vw,120px);height:clamp(98px,27vw,146px);object-fit:contain;object-position:bottom;flex:none;pointer-events:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55));z-index:2;margin-right:-18px}
.v384-wimble-bubble{position:relative;min-width:0;flex:1;padding:17px 18px 16px 24px;border:3px solid #efcc78;border-radius:22px;background:linear-gradient(145deg,#fff6d7,#f5deae);color:#352411;box-shadow:0 3px 0 #926b37,inset 0 0 0 2px rgba(255,255,255,.5);pointer-events:auto}
.v384-wimble-bubble::before{content:'';position:absolute;bottom:27px;left:-15px;width:25px;height:25px;background:#f5deae;border-bottom:3px solid #efcc78;border-left:3px solid #efcc78;transform:rotate(45deg)}
.v384-wimble-bubble strong{display:block;font-size:clamp(16px,4.3vw,21px);line-height:1.14;margin:0 24px 8px 0;color:#69421d}
.v384-wimble-bubble p{font-size:clamp(13px,3.7vw,16px);line-height:1.4;margin:0 0 13px;color:#423321}
.v384-wimble-actions{display:flex;gap:8px;flex-wrap:wrap}
.v384-wimble-actions button{min-height:40px;border-radius:12px;font-weight:800;font-size:13px;cursor:pointer;padding:9px 13px;line-height:1.15}
.v384-hint-go{border:2px solid #eebf61;background:linear-gradient(#2c587b,#15334d);color:#fff2cc;box-shadow:0 3px 7px rgba(0,0,0,.2)}
.v384-hint-stay{border:2px solid #ad8954;background:#fff5d9;color:#52391e}
.v384-hint-close{position:absolute;right:10px;top:8px;width:29px;height:29px;font-weight:800;font-size:22px;background:transparent;border:0;color:#6e5432;cursor:pointer}
@keyframes v384Appear{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
#gameScreen .v384-bag-highlight,#battleBagBar.v384-bag-highlight{outline:4px solid #ffe37e!important;outline-offset:3px!important;box-shadow:0 0 20px 7px #ffe37e!important;animation:v384HintGlow .8s ease-in-out 3 alternate!important}
@keyframes v384HintGlow{from{filter:brightness(1)}to{filter:brightness(1.45)}}
@media(max-width:390px){.v384-wimble-avatar{width:72px;margin-right:-12px}.v384-wimble-bubble{padding:14px 11px 12px 18px}.v384-wimble-actions button{font-size:12px;padding:7px 10px}}
@media(prefers-reduced-motion:reduce){.v384-wimble-popup,#battleBagBar.v384-bag-highlight{animation:none!important}}

/* V385: accessible high-contrast Wimble hints. Override inherited/map page text rules. */
html body .v384-wimble-popup .v384-wimble-bubble{
  background:#fff2c8!important;color:#2e2115!important;opacity:1!important;
}
html body .v384-wimble-popup .v384-wimble-bubble p{
  display:block!important;opacity:1!important;visibility:visible!important;
  color:#2a2119!important;-webkit-text-fill-color:#2a2119!important;
  font-size:clamp(16px,4.1vw,18px)!important;
  line-height:1.45!important;font-weight:600!important;
  text-shadow:none!important;filter:none!important;
  mix-blend-mode:normal!important;
}
html body .v384-wimble-popup .v384-wimble-bubble strong{
  color:#583416!important;-webkit-text-fill-color:#583416!important;opacity:1!important;
}
html body .v384-wimble-popup .v384-hint-stay{
  color:#382419!important;-webkit-text-fill-color:#382419!important;
}
html body .v384-wimble-popup .v384-hint-go{
  color:#fff5da!important;-webkit-text-fill-color:#fff5da!important;
}
@media(max-width:390px){
  html body .v384-wimble-popup .v384-wimble-bubble p{font-size:16px!important;line-height:1.42!important;}
}
/* No screen-blend compositing on the canvas; additive strokes handle glow. */
#gameScreen #boardFx .v383-outline-fireworks-canvas{mix-blend-mode:normal!important;}


/* V386: Power Orb activation overlay */
#gameScreen .board-wrap #boardFx .v386-power-orb-overlay{
  position:absolute;inset:0;pointer-events:none;z-index:16;opacity:0;
}
#gameScreen .board-wrap #boardFx .v386-power-orb-overlay.show{opacity:1;}
#gameScreen .board-wrap #boardFx .v386-power-orb-wash{
  position:absolute;inset:4% 3%;border-radius:20px;
  background:radial-gradient(circle at 50% 54%, rgba(255,255,255,.2) 0, rgba(255,255,255,.12) 18%, rgba(255,244,195,.06) 30%, rgba(255,255,255,0) 70%);
  animation:v386OrbWash .78s ease-out forwards;
}
#gameScreen .board-wrap #boardFx .v386-power-orb-banner{
  position:absolute;left:50%;top:10px;transform:translateX(-50%) translateY(-8px) scale(.94);
  min-width:min(86%,330px);max-width:92%;padding:10px 18px 11px;border-radius:18px;
  border:2px solid rgba(255,247,204,.9);
  background:linear-gradient(180deg, rgba(30,24,69,.95), rgba(8,20,53,.9));
  box-shadow:0 10px 24px rgba(0,0,0,.28),0 0 22px var(--orb-glow);
  text-align:center;opacity:0;animation:v386OrbBanner .95s ease-out forwards;
}
#gameScreen .board-wrap #boardFx .v386-power-orb-kicker{
  font-size:clamp(18px,5.2vw,29px);line-height:1;font-weight:1000;letter-spacing:.06em;
  color:#fff7ca;text-shadow:0 2px 0 rgba(11,15,49,.9),0 0 14px var(--orb-glow),0 0 24px rgba(255,255,255,.26);
}
#gameScreen .board-wrap #boardFx .v386-power-orb-sub{
  margin-top:4px;font-size:clamp(11px,3vw,14px);line-height:1.1;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  color:#ffefab;text-shadow:0 1px 0 rgba(0,0,0,.45);
}
#gameScreen .board-wrap #boardFx .v386-power-orb-burst{position:absolute;transform:translate(-50%,-50%);width:1px;height:1px;}
#gameScreen .board-wrap #boardFx .v386-power-orb-cross,
#gameScreen .board-wrap #boardFx .v386-power-orb-ring,
#gameScreen .board-wrap #boardFx .v386-power-orb-core,
#gameScreen .board-wrap #boardFx .v386-power-orb-glyph,
#gameScreen .board-wrap #boardFx .v386-power-orb-spark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;
}
#gameScreen .board-wrap #boardFx .v386-power-orb-cross{
  border-radius:999px;opacity:0;
  background:linear-gradient(90deg, rgba(255,255,255,0), var(--orb-color), rgba(255,255,255,.98), var(--orb-color), rgba(255,255,255,0));
  box-shadow:0 0 12px var(--orb-glow),0 0 24px var(--orb-glow);
}
#gameScreen .board-wrap #boardFx .v386-power-orb-cross.h{width:min(92%,360px);height:16px;animation:v386OrbCrossH .7s ease-out forwards;}
#gameScreen .board-wrap #boardFx .v386-power-orb-cross.v{width:16px;height:min(92%,360px);background:linear-gradient(180deg, rgba(255,255,255,0), var(--orb-color), rgba(255,255,255,.98), var(--orb-color), rgba(255,255,255,0));animation:v386OrbCrossV .7s ease-out forwards;}
#gameScreen .board-wrap #boardFx .v386-power-orb-ring{width:30px;height:30px;border-radius:50%;border:3px solid rgba(255,255,255,.92);box-shadow:0 0 14px var(--orb-glow),0 0 24px var(--orb-glow);}
#gameScreen .board-wrap #boardFx .v386-power-orb-ring.ring-a{animation:v386OrbRingA .78s ease-out forwards;}
#gameScreen .board-wrap #boardFx .v386-power-orb-ring.ring-b{animation:v386OrbRingB .84s ease-out .06s forwards;}
#gameScreen .board-wrap #boardFx .v386-power-orb-core{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%, #fff, #fff6c0 35%, var(--orb-color) 72%, rgba(255,255,255,0) 100%);box-shadow:0 0 18px var(--orb-glow),0 0 32px rgba(255,255,255,.45);animation:v386OrbCore .62s ease-out forwards;}
#gameScreen .board-wrap #boardFx .v386-power-orb-glyph{font-size:26px;font-weight:900;color:#fff6d1;text-shadow:0 0 12px var(--orb-glow),0 0 20px rgba(255,255,255,.42);animation:v386OrbGlyph .68s ease-out forwards;}
#gameScreen .board-wrap #boardFx .v386-power-orb-spark{
  font-size:14px;line-height:1;color:#fff8d5;text-shadow:0 0 8px var(--orb-glow),0 0 15px var(--orb-glow);
  opacity:0;animation:v386OrbSpark .9s ease-out forwards;
}
#gameScreen .board-wrap #boardFx .v386-power-orb-overlay.grand .v386-power-orb-banner,
#gameScreen .board-wrap #boardFx .v386-power-orb-overlay.mega .v386-power-orb-banner{box-shadow:0 12px 28px rgba(0,0,0,.34),0 0 30px var(--orb-glow),0 0 54px rgba(255,255,255,.18);}
#gameScreen .board-wrap #boardFx .v386-power-orb-overlay.grand .v386-power-orb-kicker,
#gameScreen .board-wrap #boardFx .v386-power-orb-overlay.mega .v386-power-orb-kicker{letter-spacing:.08em;}
@keyframes v386OrbBanner{0%{opacity:0;transform:translateX(-50%) translateY(-10px) scale(.92)}14%{opacity:1}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes v386OrbWash{0%{opacity:0;transform:scale(.92)}14%{opacity:.82}100%{opacity:0;transform:scale(1.06)}}
@keyframes v386OrbCrossH{0%{opacity:0;transform:translate(-50%,-50%) scaleX(.06)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scaleX(1)}}
@keyframes v386OrbCrossV{0%{opacity:0;transform:translate(-50%,-50%) scaleY(.06)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scaleY(1)}}
@keyframes v386OrbRingA{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(5.2)}}
@keyframes v386OrbRingB{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}22%{opacity:.95}100%{opacity:0;transform:translate(-50%,-50%) scale(7.2)}}
@keyframes v386OrbCore{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}16%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(3.25)}}
@keyframes v386OrbGlyph{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}24%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8) rotate(18deg)}}
@keyframes v386OrbSpark{0%{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(0deg)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.05) rotate(var(--rot))}}
@media (prefers-reduced-motion: reduce){
  #gameScreen .board-wrap #boardFx .v386-power-orb-wash,
  #gameScreen .board-wrap #boardFx .v386-power-orb-banner,
  #gameScreen .board-wrap #boardFx .v386-power-orb-cross,
  #gameScreen .board-wrap #boardFx .v386-power-orb-ring,
  #gameScreen .board-wrap #boardFx .v386-power-orb-core,
  #gameScreen .board-wrap #boardFx .v386-power-orb-glyph,
  #gameScreen .board-wrap #boardFx .v386-power-orb-spark{animation:none!important;opacity:1;}
  #gameScreen .board-wrap #boardFx .v386-power-orb-overlay{opacity:1;}
}


/* V388: separate obstacles from crystals. Blocked spaces are solid
   obstacle tiles, not a tiny stamp covering an active elemental crystal.
   All underlying blockers and gameplay are unchanged. */
#gameScreen #board > .cell.blocked{
  background:radial-gradient(circle at 40% 28%,#304861 0%,#1a3045 60%,#111f34 100%)!important;
  border:1px solid rgba(204,189,161,.48)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 9px rgba(0,0,0,.32),0 2px 5px rgba(0,0,0,.24)!important;
}
#gameScreen #board > .cell.blocked .rune-img,
#gameScreen #board > .cell.blocked .power-orb-shell,
#gameScreen #board > .cell.blocked .power-orb-core,
#gameScreen #board > .cell.blocked .power-orb-glyph,
#gameScreen #board > .cell.blocked .power-orb-label{
  display:none!important;
}
#gameScreen #board > .cell.blocked .blocker-img{
  position:absolute!important;
  inset:9%!important;
  left:9%!important;top:9%!important;right:9%!important;bottom:9%!important;
  width:82%!important;height:82%!important;
  object-fit:contain!important;object-position:center!important;
  border:0!important;border-radius:9px!important;
  filter:brightness(1.06) saturate(1.03)!important;
  box-shadow:none!important;
  opacity:1!important;z-index:3!important;pointer-events:none!important;
}
#gameScreen #board > .cell.blocked .blocker-hp{
  position:absolute!important;left:auto!important;right:1px!important;top:1px!important;
  z-index:5!important;min-width:16px!important;height:16px!important;
  padding:0 2px!important;font-size:10px!important;line-height:14px!important;
  color:#fff4d4!important;border:1px solid #ffc877!important;background:#69361e!important;
}
/* Make the 8+ activated orb's X/Y beams use the board pixel size, not the
   tiny 1px burst-anchor percentage size. */
#gameScreen .board-wrap #boardFx .v386-power-orb-cross.h{
  width:var(--v386-cross-width,320px)!important;
}
#gameScreen .board-wrap #boardFx .v386-power-orb-cross.v{
  height:var(--v386-cross-height,320px)!important;
}


/* V389: keep blocker HP counters above blocker art on all boards,
   especially mobile Safari where transformed images could visually overpaint
   the badge. */
#gameScreen #board > .cell,
#gameScreen #board > .cell.blocked{
  isolation:isolate !important;
}
#gameScreen #board > .cell.blocked .blocker-img{
  z-index:2 !important;
  transform:translateZ(0) !important;
  -webkit-transform:translateZ(0) !important;
}
#gameScreen #board > .cell.blocked .blocker-hp{
  z-index:30 !important;
  display:grid !important;
  place-items:center !important;
  pointer-events:none !important;
  transform:translateZ(2px) !important;
  -webkit-transform:translateZ(2px) !important;
  will-change:transform !important;
  box-shadow:0 1px 4px rgba(0,0,0,.55) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.55) !important;
}


/* V390: selected map levels stay exactly on their saved coordinates.
   Earlier selectedPulse/mapNodePulse keyframes replaced transform:translate(-50%,-50%)
   with transform:scale(), shifting center-anchored markers right and down. */
#mapScreen .journey-map-card .journey-node.selected,
#mapScreen .journey-map-stack .journey-node.selected,
#mapScreen .level-node.selected {
  animation:none !important;
  transition:box-shadow .18s ease,border-color .18s ease,filter .18s ease !important;
  filter:brightness(1.08) !important;
}
#mapScreen .journey-map-card .journey-node[data-map-anchor="center"],
#mapScreen .journey-map-card .journey-node[data-map-anchor="center"].selected,
#mapScreen .journey-map-card .journey-node[data-map-anchor="center"]:hover:not(.locked),
#mapScreen .journey-map-card .journey-node[data-map-anchor="center"]:active:not(.locked) {
  transform:translate(-50%,-50%) !important;
}
#mapScreen .journey-map-card .journey-node:not([data-map-anchor="center"]):hover:not(.locked),
#mapScreen .journey-map-card .journey-node:not([data-map-anchor="center"]):active:not(.locked) {
  transform:none !important;
}
#mapScreen .journey-map-card .journey-node.selected {
  z-index:24 !important;
  box-shadow:0 0 0 2px rgba(255,246,196,.88),
             0 0 0 5px rgba(255,212,92,.45),
             0 0 25px 5px rgba(255,208,77,.72) !important;
  border-radius:50% !important;
}
#mapScreen .journey-map-card .journey-node.selected .node-portrait {
  border-color:#fff5c2 !important;
  animation:v390SelectedMapPortraitGlow 1.65s ease-in-out infinite !important;
}
@keyframes v390SelectedMapPortraitGlow {
  0%,100% {
    box-shadow:0 0 0 2px rgba(255,242,178,.96),
               0 0 12px 2px rgba(255,206,82,.72),
               0 0 23px 4px rgba(255,187,51,.42);
  }
  50% {
    box-shadow:0 0 0 4px rgba(255,249,209,1),
               0 0 18px 5px rgba(255,217,102,.96),
               0 0 30px 8px rgba(255,193,58,.72);
  }
}
#mapScreen .level-node.selected:not(.journey-node) {
  box-shadow:0 0 0 3px rgba(255,246,185,.86),
             0 0 20px 6px rgba(255,210,73,.70) !important;
}
@media (prefers-reduced-motion:reduce) {
  #mapScreen .journey-map-card .journey-node.selected .node-portrait {
    animation:none !important;
    box-shadow:0 0 0 3px #fff3b8,0 0 21px 5px rgba(255,211,89,.9) !important;
  }
}

/* V391 atmospheric overlays sit above the illustrated scene and below every
   level button. Pointer events are always passed through to the map. */
#mapScreen .journey-map-card{isolation:isolate;}
#mapScreen .journey-map-card > .v391-map-weather{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  display:block!important;z-index:5!important;pointer-events:none!important;
  border-radius:inherit;mix-blend-mode:screen;
}
#mapScreen .journey-map-card > .journey-map-overlay{z-index:12!important;}
#mapScreen .journey-map-card .journey-node{z-index:18!important;}

/* V392: visible, high-contrast weather above artwork, below map controls. */
#mapScreen .journey-map-card > .v391-map-weather {
  z-index:11 !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
  visibility:visible !important;
}
#mapScreen .journey-map-card > .journey-scene-img {
  position:relative;
  z-index:0 !important;
}

/* V393: non-interactive atmospheric layers. Preserve all tracing and battle controls. */
#gameScreen .board-wrap,
#gameScreen .battle-spell-unified .board-battle{position:relative!important;isolation:isolate;}
#gameScreen canvas.v393-weather{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;pointer-events:none!important;touch-action:none!important;user-select:none!important;z-index:12!important;opacity:.36!important;mix-blend-mode:screen!important;border-radius:inherit!important;}
#gameScreen .board-wrap canvas.v393-weather{opacity:.23!important;z-index:15!important;}
#gameScreen .battle-spell-unified .board-battle canvas.v393-weather{opacity:.40!important;}
@media(prefers-reduced-motion:reduce){#gameScreen canvas.v393-weather{display:none!important;}}

/* V394: weather above tile art, with readable contrast on bright tiles. */
#gameScreen #board{position:relative!important;isolation:isolate;}
#gameScreen canvas.v393-weather{display:block!important;mix-blend-mode:normal!important;opacity:.90!important;z-index:40!important;}
#gameScreen .board-wrap canvas.v393-weather{opacity:.90!important;z-index:40!important;}
#gameScreen .battle-spell-unified .board-battle canvas.v393-weather{opacity:.85!important;z-index:40!important;}
@media(prefers-reduced-motion:reduce){#gameScreen canvas.v393-weather{display:none!important;}}