/* Goblin Does Puzzles — shared design system (page shell, panels, toolbar, drawer look). */
/* Generic across puzzle projects; nothing here knows about nonograms specifically. */
/* Light/dark is set on <html data-bs-theme="..."> by a project's settings module. */

:root, html[data-bs-theme="dark"] {
    --gdp-bg: #16181d;
    --gdp-fg: #f1f1f1;
    --gdp-muted: #a9adb5;
    --gdp-panel: #20232a;
    --gdp-panel-border: #343841;
    --gdp-accent: #4f8cff;
    --gdp-grid: #3a3f4a;
    --gdp-radius: 0.6rem;
}
html[data-bs-theme="light"] {
    --gdp-bg: #f3f4f6;
    --gdp-fg: #1b1d22;
    --gdp-muted: #5b606a;
    --gdp-panel: #ffffff;
    --gdp-panel-border: #dde1e6;
    --gdp-accent: #2f6fed;
    --gdp-grid: #cdd3db;
}

body {
    background-color: var(--gdp-bg);
    color: var(--gdp-fg);
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Page shell: comfortable max width, centered, consistent breathing room */
.gdp-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}

.gdp-header {
    text-align: center;
    margin-bottom: 1.25rem;
}
@media (max-width: 576px) {
    .gdp-header .gdp-back-forge {
        position: static !important;
        display: inline-block;
        margin-bottom: 0.5rem;
    }
}
.gdp-header h1 {
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 0.1rem;
}
.gdp-header .gdp-subtitle {
    color: var(--gdp-muted);
    font-size: 0.95rem;
}

.gdp-panel {
    background: var(--gdp-panel);
    border: 1px solid var(--gdp-panel-border);
    border-radius: var(--gdp-radius);
}
.gdp-muted { color: var(--gdp-muted); }

/* Toolbar: groups of related buttons that wrap cleanly on narrow screens */
.gdp-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem 0.6rem;
    margin-bottom: 1rem;
}
.gdp-toolbar .btn-group {
    flex: 0 0 auto;
}

/* ==========================================================================
   STYLE B: SOFT PILL FLOATING BAR (CHOSEN DEFAULT TOOLBAR)
   ========================================================================== */
.gdp-toolbar-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 1.25rem;
}

