:root{
  --royal-ink:#173a31;
  --royal-emerald:#063c31;
  --royal-emerald-2:#0b5b48;
  --royal-gold:#e8bd61;
  --royal-gold-light:#fff0b7;
  --royal-cream:#fff8e8;
  --royal-cream-2:#f1e5c8;
}

body{
  min-height:100dvh;
  background:#06271f url('assets/environment/royal-toy-showroom.webp') center/cover fixed no-repeat;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,#03241db8 0,#063a2c18 28%,#031f176b 100%);
}

.royal-nav{
  position:relative;
  z-index:30;
  width:min(1370px,calc(100% - 28px));
  height:58px;
  margin:0 auto;
  padding:7px 14px;
  border:1px solid #e5bd62;
  border-top:0;
  border-radius:0 0 18px 18px;
  background:linear-gradient(180deg,#073c31f5,#032b24f3);
  box-shadow:0 9px 30px #00130db0,inset 0 -1px #ffe9a629;
}

.nav-links,.nav-actions{display:flex;align-items:center;gap:7px}
.nav-links a:not(.brand){
  min-height:38px;
  padding:11px 15px;
  border-radius:999px;
  color:#fff4d1;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}
.nav-links a:not(.brand):hover{background:#001d1766}
.brand{display:flex;align-items:center;gap:7px;margin-right:6px;color:#ffe59a}
.brand span{font-size:22px}
.nav-crest{
  position:absolute;
  left:50%;
  top:4px;
  min-width:285px;
  padding:10px 30px 9px;
  transform:translateX(-50%);
  border-bottom:1px solid #e8bd61;
  color:#ffe8a1;
  font:700 15px Georgia,serif;
  letter-spacing:.06em;
  text-align:center;
  text-shadow:0 2px 8px #000;
}
.nav-crest span{display:block;position:absolute;top:-2px;left:50%;transform:translateX(-50%);font-size:18px}
.nav-actions{margin-left:auto}
.nav-actions button{min-height:44px;padding:8px 13px;border-radius:12px;font-size:12px}

main{
  display:grid;
  grid-template-columns:250px minmax(560px,1fr) 320px;
  gap:14px;
  width:min(1420px,100%);
  max-width:none;
  min-height:calc(100dvh - 58px);
  margin:0 auto;
  padding:12px 14px 16px;
}

.royal-story{
  position:relative;
  min-width:0;
  overflow:visible;
  pointer-events:none;
}
.story-banner{
  position:relative;
  width:100%;
  margin-top:14px;
  padding:42px 18px 30px;
  border:2px solid #d8a849;
  border-radius:9px 9px 22px 22px;
  background:linear-gradient(145deg,#07513fef,#032d26f5);
  box-shadow:0 18px 44px #00100da8,inset 0 0 0 5px #efd58812;
  text-align:center;
  filter:drop-shadow(0 6px 4px #0007);
}
.story-banner::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:-24px;
  height:34px;
  background:linear-gradient(135deg,transparent 48%,#c99538 49% 52%,#064233 53%) left/50% 100% no-repeat,linear-gradient(225deg,transparent 48%,#c99538 49% 52%,#064233 53%) right/50% 100% no-repeat;
}
.story-crown{display:block;color:#f7d77f;font-size:42px;line-height:1;text-shadow:0 4px 12px #0009}
.story-banner h2{margin:8px 0 14px;color:#f8dfa0;font-size:clamp(32px,3vw,44px);line-height:.95;text-transform:uppercase;text-shadow:0 3px 0 #7f5620,0 8px 18px #000a}
.story-banner strong{display:block;color:#ffc961;font-size:12px;letter-spacing:.12em}
.story-banner p{margin:14px auto 0;max-width:190px;color:#f4e3b9;font:700 14px/1.35 Georgia,serif}
.throne-companion{
  position:absolute;
  left:50%;
  bottom:clamp(230px,26vh,300px);
  width:145px;
  aspect-ratio:159/105;
  transform:translateX(-50%);
  background:url('assets/04-capybara.webp') center/contain no-repeat;
  filter:drop-shadow(0 18px 16px #0009) drop-shadow(0 0 18px #ffd77755);
}
.throne-companion::before{content:"♛";position:absolute;top:-25px;left:50%;transform:translateX(-50%);color:#f9d66d;font-size:32px;text-shadow:0 3px 5px #764b10}
.push-secret{pointer-events:auto;cursor:pointer;user-select:none}

.machine-stage{
  min-width:0;
  align-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  width:100%;
}

.machine-shell{
  position:relative;
  display:block;
  min-width:0;
  width:100%;
  height:auto;
  aspect-ratio:1328/1184;
  align-self:center;
  overflow:visible;
  border:0;
  border-radius:18px;
  background:radial-gradient(circle at 50% 42%,#ffe8b129,transparent 54%);
  box-shadow:0 24px 64px #0008;
}
.game-heading{
  position:absolute;
  inset:0;
  z-index:12;
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  pointer-events:none;
}
.game-heading>div{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* the balance while it counts up after a Mega Drop */
#balance.counting{color:#ffe27a;text-shadow:0 0 10px #ffd76a99}
/* the Mega Drop button, where the "?" used to sit; the glow is one compositor-only pulse */
#mega-drop{position:absolute;z-index:13;top:5%;right:9.5%;width:112px;padding:0;border:0;min-height:0;border-radius:18px;background:transparent;box-shadow:none;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s}
#mega-drop img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 4px #ffd36acc)}
#mega-drop::before{content:"";position:absolute;inset:-14% -8%;z-index:-1;border-radius:50%;background:radial-gradient(circle,#ffd76a70,transparent 66%);animation:mega-glow 1.5s ease-in-out infinite alternate;will-change:opacity,transform}
#mega-drop:hover{filter:none;transform:scale(1.05)}
#mega-drop:active{transform:scale(.97)}
#mega-drop.dim img{filter:saturate(.55) brightness(.85)}
#mega-drop.dim::before{animation-duration:3s;opacity:.35}
#mega-drop:disabled{opacity:.6;cursor:wait}
@keyframes mega-glow{from{opacity:.3;transform:scale(.92)}to{opacity:1;transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){#mega-drop::before{animation:none;opacity:.7}}
#mega-confirm{border:1px solid #d8ad5166;border-radius:16px;padding:20px;max-width:min(420px,92vw);color:var(--cream,#f6ecd2);background:linear-gradient(#0b3a2e,#062018);text-align:center}
#mega-confirm::backdrop{background:#02120dcc}
#mega-confirm h2{margin:0 0 8px;font-size:20px}
#mega-confirm p{margin:0 0 10px;font-size:13px;line-height:1.5}
#mega-confirm strong{color:#ffe9a8}
.mega-confirm-art{display:block;width:min(200px,60%);height:auto;margin:0 auto 6px;filter:drop-shadow(0 0 8px #ffd36a99)}
#mega-confirm .redeem-confirm-actions{justify-content:center}
/* the "?" now lives at the foot of the collection drawer */
#collection-drawer #help{display:block;position:static;width:100%;margin-top:10px;border-radius:12px;font:700 13px Arial,sans-serif;background:linear-gradient(#24745b,#0b4336)}
.hud{
  position:relative;
  z-index:10;
  width:min(680px,84%);
  min-height:82px;
  margin:0;
  padding:12px 22px 10px;
  transform:none;
  border:1px solid #edca7c;
  border-radius:12px;
  background:linear-gradient(180deg,#075544,#063b32);
  box-shadow:inset 0 0 0 2px #ffedab20,0 3px 8px #0007;
}
.hud>div{min-width:0}.hud span{color:#ead9aa;font-size:clamp(6px,.65vw,10px)}.hud strong{color:#fff1b7;font-size:clamp(14px,1.7vw,24px)}.hud strong small{color:#e9d79f}
#progress-meter{background:#f3de9b2e}
#playfield{position:absolute;inset:0;width:100%;height:100%;min-height:0;touch-action:pan-y;background:transparent}
#scene{position:relative;z-index:1}
#toy-toast{position:absolute;z-index:14;top:26%;left:50%;transform:translateX(-50%);max-width:88%;padding:8px 16px;border:1px solid #efcf78;border-radius:999px;background:linear-gradient(180deg,#14775dee,#064333ee);box-shadow:0 6px 16px #0009;color:#fff1b2;font-size:clamp(11px,2.6vw,14px);font-weight:900;letter-spacing:.04em;text-align:center;pointer-events:none;white-space:nowrap}
#toy-toast[hidden]{display:none}
/* the tap glow: a gold ring that blooms and fades where the finger landed */
.tap-glow{position:absolute;z-index:13;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff7d6 0%,#ffd45f 35%,rgba(255,212,95,0) 70%);
  box-shadow:0 0 18px 6px #ffd45f99,0 0 42px 12px #ffb52e55;
  animation:tapGlow .55s ease-out forwards}
@keyframes tapGlow{0%{transform:scale(.4);opacity:.95}55%{transform:scale(2.6);opacity:.75}100%{transform:scale(3.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.tap-glow{animation-duration:.25s}}
#tap-hint{
  bottom:4.2%;
  min-width:0;
  width:52%;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  box-shadow:none;
}
#tap-hint{display:none}
#loading,#paused{background:#063b30f5;color:#ffe59c}
/* No status pill or reward banner over the machine, on any screen: the HUD and the collection panel say it all. The sign-in link keeps its spot on the front steps. */
.wallet-status-wrap{top:auto;bottom:12.5%;}
#wallet-status{display:none!important}
#celebration{display:none!important}
#toy-toast{top:auto;bottom:20.5%}
#mobile-auto-redeem{display:none}

#collection-drawer{
  align-self:stretch;
  max-height:calc(100dvh - 86px);
  overflow:auto;
  padding:0;
  border:1px solid #d1b16c;
  border-radius:13px;
  background:linear-gradient(145deg,var(--royal-cream),var(--royal-cream-2));
  box-shadow:0 18px 48px #00140fa8,inset 0 0 0 4px #fff9e4;
  color:var(--royal-ink);
  scrollbar-color:#0b5a46 #e8dcc1;
  scrollbar-width:thin;
}
#collection-drawer section{margin:0;padding:14px;border:0;border-bottom:1px solid #b89a5f55;border-radius:0;background:transparent;box-shadow:none}
#collection-drawer .eyebrow{color:#31594b;font-size:9px;letter-spacing:.14em}
#collection-drawer h2{margin:3px 0 5px;color:#173e33;font-size:18px}
#collection-drawer p,#collection-drawer .note{color:#53675e}
.collection-panel>p{margin:0 0 9px;font-size:11.5px;line-height:1.35}
.theme-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;max-height:285px;padding:2px}
.theme-grid button{
  min-height:84px;
  padding:5px 3px;
  border:1px solid #9bac8c;
  border-radius:9px;
  background:linear-gradient(#f6f1dc,#e7e6c9);
  box-shadow:inset 0 1px #fff,0 2px 5px #485c4526;
  color:#173c32;
}
.theme-grid button[aria-pressed="true"]{border-color:#b77d1a;background:linear-gradient(#fff1bd,#e5c874);box-shadow:0 0 0 2px #d5a23d55,inset 0 1px #fff}
.theme-grid img{height:48px;filter:drop-shadow(0 3px 3px #59685c55)}
.theme-grid span{font-size:9.5px;line-height:1.15}
#art-note{margin-top:7px;font-size:10.5px;line-height:1.3}
.redeemable{gap:6px!important}
.redeemable-head h2{color:#173e33!important}.redeemable-head strong{color:#285b49!important}
.redeemable-item{grid-template-columns:36px 1fr auto;gap:7px;padding:6px;border-color:#8f9d8259;background:#fffaf0}
.redeemable-item img{width:36px;height:36px;background:#e7dcc0}
.redeemable-item .name{color:#173e33;font-size:12px}.redeemable-item .sub{color:#53675e;font-size:10.5px}
.redeemable-item button,.redeem-all,#auto-redeem{min-height:40px;padding:7px 10px;border-color:#0c5c49;background:linear-gradient(#14745b,#07513f);color:#fff9db;font-size:11px}
#auto-redeem.is-active{border-color:#8f241f;background:linear-gradient(#d3483e,#9e241f);color:#fff;box-shadow:0 6px 16px rgba(112,16,12,.28)}
.redeemable-list{gap:5px;max-height:188px;overflow:auto}
.redeemable-empty{color:#53675e!important}
.redeemable-status[data-state="error"]{color:#a02e27}
.redeemable-status[data-state="success"]{color:#0b664b}
.record{text-align:center}.record button{width:100%}
.disclaimer{margin:9px 12px 13px;color:#5b6a63!important;font-size:10px}

@media(max-width:1320px){
  main{grid-template-columns:minmax(0,1fr) 320px;max-width:1120px}
  .royal-story{display:none}
}

@media(max-width:900px),(max-width:1200px) and (max-height:600px){
  html,body{height:100%;min-height:100%;overflow:hidden}
  body{background-attachment:scroll;background-position:27% center}
  body::before{background:linear-gradient(180deg,#03251eb8,#062b2266)}
  .royal-nav{width:100%;height:58px;margin:0;border-inline:0;border-radius:0;padding:7px 8px}
  .nav-links a:not(.brand),.nav-crest{display:none}
  .brand{font-size:13px;margin:0 auto 0 0}
  .nav-actions{gap:5px}.nav-actions button{min-width:44px;padding:6px 8px;font-size:0}.nav-actions button span{display:none}.nav-actions #collection-toggle{font-size:11px}
  .nav-actions #sound::before{content:"♪";font-size:18px}
  .nav-actions #pause::before{content:"Ⅱ";font-size:17px;font-weight:900}
  main{display:flex;align-items:flex-start;justify-content:center;min-height:calc(100dvh - 58px);height:calc(100dvh - 58px);padding:8px;overflow:hidden}
  .machine-stage{flex:0 0 auto;align-self:flex-start;width:min(calc(100vw - 16px),calc((100dvh - 164px)*1328/1184));max-width:100%;gap:8px}
  .machine-shell{width:100%;max-width:100%;height:auto;min-height:0;aspect-ratio:1328/1184;display:block;border-radius:14px}
  #mega-drop{right:12%;top:4.5%;width:90px}
  .hud{display:grid;grid-template-columns:1fr 1.1fr .8fr;width:100%;min-height:76px;margin:0;padding:10px 12px 8px;gap:2px}
  .hud>div{min-width:0}.hud strong{font-size:clamp(15px,4.8vw,20px)}.hud span{overflow:hidden;font-size:7px;letter-spacing:.35px;text-overflow:ellipsis;white-space:nowrap}
  #progress-meter{width:min(82px,22vw)}
  #playfield{width:100%;height:100%;min-height:0;aspect-ratio:auto}
  #tap-hint{bottom:4%;width:56%;max-width:none;padding:0}
  #tap-hint span{font-size:8px}
  .wallet-status-wrap{gap:4px;max-width:calc(100% - 14px)}
  #wallet-status{max-width:55vw;padding-inline:8px;font-size:8.5px}
  #sign-in{padding-inline:8px;font-size:9px}
  #collection-drawer{position:fixed;z-index:40;top:58px;right:0;bottom:0;left:0;height:auto;max-height:none;border-radius:18px 18px 0 0;padding:10px;background:linear-gradient(#fff9e9,#eddfc1);color:var(--royal-ink)}
  #collection-close{background:linear-gradient(#14745b,#07513f);color:#fff5d0}
  #collection-drawer section{padding:12px}
  .theme-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:none}
  .theme-grid button{min-height:86px}
}

@media(max-width:600px) and (orientation:portrait){
  /* Portrait artwork is 941×1375. Keep every machine edge visible. */
  html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
  main{height:auto;min-height:calc(100dvh - 58px);padding:8px 0 76px;overflow:visible}
  .machine-stage{width:100vw;max-width:none;gap:8px}
  .machine-shell{width:104vw;max-width:none;aspect-ratio:941/1375;border-radius:0;background:transparent;box-shadow:none}
  .hud{width:100%;min-height:76px;padding:9px 10px 8px}
  .hud strong{font-size:clamp(15px,5.4vw,22px)}
  .hud span{font-size:clamp(6px,2.05vw,8px)}
  #progress-meter{width:min(100px,25vw)}
  #mega-drop{display:block;top:1%;right:2%;width:23vw;max-width:106px}
  #paused{display:none!important}
  .wallet-status-wrap{top:35%}
  #wallet-status{display:none}
  #celebration{display:none}
  #mobile-auto-redeem{
    position:absolute;z-index:15;top:calc(100% + 8px);bottom:auto;left:50%;display:block;width:44%;min-height:40px;
    transform:translateX(-50%);border:2px solid #efcf78;border-radius:999px;
    background:linear-gradient(180deg,#14775d,#064333);box-shadow:inset 0 0 0 2px #fff1a626,0 5px 14px #0009;
    color:#fff1b2;font-size:clamp(11px,3.25vw,14px);font-weight:900;letter-spacing:.03em;
  }
  #mobile-auto-redeem.is-active{border-color:#ffb0a5;background:linear-gradient(180deg,#d3483e,#922019);color:#fff}
}

@media(max-width:370px){
  .brand{font-size:11px}.brand span{font-size:18px}
  .nav-actions button{padding-inline:6px}
  .hud{padding:6px 3px}.hud strong{font-size:16px}.hud span{font-size:7px}
  #tap-hint{width:58%}
  .theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(min-width:601px) and (max-width:1200px) and (max-height:500px){
  main{height:calc(100dvh - 58px);min-height:0;overflow:hidden}
  .machine-stage{height:100%;width:auto;max-width:100%;margin:auto}
  .machine-shell{height:calc(100% - 90px);width:auto;max-width:100%;margin:auto;aspect-ratio:1328/1184}
  #tap-hint{bottom:5%;min-width:0;width:52%}
}

@media(min-width:901px) and (max-height:900px){
  main{height:calc(100dvh - 58px);min-height:0;overflow:hidden}
  .machine-stage{height:100%;min-height:0}
  .machine-shell{width:auto;height:calc(100% - 94px);max-width:100%;aspect-ratio:1328/1184}
  #collection-drawer{max-height:100%}
}

@media(prefers-reduced-motion:reduce){body{background-attachment:scroll}}

/* the site logo in the corner, a link back to the games */
.royal-nav .brand-logo{display:inline-flex;align-items:center;padding:0 4px}
.royal-nav .brand-logo img{height:40px;width:auto;display:block;filter:drop-shadow(0 2px 4px #0008)}
@media(max-width:600px){.royal-nav .brand-logo img{height:34px}}

/* Lightweight first paint; the renderer and physics load only after Play. */
#game-poster{
  position:absolute;
  inset:0;
  z-index:16;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  overflow:hidden;
  padding:0 16px 7%;
  border-radius:inherit;
  background:#06271f;
  isolation:isolate;
}
#game-poster[hidden]{display:none}
#game-poster picture,
#game-poster picture img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
#game-poster picture img{object-fit:cover}
#game-poster::after{
  content:"";
  position:absolute;
  inset:40% 0 0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(transparent 10%,#03251e70 65%,#021810e8);
}
#start-game{
  position:relative;
  z-index:2;
  min-height:54px;
  padding:10px 30px;
  border:3px solid #fff2b0;
  border-radius:999px;
  background:linear-gradient(#fff2ad,#f8c857 48%,#bb7418);
  box-shadow:inset 0 2px 2px #fff9d7,inset 0 -3px 1px #8e5019,0 6px 0 #5c330f,0 10px 24px #000c,0 0 20px #ffdc6680;
  color:#15382d;
  font:900 clamp(15px,2.3vw,23px)/1.1 Arial,sans-serif;
  letter-spacing:.08em;
  text-shadow:0 1px #fff6cb;
  cursor:pointer;
  transition:transform .16s,box-shadow .16s;
}
#start-game span{margin-left:.4em;font-size:.8em}
#start-game:hover,
#start-game:focus-visible{
  transform:translateY(-2px);
  box-shadow:inset 0 2px 2px #fff9d7,inset 0 -3px 1px #8e5019,0 8px 0 #5c330f,0 14px 28px #000c,0 0 32px #ffdc66cf;
}
#start-game:active{transform:translateY(3px);box-shadow:inset 0 2px 2px #fff9d7,0 2px 0 #5c330f,0 5px 14px #000b}
#game-poster p{
  position:relative;
  z-index:2;
  margin:0;
  color:#fff8db;
  font:700 clamp(11px,1.5vw,15px)/1.25 Arial,sans-serif;
  text-shadow:0 2px 8px #000;
}
@media(max-width:600px) and (orientation:portrait){
  #game-poster{padding-bottom:13%;border-radius:0}
  #start-game{min-height:52px;padding:10px 20px;font-size:clamp(15px,4.2vw,20px)}
}
body:not([data-game-ready]) #mobile-auto-redeem{display:none}
body:not([data-game-ready]) #mega-drop{visibility:hidden}
@media(prefers-reduced-motion:reduce){#start-game{transition:none}}