.ff-root {
    --ff-ink: #26352f;
    --ff-muted: #69756f;
    --ff-paper: #fffdf5;
    --ff-violet: #7651b8;
    --ff-violet-dark: #4f367f;
    --ff-mint: #6ab68d;
    --ff-gold: #e3b14d;
    position: relative;
    width: 100%;
    min-height: 560px;
    overflow: hidden;
    color: var(--ff-ink);
    background: #e8efe4;
    font-family: var(--font-body, "Yu Gothic", sans-serif);
    isolation: isolate;
}
.ff-root *, .ff-root *::before, .ff-root *::after { box-sizing: border-box; }
.ff-root button { font: inherit; }
.ff-root button:focus-visible { outline: 3px solid #f3c45e; outline-offset: 3px; }
.ff-root [hidden] { display: none !important; }
.ff-kicker { color: #7651b8; font: 900 .66rem/1.2 var(--font-score, monospace); letter-spacing: .16em; }

.ff-boot {
    min-height: 560px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 14px;
    padding: 40px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 38%, rgba(255,255,255,.95), transparent 24%),
        linear-gradient(145deg, #dbead4, #d9d6ea);
}
.ff-boot-mark {
    width: 86px; height: 86px; display: grid; place-items: center;
    border: 3px solid rgba(79,54,127,.24); border-radius: 32px 32px 28px 38px;
    color: #fff8db; background: linear-gradient(145deg,#8c69c9,#557e70);
    box-shadow: 0 18px 42px rgba(62,53,89,.2), inset 0 0 0 7px rgba(255,255,255,.18);
    font: 900 2rem/1 "Yu Mincho", serif;
    animation: ffBootBob 1.6s ease-in-out infinite;
}
.ff-boot strong { font-family: var(--font-display, sans-serif); font-size: 1.2rem; }
.ff-boot > div { width: min(310px,70vw); height: 8px; overflow: hidden; border-radius: 99px; background: rgba(58,73,67,.12); }
.ff-boot > div i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#63a87f,#8b64c7,#e6b755); transition: width .25s ease; }
.ff-boot small { color: var(--ff-muted); }
@keyframes ffBootBob { 50% { transform: translateY(-7px) rotate(2deg); } }

.ff-camp { background: linear-gradient(180deg,#eff5e9,#e7ede4 52%,#dfe7df); }
.ff-camp-hero {
    min-height: 260px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(250px,40%);
    align-items: center;
    gap: 20px;
    overflow: hidden;
    padding: clamp(25px,4vw,48px) clamp(24px,5vw,68px);
    color: #f9f8ef;
    background-color:#24433b;
    background-image:
        linear-gradient(90deg,rgba(26,46,45,.96) 0 46%,rgba(26,46,45,.62) 68%,rgba(26,46,45,.22)),
        var(--ff-camp-bg);
    background-position:center,center 57%;
    background-size:auto,cover;
}
.ff-camp-hero::after { content:""; position:absolute; inset:auto 0 0; height:45px; background:linear-gradient(transparent,#eff5e9); pointer-events:none; }
.ff-camp-copy { position:relative; z-index:2; max-width:690px; }
.ff-camp-copy .ff-kicker { color:#c7e8d2; }
.ff-camp-copy h2 { margin:7px 0 10px; color:#fff; font:900 clamp(2.2rem,5.7vw,4.5rem)/.98 var(--font-display, sans-serif); letter-spacing:-.06em; text-shadow:0 5px 22px rgba(0,0,0,.24); }
.ff-camp-copy h2 span { color:#f2ce68; }
.ff-camp-copy p { margin:0; color:#dbe9df; font-size:clamp(.82rem,1.5vw,1rem); line-height:1.8; }
.ff-camp-counts { display:flex; gap:9px; margin-top:18px; flex-wrap:wrap; }
.ff-camp-counts span { display:flex; align-items:baseline; gap:5px; padding:7px 10px; border:1px solid rgba(255,255,255,.17); border-radius:10px; color:#c9dbd2; background:rgba(11,34,31,.42); font:700 .58rem/1 var(--font-score,monospace); letter-spacing:.08em; }
.ff-camp-counts b { color:#fff2b8; font-size:1rem; }
.ff-camp-mascots { position:relative; z-index:1; min-height:210px; filter:drop-shadow(0 20px 16px rgba(12,33,29,.35)); }
.ff-camp-mascots .ff-atlas-sprite { --ff-sprite-x:0%; --ff-sprite-y:0%; position:absolute; display:block; width:180px; height:180px; background-repeat:no-repeat; }
.ff-camp-mascots .ff-atlas-sprite:nth-child(1) { left:2%; bottom:-13px; transform:translate(var(--ff-sprite-x),var(--ff-sprite-y)) rotate(-5deg); }
.ff-camp-mascots .ff-atlas-sprite:nth-child(2) { left:35%; bottom:-5px; transform:translate(var(--ff-sprite-x),var(--ff-sprite-y)) scale(1.18); }
.ff-camp-mascots .ff-atlas-sprite:nth-child(3) { left:65%; bottom:-11px; transform:translate(var(--ff-sprite-x),var(--ff-sprite-y)) rotate(5deg); }

.ff-save-note { margin:14px clamp(16px,3vw,34px) 0; padding:11px 14px 11px 39px; position:relative; border:1px solid #cadbcb; border-radius:13px; color:#4a6559; background:rgba(255,254,247,.82); font-size:.76rem; line-height:1.5; }
.ff-save-note::before { content:"✓"; position:absolute; left:14px; top:10px; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#5e9c73; font-weight:900; }
.ff-save-note.is-guest::before { content:"!"; background:#c9943f; }
.ff-save-note.is-loading::before { content:"…"; background:#7b6aa3; }
.ff-save-note.is-error { border-color:#e6b8ad; color:#8b5147; }
.ff-save-note.is-error::before { content:"×"; background:#bc6557; }

.ff-planning { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(265px,.6fr); gap:16px; padding:16px clamp(16px,3vw,34px) 0; }
.ff-stage-panel, .ff-briefing, .ff-loadout-panel { border:1px solid rgba(50,83,70,.16); border-radius:20px; background:rgba(255,254,248,.94); box-shadow:0 18px 44px -34px rgba(36,66,51,.5); }
.ff-stage-panel, .ff-loadout-panel { padding:17px; }
.ff-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.ff-panel-head span { display:block; color:#7b6d87; font:900 .57rem/1 var(--font-score,monospace); letter-spacing:.15em; }
.ff-panel-head h3 { margin:4px 0 0; font:900 1rem/1.1 var(--font-display,sans-serif); }
.ff-panel-head > b { padding:7px 9px; border-radius:8px; color:#4f765f; background:#e5f0e2; font:800 .63rem/1 var(--font-score,monospace); }
.ff-panel-head > button { min-height:34px; padding:6px 10px; border:1px solid #d4c9e0; border-radius:9px; color:#5e468e; background:#f6f0fa; font-size:.72rem; font-weight:800; cursor:pointer; }

.ff-stage-map { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.ff-stage-node { min-width:0; min-height:66px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:7px 4px; border:1px solid #d7ddd3; border-radius:12px; color:#40564b; background:linear-gradient(#fbfbf5,#edf2e8); cursor:pointer; transition:.18s ease; }
.ff-stage-node b { font:900 .94rem/1 var(--font-score,monospace); }
.ff-stage-node span { width:100%; margin-top:4px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:.57rem; font-weight:800; }
.ff-stage-node small { margin-top:5px; color:#b5a27b; font-size:.52rem; letter-spacing:.04em; }
.ff-stage-node:hover:not(:disabled) { transform:translateY(-3px); border-color:#8eb69b; box-shadow:0 9px 16px rgba(54,89,65,.12); }
.ff-stage-node.is-selected { border:2px solid #7959b4; color:#513780; background:linear-gradient(#f8f1ff,#e9def3); box-shadow:0 0 0 3px rgba(121,89,180,.11); }
.ff-stage-node.is-cleared::after { content:"✓"; position:absolute; right:5px; top:5px; width:16px; height:16px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#62a47a; font-size:.57rem; font-weight:900; }
.ff-stage-node:disabled { color:#9ca49f; background:#e8ebe7; cursor:not-allowed; opacity:.62; }
.ff-stage-node.tier-tactical { background:linear-gradient(#f8f1e3,#eee5d2); }
.ff-stage-node.tier-extreme { color:#eeeaf7; border-color:#625379; background:linear-gradient(#66547c,#3b3349); }

.ff-briefing { overflow:hidden; }
.ff-brief-art { min-height:135px; display:flex; align-items:flex-start; justify-content:space-between; padding:14px; color:#fff; background-position:center; background-size:cover; }
.ff-brief-art span, .ff-brief-art b { padding:5px 7px; border:1px solid rgba(255,255,255,.24); border-radius:7px; background:rgba(18,29,34,.55); font:800 .58rem/1 var(--font-score,monospace); letter-spacing:.08em; }
.ff-brief-copy { padding:16px; }
.ff-brief-copy h3 { margin:0 0 7px; font:900 1.12rem/1.2 var(--font-display,sans-serif); }
.ff-brief-copy > p { min-height:42px; margin:0; color:var(--ff-muted); font-size:.73rem; line-height:1.65; }
.ff-intel { margin-top:12px; }
.ff-intel > span { color:#7a837f; font-size:.6rem; font-weight:800; }
.ff-intel > div { display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; }
.ff-intel > div span { padding:5px 8px; border-radius:999px; color:#fff; background:#647c72; font-size:.61rem; font-weight:800; }
.ff-intel .trait-flying { background:#527da0; }.ff-intel .trait-armor { background:#59626b; }.ff-intel .trait-swarm { background:#a06767; }
.ff-intel .trait-rush { background:#bb7e3b; }.ff-intel .trait-giant { background:#756049; }.ff-intel .trait-shade { background:#68527e; }.ff-intel .trait-boss { background:#9b4058; }
.ff-tip { margin-top:12px; padding:10px 11px; border-left:3px solid #d4a646; border-radius:0 9px 9px 0; background:#faf3dc; }
.ff-tip b { color:#8a6828; font-size:.64rem; }.ff-tip p { margin:3px 0 0; color:#625d50; font-size:.68rem; line-height:1.55; }
.ff-stage-stats { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:12px 0 0; }
.ff-stage-stats div { padding:8px; border-radius:9px; background:#edf2e9; }.ff-stage-stats dt { color:#728077; font-size:.57rem; }.ff-stage-stats dd { margin:3px 0 0; font:900 .82rem/1 var(--font-score,monospace); }

.ff-loadout-panel { grid-column:1 / -1; }
.ff-loadout-slots { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.ff-loadout-slot { min-width:0; min-height:68px; position:relative; display:grid; grid-template-columns:36px minmax(0,1fr); align-items:center; gap:5px; padding:6px; border:1px solid #d8ddd3; border-radius:12px; color:#374a41; background:#f7f8f2; cursor:pointer; text-align:left; }
.ff-loadout-slot.is-target { border-color:#7c5db3; box-shadow:0 0 0 3px rgba(124,93,179,.13); background:#f5effa; }
.ff-loadout-slot kbd { position:absolute; left:4px; top:4px; z-index:2; width:17px; height:17px; display:grid; place-items:center; border:0; border-radius:5px; color:#fff; background:#526e5f; font:800 .53rem/1 var(--font-score,monospace); }
.ff-loadout-slot .ff-mini-sprite { width:38px; height:38px; }
.ff-loadout-slot span { min-width:0; }.ff-loadout-slot b, .ff-loadout-slot small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ff-loadout-slot b { font-size:.65rem; }.ff-loadout-slot small { margin-top:4px; color:#788179; font-size:.54rem; }
.ff-roster { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:7px; margin-top:12px; }
.ff-roster-unit { min-width:0; position:relative; display:flex; flex-direction:column; align-items:center; min-height:108px; padding:6px 4px; border:1px solid #dde1d9; border-radius:11px; color:#3d4d45; background:#fbfbf7; cursor:pointer; }
.ff-roster-unit:hover { border-color:#8ab298; background:#f0f6ec; }.ff-roster-unit.is-picked { border-color:#b9a5d4; background:#f5f0f9; }
.ff-roster-unit .ff-mini-sprite { width:49px; height:49px; }
.ff-roster-unit b { max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:.59rem; }
.ff-roster-unit span { margin-top:3px; color:#6f7c75; font-size:.52rem; }.ff-roster-unit small { margin-top:3px; color:#8a6b30; font-size:.5rem; font-weight:800; }
.ff-roster-unit em { position:absolute; right:5px; top:5px; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#7859ad; font:.8 normal .54rem/1 var(--font-score,monospace); }
.ff-mini-sprite { --ff-sprite-x:0%; --ff-sprite-y:0%; display:block; flex:0 0 auto; background-repeat:no-repeat; transform:translate(var(--ff-sprite-x),var(--ff-sprite-y)); filter:drop-shadow(0 4px 3px rgba(42,57,48,.18)); }
.ff-selection-help { margin:9px 0 0; color:#778078; font-size:.65rem; text-align:center; }
.ff-camp-actions { display:flex; justify-content:flex-end; align-items:center; gap:10px; padding:16px clamp(16px,3vw,34px) 24px; }
.ff-guide-button, .ff-secondary { min-height:48px; padding:0 18px; border:1px solid #cfd6cf; border-radius:13px; color:#526158; background:#fffdf7; font-weight:800; cursor:pointer; }
.ff-primary { min-height:50px; padding:9px 22px; border:0; border-radius:14px; color:#fff; background:linear-gradient(145deg,#8561c3,#5b438a); box-shadow:0 11px 22px rgba(83,61,126,.22); font-weight:900; cursor:pointer; }
.ff-primary b, .ff-primary small { display:block; }.ff-primary small { margin-top:3px; color:#e1d7f0; font:700 .54rem/1 var(--font-score,monospace); letter-spacing:.08em; }
.ff-primary:disabled { cursor:wait; opacity:.7; }

.ff-battle { min-height:560px; display:grid; grid-template-rows:auto minmax(330px,1fr) auto auto; color:#edf5ed; background:#12261f; }
.ff-hud { min-height:66px; display:grid; grid-template-columns:minmax(150px,1fr) minmax(210px,.75fr) minmax(150px,1fr) 42px; align-items:center; gap:12px; padding:9px 12px; background:linear-gradient(180deg,#183a31,#10271f); border-bottom:1px solid rgba(255,255,255,.12); }
.ff-base-meter { display:grid; grid-template-columns:auto minmax(70px,1fr) auto; align-items:center; gap:7px; }
.ff-base-meter span { color:#b9d8c7; font-size:.63rem; font-weight:800; }.ff-base-meter > div { height:9px; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:99px; background:#091a15; }
.ff-base-meter > div i { display:block; height:100%; background:linear-gradient(90deg,#50ad79,#b6df7a); transition:width .22s linear; }
.ff-base-meter--enemy > div i { margin-left:auto; background:linear-gradient(90deg,#e58465,#b8455b); }
.ff-base-meter b { min-width:44px; color:#fff6c8; font:900 .68rem/1 var(--font-score,monospace); text-align:right; }
.ff-stage-clock { text-align:center; }.ff-stage-clock small,.ff-stage-clock b,.ff-stage-clock span { display:block; }
.ff-stage-clock small { color:#a7cbb9; font:700 .53rem/1 var(--font-score,monospace); letter-spacing:.08em; }.ff-stage-clock b { margin-top:4px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#fff; font-size:.76rem; }.ff-stage-clock span { margin-top:3px; color:#f3d778; font:900 1.02rem/1 var(--font-score,monospace); }
.ff-pause-button { width:40px; height:40px; border:1px solid rgba(255,255,255,.14); border-radius:11px; color:#e8f3ec; background:#29493f; cursor:pointer; font-weight:900; }

.ff-field { position:relative; min-height:330px; overflow:hidden; background-position:center; background-size:cover; transition:filter .25s; }
.ff-field::after { content:""; position:absolute; z-index:4; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(90,191,135,.14),transparent 20% 80%,rgba(139,51,82,.13)); }
.ff-field.is-entering { animation:ffFieldEnter .45s ease both; }
@keyframes ffFieldEnter { from { filter:brightness(.55) blur(2px); } }
.ff-weather { position:absolute; z-index:3; inset:0; pointer-events:none; opacity:.5; }
.weather-pollen,.weather-dust,.weather-snow,.weather-blizzard { background-image:radial-gradient(circle,#fff8c5 0 1px,transparent 2px); background-size:39px 44px; animation:ffDrift 10s linear infinite; }
.weather-dust,.weather-red-dust { background-image:radial-gradient(circle,#e8be83 0 1px,transparent 2px); opacity:.34; }
.weather-snow,.weather-blizzard { background-image:radial-gradient(circle,#e8f6ff 0 1.5px,transparent 2.5px); opacity:.68; }.weather-blizzard { background-size:25px 31px; transform:skewX(-15deg); }
.weather-storm { background:linear-gradient(112deg,transparent 45%,rgba(173,223,255,.7) 45.4%,transparent 46%); animation:ffLightning 5s infinite; }
.weather-eclipse,.weather-finale { box-shadow:inset 0 0 110px rgba(20,4,58,.62); }
@keyframes ffDrift { to { background-position:80px 130px; } } @keyframes ffLightning { 0%,91%,94%,100%{opacity:0}92%{opacity:.7} }
.ff-base { position:absolute; z-index:10; bottom:10%; width:78px; height:124px; display:grid; place-items:center; filter:drop-shadow(0 8px 6px rgba(0,0,0,.3)); }
.ff-base i { position:absolute; inset:18px 8px 0; border:4px solid #345c49; border-radius:40px 40px 10px 10px; background:linear-gradient(135deg,#dff1bf,#6fa06a); box-shadow:inset 0 0 0 7px rgba(255,255,255,.25); }
.ff-base span { position:relative; z-index:1; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:#fff7cf; background:#48705b; font:900 1rem/1 "Yu Mincho",serif; }
.ff-base--ally { left:.5%; }.ff-base--enemy { right:.5%; }.ff-base--enemy i { border-color:#4d354e; background:linear-gradient(135deg,#a284b2,#32293f); }.ff-base--enemy span { background:#6f3856; }
.ff-actors { position:absolute; z-index:20; inset:0; }
.ff-actor { --actor-scale:1; position:absolute; width:76px; height:76px; transform:translateX(-50%) scale(var(--actor-scale)); transform-origin:50% 100%; transition:left .09s linear,filter .1s; pointer-events:none; }
.ff-actor-sprite { --ff-sprite-x:0%; --ff-sprite-y:0%; position:absolute; inset:0; display:block; background-repeat:no-repeat; transform:translate(var(--ff-sprite-x),var(--ff-sprite-y)); filter:drop-shadow(0 7px 4px rgba(0,0,0,.3)); animation:ffActorStep .52s ease-in-out infinite alternate; }
.ff-actor--enemy .ff-actor-sprite { animation-delay:-.23s; }.ff-actor.is-flying { margin-bottom:28px; animation:ffFly 1.25s ease-in-out infinite alternate; }
.ff-actor.is-hit .ff-actor-sprite { filter:brightness(1.8) saturate(.3) drop-shadow(0 0 8px #fff); }.ff-actor.is-healed .ff-actor-sprite { filter:drop-shadow(0 0 10px #79f0a1); }
.ff-actor.is-slowed::after { content:"❄"; position:absolute; right:4px; top:9px; color:#d8f5ff; font-size:13px; }.ff-actor.is-broken::after { content:"◇"; position:absolute; right:4px; top:9px; color:#ffcc86; }
.ff-actor-hp { position:absolute; left:13px; right:13px; top:0; height:5px; overflow:hidden; border:1px solid rgba(255,255,255,.42); border-radius:99px; background:rgba(9,20,17,.75); opacity:.82; }
.ff-actor-hp b { display:block; height:100%; background:#70ce87; }.ff-actor--enemy .ff-actor-hp b { background:#e26969; }
@keyframes ffActorStep { to { transform:translate(var(--ff-sprite-x),var(--ff-sprite-y)) translateY(-2px) rotate(1deg); } } @keyframes ffFly { to { transform:translateX(-50%) translateY(-7px) scale(var(--actor-scale)); } }
.ff-pulse-wave { position:absolute; z-index:40; left:4%; bottom:8%; width:1px; height:68%; opacity:0; border-radius:50%; background:radial-gradient(ellipse,rgba(215,255,213,.8),rgba(119,218,181,.25) 46%,transparent 70%); pointer-events:none; }
.ff-pulse-wave.is-active { animation:ffPulse .72s ease-out; } @keyframes ffPulse { 0%{opacity:0;width:2%;transform:scaleX(.2)}28%{opacity:1}100%{left:1%;width:98%;opacity:0;transform:scaleX(1.15)} }
.ff-floaters { position:absolute; z-index:60; inset:0; pointer-events:none; }.ff-floater { position:absolute; bottom:44%; transform:translateX(-50%); color:#fff; font:900 .74rem/1 var(--font-score,monospace); text-shadow:0 2px 4px #183226; animation:ffFloat 1s ease-out forwards; }
.ff-floater.is-reward { color:#ffe27b; }.ff-floater.is-heal { color:#92f3aa; }.ff-floater.is-pulse { color:#e8d7ff; font-size:1rem; }.ff-floater.is-upgrade { color:#fff0b2; }
@keyframes ffFloat { to { opacity:0; transform:translate(-50%,-50px) scale(1.1); } }

.ff-command-deck { display:grid; grid-template-columns:minmax(125px,.62fr) minmax(380px,2.2fr) 88px; align-items:stretch; gap:9px; padding:9px 11px 7px; border-top:1px solid rgba(255,255,255,.12); background:linear-gradient(#18372e,#0e241c); }
.ff-economy { padding:7px 9px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(4,19,14,.42); }
.ff-energy-line { display:flex; justify-content:space-between; align-items:center; gap:6px; }.ff-energy-line span { color:#a8c7b7; font-size:.58rem; font-weight:800; }.ff-energy-line b { color:#f9df82; font:800 .62rem/1 var(--font-score,monospace); }
.ff-energy-bar { height:6px; margin:6px 0; overflow:hidden; border-radius:99px; background:#071812; }.ff-energy-bar i { display:block; height:100%; background:linear-gradient(90deg,#d7a93c,#f5dd78); transition:width .1s linear; }
.ff-economy button { width:100%; min-height:33px; display:flex; align-items:center; justify-content:space-between; gap:5px; padding:5px 7px; border:1px solid #506f60; border-radius:8px; color:#e7f1e9; background:#2d5946; cursor:pointer; }.ff-economy button b { font-size:.61rem; }.ff-economy button i { font-style:normal; }.ff-economy button span { color:#efd17d; font-size:.54rem; }.ff-economy button:disabled { opacity:.45; cursor:not-allowed; }
.ff-deploy-row { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }
.ff-deploy-button { min-width:0; min-height:78px; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2px; border:1px solid rgba(255,255,255,.14); border-radius:10px; color:#eff5ee; background:linear-gradient(#315b4b,#1b3c30); cursor:pointer; }
.ff-deploy-button .ff-mini-sprite { width:46px; height:46px; margin-top:-2px; }.ff-deploy-button b { max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:.52rem; }.ff-deploy-button small { color:#f0d16e; font:800 .54rem/1 var(--font-score,monospace); }
.ff-deploy-button kbd { position:absolute; z-index:3; left:4px; top:4px; width:17px; height:17px; display:grid; place-items:center; border:0; border-radius:5px; color:#fff; background:#142b22; font:.52rem/1 var(--font-score,monospace); }
.ff-deploy-button:disabled { cursor:not-allowed; }.ff-deploy-button.needs-energy { filter:saturate(.35) brightness(.68); }.ff-deploy-button.is-cooling { color:#b7c2ba; }
.ff-cooldown-shade { position:absolute; z-index:2; left:0; right:0; bottom:0; height:0; background:rgba(5,14,11,.66); pointer-events:none; transition:height .08s linear; }
.ff-pulse-button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; border:1px solid rgba(196,176,236,.35); border-radius:12px; color:#dfd2ef; background:#322547; cursor:pointer; }
.ff-pulse-button > span { position:absolute; inset:0; display:flex; align-items:flex-end; background:rgba(10,7,18,.35); }.ff-pulse-button > span i { display:block; width:100%; height:0; background:linear-gradient(0deg,rgba(137,97,200,.8),rgba(124,210,180,.45)); transition:height .1s linear; }
.ff-pulse-button b,.ff-pulse-button small { position:relative; z-index:2; }.ff-pulse-button b { font-size:.72rem; }.ff-pulse-button small { margin-top:5px; font:800 .58rem/1 var(--font-score,monospace); }.ff-pulse-button:disabled { cursor:not-allowed; opacity:.62; }.ff-pulse-button.is-ready { color:#fff8c8; box-shadow:inset 0 0 20px rgba(239,210,113,.25); animation:ffReady 1.1s ease-in-out infinite alternate; }
@keyframes ffReady { to { border-color:#f0d66e; filter:brightness(1.18); } }
.ff-battle-tip { min-height:25px; padding:5px 12px 7px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#b8cfc3; background:#0e241c; font-size:.62rem; text-align:center; }

.ff-overlay { position:absolute; z-index:120; inset:0; display:grid; place-items:center; padding:18px; background:rgba(13,27,23,.74); backdrop-filter:blur(5px); }
.ff-modal-card { width:min(680px,96%); max-height:92%; overflow:auto; padding:clamp(20px,4vw,34px); border:1px solid rgba(255,255,255,.65); border-radius:24px; color:var(--ff-ink); background:linear-gradient(150deg,#fffdf7,#eef3e9); box-shadow:0 30px 90px rgba(0,0,0,.35); text-align:center; }
.ff-modal-card--small { width:min(390px,96%); }.ff-modal-card h2 { margin:7px 0 16px; font:900 clamp(1.4rem,4vw,2rem)/1.2 var(--font-display,sans-serif); }
.ff-modal-card--small .ff-primary,.ff-modal-card--small .ff-secondary { width:100%; margin-top:8px; }
.ff-result-stars { color:#e3ae3c; font-size:2rem; letter-spacing:.1em; text-shadow:0 2px 0 #fff; }.ff-result-stars.is-loss { color:#b8b9b1; }
.ff-result-card > p { color:#68736d; font-size:.8rem; line-height:1.7; }
.ff-result-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:18px 0 12px; }.ff-result-stats div { padding:10px 6px; border-radius:11px; background:#e6eee2; }.ff-result-stats dt { color:#718079; font-size:.58rem; }.ff-result-stats dd { margin:5px 0 0; color:#4e3c79; font:900 .8rem/1 var(--font-score,monospace); }
.ff-result-save { min-height:34px; padding:9px; border-radius:9px; color:#6d746f; background:#f4f0e2; font-size:.68rem; }.ff-result-save.is-success { color:#3b7550; background:#e2f1e2; }.ff-result-save.is-error { color:#9b514a; background:#f6e3df; }
.ff-result-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:14px; }
.ff-guide-card { width:min(760px,98%); text-align:left; }.ff-guide-card > header { display:flex; justify-content:space-between; gap:12px; }.ff-guide-card > header h2 { margin-bottom:10px; }.ff-guide-card > header button { width:40px; height:40px; border:1px solid #d1d6ce; border-radius:11px; background:#fff; cursor:pointer; font-size:1.2rem; }
.ff-guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.ff-guide-grid article { padding:12px; border-radius:11px; background:#e8efe3; }.ff-guide-grid b { color:#4f3b79; font-size:.75rem; }.ff-guide-grid p { margin:5px 0 0; color:#66726c; font-size:.7rem; line-height:1.6; }
.ff-affinity-table { margin:13px 0; border:1px solid #d7dcd2; border-radius:11px; overflow:hidden; }.ff-affinity-table > div { display:grid; grid-template-columns:1fr 1fr 1fr; }.ff-affinity-table > div > * { padding:8px 10px; border-bottom:1px solid #dfe3db; font-size:.68rem; }.ff-affinity-table > div:last-child > * { border-bottom:0; }.ff-affinity-table > div:first-child { background:#dfe9da; }.ff-affinity-table strong { color:#36734e; }.ff-affinity-table em { color:#9b5752; font-style:normal; }
.ff-guide-card > .ff-primary { display:block; margin-left:auto; }
.ff-toast { position:absolute; z-index:200; left:50%; bottom:20px; transform:translateX(-50%); max-width:min(90%,520px); padding:11px 16px; border-radius:12px; color:#fff; background:#344d42; box-shadow:0 12px 35px rgba(0,0,0,.25); font-size:.72rem; font-weight:800; }.ff-toast.success { background:#37724e; }.ff-toast.danger { background:#964e4d; }

@media (max-width: 900px) {
    .ff-camp-hero { grid-template-columns:1fr 230px; padding:28px 25px; }.ff-camp-mascots .ff-atlas-sprite { width:140px;height:140px; }.ff-camp-mascots .ff-atlas-sprite:nth-child(3) { display:none; }
    .ff-planning { grid-template-columns:1fr; }.ff-loadout-panel { grid-column:auto; }.ff-stage-map { grid-template-columns:repeat(6,1fr); }.ff-roster { grid-template-columns:repeat(4,1fr); }
    .ff-command-deck { grid-template-columns:120px minmax(330px,1fr) 72px; gap:6px; }.ff-deploy-button .ff-mini-sprite { width:40px;height:40px; }
}
@media (max-width: 680px) {
    .ff-root { min-height:520px; }.ff-camp-hero { min-height:235px; grid-template-columns:1fr; }.ff-camp-copy { padding-right:0; }.ff-camp-copy p br { display:none; }.ff-camp-mascots { position:absolute; right:-28px; bottom:-10px; width:180px; min-height:160px; opacity:.38; }.ff-camp-mascots .ff-atlas-sprite:nth-child(n+2) { display:none; }
    .ff-stage-map { grid-template-columns:repeat(3,1fr); }.ff-stage-node { min-height:62px; }.ff-loadout-slots { grid-template-columns:repeat(2,1fr); }.ff-roster { grid-template-columns:repeat(4,1fr); }.ff-roster-unit { min-height:99px; }
    .ff-camp-actions { position:sticky; z-index:10; bottom:0; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(235,241,231,.94); backdrop-filter:blur(8px); }.ff-guide-button { flex:0 0 auto; padding:0 11px; font-size:.68rem; }.ff-camp-actions .ff-primary { flex:1; }
    .ff-battle { grid-template-rows:auto minmax(275px,1fr) auto auto; }.ff-hud { grid-template-columns:1fr 76px 1fr 36px; gap:5px; padding:6px; }.ff-base-meter { grid-template-columns:1fr; gap:2px; }.ff-base-meter span { display:none; }.ff-base-meter b { grid-row:1; min-width:0; font-size:.58rem; }.ff-base-meter--enemy b { text-align:left; }.ff-stage-clock b { display:none; }.ff-stage-clock span { font-size:.86rem; }.ff-pause-button { width:34px;height:34px; }
    .ff-field { min-height:275px; background-position:center; }.ff-base { width:56px;height:90px;bottom:9%; }.ff-base i { inset:14px 5px 0;border-width:3px; }.ff-base span { width:29px;height:29px;font-size:.74rem; }.ff-actor { width:62px;height:62px; }.ff-actor-hp { left:9px;right:9px; }
    .ff-command-deck { grid-template-columns:1fr 68px; grid-template-areas:"eco pulse" "units units"; }.ff-economy { grid-area:eco; display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; }.ff-energy-line,.ff-energy-bar { grid-column:1; }.ff-economy button { grid-column:2;grid-row:1/3; }.ff-deploy-row { grid-area:units; }.ff-pulse-button { grid-area:pulse; }.ff-deploy-button { min-height:70px; }.ff-battle-tip { font-size:.56rem; }
    .ff-modal-card { padding:17px; }
    .ff-result-card h2 { margin:5px 0 8px; font-size:1.45rem; }
    .ff-result-stars { font-size:1.65rem; }
    .ff-result-card > p { margin:7px 0; line-height:1.55; }
    .ff-result-stats { grid-template-columns:1fr 1fr; margin:9px 0 8px; }.ff-result-stats div { padding:8px 5px; }
    .ff-result-save { min-height:0; padding:7px; }
    .ff-guide-grid { grid-template-columns:1fr; }.ff-result-actions { grid-template-columns:1fr; gap:6px; margin-top:8px; }
    .ff-result-actions .ff-primary,.ff-result-actions .ff-secondary { min-height:43px; }
}
@media (max-width: 430px) {
    .ff-camp-copy h2 { font-size:2.25rem; }.ff-camp-counts span { font-size:.5rem; }.ff-planning,.ff-save-note { margin-left:0;margin-right:0; }.ff-planning { padding-left:9px;padding-right:9px; }.ff-save-note { border-radius:0;border-left:0;border-right:0; }
    .ff-stage-panel,.ff-loadout-panel { padding:12px;border-radius:15px; }.ff-briefing { border-radius:15px; }.ff-roster { grid-template-columns:repeat(3,1fr); }.ff-roster-unit .ff-mini-sprite { width:44px;height:44px; }
    .ff-deploy-row { grid-template-columns:repeat(3,1fr); }.ff-deploy-button { min-height:61px; display:grid; grid-template-columns:34px 1fr; grid-template-rows:1fr 1fr; text-align:left; }.ff-deploy-button .ff-mini-sprite { grid-row:1/3;width:36px;height:36px; }.ff-deploy-button b,.ff-deploy-button small { justify-self:start; }.ff-deploy-button kbd { display:none; }
    .ff-command-deck { padding:6px; }.ff-field { min-height:245px; }.ff-battle { grid-template-rows:auto minmax(245px,1fr) auto auto; }
}
@media (hover: none), (pointer: coarse) {
    .ff-stage-node,.ff-roster-unit,.ff-loadout-slot,.ff-deploy-button { touch-action:manipulation; }.ff-primary,.ff-secondary,.ff-guide-button,.ff-panel-head > button { min-height:44px; }
}
@media (prefers-reduced-motion: reduce) {
    .ff-root *, .ff-root *::before, .ff-root *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}