: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:
    linear-gradient(180deg, rgba(11,16,32,.22), rgba(11,16,32,.62)),
    radial-gradient(900px 700px at 50% 40%, rgba(185,120,255,.20), transparent 62%),
    radial-gradient(800px 520px at 65% 18%, rgba(120,240,181,.14), transparent 64%),
    radial-gradient(700px 520px at 15% 25%, rgba(124,199,255,.16), transparent 62%),
    url('/assets/Main-Page-Background.png'),
    var(--bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#bg-overlay{
  position:fixed;
  inset:0;
  background-image: url('/assets/Garden_Vertical_Overlay_Image.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: .55;
  pointer-events:none;
  z-index: 0;
}

@media (max-width: 560px){
  #bg-overlay{
    background-image: url('/assets/Garden_Vertical_Overlay_Image_Mobile.png') !important;
    background-position: center !important;
    background-size: 100% 100% !important;
  }
}


.app{min-height:100%; display:flex; flex-direction:column; position:relative; z-index:1}

.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{
  position: fixed;
  left: max(16px, calc((100vw - 1100px) / 2));
  top: 142px;
  z-index: 9;
  display:flex;
  flex-direction:column;
  gap:8px;
  width: 96px;
  align-items: stretch;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(11,16,32,.62);
  backdrop-filter: blur(8px);
}
.nav button{
  border: 1px solid rgba(255,255,255,.22);
  background: #2563eb;
  color: #fff;
  padding:8px 8px;
  border-radius: 8px;
  cursor:pointer;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0,0,0,.20);
}
.nav button.active,
.nav button.inactive-current{
  border-color: rgba(120,240,181,.70);
  box-shadow: 0 0 0 3px rgba(120,240,181,.12), 0 8px 18px rgba(0,0,0,.20);
  background: #16a34a;
  cursor: default;
}
.nav button.nav-level-up-btn{
  background: #7c3aed;
  color: #fff;
  border-color: rgba(216,180,254,.55);
}
.nav button.nav-help-btn{
  background: #d97706;
  color: #fff;
  border-color: rgba(251,191,36,.55);
}

.header-actions{display:flex; gap:8px; margin-left:auto}
.header-return-main{flex:0 0 auto}
.header-advanced-rules{align-self:center}

#btnLoad.tutorial-highlight,
#btnAdvancedRules.tutorial-highlight{background:#f59e0b !important; color:#111 !important; border-color:#f59e0b !important; box-shadow:0 0 14px #f59e0b}
.tutorial-arrow{position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:10300; overflow:visible; animation:tutorial-arrow-blink 1s infinite}
.tutorial-arrow line{stroke:#f59e0b; stroke-width:4}
.tutorial-arrow polygon{fill:#f59e0b}
.tutorial-block-highlight{animation:tutorial-block-blink 1s infinite; outline:3px solid rgba(245,158,11,1); outline-offset:4px; border-radius:4px}
.tutorial-block-highlight-static{outline:3px solid rgba(245,158,11,1); outline-offset:4px; border-radius:4px; box-shadow:0 0 18px rgba(245,158,11,.55)}
@keyframes tutorial-arrow-blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes tutorial-block-blink{0%,100%{outline-color:rgba(245,158,11,1); box-shadow:0 0 18px rgba(245,158,11,.55)}50%{outline-color:rgba(245,158,11,0); box-shadow:0 0 2px rgba(245,158,11,0)}}

@media (max-width: 760px){
  .app{
    padding-top: 218px;
  }

  .app-header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    max-height: 48vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .brand{order: 1}
  .header-return-main{order: 2; align-self:flex-start}
  .nav{
    order: 3;
    position: static;
    left: auto;
    top: auto;
    z-index: auto;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    overflow: visible;
  }

  .nav button{
    flex: 1 1 92px;
    min-width: 0;
    white-space: normal;
    padding: 7px 8px;
    font-size: 11px;
  }

  .header-actions{
    order: 4;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left:0;
  }

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

@media (max-width: 420px){
  .app{
    padding-top: 248px;
  }
}

@media (max-width: 560px){

  .sheet-block-character .stamina-row{
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  .sheet-block-character .stamina-label{
    padding-top: 0;
    transform: none;
    text-align: center;
  }

  .sheet-block-character .stamina-tracker{gap: 8px}

  .sheet-block-character .health-speed,
  .sheet-block-character .health-speed.health-speed-simple{
    transform: none;
    margin: 12px 0 0;
    justify-content: flex-start;
    font-size: 18pt;
  }

  .sheet-block-character .character-shell{
    display:block;
    position:absolute;
    left: 50%;
    right: auto;
    bottom: 10px;
    width: 160px;
    height: auto;
    transform: translateX(-50%);
    opacity: .28;
    z-index: 0;
    pointer-events:none;
  }
  .sheet-block-character .character-shell-name,
  .sheet-block-character .character-shell-meta,
  .sheet-block-character .character-shell-label,
  .sheet-block-character .character-shell-rating{
    position: static;
    max-width: 100%;
    width: auto;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 10px 0 0;
  }

  .sheet-block-character .character-shell-name{
    font-size: 16px;
    margin-top: 18px;
  }
  .sheet-block-character .character-shell-rating{
    font-size: 44px;
    text-align: left;
    text-shadow: none;
  }
  .sheet-block-character .character-shell-label{
    text-align: left;
  }

  .character-details-block{padding: 12px 12px 10px}
  .character-details-title{font-size: 18px}
  .character-details-values,
  .character-details-labels{column-gap: 10px}
  .character-details-values-top,
  .character-details-labels-top{grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 6px}
  .character-details-values-bottom,
  .character-details-labels-bottom{grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 6px}
  .cd-field-value{font-size: 12px; height: 24px}
  .cd-field-label{font-size: 13px}
  .character-details-row-line{width: calc(100% - 24px); margin-left: 12px; margin-right: 12px}

  .attacks-header{display:none}
  .attacks-row{
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: rgba(255,255,255,.03);
  }

  .attacks-row:not(.attacks-header){
    padding-bottom: 10px;
    border-bottom: none;
  }

  .attacks-row .cell{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap: 12px;
  }

  .attacks-row .cell::before{
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 850;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .attacks-row .cell.attack::before{content:"Attack"}
  .attacks-row .cell.roll::before{content:"Roll"}
  .attacks-row .cell.dmg::before{content:"Damage"}
  .attacks-row .cell.dmgtype::before{content:"Type"}
  .attacks-row .cell.notes::before{content:"Notes"}

  .attacks-row .cell.notes{
    align-items:flex-start;
  }
}

.main{width:min(980px, calc(100vw - max(144px, calc((100vw - 1100px) / 2 + 128px)) - 24px)); margin: 18px 24px 44px max(144px, calc((100vw - 1100px) / 2 + 128px));}
@media (max-width: 760px){.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);
  z-index: 1;
}
.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; white-space: pre-line}
.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-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom: 6px}
.stat-name{color: var(--muted); font-size: 12px; margin-bottom: 0; min-width: 0}
.stat-mod{display:flex; flex-direction:column; align-items:center; flex: 0 0 auto; min-width: 38px}
.stat-mod-label{color: var(--muted); font-size: 12px}
.stat-mod-value{font-weight: 900; font-size: 14px; line-height: 1.1}
.stat input{
  width: 100%;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.12);
  color: var(--text);
  padding: 8px;
  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; z-index: 10000; isolation:isolate}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.72); z-index: 0}
