:root {
        color-scheme: dark;
    }

    * {
        box-sizing: border-box;
    }

    html, body {
        margin: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #061016;
        color: #f2f7f6;
        font-family: Arial, Helvetica, sans-serif;
    }

    canvas {
        display: block;
        width: 100vw;
        height: 100vh;
        touch-action: none;
        cursor: grab;
        background:
            radial-gradient(circle at 52% 48%, #193842 0%, #0a1c23 58%, #050b0f 100%);
    }

    canvas.dragging {
        cursor: grabbing;
    }

    #panel {
        position: fixed;
        left: 12px;
        top: 12px;
        z-index: 20;
        width: 320px;
        height: calc(100vh - 24px);
        max-width: calc(100vw - 24px);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 15px 15px 12px;
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 14px;
        background: rgba(5, 10, 12, 0.84);
        backdrop-filter: blur(10px);
        box-shadow: 0 18px 55px rgba(0,0,0,0.34);
        transition:
            width 180ms ease,
            height 180ms ease,
            padding 180ms ease;
    }

    #panel.hidden {
        display: none;
    }

    #panel.collapsed {
        width: 56px;
        height: 56px;
        max-width: 56px;
        padding: 6px;
        overflow: hidden;
    }

    #panelHeader {
        position: sticky;
        top: 0;
        z-index: 3;
        width: 100%;
        min-height: 44px;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 10px;
        background: rgba(255,255,255,0.035);
        color: inherit;
        text-align: left;
        cursor: pointer;
        font: inherit;
        flex: none;
        transition:
            background 120ms ease,
            border-color 120ms ease;
    }

    #panelHeader:hover,
    #panelHeader:focus-visible {
        background: rgba(255,255,255,0.085);
        border-color: rgba(255,255,255,0.16);
        outline: none;
    }

    #panelHeaderText {
        min-width: 0;
    }

    #panelHeader h1 {
        margin: 0;
        font-size: 21px;
        line-height: 1.1;
        letter-spacing: 0.01em;
    }

    #panelChevron {
        width: auto;
        height: auto;
        display: block;
        padding: 0;
        border: 0;
        background: transparent;
        font-size: 22px;
        line-height: 1;
        opacity: 0.78;
        transition:
            transform 180ms ease,
            opacity 120ms ease;
    }

    #panelHeader:hover #panelChevron,
    #panelHeader:focus-visible #panelChevron {
        opacity: 1;
    }

    #panelContent {
        flex: 1 1 auto;
        min-height: 0;
        margin-top: 6px;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 6px;
        scrollbar-gutter: stable;
    }

    #panel.collapsed #panelHeader {
        display: grid;
        grid-template-columns: 1fr;
        place-items: center;
        min-height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
    }

    #panel.collapsed #panelHeaderText,
    #panel.collapsed #panelContent {
        display: none;
    }

    #panel.collapsed #panelChevron {
        transform: rotate(180deg);
    }

    #turnCard {
        margin: 0 0 12px;
        padding: 11px 12px;
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,0.11);
        background: rgba(255,255,255,0.05);
    }

    #turnLine {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        font-weight: 700;
    }

    #turnBadge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 5px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.18);
        background: rgba(255,255,255,0.08);
    }

    #turnDot {
        width: 13px;
        height: 13px;
        border-radius: 50%;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.18), 0 0 14px currentColor;
    }

    #message {
        margin-top: 9px;
        min-height: 36px;
        color: rgba(255,255,255,0.82);
        font-size: 13px;
        line-height: 1.38;
    }

    .progress {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 10px 0 13px;
    }

    .progressBox {
        padding: 9px;
        border-radius: 9px;
        border: 1px solid rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.045);
        font-size: 12px;
    }

    .progressBox strong {
        display: block;
        margin-top: 3px;
        font-size: 18px;
    }

    .redText { color: #ff9f93; }
    .blueText { color: #8fd2ff; }

    .buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 14px;
    }

    button {
        width: 100%;
        min-height: 38px;
        padding: 7px 9px;
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 8px;
        background: rgba(255,255,255,0.075);
        color: white;
        font-weight: 700;
        cursor: pointer;
    }

    button:hover:not(:disabled) {
        background: rgba(255,255,255,0.13);
    }

    button:disabled {
        opacity: 0.35;
        cursor: default;
    }

    #endJump {
        display: none !important;
    }

    .gameTools {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 10px 0 12px;
    }


    .themeField {
        grid-column: 1 / -1;
        min-height: 38px;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 10px;
        padding: 7px 10px;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 9px;
        background: rgba(255,255,255,0.045);
        color: rgba(255,255,255,0.84);
        font-size: 12px;
        font-weight: 700;
    }

    .themeField select {
        min-width: 0;
        min-height: 32px;
    }

    .themeField:has(select:disabled) {
        opacity: 0.45;
    }

    .coordinateToggle {
        grid-column: 1 / -1;
        min-height: 38px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 7px 10px;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 9px;
        background: rgba(255,255,255,0.045);
        color: rgba(255,255,255,0.84);
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
    }

    .coordinateToggle input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .toggleTrack {
        position: relative;
        width: 42px;
        height: 23px;
        flex: none;
        border-radius: 999px;
        background: rgba(255,255,255,0.16);
        border: 1px solid rgba(255,255,255,0.14);
        transition: background 120ms ease;
    }

    .toggleTrack::after {
        content: "";
        position: absolute;
        left: 3px;
        top: 3px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: rgba(255,255,255,0.90);
        box-shadow: 0 1px 5px rgba(0,0,0,0.34);
        transition: transform 120ms ease;
    }

    .coordinateToggle input:checked + .toggleTrack {
        background: rgba(83,190,245,0.62);
    }

    .coordinateToggle input:checked + .toggleTrack::after {
        transform: translateX(19px);
    }

    .projectionToggle {
        grid-column: 1 / -1;
        min-height: 38px;
        display: grid;
        grid-template-columns: 1fr auto auto auto;
        align-items: center;
        gap: 9px;
        padding: 7px 10px;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 9px;
        background: rgba(255,255,255,0.045);
        color: rgba(255,255,255,0.64);
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
    }

    .orientationTitle {
        color: rgba(255,255,255,0.86);
        text-align: left;
        white-space: nowrap;
    }

    .projectionHorizontal,
    .projectionVertical {
        white-space: nowrap;
    }

    .projectionHorizontal {
        text-align: right;
    }

    .projectionVertical {
        text-align: left;
    }

    .projectionToggle input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .projectionToggle input:not(:checked) ~ .projectionHorizontal,
    .projectionToggle input:checked ~ .projectionVertical {
        color: rgba(255,255,255,0.96);
    }

    .projectionToggle input:checked + .toggleTrack {
        background: rgba(83,190,245,0.62);
    }

    .projectionToggle input:checked + .toggleTrack::after {
        transform: translateX(19px);
    }

    .projectionToggle:has(input:disabled) {
        opacity: 0.45;
        cursor: default;
    }

    .moveHistoryDetails {
        margin: 0 0 12px;
        padding-top: 0;
        border-top: 0;
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 10px;
        background: rgba(255,255,255,0.035);
        overflow: hidden;
    }

    .moveHistoryDetails > summary {
        padding: 9px 10px;
        font-size: 12px;
        color: rgba(255,255,255,0.84);
    }

    #moveHistoryList {
        max-height: 142px;
        overflow-y: auto;
        padding: 0 10px 9px;
        color: rgba(255,255,255,0.76);
        font-size: 11px;
        line-height: 1.45;
    }

    .historyEmpty {
        color: rgba(255,255,255,0.44);
        font-style: italic;
    }

    .historyMove {
        display: grid;
        grid-template-columns: 28px 55px 1fr;
        gap: 5px;
        padding: 2px 0;
    }

    .historyMoveNumber {
        color: rgba(255,255,255,0.40);
        text-align: right;
    }

    .historyMovePlayer {
        font-weight: 700;
        color: rgba(255,255,255,0.82);
    }

    .historyMoveNotation {
        font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
        color: rgba(255,235,168,0.94);
    }

    .aiControls {
        margin: 0 0 12px;
        padding: 10px;
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 10px;
        background: rgba(255,255,255,0.04);
    }

    .controllerRow {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 9px;
    }

    .controllerField {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 7px;
        font-size: 12px;
        font-weight: 700;
    }

    select {
        width: 100%;
        min-height: 34px;
        padding: 5px 7px;
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 7px;
        background: #152127;
        color: white;
        font: inherit;
    }

    .swatchRows {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 10px;
        margin-bottom: 4px;
    }

    .swatchGroup {
        display: grid;
        gap: 7px;
    }

    .swatchLabel {
        font-size: 12px;
        font-weight: 700;
        color: rgba(255,255,255,0.84);
    }

    .swatchChooser {
        position: relative;
    }

    .colourDropdown {
        position: relative;
    }

    .colourDropdownButton {
        width: 100%;
        min-height: 38px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 7px 10px;
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,0.16);
        background: rgba(11,19,23,0.96);
        color: white;
        font: inherit;
        cursor: pointer;
    }

    .colourDropdownButton:hover {
        border-color: rgba(255,255,255,0.30);
    }

    .colourDropdownButton:disabled {
        cursor: default;
        opacity: 0.50;
    }

    .dropdownButtonLeft {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        flex: 1;
    }

    .dropdownSwatch {
        width: 18px;
        height: 18px;
        border-radius: 999px;
        border: 2px solid rgba(0,0,0,0.55);
        box-shadow:
            inset 0 1px 3px rgba(255,255,255,0.20),
            0 1px 4px rgba(0,0,0,0.25);
        flex: none;
        background: #666;
    }

    .dropdownCaret {
        flex: none;
        opacity: 0.78;
        font-size: 13px;
    }

    .colourDropdownMenu {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 6px);
        z-index: 40;
        display: none;
        padding: 8px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.16);
        background: rgba(11,19,23,0.98);
        box-shadow: 0 10px 28px rgba(0,0,0,0.34);
    }

    .colourDropdown.open .colourDropdownMenu {
        display: block;
    }

    .colourOptionsGrid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }

    .colourSwatchButton {
        width: 100%;
        aspect-ratio: 1 / 1;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        border-radius: 9px;
        border: 1px solid rgba(255,255,255,0.14);
        background: rgba(255,255,255,0.04);
        color: white;
        font: inherit;
        cursor: pointer;
        transition:
            transform 100ms ease,
            border-color 100ms ease,
            background 100ms ease,
            opacity 100ms ease;
    }

    .colourSwatchButton:hover {
        transform: translateY(-1px);
        border-color: rgba(255,255,255,0.30);
        background: rgba(255,255,255,0.07);
    }

    .colourSwatchButton.active {
        border-color: rgba(255,255,255,0.94);
        background: rgba(255,255,255,0.10);
        box-shadow:
            0 0 0 2px rgba(4,13,15,0.92),
            0 0 0 3px rgba(255,255,255,0.18);
    }

    .colourSwatchButton:disabled {
        cursor: default;
        opacity: 0.45;
        transform: none;
    }

    .speedRow {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 8px;
        margin: 3px 0 9px;
        color: rgba(255,255,255,0.76);
        font-size: 12px;
    }

    .speedRow input {
        min-width: 0;
    }

    #aiSpeedValue {
        min-width: 18px;
        text-align: right;
        font-weight: 700;
        color: white;
    }

    .aiButtons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .legend {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px 10px;
        margin: 4px 0 14px;
        font-size: 12px;
        color: rgba(255,255,255,0.76);
    }

    .legendItem {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .swatch {
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
        border-radius: 4px;
        border: 2px solid rgba(255,255,255,0.34);
    }

    .stepSwatch { background: rgba(72,224,126,0.64); }
    .jumpSwatch { background: rgba(255,208,70,0.70); }
    .swapSwatch { background: rgba(193,110,255,0.72); }
    .homeSwatch {
        background: linear-gradient(135deg, rgba(255,90,90,0.75) 0 49%, rgba(70,160,255,0.75) 51% 100%);
    }
    .frogSwatch {
        background: radial-gradient(circle at 35% 35%, #fff 0 14%, #70d890 18%, #2f8a52 70%, #123e24 100%);
    }

    .accordion {
        margin-top: 12px;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 14px;
        background: rgba(255,255,255,0.03);
        overflow: hidden;
    }

    .accordion > summary {
        list-style: none;
        cursor: pointer;
        user-select: none;
        padding: 12px 14px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: rgba(255,255,255,0.90);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .accordion > summary::-webkit-details-marker {
        display: none;
    }

    .accordion > summary::after {
        content: "▾";
        font-size: 14px;
        opacity: 0.8;
        transform: rotate(-90deg);
        transition: transform 120ms ease;
    }

    .accordion[open] > summary::after {
        transform: rotate(0deg);
    }

    .accordionBody {
        padding: 0 14px 14px;
    }

    .accordionBody > :first-child {
        margin-top: 0;
    }

    .accordionBody .aiControls {
        margin-top: 0;
    }

    details {
        border-top: 1px solid rgba(255,255,255,0.10);
        padding-top: 11px;
    }

    summary {
        cursor: pointer;
        font-weight: 700;
        font-size: 14px;
    }

    .rules {
        margin: 9px 0 0;
        padding-left: 19px;
        color: rgba(255,255,255,0.76);
        font-size: 13px;
        line-height: 1.45;
    }

    #coinFlipOverlay {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: grid;
        place-items: center;
        background: rgba(2, 8, 11, 0.72);
        backdrop-filter: blur(5px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
    }

    #coinFlipOverlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

    #coinFlipCard {
        display: grid;
        justify-items: center;
        width: min(280px, calc(100vw - 32px));
        box-sizing: border-box;
        gap: 14px;
        padding: 22px 28px 20px;
        border: 1px solid rgba(255,255,255,0.17);
        border-radius: 18px;
        background: rgba(7, 15, 18, 0.94);
        box-shadow: 0 24px 70px rgba(0,0,0,0.48);
    }

    #coinFlipTitle {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: 0.03em;
    }

    #frogCoin {
        position: relative;
        width: 132px;
        height: 132px;
        transform-style: preserve-3d;
        will-change: transform;
    }

    #frogCoin.flipping {
        animation: frogCoinFlip 1.45s cubic-bezier(.20,.66,.26,1) both;
    }

    .coinFace {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        border-radius: 50%;
        backface-visibility: hidden;
        border: 5px solid rgba(255,255,255,0.28);
        box-shadow:
            inset 0 0 0 5px rgba(0,0,0,0.16),
            0 12px 28px rgba(0,0,0,0.42);
    }

    .coinFace.redFace,
    .coinFace.blueFace {
        background:
            radial-gradient(circle at 34% 28%, #fff1b0 0 10%, #f2c95c 22%, #cb9625 56%, #8f6114 82%, #4f3408 100%);
        box-shadow:
            inset 0 0 0 4px rgba(255,244,182,0.34),
            inset 0 0 18px rgba(255,245,195,0.22);
    }

    .coinFace.blueFace {
        transform: rotateY(180deg);
    }

    .coinFrogImage {
        width: 76px;
        height: auto;
        display: block;
        filter:
            drop-shadow(0 2px 0 rgba(78,47,8,0.45))
            drop-shadow(0 5px 10px rgba(0,0,0,0.28));
        image-rendering: auto;
        user-select: none;
        pointer-events: none;
    }

    #coinFlipResult {
        min-height: 22px;
        font-size: 15px;
        font-weight: 800;
        color: rgba(255,255,255,0.88);
    }

    @keyframes frogCoinFlip {
        0% {
            transform: rotateY(0deg) translateY(0) scale(1);
        }
        18% {
            transform: rotateY(450deg) translateY(-38px) scale(1.05);
        }
        52% {
            transform: rotateY(1260deg) translateY(-58px) scale(1.10);
        }
        82% {
            transform: rotateY(1980deg) translateY(-10px) scale(1.02);
        }
        100% {
            transform: rotateY(var(--coin-final-rotation, 2160deg)) translateY(0) scale(1);
        }
    }
    #compactTurnIndicator {
        position: fixed;
        left: 80px;
        top: 18px;
        z-index: 25;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 11px;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 999px;
        background: rgba(5,10,12,0.78);
        color: rgba(255,255,255,0.90);
        font-size: 13px;
        font-weight: 700;
        backdrop-filter: blur(9px);
        box-shadow: 0 7px 18px rgba(0,0,0,0.22);
        transition:
            left 180ms ease,
            opacity 120ms ease;
        pointer-events: none;
    }

    #panel:not(.collapsed) + #compactTurnIndicator {
        left: 348px;
    }

    #compactTurnDot {
        width: 12px;
        height: 12px;
        flex: none;
        border-radius: 50%;
        background: #e96555;
        box-shadow:
            0 0 0 2px rgba(255,255,255,0.18),
            0 0 11px currentColor;
    }

    .firstPlayerRow {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 10px;
        margin: 10px 0 4px;
        color: rgba(255,255,255,0.82);
        font-size: 12px;
        font-weight: 700;
    }

    .firstPlayerRow select {
        margin-top: 0;
    }

    .modalOverlay {
        position: fixed;
        inset: 0;
        z-index: 130;
        display: grid;
        place-items: center;
        padding: 18px;
        background: rgba(1,7,9,0.72);
        backdrop-filter: blur(6px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 150ms ease;
    }

    .modalOverlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

    .modalCard {
        width: min(390px, calc(100vw - 36px));
        padding: 22px;
        border: 1px solid rgba(255,255,255,0.16);
        border-radius: 18px;
        background: rgba(7,15,18,0.97);
        box-shadow: 0 25px 75px rgba(0,0,0,0.52);
        text-align: center;
    }

    .modalCard h2 {
        margin: 0 0 10px;
        font-size: 24px;
        line-height: 1.15;
    }

    .modalCard p {
        margin: 0 0 18px;
        color: rgba(255,255,255,0.72);
        font-size: 14px;
        line-height: 1.45;
    }

    .modalScore {
        margin: 8px 0 20px;
        font-size: 34px;
        font-weight: 900;
        letter-spacing: 0.05em;
        color: rgba(255,232,148,0.96);
    }

    .modalButtons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .modalButtons button {
        min-height: 42px;
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,0.14);
        background: rgba(255,255,255,0.07);
        color: white;
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    .modalButtons button.primary {
        border-color: rgba(255,215,102,0.30);
        background: rgba(96,68,13,0.74);
    }

    #quickControls {
        position: fixed;
        right: 12px;
        top: 12px;
        z-index: 26;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;
        gap: 6px;
    }

    #quickControls button {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        padding: 0;
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,0.14);
        background: rgba(5,10,12,0.82);
        color: rgba(255,255,255,0.94);
        font: inherit;
        font-size: 19px;
        font-weight: 700;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 18px rgba(0,0,0,0.24);
        transition:
            transform 120ms ease,
            background 120ms ease,
            border-color 120ms ease,
            opacity 120ms ease;
    }

    #quickControls button:hover:not(:disabled) {
        transform: translateY(-1px);
        background: rgba(15,24,28,0.90);
        border-color: rgba(255,255,255,0.24);
    }

    #quickControls button:disabled {
        opacity: 0.42;
        cursor: default;
        transform: none;
    }

    #quickControls button .toolbarIcon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    #quickControls #restart {
        width: auto;
        min-width: 84px;
        padding: 0 13px;
        border-color: rgba(255,205,100,0.24);
        background: rgba(60,42,8,0.72);
        font-size: 14px;
        line-height: 1;
        white-space: nowrap;
    }

    #quickControls #restart .toolbarText {
        pointer-events: none;
    }

    #quickControls #hintMove {
        border-color: rgba(255,220,90,0.30);
        background: rgba(70,55,10,0.70);
    }

    .visuallyHidden {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    @media (max-width: 760px) {
        #panel {
            width: calc(100vw - 24px);
            height: calc(100vh - 24px);
        }

        #panel.collapsed {
            width: 56px;
            height: 56px;
            max-width: 56px;
        }

        #quickControls {
            top: 10px;
            right: 10px;
            left: auto;
            gap: 5px;
        }

        #compactTurnIndicator {
            left: 76px;
            top: 13px;
            max-width: calc(100vw - 300px);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        #panel:not(.collapsed) + #compactTurnIndicator {
            display: none;
        }

        #quickControls button {
            width: 36px;
            height: 36px;
            min-width: 36px;
            min-height: 36px;
            font-size: 17px;
        }
    }


