:host{display:block;width:100%;height:100%;color-scheme:light;--focus:#ffd21f;font-family:"Chakra Petch","Avenir Next",Avenir,sans-serif;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-tap-highlight-color:transparent}
    *{box-sizing:border-box}button{font:inherit}
    .game-shell{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;background:radial-gradient(900px 480px at 50% -10%,#1d4630,transparent 60%),#0a1f14;color:#f4efe2}
    .app{width:min(100%,480px);margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 14px calc(max(20px,env(safe-area-inset-bottom)) + 70px);display:flex;flex-direction:column}
    .top-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 2px 12px}
    .top-title{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(234,245,236,.65);text-align:center}
    .icon-button{width:44px;height:44px;flex:none;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.35);border-radius:50%;color:#eaf5ec;background:rgba(255,255,255,.08);cursor:pointer;touch-action:manipulation}
    .icon-button svg{width:20px;height:20px;fill:currentColor}
    .icon-button:active{transform:translateY(1px)}
    .icon-button:focus-visible,.fb-btn:focus-visible,.fb-plabel:focus-visible,.fb-track:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
    /* The handheld cabinet */
    .fb-cabinet{border-radius:30px;padding:16px 16px 18px;background:linear-gradient(160deg,#faf4e3 0%,#f1e7cd 55%,#e6d9ba 100%);box-shadow:0 24px 50px rgba(0,0,0,.5),inset 0 2px 0 #fffdf4,inset 0 -6px 14px rgba(120,100,60,.25);color:#20303a}
    .fb-plate{margin:0 4px 13px;padding:8px 6px;border-radius:8px;background:linear-gradient(180deg,#2a63c8,#1b4396);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.3),0 2px 4px rgba(30,40,60,.3);text-align:center}
    .fb-plate span{display:block;color:#fff;font-family:"Arial Narrow","HelveticaNeue-CondensedBold",Arial,sans-serif;font-weight:800;font-size:clamp(20px,6.2vw,27px);letter-spacing:.3em;text-indent:.3em;transform:scaleX(.96);text-shadow:0 2px 0 rgba(0,0,0,.35);white-space:nowrap}
    .fb-labels{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;text-align:center;color:#31424e;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-shadow:0 1px 0 rgba(255,255,255,.65)}
    .fb-windows{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:4px 0}
    .fb-window{display:grid;place-items:center;min-height:46px;padding:4px 2px;border-radius:6px;background:linear-gradient(180deg,#120607,#050202);box-shadow:inset 0 2px 8px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,80,60,.08),0 1px 0 rgba(255,255,255,.7)}
    .fb-window span{font-family:ui-monospace,"Cascadia Mono",Menlo,Consolas,"Courier New",monospace;font-size:clamp(19px,5.6vw,25px);font-weight:700;line-height:1;color:#ff3120;text-shadow:0 0 7px rgba(255,49,32,.85),0 0 2px rgba(255,49,32,.9);letter-spacing:.04em;white-space:nowrap}
    .fb-msgwin{display:grid;place-items:center;min-height:30px;margin-top:8px;padding:3px 8px;border-radius:6px;background:linear-gradient(180deg,#120607,#050202);box-shadow:inset 0 2px 8px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.7)}
    .fb-msgwin span{font-family:ui-monospace,"Cascadia Mono",Menlo,Consolas,"Courier New",monospace;font-size:clamp(10.5px,3.1vw,12.5px);font-weight:700;color:#ff3120;text-shadow:0 0 6px rgba(255,49,32,.8);letter-spacing:.03em;text-align:center;white-space:nowrap;overflow:hidden}
    /* Field with ridged oval bezel */
    .fb-bezel{margin-top:14px;border-radius:58px;padding:9px;background:repeating-radial-gradient(ellipse at center,#f3ecd9 0 5px,#d9cdae 5px 7px,#efe7d2 7px 12px);box-shadow:inset 0 2px 3px #fffdf4,inset 0 -3px 6px rgba(110,95,60,.35),0 3px 8px rgba(60,50,30,.22)}
    .fb-surround{border-radius:50px;padding:10px;background:radial-gradient(ellipse at 50% 38%,#41c748,#2a9e33 78%);box-shadow:inset 0 2px 6px rgba(255,255,255,.35),inset 0 -4px 8px rgba(0,60,10,.35)}
    .fb-field{display:flex;height:clamp(112px,30vw,140px);border-radius:10px;overflow:hidden;background:#050505;box-shadow:inset 0 0 0 2px rgba(0,0,0,.6),inset 0 0 22px rgba(0,0,0,.85)}
    .fb-endzone{flex:none;width:24px;display:grid;place-items:center;background:linear-gradient(180deg,#2a63c8,#1b4396)}
    .fb-endzone svg{width:13px;height:22px}
    .fb-gridarea{position:relative;flex:1;min-width:0}
    .fb-lines{position:absolute;inset:0;background-image:linear-gradient(90deg,transparent calc(100% - 2px),rgba(255,255,255,.85) calc(100% - 2px)),repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 2px,transparent 2px calc(100%/9)),repeating-linear-gradient(90deg,rgba(255,255,255,.7) 0 2px,transparent 2px calc(100%/9)),repeating-linear-gradient(90deg,rgba(255,255,255,.7) 0 2px,transparent 2px calc(100%/9));background-size:100% 100%,100% 100%,100% 8px,100% 8px;background-position:0 0,0 0,0 0,0 100%;background-repeat:no-repeat}
    .fb-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(3,1fr)}
    .fb-cell{display:grid;place-items:center}
    .fb-blip{border-radius:50%}
    .fb-carrier{width:clamp(12px,3.6vw,16px);height:clamp(12px,3.6vw,16px);background:#ff4633;box-shadow:0 0 11px 3px rgba(255,64,44,.9),0 0 3px rgba(255,120,100,.95);animation:fb-pulse 1s ease-in-out infinite}
    .fb-def{width:clamp(10px,3vw,13px);height:clamp(10px,3vw,13px);background:#c22418;opacity:.78;box-shadow:0 0 5px 1px rgba(255,50,35,.5)}
    @keyframes fb-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
    /* Control panel */
    .fb-panel{margin-top:14px;padding:14px;border-radius:16px;background:linear-gradient(180deg,#1c1c1f,#101012);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -4px 10px rgba(0,0,0,.65)}
    .fb-controls{display:grid;grid-template-columns:58px 58px 1fr 58px;gap:10px}
    .fb-col{display:grid;gap:10px}
    .fb-btn{min-height:58px;border:0;border-radius:10px;color:#fff;font-weight:800;cursor:pointer;touch-action:manipulation;box-shadow:0 5px 0 var(--shade),0 8px 12px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.35);text-shadow:0 1px 0 rgba(0,0,0,.3)}
    .fb-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--shade),0 3px 6px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.3)}
    .fb-blue{--shade:#173a7d;background:linear-gradient(180deg,#3a74e0,#2456c8);font-size:17px;letter-spacing:.03em}
    .fb-red{--shade:#8f1a12;background:linear-gradient(180deg,#ef4036,#d92b20);font-size:19px}
    .fb-run{display:grid;grid-template-columns:1fr 1fr}
    .fb-orange{--shade:#a34a08;background:linear-gradient(180deg,#ff8b2a,#f26d12);font-size:21px}
    .fb-back{border-radius:10px 0 0 10px;box-shadow:0 5px 0 var(--shade),0 8px 12px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.35),inset -1px 0 0 rgba(0,0,0,.28)}
    .fb-fwd{border-radius:0 10px 10px 0}
    .fb-back:active{box-shadow:0 1px 0 var(--shade),0 3px 6px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.3),inset -1px 0 0 rgba(0,0,0,.28)}
    .fb-power{margin-top:6px}
    .fb-power-labels{display:flex;justify-content:space-between;width:min(252px,84%);margin:10px auto 6px}
    .fb-plabel{padding:6px 4px;border:0;background:none;color:#9aa1a8;font-size:12px;font-weight:800;letter-spacing:.12em;cursor:pointer;touch-action:manipulation}
    .fb-plabel.active{color:#ffd21f}
    .fb-track{position:relative;width:min(252px,84%);height:30px;margin:0 auto;border-radius:8px;background:#000;box-shadow:inset 0 2px 7px rgba(0,0,0,.95),inset 0 0 0 2px #2c2c30;cursor:pointer;touch-action:none}
    .fb-knob{position:absolute;top:3px;bottom:3px;left:calc(50% - 32px);width:64px;border-radius:6px;background:linear-gradient(180deg,#f4f4f6,#c6c6cd);background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 3px,transparent 3px 9px),linear-gradient(180deg,#f4f4f6,#c6c6cd);box-shadow:0 3px 6px rgba(0,0,0,.6),inset 0 1px 0 #fff;transition:left .16s ease}
    .fb-knob.drag{transition:none}
    .fb-hint{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:16px 0 0;color:rgba(234,245,236,.8);font-size:11px;font-weight:700}
    .fb-hint span{padding:4px 8px;border:1px solid rgba(255,255,255,.25);border-radius:7px;background:rgba(255,255,255,.06)}
    .fb-tally{margin:12px 0 0;text-align:center;color:rgba(234,245,236,.75);font-size:12.5px;font-weight:700;letter-spacing:.03em}
    .fb-note{margin:7px 0 0;text-align:center;color:rgba(234,245,236,.5);font-size:11.5px}
    @media(max-width:380px){.fb-controls{grid-template-columns:52px 52px 1fr 52px;gap:8px}.fb-cabinet{padding:13px 12px 15px}}
    @media(prefers-reduced-motion:reduce){.fb-carrier{animation:none}.fb-knob{transition:none}}