/* 
 * PROTOGAMES - Stylesheet
 * --------------------------------------------------------------
 * Centralizes every visual detail for the Protogames prototype.
 * The file flows top-to-bottom from shared variables through
 * layout pieces, component styles, and responsive tweaks.
 */

/* ==============================================================
   CSS CUSTOM PROPERTIES
   --------------------------------------------------------------
   Shared color, spacing, and size tokens so we can keep the UI
   consistent and tweak themes in one place.
   ============================================================== */
:root {
    --color-bg: #f5f6fb;
    --color-panel: #ffffff;
    --color-border: #dfe3eb;
    --color-text: #1f2933;
    --color-muted: #5f6b7c;
    --color-accent: #2f6fed;
    --color-accent-dark: #204bb5;
    --color-danger: #d64545;
    --color-canvas: #f0f2f7;
    --radius-md: 8px;
    --radius-sm: 6px;
    --shadow-soft: 0 4px 12px rgba(31, 41, 55, 0.08);
    --sidebar-width: clamp(240px, 22vw, 300px);
    --header-height: 56px;
}

/* ==============================================================
   CSS RESET / NORMALIZE
   --------------------------------------------------------------
   Neutral base rules so the experience behaves the same across
   browsers on desktop and tablets.
   ============================================================== */
*, 
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    height: 100%;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

body,
h1,
h2,
h3,
p,
figure {
    margin: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}

img,
canvas {
    display: block;
    max-width: 100%;
}

button,
input,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

/* ==============================================================
   TOP-LEVEL LAYOUT
   --------------------------------------------------------------
   Header, sidebar, and canvas workspace structure made with
   Flexbox so panels resize smoothly.
   ============================================================== */
.app-header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    background-color: #101828;
    color: #ffffff;
    box-shadow: var(--shadow-soft);
    flex: 0 0 var(--header-height);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: inherit;
    text-decoration: none;
}

.brand:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

.header-tagline {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
}

