/* Shared menus keep the Chain Rally frame and spacing. */
.spin-setup{display:grid;gap:12px}.spin-setup label{display:grid;gap:5px}.spin-setup input{width:100%;min-height:42px}.spin-setup input[readonly]{background:#e6eddf}
/* One centered menu frame, shared with Chain Rally. */
body:not(.game-active):not(.battle-playing) #battleScreen,
body:not(.game-active):not(.battle-playing) #multiplayerScreen,
body:not(.game-active):not(.battle-playing) #spinScreen,
body:not(.game-active):not(.battle-playing) #spinLobbyScreen{position:absolute;inset:0;padding:16px;display:grid;place-items:center;height:100%;overflow:auto;background:none;border:0;border-radius:0}
body:not(.battle-playing) #battleScreen>.battle-panel,
body:not(.battle-playing) #multiplayerScreen>.battle-panel,
#spinMenu,#spinLobbyScreen>.battle-panel{width:min(420px,100%);height:auto!important;max-height:100%;margin:auto;padding:16px;display:flex;flex-direction:column;overflow:auto}
#setupScreen{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100% - 32px));margin:0;padding:16px}
#spinMenuView h2,#spinLobbyView h2{font-size:14px;line-height:1.8;margin:10px 0 14px}#spinMenuView,#spinLobbyView{min-height:0;overflow:auto}#spinLobbyStatus{font:13px/1.4 'Courier New',monospace}
/* Spin uses Chain's portrait frame, route HUD and dialogue panel. */
body.spin-playing .screen-shell{overflow:hidden!important}
body.spin-playing #spinScreen{height:100%;padding:0;border:0;background:var(--accent-183545)}
#spinGame:not([hidden]){height:100%;display:flex;flex-direction:column;min-height:0;overflow:hidden}
#spinRoute{flex:1;min-height:0;border:0;background-color:var(--accent-183545);background-image:url('../assets/backgrounds/route-normal-approved.webp?v=64');background-size:contain;background-repeat:no-repeat;background-position:center;image-rendering:pixelated}
#spinRoute .route-hud{top:8px;left:8px;right:8px}
#spinTurn{font-size:10px}
.spin-scores{display:flex;flex-wrap:wrap;gap:3px 10px;margin-top:3px;font:700 11px/1.4 'Courier New',monospace}.spin-score{white-space:normal;overflow-wrap:anywhere}.spin-score.current b{color:var(--accent-245f9d)}
.spin-bonus{flex:none;height:auto;gap:6px}.spin-letter-bonus{font:700 24px/1 'Courier New',monospace;padding-right:6px;border-right:1px solid var(--accent-243b4c)}
#spinLastBox{top:var(--spin-hud-bottom,80px);left:8px;margin:0}#spinLastBox:has(#spinReveal:not([hidden])) .last-empty{display:none}#spinSprite{width:100%;height:100%;image-rendering:pixelated}
#spinRoute .route-history{right:8px;bottom:calc(var(--spin-message-height,30px) + 16px);width:39%;max-width:212px;margin:0}#spinRoute .history{max-height:126px}#spinRoute .history-item{font:11px/1.3 'Courier New',monospace}.history-item .pokemon-type-icon{width:16px;height:16px}
#spinRoute .route-message{bottom:8px;left:8px;right:8px}#spinStatus{margin:0;min-height:0;font:700 12px/1.3 'Courier New',monospace}
.spin-reels{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:min(310px,88%);z-index:4}.spin-reel{min-width:0;background:#fff8e6ed;border:3px solid var(--accent-243b4c);padding:8px;text-align:center}.spin-reel b{display:block;font:700 11px/1.5 'Courier New',monospace}.spin-reel canvas{display:block;width:100%;height:auto;object-fit:contain}
.spin-entry{flex:none;max-height:45%;overflow:auto}.spin-entry .requirement{margin-bottom:7px;font-size:9px}#spinRoll{display:block;width:100%;font-size:10px;min-height:40px}.spin-entry .entry-actions{margin-top:0}#spinSubmit{height:40px;font-size:10px}#spinError,#spinHints{font:13px/1.4 'Courier New',monospace;margin:4px 0}#spinError{color:#9e2727}#spinError:empty{display:none}
.spin-result{font:700 14px/1.5 'Courier New',monospace}#spinWinner{font:inherit;margin:4px 0 8px}#spinAgain{font-size:9px}
#spinRulesDialog{width:min(460px,94vw);max-height:90dvh;overflow:auto}#spinRulesDialog p{font:14px/1.5 'Courier New',monospace}#spinRulesDialog h2{font-size:12px}
@media(max-width:600px),(max-height:500px) and (max-width:1000px){
 #spinTurn{font-size:9px}.spin-scores{font-size:10px;gap:2px 6px}.spin-bonus{padding:4px}.spin-letter-bonus{font-size:21px}#spinRoute .history{max-height:94px}#spinRoute .history-item{font-size:10px}#spinRoute .route-history{padding:5px}
 .spin-entry{position:relative;margin:0 4px 4px;padding:7px;border-width:2px}.spin-entry .word-entry{grid-template-columns:minmax(0,1fr);gap:6px}.spin-entry .word-entry input{height:40px}.spin-entry .entry-actions{display:grid;grid-template-columns:1.4fr 1fr;gap:6px}.spin-entry .entry-actions>#spinSubmit,.spin-entry .small-actions .btn{height:34px;min-height:34px;padding:4px;font-size:8px}
 body.keyboard-open.spin-playing .spin-entry{max-height:55%}body.keyboard-open.spin-playing #spinRoute .history{max-height:48px}
}
.profile-mode-ranks{display:grid;gap:8px;margin:14px 0}.profile-mode-ranks article{display:grid;grid-template-columns:40px 1fr;gap:0 10px;align-items:center;padding:8px;border:1px solid #a9b9a7;background:#fff8de}.profile-mode-ranks img{width:36px;height:36px;grid-row:span 2;object-fit:contain}.profile-mode-ranks b{font-size:11px;line-height:1.8}.profile-mode-ranks p{margin:0;font:13px/1.5 'Courier New',monospace}
#spinTutorialDialog{width:min(540px,96vw);max-height:90dvh;border:2px solid var(--rally-border);border-radius:9px;background:var(--rally-cream);padding:14px;color:var(--rally-ink)}#spinTutorialDialog h2{font-size:20px}#spinTutorialDialog h3{font-size:17px}#spinTutorialDialog p{font-size:14px;line-height:1.5}.spin-tutorial-actions{display:flex;gap:9px;justify-content:space-between;margin-top:12px}#spinTutorialScene{padding:8px;border-radius:7px;background:#edf3e3}#spinTutorialScene canvas{max-width:100%;height:auto}#spinTutorialScene .spin-reel{margin:6px 0}#spinTutorialScene .tutorial-highlight{outline:3px solid #f1bd35;outline-offset:2px}#spinTutorialStep{font-size:12px}#spinTutorialFeedback{min-height:24px}#spinTutorialClose{float:right}#spinTutorialScene input{max-width:100%;min-height:40px}
.spin-tutorial-head{position:sticky;top:-14px;z-index:2;background:var(--rally-cream);padding:8px 0}.spin-tutorial-head h2{margin:4px 0 8px}.spin-tutorial-head small{font-size:11px}.spin-tutorial-shiny{display:flex;align-items:center;gap:8px;font-size:14px}.spin-tutorial-shiny input{width:auto!important;min-height:0!important;margin:0}
#battleView h2,#multiView h2,#spinMenuView h2,#spinLobbyView h2{text-align:center;margin:10px 0 14px}#battleStatus:empty,#multiStatus:empty,#spinLobbyStatus:empty{display:none}
#standardModes:has(#chainDifficultyMenu.hidden),#battleScreen[data-page="home"]>.battle-panel,#spinScreen[data-page="home"]>#spinMenu{min-height:270px}
@media(max-height:450px){#standardModes:has(#chainDifficultyMenu.hidden),#battleScreen[data-page="home"]>.battle-panel,#spinScreen[data-page="home"]>#spinMenu{min-height:0}}
@media(max-width:600px){#spinRoute .route-message{bottom:calc(var(--spin-log-height,76px) + 16px)!important}#spinRoute .route-history{bottom:8px!important}#spinRoute .route-history .history{max-height:42px}}