/* All overrides are gated by phone.js, never by desktop window width alone. */
html.phone,html.phone body{width:100%;height:var(--phone-height,100dvh);overflow:hidden;overscroll-behavior:none}
.phone body{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)}
.phone header{height:auto;min-height:52px;flex:0 0 auto;padding:3px 8px;gap:5px}
.phone .brand{font-size:13px;line-height:1.12}.phone .brand b{display:block}.phone .brand small,.phone .brandmark{display:none}
.phone nav{gap:3px}.phone nav button{padding:4px 7px;font:12px system-ui;min-height:44px}.phone #pieceCount{display:block;font-size:10px}
.phone #main{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.phone #main:has(.scene-page){overflow:hidden}
.phone .scene-page{height:100%;min-height:0;grid-template-rows:48px minmax(0,1fr)}
.phone .scene-heading{padding:2px 8px;gap:5px}.phone .scene-heading h2{font-size:17px;line-height:1.1}.phone .scene-heading small{font-size:9px;letter-spacing:0}.phone .scene-heading button{min-height:44px;padding:4px 8px;font-size:12px}
.phone .scene-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 236px;min-height:0}
.phone .viewport{display:grid;grid-template-rows:minmax(0,1fr) 18px 48px;min-width:0;min-height:0;touch-action:none}
.phone .viewport canvas{width:100%;height:100%;min-height:0;min-width:0}
.phone .view-tip{position:static;padding:1px 4px;font:11px/16px system-ui;display:block;text-align:center;border-radius:0}
.phone .view-controls{position:static;height:48px;display:flex;gap:4px;justify-content:center;align-items:center;padding:2px 4px}
.phone .view-controls button{font:12px system-ui;padding:5px 7px;min-height:44px;white-space:nowrap}.phone #phoneZoom{font:12px system-ui;min-width:36px;text-align:center}
.phone .clues{display:flex;flex-direction:column;gap:4px;padding:5px 8px;overflow:hidden;min-height:0;border-top:1px solid #b4975d44}
.phone .clues>.eyebrow,.phone .round-tabs,.phone .clue-switcher{display:none}
.phone .clues>h3{display:block;font:13px/18px system-ui;margin:0;flex-shrink:0}
.phone .phone-clue-list{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.phone .phone-clue-list .clue{display:block;order:initial;margin:0 0 5px;padding:6px 8px;min-height:44px}
.phone .clue p{font-size:var(--font);line-height:1.3}.phone .clue .count{margin-top:2px;font-size:11px}
.phone .location-story{display:block;margin:9px 0;font-size:14px}
.phone .hintbar{order:initial;flex:0 0 44px}.phone .hintbar button{min-height:44px;padding:4px}
.phone .hint-text{order:initial;flex-shrink:0;min-height:0;max-height:48px;overflow:auto;font-size:13px;margin:0;line-height:1.3}
.phone .hint-text:empty{display:none}.phone .clues>.primary{order:initial;flex-shrink:0;padding:4px;min-height:44px;font-size:14px}
.phone dialog{width:calc(100% - 16px);max-width:740px;height:calc(var(--phone-height,100dvh) - 16px);max-height:calc(var(--phone-height,100dvh) - 16px);padding:48px 8px 8px;overflow:hidden;margin:auto}
.phone #closeDialog{position:absolute;right:4px;top:3px;float:none;margin:0;width:44px;height:44px;z-index:1}
.phone #dialogContent{height:100%;display:flex;flex-direction:column;min-height:0;gap:6px}
.phone .phone-dialog-scroll{overflow:auto;min-height:0;flex:1;overscroll-behavior:contain;padding:3px}
.phone .phone-dialog-actions{flex-shrink:0;max-height:45%;overflow:auto;overscroll-behavior:contain}
.phone .phone-dialog-actions .actions{margin:0;gap:4px}.phone .phone-dialog-actions button{min-height:44px;padding:5px 9px;font-size:14px}
.phone dialog h2{font-size:24px}.phone .puzzle-art{padding:8px;margin:8px 0}.phone .setting{gap:8px;flex-wrap:wrap}
.phone .hero{min-height:100%;padding:20px}.phone .hero-copy{padding-top:0}.phone h1{font-size:36px}.phone .hero p{font-size:16px}.phone .stamp{margin-top:16px}
.phone .map-page{padding:12px}.phone .map-layout{grid-template-columns:minmax(0,1fr)}.phone .town{min-height:670px}.phone .map-sidebar{padding:12px}.phone .page-heading{display:block;margin-bottom:12px}.phone .page-heading h2{font-size:24px}
.phone .ending{padding:16px}.phone #toast{bottom:8px;max-width:94%;padding:8px 12px;font-size:14px}
@media(orientation:landscape){.phone .scene-body{grid-template-columns:minmax(0,1fr) minmax(260px,34%);grid-template-rows:minmax(0,1fr)}.phone .clues{border-top:0;border-left:1px solid #b4975d44}.phone .scene-page{grid-template-rows:44px minmax(0,1fr)}.phone .scene-heading small{display:none}.phone header{min-height:48px;flex-basis:auto}.phone .brand b{display:inline}.phone #pieceCount{display:inline}.phone .phone-dialog-actions{max-height:40%}}
@media(max-height:570px) and (orientation:portrait){.phone .scene-body{grid-template-rows:minmax(0,1fr) 196px}}