:root{
  --shell:#FF8DBE; --btn:#FFF5F9; --btn-deep:#E2B6C9; --pill:#C25585; --ink:#FFFFFF;
  --print:#FF5C9E; --mark:#FFE1EE; --back:#F7E0E9;
  --ease:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box;margin:0}
html{color-scheme:light;-webkit-text-size-adjust:100%}
body{min-height:100dvh;background:var(--back);transition:background-color .5s var(--ease);
  font-family:'Archivo',system-ui,sans-serif;color:#18181A;-webkit-font-smoothing:antialiased}

/* ---------- page: flavours on top, console in the middle, help below ---------- */
.page{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;overflow-x:clip}
.top{display:flex;flex-direction:column;align-items:center;padding:18px 16px 4px}
.stage{display:flex;align-items:center;justify-content:center;padding:12px 16px}
.device-wrap{flex:none}

.flavours{position:relative;display:flex;gap:6px}
.flav{appearance:none;border:0;background:none;padding:6px 8px 10px;cursor:pointer;display:block}
.flav canvas{display:block;width:24px;height:28px;image-rendering:pixelated;transition:transform .18s var(--ease)}
@media (hover:hover){.flav:hover canvas{transform:translateY(-2px)}}
.flav:active canvas{transform:scale(.9)}
.indicator{position:absolute;left:0;bottom:0;height:2px;border-radius:2px;background:#18181A;transition:transform .38s var(--ease),width .38s var(--ease)}
.flavour-name{font-size:13px;color:#5D5E63;margin-top:6px;min-height:1.4em}

.bottom{position:relative;display:flex;justify-content:center;gap:4px;padding:4px 16px 18px}
.icon-btn{appearance:none;border:0;background:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#3A3B40;
  transition:color .2s var(--ease),background-color .2s var(--ease),transform .14s var(--ease)}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-btn .dot{fill:currentColor}
.icon-btn:active{transform:scale(.92)}
.icon-btn[aria-expanded="true"]{background:rgba(0,0,0,.07);color:#111}
@media (hover:hover){.icon-btn:hover{color:#111;background:rgba(0,0,0,.05)}}
#sound .mute{display:none}
#sound[aria-pressed="false"] .on{display:none}
#sound[aria-pressed="false"] .mute{display:inline}

/* how-to-play card, grows out of the info button */
.help{position:absolute;left:50%;bottom:calc(100% - 6px);width:min(360px,calc(100vw - 32px));z-index:10;
  background:#FCFCFB;border-radius:14px;padding:20px 22px 22px;color:#18181A;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 18px 40px -12px rgba(0,0,0,.28);
  transform-origin:50% 100%;translate:-50% 0;
  opacity:0;transform:translateY(6px) scale(.97);visibility:hidden;pointer-events:none;
  transition:opacity .14s ease-in,transform .14s ease-in,visibility 0s .14s}
.help[data-open="true"]{opacity:1;transform:none;visibility:visible;pointer-events:auto;
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s}
.help h1{font-weight:600;font-size:20px;letter-spacing:-.01em}
.help .lede{color:#4E4F54;font-size:14px;line-height:1.5;margin-top:6px}
.help h2{font-weight:600;font-size:13px;margin-top:18px}
.controls{font-size:13px;line-height:1.5;margin-top:8px}
dl.controls{display:grid;grid-template-columns:auto 1fr;gap:4px 20px}
dl.controls dt{color:#18181A}
dl.controls dd{color:#5D5E63}
p.controls{color:#4E4F54;display:none}
.tip{font-size:13px;color:#5D5E63;margin-top:14px}
.replay{appearance:none;border:0;background:none;padding:0;margin-top:10px;font:inherit;font-size:13px;color:#18181A;cursor:pointer;
  text-decoration:underline;text-decoration-color:rgba(0,0,0,.25);text-underline-offset:3px}
@media (hover:hover){.replay:hover{text-decoration-color:currentColor}}
@media (hover:none) and (pointer:coarse){ dl.controls{display:none} p.controls{display:block} }
:focus-visible{outline:2px solid #111;outline-offset:3px}

/* ---------- the handheld ---------- */
.device{position:relative;isolation:isolate;font-family:'Michroma',sans-serif;
  width:420px;height:738px;border-radius:18px 18px 76px 18px;user-select:none;-webkit-user-select:none;
  box-shadow:0 44px 70px -34px rgba(0,0,0,.4),0 12px 22px -12px rgba(0,0,0,.22)}
.device > *{position:absolute}
.device button{-webkit-tap-highlight-color:transparent}
.device [data-btn]{touch-action:none}

/* brushed aluminium printed in the flavour colour */
.body{inset:0;border-radius:inherit;background-color:var(--print);transition:background-color .5s var(--ease);
  background-image:
    linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.38) 14%,rgba(255,255,255,0) 30%,rgba(0,0,0,0) 72%,rgba(0,0,0,.2) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,rgba(0,0,0,.05) 1px 3px);
  box-shadow:inset 0 -9px 0 #BFC3C8,inset 0 -11px 0 rgba(0,0,0,.18),inset 0 0 0 1px rgba(0,0,0,.12)}
.lid{left:0;right:0;top:0;height:22px;border-radius:18px 18px 0 0;
  background:linear-gradient(180deg,#F6F7F8 0%,#C9CDD2 30%,#EEF0F2 48%,#AEB3B9 78%,#8E939A 100%);box-shadow:0 2px 3px rgba(0,0,0,.2)}
.lid::after{content:"";position:absolute;left:8px;right:8px;top:6px;height:1px;background:rgba(0,0,0,.18);box-shadow:0 5px 0 rgba(255,255,255,.6)}

/* pull tab = power. Open shows a dark hole, closed shows the print */
.tab{top:5px;left:34px;width:44px;height:15px;border:0;padding:0;border-radius:8px;cursor:pointer;
  background:linear-gradient(180deg,#FBFCFC,#B8BDC3);box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 -1px 0 rgba(0,0,0,.15);
  transition:transform .16s var(--ease)}
.tab::after{content:"";position:absolute;left:7px;top:4px;width:16px;height:7px;border-radius:4px;background:#141414;box-shadow:inset 0 1px 2px rgba(0,0,0,.6);transition:background-color .2s var(--ease)}
.off .tab::after{background:var(--print);box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.tab:active{transform:translateY(1px) scaleY(.9)}

.bezel{top:34px;left:24px;width:372px;height:420px;border-radius:10px 10px 46px 10px;background:#3C3E45;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.25)}
.bezel > *{position:absolute}
.bezel .label{top:10px;left:22px;right:22px;display:flex;align-items:center;gap:8px;font-size:7px;letter-spacing:.08em;color:#9EA1A8;white-space:nowrap}
.bezel .label i{flex:1;height:2px;background:#C2457E;box-shadow:0 4px 0 #4E8F2E;transform:translateY(-2px)}
.led{left:9px;top:160px;width:8px;height:8px;border-radius:50%;background:#FF3B3B;box-shadow:0 0 8px 1px rgba(255,59,59,.8);transition:background-color .3s,box-shadow .3s}
.off .led{background:#5C2A2A;box-shadow:none}
.screen{top:34px;left:26px;width:320px;height:336px;image-rendering:pixelated;background:#000}
.lcd{top:34px;left:26px;width:320px;height:336px;pointer-events:none;
  background-image:linear-gradient(to right,rgba(0,0,0,.08) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.08) 1px,transparent 1px);
  background-size:2px 2px;box-shadow:inset 0 2px 6px rgba(0,0,0,.25)}
/* skip button for the first-visit intro, sits in the bezel under the screen */
.skip{right:24px;top:380px;display:flex;align-items:center;gap:7px;border:0;border-radius:6px;padding:7px 10px 7px 12px;cursor:pointer;
  font:600 12px 'Archivo',sans-serif;color:#F4F4F5;background:rgba(255,255,255,.14);
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .16s ease-in,transform .16s ease-in,visibility 0s .16s,background-color .2s}
.skip.show{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease) .4s,transform .3s var(--ease) .4s,visibility 0s,background-color .2s}
.skip svg{width:10px;height:10px;fill:currentColor}
.skip:active{transform:scale(.96)}
@media (hover:hover){.skip:hover{background:rgba(255,255,255,.22)}}
.brand{top:466px;left:30px;font-size:16px;letter-spacing:.04em;color:var(--ink);transition:color .5s var(--ease);white-space:nowrap}

/* D-pad tilts toward the pressed direction */
.dpad{left:46px;top:526px;width:100px;height:100px;transition:transform .1s var(--ease)}
.dpad::before{content:"";position:absolute;inset:-10px;border-radius:50%;background:rgba(0,0,0,.08)}
.dpad i{position:absolute;background:#2A2B2F;border-radius:5px;box-shadow:0 3px 0 #0F1012,inset 0 1px 0 rgba(255,255,255,.12);pointer-events:none}
.dpad i:nth-of-type(1){left:0;top:35px;width:100px;height:30px}
.dpad i:nth-of-type(2){left:35px;top:0;width:30px;height:100px}
.dpad::after{content:"";position:absolute;left:41px;top:41px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.45),transparent 70%);pointer-events:none}
.dpad button{position:absolute;border:0;padding:0;background:none;cursor:pointer;z-index:1}
.d-up{left:25px;top:-12px;width:50px;height:47px}
.d-down{left:25px;top:65px;width:50px;height:47px}
.d-left{left:-12px;top:25px;width:47px;height:50px}
.d-right{left:65px;top:25px;width:47px;height:50px}
.dpad[data-dir="left"]{transform:perspective(500px) rotateY(-12deg)}
.dpad[data-dir="right"]{transform:perspective(500px) rotateY(12deg)}
.dpad[data-dir="up"]{transform:perspective(500px) rotateX(12deg)}
.dpad[data-dir="down"]{transform:perspective(500px) rotateX(-12deg)}

.ab{left:230px;top:490px;width:150px;height:100px;transform:rotate(-25deg)}
.ab::before{content:"";position:absolute;left:-6px;top:14px;width:156px;height:68px;border-radius:40px;background:rgba(0,0,0,.08)}
.ab button{position:absolute;top:21px;width:54px;height:54px;border:0;border-radius:50%;background:var(--btn);cursor:pointer;
  box-shadow:0 4px 0 var(--btn-deep),inset 0 2px 1px rgba(255,255,255,.35);
  transition:transform .1s var(--ease),box-shadow .1s var(--ease),background-color .5s var(--ease)}
.ab button.down{transform:translateY(3px);box-shadow:0 1px 0 var(--btn-deep),inset 0 2px 1px rgba(255,255,255,.35)}
.ab .b{left:4px}.ab .a{left:86px}
.ab span{position:absolute;top:84px;font-size:11px;color:var(--ink);transition:color .5s var(--ease);pointer-events:none}
.ab span:nth-of-type(1){left:26px}.ab span:nth-of-type(2){left:108px}

.ss{left:112px;top:648px;display:flex;gap:22px;transform:rotate(-25deg)}
.ss div{display:flex;flex-direction:column;align-items:center;gap:7px}
.pill{display:block;width:48px;height:13px;border:0;padding:0;border-radius:8px;background:var(--pill);cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.25),0 0 0 4px rgba(0,0,0,.06);transition:transform .1s var(--ease),background-color .5s var(--ease)}
.pill.down{transform:translateY(2px)}
.ss small{font-size:7px;letter-spacing:.08em;color:var(--ink);transition:color .5s var(--ease)}

/* the speaker is cut in the shape of the claw */
.claw{right:48px;bottom:22px;width:68px;height:88px;overflow:visible;pointer-events:none}
.claw .cut{fill:var(--mark);transition:fill .5s var(--ease)}
.claw .lip{fill:rgba(0,0,0,.25)}

/* a short rumble on chains of three or more */
@keyframes rumble{0%,100%{translate:0 0}20%{translate:-3px 0}40%{translate:3px 1px}60%{translate:-2px 0}80%{translate:2px -1px}}
.rumble{animation:rumble .28s linear}
@media (prefers-reduced-motion:reduce){ .rumble{animation:none} .dpad{transition:none} }