:root{
  --bg: #0b1020;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.09);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --border: rgba(255,255,255,.14);
  --accent: #78f0b5;
  --accent2: #7cc7ff;
  --danger: #ff7c8a;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 14px;
  --radius2: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(124,199,255,.20), transparent 60%),
    radial-gradient(900px 600px at 75% 0%, rgba(120,240,181,.14), transparent 55%),
    radial-gradient(900px 700px at 50% 100%, rgba(150,120,255,.10), transparent 55%),
    var(--bg);
}

.app{min-height:100%; display:flex; flex-direction:column}

.app-header{
  display:flex;
  gap:16px;
  align-items:center;
  padding:14px 18px;
  position:sticky;
  top:0;
  z-index:10;
  background: rgba(11,16,32,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.brand{display:flex; flex-direction:column; line-height:1.05}
.brand-title{font-weight:800; letter-spacing:.2px}
.brand-subtitle{color:var(--muted); font-size:12px}

.nav{display:flex; gap:8px; flex:1; flex-wrap:wrap}
.nav button{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding:8px 10px;
  border-radius: 999px;
  cursor:pointer;
  font-size: 13px;
}
.nav button.active{
  border-color: rgba(120,240,181,.55);
  box-shadow: 0 0 0 3px rgba(120,240,181,.12);
  background: rgba(120,240,181,.10);
}

.header-actions{display:flex; gap:8px}

.main{width:min(1100px, 92vw); margin: 18px auto 44px;}

.panel{display:block}

h1{margin: 6px 0 14px; font-size: 28px}

.grid-2{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px}
@media (max-width: 820px){.grid-2{grid-template-columns:1fr}}

.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 14px 14px;
  box-shadow: var(--shadow);
}
.card h2{margin:0 0 8px; font-size:18px}
.card p{margin: 0 0 12px; color: var(--muted)}
.card-muted{background: rgba(255,255,255,.045)}

.btn{
  border: 1px solid rgba(120,240,181,.55);
  background: rgba(120,240,181,.14);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 650;
}
.btn:hover{background: rgba(120,240,181,.18)}
.btn:active{transform: translateY(1px)}

.btn-secondary{
  border: 1px solid rgba(124,199,255,.55);
  background: rgba(124,199,255,.12);
}
.btn-secondary:hover{background: rgba(124,199,255,.16)}

.btn-status-red{
  border-color: rgba(255,124,138,.75) !important;
  background: rgba(255,124,138,.18) !important;
}
.btn-status-red:hover{background: rgba(255,124,138,.24) !important}

.btn-status-green{
  border-color: rgba(120,240,181,.75) !important;
  background: rgba(120,240,181,.18) !important;
}
.btn-status-green:hover{background: rgba(120,240,181,.24) !important}

.gift-activate-btn.gift-activate-pressed{
  border-color: rgba(120,240,181,.85) !important;
  background: rgba(120,240,181,.35) !important;
}

.icon-btn{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.file{
  width: 100%;
  margin: 0 0 10px;
  border: 1px dashed var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  padding: 10px;
  border-radius: 12px;
}

.status{color: var(--muted); font-size: 13px}
.hint{color: var(--muted); font-size: 13px}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.row{display:flex; align-items:center; gap:12px}
.row.wrap{flex-wrap:wrap}

 .info{
   margin-left: 8px;
   width: 20px;
   height: 20px;
   border-radius: 999px;
   border: 1px solid var(--border);
   background: rgba(255,255,255,.06);
   color: var(--text);
   font-size: 12px;
   font-weight: 800;
   cursor: pointer;
   padding: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }

 .tooltip{
   position: fixed;
   z-index: 50;
   padding: 8px 10px;
   border-radius: 10px;
   border: 1px solid var(--border);
   background: rgba(18,24,44,.96);
   box-shadow: var(--shadow);
   color: var(--text);
   font-size: 12px;
 }

.form-grid{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px}
@media (max-width: 900px){.form-grid{grid-template-columns:1fr}}

.field{display:flex; flex-direction:column; gap:6px; font-size:13px}
.field span{color: var(--muted)}
.field select, .field input{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding: 10px;
  border-radius: 12px;
  outline:none;
}

 .field select{
   background: #ffffff;
   color: #000000;
 }

 .field select option{
   background: #ffffff;
   color: #000000;
 }
.field.inline{flex-direction:row; align-items:center; gap:10px}
.field.inline span{min-width: 90px}

.stats-grid{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; margin-top: 12px}
@media (max-width: 900px){.stats-grid{grid-template-columns: repeat(2, minmax(0,1fr))}}

.stat{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}
.stat-name{color: var(--muted); font-size: 12px; margin-bottom: 6px}
.stat input{
  width: 100%;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.12);
  color: var(--text);
  padding: 10px;
  border-radius: 12px;
}

.cards{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin-top: 12px}
@media (max-width: 900px){.cards{grid-template-columns: repeat(2, minmax(0,1fr))}}
@media (max-width: 620px){.cards{grid-template-columns: 1fr}}

#startingGiftCards.cards{grid-template-columns: repeat(4, minmax(0,1fr))}
@media (max-width: 900px){#startingGiftCards.cards{grid-template-columns: repeat(2, minmax(0,1fr))}}
@media (max-width: 620px){#startingGiftCards.cards{grid-template-columns: 1fr}}

.choice{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.choice:hover{background: rgba(255,255,255,.06)}
.choice:active{transform: translateY(1px)}
.choice-title{font-weight: 750; margin: 0 0 6px}
.choice-meta{color: var(--muted); font-size: 12px}

.gift-choice .choice-title{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.gift-choice .gift-pp{color: var(--muted); font-size: 12px; font-weight: 750; white-space:nowrap}

.choice.selected{
  border-color: rgba(120,240,181,.65);
  background: rgba(120,240,181,.10);
  box-shadow: 0 0 0 3px rgba(120,240,181,.10);
}
.choice.disabled{
  opacity: .45;
  cursor:not-allowed;
}
.choice.disabled:hover{background: rgba(255,255,255,.04)}

.modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding: 22px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.55)}
.modal-card{
  position:relative;
  width: min(720px, 94vw);
  max-height: min(74vh, 860px);
  overflow:auto;
  background: rgba(18,24,44,.92);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.modal-card.currency-modal-card{width: min(360px, 94vw)}
.modal-card.qty-modal-card{width: min(288px, 94vw)}
.modal-card.attack-roll-modal-card{width: min(360px, 94vw)}
.modal-card.level-up-modal-card{width: min(360px, 94vw)}
.modal-header{display:flex; align-items:center; justify-content:space-between; padding: 12px 12px 10px; border-bottom: 1px solid var(--border)}
.modal-title{font-weight: 800; font-size: 16px}
.modal-body{padding: 12px}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; padding: 12px; border-top: 1px solid var(--border)}

.modal-card.heal-plus-modal-card{width: min(33vw, 94vw); max-width: 240px}
.heal-plus-modal{display:flex; flex-direction:column; align-items:center; gap:10px}
.heal-plus-modal .field{align-items:center}
.heal-plus-modal label{display:block; width:100%; text-align:center}
#healAmount{width: 33%; min-width: 80px; text-align:center}
#damageAmount{width: 33%; min-width: 80px; text-align:center}

.kv{display:grid; grid-template-columns: 180px 1fr; gap:8px 12px; margin-top: 10px}
.kv .k{color: var(--muted); font-size: 12px}
.kv .v{font-size: 13px}

.sheet{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 14px;
  min-height: 1200px;
}

.sheet-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px}
@media (max-width: 900px){.sheet-grid{grid-template-columns:1fr}}

.sheet-block-weapons{grid-column: 1 / -1}
.sheet-block-equipment{grid-column: 1 / -1}
.sheet-block-skills{grid-column: 1 / -1}
.sheet-block-gifts{grid-column: 1 / -1}
.sheet-block-spells{grid-column: 1 / -1}

.sheet-block{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 12px;
}

.gear-block-header-row{display:flex; align-items:center; justify-content:space-between; gap: 10px}
.gear-block-header-row > button{flex: 0 0 auto}

.gear-top-row{min-height: 52px; display:flex; align-items:center; justify-content:space-between; gap: 16px}
.gear-top-left{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap: 6px}
.gear-top-item[data-gear-carry-open="1"]{cursor:pointer}
.gear-top-item.overweight .gear-top-k,
.gear-top-item.overweight .gear-top-v{color: var(--danger)}
.gear-top-currency-wrap{display:flex; align-items:center; gap: 5px}
.gear-currency-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; align-items:center}
.gear-currency-item{white-space:nowrap; font-weight: 800}
.gear-top-currency-wrap > button[data-gear-currency-btn="1"]{flex: 0 0 auto}
.gear-top-item{font-weight: 800}
.gear-top-k{color: var(--muted); font-weight: 750}
.gear-top-v{color: var(--text); font-weight: 900}

.currency-modal{display:flex; flex-direction:column; gap: 14px}
.currency-modal-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; align-items:center}
.currency-modal-item{display:flex; align-items:center; justify-content:space-between; gap: 10px}
.currency-input{
  width: 80px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 900;
  text-align:center;
}
.currency-input:focus{outline: 2px solid rgba(124,199,255,.55); border-color: rgba(124,199,255,.55)}

