body { background: radial-gradient(ellipse at 60% 30%, #32413c, #15191b 70%); }
.app-shell { max-width: 1120px; }
.topbar, .play-panel, .firmware-setup { background: #1c2522; color: #f5f7ef; border-color: #51635a; }
.topbar { flex-wrap: wrap; gap: 12px; }
.brand .mark { color: #213021; background: #dcfa88; }
.brand h1 { letter-spacing: -.055em; font-size: clamp(24px,4vw,41px); }
.accent, .setup-tag { color: #dcfa88; }
#statusText, .firmware-setup .setup-note { color: #c9d4ca; }
.stage { background: linear-gradient(150deg,#f9fbf7,#c4cfca 63%,#aab7b0); border-color: #edf1eb; box-shadow: inset 0 0 0 3px #ffffff70, 0 16px 28px #0006; }
#screenCanvas { image-rendering: pixelated; border: 4px solid #62706a; box-shadow: 0 0 0 5px #e4ebe3; border-radius: 3px; background: #141d18; }
.firmware-setup { border: 1px solid #51635a; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.firmware-setup h2 { margin: .3rem 0 .65rem; font-size: 1.4rem; }
.firmware-setup p { font-size: .9rem; line-height: 1.45; margin: .5rem 0; }
.firmware-setup .setup-tag { font: 700 .65rem monospace; letter-spacing: .15em; }
.firmware-setup .system-files { grid-template-columns: 1fr; gap: 7px; margin: 12px 0; }
.firmware-setup input { min-width: 0; max-width: 100%; }
.firmware-setup a, .credits a { color: #dcfa88; }
.credits { text-align: center; color: #c9d4ca; padding: 20px; font-size: .8rem; }

.actions [hidden] { display: none !important; }

.poketch[hidden] { display: none; }
.poketch {
  position: absolute;
  z-index: 2;
  background: url("../poketch-original.png") center / 100% 100%;
  image-rendering: pixelated;
  touch-action: manipulation;
}
.poketch-links {
  --lcd-green: #73b473;
  --lcd-ink: #102918;
  position: absolute;
  inset: 8.333333% 18.75% 8.333333% 6.25%;
  display: grid;
  grid-template: repeat(2, 1fr) / repeat(2, 1fr);
  background: var(--lcd-green);
}
.poketch-links a {
  display: grid;
  place-items: center;
  color: var(--lcd-ink);
  touch-action: manipulation;
}
.poketch-links a:focus-visible {
  outline: 2px dashed var(--lcd-ink);
  outline-offset: -3px;
}
.poketch-logo {
  display: block;
  width: 41.666667%;
  aspect-ratio: 1;
  fill: currentColor;
  shape-rendering: crispEdges;
}
.poketch-logo-spotify {
  background: url("../poketch-original.png") 42.592593% 50% / 640% 480% no-repeat;
}
.lcd-cutout { fill: var(--lcd-green); }

.upper-decoration[hidden], .upper-decoration [hidden] { display: none; }
.upper-decoration {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.upper-decoration canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.upper-decoration #firmwareBanner {
  position: absolute;
  inset: 0 0 auto;
  height: 7.8125%;
}
.sehli-menu-logo {
  position: absolute;
  left: 50%;
  top: 87.5%;
  width: 5.46875%;
  height: auto;
  transform: translate(-50%, -50%);
  /* Keep the exact supplied lettering and alpha; render its ink in black. */
  filter: brightness(0);
  image-rendering: auto;
  pointer-events: none;
}

.promo-stage { row-gap: 16px; }
.promo-stage .promo-controls {
  display: flex; position: static; align-items: center; justify-content: space-between;
  width: min(100%, 380px); padding: 0 10px; pointer-events: none; user-select: none;
}
.mobile-joystick {
  position: relative; width: 92px; height: 92px; border-radius: 50%;
  background: #59635b12; border: 1px solid #35403930; touch-action: none;
  pointer-events: auto; -webkit-user-select: none;
}
.joystick-cross { position: absolute; inset: 0; display: grid; place-items: center; color: #38423b30; font-size: 65px; }
.joystick-thumb {
  position: absolute; left: 27px; top: 27px; width: 36px; height: 36px;
  border-radius: 50%; background: #748077aa; border: 1px solid #edf2ed80;
  box-shadow: 0 2px 5px #26322b30;
  transform: translate(var(--stick-x, 0px), var(--stick-y, 0px)); pointer-events: none;
}
.mobile-joystick.active .joystick-thumb { background: #58665dcc; }
.face-buttons { display: flex; gap: 14px; align-items: center; }
.promo-controls .promo-action {
  width: 50px; height: 50px; min-height: 50px; border-radius: 50%;
  color: #36443b; background: #e7ece4aa; border: 1px solid #78877a60;
  font-size: 18px; font-weight: 600; box-shadow: 0 2px 4px #26322b20;
  backdrop-filter: none; touch-action: none;
}
.promo-controls .action-a { margin-top: -24px; }
.promo-controls .promo-action.active { background: #aebcaf; transform: translateY(1px); }
.console-reset {
  position: absolute; top: 10px; right: 10px; z-index: 5; min-height: 32px;
  padding: 5px 9px; gap: 5px; border: 1px solid #52615730;
  color: #48554c; background: #e9eee580; font-size: 12px; border-radius: 20px;
}
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) and (max-width: 1000px) {
  html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
  .app-shell { width: 100%; max-width: none; margin: 0; padding: 0; }
  .topbar, .side-panel, .credits { display: none; }
  .workspace { display: block; height: 100dvh; margin: 0; }
  .promo-stage, .fullscreen-active .promo-stage, .promo-stage:fullscreen {
    width: 100%; height: 100dvh; min-height: 0; border: 0; border-radius: 0;
    padding: max(25px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    grid-template-rows: minmax(0, 1fr) 96px; gap: 6px; align-items: center;
  }
  .promo-stage #screenCanvas, .fullscreen-active .promo-stage #screenCanvas, .promo-stage:fullscreen #screenCanvas {
    width: min(calc(100vw - 18px), calc((100dvh - 143px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 2 / 3));
    height: auto; max-width: 100%; max-height: 100%;
  }
  .is-mobile .promo-controls { display: flex; position: static; width: min(100%, 430px); padding: 0 14px; }
  .console-reset { top: max(4px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); min-height: 26px; padding: 3px 8px; }
}
@media (max-height: 500px) and (max-width: 1000px) and (orientation: landscape) {
  .promo-stage .promo-controls { position: absolute; inset: auto 0 18px; width: 100%; max-width: none; padding: 0 28px; }
  .promo-stage #screenCanvas { width: min(calc(100vw - 250px), calc((100dvh - 40px) * 2 / 3)); }
  .promo-stage { grid-template-rows: 1fr; }
}

.guitar-resume {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%);
  min-height: 48px;
  background: #102918;
  color: #c2e9ac;
  border: 2px solid #73b473;
}
.guitar-resume[hidden] { display: none; }

.sehli-menu-logo[data-layout="horloge"] { left: 25%; width: 4.6875%; }
.sehli-menu-logo[data-layout="calendrier"] { left: 75%; width: 5.208333%; }
.menu-layouts { margin-bottom: 16px; padding: 12px; border: 1px solid #51635a; border-radius: 10px; }
.menu-layouts legend { font-size: 13px; padding: 0 6px; }
.menu-layouts label { display: flex; gap: 8px; padding: 6px; font-size: 13px; cursor: pointer; }
.menu-layouts a { display: block; padding: 8px 6px 0; color: #dcfa88; font-size: 13px; }

.gba-layer { position:absolute; z-index:3; pointer-events:none; container-type:inline-size; color:#263029; font-family:monospace; }
.gba-layer[hidden], .gba-layer [hidden] { display:none!important; }
.gba-cartridge { position:absolute; left:12.890625%; top:81.510417%; width:75%; height:11.71875%; pointer-events:auto; display:flex; align-items:center; gap:5%; padding:2% 4%; border:0; border-radius:0; box-shadow:none; background:transparent; min-height:0; color:#191919; text-align:left; }
.gba-cart-frame { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; pointer-events:none; }
.gba-cartridge > span { position:relative; z-index:1; }
.gba-cart-icon { display:block; width:19%; aspect-ratio:1; flex-shrink:0; padding:1%; background:repeating-linear-gradient(0deg,#b3bab5 0 1px,#c5cbc5 1px 2px); border:1px solid #7b837c; box-shadow:inset 1px 1px #eaf0e9,inset -1px -1px #9aa49b; }
.gba-cart-icon svg,.gba-large-icon svg { display:block; width:100%; height:100%; }
.gba-cart-label { font:bold 3.9cqw/1.2 monospace; letter-spacing:-.04em; }
.gba-cart-label small { display:block; margin-top:5%; font:2.6cqw/1.2 monospace; letter-spacing:0; }
.gba-cartridge:focus-visible { outline:2px solid #278743; outline-offset:2px; }
.gba-folder { position:absolute; inset:0; pointer-events:auto; background:#e9ede5; }
.gba-top,.gba-bottom { position:absolute; left:0; width:100%; height:50%; padding:5%; background:repeating-linear-gradient(0deg,#e6e9e4 0 1px,#f7f9f4 1px 3px); }
.gba-top { top:0; display:flex; flex-direction:column; align-items:center; justify-content:center; border-bottom:3px solid #677065; }
.gba-tag { position:absolute; top:4%; font-size:2.5cqw; letter-spacing:.15em; }
.gba-large-icon { width:25%; aspect-ratio:1; image-rendering:pixelated; }
.gba-top h2 { font:bold 5cqw monospace; margin:4% 0 2%; }
.gba-top .gba-lock-status { font:3cqw monospace; letter-spacing:.1em; margin:0; color:#485640; }
.gba-bottom { top:50%; overflow:auto; font-size:3cqw; }
.gba-bottom button { border:1px solid #71816e; background:#d8e1d2; color:#263324; border-radius:2px; min-height:32px; padding:2% 4%; font:inherit; box-shadow:inset 1px 1px #fff8; }
.gba-back { font-size:2.8cqw!important; }
.gba-code-form { margin:5% auto 0; width:90%; display:grid; gap:5px; }
.gba-code-form label { font-weight:bold; font-size:4cqw; }
.gba-code-form p { margin:2% 0; line-height:1.4; color:#485640; }
.gba-code-form input { width:100%; min-height:38px; padding:3%; border:2px solid #7f907b; border-radius:0; background:#fff; color:#192517; font:4cqw monospace; }
.gba-code-form button[type=submit] { min-height:40px; }
.gba-code-form input[aria-invalid] { border-color:#993e34; }
.gba-code-form #gbaCodeError { color:#8d2b20; min-height:1.4em; }
.gba-contents { margin-top:5%; }
.gba-contents nav { display:flex; gap:2%; }
.gba-contents nav button { flex:1; padding:3% 1%; font-size:2.9cqw; }
.gba-contents nav [aria-pressed=true] { background:#738a6a; color:#fff; }
.gba-contents h3 { font-size:4cqw; margin:6% 0 3%; }
.gba-empty { min-height:4em; line-height:1.5; color:#485640; }

.gba-contents h3 { margin:4% 0 3%; }
.secret-file-list { display:grid; gap:6px; margin-bottom:5%; }
.gba-bottom .secret-file { display:flex; align-items:center; gap:4%; width:100%; min-height:44px; padding:3%; text-align:left; background:#eef2e9; }
.gba-bottom .secret-file[aria-current=true] { background:#d0dcc7; border-color:#3e5638; box-shadow:inset 2px 0 #516a46; }
.secret-file-icon { font-size:5cqw; width:8%; text-align:center; flex-shrink:0; }
.secret-file-name { overflow-wrap:anywhere; font-size:3cqw; line-height:1.35; }
.secret-file-name small { display:block; margin-top:3px; font-size:2.4cqw; color:#56634e; }
.gba-top.has-media > :not(.secret-viewer) { display:none; }
.secret-viewer { position:absolute; inset:0; display:grid; grid-template-rows:minmax(0,1fr) auto; background:#172019; color:#eef3e9; }
.secret-media-stage { display:grid; place-items:center; min-height:0; overflow:hidden; width:100%; padding:2%; }
.secret-media-stage > img,.secret-media-stage > video { display:block; width:100%; height:100%; min-height:0; object-fit:contain; image-rendering:auto; }
.secret-media-stage p { padding:4%; font:3cqw/1.4 monospace; text-align:center; color:#eef3e9; }
.secret-viewer-bar { display:flex; align-items:center; gap:4px; padding:2% 3%; background:#d6dfd0; color:#263324; }
.secret-caption { flex:1; min-width:0; margin:0; font:2.7cqw/1.25 monospace; overflow-wrap:anywhere; }
.secret-viewer-bar button { display:grid; place-items:center; min-width:32px; min-height:32px; padding:0; color:#263324; background:#eaf0e5; border:1px solid #7c8c72; font:20px monospace; }
.secret-audio-card { width:100%; display:grid; place-items:center; gap:5px; }
.secret-audio-note { display:block; font:42px monospace; color:#d6e7c9; }
.secret-audio-card p { margin:0; padding:0 3%; font-size:3.3cqw; }
.secret-audio-card audio { display:block; width:100%; max-width:100%; height:40px; color-scheme:light; }
.secret-viewer:fullscreen { width:100vw; height:100dvh; }
.secret-viewer:fullscreen .secret-caption { font-size:14px; }
.secret-viewer:fullscreen .secret-media-stage p { font-size:16px; }
.secret-viewer-bar .secret-caption { color:#263324; }

/* The public page consists only of the console and its three touch controls. */
body.console-only {
  width: 100%; height: 100dvh; margin: 0; padding: 0;
  overflow: hidden; overscroll-behavior: none; background: #111513;
}
body.console-only .app-shell {
  display: block; min-height: 0;
  width: 100%; max-width: none; height: 100%; margin: 0; padding: 0;
}
body.console-only .topbar,
body.console-only .side-panel,
body.console-only .credits,
body.console-only .fullscreen-exit { display: none !important; }
body.console-only .workspace {
  display: block; width: 100%; height: 100%; min-height: 0; margin: 0;
}
body.console-only .promo-stage {
  --stick-size: clamp(64px, 18vw, 88px);
  --control-gutter: calc(var(--stick-size) / 2 + 8px);
  --console-width: min(
    calc(100vw - 2 * var(--control-gutter) - env(safe-area-inset-left) - env(safe-area-inset-right)),
    calc((100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 2 / 3)
  );
  display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center; gap: 0; width: 100%; height: 100dvh; min-height: 0;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
body.console-only .promo-stage #screenCanvas {
  grid-area: 1 / 1; width: var(--console-width); height: auto;
  max-width: none; max-height: none; aspect-ratio: 2 / 3;
  border: 3px solid #7e8981; border-radius: 3px;
  box-shadow: 0 0 0 4px #dce3dc, 0 10px 32px #0006;
}
body.console-only .promo-stage .promo-controls {
  display: block; grid-area: 1 / 1; position: relative;
  inset: auto; width: var(--console-width); max-width: none; height: 0;
  margin: 0; padding: 0; overflow: visible; pointer-events: none; z-index: 6;
}
body.console-only .mobile-joystick {
  position: absolute; left: 0; top: 0;
  width: var(--stick-size); height: var(--stick-size);
  transform: translate(-50%, -50%);
  background: #c9d1ca45; border: 1px solid #e3eae35c;
  box-shadow: 0 2px 12px #0003; backdrop-filter: blur(3px);
}
body.console-only .joystick-cross { color: #e3eae360; font-size: calc(var(--stick-size) * .67); }
body.console-only .joystick-thumb {
  left: calc(50% - 17px); top: calc(50% - 17px); width: 34px; height: 34px;
  background: #77857cbb; border-color: #e3eae380;
}
body.console-only .face-buttons {
  position: absolute; right: 0; top: 0; display: block;
  width: var(--stick-size); height: calc(var(--stick-size) * 1.12);
  transform: translate(50%, -50%); pointer-events: none;
}
body.console-only .promo-controls .promo-action {
  position: absolute; width: clamp(38px, 10vw, 46px); height: clamp(38px, 10vw, 46px);
  min-height: 0; margin: 0; padding: 0; display: grid; place-items: center;
  pointer-events: auto; background: #dce4dba8; color: #24332a;
  border: 1px solid #ecf3eaae; font-size: 17px; font-weight: 600;
  box-shadow: 0 2px 10px #0003; touch-action: none;
}
body.console-only .promo-controls .action-a { right: 0; top: 0; }
body.console-only .promo-controls .action-b { left: 0; bottom: 0; }
body.console-only .promo-controls .promo-action.active { background: #a5bba7e6; }

body.console-only .console-reset {
  display: inline-flex; position: absolute; z-index: 10;
  top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
  min-height: 30px; padding: 5px 10px; color: #e4ece5;
  border: 1px solid #d9e4dc40; background: #25342c99; border-radius: 18px;
  font: 12px/1.2 system-ui, sans-serif;
}

.game-boot-status {
  position: absolute; z-index: 25; left: 50%; top: 46%; transform: translate(-50%, -50%);
  padding: 6px 10px; border-radius: 4px; background: rgba(8, 8, 8, .85);
  color: #fff; font: 12px monospace; white-space: nowrap; pointer-events: none;
}
.game-boot-status[hidden] { display: none; }