/* Free Front touch controls (web/common/touch.css). Copied next to each game page (web/common/sync.sh).
   Only active with html.fft (set by touch.js on touch devices). */
html.fft,html.fft body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
html.fft canvas{touch-action:none}
html.fft-ingame,html.fft-ingame body{touch-action:none}
#fft{position:fixed;inset:0;z-index:3;touch-action:none;display:none;font:600 11px/1 FFOswald,"Oswald","Arial Narrow",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#f3e7c6}
html.fft-ingame #fft{display:block}
#fft *{box-sizing:border-box}
#fft .zone{position:absolute;top:0;bottom:0}
#fft .zl{left:0;width:45%}
#fft .zr{right:0;width:55%}
#fft .tap{position:absolute;inset:0;display:none}
#fft.menu .tap{display:block}
#fft.menu .game{display:none}
#fft:not(.menu) .menuonly{display:none}

/* buttons: small translucent discs, the same layout in portrait and landscape. Everything sits above
   --bb (set by touch.js: the host page's bottom bar / safe area / covered viewport). */
#fft{--bb:24px}
#fft .b{position:absolute;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;border-radius:50%;
  width:var(--s,46px);height:var(--s,46px);background:rgba(14,11,7,.22);border:1.5px solid rgba(240,207,122,.38);color:rgba(243,231,198,.9);
  box-shadow:0 1px 6px rgba(0,0,0,.25)}
#fft .b svg{width:48%;height:48%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#fft .b.on{background:rgba(210,168,78,.5);border-color:#f0cf7a;color:#1b1307}
#fft .b.sq{border-radius:10px;width:auto;min-width:42px;height:34px;padding:0 10px;font-size:15px}
#fft .fire{--s:74px;border-width:2px;border-color:rgba(255,120,90,.6);background:rgba(120,30,18,.26)}
#fft .fire.on{background:rgba(220,80,50,.55);color:#fff}

/* bottom-right cluster: Fire with Jump, Reload and Crouch on an arc around it, Weapon outside
   (touch.js CLUSTER_W x CLUSTER_H covers it) */
#fft .fire{right:calc(16px + env(safe-area-inset-right));bottom:calc(var(--bb) + 14px)}
#fft .jump{right:calc(30px + env(safe-area-inset-right));bottom:calc(var(--bb) + 112px)}
#fft .reload{right:calc(89px + env(safe-area-inset-right));bottom:calc(var(--bb) + 87px)}
#fft .crouch{right:calc(114px + env(safe-area-inset-right));bottom:calc(var(--bb) + 26px)}
#fft .weap{right:calc(172px + env(safe-area-inset-right));bottom:calc(var(--bb) + 8px)}
/* top: just the menu button */
#fft .top{position:absolute;top:calc(8px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));display:flex;gap:8px}
#fft .top .b{position:static}
#fft .menuonly.top{z-index:2}

/* while the scoreboard is up, any tap closes it */
#fft .dismiss{position:absolute;inset:0;display:none;z-index:4}
#fft.scores-on .dismiss{display:block}
#fft.scores-on .top{display:none}

/* joystick */
#fft .stick{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(240,207,122,.4);background:radial-gradient(circle,rgba(14,11,7,.06),rgba(14,11,7,.22));opacity:.4;transition:opacity .2s}
#fft .stick.live{opacity:1}
#fft .knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(240,207,122,.55);border:2px solid #f0cf7a}

/* weapon wheel */
#fft .wheel{position:absolute;width:236px;height:236px;margin:-118px 0 0 -118px;border-radius:50%;display:none;pointer-events:none;
  background:radial-gradient(circle,rgba(10,8,5,.35) 28%,rgba(10,8,5,.72) 30%);border:2px solid rgba(240,207,122,.5)}
#fft .wheel.open{display:block}
#fft .wheel span{position:absolute;left:50%;top:50%;width:70px;margin:-9px 0 0 -35px;text-align:center;font-size:12px;padding:3px 0;border-radius:6px}
#fft .wheel span.on{background:#d2a84e;color:#1b1307}

