/* Historical boot rules; title-canonical.css now displays the approved PNG. */
.pw-title-screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 12px; padding: 20px; overflow: hidden; text-align: center;
  background: radial-gradient(ellipse at 48% 35%,#80ceff 0%,#51a8f0 48%,#3976db 100%);
  isolation: isolate;
}
.pw-title-screen::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .25;
  background: radial-gradient(circle,#fff 1px,transparent 1.5px) 0 0 / 18px 18px;
}
.pw-title-screen::after {
  content: ''; position: absolute; left: -8%; right: -8%; bottom: -35px; height: 90px;
  border-radius: 50% 50% 0 0; background: #c9eaff; transform: rotate(-4deg); z-index: -1;
}
.pw-boot-label { color: #133b80; font: 800 9px/1.4 monospace; letter-spacing: .12em; }
.pw-boot-logo { position: relative; font: 900 clamp(34px,4vw,58px)/1.05 'Arial Rounded MT Bold','Arial Black',var(--font-display); letter-spacing: -.055em; transform: rotate(-3deg); }
.pw-boot-logo > span { display: block; color: #f5fcff; -webkit-text-stroke: 1px #2462b7; paint-order: stroke fill; text-shadow: 0 2px #b0e2ff,0 4px #2462b7,0 6px #17458d,0 9px 0 #2462b730; }
.pw-boot-logo > span + span { color: #ffd0e4; font-size: 1.14em; transform: rotate(5deg) translateX(.12em); text-shadow: 0 2px #ffeef6,0 4px #b16a98,0 6px #714779,0 9px 0 #2462b730; }
.pw-boot-logo .pw-boot-dot { display: inline; color: #fff; }
.pw-boot-copy { color: #123469; font: 700 11px/1.5 var(--font-body); margin-top: 4px; }
#console-library { position: relative; border: 2px solid #173e7b; border-radius: 9px; padding: 9px 22px; min-height: 38px; color: #173e7b; background: #fff5fa; box-shadow: 0 4px #235a9a; font: 800 12px/1.4 var(--font-body); }
#console-library span { margin-left: 14px; }
#console-library:focus-visible { outline: 3px solid #173e7b; outline-offset: 4px; }
.pw-boot-hint { color: #173e7b; font: 800 8px/1.2 monospace; letter-spacing: .07em; }
.pw-boot-star { position: absolute; width: 26px; height: 26px; }
.pw-boot-star-one { top: 25%; left: 9%; }
.pw-boot-star-two { top: 14%; right: 13%; width: 16px; height: 16px; }

.pw-boot-pixels { position: absolute; left: 13%; bottom: 20%; width: 7px; height: 7px; background: #e6f7ff; box-shadow: 7px -7px #e6f7ff,14px 0 #e6f7ff,7px 7px #e6f7ff; transform: rotate(8deg); }

/* START is a close camera crop of the same wider shell. Rails remain offscreen. */
.pw-dialog.pw-zoomed { padding: 6px; overflow: hidden; }
.pw-dialog.pw-zoomed .pw-console {
  --pw-camera-rail: 160px;
  width: calc(100% + 2 * var(--pw-camera-rail)); margin-left: calc(-1 * var(--pw-camera-rail));
  height: 100%; grid-template-columns: var(--pw-camera-rail) minmax(0,1fr) var(--pw-camera-rail);
  grid-template-rows: minmax(0,1fr); gap: 8px; padding: 12px 0 8px; border-radius: 38px;
}
.pw-dialog.pw-zoomed .pw-console-center { padding-bottom: 36px; }
.pw-dialog.pw-zoomed .pw-glass { padding: 12px; border-radius: 16px; }
.pw-dialog.pw-zoomed .pw-glass::after { border-radius: 13px; }
.pw-dialog.pw-zoomed .pw-console-wordmark { display: flex; font-size: 9px; margin-bottom: 8px; }
.pw-dialog.pw-zoomed .pw-console-rail { display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.pw-dialog.pw-zoomed .pw-rail-left { padding: 0; }
.pw-dialog.pw-zoomed .pw-dpad { display: grid; grid-template: repeat(3,28px) / repeat(3,28px); width: auto; height: auto; }
.pw-dialog.pw-zoomed .pw-dpad::before { display: none; }
.pw-dialog.pw-zoomed .pw-dpad > button, .pw-dialog.pw-zoomed .pw-dpad-center { display: block; }
.pw-dialog.pw-zoomed .pw-dpad .pw-dpad-touch { display: none; }
.pw-dialog.pw-zoomed .pw-shell-label, .pw-dialog.pw-zoomed .pw-speaker { display: block; }
.pw-dialog.pw-zoomed .pw-action-cluster { width: 108px; height: 84px; }
.pw-dialog.pw-zoomed .pw-action-cluster .pw-start { width: 56px; height: 56px; font-size: 24px; }
.pw-dialog.pw-zoomed .pw-action-b { width: 42px; height: 42px; min-width: 42px; min-height: 42px; font-size: 18px; }
.pw-dialog.pw-zoomed .pw-aux-controls { position: absolute; bottom: 9px; left: 50%; right: auto; transform: translateX(-50%); gap: 12px; }
.pw-dialog.pw-zoomed .pw-aux-controls .pw-hardware { width: 58px; min-width: 58px; height: 28px; min-height: 28px; font-size: 8px; }
@media (max-width:600px) {
  .pw-title-screen { gap: 8px; padding: 12px 6px; }
  .pw-boot-label { font-size: 6px; letter-spacing: .03em; }
  .pw-boot-logo { font-size: clamp(25px,8vw,42px); }
  .pw-boot-copy { font-size: 7px; margin-top: 1px; }
  #console-library { font-size: 9px; min-height: 30px; padding: 5px 12px; }
  .pw-boot-hint { font-size: 5px; }
  .pw-boot-star-one { left: 7%; top: 19%; width: 15px; height: 15px; }
  .pw-boot-star-two { right: 7%; top: 8%; width: 10px; height: 10px; }

  .pw-boot-pixels { left: 9%; bottom: 25%; width: 4px; height: 4px; box-shadow: 4px -4px #e6f7ff,8px 0 #e6f7ff,4px 4px #e6f7ff; }
  .pw-dialog:not(.pw-zoomed) { padding: 8px; }
  .pw-dialog:not(.pw-zoomed) .pw-console { grid-template-columns: 32px minmax(0,1fr) 36px; grid-template-rows: auto; gap: 7px; padding: 18px 9px; border-radius: 30px; }
  .pw-dialog:not(.pw-zoomed) .pw-console-center { padding-bottom: 24px; }
  .pw-dialog:not(.pw-zoomed) .pw-console-rail { flex-direction: column; gap: 18px; }
  .pw-dialog:not(.pw-zoomed) .pw-rail-left { padding: 0; }
  .pw-dialog:not(.pw-zoomed) .pw-shell-label { display: block; font-size: 6px; }
  .pw-dialog:not(.pw-zoomed) .pw-speaker { display: block; }
  .pw-dialog:not(.pw-zoomed) .pw-dpad { display: block; }
  .pw-dialog:not(.pw-zoomed) .pw-console-wordmark { display: flex; }
  .pw-dialog:not(.pw-zoomed) .pw-glass { padding: 7px; border-radius: 11px; }
  .pw-dialog:not(.pw-zoomed) .pw-preview { padding: 10px; gap: 12px; grid-template-rows: auto minmax(0,1fr) 54px auto; }
  .pw-dialog:not(.pw-zoomed) .pw-preview-copy h2 { font-size: 17px; }
  .pw-dialog:not(.pw-zoomed) .pw-lcd-header, .pw-dialog:not(.pw-zoomed) .pw-lcd-header button { font-size: 8px; }
  .pw-dialog:not(.pw-zoomed) .pw-action-cluster { width: 36px; height: 80px; }
  .pw-dialog:not(.pw-zoomed) .pw-action-cluster::before { inset: -6px -4px; transform: rotate(-12deg); }
  .pw-dialog:not(.pw-zoomed) .pw-action-cluster .pw-start { width: 34px; height: 34px; right: -2px; font-size: 17px; }
  .pw-dialog:not(.pw-zoomed) .pw-action-b { width: 28px; min-width: 28px; min-height: 28px; height: 28px; left: -2px; font-size: 13px; }
  .pw-dialog:not(.pw-zoomed) .pw-aux-controls { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); gap: 12px; }
  .pw-dialog:not(.pw-zoomed) .pw-aux-controls .pw-hardware { min-width: 36px; width: 36px; height: 24px; min-height: 24px; font-size: 6px; }
  .pw-dialog.pw-zoomed { padding: 0; }
  .pw-dialog.pw-zoomed .pw-console { --pw-camera-rail: 144px; gap: 2px; padding: 6px 0 4px; border-radius: 22px; }
  .pw-dialog.pw-zoomed .pw-glass { padding: 4px; border-radius: 8px; }
  .pw-dialog.pw-zoomed .pw-glass::after { border-radius: 6px; }
  .pw-dialog.pw-zoomed .pw-console-wordmark { font-size: 7px; margin-bottom: 5px; letter-spacing: .06em; }
  .pw-dialog.pw-zoomed .pw-console-center { padding-bottom: max(36px,calc(36px + env(safe-area-inset-bottom))); }
  .pw-dialog.pw-zoomed .pw-aux-controls { bottom: max(7px,env(safe-area-inset-bottom)); gap: 10px; }
  .pw-dialog.pw-zoomed .pw-aux-controls .pw-hardware { width: 52px; min-width: 52px; height: 28px; min-height: 28px; }
}
@media (max-width:360px) { .pw-boot-logo { font-size: 25px; } }
@media (min-width:601px) and (max-height:650px) {
  .pw-dialog.pw-zoomed { padding: 2px; }
  .pw-dialog.pw-zoomed .pw-console { padding: 4px 0; }
  .pw-dialog.pw-zoomed .pw-console-center { padding-bottom: 28px; }
  .pw-dialog.pw-zoomed .pw-console-wordmark { font-size: 7px; margin-bottom: 4px; }
  .pw-dialog.pw-zoomed .pw-glass { padding: 4px; border-radius: 8px; }
  .pw-dialog.pw-zoomed .pw-aux-controls { bottom: 4px; }
  .pw-dialog.pw-zoomed .pw-aux-controls .pw-hardware { height: 24px; min-height: 24px; font-size: 7px; }
}