#quickControls #showInstructions {
    border-color: rgba(168,224,255,0.28);
    background: rgba(8,48,66,0.72);
    text-transform: lowercase;
    font-family: Georgia, serif;
    font-style: italic;
}

.instructionsCard {
    width: min(900px, calc(100vw - 36px));
    max-height: min(86vh, 920px);
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 18px 18px 16px;
}

.instructionsHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.instructionsHeader h2 {
    margin: 0;
    font-size: 26px;
}

.instructionsCloseButton {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    height: 42px;
    padding: 0;
    border-radius: 10px;
    font-size: 24px;
    line-height: 1;
}

.instructionsBody {
    overflow-y: auto;
    padding-right: 6px;
}

.instructionSection {
    margin-bottom: 18px;
}

.instructionSection h3 {
    margin: 0 0 6px;
    font-size: 18px;
}

.instructionSection p {
    margin: 0 0 12px;
    color: rgba(255,255,255,0.80);
}

.inlineHintButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 3px;
    vertical-align: middle;
    border-radius: 9px;
    border: 1px solid rgba(255,220,90,0.30);
    background: rgba(70,55,10,0.70);
    box-shadow: 0 6px 12px rgba(0,0,0,0.22);
    color: rgba(255,255,255,0.95);
    font-weight: 700;
}

.instructionDemoRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.instructionDemoCard {
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.035);
}

.instructionDemoCard.fullWidth {
    width: 100%;
}

.instructionDemoLabel {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.82);
}

.demoBoard {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.16);
}

.singleDemo {
    height: 132px;
}

.jumpDemo {
    height: 170px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.10));
}

.displacementDemo {
    height: 214px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.10));
}

.pondDemo {
    background: radial-gradient(circle at 50% 45%, rgba(36,96,108,0.95), rgba(7,29,36,0.98));
}

.woodDemo {
    background: radial-gradient(circle at 50% 45%, rgba(39,58,52,0.92), rgba(17,27,25,0.98));
}

.demoCell {
    position: absolute;
    width: 52px;
    height: 52px;
}

.demoCell.pond {
    background: radial-gradient(circle at 35% 35%, #abf0a8 0 10%, #67b76a 22%, #2a7a40 64%, #154426 100%);
    border-radius: 58% 42% 55% 45% / 52% 47% 53% 48%;
    transform: rotate(-8deg);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.18), 0 3px 8px rgba(0,0,0,0.24);
}

.demoCell.pond::after {
    content: "";
    position: absolute;
    right: 0;
    top: 18px;
    width: 14px;
    height: 12px;
    background: rgba(7,29,36,0.92);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.demoCell.wood {
    width: 56px;
    height: 48px;
    background: linear-gradient(135deg, #dfba7e 0%, #c59258 48%, #9d6938 100%);
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    box-shadow: inset 0 1px 3px rgba(255,255,255,0.18), 0 3px 7px rgba(0,0,0,0.20);
    border: 1px solid rgba(0,0,0,0.80);
}

.demoCell.endZoneCell {
    background: linear-gradient(135deg, #e2c38e 0%, #c99a64 48%, #ab7444 100%);
}

.demoEndZone {
    position: absolute;
    left: 210px;
    top: 12px;
    width: 234px;
    height: 168px;
    border-radius: 18px;
    background: rgba(188, 64, 56, 0.12);
}

.demoBoundaryDash {
    position: absolute;
    left: 205px;
    top: 22px;
    width: 4px;
    height: 150px;
    background: repeating-linear-gradient(to bottom, #000 0 7px, #fff 7px 14px);
    border-radius: 999px;
}

.demoPiece {
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: 2;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.26));
}

.demoPiece.frog {
    border-radius: 55% 55% 50% 50%;
    background: radial-gradient(circle at 35% 32%, rgba(255,255,255,0.42) 0 10%, var(--piece-light) 20%, var(--piece-mid) 55%, var(--piece-dark) 100%);
}

.demoPiece.frog::before,
.demoPiece.frog::after {
    content: "";
    position: absolute;
    top: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 40%, #fff 0 17%, #101414 24%, #fefefe 33%, var(--piece-light) 36%, var(--piece-dark) 100%);
}

.demoPiece.frog::before { left: 6px; }
.demoPiece.frog::after { right: 6px; }

.demoPiece.marble {
    border-radius: 50%;
    border: 2px solid rgba(25,18,14,0.88);
    background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.82) 0 10%, var(--piece-light) 18%, var(--piece-mid) 55%, var(--piece-dark) 100%);
    overflow: hidden;
}