.sheet-grid > .sheet-block:first-child{position: relative; z-index: 0; isolation: isolate}
.character-shell{position:absolute; right: 10px; bottom: 0; width: 173px; height: auto; opacity: .9; pointer-events:none; z-index: -1}
.character-shell-name{position:absolute; left: 12px; bottom: calc(0px + 173px - 14px); font-size: 20px; font-weight: 900; color: var(--text); text-align:left; max-width: calc(100% - 200px); text-decoration: underline; text-underline-offset: 3px; z-index: 2}
.character-shell-meta{position:absolute; left: 12px; bottom: calc(0px + 173px - 118px); display:flex; flex-direction:column; gap:2px; max-width: calc(100% - 200px); z-index: 2}
.character-shell-meta-row{display:flex; align-items:baseline; gap:6px}
.character-shell-meta-k{font-size: 12px; font-weight: 750; color: var(--muted)}
.character-shell-meta-v{font-size: 12px; font-weight: 800; color: var(--text)}
.character-shell-label{position:absolute; right: 10px; bottom: calc(0px + 173px - 14px); font-size: 12px; font-weight: 750; color: var(--muted); text-align:center; width: 173px; z-index: 2}
.character-shell-rating{position:absolute; right: 10px; bottom: calc(0px + 173px - 108px); width: 173px; text-align:center; font-size: 68px; font-weight: 950; color: var(--text); line-height: 1; text-shadow: 0 8px 20px rgba(0,0,0,.55); pointer-events:none; z-index: 3}

