:root{--accent:#3868bf}
/* Native WebKit select chrome can ignore the shared minimum height. */
#length,#support{
  -webkit-appearance:none;
  appearance:none;
  height:48px;
  min-height:48px;
  max-width:100%;
  padding:10px 44px 10px 16px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 14px) center;
  background-size:6px 6px;
  background-repeat:no-repeat;
}
*{box-sizing:border-box} :root{font-family:ui-rounded,"Trebuchet MS",Arial,sans-serif;color:#203447;background:#f6f8f5;font-size:18px;font-synthesis:none} body{margin:0} button,select{font:inherit;color:inherit} button,select,.home-link{min-height:48px} button{border:2px solid #c9d5db;border-radius:12px;background:#fff;padding:10px 16px;font-weight:700;cursor:pointer} button:hover:not(:disabled){background:#edf4fb;border-color:var(--accent)} button:disabled{cursor:default;color:#617077;background:#edf1f2;border-color:#d5dee2} button[aria-pressed="true"]{background:#e2f0f9;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} button.primary{color:white;background:var(--accent);border-color:var(--accent)} button.primary:hover:not(:disabled){filter:brightness(.93);background:var(--accent)} :focus-visible{outline:3px solid #102c73;outline-offset:3px} [hidden]{display:none!important} .game-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:64px;padding:8px 24px;background:#fff;border-bottom:1px solid #dbe3e5}.home-link{display:inline-flex;align-items:center;color:#264964;text-decoration:none;font-size:.88rem;font-weight:700;flex:none}.cp-profile-slot{margin-left:auto}.game-title{font-size:.88rem;font-weight:700;color:var(--accent)}main{max-width:1000px;margin:auto;padding:28px 24px 32px}.eyebrow,.progress{font-size:.82rem;color:#526778;margin:0 0 8px} h1{font-size:clamp(2rem,5vw,3rem);line-height:1.08;margin:0 0 16px;letter-spacing:-.035em}h2{font-size:1.45rem;line-height:1.25;margin:0 0 12px}p{line-height:1.45}.welcome{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;min-height:480px}.intro{font-size:1.25rem;max-width:30ch}.setup{background:#fff;border:1px solid #d4e0e0;border-radius:24px;padding:24px;box-shadow:0 7px 0 #e7efeb}.setup fieldset{border:0;padding:0;margin:0 0 22px}.setup legend{font-weight:700;margin-bottom:10px}.options{display:flex;gap:8px;flex-wrap:wrap}.setup label{display:block;font-weight:700;margin:10px 0 6px}select{width:100%;max-width:100%;border:2px solid #c9d5db;border-radius:10px;background:white;padding:8px}.setup .primary{width:100%;margin-top:12px}.small{font-size:.82rem;color:#526778}.art{max-width:360px;margin:20px 0}.art svg{width:100%;height:auto;display:block}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}.toolbar button{font-size:.88rem}.round-head{display:flex;gap:16px;justify-content:space-between;align-items:start}.round-head p{margin:0 0 6px}#prompt:focus{outline:3px solid #102c73;outline-offset:5px;border-radius:4px}.play-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(230px,.8fr);gap:24px;margin-top:18px}.board,.side{background:#fff;border:1px solid #d4e0e0;border-radius:20px;padding:22px;min-width:0}.side{display:flex;flex-direction:column;gap:12px}.side p{margin:0}.feedback{min-height:2.8em;font-size:.95rem;line-height:1.4}.feedback.good{color:#215f4f;font-weight:700}.feedback.try{color:#734d16}.actions{display:flex;flex-wrap:wrap;gap:8px}.actions button{flex:1}.help-box{margin-top:16px;padding:20px;background:#eaf3ff;border:2px solid #b9ceeb;border-radius:18px}.help-box h2{font-size:1.15rem}.help-box p{margin:8px 0}.example{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}.example span{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;background:white;border:2px solid #bdd0dc;border-radius:10px;font-weight:700;font-size:1.3rem}.ending{max-width:680px;margin:40px auto;padding:32px;background:white;border:2px solid #c9e3d6;border-radius:24px;text-align:center}.ending p{max-width:42ch;margin:16px auto}.ending .art{margin:20px auto}.recovery{max-width:640px;margin:50px auto;padding:25px;border:2px solid #c9d5db;background:white;border-radius:20px}.static-guide{max-width:1000px;margin:0 auto;padding:18px 24px 30px;border-top:1px solid #dbe3e5;font-size:.85rem;color:#526778}.static-guide h2{font-size:1rem}.static-guide p{margin:8px 0}.model{min-height:48px;padding:10px 14px;border-radius:12px;background:#eff6f2;display:flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:.12em}.model.hidden-word{letter-spacing:.02em;font-size:.9rem;color:#526778}.controls-label{font-size:.82rem;font-weight:700;color:#526778;margin:12px 0 8px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:650px){main{padding:22px 14px}.game-bar{padding:8px 14px}.game-title{display:none}.welcome{grid-template-columns:1fr;gap:12px;min-height:0}.welcome .intro{margin-bottom:8px}.art{max-width:230px;margin:14px auto}.setup{padding:18px}.play-grid{grid-template-columns:1fr;gap:12px;margin-top:12px}.board,.side{padding:16px}.toolbar{margin-top:12px}.round-head{gap:8px}.static-guide{padding:16px 14px}.ending{margin:20px auto;padding:22px}.side{gap:10px}.feedback{min-height:0}}@media(max-width:360px){:root{font-size:16px}.game-bar{padding:6px 10px}.board,.side{padding:12px}.toolbar button{padding:9px 12px}.setup{padding:16px}}@media(max-height:440px) and (min-width:651px){:root{font-size:16px}.game-bar{min-height:48px;padding:0 16px}main{padding:10px 16px 18px}.welcome{min-height:0;gap:24px;align-items:start}.welcome .art{display:none}.welcome h1{font-size:2rem;margin-bottom:8px}.intro{font-size:1rem;margin:6px 0}.setup{padding:14px}.setup label{margin:4px 0}.setup fieldset{margin-bottom:8px}.setup .primary{margin-top:6px}.play-grid{gap:14px;margin-top:8px;grid-template-columns:minmax(0,1.45fr) minmax(245px,1fr)}.board,.side{padding:10px 14px;border-radius:14px}.side{gap:8px}.round-head h2{font-size:1.2rem;margin-bottom:0}.round-head .progress{margin:0}.toolbar{margin-top:8px;gap:6px}.toolbar button{min-height:48px;padding:8px 12px}.feedback{font-size:.86rem;min-height:0}.model{min-height:36px;padding:5px 10px}.controls-label{margin:6px 0}.ending{margin:10px auto;padding:20px}.ending .art{display:none}.ending p{margin:10px auto}.static-guide{margin-top:8px}}
.assembly{display:flex;gap:7px;flex-wrap:wrap;min-height:58px}.letter-slot{display:flex;align-items:center;justify-content:center;width:48px;min-height:54px;border-bottom:4px solid #c4d4df;background:#edf3f7;border-radius:10px;font-size:1.65rem;font-weight:700;color:#526778}.letter-slot.filled{background:#e2edf8;border-color:#7aa2c4;color:#254a70}.tiles{display:flex;gap:8px;flex-wrap:wrap}.tile{min-width:52px;min-height:56px;font-size:1.5rem;padding:8px 13px}.tile.used{background:#eff2f2;color:#667681;border-style:dashed;box-shadow:none;opacity:.7}.tile[aria-disabled="true"]{cursor:default}.model{font-size:1.55rem}.model.hidden-word{font-size:.9rem}@media(max-width:650px){.assembly{gap:5px;min-height:50px}.letter-slot{width:calc((100% - 30px)/7);min-width:29px;max-width:48px;min-height:50px;font-size:1.5rem}.tile{min-width:48px;min-height:52px;padding:7px 12px}.board{padding-bottom:18px}.tiles{gap:7px}}@media(max-height:440px) and (min-width:651px){.assembly{min-height:48px}.letter-slot{min-height:48px;width:43px;font-size:1.4rem}.tile{min-height:48px;min-width:48px;padding:4px 12px;font-size:1.4rem}.model{font-size:1.2rem}.tiles{gap:7px}.side .actions{flex-wrap:nowrap}}
/* Keep the prompt and the first real letter choices together on short screens. */
/* Keep Remember's required Hide word action alongside Check on phones. */
@media(max-width:650px){
  .side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start;align-self:start}
  #feedback{grid-column:1/-1}
  .side>.actions:first-of-type{grid-column:1;grid-row:2}
  #hint{grid-column:2;grid-row:2;padding:8px}
  .side>.actions:nth-of-type(2){grid-column:1/-1;grid-row:3}
}
@media(max-height:440px) and (min-width:651px){
  .round-head .progress{margin-bottom:8px}
  #board{display:grid;grid-template-columns:minmax(95px,.8fr) minmax(0,2fr);grid-template-areas:"model word-label" "model assembly" "tiles-label tiles-label" "tiles tiles";column-gap:14px;row-gap:5px;align-self:start}
  #model{grid-area:model;align-self:center;min-height:48px;padding:5px 8px;font-size:1.1rem;letter-spacing:.08em;text-align:center}
  #board>.controls-label:first-of-type{grid-area:word-label;margin:0}
  #assembly{grid-area:assembly;min-height:44px;gap:5px}
  #assembly .letter-slot{width:34px;min-height:44px;font-size:1.25rem}
  #board>.controls-label:last-of-type{grid-area:tiles-label;margin:0}
  #tiles{grid-area:tiles;gap:7px}
  .side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start;align-self:start;gap:8px}
  #feedback{grid-column:1/-1}
  .side>.actions:first-of-type{grid-column:1;grid-row:2}
  #hint{grid-column:2;grid-row:2;padding:8px}
  .side>.actions:nth-of-type(2){grid-column:1/-1;grid-row:3}
}

/* Word and replay control share one row without moving the letter choices. */
.model-row{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:8px;align-items:stretch;min-width:0}
.model-row .model{min-width:0;font-size:clamp(1.15rem,3vw,1.55rem);padding-inline:6px}
#hear-word{min-width:0;min-height:48px;padding:8px;font-size:.85rem}
@media(max-height:440px) and (min-width:651px){
  #board{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
  .model-row{grid-area:model;grid-template-columns:minmax(0,1fr);gap:4px;align-self:start}
  .model-row #model{grid-area:auto;min-height:32px;font-size:1rem}
  #hear-word{padding:5px}
}

@media(max-width:650px){.welcome .art{max-width:160px;margin:6px auto}}