.demoPiece.marble::before,
.demoPiece.marble::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 0;
    background: transparent;
}

.demoPiece.marble::before {
    inset: 10px -4px auto -8px;
    height: 18px;
    border-top: 2px solid rgba(255,255,255,0.30);
    border-radius: 50%;
    transform: rotate(-12deg);
}

.demoPiece.marble::after {
    inset: 18px -8px auto 4px;
    height: 12px;
    border-top: 2px solid rgba(0,0,0,0.18);
    border-radius: 50%;
    transform: rotate(11deg);
}

.demoPiece.green { --piece-light:#a8e09c; --piece-mid:#66ae5e; --piece-dark:#315d2f; }
.demoPiece.red { --piece-light:#f4b0a0; --piece-mid:#d46f60; --piece-dark:#7e342b; }
.demoPiece.blue { --piece-light:#b6d9ff; --piece-mid:#6ea7e0; --piece-dark:#375578; }
.demoPiece.purple { --piece-light:#dcc5ff; --piece-mid:#9879d4; --piece-dark:#5b4082; }
.demoPiece.yellow { --piece-light:#f8ecab; --piece-mid:#d5bf58; --piece-dark:#79681e; }

.singleMovePiece {
    animation: demoSingleMove 2.6s ease-in-out infinite;
}

.tripleJumpPiece {
    animation: demoTripleJump 4.6s ease-in-out infinite;
}

.displacementRedPiece {
    animation: demoDisplaceRed 4.2s ease-in-out infinite;
}

.displacementBluePiece {
    animation: demoDisplaceBlue 4.2s ease-in-out infinite;
}

@keyframes demoSingleMove {
    0%, 18% { transform: translate(0, 0); }
    34%, 70% { transform: translate(68px, 0); }
    100% { transform: translate(0, 0); }
}

@keyframes demoTripleJump {
    0%, 10% { transform: translate(0, 0); }
    24%, 34% { transform: translate(116px, 0); }
    48%, 58% { transform: translate(232px, 0); }
    72%, 84% { transform: translate(348px, 0); }
    100% { transform: translate(0, 0); }
}

@keyframes demoDisplaceRed {
    0%, 20% { transform: translate(0, 0); }
    40%, 72% { transform: translate(87px, 0); }
    100% { transform: translate(0, 0); }
}

@keyframes demoDisplaceBlue {
    0%, 20% { transform: translate(0, 0); }
    40%, 72% { transform: translate(-87px, 0); }
    100% { transform: translate(0, 0); }
}

@media (max-width: 760px) {
    .instructionsCard {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        padding: 14px;
    }

    .instructionDemoRow {
        grid-template-columns: 1fr;
    }

    .jumpDemo {
        height: 158px;
        transform: scale(0.86);
        transform-origin: top left;
        width: 486px;
        margin-bottom: -18px;
    }

    .displacementDemo {
        height: 198px;
        transform: scale(0.82);
        transform-origin: top left;
        width: 486px;
        margin-bottom: -26px;
    }
}


.instructionCanvas {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:360 / 190;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.09);
    background:#0a171b;
}
.instructionCanvas.wide { aspect-ratio:820 / 250; }
#displacementDemo { aspect-ratio:820 / 300; }
@media (max-width:760px){
    .instructionCanvas.wide,#displacementDemo{width:100%;transform:none;margin:0;}
}


.instructionDemoHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.instructionThemeBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.88);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

#singleMoveDemo {
    aspect-ratio: 820 / 220;
}

#tripleJumpDemo {
    aspect-ratio: 820 / 240;
}

#displacementDemo {
    aspect-ratio: 820 / 260;
}

.instructionDemoHeading {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    margin-bottom:8px;
}


/* Temporary developer AI audit panel. */
.aiAuditPanel {
    display: grid;
    gap: 10px;
}

.auditRow {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 8px;
    align-items: end;
}

.auditRow label {
    display: grid;
    gap: 4px;
    font-size: 12px;
    color: rgba(255,255,255,.72);
}

.auditRow input {
    width: 100%;
    min-width: 0;
    padding: 7px 8px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.28);
    color: inherit;
}

.auditStatus {
    font-size: 12px;
    color: rgba(255,255,255,.72);
}

.auditStats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 10px;
    font-size: 12px;
}

.auditStats span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.auditButtons {
    display: flex;
    gap: 8px;
}

.auditLog {
    margin: 0;
    min-height: 86px;
    max-height: 190px;
    overflow: auto;
    white-space: pre-wrap;
    padding: 9px;
    border-radius: 8px;
    background: rgba(0,0,0,.34);
    border: 1px solid rgba(255,255,255,.08);
    font: 11px/1.35 Consolas, monospace;
}


