/* VARDENYX M1.0 — paperdoll character sheet and functional demo inventory */
.character-page{
  --char-outline:#b9c2c5;
  --char-dark:#283138;
  color:#283136;
  margin:0 auto;
  max-width:1480px;
}
.hero-columns{
  display:grid;
  grid-template-columns:minmax(275px,1fr) minmax(0,2fr);
  gap:clamp(11px,1.8vw,23px);
  align-items:start;
}
.hero-column{
  min-width:0;
  border:1px solid var(--char-outline);
  border-radius:14px;
  background:linear-gradient(160deg,#f9fafa 0%,#e9edee 100%);
  box-shadow:0 12px 30px #22282c19;
  overflow:visible;
}
.hero-left{padding:clamp(12px,1.5vw,19px)}
.hero-identity{padding:0 1px 14px}
.hero-identity-overline{
 display:block;color:#6c767b;font-size:9px;font-weight:850;letter-spacing:1.1px;text-transform:uppercase
}
.hero-identity h1{
 display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
 gap:5px 10px;margin:7px 0 16px;color:#29343a;
 font:700 clamp(17px,2vw,24px) Cinzel,Georgia,serif;line-height:1.25
}
.hero-level{font:800 11px Inter,system-ui,sans-serif;letter-spacing:.4px;color:#f4f6f6;padding:6px 9px;border-radius:7px;background:#303a41}
.hero-xp-summary{display:flex;justify-content:space-between;gap:6px;color:#48545b;font-size:11px;font-weight:650}
.hero-xp-summary strong{color:#2f3c43;font-variant-numeric:tabular-nums}
.hero-xp-track{
 margin-top:7px;height:12px;border-radius:99px;padding:2px;
 overflow:hidden;background:#aeb9bd;border:1px solid #859297;box-shadow:inset 0 1px 3px #343d4440
}
.hero-xp-track span{
 display:block;height:100%;width:0;background:linear-gradient(90deg,#8052a6,#b48adf);
 border-radius:99px;box-shadow:0 0 8px #a16acd8c;transition:width .35s ease
}
.hero-xp-hint{margin-top:6px;font-size:10px;color:#69757a}
.hero-paperdoll{
 isolation:isolate;position:relative;
 display:grid;grid-template-columns:51px minmax(0,1fr) 51px;
 grid-template-rows:minmax(318px,auto) auto;
 gap:6px;align-items:stretch;padding:10px 7px 8px;
 border:1px solid #8d9a9f;border-radius:13px;
 background:radial-gradient(ellipse at 50% 40%,#e0e6e8 0%,#a8b4b8 54%,#737f85 100%);
 box-shadow:inset 0 0 36px #22323e40,0 6px 20px #2d3a4127;
}
.hero-paperdoll::before{
 content:'';position:absolute;inset:8px;z-index:-1;pointer-events:none;
 border:1px solid #ffffff59;border-radius:10px
}
.hero-gear-side{
 display:flex;flex-direction:column;gap:7px;align-items:center;
 justify-content:space-evenly;min-width:0;z-index:3
}
.hero-gear-bottom{
 grid-column:1/-1;display:flex;justify-content:center;gap:10px;z-index:3;padding:0 0 3px
}
.hero-character-art{
 min-width:0;position:relative;display:flex;align-items:center;justify-content:center;
 border-radius:60px;overflow:visible;
}
.character-backlight{
 position:absolute;inset:11% -15% 2%;pointer-events:none;
 background:radial-gradient(ellipse at 50% 45%,#fffffff2,transparent 58%);
 filter:blur(8px);opacity:.65
}
.hero-character-art img{
 position:relative;width:100%;height:100%;max-height:340px;
 object-fit:contain;object-position:center bottom;
 filter:drop-shadow(0 11px 11px #1c262d7c);transition:transform .3s ease
}
.hero-character-art:hover img{transform:scale(1.03)}
.equipment-slot{
 position:relative;display:flex;align-items:center;justify-content:center;
 flex-direction:column;gap:2px;width:48px;height:51px;min-width:0;
 border:1px solid #66747b;border-radius:9px;padding:3px;
 background:linear-gradient(150deg,#303d45,#141d24);
 color:#e9eff0;box-shadow:0 3px 8px #0a182b55,inset 0 1px 0 #ffffff18;
 transition:transform .18s ease,border-color .18s ease;cursor:pointer
}
.equipment-slot.empty{opacity:.83;color:#aab5bb;border-style:dashed;cursor:default}
.equipment-slot.occupied{border-color:#d1b477}
.equipment-slot.rarity-rare{border-color:#bd90e6}
.equipment-slot.rarity-uncommon{border-color:#74b3d7}
.equipment-slot:disabled{pointer-events:auto}
.equipment-slot.occupied:hover,.equipment-slot.occupied:focus-visible{
 transform:translateY(-2px);border-color:#fff;z-index:9
}
.gear-icon{font-size:22px;line-height:1;filter:drop-shadow(0 1px 1px #0008)}
.gear-slot-name{font-size:7px;font-weight:650;line-height:1;white-space:nowrap;color:#d7dee2}
.gear-tooltip{
 display:none;position:absolute;z-index:100;top:4px;left:calc(100% + 8px);
 min-width:180px;max-width:230px;width:max-content;
 background:#20292ef5;color:#f0f4f5;border:1px solid #849298;
 border-radius:8px;padding:9px 11px;text-align:left;
 box-shadow:0 8px 25px #111b2180;pointer-events:none
}
.hero-gear-side:last-of-type .gear-tooltip{left:auto;right:calc(100% + 8px)}
.gear-tooltip strong,.gear-tooltip span,.gear-tooltip small{display:block;line-height:1.5}
.gear-tooltip strong{font-size:11px}
.gear-tooltip span{font-size:10px;color:#b7d5e0;margin-top:3px}
.gear-tooltip small{font-size:9px;color:#b7c0c3}
.equipment-slot:hover .gear-tooltip,.equipment-slot:focus-visible .gear-tooltip{display:block}
.hero-points{
 display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
 gap:5px 10px;background:#30383e;border:1px solid #4c5a60;
 border-radius:10px;margin:13px 0 17px;padding:11px;color:#edf4f4
}
.hero-points>div{display:flex;align-items:center;gap:12px}
.hero-points span{font-size:11px;font-weight:750}
.hero-points strong{
 min-width:36px;padding:4px 9px;text-align:center;
 border-radius:8px;background:#b8d5df;color:#1b2b34;font-size:21px;font-weight:900
}
.hero-stat-section h2,.hero-bonus-section h2{font:750 17px Cinzel,Georgia,serif;color:#293238;margin:0 0 11px}
.hero-stats-stack{display:grid;gap:6px}
.hero-stat-row{
 display:grid;grid-template-columns:minmax(0,1fr) auto 31px;
 align-items:center;gap:9px;border:1px solid #c0c9cd;
 background:#f6f8f8;border-radius:9px;padding:9px
}
.hero-stat-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.hero-stat-copy strong{font-size:11px;color:#2a353b}
.hero-stat-copy small{font-size:9px;line-height:1.4;color:#657177}
.hero-stat-value{display:flex;flex-direction:column;align-items:end;gap:2px}
.hero-stat-value>strong{font-size:19px;color:#273238;font-variant-numeric:tabular-nums}
.hero-stat-value small{font-size:8px;white-space:nowrap;color:#42765f}
.stat-plus{
 width:30px;height:30px;display:grid;place-items:center;
 padding:0;border:1px solid #293840;border-radius:7px;
 background:#34454e;color:#f8fbfb;
 font:800 22px Inter,system-ui,sans-serif;cursor:pointer
}
.stat-plus:not(:disabled):hover{background:#446476}
.stat-plus:disabled{background:#d5dcdf;border-color:#c0c8cd;color:#909da2;cursor:default}
.hero-bonus-section{margin-top:19px}
.hero-extra-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.hero-extra-stat{
 border:1px solid #c4cdd0;border-radius:8px;background:#f8f9f9;
 padding:9px;display:flex;flex-direction:column;gap:7px
}
.hero-extra-stat span{font-size:9px;color:#626f76;line-height:1.35}
.hero-extra-stat strong{font-size:15px;font-weight:850;color:#2b393f;font-variant-numeric:tabular-nums}
.hero-bag-column{
 position:relative;min-height:580px;padding:clamp(13px,1.6vw,22px)
}
.inventory-header{
 display:flex;align-items:center;justify-content:space-between;gap:10px;
 margin-bottom:18px;padding-bottom:13px;border-bottom:1px solid #c5cdd0
}
.inventory-header h2{font:750 27px Cinzel,Georgia,serif;color:#29343a;margin:5px 0 0}
.bag-capacity{
 font-size:11px;font-weight:750;font-variant-numeric:tabular-nums;
 border-radius:8px;background:#e0e5e7;border:1px solid #bcc7cb;padding:8px;color:#526068
}
.inventory-grid{
 display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
 align-items:start;gap:clamp(4px,.8vw,10px);
 padding:12px;border:1px solid #88979d;border-radius:13px;
 background:linear-gradient(140deg,#444f57,#222c33);
 box-shadow:inset 0 6px 24px #080e1266,0 8px 17px #18202725;
 isolation:isolate
}
.inventory-slot{
 position:relative;aspect-ratio:1;min-width:0;
 display:grid;place-items:center;border-radius:8px;
 padding:4px;border:1px solid #697981;
 background:linear-gradient(130deg,#5d6b73,#2c3740);
 box-shadow:inset 0 2px 7px #0006,0 1px 1px #fff2;
 color:white;cursor:pointer;
 transition:transform .16s ease,outline-color .16s ease
}
.inventory-slot.empty{background:#1d272eaa;border-style:dashed;opacity:.44;pointer-events:none}
.inventory-slot.occupied:hover,.inventory-slot.occupied:focus-visible{z-index:20;transform:translateY(-2px);outline:1px solid #f8fbfc;outline-offset:1px}
.inventory-slot.selected{outline:2px solid #e0edf4;outline-offset:1px}
.inventory-slot.rarity-uncommon{border-color:#72b2d8}
.inventory-slot.rarity-rare{border-color:#bd8ce8;box-shadow:inset 0 0 13px #a67ad53b}
.inventory-icon{font-size:clamp(18px,2.5vw,34px);line-height:1;filter:drop-shadow(0 2px 2px #111c23a3)}
.inventory-count{
 position:absolute;bottom:2px;right:3px;font:800 11px Inter,system-ui,sans-serif;
 padding:0 2px;border-radius:3px;color:#fff;text-shadow:0 1px 2px #000
}
.inventory-tooltip{
 position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);
 display:none;flex-direction:column;gap:5px;text-align:left;
 width:230px;max-width:min(235px,80vw);padding:12px;
 border:1px solid #7f939f;border-radius:10px;
 background:#1f2931f9;color:#e9f0f3;box-shadow:0 12px 26px #0009;
 z-index:100;pointer-events:none;font-weight:400;white-space:normal
}
.inventory-slot:nth-child(8n+1) .inventory-tooltip,
.inventory-slot:nth-child(8n+2) .inventory-tooltip{left:0;transform:none}
.inventory-slot:nth-child(8n+7) .inventory-tooltip,
.inventory-slot:nth-child(8n) .inventory-tooltip{left:auto;right:0;transform:none}
.inventory-slot.occupied:hover .inventory-tooltip,
.inventory-slot.occupied:focus-visible .inventory-tooltip{display:flex}
.inventory-tooltip strong{font-size:12px;color:#fff}
.inventory-tooltip small{font-size:10px;color:#b4c3c9}
.inventory-tooltip>span{font-size:10px;line-height:1.45;color:#c5d0d5}
.inventory-tooltip .tooltip-bonus{color:#81c6a9}
.inventory-tooltip em{font-size:9px;font-style:normal;color:#e0ca9a}
.inventory-detail{
 display:flex;align-items:center;flex-wrap:wrap;gap:12px;
 margin-top:20px;padding:14px;border:1px solid #bdc9ce;border-radius:11px;
 background:#f5f8f8;min-height:102px
}
.inventory-detail-icon{
 width:57px;height:57px;display:grid;place-items:center;flex:0 0 auto;
 font-size:30px;color:#fff;border:1px solid #85969f;border-radius:10px;
 background:linear-gradient(#53646e,#29363f);
}
.inventory-detail-icon.rarity-uncommon{border-color:#66a6d3}
.inventory-detail-icon.rarity-rare{border-color:#b78adb}
.inventory-detail-info{display:flex;flex-direction:column;gap:4px;flex:1 1 175px}
.inventory-detail-info strong{font-size:13px;color:#2f3e46}
.inventory-detail-info>span{font-size:10px;color:#738088}
.inventory-detail-info p{font-size:11px;color:#546167;line-height:1.55;margin:3px 0}
.inventory-detail-info small{font-size:11px;color:#3f8a67}
.equip-bag-button{flex:0 0 auto;min-height:37px}
@media(max-width:1050px){
 .hero-columns{grid-template-columns:minmax(255px,1fr) minmax(0,1.85fr);gap:10px}
 .hero-left{padding:11px}
 .hero-bag-column{padding:12px}
 .hero-paperdoll{grid-template-columns:43px minmax(0,1fr) 43px;grid-template-rows:minmax(292px,auto) auto;gap:4px}
 .equipment-slot{width:42px;height:46px}
 .gear-icon{font-size:20px}
 .gear-slot-name{font-size:6px}
 .inventory-grid{padding:7px;gap:4px}
 .inventory-detail{padding:10px}
}
@media(max-width:750px){
 .hero-columns{grid-template-columns:minmax(225px,1fr) minmax(0,1.65fr);gap:8px}
 .hero-left{padding:9px}
 .hero-bag-column{padding:9px;min-height:450px}
 .hero-identity h1{font-size:16px}
 .hero-level{font-size:9px;padding:5px}
 .hero-identity-overline{font-size:8px}
 .hero-paperdoll{grid-template-columns:36px minmax(0,1fr) 36px;grid-template-rows:minmax(238px,auto) auto;gap:3px;padding:7px 4px}
 .equipment-slot{width:35px;height:38px;border-radius:6px;padding:2px}
 .gear-icon{font-size:16px}
 .gear-slot-name{font-size:5px}
 .hero-gear-side{gap:3px}
 .hero-character-art img{max-height:247px}
 .hero-points{margin:9px 0;padding:8px}
 .hero-points strong{font-size:16px}
 .hero-points span{font-size:9px}
 .hero-stat-row{padding:6px;gap:5px;grid-template-columns:minmax(0,1fr) auto 25px}
 .hero-stat-copy strong{font-size:10px}
 .hero-stat-copy small{font-size:8px}
 .hero-stat-value strong{font-size:15px}
 .stat-plus{width:25px;height:27px;font-size:19px}
 .hero-extra-stats{gap:5px}
 .hero-extra-stat{padding:7px}
 .inventory-header{margin-bottom:9px}
 .inventory-header h2{font-size:19px}
 .bag-capacity{font-size:9px;padding:5px}
 .inventory-icon{font-size:clamp(15px,3vw,24px)}
 .inventory-count{font-size:9px}
 .inventory-tooltip{width:175px;padding:8px}
}
@media(max-width:560px){
 .hero-columns{grid-template-columns:minmax(205px,1fr) minmax(0,1.25fr)}
 .hero-extra-stats{grid-template-columns:minmax(0,1fr)}
 .inventory-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
 .inventory-slot:nth-child(n) .inventory-tooltip{left:50%;right:auto;transform:translateX(-50%)}
 .inventory-slot:nth-child(6n+1) .inventory-tooltip{left:0;transform:none}
 .inventory-slot:nth-child(6n) .inventory-tooltip{left:auto;right:0;transform:none}
 .inventory-detail-icon{width:41px;height:41px;font-size:21px}
}
@media(prefers-reduced-motion:reduce){
 .hero-xp-track span,.equipment-slot,.inventory-slot,.hero-character-art img{transition:none!important}
}

/* Keep equipment tooltips inside the left character sheet when hovering right slots. */
.hero-paperdoll>.hero-gear-side:nth-child(3) .gear-tooltip{
 left:auto;right:calc(100% + 8px)
}