.app-shell {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.sidebar {
    width: var(--sidebar-width);
    background-color: #151b26;
    color: #ffffff;
    padding: 0 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    height: 100%;
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.sidebar > .panel {
    flex-shrink: 0;
}

.workspace {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    background: repeating-linear-gradient(
        45deg,
        #fafbff,
        #fafbff 12px,
        #f1f3fa 12px,
        #f1f3fa 24px
    );
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.canvas-wrapper {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#gameCanvas {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    background: transparent;
}

/* Panels */
/* ==============================================================
   SIDEBAR PANELS
   --------------------------------------------------------------
   Card-like containers that hold controls grouped by purpose.
   ============================================================== */
.panel {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    padding: 1rem;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.panel h2 {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
    color: #f4f4f4;
}

.panel-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
}

.field-label {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.field-hint {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

select,
input[type="number"] {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.65rem;
    background: rgba(15, 23, 42, 0.35);
    color: #f5f5f5;
    min-height: 44px;
}

select:focus-visible,
input[type="number"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.dimension-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: end;
}

/* Buttons */
/* ==============================================================
   BUTTON COMPONENTS
   --------------------------------------------------------------
   Shared button styles with variants for primary, secondary,
   icon, and destructive actions.
   ============================================================== */
.primary-button,
.secondary-button {
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.75rem;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    transition: background 0.2s ease, transform 0.1s ease;
}

.primary-button {
    background: var(--color-accent);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.primary-button:hover {
    background: var(--color-accent-dark);
}

.secondary-button {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.secondary-button:hover {
    background: rgba(255, 255, 255, 0.2);
}

button:active {
    transform: translateY(1px);
}

button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
}

.icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stacked-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.file-button {
    text-align: center;
}

.export-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.export-buttons .secondary-button {
    flex: 1 1 90px;
}

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

/* Palette */
/* ==============================================================
   COLOR PALETTE
   --------------------------------------------------------------
   Grid of swatches with labels. Each swatch is large enough for
   comfortable tapping on touch devices.
   ============================================================== */
.palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}


.palette-swatch {
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: #f4f4f4;
    min-height: 108px;
}

.palette-swatch .swatch {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    background: var(--swatch-color, #ccc);
    border: 2px solid rgba(255, 255, 255, 0.35);
}

.palette-swatch .swatch-label {
    font-size: 0.85rem;
    text-align: center;
}

.palette-swatch.selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.2);
}

.palette-swatch:hover {
    background: rgba(255, 255, 255, 0.16);
}


.autosave-toggle {
    margin-top: 1.25rem;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: #f4f4f4;
    font-weight: 600;
}

.checkbox-label input[type='checkbox'] {
    width: 18px;
    height: 18px;
}

/* Actions */
/* Responsive adjustments */
/* ==============================================================
   RESPONSIVE ADJUSTMENTS
   --------------------------------------------------------------
   Media queries that collapse the sidebar into rows for tablet
   widths and adjust hover feedback for pointer devices.
   ============================================================== */
@media (max-width: 1100px) {
    .palette-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}

.modal {
    background: #1f2430;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    max-width: 420px;
    width: 100%;
    color: #f4f4f4;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.modal h3 {
    margin: 0 0 0.5rem 0;
}

.modal p {
    margin: 0 0 1rem 0;
    color: rgba(255, 255, 255, 0.82);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.primary-button {
    background: var(--color-accent);
    color: #fff;
    border: none;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.secondary-button {
    background: rgba(255, 255, 255, 0.08);
    color: #f4f4f4;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

@media (max-width: 960px) {
    body {
        padding-top: calc(var(--header-height) + 10px);
    }

    .app-shell {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .panel {
        flex: 1 1 300px;
    }
}

@media (hover: hover) {
    select:hover,
    input[type="number"]:hover {
        border-color: rgba(255, 255, 255, 0.45);
    }
}

/* ==============================================================
   NOTIFICATION BANNER
   --------------------------------------------------------------
   Lightweight toast message anchored at the bottom center of the
   viewport. Automatically fades away after a short delay.
   ============================================================== */
.notification {
    position: absolute;
    left: 50%;
    /* tool bar bottom offset (2.5rem) + tool bar height (~54px) + gap */
    bottom: calc(2.5rem + 54px + 12px);
    transform: translateX(-50%);
    background: #101828;
    color: #ffffff;
    padding: 0.65rem 1.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 4; /* below the tool bar (5) so open popovers cover it */
    min-width: 220px;
    text-align: center;
}

.notification.show {
    opacity: 0.95;
}

.hidden {
    display: none !important;
}

/* ==============================================================
   THEMES PANEL
   --------------------------------------------------------------
   Import tile themes / item sets; imported entries are listed
   with a remove button.
   ============================================================== */
.panel-intro {
    margin: -0.35rem 0 0.75rem 0;
    text-wrap: pretty;
}

.theme-groups {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.theme-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.theme-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.link-button {
    border: none;
    background: none;
    padding: 0;
    color: #8fb3ff;
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.link-button:hover {
    color: #c3d5ff;
}

.theme-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.theme-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.4rem 0.4rem 0.65rem;
    border-radius: var(--radius-sm);
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
}

.theme-row-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f4f4f4;
}

.theme-row-count {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
}

.theme-row-remove {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: #ffb3b3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.theme-row-remove:hover {
    background: rgba(214, 69, 69, 0.22);
}

.theme-row-remove svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
}

.import-button {
    min-height: 44px;
}

.import-button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==============================================================
   FLOATING TOOL BAR
   --------------------------------------------------------------
   Brush / objects / eraser / history tools anchored over the canvas.
   ============================================================== */
.tool-bar {
    position: absolute;
    right: 1rem;
    top: calc(1rem + 112px);
    width: 48px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: #151b26;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.22), 0 2px 6px rgba(16, 24, 40, 0.12);
    z-index: 5;
}

.tool-bar button:active {
    transform: none;
}

.tool-button,
.eraser-button {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #e6e9f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.tool-button:hover,
.eraser-button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.tool-button.active,
.eraser-button.active {
    background: var(--color-accent);
    color: #ffffff;
}

.tool-button.destructive {
    color: #ff9b9b;
}

.tool-button.destructive:hover {
    background: rgba(214, 69, 69, 0.22);
}

.tool-button svg,
.eraser-button svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.75;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tool-split {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.tool-split-main {
    border-radius: 8px 8px 0 0;
}

.tool-chevron {
    width: 40px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 0 0 8px 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #e6e9f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background 0.15s ease;
}

.tool-chevron:hover,
.tool-chevron.open {
    background: rgba(255, 255, 255, 0.14);
}

.color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-size: 48px;
    background-position: center;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85), 0 0 0 2.5px rgba(0, 0, 0, 0.25);
}

.chevron-icon {
    width: 11px;
    height: 11px;
    stroke: currentColor;
    stroke-width: 2.4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(-90deg);
    transition: transform 0.15s ease;
}

.chevron-icon.flipped {
    transform: rotate(90deg);
}

.tool-sep {
    width: 24px;
    height: 1px;
    background: rgba(255, 255, 255, 0.14);
    margin: 2px 0;
}

/* Object tool: split button */
.object-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40px;
    border-radius: 8px;
    background: transparent;
    transition: background 0.15s ease;
}

.object-group.active {
    background: var(--color-accent);
}

.object-main,
.object-chevron {
    padding: 0;
    border: none;
    background: transparent;
    color: #e6e9f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.object-main {
    width: 40px;
    height: 40px;
    border-radius: 8px 8px 0 0;
}

.object-chevron {
    width: 40px;
    height: 16px;
    border-radius: 0 0 8px 8px;
}

.object-main:hover {
    background: rgba(255, 255, 255, 0.08);
}

.object-chevron:hover {
    background: rgba(255, 255, 255, 0.1);
}

.object-chevron .chevron-icon {
    width: 12px;
    height: 12px;
    stroke-width: 2.2;
}

.object-main-thumb {
    width: 30px;
    height: 30px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Popovers */
.tool-popover {
    position: absolute;
    right: calc(100% + 10px);
    top: 0;
    width: 300px;
    max-width: calc(100vw - 6rem);
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: #151b26;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.28);
    color: #f4f4f4;
}

.tool-popover.open {
    display: flex;
}

.pop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px;
}

.pop-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #f4f4f4;
}

.tool-popover select {
    flex: 0 1 160px;
    min-width: 0;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    min-height: 32px;
}

.tool-popover select option {
    background: #151b26;
    color: #f5f5f5;
}

.pg-pop .palette-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin-top: 0;
}

.pg-pop .palette-swatch {
    min-height: 0;
    padding: 4px 4px 6px;
    gap: 4px;
    border-radius: 8px;
    background: transparent;
}

.pg-pop .palette-swatch:hover {
    background: rgba(255, 255, 255, 0.08);
}

.pg-pop .palette-swatch .swatch {
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.pg-pop .palette-swatch .swatch-label {
    font-size: 0.7rem;
    line-height: 1.15;
    color: rgba(255, 255, 255, 0.8);
}

.pg-pop .palette-swatch.selected {
    border-color: var(--color-accent);
    box-shadow: none;
    background: rgba(47, 111, 237, 0.14);
}

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

.object-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 2px 5px;
    border-radius: 8px;
    border: 2px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    min-width: 0;
}

.object-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.object-item.selected {
    border-color: var(--color-accent);
    background: rgba(47, 111, 237, 0.14);
}

.object-thumb {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.object-img {
    width: 92%;
    height: 92%;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.object-label {
    font-size: 0.66rem;
    line-height: 1.1;
}

/* Tooltips */
.pg-tip {
    position: relative;
}

.pg-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #101828;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.pg-tip:hover::after {
    opacity: 1;
}

@media (max-width: 960px) {
    .workspace {
        min-height: 70vh;
    }
}

.modal-input {
    width: 100%;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.65rem;
    background: rgba(15, 23, 42, 0.35);
    color: #f5f5f5;
    min-height: 44px;
}

.modal-input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ==============================================================
   THEME CREATE / EXPORT CONTROLS + THEME EDITOR DIALOG
   ============================================================== */
.theme-actions {
    display: flex;
    gap: 0.5rem;
}

.theme-actions .import-button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.5rem 0.6rem;
}

.theme-export {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.theme-export select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.4rem 0.5rem;
    min-height: 40px;
    font-size: 0.85rem;
}

.theme-export select option {
    background: #151b26;
    color: #f5f5f5;
}

.export-theme-button {
    flex: 0 0 auto;
    padding: 0.4rem 0.75rem;
    min-height: 40px;
    font-size: 0.85rem;
    gap: 0.4rem;
}

.export-theme-button svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-row-edit {
    color: #c9d4ea;
}

.theme-row-edit:hover {
    background: rgba(255, 255, 255, 0.12);
}

.modal.theme-editor {
    max-width: 520px;
    max-height: min(720px, 90vh);
    display: flex;
    flex-direction: column;
    padding: 0;
}

.theme-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem 0.75rem;
}

.theme-editor-head h3 {
    margin: 0;
    font-size: 1.1rem;
}

.icon-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: #c9d4ea;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.icon-close svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
}

.theme-editor-name {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0 1.25rem;
    font-size: 0.9rem;
}

.theme-editor-name .modal-input {
    margin-bottom: 0;
    min-height: 40px;
    font-size: 0.9rem;
}

.theme-editor-rows-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem 1.25rem 0.5rem;
    font-size: 0.9rem;
}

.theme-editor-hint {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
}

.theme-editor-rows {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    padding: 0 1.25rem 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.editor-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 6px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.editor-color {
    flex: 0 0 auto;
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    cursor: pointer;
    overflow: hidden;
}

.editor-color:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

#gameCanvas:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.editor-color input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
}

.editor-image {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-sm);
    border: 1px dashed rgba(255, 255, 255, 0.3);
    background-color: rgba(15, 23, 42, 0.35);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: rgba(255, 255, 255, 0.65);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.editor-image.contain {
    background-size: contain;
}

.editor-image:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

.editor-image svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.editor-label {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    min-height: 40px;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.65rem;
    background: rgba(15, 23, 42, 0.35);
    color: #f5f5f5;
}

.editor-label:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.editor-row .link-button {
    flex: 0 0 auto;
    padding: 0 2px;
    font-size: 0.75rem;
}

.editor-remove {
    width: 32px;
    height: 32px;
}

.add-row-button {
    margin: 6px 1.25rem 0;
    min-height: 44px;
    border-style: dashed;
    flex-shrink: 0;
}

.add-row-button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
}