/* Startup screen */
.startupScreen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 38%, transparent 0 86px, rgba(160, 210, 225, 0.12) 88px 91px, transparent 93px),
        radial-gradient(circle at 28% 62%, transparent 0 118px, rgba(160, 210, 225, 0.10) 120px 123px, transparent 125px),
        radial-gradient(circle at 66% 34%, transparent 0 96px, rgba(160, 210, 225, 0.10) 98px 101px, transparent 103px),
        radial-gradient(circle at 78% 60%, transparent 0 132px, rgba(160, 210, 225, 0.09) 134px 137px, transparent 139px),
        radial-gradient(circle at 52% 48%, #193842 0%, #0a1c23 58%, #050b0f 100%);
    color: #fff;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.startupScreen.hidden {
    display: none;
}

.startupScreen:focus-visible {
    outline: 3px solid rgba(255,255,255,0.9);
    outline-offset: -8px;
}

.startupContent {
    position: relative;
    z-index: 1;
    width: min(76vw, 900px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(22px, 3vh, 38px);
    text-align: center;
}

.startupLogo {
    display: block;
    width: min(72vw, 860px);
    max-height: 45vh;
    object-fit: contain;
    filter:
        drop-shadow(1px 0 0 rgba(255,255,255,0.96))
        drop-shadow(-1px 0 0 rgba(255,255,255,0.96))
        drop-shadow(0 1px 0 rgba(255,255,255,0.96))
        drop-shadow(0 -1px 0 rgba(255,255,255,0.96))
        drop-shadow(0 0 2px rgba(255,255,255,0.72))
        drop-shadow(0 10px 18px rgba(0,0,0,0.30));
}

.startupByline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: clamp(20px, 2.2vw, 34px);
    line-height: 1;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}

.startupBugVictim {
    width: clamp(52px, 5.2vw, 78px);
    height: clamp(52px, 5.2vw, 78px);
    object-fit: contain;
}

.startupPrompt {
    margin-top: clamp(8px, 1vh, 18px);
    font-size: clamp(22px, 2vw, 32px);
    text-shadow: 0 0 8px rgba(255,255,255,0.42);
    animation: startupPromptPulse 1.8s ease-in-out infinite;
}

.startupVersion {
    position: absolute;
    right: clamp(14px, 2vw, 24px);
    bottom: clamp(10px, 1.8vh, 20px);
    z-index: 1;
    font-size: clamp(11px, 1vw, 14px);
    line-height: 1;
    color: rgba(255,255,255,0.82);
    text-shadow: 0 1px 2px rgba(0,0,0,0.72);
    letter-spacing: 0.04em;
}

@keyframes startupPromptPulse {
    0%, 100% { opacity: 0.72; }
    50% { opacity: 1; }
}

@media (max-width: 700px) {
    .startupContent {
        width: 90vw;
    }

    .startupLogo {
        width: 88vw;
        max-height: 42vh;
    }
}


/* New-game setup */
.newGameSetupCard {
    width: min(680px, calc(100vw - 28px));
    max-height: calc(100vh - 28px);
    overflow-y: auto;
}

.newGameWarning {
    margin-bottom: 18px;
}

.newGamePlayers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.newGamePlayer {
    min-width: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    background: rgba(255,255,255,0.045);
}

.newGamePlayer legend {
    padding: 0 7px;
    font-weight: 700;
    font-size: 18px;
}

.newGamePlayer legend { color: var(--new-game-player-colour, #f2f7f6); transition: color .15s ease; }

.newGamePlayer label,
.newGameColourField,
.newGameFirstPlayer,
.newGameDisplaySettings label {
    display: grid;
    gap: 6px;
    margin-top: 12px;
    font-weight: 700;
}

.newGamePlayer select,
.newGameFirstPlayer select,
.newGameDisplaySettings select {
    width: 100%;
    min-height: 42px;
}


.newGameColourChooser {
    display: grid;
    grid-template-columns: repeat(5, 34px);
    gap: 9px;
    min-height: 42px;
    align-items: center;
}

.newGameColourSwatch {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.22);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.18), 0 2px 5px rgba(0,0,0,.28);
    cursor: pointer;
}

.newGameColourSwatch:hover {
    transform: scale(1.07);
}

.newGameColourSwatch.active {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,.18), inset 0 0 0 2px rgba(0,0,0,.18);
}

.newGameDisplaySettings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.newGameDisplaySettings label {
    margin-top: 0;
}

.newGameFirstPlayer {
    grid-template-columns: 1fr minmax(180px, 1.2fr);
    align-items: center;
    margin: 18px 0 4px;
}

@media (max-width: 600px) {
    .newGamePlayers {
        grid-template-columns: 1fr;
    }

    .newGameFirstPlayer,
    .newGameDisplaySettings {
        grid-template-columns: 1fr;
    }
}


#quickControls #soundToggle.soundOn {
    border-color: rgba(100,205,255,0.34);
    background: rgba(8,58,82,0.76);
}


/* First-run tutorial */
.tutorialCard {
    display: flex;
    flex-direction: column;
    width: min(940px, calc(100vw - 30px));
    max-height: min(94vh, 920px);
    overflow: hidden;
}

.tutorialPage {
    display: none;
    min-height: 0;
    flex: 1;
}

.tutorialPage.active {
    display: flex;
    flex-direction: column;
}

.tutorialPage[aria-hidden="true"] {
    display: none;
}

.tutorialPage .instructionsBody {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.tutorialStaticBody {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 4px 18px;
}

.tutorialStaticBody h3,
.tutorialReadyBody h3 {
    margin: 0 0 8px;
    font-size: clamp(25px, 3vw, 38px);
}

.tutorialLead {
    margin: 0 0 18px;
    opacity: 0.82;
}

.controlGuide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.controlGuideItem {
    display: grid;
    grid-template-columns: 78px 1fr;
    align-items: center;
    gap: 14px;
    min-height: 86px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 13px;
    background: rgba(255,255,255,0.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.controlGuideItem > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.controlGuideItem strong {
    font-size: 17px;
}

.controlGuideItem span:not(.controlGuideButton):not(.controlGuidePanel) {
    line-height: 1.35;
    opacity: 0.83;
}

.controlGuideButton,
.tutorialNewGameExample {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    height: 52px;
    padding: 0 15px;
    border: 2px solid rgba(255,255,255,0.78);
    border-radius: 12px;
    background: rgba(8,18,22,0.92);
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    box-shadow:
        0 0 0 4px rgba(111,224,159,0.18),
        0 6px 16px rgba(0,0,0,0.3);
}

.controlGuideButton.textButton {
    min-width: 74px;
    height: 46px;
    padding: 0 10px;
    font-size: 14px;
    white-space: nowrap;
}

.panelGuideItem {
    grid-column: 1 / -1;
    grid-template-columns: minmax(180px, 260px) 1fr;
}

.controlGuidePanel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 0 14px;
    border: 2px solid rgba(255,255,255,0.78);
    border-radius: 12px;
    background: rgba(5,10,12,0.9);
    box-shadow:
        0 0 0 4px rgba(111,224,159,0.18),
        0 6px 16px rgba(0,0,0,0.3);
    font-size: 18px;
    font-weight: 700;
}

.controlGuidePanel b {
    font-size: 32px;
    line-height: 1;
}

.tutorialReadyBody {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    padding: 28px;
    text-align: center;
}

.tutorialReadyBody p {
    max-width: 560px;
    margin: 4px 0 24px;
    font-size: clamp(18px, 2.2vw, 25px);
    line-height: 1.45;
}

.tutorialReadyMark {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: rgba(87,205,132,0.18);
    border: 3px solid rgba(111,224,159,0.88);
    color: #91efb5;
    font-size: 52px;
    font-weight: 800;
}

.tutorialNewGameExample {
    min-width: 150px;
    height: 58px;
    font-size: 19px;
}

.tutorialFooter {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding-top: 14px;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.12);
}

.tutorialDontShow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.tutorialDontShow input {
    width: 19px;
    height: 19px;
}

.tutorialPageIndicator {
    min-width: 72px;
    text-align: center;
    opacity: 0.72;
}

.tutorialNavigation {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}

#tutorialBack,
#tutorialNext,
#tutorialFinish {
    min-width: 92px;
}

