.play-page { background:#faf9fe; color:#211b3f; }
.play-main { max-width:1080px; margin:auto; padding:1rem 1.25rem 4rem; }
.play-hero { max-width:760px; padding:2rem 0; }
.play-hero h1 { font-size:clamp(2rem,6vw,3.5rem); }
.play-main p { line-height:1.7; }
.play-library { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.8rem; margin-bottom:3rem; }
.play-library a { display:grid; gap:.4rem; padding:1.2rem; background:white; border:1px solid #ded9f2; border-radius:18px; text-decoration:none; color:#211b3f; }
.play-library a:hover { border-color:#4438a7; }
.play-library span,.play-note { color:#625a76; font-size:.95rem; }
.play-activity { color:#211b3f; padding:clamp(1rem,4vw,2rem); background:white; border:1px solid #ded9f2; border-radius:24px; margin-bottom:2rem; scroll-margin-top:1rem; }
.play-activity h2 { margin:.3rem 0; }
.play-tools,.play-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; margin:1rem 0; }
.play-main button,.play-main select,.play-main input { font:inherit; }
.play-main button { min-height:44px; padding:.6rem 1rem; background:#4438a7; color:white; border:2px solid #4438a7; border-radius:10px; cursor:pointer; }
.play-main button[aria-pressed=true] { background:#d9f4eb; color:#175c4e; border-color:#175c4e; }
.play-main button:disabled { opacity:.65; cursor:default; }
.play-main button:focus-visible,.play-main input:focus-visible,.play-library a:focus-visible { outline:3px solid #17665c; outline-offset:3px; }
.play-grid { display:grid; gap:4px; width:min(100%,390px); margin:1rem 0; direction:ltr; }
.play-grid button { aspect-ratio:1; padding:0; min-height:0; border-radius:5px; font:600 clamp(.85rem,3vw,1.2rem)/1 system-ui,sans-serif; background:#f4f1fc; color:#30266f; border:1px solid #d3cbea; }
.play-grid button.selected { background:#4438a7; color:white; }
.play-grid button.found { background:#d9f4eb; color:#175c4e; }
.word-grid { grid-template-columns:repeat(10,minmax(0,1fr)); }
.word-list { display:flex; flex-wrap:wrap; gap:.6rem 1rem; padding:0; list-style:none; }
.word-list .done { text-decoration:line-through; color:#17665c; }
.play-status { min-height:1.7em; font-weight:600; }
.play-answer { width:6rem; max-width:100%; padding:.55rem; border:1px solid #8275b9; border-radius:8px; }
.play-sheet { border-collapse:collapse; margin:1rem 0; width:100%; max-width:560px; }
.play-sheet th,.play-sheet td { border:1px solid #ccc; padding:.75rem; text-align:left; }
.play-sheet td { height:3rem; }
.number-grid { grid-template-columns:repeat(4,minmax(0,1fr)); max-width:300px; }
.number-grid input,.number-grid .given { width:100%; min-width:0; height:55px; text-align:center; border:1px solid #aaa; border-radius:0; font:400 1.4rem system-ui; box-sizing:border-box; }
.number-grid .given { display:grid; place-items:center; background:#eeeaf8; }
.sudoku-grid { gap:0; border:2px solid #4438a7; }
.sudoku-grid > :nth-child(4n+2) { border-right:3px solid #4438a7; }
.sudoku-grid > :nth-child(n+5):nth-child(-n+8) { border-bottom:3px solid #4438a7; }
.play-stage svg { width:min(100%,380px); height:auto; display:block; }
.play-stage details { margin:1rem 0; padding:.8rem; border:1px solid #ded9f2; border-radius:10px; }
.print-only { display:none; }
@media print { body { background:white; color:black; } .site-header,footer,.skip-link,.play-hero,.play-library,.play-tools,.play-controls,.play-status,.screen-only { display:none!important; } .play-main { max-width:none; padding:0; } .play-activity { display:none; border:0; padding:0; } .play-activity.printing { display:block; } .print-only { display:block; } .play-activity details { display:none; } .play-grid button { color:black!important; background:white!important; border-color:#888; } .play-grid button.found { background:white; } .play-answer { color:transparent!important; } .play-stage { break-inside:avoid; } }

@media print { .word-list .done { text-decoration:none; color:black; } }

@media print { .play-page { background: white; color: black; } }

.word-solution summary { cursor: pointer; font-weight: 700; }
.word-solution-layout { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: flex-start; }
.word-solution-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); width: min(100%, 390px); gap: 3px 0; direction: ltr; flex-shrink: 0; }
.word-solution-cell { display: grid; place-items: center; aspect-ratio: 1; color: #746e85; background: #f5f3fa; font-weight: 600; font-size: clamp(.8rem, 3vw, 1.15rem); }
.word-solution-cell.is-answer { color: #fff; background: #4438a7; font-weight: 800; }
.word-solution-cell.answer-start { border-radius: 8px 0 0 8px; }
.word-solution-cell.answer-end { border-radius: 0 8px 8px 0; }
.word-solution-list { display: grid; gap: .8rem; list-style: none; padding: 0; margin: 0; }
.word-solution-list li { display: grid; gap: .15rem; }
.word-solution-list strong { color: #30266f; }
.word-solution-list span { color: #625a76; font-size: .9rem; }