.theme-editor-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 1rem;
}

.theme-editor-error {
    font-size: 0.78rem;
    color: #ffb3b3;
    min-height: 1em;
}

.theme-editor-foot .primary-button,
.theme-editor-foot .secondary-button {
    min-height: 44px;
}

/* ==============================================================
   SHOWCASE PANEL
   --------------------------------------------------------------
   One-click example boards that ship with the app.
   ============================================================== */
.showcase-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.showcase-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    color: #f4f4f4;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: background 0.2s ease;
}

.showcase-item:hover {
    background: rgba(255, 255, 255, 0.2);
}

.showcase-name {
    font-weight: 600;
}

.showcase-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ==============================================================
   FOCUS MODE
   --------------------------------------------------------------
   Full-screen button in the workspace corner. In focus mode the
   header and sidebar are hidden so the board gets the whole window.
   ============================================================== */
.focus-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 5;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #151b26;
    color: #e6e9f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.22), 0 2px 6px rgba(16, 24, 40, 0.12);
}

.focus-button:hover {
    background: #222a38;
}

.focus-button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.9;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.focus-button .icon-exit,
.focus-mode .focus-button .icon-enter {
    display: none;
}

.focus-mode .focus-button .icon-exit {
    display: block;
}

/* The buttons sit in the right-hand column, so their tooltips open to the left. */
.focus-button.pg-tip::after,
.play-button.pg-tip::after {
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(100% + 10px);
    transform: translateY(-50%);
}

