/* Fyr (www.lavabit.no/fyr). Everything is scoped to main.fyr so the gate's own styles stay untouched;
   colours and type come from design-v2.css. Generated from the game's source; edit there, not here. */
.fyr{--shore:rgba(196,225,236,.38);--sea:#2e4a54;color:var(--text);font:400 16px/1.55 var(--font);display:block;max-width:1200px;margin:0 auto;padding:22px 22px 40px}
html[data-theme="light"] .fyr{--shore:rgba(255,255,255,.75);--sea:#a8c6d1}
@media (prefers-color-scheme:light){html:not([data-theme="dark"]) .fyr{--shore:rgba(255,255,255,.75);--sea:#a8c6d1}}
.fyr button{font:inherit;color:inherit}
.fyr :focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.fyr a{color:var(--sky)}
.fyr .fmono{font-family:var(--mono)}
.fyr .fintro{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:end;margin-bottom:50px}
.fyr h1{grid-row:span 2;margin:0;font:560 clamp(64px,11vw,112px)/.82 var(--serif);letter-spacing:-.035em;
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144}
.fyr .fintro p{margin:0;color:var(--text-2);max-width:40ch}
.fyr .fintro .aside{font:italic 400 17px/1.35 var(--serif);color:var(--sky);font-variation-settings:"SOFT" 100,"opsz" 18}
@media (max-width:620px){.fyr .fintro{grid-template-columns:1fr}
.fyr .fintro h1{grid-row:auto}}
.fyr .layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start}
@media (max-width:860px){.fyr .layout{grid-template-columns:1fr;gap:28px}}
.fyr .map{position:relative;max-width:780px;padding:16px;background:var(--surface);
  border:1.5px solid var(--line-strong);border-radius:3px;outline:1px solid var(--line);outline-offset:4px}
.fyr .cartouche{position:absolute;left:18px;top:-15px;display:flex;align-items:baseline;gap:10px;padding:0 10px;background:var(--bg);z-index:4}
.fyr .cartouche b{font:italic 500 21px/1.3 var(--serif);font-variation-settings:"SOFT" 100,"opsz" 24}
.fyr .cartouche span{font:500 12px/1 var(--mono);color:var(--text-3)}
.fyr .compass{position:absolute;right:58px;top:-31px;width:62px;height:62px;background:var(--bg);border-radius:50%;z-index:4;cursor:default}
.fyr .compass .needle{transform-origin:32px 32px;transition:transform .9s cubic-bezier(.2,.9,.3,1.2)}
.fyr .board{position:relative;display:grid;grid-template-columns:repeat(9,1fr);border-radius:2px;overflow:hidden;
  box-shadow:0 0 0 1.5px var(--line-strong)}
.fyr .board::after{content:"";position:absolute;inset:0;background:var(--grain) 0 0/160px 160px;opacity:.28;mix-blend-mode:multiply;pointer-events:none;z-index:2}
.fyr .tile{position:relative;aspect-ratio:1;border:0;padding:0;margin:0;border-radius:0;cursor:pointer;overflow:hidden;
  background:var(--c);box-shadow:var(--edge)}
.fyr .tile:disabled{cursor:default}
.fyr .tile:not(:disabled):hover::before{content:"";position:absolute;inset:3px;border:2px solid var(--sky);border-radius:3px;z-index:3}
.fyr .tile .hgt{position:absolute;left:4px;top:3px;font:500 clamp(8px,1.4vw,11px)/1 var(--mono);color:var(--hgt);z-index:1}
.fyr .tile.hi .hgt,.fyr .tile.ash .hgt{color:rgba(240,234,226,.62)}
.fyr .board.noheights .hgt{display:none}
.fyr .tile svg{position:absolute;pointer-events:none}
.fyr .tile svg.g{inset:14%;width:72%;height:72%;z-index:1;filter:drop-shadow(0 1px 0 rgba(0,0,0,.18))}
.fyr .tile svg.deco{inset:8%;width:84%;height:84%}
.fyr .tile.sea{background:var(--sea);box-shadow:none}
.fyr .tile.ash{background:radial-gradient(circle at 28% 34%,rgba(255,255,255,.09) 0 6%,transparent 7%),radial-gradient(circle at 70% 68%,rgba(255,255,255,.07) 0 5%,transparent 6%),var(--ash)}
.fyr .tile.fwall{background:var(--c)}
.fyr .tile.lava{box-shadow:none;background:var(--cracks) var(--bx) var(--by)/900% 900% no-repeat,radial-gradient(circle at 50% 50%,#f4a956 0,#df6630 55%,#c9471f 100%)}
.fyr .tile.lava .hgt{color:rgba(255,236,214,.8)}
.fyr .tile.lava svg.g{opacity:.28;filter:grayscale(1) contrast(.6)}
.fyr .tile.lava svg.deco{display:none}
.fyr .tile.front{animation:glow .5s ease-out}
.fyr .tile.steam::after{content:"";position:absolute;inset:-15%;background:radial-gradient(circle,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 62%);animation:steam 1.4s ease-out forwards;z-index:3}
.fyr .tile.cand::before{content:"";position:absolute;inset:4px;border:2px dashed var(--sky);border-radius:3px;z-index:3}
.fyr .tile.next::before{content:"";position:absolute;inset:2px;border:3px solid var(--sky);border-radius:4px;z-index:3;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
@keyframes glow{0%{filter:brightness(1.7) saturate(1.2)}100%{filter:none}}
@keyframes steam{0%{opacity:.95;transform:scale(.4)}100%{opacity:0;transform:scale(1.5) translateY(-35%)}}
.fyr .mapnote{margin:14px 4px 0;font:italic 400 15px/1.4 var(--serif);color:var(--text-3);font-variation-settings:"SOFT" 100,"opsz" 14}
.fyr .mapnote label{font:400 14px/1 var(--font);color:var(--text-2);float:right;display:flex;gap:6px;align-items:center;font-style:normal}
.fyr .mapnote input{accent-color:var(--sky)}
@media (max-width:560px){.fyr .map{padding:9px;outline-offset:3px}
.fyr .cartouche{left:10px}
.fyr .compass{right:30px;width:52px;height:52px;top:-26px}
.fyr .fintro{margin-bottom:30px}}
.fyr .side{display:flex;flex-direction:column;gap:20px}
.fyr .days{display:flex;gap:5px;flex-wrap:wrap}
.fyr .days button{position:relative;width:34px;height:34px;border:1.5px solid var(--line-strong);border-radius:50%;background:transparent;
  font:500 15px/1 var(--mono);color:var(--text-2);cursor:pointer}
.fyr .days button:hover{border-color:var(--sky-line);color:var(--text)}
.fyr .days button[aria-pressed="true"]{border-color:var(--sky);background:var(--sky);color:var(--on-sky)}
.fyr .days .dot{position:absolute;right:-2px;top:-2px;width:10px;height:10px;border-radius:50%;background:var(--sky);border:2px solid var(--bg)}
.fyr .label{font:500 13px/1.2 var(--font);color:var(--text-3);margin:0 0 8px}
.fyr .ledger{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.fyr .ledger li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.fyr .ledger li>span:first-child{color:var(--text-2)}
.fyr .ledger b,.fyr #target b{font:500 20px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--text)}
.fyr #target small{font:italic 400 14px/1 var(--serif);color:var(--text-3);margin-right:8px}
.fyr .pips{display:flex;gap:4px}
.fyr .pip{width:20px;height:22px}
.fyr .pip path{fill:#4b4f54;stroke:var(--text-3);stroke-width:1.2;stroke-linejoin:round}
.fyr .pip path.top{fill:#5e646a;stroke-width:.8}
.fyr .pip.used path{fill:none;stroke:var(--line-strong);stroke-dasharray:2.5 2}
.fyr .pip.used path.top{display:none}
.fyr .peek{border:1.5px dashed var(--sky-line);background:transparent;border-radius:999px;padding:3px 13px;cursor:pointer;color:var(--sky);font-weight:600;font-size:14px}
.fyr .peek:hover{background:var(--sky-soft);border-style:solid}
.fyr .controls{display:grid;gap:10px}
.fyr .row{display:grid;grid-template-columns:1fr auto;gap:8px}
.fyr .fbtn{border:1.5px solid var(--line-strong);background:transparent;border-radius:999px;padding:10px 16px;font-weight:600;cursor:pointer;color:var(--text)}
.fyr .fbtn:hover:not(:disabled){border-color:var(--sky-line);background:var(--sky-soft)}
.fyr .fbtn.primary{background:var(--sky);border-color:var(--sky);color:var(--on-sky);font:600 20px/1 var(--serif);font-variation-settings:"SOFT" 100,"opsz" 24;padding:13px 18px}
.fyr .fbtn.primary:hover:not(:disabled){background:var(--sky);filter:brightness(1.07)}
.fyr .fbtn:disabled{opacity:.38;cursor:not-allowed}
.fyr .links{display:flex;gap:16px;flex-wrap:wrap}
.fyr .linkbtn{border:0;background:none;padding:2px 0;cursor:pointer;color:var(--text-2);font-size:15px;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.fyr .linkbtn:hover:not(:disabled){color:var(--sky);text-decoration-color:var(--sky)}
.fyr .linkbtn:disabled{opacity:.4;cursor:not-allowed}
.fyr .seg{display:flex;gap:4px;font-size:14px}
.fyr .seg button{flex:1;border:0;border-radius:999px;background:transparent;padding:6px 8px;cursor:pointer;color:var(--text-3)}
.fyr .seg button:hover{color:var(--text)}
.fyr .seg button[aria-pressed="true"]{background:var(--surface-2);color:var(--text);font-weight:600}
.fyr .speedrow{display:flex;align-items:center;gap:10px}
.fyr .speedrow .label{margin:0}
.fyr .speedrow .seg{flex:1}
.fyr .result{padding:2px 0 2px 14px;border-left:2.5px solid var(--sky);color:var(--text-2);min-height:3em}
.fyr .result b{color:var(--text);font:500 1em var(--mono)}
.fyr .reveal{display:none;gap:10px}
.fyr .reveal.on{display:grid}
.fyr .reveal .seg{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px}
.fyr .rules{margin-top:52px;display:grid;grid-template-columns:minmax(0,600px) 1fr;gap:20px 48px}
@media (max-width:860px){.fyr .rules{grid-template-columns:1fr}}
.fyr .rules h2{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:560 28px/1.2 var(--serif);font-variation-settings:"SOFT" 100,"opsz" 36}
.fyr .rules h2 svg{width:20px;height:22px}
.fyr .rules p{margin:.55em 0;color:var(--text-2)}
.fyr .rules p strong{color:var(--text);font-weight:600}
.fyr .legend{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;align-content:start}
.fyr .legend li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text-2)}
.fyr .legend i{position:relative;width:34px;height:34px;flex:none;border-radius:2px;box-shadow:0 0 0 1px var(--line-strong)}
.fyr .legend i svg{position:absolute;inset:12%;width:76%;height:76%}
.fyr footer .colophon{font-family:var(--mono);font-size:12.5px}
:root[data-motion="reduced"] .fyr .tile.front,:root[data-motion="reduced"] .fyr .tile.steam::after {animation:none}
.fyr .wave{fill:none;stroke:#3d6879;stroke-width:3;stroke-linecap:round;opacity:0;animation:wave 7s ease-in-out infinite}
@keyframes wave{0%{opacity:0;transform:translateX(-6px)}35%{opacity:.75}70%{opacity:.5}100%{opacity:0;transform:translateX(12px)}}
.fyr .foam-soft{fill:none;stroke:#a9d2df;stroke-width:24;opacity:.13;animation:breathe 5s ease-in-out infinite}
.fyr .foam-line{fill:none;stroke:#cfe7ee;stroke-width:5;stroke-dasharray:14 22;stroke-linecap:round;opacity:.45;animation:lap 9s linear infinite}
@keyframes breathe{0%,100%{opacity:.08;stroke-width:18}50%{opacity:.18;stroke-width:30}}
@keyframes lap{to{stroke-dashoffset:-144}}
.fyr .ring{fill:none;stroke:#cfe7ee;stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:ring 3.6s ease-out infinite}
@keyframes ring{0%{opacity:.6;transform:scale(.82)}100%{opacity:0;transform:scale(1.35)}}
.fyr .swirl{transform-box:fill-box;transform-origin:center;animation:spin 7s linear infinite}
.fyr .swirl.rev{animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.fyr .pool .eye{fill:#0b1a21}
.fyr .pool path{fill:none;stroke:#7fb3c7;stroke-width:3.2;stroke-linecap:round;opacity:.75}
.fyr .pool.on path{stroke:#ffeab0;opacity:1}
.fyr .pool .glow{fill:#9cc9db;opacity:.08;transition:opacity .2s}
.fyr .pool.on .glow{fill:#ffe9a8;opacity:.22}
.fyr .bob{transform-box:fill-box;transform-origin:50% 90%;animation:bob 3.4s ease-in-out infinite alternate}
@keyframes bob{0%{transform:translateY(-2px) rotate(-3deg)}100%{transform:translateY(3px) rotate(3deg)}}
.fyr .boat .hull{fill:#0c181e;stroke:#6f8b97;stroke-width:2.6;stroke-linejoin:round;transition:fill .2s,stroke .2s}
.fyr .boat .sail{fill:#13252e;stroke:#6f8b97;stroke-width:2.4;stroke-linejoin:round;transition:fill .2s,stroke .2s}
.fyr .boat .mast{stroke:#6f8b97;stroke-width:2.4}
.fyr .boat .win{fill:#1d3540;transition:fill .2s}
.fyr .boat .lamp{fill:#ffd98a;opacity:0;transition:opacity .2s}
.fyr .boat .halo{fill:url(#halo);opacity:0;transition:opacity .25s}
.fyr .boat .refl{fill:#0a161c;opacity:.6}
.fyr .boat.lit .hull{fill:#efe6d6;stroke:#2a2522}
.fyr .boat.lit .sail{fill:#fff4da;stroke:#2a2522}
.fyr .boat.lit .mast{stroke:#2a2522}
.fyr .boat.lit .win{fill:#ffd98a}
.fyr .boat.lit .lamp,.fyr .boat.lit .halo{opacity:1}
.fyr .boat.lit .refl{fill:#ffe9a8;opacity:.18}
.fyr .boat.pop{animation:pop .45s ease-out}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}
.fyr .fbadge circle{fill:#0f1e25;stroke:#6f8b97;stroke-width:2}
.fyr .fbadge text{font:600 22px var(--mono);fill:#cfe3ea}
.fyr .boat.lit + .fbadge circle{stroke:#ffd98a}
.fyr .boat.lit + .fbadge text{fill:#ffe9a8}
.fyr .lamp-halo{fill:url(#halo);transform-box:fill-box;transform-origin:center;animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.75;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
.fyr .beam .haze{fill:none;stroke:#ffe2a0;stroke-width:72;opacity:.07;stroke-linecap:round;stroke-linejoin:round;filter:url(#soft)}
.fyr .beam .glow{fill:none;stroke:#ffe9b0;stroke-width:26;opacity:.2;stroke-linecap:round;stroke-linejoin:round;filter:url(#soft);animation:glowpulse 5s ease-in-out infinite}
.fyr .beam .rays{fill:none;stroke:#fff1c8;stroke-width:22;opacity:.16;stroke-linecap:round;stroke-dasharray:70 40 25 55 40 30;animation:drift 7s linear infinite;filter:url(#soft)}
.fyr .beam .glint{fill:none;stroke:#fff8e6;stroke-width:34;stroke-dasharray:2 11 1 17 3 9;opacity:.22;animation:glitter 3.5s linear infinite}
.fyr .beam .core{fill:none;stroke:#fff6dc;stroke-width:4;opacity:.82;stroke-linecap:round;stroke-linejoin:round}
.fyr .beam .cone{filter:url(#soft);animation:beacon 5s ease-in-out infinite}
@keyframes drift{to{stroke-dashoffset:-260}}
@keyframes glitter{to{stroke-dashoffset:-43}}
@keyframes beacon{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes glowpulse{0%,100%{opacity:.16}50%{opacity:.26}}
.fyr .beam .haze{opacity:.07}
@keyframes motes{to{stroke-dashoffset:-53}}
.fyr .mirror .plate{fill:url(#glass);stroke:#0d171c;stroke-width:2.5}
.fyr .mirror .sheen{stroke:#ffffff;stroke-width:2;opacity:.75;stroke-linecap:round}
.fyr .mirror .float{fill:#22323a;stroke:#9cc9db;stroke-width:3}
.fyr .mirror .bdome{fill:url(#buoyg);stroke:#0d171c;stroke-width:2.5}
.fyr .mirror .bband{fill:#2b4652}
.fyr .mirror .bring{fill:none;stroke:#cfe7ee;stroke-width:2.2;transform-box:fill-box;transform-origin:center;animation:ring 3.2s ease-out infinite}
.fyr .mirror .bring.b2{animation-delay:-1.6s}
.fyr .buoybob{transform-box:fill-box;transform-origin:50% 95%;animation:bob 3.6s ease-in-out infinite alternate}
.fyr .mirror .glint{fill:#fff7dc;opacity:0;transition:opacity .2s}
.fyr .mirror.hit .glint{opacity:.95}
.fyr .mirror.drop{animation:drop .3s cubic-bezier(.3,1.6,.5,1)}
@keyframes drop{0%{transform:scale(.5)}100%{transform:scale(1)}}
.fyr .mirror,.fyr .boat{transform-box:fill-box;transform-origin:center}
.fyr .ripple{fill:none;stroke:#9cc9db;stroke-width:3;animation:ripple .55s ease-out forwards}
@keyframes ripple{0%{opacity:.8;r:8}100%{opacity:0;r:52}}
.fyr .stage{position:relative}
.fyr .stage[data-skin="illustrated"]{border-radius:2px;overflow:hidden;box-shadow:0 0 0 1.5px var(--line-strong);background:#10222b}
.fyr .stage[data-skin="illustrated"] svg.scene{display:block;width:100%;height:auto}
.fyr .stage[data-skin="illustrated"]::after{content:"";position:absolute;inset:0;background:var(--grain) 0 0/170px 170px;opacity:.2;mix-blend-mode:soft-light;pointer-events:none}
.fyr .stage[data-skin="pixel"]{display:flex;justify-content:center;align-items:center;background:#0c1a23;border-radius:2px;box-shadow:0 0 0 1.5px var(--line-strong);overflow:hidden}
.fyr .pxwrap{position:relative;line-height:0;width:100%}
.fyr .pxwrap canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.fyr .hits{position:absolute;inset:0;display:grid;z-index:6}
.fyr .hits button{border:0;background:transparent;padding:0;margin:0;cursor:pointer;position:relative}
.fyr .hits button:disabled{cursor:default}
.fyr .hits button:focus-visible{outline:2px solid var(--sky);outline-offset:-3px}
.fyr .hits button:not(:disabled):hover::before{content:"";position:absolute;inset:7%;border:1.5px dashed rgba(156,201,219,.75);border-radius:8px}
.fyr .stage[data-skin="pixel"] .hits button:not(:disabled):hover::before{border:3px solid rgba(156,201,219,.8);border-radius:0;
  clip-path:polygon(0 0,30% 0,30% 3px,3px 3px,3px 30%,0 30%,0 70%,3px 70%,3px calc(100% - 3px),30% calc(100% - 3px),30% 100%,0 100%,0 0,100% 0,100% 30%,calc(100% - 3px) 30%,calc(100% - 3px) 3px,70% 3px,70% 0,100% 0,100% 100%,70% 100%,70% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 70%,100% 70%,100% 100%)}
.fyr .locked .hits button{cursor:default}
.fyr .cl-board{position:relative;display:grid;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1.5px var(--line-strong);background:#18303c}
.fyr .cl-board::after{content:"";position:absolute;inset:0;background:var(--grain) 0 0/160px 160px;opacity:.18;mix-blend-mode:soft-light;pointer-events:none;z-index:4}
.fyr .cl-tile{position:relative;aspect-ratio:1;background:#18303c;overflow:visible}
.fyr .cl-tile.land{background:#3b4634;box-shadow:var(--edge)}
.fyr .cl-tile.land.hl{background:#465240}
.fyr .cl-tile.land::after{content:"";position:absolute;inset:0;box-shadow:var(--edge2);opacity:0;animation:cl-shore 4.5s ease-in-out infinite;animation-delay:var(--d);pointer-events:none}
@keyframes cl-shore{0%,100%{opacity:0}50%{opacity:.65}}
.fyr .cl-g{position:absolute;inset:10%;width:80%;height:80%;z-index:2}
.fyr .cl-bob{position:absolute;inset:0;z-index:3;animation:cl-bob 3.2s ease-in-out infinite alternate;animation-delay:var(--d)}
.fyr .cl-bob .cl-g{inset:10%}
@keyframes cl-bob{0%{transform:translateY(-3%) rotate(-3deg)}100%{transform:translateY(4%) rotate(3deg)}}
.fyr .cl-wave{position:absolute;inset:8%;width:84%;height:84%;animation:cl-wave 6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes cl-wave{0%{opacity:0;transform:translateX(-12%)}40%{opacity:1}75%{opacity:.6}100%{opacity:0;transform:translateX(14%)}}
.fyr .cl-tile.rock::before{content:"";position:absolute;left:18%;right:18%;top:52%;height:26%;border:1.5px solid rgba(207,231,238,.6);border-radius:50%;animation:cl-ring 3.4s ease-out infinite;animation-delay:var(--d)}
@keyframes cl-ring{0%{opacity:.7;transform:scale(.8)}100%{opacity:0;transform:scale(1.5)}}
.fyr .cl-glow{fill:#ffe9a8;opacity:.3;transform-box:fill-box;transform-origin:center;animation:cl-pulse 2.8s ease-in-out infinite}
@keyframes cl-pulse{0%,100%{opacity:.18;transform:scale(.85)}50%{opacity:.45;transform:scale(1.25)}}
.fyr .cl-lamp{fill:#fff4cc;animation:cl-lamp 2.8s ease-in-out infinite}
@keyframes cl-lamp{0%,100%{fill:#ffe9a8}50%{fill:#fffbe8}}
.fyr .cl-pool .cl-sp{stroke:#5f8fa2;transform-box:fill-box;transform-origin:center;animation:cl-spin 5s linear infinite}
.fyr .cl-tile.on .cl-pool .cl-sp{stroke:#ffe9a8}
.fyr .cl-tile.on .cl-pool{filter:drop-shadow(0 0 6px #ffe9a8)}
@keyframes cl-spin{to{transform:rotate(360deg)}}
.fyr .cl-tile .cl-boat .hull,.fyr .cl-tile .cl-boat .sail{transition:fill .2s}
.fyr .cl-tile.lit .cl-boat{filter:drop-shadow(0 0 4px #ffe9a8) drop-shadow(0 0 10px rgba(255,233,168,.6))}
.fyr .cl-tile.lit .hull{fill:#f4efe4}
.fyr .cl-tile.lit .sail{fill:#fff8e6}
.fyr .cl-tile.lit .win{stroke:#ffd98a}
.fyr .cl-tile.pop .cl-bob{animation:cl-pop .45s ease-out,cl-bob 3.2s ease-in-out infinite alternate}
@keyframes cl-pop{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
.fyr .cl-mslot{position:absolute;inset:0;z-index:4}
.fyr .cl-m{position:absolute;inset:0;width:100%;height:100%}
.fyr .cl-m.drop{animation:cl-drop .28s cubic-bezier(.3,1.6,.5,1)}
@keyframes cl-drop{0%{transform:scale(.4)}100%{transform:scale(1)}}
.fyr .cl-tile.hit .cl-m{filter:drop-shadow(0 0 5px #fff4cc)}
.fyr .cl-ripple{position:absolute;inset:30%;border:2px solid var(--sky);border-radius:50%;z-index:5;animation:cl-rip .6s ease-out forwards;pointer-events:none}
@keyframes cl-rip{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.4)}}
.fyr .cl-beam{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
.fyr .cl-lh{transform:translateY(15%)}
.fyr .cl-bobm{transform-box:fill-box;transform-origin:50% 90%;animation:cl-bobm 3.6s ease-in-out infinite alternate}
@keyframes cl-bobm{0%{transform:translateY(-2%) rotate(-2deg)}100%{transform:translateY(3%) rotate(2deg)}}
.fyr .cl-bring{fill:none;stroke:rgba(207,231,238,.55);stroke-width:.6;transform-box:fill-box;transform-origin:center;animation:cl-bring 3s ease-out infinite}
@keyframes cl-bring{0%{opacity:.8;transform:scale(.85)}100%{opacity:0;transform:scale(1.35)}}
.fyr .cl-beam .haze{fill:none;stroke:#ffe2a0;stroke-width:.72;opacity:.08;stroke-linecap:round;stroke-linejoin:round;filter:url(#clblur2)}
.fyr .cl-beam .glow{fill:none;stroke:#ffe9a8;stroke-width:.26;stroke-linecap:round;stroke-linejoin:round;opacity:.24;filter:url(#clblur);animation:cl-glowpulse 5s ease-in-out infinite}
.fyr .cl-beam .rays{fill:none;stroke:#fff1c8;stroke-width:.22;opacity:.16;stroke-linecap:round;stroke-dasharray:.7 .4 .25 .55 .4 .3;animation:cl-drift 7s linear infinite;filter:url(#clblur)}
.fyr .cl-beam .glint{fill:none;stroke:#fff8e6;stroke-width:.34;stroke-dasharray:.02 .11 .01 .17 .03 .09;opacity:.25;animation:cl-glitter 3.5s linear infinite}
.fyr .cl-beam .core{fill:none;stroke:#fff6d9;stroke-width:.045;opacity:.85;stroke-linecap:round;stroke-linejoin:round}
.fyr .cl-beam .cone{filter:url(#clblur2);animation:cl-beacon 5s ease-in-out infinite}
@keyframes cl-drift{to{stroke-dashoffset:-2.6}}
@keyframes cl-glitter{to{stroke-dashoffset:-.43}}
@keyframes cl-beacon{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes cl-glowpulse{0%,100%{opacity:.18}50%{opacity:.28}}
@keyframes cl-motes{to{stroke-dashoffset:-.551}}
@keyframes cl-flick{0%,100%{opacity:.28}50%{opacity:.36}}
.fyr .banner{position:absolute;left:50%;bottom:-24px;transform:translate(-50%,10px);z-index:8;display:flex;gap:14px;align-items:baseline;padding:12px 20px;border-radius:999px;
  background:rgba(20,18,16,.9);border:1.5px solid var(--sky);color:#ece6dc;opacity:0;pointer-events:none;transition:opacity .4s,transform .4s;white-space:nowrap}
.fyr .banner.on{opacity:1;transform:translate(-50%,0)}
.fyr .banner b{font:italic 560 20px/1 var(--serif);font-variation-settings:"SOFT" 100,"opsz" 24}
.fyr .banner span{font:500 13px/1 var(--mono);color:#bdb5aa}
/* a won night: solid blue; a submitted one keeps the outline */
.fyr .banner.win{background:var(--sky);border-color:var(--sky);color:var(--on-sky);box-shadow:0 6px 22px rgba(0,0,0,.28)}
.fyr .banner.win span{color:var(--on-sky);opacity:.78}
.fyr .banner.rise{transform:translate(-50%,18px)}
.fyr .banner.rise.on{transform:translate(-50%,0);transition:opacity .45s,transform .6s cubic-bezier(.3,1.55,.5,1)}
@media (max-width:560px){.fyr .banner{white-space:normal;flex-direction:column;gap:6px;align-items:center;text-align:center;border-radius:18px;max-width:calc(100% - 24px)}}
/* submitting short of the target */
.fyr .btnrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fyr .btnrow .fbtn{justify-content:center;white-space:nowrap}
.fyr .submitbtn{border-color:var(--sky-line);color:var(--sky);font-size:15.5px}
.fyr .submitbtn:hover:not(:disabled){background:var(--sky-soft);border-color:var(--sky)}
/* the submit check: a card over the middle of the board, the board still visible behind it */
/* the name plate and compass sit on the frame, so they stay above the dimming */
.fyr .map:has(.fconfirm:not([hidden])) .cartouche,.fyr .map:has(.fconfirm:not([hidden])) .compass{z-index:13}
.fyr .fconfirm{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(6,12,16,.42);border-radius:inherit}
.fyr .fconfirm[hidden]{display:none}
.fyr .fconfirm__card{width:min(360px,100%);padding:20px 22px 18px;border-radius:16px;background:var(--surface);border:1.5px solid var(--sky);color:var(--text);box-shadow:0 18px 50px rgba(0,0,0,.45);animation:fyr-pop-in .22s cubic-bezier(.3,1.4,.5,1)}
.fyr .fconfirm__card h3{margin:0 0 6px;font:italic 560 21px/1.2 var(--serif);font-variation-settings:"SOFT" 100,"opsz" 24}
.fyr .fconfirm__card p{margin:0 0 16px;color:var(--text-2);font-size:15px;line-height:1.5}
.fyr .fconfirm__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fyr .fconfirm .suresub{background:var(--sky);border-color:var(--sky);color:var(--on-sky)}
.fyr .fconfirm .suresub:hover:not(:disabled){background:var(--sky);filter:brightness(1.07)}
@keyframes fyr-pop-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
/* the finish: pennants, a lamp flash and a little cheer (all skins). Hidden pennants take no part in the drawing. */
.fyr .cl-boat .flag,.fyr .boat .flag{fill:#9cc9db;stroke:#1d1a17;stroke-width:.4;transform:scaleX(0);transform-box:fill-box;transform-origin:right center;transition:transform .32s cubic-bezier(.3,1.7,.5,1)}
.fyr .boat .flag{stroke-width:1.6}
.fyr .cl-boat .flag.r,.fyr .boat .flag.r{transform-origin:left center}
.fyr .cl-boat .flag-pole,.fyr .boat .flag-pole{stroke:#7d97a2;stroke-width:.9;fill:none;transform:scaleY(0);transform-box:fill-box;transform-origin:center bottom;transition:transform .2s ease-out}
.fyr .boat .flag-pole{stroke:#2a2522;stroke-width:3;stroke-linecap:round}
.fyr .cl-tile.flagged .flag,.fyr .cl-tile.flagged .flag-pole,.fyr .boat.flagged .flag,.fyr .boat.flagged .flag-pole{transform:none}
.fyr .cl-tile.cheer .cl-boat{animation:fyr-cheer .5s ease-in-out 2}
.fyr .boat.cheer{animation:fyr-cheer .5s ease-in-out 2}
.fyr .cl-tile.cheer .flag,.fyr .boat.cheer .flag{animation:fyr-flap .24s ease-in-out 4}
@keyframes fyr-cheer{50%{transform:translateY(-14%) rotate(-4deg)}}
@keyframes fyr-flap{50%{transform:scaleX(.62) skewY(-10deg)}}
.fyr .cl-tile.flash .cl-glow,.fyr .cl-tile.flash .cl-lamp{animation:fyr-lamp .9s ease-out}
.fyr .lhouse.flash .lamp-halo{animation:fyr-halo .9s ease-out}
@keyframes fyr-lamp{25%{fill:#ffffff;opacity:1}}
@keyframes fyr-halo{25%{transform:scale(1.6);opacity:1}}
.fyr .cl-flashring{position:absolute;left:50%;top:28%;width:40%;aspect-ratio:1;margin-left:-20%;border:2px solid #ffe9a8;border-radius:50%;z-index:6;pointer-events:none;animation:fyr-ring .9s ease-out forwards}
@keyframes fyr-ring{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(3.4)}}
.fyr .flashring{fill:none;stroke:#ffe9a8;stroke-width:4;transform-box:fill-box;transform-origin:center;animation:fyr-ring .9s ease-out forwards}
:root[data-motion="reduced"] .fyr .flag,:root[data-motion="reduced"] .fyr .flag-pole{transition:none}
.fyr .live small{font:500 18px/1 var(--mono);color:var(--text-3)}
.fyr .skins .seg{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px}
.fyr .result:empty{display:none}
.fyr .cartouche span{white-space:nowrap}
@media (max-width:560px){.fyr .cartouche span{display:none}}
.fyr .mapnote{margin-top:34px}
:root[data-motion="reduced"] .fyr .cl-tile.land::after,:root[data-motion="reduced"] .fyr .cl-bob,:root[data-motion="reduced"] .fyr .cl-wave,:root[data-motion="reduced"] .fyr .cl-tile.rock::before,:root[data-motion="reduced"] .fyr .cl-glow,:root[data-motion="reduced"] .fyr .cl-lamp,:root[data-motion="reduced"] .fyr .cl-pool .cl-sp,:root[data-motion="reduced"] .fyr .cl-beam .rays,:root[data-motion="reduced"] .fyr .cl-beam .glint,:root[data-motion="reduced"] .fyr .cl-beam .haze,:root[data-motion="reduced"] .fyr .cl-beam .cone {animation:none}
:root[data-motion="reduced"] .fyr .cl-wave {opacity:.6}
.fyr .nightnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fyr .navbtn{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line-strong);background:transparent;color:var(--text);font:400 22px/1 var(--font);cursor:pointer;display:grid;place-items:center;padding:0 0 3px}
.fyr .navbtn:hover:not(:disabled){border-color:var(--sky-line);background:var(--sky-soft)}
.fyr .navbtn:disabled{opacity:.3;cursor:default}
.fyr .nightlbl{display:flex;flex-direction:column;min-width:120px;text-align:center}
.fyr .nightlbl b{font:italic 560 21px/1.15 var(--serif);font-variation-settings:"SOFT" 100,"opsz" 24}
.fyr .nightlbl span{font:500 12.5px/1.3 var(--mono);color:var(--text-3)}
.fyr .nightnav .linkbtn{margin-left:auto}
.fyr .archive{margin-top:12px;max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:6px;background:var(--surface)}
.fyr .archive button{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:8px;width:100%;border:0;background:transparent;border-radius:8px;padding:7px 10px;cursor:pointer;text-align:left;color:var(--text-2)}
.fyr .archive button:hover{background:var(--sky-soft);color:var(--text)}
.fyr .archive button[aria-current="true"]{background:var(--surface-2);color:var(--text)}
.fyr .archive .n{font:500 13px var(--mono);color:var(--text-3)}
.fyr .archive .m{font-size:13px}
.fyr .archive .st{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line-strong)}
.fyr .archive .st.solved{background:var(--sky);border-color:var(--sky)}
.fyr .archive .st.shown{border-color:var(--sky);background:linear-gradient(90deg,var(--sky) 50%,transparent 50%)}
.fyr .archive .st.started{border-color:var(--sky-line)}
.fyr .archive .st.ended{border-color:var(--sky);background:radial-gradient(circle,var(--sky) 0 2.5px,transparent 3px)}
.fyr .actrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fyr .clearbtn{display:inline-flex;align-items:center;gap:8px;border-color:var(--sky-line);color:var(--text);font-size:15.5px}
.fyr .clearbtn svg{width:17px;height:17px;color:var(--sky)}
.fyr .clearbtn:hover:not(:disabled){background:var(--sky-soft);border-color:var(--sky)}
.fyr .freeplay{margin:0;font:italic 400 15px/1.4 var(--serif);color:var(--text-3);font-variation-settings:"SOFT" 100,"opsz" 14}
/* lava mode (the Konami code): only the water turns to lava; boats smoke and wave white flags */
@keyframes fyr-magma{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
/* classic: the water tiles turn see-through over one continuous molten surface on the board */
.lavamode .fyr .cl-tile:not(.land){background:transparent}
.lavamode .fyr .cl-board{background:radial-gradient(ellipse at 22% 18%,rgba(255,196,92,.55) 0,transparent 32%),radial-gradient(ellipse at 74% 62%,rgba(255,160,60,.45) 0,transparent 36%),
  radial-gradient(ellipse at 40% 88%,rgba(255,120,40,.4) 0,transparent 30%),linear-gradient(160deg,#d4511a 0,#a8330d 45%,#6e1a06 100%);animation:fyr-magma 3.2s ease-in-out infinite}
.lavamode .fyr .cl-wave path{stroke:#ffb347}
.lavamode .fyr .cl-tile.rock::before{border-color:rgba(255,190,110,.75)}
.lavamode .fyr #sea stop:nth-child(1){stop-color:#e8661c}
.lavamode .fyr #sea stop:nth-child(2){stop-color:#a32f0c}
.lavamode .fyr #sea stop:nth-child(3){stop-color:#4a1005}
.lavamode .fyr .scene .wave{stroke:#ffb347}
/* smoke: classic puffs in each boat's tile, illustrated circles above the masts */
.fyr .cl-smoke{position:absolute;left:52%;top:16%;width:0;height:0;z-index:5;pointer-events:none}
.fyr .cl-smoke i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:rgba(58,52,50,.7);opacity:0;animation:fyr-smoke 2.4s ease-out infinite;animation-delay:var(--d)}
.fyr .cl-smoke i:nth-child(2){animation-delay:calc(var(--d) - .8s)}
.fyr .cl-smoke i:nth-child(3){animation-delay:calc(var(--d) - 1.6s)}
@keyframes fyr-smoke{0%{opacity:0;transform:translate(0,4px) scale(.4)}15%{opacity:.85}100%{opacity:0;transform:translate(12px,-38px) scale(2.4)}}
.fyr .scene .smoke{fill:#3a3432;opacity:0;transform-box:fill-box;transform-origin:center;animation:fyr-smoke-svg 2.4s ease-out infinite}
@keyframes fyr-smoke-svg{0%{opacity:0;transform:translate(0,6px) scale(.4)}15%{opacity:.8}100%{opacity:0;transform:translate(18px,-62px) scale(2.6)}}
/* every boat surrenders: white flags up and waving, a slow list */
.lavamode .fyr .cl-boat .flag,.lavamode .fyr .boat .flag{fill:#f4f1ea;transform:none;animation:fyr-flap .5s ease-in-out infinite}
.lavamode .fyr .cl-boat .flag-pole,.lavamode .fyr .boat .flag-pole{transform:none}
.lavamode .fyr .cl-bob{animation:fyr-list 2.6s ease-in-out infinite}
.lavamode .fyr .boat{animation:fyr-list 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}
@keyframes fyr-list{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(5deg) translateY(4%)}}
:root[data-motion="reduced"] .lavamode .fyr .flag,:root[data-motion="reduced"] .lavamode .fyr .cl-bob,:root[data-motion="reduced"] .lavamode .fyr .boat,
:root[data-motion="reduced"] .lavamode .fyr .cl-board{animation:none}
:root[data-motion="reduced"] .fyr .cl-smoke i,:root[data-motion="reduced"] .fyr .scene .smoke{animation:none;opacity:.45}
:root[data-motion="reduced"] .fyr .cl-smoke i:nth-child(2){transform:translate(6px,-16px) scale(1.4);opacity:.3}
:root[data-motion="reduced"] .fyr .cl-smoke i:nth-child(3){display:none}
.lavamode .fyr h1{color:#ff8a4c;transition:color 1s}
.fyr .ee-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:rgba(20,18,16,.92);color:#ece6dc;border:1.5px solid var(--sky);border-radius:999px;padding:10px 18px;font:italic 500 17px/1.2 var(--serif);opacity:0;transition:opacity .4s,transform .4s;z-index:50;pointer-events:none}
.fyr .ee-toast.on{opacity:1;transform:translate(-50%,0)}
.fyr .teapot{position:absolute;right:30px;top:-74px;width:56px;height:46px;z-index:6;opacity:0;transform:translateY(10px) scale(.6);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.fyr .teapot.on{opacity:1;transform:none}
.fyr .teapot-say{position:absolute;right:92px;top:-66px;z-index:6;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:6px 10px;font:500 12.5px/1.3 var(--mono);color:var(--text-2);opacity:0;transition:opacity .3s;white-space:nowrap;pointer-events:none}
.fyr .teapot-say.on{opacity:1}
.fyr .bottle{position:absolute;left:0;top:0;width:46px;height:26px;z-index:7;cursor:pointer;border:0;background:transparent;padding:0;opacity:0;visibility:hidden}
.fyr .bottle.on{visibility:visible}
.fyr .bottle.rev svg{scale:-1 1}
.fyr .bottle svg{width:100%;height:100%;animation:bottle-bob 2.6s ease-in-out infinite alternate}
@keyframes bottle-bob{from{transform:translateY(-2px) rotate(-8deg)}to{transform:translateY(2px) rotate(6deg)}}
.fyr .fnote{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-1.5deg);width:min(360px,80%);z-index:9;background:#efe6d2;color:#2a2522;border-radius:4px;padding:22px 24px 18px;box-shadow:0 18px 40px rgba(0,0,0,.45);font:italic 400 17px/1.45 var(--serif);font-variation-settings:"SOFT" 100,"opsz" 18}
.fyr .fnote p{margin:0 0 10px}
.fyr .fnote .sig{text-align:right;font-style:normal;font-weight:600}
.fyr .fnote button{position:absolute;right:8px;top:6px;border:0;background:transparent;font:400 20px/1 var(--font);color:#6a5f55;cursor:pointer}
:root[data-motion="reduced"] .fyr .bottle svg {animation:none}
.fyr [hidden]{display:none!important}
.fyr .tonight{margin:0;padding:10px 14px;border-radius:10px;background:var(--sky-soft);color:var(--text-2);font-size:15px}
.fyr .tonight::before{content:"Tonight";display:block;font:italic 500 16px/1.3 var(--serif);color:var(--sky);margin-bottom:2px;font-variation-settings:"SOFT" 100,"opsz" 18}
.fyr .ppip{width:18px;height:20px}
.fyr .ppip path{fill:#dff1f7;stroke:var(--text-3);stroke-width:1.2;stroke-linejoin:round}
.fyr .ppip.used path{fill:none;stroke:var(--line-strong);stroke-dasharray:2.5 2}
.fyr .cl-boat .hull{fill:#0e1a20}
.fyr .cl-boat .sail{fill:#14232b}
.fyr .cl-boat.need-r .sail{fill:#c46a60;stroke:#ffb3aa}
.fyr .cl-boat.need-g .sail{fill:#5fb877;stroke:#b4f0c2}
.fyr .cl-boat .lamp{fill:#7d97a2}
.fyr .cl-boat.need-r .lamp{fill:#ff6f61}
.fyr .cl-boat.need-g .lamp{fill:#6ed686}
.fyr .cl-tile.lit .cl-boat.need-r .sail,.fyr .cl-boat.lit-demo.need-r .sail{fill:#ffc2ba}
.fyr .cl-tile.lit .cl-boat.need-g .sail,.fyr .cl-boat.lit-demo.need-g .sail{fill:#d0fad9}
.fyr .cl-tile.lit .cl-boat.need-r{filter:drop-shadow(0 0 4px #ff8f84) drop-shadow(0 0 10px rgba(255,111,97,.6))}
.fyr .cl-tile.lit .cl-boat.need-g{filter:drop-shadow(0 0 4px #9be8ab) drop-shadow(0 0 10px rgba(110,214,134,.6))}
.fyr .cl-beam .c-r .haze,.fyr .cl-beam .c-r .glow,.fyr .cl-beam .c-r .rays{stroke:#ff8f84}
.fyr .cl-beam .c-r .glint,.fyr .cl-beam .c-r .core{stroke:#ffe2de}
.fyr .cl-beam .c-g .haze,.fyr .cl-beam .c-g .glow,.fyr .cl-beam .c-g .rays{stroke:#9be8ab}
.fyr .cl-beam .c-g .glint,.fyr .cl-beam .c-g .core{stroke:#e3fbe8}
.fyr .cl-filter{z-index:4}
.fyr .cl-prism{filter:drop-shadow(0 0 3px rgba(156,201,219,.6))}
.fyr .cl-tile.hit .cl-prism{filter:drop-shadow(0 0 6px #fff4cc)}
.fyr .boat.need-r .sail{fill:#c46a60;stroke:#ffb3aa}
.fyr .boat.need-g .sail{fill:#5fb877;stroke:#b4f0c2}
.fyr .boat.need-r .lamp{fill:#ff6f61;opacity:1}
.fyr .boat.need-g .lamp{fill:#6ed686;opacity:1}
.fyr .boat.need-r.lit .sail{fill:#ffc2ba;stroke:#2a2522}
.fyr .boat.need-g.lit .sail{fill:#d0fad9;stroke:#2a2522}
.fyr .boat.need-r.lit .halo{fill:url(#haloR)}
.fyr .boat.need-g.lit .halo{fill:url(#haloG)}
.fyr .beam .c-r .haze,.fyr .beam .c-r .glow,.fyr .beam .c-r .rays{stroke:#ff8f84}
.fyr .beam .c-r .glint,.fyr .beam .c-r .core{stroke:#ffe2de}
.fyr .beam .c-g .haze,.fyr .beam .c-g .glow,.fyr .beam .c-g .rays{stroke:#9be8ab}
.fyr .beam .c-g .glint,.fyr .beam .c-g .core{stroke:#e3fbe8}
.fyr .filt .glass{stroke:#1d1a17;stroke-width:3}
.fyr .f-r .glass{fill:rgba(255,111,97,.6)}
.fyr .f-g .glass{fill:rgba(110,214,134,.6)}
.fyr .f-r .fglow{fill:rgba(255,111,97,.16)}
.fyr .f-g .fglow{fill:rgba(110,214,134,.16)}
.fyr .mirror.prism .crystal{fill:url(#glass);stroke:#0d171c;stroke-width:2.5;stroke-linejoin:round}

.fyr .restore{margin-top:2px;align-self:flex-start}
.fyr .restore:disabled{opacity:.45;cursor:default;text-decoration:none}

/* Seagulls that come with some bottles: two gentle motions at right angles make a lazy loop, wings flap,
   and they scatter when the bottle is opened. */
.fyr .bottle{overflow:visible}
.fyr .bottle .gull{position:absolute;left:8px;top:-34px;width:26px;height:12px;animation:gull-x 2.6s ease-in-out infinite alternate;transition:transform .7s ease-in,opacity .7s}
.fyr .bottle .gull-y{display:block;animation:gull-y 2.6s ease-in-out -1.3s infinite alternate}
.fyr .bottle .gull svg{display:block;width:26px;height:12px;transform-origin:50% 60%;animation:gull-flap .38s ease-in-out infinite alternate}
.fyr .bottle .gull-2{top:-50px;left:20px;animation-duration:3.1s;animation-delay:-.8s;transform:scale(.8)}
.fyr .bottle .gull-2 svg{animation-duration:.42s}
.fyr .bottle .gull-3{top:-28px;left:-14px;animation-duration:2.2s;animation-delay:-1.6s;transform:scale(.7)}
.fyr .bottle .gull-3 svg{animation-duration:.33s}
.fyr .bottle.flee .gull{animation:gull-flee .7s ease-in forwards}
.fyr .bottle.flee .gull-2{animation-delay:.08s}.fyr .bottle.flee .gull-3{animation-delay:.15s}
@keyframes gull-x{from{translate:-22px 0}to{translate:22px 0}}
@keyframes gull-y{from{translate:0 -6px}to{translate:0 7px}}
@keyframes gull-flap{from{transform:scaleY(1)}to{transform:scaleY(-.35)}}
@keyframes gull-flee{to{translate:70px -110px;opacity:0}}
:root[data-motion="reduced"] .fyr .bottle .gull,:root[data-motion="reduced"] .fyr .bottle .gull-y,:root[data-motion="reduced"] .fyr .bottle .gull svg {animation:none}

/* Hover preview: a faint copy of whatever the next tap would place, on devices that can hover. */
@media (hover:hover){
.fyr .hits button:not(:disabled):hover::after{content:"";position:absolute;inset:6%;pointer-events:none;background:center/88% no-repeat;opacity:.5;filter:drop-shadow(0 0 4px rgba(156,201,219,.55))}
.fyr .hits button[data-next="slash"]:hover::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-45 12 12)'%3E%3Crect x='4.6' y='10.6' width='14.8' height='2.8' rx='1.2' fill='%23eef7fa' stroke='%239cc9db' stroke-width='1.1'/%3E%3C/g%3E%3Cpath d='M7.6 20.4c0-2.6 8.8-2.6 8.8 0z' fill='%23eef7fa' stroke='%239cc9db' stroke-width='.8'/%3E%3C/svg%3E")}
.fyr .hits button[data-next="back"]:hover::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(45 12 12)'%3E%3Crect x='4.6' y='10.6' width='14.8' height='2.8' rx='1.2' fill='%23eef7fa' stroke='%239cc9db' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E")}
.fyr .hits button[data-next="prism"]:hover::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.2 16.8 10.2 12 16.2 7.2 10.2z' fill='%23eef7fa' stroke='%239cc9db' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M7.6 20.4c0-2.6 8.8-2.6 8.8 0z' fill='%23eef7fa' stroke='%239cc9db' stroke-width='.8'/%3E%3C/svg%3E")}
.fyr .hits button[data-next="remove"]:hover::after{inset:30%;opacity:.7;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6 18 18M18 6 6 18' stroke='%23eef7fa' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.fyr .stage[data-skin="pixel"] .hits button[data-next="slash"]:hover::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M4 11h1v1h-1zM5 10h1v1h-1zM6 9h1v1h-1zM7 8h1v1h-1zM8 7h1v1h-1zM9 6h1v1h-1zM10 5h1v1h-1zM11 4h1v1h-1zM5 11h1v1h-1zM6 10h1v1h-1zM7 9h1v1h-1zM8 8h1v1h-1zM9 7h1v1h-1zM10 6h1v1h-1zM11 5h1v1h-1zM6 13h1v1h-1zM7 13h1v1h-1zM8 13h1v1h-1zM9 13h1v1h-1zM5 14h1v1h-1zM6 14h1v1h-1zM7 14h1v1h-1zM8 14h1v1h-1zM9 14h1v1h-1zM10 14h1v1h-1zM7 12h1v1h-1zM8 12h1v1h-1zM7 11h1v1h-1zM8 11h1v1h-1z' fill='%23eef7fa'/%3E%3C/svg%3E")}
.fyr .stage[data-skin="pixel"] .hits button[data-next="back"]:hover::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M4 3h1v1h-1zM5 4h1v1h-1zM6 5h1v1h-1zM7 6h1v1h-1zM8 7h1v1h-1zM9 8h1v1h-1zM10 9h1v1h-1zM11 10h1v1h-1zM5 3h1v1h-1zM6 4h1v1h-1zM7 5h1v1h-1zM8 6h1v1h-1zM9 7h1v1h-1zM10 8h1v1h-1zM11 9h1v1h-1zM6 13h1v1h-1zM7 13h1v1h-1zM8 13h1v1h-1zM9 13h1v1h-1zM5 14h1v1h-1zM6 14h1v1h-1zM7 14h1v1h-1zM8 14h1v1h-1zM9 14h1v1h-1zM10 14h1v1h-1zM7 12h1v1h-1zM8 12h1v1h-1zM7 11h1v1h-1zM8 11h1v1h-1z' fill='%23eef7fa'/%3E%3C/svg%3E")}
.fyr .stage[data-skin="pixel"] .hits button[data-next="prism"]:hover::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M7 3h1v1h-1zM8 3h1v1h-1zM6 4h1v1h-1zM7 4h1v1h-1zM8 4h1v1h-1zM9 4h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM8 5h1v1h-1zM9 5h1v1h-1zM10 5h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM8 6h1v1h-1zM9 6h1v1h-1zM10 6h1v1h-1zM11 6h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM7 7h1v1h-1zM8 7h1v1h-1zM9 7h1v1h-1zM10 7h1v1h-1zM11 7h1v1h-1zM12 7h1v1h-1zM4 8h1v1h-1zM5 8h1v1h-1zM6 8h1v1h-1zM7 8h1v1h-1zM8 8h1v1h-1zM9 8h1v1h-1zM10 8h1v1h-1zM11 8h1v1h-1zM5 9h1v1h-1zM6 9h1v1h-1zM7 9h1v1h-1zM8 9h1v1h-1zM9 9h1v1h-1zM10 9h1v1h-1zM6 10h1v1h-1zM7 10h1v1h-1zM8 10h1v1h-1zM9 10h1v1h-1zM7 11h1v1h-1zM8 11h1v1h-1zM6 13h1v1h-1zM7 13h1v1h-1zM8 13h1v1h-1zM9 13h1v1h-1zM5 14h1v1h-1zM6 14h1v1h-1zM7 14h1v1h-1zM8 14h1v1h-1zM9 14h1v1h-1zM10 14h1v1h-1zM7 12h1v1h-1zM8 12h1v1h-1zM7 11h1v1h-1zM8 11h1v1h-1z' fill='%23eef7fa'/%3E%3C/svg%3E")}
.fyr .hits button[data-next="full"]:hover::before{border-style:dotted;opacity:.5}
}

/* HESOYAM: a San Andreas-style HUD on the board's frame. Decoration only; nothing in the game changes. */
.fyr .cheat{position:absolute;inset:0;z-index:11;pointer-events:none;opacity:0;transition:opacity .35s}
.fyr .cheat.on{opacity:1}
.fyr .cheat__help{position:absolute;left:30px;top:34px;padding:9px 14px;background:rgba(0,0,0,.78);color:#f2f2f2;border-radius:3px;font:600 15px/1.2 var(--sans,system-ui);letter-spacing:.01em;box-shadow:0 2px 0 rgba(0,0,0,.4)}
.fyr .cheat__hud{position:absolute;right:30px;top:72px;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.fyr .cheat__bars{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.fyr .cheat__bar{display:block;width:118px;height:11px;background:rgba(0,0,0,.65);border:2px solid #000;box-sizing:content-box}
.fyr .cheat__bar i{display:block;height:100%;width:22%;transition:width 1.2s cubic-bezier(.2,.8,.2,1) .15s}
.fyr .cheat__bar--health i{background:linear-gradient(#e0473d,#a3231c)}
.fyr .cheat__bar--armour i{background:linear-gradient(#f4f4f4,#b9b9b9);width:0}
.fyr .cheat.fill .cheat__bar i{width:100%}
.fyr .cheat__money{font:800 30px/1 var(--mono,ui-monospace),monospace;letter-spacing:.02em;color:#3fae4a;
  text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,0 3px 0 #000}
.fyr .cheat__float{position:absolute;transform:translate(-50%,0);font:800 17px/1 var(--mono,ui-monospace),monospace;color:#5fd36a;opacity:0;
  text-shadow:-1.5px -1.5px 0 #000,1.5px -1.5px 0 #000,-1.5px 1.5px 0 #000,1.5px 1.5px 0 #000;animation:cheat-float 1.6s ease-out forwards}
@keyframes cheat-float{0%{opacity:0;transform:translate(-50%,6px) scale(.7)}15%{opacity:1;transform:translate(-50%,0) scale(1.1)}100%{opacity:0;transform:translate(-50%,-46px) scale(1)}}
@media (max-width:560px){.fyr .cheat__help{left:14px;top:22px;font-size:13px}.fyr .cheat__hud{right:14px;top:56px}.fyr .cheat__money{font-size:22px}.fyr .cheat__bar{width:84px;height:8px}}
:root[data-motion="reduced"] .fyr .cheat__bar i{transition:none}