/* The native cabinet and all hit regions keep their original dimensions. */
html[data-imageworld="ready"] #gb-screen { opacity: 0; }
html[data-imageworld="ready"] #lcd-grid { display: none; }
#imageworld-screen {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1; image-rendering: auto;
}
html[data-imageworld="ready"] #screen-well { overflow: hidden; }
html[data-imageworld="ready"] #pause-overlay {
  z-index: 4; background: #0b0b0dcc; animation: none;
}
html[data-imageworld="ready"] #pause-overlay i,
html[data-imageworld="ready"] #pause-hint { display: none; }
html[data-imageworld="ready"] #pause-overlay::after {
  content: 'PAUSED · CLICK OR PRESS P TO RESUME';
  position: absolute; left: 5%; right: 5%; top: 44%; padding: 5% 2%;
  border: 1px solid #aaa9a3; background: #e4e4e0; color: #1b1b1d;
  text-align: center; font: 700 clamp(12px, 1.3vw, 22px)/1.4 "IBM Plex Mono", ui-monospace, monospace;
}
html[data-imageworld="ready"] #pause-overlay[data-recall="true"] {
  background: transparent;
}
html[data-imageworld="ready"] #pause-overlay[data-recall="true"]::before {
  content: ''; position: absolute; left: 42%; top: 38%; width: 16%; height: 24%;
  box-sizing: border-box; border-left: clamp(16px, 3vw, 46px) solid #1b1b1d;
  border-right: clamp(16px, 3vw, 46px) solid #1b1b1d;
  background: #e4e4e0e8; box-shadow: 0 0 0 10px #e4e4e0e8, 0 2px 16px 10px #0005;
}
html[data-imageworld="ready"] #pause-overlay[data-recall="true"]::after {
  content: 'RECALLED · PAUSED'; display: block; top: 67%; left: 22%; right: 22%; padding: 2%;
}
.imageworld-minimap-button {
  position: absolute; z-index: 2; margin: 0; padding: 0; min-width: 44px;
  background: transparent; border: 0; border-radius: 2px; cursor: pointer;
  touch-action: manipulation;
}
/* The same neutral focus treatment as the central canvas controls. */
.imageworld-minimap-button:hover { box-shadow: inset 0 0 0 2px #1b1b1d; }
.imageworld-minimap-button:focus-visible { outline: 3px solid #aaa9a3; outline-offset: -3px; }
.imageworld-map-notice {
  position: absolute; z-index: 3; left: 5%; right: 5%; top: 19%; padding: 3%;
  background: #e4e4e0f5; border: 1px solid #aaa9a3; color: #1b1b1d;
  font: 700 clamp(9px, 1vw, 14px)/1.45 ui-monospace, monospace; text-align: center;
}
/* ROAD NEWS handles: anchors laid over the painted rows (bridge.js places
   them from feed-links.js). The ink underneath is the visible text, so a
   link is transparent until it is hovered or focused. */
.imageworld-feed-links {
  position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0;
  pointer-events: none;
}
.imageworld-feed-link {
  position: absolute; display: block; pointer-events: auto; cursor: pointer;
  border-radius: 2px; touch-action: manipulation;
}
.imageworld-feed-link:hover { box-shadow: inset 0 0 0 2px #1b1b1d; }
.imageworld-feed-link:focus-visible { outline: 3px solid #aaa9a3; outline-offset: -3px; }
.imageworld-minimap-button[hidden], .imageworld-map-notice[hidden], .imageworld-feed-links[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-imageworld="ready"] #pause-overlay { animation: none; }
}

/* Canvas-painted title buttons retain semantic pointer and keyboard targets. */
.imageworld-title-actions { position:absolute; inset:0; z-index:3; pointer-events:none; }
.imageworld-title-button {
  position:absolute; appearance:none; margin:0; padding:0; border:0; border-radius:0;
  background:transparent; color:transparent; pointer-events:auto; cursor:pointer;
  touch-action:manipulation;
}
.imageworld-title-button:hover { box-shadow:inset 0 0 0 1px #aaa9a3; }
.imageworld-title-button:focus-visible { outline:2px solid #1b1b1d; outline-offset:3px; box-shadow:0 0 0 5px #e4e4e0; }
.imageworld-title-actions[hidden] { display:none !important; }


/* Touch actions are native buttons on the screen's white paper. */
.imageworld-touch { position:absolute; inset:0; z-index:4; pointer-events:none; }
.imageworld-touch--dialog { pointer-events:auto; }
.imageworld-touch[hidden], .imageworld-touch [hidden] { display:none !important; }
.imageworld-touch-bar { position:absolute; bottom:1%; left:3%; right:3%; display:flex; background:#e4e4e0; border-top:1px solid #aaa9a3; pointer-events:auto; }
.imageworld-touch button { appearance:none; border:0; border-radius:0; background:transparent; color:#1b1b1d; cursor:pointer; touch-action:manipulation; font:600 clamp(10px,1.1vw,15px)/1.25 "IBM Plex Mono",monospace; text-transform:uppercase; }
.imageworld-touch-bar button { flex:1; min-width:0; min-height:44px; padding:6px 3px; }
.imageworld-touch button:disabled { color:#969691; cursor:default; }
.imageworld-touch button:focus-visible, .imageworld-ticket-input:focus-visible { outline:2px solid #1b1b1d; outline-offset:-2px; }
.imageworld-touch-row { position:absolute; pointer-events:auto; padding:0; }
.imageworld-touch-row[data-touch-action="skip"] { min-width:44px; min-height:44px; }
.imageworld-touch-row:hover { box-shadow:inset 0 0 0 1px #aaa9a3; }
.imageworld-dialog-action { min-height:44px; }
.imageworld-ticket-input { position:absolute; left:30%; top:36%; width:50%; height:13%; min-height:36px; box-sizing:border-box; background:#e4e4e0; color:#1b1b1d; border:0; border-bottom:1px solid #aaa9a3; border-radius:0; font:600 clamp(16px,2.2vw,28px)/1.2 "IBM Plex Mono",monospace; text-align:right; pointer-events:auto; appearance:textfield; }
.imageworld-ticket-input::-webkit-inner-spin-button { appearance:none; }