/* Phone-only surface; desktop selectors and assets are untouched. */
#mtRotate{display:none}
body.mt-phone{overflow:hidden;-webkit-text-size-adjust:100%}
body.mt-phone #app{width:100%;height:var(--phone-height,100dvh);min-height:0;padding:0;overflow:hidden}
body.mt-phone #app>.topbar{height:44px;min-height:44px;padding:0 10px;gap:5px;flex-wrap:nowrap}
body.mt-phone #app>.topbar .brand{flex:1;min-width:0;white-space:nowrap}
body.mt-phone #app>.topbar .brand b{font-size:14px;white-space:nowrap}
body.mt-phone .topbar .resources,body.mt-phone .topbar .brand small{display:none}
body.mt-phone .topbar .header-actions{display:flex;gap:2px;margin-left:auto}
body.mt-phone .topbar .header-actions button{font-size:14px;min-width:32px;min-height:36px;padding:4px}
body.mt-phone .topbar .header-actions button:before{content:none!important}
body.mt-phone #app .occult-workspace{width:100%!important;max-width:none!important;height:calc(var(--phone-height,100dvh) - 44px)!important;margin:0!important;padding:0!important}
body.mt-phone #app #tableView.cx-table.active{inset:0;width:100%;height:100%;min-height:0;max-height:none;margin:0!important;padding:32px 8px max(8px,env(safe-area-inset-bottom));border-width:3px;grid-template-areas:"verbs" "dock";grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 196px;gap:8px}
body.mt-phone #app .table-verbs{display:block;min-height:0;overflow:auto;grid-area:verbs}
body.mt-phone #app .table-card-dock{position:relative;grid-area:dock;height:196px;min-height:0;inset:auto;margin:0}
body.mt-phone #app .wb-dock-row{display:grid!important;grid-template-rows:repeat(2,86px);grid-auto-flow:column;grid-auto-columns:calc((100% - 24px)/5);gap:8px 6px;height:194px;padding:8px;overflow-x:auto;overflow-y:hidden;align-items:start;justify-content:start}
body.mt-phone #app .cx-card.wb-card{width:58px;height:86px;min-width:0;flex-basis:58px}
body.mt-phone #app .wb-dock-row .cx-card{width:100%}
body.mt-phone #app .cx-card .wb-card-art{width:100%;height:56px;flex-basis:56px}
body.mt-phone #app .cx-card>b{font-size:12px;line-height:1.15;padding:2px;max-height:28px}
body.mt-phone #app .wb-snap-label{display:none}
body.mt-phone #app .cx-verb-tile{width:60px!important;height:60px!important;padding:4px!important;border-width:4px!important}
body.mt-phone #app .cx-verb-tile>.cx-clock{width:80px;height:80px;inset:-14px}
body.mt-phone #app .cx-verb-node{height:92px}
body.mt-phone #app .cx-verb-name{font-size:13px}
body.mt-phone #app .table-controls{top:2px!important;left:8px!important;height:28px;gap:4px}
body.mt-phone #app .table-controls button{font-size:12px;padding:4px;min-height:28px}
body.mt-phone #app .cx-detail{position:fixed;left:8px;right:8px;top:48px;width:auto;max-height:calc(var(--phone-height,100dvh) - 260px);overflow:auto;z-index:60}
body.mt-phone #app .cx-detail-body{display:flex;flex-direction:column;padding:10px;gap:10px;min-height:0}
body.mt-phone #app .cx-detail-copy p{font-size:14px;line-height:1.5;margin:0}
body.mt-phone #app .cx-detail-copy small{display:none}
body.mt-phone #app .cx-detail-slots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
body.mt-phone #app .cx-detail footer{position:sticky;bottom:0;background:#071821;padding:6px}
body.mt-phone #app .cx-detail footer button{min-height:40px}
body.mt-phone #cx-tooltip{display:block;position:fixed!important;left:12px!important;right:12px;top:64px!important;width:auto;max-height:35dvh;overflow:auto;font-size:14px}
body.mt-phone #cx-tooltip[hidden]{display:none}
body.mt-phone #moreMenu{width:190px;top:48px;right:8px}
body.mt-phone #moreMenu button{font-size:14px;min-height:40px}
body.mt-phone .title-screen{height:var(--phone-height,100dvh);min-height:0;overflow:auto;padding:20px;background-position:35% center}
body.mt-phone .title-screen .title-card{width:100%!important;max-width:380px;margin:auto;padding:20px!important}
body.mt-phone .overlay .modal{width:100%;max-height:calc(var(--phone-height,100dvh) - 24px);overflow:auto}
body.mt-phone .hn-narrative-copy,body.mt-phone .hn-scene-copy{max-height:var(--phone-height,100dvh);overflow:auto;padding:24px!important}
body.mt-phone .hn-picture-stage .hn-dream-visual{background-size:contain!important;background-repeat:no-repeat;background-color:#000}
body.mt-phone .hn-picture-stage .hn-dream-visual img{object-fit:contain}
@media(orientation:landscape){body.mt-phone #mtRotate{display:grid;position:fixed;inset:0;place-items:center;background:#07181b;color:#e7e3cf;z-index:20000;font-size:18px}body.mt-phone #app{visibility:hidden}}

/* Keep phone dialogs inside the visual viewport, including the on-screen keyboard. */
body.mt-phone #overlay{inset:auto;left:var(--phone-left,0px);top:var(--phone-top,0px);width:var(--phone-width,100vw);height:var(--phone-height,100dvh);padding:12px 12px calc(64px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;overflow:hidden}
body.mt-phone #overlay .modal{box-sizing:border-box;min-width:0;width:100%;max-width:100%;min-height:0;max-height:100%;margin:0;padding:16px;overflow:auto;overscroll-behavior:contain;overflow-wrap:anywhere;touch-action:pan-y;-webkit-overflow-scrolling:touch}
body.mt-phone #overlay .modal>*{min-width:0;max-width:100%}
body.mt-phone #overlay .modal h2{font-size:18px;padding-right:32px}
body.mt-phone #overlay .modal-actions{position:sticky;bottom:-16px;background:#081e27;padding:10px 0;margin-bottom:-8px;display:flex;flex-wrap:wrap}
body.mt-phone #overlay .modal-actions button{min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
body.mt-phone #cx-tooltip{box-sizing:border-box;left:calc(var(--phone-left,0px) + 12px)!important;right:auto!important;top:calc(var(--phone-top,0px) + 52px)!important;bottom:auto;width:calc(var(--phone-width,100vw) - 24px)!important;max-width:calc(var(--phone-width,100vw) - 24px)!important;min-width:0;max-height:min(35dvh,calc(var(--phone-height,100dvh) - 128px));overflow:auto;overflow-wrap:anywhere;overscroll-behavior:contain;pointer-events:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch}
/* Fixed pages keep every hint and its controls visible without scrolling. */
body.mt-phone #overlay .modal.mt-paged-dialog{overflow:hidden;touch-action:auto}
body.mt-phone #overlay .modal.mt-paged-dialog{height:min(440px,100%);display:flex;flex-direction:column;gap:8px}
body.mt-phone #overlay .mt-paged-dialog #modalKicker,body.mt-phone #overlay .mt-paged-dialog #modalTitle,body.mt-phone #overlay .mt-paged-dialog #modalMeta,body.mt-phone #overlay .mt-paged-dialog #modalActions{flex-shrink:0;margin:0}
body.mt-phone #overlay .mt-paged-dialog #modalBody,body.mt-phone #cx-tooltip .mt-page-host{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;margin:0}
body.mt-phone .mt-page-copy{flex:1;min-height:0;overflow:hidden;white-space:pre-wrap;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
body.mt-phone .mt-page-nav{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;height:40px;margin-top:6px}
body.mt-phone .mt-page-nav button{display:block;min-height:36px;font-size:13px;padding:4px 8px}
body.mt-phone .mt-page-nav span{font-size:12px}
body.mt-phone #cx-tooltip{display:flex;flex-direction:column;height:min(280px,calc(var(--phone-height,100dvh) - 128px));max-height:calc(var(--phone-height,100dvh) - 128px);overflow:hidden;touch-action:auto}
body.mt-phone #cx-tooltip h3{flex-shrink:0;margin:0 0 8px}
body.mt-phone #cx-tooltip .wb-tooltip-art{display:none}
body.mt-phone #overlay .modal-actions{position:static;flex:none;padding:6px 0 0;margin:0}
