/* THW Design: Dordle, Quordle and Octordle ([thw_multi_game]) and the text sections of their pages.
 * Needs thw-design.css (tokens, buttons) and thw-wordle.css (toast, round-over card, animations). */
.thw-ds .mg-top{display:flex;flex-direction:column}
.thw-ds .mg-top .hero-h1{font-size:28px;margin:14px 0 10px}
.thw-ds .mg-top .hero{margin-top:22px}
.thw-ds .mg-top .hero p{margin:0 0 10px;font-size:15px;line-height:1.5;color:var(--mut);max-width:68ch}

.thw-ds .mg{--gap:4px;--bgap:12px;--bw:2px;--cell:min(calc((100vw - 78px) / 10),44px);display:flex;flex-direction:column;align-items:center;gap:8px}
.thw-ds .mg-quordle{--gap:2px;--bgap:8px;--bw:1.5px;--cell:max(18px,min(calc((100vw - 74px) / 10),calc((100svh - 452px) / 18)))}
.thw-ds .mg-octordle{--gap:2px;--bgap:10px;--bw:1px;--cell:min(calc((100vw - 68px) / 10),34px)}
.thw-ds .mg-bar{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%}
.thw-ds .mg-count{font:700 13px/1 var(--body);padding:9px 9px;border-radius:10px;background:var(--y);color:#111;border:2.5px solid #111;box-shadow:3px 3px 0 var(--sh);font-variant-numeric:tabular-nums;white-space:nowrap}
.thw-ds .mg-count:empty{display:none}
.thw-ds .mg-count+.mg-count{background:var(--blue)}
.thw-ds .mg-bar .btn{flex:none;min-height:44px;font-size:14px;padding:0 11px;box-shadow:3px 3px 0 var(--sh);white-space:nowrap}
.thw-ds .mg-modes{display:inline-flex;border:2.5px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:3px 3px 0 var(--sh)}
.thw-ds .mg-mode{min-height:44px;min-width:44px;padding:0 11px;border:0;background:var(--surf);color:var(--ink);font:700 15px/1 var(--body);cursor:pointer}
.thw-ds .mg-mode+.mg-mode{border-left:2.5px solid var(--line)}
.thw-ds .mg-mode[aria-pressed="true"]{background:var(--acc);color:#111}

.thw-ds .mg-play{position:relative;width:100%}
.thw-ds .mg-play .toast{top:6px}
.thw-ds .mg-boards:focus{outline:none}
.thw-ds .mg-boards{display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;gap:var(--bgap)}
.thw-ds .mg-board{display:grid;gap:var(--gap);transition:opacity .2s}
.thw-ds .mg-board.done{opacity:.5}
.thw-ds .mg-row{display:flex;gap:var(--gap)}
/* Small tiles: thin outlines and no offset shadow. */
.thw-ds .mg-cell{width:var(--cell);height:var(--cell);border:var(--bw) solid var(--tEb);border-radius:max(3px,calc(var(--cell) * .14));background:var(--tE);color:var(--ink);display:flex;align-items:center;justify-content:center;font:400 calc(var(--cell) * .6)/1 var(--display);text-transform:uppercase}
.thw-ds .mg-cell.t{border-color:var(--line)}
.thw-ds .mg-cell.g,.thw-ds .mg-cell.y,.thw-ds .mg-cell.x{border-color:var(--tline);color:var(--onTile)}
.thw-ds .mg-cell.g{background:var(--g)}.thw-ds .mg-cell.y{background:var(--y)}.thw-ds .mg-cell.x{background:var(--x)}
.thw-ds .mg-cell.flip{animation:thw-flip .4s ease-out both}

/* Keyboard: the full width, 52px keys. */
.thw-ds .mg-kb{width:100%;display:grid;gap:6px;padding:8px 0;background:var(--bg)}
.thw-ds .mg-kr{display:flex;gap:5px;justify-content:center}
.thw-ds .mg-key{position:relative;flex:1 1 0;min-width:0;height:52px;padding:0;border:2px solid var(--line);border-radius:8px;background:var(--surf);color:var(--ink);font:400 20px/1 var(--display);cursor:pointer;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .08s}
.thw-ds .mg-key:active{transform:translateY(2px)}
.thw-ds .mg-wide{flex:1.55 1 0;font:700 13px/1 var(--body)}
.thw-ds .mg-key.g,.thw-ds .mg-key.y,.thw-ds .mg-key.x{border-color:var(--tline);color:var(--onTile)}
.thw-ds .mg-key.g{background:var(--g)}.thw-ds .mg-key.y{background:var(--y)}.thw-ds .mg-key.x{background:var(--x)}
/* Quordle keys: four quarters, one per board (top left is board 1). */
.thw-ds .mg-q{position:absolute;width:50%;height:50%}
.thw-ds .mg-q0{top:0;left:0}.thw-ds .mg-q1{top:0;right:0}.thw-ds .mg-q2{bottom:0;left:0}.thw-ds .mg-q3{bottom:0;right:0}
.thw-ds .mg-q.g{background:var(--g)}.thw-ds .mg-q.y{background:var(--y)}.thw-ds .mg-q.x{background:var(--x)}
.thw-ds .mg-kl{position:relative;z-index:1}
.thw-ds .mg-key.used .mg-kl{color:#111;text-shadow:0 0 3px #fff,0 0 1px #fff}

/* Round over: the card takes the keyboard's place. */
.thw-ds .mg-end{max-width:440px}
.thw-ds .mg-end p:empty{display:none}
.thw-ds .mg-answers{list-style:none;margin:10px 0 12px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;font-size:14px;text-align:left;white-space:pre-wrap}
.thw-ds .mg-answers strong{font:400 17px/1.2 var(--display);letter-spacing:.04em}
.thw-ds .mg-end-act{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.thw-ds .mg-end-act .btn{flex:1 1 140px;max-width:220px}
.thw-ds .mg-stats{margin:4px 0 0;text-align:center;font-size:13.5px;color:var(--mut)}

/* Text sections of the game pages. */
.thw-ds .mg-sec ol,.thw-ds .mg-sec ul:not(.links){margin:0 0 12px;padding-left:22px;max-width:68ch}
.thw-ds .mg-sec li{margin:0 0 8px}
.thw-ds .mg-sec h3{font-size:18px;margin:18px 0 6px}
.thw-ds .tbl{overflow-x:auto;margin:14px 0 16px;max-width:760px}
.thw-ds .tbl table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surf);border:2.5px solid var(--line);border-radius:12px;box-shadow:4px 4px 0 var(--sh);overflow:hidden;font-size:15px}
.thw-ds .tbl th,.thw-ds .tbl td{text-align:left;padding:10px 12px;border-bottom:2px solid var(--tEb)}
.thw-ds .tbl th{background:var(--surf2);font-weight:700}
.thw-ds .tbl tr:last-child td{border-bottom:0}

/* Phones and tablets: the keyboard stays at the bottom of the screen while the game is on screen. It is sticky
 * inside the game section, so it lets go once the section scrolls past and never sits over the text below. */
@media (max-width:959px){
  .thw-ds .mg-kb{position:sticky;bottom:0;z-index:4;padding-bottom:max(8px,env(safe-area-inset-bottom,0px));box-shadow:0 -6px 0 var(--bg)}
  .thw-ds .mg-boards{padding-bottom:6px}
}
@media (min-width:960px){
  /* H1, then the game card sized to fit the screen at load, then the intro, as on phones. */
  .thw-ds .mg-top{padding-top:32px}
  .thw-ds .mg-top .hero-h1{font-size:48px;line-height:1;margin:0}
  .thw-ds .mg-top .hero{margin-top:28px}
  .thw-ds .mg-top .hero p{font-size:18px}
  .thw-ds .mg{margin-top:20px;background:var(--surf);border:3px solid var(--line);border-radius:20px;padding:20px 24px;box-shadow:8px 8px 0 var(--sh);gap:10px}
  /* Readable minimum tile sizes: tiles grow on tall windows, and on short ones the page scrolls instead of the
   * tiles shrinking below 44px (Dordle), 36px (Quordle) or 30px (Octordle, four across in two rows). */
  .thw-ds .mg{--bw:2px;--cell:max(44px,min(56px,calc((100vh - 520px) / 7)))}
  .thw-ds .mg-quordle{--bw:2px;--cell:max(36px,min(48px,calc((100vh - 520px) / 9)))}
  .thw-ds .mg-octordle{--bw:1.5px;--cell:max(30px,min(36px,calc((100vh - 420px) / 13)))}
  .thw-ds .mg-quordle .mg-boards,.thw-ds .mg-octordle .mg-boards{grid-template-columns:repeat(4,max-content)}
  .thw-ds .mg-octordle .mg-boards{--bgap:18px}
  .thw-ds .mg-quordle .mg-boards{--bgap:22px}
  /* A smaller keyboard on desktop: 46px keys, at most 620px wide, centred. Phones keep 52px full width keys. */
  .thw-ds .mg-bar,.thw-ds .mg-kb{max-width:620px}
  .thw-ds .mg-key{height:46px}
  .thw-ds .mg-kb{background:transparent}
  .thw-ds .mg-sec{margin-top:72px}
}