/* Inkpaw theme overrides. Keep selectors scoped to body[data-theme="inkpaw"]. */

body[data-theme="inkpaw"] {
    --bg-primary:        #efe9db;
    --bg-secondary:      #e2d8c2;
    --bg-tertiary:       #e2d8c2;
    --bg-input:          #f7f1e4;
    --text-primary:      #1b1712;
    --text-secondary:    #585044;
    --text-muted:        #8f8574;
    --accent-primary:    #a1402c;
    --accent-light:      #c1604a;
    --accent-dark:       #7a2f1f;
    --link-color:        #a1402c;
    --link-visited:      #7a2f1f;
    --border-primary:    #a1402c;
    --border-secondary:  #cabb9e;
    --border-muted:      #d8cdb2;
    --status-success:    #5f5748;
    --status-error:      #a1402c;
    --shadow-green:      rgba(161, 64, 44, 0.12);
    --shadow-red:        rgba(161, 64, 44, 0.2);
    --theme-shell-bg:    #efe9db;
    --theme-panel-bg:    #e2d8c2;
    --theme-header-bg:   #e2d8c2;
    --theme-header-border: #cabb9e;
    --theme-control-radius: 10px;
    --theme-message-radius: 16px;
    --reference-card: #f7f1e4;
    --reference-panel: #efe5d2;
    --reference-picker-active: #e2d8c2;
    --reference-border: #cabb9e;
    --reference-text: #2a2118;
    --reference-strong: #1b1712;
    --reference-subtle: #766c5d;
    --reference-accent: #a1402c;
    --reference-divider: #d8cdb2;
    --reference-shadow: 0 18px 38px -16px rgba(60,45,20,.34);
    --reference-outer: #efe9db;
    --reference-input: #fffaf0;
    --reference-input-placeholder: #9a8d78;
    --reference-end-border: rgba(161,64,44,.4);
    --reference-end-text: #a1402c;
    --reference-cta: #1b1712;
    --reference-cta-text: #f7f1e4;
}

body[data-theme="inkpaw"] {
    background: #d9d0ba;
}

body[data-theme="inkpaw"] .container {
    background: #efe9db;
}

/* ── Lobby ── */
body[data-theme="inkpaw"] .lobby-topbar {
    background: var(--theme-header-bg);
    border-bottom: 1px solid var(--theme-header-border);
    color: var(--text-secondary);
    font-family: 'Klee One', cursive;
}

body[data-theme="inkpaw"] .brand-text {
    color: var(--text-primary);
}

body[data-theme="inkpaw"] .lobby-message h2 {
    color: var(--text-primary);
    font-family: 'Klee One', cursive;
    font-weight: 600;
}

body[data-theme="inkpaw"] .lobby-chatting-as {
    color: var(--text-secondary);
    font-family: 'Klee One', cursive;
}

body[data-theme="inkpaw"] .lobby-online-stat {
    color: var(--text-muted);
}

body[data-theme="inkpaw"] .lobby-online-stat::before {
    background: var(--accent-primary);
}

/* CTA — asymmetric ink-stamp corner, the one deliberate accent shape */
body[data-theme="inkpaw"] .lobby-btn {
    position: relative;
    background: var(--text-primary);
    color: var(--bg-input);
    border: none;
    border-radius: 16px 6px 16px 6px;
    font-family: 'Klee One', cursive;
    font-weight: 600;
    box-shadow: none;
}

body[data-theme="inkpaw"] .lobby-btn::after {
    content: "";
    position: absolute;
    top: -6px;
    right: 12px;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: var(--accent-primary);
    transform: rotate(8deg);
}

body[data-theme="inkpaw"] .lobby-icon-btn {
    width: 34px;
    min-width: 34px;
    height: 30px;
    flex: 0 0 34px;
    padding: 0;
    background: transparent;
    border: 0;
    color: #8f8574;
    border-radius: 0;
    font-size: 17px;
}

body[data-theme="inkpaw"] .lobby-icon-btn:hover {
    background: transparent;
    color: #585044;
    border-color: transparent;
}

body[data-theme="inkpaw"] .lobby-icon-btn i {
    color: inherit;
}

body[data-theme="inkpaw"] .neon-name-btn {
    color: var(--text-secondary);
}

body[data-theme="inkpaw"] .neon-name-btn:hover {
    color: var(--text-primary);
}

/* ── Settings ── */
body[data-theme="inkpaw"] #settingsModal.modal-overlay {
    background: rgba(27, 23, 18, .34);
}

body[data-theme="inkpaw"] .settings-modal .modal-header h2,
body[data-theme="inkpaw"] .settings-modal .settings-section h3 {
    font-family: 'Klee One', cursive;
}

body[data-theme="inkpaw"] .setting-toggle-row {
    color: var(--reference-text);
}