#tutorialFinish {
    display: none;
}

@media (max-width: 720px) {
    .controlGuide {
        grid-template-columns: 1fr;
    }

    .panelGuideItem {
        grid-column: auto;
        grid-template-columns: 78px 1fr;
    }

    .controlGuidePanel {
        min-width: 66px;
        padding: 0 8px;
    }

    .controlGuidePanel span {
        display: none;
    }

    .tutorialFooter {
        grid-template-columns: 1fr auto;
    }

    .tutorialPageIndicator {
        display: none;
    }

    .tutorialNavigation {
        grid-column: 2;
        grid-row: 1;
    }
}


/* Live-screen controls spotlight */
.controlTourOverlay {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: none;
    background: rgba(0, 0, 0, 0.63);
    pointer-events: auto;
}

.controlTourOverlay.visible {
    display: block;
}

.controlTourCard {
    position: fixed;
    left: 50%;
    bottom: clamp(18px, 4vh, 46px);
    transform: translateX(-50%);
    width: min(760px, calc(100vw - 34px));
    max-height: min(54vh, 540px);
    overflow-y: auto;
    padding: 22px;
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 16px;
    background: rgba(5, 12, 15, 0.96);
    box-shadow: 0 22px 70px rgba(0,0,0,0.55);
    color: #f4f8f7;
}

.controlTourCard h2 {
    margin: 0 0 6px;
    font-size: 30px;
}

.controlTourCard > p {
    margin: 0 0 16px;
    opacity: 0.82;
}

.controlTourDescriptions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 14px;
}

.controlTourDescriptions > div {
    display: grid;
    grid-template-columns: 88px 1fr;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.055);
}

.tourKey {
    display: inline-flex;
    min-width: 44px;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,0.66);
    border-radius: 9px;
    background: rgba(11,24,28,0.96);
    font-weight: 800;
    white-space: nowrap;
}

.tourKey.wide {
    font-size: 12px;
}

.controlTourFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.12);
}

#controlTourNext {
    min-width: 110px;
}

body.controlTourActive #panel,
body.controlTourActive #compactTurnIndicator,
body.controlTourActive #quickControls {
    z-index: 10005 !important;
}

body.controlTourActive #panelHeader,
body.controlTourActive #compactTurnIndicator,
body.controlTourActive #quickControls {
    position: relative;
    outline: 3px solid #55f38a;
    outline-offset: 5px;
    box-shadow:
        0 0 0 7px rgba(85,243,138,0.18),
        0 0 24px rgba(85,243,138,0.75);
}

body.controlTourActive #quickControls button {
    box-shadow:
        0 0 0 2px rgba(85,243,138,0.55),
        0 0 13px rgba(85,243,138,0.34);
}

body.controlTourActive #gameCanvas {
    filter: brightness(0.72);
}

@media (max-width: 720px) {
    .controlTourDescriptions {
        grid-template-columns: 1fr;
    }

    .controlTourCard {
        max-height: 66vh;
    }
}


/* Corrected live-control guide layout */
.controlTourCard {
    top: 13vh;
    bottom: auto;
    width: min(1180px, calc(100vw - 70px));
    max-height: 72vh;
    padding: clamp(22px, 2.5vw, 34px);
}

.controlTourCard h2 {
    font-size: clamp(30px, 3vw, 44px);
}

.controlTourCard > p {
    font-size: clamp(17px, 1.4vw, 22px);
    margin-bottom: 22px;
}

.controlTourDescriptions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.controlTourDescriptions > div {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 12px;
    min-height: 154px;
    padding: 16px;
}

.controlTourDescriptions > div > span:last-child {
    line-height: 1.38;
}

.controlTourDescriptions strong {
    display: block;
    margin-bottom: 4px;
    font-size: 17px;
    color: #fff;
}

.tourKey {
    justify-self: start;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 10px;
    font-size: 19px;
    line-height: 1;
}

.tourKey.square {
    width: 40px;
    height: 40px;
}

.tourKey.newGameKey {
    width: auto;
    min-width: 84px;
    height: 40px;
    padding: 0 13px;
    border-color: rgba(255,205,100,0.42);
    background: rgba(60,42,8,0.88);
    font-size: 14px;
}

.tourKey.turnPill {
    width: auto;
    min-width: 154px;
    height: 40px;
    padding: 0 13px;
    border-radius: 20px;
    justify-content: flex-start;
    gap: 8px;
    font-size: 14px;
}

.tourKey.turnPill i {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #66d8e8;
    box-shadow: 0 0 10px rgba(102,216,232,0.8);
}

.tourKey.doubleSquare {
    display: inline-flex;
    gap: 7px;
    border: 0;
    background: transparent;
    min-width: 0;
}

.tourKey.doubleSquare b {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.66);
    border-radius: 10px;
    background: rgba(11,24,28,0.96);
}

body.controlTourActive #panel {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.controlTourActive #panelHeader,
body.controlTourActive #compactTurnIndicator,
body.controlTourActive #quickControls {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
}

body.controlTourActive #quickControls button,
body.controlTourActive #quickControls button:disabled {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
}

body.controlTourActive #panelHeader {
    outline: 3px solid #55f38a;
    outline-offset: 4px;
}

body.controlTourActive #compactTurnIndicator {
    outline: 3px solid #55f38a;
    outline-offset: 5px;
}

body.controlTourActive #quickControls {
    outline: none;
    box-shadow: none;
}

body.controlTourActive #quickControls button {
    outline: 3px solid #55f38a;
    outline-offset: 3px;
    box-shadow:
        0 0 0 6px rgba(85,243,138,0.14),
        0 0 18px rgba(85,243,138,0.64) !important;
}

@media (max-width: 1000px) {
    .controlTourDescriptions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .controlTourCard {
        top: 11vh;
        max-height: 78vh;
    }
}

@media (max-width: 620px) {
    .controlTourDescriptions {
        grid-template-columns: 1fr;
    }

    .controlTourCard {
        width: calc(100vw - 24px);
        top: 9vh;
        max-height: 82vh;
    }
}


/* Controls tutorial visibility and no-scroll refinement */
.controlTourOverlay {
    background: transparent;
    pointer-events: none;
}

.controlTourCard {
    top: auto;
    bottom: 18px;
    width: min(1380px, calc(100vw - 36px));
    max-height: none;
    overflow: visible;
    padding: 20px 24px;
    pointer-events: auto;
}

.controlTourCard h2 {
    margin-bottom: 4px;
}

.controlTourCard > p {
    margin-bottom: 14px;
}

.controlTourDescriptions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 12px;
}

.controlTourDescriptions > div {
    min-height: 116px;
    padding: 12px;
}

.controlTourFooter {
    margin-top: 12px;
    padding-top: 12px;
}

body.controlTourActive #gameCanvas {
    filter: none !important;
}

body.controlTourActive #quickControls,
body.controlTourActive #compactTurnIndicator,
body.controlTourActive #panel,
body.controlTourActive #panelHeader {
    pointer-events: none !important;
}

