/* All game presentation changes are limited to phones. */
#phoneTools { display:none; }
@media (max-width:600px), (max-width:960px) and (max-height:600px) and (pointer:coarse) {
  html { min-height:100%; }
  body { min-width:0; }
  main {
    height:var(--phone-height,100dvh); min-height:480px; max-width:none;
    padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    display:flex; flex-direction:column; gap:6px;
  }
  .masthead { flex:none; display:flex; align-items:center; gap:6px; }
  .masthead > div { flex:1; min-width:0; }
  .masthead .eyebrow, .subtitle, .brand-dots, main > footer { display:none; }
  .masthead h1 { font-size:27px; margin:0; letter-spacing:-1px; white-space:nowrap; }
  .masthead .gold, #phoneTools { margin:0; min-height:44px; padding:8px 10px; font-size:13px; white-space:nowrap; }
  .masthead .gold span { display:none; }
  #phoneTools { display:block; }
  .layout { display:flex; flex:1; min-height:0; align-items:stretch; }
  .board {
    display:flex; flex-direction:column; width:100%; min-width:0; min-height:0;
    padding:8px; border-radius:12px; gap:4px;
  }
  .board > * { order:initial; flex-shrink:0; }
  .board-top { order:0; min-height:26px; gap:4px; }
  .board-top .eyebrow { display:none; }
  .board-top h2 { font-size:19px; margin:0; }
  .badge { font-size:8px; letter-spacing:.5px; padding:4px; }
  .board-rules { order:1; font-size:12px; line-height:1.3; margin:0; }
  .secret { order:2; gap:8px; padding:4px; border-radius:7px; }
  .sealed, .secret .peg { width:24px; height:24px; font-size:16px; }
  #secretLabel { display:none; }
  .composer {
    order:3; position:static; margin:2px 0 0; padding:8px;
    border:1px solid #dfbc7b99; box-shadow:0 0 0 1px #dfbc7b22; backdrop-filter:none;
  }
  .composer-title { font-size:13px; line-height:1.25; }
  .composer-title span { font-size:11px; text-align:right; }
  .sockets { gap:5px; padding:9px 0; }
  .socket { width:44px; height:44px; min-height:44px; min-width:0; flex-shrink:0; }
  .socket .peg { width:34px; height:34px; }
  .socket.selected { outline:3px solid #ffe2a3; outline-offset:2px; }
  .palette { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; padding-top:6px; }
  .color-button { min-width:44px; min-height:44px; padding:1px 0; gap:0; font-size:11px; line-height:1.2; border:1px solid transparent; border-radius:6px; }
  .color-button .peg { width:24px; height:24px; }
  .color-button.chosen-color { border-color:#ffe2a3; background:#dfbc7b22; }
  .composer .actions { margin-top:6px; gap:6px; }
  .composer .actions button { min-height:44px; padding:8px; font-size:14px; white-space:nowrap; }
  .message { margin:5px 0 0; font-size:12px; line-height:1.3; min-height:32px; }
  .history-heading { order:4; align-items:center; min-height:22px; font-size:9px; letter-spacing:0; padding:0 0 3px; gap:4px; position:relative; }
  .history { order:5; min-height:50px; max-height:none; flex:1 1 0; overflow-y:auto; scrollbar-gutter:stable; touch-action:pan-y pinch-zoom; }
  .empty { font-size:16px; margin:0; padding:12px; }
  .guess-row { grid-template-columns:18px minmax(0,1fr) 102px; gap:4px; padding:8px 0; }
  .row-pegs { gap:3px; }
  .row-pegs .peg { width:24px; height:24px; }
  .row-pegs .num { font-size:10px; width:16px; height:16px; line-height:16px; }
  .feedback { font-size:10px; line-height:1.5; }
  .markers { font-size:13px; letter-spacing:1px; min-height:20px; }
  .guess-row:last-child { background:#dfbc7b0d; }
  .outcome { order:6; padding:10px; margin:0; font-size:14px; max-height:30%; overflow:auto; }
  #nextRound { order:7; min-height:44px; }
  .notice { flex:none; margin:0; padding:5px; font-size:12px; line-height:1.3; }
  dialog { max-height:calc(var(--phone-height,100dvh) - 24px); padding:18px; overflow:auto; overscroll-behavior:contain; }
  dialog input:not([type=checkbox]), dialog select { font-size:16px; }
  #phoneMenu { width:min(560px,calc(100% - 20px)); }
  .phone-menu-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .phone-menu-heading h2 { margin:0; }
  .phone-help { margin:12px 0; }
  #phoneMenu .toolbar { margin:12px 0; padding:12px 0; gap:8px; }
  #phoneMenu .toolbar button { flex:1 1 40%; font-size:14px; min-height:44px; }
  #phoneMenu .toggle { min-height:44px; margin-left:0; font-size:14px; }
  #phoneMenu aside { display:block; }
  #phoneMenu .card { padding:14px; margin-bottom:12px; }
  #phoneMenu .card h2 { font-size:23px; }
  #phoneMenu .card p { font-size:14px; }
  #phoneMenu #countLabel { display:flex; align-items:center; gap:8px; min-height:44px; }
}
@media (max-width:360px) {
  .masthead h1 { font-size:24px; }
  .masthead .gold, #phoneTools { padding:8px; }
  .sockets { gap:4px; }
  .composer-title span { font-size:10px; }
  .history { scrollbar-gutter:auto; }
}
@media (max-width:960px) and (max-height:600px) and (pointer:coarse) and (orientation:landscape) {
  main { min-height:330px; }
  .board { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,1fr); grid-template-rows:auto auto auto minmax(0,1fr) auto; gap:4px 12px; }
  .board > * { order:initial; }
  .board-top { grid-column:1; grid-row:1; }
  .board-rules { grid-column:1; grid-row:2; }
  .secret { grid-column:1; grid-row:3; }
  .history-heading { grid-column:1; grid-row:4; align-self:start; }
  .history { grid-column:1; grid-row:4; margin-top:25px; height:calc(100% - 25px); min-height:0; }
  .composer { grid-column:2; grid-row:1 / -1; margin:0; align-self:start; }
  .outcome { grid-column:2; grid-row:1 / 5; max-height:100%; }
  #nextRound { grid-column:2; grid-row:5; }
  .message { min-height:16px; }
}

@media (max-width:360px) {
  main { padding-inline:6px; }
  .board { padding:6px; }
  .composer { padding:6px; }
  .sockets { gap:2px; }
}
@media (max-width:340px) {
  .masthead h1 { font-size:22px; }
}
@media (max-width:600px) and (max-height:580px) and (orientation:portrait) {
  .board:has(#composer:not([hidden])) .secret { display:none; }
  .composer-title span { display:none; }
  .sockets { padding-block:7px; }
  .message { min-height:16px; }
}