.modal-card{
  position:relative;
  width: min(720px, 94vw);
  max-height: min(74vh, 860px);
  overflow:auto;
  background: #12182c;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  z-index: 1;
}
.modal-card.currency-modal-card{width: min(360px, 94vw)}
.modal-card.qty-modal-card{width: min(288px, 94vw)}
.modal-card.gear-add-modal-card{width: min(1100px, 96vw); overflow-x:hidden; display:flex; flex-direction:column; overflow:hidden}
.modal-card.sticky-actions-modal-card{display:flex; flex-direction:column; overflow:hidden}
.modal-card.attack-roll-modal-card{width: min(360px, 94vw)}
.modal-card.level-up-modal-card{width: min(180px, 94vw)}
.modal-card.load-character-modal-card{width: min(600px, 96vw)}
.modal-card.pdf-preparing-modal-card{width: min(360px, 94vw)}
.modal-card.help-modal-card{width: min(900px, 96vw); max-height: min(85vh, 900px); display:flex; flex-direction:column; overflow:hidden}
.modal-card.help-modal-card .modal-body{flex:1 1 auto; min-height:0; overflow-y:auto; padding: 14px 18px}
.help-intro p{margin: 0 0 14px; line-height: 1.55; font-size: 14px}
.help-step{margin-bottom: 12px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; background: rgba(255,255,255,.03); padding: 10px 12px}
.help-step-title{display:flex; justify-content:space-between; align-items:center; gap:12px; font-weight: 800; font-size: 14px; margin-bottom: 6px; color: #93c5fd}
.help-step-complete{color: #78f0b5; font-weight: 700; font-size: 13px; white-space: nowrap}
.help-step-body p{margin: 0; line-height: 1.5; font-size: 13px}
.help-step-body p + p{margin-top: 8px}
.modal-actions.help-modal-actions{justify-content:space-between}
.help-do-not-show{display:flex; align-items:center; gap:6px; font-size: 13px; color: var(--text); cursor: pointer}
.help-do-not-show input[type="checkbox"]{margin:0; cursor: pointer}
.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-card.gear-add-modal-card .modal-body{flex: 1 1 auto; min-height: 0; overflow-y:auto; overflow-x:hidden}
.modal-card.sticky-actions-modal-card .modal-body{flex: 1 1 auto; min-height: 0; overflow:auto}
.modal-card.gear-add-modal-card .modal-body{padding-left: 18px; padding-right: 18px}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; padding: 12px; border-top: 1px solid var(--border)}

.load-char-list{display:flex; flex-direction:column; gap:10px}
.load-char-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.load-char-card{flex: 1 1 auto; min-width: 0; display:flex; align-items:center; gap:12px; padding:10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); border-radius: 14px}
.load-char-portrait{width:56px; height:56px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); overflow:hidden; display:flex; align-items:center; justify-content:center; flex: 0 0 auto}
.load-char-portrait img{width:100%; height:100%; object-fit:cover; display:block}
.load-char-portrait-placeholder{font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em}
.load-char-info{min-width:0; display:flex; flex-direction:column; gap:4px}
.load-char-name{font-weight: 900; font-size: 15px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis}
.load-char-meta{font-size: 12px; color: var(--muted); white-space: nowrap; overflow:hidden; text-overflow: ellipsis}
.load-char-actions{flex: 0 0 auto; display:flex; gap:8px; align-items:center}

.character-details-header{display:flex; align-items:center; gap:14px}
.character-portrait-btn{width:86px; height:86px; border-radius: 18px; border: 1px solid var(--border); background: rgba(255,255,255,.03); color: var(--text); padding: 0; cursor: pointer; display:flex; align-items:center; justify-content:center; overflow:hidden}
.character-portrait-btn:hover{background: rgba(255,255,255,.06)}
.character-portrait-btn img{width:100%; height:100%; object-fit:cover; display:block}
.character-portrait-placeholder{font-size: 12px; font-weight: 850; color: var(--muted); text-align:center; line-height: 1.1; padding: 10px}

.portrait-grid{display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap:10px}
@media (max-width: 560px){.portrait-grid{grid-template-columns: repeat(3, minmax(0, 1fr))}}
.portrait-choice{width:100%; aspect-ratio: 1 / 1; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); padding:0; cursor:pointer; overflow:hidden}
.portrait-choice:hover{background: rgba(255,255,255,.06)}
.portrait-choice img{width:100%; height:100%; object-fit:cover; display:block}

.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; justify-content:flex-end; margin-left:auto}
.gear-top-currency-wrap[hidden]{display:none !important}
.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-starting-wealth-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}
.sheet-block-character{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}

.character-details-block{padding: 14px 18px 12px}
.character-details-title{font-size: 22px; font-weight: 950; color: var(--text); margin-bottom: 6px}

.character-details-form-row{width:100%}
.character-details-form-row-top{padding: 28px 0 12px}
.character-details-form-row-bottom{padding: 18px 0 0}

