:root{--ink:#3f384b;--muted:#796d82;--paper:#fffaf6;--panel:#fff;--lav:#e7ddf4;--lav-ink:#624f82;--line:#eee5e9;--mint:#d8efdf;--rose:#f8e1e9;--peach:#fbe6d4;--shadow:0 8px 28px rgba(91,69,91,.055);--title:'League Spartan',system-ui,sans-serif;--body:'Sniglet','Trebuchet MS',sans-serif}
*{box-sizing:border-box}html{background:transparent}body{margin:0;min-width:280px;background:transparent;color:var(--ink);font-family:var(--body);-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible{outline:3px solid #7c72c4;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.48}.game-shell{width:min(100%,1100px);margin:0 auto;background:radial-gradient(ellipse at 3% 50%,rgba(219,200,240,.2),transparent 27%),radial-gradient(ellipse at 98% 55%,rgba(189,231,209,.18),transparent 25%),var(--paper);border:1px solid #f0e6e2;border-radius:22px;padding:clamp(14px,3vw,27px);box-shadow:var(--shadow)}
.game-header{text-align:center;margin:0 0 17px}.lesson-tag{display:inline-flex;align-items:center;background:#f0e7f7;border:1px solid #e6d8f0;color:#735d90;border-radius:30px;padding:5px 12px;font-size:10px;letter-spacing:.12em;font-weight:800;margin-bottom:9px}.game-header h1{font-family:var(--title);font-weight:800;font-size:clamp(30px,5vw,43px);letter-spacing:-.045em;line-height:1.04;color:#594673;margin:0 0 7px}.game-header p{font-size:clamp(14px,2.1vw,18px);color:#6d6175;margin:0}.progress{margin:0 4px 17px}.progress__row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;font-size:clamp(14px,1.7vw,16px);color:#6b5c79}.progress__track{height:11px;background:#ece3e8;border-radius:99px;overflow:hidden}.progress__fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#9ed7b4,#8fcca7);transition:width .38s ease}
.play-layout{display:grid;grid-template-columns:minmax(118px,144px) minmax(0,1fr) minmax(118px,144px);gap:13px;align-items:stretch}.records-panel,.current-panel{display:flex;flex-direction:column;gap:12px;min-width:0}.record,.stat{height:95px;min-width:0;border-radius:16px;border:1px solid rgba(99,70,103,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:10px 5px;text-align:center}.record{background:#fff}.stat--score{background:#f8dce6}.stat--attempts{background:#e5def5}.record__label,.stat__label{font-size:12px;color:#6d5c78;text-transform:uppercase;letter-spacing:.045em;line-height:1.3}.record__value,.stat__value{font-size:30px;line-height:1;font-weight:800;color:#554565;font-variant-numeric:tabular-nums;font-family:var(--body)}.sidebar-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto}.action{width:100%;min-height:44px;border:1px solid rgba(105,73,112,.13);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;transition:filter .15s,transform .15s;font-size:15px;color:#594c70}.action:hover{filter:brightness(.985);transform:translateY(-1px)}.action svg{width:17px;height:17px;flex:0 0 17px}.action--sound{background:#e9dff5}.action--restart{background:#f8e3e9}.stars-label{text-align:center;font-size:11px;letter-spacing:.08em;color:#84728c;margin-top:19px}.stars-preview{text-align:center;font-size:26px;letter-spacing:2px;color:#d4ae67}
.center-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.99fr);gap:13px;min-width:0}.builder-panel,.picture-panel{min-width:0;background:white;border:1px solid #ece4e9;border-radius:20px;box-shadow:0 3px 13px rgba(102,65,99,.035)}.builder-panel{padding:19px 15px;display:flex;flex-direction:column;gap:0;min-height:402px}.panel-eyebrow{color:#7b6786;display:flex;align-items:center;gap:7px;font-size:12px;font-family:var(--title);font-weight:800;letter-spacing:.065em}.eyebrow-dot{width:8px;height:8px;border-radius:50%;background:#a88aca;display:inline-block}.eyebow-dot--pic{background:#e5b5b0}.builder-intro{font-size:14px;line-height:1.4;color:#82758a;margin:12px 0 21px;min-height:38px}.source-label{color:#776582;font-size:12px;letter-spacing:.065em;margin-bottom:11px;font-family:var(--title);font-weight:800}.word-bank{min-height:68px;display:flex;gap:7px;flex-wrap:wrap;align-items:flex-start;justify-content:center;padding:1px 0}.word-tile{display:inline-flex;align-items:center;justify-content:center;border:1.5px solid #d5c4e9;border-radius:12px;background:#e8dcf6;color:#554568;padding:11px 12px;min-height:50px;font-size:18px;white-space:nowrap;box-shadow:0 3px 0 #ded0ed;cursor:grab;touch-action:none;user-select:none;transition:transform .14s,box-shadow .14s,background .18s}.word-tile:hover{transform:translateY(-1px)}.word-tile:active{cursor:grabbing}.word-tile.is-drag-origin{opacity:.38}.word-tile.grammar-subject{background:#e7daf6;border-color:#cbb8e7;box-shadow:none}.word-tile.grammar-verb{background:#d9f0e2;border-color:#b9dfc7;box-shadow:none}.word-tile.grammar-object{background:#fbe5d5;border-color:#efcdb6;box-shadow:none}.down-chevron{display:flex;align-items:center;justify-content:center;height:42px;color:#a793be}.down-chevron svg{width:25px;height:25px}.answer-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:11px;min-width:0}.answer-slot{background:#fbf9fc;border:2px dashed #ddcde9;border-radius:12px;height:56px;min-width:0;display:flex;align-items:stretch;justify-content:center;transition:border-color .18s,background .18s}.answer-slot.is-target{border-color:#ab83d4;background:#f0e8f9}.answer-slot .word-tile{width:100%;height:100%;min-height:0;box-shadow:none;font-size:clamp(13px,1.55vw,17px);padding:6px 1px;border:1px solid #d5c4e9;overflow-wrap:anywhere;white-space:normal;line-height:1.14;text-align:center}.empty-slot{width:100%;height:100%;background:transparent;border:0;font-size:25px;color:#bba8cb;cursor:default}.answer-slot.is-solved{border:0}.feedback{margin-top:4px;background:#f5f0f8;border:1px solid #eee6f1;color:#736582;border-radius:12px;min-height:58px;padding:10px 9px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;line-height:1.25;text-align:center;transition:background .15s}.feedback__icon{color:#a38fb9;font-size:19px}.feedback.is-correct{background:#e6f3e9;border-color:#cfe8d7;color:#376d52}.feedback.is-correct .feedback__icon{color:#41976b}.feedback.is-wrong{background:#fff0e9;border-color:#f2d3c5;color:#935f55}.feedback.is-wrong .feedback__icon{color:#bb776a}.builder-actions{display:flex;gap:8px;margin-top:12px}.builder-btn{min-height:44px;border:1px solid rgba(95,68,93,.08);border-radius:12px;padding:9px 13px;font-size:16px;cursor:pointer;flex:1;white-space:nowrap;transition:filter .15s}.builder-btn:hover:not(:disabled){filter:brightness(.97)}.builder-btn--clear{background:#f8e5eb;color:#825b6d}.builder-btn--check{background:#cdebd8;color:#3d6a51}.builder-btn--next{background:#d9e9ff;color:#4a627f;font-size:15px;flex:1.5}
.picture-panel{margin:0;padding:19px 13px;display:flex;flex-direction:column;min-height:402px;align-items:stretch}.picture-frame{width:100%;aspect-ratio:1/1;max-height:312px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:15px;overflow:hidden;margin-top:12px}.picture-frame img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}.picture-caption{font-size:13px;text-align:center;color:#8b7b8e;line-height:1.35;margin-top:12px}.replay{align-self:center;margin-top:12px;background:#e6f1e9;border:1px solid #cde5d5;color:#477359;padding:8px 13px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;cursor:pointer}.replay svg{width:17px;height:17px}.replay[hidden]{display:none}
.footer-note{text-align:center;font-size:12px;color:#a99aa7;margin:18px 0 0}.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}[hidden]{display:none!important}.answer-row.shake{animation:shake .28s ease-in-out}@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}.drag-ghost{position:fixed;z-index:9999;pointer-events:none;opacity:.9;transform:translate(-50%,-50%) scale(1.06);box-shadow:0 8px 20px rgba(71,54,86,.22)!important}.word-bank.drop-active,.answer-slot.drop-active{outline:2px solid #9c88cb;outline-offset:2px}
.win-modal{position:fixed;inset:0;z-index:1000;background:rgba(35,25,46,.43);display:grid;place-items:center;padding:20px;overflow:hidden}.win-card{position:relative;z-index:2;background:#fffcf9;border:2px solid #f4e5e4;border-radius:25px;padding:28px;max-width:420px;width:100%;text-align:center;box-shadow:0 22px 70px rgba(25,16,38,.18)}.win-trophy{font-size:45px}.win-card h2{font-family:var(--title);font-size:34px;color:#654c83;margin:4px 0 6px}.win-card p{color:#776881;font-size:17px;margin:8px 0}.win-stars{font-size:43px;letter-spacing:5px;color:#efbf62}.win-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0}.win-stats>div{display:flex;flex-direction:column;gap:6px;border-radius:12px;background:#f3eafb;padding:12px}.win-stats span{font-size:12px;color:#756781;text-transform:uppercase}.win-stats strong{font-size:25px;color:#594676}.new-best{color:#4a8d61!important;min-height:18px}.play-again{background:#d6ebda;color:#447453;padding:13px 28px;border:0;border-radius:14px;cursor:pointer;font-size:18px}.victory-confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
@media(max-width:980px){.game-shell{padding:19px}.play-layout{grid-template-columns:116px minmax(0,1fr) 116px;gap:9px}.center-stage{gap:9px}.builder-panel{padding:15px 10px}.picture-panel{padding:15px 9px}.record,.stat{height:85px}.record__label,.stat__label{font-size:11px}.record__value,.stat__value{font-size:26px}.word-tile{font-size:16px;padding:10px 9px}.answer-slot .word-tile{font-size:14px}.action{font-size:13px}}
@media(max-width:800px){.play-layout{grid-template-columns:1fr 1fr;grid-template-areas:'records current' 'center center';gap:12px}.records-panel{grid-area:records;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:8px}.current-panel{grid-area:current;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:8px}.center-stage{grid-area:center;grid-template-columns:1fr 1fr;gap:12px}.record,.stat{height:73px;gap:3px}.sidebar-actions{grid-column:1/-1;display:flex;flex-direction:row;gap:8px;margin-top:0}.action{min-height:38px}.stars-label,.stars-preview{display:none}.builder-panel,.picture-panel{min-height:380px}}
@media(max-width:560px){.game-shell{padding:14px 12px;border-radius:17px}.game-header{margin-bottom:13px}.game-header h1{font-size:34px}.game-header p{font-size:15px}.progress{margin:0 2px 13px}.play-layout{gap:10px}.records-panel,.current-panel{grid-column:1/-1}.current-panel{grid-row:1}.records-panel{grid-row:2}.center-stage{grid-row:3;display:flex;flex-direction:column-reverse;gap:10px}.record,.stat{height:67px;padding:7px}.record__label,.stat__label{font-size:11px}.record__value,.stat__value{font-size:24px}.sidebar-actions{margin-top:1px}.action{min-height:43px;font-size:15px}.builder-panel,.picture-panel{min-height:unset;padding:14px}.picture-frame{max-width:100%;height:205px;aspect-ratio:auto;margin:8px auto 0}.picture-frame img{width:auto;max-width:100%;height:100%}.picture-caption{margin-top:5px;font-size:12px}.panel-eyebrow{font-size:12px}.builder-intro{margin:9px 0 11px;min-height:0}.word-bank{min-height:62px}.word-tile{font-size:18px}.answer-slot .word-tile{font-size:clamp(13px,4vw,18px)}.answer-slot{height:57px}.down-chevron{height:32px}.feedback{min-height:47px}.footer-note{font-size:11px;margin-top:12px}}
@media(max-width:360px){.game-header h1{font-size:30px}.word-tile{padding:9px 8px;font-size:16px}.answer-row{gap:4px}.answer-slot .word-tile{font-size:13px}.builder-panel{padding:12px 8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Keep Sound and Restart at the bottom on phones, like the finished Memory Match game. */
@media(max-width:560px){
  .play-layout{grid-template-areas:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .records-panel{display:contents}
  .record--score{grid-column:1;grid-row:2}
  .record--attempts{grid-column:2;grid-row:2}
  .sidebar-actions{grid-column:1/-1;grid-row:4;display:flex;flex-direction:row;margin-top:0}
  .current-panel{grid-column:1/-1;grid-row:1}
  .center-stage{grid-column:1/-1;grid-row:3}
}


/* =======================================
   SENTENCE BUILDER V2 — LARGE PLAY AREA
   Same 1100px outer shell, same sidebars.
   The three answer zones span the entire
   lower central workspace, as sketched.
   ======================================= */
@media (min-width:801px) {
  .center-stage {
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(0,0.88fr);
    grid-template-rows: minmax(230px,auto) auto;
    column-gap:13px;
    row-gap:12px;
    align-items:stretch;
  }
  .builder-panel, .picture-panel {min-height:0;}
  .builder-panel {grid-column:1;grid-row:1;}
  .picture-panel {grid-column:2;grid-row:1;}
  .answer-stage {grid-column:1/-1;grid-row:2;}
}
.builder-panel {justify-content:flex-start;}
.builder-intro {margin-bottom:19px;min-height:0;}
.word-bank {min-height:70px;justify-content:center;align-items:center;padding:8px 0;}
.builder-nudge {text-align:center;color:#867895;font-size:13px;margin-top:auto;padding-top:8px;}
.down-chevron {height:33px;margin-top:auto;}
.picture-panel {justify-content:flex-start;}
.picture-frame {height:auto;max-height:210px;aspect-ratio:1/1;margin:8px auto 0;}
.picture-caption {margin-top:6px;}
.answer-stage {
  min-width:0;
  padding:16px 18px 15px;
  background:linear-gradient(180deg,#f7f0fc 0%,#fbf9fd 67%,#fff 100%);
  border:2px solid #cbb4e2;
  border-radius:20px;
  box-shadow:0 5px 18px rgba(104,79,136,.075);
}
.answer-heading {display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.answer-heading-title {font-family:var(--title);font-size:16px;font-weight:800;letter-spacing:.055em;color:#5b4377;display:flex;align-items:center;gap:7px;}
.answer-heading-symbol {font-size:22px;color:#9b76c0;line-height:1;}
.answer-help {color:#85748e;font-size:12px;}
.answer-row {margin:0;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));}
.answer-slot {height:94px;border:3px dashed #bca0d8;border-radius:16px;background:#fff;box-shadow:inset 0 2px 7px rgba(136,107,172,.055);}
.empty-slot {font-size:35px;color:#c4aad9;cursor:pointer;}
.answer-slot .word-tile {font-size:clamp(19px,2.1vw,23px);font-weight:400;line-height:1.18;border-radius:13px;}
.answer-slot.is-solved {border:3px solid transparent;}
.answer-footer {display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,0.85fr);gap:11px;align-items:center;margin-top:13px;}
.feedback {margin:0;min-height:51px;padding:8px 10px;}
.builder-actions {margin:0;min-width:0;}
.builder-btn {min-height:51px;}
.stars-label, .stars-preview {display:none;}
@media (min-width:801px) and (max-width:980px) {
  .answer-stage {padding:13px 12px;}
  .answer-row {gap:8px;}
  .answer-slot {height:84px;}
  .answer-slot .word-tile {font-size:18px;}
  .answer-footer {grid-template-columns:1fr 1fr;}
}
@media (min-width:561px) and (max-width:800px) {
  .center-stage {display:grid;grid-template-columns:1.1fr .9fr;gap:10px;}
  .builder-panel {grid-column:1;grid-row:1;min-height:260px;padding:15px;}
  .picture-panel {grid-column:2;grid-row:1;min-height:260px;padding:15px;}
  .answer-stage {grid-column:1/-1;grid-row:2;}
  .answer-slot {height:90px;}
  .answer-slot .word-tile {font-size:20px;}
  .answer-footer {grid-template-columns:1fr 1fr;}
}
@media(max-width:560px) {
  .center-stage {display:flex;flex-direction:column;gap:10px;}
  .picture-panel {order:1;}
  .builder-panel {order:2;}
  .answer-stage {order:3;padding:13px 10px;}
  .builder-panel {padding:14px;min-height:unset;}
  .builder-intro {margin:9px 0;}
  .word-bank {min-height:65px;}
  .down-chevron {display:none;}
  .builder-nudge {display:none;}
  .answer-help {font-size:11px;}
  .answer-row {gap:6px;}
  .answer-slot {height:79px;border-width:2px;border-radius:13px;}
  .answer-slot .word-tile {font-size:clamp(15px,4.3vw,19px);padding:4px;}
  .answer-footer {grid-template-columns:1fr;gap:9px;margin-top:10px;}
  .builder-btn {min-height:47px;}
  .feedback {min-height:44px;}
  .picture-frame {height:175px;max-height:175px;}
  .record__value, .stat__value {font-size:24px;}
}
@media (max-width:360px) {
  .answer-stage {padding:11px 8px;}
  .answer-row {gap:5px;}
  .answer-slot {height:73px;}
  .answer-slot .word-tile {font-size:14px;}
}


/* ===============================================================
   V2 matching-game style alignment
   Source: approved Memory Match Clothes 1 layout and typography.
   Keep the V2 builder layout, artwork, score and sound logic intact.
   =============================================================== */
.game-shell { position:relative; }
.game-header p { font-size:clamp(17px,2.4vw,22px); }
.progress__row { font-size:clamp(16px,2.35vw,20px); }
/* Personal-best and live-score boxes exactly like Memory Match. */
.record,.stat { height:105px; min-height:105px; border-radius:17px; gap:6px; padding:12px 5px; }
.record__label,.stat__label {
  font-family:var(--body); font-size:18px; letter-spacing:.025em;
  line-height:1.12; color:#74677c; text-transform:uppercase;
}
.record__value,.stat__value,.win-stats strong {
  font-family:var(--title);font-weight:600;font-variant-numeric:tabular-nums;
}
.record__value,.stat__value { font-size:41.6px;line-height:1.08;color:#57496b; }
.win-stats strong { font-size:23.2px; }
/* Increase supporting game text while leaving the approved card layout intact. */
.builder-intro {font-size:clamp(15px,1.7vw,18px);}
.panel-eyebrow,.source-label {font-size:clamp(13px,1.45vw,16px);}
.answer-heading-title {font-size:19px;}
.answer-help,.builder-nudge {font-size:14px;}
.picture-caption,.feedback {font-size:clamp(14px,1.5vw,16px);}
.builder-btn {font-size:17px;}
/* Exact pill styling of the approved Memory Match Sound On / Restart. */
.sidebar-actions {gap:12px;margin-top:auto;}
.sidebar-actions .action {
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:100%;height:50px;min-height:50px;white-space:nowrap;
  padding:13px 8px;border:1px solid #e4dce3;border-radius:99px;
  background:#fff;color:#655777;cursor:pointer;
  box-shadow:0 2px 5px rgba(64,51,72,.045);
  transition:background .15s,transform .15s;
  font-family:var(--body);font-size:17px;
}
.sidebar-actions .action:hover{background:#f6effa;filter:none;transform:none;}
.sidebar-actions .action:active{transform:scale(.97);}
.sidebar-actions .action--restart {background:#f7dfe8;border-color:#f2d0db;}
.sidebar-actions .action--restart:hover{background:#f3d1dc;}
.sidebar-actions .action svg,.sidebar-actions .ui-icon{width:19px;height:19px;flex:0 0 19px;}
.sidebar-actions .action[aria-pressed="false"] .sound-wave {display:none;}
/* Back is visually subordinate to game controls; does not shift the game header. */
.back-button {
  position:absolute;left:clamp(14px,2.5vw,28px);top:clamp(14px,2.5vw,28px);
  display:inline-flex;align-items:center;gap:4px;padding:7px 11px;
  border:1px solid #ded3e5;border-radius:99px;background:#fff;
  color:#68577f;font-family:var(--body);font-size:14px;cursor:pointer;
  box-shadow:0 2px 5px rgba(64,51,72,.035);z-index:2;
}
.back-button:hover{background:#f5effa;}
.back-button svg{width:16px;height:16px;}
.round-menu[hidden]{display:none;}
.round-menu{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:18px;background:rgba(46,36,56,.46);}
.round-menu__card{background:#fffaf6;border:2px solid #e8dfea;border-radius:22px;padding:24px;box-shadow:0 16px 60px #32253b30;width:min(100%,430px);text-align:center;display:grid;gap:10px;}
.round-menu__card h2{margin:0;color:#604c7d;font:800 30px/1.1 var(--title);}
.round-menu__card p{margin:0 0 5px;color:#766a7e;font-size:17px;}
.round-menu__choice,.round-menu__unavailable{width:100%;padding:12px 16px;border-radius:14px;text-align:left;display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:16px;}
.round-menu__choice{border:1px solid #c6dfcf;background:#e1f1e6;color:#3c7655;font-family:var(--body);cursor:pointer;}
.round-menu__choice:hover{background:#d1ebdc;}
.round-menu__unavailable{background:#f4f0f5;border:1px solid #e7e1e9;color:#91849b;}
.round-menu__card small{font-size:12px;white-space:nowrap;}
@media(max-width:800px){
  .record__label,.stat__label{font-size:14px;}
  .record__value,.stat__value{font-size:28px;}
  .back-button{font-size:13px;padding:6px 9px;left:11px;top:11px;}
  .game-header{padding-top:12px;}
}
@media(max-width:560px){
  .record,.stat{min-height:70px;height:70px;padding:9px 4px;}
  .record__label,.stat__label{font-size:12px;}
  .record__value,.stat__value{font-size:20.8px;}
  .game-header p{font-size:16px;}
  .progress__row{font-size:15px;}
  .panel-eyebrow,.source-label{font-size:14px;}
  .builder-intro{font-size:15px;}
  .answer-heading-title{font-size:16px;}
  .answer-help{font-size:11px;}
  .picture-caption{font-size:12px;}
  .feedback{font-size:14px;}
  .sidebar-actions .action{height:45px;min-height:45px;flex:1;font-size:13px;padding:10px 12px;gap:9px;}
  .back-button{top:8px;left:8px;}
  .round-menu__card{padding:18px;}
}
@media(min-width:801px) and (max-width:980px){
  .record__label,.stat__label{font-size:15px;}
  .record__value,.stat__value{font-size:33px;}
  .sidebar-actions .action{font-size:14px;}
}

/* SolidStart master-board height alignment, desktop only.
   At full desktop width, Memory Match's finished board is ~849px tall.
   Give the Sentence Builder clue and word-bank panels this space, rather
   than adding unused padding below the board. Keep responsive layouts intact. */
@media (min-width:1000px) {
  .builder-panel,
  .picture-panel {
    min-height:333px;
  }
}

/* ==============================================================
   SENTENCE BUILDER V3 — approved annotated-text changes.
   Remove only the extra copy indicated by the user; emphasize
   the three instructional labels in the final approved preview.
   Keep the existing board, controls, colors, and record positions.
   ============================================================== */
.builder-panel {justify-content:space-between;}
.source-label {
  font-size:22px; line-height:1.1; letter-spacing:.035em;
  text-align:center; margin-top:5px; margin-bottom:10px;
}
.builder-nudge {
  font-size:20px; line-height:1.2; font-weight:400;
  color:#665777; margin:0; padding:0 5px 7px;
}
.answer-heading-title {font-size:23px;line-height:1.16;letter-spacing:.03em;}
.answer-heading {margin-bottom:13px;}
.picture-frame {margin-top:0;}
/* Variable tile count for future A1/A2 sets; 3 tiles stay unchanged. */
.answer-row {grid-template-columns:repeat(var(--tile-cols,3),minmax(0,1fr));}
.answer-row[data-count="6"] .answer-slot .word-tile,
.answer-row[data-count="7"] .answer-slot .word-tile,
.answer-row[data-count="8"] .answer-slot .word-tile {font-size:clamp(14px,1.5vw,19px);}
@media(max-width:800px){
  .source-label {font-size:20px;}
  .builder-nudge {font-size:18px;}
  .answer-heading-title {font-size:21px;}
}
@media(max-width:560px){
  .source-label {font-size:19px;margin-top:0;}
  .builder-nudge {display:block;font-size:17px;padding:4px 3px 3px;}
  .answer-heading-title {font-size:19px;}
  .answer-row {grid-template-columns:repeat(var(--mobile-tile-cols,3),minmax(0,1fr));}
    .answer-row[data-count="6"] .answer-slot .word-tile,
  .answer-row[data-count="7"] .answer-slot .word-tile,
  .answer-row[data-count="8"] .answer-slot .word-tile {font-size:clamp(13px,3.6vw,17px);}
}

/* SolidStart Games master-height rule: preserve the same 850px desktop
   outer board footprint as Memory Match. Use extra space INSIDE the
   interactive stage instead of reserving blank iframe height. */
@media (min-width:1000px) {
  .game-shell { min-height:850px;display:flex;flex-direction:column; }
  .play-layout { flex:1; }
  .center-stage { grid-template-rows:minmax(333px,1fr) auto; }
}

/* ===============================================
   SENTENCE BUILDER V4 — QUIET ILLUSTRATED BACKGROUND
   Decoration stays BEHIND the game's controls.
   Gameboard sizing and shared components unchanged.
   =============================================== */
.game-shell{isolation:isolate;position:relative;overflow:hidden;}
.game-decorations{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit;}
.game-shell> :not(.game-decorations){position:relative;z-index:1;}
.game-deco{position:absolute;display:block;width:clamp(70px,9vw,120px);height:auto;opacity:.38;filter:saturate(.7);user-select:none;}
.game-deco--book{left:8px;top:77%;transform:rotate(-13deg);width:98px;}
.game-deco--pencil{right:7px;top:73%;transform:rotate(13deg);width:90px;}
.game-deco--blocks{right:18px;bottom:4%;transform:rotate(-5deg);width:96px;opacity:.29;}
/* Keep the feedback space reserved so the screen never shifts when a line is checked. */
.feedback:not(.is-correct):not(.is-wrong){visibility:hidden;}
.builder-actions{justify-content:center;}
.builder-btn--clear{flex:0 0 min(100%,200px);}
@media(max-width:800px){.game-decorations{display:none;}}

/* V4.1: Keep the answer area absolutely stable while confirming a sentence.
   Correct and incorrect feedback use the same reserved space; the Clear
   button remains in the layout (disabled on success) instead of vanishing. */
.answer-slot { box-sizing:border-box; flex-shrink:0; }
.answer-footer { align-items:center; }
.feedback { box-sizing:border-box; height:62px; min-height:62px; }
.builder-actions { min-height:51px; }
@media (max-width:560px){
  .feedback { height:57px; min-height:57px; }
  .builder-actions { min-height:47px; }
}

/* V4.2: Completed answer tiles must remain fully visible, not fade. */
.answer-slot .word-tile:disabled, .answer-slot.is-solved .word-tile,
.answer-slot .word-tile.grammar-subject:disabled,
.answer-slot .word-tile.grammar-verb:disabled,
.answer-slot .word-tile.grammar-object:disabled {opacity:1!important;filter:none!important;}
/* Third record/stat align vertically with the Memory Match three-row panels. */
.record--time{background:#fff;}
.stat--time{background:#dcf0e4;}
.stat--time .stat__value,.record--time .record__value{font-size:clamp(21px,2.6vw,31px);}
.win-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:560px){
  .record--time{grid-column:1/-1;grid-row:3;}
  .sidebar-actions{grid-row:5;}
  .center-stage{grid-row:4;}
  .current-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .current-panel .stat--time{grid-column:1/-1;}
  .current-panel .stat{width:100%;}
}

/* V4.5 — larger word choices, clearer completed sentences, centered clues. */
/* Enlarge the actual interactive choice tiles without scaling the entire board. */
.word-bank .word-tile {
  font-size:23.4px;
  padding:14.3px 15.6px;
  min-height:65px;
  border-radius:15px;
}
.word-bank {min-height:91px;}
/* Increase answer words by 20%, including responsive override sizes. */
.answer-slot .word-tile {font-size:clamp(22.8px,2.52vw,27.6px);}
/* Center the complete image frame within the available picture panel height. */
.picture-panel {justify-content:center;}
.picture-frame {flex:0 1 auto;}
@media(min-width:801px) and (max-width:980px) {
  .answer-slot .word-tile {font-size:21.6px;}
}
@media(min-width:561px) and (max-width:800px) {
  .answer-slot .word-tile {font-size:24px;}
}
@media(max-width:560px) {
  .word-bank .word-tile {font-size:23.4px;padding:14.3px 15.6px;min-height:65px;}
  .answer-slot .word-tile {font-size:clamp(18px,5.16vw,22.8px);}
  .picture-panel {justify-content:center;}
}
@media(max-width:360px) {
  .word-bank .word-tile {font-size:20.8px;padding:11.7px 10.4px;min-height:60px;}
  .answer-slot .word-tile {font-size:16.8px;}
}

/* V4.9: Let the longer selection list scroll on small screens; game layout is unchanged. */
.round-menu__card{max-height:calc(100dvh - 36px);overflow-y:auto;}


/* ===============================================================
   V5.7 — Sentence Builder round selector
   Match the APPROVED Memory Match card menu (same art, title, pill,
   border, gradients, hover and vertical dimensions). Three cards
   per group on wide desktops; two on tablets, one on phones.
   The game shell and its layout are otherwise untouched.
   =============================================================== */
[hidden]{display:none!important}
.round-menu[hidden]{display:none!important}
.round-menu {
  position:relative;inset:auto;z-index:auto;display:block;
  margin:0 auto;padding:0;width:100%;max-width:1400px;
  background:transparent;
}
.round-menu__selection {
  width:100%;margin:0 auto;
  background:radial-gradient(ellipse at 0 35%,rgba(222,206,240,.2),transparent 35%),
             radial-gradient(ellipse at 100% 70%,rgba(191,226,207,.25),transparent 36%),#fffaf6;
  border:1px solid #f2e8df;border-radius:22px;
  padding:clamp(20px,3.2vw,34px);
  box-shadow:0 3px 14px rgba(89,67,101,.055);
  text-align:left;outline:none;
}
.round-menu .page-header{text-align:center;margin-bottom:30px}
.round-menu .header-decor{
  display:inline-grid;place-items:center;width:33px;height:33px;
  color:#947cb0;background:#ece1f5;border-radius:50%;font-size:20px;margin-bottom:7px;
}
.round-menu .page-header h1{
  font:800 clamp(32px,5vw,44px)/1.05 var(--title);letter-spacing:-.04em;
  margin:0 0 8px;color:#5c4a79;
}
.round-menu .page-header p{color:#6a6172;font-size:clamp(15px,2vw,18px);margin:0}
.round-menu .sets{max-width:1320px;margin:0 auto 28px}
.round-menu .sets:last-child{margin-bottom:0}
.round-menu .sets-heading{display:flex;align-items:baseline;gap:16px;margin:0 0 14px}
.round-menu .sets-heading h2{
  font:700 clamp(22px,2.8vw,28px)/1 var(--title);letter-spacing:-.02em;
  color:#544764;margin:0;
}
.round-menu .set-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.round-menu .set-card {
  width:100%;display:flex;flex-direction:column;text-align:left;
  cursor:pointer;border:1px solid #e6dfe8;border-radius:20px;
  background:#fff;padding:0;overflow:hidden;
  box-shadow:0 4px 12px rgba(70,52,70,.055);
  transition:transform .17s ease,box-shadow .17s ease,border-color .17s ease;
  color:var(--ink);font-family:var(--body);
  align-items:stretch;justify-content:flex-start;gap:0;
}
.round-menu .set-card:hover{
  transform:translateY(-3px);box-shadow:0 8px 20px rgba(70,52,70,.11);border-color:#c9b6da;
}
.round-menu .set-card:active{transform:translateY(-1px)}
.round-menu .set-card:focus-visible{outline:3px solid #7063af;outline-offset:3px}
.round-menu .set-card__art {
  height:clamp(142px,19vw,200px);width:100%;display:flex;
  justify-content:center;align-items:center;gap:clamp(3px,.8vw,13px);
  overflow:hidden;padding:10px clamp(8px,1.6vw,16px);
  background:linear-gradient(120deg,#f6e8f8,#e8f3ee);
}
.round-menu .set-card--positive.set-card--variant-2 .set-card__art,
.round-menu .set-card--negative.set-card--variant-1 .set-card__art,
.round-menu .set-card--questions.set-card--variant-3 .set-card__art {
  background:linear-gradient(120deg,#fbe9e6,#f3e9dd);
}
.round-menu .set-card--negative.set-card--variant-2 .set-card__art,
.round-menu .set-card--questions.set-card--variant-1 .set-card__art{
  background:linear-gradient(120deg,#e5f1e6,#f3edf5);
}
.round-menu .set-card--positive.set-card--variant-3 .set-card__art,
.round-menu .set-card--negative.set-card--variant-3 .set-card__art {
  background:linear-gradient(120deg,#fff0e3,#f8e9f0);
}
.round-menu .set-card__art img{
  width:min(32%,132px);height:93%;object-fit:contain;
  mix-blend-mode:multiply;filter:drop-shadow(0 2px 2px rgba(95,75,90,.05));
  user-select:none;pointer-events:none;
}
.round-menu .set-card__art img:nth-child(1){transform:rotate(-4deg)}
.round-menu .set-card__art img:nth-child(2){transform:translateY(-4px)}
.round-menu .set-card__art img:nth-child(3){transform:rotate(4deg)}
.round-menu .set-card__info{
  padding:16px 18px 4px;display:flex;flex-direction:column;gap:3px;
}
.round-menu .set-card__info strong{
  font:700 clamp(23px,2.8vw,30px)/1.05 var(--title);color:#554969;
}
.round-menu .set-card__info small{
  font-size:clamp(13px,1.6vw,16px);color:#827988;
  white-space:normal;line-height:1.25;
}
.round-menu .set-card__play{
  margin:11px 18px 17px;display:inline-flex;align-items:center;
  justify-content:space-between;gap:8px;min-width:89px;align-self:flex-start;
  background:#e9dff5;color:#57496c;border-radius:99px;
  padding:8px 15px;font-size:16px;
}
.round-menu .set-card--variant-2 .set-card__play{background:#e5f1e6;color:#4c6658}
.round-menu .set-card--variant-3 .set-card__play{background:#f9e6d8;color:#795b51}
.round-menu .set-card__play span{font-size:23px;line-height:.8}
@media(max-width:880px){
  .round-menu .set-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:530px){
  .round-menu__selection{padding:20px 16px}
  .round-menu .set-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .round-menu .sets{margin-bottom:25px}
  .round-menu .page-header{margin-bottom:25px}
  .round-menu .set-card__art{height:176px}
  .round-menu .set-card__info strong{font-size:27px}
}