/* Standalone cabinet. Shared desktop tokens remain the source of truth. */
.rewind-page{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));background:var(--black);font-family:var(--font-mono);overscroll-behavior:none}
.rewind-cabinet{width:min(880px,100%);padding:4px;background:var(--silver-face);border:2px solid;border-color:var(--silver-lit) var(--silver-dk) var(--silver-dk) var(--silver-lit);box-shadow:3px 3px 0 var(--silver-dk)}
.rewind-titlebar{display:flex;justify-content:space-between;gap:8px;padding:4px 8px;background:linear-gradient(var(--goblin-deep),var(--goblin-dark));color:var(--title-text);font-size:11px;font-weight:bold}
.rewind-titlebar a,.rewind-titlebar a:visited{color:var(--title-text)}
.rewind-hud{display:flex;align-items:center;gap:16px;padding:6px 8px;font-size:11px;min-height:38px}
.rewind-hud b{font-size:15px}.rw-actions{margin-left:auto;display:flex;gap:8px}
.rewind-page button{font:700 12px var(--font-mono);cursor:pointer;color:var(--ink);background:var(--silver-face);border:2px solid;border-color:var(--silver-lit) var(--silver-dk) var(--silver-dk) var(--silver-lit);padding:5px 9px;border-radius:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.rewind-page button:active{border-color:var(--silver-dk) var(--silver-lit) var(--silver-lit) var(--silver-dk)}
.rewind-page button:disabled{cursor:default;opacity:.55}
#rw-hearts{color:#932f2b;font-size:21px;white-space:nowrap;letter-spacing:3px}
.rewind-stage{position:relative;border:2px solid;border-color:var(--silver-dk) var(--silver-lit) var(--silver-lit) var(--silver-dk);background:var(--screen-bg);aspect-ratio:2/1;max-width:100%;min-width:0;overflow:hidden}
#rw-world{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:none;outline-offset:-3px}
.rewind-overlay{position:absolute;inset:0;display:flex;align-items:center;padding:5% 6%;background:linear-gradient(90deg,rgba(2,10,5,.97),rgba(2,10,5,.83) 45%,rgba(2,10,5,.05) 75%);color:var(--title-text)}
.rewind-overlay[hidden]{display:none}
.rewind-card{max-width:68%}.rw-eyebrow{font-size:clamp(8px,1.25vw,11px);letter-spacing:1px;color:var(--screen-green);margin:0 0 10px}
.rewind-card h1{font-size:clamp(28px,6.6vw,65px);line-height:.88;letter-spacing:-3px;margin:0 0 17px;text-shadow:3px 3px 0 var(--goblin-dark);color:var(--silver-lit)}
.rewind-card h1 span{color:var(--screen-green)}
#rw-message{font-size:clamp(9px,1.4vw,13px);line-height:1.55;margin:0 0 14px}
.rewind-card #rw-play{background:var(--goblin-bright);padding:10px 16px;font-size:clamp(10px,1.5vw,14px)}
.rw-small{font-size:clamp(8px,1.1vw,10px);margin:12px 0 0;color:var(--silver-hi)}
.rewind-caption{position:absolute;top:13%;left:0;right:0;text-align:center;pointer-events:none;color:var(--silver-lit);font-weight:bold;font-size:clamp(10px,1.8vw,15px);text-shadow:2px 2px 0 var(--black)}
.rewind-controls{display:flex;gap:8px;align-items:stretch;margin-top:5px;height:62px}
.rewind-controls button{width:28%;min-width:100px;position:relative;overflow:hidden}
.rewind-controls strong{display:block;position:relative;font-size:20px;letter-spacing:1px;white-space:nowrap}
.rewind-controls small{position:relative;display:block;font-size:8px;margin-top:3px}
.rewind-label{flex:1;align-self:center;text-align:center;display:flex;flex-direction:column;font-size:10px;gap:4px;min-width:0}
.rewind-label span{font-size:8px;color:var(--ink-dim)}
#rw-charge{position:absolute;inset:0;background:var(--goblin-bright);transform-origin:left;pointer-events:none}
.rewind-cabinet footer{font-size:9px;display:flex;justify-content:space-between;padding:6px 4px 1px;color:var(--ink-dim)}
.rewind-rotate{display:none;color:var(--silver-hi);font-size:12px;text-align:center;max-width:280px;margin:22px 0}
/* Landscape is a screen-filling play surface, not a height-scaled cabinet.
   Controls sit below the collision plane, over decorative floor pixels. */
@media(orientation:landscape) and (max-height:650px){
 .rewind-page{height:100svh;height:100dvh;min-height:0;padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left);overflow:hidden}
 .rewind-cabinet{position:relative;width:100%;height:100%;min-height:0;display:grid;grid-template-rows:17px 32px minmax(0,1fr);padding:2px;box-shadow:none}
 .rewind-titlebar{padding:1px 6px;font-size:9px;line-height:15px}
 .rewind-hud{min-height:0;padding:1px 8px;gap:12px;font-size:10px;line-height:1}
 .rewind-hud button{font-size:10px;white-space:nowrap;padding:5px 9px}.rewind-hud b{font-size:14px}
 #rw-hearts{font-size:18px}
 .rewind-stage{aspect-ratio:auto;width:100%;height:100%;min-height:0}
 .rewind-controls{position:absolute;bottom:max(6px,env(safe-area-inset-bottom));left:12px;right:12px;height:clamp(42px,14dvh,56px);margin:0;pointer-events:none}
 .rewind-controls button{width:clamp(105px,20vw,165px);min-width:0;pointer-events:auto;box-shadow:2px 2px 0 var(--black)}
 .rewind-controls strong{font-size:17px}.rewind-controls small{font-size:7px}
 .rewind-label{color:var(--title-text);text-shadow:1px 1px var(--black)}.rewind-label span{color:var(--silver-hi)}
 .rewind-cabinet footer{display:none}
 .rewind-overlay{padding:12px 5% 60px}
 .rewind-card h1{font-size:clamp(28px,11dvh,58px);margin-bottom:10px}
 .rw-eyebrow{margin-bottom:8px;font-size:9px}#rw-message{margin-bottom:9px;font-size:11px}
 .rw-small{margin-top:8px}.rewind-card #rw-play{padding:7px 12px}
 .rewind-caption{top:10%;font-size:12px}
}
/* Portrait phone: the HUD wraps rather than clipping its last button, and the
   rotate note becomes a beveled banner above the cabinet with a phone icon
   that turns on its own, so the landscape hint is the first thing seen. */
