@font-face{
  font-family:"Press Start 2P";
  src:url("PressStart2P-Regular.ttf") format("truetype");
  font-display:swap;
}

:root{
  --sidebar-w:326px;
  --bg0:#070511;
  --bg1:#12102a;
  --bg2:#23204c;
  --ink:#f6eed4;
  --muted:#c9bf9d;
  --line:#0d0b1d;
  --line-hi:#8c85d8;
  --panel:#2a255d;
  --panel-dark:#18153c;
  --gold:#f0ca58;
  --cyan:#7bd4ff;
  --good:#79f0ab;
  --snes-red:#d94d61;
  --snes-green:#67c171;
  --snes-yellow:#f0ca58;
  --snes-blue:#5f89f4;
  --snes-grey:#b6b7c5;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 22%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.022) 0 1px, rgba(0,0,0,0) 1px 4px),
    radial-gradient(circle at top, #312d67 0, #171432 36%, #05040b 100%);
  color:var(--ink);
  font-family:"Courier New", monospace;
  overflow:hidden;
}
body.intro-active{overflow:hidden}
body.intro-active .app-fullscreen-btn{opacity:0;pointer-events:none}
.app-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(292px, 326px) minmax(0,1fr);
  grid-template-areas:'sidebar scene';
  gap:12px;
  padding:10px;
}
.panel,.scene-frame{
  background:
    linear-gradient(180deg, rgba(178,171,255,.14), rgba(47,39,103,.94)),
    linear-gradient(180deg, #2b275d, #17143a);
  border:4px solid var(--line);
  box-shadow:
    inset 0 0 0 2px rgba(160,151,255,.16),
    inset 0 0 0 4px rgba(10,8,28,.9),
    0 0 0 2px rgba(140,133,216,.15),
    0 12px 28px rgba(0,0,0,.34);
}
.side-pane{
  grid-area:sidebar;
  overflow:auto;
  padding-right:3px;
  display:flex;
  flex-direction:column;
  gap:9px;
  max-height:calc(100vh - 20px);
}
.side-pane,
.snes-modal-card{
  scrollbar-width:thin;
  scrollbar-color:#4d4697 #1a1642;
}
.side-pane::-webkit-scrollbar,
.snes-modal-card::-webkit-scrollbar{width:10px}
.side-pane::-webkit-scrollbar-track,
.snes-modal-card::-webkit-scrollbar-track{background:#1a1642}
.side-pane::-webkit-scrollbar-thumb,
.snes-modal-card::-webkit-scrollbar-thumb{background:#4d4697;border:2px solid #1a1642}
.scene-pane{
  grid-area:scene;
  min-height:calc(100vh - 20px);
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.scene-frame{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  min-width:0;
}
.scene-inner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
#scene{
  position:relative;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  background:transparent;
  border:4px solid #0e0b21;
  box-shadow:0 0 0 2px #564caf, inset 0 0 0 2px #070511;
}
.hero-panel{padding:12px}
.hero-panel-header{
  position:relative;
  z-index:3;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
}
.hero-panel-header .tinyline{
  margin-bottom:0;
}
.tinyline,.panel-title,.meter span,.readout span{
  text-transform:uppercase;
  letter-spacing:.2em;
}

h1,.logo-kicker,.panel-title,.snes-modal-header h2,.tinyline{
  font-family:"Press Start 2P", "Courier New", monospace;
}
.tinyline{
  color:#b6b0eb;
  font-size:10px;
  margin-bottom:9px;
  line-height:1.5;
  letter-spacing:.12em;
}
.logo-lockup{
  position:relative;
  z-index:1;
  min-height:126px;
  display:flex;
  align-items:center;
  isolation:isolate;
}
.logo-avatar-frame{
  position:absolute;
  right:18px;
  top:-16px;
  width:174px;
  height:174px;
  display:block;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
  overflow:visible;
  z-index:0;
  pointer-events:none;
}
.logo-avatar{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
.logo-copy{
  position:relative;
  z-index:2;
  min-width:0;
  width:100%;
  padding:14px 0;
}
.logo-kicker{
  color:#f0ca58;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:8px;
  line-height:1.5;
  text-shadow:
    0 3px 0 #120f2e,
    3px 0 0 #120f2e,
    -3px 0 0 #120f2e,
    0 -3px 0 #120f2e,
    3px 3px 0 #120f2e,
    -3px 3px 0 #120f2e,
    3px -3px 0 #120f2e,
    -3px -3px 0 #120f2e,
    0 0 12px rgba(7,5,17,.45);
}
h1{
  margin:0;
  font-size:26px;
  line-height:1.08;
  letter-spacing:0;
  position:relative;
  z-index:2;
  text-shadow:
    0 4px 0 #120f2e,
    4px 0 0 #120f2e,
    -4px 0 0 #120f2e,
    0 -4px 0 #120f2e,
    4px 4px 0 #120f2e,
    -4px 4px 0 #120f2e,
    4px -4px 0 #120f2e,
    -4px -4px 0 #120f2e,
    0 0 16px rgba(7,5,17,.55);
}
.badge-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border:3px solid #120f2e;
  background:linear-gradient(180deg,#40378e,#251e5d);
  box-shadow:inset 0 0 0 2px rgba(145,131,255,.16);
  font-weight:700;
  font-size:11px;
}
.badge-live::before{
  content:"";
  width:7px;height:7px;border-radius:0;background:var(--good);
  box-shadow:0 0 10px var(--good);
}
.note-panel,.meters-panel,.controls-panel,.media-panel,.web-support-panel,.legal-panel,.gallery-panel{padding:10px 11px 12px}
.panel-title{
  color:#bbb4ea;
  font-size:11px;
  margin-bottom:9px;
  line-height:1.45;
  letter-spacing:.12em;
}
.note-panel p{
  margin:0;
  line-height:1.48;
  color:#efe5cf;
  font-size:12px;
}
.meters{display:grid;gap:9px}
.meter span{
  display:block;
  color:#d5caac;
  font-size:10px;
  margin-bottom:4px;
}
.bar{
  height:14px;
  overflow:hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, rgba(0,0,0,0) 1px 8px),
    linear-gradient(180deg,#1a163f,#0b091d);
  border:3px solid #0d0a1f;
  box-shadow:
    inset 0 0 0 2px rgba(115,100,220,.18),
    inset 0 -2px 0 rgba(0,0,0,.36);
}
.bar i{
  display:block;
  height:100%;
  width:40%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, rgba(0,0,0,0) 1px 8px),
    repeating-linear-gradient(90deg, #d0af4f 0 8px, #a67e22 8px 16px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.28);
}
#energyBar{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, rgba(0,0,0,0) 1px 8px),
    repeating-linear-gradient(90deg, #f0ca58 0 8px, #b98924 8px 16px);
}
#hungerBar{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, rgba(0,0,0,0) 1px 8px),
    repeating-linear-gradient(90deg, #d99157 0 8px, #a35234 8px 16px);
}
#playBar{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, rgba(0,0,0,0) 1px 8px),
    repeating-linear-gradient(90deg, #76c56c 0 8px, #3d8647 8px 16px);
}
#groomBar{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, rgba(0,0,0,0) 1px 8px),
    repeating-linear-gradient(90deg, #96a5e6 0 8px, #5d67ab 8px 16px);
}
.readout-grid{display:grid;gap:8px}
.readout{
  background:linear-gradient(180deg,#342b7b,#241d5b);
  border:3px solid #0f0b26;
  box-shadow:inset 0 0 0 2px rgba(145,131,255,.16);
  padding:10px;
}
.readout span{display:block;color:#b8b0e8;font-size:10px;margin-bottom:6px}
.readout strong{display:block;color:var(--gold);font-size:17px;line-height:1.05}
.controls-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}
.controls-head--stack{align-items:flex-start}
.controls-copy{
  margin:0;
  color:#f2ead8;
  line-height:1.45;
  font-size:12px;
  max-width:24rem;
}
.buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
button{
  appearance:none;
  border:3px solid #0f0b26;
  background:linear-gradient(180deg,#4a3d9e,#2a2164);
  color:var(--ink);
  padding:8px 7px;
  font:700 11px "Courier New", monospace;
  letter-spacing:.08em;
  cursor:pointer;
  box-shadow:inset 0 0 0 2px rgba(145,131,255,.2);
}
button.is-active{
  background:linear-gradient(180deg,#8b6d28,#5b4211);
  color:#fff3cd;
  box-shadow:inset 0 0 0 2px rgba(255,226,154,.28);
}
.small-btn{padding:9px 10px;font-size:12px}
.preview-panel{display:none}
.preview-panel.is-visible{display:block}
#catPreview{
  width:100%;
  max-width:180px;
  height:auto;
  display:block;
  margin:0 auto;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  border:3px solid #0f0b26;
  background:#b8b9c8;
}

.tv-control-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 46px minmax(0, 1.02fr);
  gap:6px;
  align-items:stretch;
  min-width:0;
}
.tv-control-row > *{min-width:0}
.tv-control-row .menu-link-btn--grow{flex:initial}
.tv-console,
.radio-console,
.tv-now-row{min-width:0}
.media-panel .menu-link-btn,
.media-panel .tv-power-btn,
.media-panel .radio-console-kicker,
.media-panel .radio-track-title,
.media-panel .radio-track-meta,
.media-panel .radio-volume-label,
.media-panel .radio-volume-readout,
.media-panel .radio-icon-label,
.media-panel .radio-nav-label,
.media-panel .tv-now-label,
.media-panel #tvTrailerTitle{
  font-family:"Press Start 2P", "Courier New", monospace;
}
.media-panel .menu-link-btn{
  padding:7px 6px;
  font:700 9px "Press Start 2P", "Courier New", monospace;
  line-height:1.35;
  letter-spacing:.05em;
  word-break:break-word;
}
.tv-console,
.radio-console{
  padding:7px;
  border:3px solid #0f0b26;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.08)),
    linear-gradient(180deg,#322b6f,#1c1849);
  box-shadow:
    inset 0 0 0 2px rgba(145,131,255,.16),
    inset 0 0 18px rgba(18,14,51,.4);
}
.tv-console{
  display:grid;
  gap:7px;
}
.radio-console{
  margin-top:7px;
}
.radio-console-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:6px;
  margin-bottom:7px;
  min-width:0;
}
.radio-console-head > div{min-width:0}
.radio-console-kicker{
  display:block;
  margin-bottom:4px;
  color:#7bd4ff;
  font-size:8px;
  line-height:1.45;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.radio-track-title{
  display:block;
  min-width:0;
  color:#fff0bd;
  font-size:9px;
  line-height:1.55;
  letter-spacing:.02em;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.radio-track-meta{
  position:relative;
  display:block;
  flex:0 0 auto;
  min-height:22px;
  max-width:120px;
  padding:5px 6px;
  overflow:hidden;
  text-align:left;
  white-space:nowrap;
  border:3px solid #0f0b26;
  background:linear-gradient(180deg,#171333,#0b0a19);
  color:#c7dbff;
  font-size:8px;
  line-height:1.5;
  letter-spacing:.03em;
  text-transform:none;
  box-shadow:inset 0 0 0 2px rgba(95,137,244,.18);
}
.radio-track-marquee{
  display:inline-flex;
  align-items:center;
  gap:16px;
  min-width:max-content;
  will-change:transform;
}
.radio-track-marquee-copy,
.radio-track-marquee-separator{
  flex:0 0 auto;
}
.radio-track-meta:not(.is-scrolling) .radio-track-marquee{
  min-width:100%;
  justify-content:center;
}
.radio-track-meta:not(.is-scrolling) .radio-track-marquee-separator,
.radio-track-meta:not(.is-scrolling) #radioTrackMarqueeDuplicate{
  display:none;
}
.radio-track-meta.is-scrolling .radio-track-marquee{
  animation:radioTrackMarquee var(--radio-marquee-duration, 16s) linear infinite;
}
@keyframes radioTrackMarquee{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--radio-marquee-shift, 0px)))}
}
.radio-volume-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:6px;
  margin-bottom:7px;
}
.radio-volume-label,
.radio-volume-readout{
  font-family:"Press Start 2P", monospace;
  font-size:8px;
  color:#efe6cd;
}
.radio-volume-readout{
  min-width:38px;
  text-align:right;
  color:#7bd4ff;
}
.radio-volume-slider{
  width:100%;
  margin:0;
  accent-color:#7bd4ff;
}
.radio-control-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) repeat(3, minmax(0, .72fr));
  gap:5px;
}
.radio-power-btn{
  min-width:0;
  min-height:52px;
  padding:7px 5px;
  gap:2px;
  background:linear-gradient(180deg,#493e8e,#251d59);
}
.radio-power-btn .power-glyph{
  font-size:15px;
}
.radio-power-btn.is-on{
  background:linear-gradient(180deg,#6f4ca3,#39236f);
}
.radio-power-btn.is-on .power-glyph{
  color:#f0ca58;
  text-shadow:0 0 10px rgba(240,202,88,.45);
}
.control-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.control-icon svg{
  display:block;
  width:100%;
  height:100%;
  shape-rendering:crispEdges;
}
.control-sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}
.radio-mini-btn{
  position:relative;
  min-height:52px;
  padding:6px 4px;
  gap:3px;
  flex-direction:column;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.08)),
    linear-gradient(180deg,#485fd0,#2a2f73);
}
.radio-mini-btn.menu-link-btn--accent{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.08)),
    linear-gradient(180deg,#8b6d28,#5b4211);
}
.radio-nav-btn{
  padding:5px 3px;
}
.radio-nav-label{
  font-size:7px;
  line-height:1.1;
  letter-spacing:.05em;
  color:#eef3ff;
}
.radio-nav-btn:hover .radio-nav-label,
.radio-nav-btn:focus-visible .radio-nav-label{
  color:#fff4ba;
}
.triangle-control{
  width:24px;
  height:24px;
  filter:drop-shadow(0 2px 0 rgba(9,7,24,.45));
}
.triangle-control path{
  fill:#f4f5ff;
}
.radio-nav-btn:hover .triangle-control path,
.radio-nav-btn:focus-visible .triangle-control path{
  fill:#fff4ba;
}
.radio-loop-btn{
  gap:2px;
  flex-direction:column;
}
.loop-control-icon{
  width:22px;
  height:22px;
  filter:drop-shadow(0 2px 0 rgba(9,7,24,.45));
}
.loop-control-icon .loop-icon-path{
  fill:none;
  stroke:#fff3cd;
  stroke-width:2.25;
  stroke-linecap:square;
  stroke-linejoin:miter;
}
.radio-icon-label{
  font-family:"Press Start 2P", monospace;
  font-size:7px;
  line-height:1;
  letter-spacing:.08em;
  color:#fff3cd;
}
@media (max-width:560px){
  .tv-control-row{
    grid-template-columns:minmax(0, 1fr) 42px minmax(0, .96fr);
    gap:5px;
  }
  .radio-console-head{flex-direction:column}
  .radio-track-meta{max-width:none;width:100%}
  .radio-control-grid{grid-template-columns:minmax(0,1.02fr) repeat(3,minmax(0,.68fr))}
}
.tv-power-btn{
  min-width:80px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:3px;
  background:linear-gradient(180deg,#3e3a70,#201b46);
  color:#d6d1ef;
  padding:7px 4px;
  font-size:9px;
  line-height:1.35;
  letter-spacing:.05em;
}
.tv-control-icon{
  width:24px;
  height:24px;
  filter:drop-shadow(0 2px 0 rgba(9,7,24,.45));
}
.tv-control-icon .tv-icon-shell,
.tv-control-icon .tv-icon-foot,
.tv-control-icon .tv-icon-antenna{
  fill:#c4c8d8;
}
.tv-control-icon .tv-icon-screen{
  fill:#232a40;
}
.tv-control-icon .tv-icon-led{
  fill:#6f6478;
}
.tv-power-btn.is-on{
  background:linear-gradient(180deg,#3b7a64,#21483d);
  color:#eef9ea;
  box-shadow:inset 0 0 0 2px rgba(178,255,201,.18);
}
.tv-power-btn.is-on .tv-control-icon .tv-icon-shell,
.tv-power-btn.is-on .tv-control-icon .tv-icon-foot,
.tv-power-btn.is-on .tv-control-icon .tv-icon-antenna{
  fill:#d7f6dc;
}
.tv-power-btn.is-on .tv-control-icon .tv-icon-screen{
  fill:#8cffb0;
}
.tv-power-btn.is-on .tv-control-icon .tv-icon-led{
  fill:#fff4a8;
}
.tv-playback-btn{
  flex:0 0 auto;
  min-width:46px;
  width:46px;
  padding:0;
  gap:0;
}
.tv-playback-btn .tv-control-icon{
  width:20px;
  height:20px;
}
.tv-playback-icon .tv-playback-shape{
  fill:#fff0bd;
}
.tv-playback-btn .tv-pause-shape{
  display:none;
}
.tv-playback-btn.is-on .tv-play-shape{
  display:none;
}
.tv-playback-btn.is-on .tv-pause-shape{
  display:block;
}
.tv-playback-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  filter:none;
}
.menu-link-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  width:100%;
  text-align:center;
  text-decoration:none;
  appearance:none;
  border:3px solid #0f0b26;
  background:linear-gradient(180deg,#4a3d9e,#2a2164);
  color:var(--ink);
  padding:8px 7px;
  font:700 11px "Courier New", monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:inset 0 0 0 2px rgba(145,131,255,.2);
}
.menu-link-btn--grow{flex:1 1 auto}
.app-fullscreen-btn{
  position:relative;
  z-index:4;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  padding:0;
  appearance:none;
  border:3px solid #0f0b26;
  background:linear-gradient(180deg,#4a3d9e,#2a2164);
  color:var(--ink);
  cursor:pointer;
  box-shadow:
    inset 0 0 0 2px rgba(145,131,255,.2),
    0 8px 18px rgba(0,0,0,.34);
}
.app-fullscreen-symbol{
  display:block;
  width:20px;
  height:20px;
  overflow:visible;
  transform:scale(1);
  transform-origin:center;
  transition:transform .16s ease;
}
.app-fullscreen-symbol path{
  fill:none;
  stroke:currentColor;
  stroke-width:2.5;
  stroke-linecap:square;
  stroke-linejoin:miter;
  vector-effect:non-scaling-stroke;
}
.app-fullscreen-btn.is-active{
  background:linear-gradient(180deg,#2f7f69,#1c4d43);
  color:#eef9ea;
  box-shadow:
    inset 0 0 0 2px rgba(178,255,201,.18),
    0 8px 18px rgba(0,0,0,.34);
}
.app-fullscreen-btn.is-active .app-fullscreen-symbol{
  transform:scale(1.5);
}
.intro-overlay{
  position:fixed;
  inset:0;
  z-index:10060;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.intro-overlay[hidden]{display:none!important}
.intro-overlay-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,4,11,.72);
  backdrop-filter:blur(4px);
}
.intro-modal{
  position:relative;
  z-index:1;
  width:min(100%, 438px);
  padding:14px 14px 15px;
  display:grid;
  gap:12px;
}
.intro-logo-lockup{
  position:relative;
  z-index:1;
  min-height:112px;
  align-items:flex-start;
}
.intro-logo-avatar-frame{
  right:0;
  top:-20px;
  width:130px;
  height:130px;
  z-index:0;
}
.intro-logo-copy{
  position:relative;
  z-index:2;
  padding:6px 96px 2px 0;
}
.intro-modal .logo-kicker{
  margin-bottom:7px;
  font-size:10px;
}
.intro-title{
  font-size:24px;
  line-height:1.05;
}
.intro-link-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.intro-link-btn{
  min-height:42px;
}
.intro-enter-btn{
  min-height:54px;
  font-size:13px;
  letter-spacing:.18em;
}
.tv-volume-row{
  margin-top:0;
  margin-bottom:0;
}
.large-view-btn{
  min-height:46px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(0,0,0,.06)),
    linear-gradient(180deg,#5c53b5,#2a2164);
}
.media-panel .panel-link-grid,
.support-panel .panel-link-grid,
.legal-panel .panel-link-grid{
  margin-top:10px;
}
.panel-link-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.panel-link-grid--single{grid-template-columns:1fr}
.menu-link-btn:hover,
.menu-link-btn:focus-visible,
button:hover,
button:focus-visible{
  outline:none;
  transform:translateY(-1px);
  filter:brightness(1.06);
}
button:disabled,
.menu-link-btn:disabled{
  cursor:not-allowed;
  opacity:.54;
  filter:saturate(.6);
  transform:none;
}
.menu-link-btn--accent{
  background:linear-gradient(180deg,#8b6d28,#5b4211);
  color:#fff3cd;
  box-shadow:inset 0 0 0 2px rgba(255,226,154,.28);
}
.menu-link-btn--secondary{
  background:linear-gradient(180deg,#4568b3,#2b3f7e);
}
.menu-link-btn--support{
  background:linear-gradient(180deg,#2f7f69,#1c4d43);
}
.tv-now-row{
  display:grid;
  gap:4px;
  padding:8px 9px;
  margin-bottom:8px;
  border:3px solid #0f0b26;
  background:linear-gradient(180deg,#342b7b,#241d5b);
  box-shadow:inset 0 0 0 2px rgba(145,131,255,.16);
}
.tv-now-row[hidden]{display:none!important}
.tv-now-label{
  color:#b8b0e8;
  font-size:8px;
  line-height:1.45;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#tvTrailerTitle{
  display:block;
  min-width:0;
  max-width:100%;
  color:var(--gold);
  font-size:9px;
  line-height:1.55;
  letter-spacing:.02em;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.web-support-panel{display:grid;gap:10px}
.support-copy-block{display:grid;gap:7px}
.support-copy-heading{
  margin:0;
  color:#efe5cf;
  font-size:12px;
  line-height:1.4;
}
body.modal-open{overflow:hidden}
@media (max-width:980px){
  body{overflow:auto}
  .app-shell{
    grid-template-columns:1fr;
    grid-template-areas:'scene' 'sidebar';
    gap:10px;
  }
  .scene-pane{min-height:auto}
  .side-pane{
    max-height:none;
    overflow:visible;
  }
  .intro-modal{padding:13px 12px 14px}
  .intro-logo-lockup{min-height:98px}
  .intro-logo-avatar-frame{
    width:104px;
    height:104px;
    top:-12px;
    right:0;
  }
  .intro-logo-copy{padding-right:82px}
  .intro-title{font-size:20px}
  .scene-stage{
    width:min(100%, calc((100vh - 110px) * 1.212));
    max-height:none;
  }
  #scene{max-height:none}
}

.waypoint-panel{padding:0}
.waypoint-panel[hidden]{display:none!important}
.waypoint-details{display:block}
.waypoint-details summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 14px 12px;
}
.waypoint-details summary::-webkit-details-marker{display:none}
.waypoint-details summary::after{
  content:'▾';
  color:var(--gold);
  font-size:18px;
  line-height:1;
}
.waypoint-details:not([open]) summary::after{content:'▸'}
.waypoint-summary-copy{
  color:#d9cfaf;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:right;
}
.waypoint-panel-body{
  border-top:3px solid #0f0b26;
  padding:0 14px 14px;
}
.waypoint-panel-note{
  margin:0;
  padding-top:12px;
  color:#f2ead8;
  line-height:1.5;
  font-size:14px;
}
.waypoint-route-box{
  margin-top:12px;
  padding:10px 12px;
  border:3px solid #0f0b26;
  background:linear-gradient(180deg,#342b7b,#241d5b);
  box-shadow:inset 0 0 0 2px rgba(145,131,255,.16);
}
.waypoint-mini-title{
  color:#b8b0e8;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.waypoint-route-list{
  color:var(--gold);
  font-size:13px;
  line-height:1.5;
  word-break:break-word;
}
.waypoint-text-input,
.waypoint-field input,
.waypoint-field select{
  width:100%;
  appearance:none;
  border:3px solid #0f0b26;
  background:linear-gradient(180deg,#16123a,#0d0a25);
  background-color:#0d0a25;
  color:var(--ink);
  padding:9px 10px;
  font:700 13px "Courier New", monospace;
  box-shadow:inset 0 0 0 2px rgba(145,131,255,.12);
  color-scheme:dark;
}
.waypoint-field select{
  background-image:linear-gradient(180deg,#16123a,#0d0a25)!important;
}
.waypoint-field select option,
.waypoint-field select optgroup{
  background:#0d0a25!important;
  color:var(--ink)!important;
}
.waypoint-text-input{margin-top:8px}
.waypoint-editor-box{
  margin-top:12px;
  padding:10px 12px 12px;
  border:3px solid #0f0b26;
  background:linear-gradient(180deg,#342b7b,#241d5b);
  box-shadow:inset 0 0 0 2px rgba(145,131,255,.16);
}
.waypoint-selected-name{
  color:var(--gold);
  font-size:20px;
  line-height:1.1;
  margin-top:6px;
  word-break:break-word;
}
.waypoint-editor-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.waypoint-field{
  display:grid;
  gap:6px;
}
.waypoint-field span{
  color:#d9cfaf;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.waypoint-checkbox{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  color:#efe6cd;
  font-size:13px;
  line-height:1.4;
}
.waypoint-checkbox input{
  width:18px;
  height:18px;
  accent-color:#f0ca58;
}
.waypoint-editor-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.waypoint-save-state{
  margin-top:10px;
  color:#efe6cd;
  font-size:12px;
  line-height:1.5;
}
.waypoint-save-state.is-error{color:#ffb2b2}
.waypoint-save-state.is-success{color:#b9ffbe}
.waypoint-list{display:grid;gap:10px;margin-top:12px}
.waypoint-item{
  padding:10px 12px 11px;
  border:3px solid #0f0b26;
  background:linear-gradient(180deg,#342b7b,#241d5b);
  box-shadow:inset 0 0 0 2px rgba(145,131,255,.16);
}
.waypoint-item.is-selected{
  background:linear-gradient(180deg,#8b6d28,#5b4211);
  color:#fff3cd;
  box-shadow:inset 0 0 0 2px rgba(255,226,154,.28);
}
.waypoint-item-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px;
}
.waypoint-item-name{
  font-size:15px;
  letter-spacing:.04em;
}
.waypoint-item-state{
  font-size:11px;
  letter-spacing:.12em;
  color:#d2c8ff;
}
.waypoint-item.is-selected .waypoint-item-state{color:#fff1bf}
.waypoint-item-meta,
.waypoint-item-links{
  display:block;
  font-size:12px;
  line-height:1.45;
  color:#efe6cd;
}
.waypoint-item-links{margin-top:4px;color:#cfc2a9}
.waypoint-item-action{margin-top:8px}
.waypoint-item-action button{width:100%}
@media (max-width:520px){
  .waypoint-editor-grid{grid-template-columns:1fr}
}


.scene-stage{
  position:relative;
  width:min(100%, calc((100vh - 44px) * 1.212));
  max-width:100%;
  max-height:calc((100vh - 44px));
  aspect-ratio:320 / 264;
  background:#0a081c;
  overflow:hidden;
}
.scene-stage.is-loading canvas,
.scene-stage.is-loading .tv-screen,
.scene-stage.is-loading .rain-layer,
.scene-stage.is-loading .rain-cover-layer,
.scene-stage.is-loading .weather-flash-layer,
.scene-stage.is-loading .radio-sprite-btn,
.scene-stage.is-loading .gallery-sprite-btn{
  opacity:0;
}
.scene-stage canvas,
.scene-stage .tv-screen,
.scene-stage .rain-layer,
.scene-stage .rain-cover-layer,
.scene-stage .weather-flash-layer,
.scene-stage .radio-sprite-btn,
.scene-stage .gallery-sprite-btn{
  transition:opacity .2s ease;
}
.scene-loading{
  position:absolute;
  inset:0;
  z-index:12;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:
    linear-gradient(180deg, rgba(6,5,15,.88), rgba(22,19,50,.94)),
    radial-gradient(circle at 50% 35%, rgba(123,212,255,.12), rgba(0,0,0,0) 34%);
  transition:opacity .28s ease, visibility .28s ease;
}
.scene-stage.is-ready .scene-loading{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.scene-loading-card{
  width:min(100%, 260px);
  padding:16px 14px 14px;
  background:linear-gradient(180deg, rgba(59,53,121,.95), rgba(25,21,60,.98));
  border:4px solid var(--line);
  box-shadow:
    inset 0 0 0 2px rgba(160,151,255,.16),
    inset 0 0 0 4px rgba(10,8,28,.9),
    0 0 0 2px rgba(140,133,216,.15),
    0 12px 28px rgba(0,0,0,.34);
}
.scene-loading-kicker,
.scene-loading-title,
.scene-loading-text{
  font-family:"Press Start 2P", monospace;
  text-transform:uppercase;
}
.scene-loading-kicker{
  font-size:10px;
  color:#b8adff;
  margin-bottom:10px;
}
.scene-loading-title{
  font-size:16px;
  line-height:1.4;
  color:#fff1bf;
  margin-bottom:14px;
}
.scene-loading-bar{
  height:18px;
  padding:3px;
  border:3px solid #0d0b1d;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, rgba(0,0,0,0) 1px 8px),
    linear-gradient(180deg,#151138,#0d0a25);
  box-shadow:inset 0 0 0 2px rgba(160,151,255,.15);
}
.scene-loading-bar i{
  display:block;
  width:0%;
  height:100%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, rgba(0,0,0,0) 1px 8px),
    repeating-linear-gradient(90deg, #f0ca58 0 8px, #b88822 8px 16px);
  box-shadow:0 0 10px rgba(240,202,88,.14);
}
.scene-loading-text{
  margin-top:10px;
  font-size:9px;
  line-height:1.6;
  color:#efe6cd;
}
.tv-screen{
  position:absolute;
  left:0;
  top:0;
  z-index:1;
  overflow:hidden;
  background:#050505;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  pointer-events:none;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
.rain-layer{
  position:absolute;
  inset:0;
  z-index:3;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
}
.rain-layer.is-hidden{
  opacity:0;
  visibility:hidden;
}
.rain-layer-media{
  position:absolute;
  display:block;
  object-fit:fill;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  pointer-events:none;
  user-select:none;
  mix-blend-mode:screen;
  background:transparent;
}
.rain-layer-media.is-hidden{
  display:none;
}
.rain-cover-layer{
  position:absolute;
  inset:0;
  z-index:4;
  overflow:hidden;
  pointer-events:none;
  opacity:1;
}
.rain-cover-layer.is-hidden{
  opacity:0;
  visibility:hidden;
}
.rain-cover-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:fill;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  pointer-events:none;
  user-select:none;
}
.weather-flash-layer{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:rgba(255,255,255,1);
  opacity:0;
  mix-blend-mode:screen;
  transition:none;
}
.weather-flash-layer.is-hidden{
  opacity:0;
  visibility:hidden;
}
.tv-content{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  transform-origin:0 0;
  will-change:transform;
}
.radio-sprite-btn{
  position:absolute;
  left:0;
  top:0;
  z-index:6;
  padding:0;
  margin:0;
  min-width:0;
  min-height:0;
  width:16px;
  height:9px;
  border:0;
  background:transparent;
  box-shadow:none;
  appearance:none;
  pointer-events:none;
  cursor:default;
  opacity:0;
  visibility:hidden;
}
.radio-sprite-btn:hover,
.radio-sprite-btn:focus-visible{
  border:0;
  background:transparent;
  box-shadow:0 0 0 1px rgba(255,255,255,.22);
  outline:none;
}
.radio-sprite-btn.is-hidden{display:none}
.radio-sprite-btn.is-playing{
  animation:radioWobble .23s steps(2,end) infinite alternate;
  transform-origin:50% 85%;
}
.radio-sprite-img{
  display:block;
  width:100%;
  height:100%;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  pointer-events:none;
}
@keyframes radioWobble{
  0%{transform:translate3d(0,0,0) rotate(-2deg)}
  50%{transform:translate3d(0,-1px,0) rotate(0deg)}
  100%{transform:translate3d(1px,0,0) rotate(2deg)}
}
.tv-screen.is-hidden{display:none}
.tv-screen.is-layer-behind{z-index:1}
.tv-screen.is-layer-front{z-index:5}
.tv-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  pointer-events:none;
  background:#050505;
}
.tv-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 45%, rgba(90,120,255,.18), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.16)),
    #050505;
}
.logic-panel{padding:0}
.waypoint-field--wide{grid-column:1 / -1}


body.modal-open{
  overflow:hidden;
}
.snes-modal{
  position:fixed;
  inset:0;
  z-index:50;
  display:grid;
  place-items:center;
  padding:20px;
}
.snes-modal[hidden]{display:none!important}
.snes-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(7,6,18,.78);
  backdrop-filter:blur(4px);
}
.snes-modal-card{
  position:relative;
  z-index:1;
  width:min(100%, 820px);
  max-height:min(88vh, 900px);
  overflow:auto;
  background:
    linear-gradient(180deg, rgba(119,108,219,.22), rgba(40,32,96,.96)),
    linear-gradient(180deg, #2c2466, #1b1544);
  border:4px solid var(--line);
  box-shadow:
    inset 0 0 0 2px rgba(138,120,255,.18),
    inset 0 0 0 4px rgba(12,8,36,.85),
    0 0 0 2px rgba(119,108,219,.18),
    0 22px 50px rgba(0,0,0,.5);
}
.snes-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:18px 18px 14px;
  border-bottom:4px solid #0f0b26;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.12));
}
.snes-modal-header > :first-child{
  min-width:0;
}
.snes-modal-header h2{
  margin:4px 0 0;
  font-size:clamp(18px,3vw,26px);
  line-height:1.2;
  letter-spacing:0;
  text-shadow:3px 3px 0 #120f2e;
}
.snes-modal-body{
  padding:18px;
}
.modal-copy{
  margin:0 0 16px;
  color:#f2ead8;
  line-height:1.55;
}
.modal-close-btn{
  width:46px;
  min-width:46px;
  height:46px;
  min-height:46px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 46px;
  align-self:flex-start;
  margin-left:auto;
  font:700 24px/1 "Segoe UI Symbol", "Arial Unicode MS", "Noto Sans Symbols 2", Arial, sans-serif;
  letter-spacing:0;
  text-transform:none;
}
.cat-modal-card{
  width:min(100%, 460px);
}
.cat-modal-canvas{
  width:min(100%, 300px);
  height:auto;
  display:block;
  margin:0 auto;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  border:4px solid #0f0b26;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.06)),
    linear-gradient(180deg,#c9cad6,#9da0b7);
  box-shadow:0 0 0 2px #5447aa, inset 0 0 0 2px #0b0719;
}
.legal-copy p{
  margin:0 0 14px;
  color:#f2ead8;
  line-height:1.65;
}
.legal-copy p:last-child{
  margin-bottom:0;
}
.legal-copy a{
  color:var(--cyan);
}
.legal-copy section + section{
  margin-top:18px;
}
.legal-copy h3{
  margin:0 0 10px;
  color:var(--gold);
  font-family:"Press Start 2P", monospace;
  font-size:12px;
  line-height:1.6;
  text-transform:uppercase;
}
.legal-copy ul{
  margin:0 0 14px 18px;
  padding:0;
}
.legal-copy li{
  margin:0 0 8px;
  color:#f2ead8;
  line-height:1.65;
}
.legal-copy strong{
  color:#fff1bf;
}
@media (max-width:520px){
  .logo-lockup{
    min-height:100px;
  }
  .logo-avatar-frame{
    width:120px;
    height:120px;
    top:-4px;
    right:10px;
  }
  .logo-copy{
    padding-top:16px;
    padding-right:10px;
  }
  h1{
    font-size:22px;
  }
}

@media (max-width:680px){
  .panel-link-grid{
    grid-template-columns:1fr;
  }
  .snes-modal{
    padding:12px;
  }
  .snes-modal-header{
    gap:10px;
  }
}


.gallery-panel-copy{
  margin:0;
  line-height:1.48;
  color:#efe5cf;
  font-size:12px;
}
.gallery-panel-copy code{font-size:11px}
.gallery-sprite-btn,
.radio-sprite-btn{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.gallery-sprite-btn{
  position:absolute;
  z-index:6;
  display:block;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.gallery-sprite-btn.is-hidden{display:none}
.gallery-sprite-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.45));
}
[hidden]{display:none!important}
.gallery-modal-card{
  width:min(88vw, calc(88vh - 32px), 700px);
  max-width:min(88vw, calc(88vh - 32px), 700px);
  max-height:calc(100vh - 20px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.gallery-modal-body{
  min-height:0;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  align-items:center;
  gap:12px;
  padding:14px 16px 16px;
}
.gallery-stage{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.gallery-media-frame{
  position:relative;
  width:min(100%, 560px);
  aspect-ratio:1/1;
  display:block;
  box-sizing:border-box;
  background:linear-gradient(180deg,#1a163f,#0b091d);
  border:4px solid #0d0a1f;
  box-shadow:inset 0 0 0 2px rgba(115,100,220,.18), inset 0 -2px 0 rgba(0,0,0,.36);
  overflow:hidden;
}
.gallery-modal-image{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  image-rendering:auto;
  background:transparent;
  opacity:0;
  transition:opacity .42s ease-in-out;
  will-change:opacity;
  pointer-events:none;
}
.gallery-modal-image.is-active{
  opacity:1;
}
.gallery-empty-state{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.6;
  color:#efe5cf;
  padding:24px;
  background:linear-gradient(180deg,#1a163f,#0b091d);
}
.gallery-modal-image[hidden],
.gallery-empty-state[hidden]{display:none!important}
.gallery-footer-row{
  width:min(100%, 560px);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px 12px;
  flex-wrap:wrap;
}
.gallery-controls-row{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:8px;
  flex:1 1 420px;
  min-width:0;
}
.gallery-control-btn,
.gallery-seconds-control,
.gallery-step-btn{
  border:4px solid #120f2e;
  background:linear-gradient(180deg,#40378e,#251e5d);
  box-shadow:inset 0 0 0 2px rgba(145,131,255,.16);
  color:var(--ink);
  font:inherit;
}
.gallery-control-btn,
.gallery-seconds-control{
  min-height:46px;
  padding:7px 12px;
}
.gallery-control-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  white-space:nowrap;
  flex:1 1 152px;
}
.gallery-control-btn.is-active,
.gallery-control-btn[aria-pressed="true"]{
  background:linear-gradient(180deg,#5d53bd,#31286e);
}
.gallery-control-symbol{
  font-size:15px;
  line-height:1;
}
.gallery-seconds-control{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  flex:0 1 auto;
}
.gallery-step-btn{
  min-width:30px;
  width:30px;
  min-height:30px;
  height:30px;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  flex:0 0 auto;
}
.gallery-seconds-value{
  min-width:3.5ch;
  text-align:center;
  font-family:"Press Start 2P", "Courier New", monospace;
  font-size:10px;
}
.gallery-counter-row{
  flex:0 0 auto;
  min-width:72px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  color:#efe5cf;
  font-size:12px;
  line-height:1;
  padding:0 2px 3px;
}
.gallery-nav-btn{
  align-self:center;
  width:44px;
  min-width:44px;
  height:140px;
  border:4px solid #120f2e;
  background:linear-gradient(180deg,#40378e,#251e5d);
  color:var(--ink);
  font:inherit;
  font-size:28px;
  cursor:pointer;
  box-shadow:inset 0 0 0 2px rgba(145,131,255,.16);
}
.gallery-nav-btn:disabled,
.gallery-control-btn:disabled,
.gallery-step-btn:disabled{opacity:.45;cursor:default}
@media (max-width: 900px){
  .gallery-modal-card{
    width:min(94vw, calc(100vh - 24px), 620px);
    max-width:min(94vw, calc(100vh - 24px), 620px);
    max-height:calc(100vh - 14px);
  }
  .gallery-modal-body{
    grid-template-columns:1fr;
    gap:10px;
  }
  .gallery-nav-btn{
    width:100%;
    height:48px;
    align-self:auto;
  }
  .gallery-stage{
    min-height:0;
  }
  .gallery-footer-row{
    align-items:stretch;
  }
  .gallery-controls-row{
    flex-basis:100%;
  }
  .gallery-seconds-control{
    flex:1 1 100%;
  }
  .gallery-counter-row{
    width:100%;
    justify-content:flex-end;
    padding-top:2px;
  }
}
@media (max-height: 820px){
  .gallery-modal-card{
    width:min(90vw, calc(84vh - 16px), 640px);
    max-width:min(90vw, calc(84vh - 16px), 640px);
    max-height:calc(100vh - 10px);
  }
  .gallery-modal-body{
    gap:10px;
    padding:12px;
  }
  .gallery-stage{
    gap:7px;
  }
  .gallery-control-btn,
  .gallery-seconds-control{
    min-height:40px;
    padding:6px 10px;
  }
  .gallery-step-btn{
    min-width:28px;
    width:28px;
    min-height:28px;
    height:28px;
  }
  .gallery-nav-btn{
    height:112px;
  }
}


@media (max-width: 900px){
  .gallery-modal-card{
    width:min(94vw, 620px);
    max-width:min(94vw, 620px);
    max-height:calc(100svh - 12px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  .gallery-modal-card .snes-modal-header{
    position:sticky;
    top:0;
    z-index:2;
    flex-direction:row;
    align-items:flex-start;
    padding:14px 14px 12px;
  }
  .gallery-modal-card .modal-close-btn{
    align-self:flex-start;
    margin-left:auto;
  }
  .gallery-modal-card .tinyline{
    margin-bottom:2px;
  }
  .gallery-modal-body{
    grid-template-columns:repeat(2, minmax(0,1fr));
    grid-template-areas:
      "stage stage"
      "prev next";
    align-items:stretch;
    gap:10px;
    padding:10px 12px 12px;
  }
  .gallery-stage{
    grid-area:stage;
  }
  .gallery-media-frame{
    width:min(100%, clamp(220px, calc(100svh - 340px), 560px));
  }
  .gallery-footer-row{
    gap:8px;
  }
  .gallery-controls-row{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:8px;
    flex:1 1 100%;
  }
  .gallery-control-btn,
  .gallery-seconds-control{
    min-height:42px;
    padding:6px 10px;
  }
  .gallery-control-btn{
    width:100%;
    min-width:0;
    flex:none;
  }
  .gallery-seconds-control{
    grid-column:1 / -1;
    width:100%;
    min-width:0;
    justify-content:space-between;
    flex:none;
  }
  .gallery-counter-row{
    width:100%;
    justify-content:center;
    padding:0;
  }
  .gallery-nav-btn--prev{
    grid-area:prev;
  }
  .gallery-nav-btn--next{
    grid-area:next;
  }
  .gallery-nav-btn{
    width:100%;
    min-width:0;
    height:44px;
    min-height:44px;
    align-self:stretch;
    font-size:24px;
  }
}

@media (max-width: 520px){
  .gallery-modal-card .snes-modal-header h2{
    font-size:clamp(16px, 5.8vw, 22px);
  }
  .gallery-modal-card .modal-close-btn{
    width:42px;
    min-width:42px;
    height:42px;
    min-height:42px;
    flex-basis:42px;
  }
  .gallery-media-frame{
    width:min(100%, clamp(210px, calc(100svh - 330px), 520px));
  }
  .gallery-controls-row{
    grid-template-columns:1fr;
  }
  .gallery-control-btn,
  .gallery-seconds-control,
  .gallery-nav-btn{
    font-size:12px;
  }
}