/* Preview skin. Change these components without touching the device or scene. */
.device-stage{--demo-label:10px;--demo-body:12px;--demo-title:18px}
.device-stage .app-head h3{font-size:var(--demo-title);margin-bottom:2px}
.device-stage .app-head p{font-size:11px}.device-stage .level-chip b{font-size:22px}
.device-stage .app-card{border-radius:10px}.device-stage .hp-now{font-size:36px}
.device-stage .hp-note{font-size:10px;min-height:0}.device-stage .hp-buttons{margin-bottom:9px}
.device-stage .ability-grid{gap:7px}.device-stage .ability-grid>div{padding:8px 3px}
.device-stage .ability-grid span{font-size:9px}.device-stage .ability-grid small{font-size:10px}
.device-stage .phone-help{font-size:11px;line-height:1.5}.device-stage .armor-summary{margin:9px 0 14px}
.demo-inspiration{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;min-height:44px;background:var(--bg2);border:1px solid var(--line);border-radius:9px;text-align:left;color:var(--muted)}
.demo-inspiration>span{font-size:21px}.demo-inspiration b{font-size:11px;font-weight:500}.demo-inspiration small{margin-left:auto;font-size:9px}
.demo-inspiration[aria-pressed=true]{border-color:var(--bronze-lo);color:var(--bronze-hi);background:#c8893f0b}
.demo-search input{width:100%;min-height:38px;border:1px solid var(--line2);border-radius:7px;background:var(--bg2);color:var(--text);padding:8px;font-size:12px;margin-bottom:10px}
.demo-spell{border-bottom:1px solid var(--line);text-align:left}.demo-spell summary{cursor:pointer;position:relative;min-height:48px;padding:8px 18px 8px 0;list-style:none}
.demo-spell summary:after{content:'+';position:absolute;right:2px;top:11px;color:var(--volt)}.demo-spell[open] summary:after{content:'−'}
.demo-spell summary b{display:block;font:600 14px var(--serif)}.demo-spell summary span{font-size:10px;color:var(--muted)}
.demo-spell>div{padding:3px 0 10px}.demo-spell dl{display:grid;grid-template-columns:1fr auto;gap:3px;font-size:10px;margin:0 0 8px}.demo-spell dt{color:var(--muted)}.demo-spell dd{margin:0}.demo-spell p{font-size:var(--demo-body);line-height:1.5;margin:5px 0}.demo-spell small{font-size:10px;color:var(--bronze-hi)}
.demo-equipped{padding:9px 10px;background:var(--bg2);border-left:2px solid var(--volt-lo);border-radius:0 7px 7px 0;margin-bottom:12px;font-size:11px;text-align:left}.demo-equipped span{display:block;font-size:9px;color:var(--muted)}.demo-equipped b{font-weight:500}
.device-stage .demo-items{display:block}.demo-item-group>summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:38px;font-size:11px;color:var(--bronze-hi)}.demo-item-group>summary:before{content:'▸';margin-right:5px}.demo-item-group[open]>summary:before{content:'▾'}.demo-item-group>summary span{margin-left:auto;color:var(--muted)}
.demo-item-list{display:grid;gap:6px;margin-bottom:8px}.device-stage .demo-item{padding:7px 9px}.device-stage .demo-item summary{font-size:13px}.device-stage .item-controls{margin-top:3px}
.device-stage[data-device=tablet] .demo-item-list{grid-template-columns:1fr 1fr}
.device-stage[data-device=laptop] .phone-content{padding:12px}.device-stage[data-device=laptop] .app-stats{padding-bottom:8px}.device-stage[data-device=laptop] .app-head{min-height:58px}
@media(max-width:680px){.device-stage[data-device=tablet] .demo-item-list{grid-template-columns:1fr}.demo-search input{font-size:16px}.device-stage[data-device=laptop] .phone-content{padding:8px}.device-stage[data-device=laptop] .demo-inspiration{flex-wrap:wrap;padding:8px;gap:4px}.device-stage[data-device=laptop] .demo-inspiration b{font-size:10px}}
@media(min-width:681px){.device-stage[data-device=laptop] .character-layout,.device-stage[data-device=laptop] .spells-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}.device-stage[data-device=laptop] .spells-layout .gem{width:24px}.device-stage[data-device=laptop] .spells-layout .gem:before{inset:12px 6px}.device-stage[data-device=laptop] .slot-row b{font-size:11px}.device-stage[data-device=laptop] .hp-head{flex-wrap:wrap}.device-stage[data-device=laptop] .hp-buttons{flex-direction:column}.device-stage[data-device=laptop] .demo-inspiration{gap:4px;flex-wrap:wrap}.device-stage[data-device=laptop] .demo-inspiration b{font-size:10px}.device-stage[data-device=laptop] .ability-grid b{font-size:18px}}