@media screen {
html.logic-phone{overflow:hidden}
.logic-phone button,.logic-phone select,.logic-phone a{touch-action:manipulation}
.logic-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;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:flex;flex-direction:column}
.logic-phone .masthead,.logic-phone footer{display:none}
.logic-phone #phoneTop{display:flex;gap:6px;align-items:center;justify-content:space-between;flex:0 0 48px;padding:2px 8px;border-bottom:1px solid var(--border)}
.logic-phone #phoneTop a{font-size:12px;display:flex;align-items:center;min-height:44px}
.logic-phone #phoneTop button{padding:5px 10px;font-size:13px}
.logic-phone main{flex:1;min-height:0;width:100%;padding:0 6px;overflow:hidden}
.logic-phone #library{height:100%;overflow:auto;padding:0 6px 20px;overscroll-behavior:contain}
.logic-phone .hero{padding:20px 0;min-height:0;display:block}.logic-phone .study-art{display:none}.logic-phone .hero h1{font-size:36px}.logic-phone .stats{margin-bottom:20px}.logic-phone .filters{grid-template-columns:1fr 1fr}.logic-phone .cards{grid-template-columns:1fr}
.logic-phone #play{position:relative;height:100%;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.logic-phone .puzzle-top{height:28px;min-height:28px;margin:0;justify-content:flex-end}.logic-phone .puzzle-meta{gap:8px;font-size:11px}.logic-phone #favoriteBtn{min-height:28px;height:28px;padding:0 10px;font-size:21px}
.logic-phone .play-title{font-size:17px;line-height:1.2;margin:0;position:absolute;top:5px;left:4px;max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logic-phone #puzzleTheme{display:none}
.logic-phone .workspace{flex:1;min-height:calc(var(--grid-readable-height,150px) + 340px);display:grid;align-items:stretch;grid-template-columns:1fr;grid-template-rows:minmax(calc(var(--grid-readable-height,150px) + 176px),1.65fr) minmax(150px,1fr);gap:6px;padding-bottom:5px}
.logic-phone .grid-area{min-height:0;display:grid;grid-template-rows:46px minmax(var(--grid-readable-height,150px),1fr) 46px 38px 46px;overflow:hidden}
.logic-phone #phoneGridTools{display:flex;gap:3px;align-items:center;position:relative;padding-right:0}
.logic-phone #pairSelect{width:0;flex:1.8;min-width:90px;font-size:12px;padding:4px;margin:0;min-height:44px}
.logic-phone #phoneGridTools button{flex:1;min-width:52px;padding:2px;font-size:11px;line-height:1.15;min-height:44px}
.logic-phone #phoneZoom{position:absolute;right:2px;bottom:0;font-size:9px;pointer-events:none;color:var(--text);background:var(--bg);border-radius:3px;padding:0 2px}
.logic-phone #grids{min-height:0;overflow:auto;overscroll-behavior:auto;touch-action:pan-x pan-y;border:1px solid var(--border);border-radius:6px;background:var(--panel)}
.logic-phone .grid-box{padding:0;margin:0;border:0;border-radius:0;overflow:visible;width:max-content;min-width:100%}.logic-phone .grid-box h3{display:none}
.logic-phone #grids .logic-grid{width:max-content;min-width:0!important;table-layout:fixed;border-spacing:2px;margin:0}
.logic-phone #grids .logic-grid th{font-size:13px;width:76px;min-width:76px;padding:5px;overflow-wrap:normal;line-height:1.2;background:var(--panel)}
.logic-phone #grids .logic-grid th:first-child{width:102px;min-width:102px;position:sticky;left:0;z-index:2}
.logic-phone #grids .logic-grid thead th{position:sticky;top:0;z-index:3;vertical-align:middle}.logic-phone #grids .logic-grid thead th:first-child{z-index:4}
.logic-phone #grids .cell{width:76px;min-width:76px;height:46px;min-height:46px;font-size:23px;touch-action:pan-x pan-y}
.logic-phone #grids .active-label{background:#394454!important;color:#fff0bd}
.logic-phone #phoneScroll{display:flex;align-items:center;gap:4px;min-width:0}
.logic-phone #phoneScroll span{flex:1;font-size:11px;line-height:1.2;color:var(--muted)}
.logic-phone #phoneScroll button{width:44px;min-width:44px;min-height:44px;padding:3px;font-size:22px}
.logic-phone #grids{scrollbar-width:auto;scrollbar-color:var(--gold) var(--bg);-webkit-overflow-scrolling:touch}
.logic-phone #cellInfo{margin:0;padding:3px 4px;font-size:12px;line-height:1.3;min-height:0;overflow:auto}
.logic-phone #phoneMarks{display:flex;gap:4px;padding:1px 0}.logic-phone #phoneMarks button{flex:1;padding:3px;font-size:13px;min-width:0;min-height:44px}
.logic-phone .clue-panel{position:static;margin-top:0;min-height:0;max-height:none;padding:6px 8px;display:flex;flex-direction:column;overflow:hidden}
.logic-phone .clue-heading{margin:0;flex:none}.logic-phone .clue-heading h2{font-size:18px}.logic-phone #clueCount{font-size:12px}.logic-phone .clue-panel>.small{font-size:11px;line-height:1.3;margin:1px 0}
.logic-phone #clues{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;margin:0;padding:0}
.logic-phone .clue{padding:3px 0;gap:4px}.logic-phone .clue button{font-size:.875rem;line-height:1.4;padding:5px}.logic-phone .clue input{width:28px;height:28px;min-height:28px;margin:8px 3px}
.logic-phone #phonePinned{font-size:.875rem;line-height:1.4;color:#fff3d8;background:#3f3542;border:1px solid #b9965e;border-radius:4px;padding:6px;max-height:40%;flex:none;overflow:auto}
.logic-phone.landscape .workspace{min-height:calc(var(--grid-readable-height,150px) + 176px);grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.logic-phone .complete-banner{font-size:12px;padding:4px 8px;margin:0;max-height:60px;overflow:auto}.logic-phone .complete-banner h2{font-size:16px}
.logic-phone dialog{max-height:calc(var(--phone-height,100dvh) - 16px);max-width:calc(var(--phone-width,100vw) - 16px);width:680px;padding:8px 12px;overflow:auto;overscroll-behavior:contain}
.logic-phone .dialog-head{top:-8px;padding:4px 0;gap:10px}.logic-phone .dialog-head h2{font-size:21px}.logic-phone .dialog-head button{min-height:44px;padding:6px 10px;font-size:15px}
.logic-phone .dialog-actions{position:sticky;bottom:-8px;background:var(--panel);padding:8px 0;flex-wrap:wrap}
.logic-phone #phoneCommon,.logic-phone .action-row,.logic-phone .secondary-actions{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.logic-phone #phoneMenuBody p{font-size:14px}.logic-phone #phoneMenuBody .rules{margin:12px 0}.logic-phone #phoneMenuBody .notes-label{margin-top:14px}.logic-phone #notes{min-height:100px}.logic-phone #hintPanel{margin:0;border:0;padding:8px}
.logic-phone #toast{top:52px;bottom:auto;max-height:35%;overflow:auto;font-size:13px;padding:8px 12px}
.logic-phone #storageWarning{max-height:25%;overflow:auto}
}