:root{
  --berry-red:#ff2e63;
  --berry-pink:#ff8fb1;
  --berry-purple:#2a0b3d;
  --berry-deep:#160522;
  --berry-blue:#4d79ff;
  --leaf:#3ddc84;
  --cream:#fff3e6;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:
    radial-gradient(circle at 20% 10%, #3a0f52 0%, transparent 55%),
    radial-gradient(circle at 80% 90%, #43124f 0%, transparent 55%),
    var(--berry-deep);
  font-family:'Press Start 2P', monospace;
  color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:10px;overflow:hidden;
  touch-action:none;
}
/* The standalone Berry Codex page: scroll freely, align to top. */
body.codex-page{
  display:block;overflow-y:auto;
  align-items:flex-start;
  touch-action:auto;
}
</parameter>
</invoke>
#cabinet{
  width:min(96vw, 520px);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  container-type:inline-size;
}
#marquee{
  /* Scale relative to the cabinet width (cqw) so the title always fits,
     even on wide desktop screens where the cabinet is capped at 520px. */
  font-size:clamp(13px, 5.6cqw, 24px);
  letter-spacing:1px;
  white-space:nowrap;
  max-width:100%;
  text-align:center;
  color:var(--berry-pink);
  text-shadow:0 0 6px var(--berry-red), 3px 3px 0 var(--berry-purple);
  padding:8px 4px;
  animation:hue 6s linear infinite;
  position:relative;
}
#auth-row{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:8px;width:100%;
}
/* All bottom links share one consistent link style (.footlink). */
.footlink{
  color:var(--leaf);
  text-decoration:underline;
  cursor:pointer;
}
.footlink:hover{color:var(--berry-pink);}
.footsep{opacity:.5;margin:0 2px;}

/* When the cabinet itself is fullscreen, the GAME takes over the whole page.
   No padding, no border, no chrome — just the canvas, centered, filling
   as much of the viewport as the 480x640 (0.75) aspect ratio allows. */
#cabinet:fullscreen,
#cabinet:-webkit-full-screen{
  width:100vw;height:100vh;max-width:100vw;
  gap:0;
  justify-content:center;align-items:center;
  background:var(--berry-deep);
  padding:0;
}
/* Screen fills the fullscreen viewport — width limited only by the aspect
   ratio so it grows as large as possible on tall mobile portrait screens. */
#cabinet:fullscreen #screen,
#cabinet:-webkit-full-screen #screen{
  width:auto;height:auto;
  max-width:100vw;
  max-height:100vh;
  /* keep 480x760 aspect while filling available space */
  width:min(100vw, 63.15vh);
  border-width:0;
  border-radius:0;
  box-shadow:none;
}
#cabinet:fullscreen #canvas,
#cabinet:-webkit-full-screen #canvas{
  width:100%;height:auto;
}
/* Fullscreen: hide ALL extra chrome — title, auth row, footer, legacy pad.
   On-screen joystick + fire button are drawn on the canvas itself, so
   touch play still works with zero surrounding controls. */
#cabinet:fullscreen #marquee,
#cabinet:fullscreen #auth-row,
#cabinet:fullscreen #controls,
#cabinet:fullscreen footer,
#cabinet:-webkit-full-screen #marquee,
#cabinet:-webkit-full-screen #auth-row,
#cabinet:-webkit-full-screen #controls,
#cabinet:-webkit-full-screen footer{
  display:none !important;
}

/* ===== Faux-fullscreen fallback (mobile Safari / no native FS) =====
   Pins the game over the entire viewport with no chrome, using the same
   look as native fullscreen. Triggered by JS adding .faux-fs. */