.character-details-values,
.character-details-labels{display:grid; width:100%; column-gap: 18px; align-items:end; justify-items:center; text-align:center}
.character-details-values-top,
.character-details-labels-top{grid-template-columns: 2.2fr 1fr 1fr .8fr .8fr}
.character-details-values-bottom,
.character-details-labels-bottom{grid-template-columns: 1fr 1fr 1fr 1fr 1.25fr 1.25fr}

.character-details-row-line{width: calc(100% - 56px); margin-left: 28px; margin-right: 28px; border-bottom: 2px solid rgba(255,255,255,.28); margin-top: 2px; margin-bottom: 0}

.cd-field-value{height: 44px; display:flex; align-items:flex-end; justify-content:center; font-size: 20px; font-weight: 900; color: var(--text); white-space: nowrap; overflow:hidden; text-overflow: ellipsis; max-width: 100%}
.cd-field-label{margin-top: 0; font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: .2px}

.character-details-labels{padding-top: 10px}


.character-details-title-tier{display:none}
.character-details-mobile-fields{display:none}

@media (max-width: 560px){
  .character-details-block{
    padding: 16px 20px 18px;
    border-radius: 16px;
  }

  .character-details-block .character-details-header{
    display:grid;
    grid-template-columns: 102px minmax(0, 1fr);
    column-gap: 16px;
    align-items:center;
    margin-bottom: 18px;
  }

  .character-details-block .character-portrait-btn{
    width: 96px;
    height: 96px;
    border-radius: 18px;
    grid-column: 1;
    grid-row: 1;
  }

  .character-details-block .character-details-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    min-width:0;
    font-size: 20px;
    line-height:1.1;
    margin:0;
    grid-column: 2;
    grid-row: 1;
  }

  .character-details-title-tier{
    display:inline-flex;
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0,0,0,.18);
    font-size: 16px;
    font-weight: 900;
    white-space: nowrap;
  }

  .character-details-block .character-details-form-row{
    display:none;
  }

  .character-details-mobile-fields{
    display:flex;
    flex-direction:column;
    gap: 8px;
  }

  .character-details-mobile-row{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 4px;
    padding: 0 10px 8px;
    background: linear-gradient(to bottom, transparent 0 58%, rgba(255,255,255,.045) 58% 100%);
  }

  .character-details-mobile-row .character-details-row-line{
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    border-bottom: 2px solid rgba(255,255,255,.30);
  }

  .character-details-mobile-row .cd-field-value{
    height: 25px;
    align-items:flex-end;
    justify-content:center;
    font-size: 13px;
    font-weight: 900;
  }

  .character-details-mobile-row .cd-field-label{
    margin:0;
    min-height: 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 16px;
    font-weight: 900;
  }
}

.pdf-export-mode .character-details-row-line{border-bottom-color: rgba(0,0,0,.55) !important}

.primary-stats-header{display:flex; align-items:flex-start; justify-content:space-between; gap: 10px}
.primary-stats-header h3{margin: 0}

.sheet-block-health{display:flex; flex-direction:column}
.sheet-block-health .health-tracker{margin-top: 18px; 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}

.sheet-block-character .health-speed{margin: 22px 0; transform: translateY(18px); gap: 10px}
.sheet-block-character .health-speed.health-speed-simple{transform: translateY(18px)}

.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: 22px; 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}

.sheet-spells-row.sheet-spells-header{padding-bottom: 8px; border-bottom: 2px solid rgba(255,255,255,.12)}

.attacks-row:not(.attacks-header){padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.06)}
.attacks-row:not(.attacks-header):last-child{border-bottom: none}

.sheet-spells-row:not(.sheet-spells-header){padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.06)}
.sheet-spells-row:not(.sheet-spells-header):last-child{border-bottom: none}

.gear-equipment-row:not(.gear-equipment-header){padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.06)}
.gear-equipment-row:not(.gear-equipment-header):last-child{border-bottom: none}

.gear-weapons-row:not(.gear-weapons-header){padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.06)}
.gear-weapons-row:not(.gear-weapons-header):last-child{border-bottom: none}

.gifts-row:not(.gifts-header){padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.06)}
.gifts-row:not(.gifts-header):last-child{border-bottom: none}

.gifts-grid .gifts-row.gifts-header{padding-bottom: 8px; border-bottom: 2px solid rgba(255,255,255,.12)}
.gear-weapons-grid .gear-weapons-row.gear-weapons-header{padding-bottom: 8px; border-bottom: 2px solid rgba(255,255,255,.12)}
.gear-equipment-grid .gear-equipment-row.gear-equipment-header{padding-bottom: 8px; border-bottom: 2px solid rgba(255,255,255,.12)}

.spell-select-modal{display:flex; flex-direction:column; gap:10px}
.spell-select-notice{margin-bottom: 0}
.spell-select-summary{position: sticky; top: 0; z-index: 2; display:flex; flex-wrap:wrap; gap: 12px 18px; padding: 10px 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(18,24,44,.96); border-radius: 12px}

.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}
.spell-select-row[data-spell-open-row="1"]{cursor:pointer}
.spell-select-row[data-spell-open-row="1"]:hover{background: rgba(255,255,255,.03)}

.spell-select-row[data-spell-open-row="1"] .cell:not(.select){cursor:pointer}
.spell-select-row[data-spell-open-row="1"] .cell:not(.select):hover{text-decoration: underline; text-underline-offset: 2px}
.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;}}

.sheet-block-skills{padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.10)}

.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: minmax(0,2.8fr) minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1.4fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); gap: 6px; align-items:center}
.gear-add-weapon-grid.no-space .gear-add-weapon-row{grid-template-columns: minmax(0,3.2fr) minmax(0,1.4fr) minmax(0,1.6fr) minmax(0,1.6fr) minmax(0,2.2fr)}
.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-weapon-row .cell{min-width:0}
.gear-add-weapon-row .cell.slots,
.gear-add-weapon-row .cell.weight{text-align:center}
.gear-add-weapon-grid{max-width:100%}
.gear-add-weapon-row{max-width:100%}

