/* Toucanagrams — clean, flat stylesheet
   The game logic remains in script.js. This file controls presentation only. */

:root {
    --page: #264653;
    --cell: #172c33;
    --rack-slot: #3c5965;
    --white: #ffffff;
    --ink: #172c33;
    --gap: 7px;
    --board-size: 500px;
    --round: 10px;
    --font: 'Dongle', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--page);
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 18px 16px 28px;
    background: var(--page);
    color: var(--white);
    font-family: var(--font);
    font-size: 24px;
    line-height: 1;
}

button,
input {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

[hidden] {
    display: none !important;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: var(--board-size);
    margin: 0 auto;
}

.controls {
    display: none;
}

/* Header: Share star | title and puzzle number | How-to-play question mark */
.board-utility-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: center;
    gap: var(--gap);
    width: 100%;
    margin: 0 auto 12px;
}

#shareResultsButton,
#rulesHelpButton {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: stretch;
    align-self: center;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
    border-radius: var(--round);
    background: var(--rack-slot);
    color: var(--white);
    box-shadow: none;
    filter: none;
    cursor: pointer;
    transition: opacity 120ms ease;
}

#shareResultsButton {
    grid-column: 1;
}

#rulesHelpButton {
    grid-column: 7;
    font-family: var(--font);
    font-size: clamp(42px, 8.5vw, 58px);
    font-weight: 700;
    line-height: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rules-help-glyph {
    display: block;
    line-height: .85;
    transform: translateY(3px);
}

#shareResultsButton svg {
    display: block;
    width: 53%;
    height: 53%;
}

#shareResultsButton.has-share-achievement svg {
    width: calc(53% + 4.24px);
    height: calc(53% + 4.24px);
}

#shareResultsButton.has-share-achievement svg path {
    fill: #fbb03b;
}

#shareResultsButton.has-share-achievement {
    border: 4px solid #fbb03b;
    animation: share-achievement-pulse 2.4s ease-in-out infinite;
}

@keyframes share-achievement-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
    #shareResultsButton.has-share-achievement {
        animation: none;
    }
}

#shareResultsButton:hover,
#rulesHelpButton:hover {
    opacity: .85;
    transform: none;
}

.game-branding {
    grid-column: 2 / 7;
    transform: translateY(5px);
    min-width: 0;
    text-align: center;
    color: var(--white);
}

.game-brand-title {
    margin: 0;
    font-size: clamp(42px, 8.5vw, 58px);
    font-weight: 700;
    line-height: .78;
    white-space: nowrap;
}

.daily-puzzle-number {
    margin-top: -4px;
    font-size: clamp(31.9px, 6.96vw, 40.6px);
    font-weight: 400;
    line-height: .9;
    white-space: nowrap;
}

/* Score and the three achievement stars */
.board-top-row {
    order: 2;
    width: 100%;
    margin: 0 auto 12px;
}

.score-stack,
.score-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
}

.score-box {
    gap: 10px;
    flex-wrap: wrap;
}

#scoreValue {
    color: var(--white);
    font-size: clamp(35px, 7.2vw, 46px);
    font-weight: 700;
    line-height: .9;
    white-space: nowrap;
}

.achievement-stars {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 28px;
    margin: 0;
    font-size: 32px;
    line-height: 1;
}

.achievement-star {
    display: inline-flex;
    width: .85em;
    height: .85em;
    align-items: center;
    justify-content: center;
    color: #172c33;
    opacity: 1;
}

.achievement-star svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.achievement-star svg path {
    fill: currentColor;
}

.achievement-star.earned {
    color: #fbb03b;
    text-shadow: none;
}

.achievement-crown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: .85em;
    height: .85em;
    margin-left: 5px;
    vertical-align: baseline;
}

.achievement-crown img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Main 7 × 7 board. Grid sizing can still be set by the generator. */
#board {
    order: 3;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(7, minmax(0, 1fr));
    gap: var(--gap);
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 0 !important;
    border-radius: var(--round);
    outline: 0 !important;
    background: var(--cell);
    color: var(--white);
    cursor: pointer;
    user-select: none;
    box-shadow: none !important;
    filter: none !important;
    transition: background-color 100ms ease;
}

.cell::before,
.cell::after,
.cell *::before,
.cell *::after {
    content: none !important;
    display: none !important;
    box-shadow: none !important;
    filter: none !important;
}