.sheet-block-health{display:flex; flex-direction:column}
.sheet-block-health .health-tracker{margin-top: 6px; margin-bottom:auto}

.health-tracker{display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; align-items:start; justify-items:center; gap:14px; flex: 1}
.health-tracker-col{display:flex; flex-direction:column; align-items:center}
.health-tracker-col-max{position: relative}

.current-health-indicator{display:flex; align-items:flex-start; gap:14px; margin-left: 0}
.max-health-indicator{display:flex; flex-direction:column; align-items:center; gap:10px}
.set-max-indicator{display:flex; flex-direction:column; align-items:center}
.current-health-indicator{position: relative; left: 30px}
.temp-health{position: relative; top: 0; left: 5px}
.set-max-indicator .health-override{margin-top: 0}
.max-health-indicator .health-label{margin-top: 4px}
.health-box{
  width: 86px;
  height: 86px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 34px;
  font-weight: 900;
}
.health-speed{display:flex; justify-content:center; gap:6px; margin-top: 12px; transform: translateY(-30px); color: var(--muted); font-size: 24pt; font-weight: 800}
.health-speed.health-speed-simple{transform: translateY(-5px)}
.health-speed-value{color: var(--text); font-weight: 900}

.health-slash{
  height: 86px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  font-size: 78px;
  line-height: 1;
  font-weight: 900;
  color: var(--muted);
}

.health-label{
  width: 86px;
  margin-top: 8px;
  text-align:center;
  font-size: 12px;
  font-weight: 750;
  color: var(--muted);
}

.health-controls{display:flex; gap:10px; margin-top: 10px}
.health-control{
  width: 43px;
  height: 43px;
  min-width: 43px;
  min-height: 43px;
  border-radius: 12px;
  border: 2px solid var(--border);
  box-sizing: border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  padding: 0;
  cursor: pointer;
}

