.play-body { --play-lilac:#ede8f5; --play-peach:#fbe9dc; --play-mint:#e1eee7; background:#f7f7f0; }
.memory-card .card-back span { opacity:.55; }
.mystery-board .stage-tools { justify-content:center; }
.end-card .lead { margin:auto; }
.end-card + .study-grid { margin-top:24px; }
.play-dialog .study-card { border:0; padding:0; }
.play-body [hidden] { display:none !important; }
.play-body button, .play-body a, .play-body select, .play-body input { touch-action:manipulation; }
.play-body button:focus-visible, .play-body a:focus-visible, .play-body input:focus-visible, .play-body select:focus-visible, .play-body summary:focus-visible { outline:3px solid #b75925; outline-offset:4px; }
.play-body button { cursor:pointer; }
.play-body button:disabled { cursor:default; opacity:.65; }
.play-header { display:flex; flex-wrap:wrap; align-items:center; gap:28px; padding:22px clamp(18px,5vw,76px); border-bottom:1px solid var(--line); background:var(--paper); }
.play-brand { display:flex; align-items:center; gap:12px; color:var(--brand); text-decoration:none; font:700 18px Georgia,serif; }
.play-brand small { display:block; margin-top:5px; font:11px system-ui; color:var(--muted); }
.play-nav { display:flex; flex-wrap:wrap; gap:4px; margin-left:auto; }
.play-nav button { border:0; background:transparent; border-radius:30px; padding:12px 18px; font-size:13px; color:var(--muted); }
.play-nav button[aria-current="page"] { color:var(--brand); background:var(--brand-soft); font-weight:700; }
.play-nav a { display:inline-flex; align-items:center; border-radius:30px; padding:12px 18px; font-size:14px; color:var(--brand); text-decoration:none; }
.play-nav a:hover { background:var(--brand-soft); }
.back-to-site { color:var(--brand); font-size:12px; text-decoration:none; white-space:nowrap; }
.play-main { max-width:1260px; margin:auto; padding:48px 32px 64px; min-height:75vh; }
.play-main:focus { outline:none; }
.welcome-row { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:30px; }
.play-eyebrow { color:#586f60; font-size:11px; letter-spacing:.16em; font-weight:800; margin:0 0 14px; }
.play-main h1 { font:normal clamp(36px,4.3vw,60px)/1.1 Georgia,serif; letter-spacing:-.045em; margin:0 0 18px; color:var(--brand); }
.accent-dot { color:var(--accent); }
.lead { font-size:15px; color:var(--muted); line-height:1.7; max-width:680px; }
.collection-counter { padding:24px 32px; border-left:1px solid #cfd9ce; min-width:190px; }
.collection-counter strong { display:block; font:normal 50px Georgia,serif; color:var(--brand); }
.collection-counter span { color:var(--muted); font-size:12px; }
.collection-counter strong small { font:14px system-ui; color:var(--muted); }
.small-help { font-size:12px; color:var(--muted); line-height:1.65; }
.hub-controls { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:24px 0; }
.hub-controls label { font-weight:700; font-size:13px; }
.play-body select, .play-body input[type="search"] { padding:12px 16px; background:var(--paper); border:1px solid var(--line); border-radius:12px; color:var(--ink); max-width:100%; }
.hub-controls .play-secondary { margin-left:auto; }
.game-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.game-choice { border:1px solid rgba(35,55,42,.12); border-radius:22px; padding:26px; display:flex; flex-direction:column; overflow:hidden; }
.memory-theme { background:var(--play-mint); }
.bridge-theme { background:var(--play-peach); }
.mystery-theme { background:var(--play-lilac); }
.orbit-theme { background:#dfeaf4; }
.asteroid-theme { color:#eff8f5; background:linear-gradient(155deg,#0e3039,#1b5149); }
.asteroid-theme .game-number,.asteroid-theme h2,.asteroid-theme p,.asteroid-theme small { color:inherit; }
.asteroid-theme .word-mark { color:#fff7d8; border-color:rgba(255,255,255,.2); }
.asteroid-theme .word-mark span { color:#f0c96a; }
.asteroid-theme .play-primary { color:#173d38; background:#f0c96a; border-color:#f0c96a; }
.game-number { font-size:10px; font-weight:800; letter-spacing:.13em; }
.word-mark { display:flex; align-items:center; justify-content:center; gap:10px; min-height:130px; font:italic 25px Georgia,serif; color:var(--brand); border-bottom:1px solid rgba(35,55,42,.14); margin-bottom:25px; }
.word-mark span { font:normal 34px Georgia,serif; color:#8b572c; }
.game-choice h2 { font:normal 28px/1.1 Georgia,serif; margin:0 0 12px; color:var(--brand); max-width:220px; }
.game-choice p { font-size:13px; line-height:1.65; margin:0 0 22px; flex:1; }
.game-choice small { text-align:center; color:#52625a; margin-top:12px; font-size:10px; }
.play-primary, .play-secondary, .play-quiet { display:inline-flex; justify-content:center; align-items:center; gap:12px; min-height:44px; padding:12px 20px; border-radius:12px; font-weight:650; font-size:13px; text-decoration:none; }
.play-primary { color:white; background:var(--brand); border:1px solid var(--brand); }
.play-primary:hover:not(:disabled) { background:#265c4d; }
.play-primary span { margin-left:auto; }
.play-secondary { color:var(--brand); background:var(--paper); border:1px solid #c7d1c7; }
.play-secondary:hover:not(:disabled) { background:var(--brand-soft); }
.play-quiet { color:var(--brand); background:transparent; border:0; text-decoration:underline; }
.example-card, .resume-card, .practice-note { border:1px solid var(--line); background:var(--paper); border-radius:16px; padding:22px; margin-top:22px; }
.example-card summary { cursor:pointer; color:var(--brand); font-weight:700; }
.resume-card { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; border-color:#b4cbb9; }
.resume-card p { margin:6px 0 0; color:var(--muted); font-size:13px; }
.practice-note { display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:13px; }
.play-footer { display:flex; justify-content:space-between; gap:16px; max-width:1196px; margin:auto; padding:20px 0 30px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); }
.storage-warning { background:#fff0d6; padding:16px; color:#694815; margin:0; border-bottom:1px solid #dab979; }
.stage-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.stage-heading h1 { font-size:clamp(28px,3.5vw,43px); margin-bottom:8px; }
.stage-heading p { color:var(--muted); font-size:13px; margin:0; }
.stage-topline { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.stage-tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.round-status { margin-left:auto; font-size:13px; color:var(--brand); font-weight:700; display:flex; gap:14px; align-items:center; }
.time-badge { padding:10px 16px; border-radius:22px; background:#fbe9dc; font-variant-numeric:tabular-nums; }
.time-badge.urgent { background:#853d2a; color:white; }
.study-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.study-card { border:1px solid var(--line); background:var(--paper); border-radius:20px; padding:24px; }
.study-card h2 { font:normal 32px Georgia,serif; color:var(--brand); margin:10px 0 14px; overflow-wrap:anywhere; }
.study-card p { line-height:1.6; font-size:14px; }
.study-card blockquote { border-left:3px solid #b5cab9; padding-left:14px; margin:15px 0; color:#4d6758; font:italic 17px/1.55 Georgia,serif; }
.relation-line { font-size:12px !important; color:var(--muted); }
.relation-line strong { color:var(--brand); }
.study-action { display:flex; justify-content:center; margin-top:24px; }
.memory-board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; max-width:970px; margin:0 auto 24px; }
.memory-card { min-height:145px; padding:18px 10px; border-radius:18px; border:2px solid transparent; background:#234b3f; color:#f3edcf; font:normal clamp(18px,2.4vw,26px) Georgia,serif; overflow-wrap:anywhere; transition:transform .16s, background .16s; }
.memory-card:hover:not(:disabled) { transform:translateY(-3px); }
.memory-card .card-back { display:block; font:normal 38px Georgia,serif; }
.memory-card small { display:block; font:10px system-ui; margin-top:10px; letter-spacing:.09em; }
.memory-card.flipped { background:#fffdfa; border-color:#97b7a1; color:var(--brand); }
.memory-card.matched { background:#dceadb; border-color:#adc4a7; color:#245332; opacity:1; }
.bridge-board { display:grid; grid-template-columns:1fr 1fr; gap:30px; max-width:850px; margin:auto; }
.bridge-column { display:grid; gap:14px; }
.bridge-label { margin:0 0 3px; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.12em; }
.bridge-word { min-height:76px; padding:15px; border:2px solid #d7cabb; border-radius:16px; background:#fffaf3; color:var(--ink); font:normal 23px Georgia,serif; overflow-wrap:anywhere; }
.bridge-word[aria-pressed="true"] { background:#ffe5c4; border-color:#ad632a; }
.bridge-word.matched { background:var(--play-mint); border-color:#8caf99; color:#28503b; opacity:1; }
.bridge-word small { display:block; margin-top:5px; font:11px system-ui; }
.bridge-path { display:flex; gap:6px; align-items:center; max-width:440px; margin:22px auto; }
.bridge-path span { flex:1; height:9px; background:#dddcd0; border-radius:6px; }
.bridge-path .built { background:#5d916d; }
.mystery-board { max-width:850px; margin:auto; text-align:center; background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:32px 24px; }
.mystery-clue { font:normal clamp(22px,2.6vw,30px)/1.45 Georgia,serif; color:var(--brand); margin:12px auto 22px; max-width:660px; }
.sentence-clue { color:var(--muted); font-size:14px; line-height:1.7; }
.letter-slots, .letter-pool { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin:20px 0; }
.letter-tile, .letter-slot { display:grid; place-items:center; width:45px; height:54px; border:1px solid #c5bad7; border-radius:9px; color:#443253; background:#eae3f4; font-size:22px; font-weight:600; text-transform:lowercase; }
.letter-slot { background:#fff; border-bottom:3px solid #ae9abd; }
.letter-slot:empty { background:#f2eff7; }
.letter-tile:disabled { visibility:hidden; }
.letter-slot:disabled { color:#356b43; background:#dcebdd; border-color:#abc8ae; opacity:1; }
.orbit-heading { margin-bottom:14px; }
.orbit-shell { max-width:970px; margin:auto; }
.orbit-scoreboard { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.orbit-scoreboard span { padding:8px 13px; color:#38564f; background:#edf3f1; border:1px solid #ccdad5; border-radius:999px; font-size:12px; }
.orbit-scoreboard strong { color:var(--brand); font-variant-numeric:tabular-nums; }
.orbit-speed-control { display:flex; align-items:center; gap:8px; padding:5px 7px 5px 13px; color:#38564f; background:#fff4cf; border:1px solid #e4cd83; border-radius:999px; font-size:12px; font-weight:700; }
.orbit-speed-control select { max-width:180px; padding:4px 8px; border:1px solid #d4bb68; border-radius:999px; background:white; color:var(--brand); font:inherit; }
.orbit-arena {
  position:relative;
  overflow:hidden;
  height:clamp(410px,62vh,590px);
  color:white;
  background:
    radial-gradient(circle at 18% 16%,rgba(240,201,106,.85) 0 1px,transparent 2px),
    radial-gradient(circle at 73% 28%,rgba(255,255,255,.75) 0 1px,transparent 2px),
    radial-gradient(circle at 42% 68%,rgba(195,225,234,.65) 0 1px,transparent 2px),
    linear-gradient(180deg,#0a2631,#143d3d 72%,#1a4b40);
  background-size:117px 101px,173px 149px,139px 127px,auto;
  border:3px solid #244f4e;
  border-radius:24px;
  box-shadow:inset 0 0 70px rgba(0,0,0,.28),0 18px 40px rgba(23,61,56,.12);
  touch-action:none;
  user-select:none;
}
.orbit-arena:focus-visible { outline:3px solid #f0c96a; outline-offset:4px; }
.orbit-arena::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 33.1%,rgba(255,255,255,.1) 33.2% 33.45%,transparent 33.55% 66.45%,rgba(255,255,255,.1) 66.55% 66.8%,transparent 66.9%); }
.orbit-rock-field { position:absolute; z-index:2; top:-18%; left:0; width:100%; height:1px; animation-name:orbit-fall; animation-timing-function:linear; animation-fill-mode:forwards; }
.orbit-rock-field.orbit-speed-slow { animation-duration:8.6s; }
.orbit-rock-field.orbit-speed-normal { animation-duration:5.75s; }
.orbit-rock-field.orbit-speed-fast { animation-duration:3.75s; }
.orbit-rock-field.orbit-paused { animation-play-state:paused; }
@keyframes orbit-fall { from { top:-18%; } to { top:68%; } }
.orbit-rock { position:absolute; display:grid; justify-items:center; gap:4px; width:30%; transform:translate(-50%,-50%); text-align:center; }
.orbit-rock.lane-0,.orbit-ship.lane-0 { left:16.666%; }
.orbit-rock.lane-1,.orbit-ship.lane-1 { left:50%; }
.orbit-rock.lane-2,.orbit-ship.lane-2 { left:83.333%; }
.orbit-rock span { font-size:clamp(34px,5vw,52px); line-height:1; filter:drop-shadow(0 7px 6px rgba(0,0,0,.35)); }
.orbit-rock strong { max-width:100%; padding:6px 10px; color:#173d38; background:#f6dda0; border:2px solid #ffeebc; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.3); font:700 clamp(13px,2vw,18px)/1.25 system-ui; overflow-wrap:anywhere; }
.orbit-ship { position:absolute; z-index:3; bottom:3%; display:grid; justify-items:center; gap:3px; width:30%; transform:translateX(-50%); transition:left .12s ease-out; }
.orbit-ship span { font-size:clamp(42px,7vw,67px); line-height:1; transform:rotate(-45deg); filter:drop-shadow(0 8px 5px rgba(0,0,0,.38)); }
.orbit-ship strong { max-width:100%; padding:7px 12px; color:#173d38; background:#fff7d8; border:2px solid #f0c96a; border-radius:999px; font:700 clamp(14px,2vw,20px)/1.2 system-ui; overflow-wrap:anywhere; }
.orbit-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
.orbit-lane-button { min-height:48px; padding:10px; color:var(--brand); background:var(--paper); border:1px solid #b8ccc5; border-radius:12px; font-weight:700; }
.orbit-lane-button:hover { background:#e4efeb; }
.orbit-message { min-height:1.7em; margin:12px 0 0; padding:11px 14px; text-align:center; color:#31534a; background:#edf3f1; border-radius:12px; font-size:14px; }
.orbit-message.good { color:#245332; background:#e2f0df; }
.orbit-message.try { color:#754616; background:#fff0d8; }
.orbit-end { max-width:850px; margin:auto; }
.asteroid-heading { margin-bottom:14px; }
.asteroid-shell { max-width:970px; margin:auto; }
.asteroid-canvas { display:block; width:100%; height:clamp(430px,62vh,590px); box-sizing:border-box; border:3px solid #244f4e; border-radius:24px; background:radial-gradient(circle at 18% 16%,rgba(240,201,106,.8) 0 1px,transparent 2px),radial-gradient(circle at 73% 28%,rgba(255,255,255,.75) 0 1px,transparent 2px),radial-gradient(circle at 42% 68%,rgba(195,225,234,.65) 0 1px,transparent 2px),linear-gradient(180deg,#071f2b,#123d41 65%,#16493f); background-size:117px 101px,173px 149px,139px 127px,auto; box-shadow:inset 0 0 70px rgba(0,0,0,.28),0 18px 40px rgba(23,61,56,.12); touch-action:none; }
.asteroid-canvas:focus-visible { outline:3px solid #f0c96a; outline-offset:4px; }
.asteroid-controls { display:grid; grid-template-areas:". up ." "left down right"; grid-template-columns:repeat(3,64px); justify-content:center; gap:7px; margin-top:13px; }
.asteroid-move-button { display:grid; place-items:center; min-height:52px; border:1px solid #aac3bb; border-radius:13px; color:var(--brand); background:var(--paper); font-size:23px; font-weight:800; touch-action:none; user-select:none; }
.asteroid-move-button:hover,.asteroid-move-button:active { color:white; background:var(--brand); }
.asteroid-move-button.up { grid-area:up; }
.asteroid-move-button.left { grid-area:left; }
.asteroid-move-button.down { grid-area:down; }
.asteroid-move-button.right { grid-area:right; }
.asteroid-end { max-width:850px; margin:auto; }
.feedback { background:var(--paper); border:1px solid var(--line); padding:20px 24px; border-radius:16px; margin:24px auto 0; max-width:970px; }
.feedback.good { background:#e7f0e3; border-color:#b4cba7; }
.feedback.try { background:#fff1df; border-color:#ddba88; }
.feedback p { margin:6px 0; font-size:14px; line-height:1.6; }
.feedback blockquote { margin:12px 0; font-style:italic; color:#526857; }
.feedback .play-primary { margin-top:8px; }
.round-footer { display:flex; justify-content:center; gap:10px; margin-top:24px; flex-wrap:wrap; }
.end-card { text-align:center; padding:38px 26px; background:var(--paper); border:1px solid var(--line); border-radius:24px; }
.end-card h1 { font-size:46px; }
.score-large { font:normal 70px Georgia,serif; color:var(--brand); margin:20px 0 8px; }
.result-words { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:22px 0; }
.word-chip { padding:9px 13px; background:var(--play-mint); border-radius:24px; color:var(--brand); font-size:13px; }
.collection-tools { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.collection-tools input { flex:1; min-width:170px; }
.collection-tools #collection-level { min-width:170px; }
.collection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.collection-card { display:block; text-align:left; border:1px solid var(--line); border-radius:17px; background:var(--paper); color:var(--ink); padding:22px; min-width:0; }
.collection-card h2 { font:normal 25px Georgia,serif; color:var(--brand); margin:9px 0; overflow-wrap:anywhere; }
.collection-card p { color:var(--muted); font-size:12px; line-height:1.6; }
.mini-tag { font-size:10px; font-weight:700; padding:4px 7px; background:var(--brand-soft); color:var(--brand); border-radius:6px; display:inline-block; }
.mini-tag.warm { background:#fff0d7; color:#7b4e17; }
.empty-state { padding:40px; text-align:center; background:var(--paper); border:1px dashed #c3cec1; border-radius:20px; }
.play-dialog { width:min(600px,calc(100vw - 30px)); max-height:85vh; border:1px solid var(--line); border-radius:22px; padding:28px; color:var(--ink); background:var(--paper); }
.play-dialog::backdrop { background:rgba(18,39,29,.45); }
.play-dialog h2 { font:normal 32px Georgia,serif; color:var(--brand); margin:0 0 18px; }
.play-dialog p { line-height:1.6; }
.play-dialog article + article { border-top:1px solid var(--line); padding-top:18px; margin-top:18px; }
.play-dialog > button { margin-top:24px; }
.play-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--brand); color:white; padding:13px 20px; border-radius:12px; z-index:20; max-width:calc(100vw - 32px); font-size:13px; visibility:hidden; }
.play-toast.visible { visibility:visible; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.review-choice { grid-column:auto; display:flex; align-items:stretch; gap:0; background:#f6efd9; }
.review-choice h2 { margin-top:14px; }
.review-choice p { margin-bottom:0; max-width:570px; }
.review-choice-action { display:flex; flex-direction:column; gap:10px; margin-top:auto; }
.review-choice-action > span { color:var(--muted); font-size:12px; }
.review-choice-action small { margin:0; }
.review-dashboard { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:24px 0; }
.review-dashboard > div { display:flex; flex-direction:column; gap:6px; padding:17px 20px; background:var(--paper); border:1px solid var(--line); border-radius:14px; }
.review-dashboard strong { font:normal 29px Georgia,serif; color:var(--brand); }
.review-dashboard span { font-size:12px; color:var(--muted); }
.review-settings { display:flex; align-items:center; flex-wrap:wrap; gap:16px 28px; margin:24px 0; }
.review-setting { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.review-settings .small-help { flex-basis:100%; }
.review-settings label { font-size:13px; font-weight:650; }
.recall-card { max-width:950px; margin:auto; background:var(--paper); border:1px solid #c6d5c8; border-radius:24px; padding:clamp(22px,4vw,44px); }
.recall-card-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--muted); font-size:12px; }
.recall-task { margin:28px 0 9px; text-align:center; font-size:15px; color:var(--muted); }
.recall-card h2 { font:normal clamp(34px,6vw,62px)/1.1 Georgia,serif; text-align:center; color:var(--brand); margin:0 0 22px; overflow-wrap:anywhere; }
.recall-card blockquote { text-align:center; margin:20px auto 12px; max-width:650px; font:italic 19px/1.6 Georgia,serif; color:#496250; }
.recall-card > .small-help { text-align:center; }
.recall-label { display:block; margin:28px 0 10px; font-size:13px; font-weight:600; }
#recall-draft { width:100%; box-sizing:border-box; border:1px solid #b8cbbd; border-radius:12px; background:white; color:var(--ink); font-size:18px; padding:14px 16px; }
.reveal-answer { display:flex; margin:20px auto 0; min-width:220px; }
.recall-answer { margin-top:26px; padding:22px; background:#edf3e9; border-radius:16px; }
.recall-answer p { line-height:1.65; }
.recall-solutions { font:normal 25px/1.5 Georgia,serif; color:var(--brand); overflow-wrap:anywhere; margin:10px 0 16px; }
.recall-ratings { border:0; padding:0; margin:28px 0 15px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.recall-ratings legend { font-size:15px; font-weight:700; padding:0 0 16px; }
.recall-rating { display:flex; flex-direction:column; gap:9px; justify-content:space-between; padding:17px 12px; border:1px solid #c0cdbf; border-radius:13px; color:var(--ink); text-align:left; background:#f1f3e7; min-height:135px; }
.recall-rating:hover { filter:brightness(.96); }
.recall-rating strong { font-size:17px; }
.recall-rating span { font-size:12px; line-height:1.5; }
.recall-rating small { font-size:11px; font-weight:650; }
.recall-rating.again { background:#fff0e8; border-color:#d5a68f; }
.recall-rating.hard { background:#fff6dc; border-color:#d4bd83; }
.recall-rating.good { background:#edf4e6; border-color:#adc699; }
.recall-rating.easy { background:#e3f1ea; border-color:#98baaa; }
.review-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:18px auto; max-width:950px; }
.review-method { border-top:1px solid var(--line); margin:30px auto 0; padding-top:20px; max-width:950px; font-size:14px; line-height:1.7; }
.review-method summary { color:var(--brand); cursor:pointer; font-weight:650; }
.review-method a { color:var(--brand); text-underline-offset:3px; }
.recall-empty { max-width:870px; margin:auto; }
.recall-empty p { line-height:1.7; }
@media(max-width:900px) { .play-header { flex-wrap:wrap; padding:18px 22px; gap:16px; } .play-nav { order:3; margin:0; width:100%; } .back-to-site { margin-left:auto; } .play-main { padding:30px 22px; } .game-grid { gap:12px; } .game-choice { padding:20px; } .game-choice h2 { font-size:25px; } .word-mark { font-size:21px; } .collection-counter { min-width:140px; padding:16px; } .play-footer { margin:0 22px; } .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .welcome-row { align-items:flex-start; } .collection-counter { display:none; } .game-grid { grid-template-columns:1fr; } .game-choice { display:grid; grid-template-columns:1fr auto; gap:0 16px; } .game-number,.game-choice h2,.game-choice p { grid-column:1; } .game-choice h2 { max-width:none; margin-top:15px; } .word-mark { display:none; } .game-choice .play-primary { grid-column:1 / -1; } .game-choice small { grid-column:1 / -1; } .hub-controls .play-secondary { margin-left:0; } .study-grid { grid-template-columns:1fr; } .memory-board { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .memory-card { min-height:106px; } .bridge-board { gap:12px; } .bridge-word { font-size:19px; min-height:78px; padding:10px; } .stage-heading { align-items:flex-start; } .stage-heading .play-secondary { padding:10px; font-size:11px; } .round-status { width:100%; margin-left:0; } .letter-tile,.letter-slot { width:35px; height:44px; font-size:19px; } .mystery-board { padding:23px 15px; } .orbit-arena { height:430px; border-radius:18px; } .orbit-rock { width:32%; } .orbit-rock strong { padding:5px 7px; font-size:12px; } .orbit-ship { width:32%; } .orbit-ship strong { padding:6px 8px; font-size:13px; } .orbit-controls { gap:5px; } .orbit-lane-button { min-height:52px; padding:8px 4px; font-size:12px; } .asteroid-canvas { height:440px; border-radius:18px; } .asteroid-controls { grid-template-columns:repeat(3,58px); } .collection-grid { grid-template-columns:1fr; } .play-footer { flex-direction:column; gap:8px; } .practice-note { flex-direction:column; } .play-nav button { flex:1; padding:10px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } .orbit-rock-field { animation-name:orbit-fall !important; animation-duration:12s !important; animation-timing-function:linear !important; animation-fill-mode:forwards !important; } .orbit-rock-field.orbit-paused { animation-play-state:paused !important; } }
@media(max-width:650px) { .game-choice.review-choice { grid-column:auto; grid-template-columns:1fr; gap:20px; } .review-dashboard { grid-template-columns:repeat(2,minmax(0,1fr)); } .review-dashboard > div { padding:14px; } .recall-ratings { grid-template-columns:repeat(2,minmax(0,1fr)); } .recall-rating { min-height:125px; } .recall-answer { padding:17px; } .play-nav { flex-wrap:wrap; } .play-nav button { flex:1 1 auto; } .review-settings .small-help { width:100%; } }