.gear-add-equipment-grid{display:flex; flex-direction:column; gap: 6px}
.gear-add-equipment-row{display:grid; grid-template-columns: minmax(0,1.8fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,4fr); gap: 6px; align-items:center}
.gear-add-equipment-grid.no-space .gear-add-equipment-row{grid-template-columns: minmax(0,2.2fr) minmax(0,1.2fr) minmax(0,6.6fr)}
.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-add-equipment-row .cell{min-width:0}
.gear-add-equipment-row .cell.weight,
.gear-add-equipment-row .cell.slots,
.gear-add-equipment-row .cell.slotsAdded{text-align:center}
.gear-add-equipment-grid{max-width:100%}
.gear-add-equipment-row{max-width:100%}
.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}

[data-gift-open="1"],
[data-spell-open="1"],
[data-attack-open="1"],
[data-gear-carry-open="1"],
[data-gear-weapon-open="1"],
[data-primary-ability-open="1"]{cursor:pointer}

[data-gift-open="1"]:hover,
[data-spell-open="1"]:hover,
[data-attack-open="1"]:hover,
[data-gear-carry-open="1"]:hover,
[data-gear-weapon-open="1"]:hover,
[data-primary-ability-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}

@media (max-width: 560px){
  .sheet-block-character{
    display:grid;
    grid-template-columns: 148px 1fr;
    column-gap: 14px;
    row-gap: 10px;
    align-items:start;
    padding-bottom: 14px;
  }

  .sheet-block-character h3{
    margin-bottom: 14px;
    grid-column: 1 / -1;
  }

  .sheet-block-character .stamina-row{
    margin-top: 0;
  }

  .sheet-block-character .stamina-group{
    grid-column: 1 / -1;
  }

  .sheet-block-character .character-shell{
    display:block;
    position: static;
    width: 148px;
    height: auto;
    transform: none;
    opacity: .85;
    z-index: 0;
    pointer-events:none;
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    align-self: start;
  }

  .sheet-block-character .character-shell-name,
  .sheet-block-character .character-shell-meta,
  .sheet-block-character .character-shell-label,
  .sheet-block-character .character-shell-rating{
    position: static;
    max-width: 100%;
    width: auto;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 10px 0 0;
  }

  .sheet-block-character .character-shell-name{
    grid-column: 2;
    grid-row: 3;
    margin-top: 0;
    font-size: 18px;
  }

  .sheet-block-character .character-shell-meta{
    grid-column: 2;
    grid-row: 3;
    margin-top: 0;
    gap: 4px;
    justify-self: center;
    margin-top: 44px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    padding: 8px 10px;
    width: fit-content;
  }
  .sheet-block-character .character-shell-meta-k{
    font-size: 12px;
  }
  .sheet-block-character .character-shell-meta-v{
    font-size: 12px;
    font-weight: 900;
    color: var(--text);
  }

  .sheet-block-character .character-shell-label{
    grid-column: 1;
    grid-row: 3;
    margin-top: 10px;
    text-align: center;
    width: 148px;
    position: relative;
    z-index: 1;
  }
  .sheet-block-character .character-shell-rating{
    grid-column: 1;
    grid-row: 3;
    position: relative;
    z-index: 1;
    width: 148px;
    text-align: center;
    font-size: 56px;
    line-height: 1;
    margin-top: 42px;
  }

  .sheet-block-character .health-speed,
  .sheet-block-character .health-speed.health-speed-simple{
    transform: none;
    margin: 10px 0 0;
    justify-content: center;
    font-size: 20px;
    gap: 8px;
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .attacks-row{
    display:grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: rgba(255,255,255,.03);
  }

  .attacks-row.attacks-header{display:none}

  .attacks-row .cell{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap: 12px;
  }

  .attacks-row .cell::before{
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 850;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .attacks-row .cell.attack::before{content:"Attack"}
  .attacks-row .cell.roll::before{content:"Roll"}
  .attacks-row .cell.dmg::before{content:"Damage"}
  .attacks-row .cell.dmgtype::before{content:"Type"}
  .attacks-row .cell.notes::before{content:"Notes"}

  .sheet-spells-row{
    display:grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    align-items:start;
  }

  .sheet-spells-row.sheet-spells-header{display:none}

  .sheet-spells-row .cell{
    min-width:0;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap: 12px;
  }

  .sheet-spells-row .cell::before{
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 850;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .sheet-spells-row .cell.spell::before{content:"Spell"}
  .sheet-spells-row .cell.casting-time::before{content:"Cast"}
  .sheet-spells-row .cell.range::before{content:"Range"}
  .sheet-spells-row .cell.duration::before{content:"Duration"}
  .sheet-spells-row .cell.targets::before{content:"Targets"}
  .sheet-spells-row .cell.use::before{content:"Use"}
  .sheet-spells-row .cell.mp::before{content:"MP"}
  .sheet-spells-row .cell.short::before{content:"Desc"}

  .sheet-spells-row .cell.use{
    align-items:center;
  }

  .sheet-spells-row .cell.use button{
    flex: 0 0 auto;
  }

  .spell-select-wrap{
    max-height: 70vh;
    padding-right: 0;
  }

  .spell-select-row{
    display:grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    align-items:start;
  }

  .spell-select-row.spell-select-header{display:none}

  .spell-select-row .cell{
    min-width:0;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap: 12px;
  }

  .spell-select-row .cell::before{
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 850;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .spell-select-row .cell.select::before{content:"Select"}
  .spell-select-row .cell.spell::before{content:"Spell"}
  .spell-select-row .cell.mp::before{content:"MP"}
  .spell-select-row .cell.cast::before{content:"Cast"}
  .spell-select-row .cell.range::before{content:"Range"}
  .spell-select-row .cell.duration::before{content:"Duration"}
  .spell-select-row .cell.targets::before{content:"Targets"}

  .spell-select-row .cell.select{
    align-items:center;
  }

  .spell-select-row .cell.select input[type="checkbox"]{
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }

  .sheet-block-spells .sheet-block-meta{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 8px;
    column-gap: 10px;
    align-items:baseline;
  }

  .sheet-block-spells .spell-meta{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    margin-left: 0;
  }

  .gear-weapons-grid .gear-weapons-row,
  .gear-weapons-grid.no-space .gear-weapons-row{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.03) !important;
    align-items:start;
  }

  .gear-weapons-grid .gear-weapons-row.gear-weapons-header{display:none !important}

  .gear-weapons-grid .gear-weapons-row .cell{
    min-width:0;
    display:flex !important;
    align-items:baseline;
    justify-content:space-between !important;
    gap: 12px;
  }

  .gear-weapons-grid .gear-weapons-row .cell::before{
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 850;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .gear-weapons-grid .gear-weapons-row .cell.equip{align-items:center}
  .gear-weapons-grid .gear-weapons-row .cell.equip::before{content:"Equip"}
  .gear-weapons-grid .gear-weapons-row .cell.weapon::before{content:"Weapon"}
  .gear-weapons-grid .gear-weapons-row .cell.dmg::before{content:"Damage"}
  .gear-weapons-grid .gear-weapons-row .cell.dmgtype::before{content:"Type"}
  .gear-weapons-grid .gear-weapons-row .cell.range::before{content:"Range"}
  .gear-weapons-grid .gear-weapons-row .cell.slots::before{content:"Slots"}
  .gear-weapons-grid .gear-weapons-row .cell.weight::before{content:"Weight"}
  .gear-weapons-grid .gear-weapons-row .cell.desc::before{content:"Desc"}

  .gear-weapons-grid .gear-weapons-row .cell.equip input[type="checkbox"]{
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }
}

.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}

@media (max-width: 900px) and (pointer: coarse){
  .gear-weapons-grid .gear-weapons-row,
  .gear-weapons-grid.no-space .gear-weapons-row{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.03) !important;
    align-items:start;
  }

  .gear-weapons-grid .gear-weapons-row.gear-weapons-header{display:none !important}

  .gear-weapons-grid .gear-weapons-row .cell{
    min-width:0;
    display:flex !important;
    align-items:baseline;
    justify-content:space-between !important;
    gap: 12px;
  }

  .gear-weapons-grid .gear-weapons-row .cell::before{
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 850;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .gear-weapons-grid .gear-weapons-row .cell.equip{align-items:center}
  .gear-weapons-grid .gear-weapons-row .cell.equip::before{content:"Equip"}
  .gear-weapons-grid .gear-weapons-row .cell.weapon::before{content:"Weapon"}
  .gear-weapons-grid .gear-weapons-row .cell.dmg::before{content:"Damage"}
  .gear-weapons-grid .gear-weapons-row .cell.dmgtype::before{content:"Type"}
  .gear-weapons-grid .gear-weapons-row .cell.range::before{content:"Range"}
  .gear-weapons-grid .gear-weapons-row .cell.slots::before{content:"Slots"}
  .gear-weapons-grid .gear-weapons-row .cell.weight::before{content:"Weight"}
  .gear-weapons-grid .gear-weapons-row .cell.desc::before{content:"Desc"}

  .gear-weapons-grid .gear-weapons-row .cell.equip input[type="checkbox"]{
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }

  .gear-weapons-grid .gear-weapons-row .cell.desc,
  .gear-equipment-grid .gear-equipment-row .cell.desc{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  .gear-equipment-grid .gear-equipment-row,
  .gear-equipment-grid.no-space .gear-equipment-row{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.03) !important;
    align-items:start;
  }

  .gear-equipment-grid .gear-equipment-row.gear-equipment-header{display:none !important}

  .gear-equipment-grid .gear-equipment-row .cell{
    min-width:0;
    display:flex !important;
    align-items:baseline;
    justify-content:space-between !important;
    gap: 12px;
  }

  .gear-equipment-grid .gear-equipment-row .cell::before{
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 850;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .gear-equipment-grid .gear-equipment-row .cell.equipment::before{content:"Equip"}
  .gear-equipment-grid .gear-equipment-row .cell.qty::before{content:"Qty"}
  .gear-equipment-grid .gear-equipment-row .cell.cost::before{content:"Cost"}
  .gear-equipment-grid .gear-equipment-row .cell.weight::before{content:"Weight"}
  .gear-equipment-grid .gear-equipment-row .cell.slots::before{content:"Slots"}
  .gear-equipment-grid .gear-equipment-row .cell.slotsAdded::before{content:"Slots+"}
  .gear-equipment-grid .gear-equipment-row .cell.desc::before{content:"Desc"}

  .gear-equipment-grid .gear-equipment-row .cell.qty{transform:none !important}

  .gear-add-weapon-row,
  .gear-add-weapon-grid.no-space .gear-add-weapon-row{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.03) !important;
    align-items:start;
  }

  .gear-add-weapon-row.gear-add-weapon-header{display:none !important}

  .gear-add-weapon-row .cell{
    min-width:0;
    display:flex !important;
    align-items:baseline;
    justify-content:space-between !important;
    gap: 12px;
  }

  .gear-add-weapon-row .cell::before{
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 850;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .gear-add-weapon-row .cell.weapon::before{content:"Weapon"}
  .gear-add-weapon-row .cell.cost::before{content:"Cost"}
  .gear-add-weapon-row .cell.dmg::before{content:"Damage"}
  .gear-add-weapon-row .cell.dmgtype::before{content:"Type"}
  .gear-add-weapon-row .cell.range::before{content:"Range"}
  .gear-add-weapon-row .cell.slots::before{content:"Slots"}
  .gear-add-weapon-row .cell.weight::before{content:"Weight"}

  .gear-add-equipment-row,
  .gear-add-equipment-grid.no-space .gear-add-equipment-row{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.03) !important;
    align-items:start;
  }

  .gear-add-equipment-row.gear-add-equipment-header{display:none !important}

  .gear-add-equipment-row .cell{
    min-width:0;
    display:flex !important;
    align-items:baseline;
    justify-content:space-between !important;
    gap: 12px;
  }

  .gear-add-equipment-row .cell::before{
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 850;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .gear-add-equipment-row .cell.equipment::before{content:"Equip"}
  .gear-add-equipment-row .cell.cost::before{content:"Cost"}
  .gear-add-equipment-row .cell.weight::before{content:"Weight"}
  .gear-add-equipment-row .cell.slots::before{content:"Slots"}
  .gear-add-equipment-row .cell.slotsAdded::before{content:"Slots+"}
  .gear-add-equipment-row .cell.desc::before{content:"Desc"}

  .gear-add-equipment-row .cell.desc{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  .gifts-grid .gifts-row{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.03) !important;
    align-items:start;
  }

  .gifts-grid .gifts-row.gifts-header{display:none !important}

  .gifts-grid .gifts-row .cell{
    min-width:0;
    display:flex !important;
    align-items:baseline;
    justify-content:space-between !important;
    gap: 12px;
    text-align:left;
  }

  .gifts-grid .gifts-row .cell::before{
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 850;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .gifts-grid .gifts-row .cell.activate{align-items:center}
  .gifts-grid .gifts-row .cell.activate::before{content:"Activate"}
  .gifts-grid .gifts-row .cell.gift::before{content:"Gift"}
  .gifts-grid .gifts-row .cell.stam::before{content:"Stam"}
  .gifts-grid .gifts-row .cell.tier::before{content:"Tier"}
  .gifts-grid .gifts-row .cell.desc::before{content:"Desc"}

  .gifts-grid .gifts-row .cell.desc{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  .gifts-grid .gifts-row .cell.activate input[type="checkbox"],
  .gifts-grid .gifts-row .cell.activate button{
    flex: 0 0 auto;
  }

  .gift-choice .choice-title{
    flex-wrap: wrap;
  }
  .gift-choice .gift-pp{
    white-space: normal;
  }
}

@media (max-width: 900px){
  .gifts-grid .gifts-row{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.03) !important;
    align-items:start;
  }

  .gifts-grid .gifts-row.gifts-header{display:none !important}

  .gifts-grid .gifts-row .cell{
    min-width:0;
    display:flex !important;
    align-items:baseline;
    justify-content:space-between !important;
    gap: 12px;
    text-align:left;
  }

  .gifts-grid .gifts-row .cell::before{
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 850;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .gifts-grid .gifts-row .cell.activate{align-items:center}
  .gifts-grid .gifts-row .cell.activate::before{content:"Activate"}
  .gifts-grid .gifts-row .cell.gift::before{content:"Gift"}
  .gifts-grid .gifts-row .cell.stam::before{content:"Stam"}
  .gifts-grid .gifts-row .cell.tier::before{content:"Tier"}
  .gifts-grid .gifts-row .cell.desc::before{content:"Desc"}

  .gifts-grid .gifts-row .cell.desc{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  .gifts-grid .gifts-row .cell.activate input[type="checkbox"],
  .gifts-grid .gifts-row .cell.activate button{
    flex: 0 0 auto;
  }
}

@media (hover: none){
  .gifts-grid .gifts-row{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.03) !important;
    align-items:start;
  }

  .gifts-grid .gifts-row.gifts-header{display:none !important}

  .gifts-grid .gifts-row .cell{
    min-width:0;
    display:flex !important;
    align-items:baseline;
    justify-content:space-between !important;
    gap: 12px;
    text-align:left;
  }

  .gifts-grid .gifts-row .cell::before{
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 850;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .gifts-grid .gifts-row .cell.activate{align-items:center}
  .gifts-grid .gifts-row .cell.activate::before{content:"Activate"}
  .gifts-grid .gifts-row .cell.gift::before{content:"Gift"}
  .gifts-grid .gifts-row .cell.stam::before{content:"Stam"}
  .gifts-grid .gifts-row .cell.tier::before{content:"Tier"}
  .gifts-grid .gifts-row .cell.desc::before{content:"Desc"}

  .gifts-grid .gifts-row .cell.desc{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
}

.mobile-900 .gifts-grid .gifts-row{
  display:grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px;
  padding: 10px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.03) !important;
  align-items:start;
}

.mobile-900 .gifts-grid .gifts-row.gifts-header{display:none !important}

.mobile-900 .gifts-grid .gifts-row .cell{
  min-width:0;
  display:flex !important;
  align-items:baseline;
  justify-content:space-between !important;
  gap: 12px;
  text-align:left;
}

.mobile-900 .gifts-grid .gifts-row .cell::before{
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 850;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.mobile-900 .gifts-grid .gifts-row .cell.activate{align-items:center}
.mobile-900 .gifts-grid .gifts-row .cell.activate::before{content:"Activate"}
.mobile-900 .gifts-grid .gifts-row .cell.gift::before{content:"Gift"}
.mobile-900 .gifts-grid .gifts-row .cell.stam::before{content:"Stam"}
.mobile-900 .gifts-grid .gifts-row .cell.tier::before{content:"Tier"}
.mobile-900 .gifts-grid .gifts-row .cell.desc::before{content:"Desc"}

.mobile-900 .gifts-grid .gifts-row .cell.desc{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.mobile-900 body,
.mobile-900 .app,
.mobile-900 .sheet-grid,
.mobile-900 .sheet-block{max-width:100%; overflow-x:hidden}

.mobile-900 .character-details-block{padding: 12px 12px 10px}
.mobile-900 .character-details-title{font-size: 18px}
.mobile-900 .character-details-values,
.mobile-900 .character-details-labels{column-gap: 10px}
.mobile-900 .character-details-values-top,
.mobile-900 .character-details-labels-top{grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 6px}
.mobile-900 .character-details-values-bottom,
.mobile-900 .character-details-labels-bottom{grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 6px}
.mobile-900 .cd-field-value{font-size: 12px; height: 24px}
.mobile-900 .cd-field-label{font-size: 13px}
.mobile-900 .character-details-row-line{width: calc(100% - 24px); margin-left: 12px; margin-right: 12px}
.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}

.pdf-export-mode{
  color: #000000 !important;
}

.pdf-export-mode .sheet-grid{
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}

.pdf-export-mode .sheet-block-character{
  display: block !important;
  grid-template-columns: unset !important;
  column-gap: unset !important;
  row-gap: unset !important;
  align-items: unset !important;
}

.pdf-export-mode .character-details-block{padding: 14px 18px 12px !important}
.pdf-export-mode .character-details-title{font-size: 22px !important}
.pdf-export-mode .character-details-values,
.pdf-export-mode .character-details-labels{column-gap: 18px !important}
.pdf-export-mode .character-details-values-top,
.pdf-export-mode .character-details-labels-top{grid-template-columns: 2.2fr 1fr 1fr .8fr .8fr !important; row-gap: 0 !important}
.pdf-export-mode .character-details-values-bottom,
.pdf-export-mode .character-details-labels-bottom{grid-template-columns: 1fr 1fr 1fr 1fr 1.25fr 1.25fr !important; row-gap: 0 !important}
.pdf-export-mode .cd-field-value{font-size: 14px !important; height: 28px !important}
.pdf-export-mode .cd-field-label{font-size: 18px !important}
.pdf-export-mode .character-details-row-line{width: calc(100% - 56px) !important; margin-left: 28px !important; margin-right: 28px !important}

.pdf-export-mode{
  position: relative;
  isolation: isolate;
}

.pdf-export-mode::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--pdf-bg-image);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 100%;
  opacity: 1;
}

.pdf-export-mode *{
  color: #000000 !important;
  text-shadow: none !important;
}

.pdf-export-mode .sheet{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.pdf-export-mode .sheet-block{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.65) !important;
  box-shadow: none !important;
}

.pdf-export-mode .sheet-block h3,
.pdf-export-mode .sheet-block-meta,
.pdf-export-mode .sheet-line .label,
.pdf-export-mode .sheet-gifts-row.sheet-gifts-header .cell,
.pdf-export-mode .sheet-weapons-row.sheet-weapons-header .cell,
.pdf-export-mode .sheet-spells-header,
.pdf-export-mode .gifts-header,
.pdf-export-mode .gear-weapons-header,
.pdf-export-mode .gear-add-weapon-header,
.pdf-export-mode .gear-add-equipment-header,
.pdf-export-mode .gear-equipment-header,
.pdf-export-mode .attacks-header .cell,
.pdf-export-mode .health-label,
.pdf-export-mode .stamina-box-label,
.pdf-export-mode .stamina-spend-label,
.pdf-export-mode .stamina-label,
.pdf-export-mode .character-shell-meta-k,
.pdf-export-mode .character-shell-label,
.pdf-export-mode .character-shell-meta-v{
  color: #000000 !important;
}

.pdf-export-mode .health-box,
.pdf-export-mode .health-override-box,
.pdf-export-mode .temp-health-box,
.pdf-export-mode .primary-stat-box,
.pdf-export-mode .primary-stat-mod-circle,
.pdf-export-mode .stamina-box,
.pdf-export-mode .currency-input{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.65) !important;
  color: #000000 !important;
  box-shadow: none !important;
}

.pdf-export-mode .health-control.health-plus,
.pdf-export-mode .health-control.health-minus{
  background: #ffffff !important;
  color: #000000 !important;
  border-color: rgba(0,0,0,.65) !important;
}

.pdf-export-mode .skill-card{
  border: 1px solid rgba(0,0,0,.65) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
}

.pdf-export-mode .health-speed,
.pdf-export-mode .sheet-block-character .health-speed,
.pdf-export-mode .health-speed.health-speed-simple,
.pdf-export-mode .sheet-block-character .health-speed.health-speed-simple{
  transform: none !important;
}

.pdf-export-mode .gifts-grid .gifts-row{
  display: grid !important;
  grid-template-columns: 70px 20% 140px 1fr !important;
  gap: 10px !important;
  align-items: center !important;
}

.pdf-export-mode .gifts-grid .gifts-row.tier-mode{
  grid-template-columns: 70px 20% 140px 80px 1fr !important;
}

.pdf-export-mode .gifts-grid .gifts-row.gifts-header{
  display: grid !important;
}

.pdf-export-mode .gifts-grid .gifts-row .cell{
  display: block !important;
  align-items: unset !important;
  gap: 0 !important;
  text-align: left !important;
}

.pdf-export-mode .gifts-grid .gifts-row .cell.activate,
.pdf-export-mode .gifts-grid .gifts-row .cell.stam,
.pdf-export-mode .gifts-grid .gifts-row .cell.tier{
  text-align: center !important;
}

.pdf-export-mode .gifts-grid .gifts-row .cell::before{
  content: none !important;
}

.pdf-export-mode .sheet-spells-row{
  display:grid !important;
  grid-template-columns: 1.2fr .9fr .7fr .8fr .8fr .6fr .5fr 2.0fr !important;
  gap: 8px !important;
  align-items: center !important;
}

.pdf-export-mode .sheet-spells-row.sheet-spells-header{
  display:grid !important;
}

.pdf-export-mode .sheet-spells-row .cell{
  display:block !important;
  align-items: unset !important;
  justify-content: unset !important;
  gap: 0 !important;
}

.pdf-export-mode .sheet-spells-row .cell::before{
  content: none !important;
}

.pdf-export-mode .gifts-grid{gap: 2px !important}

.pdf-export-mode .gifts-grid .gifts-row.gifts-header{
  border-bottom: 2px solid rgba(0,0,0,.45) !important;
  padding-bottom: 8px !important;
  margin-bottom: 8px !important;
}

.pdf-export-mode .gifts-grid .gifts-row:not(.gifts-header){
  border-bottom: 1px solid rgba(0,0,0,.35) !important;
  padding-bottom: 6px !important;
  margin-bottom: 6px !important;
}

.pdf-export-mode .skills-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.pdf-export-mode .skill-card{
  border: 1px solid rgba(0,0,0,.55) !important;
  background: rgba(0,0,0,.03) !important;
}

.pdf-export-mode .skills-row{
  border: 2px solid rgba(0,0,0,.65) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  padding: 10px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 6px 10px !important;
  align-items: baseline !important;
}

.pdf-export-mode .skills-row .skills-name{
  grid-column: 1 / -1;
  font-weight: 850;
}

.pdf-export-mode .skills-row .skills-stat,
.pdf-export-mode .skills-row .skills-bonus{
  font-size: 12px;
  font-weight: 800;
}

.pdf-export-mode .gear-weapons-row .cell::before,
.pdf-export-mode .gear-equipment-row .cell::before{
  content: none !important;
}

.pdf-export-mode .attacks-row{
  display:grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr 2fr !important;
  gap: 10px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.pdf-export-mode .attacks-row.attacks-header{display:grid !important}

.pdf-export-mode .attacks-row .cell{
  display:block !important;
  align-items:unset !important;
  justify-content:unset !important;
  gap: 0 !important;
}

.pdf-export-mode .attacks-row .cell::before{content:none !important}

.pdf-export-mode .health-override::after{
  content: 'Set Max';
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 750;
}

.pdf-export-mode .temp-health-box,
.pdf-export-mode .health-override-box{
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  caret-color: transparent !important;
}

.pdf-export-mode .current-health-indicator .health-box{
  color: transparent !important;
}

.pdf-export-mode .stamina-col:not(.stamina-col-max) .stamina-box{
  color: transparent !important;
}

.pdf-export-mode .choice,
.pdf-export-mode .card,
.pdf-export-mode .stat,
.pdf-export-mode .primary-stat-box,
.pdf-export-mode .primary-stat-mod-circle,
.pdf-export-mode .health-box,
.pdf-export-mode .health-override-box,
.pdf-export-mode .temp-health-box,
.pdf-export-mode .stamina-box,
.pdf-export-mode .currency-input,
.pdf-export-mode .d12-die,
.pdf-export-mode .sheet-divider,
.pdf-export-mode .sheet-line,
.pdf-export-mode .sheet-gifts-row,
.pdf-export-mode .gear-top-item,
.pdf-export-mode .gear-currency-wrap,
.pdf-export-mode .gifts-row,
.pdf-export-mode .attacks-row,
.pdf-export-mode .sheet-weapons-row,
.pdf-export-mode .sheet-spells-row,
.pdf-export-mode .sheet-equipment-row{
  background: #ffffff !important;
  border-color: rgba(0,0,0,.65) !important;
}

.pdf-export-mode .sheet-divider{
  background: rgba(0,0,0,.20) !important;
}

.pdf-export-mode .sheet-line,
.pdf-export-mode .sheet-gifts-row.sheet-gifts-header,
.pdf-export-mode .sheet-weapons-row.sheet-weapons-header,
.pdf-export-mode .sheet-equipment-row.sheet-equipment-header{
  border-bottom-color: rgba(0,0,0,.35) !important;
}

.pdf-export-mode .btn,
.pdf-export-mode .btn-secondary,
.pdf-export-mode .icon-btn{
  display: none !important;
  visibility: hidden !important;
}

.pdf-export-mode select,
.pdf-export-mode textarea{
  display: none !important;
  visibility: hidden !important;
}

.pdf-export-mode .sheet-block-header{
  border-bottom: 2px solid rgba(0,0,0,.55) !important;
  padding-bottom: 8px !important;
}

.pdf-export-mode .sheet-line{
  border-bottom: 1px solid rgba(0,0,0,.22) !important;
}

.pdf-export-mode .sheet-gifts-row.sheet-gifts-header,
.pdf-export-mode .sheet-weapons-row.sheet-weapons-header,
.pdf-export-mode .sheet-equipment-row.sheet-equipment-header,
.pdf-export-mode .attacks-header{
  border-bottom: 2px solid rgba(0,0,0,.45) !important;
  padding-bottom: 8px !important;
}

.pdf-export-mode .sheet-gifts-row:not(.sheet-gifts-header),
.pdf-export-mode .sheet-weapons-row:not(.sheet-weapons-header),
.pdf-export-mode .sheet-spells-row,
.pdf-export-mode .sheet-equipment-row:not(.sheet-equipment-header),
.pdf-export-mode .gifts-row,
.pdf-export-mode .gear-weapons-row,
.pdf-export-mode .gear-equipment-row{
  border-bottom: 1px solid rgba(0,0,0,.14) !important;
  padding-bottom: 4px;
  margin-bottom: 4px;
}

.pdf-export-mode .attacks-grid{gap: 2px !important}

.pdf-export-mode .character-shell-rating{
  color: #ffffff !important;
}

.pdf-export-mode .temp-health-box,
.pdf-export-mode .health-override-box{
  display: flex !important;
  visibility: visible !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.tutorial-modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:10200}
.tutorial-modal[hidden]{display:none}
.tutorial-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.72)}
.tutorial-card{position:relative; z-index:1; width:min(600px, 96vw); background:#1a1f35; border:2px solid rgba(255,255,255,.18); border-radius:24px; box-shadow:0 28px 90px rgba(0,0,0,.75); display:flex; flex-direction:column; overflow:hidden}
.tutorial-body{display:flex; flex-direction:row; align-items:center; gap:0; padding:28px 24px 12px}
@keyframes caspian-talk{0%,100%{transform:translateY(0) rotate(0deg)} 15%{transform:translateY(-6px) rotate(-1.5deg)} 30%{transform:translateY(-3px) rotate(1deg)} 50%{transform:translateY(-7px) rotate(-1deg)} 70%{transform:translateY(-2px) rotate(1.5deg)} 85%{transform:translateY(-5px) rotate(-0.5deg)}}
.tutorial-char-img{flex:0 0 auto; width:170px; height:260px; object-fit:contain; object-position:center; margin-right:20px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.55)); animation:caspian-talk 1.8s ease-in-out infinite; transform-origin:bottom center}
.tutorial-char-img-placeholder{flex:0 0 auto; width:170px; height:260px; border-radius:14px; border:2px dashed rgba(255,255,255,.22); background:rgba(255,255,255,.04); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.4); font-size:12px; text-align:center; padding:8px; margin-right:20px}
.tutorial-bubble-wrap{flex:1 1 auto; position:relative; padding-bottom:22px}
.tutorial-bubble{position:relative; background:#ffffff; border:3px solid #111827; border-radius:20px; padding:18px 20px; box-shadow:3px 4px 0 #111827}
.tutorial-bubble p{margin:0; line-height:1.65; font-size:14px; color:#111827; font-weight:600}
.tutorial-bubble-tail{position:absolute; bottom:-1px; left:18px; width:36px; height:24px; overflow:visible}
.tutorial-bubble-tail-outer{fill:#111827}
.tutorial-bubble-tail-inner{fill:#ffffff}
.tutorial-actions{display:flex; justify-content:flex-end; gap:10px; padding:14px 20px 18px; border-top:1px solid rgba(255,255,255,.10)}