/* Skill tree is deliberately scoped: existing menus and the four combat buttons keep their dimensions. */
.skill-tree-page{--skill-accent:#bba0ff;color:#ece7cc;min-width:0;padding:0 0 4px;container-type:inline-size}
.skill-tree-page *,.st-actions *{box-sizing:border-box}
.skill-tree-page .st-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;min-width:0}
.skill-tree-page h2{font-size:clamp(25px,6vw,34px);line-height:1.12;margin:4px 0 0;font-weight:500}
.skill-tree-page .st-kicker{display:block;color:#acae9b;font:600 10px/1.4 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.skill-tree-page .st-point-bank{flex:0 0 58px;border:1px solid #ddca83a6;background:linear-gradient(140deg,#dbc78522,#9aa27009);border-radius:15px;padding:7px 9px;text-align:center;box-shadow:inset 0 1px #f0d98f14}
.skill-tree-page .st-point-bank strong{display:block;color:#eddb9b;font-size:25px;line-height:1}
.skill-tree-page .st-point-bank span{display:block;color:#bcb8a0;font-size:11px;line-height:1.6}
.skill-tree-page .st-notice{margin:0;min-height:0;font-size:12px;line-height:1.4;color:#cfdfba}
.skill-tree-page .st-notice.has-message{margin:0 0 10px;padding:9px 11px;border-left:2px solid #abc693;background:#91ac7a0b;border-radius:4px}
.skill-tree-page .st-intro{margin:0 0 14px;color:#b5c3b8;font-size:13px;line-height:1.5}
.skill-tree-page .st-art{display:block;aspect-ratio:1;object-fit:cover;background:#0a1917;border-radius:13px;width:64px;height:64px;flex:none;border:1px solid #a7bcaa33}
.skill-tree-page button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-width:0}
.skill-tree-page button:focus-visible,.st-actions button:focus-visible,.skill-tree-page summary:focus-visible{outline:2px solid #f2db95;outline-offset:3px}
.skill-tree-page .st-class-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px}
.skill-tree-page .st-class{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid #b3c6b037;border-radius:14px;padding:11px 5px;margin:0;width:auto;background:linear-gradient(145deg,#56746814,#0e242332);color:#e9e8ce;text-align:center;transition:border-color .15s,background .15s;cursor:pointer;min-height:142px;white-space:normal}
.skill-tree-page .st-class .st-art{width:52px;height:52px;border-color:#9cbaa544}
.skill-tree-page .st-class strong{font-size:13px;font-weight:600}
.skill-tree-page .st-class small{font-size:10px;color:#b9c8bd;line-height:1.35;max-width:92px}
.skill-tree-page .st-class.is-selected{border-color:var(--skill-accent);box-shadow:inset 0 0 18px #fff1,0 0 0 1px color-mix(in srgb,var(--skill-accent) 35%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--skill-accent) 17%,#15302a),#152c29)}
.skill-tree-page .st-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 10px}
.skill-tree-page .st-section-heading h3{font:600 14px/1.3 system-ui,sans-serif;margin:0;color:#e9e7cf}
.skill-tree-page .st-section-heading>span{color:#a5b2a5;font-size:10px;white-space:nowrap}
.skill-tree-page .st-combo{padding:12px;border:1px solid #8ba48d35;border-radius:16px;background:linear-gradient(135deg,#547f6c0c,#10282060);margin:0 0 12px}
.skill-tree-page .st-combo-chain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;position:relative}
.skill-tree-page .st-combo-chain:before{content:"";position:absolute;left:17%;right:17%;top:31px;height:1px;background:linear-gradient(90deg,#bdba9544,var(--skill-accent),#bdba9533);opacity:.5;pointer-events:none}
.skill-tree-page .st-combo-node{position:relative;display:flex;flex-direction:column;align-items:center;border:1px solid transparent;border-radius:12px;padding:6px 2px 8px;margin:0;gap:5px;color:#dedec7;background:transparent;width:auto;text-align:center;cursor:pointer;white-space:normal}
.skill-tree-page .st-combo-art{position:relative;display:block}
.skill-tree-page .st-combo-art .st-art{width:58px;height:58px;border-radius:14px;border-color:var(--skill-accent)}
.skill-tree-page .st-combo-node strong{font-size:12px;line-height:1.2;font-weight:600}
.skill-tree-page .st-combo-node small{font-size:10px;color:#aebbaf;line-height:1.2}
.skill-tree-page .st-combo-node.is-unlearned .st-art{filter:saturate(.45);opacity:.58}
.skill-tree-page .st-combo-node.is-new .st-art{filter:none;opacity:1;box-shadow:0 0 16px color-mix(in srgb,var(--skill-accent) 30%,transparent)}
.skill-tree-page .st-combo-node.is-new small{color:#e8d790}
.skill-tree-page .st-combo-node.is-selected{border-color:#ddcc8b9c;background:#dac8830a}
.skill-tree-page .st-sequence{position:absolute;right:-4px;bottom:-3px;display:grid;place-items:center;width:19px;height:19px;border:1px solid #ccc69170;border-radius:7px;background:#193128;color:#e7d59a;font:600 10px/1 system-ui,sans-serif;box-shadow:0 2px 5px #0005}
.skill-tree-page .st-combo-help{margin:8px 0 0;font-size:11px;line-height:1.45;color:#acbeb0;text-align:center}
.skill-tree-page .st-detail{border:1px solid color-mix(in srgb,var(--skill-accent) 43%,#526853);border-radius:16px;background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--skill-accent) 9%,transparent),transparent 70%),#132b2640;padding:14px;margin:0 0 12px;box-shadow:inset 0 1px #ffffff07}
.skill-tree-page .st-detail-heading{display:flex;align-items:center;gap:12px;min-width:0}
.skill-tree-page .st-detail-heading>div{min-width:0}
.skill-tree-page .st-detail-heading .st-art{width:64px;height:64px;border-color:var(--skill-accent);box-shadow:0 4px 18px #0003}
.skill-tree-page .st-detail-heading h3{margin:3px 0 4px;font-size:21px;line-height:1.1;font-weight:500;overflow-wrap:anywhere}
.skill-tree-page .st-rank-label{display:flex;align-items:center;gap:8px;color:#b4c2b6;font-size:10px}
.skill-tree-page .st-ranks{display:flex;gap:3px;align-items:center;height:8px}
.skill-tree-page .st-ranks i{display:block;width:7px;height:3px;border-radius:2px;background:#91a18f35}
.skill-tree-page .st-ranks i.is-earned{background:var(--skill-accent);box-shadow:0 0 4px color-mix(in srgb,var(--skill-accent) 20%,transparent)}
.skill-tree-page .st-description{font-size:13px;line-height:1.5;color:#c2cec2;margin:11px 0}
.skill-tree-page .st-benefit{display:grid;grid-template-columns:58px minmax(0,1fr);gap:8px;align-items:baseline;border-top:1px solid #adbea617;padding:8px 0}
.skill-tree-page .st-benefit>span{font:600 10px/1.5 system-ui,sans-serif;color:#a9b8ac}
.skill-tree-page .st-benefit p{font-size:12px;line-height:1.45;color:#b4c4b6;margin:0;overflow-wrap:anywhere}
.skill-tree-page .st-benefit-next p{color:#ecdfae}
.skill-tree-page .st-benefit-next>span{color:#d0c492}
.skill-tree-page .st-detail-note{color:#97af9f;font-size:11px;line-height:1.45;margin:6px 0 0}
.skill-tree-page .st-requirement{border:1px solid #b8b28f20;border-radius:8px;padding:8px 10px;background:#95a38a09;color:#c3c2aa;font-size:12px;line-height:1.4;margin:9px 0 0}
.st-actions{display:grid;gap:7px;width:100%;min-width:0}
#modal-actions:has(.st-actions){padding:10px 14px 12px}
#modal-actions .st-actions button,.skill-tree-page .st-actions button{width:100%;min-width:0;max-width:100%;min-height:43px;height:auto;margin:0;padding:10px 12px;font-size:13px;line-height:1.35;border-radius:10px;white-space:normal;overflow-wrap:anywhere;display:block;text-align:center}
.st-actions .st-upgrade span{white-space:nowrap;font-size:11px;opacity:.85}
.st-actions .st-footer-hint{font-size:12px;margin:0 0 2px;text-align:center;color:#cabf9c}
.st-actions button:disabled{cursor:wait;opacity:.65}
.skill-tree-page .st-tree{margin:2px 0 0;display:grid;gap:8px}
.skill-tree-page .st-row{border:1px solid #abc2a124;border-radius:13px;background:#162e2733;padding:0;overflow:hidden}
.skill-tree-page .st-row summary{display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none;cursor:pointer;padding:12px;color:#dee0c7;min-height:45px;outline-offset:-3px}
.skill-tree-page .st-row summary::-webkit-details-marker{display:none}
.skill-tree-page .st-row summary>span{display:flex;align-items:baseline;gap:8px}
.skill-tree-page .st-row summary strong{font-size:13px;font-weight:600}
.skill-tree-page .st-row summary small{font-size:10px;color:#9dad9f}
.skill-tree-page .st-row-progress{font-size:11px;color:#a8b7a9;font-variant-numeric:tabular-nums}
.skill-tree-page .st-row-progress i{font-style:normal;transform:rotate(0);transition:transform .15s}
.skill-tree-page .st-row[open] .st-row-progress i{transform:rotate(180deg)}
.skill-tree-page .st-node-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:0 10px 10px}
.skill-tree-page .st-node{display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;border:1px solid #abb99620;border-radius:11px;padding:10px 4px 9px;margin:0;background:#0c21194d;width:auto;color:#d8dfca;cursor:pointer;white-space:normal}
.skill-tree-page .st-node .st-art{width:46px;height:46px;border-radius:10px}
.skill-tree-page .st-node.is-unlearned .st-art{opacity:.65;filter:saturate(.7)}
.skill-tree-page .st-node.is-selected{border-color:#dccc8baa;background:#d9c8840b;box-shadow:inset 0 0 0 1px #d9c88412}
.skill-tree-page .st-node strong{font-size:11px;line-height:1.3;min-height:28px;display:flex;align-items:center;font-weight:600}
.skill-tree-page .st-node small{color:#a7b9a9;font-size:9px;line-height:1.3;min-height:12px}
.skill-tree-page .st-budget-note{color:#8da695;font-size:10px;line-height:1.5;text-align:center;margin:12px 8px}
.skill-tree-page .st-current-row{margin:0 0 12px}
.skill-tree-page .st-current-row .st-node-grid{padding:0;grid-template-columns:repeat(3,minmax(0,1fr))}
.skill-tree-page .st-current-row .st-node-grid:has(>button:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.skill-tree-page .st-future-combo{margin:0 0 12px;border:1px solid #a7b99829;border-radius:10px;background:#16312624}
.skill-tree-page .st-future-combo>summary{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:11px 10px;font-size:12px;cursor:pointer;color:#c4cfbd;list-style:none}
.skill-tree-page .st-future-combo>summary:after{content:'⌄';color:#b9c7af}
.skill-tree-page .st-future-combo>summary span{font-size:10px;color:#9dad9f}
.skill-tree-page .st-future-combo .st-combo{border:none;margin:0}




@container(max-width:330px){
  .skill-tree-page .st-combo{padding:10px 6px}
  .skill-tree-page .st-combo-chain{gap:3px}
  .skill-tree-page .st-combo-art .st-art{width:49px;height:49px}
  .skill-tree-page .st-combo-node strong{font-size:11px}
  .skill-tree-page .st-node-grid{gap:5px;padding:0 6px 8px}
  .skill-tree-page .st-detail{padding:11px}
  .skill-tree-page .st-benefit{grid-template-columns:49px minmax(0,1fr)}
  .skill-tree-page .st-class-choices{gap:6px}
  .skill-tree-page .st-class .st-art{width:45px;height:45px}
}
@media(prefers-reduced-motion:reduce){.skill-tree-page *{transition:none!important;animation:none!important}}

/* Earned power changes only the outline and +rank. Familiar icons and sizing stay. */
.abilities .ability.nova{border-color:#d9d7a36b;box-shadow:0 3px 0 #172c29,0 4px 20px #12291d66}
.abilities .ability.class-combo-primed{border-color:#ead18c;box-shadow:inset 0 0 0 2px #efd994b0,0 0 8px #e6d39640}
.abilities .ability.class-combo-primed[data-combo-power="2"]{border-color:#f7dc87;box-shadow:inset 0 0 0 3px #f0d686,0 0 11px #ebce8355}
.abilities .ability.class-combo-primed[data-combo-power="3"]{border-color:#ffe6a0;box-shadow:inset 0 0 0 4px #ffe4a1,0 0 14px #f5d57e80}
.abilities .ability .combo-rank{font:inherit;font-weight:800;color:#ffe4a1;letter-spacing:0}
.abilities .ability.class-combo-primed.cooling>span{position:relative;z-index:1}
.abilities .combo-cast{animation:combo-tap .2s ease-out}
@keyframes combo-tap{50%{filter:brightness(1.12)}}
@media(prefers-reduced-motion:reduce){.abilities .combo-cast{animation:none}}

/* Cooldown dims the familiar skill; it never covers the next-cast label or icon. */
.abilities .ability.cooling b{inset:auto;top:3px;left:50%;transform:translateX(-50%);width:auto;height:auto;padding:1px 5px;border-radius:8px;font-size:10px;line-height:12px;background:#122b26e6;pointer-events:none;z-index:2}
.abilities .ability.cooling>svg{opacity:.38}
.abilities .ability.cooling>span{opacity:.7;position:relative;z-index:1}
.abilities .ability.class-combo-primed>span{font-size:11px;font-weight:700;color:#f8e9b9;white-space:nowrap;letter-spacing:0}
.abilities .ability.class-combo-primed.cast-confirmed{animation:none}

/* Combat controls must never select their labels during repeated taps or holds. */
.abilities .ability,
.abilities .ability * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Long translated names wrap inside the existing skill cards. */
.skill-tree-page .st-heading>div:first-child{min-width:0}
.skill-tree-page .st-class strong,.skill-tree-page .st-class small,
.skill-tree-page .st-combo-node strong,.skill-tree-page .st-combo-node small,
.skill-tree-page .st-node strong,.skill-tree-page .st-node small,
.skill-tree-page .st-point-bank span{max-width:100%;overflow-wrap:anywhere;hyphens:auto}
.skill-tree-page .st-section-heading h3{min-width:0;overflow-wrap:anywhere}
#modal:has(.skill-tree-page) .modal-bar{position:relative;z-index:2}

.skill-tree-page .st-reset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border-top:1px solid #a2b39124;padding:18px 0 8px;margin-top:16px}
.skill-tree-page .st-reset button{width:100%;min-width:0;min-height:54px;margin:0;padding:12px 10px;font-size:13px;line-height:1.35;white-space:normal;overflow-wrap:anywhere;text-align:center}
.skill-tree-page .st-reset button small{display:block;margin-top:5px;font-size:11px;opacity:.75}
/* A stable overview: choices stay in their tier; details grow beneath them. */
#modal-content:has(.skill-tree-page){overflow-anchor:none;scroll-behavior:auto}
.skill-tree-page .st-row summary>span:first-child{display:block;min-width:0}
.skill-tree-page .st-row summary small{display:block;margin-top:4px;line-height:1.5;overflow-wrap:anywhere}
.skill-tree-page .st-row-progress{flex:none;display:flex;align-items:center;gap:8px}
.skill-tree-page .st-inline-detail{margin:0 10px 12px}
.skill-tree-page>.st-inline-detail{margin:0 0 12px}
.skill-tree-page .st-inline-detail .st-detail{margin-bottom:8px}
.skill-tree-page .st-node-grid:has(>button:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.skill-tree-page .st-node-art{position:relative;display:block}
.skill-tree-page .is-locked .st-art{opacity:.35;filter:saturate(.25)}
.skill-tree-page .is-locked>strong,.skill-tree-page .is-locked>small{opacity:.6}
.skill-tree-page .st-lock{display:grid;place-items:center;width:22px;height:22px;border:1px solid #b5c4b05c;border-radius:50%;background:#213a33e8;color:#e5e4c8;box-shadow:0 2px 5px #0003}
.skill-tree-page .st-lock svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.skill-tree-page .st-node-art>.st-lock,.skill-tree-page .st-combo-art>.st-lock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
#modal-actions{position:relative}
#skill-lock-notice{position:absolute;bottom:calc(100% + 8px);left:14px;right:14px;width:calc(100% - 28px);margin:0;border:1px solid #c9b46f88;border-radius:12px;padding:12px 16px;background:#203d34f5;color:#eee4bc;box-shadow:0 5px 18px #0004;font:500 13px/1.5 system-ui;text-align:center;z-index:5;white-space:normal}

#juice-notice.juice-travel,#juice-notice.juice-recovery{top:var(--juice-top,27%);width:min(340px,calc(100vw - 40px));padding:14px 20px;border-radius:18px;background:linear-gradient(110deg,#243c3bed,#213a32f5,#243c3bed)}
#juice-notice.juice-travel .juice-eyebrow,#juice-notice.juice-recovery .juice-eyebrow{font-size:17px;letter-spacing:.03em;text-wrap:balance}
#juice-notice.juice-recovery .juice-detail{font-size:13px;margin-top:5px}
#celebration-dismiss{display:none!important}
#toast.visible{pointer-events:auto;cursor:pointer;touch-action:manipulation}