/* Action-Mix 6.3 — a lit game board on a midnight stage. */
:root {
    --ink: #24243e;
    --purple: #6541c7;
    --purple2: #9369ee;
    --muted: #66677e;
    --radius: 26px;
    --shadow: 0 22px 50px #05051c55, 0 3px 0 #bcb8d0, inset 0 1px 0 #fff;
}
body {
    background:
        radial-gradient(ellipse at 15% 0%, #52388b 0, transparent 48%),
        radial-gradient(ellipse at 100% 70%, #164f62 0, transparent 45%), #14172e;
    background-attachment: fixed;
    color: var(--ink);
}
.action-topbar {
    background: #15172de8;
    border-bottom: 1px solid #ffffff20;
    box-shadow: 0 8px 30px #08091625;
}
.action-topbar a,
.action-topbar .text-button,
.action-logo {
    color: #f5f0ff;
}
.action-logo {
    letter-spacing: -0.04em;
}
.action-logo span {
    filter: drop-shadow(0 3px 5px #0005);
}
.connection-bar {
    color: #c3dfd6;
}
.connection-bar > span.offline {
    color: #ffd18f;
}
.panel {
    background: linear-gradient(145deg, #fff, #f6f5fc);
    border: 1px solid #ffffffa0;
    box-shadow: var(--shadow);
}
.setup-panel {
    overflow: hidden;
}
.setup-intro {
    position: relative;
    background:
        radial-gradient(ellipse at 85% 0%, #9163de80, transparent 65%),
        linear-gradient(120deg, #292340, #423269);
    margin: -22px -22px 18px;
    padding: 18px 22px 12px;
    border-bottom: 1px solid #ffffff30;
    text-align: center;
}
.setup-intro::after {
    content: "";
    position: absolute;
    right: -36px;
    top: -75px;
    width: 200px;
    height: 200px;
    border: 1px solid #ffffff18;
    border-radius: 50%;
    box-shadow:
        0 0 0 30px #ffffff04,
        0 0 0 60px #ffffff03;
    pointer-events: none;
}
.setup-intro h1 {
    color: #fff;
    letter-spacing: -0.05em;
    text-shadow: 0 3px 0 #0002;
    position: relative;
    z-index: 1;
}
.setup-intro .section-kicker {
    color: #d7c4ff;
    letter-spacing: 0.12em;
    font-size: 11px;
}
.setup-intro .lead {
    color: #e0d7ef;
    font-size: 14px;
    margin: 8px auto 4px;
    max-width: 540px;
}
.setup-intro .hero-icon {
    filter: drop-shadow(0 6px 4px #0005);
}
.team-section-heading h2 {
    color: #33314f;
    letter-spacing: -0.025em;
}
.setup-panel .team-row {
    background: linear-gradient(130deg, #fff, #f5f4fa);
    border: 1px solid #dedbea;
    border-top: 3px solid var(--team-color);
    border-radius: 17px;
    box-shadow:
        0 4px 0 #dedbe9,
        0 9px 14px #2a20490c;
}
.setup-panel .team-number {
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 #ffffff60,
        0 3px 0 #0002;
    transform: rotate(-4deg);
}
.setup-panel .team-row > input {
    background: transparent;
    color: #28243e;
}
.option-toggle-card {
    background: linear-gradient(#fff, #eeeef6);
    border: 1px solid #d8d7e4;
    box-shadow: 0 3px 0 #d6d5e2;
    border-radius: 16px;
}
.option-toggle-card:has(input:checked) {
    background: linear-gradient(#f5efff, #e9dffc);
    border-color: #b59bdc;
    box-shadow:
        0 3px 0 #c1a8e2,
        inset 0 1px 0 #fff;
}
.switch-track {
    box-shadow: inset 0 2px 4px #23183d30;
}
.switch input:checked + .switch-track {
    background: #7450c4;
}
.output-mode-card {
    background: linear-gradient(#fff, #f0eef8);
    border: 1px solid #d7d2e4;
    border-radius: 15px;
    box-shadow: 0 4px 0 #d6d0e3;
    transition:
        transform 0.15s,
        box-shadow 0.15s;
}
.output-mode-card:has(input:checked) {
    background: linear-gradient(120deg, #544091, #7956bb);
    border-color: #674aab;
    color: #fff;
    box-shadow:
        0 4px 0 #3d2a70,
        0 6px 14px #5e3b9225;
}
.output-mode-card:has(input:checked) strong {
    color: #fff;
}
.output-mode-icon {
    filter: drop-shadow(0 3px 2px #21143730);
}
.button {
    border-radius: 13px;
    border: 1px solid #dad3e8;
    box-shadow:
        0 4px 0 #d0c9df,
        0 7px 12px #2719460c;
    transition:
        transform 0.15s,
        box-shadow 0.15s,
        background-color 0.15s;
}
.button.primary,
.start-button {
    background: linear-gradient(#8a60e0, #6840bc);
    border-color: #8055d1;
    color: #fff;
    box-shadow:
        0 5px 0 #45257f,
        0 10px 20px #7347bd35,
        inset 0 1px 0 #ffffff60;
}
.button.secondary {
    background: linear-gradient(#faf7ff, #eae3f6);
    color: #513582;
}
.button.success-button {
    background: linear-gradient(#249b87, #137864);
    border-color: #258d7a;
    color: #fff;
    box-shadow:
        0 4px 0 #0a5145,
        inset 0 1px 0 #ffffff50;
}
.button.fail-button {
    background: linear-gradient(#fff0f2, #f4d9e1);
    color: #9f2447;
    border-color: #e7bdc9;
    box-shadow: 0 4px 0 #d6acba;
}
.button:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #46326335;
}
.score-team {
    background: linear-gradient(130deg, #fefeff, #eae8f3);
    border: 1px solid #fff9;
    border-top: 3px solid var(--team-color);
    border-radius: 17px;
    box-shadow:
        0 4px 0 #0003,
        0 10px 18px #0002;
}
.score-team.current {
    background: linear-gradient(130deg, #fff, #eee4ff);
    border-color: #caafff;
    border-top-color: var(--team-color);
    box-shadow:
        0 4px 0 #7f5dbb,
        0 0 22px #b08bff30;
}
.score-team-points strong,
.timer-number {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.05em;
}
.score-track {
    background: #d9d5e7;
    box-shadow: inset 0 1px 2px #37285725;
}
.score-track i {
    border-radius: inherit;
}
.turn-panel h1,
.modal-card h2 {
    letter-spacing: -0.04em;
}
.turn-meta {
    color: #67617b;
}
.current-team-label {
    color: #796b95;
}
.difficulty {
    --tile: #246f77;
    background: linear-gradient(135deg, #fff, #eaf5f5);
    border: 1px solid #b8d5d8;
    border-radius: 20px;
    box-shadow:
        0 6px 0 #b6cdd3,
        0 12px 22px #24364612;
    color: #233b47;
}
.difficulty-2 {
    --tile: #7650b6;
    background: linear-gradient(135deg, #fff, #eee5ff);
    border-color: #d2bcec;
    box-shadow:
        0 6px 0 #c5b1dc,
        0 12px 22px #48215d12;
}
.difficulty-3 {
    --tile: #aa4d40;
    background: linear-gradient(135deg, #fff, #ffeadf);
    border-color: #e8c5b4;
    box-shadow:
        0 6px 0 #dbb4a4,
        0 12px 22px #5d292112;
}
.difficulty .difficulty-points {
    background: var(--tile);
    color: #fff;
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 #fff5,
        0 4px 0 #0002;
    transform: rotate(-5deg);
}
.mode-card {
    background: linear-gradient(130deg, #fff, #eeebf7);
    border: 1px solid #ddd5eb;
    border-radius: 20px;
    box-shadow: 0 4px 0 #d9d2e7;
}
.timer-ring {
    border-radius: 50%;
    background: radial-gradient(circle, #fff 48%, #e5e2f0 70%, #fff 72%);
    box-shadow:
        0 10px 24px #33205022,
        inset 0 2px 0 #fff;
}
.timer-track {
    stroke: #ddd7e9;
}
.timer-progress {
    filter: drop-shadow(0 2px 2px #24223d25);
}
.control-note,
.endgame-note,
.early-success-note {
    background: linear-gradient(#fff8e2, #fff0c6);
    border: 1px solid #e7cd8c;
    border-radius: 12px;
    color: #735519;
    box-shadow: 0 3px 0 #ddc99955;
}
.ai-help-panel {
    background: linear-gradient(120deg, #f5efff, #e5daf7);
    border: 1px solid #d1bdeb;
    box-shadow: 0 4px 0 #27154044;
    border-radius: 18px;
}
.playback-settings {
    color: #e2d8f4;
}
.playback-settings summary {
    color: #d4c5eb;
}
.playback-settings > div {
    color: #29243b;
}
.modal {
    background: #0b0c22c9;
    backdrop-filter: blur(6px);
}
.modal-card {
    background: linear-gradient(145deg, #fff, #f5f1fc);
    border: 1px solid #fff;
    border-radius: 26px;
    box-shadow:
        0 30px 90px #0007,
        0 5px 0 #c9bfdc;
}
.rules-close {
    border-radius: 50%;
    background: #e8e1f3;
    color: #503b73;
    box-shadow:
        inset 0 1px 0 #fff,
        0 2px 0 #c7bbd9;
}
.winner-modal .winner-card {
    background: radial-gradient(ellipse at top, #ddccff, #fff 70%);
}
.drawing-workspace {
    background: #242237;
}
.drawing-topbar,
.drawing-toolbar {
    background: linear-gradient(#fff, #eeebf7);
    border-color: #d6cce7;
}
.drawing-topbar {
    box-shadow: 0 4px 12px #0003;
}
.drawing-timer-pill {
    background: #e2d5f7;
    color: #543581;
    box-shadow: inset 0 2px 4px #39245120;
}
.drawing-toolbar button:not(.drawing-color),
#drawing-close-button {
    border-radius: 10px;
}
@media (min-width: 650px) {
    .setup-intro {
        margin: -20px -26px 16px;
        padding: 15px 26px 10px;
    }
    .setup-intro h1 {
        margin: 8px 0;
    }
    .setup-intro .hero-icon {
        display: none;
    }
}
@media (min-width: 900px) and (max-height: 850px) {
    .setup-intro {
        margin-top: -16px;
        padding-top: 12px;
        padding-bottom: 8px;
    }
    .setup-intro .lead {
        display: none;
    }
    .setup-intro h1 {
        margin: 6px 0;
    }
}
@media (hover: hover) and (pointer: fine) {
    .button:hover:not(:disabled),
    .difficulty:hover {
        transform: translateY(-2px);
    }
    .output-mode-card:hover {
        transform: translateY(-1px);
    }
}
@media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="off"]) .modal:not(.hidden) .modal-card {
        animation: mix-arrive 0.2s ease-out both;
    }
    html:not([data-motion="off"]) .score-track i {
        transition: width 0.3s ease-out;
    }
}
@keyframes mix-arrive {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* 6.4.1 — warm porcelain, lavender and muted teal. */
:root {
    color-scheme: light;
    --ink: #34354b;
    --purple: #67568f;
    --purple2: #8b74b8;
    --muted: #686b7c;
    --surface: #fffefc;
    --shadow: 0 14px 35px #44405d12, 0 3px 0 #dfdce6, inset 0 1px 0 #fff;
}
body {
    color: var(--ink);
    background:
        radial-gradient(ellipse at 5% 0%, #e6dff1 0, transparent 52%),
        radial-gradient(ellipse at 100% 65%, #dfede9 0, transparent 48%), #f4f2ef;
    background-attachment: scroll;
}
.action-topbar {
    background: #faf9f6ed;
    border-bottom: 1px solid #e3dfe8;
    box-shadow: 0 4px 20px #45405208;
}
.action-topbar a,
.action-topbar .text-button,
.action-logo {
    color: #655483;
}
.action-logo span {
    filter: drop-shadow(0 2px 2px #57476a15);
}
.connection-bar {
    color: #527469;
}
.connection-bar > span.offline {
    color: #93612a;
}
.panel,
.modal-card {
    background: linear-gradient(135deg, #fffefc, #faf8fc);
    border-color: #fff;
    box-shadow: var(--shadow);
    color: var(--ink);
}
.setup-intro {
    background:
        radial-gradient(ellipse at 90% 0%, #dcd2ed80, transparent 65%),
        linear-gradient(120deg, #eee8f5, #e6eeec);
    border-bottom: 1px solid #d9d4e3;
}
.setup-intro h1 {
    color: #534666;
    text-shadow: 0 1px 0 #fff;
}
.setup-intro .section-kicker {
    color: #6b627e;
}
.setup-intro .lead {
    color: #656779;
}
.setup-intro::after {
    border-color: #fff9;
    box-shadow:
        0 0 0 30px #ffffff20,
        0 0 0 60px #ffffff12;
}
.setup-intro .hero-icon {
    filter: drop-shadow(0 4px 3px #66527f20);
}
.team-section-heading h2,
.turn-panel h1,
.modal-card h2 {
    color: #514763;
}
.setup-panel .team-row {
    background: linear-gradient(130deg, #fff, #f6f3fa);
    border-color: #e4dfeb;
    border-top-color: var(--team-color);
    box-shadow:
        0 3px 0 #e2dce9,
        0 8px 16px #4e425b08;
}
.setup-panel .team-row > input {
    color: #34354b;
}
.setup-panel .team-number {
    transform: none;
    box-shadow:
        inset 0 1px 0 #ffffff60,
        0 2px 0 #0001;
}
.option-toggle-card {
    background: linear-gradient(#fffefc, #f2f0f6);
    border-color: #e0dce6;
    box-shadow: 0 3px 0 #dfdbe5;
}
.option-toggle-card:has(input:checked) {
    background: linear-gradient(#f1ecf7, #e9e1f2);
    border-color: #baa7d2;
    box-shadow: 0 3px 0 #c9badb;
}
.switch input:checked + .switch-track {
    background: #8972ae;
}
.output-mode-card {
    background: linear-gradient(#fff, #f3f1f7);
    border-color: #ded8e7;
    box-shadow: 0 3px 0 #ded8e7;
}
.output-mode-card:has(input:checked) {
    background: linear-gradient(120deg, #e5def0, #eee8f5);
    border-color: #a590bf;
    color: #55446f;
    box-shadow:
        0 3px 0 #c0afd4,
        inset 0 1px 0 #fff;
}
.output-mode-card:has(input:checked) strong {
    color: #55446f;
}
.button {
    color: #554c68;
    border-color: #dbd4e4;
    box-shadow:
        0 3px 0 #d5cede,
        0 6px 12px #4b3f5f08;
}
.button.primary,
.start-button {
    background: linear-gradient(#8973ad, #705b98);
    border-color: #8066a6;
    color: #fff;
    box-shadow:
        0 4px 0 #574475,
        0 8px 16px #78618d20,
        inset 0 1px 0 #ffffff60;
}
.button.secondary {
    background: linear-gradient(#f5f1fa, #eae4f1);
    color: #64517e;
}
.button.success-button {
    background: linear-gradient(#4b9386, #367c70);
    border-color: #498d81;
    box-shadow: 0 4px 0 #286054;
    color: #fff;
}
.button.fail-button {
    background: linear-gradient(#faedf0, #efdae0);
    color: #974e64;
    border-color: #dfbcc7;
    box-shadow: 0 3px 0 #d8b7c1;
}
.button.extend-button {
    background: linear-gradient(#fff8e9, #f7ecd3);
    color: #876529;
    border-color: #dfcda3;
    box-shadow: 0 3px 0 #e0ceaa;
}
.button.drawing-open-button,
.button.label-reprint-button {
    background: #f2f6f7;
    color: #4b6c79;
    border-color: #beced4;
    box-shadow: 0 3px 0 #d3dfe3;
}
.score-team {
    background: linear-gradient(130deg, #fffefc, #f2f0f7);
    border-color: #e4e0eb;
    border-top-color: var(--team-color);
    box-shadow:
        0 3px 0 #dcd7e4,
        0 8px 18px #5140610a;
}
.score-team.current {
    background: linear-gradient(130deg, #eee7f5, #fdfbff);
    border-color: #b7a4ce;
    border-top-color: var(--team-color);
    box-shadow:
        0 3px 0 #c9b7da,
        0 8px 20px #77618f12;
}
.score-team-points strong {
    color: #4b405f;
}
.score-track {
    background: #e4deec;
}
.difficulty {
    background: linear-gradient(135deg, #fff, #e8f1ee);
    border-color: #c3d7d1;
    box-shadow: 0 4px 0 #bed1ca;
    --tile: #4b8175;
}
.difficulty-2 {
    background: linear-gradient(135deg, #fff, #ece5f4);
    border-color: #d1c2df;
    box-shadow: 0 4px 0 #c8b8d7;
    --tile: #8870a6;
}
.difficulty-3 {
    background: linear-gradient(135deg, #fff, #f7e8e2);
    border-color: #e4c9be;
    box-shadow: 0 4px 0 #d9bdb0;
    --tile: #a76d5a;
}
.difficulty .difficulty-points {
    transform: none;
}
.difficulty strong {
    color: #484356;
}
.timer-ring {
    background: radial-gradient(circle, #fffefc 48%, #e9e4ee 70%, #fff 72%);
    box-shadow:
        0 8px 22px #63557420,
        inset 0 2px 0 #fff;
}
.timer-number {
    color: #4c435e;
}
.timer-track {
    stroke: #e4deeb;
}
.timer-progress {
    filter: none;
}
.control-note,
.endgame-note,
.early-success-note {
    background: linear-gradient(#fff9e9, #faf0d8);
    color: #80632f;
    border-color: #e4d3ac;
    box-shadow: 0 2px 0 #e7d9b955;
}
.ai-help-panel {
    background: linear-gradient(120deg, #f1eaf7, #eaeff1);
    border-color: #d9cce5;
    box-shadow: 0 3px 0 #ded4e8;
}
.ai-help-button,
.ai-help-confirm {
    background: #e7dcf1;
    color: #614980;
    border: 1px solid #d5c5e2;
    box-shadow: 0 2px 0 #d1c1df;
}
.ai-help-text {
    background: #fffefc;
    color: #494359;
}
.modal {
    background: #39334465;
    backdrop-filter: blur(5px);
}
.modal-card,
.generator-card.team-generator,
.winner-modal .winner-card {
    background: linear-gradient(140deg, #fffefc, #f3eef8);
    border: 1px solid #fff;
    box-shadow:
        0 25px 70px #3b304d30,
        0 4px 0 #d7cce3;
}
.rules-close {
    background: #e9e2f0;
    color: #6b5781;
    box-shadow: 0 2px 0 #d7cbe2;
}
.rules-list li {
    background: #f0edf5;
}
.rules-list li > span {
    background: #8973ad;
    color: #fff;
}
.rules-list strong {
    color: #51465f;
}
.rules-list p {
    color: #656276;
}
.winner-modal #winner-name {
    font-size: clamp(26px, 5vw, 44px);
    line-height: 1.15;
    color: #59496e;
    margin: 12px 0;
    overflow-wrap: anywhere;
}
.winner-modal #winner-score {
    font-size: 18px;
    color: #527d73;
}
.winner-modal .trophy {
    font-size: 54px;
}
.winner-modal .winner-burst {
    background: linear-gradient(120deg, #e5d9f0, #dceee6);
    color: #68547f;
    text-shadow: none;
}
.recap-success {
    background: #e1efe6;
    color: #3b7156;
}
.recap-failed {
    background: #f4e2e8;
    color: #914c62;
}
.drawing-gallery figure {
    background: #fffefc;
    border-color: #ded6e8;
}
.playback-settings,
.playback-settings summary {
    color: #71677e;
}
.playback-settings > div {
    background: #fffefc;
    color: #544b62;
    border-color: #dfd6e8;
}
.drawing-workspace {
    background: #eeeaf1;
}
.drawing-canvas-wrap {
    background: radial-gradient(ellipse at center, #f6f3f7, #e3e0e9);
}
.drawing-topbar,
.drawing-toolbar {
    background: linear-gradient(#fffefc, #f2edf6);
    border-color: #d8cfe2;
    color: #5a4f69;
}
.drawing-topbar > div:first-child strong {
    color: #59496d;
}
.drawing-topbar span {
    color: #777083;
}
.drawing-toolbar button:not(.drawing-color),
#drawing-close-button {
    background: #f6f1fa;
    color: #635079;
    border: 1px solid #d7c8e1;
    box-shadow: 0 2px 0 #d6cbe0;
}
.drawing-toolbar button.active {
    background: #dcd0e9;
}
.drawing-timer-pill {
    background: #e4eee9;
    color: #48796b;
    border-color: #c6dad2;
    box-shadow: inset 0 1px 3px #567b6b12;
}
.drawing-timer-pill.warning {
    background: #f8edcf;
    color: #896528;
}
.drawing-timer-pill.danger {
    background: #f4dce3;
    color: #9b4b65;
}
.drawing-size {
    color: #5a4f69;
}
.drawing-prestart-overlay > div {
    background: #faf7fd;
    color: #5a4b6c;
}
.drawing-canvas-wrap canvas {
    box-shadow:
        0 0 0 1px #d9d2df,
        0 10px 25px #5e526c22;
}
@media (hover: hover) and (pointer: fine) {
    .difficulty:hover {
        background: #f0ebf6;
        border-color: #ab96c3;
    }
}