/* Shared visual shell for the Useful tools. Layouts remain tool-specific. */
:is(#refiningSimulatorDialog,#chestSimulatorDialog,#twilightDialog,#dragonBallDialog,#treatiseCalculatorDialog,#druidSkillsDialog,#titlesGuideDialog,#jewelryCraftingDialog){--tool-border:#303541;--tool-panel:#191c24;color:#f1f1f4;background:#101116;border:1px solid var(--tool-border);border-radius:20px;padding:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:0 24px 80px #0009}
:is(#refiningSimulatorDialog,#chestSimulatorDialog,#twilightDialog,#dragonBallDialog,#treatiseCalculatorDialog,#druidSkillsDialog,#titlesGuideDialog,#jewelryCraftingDialog)::backdrop{background:#06070bdc;backdrop-filter:blur(6px)}
:is(.refine-window,.chest-window,.twilight-window,.dragon-window,.treatise-window,.druid-skills-window,.titles-window,.jewelry-window){margin:0;padding:26px 30px 22px;background:radial-gradient(ellipse at 90% 0%,#e52b4310,transparent 48%),linear-gradient(145deg,#15171e,#101116 65%);color:#f1f1f4}
:is(.refine-window,.chest-window,.dragon-window,.treatise-window,.druid-skills-window,.titles-window,.jewelry-window)>h2{margin:8px 52px 8px 0;font-size:clamp(24px,3vw,30px);font-weight:750;line-height:1.2;letter-spacing:-.025em;color:#f1f1f4}
:is(.refine-kicker,.chest-kicker,.twilight-kicker,.dragon-kicker,.treatise-kicker,.druid-skills-kicker,.titles-kicker){color:#ff9a69;font-size:11px;font-weight:800;letter-spacing:.13em;line-height:1.5;text-transform:uppercase}
:is(.refine-intro,.chest-intro,.dragon-intro,.treatise-intro,.druid-skills-intro,.titles-intro,.jewelry-intro){color:#aeb3c0;font-size:13px;line-height:1.6;margin:0 0 20px}
:is(.refine-close,.chest-close,.twilight-close,.dragon-close,.treatise-close,.druid-skills-close,.titles-close){position:absolute;top:18px;right:18px;display:grid;place-items:center;width:40px;height:40px;min-width:40px;min-height:40px;padding:0;border:1px solid #353a46;border-radius:50%;background:#20232d;color:#e6e8ee;font:400 25px/1 Inter,system-ui,sans-serif;text-decoration:none;box-sizing:border-box;cursor:pointer;transition:background .15s,border-color .15s}
:is(.refine-close,.chest-close,.twilight-close,.dragon-close,.treatise-close,.druid-skills-close,.titles-close):hover{background:#332028;border-color:#9b3447}
:is(.refine-close,.chest-close,.twilight-close,.dragon-close,.treatise-close,.druid-skills-close,.titles-close):focus-visible{outline:2px solid #ff9a69;outline-offset:3px}
:is(.dragon-panel,.jewelry-craft-area,.jewelry-result,.jewelry-resource-panel,.druid-skill-detail){background:#191c24;border-color:#303541;border-radius:14px}
@media(max-width:640px){:is(#refiningSimulatorDialog,#chestSimulatorDialog,#twilightDialog,#dragonBallDialog,#treatiseCalculatorDialog,#druidSkillsDialog,#titlesGuideDialog,#jewelryCraftingDialog){border-radius:16px}:is(.refine-window,.chest-window,.twilight-window,.dragon-window,.treatise-window,.druid-skills-window,.titles-window,.jewelry-window){padding:20px 14px 16px}:is(.refine-close,.chest-close,.twilight-close,.dragon-close,.treatise-close,.druid-skills-close,.titles-close){top:12px;right:12px;width:36px;height:36px;min-width:36px;min-height:36px;font-size:23px}}
/* Site accents inside the dragon and refining tools. */
#dragonBallDialog .dragon-goal-summary{border-color:#713141;background:#2c1c25;color:#ffad83}
#dragonBallDialog :is(.dragon-result-row strong,.dragon-cost-grid strong,.dragon-drop-rates summary){color:#ffad83}
#refiningSimulatorDialog .refine-current-level{border-color:#713141;background:linear-gradient(145deg,#34202b,#20191f);color:#ffad83}
#refiningSimulatorDialog .refine-progress span{background:linear-gradient(90deg,var(--accent,#e52b43),#ff9a69)}
#refiningSimulatorDialog :is(.refine-stat-grid strong,.refine-log-entry strong,.refine-chance-row span:first-child){color:#ffad83}
#refiningSimulatorDialog :is(.refine-aid:hover,.refine-aid.active){border-color:var(--accent,#e52b43);background:#321c25}
#refiningSimulatorDialog :is(.refine-roll.secondary,.refine-stop){border-color:#713141;background:#2c1c25;color:#edb5c0}
#refiningSimulatorDialog .refine-item-tooltip{border-color:#44404b;background:linear-gradient(160deg,#191b23f7,#101117f7)}
#refiningSimulatorDialog .refine-item-tooltip strong{color:#ffad83}
.twilight-window>.twilight-page-title{margin:8px 52px 8px 0;font-size:clamp(24px,3vw,30px);font-weight:750;line-height:1.2;letter-spacing:-.025em;color:#f1f1f4}
.twilight-window .twilight-lead{margin:0 0 20px;color:#aeb3c0;font-size:13px;line-height:1.6;text-align:left}

#twilightDialog .twilight-window>.twilight-page-title{text-align:left;justify-self:start;width:auto;margin-left:0}

/* Use the available viewport height consistently across all tool dialogs. */
:is(#refiningSimulatorDialog,#chestSimulatorDialog,#twilightDialog,#dragonBallDialog,#treatiseCalculatorDialog,#druidSkillsDialog,#titlesGuideDialog,#jewelryCraftingDialog)[open]{position:fixed;inset:0;margin:auto;height:calc(100vh - 32px);height:calc(100dvh - 32px);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:hidden;box-sizing:border-box}
:is(#refiningSimulatorDialog,#chestSimulatorDialog,#twilightDialog,#dragonBallDialog,#treatiseCalculatorDialog,#druidSkillsDialog,#titlesGuideDialog,#jewelryCraftingDialog)>:is(.refine-window,.chest-window,.twilight-window,.dragon-window,.treatise-window,.druid-skills-window,.titles-window,.jewelry-window){height:100%;max-height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;overscroll-behavior:contain;scrollbar-gutter:stable}
@media(max-width:640px){:is(#refiningSimulatorDialog,#chestSimulatorDialog,#twilightDialog,#dragonBallDialog,#treatiseCalculatorDialog,#druidSkillsDialog,#titlesGuideDialog,#jewelryCraftingDialog)[open]{height:calc(100vh - 16px);height:calc(100dvh - 16px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}}
/* One shared size; override legacy per-tool widths and open-state rules. */
:is(#refiningSimulatorDialog,#chestSimulatorDialog,#twilightDialog,#dragonBallDialog,#treatiseCalculatorDialog,#druidSkillsDialog,#titlesGuideDialog,#jewelryCraftingDialog)[open]{width:min(1200px,calc(100vw - 32px))!important;max-width:min(1200px,calc(100vw - 32px))!important;height:calc(100dvh - 32px)!important;max-height:calc(100dvh - 32px)!important;min-height:0!important;inset:0!important;margin:auto!important;padding:0!important}
:is(#refiningSimulatorDialog,#chestSimulatorDialog,#twilightDialog,#dragonBallDialog,#treatiseCalculatorDialog,#druidSkillsDialog,#titlesGuideDialog,#jewelryCraftingDialog)>:first-child{width:100%!important;max-width:none!important;height:100%!important;max-height:100%!important;margin:0!important;box-sizing:border-box}
@media(max-width:640px){:is(#refiningSimulatorDialog,#chestSimulatorDialog,#twilightDialog,#dragonBallDialog,#treatiseCalculatorDialog,#druidSkillsDialog,#titlesGuideDialog,#jewelryCraftingDialog)[open]{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;height:calc(100dvh - 16px)!important;max-height:calc(100dvh - 16px)!important}}
/* Responsive inner layouts for the shared full-height shell. */
:is(.refine-layout,.chest-simulator-layout,.dragon-layout,.treatise-layout,.druid-skills-layout,.jewelry-craft-columns)>*{min-width:0}
:is(.twilight-results,.treatise-list,.druid-skills-list,.chest-top-drops,.refine-log){align-content:start;justify-content:start;scrollbar-gutter:stable}
#chestSimulatorDialog .chest-top-drops{display:grid;grid-auto-rows:max-content;align-content:start;justify-content:stretch;min-height:0;overflow-y:auto;overflow-x:hidden}
#chestSimulatorDialog .chest-result-heading{flex:0 0 auto}
#jewelryCraftingDialog .jewelry-result{min-width:0;max-height:none;overflow:visible}
#titlesGuideDialog .titles-list{min-width:0;width:100%}
@media(min-width:801px){
:is(.chest-window,.refine-window,.dragon-window,.treatise-window,.druid-skills-window){display:flex;flex-direction:column;overflow:hidden!important}
:is(.chest-window,.refine-window,.dragon-window,.treatise-window,.druid-skills-window)>:not(.chest-simulator-layout):not(.refine-layout):not(.dragon-layout):not(.treatise-layout):not(.druid-skills-layout){flex-shrink:0}
:is(.chest-simulator-layout,.refine-layout,.dragon-layout,.treatise-layout,.druid-skills-layout){flex:1 1 0;min-height:0;align-items:start;overflow:hidden;width:100%;margin-top:16px}
.chest-simulator-layout{grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr)}
.chest-controls-panel{max-height:100%;overflow:auto;padding-right:3px;min-height:0}
#chestSimulatorDialog .chest-content{height:100%;max-height:100%;min-height:0;align-self:stretch;justify-content:flex-start;overflow:hidden;margin:0}
#chestSimulatorDialog .chest-top-drops{flex:1 1 0;max-height:none;height:auto}
.refine-layout{grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr)}
:is(.refine-controls,.refine-results,.dragon-results,.dragon-target-panel,.treatise-results){max-height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:4px;scrollbar-gutter:stable}
.refine-aid-grid{max-height:clamp(180px,28dvh,340px)}.refine-log{max-height:clamp(180px,35dvh,460px)}
.dragon-layout{grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr)}
.treatise-layout{grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr)}
.treatise-picker{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.treatise-picker>*{flex-shrink:0}.treatise-picker .treatise-list{flex:1 1 0;min-height:0;max-height:none;overflow:auto}
.druid-skills-layout{grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr)}
.druid-skills-list{height:100%;max-height:none;min-height:0;grid-auto-rows:max-content;overflow:auto}.druid-skill-detail{max-height:100%;overflow:auto;min-width:0}
#twilightDialog .twilight-results{max-height:none;overflow:visible}#twilightDialog .twilight-item-grid{max-height:none;overflow:visible}
}
@media(max-width:800px){
:is(.refine-layout,.chest-simulator-layout,.dragon-layout,.treatise-layout,.druid-skills-layout,.jewelry-craft-columns){grid-template-columns:minmax(0,1fr);height:auto;min-height:0;align-items:start}
#chestSimulatorDialog .chest-content{height:auto;min-height:160px;max-height:none;overflow:visible}
#chestSimulatorDialog .chest-top-drops{max-height:55dvh;overflow:auto;min-height:0;align-content:start}
.druid-skills-list{height:auto;max-height:45dvh;grid-auto-rows:max-content}.treatise-list{max-height:40dvh}
.dragon-owned-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:801px){:is(.chest-simulator-layout,.refine-layout,.dragon-layout,.treatise-layout,.druid-skills-layout){grid-template-rows:minmax(0,1fr);align-content:stretch}#chestSimulatorDialog .chest-content{align-self:stretch;height:100%}}
/* Treatise rows fill the picker regardless of text length or selected level. */
#treatiseCalculatorDialog .treatise-list{width:100%;grid-template-columns:minmax(0,1fr);justify-content:stretch;justify-items:stretch;align-content:start}
#treatiseCalculatorDialog .treatise-list>*{width:100%;max-width:100%;min-width:0;box-sizing:border-box;justify-self:stretch}