.glass{ background:var(--panel-bg); border:1px solid var(--glass-border); border-radius:var(--radius);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); position:relative; }
.card{ background:var(--card-bg); border:1px solid var(--glass-border); border-radius:12px; padding:.8rem .9rem; }
.card + .card{ margin-top:.6rem; }
.card h3{ font-size:.82rem; color:var(--a1-soft); letter-spacing:.08em; margin-bottom:.45rem; font-weight:700; }
.card h3 .dim{ font-weight:400; letter-spacing:0; }
.card p + p{ margin-top:.3rem; }
.row{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.row > .grow{ flex:1; min-width:0; }
.stack{ display:flex; flex-direction:column; gap:.6rem; }
.panel{ padding:1rem 1rem 1.1rem; margin-bottom:.8rem; }
.panel-title{ font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim);
  margin-bottom:.9rem; display:flex; align-items:center; gap:.6rem; }
.panel-title::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--glass-border),transparent); }
.panel-title__icon{ font-size:.9rem; }
.panel-title .jp{ font-size:.7rem; color:var(--text-main); letter-spacing:.15em; text-transform:none; }
.msg{ min-height:1.6em; font-size:.86rem; margin:.3rem 0; }
.msg:empty{ display:none; }
.note{ font-size:.8rem; color:var(--text-dim); }
.lead{ font-size:.86rem; margin-bottom:.6rem; }
.hint{ font-size:.8rem; color:var(--text-dim); margin:.1rem 0 .5rem; }
.pre{ white-space:pre-wrap; overflow-wrap:anywhere; }


.btn,.btn-primary,.btn-danger{
  font:inherit; font-weight:700; font-size:.9rem; line-height:1.2; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:42px; padding:.55rem 1.1rem; border-radius:12px; transition:filter .15s,transform .05s;
  -webkit-tap-highlight-color:transparent; white-space:nowrap; }
.btn:active,.btn-primary:active,.btn-danger:active{ transform:translateY(1px); }