.health-control.health-plus{background: #ffffff; color: #d11a1a}
.health-control.health-minus{background: #000000; color: #ffffff; border-color: rgba(255,255,255,.55)}

.health-override{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top: 14px}
.health-override-box{
  width: 86px;
  height: 86px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.08);
  color: var(--text);
  text-align:center;
  font-size: 34px;
  font-weight: 900;
  outline: none;
}
.health-override-btn.active{transform: translateY(1px)}
.health-override-btn.active{background: rgba(124,199,255,.22); border-color: rgba(124,199,255,.75)}

.health-spacer{height: 67px}
.temp-health{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top: 0}
.temp-health-box{
  width: 86px;
  height: 86px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.08);
  color: var(--text);
  text-align:center;
  font-size: 34px;
  font-weight: 900;
  outline: none;
}
.temp-health-label{width: 86px; text-align:center; font-size: 12px; font-weight: 750; color: var(--muted)}

.sheet-gifts-grid{display:flex; flex-direction:column; gap:8px}
.sheet-gifts-title{font-size: 18px; font-weight: 900; text-decoration: underline; text-underline-offset: 4px}
.sheet-gifts-row{display:grid; grid-template-columns: 25% 16% 10% 49%; gap:8px; align-items:center}
.sheet-gifts-row .cell{min-width:0}
.sheet-gifts-row .cell.stam,.sheet-gifts-row .cell.activate{text-align:center}
.sheet-gifts-row .cell.gift{justify-self:start}
.sheet-gifts-row.sheet-gifts-header{padding: 0 0 8px; border-bottom: 1px solid rgba(255,255,255,.06)}
.sheet-gifts-row.sheet-gifts-header .cell{color: var(--muted); font-weight: 750; font-size: 14px}

.sheet-gifts-row:not(.sheet-gifts-header) .cell.short{font-size: 12px}

.gift-activate{
  width: 17px;
  height: 17px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 2px 6px rgba(0,0,0,.35);
  cursor: pointer;
}
.gift-activate:not(.disabled):not([disabled]){background: linear-gradient(180deg, rgba(56,189,248,.85), rgba(37,99,235,.85)); border-color: rgba(147,197,253,.55)}
.gift-activate.disabled{background: rgba(255,255,255,.02); opacity: .45; cursor: not-allowed}
.gift-activate:active{transform: translateY(1px)}
.gift-activate.pressed{
  transform: translateY(1px);
  background: linear-gradient(180deg, rgba(37,99,235,.85), rgba(30,64,175,.85));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 1px 3px rgba(0,0,0,.35);
}

.heal-modal{display:flex; flex-direction:column; align-items:center; gap:14px}
.heal-modal-title{font-weight: 900; text-align:center; font-size: 18px}
.heal-amount-box{
  width: 86px;
  height: 86px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.08);
  color: var(--text);
  text-align:center;
  font-size: 34px;
  font-weight: 900;
  outline: none;
}
.heal-error{color: var(--danger); font-weight: 800; text-align:center}
.heal-modal-actions{display:flex; justify-content:center; gap:12px; width:100%; margin-top: 4px}
.sheet-block-header{display:flex; justify-content:space-between; align-items:baseline; gap:6px; margin: 0 0 10px}
.sheet-block-header h3{margin:0; font-size: 14px; color: var(--muted); font-weight: 750}
.sheet-block-spells .sheet-block-header{border-bottom: 1px solid rgba(255,255,255,.10); padding-bottom: 10px}
.sheet-block-spells .sheet-block-meta{display:grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; gap: 8px; align-items:baseline}
.sheet-block-spells .spell-meta{white-space: nowrap; overflow:hidden; text-overflow: ellipsis}
.sheet-block-meta{color: var(--muted); font-size: 12px; font-weight: 750}
.sheet-block-meta-value{color: var(--text); font-weight: 900}
.gear-weight-meta{display:inline-block; transform: translateX(-20px)}
.gear-weight-value-heavy{color: #facc15; font-weight: 900}
.gear-weight-value-over{color: var(--danger); font-weight: 900}
.weight-modal{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center}
.weight-modal-max{font-weight: 900; font-size: 18px; color: var(--text)}
.weight-modal-max-value{font-weight: 900}
.weight-modal-msg{font-weight: 800; font-size: 14px; line-height: 1.3; color: var(--text)}
.weight-modal-msg-heavy{color: #facc15}
.weight-modal-msg-over{color: var(--danger)}
.sheet-block h3{margin: 0 0 10px; font-size: 14px; color: var(--muted); font-weight: 750}
.primary-stats-grid{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px 22px; width:100%; justify-items:center}
.primary-stat{display:flex; flex-direction:column; align-items:center; gap:8px}
.primary-stat-name{font-weight: 900; letter-spacing: .8px}
.primary-stat-box{width: 96px; height: 96px; border-radius: 18px; border: 1px solid var(--border); background: rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; font-size: 34px; font-weight: 950; line-height:1}
.primary-stat-mod-label{font-size: 12px; color: var(--muted); font-weight: 800; text-transform:none}
.primary-stat-mod-circle{width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.04); display:flex; align-items:center; justify-content:center; font-weight: 900}
.sheet-line{display:flex; justify-content:space-between; gap:10px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06)}
.sheet-line:last-child{border-bottom:none}
.sheet-line .label{color: var(--muted); font-size: 12px}
.sheet-line .value{font-weight: 700; font-size: 13px}

