/* R53 Version 4 learning and games screens (Claude, 2026-10-22). Built from the Lab's own components (kcard, kchip, kbtn, ktile, kbar,
   kstatus, panel, btn), so Version 3 "Holo Night" and Version 4 "Sky Day" restyle them; only layout and the few new pieces live here. */
.r53 { display: flex; flex-direction: column; gap: calc(14px * var(--k, 1)); }
.r53 .kcard { min-width: 0; }
.r53-big-num { font-size: 1.15em; margin: 4px 0; } .r53-big-num b { font-size: 2em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* places strip and tool cards */
.r53-strip { margin: 14px 0 6px; padding: 12px; border-radius: 20px; background: color-mix(in srgb, var(--panel, #10204a) 86%, transparent); border: 2px solid color-mix(in srgb, var(--line, #3a5ea8) 80%, transparent); position: relative; z-index: 1; }
.r53-strip-h { margin: 0 0 8px; font-weight: 800; }
.r53-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.r53-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 16px; border-radius: 18px; text-decoration: none; font-weight: 800; color: var(--text, #fff); background: color-mix(in srgb, var(--c, #2f8fff) 26%, var(--panel, #10204a)); border: 2px solid color-mix(in srgb, var(--c, #2f8fff) 70%, transparent); }
.r53-chip .e { font-size: 1.4em; } .r53-chip:focus-visible { outline: 3px solid var(--gold, #ffce27); outline-offset: 2px; }
.r53-due { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 8px 12px; margin-bottom: 10px; border-radius: 14px; background: #fff4d7; color: #69480d; border-left: 5px solid #ffb300; text-decoration: none; }
.v3h .r53-strip { color: #fff; background: rgba(6, 20, 60, .72); border-color: rgba(150, 226, 255, .42); margin-bottom: 120px; }
.r53-tools { margin: calc(14px * var(--k, 1)) 0; }
/* quiz */
.r53-quiz-q { font-size: 1.25em; font-weight: 800; margin: 6px 0 10px; }
.r53-quiz-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.r53-opt { min-height: 56px; white-space: normal; }
.r53-right { outline: 4px solid #2ec46d; } .r53-right::after { content: ' ✓'; }
.r53-wrong { outline: 4px solid #ff4d5e; opacity: .85; } .r53-wrong::after { content: ' ✗'; }
.r53-quiz-fb { min-height: 1.4em; font-weight: 700; }
.r53-quiz-acts { margin-top: 8px; gap: 10px; }
/* progress */
.r53-dots { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 8px 0; }
.r53-dots li { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line, #6a86c8); position: relative; }
.r53-dots li.on { background: var(--gold, #ffc84a); border-color: var(--gold, #ffc84a); }
.r53-dots.wide li { width: 18px; height: 18px; }
.r53-subjects { display: flex; flex-direction: column; gap: 8px; } .r53-subject { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.r53-subject b { min-width: 9em; }
.r53-goals, .r53-recent, .r53-tasks, .r53-plain, .r53-gb-list, .r53-steps, .r53-tr-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.r53-goals li { display: grid; grid-template-columns: 1fr minmax(80px, 30%) auto; gap: 10px; align-items: center; }
.r53-goals li small, .r53-task small, .r53-gb-list small { display: block; opacity: .8; }
.r53-goals li.done b::after { content: ' ✓'; }
/* phonics, missions, history */
.r53-lessons, .r53-mlist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.r53-lesson { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 64px; padding: 10px 14px; border-radius: 16px; border: 2px solid var(--line, #6a86c8); background: var(--panel, #10204a); color: var(--text, #fff); font: inherit; text-align: left; cursor: pointer; }
.r53-lesson .e { font-size: 1.6em; } .r53-lesson small { display: block; } .r53-lesson[disabled] { opacity: .55; cursor: default; }
.r53-lessons li.done .r53-lesson { border-color: #2ec46d; }
.r53-sounds { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; }
.r53-sound { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border-radius: 16px; border: 2px solid var(--line, #6a86c8); }
.r53-sound .e { font-size: 2.2em; } .r53-sound b { font-size: 1.6em; }
.r53-timeline { list-style: none; padding: 0 0 0 18px; margin: 0; border-left: 4px solid var(--gold, #ffc84a); display: flex; flex-direction: column; gap: 8px; }
.r53-era { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 56px; padding: 8px 12px; border-radius: 14px; border: 2px solid var(--line, #6a86c8); background: var(--panel, #10204a); color: var(--text, #fff); font: inherit; text-align: left; cursor: pointer; }
.r53-era .e { font-size: 1.6em; } .r53-era small { display: block; opacity: .8; }
.r53-timeline li.seen .r53-era { border-color: var(--gold, #ffc84a); }
.r53-era-more { padding: 8px 12px; }
.r53-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.r53-storytext { font-size: 1.25em; line-height: 1.5; }
.r53-steps li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .r53-steps li span:nth-child(2) { flex: 1; }
.r53-mission.locked { opacity: .65; }
.r53-tabs { margin-bottom: 4px; }
/* tables, forms, planner */
.r53-table { width: 100%; border-collapse: collapse; } .r53-table th, .r53-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line, #6a86c8); }
.r53-form { display: flex; flex-direction: column; gap: 10px; } .r53-form label, .r53-field { display: flex; flex-direction: column; gap: 4px; font-weight: 700; }
.r53-form input, .r53-form select, .r53-field select { min-height: 48px; font: inherit; padding: 6px 10px; border-radius: 12px; }
.r53-form-row { display: flex; flex-wrap: wrap; gap: 12px; } .r53-form-row label { flex: 1 1 160px; }
.r53-group { margin: 12px 0 6px; font-size: 1.05em; }
.r53-task { display: flex; align-items: center; gap: 10px; min-height: 56px; } .r53-task-main { flex: 1; min-width: 0; } .r53-task.done b { text-decoration: line-through; opacity: .7; }
.r53-check { position: relative; display: inline-flex; width: 44px; height: 44px; } .r53-check input { width: 32px; height: 32px; margin: 6px; }
.r53-toggle { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
/* resources and printable sheets */
.r53-res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.r53-res-item { display: flex; gap: 10px; align-items: center; min-height: 72px; padding: 10px 12px; border-radius: 16px; border: 2px solid var(--line, #6a86c8); background: var(--panel, #10204a); color: var(--text, #fff); text-decoration: none; font: inherit; text-align: left; cursor: pointer; }
.r53-res-item .e { font-size: 1.8em; } .r53-res-item small { display: block; opacity: .8; } .r53-res-item span:nth-child(2) { flex: 1; }
.r53-res-item .tag { font-size: .8em; padding: 2px 8px; border-radius: 10px; background: color-mix(in srgb, var(--gold, #ffc84a) 30%, transparent); }
.r53-paper { background: #fff; color: #111; padding: 18px; border-radius: 12px; } .r53-paper .r53-table td, .r53-paper .r53-table th { border-color: #999; }
.r53-trace { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } .r53-dot { font-size: 2em; color: #bbb; letter-spacing: .1em; } .r53-line { display: block; border-bottom: 2px dashed #999; height: 1.6em; }
.r53-sheet li { margin: 10px 0; font-size: 1.15em; } .r53-piece { font-size: 2em; }
@media print { body.r53-printing * { visibility: hidden !important; } body.r53-printing .r53-paper, body.r53-printing .r53-paper * { visibility: visible !important; } body.r53-printing .r53-paper { position: absolute; left: 0; top: 0; width: 100%; } }
/* games */
.r53-eco { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.r53-eco-item { display: flex; flex-direction: column; align-items: center; padding: 14px 24px; border-radius: 22px; border: 3px solid var(--line, #6a86c8); background: var(--panel, #10204a); }
.r53-eco-item .e { font-size: 72px; line-height: 1.1; } .r53-eco-item b { font-size: 1.3em; }
.r53-eco-bins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 640px; }
.r53-bin { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 104px; padding: 10px; border-radius: 20px; font: inherit; font-weight: 800; cursor: pointer; border: 3px solid; color: #fff; }
.r53-bin .e { font-size: 2.4em; } .bin-recycle { background: #1f6fd6; border-color: #9fd8ff; } .bin-compost { background: #2e8b43; border-color: #a6f0b4; } .bin-trash { background: #4a5468; border-color: #c6cfdd; }
.r53-chess { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.r53-chess-opts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 10px; }
.r53-board { display: grid; grid-template-rows: repeat(8, 1fr); width: min(92vw, 560px); aspect-ratio: 1; border: 4px solid #5b3d1f; border-radius: 8px; overflow: hidden; }
.r53-row { display: grid; grid-template-columns: repeat(8, 1fr); }
.r53-sq { display: grid; place-items: center; border: 0; padding: 0; margin: 0; min-width: 0; min-height: 0; font-size: clamp(22px, 7vw, 46px); line-height: 1; cursor: pointer; }
.r53-sq.lt { background: #f3e2c4; } .r53-sq.dk { background: #b98a5a; }
.r53-sq.sel { box-shadow: inset 0 0 0 4px #2f8fff; } .r53-sq.tgt { box-shadow: inset 0 0 0 4px #2ec46d; } .r53-sq.tgt::before { content: ''; position: absolute; width: 22%; height: 22%; border-radius: 50%; background: rgba(46, 196, 109, .55); }
.r53-sq { position: relative; } .r53-sq.last { background-image: linear-gradient(rgba(255, 206, 39, .38), rgba(255, 206, 39, .38)); } .r53-sq.hint { box-shadow: inset 0 0 0 4px #ff8a2e; }
.r53-sq .pc.w { color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 1px #000; } .r53-sq .pc.b { color: #111; text-shadow: 0 0 1px #fff; }
.r53-sq:focus-visible { outline: 3px solid #2f8fff; outline-offset: -3px; }
.r53-incheck { color: #ff4d5e; }
.r53-lights { display: grid; grid-template-columns: repeat(var(--n), minmax(56px, 88px)); gap: 8px; justify-content: center; }
.r53-light { aspect-ratio: 1; border-radius: 16px; border: 3px solid var(--line, #6a86c8); background: #1b2440; font-size: 2em; cursor: pointer; color: #fff; }
.r53-light.on { background: #ffd23f; border-color: #fff3b0; } .r53-light.hint { outline: 4px dashed #ff8a2e; }
.r53-grid4 { display: grid; grid-template-columns: repeat(4, minmax(56px, 80px)); gap: 4px; justify-content: center; }
.r53-cell { aspect-ratio: 1; border-radius: 10px; border: 2px solid var(--line, #6a86c8); background: var(--panel, #10204a); color: var(--text, #fff); font: inherit; font-size: 1.6em; font-weight: 800; cursor: pointer; }
.r53-cell.given { background: color-mix(in srgb, var(--gold, #ffc84a) 25%, var(--panel, #10204a)); cursor: default; } .r53-cell.sel { outline: 4px solid #2f8fff; } .r53-cell.bad { outline: 3px dashed #ff4d5e; }
.r53-cell.b00, .r53-cell.b11 { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .05); }
.r53-pal { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; } .r53-palb { min-width: 56px; font-size: 1.4em; }
.r53-logic { display: flex; flex-direction: column; align-items: center; gap: 8px; } .r53-logic-tabs { justify-content: center; margin-bottom: 10px; }
.r53-garage-preview { display: flex; flex-direction: column; align-items: center; } .r53-garage-preview img { width: min(100%, 520px); height: auto; }
.r53-garage-group { border: 0; padding: 0; margin: 0 0 12px; } .r53-garage-group legend { font-weight: 800; margin-bottom: 6px; }
.r53-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; vertical-align: middle; margin-right: 6px; }
.r53-gb-list li { display: flex; gap: 10px; align-items: center; } .r53-gb-list .e { font-size: 1.5em; width: 1.5em; text-align: center; } .r53-gb-list li:not(.got) { opacity: .7; }
.r53-gb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.r53-gbadges { margin-top: 14px; } .r53-gb-links { gap: 8px; margin: 8px 0 0; }
.r53-tr-list li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .r53-tr-list a { display: inline-flex; gap: 6px; align-items: center; color: inherit; } .r53-tr-b { font-size: 1.3em; }
.r53-garage-link { margin: 12px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.r53-plan-note { padding: 8px 12px; border-radius: 12px; background: #fff4d7; color: #69480d; }
.r53-hinttext { font-weight: 700; padding: 6px 10px; border-radius: 12px; background: #fff4d7; color: #69480d; }
/* V4-059 game settings in play */
.r53-ga-safe .r53-right, .r53-ga-safe .kanswer.ok, .r53-ga-safe .g3-choice.ok { outline: 4px solid #0072b2 !important; }
.r53-ga-safe .r53-wrong, .r53-ga-safe .kanswer.bad, .r53-ga-safe .g3-choice.bad { outline: 4px dashed #e69f00 !important; }
.r53-ga-safe .bin-recycle { background: #0072b2; } .r53-ga-safe .bin-compost { background: #6b4e16; } .r53-ga-safe .bin-trash { background: #333; }
.r53-ga-safe .r53-sq.tgt { box-shadow: inset 0 0 0 4px #0072b2; } .r53-ga-safe .r53-sq.tgt::before { background: rgba(0, 114, 178, .6); }
.r53-ga-big .kbtn, .r53-ga-big button.r53-opt, .r53-ga-big .gk-pad button, .r53-ga-big .r53-bin { min-height: 72px !important; font-size: 1.2em !important; }
.r53-ga-big .gk-pad .kbtn.round { width: 84px !important; height: 84px !important; } .r53-ga-big .r53-lights { grid-template-columns: repeat(var(--n), minmax(72px, 100px)); } .r53-ga-big .r53-grid4 { grid-template-columns: repeat(4, minmax(72px, 96px)); }
body.r53-acc-text.kid-mode { font-size: calc(19px * var(--k, 1)); } body.r53-acc-text .r53-quiz-q, body.r53-acc-text .r53-storytext { font-size: 1.45em; }
/* grown-up side: welcome card, tour, settings */
.r53-first { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; border-left: 5px solid #ffb300; margin-bottom: 14px; }
.r53-links .r53-link { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 14px; border: 1px solid var(--line, #a6c9e4); text-decoration: none; color: inherit; min-height: 64px; }
.r53-kidrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line, #a6c9e4); }
.r53-kidrow b { min-width: 6em; } .r53-kidrow select { min-height: 40px; } .r53-inline { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; }
.r53-tour { position: fixed; inset: 0; z-index: 9000; }
.r53-tour-hole { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(3, 12, 40, .62); border: 3px solid #ffce27; pointer-events: none; transition: all .2s; }
.r53-tour-card { position: fixed; left: 50%; transform: translateX(-50%); width: min(92vw, 440px); background: #fff; color: #06316f; border-radius: 18px; padding: 16px 18px; box-shadow: 0 14px 36px rgba(0, 0, 0, .35); }
.r53-tour-card h2 { margin: 2px 0 6px; font-size: 1.25em; } .r53-tour-card .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .r53-tour-card .grow { flex: 1; }
.r53-tour-card .btn { min-height: 44px; }
:root[data-r53-text="large"] body:not(.kid-mode) #view { font-size: 112%; } :root[data-r53-text="xl"] body:not(.kid-mode) #view { font-size: 125%; }
:root[data-r53-calm] body:not(.kid-mode) *, :root[data-r53-calm] body:not(.kid-mode) *::before, :root[data-r53-calm] body:not(.kid-mode) *::after { animation: none !important; transition: none !important; }
:root[data-r53-contrast] body:not(.kid-mode) #view { color: #000; } :root[data-r53-contrast] body:not(.kid-mode) #view :is(.panel, .stat, .li) { background: #fff !important; color: #000 !important; border: 2px solid #000 !important; }
:root[data-r53-contrast][data-theme="dark"] body:not(.kid-mode) #view { color: #fff; } :root[data-r53-contrast][data-theme="dark"] body:not(.kid-mode) #view :is(.panel, .stat, .li) { background: #000 !important; color: #fff !important; border-color: #fff !important; }
@media (prefers-reduced-motion: reduce) { .r53-tour-hole { transition: none; } }
@media (max-width: 560px) { .r53-eco-bins { gap: 8px; } .r53-bin { min-height: 92px; font-size: .95em; } .r53-goals li { grid-template-columns: 1fr auto; } .r53-goals li .kbar { grid-column: 1 / -1; grid-row: 2; } }
/* Version 4 "Sky Day": the new pieces in its bright blue / gold look */
:root[data-look=v4] .r53-chip { background: #ffffff; color: #0753a0; border-color: #87c8f5; box-shadow: 0 6px 14px rgba(4, 52, 120, .18); }
:root[data-look=v4] .v3h .r53-strip { background: rgba(255, 255, 255, .92); color: #06316f; border-color: #b9e8ff; }
:root[data-look=v4] :is(.r53-lesson, .r53-era, .r53-res-item, .r53-cell, .r53-sound, .r53-eco-item) { background: #ffffff; color: #06316f; border-color: #b6dfff; }
:root[data-look=v4] .r53-lessons li.done .r53-lesson { border-color: #109384; }
:root[data-look=v4] .r53-dots li.on { background: #ffc21a; border-color: #edac00; }
/* the tour card keeps its own dark-on-white colors in every look (the looks restyle h2, muted text and ghost buttons for their own panels) */
.r53-tour .r53-tour-card :is(h2, p, small) { color: #06316f !important; text-shadow: none !important; opacity: 1 !important; }
.r53-tour .r53-tour-card .small.muted { color: #38638b !important; }
.r53-tour .r53-tour-card .btn { color: #0753a0 !important; background: #e6f4ff !important; border: 2px solid #b6dfff !important; text-shadow: none !important; }
.r53-tour .r53-tour-card .btn.primary { color: #092a6b !important; background: linear-gradient(125deg, #ffdf3a, #ffa811) !important; border-color: #edac00 !important; }
.r53-tour .r53-tour-card .btn[disabled] { opacity: .5; }
/* R51 device check: the game name on each badge card is a link — give it a full child-size tap area */
.r53-gbpage [data-gb-game] h3 a{display:inline-flex;align-items:center;min-height:48px;padding:0 4px}