/* All rules require a small touch device; mouse desktop rendering stays untouched. */
@media screen {
html.ws-phone{--phone-width:100vw;--phone-height:100dvh;--phone-top:0px;--phone-left:0px}
.ws-phone body.phone-playing{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none}
.ws-phone .phone-playing .app-shell{width:100%;margin:0}
.ws-phone .phone-playing .site-header,.ws-phone .phone-playing .site-footer{display:none}
.ws-phone .phone-playing #game-view{position:fixed;top:var(--phone-top);left:var(--phone-left);width:var(--phone-width);height:var(--phone-height);padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));display:grid;grid-template-rows:48px 72px minmax(0,1fr) 34px 44px;gap:4px;background:var(--bg);overflow:hidden}
.ws-phone #phone-top{display:flex;align-items:center;gap:6px;min-width:0}
.ws-phone #phone-top button{min-width:54px;min-height:44px;margin:0;padding:4px 7px;font-size:13px;flex:none}
.ws-phone #phone-title{flex:1;min-width:0}
.ws-phone #game-title{font-size:17px;line-height:1.15;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-phone #phone-progress{display:flex;align-items:center;gap:8px}
.ws-phone #game-progress{font:13px/1.4 "Segoe UI",Arial,sans-serif;white-space:nowrap}
.ws-phone #game-timer{font-size:13px}
/* The grid keeps large cells; its viewport, not its letters, adapts to the screen. */
.ws-phone #phone-board-tools{min-width:0}
.ws-phone #phone-board-controls{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ws-phone #phone-board-controls button{min-width:48px;min-height:44px;margin:0}
.ws-phone #phone-board-controls #pan-toggle{font-size:14px;padding:6px 12px}
.ws-phone #pan-toggle[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}
.ws-phone #phone-board-guide{font:12px/16px "Segoe UI",Arial,sans-serif;color:var(--muted);margin:4px 0 0}
.ws-phone #phone-stage{display:grid;grid-template-rows:minmax(0,1fr) minmax(64px,24%);gap:8px;min-width:0;min-height:0}
.ws-phone #grid-viewport{padding:0;width:100%;height:100%;min-height:0;max-height:none;overflow:auto;border-radius:5px;outline:1px solid var(--line);touch-action:none;scrollbar-width:thin}
.ws-phone #grid-wrap{margin:0}
.ws-phone #grid .cell{font-size:calc(var(--cell-size) * .46);font-weight:600;letter-spacing:0;border-radius:3px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 40%,transparent)}
.ws-phone #grid:focus-visible{outline-offset:-3px}
.ws-phone #word-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:2px 8px;grid-column:auto;grid-row:auto;align-content:start;margin:0;padding:4px 0;overflow:auto;min-height:0;overscroll-behavior:contain;touch-action:pan-y}
.ws-phone #word-list li{font-size:15px;line-height:22px;height:auto;min-height:26px;padding:0;gap:4px;white-space:normal;overflow-wrap:anywhere;letter-spacing:0;align-items:flex-start}
.ws-phone #word-list .word-check{width:16px;font-size:14px}
.ws-phone #word-list li.word-found{color:var(--text)}
.ws-phone #game-message{padding:0 2px;min-height:0;margin:0;font-size:12px;line-height:16px;overflow:auto;overscroll-behavior:contain;align-self:center;max-height:34px;color:var(--text)}
.ws-phone #phone-actions{display:grid;grid-template-columns:1.3fr 1.15fr .7fr;gap:5px}
.ws-phone #phone-actions button{margin:0;padding:3px 6px;min-height:44px;height:44px;width:100%;font-size:13px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:8px;justify-content:center}
.ws-phone button:disabled{opacity:1;color:var(--muted)!important;background:var(--surface-soft)!important}
.ws-phone #phone-actions button:enabled:active{background:var(--accent-soft);border-color:var(--accent)}
.ws-phone .phone-landscape #phone-stage{grid-template-columns:minmax(0,1fr) minmax(160px,32%);grid-template-rows:minmax(0,1fr)}
.ws-phone .phone-landscape #word-list{height:100%;grid-template-columns:repeat(2,minmax(0,1fr))}
.ws-phone #phone-menu .header-tools{display:flex;flex-wrap:wrap;border:0;padding:0;margin:10px 0;gap:6px}
.ws-phone #phone-menu .play-options{display:flex;font-size:14px}
.ws-phone #phone-menu .play-options label{min-height:44px}
.ws-phone #phone-menu .game-heading-actions{display:flex;flex-wrap:wrap;flex-direction:row;margin:10px 0}
.ws-phone #phone-menu .return-link{display:block}
.ws-phone #phone-menu #phone-metadata{margin:10px 0}
.ws-phone dialog{max-height:calc(var(--phone-height) - 16px);max-width:calc(var(--phone-width) - 16px);margin:auto;width:540px;overflow:hidden}
.ws-phone dialog[open]{display:flex;flex-direction:column}
.ws-phone dialog .dialog-content{padding:18px;overflow:auto;min-height:0;overscroll-behavior:contain}
.ws-phone dialog button{min-height:44px;font-size:14px}
.ws-phone dialog h2{font-size:26px}
.ws-phone #phone-menu-close,.ws-phone .phone-dialog-actions{flex:none;margin:0;padding:8px 12px;border-top:1px solid var(--line);background:var(--surface)}
.ws-phone #phone-menu-close{margin:8px;min-height:44px}
.ws-phone .phone-dialog-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.ws-phone .phone-dialog-actions .dialog-buttons{margin:0}
.ws-phone .phone-dialog-actions button{margin:0;min-width:0}
.ws-phone .phone-playing #storage-warning{position:fixed;inset:8px 8px auto;z-index:20;font-size:14px}
}
@media screen{.ws-phone #game-title:focus{outline:none}}
@media screen{.ws-phone #phone-full-title{color:var(--text);font-size:16px;margin-bottom:8px}}

@media screen{.ws-phone #phone-top #game-back{width:94px;max-width:94px;white-space:normal;text-align:center;justify-content:center;font-weight:600;border:1px solid var(--line);border-radius:8px;color:var(--text);background:var(--surface)}}