/* Mobile/game-oriented UI layer. Uses inline Lucide-style SVG symbols from index.html. */
.uiIcon{width:18px;height:18px;display:block;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.iconButton,.toolMenu>summary{width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:8px}
.iconButton{border:1px solid var(--bd);background:var(--panel)}
.iconButton:disabled{opacity:.35}

#installBtn{white-space:nowrap;font-weight:650;flex:0 0 auto}
body.loaded #installBtn{display:none!important}

#pageDropOverlay{position:fixed;inset:12px;z-index:9999;display:none;place-items:center;pointer-events:none;border:3px dashed var(--accent);border-radius:18px;background:color-mix(in srgb,var(--accent) 12%,rgba(10,14,20,.72));backdrop-filter:blur(3px);color:#fff;text-align:center}
#pageDropOverlay.show{display:grid}
#pageDropOverlay .dropOverlayInner{display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:12px;background:rgba(0,0,0,.32);font-weight:750}

.playLayout{display:grid;grid-template-columns:minmax(620px,1fr) minmax(390px,500px);gap:14px;align-items:start}
.playSurface{min-width:0}
.gameBar{display:flex;align-items:center;gap:10px;min-height:44px;padding:5px 7px;margin-bottom:7px;border:1px solid var(--bd);border-radius:11px;background:var(--panel)}
.gameProgress{display:flex;align-items:center;gap:6px;min-width:0}
.catProgressIcon{color:var(--accent)}
.catCounter{font-variant-numeric:tabular-nums;font-size:18px;line-height:1;font-weight:800;white-space:nowrap}
.catCounter small{font-size:11px;font-weight:650;color:var(--muted);margin-right:3px}
.gameStatus{margin-left:4px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--muted)}
.gameTools{margin-left:auto;display:flex;align-items:center;gap:5px;position:relative}

.toolMenu{position:relative;margin:0;padding:0;border:0}
.toolMenu>summary{list-style:none;cursor:pointer;border:1px solid var(--bd);background:var(--panel);color:var(--text)}
.toolMenu>summary::-webkit-details-marker{display:none}
.toolMenu[open]>summary{background:var(--soft)}
.toolMenuPanel{position:absolute;z-index:80;top:41px;right:0;min-width:210px;padding:6px;border:1px solid var(--bd);border-radius:10px;background:var(--panel);box-shadow:0 12px 28px rgba(0,0,0,.2)}
.toolMenuPanel button{width:100%;display:flex;align-items:center;gap:8px;text-align:left;border:0;background:transparent;padding:9px 10px;border-radius:7px}
.toolMenuPanel button:hover{background:var(--soft)}
.toolMenuPanel .menuNote{padding:5px 10px 7px;color:var(--muted);font-size:11px;border-bottom:1px solid var(--bd);margin-bottom:3px}

.playSurface .boardCard{margin:0}
.actionDock{display:flex;align-items:stretch;gap:6px;margin-top:7px;padding:6px;border:1px solid var(--bd);border-radius:10px;background:var(--panel)}
.actionDock button{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.15}
.actionDock .primaryHint{flex:1.6;font-weight:750;background:var(--accent);color:#fff;border-color:transparent}
.actionDock .applyAction{flex:1;font-weight:750;background:var(--ok);color:#fff;border-color:transparent}
.actionDock .secondaryAction{flex:0 0 auto;padding-inline:10px;font-size:12px}
.actionDock #clearCheatBtn:disabled{display:none}

.contentPanels{display:grid;gap:10px}
.feedbackCard{padding:10px}
.feedbackHead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px}
.feedbackHead h2{margin:0;font-size:14px}
.feedbackCard[hidden]{display:none!important}
.feedbackCard .message:empty{display:none}
.feedbackCard .message{margin-top:6px}
#autoFixBtn:disabled{display:none}

/* Guide cell references: no pill frame around every coordinate. */
.cellPosRef{border:0!important;background:transparent!important;border-radius:0!important;padding:0!important;margin:0 .08em!important;gap:4px!important;font-weight:700!important}
.cellPosRef svg{width:15px!important;height:15px!important}
.cellPosRef svg rect{stroke:none!important}
.cellPosRefs{gap:7px!important;row-gap:5px!important}

/* Result groups are compact rectangular rows, not large rounded pills. */
#hintMsg .badges{display:block;margin-top:7px}
#hintMsg .badge.cat,#hintMsg .badge.x{width:100%;display:flex;align-items:flex-start;gap:7px;border-radius:6px;padding:6px 8px;font-size:12px;line-height:1.45}
#hintMsg .badge.cat{color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,var(--soft));border-color:color-mix(in srgb,var(--ok) 42%,var(--bd))}
#hintMsg .badge.x{color:var(--danger);background:color-mix(in srgb,var(--danger) 7%,var(--soft));border-color:color-mix(in srgb,var(--danger) 38%,var(--bd))}
#hintMsg .badge.cat::before,#hintMsg .badge.x::before{content:"";width:15px;height:15px;flex:0 0 auto;margin-top:1px;background:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center}
#hintMsg .badge.cat::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 8 3 3l6 3h6l6-3-2 5c1.3 1.6 2 3.5 2 5.6C21 18.2 17.1 22 12 22S3 18.2 3 13.6C3 11.5 3.7 9.6 5 8Zm4.2 4.4a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Zm5.6 0a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4ZM9.5 16c.8.8 1.6 1.2 2.5 1.2s1.7-.4 2.5-1.2l-1.1-1.1c-.5.5-.9.7-1.4.7s-.9-.2-1.4-.7L9.5 16Z'/%3E%3C/svg%3E")}
#hintMsg .badge.x::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m6.4 5 5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5Z'/%3E%3C/svg%3E")}
#hintMsg .badge.strategy{border-radius:5px;padding:2px 6px}
#hintMsg .trace{border-radius:6px}

.settingsCard{padding:0}
.settingsCard>summary{padding:10px 12px;font-weight:650;color:var(--text)}
.settingsCard .settingsGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 10px 10px}
.settingsCard .settingsGrid button{align-self:end}