body[data-theme="inkpaw"] .setting-switch {
    border: 1px solid var(--reference-border);
    background: var(--reference-panel);
}

body[data-theme="inkpaw"] .setting-switch::after {
    background: var(--reference-card);
}

body[data-theme="inkpaw"] .setting-switch-input:checked + .setting-switch {
    background: var(--accent-primary);
}

/* ── Chat header ── */
body[data-theme="inkpaw"] .chat-session-header {
    height: auto;
    min-height: 58px;
    padding: 12px 14px;
    gap: 9px;
    background: #efe9db;
    border-bottom: 1px solid #cabb9e;
}

body[data-theme="inkpaw"] .chat-session-logo {
    border-radius: 50%;
    border: 1.5px solid var(--text-primary);
    background: var(--bg-primary);
}

body[data-theme="inkpaw"] .chat-match-name {
    color: #2b2620;
    font: 600 13.5px/1.15 Inter, system-ui, sans-serif;
}

body[data-theme="inkpaw"] .chat-match-status {
    color: #8f8574;
    font: 600 10.5px/1 Inter, system-ui, sans-serif;
}

body[data-theme="inkpaw"] .chat-match-status[data-status="connected"] {
    color: #8f8574;
}

body[data-theme="inkpaw"] .chat-match-status::before {
    background: #5f5748;
}

body[data-theme="inkpaw"] .chat-match-status[data-status="ended"],
body[data-theme="inkpaw"] .chat-match-status[data-status="disconnected"] {
    color: var(--status-error);
}

/* Clean 1px ink divider — used instead of hand-drawn strokes */
body[data-theme="inkpaw"] .scrollable-content {
    background: var(--bg-primary);
    border-left: none;
    border-right: none;
}

/* ── Messages ── */
body[data-theme="inkpaw"] .message.own .message-content {
    background: #4a4030;
    color: #f7f1e4;
    border: none;
    border-radius: var(--theme-message-radius);
    border-bottom-right-radius: 4px;
}

body[data-theme="inkpaw"] .message.other .message-content {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--theme-message-radius);
    border-bottom-left-radius: 4px;
}

body[data-theme="inkpaw"] .system-message,
body[data-theme="inkpaw"] .connection-status {
    background: var(--bg-input);
    border: 1px solid var(--border-secondary);
    color: var(--text-secondary);
}

body[data-theme="inkpaw"] .system-message.match-system-message {
    background: transparent;
    border: none;
    color: var(--text-muted);
}

/* Reply indicator */
body[data-theme="inkpaw"] .reply-indicator-bar {
    background: var(--bg-tertiary);
    border-left: 3px solid var(--accent-primary);
    border-radius: 12px 4px 12px 4px;
}

body[data-theme="inkpaw"] .reply-indicator-text {
    color: var(--text-muted);
}

body[data-theme="inkpaw"] .reply-indicator-text strong {
    color: var(--text-primary);
}

body[data-theme="inkpaw"] .reply-cancel-btn {
    color: var(--text-muted);
}

/* Input bar */
body[data-theme="inkpaw"] .input-wrapper.bottom-bar {
    min-height: 68px;
    padding: 10px 14px 16px;
    gap: 8px;
    align-items: center;
    background: transparent;
    border-top: 0;
    border-radius: 0;
    box-shadow: none;
}

body[data-theme="inkpaw"] .input-wrapper.bottom-bar:not(.ended-chat-visible) .message-input-container {
    height: 42px;
}

body[data-theme="inkpaw"] #activeChatControls {
    height: 42px;
    gap: 8px;
}

body[data-theme="inkpaw"] #messageInput {
    height: 42px;
    min-height: 42px;
    padding: 0 56px 0 14px;
    color: #2b2620;
    background: #f7f1e4;
    border: 1px solid #cabb9e;
    border-radius: 16px 6px 16px 6px;
    font: 400 14px/40px Inter, system-ui, sans-serif;
}

body[data-theme="inkpaw"] .input-wrapper #activeChatControls #messageInput {
    border-radius: 16px 6px 16px 6px;
}

body[data-theme="inkpaw"] .input-wrapper.bottom-bar.composer-has-text:not(.ended-chat-visible) #messageInput {
    padding-right: 56px;
}

body[data-theme="inkpaw"] #messageInput:focus {
    border: 1px solid #cabb9e;
    box-shadow: none;
}

body[data-theme="inkpaw"] #messageInput::placeholder {
    color: #ab9f86;
}

body[data-theme="inkpaw"] .invite-wrap {
    position: absolute;
    right: 7px;
    top: 50%;
    flex: none;
    height: 42px;
    transform: translateY(-50%);
}