.sheet-divider{height: 2px; background: rgba(255,255,255,.10); margin: 10px 0; border-radius: 999px}

.sheet-line.sheet-line-split{border-bottom:none; padding: 6px 0; align-items:flex-start}
.sheet-line.sheet-line-split .sheet-line-part{display:flex; justify-content:space-between; gap:10px; width: 50%}

.sheet-line.sheet-line-split .sheet-line-part.shell-rating-part{justify-content:center}
.sheet-line.sheet-line-split .sheet-line-part:first-child{justify-content:center}
.sheet-line.sheet-line-split .sheet-line-part:first-child .value{font-size: 17px; transform: translateY(-3px); text-decoration: underline; text-underline-offset: 3px}

.shell-left{display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.shell-meta{display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.shell-meta-row{display:flex; align-items:center; gap:6px}
.shell-meta-label{font-size: 11px; font-weight: 750; color: var(--muted)}
.shell-meta-value{font-size: 12px; font-weight: 750; color: var(--text)}
.shell-meta-value-type{margin-left: 20px}
.shell-meta-value-dr{margin-left: 40px}
.shell-meta-value-slots{margin-left: 30px}
.shell-rating-widget{display:flex; flex-direction:column; align-items:center; gap:6px}
.shell-rating-title{font-size: 17px; font-weight: 750; color: var(--muted); line-height: 1; text-decoration: underline; text-underline-offset: 3px}
.shell-rating-shell{
  width: 86px;
  height: 86px;
  border-radius: 0;
  border: none;
  background: transparent;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,.55);
}
.shell-rating-img{position:absolute; inset: 10px; width: 134%; height: 134%; left: 50%; top: 50%; transform: translate(-50%,-50%); object-fit: contain; opacity: .9; filter: grayscale(1)}
.shell-rating-value{position: relative; z-index: 1; font-size: 40px; font-weight: 900; color: var(--text); transform: translateY(-3px)}

.stamina-row{display:flex; align-items:flex-start; justify-content:center; gap:10px; margin-top: 10px; width: 100%}
.stamina-label{color: var(--muted); font-size: 17px; font-weight: 750; line-height: 1; padding-top: 16px; transform: translate(-10px,-2px)}
.stamina-label-title{line-height: 1}
.stamina-reset-row{display:flex; align-items:center; gap:8px; margin-top: 8px}
.stamina-reset-btn{width: 14px; height: 14px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.06); padding:0; cursor:pointer}
.stamina-reset-btn:hover{background: rgba(255,255,255,.10)}
.stamina-reset-text{font-size: 12px; font-weight: 750; color: var(--muted)}
.stamina-tracker{display:flex; align-items:flex-start; justify-content:center; gap:10px}
.stamina-col{display:flex; flex-direction:column; align-items:center; justify-content:center}
.stamina-max-row{display:flex; align-items:center; justify-content:center; gap:6px}
.stamina-spend{margin: 0}
.stamina-spend{background: linear-gradient(180deg, rgba(56,189,248,.85), rgba(37,99,235,.85)); border-color: rgba(147,197,253,.55)}
.stamina-spend-label{color: var(--muted); font-size: 12px; font-weight: 750}
.stamina-col-max{align-items:flex-start}
.stamina-col-max .stamina-box-label-max{margin-left: 0}
.stamina-box{
  width: 43px;
  height: 43px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
}
.stamina-slash{
  height: 43px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  font-size: 40px;
  line-height: 1;
  font-weight: 900;
  color: var(--muted);
}
.stamina-box-label{width: 43px; margin-top: 6px; text-align:center; font-size: 11px; font-weight: 750; color: var(--muted)}
.stamina-box-label-max{align-self:flex-start}