.cell:hover {
    filter: none;
}

.cell.double-letter {
    background: var(--cell);
    color: #1aaa87;
}

.cell.triple-letter {
    background: var(--cell);
    color: #03916f;
}

.cell.double-word {
    background: var(--cell);
    color: #e0196a;
}

.cell.triple-word {
    background: var(--cell);
    color: #ff4085;
}

.bonus-badge {
    position: absolute;
    z-index: 2;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    display: block;
    transform: translate(-50%, -50%) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit;
    font-size: clamp(31px, 6.6vw, 47px);
    font-weight: 700;
    line-height: 1;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    letter-spacing: 0;
    pointer-events: none;
}

.cell.has-letter .bonus-badge {
    top: 3px !important;
    left: 4px !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    padding: 0 !important;
    background: transparent !important;
    color: inherit;
    font-size: clamp(9px, 1.8vw, 13px) !important;
    line-height: 1;
}

.board-tile {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 0 !important;
    border-radius: var(--round);
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    user-select: none;
}

.board-tile::before,
.board-tile::after {
    content: none !important;
    display: none !important;
}

.tile-letter {
    display: block;
    line-height: 1;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.board-tile .tile-letter {
    position: relative;
    z-index: 2;
    color: inherit;
    font-size: clamp(31px, 6.6vw, 47px);
    font-weight: 700;
}

.board-tile .tile-value {
    position: absolute;
    z-index: 3;
    right: 9%;
    bottom: 6%;
    color: inherit;
    font-size: clamp(18.75px, 3.5625vw, 26.25px);
    font-weight: 700;
    line-height: .8;
}

/* Hide score values on invalid or isolated player tiles. */
.board-tile.player-invalid .tile-value,
.board-tile.player-isolated .tile-value,
.cell.player-invalid .board-tile .tile-value,
.cell.player-isolated .board-tile .tile-value {
    display: none;
}
/* Existing puzzle letters are dark tiles with white lettering. */
.board-tile.original-tile {
    background: #000000;
    color: var(--white);
}

/* Player tiles retain the previous validation and tile-colour behavior. */
.board-tile.player-valid {
    background: #fbb03b;
    color: #172c33;
}

.board-tile.player-valid.player-valid-colour-1 { background: #fca43d; }
.board-tile.player-valid.player-valid-colour-2 { background: #fc9740; }
.board-tile.player-valid.player-valid-colour-3 { background: #fd8b42; }
.board-tile.player-valid.player-valid-colour-4 { background: #fe7246; }
.board-tile.player-valid.player-valid-colour-5 { background: #fe6549; }
.board-tile.player-valid.player-valid-colour-6 { background: #ff594b; }

.board-tile.player-invalid,
.cell.player-invalid .board-tile,
.board-tile.player-isolated,
.cell.player-isolated .board-tile {
    background: var(--white);
    color: #ff0000;
}

/* Invalid and isolated player tiles have a matching red outline. */
.board-tile.player-invalid,
.board-tile.player-isolated,
.cell.player-invalid .board-tile,
.cell.player-isolated .board-tile {
    outline: 4px solid #ff0000 !important;
    outline-offset: -4px;
}

.cell.player-valid,
.cell.player-invalid,
.cell.player-isolated {
    background: var(--cell);
    border: 0 !important;
    box-shadow: none !important;
}

.board-tile.player-on-double-letter,
.board-tile.player-on-triple-letter,
.board-tile.player-on-double-word,
.board-tile.player-on-triple-word {
    background: inherit;
}

/* Invalid player tiles stay white with red lettering, including on premium cells. */
.board-tile.player-invalid.player-on-double-letter,
.board-tile.player-invalid.player-on-triple-letter,
.board-tile.player-invalid.player-on-double-word,
.board-tile.player-invalid.player-on-triple-word,
.board-tile.player-isolated.player-on-double-letter,
.board-tile.player-isolated.player-on-triple-letter,
.board-tile.player-isolated.player-on-double-word,
.board-tile.player-isolated.player-on-triple-word,
.cell.player-invalid .board-tile.player-on-double-letter,
.cell.player-invalid .board-tile.player-on-triple-letter,
.cell.player-invalid .board-tile.player-on-double-word,
.cell.player-invalid .board-tile.player-on-triple-word,
.cell.player-isolated .board-tile.player-on-double-letter,
.cell.player-isolated .board-tile.player-on-triple-letter,
.cell.player-isolated .board-tile.player-on-double-word,
.cell.player-isolated .board-tile.player-on-triple-word {
    background: var(--white);
    color: #ff0000;
}

/* Valid player tiles on premium squares use the premium colour with black lettering. */
.board-tile.player-valid.player-on-double-letter,
.cell.player-valid .board-tile.player-on-double-letter { background: #1aaa87; color: #172c33; }
.board-tile.player-valid.player-on-triple-letter,
.cell.player-valid .board-tile.player-on-triple-letter { background: #03916f; color: #172c33; }
.board-tile.player-valid.player-on-double-word,
.cell.player-valid .board-tile.player-on-double-word { background: #e0196a; color: #172c33; }
.board-tile.player-valid.player-on-triple-word,
.cell.player-valid .board-tile.player-on-triple-word { background: #ff4085; color: #172c33; }

/* Highlight the individual target cell while a tile is being placed. */
.cell.drag-over,
.cell.selected-target,
.cell.drag-over.double-letter,
.cell.drag-over.triple-letter,
.cell.drag-over.double-word,
.cell.drag-over.triple-word,
.cell.selected-target.double-letter,
.cell.selected-target.triple-letter,
.cell.selected-target.double-word,
.cell.selected-target.triple-word {
    outline: 4px solid #1aaa87 !important;
    outline-offset: -4px;
    border: 0 !important;
    box-shadow: none !important;
}

/* Rack: seven equal squares, aligned exactly to the board columns. */
#tileMessage {
    order: 4;
    width: 100%;
    min-height: 0;
    margin: 5px auto 0;
    color: var(--white);
    text-align: center;
    font-size: 19px;
    line-height: 1.05;
}

#tileMessage:empty {
    display: none;
}

#tileMessage.success {
    color: #fbb03b;
    font-weight: 700;
}

#tileMessage.error {
    color: #ffb4b4;
    font-weight: 700;
}

#tileRack {
    order: 5;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--gap);
    width: 100%;
    margin: 14px auto 0;
}

.rack-slot {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: visible;
    border: 0 !important;
    border-radius: var(--round);
    background: var(--rack-slot);
    box-shadow: none !important;
}

.rack-slot::before,
.rack-slot::after {
    content: none !important;
    display: none !important;
}

.rack-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0;
    border: 0 !important;
    border-radius: var(--round);
    outline: 0 !important;
    background: var(--white);
    color: #172c33;
    box-shadow: none !important;
    filter: none !important;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.rack-tile::before,
.rack-tile::after {
    content: none !important;
    display: none !important;
}

.rack-tile .tile-value {
    position: absolute;
    right: 9%;
    bottom: 6%;
    color: #172c33;
    font-size: clamp(18.75px, 3.5625vw, 26.25px);
    font-weight: 700;
    line-height: .8;
}

.rack-tile .tile-letter {
    color: #172c33;
    font-size: clamp(31px, 6.6vw, 47px);
    font-weight: 700;
}


/* Selected rack tiles lift slightly instead of showing a green outline. */
.rack-tile.selected {
    outline: 0 !important;
    border: 0 !important;
    transform: translateY(-5px);
    box-shadow: none !important;
}

.rack-tile.rack-tile-drag-visual {
    position: fixed !important;
    z-index: 9999;
    width: var(--drag-tile-size, 64px);
    height: var(--drag-tile-size, 64px);
    pointer-events: none;
    margin: 0;
    transform: rotate(-4deg) scale(1.05);
    transition: left 65ms ease-out, top 65ms ease-out;
    will-change: left, top;
    opacity: .98;
    cursor: grabbing;
    box-shadow: none !important;
}

.rack-tile.rack-tile-drag-visual .tile-value {
    display: none !important;
}

.rack-tile.rack-tile-drag-source {
    visibility: hidden;
}

/* Lift the rack tile being targeted for a swap. */
.rack-tile.rack-reorder-target {
    outline: 0 !important;
    transform: translateY(-5px);
    box-shadow: none !important;
    transition: transform 120ms ease-out;
}

/* Empty rack slots use the same green selection outline as board cells. */
.rack-slot.drag-over {
    outline: 4px solid #1aaa87 !important;
    outline-offset: -4px;
}

/* Three primary controls, followed by the scoring-word tags and Next Puzzle. */
.rack-actions {
    order: 6;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 2px;
    width: 100%;
    margin: 9px auto 0;
    padding: 0;
}

.rack-actions > button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 63px;
    margin: 0;
    padding: 12px 8px 8px;
    border: 0;
    border-radius: 0;
    background: var(--rack-slot);
    color: var(--white);
    box-shadow: none;
    font-size: clamp(19px, 3.9vw, 25px);
    font-weight: 700;
    line-height: 1;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: center;
    cursor: pointer;
    -webkit-mask-image: url("/button-shape.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-image: url("/button-shape.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
    transition: background-color 120ms ease, color 120ms ease;
}

.rack-actions > button:active:not(:disabled) {
    background: var(--rack-slot);
    color: var(--white);
}

.rack-actions > button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

#shuffleRackButton { grid-column: 1; }
#clearBoardButton { grid-column: 2; }
#revealPuzzleButton { grid-column: 3; }

.played-words-summary {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 100%;
    margin: 1px auto 0;
}

#wordList {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin: 0;
}

.word-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 13px;
    border: 0;
    border-radius: 999px;
    background: var(--white);
    color: var(--page);
    box-shadow: none;
    font-size: 23px;
}

.word-pill-word {
    color: var(--page);
    font-weight: 700;
    line-height: 1;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.word-pill-score {
    color: #54717a;
    font-size: .88em;
    font-weight: 700;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.score-bonus:empty {
    display: none;
}

.score-bonus {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 13px;
    border: 0;
    border-radius: 999px;
    background: var(--white);
    color: var(--page);
    box-shadow: none;
    font-size: 23px;
    font-weight: 700;
    text-align: center;
}

.score-bonus-label {
    color: var(--page);
    font-weight: 700;
    line-height: 1;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

#nextPuzzleButton {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 260px);
    min-height: 44px;
    margin-top: 2px;
    border: 0;
    background: #264653;
    color: #264653;
}

#nextPuzzleButton:hover:not(:disabled),
#nextPuzzleButton:active:not(:disabled) {
    background: #fbb03b;
    color: var(--page);
}

#nextPuzzleButton:disabled {
    display: none;
}

/* Optional solver panel remains available with the same game behavior. */
.best-score-box {
    order: 7;
    width: 100%;
    margin: 18px auto 0;
    padding: 12px;
    border: 0;
    border-radius: var(--round);
    background: var(--rack-slot);
    color: var(--white);
    text-align: center;
    box-shadow: none;
}

.best-score-title,
.best-score-message {
    color: var(--white);
}

.best-score-title {
    font-size: 22px;
    font-weight: 700;
}

.best-score-word {
    margin-top: 4px;
    font-size: 30px;
    font-weight: 700;
}

.best-score-value {
    margin-top: 3px;
    font-size: 23px;
}

.best-score-message {
    margin: 7px 0 12px;
    font-size: 19px;
    line-height: 1.1;
}

#revealAnswerButton {
    border: 1px solid var(--white);
    border-radius: 999px;
    padding: 5px 16px;
    background: transparent;
    color: var(--white);
    box-shadow: none;
    cursor: pointer;
}

/* Dialogs keep their existing IDs and JavaScript behavior. */
dialog {
    color: #264653;
    font-family: var(--font);
}

.rules-dialog,
.share-results-dialog {
    width: min(500px, calc(100% - 28px));
    max-width: 500px;
    height: var(--standard-popup-height, auto);
    max-height: 85vh;
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 14px;
    background: #ffffff;
    color: #264653;
    box-shadow: none;
}

/* Share and Word List dialogs size to their own content, unlike How to Play. */
.share-results-dialog,
.word-list-dialog {
    height: max-content;
    min-height: 0;
}

dialog::backdrop {
    background: rgba(10, 27, 32, .72);
}

.rules-dialog-header,
.share-results-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 13px 44px 8px;
    border: 0;
    text-align: center;
}

.rules-dialog-header h2,
.share-results-header h2 {
    margin: 0;
    font-size: 38px;
    font-weight: 400;
    line-height: .9;
}

.rules-close-button {
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #264653;
    font-family: Arial, sans-serif;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.rules-content,
.share-results-content {
    padding: 8px 24px 18px;
    text-align: center;
}

.rules-tabs {
    display: flex;
    width: 100%;
    margin: 0 0 12px;
    border: 1px solid #264653;
    background: #edf1f2;
}

.rules-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    padding: 7px 8px 8px;
    border: 0;
    border-right: 1px solid #264653;
    border-radius: 0;
    background: transparent;
    color: #264653;
    font-size: 25px;
    line-height: .9;
    cursor: pointer;
}

.rules-tab:last-child {
    border-right: 0;
}

.rules-tab.is-active {
    background: #264653;
    color: #ffffff;
}

.rules-tab-panel p,
.word-list-content p {
    margin: 8px 0 12px;
    font-size: 22px;
    line-height: 1.05;
}

/* Subtle pulse draws attention to the Q tile's score in the Scoring tab. */
#rulesPanelScoring .how-to-play-scoring-tile .tile-value {
    color: #ff0000;
    animation: scoring-value-pulse 1.8s ease-in-out infinite;
    transform-origin: bottom right;
}

