/* All rules are restricted to an identified phone with coarse touch input. */
html.phone {height:100%;overflow:hidden}
.phone body {position:fixed;top:var(--phone-top,0px);left:var(--phone-left,0px);width:var(--phone-width,100%);height:var(--phone-height,100dvh);overflow:hidden;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);font-size:14px;line-height:1.3}
.phone header {width:100%;padding:0 8px;min-height:46px;gap:8px;flex-wrap:nowrap;flex:none}
.phone .brand {font-size:12px;letter-spacing:.12em;gap:6px}
.phone .brand small {display:inline;margin-left:8px;font-size:10px}
.phone .brandmark {font-size:24px}
.phone main {padding:4px;width:100%;max-width:none;margin:0;flex:1;min-height:0;overflow:hidden;display:flex}
.phone #home {overflow:auto;overscroll-behavior:contain;width:100%;padding:8px}
.phone #play {flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.phone .desk {display:flex;flex:1;min-height:0}
.phone .boardPanel {display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;border-radius:8px}
.phone .boardBar {padding:0 6px;min-height:44px;flex:none;font-size:12px}
.phone .boardBar #cellReadout {max-width:none}
.phone #phoneControls {display:flex;flex-direction:column;flex:none;gap:3px}
.phone .tools {padding:0 3px;gap:3px;flex-wrap:nowrap;border:0;display:grid;grid-template-columns:repeat(4,1fr)}
.phone .tools button {padding:3px;font-size:13px;min-height:44px}
.phone .zoom {display:grid;grid-template-columns:1fr 1fr 1.25fr 1.4fr;position:relative;width:auto;gap:3px;margin:0 3px;padding-top:18px}
.phone .zoom button {font-size:12px;line-height:1.1;padding:3px;min-height:44px}
.phone #zoomLabel {position:absolute;top:0;left:0;right:0;text-align:center;font-size:12px}
.phone #phoneSelection {display:flex;gap:4px;align-items:center;padding:0 4px;min-height:44px}
.phone #phoneClueText {white-space:pre-wrap;overflow:auto;max-height:56px;flex:1;min-width:0;font-size:13px;line-height:1.4}
.phone #selectedClues {font-size:12px;padding:3px;width:80px;flex:none}
.phone #phoneMode {font-size:12px;padding:2px 6px;color:var(--gold);min-height:20px}
.phone #phoneHistory {display:flex;gap:4px;padding:0 4px}
.phone #phoneHistory button {min-height:44px;flex:1;padding:3px;font-size:13px}
.phone .scroller {min-height:0;max-height:none;flex:1;overflow:auto;padding:0;overscroll-behavior:none;touch-action:none}
.phone #board {margin:0 auto}
.phone .clue {font-size:calc(14px * var(--clue-scale,1));gap:calc(3px * var(--clue-scale,1))}
.phone .clueNumber {padding:calc(2px * var(--clue-scale,1));min-height:0}
.phone .clue.row {padding-right:calc(8px * var(--clue-scale,1))}
.phone .clue.col {padding-bottom:calc(8px * var(--clue-scale,1))}
.phone .clue.corner {font-size:calc(20px * var(--clue-scale,1))}
.phone .boardFooter {padding:2px 6px;font-size:11px;min-height:18px;flex:none}
.phone .boardFooter > :first-child {display:none}
.phone #status {margin:0;padding:2px 4px;min-height:18px;max-height:38px;overflow:auto;font-size:12px;flex:none}
.phone dialog {max-height:calc(var(--phone-height,100dvh) - 12px);max-width:600px;padding:12px;overscroll-behavior:contain}
.phone .phoneDialog[open] {display:flex;flex-direction:column;padding:0;overflow:hidden}
.phone .dialogHead {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 10px;flex:none;background:var(--panel2)}
.phone .dialogBody {overflow:auto;padding:12px;min-height:0;overscroll-behavior:contain}
.phone .phoneDialog nav {display:grid;grid-template-columns:1fr 1fr;margin-bottom:12px;gap:4px;width:auto}
.phone .playHeading {margin:12px 0;font-size:12px}
.phone .playHeading h1 {font-size:22px;margin:4px 0}
.phone .playHeading p {margin:4px 0}
.phone .sideCard {padding:10px;margin:8px 0}
.phone footer {margin:0;padding:10px 0;font-size:12px}
.phone #pauseCover {inset:44px 0 0}
.phone .clueSequence {display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px}
.phone .clueSequence button {min-width:44px;font-size:18px}
.phone .clueSequence .crossed {text-decoration:line-through}
.phone .clueSequence button:disabled {opacity:1}
.phone #phoneSaveWarning {padding:6px;color:#fff;background:#822536;font-weight:700;flex:none}
.phone .cell[data-preview="1"] {background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 3px var(--gold)}
.phone .cell[data-preview="2"] {background:var(--paper);color:transparent}
.phone .cell[data-preview="2"]::after {content:'×';color:var(--ink);position:absolute;inset:0;display:grid;place-items:center}
.phone .cell[data-preview="0"] {background:var(--paper);color:transparent;box-shadow:inset 0 0 0 2px var(--gold)}
.phone.overview #board .cell {cursor:zoom-in}
@media (orientation:landscape) {
 .phone header {min-height:44px}
 .phone .boardPanel {display:grid;grid-template-columns:208px minmax(0,1fr);grid-template-rows:44px minmax(0,1fr) 18px}
 .phone .boardBar {grid-column:2;grid-row:1}
 .phone #phoneControls {grid-column:1;grid-row:1 / 4;overflow:auto;border-right:1px solid var(--border);padding:2px;gap:4px}
 .phone .tools {grid-template-columns:1fr 1fr}
 .phone .zoom {grid-template-columns:1fr 1fr}
 .phone #phoneSelection {align-items:flex-start;flex-wrap:wrap}
 .phone #phoneClueText {flex-basis:100%;max-height:56px}
 .phone #selectedClues {width:100%}
 .phone .scroller {grid-column:2;grid-row:2}
 .phone .boardFooter {grid-column:2;grid-row:3}
 .phone #pauseCover {left:208px}
}
.phone .desk {align-items:stretch}
.phone #phoneControls > * {flex-shrink:0}
@media (orientation:landscape) {
 .phone #phoneSelection {display:grid;grid-template-columns:minmax(0,1fr) 64px;align-items:center}
 .phone #selectedClues {width:64px}
 .phone .tools {grid-template-columns:repeat(4,minmax(0,1fr))}
 .phone .tools button {font-size:11px;overflow-wrap:normal}
}