.sheet-weapons-grid{display:grid; gap:8px}
.sheet-weapons-row{display:grid; grid-template-columns: 1.2fr .7fr .9fr .9fr .7fr 1.4fr; gap:8px; align-items:center}
.sheet-weapons-header{font-weight:700; color: var(--muted)}
.sheet-weapons-row .cell.attack{text-align:center}
.sheet-weapons-row .cell.damage{text-align:left}
.sheet-weapons-row .cell.type{text-align:left}
.sheet-weapons-row .cell.range{text-align:left; padding-left:6px}
.sheet-weapons-row .cell.special{text-align:left; padding-left:6px}

.sheet-spells-grid{display:grid; gap:8px}
.sheet-spells-row{display:grid; grid-template-columns: 1.2fr .9fr .7fr .8fr .8fr .6fr .5fr 2.0fr; gap:8px; align-items:center}
.sheet-spells-header{font-weight:700; color: var(--muted)}
.sheet-spells-row .cell.mp{text-align:center}
.sheet-spells-row .cell.use{text-align:center}
.sheet-spells-row .cell.casting-time{text-align:left}
.sheet-spells-row .cell.range{text-align:left}
.sheet-spells-row .cell.duration{text-align:left}
.sheet-spells-row .cell.targets{text-align:left}

.spell-meta{display:inline-flex; gap:6px; align-items:baseline; margin-left: 12px}
.sheet-spells-row .cell.spell{text-align:left}
.sheet-spells-row .cell.description{text-align:left}

.spell-select-wrap{max-height: 60vh; overflow:auto; padding-right: 6px}
.spell-select-grid{display:grid; gap:8px}
.spell-select-row{display:grid; grid-template-columns: 70px 1.4fr .6fr .9fr .8fr .9fr .9fr; gap:8px; align-items:center}
.spell-select-header{font-weight:700; color: var(--muted)}
.spell-select-row .cell.select{text-align:center}
.spell-select-row .cell.mp{text-align:center}

.attack-roll{
  appearance:none;
  border:0;
  background:transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.attack-roll:disabled{cursor:default; opacity:.6; text-decoration:none}

.attack-roll-stage{position:relative; min-height: 240px; display:flex; flex-direction:column; justify-content:center}

.d12-wrap{display:flex; align-items:center; gap:14px; justify-content:center; min-height: 90px}
.d12-canvas{width:140px; height:140px; display:block}
.d12-overlay{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size: 26px; font-weight: 900; pointer-events:none; text-shadow: 0 2px 10px rgba(0,0,0,.45)}
.d12-fallback-number{width:140px; height:140px; display:flex; align-items:center; justify-content:center; font-size: 44px; font-weight: 900; color: var(--text)}
.d12-die{width:64px; height:64px; border-radius: 16px; background: rgba(255,255,255,.06); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow)}
.d12-face{font-size: 24px; font-weight: 800; letter-spacing:.5px}
.attack-roll-bonus{font-size:18px; color: var(--muted)}
.attack-roll-total{font-size:28px; font-weight:900}
.attack-roll-equals{font-size:40px; font-weight:900; width: 60px; text-align:center}
.attack-roll-final{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 8px}
.attack-roll-final-label{font-size: 16px; font-weight: 800; color: var(--muted); letter-spacing: .6px; text-transform:none}
.attack-roll-final-number{font-size: 56px; font-weight: 950; line-height: 1}

.modal [hidden]{display:none !important}

.spell-use-btn{width: 18px; height: 18px; border-radius: 6px; border: 1px solid rgba(124,199,255,.55); background: rgba(124,199,255,.35); padding: 0; cursor: pointer}
.spell-use-btn:hover{background: rgba(124,199,255,.50)}
.spell-use-btn:active{transform: translateY(1px)}