@keyframes scoring-value-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.78; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    #rulesPanelScoring .how-to-play-scoring-tile .tile-value {
        animation: none;
    }
}

.how-to-play-scoring-tile {
    width: 73.33px;
    height: 73.33px;
    border: 2px solid #264653 !important;
    margin: 8px auto 12px;
    cursor: default;
    touch-action: auto;
}

/* Hide score values only in the General tab's example board. */
#rulesPanelGeneral .how-to-play-example .tile-value {
    display: none;
}

.how-to-play-example {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5625px;
    width: min(140.625px, 100%);
    margin: 6px auto 12px;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.how-to-play-example-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    min-width: 0;
    border: 0;
    border-radius: var(--round);
    background: var(--cell);
    box-shadow: none;
}

/* The rack tiles in the example are for display, not dragging. */
.how-to-play-example .rack-tile {
    cursor: default;
    touch-action: auto;
}

.how-to-play-example .how-to-play-example-white-tile {
    border: 2px solid #172c33 !important;
}




.how-to-play-bonus-all-tiles-copy {
    margin-top: 16px;
}

.how-to-play-bonus-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 12px auto 0;
}

.how-to-play-bonus-pill {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 9.45px;
    padding: 13.5px 17.55px;
    border-radius: 999px;
    background: #172c33;
    color: var(--white);
    font-size: 31.05px;
    font-weight: 700;
    text-align: center;
}