.btn-primary{ background:var(--a1); color:#fff; border:1px solid transparent;
  box-shadow:0 6px 18px rgba(var(--a1-rgb),.35), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary:hover{ filter:brightness(1.1); }
.btn-primary.wide{ width:100%; min-height:50px; font-size:1rem; }
.btn-send{ width:36px; height:36px; min-height:0; align-self:center; flex:none; border-radius:50%; padding:0; font-size:.95rem; }


.btn{ background:rgba(var(--a1-rgb),.12); color:var(--a1-soft); border:1px solid rgba(var(--a1-rgb),.5); }
.btn:hover{ background:rgba(var(--a1-rgb),.2); }


.btn-danger{ background:rgba(var(--danger-rgb),.08); color:var(--danger-soft); border:1px solid rgba(var(--danger-rgb),.6); }
.btn-danger:hover{ background:rgba(var(--danger-rgb),.16); }


.btn[disabled],.btn-primary[disabled],.btn-danger[disabled]{
  cursor:not-allowed; background:rgba(120,130,150,.15); color:#7b8799; border-color:rgba(120,130,150,.35); box-shadow:none; }
.btn[disabled] .why,.btn-primary[disabled] .why,.btn-danger[disabled] .why{ font-weight:400; font-size:.78em; }


.mini{ min-height:32px; padding:.3rem .7rem; font-size:.78rem; border-radius:9px; }


.subtabs{ display:inline-flex; gap:.15rem; padding:.2rem; border-radius:99px; max-width:100%;
  overflow-x:auto; scrollbar-width:none; background:rgba(255,255,255,.05); border:1px solid var(--glass-border); }
.subtabs::-webkit-scrollbar{ display:none; }
.subtabs.bare{ border:none; background:none; padding:0; }
.tab{ font:inherit; font-size:.84rem; font-weight:700; color:var(--text-main); background:none; border:none;
  padding:.4rem .95rem; border-radius:99px; cursor:pointer; white-space:nowrap; transition:background .15s,color .15s; position:relative; }
.tab:hover{ background:rgba(255,255,255,.07); color:var(--text-bright); }
.tab.on{ color:#1a1400; background:var(--gold); box-shadow:0 1px 6px rgba(var(--gold-rgb),.35); }
.tab[disabled]{ color:#5b6472; cursor:not-allowed; background:none; }
.tab .badge{ position:static; display:inline-grid; margin-left:.3rem; vertical-align:middle; }

.btn .badge,.btn-primary .badge,.btn-danger .badge{ position:static; display:inline-grid; }
.chip{ display:inline-block; font-size:.7rem; padding:.05rem .5rem; border-radius:99px;
  border:1px solid rgba(var(--a1-rgb),.35); color:var(--a1-soft); background:rgba(var(--a1-rgb),.08); }
.chip.gold{ border-color:rgba(var(--gold-rgb),.5); color:var(--gold); background:rgba(var(--gold-rgb),.08); }
.chip.green{ border-color:rgba(var(--green-rgb),.5); color:var(--green); background:rgba(var(--green-rgb),.08); }
.chip.red{ border-color:rgba(var(--danger-rgb),.5); color:var(--danger-soft); background:rgba(var(--danger-rgb),.08); }
.chip--xs{ padding:.15rem .5rem; font-size:.55rem; font-weight:800; letter-spacing:.05em; }
.tinted--a3{ background:rgba(var(--a3-rgb),.12); border:1px solid rgba(var(--a3-rgb),.25); color:var(--a3); }
.tinted--gold{ background:rgba(var(--gold-rgb),.12); border:1px solid rgba(var(--gold-rgb),.25); color:var(--gold); }
.tinted--danger{ background:rgba(var(--danger-rgb),.13); border:1px solid rgba(var(--danger-rgb),.30); color:var(--danger-soft); }
.text-gradient-gold{ background:linear-gradient(180deg,var(--gold),#c9a227);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }


input,select,textarea{ font:inherit; color:var(--text-bright); background:rgba(2,6,14,.6); border:1px solid rgba(255,255,255,.14);
  border-radius:10px; padding:.45rem .7rem; min-height:38px; max-width:100%; }
input::placeholder,textarea::placeholder{ color:var(--text-dim); }
input:focus,select:focus,textarea:focus{ border-color:rgba(var(--a1-rgb),.6); outline:none; }
input[type=checkbox],input[type=radio]{ min-height:0; width:1.1rem; height:1.1rem; accent-color:var(--a1); padding:0; vertical-align:middle; }
select{ appearance:auto; }
select option{ background:#0a1424; color:var(--text-bright); }
textarea{ width:100%; min-height:4.2em; resize:vertical; }
label{ display:inline-flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.field{ display:flex; flex-direction:column; gap:.25rem; margin-bottom:.6rem; }
.field > span{ font-size:.78rem; color:var(--text-dim); }
.field input,.field select,.field textarea{ width:100%; }
.field.inline{ flex-direction:row; align-items:center; }
code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.9em; color:var(--gold); word-break:break-all; }


.bar{ height:8px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.bar > i{ display:block; height:100%; background:var(--bar-hp); border-radius:99px; transition:width .3s; }


table.list{ width:100%; border-collapse:collapse; font-size:.86rem; }
table.list th,table.list td{ padding:.4rem .4rem; text-align:right; border-bottom:1px solid var(--glass-border); white-space:nowrap; vertical-align:middle; }
table.list th{ color:var(--text-dim); font-weight:400; font-size:.76rem; }
table.list .l{ text-align:left; white-space:normal; }
table.list tr:last-child td{ border-bottom:none; }
table.list tr.mine td{ background:rgba(var(--gold-rgb),.06); }

table.list tr.pick{ cursor:pointer; height:4.3rem; }
table.list tr.pick td{ padding:.6rem .5rem; }
table.list tr.pick td.l b{ font-size:1rem; }
table.list tr.pick:hover td{ background:rgba(var(--gold-rgb),.06); }
table.list tr.pick.on td{ background:rgba(var(--gold-rgb),.14); }
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
dl.kv{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:.25rem .8rem; font-size:.86rem; }
dl.kv dt{ color:var(--text-dim); white-space:nowrap; }
dl.kv dd{ text-align:right; min-width:0; overflow-wrap:anywhere; }


.rows{ display:grid; grid-template-columns:1fr; gap:0; }
.rowitem{ display:flex; align-items:center; gap:.6rem; padding:.55rem .3rem .55rem .5rem;
  border-bottom:1px solid var(--divider); }
.rows > .rowitem:last-child{ border-bottom:none; }
.rowitem .nm{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.05rem; }
.rowitem .nm b{ font-size:.92rem; overflow-wrap:anywhere; }
.rowitem .nm small{ color:var(--text-dim); font-size:.7rem; overflow-wrap:anywhere; }
.rowitem .go{ flex:none; min-width:5.2em; min-height:40px; padding:.4rem .9rem; }
.rowitem.off .nm b,.rowitem.off .nm small{ color:#7b8799; }
.rowitem.sel{ background:rgba(var(--gold-rgb),.08); box-shadow:inset 3px 0 0 var(--gold); }
.rowitem.pick{ cursor:pointer; }
.rowitem.pick:hover{ background:rgba(255,255,255,.04); }
.rowitem input[type=checkbox]{ flex:none; }


.app{ position:relative; z-index:1; min-height:100vh; }
.main{ padding:.8rem .9rem calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 5rem); max-width:720px; margin:0 auto; }
.main h2{ font-size:1rem; color:var(--text-bright); margin:.2rem 0 .6rem; letter-spacing:.06em; }
.main h2 small{ color:var(--text-dim); font-weight:400; margin-left:.5rem; }
.screen > .card,.screen > .panel,.screen > .cols{ margin-top:.6rem; }
.cols{ display:grid; grid-template-columns:1fr; gap:.6rem; }
.cols > .card + .card{ margin-top:0; }
.bars{ position:sticky; top:var(--hud-h); z-index:29; }
.topbar{ font-size:.8rem; padding:.35rem .9rem; text-align:center; color:var(--gold); background:rgba(var(--gold-rgb),.12); border-bottom:1px solid rgba(var(--gold-rgb),.3); }
.topbar.red{ color:var(--danger-soft); background:rgba(var(--danger-rgb),.12); border-color:rgba(var(--danger-rgb),.3); }

.bar-btn{ display:block; width:100%; border-left:0; border-right:0; border-top:0; font:inherit; cursor:pointer; }
.bar-btn:hover{ background:rgba(var(--gold-rgb),.2); }



.subnav{ position:fixed; left:0; right:0; bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px)); z-index:40;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); height:var(--sub-h);
  background:rgba(4,7,14,.88); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-top:1px solid var(--glass-border); }
.subnav .tab{ font-size:.78rem; padding:0 .2rem; border-radius:0; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; }
.subnav .tab:hover{ background:rgba(255,255,255,.05); color:var(--text-main); }
.subnav .tab.on{ color:var(--gold); background:none; box-shadow:none; }
.subnav .tab.on::after{ content:''; position:absolute; top:0; left:22%; right:22%; height:2px; background:var(--gold); border-radius:0 0 2px 2px; }
.subnav .tab[disabled]{ color:#3f4a5a; }
.subnav .tab .badge{ margin-left:.25rem; }
.has-sub .main{ padding-bottom:calc(var(--tab-h) + var(--sub-h) + env(safe-area-inset-bottom,0px) + 5rem); }
.has-sub .action-dock{ bottom:calc(var(--tab-h) + var(--sub-h) + env(safe-area-inset-bottom,0px)); }


.hud{ position:sticky; top:0; z-index:30; height:var(--hud-h);
  display:flex; align-items:center; gap:.7rem; padding:0 .9rem;
  background:rgba(4,7,14,.82); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--glass-border); cursor:pointer; }
.hud .name{ color:var(--text-bright); font-weight:700; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38%; }
.hud .lv{ color:var(--a2); font-size:.72rem; }


.hud .hud-eq{ flex:0 0 auto; align-self:center; display:flex; align-items:stretch; gap:0;
  border:1px solid rgba(var(--a3-rgb),.26); background:rgba(var(--a3-rgb),.10); border-radius:10px; }
.hud .slot{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; line-height:1.1;
  color:var(--a3); min-width:32px; min-height:34px; padding:.15rem .26rem; cursor:pointer; }
.hud .slot + .slot{ border-left:1px solid rgba(var(--a3-rgb),.20); }
.hud .slot:first-child{ border-radius:9px 0 0 9px; } .hud .slot:last-child{ border-radius:0 9px 9px 0; }
.hud .slot svg{ display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hud .slot .v{ font-size:.6rem; color:var(--a3); letter-spacing:.02em; white-space:nowrap; }
.hud .slot .v:empty{ display:none; }


.hud .slot.none{ color:var(--text-dim); }
.hud .slot.none .ic{ opacity:.45; }
.hud .slot.none::after{ content:'!'; position:absolute; z-index:2; top:-5px; right:-4px; width:12px; height:12px; border-radius:99px;
  background:var(--danger); color:#fff; font-size:9px; font-weight:800; line-height:12px; text-align:center;
  box-shadow:0 0 0 1.5px rgba(4,7,14,.9), 0 0 5px rgba(var(--danger-rgb),.7); }

.hud .slot.who{ border-left-color:rgba(var(--a3-rgb),.38); color:var(--text-main); }
.hud .slot.who .v{ color:var(--text-main); }



.hud .slot.who .v{ position:relative; display:block; }
.hud .slot.who .v .d{ display:block; }
.hud .slot.who .v .d.in{ position:absolute; left:0; right:0; top:0; }
.hud .slot.who.up .v .d.out, .hud .slot.who.down .v .d.out{ animation:who-out .22s ease both; }
.hud .slot.who.up .v .d.in{ animation:who-in-up .32s cubic-bezier(.2,1.5,.4,1) both; }
.hud .slot.who.down .v .d.in{ animation:who-in-dn .32s ease both; }
@keyframes who-out{ to{ opacity:0; transform:scale(.9); } }
@keyframes who-in-up{ 0%{ opacity:0; transform:scale(.7); color:var(--heal); } 55%{ opacity:1; transform:scale(1.18); color:var(--heal); } 100%{ opacity:1; transform:scale(1); color:var(--text-main); } }
@keyframes who-in-dn{ 0%{ opacity:0; transform:scale(1.1); color:var(--hex); } 55%{ opacity:1; transform:scale(.94); color:var(--hex); } 100%{ opacity:1; transform:scale(1); color:var(--text-main); } }
.hud .slot.who .fx{ position:absolute; inset:-2px; pointer-events:none; overflow:visible; z-index:3; }

.hud .slot.who.up::before, .hud .slot.who.down::before{ content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; z-index:1; }
.hud .slot.who.up::before{ background:radial-gradient(ellipse at 50% 75%,rgba(var(--heal-rgb),.40),rgba(var(--heal-rgb),.10) 55%,transparent 75%);
  box-shadow:0 0 10px rgba(var(--heal-rgb),.45), inset 0 0 8px rgba(var(--heal-rgb),.35); animation:who-glow-up .85s ease-out both; }
.hud .slot.who.down::before{ background:radial-gradient(ellipse at 50% 25%,rgba(var(--hex-rgb),.34),rgba(var(--hex-rgb),.08) 55%,transparent 75%);
  box-shadow:0 0 9px rgba(var(--hex-rgb),.35), inset 0 0 8px rgba(var(--hex-rgb),.30); animation:who-glow-dn .85s ease-out both; }
@keyframes who-glow-up{ 0%{ opacity:0; } 18%{ opacity:1; } 45%{ opacity:.55; } 62%{ opacity:.9; } 100%{ opacity:0; } }
@keyframes who-glow-dn{ 0%{ opacity:0; } 22%{ opacity:.95; } 100%{ opacity:0; } }

.hud .slot.who.up .ic{ animation:who-ic-up .7s ease-out both; }
.hud .slot.who.down .ic{ animation:who-ic-dn .7s ease-out both; }
@keyframes who-ic-up{ 0%{ color:inherit; } 20%{ color:var(--heal); transform:translateY(-1px); } 100%{ color:inherit; transform:none; } }
@keyframes who-ic-dn{ 0%{ color:inherit; } 25%{ color:var(--hex); transform:translateY(1px); opacity:.7; } 100%{ color:inherit; transform:none; opacity:1; } }

.hud .slot.who .fx i.mk{ position:absolute; display:block; left:50%; bottom:1px; width:10px; height:10px; margin:0 0 0 -5px; color:var(--heal);
  animation:who-rise 1s cubic-bezier(.25,.6,.35,1) both; animation-delay:var(--dl); }
.hud .slot.who .fx i.mk svg{ width:100%; height:100%; display:block; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; filter:drop-shadow(0 0 4px rgba(var(--heal-rgb),.9)); }
.hud .slot.who.down .fx i.mk{ top:1px; bottom:auto; color:var(--hex); animation-name:who-fall; }
.hud .slot.who.down .fx i.mk svg{ filter:drop-shadow(0 0 4px rgba(var(--hex-rgb),.75)); }
@keyframes who-rise{ 0%{ transform:translate(var(--x),4px) rotate(0deg) scale(1.1); opacity:0; } 12%{ opacity:1; } 30%{ opacity:.45; } 46%{ opacity:1; } 68%{ opacity:.5; }
  100%{ transform:translate(calc(var(--x) * 1.3),-26px) rotate(200deg) scale(.35); opacity:0; } }
@keyframes who-fall{ 0%{ transform:translate(var(--x),-4px) rotate(0deg) scale(1.05); opacity:0; } 15%{ opacity:.95; } 55%{ opacity:.6; }
  100%{ transform:translate(calc(var(--x) * 1.25),24px) rotate(-160deg) scale(.4); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .hud .slot.who,.hud .slot.who *,.hud .slot.who::before{ animation:none !important; } }
.hud .gold{ font-size:.82rem; font-weight:700; white-space:nowrap; margin-left:auto; }
.hud .more{ color:var(--text-dim); font-size:.9rem; }
.hud.guest{ cursor:default; justify-content:space-between; }
.hud.guest .name{ max-width:none; letter-spacing:.08em; }

.brand-ver{ font-size:.6rem; font-weight:400; letter-spacing:.15em; color:var(--gold);
  border:1px solid rgba(var(--gold-rgb),.35); border-radius:99px; padding:.1rem .6rem; white-space:nowrap; }


.tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:40; height:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  display:grid; grid-template-columns:repeat(5,1fr);
  background:rgba(4,7,14,.88); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-top:1px solid var(--glass-border); }
.tabbar > button{ position:relative; font:inherit; background:none; border:none; cursor:pointer; color:var(--text-dim);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1rem; -webkit-tap-highlight-color:transparent; }
.tabbar .ic{ font-size:1.25rem; line-height:1; }
.tabbar .lb{ font-size:.66rem; font-weight:700; }
.tabbar > button.on{ color:var(--gold); }
.tabbar > button.on::before{ content:''; position:absolute; top:0; left:28%; right:28%; height:2px; background:var(--gold); border-radius:2px; }
.badge{ position:absolute; top:.35rem; right:calc(50% - 1.4rem); min-width:16px; height:16px; padding:0 .3rem; border-radius:99px;
  background:var(--danger); color:#fff; font-size:.6rem; font-weight:700; display:grid; place-items:center; }
.badge:empty{ display:none; }

.badge.dot,.tab .badge.dot{ min-width:0; width:9px; height:9px; padding:0; display:inline-grid; }
.tabbar .badge.dot{ top:calc(.35rem + 4px); right:calc(50% - 1.4rem + 4px); }


.action-dock{ position:fixed; left:0; right:0; bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px)); z-index:35;
  padding:.6rem .9rem; background:linear-gradient(180deg,transparent,rgba(4,7,14,.9) 40%); }
.action-dock > *{ max-width:720px; margin:0 auto; }
.action-dock .acts{ display:flex; gap:.6rem; }
.action-dock .acts > *{ flex:1; }
.action-dock:empty{ display:none; }

.fight-acts{ margin:1rem 0 .4rem; }
.fight-acts .acts{ display:flex; gap:.6rem; }
.fight-acts .acts > *{ flex:1; }
.fight-acts:empty{ display:none; }


.btn-help{ flex:none; display:inline-grid; place-items:center; width:1.15rem; height:1.15rem; padding:0; border-radius:50%; cursor:pointer;
  font:700 .7rem/1 var(--font-num,inherit); color:var(--text-dim); background:rgba(255,255,255,.06); border:1px solid var(--glass-border); }
.btn-help:hover{ color:var(--text-bright); border-color:rgba(255,255,255,.35); }


.sheet-veil{ position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.55); display:none; }
.sheet-veil.open{ display:flex; align-items:flex-end; justify-content:center; animation:veil-in .2s ease-out; }
.sheet-veil.open .sheet{ animation:sheet-up .2s ease-out; }
@keyframes veil-in{ from{ opacity:0; } }
@keyframes sheet-up{ from{ transform:translateY(24px); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .sheet-veil.open,.sheet-veil.open .sheet{ animation:none; } }
.sheet{ position:relative; width:100%; max-height:85vh; overflow-y:auto; padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom,0px));
  border-radius:20px 20px 0 0; border-bottom:none;
  background:rgba(7,13,26,.92); border:1px solid var(--glass-border);
  backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5); }

.sheet-veil.center.open{ align-items:center; padding:0 4vw; }
.sheet-veil.center .sheet{ width:min(560px,100%); border-radius:20px; border-bottom:1px solid var(--glass-border); max-height:80vh; padding-bottom:1rem; }
.sheet-veil.center .sheet .grip{ display:none; }
.sheet .grip{ width:40px; height:4px; border-radius:2px; background:rgba(255,255,255,.2); margin:0 auto .8rem; }
.sheet h3{ color:var(--text-bright); font-size:1rem; margin-bottom:.6rem; }
.sheet .foot{ display:flex; gap:.6rem; margin-top:1rem; position:sticky; bottom:calc(-1rem - env(safe-area-inset-bottom,0px)); padding:.6rem 0 calc(.6rem + env(safe-area-inset-bottom,0px)); background:rgba(7,13,26,.96); }
.sheet-veil.center .sheet .foot{ bottom:-1rem; padding-bottom:.6rem; }
.sheet .foot > *{ flex:1; }

.sts-head{ display:flex; gap:.8rem; align-items:center; margin-bottom:.7rem; }
.sts-face{ width:64px; height:64px; object-fit:contain; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid var(--glass-border); flex:none; image-rendering:auto; }
.sts-head__b{ flex:1; min-width:0; }
.sts-line{ font-size:.86rem; margin-bottom:.35rem; }
.sts-line .chip{ margin-right:.3em; }
.sheet dd small{ display:block; font-size:.74rem; }
.sheet dd .bonus{ font-size:.8em; font-weight:700; }
.sheet dd .bonus.up{ color:var(--green); }
.sheet dd .bonus.down{ color:var(--danger-soft); }
.sheet dl{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:.25rem .8rem; font-size:.86rem; }
.sheet dt{ color:var(--text-dim); white-space:nowrap; }
.sheet dd{ text-align:right; min-width:0; overflow-wrap:anywhere; }
.sheet .msg{ margin-top:.5rem; }


@media (min-width:760px){
  .hud{ height:56px; padding:0 1.4rem; gap:1.2rem; }
  .hud .name{ font-size:1rem; }
  .hud .gold{ font-size:.92rem; }
  .subnav{ left:50%; right:auto; transform:translateX(-50%); bottom:calc(14px + 60px + 6px); min-width:calc(5 * var(--tab-w));
    grid-auto-columns:minmax(0,120px); justify-content:center; border-radius:99px; border:1px solid var(--glass-border);
    box-shadow:0 10px 30px rgba(0,0,0,.45); }
  .subnav .tab{ font-size:.84rem; }
  .subnav .tab.on::after{ top:auto; bottom:5px; left:30%; right:30%; border-radius:2px; }
  .has-sub .main{ padding-bottom:calc(60px + 14px + var(--sub-h) + 7rem); }
  .has-sub .action-dock{ bottom:calc(60px + 14px + 6px + var(--sub-h) + 8px); }
  .tabbar{ left:50%; right:auto; transform:translateX(-50%); bottom:14px; height:60px; padding:0;
    grid-template-columns:repeat(5,var(--tab-w)); border-radius:99px; border:1px solid var(--glass-border);
    box-shadow:0 10px 30px rgba(0,0,0,.45); }
  .tabbar > button.on::before{ top:auto; bottom:6px; left:34%; right:34%; }
  .main{ max-width:960px; padding:1.4rem 1.6rem calc(60px + 14px + 7rem); width:100%; }
  .main h2{ font-size:1.2rem; }
  .cols{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; align-items:start; }
  .cols > .card + .card{ margin-top:0; }
  .action-dock{ bottom:calc(60px + 14px + 8px); padding:.6rem 1.6rem; }
  .action-dock > *{ max-width:960px; }
  .action-dock .btn-primary.wide,.action-dock .btn-danger.wide{ display:flex; width:min(480px,100%); margin:0 auto; }
  .action-dock .acts{ max-width:520px; margin:0 auto; }
  .sheet-veil.open{ align-items:center; }
  .sheet{ width:min(560px,92vw); border-radius:20px; border-bottom:1px solid var(--glass-border); max-height:80vh; }
  .sheet.wide{ width:min(860px,94vw); }
  .sheet{ padding-bottom:1rem; } .sheet .foot{ bottom:-1rem; padding-bottom:.6rem; }
  .sheet .grip{ display:none; }




  :root{ --hud-h:56px; --rail-w:var(--tab-w); --topbar-h:52px; }

  .nav-top .tabbar{ left:0; right:0; top:var(--hud-h); bottom:auto; transform:none; height:var(--topbar-h); justify-content:center;
    border-radius:0; border-width:0 0 1px; box-shadow:none; }
  .nav-top .tabbar > button.on::before{ bottom:0; left:28%; right:28%; border-radius:2px 2px 0 0; }
  .nav-top .subnav{ left:0; right:0; top:calc(var(--hud-h) + var(--topbar-h)); bottom:auto; transform:none; min-width:0;
    border-radius:0; border-width:0 0 1px; box-shadow:none; background:rgba(4,7,14,.72); }
  .nav-top .subnav .tab.on::after{ bottom:0; border-radius:2px 2px 0 0; }
  .nav-top .bars{ top:calc(var(--hud-h) + var(--topbar-h)); margin-top:var(--topbar-h); }
  .nav-top.has-sub .bars{ top:calc(var(--hud-h) + var(--topbar-h) + var(--sub-h)); margin-top:calc(var(--topbar-h) + var(--sub-h)); }
  .nav-top .main,.nav-top.has-sub .main{ padding-bottom:calc(1.4rem + 5rem); }
  .nav-top .action-dock,.nav-top.has-sub .action-dock{ bottom:0; padding-bottom:1rem; }

  .nav-left,.nav-right{ --nav-w:var(--rail-w); }
  .nav-left .tabbar,.nav-right .tabbar{ top:var(--hud-h); bottom:0; transform:none; width:var(--rail-w); height:auto; padding-top:.4rem;
    display:flex; flex-direction:column; align-items:stretch; border-radius:0; box-shadow:none; }
  .nav-left .tabbar{ left:0; right:auto; border-width:0 1px 0 0; }
  .nav-right .tabbar{ right:0; left:auto; border-width:0 0 0 1px; }
  .nav-left .tabbar > button,.nav-right .tabbar > button{ flex:none; height:64px; }
  .nav-left .tabbar > button.on::before{ top:22%; bottom:22%; left:0; right:auto; width:2px; height:auto; }
  .nav-right .tabbar > button.on::before{ top:22%; bottom:22%; right:0; left:auto; width:2px; height:auto; }
  .nav-left .main,.nav-left.has-sub .main{ width:auto; margin-left:calc(var(--nav-w) + max(0px,(100% - var(--nav-w) - 960px) / 2)); margin-right:0; padding-bottom:calc(1.4rem + 5rem); }
  .nav-right .main,.nav-right.has-sub .main{ width:auto; margin-right:calc(var(--nav-w) + max(0px,(100% - var(--nav-w) - 960px) / 2)); margin-left:0; padding-bottom:calc(1.4rem + 5rem); }
  .nav-left .action-dock,.nav-left.has-sub .action-dock{ left:var(--nav-w); bottom:0; padding-bottom:1rem; }
  .nav-right .action-dock,.nav-right.has-sub .action-dock{ right:var(--nav-w); bottom:0; padding-bottom:1rem; }

  .tabbar .subnav{ position:static; display:flex; flex-direction:column; height:auto; min-width:0; transform:none; padding:.2rem 0;
    border-radius:0; border-width:1px 0; box-shadow:none; background:rgba(255,255,255,.035); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .tabbar .subnav .tab{ height:32px; font-size:.74rem; padding:0 .2rem; }
  .nav-left .tabbar .subnav .tab.on::after{ top:25%; bottom:25%; left:0; right:auto; width:2px; height:auto; }
  .nav-right .tabbar .subnav .tab.on::after{ top:25%; bottom:25%; right:0; left:auto; width:2px; height:auto; }
  .nav-right .tabbar .subnav .tab{ padding-right:.5rem; }
}