body[data-theme="inkpaw"] #inviteFromHeader {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    color: #8f8574;
    background: transparent;
    border: 0;
    border-radius: 0;
}

body[data-theme="inkpaw"] #inviteFromHeader:hover {
    color: #7d7362;
    background: transparent;
    border-color: transparent;
}

body[data-theme="inkpaw"] .chat-end-btn {
    min-width: 62px;
    height: 42px;
    padding: 0 14px;
    color: #1b1712;
    background: transparent;
    border: 1px solid #1b1712;
    border-radius: 16px 6px 16px 6px;
    font: 600 13px/1 Inter, system-ui, sans-serif;
}

body[data-theme="inkpaw"] .input-wrapper.bottom-bar #endChatButton {
    min-width: 62px;
    height: 42px;
    margin: 0;
    padding: 0 14px;
    opacity: 1;
    color: #4a4030;
    background: #e2d8c2;
    border: 1px solid #7d7362;
    border-radius: 16px 6px 16px 6px;
    box-shadow: none;
    font: 600 13px/1 Inter, system-ui, sans-serif;
}

body[data-theme="inkpaw"] .input-wrapper.bottom-bar #endChatButton:hover {
    color: #f7f1e4;
    background: #4a4030;
    border-color: #4a4030;
}

body[data-theme="inkpaw"] .chat-end-btn:hover {
    color: #f7f1e4;
    background: #1b1712;
    border-color: #1b1712;
}

body[data-theme="inkpaw"] .send-btn-text {
    background: var(--text-primary);
    color: var(--bg-input);
    border-radius: 16px 6px 16px 6px;
}

body[data-theme="inkpaw"] .chat-end-btn {
    color: var(--status-error);
    border: 1px solid var(--status-error);
    background: transparent;
    border-radius: var(--theme-control-radius);
}

body[data-theme="inkpaw"] .chat-end-btn:hover {
    background: rgba(161, 64, 44, 0.08);
}

/* ── Games ── */
body[data-theme="inkpaw"] .game-status {
    color: var(--text-secondary);
    font-family: 'Klee One', cursive;
}

body[data-theme="inkpaw"] #endGame {
    border: 1px solid var(--status-error);
    background: transparent;
    color: var(--status-error);
    border-radius: var(--theme-control-radius);
}

body[data-theme="inkpaw"] .tic-tac-toe-board .cell.win {
    background: rgba(161, 64, 44, 0.12);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* ── Theme picker (Settings > Theme) ──
   Each theme keeps its own palette regardless of the active body theme,
   matching how .theme-choice-default / .theme-choice-neon are scoped. */
#themePicker .theme-choice-inkpaw {
    border-color: transparent;
    background: #e2d8c2;
    color: #1b1712;
}

#themePicker .theme-choice-inkpaw.active {
    border-color: #a1402c;
}

#themePicker .theme-choice-inkpaw .theme-choice-name {
    color: #1b1712;
    font-family: 'Klee One', cursive;
}

#themePicker .theme-choice-inkpaw .theme-choice-note {
    color: #8f8574;
}

#themePicker .theme-choice-inkpaw .theme-preview {
    background: #e2d8c2;
}

#themePicker .theme-choice-inkpaw .theme-preview-top {
    display: none;
}

#themePicker .theme-choice-inkpaw .theme-preview-bubble-other {
    border: 0;
    background: #7d7362;
}

#themePicker .theme-choice-inkpaw .theme-preview-bubble-own {
    background: #4a4030;
}

/* Game picker: shared structure, Inkpaw surface and lettering. */
body[data-theme="inkpaw"] #inviteMenu.invite-menu {
    --gp-card: #f7f1e4;
    --gp-panel: #e2d8c2;
    --gp-border: #cabb9e;
    --gp-strong: #1b1712;
    --gp-text: #2b2620;
    --gp-sub: #8f8574;
    right: 11px;
    left: 11px;
    bottom: calc(100% - 2px);
    width: auto;
    padding: 16px 16px 14px;
    margin: 0;
    border-radius: 20px;
    box-shadow: 0 14px 30px -16px rgba(27, 23, 18, .4);
}

body[data-theme="inkpaw"] .game-picker-heading strong {
    font-family: 'Klee One', cursive;
    font-weight: 600;
}

body[data-theme="inkpaw"] .game-picker-card {
    border-radius: 18px 6px 18px 6px;
}

body[data-theme="inkpaw"] .game-picker-cards {
    margin: -5px -4px;
    padding: 5px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}

body[data-theme="inkpaw"] .game-picker-card:hover,
body[data-theme="inkpaw"] .game-picker-card:focus-visible {
    border-color: #7d7362;
    transform: translateY(-1px);
}

