/* ROOB - a lost N64 cartridge about a bean who robs the rich */

@font-face{font-family:Paquito;src:url(/assets/fonts/Paquito-Bold.woff2)format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Paquito;src:url(/assets/fonts/Paquito-Medium.woff2)format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Sligoil;src:url(/assets/fonts/Sligoil-Bold.woff2)format("woff2");font-weight:700;font-display:swap}

:root{
  --sky:#5c57a9; --sky-deep:#332e63; --night:#1b1836;
  --lime:#c9e86a; --lime-hi:#e2f79a; --hat:#2a6b31;
  --orange:#f5811f; --gold:#ffc31f; --bone:#f7f0dd; --wood:#7b5a34; --ink:#241d14;
  --pad:clamp(12px,2.4vw,30px);
  --ground:clamp(84px,15vh,168px);
  font-synthesis:none;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--night)}
body{
  font-family:Paquito,"Trebuchet MS",system-ui,sans-serif;font-weight:500;
  color:var(--bone);background:var(--night);
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:4px solid var(--gold);outline-offset:3px}

/* ---------- the world behind everything ---------- */
#world{position:fixed;inset:0;z-index:0;background:var(--sky-deep)}
#world video{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
#world::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 30%,transparent 35%,rgba(27,24,54,.55) 100%);
}

main{position:relative;z-index:1}

/* ---------- screen one: the canyon ---------- */
#canyon{
  min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;
  padding-top:env(safe-area-inset-top);
}

.top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:var(--pad);position:relative;z-index:6}
.wordmark{margin:0;line-height:0}
.wordmark img{width:clamp(168px,25vw,400px);height:auto;filter:drop-shadow(0 10px 0 rgba(20,16,40,.45))}