/* Playtest: a lock on editing, with a way back. */
.play-button {
    position: absolute;
    top: calc(1rem + 56px);
    right: 1rem;
    z-index: 5;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #151b26;
    color: #e6e9f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.22), 0 2px 6px rgba(16, 24, 40, 0.12);
}

.play-button:hover {
    filter: brightness(1.25);
}

.play-button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.play-button .icon-play {
    fill: currentColor;
    stroke-width: 1.5;
}

.play-button .icon-edit {
    fill: none;
}

.play-button .icon-edit,
.playtest .play-button .icon-play {
    display: none;
}

.playtest .play-button .icon-edit {
    display: block;
}

.playtest .play-button {
    background: #1f9d55;
}

.playtest .tool-bar {
    display: none;
}

.playtest .sidebar {
    display: none;
}

.playtest-pill {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 14px;
    background: #151b26;
    color: #f4f4f4;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.22), 0 2px 6px rgba(16, 24, 40, 0.12);
    font-size: 0.85rem;
    white-space: nowrap;
    transition: opacity 0.5s ease;
}

.playtest-pill.faded {
    opacity: 0;
    pointer-events: none;
}

.playtest-pill .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3ccf7a;
    flex: 0 0 auto;
}

.playtest-pill strong {
    font-weight: 600;
}

.playtest-pill .muted {
    color: rgba(255, 255, 255, 0.6);
}

.playtest-pill button {
    border: none;
    border-radius: 999px;
    padding: 0 12px;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
    color: #f4f4f4;
    font-size: 0.8rem;
    font-weight: 600;
}

.playtest-pill button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.focus-mode .app-header,
.focus-mode .sidebar {
    display: none;
}

/* ==============================================================
   ZOOM CONTROLS + MINIMAP
   --------------------------------------------------------------
   Bottom-right cluster over the canvas. The minimap shows the
   whole board with the visible area outlined.
   ============================================================== */
