/*
 * Character-development layout inspired by the proven three-zone structure
 * of large-screen RPG character menus. All imagery, wording and visual tokens
 * remain original to 万千心途.
 */
:root{
  --top:54px;
  --bottom:46px;
  --portrait-rail:66px;
  --function-rail:116px;
  --detail-width:43vw;
  --menu-white:#f4f1e8;
  --menu-soft:rgba(244,241,232,.72);
  --menu-faint:rgba(244,241,232,.38);
  --menu-line:rgba(244,241,232,.18);
  --resonance:#77d3ca;
}

#app{
  background:
    radial-gradient(circle at 40% 42%,rgba(98,178,176,.26),transparent 26%),
    radial-gradient(circle at 28% 90%,rgba(189,149,102,.13),transparent 32%),
    linear-gradient(118deg,#14252a 0%,#172b30 36%,#102027 61%,#0b141b 100%);
}
#app::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.32;
  pointer-events:none;
  background:
    linear-gradient(112deg,transparent 0 39.8%,rgba(255,255,255,.13) 40%,transparent 40.2%),
    linear-gradient(30deg,transparent 0 56%,rgba(255,255,255,.09) 56.2%,transparent 56.5%),
    radial-gradient(circle at 16% 24%,rgba(255,255,255,.65) 0 1px,transparent 1.5px),
    radial-gradient(circle at 31% 16%,rgba(255,255,255,.48) 0 1px,transparent 1.5px),
    radial-gradient(circle at 52% 26%,rgba(255,255,255,.4) 0 1px,transparent 1.5px);
}
.backdrop{opacity:.22;background-size:122px 122px}
.backdrop i{border-color:rgba(224,246,243,.14)}
.backdrop i:nth-child(2){border-color:rgba(244,219,166,.1)}

/* Top status bar */
.topbar{
  height:calc(var(--top) + env(safe-area-inset-top));
  gap:6px;
  border-bottom:0;
  background:linear-gradient(180deg,rgba(7,15,20,.72),transparent);
  backdrop-filter:none;
}
.brand{min-width:148px;border:0}
.brand small{color:var(--menu-faint)}
.brand strong{font-size:14px}
.resource-bar{margin-left:auto;order:4}
.top-spacer{display:none}
.slot-state{order:3;border-left:0;border-right:1px solid var(--menu-line)}
.resource-bar button{
  border-radius:24px;
  background:rgba(3,10,14,.25);
}
.topbar>.icon-btn:last-child{order:5}