.links{display:flex;gap:clamp(8px,1.2vw,14px)}
.chip{
  width:clamp(58px,7.2vw,84px);padding:8px 6px 6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:var(--bone);color:var(--ink);text-decoration:none;
  border-radius:14px;box-shadow:0 5px 0 #b9ad8d,0 6px 0 rgba(20,16,40,.5);
  transition:transform .08s,box-shadow .08s;
}
.chip:active{transform:translateY(4px);box-shadow:0 1px 0 #b9ad8d,0 2px 0 rgba(20,16,40,.5)}
.chip svg{width:clamp(20px,2.4vw,28px);height:auto;fill:var(--ink)}
.chip img{height:clamp(20px,2.4vw,28px);width:auto}
.chip span{font-family:Paquito;font-weight:700;font-size:clamp(10px,1.05vw,13px);letter-spacing:.06em;text-transform:uppercase}
.chip[aria-disabled=true]{opacity:.55;pointer-events:none}
.chip-pons{text-transform:lowercase!important}

/* ---------- play area ---------- */
.play{position:relative;overflow:hidden;min-height:min(54vh,520px)}
#canyon{isolation:isolate}
.tag{
  position:absolute;left:var(--pad);top:clamp(6px,1.6vh,20px);margin:0;z-index:5;
  font-family:Paquito;font-weight:700;text-transform:uppercase;
  font-size:clamp(15px,2.3vw,30px);line-height:1.05;letter-spacing:.01em;
  color:var(--bone);text-shadow:0 2px 0 rgba(20,16,40,.8),0 0 14px rgba(20,16,40,.5);
  max-width:min(46vw,420px);
}
.hud{
  position:absolute;right:var(--pad);top:clamp(6px,1.6vh,20px);z-index:5;
  display:flex;align-items:center;gap:8px;
}
.hud img{width:clamp(26px,3.4vw,44px);height:auto;filter:drop-shadow(0 3px 0 rgba(20,16,40,.6))}
.hud-n{
  font-family:Paquito;font-weight:700;font-size:clamp(24px,4vw,54px);line-height:1;
  color:var(--gold);text-shadow:0 4px 0 rgba(20,16,40,.75);
  font-variant-numeric:tabular-nums;transition:transform .1s
}
.hud.pop .hud-n{transform:scale(1.22)}

#fx{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}

/* The two clifftop shelves: the same rendered shelf twice, the right one mirrored and
   lifted, so the canyon in the video runs between them at every aspect ratio.
   Measured off assets/img/ledge.png: the saplings take the top 22 percent, so the grass
   surface sits 0.78 * height above the shelf's foot, and height is 0.2056 * width.
   Everything that stands on a shelf is placed off --grass-l / --grass-r, never by eye. */
.obj{position:absolute;z-index:3;user-select:none;-webkit-user-drag:none}
.play{
  --shelf-l-w:min(56vw,880px);
  --shelf-r-w:min(48vw,760px);
  --shelf-r-lift:min(9vw,150px);
  --grass-l:calc(var(--shelf-l-w) * .1604);
  --grass-r:calc(var(--shelf-r-lift) + var(--shelf-r-w) * .1604);
}
.shelf{
  height:auto;z-index:2;pointer-events:none;
  /* the shelf is a rendered slab, so its inner end dissolves into the valley haze
     instead of stopping on a straight cut */
  -webkit-mask-image:linear-gradient(to right,#000 58%,transparent 97%);
  mask-image:linear-gradient(to right,#000 58%,transparent 97%);
}
.shelf-l{left:-5vw;bottom:0;width:var(--shelf-l-w)}
.shelf-r{right:-6vw;bottom:var(--shelf-r-lift);width:var(--shelf-r-w);transform:scaleX(-1)}
#bow{
  left:4vw;bottom:calc(var(--grass-l) - 8px);width:clamp(44px,5.4vw,88px);height:auto;
  transform-origin:50% 95%;transition:transform .1s
}
#noble{
  right:7vw;bottom:calc(var(--grass-r) - 6px);width:clamp(84px,12vw,196px);height:auto;
  transform-origin:50% 100%
}
/* he never SLIDES to the next spot: a transition on `right` means the hit box has to be
   re-measured mid animation, and it always ends up stale. He hops out and lands there. */
#noble.hit{animation:hop .43s ease}
#noble.land{animation:land .34s cubic-bezier(.2,1.5,.4,1)}
@keyframes hop{
  30%{transform:translateY(-22px) rotate(-8deg)}
  70%{transform:translateY(-10px) rotate(6deg)}
  100%{transform:translateY(-4px) rotate(2deg)}
}
@keyframes land{
  0%{transform:translateY(-38px) scale(.94,1.08)}
  60%{transform:translateY(0) scale(1.06,.9)}
  100%{transform:translateY(0) scale(1,1)}
}

.fire{
  position:absolute;left:0;right:0;top:0;bottom:0;z-index:5;
  background:none;border:0;padding:0;cursor:grab;
  display:flex;align-items:flex-end;justify-content:flex-start;
}
.fire:active{cursor:grabbing}
.fire-l{
  margin:0 0 min(5.4vw,86px) 3vw;
  font-family:Paquito;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(11px,1.3vw,16px);color:var(--bone);opacity:.85;
  text-shadow:0 2px 0 rgba(20,16,40,.8);pointer-events:none;
  transition:opacity .25s
}
.fire.went .fire-l{opacity:0}

/* ---------- the ground band, the board and the boombox ---------- */
.ground{
  position:relative;z-index:5;min-height:calc(var(--ground) + 24px);
  display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,26px);
  padding:0 var(--pad) env(safe-area-inset-bottom);
}
.board{
  position:relative;z-index:6;
  display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);
  padding:clamp(6px,1vw,12px) clamp(10px,1.6vw,20px);
  /* the interface window is one generated object: frame, gold studs and its own inset
     panel are all in the plate, nine sliced so it fits any address at any size */
  border-style:solid;border-width:clamp(20px,3.1vw,46px);
  border-image:url(/assets/img/window.png) 62 64 65 64 fill / clamp(20px,3.1vw,46px) / 0 stretch;
  color:var(--bone);max-width:min(94vw,960px);
}
.board-k{
  margin:0;font-family:Paquito;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(13px,1.5vw,19px);color:var(--gold);white-space:nowrap;line-height:1
}
.board-k span{
  display:block;font-size:clamp(9px,.95vw,11px);letter-spacing:.14em;color:#a9c489;
  margin-top:3px
}
.board-ca{
  margin:0;font-family:Sligoil,ui-monospace,monospace;font-weight:700;
  font-size:clamp(11px,1.35vw,17px);letter-spacing:.01em;line-height:1.25;
  color:#f4ffe4;overflow-wrap:anywhere;user-select:all;flex:1 1 auto;min-width:0
}
.board-ca.empty{color:#9fb884;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(10px,1.15vw,14px)}
.board-b{
  font-family:Paquito;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(11px,1.2vw,15px);color:var(--ink);background:var(--gold);
  border:0;border-radius:10px;padding:9px 15px;cursor:pointer;white-space:nowrap;
  box-shadow:0 4px 0 #9a7108;transition:transform .07s,box-shadow .07s
}
.board-b:active{transform:translateY(3px);box-shadow:0 1px 0 #9a7108}
.board-b:disabled{opacity:.5;cursor:not-allowed;box-shadow:0 4px 0 #9a7108}
.board-b.ok{background:var(--lime);box-shadow:0 4px 0 #6f8c2a}

.sound{
  position:absolute;right:var(--pad);bottom:16px;z-index:7;
  background:none;border:0;padding:0;cursor:pointer;line-height:1;
}
/* the drop shadow belongs to the box, never to the button: on the whole element it
   prints a second ghost copy of the label 6 px lower */
.sound img{width:clamp(62px,8vw,116px);height:auto;transition:transform .12s;
  filter:drop-shadow(0 6px 0 rgba(20,16,40,.5))}
.sound[aria-pressed=true] img{animation:thump .48s steps(2) infinite}
@keyframes thump{50%{transform:translateY(-3px) scale(1.03)}}
.sound-l{
  display:block;margin-top:2px;font-family:Paquito;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:clamp(9px,1vw,12px);color:var(--bone);
  text-shadow:0 2px 0 rgba(20,16,40,.8);text-align:center
}
.sound[aria-pressed=true] .sound-l{color:var(--lime)}

/* ---------- screen two: the loot ---------- */
#loot{
  position:relative;padding:clamp(34px,6vh,80px) var(--pad) clamp(50px,9vh,110px);
  background:var(--night) url(/assets/img/wall.jpg) center/cover;
  box-shadow:0 -14px 0 rgba(20,16,40,.35)
}
#loot::before{content:"";position:absolute;inset:0;background:rgba(24,20,44,.42)}
.loot-h{
  position:relative;margin:0 0 clamp(18px,3vh,34px);text-align:center;
  font-family:Paquito;font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,5.4vw,64px);line-height:1;letter-spacing:.01em;
  color:var(--gold);text-shadow:0 5px 0 rgba(20,16,40,.8)
}
.grid{
  position:relative;display:grid;gap:clamp(10px,1.6vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,232px),1fr));
  max-width:1480px;margin:0 auto
}
.tile{
  position:relative;padding:0;background:none;border:0;cursor:pointer;
  border-style:solid;border-width:clamp(13px,1.7vw,22px);
  border-image:url(/assets/img/frame.png) 168 fill / clamp(13px,1.7vw,22px) / 0 stretch;
  aspect-ratio:16/9;line-height:0;
  transition:transform .12s
}
.tile:hover{transform:translateY(-4px) rotate(-.5deg)}
.tile>*{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- lightbox ---------- */
#lb{
  border:0;padding:0;background:none;max-width:100vw;max-height:100dvh;width:100%;height:100%;
  overflow:hidden
}
#lb::backdrop{background:rgba(14,11,30,.88)}
.lb-frame{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(94vw,1180px);aspect-ratio:16/9;line-height:0;
  border-style:solid;border-width:clamp(18px,3.4vw,44px);
  border-image:url(/assets/img/frame.png) 168 fill / clamp(18px,3.4vw,44px) / 0 stretch;
}
.lb-frame>*{width:100%;height:100%;object-fit:cover;display:block}
.lb-x,.lb-nav{
  position:absolute;z-index:3;background:var(--bone);color:var(--ink);border:0;cursor:pointer;
  font-family:Paquito;font-weight:700;border-radius:12px;box-shadow:0 4px 0 #b9ad8d
}
.lb-x{top:clamp(10px,2vh,22px);right:clamp(10px,2vw,22px);width:46px;height:46px;font-size:26px;line-height:1}
.lb-nav{top:50%;transform:translateY(-50%);width:52px;height:64px;font-size:34px;line-height:1}
.lb-prev{left:clamp(6px,1.4vw,18px)}
.lb-next{right:clamp(6px,1.4vw,18px)}