.how-to-play-bonus-pill-label,
.how-to-play-bonus-pill-score {
    line-height: 1;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.how-to-play-bonus-pill-score {
    font-size: .88em;
}

.how-to-play-bonus-tiles {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 12px auto;
}

.how-to-play-bonus-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 73.33px;
    height: 73.33px;
    flex: 0 0 73.33px;
    aspect-ratio: 1 / 1;
    border: 0;
    border-radius: var(--round);
    background: var(--cell);
    font-size: clamp(31px, 6.6vw, 47px);
    font-weight: 700;
    box-shadow: none;
}

.how-to-play-double-letter { color: #1aaa87; }
.how-to-play-triple-letter { color: #03916f; }
.how-to-play-double-word { color: #e0196a; }
.how-to-play-triple-word { color: #ff4085; }

.how-to-play-score-example {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    margin: 12px auto;
    box-shadow: none;
    transform: scale(1.2);
    transform-origin: center;
}

.how-to-play-score-number {
    color: #264653;
    font-size: clamp(46.8px, 9.6vw, 62.4px);
    font-weight: 700;
    line-height: .9;
    white-space: nowrap;
    transform: translateY(2px);
}

.how-to-play-score-example .achievement-stars {
    justify-content: center;
    align-items: baseline;
    gap: 3px;
    min-height: 0;
    margin: 0;
    font-size: 33.048px;
    line-height: 1;
    white-space: nowrap;
    transform: translateY(calc(0.08em + 2px));
}

.how-to-play-score-example .achievement-star {
    width: .85em;
    height: .85em;
}

.word-list-link {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.word-list-attribution {
    color: #777;
    font-size: 18px !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere;
}

.word-list-attribution a,
.word-list-content a {
    color: #526d76;
}

.share-results-achievements {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    text-align: center;
}

.share-results-score {
    margin: 0;
    font-size: clamp(46.8px, 9.6vw, 62.4px);
    font-weight: 700;
    line-height: .9;
    white-space: nowrap;
}

.share-results-stars {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    margin: 0;
    font-size: 33.048px;
    line-height: 1;
    white-space: nowrap;
}

.share-results-stars .achievement-star {
    display: inline-flex;
    width: .85em;
    height: .85em;
    align-items: center;
    justify-content: center;
    color: #172c33;
}

.share-results-stars .achievement-star.earned {
    color: #fbb03b;
}

.share-results-stars svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.share-results-crown {
    display: inline-flex;
    font-size: 33.048px;
    align-items: center;
    justify-content: center;
    width: .85em;
    height: .85em;
    margin: 0;
    vertical-align: baseline;
}

.share-results-crown img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 600px) {
    .share-results-score {
        font-size: clamp(42px, 10.8vw, 52.8px);
    }

    .share-results-stars {
        font-size: 28.458px;
    }

    .share-results-crown {
        font-size: 28.458px;
    }

    .share-results-stars,
    .share-results-crown {
        position: relative;
        top: 3px;
    }
}

.share-results-subtitle {
    margin: 8px 0 14px;
    font-size: 23px;
    line-height: 1.05;
}

.copy-share-results-button,
.continue-playing-button {
    display: block;
    width: 100%;
    margin: 8px 0 0;
    padding: 6px 16px 7px;
    border: 1px solid #264653;
    border-radius: 999px;
    background: #264653;
    color: #ffffff;
    font-size: 23px;
    line-height: .9;
    cursor: pointer;
}

.continue-playing-button {
    background: #ffffff;
    color: #264653;
}

.share-results-status {
    margin: 7px 0 0;
    font-size: 18px;
}

/* Keep the development generator panel hidden from players. */
#generatorPanel {
    display: none !important;
}

#generatorPanel h2 {
    margin: 0 0 6px;
    font-size: 25px;
    line-height: .9;
}

.panel-description {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.05;
}

.setting {
    margin-bottom: 10px;
}

.setting label {
    display: block;
    margin-bottom: 4px;
    font-size: 19px;
    font-weight: 700;
}

.setting input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #b7c4c8;
    border-radius: 6px;
    background: #ffffff;
    color: #264653;
    font-family: var(--font);
    font-size: 20px;
}

.setting-help,
.generator-message {
    display: block;
    margin-top: 3px;
    font-size: 16px;
    line-height: 1;
}

#generatorPanel #generateButton {
    width: 100%;
    padding: 5px 12px;
    border: 0;
    border-radius: 999px;
    background: #264653;
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
}