body.controlTourActive #quickControls {
    display: flex !important;
    z-index: 10005 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

body.controlTourActive #quickControls button,
body.controlTourActive #quickControls button:disabled {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

body.controlTourActive #compactTurnIndicator {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 1150px) {
    .controlTourCard {
        width: calc(100vw - 24px);
        bottom: 12px;
    }

    .controlTourDescriptions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .controlTourDescriptions > div {
        min-height: 108px;
        padding: 10px;
    }

    .controlTourDescriptions > div > span:last-child {
        font-size: 14px;
    }
}

@media (max-width: 860px) {
    .controlTourDescriptions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .controlTourCard {
        max-height: calc(100vh - 24px);
        overflow-y: auto;
    }
}


/* Final controls-tour layout and live-toolbar rendering fix */
.controlTourCard {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 18px !important;
    transform: translateX(-50%) !important;
    width: min(1460px, calc(100vw - 32px)) !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 18px 24px !important;
}

.controlTourDescriptions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
}

.controlTourDescriptions > div {
    min-height: 106px !important;
    padding: 11px 12px !important;
}

.controlTourFooter {
    margin-top: 10px !important;
    padding-top: 10px !important;
}

/*
 * Earlier tour CSS accidentally changed the fixed controls to position:relative,
 * which removed them from their real top-bar positions. Keep the live controls
 * fixed and above the overlay.
 */
body.controlTourActive #quickControls {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    display: flex !important;
    z-index: 10020 !important;
}

body.controlTourActive #compactTurnIndicator {
    position: fixed !important;
    left: 102px !important;
    top: 18px !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    z-index: 10020 !important;
}

body.controlTourActive #panel {
    position: fixed !important;
    left: 12px !important;
    top: 12px !important;
    z-index: 10020 !important;
}

body.controlTourActive #panelHeader {
    position: static !important;
}

body.controlTourActive #quickControls,
body.controlTourActive #compactTurnIndicator,
body.controlTourActive #panel,
body.controlTourActive #panelHeader,
body.controlTourActive #quickControls button,
body.controlTourActive #quickControls button:disabled {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
}

body.controlTourActive #quickControls button {
    display: inline-flex !important;
}

@media (max-height: 780px) {
    .controlTourCard {
        bottom: 8px !important;
        padding: 12px 18px !important;
    }

    .controlTourCard h2 {
        font-size: 30px !important;
        margin-bottom: 2px !important;
    }

    .controlTourCard > p {
        margin-bottom: 8px !important;
    }

    .controlTourDescriptions > div {
        min-height: 90px !important;
        padding: 8px 10px !important;
    }

    .controlTourDescriptions > div > span:last-child {
        font-size: 13px !important;
    }

    .controlTourFooter {
        margin-top: 7px !important;
        padding-top: 7px !important;
    }
}

@media (max-width: 900px) {
    .controlTourDescriptions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .controlTourCard {
        max-height: calc(100vh - 110px) !important;
        overflow-y: auto !important;
    }
}


/* Refined controls tutorial placement */
.controlTourCard {
    top: 96px !important;
    bottom: auto !important;
    width: min(1460px, calc(100vw - 34px)) !important;
    max-height: none !important;
    overflow: hidden !important;
}

@keyframes tutorialAttentionPulse {
    0%, 100% {
        box-shadow:
            0 0 0 4px rgba(85,243,138,0.12),
            0 0 13px rgba(85,243,138,0.34);
    }
    50% {
        box-shadow:
            0 0 0 7px rgba(85,243,138,0.22),
            0 0 22px rgba(85,243,138,0.62);
    }
}

@keyframes tutorialReadyPulse {
    0%, 100% {
        outline-color: rgba(85,243,138,0.82);
        box-shadow:
            0 0 0 4px rgba(85,243,138,0.16),
            0 0 18px rgba(85,243,138,0.48);
    }
    50% {
        outline-color: #86ffad;
        box-shadow:
            0 0 0 9px rgba(85,243,138,0.28),
            0 0 34px rgba(85,243,138,0.86);
    }
}

body.controlTourActive #panelHeader,
body.controlTourActive #compactTurnIndicator,
body.controlTourActive #quickControls button {
    animation: tutorialAttentionPulse 1.7s ease-in-out infinite;
}

/* Compact final prompt that leaves the game fully visible */
.readyTourOverlay {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: none;
    pointer-events: none;
    background: transparent;
}

.readyTourOverlay.visible {
    display: block;
}

.readyTourCard {
    position: fixed;
    top: 94px;
    right: 18px;
    width: min(520px, calc(100vw - 36px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 17px 20px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px;
    background: rgba(5,12,15,0.94);
    box-shadow: 0 14px 42px rgba(0,0,0,0.42);
    color: #f4f8f7;
    pointer-events: auto;
}

.readyTourCard h2 {
    margin: 0 0 4px;
    font-size: 24px;
}

.readyTourCard p {
    margin: 0;
    line-height: 1.35;
    opacity: 0.88;
}

body.readyTourActive #gameCanvas {
    filter: none !important;
}

body.readyTourActive #quickControls {
    z-index: 10020 !important;
}

body.readyTourActive #restart {
    opacity: 1 !important;
    visibility: visible !important;
    outline: 3px solid #55f38a !important;
    outline-offset: 4px !important;
    animation: tutorialReadyPulse 1.05s ease-in-out infinite !important;
}

@media (max-height: 760px) {
    .controlTourCard {
        top: 82px !important;
        transform: translateX(-50%) scale(0.94) !important;
        transform-origin: top center;
    }

    .readyTourCard {
        top: 82px;
    }
}


/* How-to-play modal: startup tutorial versus ordinary instructions */
.instructionsCard.startupTutorialMode .instructionsCloseButton {
    display: none;
}

.instructionsCard.manualInstructionsMode .tutorialDontShow,
.instructionsCard.manualInstructionsMode .tutorialPageIndicator,
.instructionsCard.manualInstructionsMode #tutorialBack {
    display: none;
}

.instructionsCard.manualInstructionsMode .tutorialFooter {
    grid-template-columns: 1fr;
}

.instructionsCard.manualInstructionsMode .tutorialNavigation {
    justify-content: flex-end;
}

.instructionsCard.manualInstructionsMode #tutorialNext {
    min-width: 120px;
}

.instructionsCard.startupTutorialMode .tutorialFooter {
    grid-template-columns: 1fr auto;
}