.zoom-controls {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: #151b26;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.22), 0 2px 6px rgba(16, 24, 40, 0.12);
}

.zoom-button,
.zoom-label {
    height: 32px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #e6e9f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.zoom-button {
    width: 32px;
}

.zoom-label {
    min-width: 54px;
    padding: 0 6px;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.zoom-button:hover,
.zoom-label:hover {
    background: rgba(255, 255, 255, 0.1);
}

.zoom-button[aria-pressed="true"] {
    background: rgba(47, 111, 237, 0.35);
}

.zoom-button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Tooltips in the corner open leftwards so they stay on screen. */
.zoom-controls .pg-tip::after {
    left: auto;
    right: 0;
    transform: none;
}

.minimap {
    position: absolute;
    right: 1rem;
    bottom: calc(1rem + 44px);
    z-index: 5;
    padding: 4px;
    background: rgba(21, 27, 38, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.22), 0 2px 6px rgba(16, 24, 40, 0.12);
}

.minimap canvas {
    display: block;
    width: 168px;
    height: 126px;
    border-radius: 6px;
    background: #e8ecf4;
    cursor: crosshair;
    touch-action: none;
}

#gameCanvas.pan-ready {
    cursor: grab !important;
}

#gameCanvas.panning {
    cursor: grabbing !important;
}

@media (max-width: 960px) {
    .minimap canvas {
        width: 120px;
        height: 90px;
    }
}

/* Drawing tool: one button whose icon follows the mode, plus a Brush / Fill / Line switch in its popover */
.tool-split-main .mode-icon,
.mode-switch svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.75;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tool-split-main[data-mode="brush"] .mode-fill,
.tool-split-main[data-mode="brush"] .mode-line,
.tool-split-main[data-mode="fill"] .mode-brush,
.tool-split-main[data-mode="fill"] .mode-line,
.tool-split-main[data-mode="line"] .mode-brush,
.tool-split-main[data-mode="line"] .mode-fill {
    display: none;
}

.mode-switch {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
}

.mode-switch button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #e6e9f0;
    font-size: 0.8rem;
    font-weight: 600;
}

.mode-switch button svg {
    width: 16px;
    height: 16px;
}

.mode-switch button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mode-switch button[aria-pressed="true"] {
    background: var(--color-accent);
    color: #ffffff;
}

/* Eraser: split button with its own size popover */
.eraser-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 40px;
    border-radius: 8px;
}

.eraser-group .eraser-button {
    border-radius: 8px 8px 0 0;
}

.eraser-group .tool-chevron {
    height: 16px;
}

#eraserPopover {
    width: 220px;
}

.pop-note {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.6);
}

.pop-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0 -10px;
}

/* Tooltips of the vertical tool bar open to the left, over the canvas */
.tool-bar .pg-tip::after {
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(100% + 10px);
    transform: translateY(-50%);
}

/* Brush size stepper inside the brush popover */
.size-stepper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.size-stepper button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #e6e9f0;
    font-size: 1rem;
    line-height: 1;
}

.size-stepper button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.18);
}

.size-stepper button:disabled {
    opacity: 0.35;
    cursor: default;
}

.size-stepper output {
    min-width: 28px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ==============================================================
   KEYBOARD SHORTCUT HELP OVERLAY
   ============================================================== */
.modal.shortcut-help {
    max-width: 680px;
    max-height: min(640px, 88vh);
    overflow-y: auto;
}

.shortcut-help-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.shortcut-help-head h3 {
    margin: 0;
}

.shortcut-help-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.5rem 1.5rem;
}

.shortcut-help-groups h4 {
    margin: 0.5rem 0 0.35rem;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.shortcut-help-groups dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.3rem 0.75rem;
    margin: 0;
    font-size: 0.88rem;
}

.shortcut-help-groups dt {
    color: rgba(255, 255, 255, 0.88);
}

.shortcut-help-groups dt.unavailable {
    color: rgba(255, 255, 255, 0.4);
}

.shortcut-help-groups dd {
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

kbd {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0.05rem 0.4rem;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom-width: 2px;
    background: rgba(255, 255, 255, 0.08);
    font: inherit;
    font-size: 0.8rem;
    text-align: center;
    color: #f4f4f4;
}

.shortcut-help-note {
    margin: 1rem 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.pop-row[hidden] {
    display: none;
}

.playtest-pill[hidden] {
    display: none;
}

/* Share dialog */
.modal.share-dialog {
    max-width: 480px;
}

.share-text {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.75);
}

.share-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.share-row .modal-input {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
    font-size: 0.85rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.share-row .primary-button {
    flex: 0 0 auto;
    min-width: 92px;
    min-height: 44px;
}

.share-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.6rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
}

.share-meta span:last-child {
    text-align: right;
}

.share-button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-right: 0.5rem;
}

