.campaign-progress{display:flex;align-items:center;gap:10px}#worldLabel{font-size:12px;font-weight:900;color:#fff2c8;background:#294b48;padding:8px;border-radius:10px;white-space:nowrap}
#crossingHint{position:fixed;width:220px;z-index:8;background:#254b49f5;color:#fff0ca;border:2px solid #f1ce75;border-radius:12px;padding:9px 13px;text-align:center;font:bold 13px system-ui;pointer-events:none;box-shadow:0 3px 10px #183b3d55}#crossingHint[hidden]{display:none}
#tutorial.crossing{animation:campaignSwipe 1.8s infinite}#tutorial.crossing svg{animation:none}#tutorial.crossing .tap-ring{animation:none;opacity:.65}
@keyframes campaignSwipe{0%,20%{translate:0 0;opacity:1}75%,88%{translate:var(--swipe-x) var(--swipe-y);opacity:1}100%{translate:var(--swipe-x) var(--swipe-y);opacity:0}}
@media(max-width:430px){.campaign-progress{display:block}#worldLabel{display:block;padding:4px 8px;width:max-content;margin-bottom:6px}#stages{gap:3px}}
@media(prefers-reduced-motion:reduce){#tutorial.crossing{animation:none}}
#skillDock{position:fixed;z-index:9}#skillDock[hidden]{display:none}
#skill{width:70px;height:76px;border:3px solid #efcd77;border-radius:16px;background:#073b46;color:#ffe9b6;box-shadow:0 4px 0 #173f43;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3px;font:bold 12px system-ui}
#skill canvas{width:44px;height:44px;border-radius:9px}#skill:disabled{opacity:.65}#skill.armed{box-shadow:0 0 15px #ffe398;border-color:#fff5ca}
#chooser{position:absolute;display:grid;grid-template-columns:repeat(2,78px);gap:8px;background:#183f45f5;border:2px solid #eccb7d;border-radius:16px;padding:9px;box-shadow:0 4px 16px #183b3d66}#chooser[hidden]{display:none}
#chooser button{border:2px solid transparent;border-radius:11px;background:#073b46;color:#fff0cb;min-height:76px;display:flex;align-items:center;flex-direction:column;justify-content:center;font:bold 12px system-ui;padding:3px}#chooser canvas{width:46px;height:46px;border-radius:6px}#chooser button[aria-pressed=true]{border-color:#f6d678;background:#24565b}
#skillHint{position:fixed;z-index:8;width:238px;max-width:calc(100vw - 24px);background:#23494cf5;color:#fff1ca;border:2px solid #eacb7f;border-radius:12px;padding:8px 12px;text-align:center;font:bold 13px system-ui;pointer-events:none}#skillHint[hidden]{display:none}
#enemySkill{position:fixed;z-index:8;top:72px;right:12px;background:#513944ee;color:#ffe8cc;border-radius:9px;padding:6px 9px;font:bold 11px system-ui;pointer-events:none}#enemySkill[hidden]{display:none}#enemySkill.warning{background:#a64836;color:#fff4d2}
#overlay{z-index:12}
@media(orientation:portrait){.has-skills #dock{padding:8px;left:50%}.has-skills #queue{gap:4px}.has-skills .card{width:40px;height:46px}.has-skills .card canvas{width:40px;height:40px}#skill{width:56px;height:68px}#skill canvas{width:38px;height:38px}#chooser{gap:4px;padding:6px}#chooser button{min-height:60px;font-size:10px}#chooser canvas{width:34px;height:34px}}
@media(orientation:landscape){.has-skills #dock{top:calc(50% - 12px)}#enemySkill{top:52px}#skillHint{width:238px}#chooser{gap:4px;padding:6px}#chooser button{min-height:46px;font-size:10px;padding:1px}#chooser canvas{width:30px;height:30px}}
#tutorial{z-index:10}
.reward[data-upgrade^="skill-"] strong{white-space:normal;font-size:clamp(13px,3.8vw,17px);line-height:1.15}

/* Grey drains downward, revealing the charged tile from bottom to top. */
#skill{position:relative;overflow:hidden}
#skill:disabled{opacity:1}
#skill .skill-cooldown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-bottom:16px;background:#50565a;filter:grayscale(1);clip-path:inset(0 0 calc(100% - var(--cooldown,0%)) 0);pointer-events:none}
#skillLabel{position:relative;z-index:1;text-shadow:0 1px 2px #000}
#skill.cooling{border-color:#858c91;box-shadow:0 4px 0 #38434a}
#skill:not(:disabled){border-color:#ffe598;box-shadow:0 0 10px #ffe39866,0 4px 0 #173f43}