#helpDialog{width:min(560px,calc(100vw - 24px));max-height:min(760px,calc(100svh - 32px));padding:0;border:1px solid var(--bd);border-radius:14px;background:var(--panel);color:var(--text);box-shadow:0 24px 60px rgba(0,0,0,.35)}
#helpDialog::backdrop{background:rgba(0,0,0,.48);backdrop-filter:blur(2px)}
.helpHead{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-bottom:1px solid var(--bd);background:var(--panel)}
.helpHead h2{margin:0;font-size:17px}
.helpBody{padding:12px 14px 16px;line-height:1.65;font-size:13px}
.helpBody h3{font-size:14px;margin:14px 0 5px}
.helpBody ul{margin:5px 0 0;padding-left:20px}
.helpBody .helpKeys{display:grid;grid-template-columns:auto 1fr;gap:7px 10px;align-items:start}
.helpBody .helpKeys .uiIcon{margin-top:2px}

@media(max-width:1120px){
  .playLayout{grid-template-columns:1fr}
  .contentPanels{grid-template-columns:1fr 1fr}
  .settingsCard{grid-column:1/-1}
}

@media(max-width:760px){
  .appShell{padding:10px 8px 22px!important}
  .appHeader{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:9px 10px;align-items:start;margin-bottom:10px!important}
  .appHeader .brand{grid-column:1;grid-row:1;min-width:0}
  .appHeader .brand h1{font-size:22px;line-height:1.1;margin:0}
  .appHeader .brand p{display:none}
  #installBtn{grid-column:2;grid-row:1;width:auto;min-width:max-content;padding:8px 10px;font-size:12px;line-height:1.15}
  .appHeader .drop,body.loaded .appHeader .drop{grid-column:1/-1;grid-row:2;width:100%!important;max-width:none!important;margin:0!important;min-height:58px!important;padding:9px 12px!important}
  body.loaded .appHeader{display:none!important}

  #work{margin-top:0!important}
  .playLayout{display:block}
  .playSurface{position:sticky;top:0;z-index:35;margin:0 -8px 8px;padding:5px 8px 7px;background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom:1px solid var(--bd);box-shadow:0 5px 14px rgba(0,0,0,.10);backdrop-filter:blur(8px)}
  .gameBar{min-height:40px;margin:0 0 5px;padding:3px 4px;border:0;border-radius:8px;background:transparent}
  .catCounter{font-size:17px}
  .catCounter small{font-size:10px}
  .gameStatus{max-width:30vw;font-size:10px}
  .gameTools{gap:3px}
  .iconButton,.toolMenu>summary{width:34px;height:34px;border-radius:7px}
  .toolMenuPanel{top:38px;right:0;min-width:205px}

  .playSurface .boardCard{padding:3px!important;border-radius:9px!important}
  .playSurface .boardCard canvas{width:auto;max-width:100%;max-height:57svh;margin:auto}
  .boardHelp{display:none!important}

  .actionDock{gap:4px;margin-top:5px;padding:4px;border-radius:8px}
  .actionDock button{min-height:36px;padding:6px 8px;border-radius:7px}
  .actionDock .primaryHint{flex:1.75;font-size:13px}
  .actionDock .applyAction{flex:.9;font-size:13px}
  .actionDock .secondaryAction{padding-inline:7px;font-size:11px}
  .actionDock .secondaryAction .buttonLabel{display:none}
  .actionDock .secondaryAction .uiIcon{width:17px;height:17px}

  .contentPanels{display:grid;grid-template-columns:1fr;gap:7px}
  .feedbackCard{padding:8px;border-radius:8px}
  .feedbackHead h2{font-size:13px}
  .feedbackCard .message{padding:8px 9px;font-size:12px;line-height:1.55;border-radius:6px}
  #hintMsg .stepTitle{font-size:13px;margin-bottom:4px}
  #hintMsg .cellPosRefs{display:inline-flex;gap:6px}
  .settingsCard{grid-column:auto}
  .settingsCard .settingsGrid{grid-template-columns:1fr 1fr}
  .settingsCard .settingsGrid .ctrl:last-of-type{grid-column:1/-1}

  .diagnostics{margin-top:8px!important}
  .diagnostics>summary{padding:9px 10px!important;font-size:12px}
  .diagnosticsGrid{grid-template-columns:1fr!important;padding:0 9px 9px!important;gap:6px!important}
}

@media(max-width:430px){
  .gameStatus{display:none}
  .actionDock .primaryHint{flex:1.55}
  .actionDock .applyAction{flex:.8}
}