@keyframes rw-rotate{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media(orientation:portrait) and (max-width:600px){
 .rewind-rotate{display:flex;order:-1;align-items:center;gap:12px;width:min(880px,100%);max-width:none;margin:0 0 10px;padding:10px 12px;text-align:left;font-size:13px;font-weight:bold;line-height:1.35;color:var(--title-text);background:linear-gradient(var(--goblin-deep),var(--goblin-dark));border:2px solid;border-color:var(--silver-lit) var(--silver-dk) var(--silver-dk) var(--silver-lit);box-shadow:3px 3px 0 var(--silver-dk)}
 .rewind-rotate::before{content:"";flex:none;width:14px;height:24px;border:2px solid var(--title-text);border-radius:3px;box-shadow:inset 0 -3px 0 var(--title-text);animation:rw-rotate 2.4s ease-in-out infinite}
 .rewind-hud{flex-wrap:wrap;gap:6px 8px;padding:6px}
 .rewind-hud button{padding:4px 7px;font-size:10px;white-space:nowrap}
 #rw-hearts{font-size:17px;letter-spacing:2px}
 .rw-best{display:none}.rewind-titlebar span:last-child{display:none}.rewind-card h1{font-size:29px;margin-bottom:8px;letter-spacing:-1px}.rw-eyebrow{font-size:6px;margin-bottom:7px}#rw-message{font-size:8px;margin-bottom:8px}.rewind-card #rw-play{padding:6px 9px;font-size:9px}.rw-small{display:none}.rewind-controls strong{font-size:15px}.rewind-controls small{font-size:6px}.rewind-label{font-size:8px}.rewind-label span{font-size:6px}.rewind-cabinet footer span{display:none}.rewind-cabinet footer{font-size:7px}}

/* Keep this after the portrait animation so the motion preference wins. */
@media(prefers-reduced-motion:reduce){.rewind-rotate::before{animation:none;transform:rotate(-90deg)}}