body.faux-fs{overflow:hidden;padding:0;}
#cabinet.faux-fs{
  position:fixed;inset:0;z-index:9999;
  width:100vw;height:100vh;max-width:100vw;
  gap:0;padding:0;
  justify-content:center;align-items:center;
  background:var(--berry-deep);
}
#cabinet.faux-fs #screen{
  width:min(100vw, 63.15vh);
  height:auto;max-width:100vw;max-height:100vh;
  aspect-ratio:480 / 760;max-height:100vh;
  border-width:0;border-radius:0;box-shadow:none;
}
#cabinet.faux-fs #canvas{width:100%;height:auto;}
#cabinet.faux-fs #marquee,
#cabinet.faux-fs #auth-row,
#cabinet.faux-fs #controls,
#cabinet.faux-fs footer{
  display:none !important;
}
</parameter>
</invoke>
@keyframes hue{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(30deg)}}
#screen{
  position:relative;width:100%;
  /* Cap the height so the game fills vertical space on tall phones without
     overflowing the viewport. 480x760 aspect => width is limited by height. */
  max-height:calc(100dvh - 120px);
  aspect-ratio:480 / 760;
  border:6px solid #12030f;
  border-radius:14px;
  background:#05010a;
  box-shadow:0 0 0 4px #4a1030, 0 0 40px rgba(255,46,99,.4), inset 0 0 60px rgba(0,0,0,.9);
  overflow:hidden;
  margin:0 auto;
}
#canvas{display:block;width:100%;height:100%;image-rendering:pixelated;}
#scanlines{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 2px, transparent 2px 4px);
  mix-blend-mode:multiply;
  animation:flick 3s infinite;
}
@keyframes flick{0%,97%{opacity:.9}98%{opacity:.6}100%{opacity:.9}}
#controls{
  display:flex;gap:10px;width:100%;justify-content:center;
}
.pad{
  font-family:inherit;font-size:14px;
  background:linear-gradient(#ff5c8a,#d61f52);
  color:#fff;border:none;border-bottom:4px solid #7a0d2e;
  border-radius:10px;padding:16px 20px;flex:1;max-width:120px;
  cursor:pointer;user-select:none;
  box-shadow:0 3px 0 rgba(0,0,0,.4);
}
.pad:active{transform:translateY(3px);border-bottom-width:1px;}
.pad.fire{background:linear-gradient(#5cff9c,#1eaf5a);border-bottom-color:#0c6b34;max-width:200px;}
#auth-status{font-size:9px;color:var(--berry-pink);opacity:.85;text-align:center;min-height:12px;margin-top:2px;padding-bottom:6px;line-height:1.5;}
footer{
  font-size:9px;color:#c98fbf;opacity:.9;padding-bottom:14px;line-height:1.9;
  text-align:center;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:6px;
}
footer a{color:var(--leaf);}

/* ===== Berry Codex — a proper full page (not a popup) ===== */
#codex{
  width:100%;min-height:100vh;
  padding:24px 16px;
  animation:cdxfade .25s ease;
}
@keyframes cdxfade{from{opacity:0}to{opacity:1}}
#codexInner{max-width:760px;margin:0 auto;position:relative;}
.cdxTitle{
  font-size:clamp(15px,4.5vw,24px);text-align:center;color:var(--berry-pink);
  text-shadow:0 0 8px var(--berry-red),3px 3px 0 var(--berry-purple);
  padding:8px 0;clear:both;
}
.cdxSub{text-align:center;font-size:8px;color:#c98fbf;line-height:1.7;margin-bottom:18px;}
.cdxSec{
  font-size:13px;color:var(--leaf);margin:24px 0 12px;
  text-shadow:2px 2px 0 var(--berry-deep);letter-spacing:1px;
}
.cdxCard{
  display:flex;gap:14px;align-items:flex-start;
  background:linear-gradient(180deg,rgba(42,11,61,.7),rgba(22,5,34,.7));
  border:2px solid #3d1560;border-radius:12px;
  padding:12px;margin-bottom:12px;
  box-shadow:0 4px 0 rgba(0,0,0,.35);
}
.cdxArt{
  flex:0 0 72px;width:72px;height:72px;
  border:2px solid #fff;border-radius:10px;overflow:hidden;
  background:#0a0216;display:flex;align-items:center;justify-content:center;
  image-rendering:pixelated;
}
.cdxArt img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;}
.cdxSwatch{background:#0a0216;}
.cdxOrb{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:16px;color:#160522;
  box-shadow:0 0 14px currentColor;
}
.cdxTxt{flex:1;min-width:0;}
.cdxTxt h3{font-size:11px;margin-bottom:6px;line-height:1.5;}
.cdxBadge{
  display:inline-block;font-size:7px;color:var(--cream);
  background:#3d1560;border-radius:4px;padding:3px 6px;margin-bottom:6px;
}
.cdxTxt p{font-size:8px;color:#e8d4f0;line-height:1.8;}
.cdxFoot{
  font-size:8px;color:#c98fbf;padding:24px 0 8px;line-height:1.9;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;
}
.cdxFoot a{color:var(--leaf);}
@media (max-width:480px){
  .cdxCard{flex-direction:column;align-items:center;text-align:center;}
  .cdxTxt{text-align:center;}
}
/* Desktop / mouse devices: hide the on-screen d-pad — mouse & keyboard take over.
   JS also hides it, this is a CSS-only safety net. */
@media (hover:hover) and (pointer:fine){
  #controls{display:none !important;}
}
</parameter>