@media (min-width: 601px) {
    .board-tile .tile-value {
        font-size: clamp(14.0625px, 2.671875vw, 19.6875px);
    }

    .rack-tile .tile-value {
        font-size: clamp(14.0625px, 2.671875vw, 19.6875px);
    }
}

@media (max-width: 1100px) {
    #generatorPanel {
        position: static;
        width: min(100%, 500px);
        margin: 0 auto 14px;
    }
}

@media (max-width: 600px) {
    :root {
        --gap: 4px;
        --round: 7px;
    }

    body {
        padding: 12px 10px 22px;
    }

    .board-utility-row {
        margin-bottom: 10px;
    }

    .game-brand-title {
        font-size: clamp(38px, 10vw, 48px);
    }

    .daily-puzzle-number {
        margin-top: -4px;
        font-size: 30.45px;
    }

    .board-top-row {
        margin-bottom: 10px;
    }

    .score-box {
        gap: 8px;
    }

    .achievement-stars {
        gap: 3px;
        font-size: 29px;
    }

    #tileRack {
        margin-top: 10px;
    }

    .rack-actions {
        gap: 2px;
        margin-top: 5px;
    }

    .rack-actions > button {
        min-height: 57px;
        padding: 11px 4px 7px;
        font-size: clamp(17px, 4.6vw, 21px);
    }

    .word-pill {
        padding: 10px 10px;
        font-size: 21px;
    }

    .how-to-play-bonus-pill {
        gap: 7.0875px;
        padding: 10.125px 13.1625px;
        font-size: 23.2875px;
    }

    .how-to-play-example {
        width: min(112.5px, 100%);
    }

    .rules-dialog,
    .share-results-dialog {
        width: calc(100% - 24px);
        max-height: 88vh;
    }

    .rules-dialog-header,
    .share-results-header {
        min-height: 52px;
        padding-top: 12px;
    }

    .rules-dialog-header h2,
    .share-results-header h2 {
        font-size: 34px;
    }

    .rules-content,
    .share-results-content {
        padding: 7px 16px 15px;
    }

    .rules-tab-panel p,
    .word-list-content p {
        font-size: 20px;
    }

    .rules-tabs {
        margin-bottom: 10px;
    }

    .rules-tab {
        min-height: 42px;
        padding: 6px 4px 7px;
        font-size: 22px;
    }

    .how-to-play-score-number {
        font-size: clamp(42px, 10.8vw, 52.8px);
    }

    .how-to-play-score-example .achievement-stars {
        font-size: 28.458px;
    }

    .rules-close-button {
        top: 8px;
        right: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}



