.stat-chips{display:flex;flex-wrap:wrap;gap:6px;font-size:14px}.stat-chips span{background:#403149;border-radius:8px;padding:6px 8px}.gear-section{margin:16px 0;border:1px solid #564361;border-radius:13px;padding:12px}.gear-section summary,.skill-drawer summary{cursor:pointer;font-size:15px;font-weight:700;color:#f6ca72}.gear-section summary small{font-weight:400;margin-left:8px}.gear-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.gear-card{display:flex;flex-direction:column;gap:7px;padding:10px;background:#30263e;border-radius:10px;min-width:0}.gear-card label{font-size:14px;color:#e2cda9}.gear-card small{line-height:1.55}.gear-card .gear-effect{color:#e8dceb;font-size:13px;min-height:36px}.gear-card select,.bag-label select,#levelChoice{color:#fff3dd;background:#241d30;border:1px solid #786180;border-radius:8px;padding:8px;width:100%;min-width:0;font-size:14px}#levelChoice{width:auto}.bag-label{display:flex;align-items:center;gap:12px;font-size:14px}.bag-label select{flex:1}#bagDescription{margin:8px 0 14px}.carry-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.carry-row{border:1px solid #574562;border-radius:12px;padding:11px;background:#30263e;display:grid;gap:7px}.carry-row b{font-size:14px}.carry-row small{line-height:1.5}.qty-row{display:flex;align-items:center;justify-content:space-between;gap:6px}.qty-row button{width:34px;min-height:34px;padding:3px}.qty-row output{font-size:16px;font-weight:700;min-width:28px;text-align:center}.qty-controls{display:flex;align-items:center;gap:5px}#capacityNotice{min-height:24px;margin-top:10px}.over-capacity{color:#ffafa4}.mp-line{display:flex;justify-content:space-between;font-size:12px;color:#b9ddff;margin-top:5px}.mpbar{height:5px;margin-top:3px}.mpbar i{background:linear-gradient(90deg,#6fa9ed,#b3e0ff)}.battle-status{font-size:12px;color:#d9c6e4;line-height:1.5;min-height:18px;margin:0 0 6px}.player{grid-template-columns:auto 1fr}.skill-drawer{border:1px solid #665073;background:#30263de8;border-radius:11px;padding:9px 11px;margin:5px 0 10px}.skill-drawer summary{display:flex;justify-content:space-between;gap:8px}.skill-drawer summary span{font-size:12px;font-weight:400}.skill-drawer summary::after{content:"＋"}.skill-drawer[open] summary::after{content:"−"}.skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:9px}.skill-button{text-align:left;padding:8px;min-height:65px;display:grid;gap:4px;background:#42324e}.skill-button b{font-size:13px;display:flex;justify-content:space-between;gap:5px}.skill-button small{font-size:12px;line-height:1.4}.inventory-title{font-size:13px;margin-bottom:7px}.items{grid-template-columns:repeat(2,minmax(0,1fr))}.item small{white-space:normal;font-size:12px}.item b{font-size:13px}.item{min-width:0;min-height:58px}.tile.item-pick{outline:3px solid #f6ca72;outline-offset:-3px}.damage-float.support{color:#a8ecca}.empty-inventory{font-size:13px;color:#c7b7cf;grid-column:1/-1}.preview{height:auto;min-height:56px}.preview span{line-height:1.5}.setup-footer{position:sticky;bottom:0;background:#251e33f5;padding:12px 0;z-index:1}.in-battle .board-heading{display:flex}.board-heading{font-size:12px}.game-foot{flex-wrap:wrap}.game{overflow:hidden}
@media(max-width:480px){.gear-grid{grid-template-columns:1fr}.gear-section{padding:10px}.setup{padding:15px 12px}.carry-grid{gap:6px}.carry-row{padding:9px}.carry-row .qty-row{flex-wrap:wrap}.setup .row.between{align-items:flex-start;gap:10px}.stat-chips{justify-content:flex-end}.board{max-width:360px;width:100%}.skill-button{min-height:72px}.game-foot #gestureHint{width:100%}}
.enemies{display:flex;justify-content:center;align-items:center;gap:5px;min-height:112px;padding-top:8px}.enemy-slot{flex:0 1 76px;min-width:0}.enemy{height:104px;grid-template-rows:1fr 4px 20px;padding:9px 0 0}.enemy-art{width:52px;height:52px}.enemy .mini-bar{width:80%;height:4px}.enemy-turn{top:0;right:0;width:24px;height:24px}.enemy-element{position:absolute;top:1px;left:0;min-width:23px;height:23px;border-radius:7px;border:1px solid currentColor;background:#241c30;font-size:13px;line-height:21px;font-weight:800}.enemy-element.fire,.affinity-guide .fire{color:#ffb486}.enemy-element.ice,.affinity-guide .ice{color:#a9e5ff}.enemy-element.thunder,.affinity-guide .thunder{color:#e8c5ff}.enemy-prediction{grid-row:3;font-size:12px;line-height:1.2;color:#ffe3a0;white-space:normal;min-height:15px}.affinity-guide{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px;margin:0 0 8px;color:#c5b1d6}.affinity-guide small{margin-left:auto;font-size:12px}.target-info{line-height:1.5;min-height:28px}.preview{min-height:70px}.legend>div{display:block}.legend small{margin-top:4px}
@media(max-width:380px){.enemy-art{width:44px;height:44px}.enemies{gap:3px}.enemy-element{min-width:21px;height:21px;line-height:19px}.enemy-turn{width:22px;height:22px}.affinity-guide{gap:5px}.affinity-guide small{font-size:12px}}

/* Keep the enemy line on the visible ground plane of the ruins. */
.game::before{background-position:center -18px}
.enemies{min-height:160px;align-items:flex-end;padding-top:12px;padding-bottom:7px;gap:8px}
.enemy-slot{align-self:stretch;display:grid;place-items:end center}
.enemy{height:128px;padding-top:0;padding-bottom:8px}
.enemy-art{width:64px;height:64px}
.enemy-guard .enemy-art,.enemy-boss .enemy-art{width:84px;height:84px}
.enemy-caller .enemy-art{width:72px;height:72px}
@media(max-width:380px){.enemies{min-height:148px;padding-top:8px;padding-bottom:6px;gap:4px}.enemy{height:116px}.enemy-art{width:58px;height:58px}.enemy-guard .enemy-art,.enemy-boss .enemy-art{width:76px;height:76px}.enemy-caller .enemy-art{width:64px;height:64px}}

/* Let the ruins remain visible behind the enemy line and place the witch above it. */
.arena{background:transparent;border-color:transparent}
.arena-foot{text-shadow:0 1px 3px #17111e}
.arena-avatar{position:absolute;top:2px;left:4px;z-index:3;width:50px;height:50px;border-radius:13px}
.player{grid-template-columns:minmax(0,1fr) auto}
@media(max-width:380px){.arena-avatar{width:44px;height:44px;border-radius:11px}}

/* Battle composition: HUD, flexible scenery, controls, full-width board, scenery footer. */
body.in-battle { background:#172217 url('assets/ruins-background.png') center / cover fixed; overflow:hidden; }
/* Budget = HUD .2383 + board 1.0227 + controls .155 + arena .64.
   Reserve fixed UI height and safe areas before fitting the game width. */
.in-battle .wrap {
  width:min(100%,560px,calc((100dvh - max(4px,env(safe-area-inset-top)) - max(2px,env(safe-area-inset-bottom)) - 56px) / 2.056));
  max-width:none; padding:0; margin-inline:auto;
}
.in-battle .layout { display:block; max-width:none; }
.in-battle .mast, .in-battle .aside { display:none; }
.in-battle .game {
  container-type:inline-size;
  display:flex; flex-direction:column;
  height:100dvh; min-height:0;
  padding:max(4px,env(safe-area-inset-top)) 0 max(2px,env(safe-area-inset-bottom));
  border:0; border-radius:0; background:#536d38; box-shadow:0 0 80px #0008;
}
.in-battle .game::before {
  inset:0; aspect-ratio:auto; mask-image:none; opacity:1;
  background:url('assets/ruins-background.png') center center / cover no-repeat;
}
.in-battle .battle-hud {
  flex:none; position:relative; z-index:4; width:100%; aspect-ratio:1280 / 305;
  min-height:0; padding:0; color:#fff5de;
  background:url('assets/ui/battle-hud-v2.png') center / 100% 100% no-repeat;
}
.battle-hud::before, .battle-hud::after { content:none; }
.in-battle .battle-portrait {
  position:absolute; z-index:1; left:4.15%; top:24.1%; width:15.3%;
  height:auto; aspect-ratio:1; border:0; border-radius:50%;
  background:#392919; box-shadow:none; overflow:hidden; display:block;
}
.in-battle .battle-portrait img {
  position:absolute; width:124%; height:auto; max-width:none; left:-12%; top:-9%;
}
.hud-panel {
  position:absolute; left:24%; right:20%; top:31%; min-width:0; padding:0;
  text-shadow:0 1px 2px #1d1009;
}
.hud-resources { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:start; }
.hud-resource {
  min-width:0; display:grid;
  /* Japanese and Latin glyphs have different natural line boxes; share explicit rows. */
  grid-template-rows:clamp(15px,4.7cqw,25px) 2.15cqw; row-gap:2px;
}
.hud-resource > div:first-child { display:flex; justify-content:space-between; align-items:center; gap:3px; height:100%; line-height:1; white-space:nowrap; }
.hud-resource b { line-height:1; font-size:clamp(10px,3.3cqw,18px); font-weight:600; }
.hud-resource span { line-height:1; font-size:clamp(10px,3.1cqw,17px); font-variant-numeric:tabular-nums; }
.hud-bar { height:100%; min-height:0; margin-top:0; border-radius:99px; background:#24100d; box-shadow:inset 0 1px 3px #0008; overflow:hidden; }
.hud-bar i { display:block; height:100%; border-radius:inherit; transition:width .25s; }
.hud-bar.hpbar i { background:linear-gradient(#ff7b92,#f74766); }
.hud-bar.mpbar { background:#103e4b; }
.hud-bar.mpbar i { background:linear-gradient(#73dcf9,#23bada); }
.hud-context { display:flex; justify-content:space-between; align-items:center; gap:4px; margin-top:1px; padding-top:0; border-top:1px solid #cbaf753b; font-size:clamp(10px,2.65cqw,15px); line-height:1.2; white-space:nowrap; }
.hud-meta { display:none; }
.hud-menu {
  position:absolute; right:4.4%; top:30%; width:12.5%; height:53%;
  display:grid; place-content:center; gap:2px; min-height:0; padding:0;
  border:0; border-radius:8px; background:none; box-shadow:none;
}
.hud-menu > span { font-size:clamp(22px,6.8cqw,36px); line-height:1; }
.hud-menu small { color:#fff3d4; font-size:clamp(10px,2.2cqw,12px); }
.in-battle .arena {
  container-type:size; flex:1; min-height:0; width:100%;
  padding:0; overflow:hidden; border:0; border-radius:0; background:none;
}
.in-battle .enemies {
  position:absolute; inset:0; display:block; width:100%; height:auto; min-height:0; padding:0;
}
.in-battle .enemy-slot {
  position:absolute; bottom:10px; width:var(--enemy-ui-width); max-width:none;
  min-width:0; transform:translateX(-50%); display:flex; justify-content:center;
}
.in-battle .enemy {
  position:relative; width:100%; min-height:44px; height:auto; display:flex;
  flex-direction:column; align-items:center; justify-content:flex-end; gap:4px;
  padding:0 0 24px; border:0; color:#fff5dc; overflow:visible;
}
.in-battle .enemy .enemy-art {
  display:block; width:var(--enemy-art-width); height:auto; max-width:none; max-height:none;
  aspect-ratio:auto; object-fit:contain; object-position:center bottom;
  background:none; pointer-events:none; flex:none;
}
.in-battle .enemy-vitals {
  /* The badge overlaps the bar by 4px; bottom padding preserves sprite height. */
  --turn-size:clamp(14px,5.1282cqw,20px);
  position:relative; width:100%; max-width:180px; height:14px; flex:none;
  padding-left:calc(var(--turn-size) - 4px);
}
.in-battle .enemy .mini-bar {
  display:block; position:relative; width:100%; height:14px;
  border:1px solid #cbb781; border-radius:4px; background:#252222;
  box-shadow:0 1px 3px #0009; overflow:hidden;
}
.enemy .mini-bar i { background:linear-gradient(#bfc8c0,#818c83); }
.enemy[data-element=fire] .mini-bar i { background:linear-gradient(#ffb078,#e94b32); }
.enemy[data-element=ice] .mini-bar i { background:linear-gradient(#84eaff,#219acb); }
.enemy[data-element=thunder] .mini-bar i { background:linear-gradient(#d2a0ff,#9554d8); }
.in-battle .enemy-turn {
  position:absolute; top:50%; left:0; bottom:auto; right:auto; transform:translateY(-50%);
  width:var(--turn-size); height:var(--turn-size); font-size:clamp(10px,3.0769cqw,12px); font-variant-numeric:tabular-nums;
  background:#352d1e; border:1px solid #bea56c; border-radius:50%;
}
.in-battle .enemy-turn.due { background:#843523; }
.in-battle .enemy-prediction { position:absolute; bottom:0; left:calc(50% + 15px); font-size:10px; }
.in-battle .enemy.selected .mini-bar { outline:2px solid #fff0a2; outline-offset:1px; }
.in-battle .enemy.selected .enemy-turn { outline:2px solid #fff0a2; outline-offset:1px; }
.in-battle #targetInfo, .in-battle .affinity-guide, .in-battle .arena-foot,
.in-battle #preview, .in-battle .game-foot, .in-battle .board-heading { display:none; }
.battle-quick-actions {
  position:relative; z-index:5; display:flex; flex:none; justify-content:center;
  /* Attach controls to the board's top frame, clear of the first puzzle row. */
  gap:5%; width:100%; padding:0; margin:0 0 -7cqw;
}
.battle-quick-actions:has(> .battle-action:nth-of-type(5)) { gap:2%; }
.command-frame { position:absolute; z-index:0; pointer-events:none; left:0; right:0; bottom:-9cqw; height:14.2315cqw; display:grid; grid-template-columns:15.56% minmax(0,1fr) 15.56%; }
.command-frame img { display:block; width:100%; height:100%; }
.battle-quick-actions::before { content:none; }
.battle-quick-actions::after { content:none; }
.battle-action {
  position:relative; z-index:1; display:grid; place-items:center; width:max(44px,15.5%); flex:none; aspect-ratio:1;
  min-height:44px; padding:0; border:0; border-radius:50%; background:none;
}
.battle-action::before { content:""; position:absolute; pointer-events:none; width:112%; aspect-ratio:950 / 960; left:-6%; top:-5%; background:url('assets/ui/battle-controls-socket.png') center / contain no-repeat; }
.battle-action > span:last-of-type, .battle-action b { display:none; }
.action-icon {
  position:relative; display:block; width:82%; height:82%; background-image:url('assets/ui/battle-actions-v2.png');
  background-size:300% 100%; background-repeat:no-repeat;
  filter:drop-shadow(0 2px 2px #211707);
}
.icon-skills { background-position:0 50%; }
.icon-items { background-position:50% 50%; }
.icon-status { background-position:100% 50%; }
.battle-action[aria-expanded=true] .action-icon { filter:drop-shadow(0 0 2px #fff1a2) drop-shadow(0 0 5px #ffd333); }
.battle-action:active { transform:scale(.95); }
.in-battle .board {
  position:relative; z-index:2; flex:none; width:100%; max-width:none;
  /* One uniformly scaled image, not sliced borders: flowers and vines keep their shape. */
  aspect-ratio:1191 / 1218; margin:0; padding:10.55% 10.15% 11% 9.6%; gap:.65%;
  border:0; border-image:none; border-radius:0;
  background:url('assets/ui/battle-board-connected-v2.png') center / contain no-repeat;
  grid-template-rows:repeat(6,minmax(0,1fr));
}
.in-battle .board .tile {
  background:none; box-shadow:none; border:0; border-radius:6px;
}
.in-battle .board .tile .material-art { width:96%; height:96%; background-image:url('assets/ui/battle-materials-fitted.png'); filter:drop-shadow(0 2px 2px #1d100a99); }
.in-battle .board .tile .count { display:none; }
.in-battle .board .tile.lit { outline:3px solid #fff0a5; outline-offset:-2px; box-shadow:0 0 10px #ffcf58; }
.battle-sheet {
  position:absolute; z-index:12; inset:auto 0 0; max-height:57%; display:flex; flex-direction:column;
  padding:0 12px max(14px,env(safe-area-inset-bottom)); border:3px solid #c29a60; border-bottom:0;
  border-radius:20px 20px 0 0; background:linear-gradient(110deg,#e3c995,#f6e4bd 45%,#d1ae77);
  box-shadow:0 -8px 25px #1d130b77,inset 0 0 0 2px #624026; color:#fff4dc;
  animation:sheet-in .18s ease-out;
}
.sheet-grabber, .sheet-help, #sheetKicker { display:none; }
.sheet-head {
  flex:none; position:relative; display:flex; justify-content:center; align-items:center;
  min-height:61px; margin:0 -12px 10px; padding:10px 55px;
  background:repeating-linear-gradient(2deg,#ffffff03 0 1px,transparent 1px 9px),linear-gradient(100deg,#49301c,#684527 48%,#40291a);
  border-bottom:3px solid #bd955b; border-radius:16px 16px 0 0;
}
.sheet-head h2 { font-size:25px; letter-spacing:.12em; text-shadow:0 2px 2px #211108; }
.sheet-close { position:absolute; right:8px; top:8px; width:44px; height:44px; min-height:44px; padding:0; border:2px solid #e1b778; border-radius:50%; background:#513822; box-shadow:inset 0 0 0 2px #24170d,0 2px 3px #34200b; color:#fff6d5; font-size:29px; line-height:1; }
.sheet-close::after { content:""; position:absolute; left:50%; top:50%; width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translate(-50%,-75%) rotate(45deg); }
.sheet-panel { overflow-y:auto; overscroll-behavior:contain; min-height:0; scrollbar-color:#b18b52 #f1d9ad; scrollbar-width:thin; padding:2px; }
.in-battle .skills, .in-battle .items { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin:0; }
.in-battle .skill-button, .in-battle .item {
  display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:4px 10px;
  min-height:80px; min-width:0; padding:10px; border:2px solid #ac814c; border-radius:10px;
  background:radial-gradient(ellipse at top,#755232,#3c2819); box-shadow:inset 0 0 0 2px #e0b67b44,0 1px 2px #6b492f;
  text-align:left; color:#fff4db;
}
.in-battle .skill-button b, .in-battle .item b { display:block; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.in-battle .skill-button b { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; }
.in-battle .skill-button b span { font-size:12px; font-weight:400; color:#a5eaff; }
.in-battle .skill-button small, .in-battle .item small { display:block; margin:0; font-size:12px; line-height:1.6; color:#fff0d2; overflow-wrap:anywhere; }
.in-battle .skill-button > b, .in-battle .skill-button > small { grid-column:2; }
.in-battle .skill-button > .skill-art { grid-column:1; grid-row:1 / span 3; align-self:center; }
.in-battle .skill-button > small:last-child { color:#d9c3a0; font-size:11px; }
.in-battle .item > span:last-child { min-width:0; display:grid; gap:4px; }
.in-battle .skill-button:disabled, .in-battle .item:disabled { opacity:.75; }
.skill-art, .in-battle .item .item-icon {
  width:44px; height:44px; display:block; background-position:center; background-size:contain; background-repeat:no-repeat;
  filter:drop-shadow(0 2px 3px #211306); font-size:0;
}
.skill-art.focus { background-image:url('assets/home/icons/crystal-orb.png'); }
.skill-art.heal, .skill-art.reserve { background-image:url('assets/home/icons/potion.png'); }
.skill-art.spark, .skill-art.fireBoost { background-image:url('assets/home/icons/fire-wand.png'); }
.skill-art.aim { background-image:url('assets/home/icons/compass.png'); }
.skill-art.barrier, .skill-art.delay { background-image:url('assets/home/icons/star-wand.png'); }
.in-battle .item[data-item=potion] .item-icon, .in-battle .item[data-item=ether] .item-icon, .in-battle .item[data-item=extract] .item-icon { background-image:url('assets/home/icons/potion.png'); }
.in-battle .item[data-item=ether] .item-icon { filter:hue-rotate(160deg) drop-shadow(0 2px 3px #211306); }
.in-battle .item[data-item=gather] .item-icon { background-image:url('assets/home/icons/pochette.png'); }
.in-battle .item[data-item=convert] .item-icon { background-image:url('assets/home/icons/cauldron.png'); }
.in-battle .item[data-item=swap] .item-icon { background-image:url('assets/home/icons/compass.png'); }
.in-battle .item.armed { border-color:#ffe780; box-shadow:0 0 8px #e8ac3c; }
.status-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.status-card { padding:12px; background:#49321f; border:2px solid #a57d4c; border-radius:8px; }
.status-card.wide { grid-column:1/-1; }
.status-card small { display:block; font-size:11px; color:#dabb8b; }
.status-card b { display:block; margin-top:5px; font-size:13px; line-height:1.6; }
/* The result is a body child, so the narrow battle container cannot clip its backdrop. */
body > #resultOverlay {
  position:fixed; inset:0; z-index:20; width:auto; height:auto;
  padding:max(25px,env(safe-area-inset-top)) max(25px,env(safe-area-inset-right)) max(25px,env(safe-area-inset-bottom)) max(25px,env(safe-area-inset-left));
  overflow:hidden;
}
body > #resultOverlay .result-card { min-height:0; max-height:100%; overflow-y:auto; overscroll-behavior:contain; }
body:not(.in-battle) > #resultOverlay { display:none; }
.in-battle .damage-float { z-index:11; }
@keyframes sheet-in { from { transform:translateY(100%); } to { transform:translateY(0); } }
@media(max-width:359px) {
  .hud-resources { gap:5px; }
  .hud-resource b { font-size:10px; }
  .hud-resource span, .hud-context { font-size:10px; }
}
@media(max-width:380px) { .hud-menu small { display:none; } }
.sheet-head::before { content:none; }
@media(max-height:740px) {

  .in-battle .arena { padding-top:0; }
  .skill-art { width:44px; height:44px; }
}