/* rotate prompt (portrait while playing) */
#fft-rot{position:fixed;inset:0;z-index:9;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:#0b0906;color:#efe3c2;
  font:500 15px/1.4 FFOswald,"Oswald",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:24px}
#fft-rot svg{width:72px;height:72px;fill:none;stroke:#d2a84e;stroke-width:2;animation:fftrot 2s ease-in-out infinite}
@keyframes fftrot{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
html.fft-wantland #fft-rot{display:flex}

/* short (landscape) screens: a slightly smaller cluster */
@media (max-height:360px){#fft .fire{--s:66px}#fft .b{--s:42px}}

/* ---- HTML in-game menus (touch.js PAGES): pause, team, weapon, settings. Phone sized: text >= 14 px,
   targets >= 44 px, inside the safe areas and above --bb (the host page's bar). */
#fft.pm-open .game,#fft.pm-open .menuonly{display:none}
#fft .pm{position:absolute;left:0;right:0;top:0;bottom:var(--bb);display:none;align-items:center;justify-content:center;z-index:5;
  padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left));
  background:rgba(8,6,4,.62);touch-action:manipulation;text-transform:none;letter-spacing:0;font:500 15px/1.3 FFOswald,"Oswald","Arial Narrow",system-ui,sans-serif}
#fft.pm-open .pm{display:flex}
#fft.menu .pm{display:none}
#fft .pmc{display:flex;flex-direction:column;gap:12px;width:min(440px,100%);max-height:100%;padding:14px 16px 16px;border-radius:18px;
  background:linear-gradient(180deg,rgba(30,24,15,.96),rgba(17,13,8,.96));border:1px solid rgba(240,207,122,.35);box-shadow:0 10px 40px rgba(0,0,0,.6)}
#fft .pmc.p-weapon{width:min(600px,100%)}
#fft .pm header{display:flex;align-items:center;gap:10px;min-height:44px}
#fft .pm header>div{flex:1;min-width:0}
#fft .pm h2{margin:0;font:400 24px/1.1 FFStencil,"Stardos Stencil",FFOswald,"Oswald",serif;color:#f3e7c6;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#fft .pm .kick{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#d2a84e;margin-bottom:2px}
#fft .pb{appearance:none;-webkit-appearance:none;margin:0;font:inherit;color:#f3e7c6;cursor:pointer;min-height:48px;padding:0 14px;border-radius:12px;
  background:rgba(240,207,122,.08);border:1.5px solid rgba(240,207,122,.38);display:flex;align-items:center;justify-content:center;gap:8px;text-align:center}