.gifts-grid{display:flex; flex-direction:column; gap: 6px; padding: 10px 12px 12px}
.gifts-row{display:grid; grid-template-columns: 70px 20% 140px 1fr; gap: 10px; align-items:center}
.gifts-row.tier-mode{grid-template-columns: 70px 20% 140px 80px 1fr}
.gifts-header{font-weight:800; color: var(--muted)}
.gifts-row .cell.activate{text-align:center}
.gifts-row .cell.stam{text-align:center}
.gifts-row .cell.tier{text-align:center}
.gifts-row .cell.desc{min-width:0}
.gifts-row .cell[data-gift-open="1"]{cursor:pointer}
.gifts-row .cell[data-gift-open="1"]:hover{text-decoration: underline; text-underline-offset: 2px}

.gift-activate-btn{width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(124,199,255,.65); background: rgba(124,199,255,.55); padding: 0; cursor: pointer}
.gift-activate-btn:hover{background: rgba(124,199,255,.70)}
.gift-activate-btn:active{transform: translateY(1px)}

.gifts-pp{margin-left:auto; color: var(--muted); font-weight: 800}
.gifts-pp-value{color: var(--text); font-weight: 900}

.gift-buy-grid{display:flex; flex-direction:column; gap: 6px}
.gift-buy-row{display:grid; grid-template-columns: 70px 1fr 90px; gap: 10px; align-items:center; border-radius: 10px; padding: 6px 6px}
.gift-buy-header{font-weight:800; color: var(--muted); padding: 0 0 10px; border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 0}
.gift-buy-row[data-gift-buy-pick="1"]{cursor:pointer}
.gift-buy-row[data-gift-buy-pick="1"]:hover{background: rgba(255,255,255,.05)}
.gift-buy-row .cell.select{text-align:center}
.gift-buy-row .cell.pp{text-align:center}
.gift-buy-row .cell.tier{text-align:center}

.skills-grid{display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px}
@media (max-width: 900px){.skills-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 520px){.skills-grid{grid-template-columns: 1fr;}}

.skill-card{display:flex; flex-direction:column; gap:8px; text-align:left; border: 1px solid var(--border); background: rgba(255,255,255,.04); border-radius: 14px; padding: 10px; color: var(--text); cursor:pointer}
.skill-card:hover{background: rgba(255,255,255,.06)}
.skill-name{font-weight: 850; font-size: 14px; line-height: 1.1}
.skill-meta{display:flex; align-items:center; justify-content:space-between; gap:10px; color: var(--muted); font-weight: 750; font-size: 12px}
.skill-bonus{color: var(--text); font-weight: 900}

.attacks-grid{display:flex; flex-direction:column; gap: 8px}
.attacks-row{display:grid; grid-template-columns: 15% 15% 15% 15% 40%; gap: 6px; align-items:center}
.attacks-row .cell{min-width:0}
.attacks-row .cell.roll{text-align:center}
.attacks-row .cell.dmg{text-align:center}

.gear-weapons-grid{display:flex; flex-direction:column; gap: 6px; padding: 10px 12px 12px}
.gear-weapons-row{display:grid; grid-template-columns: 7% 14% 10% 12% 9% 8% 8% 32%; gap: 6px; align-items:center}
.gear-weapons-grid.no-space .gear-weapons-row{grid-template-columns: 7% 16% 12% 14% 10% 41%}
.gear-weapons-header{font-weight:800; color: var(--muted)}

.gear-add-weapon-grid{display:flex; flex-direction:column; gap: 6px}
.gear-add-weapon-row{display:grid; grid-template-columns: 28% 12% 14% 14% 12% 10% 10%; gap: 6px; align-items:center}
.gear-add-weapon-grid.no-space .gear-add-weapon-row{grid-template-columns: 32% 14% 16% 16% 22%}
.gear-add-weapon-header{font-weight:800; color: var(--muted); padding: 0 0 10px; border-bottom: 1px solid rgba(255,255,255,.06)}
.gear-add-weapon-row[data-gear-weapon-pick="1"]{cursor:pointer; border-radius: 10px; padding: 6px 6px}
.gear-add-weapon-row[data-gear-weapon-pick="1"]:hover{background: rgba(255,255,255,.05)}
.gear-add-weapon-row.selected{outline: 2px solid rgba(124,199,255,.55); background: rgba(124,199,255,.10)}

