.memory-browser { display: none; }
.mobile-desktop-note { display: none; }
.memory-dock { display: none; }

  body.memory-active { overflow: hidden; }
  body.memory-active .site-header, body.memory-active .player-shell { visibility: hidden; }
  body.memory-active .memory-browser { display: block; }
  .memory-browser { position: fixed; inset: var(--site-stage-top) 0 var(--site-stage-bottom); z-index: 100; background: #000; }
  .memory-display { position: absolute; width: min(100vw, calc(var(--site-stage-height) * 4 / 3)); aspect-ratio: 4 / 3; inset: 50% auto auto 50%; transform: translate(-50%,-50%); }
  #memory-canvas { display: block; width: 100%; height: 100%; }
  .memory-objects { position: absolute; inset: 0; }
  .memory-object { position: absolute; top: 28%; width: 21%; height: 27%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 0; color: transparent; }
  .memory-browser .memory-object:hover:not(:disabled),
  .memory-browser .memory-object:active { background: transparent; box-shadow: none; }
  .memory-object:focus-visible { outline: 1px dotted #fff9; outline-offset: 4px; }
  .memory-object[data-memory-item="0"] { left: 5.25%; }
  .memory-object[data-memory-item="1"] { left: 28.1%; }
  .memory-object[data-memory-item="2"] { left: 50.9%; }
  .memory-object[data-memory-item="3"] { left: 73.75%; }
  .memory-command { position: absolute; bottom: 3%; height: 10%; border: 0; padding: 0; border-radius: 0; color: transparent; font-size: 0; background: transparent; box-shadow: none; }
  .memory-browser .memory-command:hover:not(:disabled),
  .memory-browser .memory-command:active { background: transparent; box-shadow: none; }
  #memory-enter { left: 29%; width: 20%; }
  #memory-back { left: 51%; width: 19%; }
  #memory-options { left: 74%; width: 24%; }
.memory-dock { display: none; }

#about-dialog { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#000; color:#eee; }
#about-dialog::backdrop { background:#000; }
.about-display { box-sizing:border-box; position:absolute; width:min(100vw,133.333333dvh); aspect-ratio:4/3; left:50%; top:50%; transform:translate(-50%,-50%); padding:4.2% 5%; display:flex; flex-direction:column; background:repeating-linear-gradient(135deg,#ffffff03 0 1px,transparent 1px 4px),linear-gradient(135deg,#8f9088,#66685c); font-family:Helvetica,Arial,sans-serif; text-shadow:1px 1px 2px #10120b; }
.about-display h2 { margin:0 0 5%; color:#eeeb76; font-size:clamp(22px,3.5vw,36px); font-weight:400; font-family:inherit; }
.about-copy { flex:1; min-height:0; overflow:auto; font-size:clamp(13px,2.2vw,20px); line-height:1.4; }
.about-copy p { margin:0 0 .9em; }
#about-back { align-self:flex-end; flex:none; border:0; border-radius:0; padding:8px 0 0 16px; background:transparent; box-shadow:none; color:#eee; font:400 clamp(18px,3vw,28px) Helvetica,Arial,sans-serif; text-shadow:1px 1px 2px #10120b; }
#about-back:hover:not(:disabled) { background:transparent; color:#eeeb76; }
#about-back span { color:#ee938a; }

/* Desktop gameplay fills the viewport with a clean 4:3 canvas. */
.game-settings { display:none; }
@media (min-width: 760px) and (pointer: fine) {
  body:not(.memory-active):not(.demo-active) .game-settings { display:grid; place-items:center; position:fixed; right:12px; bottom:calc(var(--danger-banner-height) + 12px); z-index:90; width:64px; height:64px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; opacity:.85; }
  #game-settings-canvas { display:block; width:64px; height:64px; image-rendering:pixelated; pointer-events:none; filter:drop-shadow(0 2px 3px #000b); }
  body:not(.memory-active):not(.demo-active) .game-settings:hover:not(:disabled),
  body:not(.memory-active):not(.demo-active) .game-settings:focus-visible { opacity:1; background:transparent; }
  body:not(.memory-active) { overflow: hidden; }
  body:not(.memory-active) .site-header,
  body:not(.memory-active) .player-footer,
  body:not(.memory-active) .loading-panel { display: none; }
  body:not(.memory-active) .player-shell { position: fixed; width: min(100vw, calc(var(--site-stage-height) * 4 / 3)); margin: 0; padding: 0; left: 50%; top: calc(var(--site-stage-top) + var(--site-stage-height) / 2); transform: translate(-50%, -50%); }
  body:not(.memory-active) .game-frame { border: 0; border-radius: 0; padding: 0; background: #000; box-shadow: none; }
  body:not(.memory-active) #game { width: 100%; aspect-ratio: 4 / 3; background: #000; outline: none; }
  body:not(.memory-active) .demo-screen { inset: 0; width: 100%; height: 100%; border-radius: 0; }
}

.game-loading-label { position: absolute; inset: auto 0 8%; display: block; padding: 14px; color: #fff; font: 600 clamp(16px, 3vw, 24px) Helvetica, Arial, sans-serif; text-align: center; text-shadow: 0 2px 4px #000; background: linear-gradient(transparent, #0009, transparent); pointer-events: none; }
.game-loading-label[hidden] { display: none; }
@media (max-width: 759px), (pointer: coarse) {
  body { --mobile-stage-width: min(calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)), calc((var(--site-stage-height) - 37px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 1.44331)); }
  .mobile-desktop-note { display: block; margin: 0; padding: 10px 12px; background: #000; color: #aaa; font: 12px/1.4 Helvetica, Arial, sans-serif; text-align: center; pointer-events: none; }
  .about-display { width:100%; height:min(90dvh,640px); aspect-ratio:auto; padding:24px 20px; }
  .about-copy { font-size:14px; }
  body.memory-active .memory-browser { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overflow: auto; }
  body.memory-active .memory-display { position: relative; width: min(100%, calc((var(--site-stage-height) - 37px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 1.44331)); flex: none; inset: auto; transform: none; }
  .memory-dock { display: block; width: min(100%, calc((var(--site-stage-height) - 37px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 1.44331)); flex: none; }
  .memory-dock .mobile-controls { display: block; width: 100%; max-width: none; }
  .site-header { display: none; }
  body:not(.memory-active) .player-shell { position: fixed; width: var(--mobile-stage-width); margin: 0; padding: 0; left: 50%; top: calc(var(--site-stage-top) + var(--site-stage-height) / 2); transform: translate(-50%, -50%); }
  body:not(.memory-active) .game-frame { width: 100%; height: auto; display: flex; flex-direction: column; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
  body:not(.memory-active) #game { position: relative; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; flex: none; min-width: 0; min-height: 0; overflow: hidden; }
  body:not(.memory-active) .mobile-controls { width: 100%; max-width: none; flex: none; }
  body:not(.memory-active) .demo-screen { inset: 0 0 auto; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  body:not(.memory-active) .player-footer, body:not(.memory-active) .loading-panel { display: none; }
  #game > .ejs_canvas_parent { position: absolute; inset: 0; width: 100%; height: 100%; }
}
@media (orientation: landscape) and (max-height: 540px) and (max-width: 759px), (orientation: landscape) and (max-height: 540px) and (pointer: coarse) {
  body.memory-active .memory-browser { flex-direction: row; }
  body.memory-active .memory-display { width: 52%; max-width: calc(var(--site-stage-height) * 4 / 3); }
  .memory-dock { width: 48%; max-width: calc(var(--site-stage-height) * 1376 / 954); }
  .memory-dock .mobile-desktop-note, body:not(.memory-active) .mobile-desktop-note { position: absolute; bottom: 0; left: 0; width: 100%; }
  body:not(.memory-active) .player-shell { inset: var(--site-stage-top) 0 var(--site-stage-bottom); width: 100%; height: var(--site-stage-height); transform: none; }
  body:not(.memory-active) .game-frame { height: var(--site-stage-height); flex-direction: row; padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); }
  body:not(.memory-active) #game { width: 52% !important; max-width: calc(var(--site-stage-height) * 4 / 3); }
  body:not(.memory-active) .mobile-controls { width: 48%; max-width: calc(var(--site-stage-height) * 1376 / 954); }
  body:not(.memory-active) .demo-screen { inset: auto auto auto env(safe-area-inset-left); width: 52%; max-width: calc(var(--site-stage-height) * 4 / 3); }
}