:root{--paper:#f5f3ed;--panel:#fdfcf8;--ink:#292e29;--muted:#72766e;--line:#dedfd5;--green:#344b3e;--sage:#e9eddf;--wood:#dbbb83;--accent:#b56e49;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;transition:background .15s,transform .15s}button:hover:not(:disabled){filter:brightness(.96)}button:disabled{opacity:.45;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b56e49;outline-offset:3px}[hidden]{display:none!important}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:400}h1{font-size:clamp(30px,3.3vw,48px);line-height:1.15;letter-spacing:-1.4px;margin-bottom:18px}h2{font-size:29px;line-height:1.2}h3{font-size:22px}p{line-height:1.65}a{color:inherit}.sidebar{position:fixed;inset:0 auto 0 0;width:235px;background:#eeeee5;border-right:1px solid var(--line);padding:35px 25px;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:14px;font-weight:650;letter-spacing:1.5px}.brand-mark{width:44px;height:44px;background:var(--green);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:27px;font-family:serif;flex-shrink:0}.brand small{display:block;font-size:7px;letter-spacing:1.7px;margin-top:7px;color:var(--muted)}nav{margin-top:70px;display:grid;gap:10px}nav button{display:flex;align-items:center;gap:16px;text-align:left;background:transparent;border-radius:8px;padding:15px 17px;color:var(--muted);font-size:14px}nav button span{font-size:22px;font-weight:400}nav button.active{background:var(--green);color:#fff}.sidebar-note{margin-top:auto;padding:30px 9px 38px}.tiny-label,.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600}.sidebar-note p{font-family:Georgia,serif;font-size:19px;margin-top:15px;color:#686e61}.stone-pair{display:flex;gap:7px}.stone-pair i{width:16px;height:16px;border-radius:50%;background:#33392e}.stone-pair i+i{background:#faf9f2;border:1px solid #ccc}.settings-link{display:flex;justify-content:space-between;background:transparent;border-top:1px solid var(--line);padding:24px 6px 0;color:#6e7467;font-size:13px}main{margin-left:235px;padding:0 45px 32px;max-width:1800px}.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted);letter-spacing:.3px}.private-badge{display:flex;align-items:center;gap:7px}.private-badge i{width:6px;height:6px;background:#7b8964;border-radius:50%}.page{padding-top:42px}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;gap:20px}.page-heading .eyebrow{color:var(--accent);margin-bottom:17px}.muted{color:var(--muted)}.small{font-size:12px}.ink-circle{width:105px;height:105px;border:3px solid #b9bbaa;border-right-width:1px;border-bottom-width:7px;border-radius:50%;font-family:serif;font-size:57px;color:#9a9f8e;display:grid;place-items:center;transform:rotate(-9deg);margin-right:35px}.today-grid{display:grid;grid-template-columns:1.18fr 1fr;gap:24px}.plan-card,.lesson-card,.resume-card,.chart-card,.skills-card,.rank-card,.history-card{border:1px solid var(--line);border-radius:12px;padding:30px;background:var(--panel)}.plan-card{background:var(--sage)}.card-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:25px}.card-top h2{margin:0}.pill{white-space:nowrap;border:1px solid #c9cebd;border-radius:30px;padding:7px 11px;font-size:10px}.plan-card h2{font-size:36px;margin-bottom:14px}.plan-card>p{color:#68715e;font-size:13px;max-width:430px}.small-label{font-size:12px;display:block;margin:20px 0 8px}.time-row{display:flex;align-items:center;gap:12px}.time-row span{font-size:10px;color:#75806c}select,input{border:1px solid #cbd0c1;border-radius:6px;padding:10px 12px;background:var(--panel);color:var(--ink);max-width:100%}.time-row select{font-size:12px}#plan-steps{list-style:none;padding:0;margin:25px 0;counter-reset:step}#plan-steps li{display:flex;align-items:center;gap:12px;border-top:1px solid #ced5c5;padding:15px 0;font-size:13px;counter-increment:step}#plan-steps li:before{content:"0" counter(step);font-size:10px;color:#77836b}#plan-steps li span{margin-left:auto;color:#738169;font-size:11px}.primary{background:var(--green);color:#fff;border-radius:6px;padding:13px 19px;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:20px}.plan-card>.primary{width:100%;justify-content:space-between}.secondary{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 13px;font-size:12px}.quiet,.text-button{background:transparent;color:var(--green);font-size:12px;padding:10px 0}.text-button{border-bottom:1px solid #c9cebf}.today-right{display:grid;gap:24px;grid-template-rows:1fr auto}.lesson-card{padding:32px}.lesson-card h2{margin:24px 0 14px}.lesson-card p{font-size:14px;color:#6e7468}.resume-card{background:#e9e4da;display:flex;align-items:center;gap:20px;padding:25px 30px}.resume-card h3{margin:14px 0 8px}.resume-card p{font-size:12px;color:var(--muted);margin:0}.round-button{margin-left:auto;flex-shrink:0;background:transparent;width:43px;height:43px;border-radius:50%;border:1px solid #b7baaa;font-size:23px}.bottom-note{display:flex;align-items:center;gap:20px;padding:29px 0;color:#858b7c}.bottom-note span{font-size:9px;letter-spacing:1px;white-space:nowrap}.bottom-note p{font-family:Georgia,serif;font-style:italic;font-size:14px;margin:0}.compact{margin-bottom:24px}.compact h1{margin-bottom:0}.segmented{display:flex;background:#e8e9e1;padding:4px;border-radius:7px}.segmented button{padding:10px 15px;font-size:12px;background:transparent;border-radius:4px;color:var(--muted)}.segmented .active{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px #0001}.dojo-layout{display:grid;grid-template-columns:minmax(300px,1.5fr) minmax(280px,1fr);gap:24px;align-items:start}.board-panel{background:var(--panel);border:1px solid var(--line);padding:20px;border-radius:10px}.board-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-size:12px}.board-toolbar label{display:flex;align-items:center;gap:7px}.board-toolbar select{padding:8px}.board-toolbar>span{margin-left:auto;color:var(--muted);font-size:11px}.board{position:relative;width:100%;aspect-ratio:1;background:linear-gradient(100deg,#ddc08d,#e2c795 40%,#d8b67c);border-radius:6px;box-shadow:inset 0 0 30px #8d5b1c15,0 4px 12px #5d492d12;touch-action:manipulation}.board svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.intersection{position:absolute;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:transparent;padding:0;border:0}.intersection:focus-visible{outline-offset:0}.intersection.black{background:radial-gradient(circle at 32% 25%,#52514c,#1a1b1a 67%);box-shadow:1px 2px 3px #0006}.intersection.white{background:radial-gradient(circle at 32% 25%,#fff,#f2f0e7 60%,#d0cec3);box-shadow:1px 2px 3px #0004}.intersection.dead{opacity:.35}.intersection.last:after{content:"";position:absolute;inset:34%;border:1px solid #c2784e;border-radius:50%}.intersection.solution{background:radial-gradient(circle at 32% 25%,#77c67b,#27813d 67%);box-shadow:1px 2px 3px #0005}
.intersection.incorrect{background:radial-gradient(circle at 32% 25%,#f28b80,#bc3434 67%);box-shadow:1px 2px 3px #0005}.intersection.target{outline:2px dashed #b56e49;outline-offset:1px}.board-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}.board-status{font-size:12px;line-height:1.6;margin:18px 0 10px;color:#5e6b56;min-height:20px}.board-footnote{font-size:10px;color:#8b8f83;margin:20px 0 0}.scoring-box{background:var(--sage);padding:16px;margin-top:15px;border-radius:6px;font-size:12px}.scoring-box button{margin:4px}.master-panel{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:22px;display:flex;flex-direction:column;max-height:800px;min-height:620px}.master-header{display:flex;gap:12px;align-items:center}.avatar{width:42px;height:42px;border-radius:50%;background:#e4e9da;font:26px Georgia;display:grid;place-items:center}.master-header h2{font-size:23px;margin:0}.master-header p{font-size:10px;color:var(--muted);margin:5px 0 0}.mode-label{font-size:10px;color:#818779;margin:24px 0 8px}.master-panel>select{font-size:11px;width:100%;background:#f4f4ed}.messages{min-height:230px;max-height:430px;overflow-y:auto;flex:1;padding:22px 0;overscroll-behavior:contain}.message{font-size:13px;line-height:1.65;padding:13px;margin:0 0 12px;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere}.message.assistant{background:#f0f2e9;margin-right:12px}.message.user{background:#e7e3d8;margin-left:25px}.message small{display:block;font-size:9px;margin-top:7px;color:#7e8575}.quick-prompts{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.quick-prompts button{padding:7px 9px;font-size:10px;background:transparent;border:1px solid var(--line);border-radius:20px}#chat-form{display:flex;gap:8px;align-items:flex-end;border-top:1px solid var(--line);padding-top:16px}textarea{resize:vertical;width:100%;border:0;background:transparent;line-height:1.5;font-size:12px;padding:5px;min-height:50px;color:var(--ink)}#chat-send{padding:10px 14px;font-size:20px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}.metric-grid article{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:23px}.metric-grid span{display:block;font-size:11px;color:var(--muted)}.metric-grid strong{display:block;margin-top:15px;font:37px Georgia,serif}.chart-card h2{margin:12px 0 0}.chart-card .card-top{margin-bottom:10px}#chart{min-height:210px;display:grid;align-items:center}#chart svg{width:100%;height:auto;max-height:260px}#chart .empty{text-align:center;padding:45px 0;color:var(--muted);font-size:14px}.progress-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;margin-top:24px}.skill-row{padding:20px 0 5px}.skill-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:10px}.skill-row progress{height:6px;width:100%;accent-color:var(--green)}.skill-row small{display:block;color:var(--muted);font-size:10px;margin-top:8px}.rank-card{background:var(--sage)}.rank-card h2{margin:20px 0 14px}.rank-card p{font-size:12px;color:#717b66}.history-card{margin-top:24px}.history-row{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:18px 0;font-size:12px}.history-row p{margin:8px 0;color:var(--muted)}dialog{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:30px;color:var(--ink);max-width:450px;width:calc(100% - 32px)}dialog::backdrop{background:#26302666;backdrop-filter:blur(3px)}dialog label{display:block;font-size:12px;margin:20px 0 8px}dialog input,dialog select{width:100%}dialog .primary{margin-top:25px}dialog p{font-size:13px;color:var(--muted)}dialog .card-top{margin-bottom:12px}#settings-close{font-size:25px}#logout{display:block;margin:15px auto 0}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:100;background:var(--green);color:#fff;border-radius:8px;padding:15px 22px;box-shadow:0 5px 25px #0002;max-width:90%;font-size:13px}.login-card{max-width:420px;margin:12vh auto;padding:30px}.login-card h1{margin-top:25px;font-size:36px}.login-card p{color:var(--muted)}.login-card label{display:block;margin-bottom:10px;font-size:12px}.login-card input{width:100%;margin-bottom:18px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-width:1600px){main{padding-left:65px;padding-right:65px}.dojo-layout{grid-template-columns:minmax(300px,720px) minmax(300px,450px)}}
@media(max-width:1180px){.sidebar{width:195px;padding:30px 18px}.brand{font-size:11px;gap:8px}.brand small{font-size:6px}.brand-mark{width:38px;height:38px}main{margin-left:195px;padding:0 25px 25px}.dojo-layout{gap:16px;grid-template-columns:minmax(280px,1.2fr) minmax(250px,1fr)}.board-panel{padding:14px}.master-panel{padding:16px}.today-grid{gap:16px}.plan-card,.lesson-card{padding:25px}.ink-circle{margin-right:0;width:85px;height:85px}.board-toolbar{flex-wrap:wrap}.metric-grid article{padding:18px}.page-heading h1{font-size:34px}}
@media(max-width:900px){.sidebar{position:sticky;top:0;width:100%;height:72px;flex-direction:row;align-items:center;padding:12px 22px;border-right:0;border-bottom:1px solid var(--line);gap:20px}.brand small{display:none}.brand{font-size:12px}.sidebar nav{margin:0 0 0 auto;display:flex;gap:5px}.sidebar nav button{padding:10px 12px;font-size:12px;gap:6px}.sidebar nav button span{font-size:17px}.sidebar-note{display:none}.settings-link{border:0;padding:8px;font-size:0}.settings-link span{font-size:20px}main{margin:0;padding:0 24px 30px}.topbar{height:60px}.page{padding-top:30px}.master-panel{min-height:600px}.page-heading h1{font-size:36px}}
@media(max-width:650px){.sidebar{height:64px;padding:10px 14px;gap:5px}.brand{font-size:10px;letter-spacing:1px;gap:7px}.brand-mark{width:32px;height:32px;font-size:22px}.sidebar nav button{padding:10px 9px;font-size:11px}.sidebar nav button span{display:none}.settings-link{padding:5px}main{padding:0 16px 30px}.topbar{height:48px;font-size:9px}.page{padding-top:26px}.page-heading{margin-bottom:22px;align-items:flex-start}.page-heading h1{font-size:32px;letter-spacing:-1px}.page-heading .muted{font-size:13px;margin-bottom:0}.eyebrow{font-size:8px;letter-spacing:1.6px}.ink-circle{display:none}.today-grid,.progress-grid{grid-template-columns:1fr}.today-right{gap:16px}.plan-card,.lesson-card,.resume-card,.chart-card,.skills-card,.rank-card,.history-card{padding:23px}.plan-card h2{font-size:32px}.bottom-note{gap:12px}.bottom-note p{font-size:12px}.bottom-note span{font-size:7px}.dojo-layout{grid-template-columns:1fr}.compact{align-items:center}.compact h1{font-size:30px}.segmented button{padding:8px 10px;font-size:10px}.master-panel{min-height:420px;max-height:650px}.messages{min-height:180px;max-height:300px}.metric-grid{grid-template-columns:1fr 1fr;gap:12px}.metric-grid span{font-size:10px}.metric-grid strong{font-size:32px}.chart-card h2{font-size:24px}.chart-card .pill{font-size:8px;padding:6px}#chart{min-height:180px}.board-toolbar{gap:8px}.board-toolbar>span{font-size:10px}.history-row{font-size:11px}.board-actions{gap:7px}.board-actions .secondary{font-size:11px;padding:10px}.page-heading .eyebrow{margin-bottom:12px}.time-row span{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Device-driven appearance, including native controls and scrollbars. */
:root { color-scheme: light dark; }
button { color: inherit; }
.primary, nav button.active { color: #fff; }
.mobile-jump { display: none; }
.board-panel, .master-panel { min-width: 0; scroll-margin-top: 90px; }
#chart svg, #rank-chart svg { display: block; max-width: 100%; }

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #171c19;
    --panel: #202822;
    --ink: #edece3;
    --muted: #b0b9ad;
    --line: #3b473d;
    --green: #45634e;
    --sage: #29362b;
    --accent: #dfa77f;
  }
  .sidebar { background: #1c231e; }
  .brand-mark, .primary, nav button.active, #toast { background: #45634e; color: #fff; }
  .sidebar-note p, .settings-link, .plan-card > p, .lesson-card p,
  .time-row span, #plan-steps li::before, #plan-steps li span,
  .bottom-note, .mode-label, .board-status, .board-footnote,
  .message small, .rank-card p { color: var(--muted); }
  .quiet, .text-button { color: #c3d7b6; }
  .pill, input, select, .text-button, .round-button, #plan-steps li { border-color: var(--line); }
  .resume-card, .segmented { background: #2c3029; }
  .avatar, .message.assistant { background: #2a372c; }
  .message.user { background: #3a352c; }
  .master-panel > select { background: var(--paper); }
  .ink-circle { color: #8c9b84; border-color: #64755f; }
  .board { background: linear-gradient(100deg, #bd9d69, #c7aa76 40%, #b99760); }
  .skill-row progress { accent-color: #abc49b; }
  .intersection:focus-visible { outline-color: #fff; }
  #chart svg text, #rank-chart svg text { fill: var(--muted); }
  #chart svg line, #rank-chart svg line { stroke: var(--line); }
  #chart svg polyline, #rank-chart svg polyline { stroke: #b0cd9c; }
  #chart svg circle, #rank-chart svg circle { fill: #b0cd9c; }
  dialog::backdrop { background: #070b09b3; }
}

/* Stack early enough for phones in landscape and narrow browser panels. */
@media (max-width: 900px) {
  .dojo-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .board-panel, .master-panel { width: 100%; max-width: 680px; margin-inline: auto; }
  .master-panel { min-height: 0; max-height: none; }
  .messages { min-height: 180px; max-height: min(50dvh, 420px); }
  .mobile-jump { display: block; margin: 0 0 14px auto; min-height: 44px; }
  #jump-board { margin-top: 16px; margin-bottom: 0; }
  .board-actions button, .board-toolbar button, .segmented button,
  .quick-prompts button, .settings-link, nav button { min-height: 44px; }
  .settings-link { min-width: 44px; }
  select, input, textarea, #chat-form textarea, .master-panel > select,
  .time-row select { font-size: 16px; }
  .board-toolbar select { min-height: 44px; }
  #chat-form { align-items: flex-end; }
  #chat-send { min-width: 48px; min-height: 48px; }
  #chat-input { min-height: 60px; max-height: 180px; }
  main { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .sidebar { height: auto; min-height: 72px; padding-top: max(12px, env(safe-area-inset-top)); }
  .board-panel, .master-panel { scroll-margin-top: calc(90px + env(safe-area-inset-top)); }
  .page-heading > div { min-width: 0; }
}
@media (max-width: 750px) {
  .today-grid, .progress-grid { grid-template-columns: minmax(0, 1fr); }
  .ink-circle { display: none; }
}
@media (max-width: 650px) {
  main { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .sidebar { gap: 4px; padding-inline: 10px; }
  .sidebar nav { gap: 2px; }
  .sidebar nav button { padding-inline: 9px; }
  .board-panel { padding: 12px; }
  .master-panel { padding: 18px; }
  .board-toolbar { flex-wrap: wrap; gap: 10px; }
  .board-toolbar > span { flex-basis: 100%; margin: 0; font-size: 12px; }
  .board-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-actions button { min-height: 44px; font-size: 13px; }
  .quick-prompts button { font-size: 12px; }
  .message { font-size: 15px; }
  .master-header p, .mode-label { font-size: 12px; }
  .board-status { font-size: 13px; }
  .time-row { flex-wrap: wrap; }
  .compact { flex-wrap: wrap; }
  .bottom-note { align-items: flex-start; }
  dialog { max-height: calc(100dvh - 32px); overflow: auto; }
}
@media (max-width: 360px) {
  .brand > span:last-child { display: none; }
  .card-top { flex-wrap: wrap; }
  .metric-grid article { padding: 14px; }
}

/* The dojo can own the visible viewport, independently of the browser's chrome. */
.focus-bar, #expand-chat { display: none; }
#enter-focus { margin: 0 0 18px; min-height: 44px; }
html.play-focus, body.play-focus { overflow: hidden; overscroll-behavior: none; }
body.play-focus .sidebar, body.play-focus .topbar,
body.play-focus #play > .page-heading, body.play-focus #enter-focus { display: none; }
body.play-focus main { margin: 0; padding: 0; }
body.play-focus #play {
  position: fixed; z-index: 20; top: var(--play-top, 0px); left: 0; width: 100%;
  height: var(--play-height, 100dvh); margin: 0;
  padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  display: grid; grid-template-rows: 44px minmax(0, 1fr); gap: 6px;
  background: var(--paper); overflow: hidden;
}
body.play-focus .focus-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.play-focus .focus-bar button { min-height: 40px; padding: 8px 12px; }
#focus-status { font-size: 12px; text-align: center; color: var(--muted); }
body.play-focus .dojo-layout {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(160px, 32%); gap: 6px; min-height: 0;
}
body.play-focus #board-panel {
  position: relative; container-type: size; display: flex; flex-direction: column;
  align-items: center; min-height: 0; height: 100%; max-width: none; padding: 6px; overflow: hidden;
}
body.play-focus #board { flex: none; width: min(100%, calc(100cqh - 54px)); margin: auto; }
body.play-focus #jump-chat, body.play-focus #jump-board,
body.play-focus #game-controls, body.play-focus #puzzle-heading,
body.play-focus #board-status, body.play-focus #engine-label,
body.play-focus #review, body.play-focus #resign { display: none; }
body.play-focus .board-actions {
  display: flex; flex: none; justify-content: center; flex-wrap: nowrap;
  width: 100%; margin: 6px 0 0; gap: 5px; height: 42px;
}
body.play-focus .board-actions button { min-height: 42px; padding: 7px 10px; font-size: 12px; }
body.play-focus #master-panel {
  position: relative; display: grid; grid-template-rows: 32px minmax(0, 1fr) 48px;
  height: 100%; min-height: 0; max-height: none; max-width: none; padding: 6px 10px;
  gap: 4px; overflow: hidden;
}
body.play-focus .master-header { gap: 8px; min-height: 0; }
body.play-focus .master-header h2 { font-size: 19px; }
body.play-focus .master-header .avatar, body.play-focus #ai-status,
body.play-focus .mode-label, body.play-focus #guidance,
body.play-focus .quick-prompts { display: none; }
body.play-focus #expand-chat { display: block; order: 2; margin-left: auto; padding: 5px 8px; height: 32px; font-size: 12px; }
body.play-focus #messages { min-height: 0; max-height: none; padding: 0; overflow-y: auto; }
body.play-focus .message { margin: 0 0 6px; padding: 8px 10px; font-size: 14px; line-height: 1.45; }
body.play-focus .message small { display: none; }
body.play-focus #chat-form { min-height: 0; padding-top: 4px; gap: 6px; }
body.play-focus #chat-input { min-height: 40px; height: 40px; max-height: 40px; resize: none; font-size: 16px; padding: 8px; }
body.play-focus #chat-send { height: 40px; min-height: 40px; min-width: 42px; padding: 6px 10px; }
body.play-focus #engine-retry { position: absolute; top: 8px; right: 8px; z-index: 3; }
body.play-focus #engine-retry button { font-size: 11px; padding: 9px; }
body.play-focus #scoring {
  position: absolute; bottom: 54px; left: 6px; right: 6px; z-index: 4;
  max-height: 58%; overflow-y: auto; padding: 12px; margin: 0;
  box-shadow: 0 8px 28px #0003;
}
/* Larger chat overlays the board, but never the exit or collapse controls. */
body.play-focus.chat-expanded #master-panel {
  position: absolute; z-index: 10; top: max(52px, 16%); bottom: max(6px, env(safe-area-inset-bottom));
  left: max(6px, env(safe-area-inset-left)); right: max(6px, env(safe-area-inset-right));
  width: auto; height: auto; grid-template-rows: 40px 44px minmax(0, 1fr) 48px;
  box-shadow: 0 -8px 45px #0005; padding: 10px;
}
body.play-focus.chat-expanded #guidance { display: block; width: 100%; font-size: 14px; }
body.play-focus.chat-expanded #expand-chat { height: 40px; }
body.play-focus.chat-expanded #board-panel { opacity: .55; }
body.play-focus #toast { bottom: calc(58px + env(safe-area-inset-bottom)); }
#toast { pointer-events: none; }
@media (min-aspect-ratio: 6/5) and (max-height: 550px) {
  body.play-focus .dojo-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
}

/* Keep the scoring toggle in the action row, outside the board overlay. */
body.play-focus.focus-scoring #pass,
body.play-focus.focus-scoring #undo,
body.play-focus.focus-scoring #variation { display: none; }
#chat-form { position: relative; }
#chat-status {
  position: absolute; bottom: 100%; left: 0; right: 0;
  padding: 6px 8px; background: var(--panel); color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; font-size: 12px;
}

/* One compact navigation and a single dojo overview. */
.sidebar { position: sticky; top: 0; width: 100%; height: 68px; min-height: 68px; padding: 10px 24px; flex-direction: row; align-items: center; gap: 24px; border-right: 0; border-bottom: 1px solid var(--line); background: var(--paper); }
.sidebar nav { display: flex; margin: 0 0 0 auto; gap: 6px; }
.sidebar nav button { padding: 10px 16px; font-size: 14px; min-height: 44px; }
.profile-button { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--ink); }
main { margin: 0 auto; max-width: 1200px; padding: 24px; }
.page { padding-top: 0; }
.today-grid { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); }
.activity-choices { display: grid; gap: 16px; }
.activity-card { display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); text-align: left; }
.activity-card strong { font: 28px Georgia,serif; grid-column: 1; }
.activity-card span:not(.activity-symbol) { font-size: 13px; color: var(--muted); }
.activity-card .activity-symbol { grid-column: 1 / -1; font-size: 22px; color: var(--green); }
.archive-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.archive-row { display: grid; width: 100%; gap: 7px; text-align: left; border-top: 1px solid var(--line); padding: 16px 0; background: transparent; color: var(--ink); }
.archive-row span, .archive-row small { font-size: 12px; color: var(--muted); }
.archive-row:disabled { cursor: default; opacity: .7; }
#play-options { max-width: 420px; max-height: calc(100dvh - 32px); overflow-y: auto; }
#play-options::backdrop { background: #15251d70; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
#play-options #game-controls { display: flex; position: static; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
#play-options #game-controls label { display: flex; margin: 0; gap: 10px; align-items: center; }
#play-options #game-controls select { width: auto; }
#play-options #turn-label { flex-basis: 100%; margin: 0; }
#play-options #guidance { display: block; width: 100%; }
#play-options .mode-label { display: block; }
#play-options .option-actions { display: flex; gap: 18px; margin-top: 18px; }
#play-options #review, #play-options #resign { display: inline-flex; }
body.play-focus.chat-expanded #master-panel { grid-template-rows: 40px minmax(0,1fr) 48px; }
body.play-focus.puzzle-focus #puzzle-heading { display: block; flex: none; width: 100%; margin: 0; }
body.play-focus.puzzle-focus #puzzle-skill { display: none; }
body.play-focus.puzzle-focus #puzzle-prompt { font-family: inherit; font-size: 14px; line-height: 1.35; margin: 0; max-height: 58px; overflow-y: auto; }
body.play-focus.puzzle-focus #board-status { display: block; flex: none; width: 100%; font-size: 12px; line-height: 1.3; max-height: 34px; overflow-y: auto; margin: 4px 0; }
body.play-focus.puzzle-focus #board { width: min(100%, calc(100cqh - 156px)); }
body.play-focus.puzzle-focus #puzzle-actions { height: 42px; }
body.play-focus.puzzle-focus #puzzle-actions button { padding: 6px; font-size: 11px; }
body.play-focus.archive-view .dojo-layout { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
body.play-focus.archive-view #master-panel { display: none; }
body.play-focus.archive-view #archive-description { flex: none; margin: 0 0 8px; }
body.play-focus.archive-view #board { width: min(100%, calc(100cqh - 170px), 680px); }
body.play-focus.archive-view #board-status { display: block; flex: none; max-height: 76px; overflow-y: auto; font-size: 13px; margin: 8px 0; }
#replay-controls { display: flex; align-items: center; justify-content: center; gap: 10px; flex: none; height: 44px; width: 100%; }
#replay-controls label { display: flex; align-items: center; gap: 8px; min-width: 0; }
#replay-step { width: 100%; min-width: 50px; }
#replay-label { white-space: nowrap; font-size: 12px; }
@media (min-width: 901px) {
 body.play-focus .dojo-layout { grid-template-columns: minmax(0,1.5fr) minmax(300px,1fr); grid-template-rows: minmax(0,1fr); }
 body.play-focus #master-panel { grid-template-rows: 40px minmax(0,1fr) 48px; }
 body.play-focus #board { max-width: 780px; }
}
@media (max-width: 650px) {
 .sidebar { padding: 8px 12px; gap: 8px; }
 .brand { font-size: 10px; gap: 6px; }
 .brand-mark { width: 30px; height: 30px; }
 .sidebar nav { gap: 0; }
 .sidebar nav button { padding: 10px 8px; font-size: 12px; }
 main { padding: 16px 12px; }
 .today-grid, .archive-grid { grid-template-columns: minmax(0,1fr); }
 .activity-choices { grid-template-columns: 1fr 1fr; gap: 12px; }
 .activity-card { padding: 18px; gap: 10px; }
 .activity-card strong { font-size: 23px; }
 .activity-card span:not(.activity-symbol) { grid-column: 1 / -1; }
 .history-card { margin-top: 16px; }
 .archive-grid { gap: 0; }
}

/* Chat content, thinking status and composer occupy separate layout space. */
#messages { display: flex; flex-direction: column; gap: 8px; overflow-anchor: none; }
#messages .message { flex: none; width: fit-content; max-width: calc(100% - 18px); margin: 0; }
#messages .message.user { align-self: flex-end; margin-left: 18px; }
#messages .message.assistant { align-self: flex-start; margin-right: 18px; }
#messages .thinking { color: var(--muted); font-size: 13px; }
#messages .failed { border: 1px solid var(--accent); }
#messages #chat-status { position: static; padding: 8px 10px; border: 0; }
#chat-form { flex: none; min-width: 0; }
#chat-input { min-width: 0; }
#chat-drag { display: none; }
body.play-focus.chat-expanded #chat-drag { display: grid; place-items: center; position: absolute; top: 0; left: 0; right: 0; height: 22px; width: 100%; background: transparent; cursor: ns-resize; touch-action: none; user-select: none; }
#chat-drag span { width: 42px; height: 4px; border-radius: 4px; background: var(--muted); opacity: .55; }
body.play-focus.chat-expanded #master-panel { padding-top: 24px; }
.activity-card { grid-template-columns: minmax(0,1fr); }
.activity-card > span:not(.activity-symbol) { grid-column: 1; }

#learning-journal details, #knowledge-units details { border-top: 1px solid #dce1d3; padding: 12px 0; }
#learning-journal summary, #knowledge-units summary { cursor: pointer; font-weight: 600; }
#learning-journal pre { overflow-x: auto; font-size: 12px; line-height: 1.5; }
#personal-memory textarea { width: 100%; min-height: 90px; }
#move-proposals:empty { display: none; }
#move-proposals { flex-wrap: wrap; max-height: 110px; overflow-y: auto; flex-shrink: 0; }
#knowledge-units a { overflow-wrap: anywhere; }
#messages .proposal-controls { display: flex; flex-direction: column; gap: 6px; flex: none; max-height: none; }
#messages .proposal-controls button { min-height: 40px; padding: 8px; white-space: normal; text-align: left; font-size: 13px; }
body.play-focus.focus-variation-scoring #pass,
body.play-focus.focus-variation-scoring #undo { display: none; }

/* Keep phone controls large enough to tap, including the compact chat header. */
.practice-pack { margin-top: 28px; }
#practice-lessons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
#practice-lessons h3 { margin-top: 0; }
#practice-lessons small { display: block; color: var(--muted); margin-bottom: 16px; }
#practice-lessons button, #knowledge-units button { min-height: 44px; white-space: normal; }
@media (max-width: 650px) { #practice-lessons { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
 body.play-focus #master-panel { grid-template-rows: 44px minmax(0,1fr) 48px; }
 body.play-focus #expand-chat, body.play-focus .focus-bar button { height: 44px; min-height: 44px; }
 body.play-focus .board-actions, body.play-focus.puzzle-focus #puzzle-actions { height: 44px; }
 body.play-focus .board-actions button, #messages .proposal-controls button { min-height: 44px; }
 body.play-focus #engine-retry button { min-height: 44px; }
 #learning-journal summary, #knowledge-units summary { min-height: 44px; padding-block: 8px; }
}