#fft .pb:active{background:rgba(210,168,78,.4)}
#fft .pb.ico{width:48px;min-width:48px;padding:0;font-size:24px;border-radius:50%;background:rgba(240,207,122,.06)}
#fft .pb.ico.x{font-size:18px}
#fft .pm .list{display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow-y:auto}
#fft .pm .row{min-height:52px;font-size:17px;letter-spacing:.1em;text-transform:uppercase}
#fft .pm .list .prim{grid-column:1/-1;background:#d2a84e;color:#1b1307;border-color:#f0cf7a;font-weight:600;min-height:56px}
#fft .pm .list .warn{border-color:rgba(255,120,90,.5);color:#ffb59e}
#fft .pm .cards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px}
#fft .pm .card{flex-direction:column;gap:6px;min-height:150px;padding:12px 8px;border-radius:14px;min-width:0}
#fft .pm .card i{font-style:normal;font-size:34px;line-height:1;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);border:1.5px solid currentColor}
#fft .pm .card b{font:400 22px/1 FFStencil,"Stardos Stencil",FFOswald,"Oswald",serif;letter-spacing:.06em;text-transform:uppercase}
#fft .pm .card small{font-size:14px;color:#cdbf9c;line-height:1.2}
#fft .pm .card.allies{background:linear-gradient(180deg,rgba(92,110,62,.55),rgba(40,46,26,.6));color:#e9efc9}
#fft .pm .card.axis{background:linear-gradient(180deg,rgba(96,98,104,.55),rgba(40,40,44,.6));color:#e4e6ea}
/* the city theme (window.FF_THEME, html[data-theme=hood]): the crews' teal and orange */
[data-theme=hood] #fft .pm .card.allies{background:linear-gradient(180deg,rgba(24,184,200,.55),rgba(10,70,80,.65));color:#e6fbff}
[data-theme=hood] #fft .pm .card b{font-size:clamp(15px,4.4vw,22px);letter-spacing:.02em}
[data-theme=hood] #fft .pm .card small{overflow-wrap:anywhere}
[data-theme=hood] #fft .pm .card.axis{background:linear-gradient(180deg,rgba(255,138,28,.55),rgba(100,48,8,.65));color:#fff1e2}
#fft .pm .card.auto i{font-size:28px}
#fft .pm .foot{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#fft .pm .wgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow-y:auto}
#fft .pm .wcard{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;min-height:84px;padding:10px 12px;text-align:left}
#fft .pm .wcard b{font-size:17px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
#fft .pm .wcard small{font-size:14px;color:#cdbf9c;line-height:1.25}
#fft .pm .wcard.on,#fft .pm .seg .on{background:rgba(210,168,78,.3);border-color:#f0cf7a}
#fft .pm .note{font-size:14px;color:#a59876;text-align:center}
#fft .pm .scroll{display:flex;flex-direction:column;gap:6px;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
#fft .pm .opt{display:flex;flex-direction:column;gap:6px;padding:6px 0;border-bottom:1px solid rgba(240,207,122,.12)}
#fft .pm .opt>span{display:flex;justify-content:space-between;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#e2d4ad}
#fft .pm .opt>span b{font-weight:500;color:#f0cf7a;letter-spacing:0}
#fft .pm .opt:has(.tog){flex-direction:row;align-items:center;justify-content:space-between}
#fft .pm .seg{display:flex;gap:6px}
#fft .pm .seg .pb{flex:1;min-height:44px;padding:0 6px;font-size:15px}
#fft .pm .tog{width:72px;min-height:44px;padding:0 4px;justify-content:flex-start;border-radius:22px}
#fft .pm .tog i{width:32px;height:32px;border-radius:50%;background:#a59876;transition:transform .15s}
#fft .pm .tog.on{background:rgba(210,168,78,.45);border-color:#f0cf7a}
#fft .pm .tog.on i{transform:translateX(30px);background:#f0cf7a}
#fft .pm input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;touch-action:none}
#fft .pm input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:rgba(240,207,122,.3)}
#fft .pm input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-12px;border-radius:50%;background:#f0cf7a;border:2px solid #1b1307}
#fft .pm input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:rgba(240,207,122,.3)}
#fft .pm input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#f0cf7a;border:2px solid #1b1307}
/* landscape phones: wider, shorter pages */
@media (orientation:landscape) and (max-height:520px){
  #fft .pmc{width:min(640px,100%);gap:8px;padding:10px 14px 12px}
  #fft .pmc.p-weapon{width:min(760px,100%)}
  #fft .pm .list{grid-template-columns:1fr 1fr 1fr}
  #fft .pm .list .prim{grid-column:auto}
  #fft .pm .wgrid{grid-template-columns:1fr 1fr 1fr}
  #fft .pm .wcard{min-height:72px}
  #fft .pm .card{min-height:0;padding:10px 8px}
  #fft .pm .card i{width:46px;height:46px;font-size:26px}
  #fft .pm .scroll{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
  #fft .pm h2{font-size:22px}
  #fft .pm .side{flex-direction:row;align-items:center;gap:14px}#fft .pm .side .seg{flex:1}
  #fft .pm .note{display:none}
}