.scrabble-page {
  --ink: #173d35;
  --ink-soft: #42645a;
  --paper: #f7f5ec;
  --line: #d4ded2;
  --accent: #e5b95b;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
}
.scrabble-page *, .scrabble-page *::before, .scrabble-page *::after { box-sizing: border-box; }
.scrabble-page [hidden] { display: none !important; }
.scrabble-app { padding: 5rem 1.25rem 6rem; }
.app-wrap { max-width: 1180px; margin: 0 auto; }
.scrabble-app h1, .scrabble-app h2, .scrabble-app h3 { margin: 0; font-family: "Space Grotesk", system-ui, sans-serif; letter-spacing: -.045em; }
.scrabble-app h1 { font-size: clamp(2.6rem, 5.2vw, 5.1rem); line-height: 1.03; }
.scrabble-app h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); line-height: 1.1; }
.scrabble-app p { margin: 0; }
.scrabble-app a { color: inherit; text-underline-offset: .22em; }
.scrabble-app button, .scrabble-app input, .scrabble-app select { font: inherit; }
.scrabble-app button { cursor: pointer; }
.scrabble-app button:disabled { cursor: not-allowed; opacity: .55; }
.scrabble-app :focus-visible { outline: 3px solid #dc8d22; outline-offset: 3px; }
.back-link { display: inline-block; margin-bottom: 1.9rem; color: var(--ink-soft); font-weight: 700; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.eyebrow { color: #526f5b; font-family: "Space Grotesk", system-ui, sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.app-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: 2rem; align-items: end; margin-bottom: 2.5rem; }
.app-intro .eyebrow { margin-bottom: .8rem; }
.intro-copy { max-width: 49rem; margin-top: 1.15rem !important; color: var(--ink-soft); font-size: clamp(1.04rem, 1.6vw, 1.2rem); line-height: 1.6; }
.app-note { display: flex; gap: .85rem; padding: 1.15rem 1.25rem; border: 1px solid #b5ccbd; background: #ecf2e8; color: #264d3d; font-size: .88rem; line-height: 1.45; }
.note-dot { flex: none; width: .62rem; height: .62rem; margin-top: .32rem; border-radius: 50%; background: #467658; }
.checker-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1.2fr); gap: 1.5rem; align-items: center; margin-bottom: 1.25rem; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid #a9c7b0; background: #e9f1e7; }
.checker-panel h2 { margin-top: .45rem; }
.checker-panel p:not(.eyebrow):not(.checker-result) { margin-top: .5rem; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }
.checker-panel form { min-width: 0; }
.checker-panel label { display: block; margin-bottom: .35rem; font-size: .8rem; font-weight: 700; }
.checker-controls { display: flex; gap: .5rem; }
.scrabble-app .checker-controls input { flex: 1; min-width: 0; min-height: 3.3rem; padding: .65rem .85rem; font-family: "Space Grotesk", system-ui, sans-serif; font-size: 1.2rem; font-weight: 700; letter-spacing: .06em; }
.checker-controls .button { width: auto; min-width: 6.5rem; }
.checker-result { min-height: 1.6rem; margin-top: .55rem !important; color: var(--ink-soft); font-size: .88rem; }
.checker-result.found { color: #1d6943; font-weight: 700; }
.checker-result.not-found { color: #94452c; font-weight: 700; }
.game-toolbar { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; padding: 1.1rem 1.25rem; border: 1px solid var(--line); background: white; }
.toolbar-select { display: grid; gap: .3rem; min-width: min(100%, 275px); }
.toolbar-select label { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.scrabble-app select, .scrabble-app input[type="text"] { min-height: 2.75rem; padding: .55rem .7rem; border: 1px solid #9eafa1; border-radius: 0; background: #fff; color: var(--ink); }
.scrabble-app select:focus, .scrabble-app input:focus { border-color: var(--ink); }
.button { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; padding: .65rem 1rem; border: 1px solid var(--ink); font-weight: 700; line-height: 1.2; }
.button-light { background: white; color: var(--ink); }
.button-light:hover { background: #eaf1eb; }
.button-primary { width: 100%; min-height: 3.4rem; background: var(--ink); color: white; font-size: 1rem; }
.button-primary:not(:disabled):hover { background: #285c4e; }
.text-button { min-height: 2.75rem; padding: .45rem .2rem; border: 0; background: transparent; color: var(--ink); font-size: .85rem; font-weight: 700; text-decoration: underline; text-underline-offset: .25em; }
.text-button:hover { color: #357354; }
.text-button.danger { color: #854333; }
.button-danger { background: #874335; border-color: #874335; color: #fff; }
.button-danger:hover { background: #6f3228; }
.confirm-dialog { width: min(26rem, calc(100vw - 2rem)); max-width: none; padding: 1.4rem; border: 2px solid var(--ink); border-radius: .6rem; background: #fff; color: var(--ink); box-shadow: 0 20px 70px #0d2d2977; }
.confirm-dialog::backdrop { background: #0d2d2980; }
.confirm-dialog form { display: grid; gap: 1rem; }
.confirm-dialog h2 { font-size: 1.6rem; }
.confirm-dialog p { color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }
.confirm-dialog form > div { display: flex; flex-wrap: wrap; justify-content: end; gap: .6rem; }
.storage-status { margin-left: auto; padding-bottom: .75rem; color: var(--ink-soft); font-size: .8rem; }
.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; margin: 1.25rem 0; border: 1px solid var(--ink); background: var(--ink); color: white; }
.player { display: grid; gap: .15rem; min-width: 0; padding: 1.1rem 1.4rem 1.25rem; opacity: .7; }
.player-active { opacity: 1; background: #235447; }
.player label { color: #c6dacd; font-size: .73rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.scrabble-app .player input { min-height: 2rem; padding: 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: white; font-family: "Space Grotesk", system-ui, sans-serif; font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 700; text-overflow: ellipsis; }
.name-edit { display: flex; align-items: center; min-width: 0; gap: .4rem; }
.name-edit input { flex: 1; min-width: 0; }
.name-edit span { flex: none; color: #f0c96d; font-size: 1.25rem; line-height: 1; pointer-events: none; }
.scrabble-app .player input:hover, .scrabble-app .player input:focus { border-bottom-color: #d8e9d7; }
.player strong { font-family: "Space Grotesk", system-ui, sans-serif; font-size: clamp(2.1rem, 4vw, 3.1rem); font-weight: 700; line-height: 1; }
.player strong small { color: #c7dccc; font-size: .72rem; font-weight: 500; }
.turn-divider { display: grid; gap: .15rem; align-content: center; justify-items: center; min-width: 5.5rem; color: #d4e3d7; font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.turn-divider span { color: var(--accent); font-size: 1.45rem; line-height: 1; }
.team-status { margin: -.1rem 0 1.25rem; padding: 1rem 1.4rem; border: 1px solid #82a990; background: #e9f3e9; }
.team-status > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-weight: 700; }
.team-status strong { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 1.8rem; }
.team-status progress { display: block; width: 100%; height: .7rem; margin: .5rem 0; accent-color: #246c4c; }
.team-status p { color: var(--ink-soft); font-size: .8rem; }
.play-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr); gap: 1.25rem; align-items: start; }
.side-column { display: grid; gap: 1.25rem; min-width: 0; }
.board-panel, .entry-panel, .history-panel, .finish-panel { min-width: 0; padding: clamp(1rem, 2.2vw, 1.7rem); border: 1px solid var(--line); background: #fff; }
.panel-heading { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: end; justify-content: space-between; }
.board-tools { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
#board-zoom { display: none; }
.panel-heading .eyebrow { margin-bottom: .45rem; }
.panel-hint { max-width: 32rem; margin-top: .8rem !important; color: var(--ink-soft); font-size: .85rem; line-height: 1.5; }
.board-scroll { margin-top: 1.25rem; overflow-x: auto; padding: 3px 3px 10px; }
.board { position: relative; display: grid; grid-template-columns: repeat(15, minmax(18px, 1fr)); width: 100%; max-width: 540px; gap: 2px; padding: 6px; border: 5px solid #1b4f3f; background: #1b4f3f; box-shadow: 0 8px 0 #bfd0bf; }
.board-cell { display: grid; aspect-ratio: 1; min-width: 0; align-items: center; justify-items: center; padding: 0; border: 1px solid rgba(24, 67, 54, .22); border-radius: 2px; background: #dce8d7; color: #244b3e; font-family: "Space Grotesk", system-ui, sans-serif !important; font-size: clamp(.55rem, .95vw, .76rem) !important; font-weight: 700 !important; line-height: 1; }
.board-cell:hover { filter: brightness(.91); }
.board-cell.bonus-2l { background: #bfdfea; color: #17465e; }
.board-cell.bonus-3l { background: #6db6d3; color: #102f47; }
.board-cell.bonus-2w { background: #f2c0b1; color: #6f352b; }
.board-cell.bonus-3w { background: #db7773; color: #401e1c; }
.board-cell.occupied { border-color: #8c713d; background: #f4d995; color: #3f3219; font-size: clamp(.8rem, 1.35vw, 1.08rem) !important; box-shadow: inset 0 -2px 0 #ad8547; }
.board-cell.blank-cell { background: #f7e8c8; border-style: dashed; }
.board-cell.draft-cell { outline: 2px dashed #27683d; outline-offset: -3px; }
.board-cell.start-cell { box-shadow: inset 0 0 0 2px #153d31; }
.board.team-board { border-color: #236277; background: #236277; box-shadow: 0 8px 0 #c3d8dc; }
.team-board .board-cell { border-color: #c6dfe1; background: #f5fbf9; }
.team-board .board-cell.team-cross { background: #b7e84d; color: #315619; }
.team-board .board-cell.team-circle { background: #bd3542; color: white; }
.team-board .board-cell.team-diamond { background: #f5eb51; color: #6b6100; }
.team-board .board-cell.team-triangle { background: #df7c35; color: white; }
.team-board .board-cell.team-square, .team-board .board-cell.team-center { background: #22617a; color: white; }
.team-board .board-cell.occupied { border-color: #8c713d; background: #f4d995; color: #3f3219; }
.team-board .board-cell.blank-cell { background: #f7e8c8; }
.team-board-hint { margin-top: .8rem !important; background: #edf5f5 !important; color: #285668 !important; }
.direction-picker { position: absolute; z-index: 5; display: flex; gap: .15rem; padding: .2rem; border: 2px solid #173d35; border-radius: .45rem; background: white; box-shadow: 0 6px 20px #102c2470; }
.direction-picker button { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border: 0; border-radius: .25rem; background: #e6efe6; color: #173d35; font-size: 1.55rem !important; font-weight: 700; }
.direction-picker button:hover, .direction-picker button:focus-visible { background: #c0dac8; }
.board-entry-dialog { position: fixed; inset: auto; top: var(--board-dialog-top, 5vh); left: var(--board-dialog-left, calc(50vw - 15rem)); width: min(30rem, calc(100vw - 1.5rem)); max-width: none; max-height: min(86dvh, 48rem); margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; border: 2px solid var(--ink); border-radius: .8rem; background: #fff; color: var(--ink); box-shadow: 0 20px 70px #0d2d2999; }
.board-entry-dialog::backdrop { background: #0d2d2980; }
.board-entry-dialog .entry-panel { border: 0; padding: 1.1rem 1.25rem 1.4rem; }
.board-entry-dialog .entry-panel .eyebrow { display: none; }
.board-entry-dialog .entry-panel form { margin-top: .8rem; }
.board-entry-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .7rem; min-height: 3.5rem; padding: .3rem .7rem .3rem 1.25rem; border-bottom: 1px solid var(--line); background: #edf4eb; font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.board-entry-top > div { display: flex; align-items: center; gap: .4rem; }
.board-entry-top .text-button { min-height: 2.4rem; font-size: .75rem; }
.board-entry-close { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 1px solid #b4c6b6; border-radius: .25rem; background: #fff; color: var(--ink); font-size: 1.65rem !important; line-height: 1; }
.board-entry-close:hover { background: #dce9dc; }
.bonus-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1.4rem; color: var(--ink-soft); font-size: .72rem; }
.bonus-legend span { display: inline-flex; gap: .35rem; align-items: center; }
.bonus-legend i { display: inline-block; width: .75rem; height: .75rem; border: 1px solid rgba(0, 0, 0, .15); }
.bonus-legend .bonus-2l { background: #bfdfea; }.bonus-legend .bonus-3l { background: #6db6d3; }.bonus-legend .bonus-2w { background: #f2c0b1; }.bonus-legend .bonus-3w { background: #db7773; }
.edit-help { margin-top: 1rem !important; padding: .85rem; background: #f6f0dd; color: #584c22; font-size: .83rem; line-height: 1.45; }
.entry-panel form { display: grid; gap: .55rem; margin-top: 1.3rem; }
.entry-panel label { font-size: .82rem; font-weight: 700; }
.field-hint { display: block; margin-top: .2rem; color: var(--ink-soft); font-size: .75rem; font-weight: 400; }
.scrabble-app .word-input { min-height: 3.3rem !important; padding: .65rem .85rem !important; font-family: "Space Grotesk", system-ui, sans-serif !important; font-size: 1.35rem !important; font-weight: 700; letter-spacing: .07em; }
.placement-summary { margin: .2rem 0 0 !important; padding: .55rem .7rem; border-left: 3px solid #2f7454; background: #edf4eb; font-size: .86rem; font-weight: 700; }
.coordinate-details { margin: .2rem 0 .4rem; }
.coordinate-details summary { min-height: 2.5rem; padding: .55rem 0; color: var(--ink-soft); font-size: .8rem; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.entry-grid { display: grid; grid-template-columns: .7fr .7fr 1.6fr; gap: .65rem; margin-top: .6rem; }
.entry-grid > div { display: grid; gap: .35rem; min-width: 0; }
.entry-grid select { width: 100%; }
.goal-check { display: flex; align-items: center; gap: .65rem; padding: .8rem; border: 1px solid #a8c8b1; background: #e9f3e9; cursor: pointer; }
.goal-check input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: #246c4c; }
.blank-wrap { margin-top: .65rem; padding: .85rem; border: 1px solid var(--line); background: #f7faf5; }
.blank-wrap > span { font-size: .82rem; font-weight: 700; }
.blank-wrap p { margin: .25rem 0 .7rem !important; color: var(--ink-soft); font-size: .76rem; }
.blank-letters { display: flex; flex-wrap: wrap; gap: .4rem; }
.blank-letter { width: 2.5rem; height: 2.5rem; border: 1px solid #9aab9d; background: white; color: var(--ink); font-weight: 700 !important; }
.blank-letter[aria-pressed="true"] { border-color: #865e28; background: #f3d996; box-shadow: inset 0 0 0 2px #865e28; }
.move-feedback { margin-top: .65rem; padding: .8rem .9rem; background: #edf1e9; color: #345345; font-size: .84rem; line-height: 1.5; }
.feedback-error { background: #faece5; color: #7e332c; }.feedback-warning { background: #fcf1d8; color: #694a1f; }.feedback-good { background: #e7f1e7; color: #24583d; }
.move-preview { margin: .55rem 0; padding: 1rem; border: 1px solid var(--line); }
.preview-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.preview-total strong { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 2.4rem; line-height: 1; }
.move-preview ul { display: grid; gap: .35rem; margin: .85rem 0 0; padding: .7rem 0 0; border-top: 1px solid var(--line); list-style: none; }
.move-preview li { display: flex; justify-content: space-between; gap: .6rem; font-size: .85rem; }
.move-preview p { margin-top: .65rem !important; color: #785728; font-size: .8rem; font-weight: 700; }
.turn-actions { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: .9rem; }
.history-panel ol { display: grid; gap: 0; max-height: 21rem; overflow: auto; margin: 1rem 0 0; padding: 0; list-style: none; }
.history-panel li { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: .6rem; align-items: baseline; padding: .7rem 0; border-top: 1px solid var(--line); font-size: .82rem; }
.history-panel li strong { font-weight: 700; }.history-panel li b { font-family: "Space Grotesk", system-ui, sans-serif; }
.history-panel .history-empty { display: block; color: var(--ink-soft); line-height: 1.5; }
.finish-panel > p { margin-top: .8rem; color: var(--ink-soft); font-size: .84rem; line-height: 1.5; }
.finish-panel form { display: grid; gap: .65rem; margin-top: 1rem; }
.finish-panel label { font-size: .8rem; font-weight: 700; }
.finish-panel select { width: 100%; }
.finish-racks { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.finish-racks > div { display: grid; gap: .3rem; min-width: 0; }
.finish-racks input { width: 100%; }
.finish-feedback { min-height: 2.3rem; color: var(--ink-soft); font-size: .83rem; line-height: 1.45; }
.finish-panel .button { justify-self: start; }
.app-explainer { display: grid; grid-template-columns: .7fr 1.3fr; gap: 2rem; margin-top: 2.5rem; padding: 2.2rem 0; border-top: 1px solid var(--line); }
.app-explainer h2 { max-width: 17rem; margin-top: .6rem; }
.explainer-copy { display: grid; gap: 1rem; max-width: 47rem; color: var(--ink-soft); font-size: .93rem; line-height: 1.7; }
.explainer-copy a { color: var(--ink); font-weight: 700; }
.rules-guide { margin-top: 3rem; padding: 2.4rem 0 0; border-top: 1px solid var(--line); }
.rules-guide > header { max-width: 49rem; }
.rules-guide > header h2 { margin: .55rem 0 .8rem; font-size: clamp(1.8rem, 3vw, 2.7rem); }
.rules-guide > header > p:last-child { color: var(--ink-soft); line-height: 1.6; }
.rules-nav { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.5rem 0 2rem; }
.rules-nav a { padding: .45rem .7rem; border: 1px solid #a9bfad; color: var(--ink); font-size: .8rem; font-weight: 700; text-decoration: none; }
.rules-nav a:hover { background: #e2eee2; }
.rules-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.rules-content section { padding: clamp(1.2rem, 2vw, 2rem); border: 1px solid var(--line); background: #fff; scroll-margin-top: 5rem; }
.rules-content h3 { margin-bottom: .9rem; font-size: 1.22rem; }
.rules-content h4 { margin: 1.4rem 0 .6rem; font-family: "Space Grotesk", system-ui, sans-serif; font-size: 1rem; }
.rules-content p { margin-top: .8rem; color: #3f5c51; font-size: .9rem; line-height: 1.75; }
.rules-content p:first-of-type { margin-top: 0; }
.rules-content a { color: var(--ink); font-weight: 700; }
.letter-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.letter-values span { padding: .5rem; background: #edf3eb; color: #365b49; font-size: .78rem; line-height: 1.5; }
.letter-values b { display: block; color: var(--ink); }
@media (max-width: 920px) { .play-layout, .checker-panel { grid-template-columns: 1fr; }.app-intro { grid-template-columns: 1fr; }.app-note { max-width: 38rem; }.board { width: min(100%, 540px); }.rules-content { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .scrabble-app { padding: 4rem .65rem 4rem; }.app-intro { gap: 1.1rem; margin-bottom: 1.25rem; }.back-link { margin-bottom: 1.2rem; }.app-note { padding: .8rem; }.checker-panel { gap: 1rem; padding: 1.1rem .85rem; }.checker-controls .button { min-width: 5.4rem; padding-inline: .6rem; }.game-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; padding: .85rem; }.toolbar-select { width: 100%; min-width: 0; }.toolbar-select:first-child { grid-column: 1 / -1; }.game-toolbar .button { width: 100%; }.storage-status { grid-column: 1 / -1; padding: 0; margin: 0; }.scoreboard { margin: .8rem 0; }.player { padding: .85rem .6rem 1rem; }.player strong { font-size: 1.9rem; }.player strong small { display: block; margin-top: .2rem; }.turn-divider { min-width: 3rem; font-size: .58rem; }.board-panel, .entry-panel, .history-panel, .finish-panel { padding: 1rem .7rem; }.panel-heading { align-items: start; }.board-scroll { margin-inline: -.5rem; }.board { width: 100%; min-width: 0; gap: 1px; padding: 3px; border-width: 3px; }.board-cell { font-size: .49rem !important; }.board-cell.occupied { font-size: .72rem !important; }.board-cell.start-cell { box-shadow: inset 0 0 0 1px #153d31; }#board-zoom { display: inline-flex; }.board-zoomed .board { width: 520px; }.board-zoomed .board-cell { font-size: .73rem !important; }.board-zoomed .board-cell.occupied { font-size: .95rem !important; }.entry-grid { grid-template-columns: .65fr .65fr 1.7fr; gap: .4rem; }.entry-grid select { padding-inline: .35rem; font-size: .8rem; }.team-status { padding: .9rem; }.rules-guide { margin-top: 2rem; }.rules-nav { gap: .4rem; }.rules-content section { padding: 1.25rem .95rem; }.letter-values { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .board-entry-dialog { inset: auto 0 0; top: auto; left: 0; width: 100%; max-height: 87dvh; border-radius: 1rem 1rem 0 0; border-width: 2px 0 0; padding-bottom: env(safe-area-inset-bottom); }.board-entry-dialog .entry-panel { padding: .85rem 1rem 1.1rem; }.board-entry-top { padding-left: 1rem; } }
@media (max-width: 560px) { .board-entry-dialog #save-move { position: sticky; bottom: .35rem; z-index: 2; box-shadow: 0 -8px 18px #fff; } }
@media (prefers-reduced-motion: reduce) { .scrabble-app * { scroll-behavior: auto; } }