/* Idle attract mode */
.idleStartPrompt {
    position: fixed;
    left: 50%;
    top: 60px;
    z-index: 12;
    transform: translateX(-50%);
    display: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(255,255,255,0.98);
    font-size: clamp(20px, 2vw, 30px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.01em;
    -webkit-text-stroke: 1px rgba(0,0,0,0.96);
    paint-order: stroke fill;
    text-shadow: 0 1px 2px rgba(0,0,0,0.76);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.idleStartPrompt.visible {
    display: block;
}

body.controlTourActive .idleStartPrompt,
body.readyTourActive .idleStartPrompt,
body:has(#instructionsModal.visible) .idleStartPrompt,
body:has(#newGameModal.visible) .idleStartPrompt {
    display: none;
}


/* Keep the idle instruction directly below the top controls. */
.idleStartPrompt {
    left: 50%;
    top: 60px;
    transform: translateX(-50%);
}

@media (max-width: 760px) {
    .idleStartPrompt {
        top: 54px;
    }
}



/* Two-step onboarding and reusable two-page Info window */
.controlTourOverlay {
    background: transparent !important;
    pointer-events: none !important;
}

.controlTourCard {
    left: auto !important;
    right: 18px !important;
    top: 94px !important;
    bottom: auto !important;
    transform: none !important;
    width: min(540px, calc(100vw - 36px)) !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 22px !important;
    padding: 17px 20px !important;
    pointer-events: auto !important;
}

.controlTourCard h2 {
    margin: 0 0 4px !important;
    font-size: 24px !important;
}

.controlTourCard > div > p {
    margin: 0 !important;
    line-height: 1.35;
    opacity: 0.88;
}

body.controlTourActive #panelHeader,
body.controlTourActive #compactTurnIndicator,
body.controlTourActive #quickControls button,
body.controlTourActive #quickControls button:disabled {
    animation: none !important;
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

body.controlTourActive #quickControls {
    pointer-events: auto !important;
    z-index: 10020 !important;
}

body.controlTourActive #quickControls button,
body.controlTourActive #quickControls button:disabled {
    pointer-events: none !important;
}

body.controlTourActive #quickControls #showInstructions,
body.controlTourActive #quickControls #showInstructions:disabled {
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    outline: 3px solid #55f38a !important;
    outline-offset: 4px !important;
    animation: tutorialReadyPulse 1.05s ease-in-out infinite !important;
}

.instructionsCard.manualInstructionsMode .tutorialFooter {
    grid-template-columns: 1fr auto !important;
}

.instructionsCard.manualInstructionsMode .tutorialPageIndicator,
.instructionsCard.manualInstructionsMode #tutorialBack {
    display: inline-flex !important;
}

.instructionsCard.manualInstructionsMode .tutorialPageIndicator {
    align-items: center;
}

.instructionsCard.manualInstructionsMode .tutorialNavigation {
    justify-content: flex-end;
}

.instructionsCard.manualInstructionsMode #tutorialNext {
    min-width: 110px;
}

@media (max-width: 720px) {
    .controlTourCard,
    .readyTourCard {
        top: 82px !important;
        right: 12px !important;
        width: calc(100vw - 24px) !important;
        align-items: flex-start !important;
    }

    .instructionsCard.manualInstructionsMode .tutorialFooter {
        grid-template-columns: 1fr auto !important;
    }
}

/* Info controls page: keep the live game visible and match the real controls. */
#instructionsModal.controlsInfoPage {
    place-items: start center;
    padding-top: 66px;
    background: transparent;
    backdrop-filter: none;
}

#instructionsModal.controlsInfoPage .instructionsCard {
    width: min(1180px, calc(100vw - 32px));
    max-height: calc(100vh - 82px);
    background: rgba(7,15,18,0.96);
}

/* The toolbar's icon buttons are square in the game, so keep them square here. */
#instructionsModal.controlsInfoPage .controlGuideButton {
    box-sizing: border-box;
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 0;
    border-radius: 12px;
}

/* New Game is the one deliberately wide toolbar button. */
#instructionsModal.controlsInfoPage .controlGuideButton.textButton {
    width: 92px;
    min-width: 92px;
    max-width: 92px;
    height: 52px;
    min-height: 52px;
    padding: 0 10px;
    border-color: rgba(255,205,100,0.24);
    background: rgba(60,42,8,0.72);
    font-size: 14px;
}

/* Match the actual Info button treatment. */
#instructionsModal.controlsInfoPage .controlGuideItem:nth-child(4) .controlGuideButton {
    border-color: rgba(168,224,255,0.28);
    background: rgba(8,48,66,0.72);
    font-family: Georgia, serif;
    font-style: italic;
    text-transform: lowercase;
}

/* Match the actual Hint button treatment. */
#instructionsModal.controlsInfoPage .controlGuideItem:nth-child(3) .controlGuideButton {
    border-color: rgba(255,220,90,0.30);
    background: rgba(70,55,10,0.70);
}

@media (max-height: 760px) {
    #instructionsModal.controlsInfoPage {
        padding-top: 58px;
    }

    #instructionsModal.controlsInfoPage .instructionsCard {
        max-height: calc(100vh - 68px);
    }
}

/* Final Info-page corrections: accurate controls, live highlights, no dimming. */
#instructionsModal.controlsInfoPage,
#instructionsModal.gameplayInfoPage {
    background: transparent !important;
    backdrop-filter: none !important;
}

/* Give every example a proper control column and keep its text well clear. */
#instructionsModal.controlsInfoPage .controlGuide {
    gap: 16px;
}

#instructionsModal.controlsInfoPage .controlGuideItem,
#instructionsModal.controlsInfoPage .panelGuideItem {
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 24px;
    min-height: 96px;
    padding: 16px 18px;
}

#instructionsModal.controlsInfoPage .controlGuideItem > div {
    gap: 6px;
    min-width: 0;
}

#instructionsModal.controlsInfoPage .controlGuideItem strong {
    font-size: 18px;
}

#instructionsModal.controlsInfoPage .controlGuideItem span:not(.controlGuideButton):not(.controlGuidePanel) {
    line-height: 1.42;
}

/* Reproduce the real collapsed Panel control: a 56px square with the chevron. */
#instructionsModal.controlsInfoPage .controlGuidePanel {
    box-sizing: border-box;
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 6px;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    background: rgba(5,10,12,0.84);
    backdrop-filter: blur(10px);
    box-shadow:
        0 0 0 4px rgba(85,243,138,0.18),
        0 8px 18px rgba(0,0,0,0.24);
}

#instructionsModal.controlsInfoPage .controlGuidePanel span {
    display: none;
}

#instructionsModal.controlsInfoPage .controlGuidePanel b {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    opacity: 0.9;
}

/* The actual controls remain visible and are identified in their real positions. */
body.controlsInfoVisible #quickControls,
body.controlsInfoVisible #panel {
    z-index: 150 !important;
    pointer-events: none !important;
}

body.controlsInfoVisible #quickControls {
    outline: 3px solid #55f38a !important;
    outline-offset: 6px !important;
    border-radius: 14px;
    box-shadow:
        0 0 0 9px rgba(85,243,138,0.14),
        0 0 24px rgba(85,243,138,0.55) !important;
}

body.controlsInfoVisible #panel.collapsed {
    outline: 3px solid #55f38a !important;
    outline-offset: 5px !important;
    border-radius: 14px;
    box-shadow:
        0 0 0 8px rgba(85,243,138,0.14),
        0 0 22px rgba(85,243,138,0.52) !important;
}

body.controlsInfoVisible #panel:not(.collapsed) #panelHeader {
    outline: 3px solid #55f38a !important;
    outline-offset: 4px !important;
    box-shadow:
        0 0 0 7px rgba(85,243,138,0.14),
        0 0 20px rgba(85,243,138,0.5) !important;
}

@media (max-width: 720px) {
    #instructionsModal.controlsInfoPage .controlGuideItem,
    #instructionsModal.controlsInfoPage .panelGuideItem {
        grid-template-columns: 94px minmax(0, 1fr);
        column-gap: 18px;
        padding: 14px;
    }
}


/* Keep the Panel guide as one ordinary card so the complete controls grid fits. */
#instructionsModal.controlsInfoPage .panelGuideItem {
    grid-column: auto;
}

#instructionsModal.controlsInfoPage .tutorialStaticBody {
    padding-bottom: 8px;
}

/* Keep the fixed panel heading outside the independently scrolling content. */
#panel {
    gap: 6px;
}

#panelHeader {
    position: relative;
    top: auto;
    flex: 0 0 auto;
}

#panelContent {
    position: relative;
    margin-top: 0;
}