/* Ensure the Next Puzzle button text uses the requested teal colour. */
#nextPuzzleButton,
#nextPuzzleButton:hover:not(:disabled),
#nextPuzzleButton:active:not(:disabled) {
    color: #264653;
}

/* Align the score and achievement stars over the centre of board column one. */
.board-top-row {
    display: block;
    width: 100%;
    margin: 5px auto 12px;
}

.score-stack {
    display: block;
    width: calc((100% - 6 * var(--gap)) / 7);
    margin: 0;
}

#scoreBox.score-box {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    width: max-content;
    max-width: none;
    position: relative;
    left: 0;
    transform: scale(1.2);
    transform-origin: left center;
    margin: 0;
    padding: 0;
}

#scoreValue {
    font-size: clamp(46.8px, 9.6vw, 62.4px);
    line-height: .9;
    transform: translateY(2px);
}

#scoreBox .achievement-stars {
    justify-content: center;
    align-items: baseline;
    gap: 3px;
    margin: 0;
    font-size: 33.048px;
    line-height: 1;
    white-space: nowrap;
    transform: translateY(calc(0.08em + 2px));
}

@media (max-width: 600px) {
    #scoreValue {
        font-size: clamp(42px, 10.8vw, 52.8px);
    }

    #scoreBox .achievement-stars {
        font-size: 28.458px;
    }
}


