/* Activated only for a phone-sized touch device, never by window width alone. */
.phone body{position:fixed;top:var(--phone-top,0);left:var(--phone-left,0);width:var(--phone-width,100vw);height:var(--phone-height,100dvh);overflow:hidden}
.phone #app,.phone #app:fullscreen{width:100%;height:100%;max-width:none;padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));overflow:hidden;display:flex;flex-direction:column}
.phone .masthead,.phone .bottom-note,.phone footer,.phone .landscape{display:none}
.phone .layout{display:flex;flex-direction:column;flex:1;min-height:0;gap:4px}
.phone .cabinet,.phone #app:fullscreen .cabinet{width:100%;max-width:none;min-height:0;flex:1;display:flex;flex-direction:column;padding:4px;border-radius:7px}
.phone .top-rail,.phone .control-rail{flex:none;padding:4px 6px;font-size:9px;min-height:22px;letter-spacing:.4px}
.phone .control-rail .player-mark{display:flex;align-items:center;gap:5px}.phone .player-mark span{font-size:12px}.phone .player-mark b{font-size:9px;letter-spacing:.3px}.phone .rail-note{font-size:8px}
.phone .bezel{flex:1;min-height:0;padding:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.phone .phone-court{display:flex;align-items:stretch;justify-content:center;gap:6px;max-width:100%;flex:none}
.phone .screen{flex:none;aspect-ratio:4/3;border-radius:2px}
.phone .paddle-strip{position:relative;width:44px;flex:0 0 44px;background:linear-gradient(90deg,#332a20,#211b14);border:1px solid #a98553;border-radius:5px;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
.phone .paddle-strip.dragging{background:#5a4024;border-color:#ffcd82}.phone .strip-label{position:absolute;top:4px;left:0;width:100%;text-align:center;font-size:8px;letter-spacing:1px;color:#e8cfac;pointer-events:none}
.phone .strip-grip{position:absolute;left:7px;right:7px;min-height:8px;transform:translateY(-50%);border:1px solid #fff3d6;border-radius:4px;background:#e5ae65;color:#24180c;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;pointer-events:none}
.phone #phoneDragHint{flex:none;font-size:11px;line-height:1.2;margin:0;text-align:center;color:#edc791}
.phone .console{flex:none;padding:0;display:flex;flex-wrap:wrap;gap:4px;align-items:stretch;min-height:0}
.phone #playingPanel{flex:1;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:4px;align-items:center}
.phone #matchHeading,.phone #matchMode{display:none}.phone #scoreText{grid-column:1/-1;margin:0;text-align:center;font-size:13px;line-height:18px}
.phone #playingPanel .button-row{margin:0;gap:4px}.phone #playingPanel button,.phone #phoneSettingsButton{min-height:44px;font-size:12px;padding:4px 7px;margin:0}
.phone #phoneSettingsButton{flex:0 0 90px;align-self:stretch}.phone #playingPanel #pause{min-height:44px}.phone #pause span{display:none}
.phone:not(:has(body.in-match)) .cabinet{flex:0 0 27%}
.phone #setup{flex:1;min-width:0;overflow:auto;max-height:100%;padding:4px}.phone body:not(.in-match) .console{flex:1;overflow:hidden;align-items:stretch}
.phone #setup .eyebrow,.phone #setup .intro,.phone #setup .space-hint{display:none}.phone #setup h2{font-size:19px;margin:0 0 8px}.phone #setup fieldset{margin-bottom:4px}.phone #setup legend{margin:0}.phone #setup .select-row{margin:4px 0}.phone #start{margin-top:4px}
.phone dialog{position:fixed;max-height:calc(var(--phone-height,100dvh) - 16px);max-width:460px;width:calc(var(--phone-width,100vw) - 16px);padding:16px;overflow:auto;overscroll-behavior:contain}
.phone #phoneSettings{overflow:hidden;padding:12px}.phone #phoneSettings[open]{display:flex;flex-direction:column}.phone .phone-dialog-head{display:flex;gap:8px;align-items:center;justify-content:space-between;flex:none;margin:0 0 8px}.phone .phone-dialog-head h2{font-size:22px;margin:0}.phone #phoneSettingsBody{overflow:auto;min-height:0;overscroll-behavior:contain}.phone .preferences{margin-top:8px;padding-top:8px}.phone .phone-sensitivity{display:block;font-size:13px}.phone #phoneSensitivityValue{float:right}.phone #closeHelp{position:sticky;bottom:-16px}
@media(orientation:landscape){.phone #playingPanel{grid-template-columns:1.2fr 1fr 1.6fr}.phone #scoreText{grid-column:auto}.phone .top-rail{min-height:18px;padding:1px 5px}.phone .control-rail{min-height:18px;padding:1px 5px}.phone #phoneDragHint{font-size:10px}.phone body:not(.in-match) .layout{flex-direction:row;flex-wrap:wrap}.phone body:not(.in-match) .cabinet{flex:1;height:100%}.phone body:not(.in-match) #phoneDragHint{display:none}.phone body:not(.in-match) .console{flex:0 0 280px;height:100%}.phone body:not(.in-match) #phoneSettingsButton{flex:1;align-self:flex-end}}
/* Keep canvas artwork at exactly 4:3; its outline does not consume pixel space. */
.phone .screen{border:0;outline:1px solid #292925;outline-offset:-1px}