.share-warning {
    margin-top: 0.75rem;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1.4;
    background: rgba(240, 180, 41, 0.14);
    border: 1px solid rgba(240, 180, 41, 0.4);
    color: #f6d58a;
}

.share-warning[data-level="veryLong"] {
    background: rgba(214, 69, 69, 0.16);
    border-color: rgba(214, 69, 69, 0.5);
    color: #ffb3b3;
}

.share-warning[hidden],
.share-download[hidden] {
    display: none;
}

.share-download {
    margin-top: 0.6rem;
    width: 100%;
    min-height: 44px;
}

/* Colours-only toggle: the icon follows the state (half-filled disc = colours only) */
#viewModeToggle .icon-flat,
#viewModeToggle[aria-pressed="true"] .icon-textured {
    display: none;
}

#viewModeToggle[aria-pressed="true"] .icon-flat {
    display: block;
}

/* Theme editor: "Start from" an existing theme */
.theme-editor-base {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.theme-editor-base[hidden] {
    display: none;
}

.theme-editor-base .theme-editor-name {
    margin-bottom: 0;
}

.theme-editor-base select {
    width: 100%;
    min-height: 40px;
}

/* Print dialog */
.print-button {
    width: 100%;
    margin-top: 0.5rem;
}

.print-button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-right: 0.5rem;
}

.modal.print-dialog {
    max-width: 980px;
    max-height: min(760px, 92vh);
    display: flex;
    flex-direction: column;
    padding: 0;
}

.print-dialog .theme-editor-head {
    padding: 1.1rem 1.25rem 0.75rem;
}

.print-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: 1.25rem;
    padding: 0 1.25rem;
}

.print-controls {
    flex: 0 1 320px;
    min-width: 240px;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 6px;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.print-section {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.print-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
}

.print-section[hidden],
.print-field[hidden],
.mode-switch[hidden],
#printLegendSummary[hidden],
#printTokenSummary[hidden] {
    display: none;
}

.print-field input[type="number"],
.print-field select {
    width: 100%;
    min-height: 40px;
}

.print-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.print-inline span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.print-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 32px;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}

.print-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
}

.print-hint {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}

.print-preview {
    flex: 1 1 380px;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

#printCanvas {
    display: block;
    width: 100%;
    height: 380px;
    border-radius: 8px;
    background: #0f141d;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.print-summary {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

.print-total {
    color: rgba(255, 255, 255, 0.6);
}

.print-warning {
    margin-bottom: 0.4rem;
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1.4;
    background: rgba(240, 180, 60, 0.14);
    border: 1px solid rgba(240, 180, 60, 0.4);
    color: #ffd88a;
}

.print-dialog .theme-editor-foot {
    padding: 1rem 1.25rem 1.1rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.print-status {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    min-height: 1em;
}

.print-status.error {
    color: #ffb3b3;
}

@media (max-width: 760px) {
    .print-body {
        flex-direction: column;
        overflow-y: auto;
    }

    .print-controls,
    .print-preview {
        flex: 0 0 auto;
        overflow: visible;
    }

    #printCanvas {
        height: 260px;
    }
}

/* Country board: the settings that replace the width and height fields */
#countryFields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#countryFields.hidden {
    display: none;
}

/* The country name is a text box with a list of suggestions; it looks like the number boxes around it. */
#countryInput {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.65rem;
    background: rgba(15, 23, 42, 0.35);
    color: #f5f5f5;
    min-height: 44px;
}

#countryInput:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

#countryStatus:empty {
    display: none;
}

#countryStatus.error {
    color: #ffb3b3;
}

/* Country regions: the switch for the borders between countries (shown only for multi-country areas) */
.country-borders {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 32px;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}

.country-borders.hidden {
    display: none;
}

.country-borders input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
}

/* ==============================================================
   Players, start markers, playtest trays and dice
   ============================================================== */

/* Players panel (sidebar) */
.players-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.players-list:empty {
    display: none;
}

.player-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.player-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.player-head select {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.3rem 0.45rem;
    min-height: 36px;
    font-size: 0.85rem;
}

.player-head select option {
    background: #151b26;
    color: #f5f5f5;
}

.player-dot {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
}