.gear-add-equipment-grid{display:flex; flex-direction:column; gap: 6px}
.gear-add-equipment-row{display:grid; grid-template-columns: 18% 10% 10% 10% 12% 40%; gap: 6px; align-items:center}
.gear-add-equipment-grid.no-space .gear-add-equipment-row{grid-template-columns: 22% 12% 66%}
.gear-add-equipment-header{font-weight:800; color: var(--muted); padding: 0 0 10px; border-bottom: 1px solid rgba(255,255,255,.06)}
.gear-add-equipment-row[data-gear-equipment-pick="1"]{cursor:pointer; border-radius: 10px; padding: 6px 6px}
.gear-add-equipment-row[data-gear-equipment-pick="1"]:hover{background: rgba(255,255,255,.05)}
.gear-add-equipment-row.selected{outline: 2px solid rgba(124,199,255,.55); background: rgba(124,199,255,.10)}
.gear-equipment-grid{display:flex; flex-direction:column; gap: 6px; padding: 10px 12px 12px}
.gear-equipment-row{display:grid; grid-template-columns: 18% 9% 10% 10% 10% 12% 31%; gap: 6px; align-items:center}
.gear-equipment-grid.no-space .gear-equipment-row{grid-template-columns: 22% 11% 12% 55%}
.gear-equipment-header{font-weight:800; color: var(--muted)}
.gear-equipment-row .cell{min-width:0}
.gear-equipment-row .cell.qty{transform: translateX(-50px)}
.gear-equipment-row .cell.qty,
.gear-equipment-row .cell.cost,
.gear-equipment-row .cell.weight,
.gear-equipment-row .cell.slots,
.gear-equipment-row .cell.slotsAdded{text-align:center}
.gear-equipment-row .cell.desc{
  display:-webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.gear-equipment-row .cell[data-gear-equipment-open="1"]{cursor:pointer}
.gear-equipment-row .cell[data-gear-equipment-open="1"]:hover{text-decoration: underline; text-underline-offset: 2px}
.attacks-header{padding: 0 0 10px; border-bottom: 1px solid rgba(255,255,255,.06)}
.attacks-header .cell{color: var(--muted); font-weight: 800; font-size: 13px}

.sheet-weapons-row.sheet-weapons-header{padding: 0 0 10px; border-bottom: 1px solid rgba(255,255,255,.06)}
.sheet-weapons-row.sheet-weapons-header .cell{color: var(--muted); font-weight: 750; font-size: 14px}

.sheet-equipment-grid{display:flex; flex-direction:column; gap: 10px}
.sheet-equipment-row{display:grid; grid-template-columns: 60px 2.3fr 1.2fr .8fr .8fr .8fr 1fr .8fr; gap: 10px; align-items:center}
.sheet-equipment-grid.no-space .sheet-equipment-row{grid-template-columns: 60px 2.6fr 1.4fr .9fr .9fr .9fr}
.sheet-equipment-grid.no-weight .sheet-equipment-row{grid-template-columns: 60px 2.4fr 1.2fr .9fr .9fr 1fr .9fr}
.sheet-equipment-grid.no-space.no-weight .sheet-equipment-row{grid-template-columns: 60px 2.9fr 1.6fr 1fr 1fr}
.sheet-equipment-row .cell{min-width:0}
.sheet-equipment-row .cell.equipment{font-weight:700}
.sheet-equipment-row .cell.equip{display:flex; align-items:center; justify-content:center}
.sheet-equipment-row .cell.qty,
.sheet-equipment-row .cell.weight,
.sheet-equipment-row .cell.slots,
.sheet-equipment-row .cell.slotsAdded,
.sheet-equipment-row .cell.cost{text-align:center}
.sheet-equipment-row.sheet-equipment-header{padding: 0 0 10px; border-bottom: 1px solid rgba(255,255,255,.06)}
.sheet-equipment-row.sheet-equipment-header .cell{color: var(--muted); font-weight: 750; font-size: 14px}

.sheet-subhead{margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); color: var(--muted); font-size: 12px; font-weight: 750}