:root{
  --gold:#e9c46a; --gold2:#b8862b; --cream:#f3ead2; --felt:#0d3b2c; --ink:#120d08;
  --grunge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 1 1 1 1 1 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)'/%3E%3C/svg%3E");
}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/playfair-display-900.woff2) format('woff2');}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/playfair-display-700-italic.woff2) format('woff2');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/oswald-500.woff2) format('woff2');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/oswald-700.woff2) format('woff2');}

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#0b0806;color:var(--cream)}
body{font-family:'Oswald',sans-serif;position:relative}
:focus-visible{outline:3px solid var(--gold);outline-offset:6px}

#bg{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;object-position:50% 50%;z-index:0}

/* safe area: 1920x1080, contain, centred */
#safe{position:fixed;left:50%;top:50%;width:1920px;height:1080px;
      transform:translate(-50%,-50%) scale(min(calc(100vw / 1920px), calc(100vh / 1080px)));
      transform-origin:center center;z-index:1}

/* --- header (viewport anchored) --- */
header{position:fixed;left:0;right:0;top:0;height:clamp(56px,6vh,80px);display:flex;align-items:center;
       justify-content:space-between;padding:0 clamp(20px,2.4vw,48px);z-index:5;
       font:500 clamp(15px,1.45vh,28px) 'Oswald',sans-serif;letter-spacing:.16em;color:var(--cream)}
header .brand{display:flex;align-items:center;gap:.75em;font-weight:700;color:var(--gold);font-size:1.35em;letter-spacing:.12em}
header .brand i{width:2.4em;height:2.4em;background:url(../assets/logo.png) center/contain no-repeat;display:inline-block;flex:none}
header nav{display:flex;gap:1.5em;align-items:center}
header nav a{color:var(--cream);text-decoration:none;transition:color .2s}
header nav a:hover{color:var(--gold)}
header nav button.ca{padding:.58em 1.35em;border:.09em solid var(--gold);border-radius:999px;color:var(--gold);
       background:transparent;font:inherit;letter-spacing:inherit;cursor:pointer;transition:background .2s,color .2s}
header nav button.ca:hover{background:rgba(233,196,106,.14)}
#sound{border:0;background:transparent;color:var(--cream);cursor:pointer;width:2.3em;height:2.3em;display:grid;place-items:center}
#sound svg{width:1.7em;height:1.7em;display:block}
#sound:hover{color:var(--gold)}

/* --- title --- */
h1{position:absolute;left:0;right:0;top:118px;text-align:center;line-height:1;
   font-family:'Playfair Display',serif;font-weight:900;font-size:168px;letter-spacing:.03em}
h1 .ch{display:inline-block;background:linear-gradient(180deg,#fff1b8 0%,var(--gold) 42%,var(--gold2) 100%);
       -webkit-background-clip:text;background-clip:text;color:transparent;
       filter:drop-shadow(0 6px 0 rgba(0,0,0,.55)) drop-shadow(0 0 28px rgba(255,190,60,.25))}

/* --- tagline --- */
.tag{position:absolute;left:0;right:0;top:308px;text-align:center;
     font:500 30px 'Oswald',sans-serif;letter-spacing:.32em;color:var(--cream);opacity:.85}

/* --- stage --- */
#stage{position:absolute;inset:0;z-index:2}
.unit{position:absolute;left:0;top:0;width:454px;height:346px;will-change:transform}
.shell{position:absolute;inset:0;transform-origin:50% 301.4px}
.unit img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;user-select:none}
.body{transform-origin:301px 320px}
.peek{transform:translateY(76.8px);visibility:hidden}
.body.breathe{animation:breathe 2.4s ease-in-out infinite}
.shell.bob{animation:bob .5s ease-in-out}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scaleY(1.012) scaleX(.999)}}
@keyframes bob{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
.hit{position:absolute;inset:0;border:0;background:transparent;padding:0;pointer-events:none;border-radius:28px}
#stage.idle .unit.is-snail .hit{pointer-events:auto;cursor:pointer}
#stage.pick .unit .hit{pointer-events:auto;cursor:pointer}
#stage.pick .unit:hover .shell{animation:wobble .4s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.shadow{position:absolute;top:723px;left:0;height:44px;border-radius:50%;z-index:0;
        background:radial-gradient(closest-side, rgba(0,0,0,.75), rgba(0,0,0,.35) 55%, transparent)}

/* --- rubber stamp (LEMONED / SNAIL!) --- */
.stamp{position:absolute;z-index:10;pointer-events:none;white-space:nowrap;line-height:1;
      font-family:'Oswald',sans-serif;font-weight:700;font-size:84px;letter-spacing:.06em;
      padding:.16em .2em;border:.075em solid;border-radius:10px;text-align:center;
      -webkit-mask-image:var(--grunge);mask-image:var(--grunge);
      -webkit-mask-size:150px 150px;mask-size:150px 150px;
      -webkit-mask-repeat:repeat;mask-repeat:repeat}
.stamp-lose{color:#d7263d;border-color:#d7263d}
.stamp-win{color:var(--gold);border-color:var(--gold)}

/* --- fx canvas --- */
#fx{position:absolute;left:0;top:0;width:1920px;height:1080px;pointer-events:none;z-index:3}

/* --- status / CTA / counters --- */
.status{position:absolute;left:0;right:0;top:800px;text-align:center;z-index:4;
        font:italic 700 34px 'Playfair Display',serif;color:var(--cream);text-shadow:0 2px 8px #000}
.cta{position:absolute;left:50%;top:858px;transform:translateX(-50%);z-index:4;
     padding:22px 64px;border-radius:999px;border:3px solid #fff3c4;cursor:pointer;
     font:700 38px 'Oswald',sans-serif;letter-spacing:.14em;color:var(--ink);
     background:linear-gradient(180deg,#ffe58a,#e2a92f);
     box-shadow:0 8px 0 #7a5212, 0 14px 40px rgba(0,0,0,.6), 0 0 40px rgba(255,200,60,.35)}
.cta.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 8px 0 #7a5212,0 14px 40px rgba(0,0,0,.6),0 0 30px rgba(255,200,60,.30)}
                 50%{box-shadow:0 8px 0 #7a5212,0 14px 40px rgba(0,0,0,.6),0 0 55px rgba(255,200,60,.60)}}
.cta[aria-disabled="true"]{cursor:default}
.score{position:absolute;left:0;right:0;top:988px;z-index:4;display:flex;justify-content:center;gap:56px;
       font:500 22px 'Oswald',sans-serif;letter-spacing:.24em;color:var(--cream);opacity:.8}
.score b{color:var(--gold);font-weight:700;display:inline-block}
.score b.pop{animation:pop .3s ease-out}
@keyframes pop{0%{transform:scale(1.3)}100%{transform:scale(1)}}