.player-remove {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    background: transparent;
    color: #f4f4f4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.player-remove:hover {
    background: rgba(214, 69, 69, 0.35);
}

.player-remove svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.player-pieces {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

.piece-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
}

.piece-field input {
    min-height: 34px;
    padding: 0.25rem 0.5rem;
}

.players-hints {
    margin-bottom: 0.6rem;
    color: #ffd28a;
}

.players-hints[hidden] {
    display: none;
}

.add-player-button {
    width: 100%;
    margin-bottom: 0.5rem;
}

.add-player-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

/* Start tool in the tool bar */
.start-thumb {
    display: block;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    border-radius: 6px;
    border: 4px solid var(--start-color, #c62828);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
}

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

.start-color {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent;
    color: #f4f4f4;
    font-size: 0.75rem;
    text-align: left;
    min-height: 34px;
}

.start-color:hover {
    background: rgba(255, 255, 255, 0.1);
}

.start-color.selected {
    border-color: #ffffff;
    background: rgba(47, 111, 237, 0.4);
}

.start-color-dot {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 2px solid rgba(255, 255, 255, 0.9);
}

/* Playtest layout: the board gives up room on every edge where a player sits */
.workspace {
    --tray-band: 10.5rem;
    --tray-band-collapsed: 3.1rem;
}

.playtest .canvas-wrapper {
    position: absolute;
    height: auto;
    top: var(--tray-top, 0px);
    right: var(--tray-right, 0px);
    bottom: var(--tray-bottom, 0px);
    left: var(--tray-left, 0px);
}

.playtest .focus-button,
.playtest .play-button {
    right: calc(1rem + var(--tray-right, 0px));
}

.playtest .focus-button {
    top: calc(1rem + var(--tray-top, 0px));
}

.playtest .play-button {
    top: calc(1rem + 56px + var(--tray-top, 0px));
}

.playtest .zoom-controls {
    right: calc(1rem + var(--tray-right, 0px));
    bottom: calc(1rem + var(--tray-bottom, 0px));
}

.playtest .minimap {
    right: calc(1rem + var(--tray-right, 0px));
    bottom: calc(1rem + 44px + var(--tray-bottom, 0px));
}

.playtest .notification {
    bottom: calc(1rem + var(--tray-bottom, 0px));
}

.playtest .playtest-pill {
    left: calc(1rem + var(--tray-left, 0px));
    top: calc(1rem + var(--tray-top, 0px));
    transform: none;
}

/* Trays: one per player, centred on the player's edge and turned to face outwards (the screen flat on a table) */
.tray-layer {
    position: absolute;
    inset: 0;
    z-index: 4;
    container-type: size;
    pointer-events: none;
}

.tray-layer[hidden] {
    display: none;
}

.tray-seat {
    --band: var(--tray-band);
    position: absolute;
    display: flex;
    gap: 0.5rem;
    pointer-events: none;
    height: calc(var(--band) - 1rem);
}

.tray-seat.collapsed {
    --band: var(--tray-band-collapsed);
}

.tray-seat > * {
    pointer-events: auto;
}

.seat-bottom,
.seat-top {
    left: 50%;
    width: min(calc(100cqw - 2rem - var(--tray-left, 0px) - var(--tray-right, 0px)), 48rem);
    max-width: calc(100cqw - 1rem);
}

.seat-bottom {
    bottom: 0.5rem;
    transform: translateX(-50%);
}

.seat-top {
    top: 0.5rem;
    transform: translateX(-50%) rotate(180deg);
}

.seat-left,
.seat-right {
    --length: min(calc(100cqh - 2rem - var(--tray-top, 0px) - var(--tray-bottom, 0px)), 48rem);
    width: var(--length);
    transform-origin: 0 0;
}

.seat-left {
    left: calc(var(--band) - 0.5rem);
    top: calc(50% - var(--length) / 2);
    transform: rotate(90deg);
}

.seat-right {
    left: calc(100% - var(--band) + 0.5rem);
    top: calc(50% + var(--length) / 2);
    transform: rotate(-90deg);
}

.tray {
    flex: 1 1 0;
    min-width: 0;
    max-width: 26rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.4rem 0.6rem 0.5rem;
    background: #151b26;
    color: #f4f4f4;
    border: 2px solid var(--player, #888);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.28), 0 2px 6px rgba(16, 24, 40, 0.14);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.tray.drop-target {
    outline: 3px dashed #ffffff;
    outline-offset: 2px;
}

.tray-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 26px;
}

.tray-dot {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--player, #888);
    border: 2px solid rgba(255, 255, 255, 0.85);
}

.tray-name {
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.tray-toggle {
    flex: 0 0 auto;
    width: 32px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #f4f4f4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tray-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
}

.tray-toggle svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tray-seat.collapsed .tray-toggle svg {
    transform: rotate(180deg);
}

.tray-seat.collapsed .tray-body {
    display: none;
}

.tray-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 0;
}

.tray-pieces {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-height: 52px;
}

.tray-empty {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}

.tray-piece {
    position: relative;
    flex: 0 0 auto;
    width: 50px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    cursor: grab;
    touch-action: none;
}

.tray-piece:hover {
    background: rgba(255, 255, 255, 0.16);
}

.tray-piece-img {
    width: 42px;
    height: 42px;
    display: block;
    margin: 0 auto;
    pointer-events: none;
}

.tray-count {
    position: absolute;
    right: -4px;
    bottom: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 9px;
    background: #ffffff;
    color: #111111;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.tray-dice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.die {
    min-width: 36px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
}

.die:hover {
    background: rgba(255, 255, 255, 0.22);
}

.roll-result {
    margin-left: auto;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 3.2rem;
    justify-content: flex-end;
}

.roll-result:empty {
    display: none;
}

.roll-die {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
}

.roll-value {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
}

.roll-result.rolled .roll-value {
    animation: dice-tumble 0.5s ease-out;
}

@keyframes dice-tumble {
    0% { transform: rotate(-200deg) scale(0.4); opacity: 0.2; }
    60% { transform: rotate(20deg) scale(1.25); opacity: 1; }
    100% { transform: rotate(0) scale(1); }
}

.tray-note {
    margin: 0;
    font-size: 0.75rem;
    color: #ffd28a;
}

.tray-note[hidden] {
    display: none;
}

.drag-ghost {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    pointer-events: none;
    filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.35));
}