/* ---------- intro film and the start gate ---------- */
/* both are real dialogs: showModal is what makes the page behind them inert and keeps the
   keyboard inside, which a fixed div never does */
#intro,#start{
  border:0;padding:0;background:none;max-width:100vw;max-height:100dvh;
  width:100%;height:100%;overflow:hidden
}
#intro{background:#000;display:grid;place-items:center}
#intro:not([open]),#start:not([open]){display:none}
#intro::backdrop{background:#000}
#intro video{width:100%;height:100%;object-fit:cover}
.skip{
  position:absolute;right:clamp(12px,2vw,26px);bottom:clamp(12px,2vh,26px);
  font-family:Paquito;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(12px,1.3vw,16px);color:var(--ink);background:var(--bone);
  border:0;border-radius:12px;padding:11px 20px;cursor:pointer;box-shadow:0 4px 0 #b9ad8d
}
#start{display:grid;place-items:center}
#start::backdrop{background:rgba(20,17,42,.55);backdrop-filter:blur(2px)}
.startb{
  font-family:Paquito;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(20px,3.6vw,44px);color:var(--ink);background:var(--lime);
  border:0;border-radius:20px;padding:clamp(16px,2.4vw,26px) clamp(30px,5vw,60px);cursor:pointer;
  box-shadow:0 9px 0 #6f8c2a,0 11px 0 rgba(20,16,40,.55);
  animation:pulse 1.6s ease-in-out infinite
}
.startb:active{transform:translateY(6px);box-shadow:0 3px 0 #6f8c2a,0 5px 0 rgba(20,16,40,.55)}
@keyframes pulse{50%{transform:scale(1.04)}}

/* ---------- narrow and short screens ---------- */
@media (max-width:760px){
  :root{--ground:clamp(70px,11vh,110px)}
  .tag{font-size:clamp(14px,4.4vw,22px);max-width:58vw}
  .wordmark img{width:clamp(140px,42vw,240px)}
  .play{
    --shelf-l-w:min(88vw,540px);
    --shelf-r-w:min(76vw,470px);
    --shelf-r-lift:min(36vw,240px);
  }
  #bow{left:5vw;width:clamp(46px,13vw,82px)}
  #noble{right:7vw;width:clamp(74px,20vw,132px)}
  .board{
    flex-wrap:wrap;justify-content:center;text-align:center;gap:4px 10px;margin:0 auto;
    padding:6px 10px;border-width:22px;
    border-image:url(/assets/img/window.png) 62 64 65 64 fill / 22px / 0 stretch;
  }
  .board-ca{flex:1 1 100%}
  .board-b{padding:7px 13px}
  .sound img{width:62px}
  .ground{min-height:0;padding:0 var(--pad) calc(22px + env(safe-area-inset-bottom));
          flex-direction:column;align-items:center;gap:6px}
  .sound{position:static;margin:6px auto 0}
  #canyon{grid-template-rows:auto 1fr auto}
}
@media (max-height:700px){
  .play{min-height:min(40vh,300px)}
  .wordmark img{width:clamp(120px,32vw,220px)}
}
@media (max-height:520px) and (orientation:landscape){
  .tag{display:none}
  .wordmark img{width:clamp(120px,18vw,200px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}