/* Shared popup polish: consistent surfaces, spacing, and responsive scrolling. */
.rules-dialog,
.share-results-dialog {
    width: min(500px, calc(100vw - 32px));
    max-width: 500px;
    max-height: min(85dvh, 760px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(38, 70, 83, .10);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 54px rgba(10, 27, 32, .22);
    scrollbar-gutter: stable;
    opacity: 0;
    transform: translateY(7px) scale(.985);
    transition: opacity 160ms ease, transform 160ms ease, overlay 160ms allow-discrete, display 160ms allow-discrete;
    transition-behavior: allow-discrete;
}

.rules-dialog[open],
.share-results-dialog[open] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@starting-style {
    .rules-dialog[open],
    .share-results-dialog[open] {
        opacity: 0;
        transform: translateY(7px) scale(.985);
    }
}

dialog::backdrop {
    background: rgba(10, 27, 32, .68);
    transition: background-color 160ms ease, overlay 160ms allow-discrete, display 160ms allow-discrete;
    transition-behavior: allow-discrete;
}

@starting-style {
    dialog[open]::backdrop {
        background: rgba(10, 27, 32, 0);
    }
}

.rules-dialog-header,
.share-results-header {
    min-height: 64px;
    padding: 14px 54px 9px;
}

.rules-dialog-header h2,
.share-results-header h2 {
    line-height: .98;
    text-wrap: balance;
}

.rules-close-button {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 29px;
    transition: background-color 120ms ease, transform 120ms ease;
}

.rules-close-button:hover {
    background: #edf1f2;
}

.rules-close-button:active {
    transform: scale(.94);
}

.rules-content,
.share-results-content {
    padding: 8px 24px 20px;
}

.rules-tabs {
    gap: 4px;
    padding: 4px;
    margin-bottom: 14px;
    border: 0;
    border-radius: 12px;
    background: #edf1f2;
}

.rules-tab {
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    font-size: 24px;
    transition: background-color 120ms ease, color 120ms ease;
}

.rules-tab.is-active {
    border-radius: 8px;
}

.rules-tab:focus-visible,
.copy-share-results-button:focus-visible,
.continue-playing-button:focus-visible {
    outline-color: #1aaa87;
    outline-offset: 2px;
}

.rules-tab-panel p,
.word-list-content p {
    overflow-wrap: anywhere;
    line-height: 1.12;
}

.copy-share-results-button,
.continue-playing-button {
    min-height: 46px;
    padding: 8px 16px;
    transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.copy-share-results-button:hover {
    background: #315866;
}

.continue-playing-button:hover {
    background: #edf1f2;
}

.copy-share-results-button:active,
.continue-playing-button:active {
    transform: scale(.985);
}

.share-results-subtitle {
    line-height: 1.12;
    overflow-wrap: anywhere;
}

/* Keep the player's best result below the explanation when the solver is revealed. */
.share-results-dialog.is-reveal-mode .share-results-content {
    padding-top: 0;
}

.share-results-dialog.is-reveal-mode .share-results-subtitle {
    margin-top: 0;
    margin-bottom: 8px;
}

.share-results-dialog.is-reveal-mode .share-results-achievements {
    margin: 0 0 6px;
}

.share-results-status {
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .rules-dialog,
    .share-results-dialog {
        width: calc(100vw - 24px);
        max-width: none;
        max-height: 88dvh;
        border-radius: 16px;
    }

    .rules-dialog-header,
    .share-results-header {
        min-height: 58px;
        padding: 12px 52px 8px;
    }

    .rules-content,
    .share-results-content {
        padding: 7px 16px 16px;
    }

    .rules-tabs {
        gap: 3px;
        padding: 3px;
        margin-bottom: 11px;
    }

    .rules-tab {
        min-height: 42px;
        padding: 6px 4px;
        font-size: 22px;
    }

    .rules-tab-panel p,
    .word-list-content p {
        line-height: 1.1;
    }

    .rules-close-button {
        top: 7px;
        right: 7px;
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rules-dialog,
    .share-results-dialog,
    dialog::backdrop,
    .rules-close-button,
    .rules-tab,
    .copy-share-results-button,
    .continue-playing-button {
        animation: none !important;
        transition: none !important;
    }
}

/* Full-screen loading cover: gameplay and layout initialize underneath it. */
.game-loading-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--page, #264653);
    opacity: 1;
    visibility: visible;
    transition: opacity 280ms ease, visibility 280ms ease;
}
.game-loading-logo {
    display: block;
    width: clamp(104px, 25vw, 150px);
    height: auto;
    animation: toucan-loading-breathe 1.8s ease-in-out infinite;
    transform-origin: center;
}
.game-loading-accessible-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.game-loading-screen.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
@keyframes toucan-loading-breathe {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.045); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .game-loading-logo { animation: none; }
    .game-loading-screen { transition: none; }
}

/* Position the logo over the board center, not the viewport center. */
.game-loading-logo {
    position: absolute;
    left: var(--loading-board-center-x, 50%);
    top: var(--loading-board-center-y, 50%);
    translate: -50% -50%;
}

/* Hide the scrollbar in How to Play tabs while preserving touch and wheel scrolling. */
.rules-dialog {
    scrollbar-width: none;
    -ms-overflow-style: none;
    scrollbar-gutter: auto;
}
.rules-dialog::-webkit-scrollbar {
    display: none;
}


/* Fixed footer links and Ko-fi support button. */
body {
    padding-bottom: 116px;
}

.site-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 8px 12px 10px;
    background: var(--page, #264653);
    color: #ffffff;
    text-align: center;
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--font, 'Dongle', sans-serif);
    font-size: 22px;
    line-height: 1;
}

.site-footer-links a {
    color: #ffffff;
    text-decoration: none;
}

.site-footer-links a:hover,
.site-footer-links a:focus,
.site-footer-links a:active {
    text-decoration: none;
}

.site-footer-support {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 30px;
}

.update-log-page {
    width: min(500px, 100%);
    margin: 0 auto;
    padding: 26px 8px 24px;
    color: #ffffff;
    font-family: var(--font, 'Dongle', sans-serif);
}

.update-log-page h1 {
    margin: 0 0 20px;
    font-size: 48px;
    font-weight: 400;
    line-height: .95;
    text-align: center;
}

.update-log-entry-date {
    margin: 0 0 6px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}

.update-log-entry ul {
    margin: 0 0 22px;
    padding-left: 28px;
    font-size: 25px;
    line-height: 1.05;
}

@media (max-width: 600px) {
    body {
        padding-bottom: 112px;
    }

    .site-footer {
        gap: 6px;
        padding: 7px 8px 9px;
    }

    .site-footer-links {
        gap: 6px;
        font-size: 21px;
    }

    .update-log-page {
        padding-top: 20px;
    }
}