@media (prefers-reduced-motion: reduce) {
    .roll-result.rolled .roll-value {
        animation: none;
    }
}

@media (pointer: coarse) {
    .die {
        min-width: 42px;
        height: 40px;
    }

    .tray-toggle {
        width: 40px;
        height: 32px;
    }
}

@media (max-width: 760px) {
    .workspace {
        --tray-band: 9.6rem;
    }

    .tray {
        padding: 0.3rem 0.45rem 0.4rem;
    }

    .roll-value {
        font-size: 1.4rem;
    }
}

/* ==============================================================
   BOARD SHAPE PICKER
   ============================================================== */
.board-picker {
    position: relative;
}

.bp-trigger {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 56px;
    padding: 0.4rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    background: rgba(15, 23, 42, 0.35);
    color: #f5f5f5;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.bp-trigger:focus-visible,
.bp-list:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.bp-trigger-picture {
    flex: none;
    width: 64px;
    height: 44px;
}

.bp-trigger-picture svg {
    width: 100%;
    height: 100%;
}

.bp-trigger-name {
    flex: 1;
    font-weight: 600;
}

.bp-caret {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
}

.bp-trigger[aria-expanded="true"] .bp-caret {
    transform: rotate(180deg);
}

.bp-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    background: #1c2535;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.bp-list[hidden] {
    display: none;
}

/* The panels below paint over anything that spills out of the one above (they have their own stacking context), so the
   panel whose list is open is lifted above its neighbours while it is open. */
.panel:has(.bp-list:not([hidden])) {
    position: relative;
    z-index: 50;
}

.bp-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.35rem;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.bp-option.active {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.07);
}

.bp-option[aria-selected="true"] {
    border-color: var(--color-accent);
    background: rgba(47, 111, 237, 0.18);
}

.bp-option[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
}

.bp-option svg {
    width: 100%;
    height: 62px;
}

.bp-option-name {
    font-size: 0.8rem;
    font-weight: 600;
}

.bp-picture polygon {
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 1;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.bp-n { fill: #3b4a66; }
.bp-l0 { fill: #8e5fd0; }
.bp-l1 { fill: #5fa055; }
.bp-l2 { fill: #e0b340; }
.bp-l3 { fill: #d96a6a; }
.bp-l4 { fill: #5c9ee0; }
.bp-l5 { fill: #8a97ad; }

.bp-country {
    fill: #3b4a66;
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 1.2;
    stroke-linejoin: round;
}

.bp-country-border {
    fill: none;
    stroke: rgba(255, 255, 255, 0.35);
    stroke-width: 1;
    stroke-dasharray: 3 2;
}