.gdp-toolbar.b-floating-bar {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    padding: 0.32rem 0.45rem;
    background: var(--gdp-panel);
    border: 1px solid var(--gdp-panel-border);
    border-radius: 9999px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
    margin: 0 auto;
    max-width: 100%;
    box-sizing: border-box;
}
html[data-bs-theme="light"] .gdp-toolbar.b-floating-bar {
    background: #ffffff;
    border-color: #dde1e6;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}
html[data-bs-theme="dark"] .gdp-toolbar.b-floating-bar {
    background: #1e222b;
    border-color: #343841;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.b-pill-btn {
    border: 1px solid var(--gdp-panel-border);
    background: rgba(125, 125, 125, 0.1);
    color: var(--gdp-fg);
    padding: 0.32rem 0.52rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 9999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: all 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
    text-decoration: none;
    white-space: nowrap;
}
html[data-bs-theme="light"] .b-pill-btn {
    background: #f8fafc;
    color: #1e293b;
    border-color: #cbd5e1;
}
html[data-bs-theme="light"] .b-pill-btn:hover:not(:disabled) {
    background: #ffffff;
    border-color: var(--gdp-accent, #0284c7);
    color: var(--gdp-accent, #0284c7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
html[data-bs-theme="light"] .b-pill-btn:disabled,
html[data-bs-theme="light"] .b-pill-btn[disabled] {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
    opacity: 0.7 !important;
}

html[data-bs-theme="dark"] .b-pill-btn {
    background: #252932;
    color: #e2e8f0;
    border-color: #383e4c;
}
html[data-bs-theme="dark"] .b-pill-btn:hover:not(:disabled) {
    background: #2f3442;
    border-color: var(--gdp-accent, #38bdf8);
    color: var(--gdp-accent, #38bdf8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
html[data-bs-theme="dark"] .b-pill-btn:disabled,
html[data-bs-theme="dark"] .b-pill-btn[disabled] {
    background: #1c1f26 !important;
    color: #64748b !important;
    border-color: #2b303c !important;
    opacity: 0.6 !important;
}

.b-pill-btn:active:not(:disabled) {
    transform: translateY(0);
}
.b-pill-btn:disabled,
.b-pill-btn[disabled] {
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

.b-pill-btn.primary,
.gdp-toolbar .gdp-popout-btn {
    background: var(--gdp-accent) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 9999px !important;
    padding: 0.32rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.b-pill-btn.primary:hover:not(:disabled),
.gdp-toolbar .gdp-popout-btn:hover:not(:disabled) {
    background: var(--gdp-accent) !important;
    filter: brightness(1.12);
    color: #ffffff !important;
    border-color: transparent !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.b-pill-btn.danger {
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.08);
}
html[data-bs-theme="light"] .b-pill-btn.danger {
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}
.b-pill-btn.danger:hover:not(:disabled) {
    background: #ef4444;
    color: #ffffff;
    border-color: transparent;
}
.b-pill-btn.confirming {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: transparent !important;
    animation: gdp-pulse 1s infinite alternate;
}
@keyframes gdp-pulse {
    from { transform: scale(1); }
    to { transform: scale(1.04); }
}

.b-divider {
    width: 1px;
    height: 1.35rem;
    background: var(--gdp-panel-border);
    margin: 0 0.2rem;
    flex-shrink: 0;
}
html[data-bs-theme="light"] .b-divider {
    background: #e2e8f0;
}
html[data-bs-theme="dark"] .b-divider {
    background: #343841;
}

/* Icon & Label sizing and alignment */
.b-pill-btn .btn-icon,
.gdp-toolbar .gdp-popout-btn .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.95em;
}
.b-pill-btn .btn-label,
.gdp-toolbar .gdp-popout-btn .btn-label {
    display: inline;
    line-height: 1;
}

/* Responsive behavior: on narrow mobile screens (<= 480px), collapse to icon-only mode */
@media (max-width: 480px) {
    .gdp-toolbar.b-floating-bar {
        border-radius: 1.25rem;
        padding: 0.35rem 0.5rem;
        gap: 0.25rem;
    }
    .b-pill-btn,
    .gdp-toolbar .gdp-popout-btn {
        padding: 0.42rem 0.6rem;
        font-size: 0.85rem;
        gap: 0;
    }
    .b-pill-btn .btn-label,
    .gdp-toolbar .gdp-popout-btn .btn-label {
        display: none !important;
    }
    .b-pill-btn.confirming .btn-label {
        display: inline !important;
    }
    .b-divider {
        display: none;
    }
}

/* Wraps the board. The board box inside is the only scroller (see gdp-board.css); this must
   stay non-scrolling so both scroll bars appear together at the board's own edges. */
.gdp-board-wrap {
    display: block;
    padding: 0.15rem;
    margin-bottom: 0.25rem;
}

/* "Create your own puzzle" button hugging bottom of board */
.gdp-create-wrap {
    text-align: center;
    margin-top: 0.25rem;
    margin-bottom: 0.35rem;
}
.gdp-create-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.32rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 9999px;
    border: 1px solid #2563eb;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    text-decoration: none;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}
.gdp-create-pill:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    border-color: #60a5fa;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5);
    text-decoration: none;
}
.gdp-create-pill:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}
.gdp-create-pill .pill-icon {
    font-size: 0.9em;
    line-height: 1;
}
.gdp-create-pill .pill-arrow {
    font-size: 0.85em;
    opacity: 0.7;
    transition: transform 0.15s ease;
}
.gdp-create-pill:hover .pill-arrow {
    transform: translateX(2px) translateY(-1px);
    opacity: 1;
}

/* Creator page styles (redesign) */
.gdp-creator-page {
    max-width: 490px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}
.gdp-creator-card {
    border-radius: 1.25rem;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.gdp-creator-title {
    font-size: 1.85rem;
    font-weight: 800;
    text-align: center;
    margin: 0.5rem 0 1.25rem;
    letter-spacing: -0.02em;
    color: var(--gdp-fg);
}
.gdp-back-pill {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1020;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    background: #222936;
    border: 1px solid #475569;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.15s ease;
}
.gdp-back-pill:hover {
    background: #2c3647;
    border-color: #64748b;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
.gdp-back-pill:active {
    transform: translateY(0);
}
html[data-bs-theme="light"] .gdp-back-pill {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
html[data-bs-theme="light"] .gdp-back-pill:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}
.gdp-dim-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.9rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--gdp-panel-border);
    border-radius: 0.75rem;
}
html[data-bs-theme="light"] .gdp-dim-row {
    background: #f8fafc;
    border-color: #e2e8f0;
}
html[data-bs-theme="dark"] .gdp-dim-row {
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(255, 255, 255, 0.08);
}
.gdp-dim-input {
    width: 4.25rem !important;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.5rem;
}
.gdp-desc-box {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--gdp-panel-border);
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
html[data-bs-theme="light"] .gdp-desc-box {
    background: #f8fafc;
    border-color: #e2e8f0;
}
html[data-bs-theme="dark"] .gdp-desc-box {
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(255, 255, 255, 0.08);
}

.gdp-info-circle, .gdp-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid #475569;
    background: #1e293b;
    color: #93c5fd;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
}
.gdp-info-circle:hover, .gdp-info-circle.active,
.gdp-info-btn:hover, .gdp-info-btn.active {
    background: var(--gdp-accent);
    color: #ffffff;
    border-color: var(--gdp-accent);
    transform: scale(1.08);
}
.gdp-rules-popover {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 0.5rem);
    z-index: 40;
    background: #181f2a;
    color: #e2e8f0;
    border: 1px solid var(--gdp-accent);
    border-radius: 0.85rem;
    padding: 1rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.gdp-rules-popover ul {
    color: #cbd5e1;
}
.gdp-rules-popover b {
    color: #ffffff;
}
.gdp-rules-popover.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.gdp-gen-btn {
    width: 100%;
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.gdp-section-title {
    font-weight: 700;
    margin-top: 1.25rem;
    margin-bottom: 0.4rem;
}
.gdp-section-title:first-child { margin-top: 0; }

.gdp-hint-btn {
    background: none;
    border: none;
    color: var(--gdp-muted);
    padding: 0.1rem 0.3rem;
    line-height: 1;
}
.gdp-hint-btn:hover { color: var(--gdp-fg); }

/* Small circular (i) info button, for a Bootstrap tooltip explaining a control. */
/* "How to play" — a collapsed panel; its centred title is the toggle (shared/gdp-ui.js). */
.gdp-howto > .gdp-section-title {
    text-align: center; cursor: pointer; margin-bottom: 0;
    display: flex; align-items: center; justify-content: center; gap: 0.45rem;
}
.gdp-howto > .gdp-section-title::after { content: '\25BE'; font-size: 0.9em; color: var(--gdp-muted); }
.gdp-howto.is-open > .gdp-section-title { margin-bottom: 0.6rem; }
.gdp-howto.is-open > .gdp-section-title::after { content: '\25B4'; }
.gdp-howto > .gdp-section-title:hover { color: var(--gdp-accent); }
.gdp-howto > .gdp-section-title:focus-visible { outline: 2px solid var(--gdp-accent); outline-offset: 2px; border-radius: 4px; }

.gdp-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid #475569;
    background: #1e293b;
    color: #93c5fd;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
}
.gdp-info-btn:hover, .gdp-info-btn:focus {
    background: var(--gdp-accent);
    color: #ffffff;
    border-color: var(--gdp-accent);
    transform: scale(1.08);
}

/* Celebration Popout Modal on Solved (Item 5) */
.gdp-celebration-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: gdpFadeIn 0.2s ease;
}
@keyframes gdpFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.gdp-celebration-modal {
    width: 380px;
    max-width: 100%;
    background: var(--gdp-panel, #131b2a);
    border: 1.5px solid var(--gdp-accent, #2563eb);
    border-radius: 1.25rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    padding: 1.35rem;
    position: relative;
    animation: gdpPopIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}
@keyframes gdpPopIn {
    from { transform: scale(0.92) translateY(12px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}
.gdp-celebration-close {
    position: absolute;
    top: 0.65rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--gdp-muted, #94a3b8);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 0.35rem;
    transition: all 0.15s ease;
}
.gdp-celebration-close:hover {
    color: var(--gdp-fg, #ffffff);
    background: rgba(255, 255, 255, 0.08);
}
.gdp-celebration-header {
    font-size: 1.15rem;
    font-weight: 800;
    color: #34d399;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.gdp-celebration-sub {
    font-size: 0.82rem;
    color: var(--gdp-muted, #94a3b8);
    margin-bottom: 0.85rem;
}
.gdp-celebration-msg-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gdp-bg, #0b0f17);
    border: 1px solid var(--gdp-panel-border, #334155);
    border-radius: 0.65rem;
    padding: 0.5rem 0.65rem;
    box-sizing: border-box;
}
.gdp-celebration-msg-text {
    flex: 1;
    font-family: monospace;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gdp-accent, #60a5fa);
    word-break: break-all;
}
.gdp-celebration-copy-btn {
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

/* A wider page shell for layouts that need real side-by-side columns (e.g. the creator). */
.gdp-page-wide { max-width: 1100px; }

/* Two columns on wide screens (e.g. source image next to its preview); stacks on narrow ones. */
.gdp-cols-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 760px) {
    .gdp-cols-2 { grid-template-columns: 1fr; }
}

/* A non-modal slide-out panel (see shared/gdp-ui.js): no dark backdrop, so pair this with
   data-bs-backdrop="false" on the offcanvas element itself. */
.gdp-panel-flush {
    background: var(--gdp-panel);
    border-left: 1px solid var(--gdp-panel-border);
}

@media (max-width: 420px) {
    .gdp-page { padding: 1rem 0.6rem 2.5rem; }
    .gdp-header h1 { font-size: 1.6rem; }
}

/* Settings dock: the right-edge tab and the slide-out panel are ONE element, so the tab stays
   attached to the drawer as it opens and closes. Closed, only the tab shows at the screen edge. */
.gdp-settings-dock {
  --gdp-tab-w: 2.6rem;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1050;
  width: min(23rem, 80vw);
  max-width: 80vw;
  height: 100dvh;
  transform: translateX(calc(100% - var(--gdp-tab-w)));
  transition: transform 220ms ease;
}
.gdp-settings-dock.is-open { transform: translateX(0); }
.gdp-settings-tab {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--gdp-tab-w);
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  padding: 0.9rem 0.4rem;
  background: var(--gdp-panel);
  color: var(--gdp-fg);
  border: 1px solid var(--gdp-panel-border);
  border-right: none;
  border-radius: var(--gdp-radius) 0 0 var(--gdp-radius);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.gdp-settings-tab:hover, .gdp-settings-tab:focus-visible {
  background: var(--gdp-accent);
  color: #fff;
  border-color: var(--gdp-accent);
  outline: none;
}
.gdp-settings-panel {
  position: absolute;
  inset: 0 0 0 var(--gdp-tab-w);
  overflow-y: auto;
  background: var(--gdp-panel);
  border-left: 1px solid var(--gdp-panel-border);
}
.gdp-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--gdp-panel-border);
}
.gdp-settings-body { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
/* Global Solid Form Controls & Dropdowns (Decoupled from Wallpaper) */
.form-select,
.form-control {
  background-color: var(--gdp-panel) !important;
  color: var(--gdp-fg) !important;
  border: 1px solid var(--gdp-panel-border) !important;
}

html[data-bs-theme="light"] .form-select,
html[data-bs-theme="light"] .form-control {
  background-color: #ffffff !important;
  color: #1e293b !important;
  border-color: #cbd5e1 !important;
}
html[data-bs-theme="light"] .form-select:focus,
html[data-bs-theme="light"] .form-control:focus {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: var(--gdp-accent, #0284c7) !important;
  box-shadow: 0 0 0 0.2rem rgba(2, 132, 199, 0.15) !important;
}
html[data-bs-theme="light"] .form-select:disabled,
html[data-bs-theme="light"] .form-control:disabled {
  background-color: #f1f5f9 !important;
  color: #94a3b8 !important;
  border-color: #e2e8f0 !important;
  opacity: 0.8 !important;
  cursor: not-allowed !important;
}

html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .form-control {
  background-color: #20242d !important;
  color: #f1f5f9 !important;
  border-color: #3e4452 !important;
}
html[data-bs-theme="dark"] .form-select:focus,
html[data-bs-theme="dark"] .form-control:focus {
  background-color: #252a35 !important;
  color: #ffffff !important;
  border-color: var(--gdp-accent, #38bdf8) !important;
  box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.2) !important;
}
html[data-bs-theme="dark"] .form-select:disabled,
html[data-bs-theme="dark"] .form-control:disabled {
  background-color: #1a1d24 !important;
  color: #94a3b8 !important;
  border-color: #343946 !important;
  opacity: 0.8 !important;
  cursor: not-allowed !important;
}

/* Solid Bootstrap Outline Buttons across all themes */
html[data-bs-theme="light"] .btn-outline-secondary {
  background-color: #ffffff !important;
  color: #1e293b !important;
  border-color: #cbd5e1 !important;
}
html[data-bs-theme="light"] .btn-outline-secondary:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}
html[data-bs-theme="dark"] .btn-outline-secondary {
  background-color: #20242d !important;
  color: #e2e8f0 !important;
  border-color: #3e4452 !important;
}
html[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background-color: #2c3340 !important;
  color: #ffffff !important;
  border-color: #4b5563 !important;
}
@media (prefers-reduced-motion: reduce) { .gdp-settings-dock { transition: none; } }
@media (max-width: 420px) { .gdp-settings-dock { --gdp-tab-w: 2.2rem; } }


/* Left-side Help dock: mirrors settings dock on the right edge (5B-5) */
.gdp-help-dock {
  --gdp-tab-w: 2.6rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: min(23rem, 80vw);
  max-width: 80vw;
  height: 100dvh;
  transform: translateX(calc(-100% + var(--gdp-tab-w)));
  transition: transform 220ms ease;
}
.gdp-help-dock.is-open { transform: translateX(0); }
.gdp-help-tab {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--gdp-tab-w);
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  padding: 0.9rem 0.4rem;
  background: var(--gdp-panel);
  color: var(--gdp-fg);
  border: 1px solid var(--gdp-panel-border);
  border-left: none;
  border-radius: 0 var(--gdp-radius) var(--gdp-radius) 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.gdp-help-tab:hover, .gdp-help-tab:focus-visible {
  background: var(--gdp-accent);
  color: #fff;
  border-color: var(--gdp-accent);
  outline: none;
}
.gdp-help-panel {
  position: absolute;
  inset: 0 var(--gdp-tab-w) 0 0;
  overflow-y: auto;
  background: var(--gdp-panel);
  border-right: 1px solid var(--gdp-panel-border);
  padding: 1.25rem;
}
@media (prefers-reduced-motion: reduce) { .gdp-help-dock { transition: none; } }
@media (max-width: 420px) { .gdp-help-dock { --gdp-tab-w: 2.2rem; } }

/* Top-right corner theme button (Phase 7: Variant 1 Comfortable Soft Pill) */
.gdp-theme-btn,
.gdp-theme-btn-top,
.gdp-corner-theme-btn {
  position: fixed !important;
  top: 14px !important;
  right: 18px !important;
  z-index: 1020 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  padding: 0.6rem 1.35rem !important;
  min-height: 46px !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

@media (min-width: 1400px) {
  .gdp-theme-btn,
  .gdp-theme-btn-top,
  .gdp-corner-theme-btn {
    top: 16px !important;
    right: 22px !important;
    min-height: 50px !important;
    font-size: 1.18rem !important;
    padding: 0.7rem 1.6rem !important;
  }
}

html[data-bs-theme="dark"] .gdp-theme-btn,
html[data-bs-theme="dark"] .gdp-theme-btn-top,
html[data-bs-theme="dark"] .gdp-corner-theme-btn {
  background: #22262e !important;
  color: #f1f1f1 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

html[data-bs-theme="light"] .gdp-theme-btn,
html[data-bs-theme="light"] .gdp-theme-btn-top,
html[data-bs-theme="light"] .gdp-corner-theme-btn {
  background: #ffffff !important;
  color: #1b1d22 !important;
  border: 1px solid #d0d7de !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
}

.gdp-theme-btn:hover,
.gdp-theme-btn-top:hover,
.gdp-corner-theme-btn:hover {
  border-color: var(--gdp-accent) !important;
  color: var(--gdp-accent) !important;
  transform: translateY(-1px) !important;
}

/* Hide corner theme button when Settings dock is open */
body:has(.gdp-settings-dock.is-open) .gdp-theme-btn,
body:has(.gdp-settings-dock.is-open) .gdp-theme-btn-top,
body:has(.gdp-settings-dock.is-open) .gdp-corner-theme-btn,
.gdp-theme-btn.is-settings-open,
.gdp-theme-btn-top.is-settings-open,
.gdp-corner-theme-btn.is-settings-open {
  display: none !important;
}

/* Fixed bottom footer (Phase 6, 6-6 / Phase 7, 7-4) */
.gdp-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1040 !important;
  font-size: 0.85rem;
  color: var(--gdp-muted);
  background: rgba(30, 34, 43, 0.95);
  border-top: 1px solid var(--gdp-panel-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.35rem 1rem;
  box-sizing: border-box;
}
html[data-bs-theme="light"] .gdp-footer {
  background: rgba(255, 255, 255, 0.95) !important;
  border-top-color: #e2e8f0 !important;
  color: #64748b !important;
}
html[data-bs-theme="dark"] .gdp-footer {
  background: rgba(30, 34, 43, 0.95) !important;
  border-top-color: #343841 !important;
  color: #94a3b8 !important;
}
.gdp-footer a {
  color: var(--gdp-muted);
}
.gdp-footer a:hover {
  color: var(--gdp-fg);
}
body {
  padding-bottom: 3.25rem !important;
}
.gdp-build-tag {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.12rem 0.45rem;
  border-radius: 0.4rem;
  background: var(--gdp-accent);
  color: #fff;
}

/* Player Profile Header Pill & Modal (Phase 9B, Item 2) */
.gdp-profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.65rem 0.25rem 0.35rem;
  border-radius: 999px;
  background: #20242d;
  border: 1px solid #3e4452;
  color: #f1f5f9;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  user-select: none;
  z-index: 1010;
}
html[data-bs-theme="light"] .gdp-profile-pill {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
html[data-bs-theme="dark"] .gdp-profile-pill {
  background: #20242d !important;
  border-color: #3e4452 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
.gdp-profile-pill:hover {
  border-color: var(--gdp-accent);
  transform: translateY(-1px);
}
.gdp-profile-pill .pill-avatar {
  font-size: 1.15rem;
  line-height: 1;
}
.gdp-profile-pill .pill-stars {
  font-size: 0.72rem;
  padding: 0.18rem 0.45rem;
}
@media (max-width: 480px) {
  .gdp-profile-pill .pill-name {
    display: none;
  }
}
.gdp-avatar-large {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(79, 140, 255, 0.2), rgba(6, 182, 212, 0.2));
  border: 2px solid var(--gdp-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}
.gdp-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 2050;
}
.gdp-modal-card {
  background: var(--gdp-panel) !important;
  color: var(--gdp-fg) !important;
  border: 1px solid var(--gdp-panel-border) !important;
  border-radius: 12px;
  width: 100%;
  max-width: 440px;
  padding: 1.5rem;
  position: relative;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  animation: gdpModalIn 0.18s ease-out;
}
html[data-bs-theme="light"] .gdp-modal-card {
  background: #ffffff !important;
  color: #1b1d22 !important;
  border-color: #dde1e6 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.15) !important;
}
html[data-bs-theme="light"] .gdp-modal-card .gdp-profile-stat-box {
  background: #f8f9fa !important;
  border-color: #e2e8f0 !important;
  color: #1b1d22 !important;
}
html[data-bs-theme="light"] .gdp-modal-card .btn-close {
  filter: none !important;
}
html[data-bs-theme="dark"] .gdp-modal-card {
  background: #20232a !important;
  color: #f1f1f1 !important;
  border-color: #343841 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important;
}
html[data-bs-theme="dark"] .gdp-modal-card .gdp-profile-stat-box {
  background: #181b21 !important;
  border-color: #343841 !important;
  color: #f1f1f1 !important;
}
html[data-bs-theme="dark"] .gdp-modal-card .btn-close {
  filter: invert(1) grayscale(100%) !important;
}
.gdp-modal-card .text-muted {
  color: var(--gdp-muted) !important;
}
.gdp-modal-card .border {
  border-color: var(--gdp-panel-border) !important;
}
.gdp-modal-card input[type="text"] {
  background: #181b21 !important;
  color: #f1f1f1 !important;
  border: 1px solid #343841 !important;
}
html[data-bs-theme="light"] .gdp-modal-card input[type="text"] {
  background: #f8f9fa !important;
  color: #1b1d22 !important;
  border: 1px solid #cbd5e1 !important;
}
html[data-bs-theme="dark"] .gdp-modal-card input[type="text"] {
  background: #181b21 !important;
  color: #f1f1f1 !important;
  border: 1px solid #343841 !important;
}
@keyframes gdpModalIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.gdp-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

/* ==========================================================================
   UNIFIED INFO CARD POPOVER (MATCHING CREATOR RULES CARD IN SCREENSHOT 2)
   ========================================================================== */
.gdp-info-card-popover {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 2200;
  min-width: 240px;
  max-width: 300px;
  background: #181f2a !important;
  color: #e2e8f0 !important;
  border: 1px solid #38bdf8 !important;
  border-radius: 0.85rem !important;
  padding: 0.85rem 1rem !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}
.gdp-info-card-popover.is-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}
.gdp-info-card-popover .popover-title {
  color: #38bdf8;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.gdp-info-card-popover .popover-body {
  font-size: 0.8rem;
  line-height: 1.45;
  color: #cbd5e1;
}
.gdp-info-card-popover .popover-body b {
  color: #ffffff;
}
.gdp-info-card-popover .popover-close-btn {
  filter: invert(1) grayscale(100%);
  opacity: 0.75;
  cursor: pointer;
  padding: 0.25rem;
}
.gdp-info-card-popover .popover-close-btn:hover {
  opacity: 1;
}

html[data-bs-theme="light"] .gdp-info-card-popover {
  background: #ffffff !important;
  color: #1e293b !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15) !important;
}
html[data-bs-theme="light"] .gdp-info-card-popover .popover-title {
  color: #0284c7 !important;
}
html[data-bs-theme="light"] .gdp-info-card-popover .popover-body {
  color: #475569 !important;
}
html[data-bs-theme="light"] .gdp-info-card-popover .popover-body b {
  color: #0f172a !important;
}
html[data-bs-theme="light"] .gdp-info-card-popover .popover-close-btn {
  filter: none !important;
}

/* ==========================================================================
   SMART CONTRAST TEXT FOR LIGHT WALLPAPERS (Ocean, Paper, etc.)
   ========================================================================== */
html[data-gdp-wallpaper-tone="light"] h1,
html[data-gdp-wallpaper-tone="light"] .gdp-header h1,
html[data-gdp-wallpaper-tone="light"] .gdp-creator-title {
  color: #0f172a !important;
}

html[data-gdp-wallpaper-tone="light"] .gdp-subtitle,
html[data-gdp-wallpaper-tone="light"] .gdp-header .gdp-subtitle,
html[data-gdp-wallpaper-tone="light"] .gdp-page > p,
html[data-gdp-wallpaper-tone="light"] .gdp-page > p.gdp-muted,
html[data-gdp-wallpaper-tone="light"] #localTestsWrap > p,
html[data-gdp-wallpaper-tone="light"] .gdp-muted:not(.gdp-panel *):not(.modal-content *):not(.gdp-settings-dock *):not(.gdp-modal-card *),
html[data-gdp-wallpaper-tone="light"] #pointStatus {
  color: #334155 !important;
}

html[data-gdp-wallpaper-tone="light"] .gdp-section-title:not(.gdp-panel *):not(.modal-content *):not(.gdp-settings-dock *):not(.gdp-modal-card *) {
  color: #0f172a !important;
}

html[data-gdp-wallpaper-tone="light"] .gdp-back-forge {
  color: #0284c7 !important;
}
html[data-gdp-wallpaper-tone="light"] .gdp-back-forge:hover {
  color: #0369a1 !important;
}