:root {
  --text-scale: 1;
  --bg: #262421;
  --panel: #302e2c;
  --text: #e6e3df;
  --muted: #9b9790;
  --accent: #6aa2d8;
  --board: min(68vh, 600px);
  --after: #e8590c;  /* variation: best play after your move */
  --best: #2f9e44;   /* variation: better was */
  --user: #c9a96e;   /* your own moves */
  --pass: #9c36b5;   /* imagine one side skips a move */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* the update offer floats over every view (games list and board alike) */
#update { position: fixed; z-index: 50; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 2px 10px rgba(0,0,0,.5); }
body { margin: 0; background: var(--bg); color: var(--text); font: calc(14px * var(--text-scale))/1.4 system-ui, "Segoe UI", sans-serif; }
header { padding: 10px 20px; border-bottom: 1px solid #3c3a37; }
h1 { font-size: calc(18px * var(--text-scale)); margin: 0 0 8px; font-weight: 600; }
.muted { color: var(--muted); font-weight: 400; }

#loader { display: flex; gap: 10px; align-items: flex-start; }
#input { flex: 1; height: 52px; resize: vertical; background: var(--panel); color: var(--text); border: 1px solid #45423e; border-radius: 4px; padding: 6px 8px; font: calc(12px * var(--text-scale))/1.3 Consolas, monospace; }
.loader-buttons { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; max-width: 560px; }
#user, #user-cc { width: 170px; background: var(--panel); color: var(--text); border: 1px solid #45423e; border-radius: 4px; padding: 6px 8px; font: inherit; }
#reviews { max-width: 280px; background: var(--panel); color: var(--text); border: 1px solid #45423e; border-radius: 4px; padding: 5px; font: inherit; }
#error { color: #e07b6a; }

button { background: var(--accent); color: #111; border: 0; border-radius: 4px; padding: 6px 12px; font: inherit; cursor: pointer; }
button.secondary { background: #4a4743; color: var(--text); }
button.small { font-size: calc(12px * var(--text-scale)); padding: 3px 8px; margin-top: 6px; }
button:hover { filter: brightness(1.1); }

main { display: flex; gap: 14px; padding: 14px 20px; align-items: flex-start; }

/* eval bar, aligned with the board between the two player bars */
#evalbar { position: relative; width: 22px; height: var(--board); margin-top: 58px; background: #403d39; border-radius: 3px; overflow: hidden; }
#evalfill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--wcp, 50%); background: #f1efe9; transition: height .35s ease, width .35s ease; }
#evalbar.flipped #evalfill { bottom: auto; top: 0; }
#evaltext { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: calc(10px * var(--text-scale)); font-weight: 700; color: #333; }
#evalbar.black-better #evaltext { bottom: auto; top: 4px; color: #ddd; }
#evalbar.flipped #evaltext { bottom: auto; top: 4px; }
#evalbar.flipped.black-better #evaltext { top: auto; bottom: 4px; }

/* player bars, Lichess style */
.player { width: var(--board); height: 32px; display: flex; align-items: center; gap: 6px; font-size: calc(15px * var(--text-scale)); }
.player .dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; border: 1px solid #888; }
.player .dot.white { background: #f4f2ee; }
.player .dot.black { background: #111; }
.player .you { background: var(--accent); color: #111; border-radius: 3px; padding: 0 5px; font-size: calc(12px * var(--text-scale)); font-weight: 700; }
.player .to-move { color: var(--muted); font-size: calc(12px * var(--text-scale)); }
.player .lead { color: #69db7c; font-weight: 700; }
.player .flip { margin-left: auto; font-size: calc(13px * var(--text-scale)); padding: 3px 10px; }

/* what am I looking at: the game, or a variation */
#context { width: var(--board); min-height: 26px; padding: 3px 8px; border-radius: 3px 3px 0 0; font-size: calc(13px * var(--text-scale)); }
#context.ctx-game { background: #3a3734; }
#context.ctx-var { background: #4a3b2a; }
#context.ctx-after { background: #5a3418; }
#context.ctx-best { background: #1f4a2a; }
#context.ctx-user { background: #4d4329; }
#context .notgame { color: #ffd8a8; font-weight: 600; }
#board-wrap { width: var(--board); outline: 3px solid transparent; }
#board-wrap.var-after { outline-color: var(--after); }
#board-wrap.var-best { outline-color: var(--best); }
#board-wrap.var-user { outline-color: var(--user); }
#board { width: var(--board); height: var(--board); }

#caption { width: var(--board); min-height: 40px; margin-top: 8px; padding: 8px 10px; background: var(--panel); border-left: 3px solid var(--accent); border-radius: 3px; font-size: calc(15px * var(--text-scale)); }
#nav { display: flex; gap: 6px; margin-top: 8px; align-items: center; width: var(--board); flex-wrap: wrap; }
#nav button[data-nav] { min-width: 42px; }
#whatif-label { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: calc(13px * var(--text-scale)); cursor: pointer; user-select: none; }

#compare { width: var(--board); height: var(--board); display: flex; gap: 12px; align-items: flex-start; }
#compare figure { margin: 0; flex: 1; }
#compare .mini { width: calc((var(--board) - 12px) / 2); height: calc((var(--board) - 12px) / 2); }
#compare figcaption { margin-top: 6px; font-size: calc(13px * var(--text-scale)); }

aside { flex: 1; min-width: 300px; margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
section { background: var(--panel); border-radius: 4px; padding: 10px 12px; }
.engine-head { display: flex; gap: 10px; align-items: baseline; }
#score { font-size: calc(22px * var(--text-scale)); font-weight: 700; min-width: 70px; }
#engine-name { margin-left: auto; font-size: calc(12px * var(--text-scale)); }
#pv { margin-top: 6px; font: calc(13px * var(--text-scale))/1.6 Consolas, monospace; color: #cfcac2; min-height: 2.6em; }
#pv .m { cursor: pointer; padding: 0 2px; border-radius: 2px; }
#pv .m:hover { background: #4a4743; }

.sec-title { font-weight: 600; margin-bottom: 6px; }
.moment { cursor: pointer; padding: 3px 6px; border-radius: 3px; }
.moment:hover { background: #4a4743; }
.mnum { color: var(--muted); font-family: Consolas, monospace; }

/* move list */
#moves { font: calc(13px * var(--text-scale))/1.7 Consolas, monospace; }
/* one scrollbar for the jump list and the move list together */
#study { max-height: calc(var(--board) - 40px); overflow-y: auto; }
#moments { border-bottom: 1px solid #45423e; padding-bottom: 6px; margin-bottom: 8px; position: sticky; top: -10px; background: var(--panel); z-index: 2; }
#moves .row { display: grid; grid-template-columns: 38px minmax(0, 150px) minmax(0, 150px); } /* compact moves; comments take the width */
#moves .num { color: var(--muted); }
.mv { cursor: pointer; padding: 0 4px; border-radius: 2px; }
.mv:hover { background: #4a4743; }
.mv.placeholder { color: var(--muted); cursor: default; }
.mv.current { background: var(--accent); color: #111 !important; }
.mv.extra { color: #77736d; }
.mv.loss { box-shadow: inset 0 -2px 0 #ff6b6b; }
.mv.gain { box-shadow: inset 0 -2px 0 #69db7c; }
.mv.user { color: var(--user); font-style: italic; }
.j-blunder { color: #ff6b6b; }
.j-mistake { color: #ffa94d; }
.j-inaccuracy { color: #ffd43b; }
#moves .mv.j-blunder, #moves .mv.j-mistake, #moves .mv.j-inaccuracy { font-weight: 700; }
#moves .result { color: var(--muted); padding-top: 4px; }
.neg { color: #ff6b6b; font-weight: 700; }
.pos { color: #69db7c; font-weight: 700; }

/* comments and variations under a move */
.block { margin: 2px 0 6px 38px; font: calc(13px * var(--text-scale))/1.5 system-ui, "Segoe UI", sans-serif; }
.comment { border-left: 3px solid #666; padding: 4px 8px; background: #2a2826; border-radius: 0 3px 3px 0; }
.comment.jb-blunder { border-left-color: #ff6b6b; }
.comment.jb-mistake { border-left-color: #ffa94d; }
.comment.jb-inaccuracy { border-left-color: #ffd43b; }
.comment p { margin: 3px 0; }
.comment .rlabel { color: var(--accent); font-weight: 600; }
.vline { margin-top: 4px; font: calc(13px * var(--text-scale))/1.7 Consolas, monospace; }
.vline .vlabel { font: 600 calc(12px * var(--text-scale)) system-ui, "Segoe UI", sans-serif; margin-right: 6px; }
.v-after .vlabel { color: var(--after); }
.v-best .vlabel { color: var(--best); }
.v-after { border-left: 2px solid var(--after); padding-left: 6px; }
.v-best { border-left: 2px solid var(--best); padding-left: 6px; }
.v-user { border-left: 2px solid var(--user); padding-left: 6px; }
.inline .settle { color: var(--accent); font-weight: 700; margin: 0 4px; }
.subvar { margin-left: 14px; border-left: 2px solid var(--user); padding-left: 6px; }
.help { font-size: calc(12px * var(--text-scale)); margin: 0; }

/* chat */
#chat-log { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
#chat-log:empty { display: none; }
.msg { padding: 6px 9px; border-radius: 6px; max-width: 92%; }
.msg.user { align-self: flex-end; background: #3d4f63; }
.msg.assistant { align-self: flex-start; background: #3a3734; }
.msg .meta { font-size: calc(11px * var(--text-scale)); color: var(--muted); margin-top: 3px; }
.msg .warn { font-size: calc(11px * var(--text-scale)); color: #ffd43b; margin-top: 3px; }
.msg .where { font-size: calc(11px * var(--text-scale)); color: var(--muted); margin-bottom: 2px; }
#chat-suggest { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.chip { font-size: calc(12px * var(--text-scale)); padding: 3px 8px; border-radius: 12px; }
#chat-row { display: flex; gap: 6px; }
#chat-input { flex: 1; resize: vertical; background: #262421; color: var(--text); border: 1px solid #45423e; border-radius: 4px; padding: 6px 8px; font: inherit; }
#chat-status { font-size: calc(12px * var(--text-scale)); min-height: 16px; margin-top: 3px; }
/* the free app's pointer to the paid coach */
.plus-card { background: #2f3b2a; border: 1px solid #4f6b3f; border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
.plus-card p { margin: 4px 0 6px; }
.plus-badge { font-size: calc(11px * var(--text-scale)); font-weight: 600; color: #262421; background: #9bc53d; border-radius: 3px; padding: 1px 5px; }
.plus-link { display: inline-block; color: #262421; background: #9bc53d; border-radius: 4px; padding: 4px 10px; font-weight: 600; text-decoration: none; }
.msg .plus-link { margin-top: 6px; }

/* "imagine one side skips a move" lines, and the comment's two sections */
#context.ctx-pass { background: #3f2449; }
#board-wrap.var-pass { outline-color: var(--pass); }
.v-pass { border-left: 2px solid var(--pass); padding-left: 6px; }
.v-pass .vlabel { color: #d0a3e0; }
.mv.pass { color: #d0a3e0; font-style: italic; }
.csec { margin-top: 6px; }
.csec .subs { margin-left: 12px; }
.csec .sub { margin: 3px 0; }
.csec .slabel { color: #9fc3e8; font-weight: 600; }

/* ---------- phone layout (portrait) ---------- */
#strip, #sheet-tabs, #explain, #games, #settings-sheet { display: none; }

@media (max-width: 820px) {
  :root { --board: min(calc(100vw - 12px), 600px); }
  header { padding: 6px 10px; }
  header h1 { margin: 0; font-size: calc(16px * var(--text-scale)); }
  main { flex-direction: column; gap: 6px; padding: 4px 6px 24px; align-items: stretch; }
  #board-col { order: 1; }
  aside { order: 2; margin-top: 4px; max-width: none; min-width: 0; }

  /* eval bar: a thin horizontal bar above the board */
  #evalbar { order: 0; width: var(--board); height: 8px; margin: 0; border-radius: 4px; }
  #evalfill { top: 0; bottom: 0; height: 100%; width: var(--wcp, 50%); transition: width .35s ease; }
  #evalbar.flipped #evalfill { left: auto; right: 0; }
  #evaltext { display: none; }

  .player { height: 30px; font-size: calc(14px * var(--text-scale)); }
  #context { font-size: calc(12px * var(--text-scale)); }
  #caption { font-size: calc(14px * var(--text-scale)); padding: 6px 8px; margin-top: 4px; }

  /* the move strip: one scrolling row */
  #strip { display: flex; gap: 2px; overflow-x: auto; white-space: nowrap; width: var(--board); padding: 6px 2px;
           font: calc(14px * var(--text-scale))/1.6 Consolas, monospace; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #strip .mv { padding: 2px 5px; }
  #strip .mv.in-after { color: #ffc078; }
  #strip .mv.in-best { color: #8ce99a; }
  #strip .mv.in-pass { color: #d0a3e0; }

  /* thumb-sized buttons */
  #nav { gap: 4px; margin-top: 2px; }
  #nav button[data-nav] { flex: 1; height: 46px; font-size: calc(20px * var(--text-scale)); }
  #to-game { width: 100%; order: 5; height: 40px; }
  #whatif-label { width: 100%; margin: 4px 0 0; order: 6; }

  /* tabs instead of the side column */
  #sheet-tabs { display: flex; gap: 2px; position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 4px 0; }
  #sheet-tabs button { flex: 1; background: #3a3734; color: var(--text); padding: 9px 2px; font-size: calc(13px * var(--text-scale)); border-radius: 4px 4px 0 0; }
  #sheet-tabs button.active { background: var(--accent); color: #111; }
  #moves, .help { display: none !important; }
  aside > section { display: none; }
  body[data-sheet="explain"] .sheet-explain,
  body[data-sheet="engine"] .sheet-engine,
  body[data-sheet="chat"] .sheet-chat,
  body[data-sheet="games"] .sheet-games,
  body[data-sheet="settings"] .sheet-settings,
  body[data-sheet="explain"] #explain,
  body[data-sheet="games"] #games,
  body[data-sheet="settings"] #settings-sheet { display: block; }
  #explain .comment { border-left-width: 3px; }

  /* the loader, moved into the Games tab */
  #games #loader { flex-direction: column; }
  #games #input { width: 100%; height: 70px; }
  #games .loader-buttons { max-width: none; }
  #games #reviews { max-width: 100%; width: 100%; }
  #chat-log { max-height: 50vh; }
}

/* the two kinds of wrong */
.kind { font: 600 calc(11px * var(--text-scale)) system-ui, "Segoe UI", sans-serif; padding: 1px 6px; border-radius: 9px; white-space: nowrap; vertical-align: 1px; }
.kind-allowed { background: #5a2323; color: #ffc9c9; }
.kind-missed { background: #1f3f5c; color: #a5d8ff; }
.kind-best { background: #1f4a2a; color: #b2f2bb; }
details.fold { margin-top: 6px; border-top: 1px dashed #4a4743; padding-top: 4px; }
details.fold > summary { cursor: pointer; color: var(--muted); font-weight: 600; font-size: calc(12px * var(--text-scale)); }
details.fold p { margin: 3px 0 0 12px; }

/* iPad / touch: bigger tap targets; in portrait the board leaves room for the tabs */
@media (pointer: coarse) {
  .mv { padding: 3px 6px; }
  #nav button[data-nav] { min-height: 44px; min-width: 56px; font-size: calc(18px * var(--text-scale)); }
  button.small { padding: 6px 10px; font-size: calc(13px * var(--text-scale)); }
  .card-actions { flex-wrap: nowrap; gap: 5px; }
  .card-actions button.small { padding: 7px 7px; font-size: calc(12px * var(--text-scale)); white-space: nowrap; min-width: 0; }
  #sheet-tabs button { padding: 11px 4px; }
}
@media (max-width: 820px) {
  :root { --board: min(calc(100vw - 12px), 62vh); }
}

/* The moments list can fold; the AI coach always stays open in its view. */
.sec-toggle { display: flex; align-items: center; gap: 6px; width: 100%; background: none; color: var(--text); padding: 0; font-weight: 600; text-align: left; }
.sec-toggle:hover { filter: none; color: #fff; }
.sec-toggle .chev { width: 12px; color: var(--muted); }
#chat-body, #moments-body { margin-top: 8px; }
#moments.collapsed #moments-body { display: none; }
#moments.collapsed { padding-top: 8px; padding-bottom: 8px; }
#moments-body { max-height: 190px; overflow-y: auto; }
@media (max-width: 820px) {
  #moments.collapsed #moments-body { display: block; }
  .sec-toggle { pointer-events: none; }
  .sec-toggle .chev { display: none; }
  #moments-body { max-height: none; }
}

/* the opponent's moves: same badges, muted so yours stand out */
.whose { font: 600 calc(11px * var(--text-scale)) system-ui, "Segoe UI", sans-serif; background: #4a4743; color: #cfcac2; padding: 1px 6px; border-radius: 9px; }
.kind.theirs { opacity: 0.85; }
.moment.theirs { opacity: 0.8; }
.kind-allowed.theirs { background: #1f3f2a; color: #b2f2bb; }
.kind-missed.theirs { background: #4a3b2a; color: #ffd8a8; }

/* chat under the board */
#board-col > #chat { width: var(--board); margin-top: 10px; }

#autosync-label { display: flex; align-items: center; gap: 5px; font-size: calc(13px * var(--text-scale)); cursor: pointer; user-select: none; }
#progress { font-size: calc(13px * var(--text-scale)); }
#support { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; padding: 14px 10px 22px; font-size: calc(13px * var(--text-scale)); color: var(--muted); border-top: 1px solid #3c3a37; margin-top: 18px; }
#support a { color: var(--text); text-decoration: none; border: 1px solid #45423e; border-radius: 14px; padding: 4px 12px; }
#support a:hover { background: #3a3734; }
.link-btn { background: none; border: none; color: var(--muted, #999); padding: 4px 2px; text-decoration: underline; cursor: pointer; font-size: calc(13px * var(--text-scale)); }
.link-btn:hover { color: var(--text); background: none; }
#progress-wrap { display: inline-flex; align-items: center; gap: 8px; }
.pbar { display: inline-block; width: 140px; height: 6px; background: #3a3734; border-radius: 3px; overflow: hidden; flex: none; }
.pbar-fill { display: block; height: 100%; width: 0; background: #9bc53d; transition: width .4s ease; }
.moments-wait { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.moments-wait .pbar { width: 100%; }

/* the Games tab: your reviewed games, tap to open */
#game-list { margin-top: 10px; }
#game-list .game { padding: 10px 8px; border-bottom: 1px solid #3c3a37; cursor: pointer; }
#game-list .game.current { background: #3a3734; }
#game-list .counts { float: right; font-weight: 700; }

/* positional differences: the feature terms in bold */
b.feat { color: #a5d8ff; font-weight: 700; }
.csec.position { border-left: 2px solid #1864ab; padding-left: 6px; }

/* a judged move whose explanation the phone is still building */
.kind.pending { background: #3a3734; color: var(--muted); font-style: italic; }

/* wide screens: two columns beside the board, engine + blunder list | move list with the explanations */
@media (min-width: 1500px) {
  aside { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(460px, 1.6fr); grid-template-rows: auto auto 1fr; align-items: start; column-gap: 14px; row-gap: 12px; }
  #study { display: contents; }
  #engine { grid-column: 1; grid-row: 1; }
  #moments, #moves { background: var(--panel); border-radius: 4px; padding: 10px 12px; overflow-y: auto; }
  #moments { grid-column: 1; grid-row: 2; position: static; border: 0; margin: 0; max-height: calc(var(--board) - 150px); }
  aside > .help { grid-column: 1; grid-row: 3; }
  #moves { grid-column: 2; grid-row: 1 / span 3; max-height: calc(var(--board) + 60px); }
}

/* accounts: one button, one panel with a labelled field per site */
#settings-wrap, #mygames-wrap { position: relative; }
#settings, #mygames { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: 340px; background: var(--panel);
            border: 1px solid #45423e; border-radius: 6px; padding: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
#settings .acc-help, #mygames .acc-help { margin: 0 0 10px; font-size: calc(12px * var(--text-scale)); }
#settings .acc-row, #mygames .acc-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: calc(13px * var(--text-scale)); }
#settings .acc-row input:not([type=checkbox]) { flex: 1; }
#settings .acc-actions { text-align: right; margin-top: 10px; }
.site-tag { display: inline-block; min-width: 72px; text-align: center; font: 600 calc(11px * var(--text-scale)) system-ui, "Segoe UI", sans-serif;
            padding: 2px 6px; border-radius: 9px; }
.site-tag.lichess { background: #3d3a37; color: #e6e3df; }
.site-tag.chesscom { background: #2f4a22; color: #b9e09b; }
.site-tag.pasted { background: #3a3734; color: var(--muted); }
@media (max-width: 820px) {
  #settings { position: static; width: auto; box-shadow: none; margin: 6px 0 0; max-height: none; }
}
#settings { width: 380px; left: auto; right: 0; max-height: 80vh; overflow-y: auto; }
.set-sec { border-bottom: 1px solid #3c3a37; padding: 4px 0 10px; }
.set-sec h3 { margin: 8px 0 6px; font-size: calc(12px * var(--text-scale)); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.set-links a { color: var(--text); text-decoration: none; border: 1px solid #45423e; border-radius: 14px; padding: 3px 10px; margin-right: 6px; }
#inaccuracies-label { align-items: flex-start; }
#mygames { width: 460px; left: auto; right: 0; }
#mygames .mg-head, #mygames .mg-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#mygames .mg-foot { margin-top: 8px; }
#mygames .mg-note { margin: 8px 0 0; font-size: calc(12px * var(--text-scale)); }
#mygames-list { max-height: 50vh; overflow-y: auto; margin-top: 6px; border-top: 1px solid #3c3a37; }
.mg-row { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid #3c3a37; font-size: calc(13px * var(--text-scale)); }
.mg-row .mg-what { flex: 1; min-width: 0; }
.mg-row .mg-when { display: block; font-size: calc(12px * var(--text-scale)); }
.mg-row.reviewed { cursor: pointer; }
.mg-row.reviewed:hover { background: #3a3734; }
.mg-row .mg-check { width: 18px; flex: none; }
.mg-won { color: #9bc53d; } .mg-lost { color: #e0685d; } .mg-drew { color: var(--muted); }
#mygames-list .mg-section { margin: 10px 2px 2px; font-size: calc(12px * var(--text-scale)); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.mg-row.current { background: #3a3734; }
/* on a phone the list is the Games tab itself, always open */
@media (max-width: 820px) { #mygames { position: static; width: auto; box-shadow: none; margin-top: 8px; } #games #sync { display: none; } }
#plan-who { margin: 0 0 4px; font-weight: 600; }
.card-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.card-actions button.small { margin-top: 0; }
.ai-btn { background: linear-gradient(135deg, #5b3fa8, #2f6fb5); color: #fff; border: 1px solid #8a72d6; }
.ai-btn:hover { filter: brightness(1.15); }

/* the checkout page (/pay) */
.pay-page main { max-width: 520px; margin: 48px auto; padding: 0 16px; }

/* Larger reading text on tablets in either orientation. The short side excludes
   phones in landscape; pointer targeting keeps desktop typography unchanged. */
@media (min-width: 600px) and (min-height: 600px) and (pointer: coarse) {
  :root { --text-scale: 1.4; }
}

/* Account-first introduction; the manual paste workflow is a secondary disclosure. */
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.header-row h1 { margin: 0; }
#header-actions { display: flex; align-items: center; gap: 8px; }
#account-setup, #paste-game { background: var(--panel); border: 1px solid #45423e; border-radius: 8px; padding: 12px 16px; }
#account-setup > summary, #paste-game > summary { display: grid; grid-template-columns: 12px auto minmax(0, 1fr); align-items: baseline; gap: 10px; cursor: pointer; font-weight: 600; font-size: inherit; list-style: none; }
#account-setup > summary::-webkit-details-marker, #paste-game > summary::-webkit-details-marker { display: none; }
#account-setup > summary::before, #paste-game > summary::before { content: '▸'; }
#account-setup[open] > summary::before, #paste-game[open] > summary::before { content: '▾'; }
.accounts-summary { margin: 0; font-size: calc(12px * var(--text-scale)); }
.account-content { padding-top: 4px; }
.account-intro { margin: 10px 0 14px; }
.account-intro strong { display: block; margin-bottom: 4px; color: var(--text); font-weight: 650; }
.account-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; max-width: 1060px; }
.account-fields .acc-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.account-fields #user, .account-fields #user-cc { width: 100%; min-width: 0; padding: 9px 10px; }
#find-games { padding: 10px 16px; }
button:disabled { opacity: .6; cursor: default; }
#account-status { margin: 8px 0 0; font-size: calc(12px * var(--text-scale)); }
#account-status:empty { display: none; }
#auto-review-option { margin-top: 14px; padding-top: 12px; border-top: 1px solid #45423e; }
#autosync-label { margin: 0; align-items: flex-start; }
#autosync { flex: none; margin-top: 4px; }
.auto-help { font-size: calc(12px * var(--text-scale)); margin: 4px 0 0 22px; }
#paste-game { margin-top: 10px; }
#paste-game > summary .muted { margin: 0; font-size: calc(12px * var(--text-scale)); }
#paste-game #loader { margin-top: 10px; }
#review-status { margin-top: 6px; }
#review-status:has(#progress:empty):has(#error:empty) { display: none; }
#board-help { width: var(--board); padding: 8px 10px; margin-top: 8px; border-left: 2px solid #536d87; color: #bcb7af; font-size: calc(12px * var(--text-scale)); line-height: 1.5; }
#board-help p { margin: 0; }
#board-help p + p { margin-top: 6px; }
#board-help b { color: var(--text); }
@media (max-width: 1000px) {
  .account-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #find-games { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 820px) {
  #settings-wrap > #settings-btn { display: none; }
  #paste-game #loader { flex-direction: column; }
  #paste-game #input { width: 100%; height: 80px; }
  #settings { width: auto; }
  .accounts-summary, #paste-game > summary .muted { grid-column: 2 / -1; }
}
@media (max-width: 599px) {
  #account-setup, #paste-game { padding: 10px 12px; }
  .account-fields { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #find-games { width: 100%; }
  .account-intro { font-size: inherit; }
  .header-row { margin-bottom: 8px; }
}

.coach-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font: inherit; font-weight: 650; color: var(--text); }

#about-source[href] { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
#about-source[href]:hover { color: var(--text); }