body[data-theme="inkpaw"] .game-picker-card:hover .game-picker-icon,
body[data-theme="inkpaw"] .game-picker-card:focus-visible .game-picker-icon {
    border-color: #7d7362;
}

body[data-theme="inkpaw"] .game-picker-card:hover > strong,
body[data-theme="inkpaw"] .game-picker-card:focus-visible > strong {
    color: #1b1712;
}

body[data-theme="inkpaw"] .settings-tabs .tab-btn:hover {
    color: #1b1712;
}

body[data-theme="inkpaw"] .settings-tabs .tab-btn.active {
    color: #a1402c;
    border-bottom-color: #a1402c;
}

body[data-theme="inkpaw"] #themePicker .theme-choice:hover {
    border-color: #7d7362;
    transform: translateY(-1px);
}

body[data-theme="inkpaw"] #themePicker .theme-choice.active {
    border-color: #a1402c;
    transform: none;
}

body[data-theme="inkpaw"] .lobby-btn:hover {
    background: #2b2620;
    box-shadow: 0 4px 14px rgba(27, 23, 18, .4);
    transform: translateY(-1px);
}

/* ── Loading overlay ── */
body[data-theme="inkpaw"] .loading-overlay {
    padding: 26px;
    background: #efe9db;
}

body[data-theme="inkpaw"] .loading-overlay .loading-content {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 304px;
    padding: 34px 26px 28px;
    align-items: center;
    flex-direction: column;
    background: #f7f1e4;
    border: 0;
    border-radius: 22px;
    background-image:
        radial-gradient(ellipse 160px 120px at 92% 4%, rgba(30, 26, 20, .05), transparent 65%),
        radial-gradient(ellipse 140px 100px at 6% 96%, rgba(30, 26, 20, .04), transparent 65%);
    text-align: center;
    box-shadow: 0 14px 30px -16px rgba(27, 23, 18, .4);
}

body[data-theme="inkpaw"] .loading-content > .logo {
    display: none;
}

body[data-theme="inkpaw"] .loading-title {
    order: 2;
    margin: 0 0 8px;
    color: #1b1712;
    font-family: 'Klee One', cursive;
    font-size: 20px;
    font-weight: 600;
}

body[data-theme="inkpaw"] .loading-message {
    order: 3;
    margin: 0 0 22px;
    color: #8f8574;
    font: 400 13px/1.5 Inter, system-ui, sans-serif;
    text-align: center;
}

/* Soft moving ink drop from the Inkpaw reference. */
body[data-theme="inkpaw"] .loader {
    order: 1;
    display: grid;
    gap: 0;
    width: 60px;
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto 16px;
    padding: 6px;
    border: 0;
    border-radius: 0;
    background: #f7f1e4;
    filter: blur(3px) contrast(10);
    mix-blend-mode: darken;
    animation: none;
}

body[data-theme="inkpaw"] .loading-ad-container {
    order: 4;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 20px 16px;
    border: 0;
    border-radius: 16px 6px 16px 6px;
    background: #e2d8c2;
}

body[data-theme="inkpaw"] .loading-ad-container .contact-section {
    padding: 0;
}

body[data-theme="inkpaw"] .loading-ad-container .contact-section h3 {
    margin: 0 0 6px;
    color: #8f8574;
    font: 700 12px Inter, system-ui, sans-serif;
}

body[data-theme="inkpaw"] .loading-ad-container .contact-section p,
body[data-theme="inkpaw"] .loading-ad-container .contact-section a {
    margin: 0;
    color: #1b1712;
    font: 600 12px/1 Inter, system-ui, sans-serif;
}

body[data-theme="inkpaw"] .loader::before,
body[data-theme="inkpaw"] .loader::after {
    content: "";
    display: block;
    grid-area: 1 / 1;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    animation: none;
    background:
        linear-gradient(#1b1712 0 0) left,
        linear-gradient(#1b1712 0 0) right;
    background-size: 12px 24px;
    background-origin: content-box;
    background-repeat: no-repeat;
}

body[data-theme="inkpaw"] .loader::after {
    width: 12px;
    height: 12px;
    margin: auto 0;
    border-radius: 50%;
    background: #1b1712;
    animation: inkpaw-drip 1s infinite;
}

@keyframes inkpaw-drip {
    90%, 100% { transform: translateX(300%); }
}

/* ── Reactions ── */
body[data-theme="inkpaw"] .reaction-picker {
    background: #f7f1e4;
    border-color: #cabb9e;
}

body[data-theme="inkpaw"] .reaction-badge {
    background: #e2d8c2;
    border-color: #cabb9e;
}

body[data-theme="inkpaw"] .reaction-badge.own-reacted {
    border-color: #a1402c;
}

body[data-theme="inkpaw"] .reaction-badge.own-reacted .reaction-count {
    color: #a1402c;
}