#hero-sheet{width:min(940px,94vw);height:min(690px,92dvh);max-width:none;max-height:none;padding:14px;overflow:hidden;border:2px solid #87734c;border-radius:7px;background:linear-gradient(135deg,#35413d,#15201e 35%,#25312d);box-shadow:inset 0 0 0 5px #111a18,inset 0 0 0 6px #9d865e,0 24px 90px #000b;color:#ecdfba;font-family:Georgia,serif}
#hero-sheet::backdrop{background:transparent;backdrop-filter:none}
#hero-sheet{position:fixed;inset:0;margin:auto;z-index:100}
#hero-sheet[open]{display:grid;grid-template-rows:42px minmax(0,1fr) 44px;gap:10px}
#hero-sheet .sheet-header{position:static;display:flex;align-items:center;gap:16px;padding:0 5px;background:#0b1513aa;pointer-events:auto;border-bottom:1px solid #87734c}
#hero-sheet .sheet-header h2{flex:1;font-size:23px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hero-sheet button{font:15px Georgia;color:#e8d6a6;border:1px solid #8a764f;border-radius:3px;background:linear-gradient(#323b2e,#111b16);padding:7px 14px;cursor:pointer}
#hero-sheet button:disabled{cursor:default;opacity:.5}
#hero-sheet #sheet-cross{font-size:25px;padding:0 7px;color:#edc362}
.sheet-body{min-height:0;display:grid;grid-template-columns:49% 51%;gap:10px;padding-right:10px}
.sheet-equipment{position:relative;min-height:0;border:1px solid #726a4f;border-radius:5px;background:radial-gradient(ellipse at 50% 45%,#58605855,#0a1512bb 65%);overflow:hidden}
.sheet-equipment::after{content:'';position:absolute;bottom:0;left:0;right:0;height:17%;background:repeating-linear-gradient(0deg,#17232180 0 17px,#74807722 18px 19px);pointer-events:none}
.sheet-identity{position:absolute;top:12px;left:18%;right:18%;text-align:center;font-size:16px;z-index:2}
#sheet-model{position:absolute;left:11%;top:7%;width:78%;height:80%;cursor:grab}
#sheet-model canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sheet-slot-column{position:absolute;top:2%;bottom:17%;width:15%;display:grid;grid-template-rows:repeat(6,minmax(0,1fr));gap:5px;z-index:3}
.sheet-left{left:2%}.sheet-right{right:2%}
#hero-sheet .sheet-slot{position:relative;width:100%;height:100%;min-width:0;padding:0;border:2px solid #756a4c;box-shadow:inset 0 0 0 2px #090f0b,inset 0 0 15px #000c;background:linear-gradient(135deg,#27312b,#080f0c);border-radius:4px}
.sheet-slot span{position:absolute;bottom:3px;right:5px;color:#b4a784;font-size:11px;opacity:.75}
.sheet-top-slot{position:absolute;top:2%;right:19%;width:13%;height:12%;z-index:3}
.sheet-bottom-slots{position:absolute;left:2%;right:2%;bottom:2%;height:13%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8%;z-index:3}
.sheet-parameters{min-height:0;display:flex;flex-direction:column;border:1px solid #978052;border-radius:5px;background:linear-gradient(100deg,#dfc690,#edd6a1 50%,#d2b580);color:#463c26;box-shadow:inset 0 0 16px #6d4c2944;padding:9px 12px}
.sheet-tabs{display:flex;margin:-9px -12px 7px;gap:3px;background:#17211d}
#hero-sheet .sheet-tabs button{flex:1;padding:8px 3px;background:#1a241d;border-bottom:0}
#hero-sheet .sheet-tabs button[aria-selected=true]{background:#ddc28c;color:#46351c;box-shadow:inset 0 2px 5px #f8e6b377}
.sheet-parameters h3{margin:7px 0 3px;font:16px Georgia;color:#886031;border-bottom:1px solid #ad85464d}
.sheet-stat{display:flex;align-items:center;gap:10px;min-height:23px;font-size:14px}
.sheet-stat>span:first-child{width:25px;font-size:11px;color:#977440}.sheet-placeholder{height:1px;background:#a5885140;flex:1}.sheet-stat output{min-width:25px;text-align:right}
.sheet-growth{display:grid;grid-template-columns:1fr 1fr;gap:5px 16px}.sheet-growth .sheet-placeholder{height:6px;background:#9c824a44;border:1px solid #b29151}
.sheet-points{margin-top:auto;padding-top:8px;border-top:1px solid #a8874c66;font-size:13px;display:flex;justify-content:space-between}
#hero-sheet .sheet-footer{position:static;display:flex;justify-content:space-between;gap:12px;width:auto;padding:0;background:none;pointer-events:auto}
#hero-sheet .sheet-footer button{min-width:25%}
#hero-sheet #sheet-close{background:linear-gradient(#4b3123,#211912)}
@media(max-height:730px){.sheet-stat{min-height:19px;font-size:12px}.sheet-parameters h3{font-size:14px;margin-top:5px}.sheet-identity{font-size:14px}}
@media(max-width:600px){#hero-sheet{padding:10px}.sheet-body{grid-template-columns:46% 54%;gap:6px;padding-right:6px}.sheet-parameters{padding:6px}.sheet-tabs{margin:-6px -6px 5px}#hero-sheet .sheet-header h2{font-size:17px}.sheet-title-choice{display:none}.sheet-identity{font-size:11px}.sheet-slot span{font-size:9px}.sheet-stat{min-height:20px}.sheet-parameters h3{font-size:13px}}
#hero-sheet .sheet-footer{align-items:center}
#hero-sheet .sheet-footer button{height:36px;padding:7px 14px;line-height:20px}

.sheet-slot-column{bottom:2%;grid-template-rows:repeat(7,minmax(0,1fr))}.sheet-slot span{inset:auto 2px 4px;text-align:center;font-size:10px;line-height:1.1;opacity:.85}#sheet-model{top:7%;height:92%}.sheet-stat>span:first-child{width:auto;flex:1;font-size:inherit;color:inherit}.sheet-stat output{min-width:45px}.sheet-attribute{gap:6px}#hero-sheet .sheet-attribute button{padding:0;width:25px;height:25px;font-size:18px}.sheet-parameters h3{margin-top:12px}.sheet-stat{min-height:27px}#hero-sheet .sheet-footer{justify-content:flex-end}.sheet-equipment::after{display:none}@media(max-height:730px){.sheet-stat{min-height:23px}.sheet-parameters h3{margin-top:7px}#hero-sheet .sheet-attribute button{height:23px}}

.sheet-slot span{overflow-wrap:anywhere}#hero-sheet .sheet-body{overflow:hidden}#hero-sheet .sheet-footer button{min-width:150px}

.sheet-slot-icon{display:block;position:absolute;width:78%;aspect-ratio:1;left:11%;top:50%;transform:translateY(-50%);background-image:url("equipment-slots-v1.png");background-size:400% 400%;background-repeat:no-repeat;opacity:.4;filter:grayscale(.55)}.sheet-slot:hover .sheet-slot-icon,.sheet-slot:focus-visible .sheet-slot-icon{opacity:.7}

#hero-sheet .sheet-slot.equipped{border-color:#b19a64;background:radial-gradient(ellipse,#6b5a3538,#101912 80%);box-shadow:inset 0 0 0 2px #0a110d,inset 0 0 14px #0008}.sheet-slot-icon.sheet-item-icon{opacity:1;filter:none;width:90%;left:5%}.sheet-slot.equipped:hover .sheet-slot-icon{opacity:1}

/* Subtle light behind equipped items, inside their slot frames. */
#hero-sheet .sheet-slot.equipped{overflow:hidden}
#hero-sheet .sheet-slot.equipped::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(ellipse at center,#e8b65040 0%,#c88a2526 30%,#b7741312 52%,transparent 72%);filter:blur(3px);pointer-events:none}
#hero-sheet .sheet-slot.equipped::after{display:none}
#hero-sheet .sheet-slot.equipped .sheet-item-icon{z-index:1}



/* Equipped items have their own inset inventory tile. */
#hero-sheet .sheet-slot.equipped{border-color:#baa16a;background:linear-gradient(145deg,#443824,#191d16 48%,#090e0b);box-shadow:inset 0 0 0 2px #080d09,0 0 3px #d1a15125}
#hero-sheet .sheet-slot.equipped::before{inset:5px;border-radius:2px;border:1px solid #8f754e;background:radial-gradient(ellipse at 48% 48%,#b3873640 0%,#59452660 38%,#151b14 76%),linear-gradient(135deg,#51452f,#0d1510);filter:none;box-shadow:inset 0 1px 0 #e4c68625,inset 0 -4px 9px #0009;pointer-events:none}
#hero-sheet .sheet-slot.equipped::after{display:block;content:"";position:absolute;inset:7px;border-radius:1px;background:linear-gradient(135deg,#f6dfad15,transparent 45%,#0004);opacity:1;pointer-events:none}
#hero-sheet .sheet-slot.equipped .sheet-item-icon{width:85%;left:7.5%;z-index:1;filter:drop-shadow(0 2px 2px #000b)}

#hero-sheet .sheet-slot.equipped:hover::before{border-color:#dbbd7a;background:radial-gradient(ellipse at 48% 48%,#b3873655 0%,#59452670 38%,#151b14 76%)}

/* Every silhouette fits the same centered content area in both dimensions. */
#hero-sheet .sheet-slot .sheet-slot-icon,#hero-sheet .sheet-slot.equipped .sheet-item-icon{inset:10px;left:10px;top:10px;width:auto;height:auto;aspect-ratio:auto;transform:none;display:grid;place-items:center;background-image:none}
#hero-sheet .sheet-slot .sheet-slot-icon svg,#hero-sheet .sheet-slot .sheet-slot-icon img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;overflow:hidden}
#hero-sheet .sheet-slot.equipped .sheet-item-icon{inset:3px;left:3px;top:3px;width:auto;height:auto;filter:none;background:#020303;border-radius:2px;overflow:hidden}