/* Character selector: compact portrait column */
.character-rail{
  z-index:14;
  width:calc(var(--portrait-rail) + env(safe-area-inset-left));
  padding:10px 7px 7px max(7px,env(safe-area-inset-left));
  border-right:0;
  background:linear-gradient(90deg,rgba(5,12,17,.66),transparent);
}
.rail-title{display:none}
.character-list{gap:5px;padding:2px 0}
.portrait-tab{
  width:52px;
  height:52px;
  justify-self:center;
  padding:2px;
  border-radius:50%;
  background:rgba(8,17,22,.5);
}
.portrait-tab::after{
  content:"";
  position:absolute;
  inset:1px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  pointer-events:none;
}
.portrait-tab img{border-radius:50%;object-position:center 16%}
.portrait-tab span{display:none}
.portrait-tab.active{
  border-color:#f4dfac;
  box-shadow:0 0 0 2px rgba(244,223,172,.2),0 0 22px rgba(244,223,172,.2);
}
.portrait-tab i{right:2px;top:2px;width:8px;height:8px;border:1px solid #152127}
.rail-all{
  width:48px;
  border:0;
  border-radius:50%;
  color:var(--menu-soft);
  background:rgba(3,10,14,.32);
}

/* Full-height function directory, matching the RPG character-menu rhythm. */
.section-tabs{
  position:fixed;
  z-index:13;
  left:calc(var(--portrait-rail) + env(safe-area-inset-left) + 6px);
  top:calc(var(--top) + env(safe-area-inset-top) + 12px);
  bottom:calc(var(--bottom) + env(safe-area-inset-bottom) + 12px);
  width:var(--function-rail);
  height:auto;
  padding:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  overflow:visible;
  border:0;
  background:transparent;
}
.section-tabs button{
  min-width:0;
  width:100%;
  min-height:46px;
  padding:0 8px 0 39px;
  color:var(--menu-soft);
  font-size:10px;
  letter-spacing:.08em;
  text-align:left;
  border-radius:3px;
  transition:background .18s,color .18s,transform .18s;
}
.section-tabs button::before{
  position:absolute;
  left:12px;
  top:50%;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  border:1px solid currentColor;
  border-radius:50%;
  font:500 10px/1 "DM Mono",monospace;
  opacity:.78;
}
.section-tabs button[data-tab="growth"]::before{content:"◇"}
.section-tabs button[data-tab="stages"]::before{content:"✦"}
.section-tabs button[data-tab="memory"]::before{content:"◐"}
.section-tabs button[data-tab="visits"]::before{content:"↟"}
.section-tabs button[data-tab="rewards"]::before{content:"✧"}
.section-tabs button[data-tab="heartlife"]::before{content:"⌂"}
.section-tabs button::after{display:none}
.section-tabs button:hover{color:var(--menu-white);transform:translateX(2px)}
.section-tabs button.active{
  color:#243238;
  background:linear-gradient(90deg,rgba(247,244,235,.96),rgba(247,244,235,.72));
  text-shadow:none;
  box-shadow:0 4px 18px rgba(0,0,0,.16);
}
.section-tabs button.active::before{color:#27383d;border-color:#27383d}

/* Character is the center of the screen, not a framed card. */
.character-card{
  left:calc(var(--portrait-rail) + var(--function-rail) + env(safe-area-inset-left) + 12px);
  top:calc(var(--top) + env(safe-area-inset-top));
  bottom:calc(var(--bottom) + env(safe-area-inset-bottom));
  width:calc(57vw - var(--portrait-rail) - var(--function-rail));
  min-width:230px;
  max-width:none;
  overflow:visible;
  border:0;
  background:transparent;
}
.character-card::before{
  content:"";
  position:absolute;
  left:8%;
  right:2%;
  bottom:2%;
  height:13%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(108,220,210,.25),transparent 68%);
  filter:blur(12px);
}
.character-card>img{
  inset:-5% -4% -3%;
  width:108%;
  height:108%;
  object-fit:cover;
  object-position:center 15%;
  filter:saturate(.82) contrast(1.04) brightness(.93) drop-shadow(0 24px 35px rgba(0,0,0,.34));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 88%,transparent 100%),linear-gradient(0deg,transparent 0,#000 9%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 88%,transparent 100%),linear-gradient(0deg,transparent 0,#000 9%,#000 100%);
  mask-composite:intersect;
}
.card-frame{display:none}
.card-shade{
  inset:auto -8% 0;
  height:40%;
  background:linear-gradient(0deg,rgba(10,21,27,.82),transparent);
}
.world-mark{
  left:18px;
  top:14px;
  padding:0;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.65);
  font-size:9px;
}
.card-identity{left:24px;right:18px;bottom:22px}
.card-identity small{font-size:9px;color:#f1d99f}
.card-identity h1{margin:3px 0 4px;font-size:clamp(32px,4vw,54px);letter-spacing:.11em}
.card-identity p{max-width:330px;color:rgba(255,255,255,.72)}
.primary-resonance{
  right:10px;
  top:11px;
  min-height:44px;
  border:0;
  background:rgba(7,17,22,.38);
  backdrop-filter:blur(7px);
}

/* Right detail area: hierarchy first, containers secondary. */
.development-panel{
  left:auto;
  right:0;
  top:calc(var(--top) + env(safe-area-inset-top));
  bottom:calc(var(--bottom) + env(safe-area-inset-bottom));
  width:var(--detail-width);
  min-width:420px;
  display:block;
  overflow:hidden;
  border-left:0;
  background:linear-gradient(90deg,transparent,rgba(5,13,18,.27) 14%,rgba(5,13,18,.64));
}
.tab-content{
  position:absolute;
  inset:0;
  padding:34px 34px 60px 32px;
  scrollbar-color:rgba(255,255,255,.2) transparent;
}
.eyebrow{color:rgba(239,217,161,.82)}
.page-head h2{font-size:clamp(25px,2.5vw,36px);text-shadow:0 2px 15px rgba(0,0,0,.28)}
.status-badge{
  border:0;
  color:var(--menu-soft);
  background:rgba(6,15,20,.38);
}
.level-block{margin-top:18px}
.level-row span{font-size:10px;color:var(--menu-soft)}
.level-row strong{font-size:32px}
.level-track{height:4px;background:rgba(255,255,255,.14)}
.level-track>i{background:linear-gradient(90deg,#b9eee8,#f0d89c)}
.growth-grid{margin-top:18px;gap:0;border-top:1px solid var(--menu-line);border-bottom:1px solid var(--menu-line)}
.state-card,.next-card{
  min-height:92px;
  padding:13px 14px;
  border:0;
  border-radius:0;
  background:rgba(7,16,21,.16);
}
.state-card{border-right:1px solid var(--menu-line)}
.state-card strong,.next-card strong{font-size:14px}
.reward-preview{
  border:0;
  border-radius:0;
  border-bottom:1px solid var(--menu-line);
  background:rgba(7,16,21,.13);
}
.reward-preview>div{border:0;background:rgba(255,255,255,.035)}
.growth-actions{
  position:sticky;
  bottom:-48px;
  margin-top:14px;
  padding-top:8px;
  background:linear-gradient(0deg,rgba(8,17,22,.92),transparent);
}
.plain-button,.gold-button{
  min-height:46px;
  border-radius:24px;
  font-size:11px;
}
.gold-button{
  min-width:176px;
  border-color:rgba(244,224,174,.68);
  color:#263337;
  background:linear-gradient(180deg,#f6e7bd,#ddbd78);
  box-shadow:0 3px 12px rgba(0,0,0,.22);
}
.plain-button{border-color:rgba(255,255,255,.27);background:rgba(7,15,20,.36)}
.micro-log{border-top:0;color:var(--menu-faint)}

/* Other menu pages keep the same list language as character talents/constellations. */
.stage-list,.archive-list,.visit-list,.life-list{gap:0;margin-top:16px;border-top:1px solid var(--menu-line)}
.stage-row,.archive-row,.visit-row,.life-row{
  min-height:62px;
  padding:9px 4px;
  border:0;
  border-bottom:1px solid var(--menu-line);
  border-radius:0;
  background:transparent;
}
.stage-row.current,.life-row.current{background:linear-gradient(90deg,rgba(117,211,202,.1),transparent)}
.stage-num,.archive-icon,.visit-icon,.life-num{background:rgba(6,15,20,.32)}
.base-rewards{border:0;border-radius:0;border-bottom:1px solid var(--menu-line);background:transparent}
.reward-catalog{grid-template-columns:1fr;gap:0;border-top:1px solid var(--menu-line)}
.reward-pack{
  min-height:78px;
  border:0;
  border-bottom:1px solid var(--menu-line);
  border-radius:0;
  background:transparent;
}
.reward-pack.current{background:linear-gradient(90deg,rgba(117,211,202,.1),transparent)}
.life-summary,.life-level{border:0;border-radius:0;border-bottom:1px solid var(--menu-line);background:rgba(7,16,21,.14)}
.life-actions{gap:6px}.life-action{border-color:var(--menu-line);background:rgba(7,16,21,.24)}

/* The route footer behaves like a small account/character status footer. */
.flow-footer{
  height:calc(var(--bottom) + env(safe-area-inset-bottom));
  border-top:0;
  background:linear-gradient(0deg,rgba(5,12,17,.76),transparent);
}
.flow-footer>button:first-child{border-right:0}
.reset-button{border:1px solid rgba(255,255,255,.16);border-radius:22px}

.modal{
  border-color:rgba(245,231,194,.36);
  border-radius:8px;
  background:linear-gradient(145deg,rgba(31,43,47,.99),rgba(12,22,27,.99));
}
.choice-card{border-radius:5px;background:rgba(255,255,255,.045)}
.choice-card.selected{border-color:#efd89c;background:rgba(239,216,156,.1)}
.result-card{border-color:rgba(241,217,155,.42);background:rgba(17,31,36,.9)}

/* Right-side character development interactions. */
.attribute-page{min-height:100%;display:flex;flex-direction:column}
.attribute-level{margin-top:18px;padding-bottom:13px;border-bottom:1px solid var(--menu-line)}
.attribute-level>span{color:var(--menu-soft);font-size:10px}
.attribute-level>div:nth-child(2){display:flex;align-items:flex-end;gap:7px;margin-top:3px}
.attribute-level strong{font:500 29px/1 "DM Mono",monospace}.attribute-level em{color:var(--menu-faint);font:400 11px "DM Mono",monospace;font-style:normal}
.attribute-level .level-track{margin-top:10px}
.attribute-stats{padding:8px 0;border-bottom:1px solid var(--menu-line)}
.attribute-stats>div{min-height:29px;padding:3px 2px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.attribute-stats span{color:var(--menu-soft);font-size:10px}.attribute-stats b{font:500 11px "DM Mono",monospace}
.detail-link{align-self:flex-end;min-height:44px;padding:0 2px 0 14px;border:0;background:transparent;color:var(--menu-soft);font-size:10px}
.detail-link span{margin-left:8px;font-size:18px;vertical-align:-1px}
.breakthrough-strip{min-height:52px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid rgba(239,216,156,.2);background:linear-gradient(90deg,rgba(239,216,156,.08),transparent)}
.breakthrough-strip small,.breakthrough-strip strong{display:block}.breakthrough-strip small{color:var(--menu-faint);font-size:8px}.breakthrough-strip strong{margin-top:3px;font-size:11px;font-weight:500}
.breakthrough-material{display:flex;align-items:center;justify-content:flex-end;gap:6px;color:var(--menu-soft);font-size:9px}.breakthrough-material .item{width:10px;height:10px}.breakthrough-material b{font-size:9px}
.attribute-page .growth-actions,.life-rank~.growth-actions{position:fixed;z-index:8;right:18px;bottom:calc(var(--bottom) + env(safe-area-inset-bottom) + 4px);width:calc(var(--detail-width) - 36px);margin:0;padding:7px 0 0;background:linear-gradient(0deg,rgba(7,16,21,.98) 38%,transparent)}

.stage-orbit{position:relative;margin-top:9px;padding:4px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 12px}
.stage-orbit::before{content:"";position:absolute;left:50%;top:12px;bottom:12px;width:1px;background:linear-gradient(transparent,rgba(119,211,202,.45),rgba(239,216,156,.35),transparent)}
.stage-sigil{position:relative;z-index:1;min-height:58px;padding:5px 7px;display:grid;grid-template-columns:38px 1fr;grid-template-rows:1fr 1fr;column-gap:8px;text-align:left;border:1px solid var(--menu-line);border-radius:5px;background:rgba(5,14,18,.34)}
.stage-sigil i{grid-row:1/3;width:36px;height:36px;align-self:center;display:grid;place-items:center;transform:rotate(45deg);border:1px solid var(--menu-line);background:rgba(8,20,25,.86)}
.stage-sigil i span{transform:rotate(-45deg);font:500 9px "DM Mono",monospace}.stage-sigil b{align-self:end;font-size:10px;font-weight:500}.stage-sigil small{align-self:start;color:var(--menu-faint);font-size:8px}
.stage-sigil.done{border-color:rgba(239,216,156,.36)}.stage-sigil.done i{border-color:#efd89c;color:#efd89c;box-shadow:0 0 12px rgba(239,216,156,.16)}
.stage-sigil.current{border-color:rgba(119,211,202,.54);background:rgba(119,211,202,.08)}.stage-sigil.current i{border-color:var(--resonance);color:var(--resonance);box-shadow:0 0 13px rgba(119,211,202,.22)}
.stage-sigil.locked{opacity:.48}
.orbit-hint{margin-top:7px;padding-top:7px;display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--menu-line);color:var(--menu-faint);font-size:8px}.orbit-hint b{color:var(--menu-soft);font-weight:500}

.memory-loadout{position:relative;margin-top:11px;padding-left:74px;display:grid;gap:5px}
.memory-core{position:absolute;left:5px;top:50%;width:54px;height:54px;display:grid;place-items:center;transform:translateY(-50%);border:1px solid rgba(201,151,210,.5);border-radius:50%;background:radial-gradient(circle,rgba(201,151,210,.18),rgba(5,14,18,.7));box-shadow:0 0 20px rgba(201,151,210,.12)}
.memory-core i{position:absolute;inset:8px;transform:rotate(45deg);border:1px solid rgba(201,151,210,.34)}.memory-core strong{font:500 16px "DM Mono",monospace}.memory-core small{position:absolute;top:58px;width:70px;text-align:center;color:var(--menu-faint);font-size:8px}
.memory-slot{min-height:48px;padding:5px 8px;display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;text-align:left;border:1px solid var(--menu-line);border-radius:5px;background:rgba(5,14,18,.3)}
.memory-slot>i{width:28px;height:28px;display:grid;place-items:center;transform:rotate(45deg);border:1px solid var(--menu-line);font:500 8px "DM Mono",monospace;font-style:normal}.memory-slot>i::first-line{transform:rotate(-45deg)}
.memory-slot span strong,.memory-slot span small{display:block}.memory-slot span strong{font-size:10px;font-weight:500}.memory-slot span small{margin-top:2px;color:var(--menu-faint);font-size:8px}.memory-slot em{color:var(--menu-faint);font:400 8px "DM Mono",monospace;font-style:normal}
.memory-slot.available{border-color:rgba(119,211,202,.4)}.memory-slot.equipped{border-color:rgba(201,151,210,.46);background:rgba(201,151,210,.07)}.memory-slot.locked{opacity:.48}

.talent-list,.ability-list{margin-top:11px;display:grid;gap:5px}
.talent-row,.ability-row{min-height:52px;padding:6px 8px;display:grid;grid-template-columns:36px 1fr auto;gap:9px;align-items:center;text-align:left;border:1px solid var(--menu-line);border-radius:5px;background:rgba(5,14,18,.28)}
.talent-row>i,.ability-row>i{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--menu-line);border-radius:50%;font:500 9px "DM Mono",monospace;font-style:normal}
.talent-row span strong,.talent-row span small,.ability-row span strong,.ability-row span small{display:block}.talent-row span strong,.ability-row span strong{font-size:10px;font-weight:500}.talent-row span small,.ability-row span small{margin-top:2px;color:var(--menu-faint);font-size:8px}.talent-row>em,.ability-row>em{color:var(--menu-faint);font:400 8px "DM Mono",monospace;font-style:normal;white-space:nowrap}
.talent-row.current,.ability-row.unlocked{border-color:rgba(119,211,202,.4);background:rgba(119,211,202,.06)}.talent-row.done{border-color:rgba(239,216,156,.34)}.talent-row.done>i,.ability-row.unlocked>i{border-color:var(--resonance);color:var(--resonance)}.talent-row.locked,.ability-row.locked{opacity:.48}
.talent-note{margin-top:8px;padding-top:7px;border-top:1px solid var(--menu-line);color:var(--menu-faint);font-size:8px}
.life-rank{margin-top:9px;padding:8px 9px;border-bottom:1px solid var(--menu-line);background:rgba(5,14,18,.22)}
.life-rank span{color:var(--menu-soft);font-size:9px}.life-rank strong{float:right;font:500 14px "DM Mono",monospace}.life-rank i{clear:both;display:block;height:4px;margin-top:7px;background:rgba(255,255,255,.1)}.life-rank i b{display:block;height:100%;background:linear-gradient(90deg,var(--resonance),#efd89c)}.life-rank small{display:block;margin-top:5px;color:var(--menu-faint);font-size:8px}

.stage-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}.stage-detail-grid>div{min-height:58px;padding:8px;border:1px solid var(--menu-line);background:rgba(255,255,255,.03)}.stage-detail-grid small,.stage-detail-grid strong{display:block}.stage-detail-grid small{color:var(--menu-faint);font-size:8px}.stage-detail-grid strong{margin-top:6px;font-size:10px;font-weight:500}.stage-detail-grid strong .item{width:9px;height:9px}
.modal-rewards{margin-top:8px;padding-top:8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;border-top:1px solid var(--menu-line)}.modal-rewards>span{grid-column:1/-1;color:var(--menu-soft);font-size:9px}.modal-rewards b{padding:6px;border:1px solid var(--menu-line);font-size:9px;font-weight:400}
.upgrade-preview{margin-top:12px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;text-align:center}.upgrade-preview>div{padding:9px;border:1px solid var(--menu-line);background:rgba(255,255,255,.03)}.upgrade-preview small,.upgrade-preview strong{display:block}.upgrade-preview small{color:var(--menu-faint);font-size:8px}.upgrade-preview strong{margin-top:4px;font:500 20px "DM Mono",monospace}.upgrade-preview>i{color:var(--resonance);font-style:normal}
.upgrade-stat-preview{min-height:40px;padding:6px 9px;display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;border-bottom:1px solid var(--menu-line)}.upgrade-stat-preview span{color:var(--menu-soft);font-size:9px}.upgrade-stat-preview b,.upgrade-stat-preview strong{font:500 10px "DM Mono",monospace}.upgrade-stat-preview i{color:var(--resonance);font-style:normal}
.material-select{margin-top:8px;display:flex;align-items:stretch;gap:7px}.material-card{min-height:54px;flex:1;padding:6px 9px;display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:center;text-align:left;border:1px solid rgba(239,216,156,.45);background:rgba(239,216,156,.07)}.material-card>.item{justify-self:center}.material-card span strong,.material-card span small{display:block}.material-card span strong{font-size:10px}.material-card span small{margin-top:2px;color:var(--menu-faint);font-size:8px}.material-card>b{font:500 10px "DM Mono",monospace}
.quick-add{display:flex;gap:5px}.quick-add button{min-width:72px;min-height:44px;border:1px solid var(--menu-line);background:rgba(255,255,255,.03);font-size:9px}
.amount-box.upgrade-range{margin-top:7px;padding:9px;grid-template-columns:1.4fr 1fr}.upgrade-range>div{text-align:right}.upgrade-range span,.upgrade-range small{display:block;color:var(--menu-faint);font-size:8px}.upgrade-range strong{font:500 19px "DM Mono",monospace}

@media(max-width:920px){
  :root{--top:48px;--bottom:42px;--portrait-rail:56px;--function-rail:86px;--detail-width:48vw}
  .brand{min-width:105px}.brand small{display:none}
  .character-rail{padding-left:max(4px,env(safe-area-inset-left));padding-right:4px}
  .portrait-tab{width:44px;height:44px}
  .rail-all{width:44px}
  .section-tabs{left:calc(var(--portrait-rail) + env(safe-area-inset-left) + 2px);width:var(--function-rail)}
  .section-tabs button{min-height:44px;padding-left:31px;font-size:9px}
  .section-tabs button::before{left:7px;width:17px;height:17px}
  .character-card{left:calc(var(--portrait-rail) + var(--function-rail) + env(safe-area-inset-left));width:calc(52vw - var(--portrait-rail) - var(--function-rail));min-width:190px}
  .card-identity{left:14px;bottom:14px}.card-identity h1{font-size:31px}.card-identity p{display:none}
  .development-panel{min-width:0}
  .tab-content{padding:20px 16px 52px 18px}
  .page-head h2{font-size:22px}.level-block{margin-top:9px}.growth-grid{margin-top:9px}
  .state-card,.next-card{min-height:72px;padding:9px}.state-card p,.next-card p{display:none}
  .reward-preview{margin-top:5px}.growth-actions{margin-top:7px}
  .tab-content{padding-bottom:66px}
  .attribute-level{margin-top:7px;padding-bottom:7px}.attribute-stats{padding:4px 0}.attribute-stats>div{min-height:27px}
  .breakthrough-strip{min-height:48px}.attribute-page .growth-actions,.life-rank~.growth-actions{right:12px;width:calc(var(--detail-width) - 24px)}
  .stage-sigil{min-height:54px}.memory-slot{min-height:46px}.talent-row,.ability-row{min-height:48px}
}

@media(max-width:760px){
  :root{--portrait-rail:52px;--function-rail:78px;--detail-width:52vw}
  .brand{min-width:83px}.brand strong{font-size:11px}
  .resource-bar .optional{display:none}.resource-bar button{padding:0 4px}
  .slot-state{padding:0 4px}.slot-state span{display:none}
  .character-card{min-width:170px;width:calc(48vw - var(--portrait-rail) - var(--function-rail) + 38px)}
  .world-mark{left:9px}.primary-resonance{right:3px;top:5px}.primary-resonance span{display:none}
  .tab-content{padding:12px 10px 48px 12px}
  .page-head h2{font-size:18px}.status-badge{font-size:7px}
  .level-row small{display:none}.level-row strong{font-size:24px}
  .state-card strong,.next-card strong{font-size:11px}
  .reward-preview{grid-template-columns:repeat(2,minmax(0,1fr))}.reward-preview>span{grid-column:1/-1}
  .flow-footer>button:first-child{min-width:126px}.flow-footer p{display:none}
  .attribute-stats>div{min-height:25px}.detail-link{min-height:44px}.breakthrough-strip{padding:6px 8px}
  .stage-orbit{gap:4px 7px}.stage-sigil{grid-template-columns:32px 1fr;padding:4px}.stage-sigil i{width:30px;height:30px}.stage-sigil b{font-size:9px}
  .memory-loadout{padding-left:58px}.memory-core{left:0;width:46px;height:46px}.memory-slot{grid-template-columns:27px 1fr auto;padding:4px 6px}
  .talent-row,.ability-row{grid-template-columns:32px 1fr auto;padding:5px 6px}.talent-row>i,.ability-row>i{width:30px;height:30px}
  .quick-add button{min-width:64px}.stage-detail-grid{grid-template-columns:1fr 1fr}.modal-rewards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-height:380px){
  .section-tabs{top:calc(var(--top) + env(safe-area-inset-top) + 2px);bottom:calc(var(--bottom) + env(safe-area-inset-bottom) + 2px)}
  .section-tabs button{min-height:44px;flex:0 0 44px}
  .tab-content{padding-top:7px}
  .page-head h2{margin-top:1px}.level-block{margin-top:4px}.level-track{margin-top:4px}
  .growth-grid{margin-top:5px}.state-card,.next-card{min-height:48px;max-height:52px}
  .reward-preview{max-height:36px}.growth-actions{margin-top:4px}
  .card-identity{bottom:8px}.card-identity h1{font-size:27px}
  .stage-list,.archive-list,.visit-list,.life-list{margin-top:5px}
  .stage-row,.archive-row,.visit-row,.life-row{min-height:46px}
  .attribute-level{margin-top:3px}.attribute-level>div:nth-child(2){margin-top:1px}.attribute-level .level-track{margin-top:4px}
  .attribute-stats{padding:2px 0}.attribute-stats>div{min-height:23px}.breakthrough-strip{min-height:44px}
  .stage-orbit{margin-top:4px}.stage-sigil{min-height:50px}.memory-loadout,.talent-list,.ability-list{margin-top:5px}
  #modalBody:has(.upgrade-preview) .modal-intro{display:none}
  .upgrade-preview{margin-top:4px}.upgrade-preview>div{padding:5px}.upgrade-preview strong{font-size:17px}
  .upgrade-stat-preview{min-height:34px}
  .material-select{margin-top:4px}.material-card{min-height:46px}
  .amount-box.upgrade-range{min-height:50px;margin-top:4px;padding:5px}
  #modalBody:has(.upgrade-preview) .modal-foot{margin-top:4px}
}

/* Project-wide typography and information hierarchy calibration. */
.section-tabs button{font-size:11px}
.eyebrow{font-size:9px;line-height:1.4}
.page-head h2{margin-top:6px;line-height:1.16}
.page-subtitle{max-width:440px;margin:7px 0 0;color:var(--menu-soft);font-size:11px;line-height:1.55}
.status-badge{font-size:9px;line-height:1.35}
.level-row span{font-size:11px}.level-row em{font-size:11px}.level-row small{font-size:9px}
.card-label{font-size:9px}
.state-card strong,.next-card strong{font-size:14px;line-height:1.45}
.state-card p,.next-card p{font-size:10px;line-height:1.55}
.material-line span{font-size:9px}.material-line b{font-size:10px}
.reward-preview>span{font-size:9px}.reward-preview b{font-size:10px}.reward-preview i{font-size:8px}
.row-copy strong{font-size:12px;line-height:1.35}.row-copy small{font-size:9px;line-height:1.45}.row-state{font-size:9px}
.base-rewards span{font-size:9px}.base-rewards b{font-size:9px}
.reward-pack small{font-size:9px}.reward-pack strong{font-size:12px}.reward-pack li{font-size:9px;line-height:1.45}
.life-summary strong{font-size:12px}.life-summary span{font-size:10px;line-height:1.45}
.life-action strong{font-size:11px}.life-action small{font-size:9px;line-height:1.4}
.plain-button,.gold-button{font-size:12px}
.micro-log{font-size:9px}
.world-mark{font-size:10px}.card-identity small{font-size:10px}.card-identity p{font-size:11px}
.flow-footer span{font-size:9px}.flow-footer b{font-size:11px}.flow-footer p,.reset-button{font-size:9px}
.modal h2{font-size:24px;line-height:1.25}.modal-intro{font-size:11px;line-height:1.65}
.choice-card small{font-size:9px}.choice-card strong{font-size:13px}.choice-card p{font-size:10px;line-height:1.55}
.modal-cost,.route-node span{font-size:9px}.route-node b{font-size:11px}
.result-card h2{font-size:26px}.result-card>p{font-size:11px}.result-unlocks span{font-size:10px}

@media(max-width:920px){
  .slot-state,.resource-bar .optional{display:none}
  .section-tabs button{font-size:10px}
  .page-head h2{font-size:24px}
  .page-subtitle{font-size:10px}
  .status-badge{font-size:9px}
  .row-copy strong{font-size:11px}.row-copy small{font-size:9px}
  .reward-pack strong{font-size:11px}.reward-pack li{font-size:9px}
}

@media(max-width:760px){
  .page-head h2{font-size:22px}
  .section-tabs button{font-size:10px}
  .section-tabs button[data-tab="heartlife"]{font-size:9px;letter-spacing:0}
  .state-card strong,.next-card strong{font-size:12px}
  .gold-button,.plain-button{font-size:11px}
}

@media(max-height:420px){
  .page-subtitle{display:none}
}

@media(prefers-reduced-motion:reduce){
  .section-tabs button{transition:none}
}

/* 2026-07 readability pass: keep the RPG menu density without shrinking core information. */
:root{--menu-faint:rgba(244,241,232,.56);--detail-width:48vw}
button{touch-action:manipulation}
.section-tabs button{font-size:13px}
.attribute-stats span{font-size:13px}.attribute-stats b{font-size:14px}
.detail-link{font-size:12px}
.breakthrough-strip small{font-size:10px}.breakthrough-strip strong{font-size:13px}
.breakthrough-material,.breakthrough-material b{font-size:11px}
.stage-sigil b{font-size:12px}.stage-sigil small,.stage-sigil i span{font-size:10px}
.orbit-hint{font-size:10px}
.memory-core small{font-size:10px}
.memory-slot span strong{font-size:12px}.memory-slot span small,.memory-slot em,.memory-slot>i{font-size:10px}
.talent-row span strong,.ability-row span strong{font-size:12px}
.talent-row span small,.ability-row span small,.talent-row>em,.ability-row>em,.talent-note{font-size:10px}
.life-rank span{font-size:11px}.life-rank small{font-size:10px}
.plain-button,.gold-button{font-size:14px}
.upgrade-preview small{font-size:10px}
.upgrade-stat-preview span{font-size:11px}.upgrade-stat-preview b,.upgrade-stat-preview strong{font-size:12px}
.material-card span strong{font-size:12px}.material-card span small{font-size:10px}.material-card>b{font-size:12px}
.quick-add button{font-size:12px}
.upgrade-range span,.upgrade-range small{font-size:10px}
.modal-cost{font-size:11px}
.status-badge,.flow-footer span{font-size:10px}
#modal:has(.upgrade-preview){overflow:hidden}

@media(min-width:921px){
  .attribute-page .growth-actions,.life-rank~.growth-actions{
    position:static;
    width:auto;
    margin-top:16px;
    padding-top:0;
    background:none;
  }
}

@media(max-width:920px){
  :root{--portrait-rail:0px;--function-rail:86px;--detail-width:58vw}
  .character-rail{display:none}
  .section-tabs{left:max(4px,env(safe-area-inset-left));width:var(--function-rail)}
  .section-tabs button{padding-left:32px;font-size:12px;letter-spacing:.03em}
  .section-tabs button::before{left:7px;width:18px;height:18px}
  .character-card{
    left:calc(var(--function-rail) + env(safe-area-inset-left));
    width:calc(42vw - var(--function-rail));
    min-width:0;
  }
  .development-panel{width:var(--detail-width);min-width:0}
  #app:not([data-active-tab="growth"]) .character-card{width:calc(34vw - var(--function-rail))}
  #app:not([data-active-tab="growth"]) .development-panel{width:66vw}
  #app:not([data-active-tab="growth"]) .tab-content{padding-right:14px}
  .flow-footer p,.reset-button{display:none}
  .flow-footer>button:first-child{min-width:158px}
  .attribute-stats span{font-size:12px}.attribute-stats b{font-size:13px}
  .plain-button,.gold-button{font-size:13px}
}

@media(max-width:760px){
  :root{--function-rail:82px;--detail-width:58vw}
  .brand{min-width:92px}.brand strong{font-size:12px}
  .section-tabs button{font-size:12px}
  .section-tabs button[data-tab="heartlife"]{font-size:11px}
  .character-card{left:calc(var(--function-rail) + env(safe-area-inset-left));width:calc(42vw - var(--function-rail));min-width:0}
  #app:not([data-active-tab="growth"]) .character-card{width:calc(34vw - var(--function-rail))}
  .tab-content{padding-left:14px;padding-right:12px}
  .page-head h2{font-size:22px}
  .attribute-level>span{font-size:11px}
  .attribute-stats span{font-size:12px}.attribute-stats b{font-size:13px}
  .breakthrough-strip small{font-size:10px}.breakthrough-strip strong{font-size:12px}
  .breakthrough-material,.breakthrough-material b{font-size:10px}
  .stage-orbit{grid-template-columns:1fr;gap:5px}
  .stage-orbit::before{left:17px;top:20px;bottom:20px}
  .stage-sigil{min-height:52px;grid-template-columns:34px 1fr;padding:5px 7px}
  .stage-sigil i{width:30px;height:30px}
  .stage-sigil b{font-size:12px}.stage-sigil small,.stage-sigil i span{font-size:10px}
  .orbit-hint{font-size:10px}
  .memory-loadout{padding-left:0;gap:5px}
  .memory-core{position:relative;left:auto;top:auto;width:100%;height:44px;padding:0 10px;display:flex;align-items:center;justify-content:flex-start;gap:10px;transform:none;border-radius:5px}
  .memory-core i{position:relative;inset:auto;width:24px;height:24px;flex:none}
  .memory-core small{position:static;width:auto;margin-left:auto;text-align:right;font-size:10px}
  .memory-slot{min-height:50px;grid-template-columns:30px 1fr auto;padding:5px 8px}
  .memory-slot span strong{font-size:12px}.memory-slot span small,.memory-slot em,.memory-slot>i{font-size:10px}
  .talent-row,.ability-row{min-height:52px}
  .talent-row span strong,.ability-row span strong{font-size:12px}
  .talent-row span small,.ability-row span small,.talent-row>em,.ability-row>em{font-size:10px}
  .attribute-page .growth-actions,.life-rank~.growth-actions{right:10px;width:calc(var(--detail-width) - 20px)}
  #app:not([data-active-tab="growth"]) .attribute-page .growth-actions,
  #app:not([data-active-tab="growth"]) .life-rank~.growth-actions{width:calc(66vw - 20px)}
  .upgrade-preview small{font-size:10px}
  .upgrade-stat-preview span{font-size:11px}.upgrade-stat-preview b,.upgrade-stat-preview strong{font-size:12px}
  .material-card span strong{font-size:12px}.material-card span small{font-size:10px}.material-card>b{font-size:12px}
  .quick-add button{font-size:12px}
  .upgrade-range span,.upgrade-range small{font-size:10px}
  .modal-cost{font-size:11px}.modal-foot .gold-button{font-size:14px}
}

@media(max-height:380px){
  .page-head h2{font-size:21px}
  .attribute-stats>div{min-height:26px}
  .stage-sigil{min-height:52px}
  .memory-slot{min-height:50px}
  .modal h2{font-size:22px}
  .upgrade-preview strong{font-size:18px}
}

/* Align controls and the desktop HUD with the project-wide entertainment-demo language. */
.topbar{
  border-bottom:1px solid rgba(255,255,255,.12);
  background:rgba(5,12,17,.95);
  backdrop-filter:blur(12px);
}
.slot-state{
  min-height:36px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:5px;
  border-left:1px solid rgba(255,255,255,.14);
  border-right:0;
  background:rgba(255,255,255,.025);
}
.top-spacer+.slot-state{margin-left:18px}
.slot-state span{font-size:11px;color:rgba(244,241,232,.68)}
.slot-state b,.slot-state em{font-size:12px}
.slot-state b{margin-left:2px;color:#efd89c}
.slot-state em{color:rgba(244,241,232,.56)}
@media(min-width:921px){
  .primary-resonance{left:18px;right:auto;top:48px}
}
button:not(.portrait-tab){border-radius:8px}
.portrait-tab{border-radius:50%}
@media(max-width:920px){.slot-state{display:none}}