/* Readable controls around a uniformly scaled game scene on smaller screens. */
body[data-layout="portrait"] .topbar,body[data-layout="landscape"] .topbar{margin:10px auto;font-size:10px;letter-spacing:1px}
body[data-layout="portrait"] #game,body[data-layout="landscape"] #game{width:100%;height:auto;transform:none;overflow:hidden}
body[data-layout="portrait"] #game{flex-direction:column}
body[data-layout="portrait"] .scene,body[data-layout="landscape"] .scene{width:var(--scene-native-width);height:780px;flex:none;transform:scale(var(--scene-scale));transform-origin:top left;margin-bottom:var(--scene-collapse)}
body[data-layout="portrait"] .scene{order:0}
body[data-layout="portrait"] .panel{order:1;width:100%;padding:14px 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;border-right:0;border-top:3px solid #101719}
body[data-layout="portrait"] .logo{display:none}
body[data-layout="portrait"] .wallet{margin:0;grid-column:1;grid-row:1 / span 2}
body[data-layout="portrait"] .wallet strong{font-size:29px}
body[data-layout="portrait"] .panel>label{grid-column:2;grid-row:1}
body[data-layout="portrait"] .bet-control{grid-column:2;grid-row:2;margin:0;height:40px}
body[data-layout="portrait"] .bet-control input{width:100%}
body[data-layout="portrait"] .return{grid-column:1 / -1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
body[data-layout="portrait"] .return strong{font-size:25px;margin:0}
body[data-layout="portrait"] .return>span:last-child{height:auto;margin:0;font-size:11px}
body[data-layout="portrait"] .actions{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;margin:0;gap:10px}
body[data-layout="portrait"] .primary,body[data-layout="portrait"] .secondary{font-size:16px;min-height:48px;padding:10px}
body[data-layout="portrait"] #message{grid-column:1 / -1;min-height:0;margin:2px 0;font-size:12px;line-height:1.4}
body[data-layout="portrait"] .round-info{grid-column:1 / -1;margin:0;align-items:center;min-height:28px}
body[data-layout="portrait"] .text-button{min-height:28px}
body[data-layout="portrait"] .tools{margin:12px auto;gap:8px}
body[data-layout="portrait"] .tools button{min-height:38px}
body[data-layout="landscape"] #game{height:var(--scene-height)}
body[data-layout="landscape"] .panel{width:220px;flex:none;padding:10px 12px;display:grid;grid-template-columns:1fr 1fr;gap:5px 8px;align-content:start}
body[data-layout="landscape"] .logo{display:none}
body[data-layout="landscape"] .wallet{grid-column:1;margin:0}
body[data-layout="landscape"] .wallet strong{font-size:22px}
body[data-layout="landscape"] .panel>label{display:none}
body[data-layout="landscape"] .bet-control{grid-column:2;height:37px;margin:0;align-self:center}
body[data-layout="landscape"] .bet-control input{width:100%;font-size:13px}
body[data-layout="landscape"] .bet-control button{min-width:25px;font-size:12px}
body[data-layout="landscape"] .return{grid-column:1 / -1;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
body[data-layout="landscape"] .return strong{font-size:24px;margin:0}
body[data-layout="landscape"] .return>span:last-child{height:auto;margin:0;font-size:10px;width:100%}
body[data-layout="landscape"] .actions{grid-column:1 / -1;margin:3px 0 0;gap:7px}
body[data-layout="landscape"] .primary,body[data-layout="landscape"] .secondary{min-height:43px;padding:7px;font-size:15px}
body[data-layout="landscape"] #message{grid-column:1 / -1;font-size:11px;line-height:1.25;min-height:0;margin:5px 0}
body[data-layout="landscape"] .round-info{grid-column:1 / -1;margin:0;min-height:22px;align-items:center}
body[data-layout="landscape"] .tools{margin:8px auto;gap:8px}
body[data-layout="portrait"] #journal,body[data-layout="landscape"] #journal{grid-column:1 / -1;margin:0;font-size:11px}
body[data-layout="portrait"] .scene-copy .primary,body[data-layout="landscape"] .scene-copy .primary{min-height:calc(48px / var(--scene-scale));font-size:calc(16px / var(--scene-scale));padding:18px 28px}
body[data-layout="portrait"] .scene-copy h2,body[data-layout="landscape"] .scene-copy h2{font-size:56px}
body[data-layout="portrait"] .scene-copy p,body[data-layout="landscape"] .scene-copy p{font-size:27px;line-height:1.3}
body[data-layout="portrait"] .scene-copy>span,body[data-layout="landscape"] .scene-copy>span{font-size:22px;letter-spacing:1px}
body[data-layout="portrait"] #back-office,body[data-layout="landscape"] #back-office{font-size:calc(12px / var(--scene-scale));min-height:calc(36px / var(--scene-scale));margin:8px auto 0;padding:5px 18px}
body[data-layout="portrait"] #scene-art.sketch img,body[data-layout="landscape"] #scene-art.sketch img{left:50%;transform:translateX(-50%)}
body[data-layout="portrait"] #scene-art:not(.sketch) img{object-fit:contain;object-position:center top}

/* A phone turn is a temporary input cover, never a round reset. */
body.phone-sideways { overflow:hidden; }
#rotate-notice { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:20px; border:0; border-radius:0; background:linear-gradient(#101818d4,#101818f2),url('assets/v2/party-background.webp') center/cover; color:#eee8cf; text-align:center; }
#rotate-notice[open] { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
#rotate-notice::backdrop { background:#0a1213e8; backdrop-filter:blur(5px); }
#rotate-notice svg { width:82px; height:82px; flex:none; fill:none; stroke:#c4d96b; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
#rotate-notice h2 { max-width:620px; margin:0; font:900 clamp(22px,4vw,32px)/1.1 Arial,sans-serif; letter-spacing:-.6px; }
#rotate-notice p { max-width:540px; margin:0; font:600 16px/1.5 Arial,sans-serif; color:#e0e2cf; }

#rotate-notice .rotate-face { width:min(180px,43dvh); height:min(180px,43dvh); object-fit:contain; flex:none; }