.controller-guide { position:fixed; inset:0; margin:0; width:100vw; height:100dvh; max-width:none; max-height:none; box-sizing:border-box; padding:28px 16px 15px; border:0; border-radius:0; background:#000; color:#fff0d1; overflow:auto; text-align:center; font-family:Arial,sans-serif; }
.controller-guide[open] { display:flex; flex-direction:column; align-items:center; }
.controller-guide::backdrop { background:#000; }
.controller-guide header { flex:none; width:min(420px,100%); }
.controller-guide header img { display:block; width:100%; height:auto; }
.controller-guide h2 { margin:0 0 5px; font:bold clamp(32px,4vw,58px)/1.15 Arial,sans-serif; color:#fff0d1; letter-spacing:.01em; text-shadow:3px 4px #32160d; }
.controller-stage { position:relative; width:min(800px,90vw); aspect-ratio:8/5; margin:auto; flex-shrink:0; }
.controller-view, #controller-lines, .controller-actions { position:absolute; inset:0; width:100%; height:100%; }
.controller-view canvas { width:100%; height:100%; display:block; image-rendering:pixelated; }
#controller-lines { pointer-events:none; stroke:#b9b39d; stroke-width:1.7; }
#controller-lines circle { fill:#fff0d1; stroke:#45261a; stroke-width:2; }
.controller-actions { pointer-events:none; }
.controller-actions button { position:absolute; transform:translate(-50%,-50%); pointer-events:auto; padding:0; min-width:46px; height:46px; border:2px solid #b9b39d; border-radius:0; background:#060604; color:#fff0d1; box-shadow:0 5px #2d1c10; font:bold 23px Arial,sans-serif; }
.controller-actions kbd { font:inherit; display:block; padding:5px 10px; white-space:nowrap; }
.controller-actions button.active,.controller-actions button:hover { background:#fff0d1; color:#352318; }
#close-controller-guide { flex:none; width:min(440px,75vw); min-height:66px; border:4px double #c7be8f; border-radius:0; background:#000; color:#fff0d1; font:bold 29px Arial,sans-serif; box-shadow:0 6px #2d1c10; text-shadow:2px 3px #32160d; }
#close-controller-guide:hover { background:#211c12; }
.controller-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.controller-guide button:focus-visible { outline:2px solid #fff0d1; outline-offset:5px; }
@media(max-width:600px) { .controller-guide { padding-top:25px; } .controller-actions button { min-width:30px; height:32px; font-size:15px; } .controller-actions kbd { padding:3px 5px; } #close-controller-guide { min-height:52px; font-size:23px; } }
@media(max-height:580px) { .controller-stage { width:min(620px,70vw); } .controller-guide h2 { font-size:30px; } }

.control-description { position:absolute; top:calc(100% + 9px); left:50%; transform:translateX(-50%); width:max-content; max-width:150px; color:#c9bea5; font:12px/1.3 Arial,sans-serif; text-shadow:1px 2px #241811; pointer-events:none; }
#controller-lines circle.active { fill:#fff; stroke:#f2c876; stroke-width:4; r:7; }
@media(max-width:600px) { .control-description { font-size:9px; max-width:90px; } }

.controller-guide .controller-actions, .controller-guide #controller-lines { opacity:var(--controls-reveal,0); }

/* Keep the interface secondary to the controller. */
.controller-guide h2 { font-size:clamp(28px,3vw,40px); }
#close-controller-guide { width:min(300px,65vw); min-height:46px; border-width:3px; font-size:21px; box-shadow:0 4px #2d1c10; }
.controller-actions button { min-width:36px; height:36px; font-size:18px; }
.controller-actions kbd { padding:4px 8px; }
@media(max-width:600px) {
  #close-controller-guide { width:240px; max-width:65vw; min-height:42px; font-size:19px; }
  .controller-actions button { min-width:28px; height:29px; font-size:14px; }
  .controller-actions kbd { padding:3px 5px; }
}

/* Compact macOS-style action, preserving the black controller screen. */
#close-controller-guide {
  width:160px; min-height:36px; padding:7px 22px;
  border:1px solid #0874e8; border-radius:8px;
  background:linear-gradient(#2990ff,#0877ef); color:#fff;
  font:500 14px/1.4 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  text-shadow:none; box-shadow:0 1px 3px #0005,inset 0 1px 0 #ffffff30;
}
#close-controller-guide:hover { background:linear-gradient(#399aff,#1682f6); }
#close-controller-guide:active { background:#0068d9; box-shadow:inset 0 1px 3px #004fa94d; }
#close-controller-guide:focus-visible { outline:3px solid #69b2ff; outline-offset:3px; }

/* Sculpted ivory keycaps, inspired by a physical desktop keyboard. */
.controller-actions button {
  min-width:42px; height:42px; padding:0;
  border:1px solid #aaa79b; border-radius:6px;
  background:linear-gradient(145deg,#d8d6ca,#aaa79b);
  color:#383933; box-shadow:0 5px 0 #858276,0 7px 9px #0008;
  font:500 19px/1 Arial,sans-serif;
  transition:box-shadow .09s,background .09s;
}
.controller-actions kbd {
  position:relative; display:flex; align-items:center; justify-content:center;
  box-sizing:border-box; min-width:32px; height:32px; margin:3px 4px 7px; padding:0 7px;
  border:1px solid #f6f4e9; border-bottom-color:#cfcdc0; border-radius:5px;
  background:linear-gradient(150deg,#f2f1e8,#dddcd0);
  box-shadow:inset 0 1px 2px #fff9,0 1px 2px #7775;
  text-shadow:0 1px #fff8; font:inherit;
  transition:transform .09s,background .09s;
}
.controller-actions button:hover { background:linear-gradient(145deg,#e2dfd2,#b5b1a4); color:#272923; }
.controller-actions button.active {
  color:#292c25; background:linear-gradient(145deg,#c9c6b8,#999687);
  box-shadow:0 2px 0 #858276,0 3px 4px #0007;
}
.controller-actions button.active kbd {
  transform:translateY(3px); background:linear-gradient(150deg,#e1dfd0,#ccc9b9);
  box-shadow:inset 0 1px 3px #8c887733;
}
@media(max-width:600px) {
  .controller-actions button { min-width:32px; height:32px; font-size:14px; }
  .controller-actions kbd { min-width:24px; height:24px; margin:2px 3px 5px; padding:0 4px; border-radius:4px; }
}

/* Rasterize the sculpted keys at the controller's 1.6x pixel scale. */
.controller-actions button, .controller-actions button:hover, .controller-actions button.active {
  background:transparent; border:0; box-shadow:none;
}
.controller-actions kbd, .controller-actions button.active kbd {
  display:block; height:42px; margin:0; padding:0; border:0; border-radius:0;
  background:none; box-shadow:none; transform:none;
}
.controller-actions .keycap-raster { display:block; width:100%; height:42px; image-rendering:pixelated; }
@media(max-width:600px) {
  .controller-actions kbd, .controller-actions .keycap-raster { height:32px; }
}

/* Extra vertical render space keeps the entrance below the stage unclipped. */
.controller-view canvas { position:absolute; top:-50%; height:200%; pointer-events:none; }

.controller-actions .control-description { font-weight:700; }

#controller-lines line { stroke:#ffffff; }

/* Room for the handheld's portrait shape and its seven button callouts. */
.phone-controller-guide .controller-stage { aspect-ratio:4/3; }

.keybind-hint { position:fixed; right:20px; bottom:max(16px,env(safe-area-inset-bottom)); margin:0; white-space:nowrap; color:#aaa; text-align:right; font:700 12px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif; pointer-events:none; }
.keybind-hint[hidden] { display:none; }