* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari, Chrome, Opera */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Standard property */
}

a {
    text-decoration: none;
    color: inherit;
    font: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
    font: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
button:focus {
    outline: none;
}
button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.hidden {
    display: none !important;
}

/* Normalize Font Awesome and Bootstrap Icons to same width/height and alignment */
.fa, .fa-solid, [class^="fa-"], .bi, [class^="bi-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
}

/* Block rotation: overlay when device is in landscape on mobile (fallback where Orientation API not supported) */
.orientation-overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1500;
    background: rgba(0, 0, 0, 0.92);
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.orientation-overlay.visible {
    display: flex;
}
.orientation-overlay-content {
    text-align: center;
    color: #fff;
    max-width: 280px;
}
.orientation-overlay-icon {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
}
.orientation-overlay-content p {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

/* Custom Dialog System - Lightweight alert/confirm (above world map: 12000) */
.custom-dialog-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 13000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-in;
}

.custom-dialog-overlay.active {
    display: flex;
}

.custom-dialog {
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    min-width: 320px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: slideDown 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-dialog-header {
    padding: 20px 20px 10px 20px;
    border-bottom: 1px solid #eee;
}

.custom-dialog-header--with-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.custom-dialog-header--with-actions .custom-dialog-title {
    flex: 1;
    min-width: 0;
}

button.dialog-bookmark-tile-btn {
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #f8f9fa;
    color: #495057;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

button.dialog-bookmark-tile-btn:hover {
    background: #e9ecef;
    border-color: #ced4da;
    color: #212529;
}

button.dialog-bookmark-tile-btn:focus-visible {
    outline: 2px solid rgba(13, 110, 253, 0.65);
    outline-offset: 2px;
}

button.dialog-bookmark-tile-btn i {
    font-size: 16px;
    line-height: 1;
}

.custom-dialog.custom-dialog--monster-detail button.dialog-bookmark-tile-btn {
    border-color: rgba(0, 0, 0, 0.14);
    background: rgba(255, 255, 255, 0.35);
    color: #0f172a;
}

.custom-dialog.custom-dialog--monster-detail button.dialog-bookmark-tile-btn:hover {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(0, 0, 0, 0.22);
}

.custom-dialog-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.custom-dialog-body {
    padding: 20px;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
    overflow-y: auto;
    flex: 1;
}

.custom-dialog-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.custom-dialog-footer--mine {
    align-items: center;
}

/* Giant Monster + Mine world-map detail: lighter scrim + frosted panel so the map stays visible */
.custom-dialog-overlay.custom-dialog-overlay--monster-detail {
    background: rgba(0, 0, 0, 0.36);
}

/* overflow:hidden clips backdrop-filter to border-radius (otherwise browsers paint a square frosted layer behind rounded corners) */
.custom-dialog.custom-dialog--monster-detail {
    background: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(16px) saturate(1.12);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.custom-dialog.custom-dialog--monster-detail .custom-dialog-header {
    background: rgba(255, 255, 255, 0.22);
    border-bottom-color: rgba(0, 0, 0, 0.1);
    border-radius: 8px 8px 0 0;
}

.custom-dialog.custom-dialog--monster-detail .custom-dialog-title {
    color: #020617;
}

.custom-dialog.custom-dialog--monster-detail .custom-dialog-body {
    background: transparent;
    color: #0f172a;
}

.custom-dialog.custom-dialog--monster-detail .custom-dialog-footer {
    background: rgba(255, 255, 255, 0.26);
    border-top-color: rgba(0, 0, 0, 0.1);
    border-radius: 0 0 8px 8px;
}

.gather-mine-button {
    background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%) !important;
    color: #fff !important;
}

.gather-mine-button:hover {
    filter: brightness(1.08);
}

.gather-mine-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.world-mine-leave-button {
    background: linear-gradient(135deg, #dc3545 0%, #b31d2c 100%) !important;
    color: #fff !important;
}

.world-mine-leave-button:hover {
    filter: brightness(1.08);
}

.world-mine-leave-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.dialog-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
}

.dialog-btn:focus {
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.3);
}

.dialog-btn-primary {
    background: linear-gradient(135deg, #c9a227 0%, #8b6914 100%);
    color: white;
}

.dialog-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 162, 39, 0.4);
}

.dialog-btn-primary:active {
    transform: translateY(0);
}

.dialog-btn-secondary {
    background: #f0f0f0;
    color: #666;
}

.dialog-btn-secondary:hover {
    background: #e0e0e0;
}

.dialog-btn-danger {
    background: #dc3545;
    color: white;
}

.dialog-btn-danger:hover {
    background: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

.dialog-btn-danger:active {
    transform: translateY(0);
}

/* Hide dialog buttons based on dialog type */
.custom-dialog-overlay[data-type="alert"] .dialog-btn-secondary {
    display: none;
}

/* World map go-to coordinates — same shell as showAlert / CustomDialog */
.world-map-goto-overlay .world-map-goto-hint {
    margin: 0 0 12px 0;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

.world-map-goto-overlay .world-map-goto-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
}

.world-map-goto-overlay .world-map-goto-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 6px;
    border: 1px solid #ddd;
    color: #333;
}

.world-map-goto-overlay .world-map-goto-input:focus {
    outline: none;
    border-color: #c9a227;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25);
}

/* Chat photo send confirmation: 400px thumbnail preview */
.chat-photo-confirm-preview {
    text-align: center;
    margin: 0 auto;
}
.chat-photo-confirm-preview img {
    max-width: 400px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* News Modal (above daily mission panel: 10000) */
.news-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 11000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease-in;
}

.news-modal-overlay.active {
    display: flex;
}

.news-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideDown 0.3s ease-out;
    overflow: hidden;
}

.news-modal-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.news-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    flex: 1;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.news-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.news-modal-close:hover {
    background: #f0f0f0;
    color: #333;
}

.news-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.news-modal-date {
    font-size: 13px;
    color: #999;
    margin-bottom: 16px;
}

.news-modal-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 16px;
    display: block;
}

.news-modal-description {
    margin: 0;
    font-size: 15px;
    color: #555;
    line-height: 1.6;
}

.news-modal-note {
    margin: 16px 0 0 0;
    padding: 12px;
    background: #f9f9f9;
    border-left: 3px solid #c9a227;
    border-radius: 4px;
    font-size: 13px;
    color: #666;
    font-style: italic;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f5f5f5;
    margin: 0;
    overflow: hidden;
}

.app-wrapper {
    display: flex;
    flex-direction: row;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #000;
}

.container {
    flex: 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* .header-right no longer used; online users moved to .online-users-float */

.side-panel-toggle-wrap {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 600;
    width: 48px;
    height: 80px;
    pointer-events: none;
    transition: right 0.2s ease;
}

.side-panel-toggle-wrap::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
    height: 80px;
    background: rgba(0, 0, 0, 0.35);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    filter: blur(12px);
    transform: translateX(-12px);
    pointer-events: none;
}

.side-panel-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
    height: 80px;
    padding: 0;
    background: #fff;
    color: #333;
    border: none;
    cursor: pointer;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    pointer-events: auto;

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Panel shown: button attached to panel's left edge, arrow points right (default for <500px; overridden at min-width: 500px) */
.side-panel-toggle-wrap.panel-open {
    right: 320px;
}

.side-panel-toggle:hover {
    background: #f5f5f5;
}

.side-panel-toggle .toggle-icon-unlock,
.side-panel-toggle .toggle-icon-lock {
    display: block;
    position: absolute;
    font-size: 20px;
    color:#9e9e9e;
    transform: translateX(5px);
}

.side-panel-toggle .toggle-icon-lock {
    display: none;
}

.side-panel-toggle.panel-open .toggle-icon-unlock {
    display: none;
}

.side-panel-toggle.panel-open .toggle-icon-lock {
    display: block;
}

.side-panel {
    width: 320px;
    flex-shrink: 0;
    background: #fafafa;
    border-left: 1px solid #eee;
    overflow: hidden;
    transition: width 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    display: flex;
    flex-direction: column;
}

.side-panel-header {
    flex-shrink: 0;
    height: 0;
}

.side-panel-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-items: stretch;
}

.side-panel-top {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 15px;
    text-align: left;
    align-self: stretch;
    display: block;
}
.side-panel-middle {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    text-align: left;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}
.side-panel-middle-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 15px;
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 2;
}
.side-panel-middle-header-balance {
    display: flex;
    align-items: center;
    gap: 8px;
}
.side-panel-middle-header-balance .fa-coins {
    color: #c9a227;
    font-size: 1.1em;
}
.side-panel-coins {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.side-panel-middle-header-btns {
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Side panel middle header icons – same styling as input icons */
.side-panel-middle-header-btn {
    cursor: pointer;
    padding: 10px 12px;
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    background: #e8e8e8;
    color: #666;
    border: none;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.side-panel-middle-header-btn:hover {
    color: #000;
    background: #ddd;
}
.side-panel-middle-header-btn.active {
    background: #fff;
    color: #666;
    border: 2px solid #999797;
}
.side-panel-middle-header-btn .fa-solid,
.side-panel-middle-header-btn .bi,
.side-panel-middle-header-btn i {
    font-size: 1.1rem;
    color: inherit;
}
.side-panel-middle-body {
    flex: 1;
    overflow: auto;
    padding: 15px;
}
.side-panel-inventory-panel {
    margin: 0;
}
.side-panel-inventory-empty {
    margin: 0;
    color: #888;
    font-size: 14px;
}

/* Middle panel fade-in when switching between artifacts / gemstone / crystal */
.side-panel-middle-fade-in {
    animation: side-panel-middle-fade-in 0.18s ease-out;
}
@keyframes side-panel-middle-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.new-messages-indicator {
    position: absolute;
    right: 18px;
    bottom: -98px; /* below online-users-float (-40px), 2px lower than -96px */
    z-index: 10;
    opacity: 0;
    pointer-events: none;
}

.new-messages-indicator:not(.hidden) {
    animation: new-messages-fade-in 0.25s ease-out forwards;
    pointer-events: auto;
}

@keyframes new-messages-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scroll-to-bottom-btn {
    position: relative;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.scroll-to-bottom-btn:hover {
    background: #f5f5f5;
    transform: scale(1.1);
}

.scroll-to-bottom-btn:active {
    background: #eeeeee;
}

.scroll-to-bottom-btn i {
    font-size: 22px;
    color: #b7b5b1;
}

.scroll-to-bottom-btn .new-messages-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #f44336;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.25);
    animation: notification-dot-pulse 1.5s ease-in-out infinite;
}

.side-panel-middle {
    border-top: 1px solid #eee;
}

.side-panel-top *,
.side-panel-middle .side-panel-middle-body * {
    text-align: left;
    margin-left: 0;
    margin-right: auto;
}

/* Default middle content: Artifacts */
.artifacts-title {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
}

.artifacts-title img {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 0; /* override .side-panel-middle * { margin-right: auto } so img and text stay together */
}

/* Craft artifact toggle – same styling as input icons */
.craft-artifact-toggle {
    cursor: pointer;
    padding: 10px 12px;
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    background: #e8e8e8;
    color: #666;
    border: none;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 4px;
    -webkit-tap-highlight-color: transparent;
}
.artifacts-title .craft-artifact-toggle {
    margin-left: auto;
    margin-right: 0;
}
.craft-artifact-toggle:hover {
    color: #c9a227;
    background: #ddd;
}
.craft-artifact-toggle .bi,
.craft-artifact-toggle i {
    font-size: 1.25rem;
    color: inherit;
}

.artifacts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.artifacts-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.artifacts-pagination-prev,
.artifacts-pagination-next {
    padding: 6px 14px;
    font-size: 13px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #f5f5f5;
    color: #333;
    cursor: pointer;
}

.artifacts-pagination-prev:hover:not(:disabled),
.artifacts-pagination-next:hover:not(:disabled) {
    background: #e8e8e8;
    border-color: #c9a227;
}

.artifacts-pagination-prev:disabled,
.artifacts-pagination-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.artifacts-pagination-info {
    font-size: 13px;
    color: #666;
}

.artifacts-item {
    display: flex;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    color: inherit;
    transition: background 0.2s, border-color 0.2s;
    cursor: pointer;
}

.artifacts-item:hover {
    background: #f9f9f9;
    border-color: #c9a227;
}

.artifacts-item:focus {
    outline: 2px solid #c9a227;
    outline-offset: 2px;
}

.artifacts-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.artifacts-item-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    line-height: 1.35;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.artifacts-item-date {
    font-size: 13px;
    color: #999;
}

.artifacts-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 4px;
}

.artifacts-item-price {
    font-size: 14px;
    color: #666;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.artifacts-item-price i {
    margin-right: 0;
}

.artifacts-item-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: artifacts-item-dot-pulse 1.4s ease-in-out infinite;
}
.artifacts-item-dot--rare {
    background: #2196f3;
    box-shadow: 0 0 6px #2196f3;
}
.artifacts-item-dot--epic {
    background: #9c27b0;
    box-shadow: 0 0 6px #9c27b0;
}
.artifacts-item-dot--legendary {
    background: #c9a227;
    box-shadow: 0 0 6px #c9a227;
}
.artifacts-item-dot--mythic {
    background: #d32f2f;
    box-shadow: 0 0 6px #d32f2f;
}
@keyframes artifacts-item-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.artifacts-item-author {
    color: #888;
    font-size: 13px;
}

.artifacts-item-author i {
    margin-right: 4px;
}

.artifacts-empty {
    margin: 0;
    font-size: 14px;
    color: #999;
}

/* News feed (other middle content) */
.news-feed-title {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
}

.news-feed-title img {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 0;
}

.news-feed-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.news-feed-item {
    display: flex;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    color: inherit;
    transition: background 0.2s, border-color 0.2s;
    cursor: pointer;
}

.news-feed-item:hover {
    background: #f9f9f9;
    border-color: #c9a227;
}

.news-feed-item:focus {
    outline: 2px solid #c9a227;
    outline-offset: 2px;
}

.news-feed-thumb {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.news-feed-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.news-feed-item-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    line-height: 1.35;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.news-feed-item-date {
    font-size: 13px;
    color: #999;
}

.news-feed-empty {
    margin: 0;
    font-size: 14px;
    color: #999;
}

.artifacts-unlock {
    text-align: center;
    padding: 20px 0;
}

.artifacts-unlock-message {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

.artifacts-unlock-deploy-btn {
    padding: 10px 24px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #666;
    background: #e8e8e8;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.artifacts-unlock-deploy-btn:hover {
    background: #ddd;
    color: #333;
}

.artifacts-unlock-deploy-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}

.side-panel-bottom {
    min-height: 120px;
    flex-shrink: 0;
    padding: 10px 15px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    box-sizing: border-box;
}

.side-panel-bottom-content {
    padding-top: 10px;
}

/* Profile Section */
.profile-section {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex-shrink: 1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.profile-photo-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    min-width: 100px;
    min-height: 100px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s;
}

.profile-photo-wrapper:hover {
    transform: scale(1.05);
}

.profile-photo,
.profile-photo-placeholder {
    width: 100%;
    height: 100%;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.profile-photo-placeholder {
    background: linear-gradient(135deg, #c9a227 0%, #8b6914 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    font-weight: bold;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-photo {
    border: 2px solid #c9a227;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-info {
    flex: 1;
    min-width: 0;
}

.profile-username-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#profile-status-dot {
    cursor: pointer;
    flex-shrink: 0;
}

#profile-status-dot:hover {
    transform: scale(1.15);
}

.profile-username {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    min-width: 0;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.profile-username:hover {
    color: #8b6914;
}

.profile-app-info {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 0;
    padding-right: 16px;
    max-width: 100%;
    box-sizing: border-box;
}

.profile-app-info .logout-btn,
.profile-app-info .profile-btn,
.profile-app-info .hero-btn {
    padding: 10px 12px;
    min-width: 40px;
    min-height: 40px;
    box-sizing: border-box;
    background: #e8e8e8;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background 0.2s, color 0.2s, transform 0.1s;
    flex-shrink: 0;
    line-height: 1;
}

.profile-btn {
    color: #4caf50;
}

.profile-app-info .hero-btn {
    color: #e65100;
}

.profile-app-info .hero-btn:hover {
    background: #ddd;
    color: #bf360c;
}

.hero-icon {
    width: 1.1em;
    height: 1.1em;
    object-fit: contain;
    vertical-align: middle;
}

.profile-app-info .hero-btn .hero-icon {
    width: 1.1rem;
    height: 1.1rem;
}

.profile-app-info .hero-btn .bi,
.profile-app-info .hero-btn .fa-solid,
.profile-app-info .profile-btn .fa-solid,
.profile-app-info .logout-btn .fa-solid {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.profile-btn:hover {
    background: #ddd;
    color: #249127;
}

.logout-btn {
    color: #ff4444;
}

.profile-app-info .logout-btn:hover {
    background: #ddd;
    color: #cc0000;
}

/* Daily Missions panel – always floating (fixed) so it never affects the chat scroll bar */
.daily-mission-panel {
    flex-shrink: 0;
    position: fixed;
    top: 156px;
    left: 10px;
    width: min(600px, calc(100vw - 20px));
    max-height: 280px;
    margin: 0;
    z-index: 1;
    align-self: flex-start;
    background: rgba(255, 255, 255, 1);
    color: #1a1a1a;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: max-height 0.25s ease;
}

/* Reaper Quest window: own classnames (same behavior as Daily Missions). */
.reaper-quest-panel {
    flex-shrink: 0;
    position: fixed;
    top: 220px;
    left: 10px;
    width: min(600px, calc(100vw - 20px));
    /* Must account for `top` so the body can scroll to the real bottom on small screens. */
    max-height: calc(100vh - 240px);
    margin: 0;
    z-index: 1;
    align-self: flex-start;
    background: rgba(255, 255, 255, 1);
    color: #1a1a1a;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.reaper-quest-panel:not(.reaper-quest-panel--minimized) {
    width: min(600px, calc(100vw - 20px));
}

@media (min-width: 641px) {
    .reaper-quest-panel {
        width: min(840px, calc(100vw - 20px));
        max-height: calc(100vh - 240px);
    }
    .reaper-quest-panel:not(.reaper-quest-panel--minimized) {
        width: min(840px, calc(100vw - 20px));
    }
    .reaper-quest-panel-body {
        max-height: calc(100vh - 240px - 50px);
    }
}

.reaper-quest-panel--minimized.reaper-quest-panel--draggable {
    width: fit-content;
    cursor: move;
    z-index: 5;
}
.reaper-quest-panel--minimized.reaper-quest-panel--draggable:active {
    cursor: move;
}
.reaper-quest-panel--minimized.reaper-quest-panel--draggable .reaper-quest-panel-header {
    cursor: move;
    transition: background-color 0.15s ease;
}
.reaper-quest-panel--minimized.reaper-quest-panel--draggable .reaper-quest-panel-header:hover {
    background-color: rgba(0, 0, 0, 0.06);
}
.reaper-quest-panel--minimized.reaper-quest-panel--draggable .reaper-quest-panel-header:active {
    cursor: move;
}

.reaper-quest-panel--minimized {
    width: fit-content;
    align-self: flex-start;
}

/* Transparent background when minimized (Reaper Quests) */
.reaper-quest-panel--minimized {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: none;
}

.reaper-quest-panel--minimized .reaper-quest-panel-body {
    display: none;
}

.reaper-quest-panel--minimized .reaper-quest-panel-header .reaper-quest-panel-title {
    flex: 0 1 auto;
    white-space: nowrap;
}

.reaper-quest-mini-icon {
    display: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.reaper-quest-panel--minimized .reaper-quest-mini-icon {
    display: block;
}

.reaper-quest-panel--minimized .reaper-quest-panel-title {
    display: none;
}

.reaper-quest-panel--minimized .reaper-quest-panel-actions {
    display: none;
}

.reaper-quest-panel--minimized .reaper-quest-panel-header {
    justify-content: flex-start;
}

.reaper-quest-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    height: 50px;
    box-sizing: border-box;
    gap: 10px;
}

.reaper-quest-toggle {
    flex-shrink: 0;
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.08);
    color: #333;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}

.reaper-quest-toggle:hover {
    background: rgba(0, 0, 0, 0.12);
}

.reaper-quest-panel--minimized .reaper-quest-toggle i {
    transform: rotate(180deg);
}

.reaper-quest-panel-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
}

.reaper-quest-panel-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.reaper-quest-panel-body {
    padding: 8px 12px 12px 12px;
    overflow: auto;
    /* Panel has max-height; body must be constrained so it can scroll instead of being clipped by overflow:hidden */
    max-height: calc(100vh - 240px - 50px);
}

.reaper-countdown {
    flex-shrink: 0;
    margin-left: 6px;
    padding: 3px 10px;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 520px) {
    /* On small screens, hide verbose suffix and pull Reaper panel closer to chat header when expanded. */
    .reaper-quest-panel-title-suffix {
        display: none;
    }
    .reaper-quest-panel:not(.reaper-quest-panel--minimized) {
        top: 118px;
        /* keep panel about 10px above the input area (approx 80px tall) */
        max-height: calc(100vh - 118px - 190px);
    }
    .reaper-quest-panel-body {
        padding-bottom: 82px; /* extra bottom space for content (mobile only) */
    }
    .daily-mission-panel-body {
        padding-bottom: 82px; /* extra bottom space for content (mobile only) */
    }
}

.reaper-quest-content {
    display: block;
}

.reaper-quest-hero-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.reaper-quest-hero-media {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.reaper-quest-hero-img {
    width: 200px;
    height: auto;
    border-radius: 5px;
    flex-shrink: 0;
}

.reaper-claim-button {
    width: 200px;
    padding: 10px 12px;
    border: 1px solid #8b0000;
    border-radius: 8px;
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 50%, #8b0000 100%);
    color: #fff;
    font-weight: 800;
    font-family: Oswald;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(183, 28, 28, 0.35);
}
.reaper-claim-button:hover {
    box-shadow: 0 3px 12px rgba(183, 28, 28, 0.5);
    transform: translateY(-1px);
}
.reaper-claim-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(183, 28, 28, 0.35);
}

.reaper-quest-hero-text {
    min-width: 0;
}

.reaper-quest-hero-desc {
    margin: 0 0 10px 0;
    color: #333;
}
.reaper-quest-hero-desc:last-child {
    margin-bottom: 0;
}

@media (max-width: 520px) {
    .reaper-quest-hero-row {
        flex-direction: column;
        align-items: stretch;
    }
    .reaper-quest-hero-media {
        width: 100%;
    }
    .reaper-quest-hero-img {
        width: 100%;
        max-width: 100%;
        object-fit: cover;
    }
    .reaper-claim-button {
        width: 100%;
    }
}

/* When expanded, keep fixed width so column size is stable (minimized overrides below). */
.daily-mission-panel:not(.daily-mission-panel--minimized) {
    width: min(600px, calc(100vw - 20px));
}

@media (min-width: 641px) {
    .daily-mission-panel {
        width: min(840px, calc(100vw - 20px));
        max-height: 320px;
    }
    .daily-mission-panel:not(.daily-mission-panel--minimized) {
        width: min(840px, calc(100vw - 20px));
    }
    .daily-mission-panel-body {
        max-height: 258px;
    }
}

/* When minimized: draggable, position set by JS. z-index below RPG window (10) and side panel (500) so it stays behind. */
/* Use move cursor (built-in) so it's visible on light panel; grab/grabbing can be white on some themes. */
.daily-mission-panel--minimized.daily-mission-panel--draggable {
    width: fit-content;
    cursor: move;
    z-index: 5;
}
.daily-mission-panel--minimized.daily-mission-panel--draggable:active {
    cursor: move;
}
.daily-mission-panel--minimized.daily-mission-panel--draggable .daily-mission-panel-header {
    cursor: move;
    transition: background-color 0.15s ease;
}
.daily-mission-panel--minimized.daily-mission-panel--draggable .daily-mission-panel-header:hover {
    background-color: rgba(0, 0, 0, 0.06);
}
.daily-mission-panel--minimized.daily-mission-panel--draggable .daily-mission-panel-header:active {
    cursor: move;
}

.daily-mission-panel--minimized {
    width: fit-content;
    align-self: flex-start;
}

/* Transparent background when minimized (Daily Missions) */
.daily-mission-panel--minimized {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: none;
}

.daily-mission-panel--minimized .daily-mission-panel-body {
    display: none;
}

.daily-mission-panel--minimized .daily-mission-panel-header .daily-mission-panel-title {
    flex: 0 1 auto;
    white-space: nowrap;
}

.daily-mission-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    height: 50px;
    box-sizing: border-box;
    gap: 10px;
}

.daily-mission-toggle {
    flex-shrink: 0;
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.08);
    color: #333;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}

.daily-mission-toggle:hover {
    background: rgba(0, 0, 0, 0.12);
}

.daily-mission-panel--minimized .daily-mission-toggle i {
    transform: rotate(180deg);
}

.daily-mission-panel-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
}

.daily-mission-pending-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dc3545;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.3);
    animation: notification-dot-pulse 1.5s ease-in-out infinite;
}
.daily-mission-pending-dot.hidden {
    display: none;
}

.daily-mission-panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.daily-mission-claim-all {
    padding: 6px 12px;
    border: 1px solid rgba(76, 175, 80, 0.6);
    border-radius: 6px;
    background: rgba(76, 175, 80, 0.2);
    color: #2e7d32;
    font-size: 13px;
    cursor: pointer;
}

.daily-mission-claim-all:hover {
    background: rgba(76, 175, 80, 0.3);
}

.daily-mission-claim-all.hidden {
    display: none !important;
}

.daily-mission-panel-body {
    padding: 0 10px 12px 10px;
    max-height: 218px;
    overflow-y: auto;
}

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

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

.daily-mission-column {
    position: relative;
    min-width: 0;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 10px;
    min-height: 90px;
    display: flex;
    flex-direction: column;
}

.daily-mission-column--done {
    background: rgba(76, 175, 80, 0.15);
}

.daily-mission-column--claimed {
    background: rgba(76, 175, 80, 0.12);
}

.daily-mission-column__dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f44336;
    opacity: 0;
    transition: opacity 0.2s;
}

.daily-mission-column__dot.daily-mission-column__dot--done {
    opacity: 1;
    animation: daily-mission-dot-pulse 1.2s ease-in-out infinite;
}

.daily-mission-column__dot.daily-mission-column__dot--claimed {
    opacity: 1;
    background: #4caf50;
    animation: none;
}

@keyframes daily-mission-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.8; }
}

.daily-mission-column__name {
    font-weight: 600;
    font-size: 1em;
    margin-bottom: 4px;
    padding-right: 16px;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.daily-mission-column__desc {
    font-size: 1em;
    opacity: 0.9;
    margin-bottom: 6px;
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.daily-mission-column__progress {
    font-size: 11px;
    opacity: 0.85;
    margin-bottom: 6px;
}

.daily-mission-column__claim {
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    background: #4caf50;
    color: #fff;
    font-family: Oswald;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    margin-top: auto;
    text-transform: uppercase;
}

.daily-mission-column__claim:hover {
    background: #43a047;
}

.daily-mission-column__claim--claimed {
    background: rgba(76, 175, 80, 0.7);
    color: #fff;
    cursor: default;
}

.daily-mission-column__claim--claimed:hover {
    background: rgba(76, 175, 80, 0.7);
}

.daily-mission-column__claim:disabled:not(.daily-mission-column__claim--claimed) {
    background: rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.5);
    cursor: not-allowed;
}

.daily-mission-login-msg {
    grid-column: 1 / -1;
    text-align: center;
    padding: 12px;
    margin: 0;
    font-size: 14px;
    opacity: 0.9;
    color: #333;
}

/* RPG window (in public chat) */
.rpg-window {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(255, 255, 255, 0.98);
    display: flex;
    flex-direction: column;
    z-index: 10;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    animation: rpgWindowFadeIn 0.3s ease-out;
}

@keyframes rpgWindowFadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.rpg-window.hidden {
    display: none;
}

.rpg-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.rpg-window-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: #333;
}

.rpg-window-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rpg-window-icon-btn {
    padding: 8px;
    border: none;
    background: #e8e8e8;
    cursor: pointer;
    color: #666;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.rpg-window-icon-btn:hover {
    background: #ddd;
    color: #333;
}

.rpg-window-deploy-btn {
    padding: 6px 12px;
    border: none;
    background: #e8e8e8;
    cursor: pointer;
    color: #666;
    border-radius: 8px;
    font-family: Oswald;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.rpg-window-deploy-btn:hover {
    background: #ddd;
    color: #333;
}

.rpg-window-deploy-btn.hidden {
    display: none;
}

.rpg-window-deploy-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.rpg-window-close {
    padding: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #666;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.rpg-window-close:hover {
    background: #eee;
    color: #333;
}

.rpg-window-content {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
    font-size: 16px;
}

.rpg-window-content.hidden {
    display: none;
}

/* Purchase window (public chat overlay) — self-contained; no rpg-window / shop-window class names */
.purchase-window {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(255, 255, 255, 0.98);
    display: flex;
    flex-direction: column;
    z-index: 10;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    animation: purchaseWindowFadeIn 0.3s ease-out;
}

@keyframes purchaseWindowFadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.purchase-window.hidden {
    display: none;
}

.purchase-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.purchase-window-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: #333;
}

.purchase-window-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.purchase-window-close {
    padding: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #666;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.purchase-window-close:hover {
    background: #eee;
    color: #333;
}

.purchase-window-content {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
    font-size: 16px;
}

.purchase-window-placeholder {
    margin: 0;
    color: #666;
}

.purchase-window-gcash-img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto 16px;
    border-radius: 8px;
    object-fit: contain;
}

.purchase-window-details {
    margin: 0;
    padding: 12px 14px;
    background: #f5f5f5;
    border-radius: 8px;
    font-size: 1.05rem;
    color: #333;
    min-height: 1.25em;
}

.purchase-window-details:empty {
    min-height: 0;
    padding: 0;
    background: transparent;
}

.purchase-window-thankyou {
    margin-bottom: 16px;
}

.purchase-window-receipt-form {
    margin-top: 18px;
    padding-top: 0;
    border-top: none;
}

.purchase-window-receipt-inner {
    padding: 18px 18px 20px;
    border-radius: 14px;
    background: linear-gradient(165deg, #f8faf8 0%, #eef4f0 45%, #e8f0ea 100%);
    border: 1px solid rgba(45, 106, 79, 0.18);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(27, 67, 50, 0.08);
}

.purchase-window-receipt-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(45, 106, 79, 0.12);
}

.purchase-window-receipt-head-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(145deg, #2d6a4f 0%, #1b4332 100%);
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 4px 12px rgba(27, 67, 50, 0.25);
}

.purchase-window-receipt-head-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.purchase-window-receipt-form-title {
    font-family: Oswald, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #1b4332;
    line-height: 1.2;
}

.purchase-window-receipt-form-sub {
    font-size: 0.88rem;
    line-height: 1.45;
    color: #4a5c54;
}

.purchase-window-receipt-file-shell {
    margin-bottom: 16px;
}

.purchase-window-receipt-label {
    display: block;
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #3d5248;
    margin-bottom: 8px;
}

.purchase-window-receipt-input-wrap {
    padding: 14px 16px;
    border-radius: 10px;
    background: #fff;
    border: 2px dashed rgba(45, 106, 79, 0.35);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.purchase-window-receipt-input-wrap:focus-within {
    border-color: #2d6a4f;
    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.15);
}

.purchase-window-receipt-input {
    width: 100%;
    max-width: 100%;
    font-size: 0.92rem;
    color: #333;
    cursor: pointer;
}

.purchase-window-receipt-input::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background: #e8f0ea;
    color: #1b4332;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.purchase-window-receipt-input:hover::file-selector-button {
    background: #d4e5d9;
}

.purchase-window-receipt-input:disabled {
    cursor: not-allowed;
    opacity: 0.75;
}

.purchase-window-receipt-input:disabled::file-selector-button {
    opacity: 0.7;
    cursor: not-allowed;
}

.purchase-window-receipt-file-note {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: #6b7a72;
}

.purchase-window-receipt-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(180deg, #2f7a5c 0%, #1b4332 100%);
    color: #fff;
    font-family: Oswald, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(27, 67, 50, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.purchase-window-receipt-submit i {
    font-size: 1.05em;
    opacity: 0.95;
}

.purchase-window-receipt-form--disabled {
    opacity: 0.58;
    pointer-events: none;
}

.purchase-window-receipt-form--disabled .purchase-window-receipt-inner {
    filter: grayscale(0.08);
}

#purchase-details {
    margin-top: 10px;
    background: #333;
    color: #fff;
}

.purchase-window-receipt-submit:hover:not(:disabled) {
    filter: brightness(1.06);
    box-shadow: 0 6px 18px rgba(27, 67, 50, 0.42);
    transform: translateY(-1px);
}

.purchase-window-receipt-submit:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(27, 67, 50, 0.3);
}

.purchase-window-receipt-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    filter: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.purchase-window-receipt-hint {
    margin: 14px 0 0;
    padding: 12px 14px;
    font-size: 0.88rem;
    color: #5a6b62;
    line-height: 1.45;
    background: rgba(245, 248, 246, 0.9);
    border-radius: 10px;
    border: 1px solid rgba(45, 106, 79, 0.1);
}

.rpg-legend-window {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.rpg-legend-window.hidden {
    display: none;
}

.rpg-legend-window-content {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
    font-size: 16px;
    animation: rpgFadeIn 0.4s ease-in;
}

.rpg-attack-log-window {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.rpg-attack-log-window.hidden {
    display: none;
}

.rpg-attack-log-window-content {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
    font-size: 16px;
    animation: rpgFadeIn 0.4s ease-in;
}

.rpg-attack-log-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rpg-attack-log-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    background: #fafafa;
}

.rpg-attack-log-header {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

.rpg-attack-log-date {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.rpg-attack-log-data {
    margin-top: 8px;
}

.rpg-attack-log-text {
    margin: 0;
    padding: 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'Courier New', monospace;
    overflow-x: auto;
    word-wrap: break-word;
    color: #333;
    line-height: 1.5;
    white-space: pre-wrap;
}

.rpg-attack-log-empty {
    color: #999;
    font-style: italic;
    padding: 8px 0;
}

.rpg-legend-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rpg-legend-table {
    width: 100%;
    min-width: 320px;
    border-collapse: collapse;
}

.rpg-legend-table th {
    text-align: left;
    padding-bottom: 30px;
    font-weight: 600;
    color: #333;
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.12); */
}

.rpg-legend-table th:first-child,
.rpg-legend-table th:nth-child(2) {
    white-space: nowrap;
}

.rpg-legend-table td {
    vertical-align: top;
    padding: 6px 8px 6px 0;
}

.rpg-legend-table td:first-child {
    width: 1%;
    white-space: nowrap;
    padding-right: 12px;
    font-weight: 600;
    color: #333;
}

.rpg-legend-table td:nth-child(2) {
    width: 1%;
    white-space: nowrap;
    padding-right: 10px;
}

.rpg-legend-table td:nth-child(3) {
    padding-left: 0;
    max-width: 100%;
}

/* Responsive: stack rows as cards on narrow viewports */
@media (max-width: 600px) {
    .rpg-legend-table-wrapper {
        overflow-x: visible;
    }

    .rpg-legend-table {
        min-width: 0;
    }

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

    .rpg-legend-table tr {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .rpg-legend-table tr:last-child {
        border-bottom: 0;
    }

    .rpg-legend-table td {
        display: block;
        padding: 4px 0 6px;
        width: 100%;
        border: none;
    }

    .rpg-legend-table td:empty {
        display: none;
    }

    .rpg-legend-table td::before {
        content: attr(data-label);
        display: inline-block;
        font-weight: 600;
        color: #555;
        min-width: 5.5em;
        margin-right: 0.5em;
    }

    .rpg-legend-table td:first-child::before {
        content: none;
    }

    .rpg-legend-table td:first-child {
        font-size: 1.05em;
        padding-bottom: 2px;
        padding-right: 0;
    }

    .rpg-legend-table td:nth-child(2) {
        padding-top: 0;
        margin-top: -2px;
    }

    .rpg-legend-table td:nth-child(2)::before {
        content: none;
    }

    .rpg-legend-table td:nth-child(3),
    .rpg-legend-table td:nth-child(4) {
        padding-left: 0;
    }
}

.rpg-details {
    font-size: 16px;
    color: #333;
    animation: rpgFadeIn 0.4s ease-in;
}

@keyframes rpgFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rpg-hero-avatar-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Class portrait (same size as avatar); when stacked, avatar overlaps right half */
.rpg-class-badge {
    width: 110px;
    height: 110px;
    object-fit: cover;
    display: block;
    box-sizing: border-box;
    flex-shrink: 0;
}

.rpg-hero-avatar-wrap--stacked .rpg-class-badge {
    position: relative;
    z-index: 1;
}

.rpg-hero-avatar-wrap--stacked .rpg-hero-avatar {
    position: relative;
    z-index: 2;
    margin-left: -55px; /* half of 110px — avatar sits on top, covers right half of class image */
    flex-shrink: 0;
}

/*
 * Per-class RPG class portrait size (adjust freely).
 * Stacked avatar overlap: set margin-left to negative half of .rpg-class-badge--<name> width.
 */
.rpg-class-badge--puwersa {
    width: 120px;
    height: 120px;
}

.rpg-hero-avatar-wrap--stacked.rpg-hero-avatar-wrap--puwersa .rpg-hero-avatar {
    margin-left: -62px; /* half of 124px */
}

.rpg-class-badge--taktika {
    width: 112px;
    height: 112px;
}

.rpg-hero-avatar-wrap--stacked.rpg-hero-avatar-wrap--taktika .rpg-hero-avatar {
    margin-left: -55px; /* half of badge width above */
}

.rpg-class-badge--mahika {
    width: 110px;
    height: 110px;
}

.rpg-hero-avatar-wrap--stacked.rpg-hero-avatar-wrap--mahika .rpg-hero-avatar {
    margin-left: -55px; /* half of badge width above */
}

.rpg-hero-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-sizing: border-box;
    border: 3px solid #fff;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.35),
        0 2px 10px rgba(0, 0, 0, 0.12);
}

.rpg-name {
    font-weight: 600;
    font-size: 1.35rem;
    margin: 0 0 14px 0;
}

.rpg-class,
.rpg-def,
.rpg-debuff,
.rpg-power,
.rpg-atk,
.rpg-upshot,
.rpg-artifacts {
    margin-bottom: 14px;
    font-size: 16px;
}

.rpg-debuff-item {
    margin-top: 12px;
    padding: 12px 14px;
    background: #f3e5f5;
    border-radius: 8px;
    border-left: 3px solid #7b1fa2;
}

.rpg-debuff-skill-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
}

.rpg-debuff-icon-wrap {
    flex-shrink: 0;
}

.rpg-debuff-icon {
    /* image-rendering: pixelated; */
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.6);
}

.rpg-debuff-right {
    flex: 1;
    min-width: 0;
}

.rpg-debuff-name {
    font-weight: 600;
    font-size: 1.05rem;
    color: #4a148c;
    display: block;
}

.rpg-debuff-desc {
    margin: 8px 0 0 0;
    font-size: 15px;
    color: #555;
    line-height: 1.45;
}

.rpg-artifacts-header {
  margin-bottom: 8px;
}

.rpg-artifacts-equip-limit {
  margin-top: 4px;
  font-size: 0.95rem;
  color: #555;
  font-weight: 600;
}

.rpg-artifact-actions {
  margin-top: 8px;
}

.rpg-artifact-equip-btn,
.rpg-artifact-unequip-btn {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #7a1313;
  background: #fff;
  color: #7a1313;
  font-weight: 800;
  font-family: Oswald;
  text-transform: uppercase;
  cursor: pointer;
}

.rpg-artifact-equip-btn:hover,
.rpg-artifact-unequip-btn:hover {
  background: rgba(122, 19, 19, 0.06);
}

/* Floating scroll-to-top at bottom-right of the RPG window */
.rpg-artifacts-scroll-top {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 20;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 50%;
    background: #f5f5f5;
    color: #333;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.rpg-artifacts-scroll-top:hover {
    background: #eee;
    border-color: #999;
}

.rpg-artifacts-scroll-top.hidden {
    display: none !important;
}

.rpg-stats-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.rpg-stats-bar {
    flex-shrink: 0;
}

.rpg-stats-labels {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

.rpg-battle-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.rpg-battle-stats-pie {
    flex-shrink: 0;
}

.rpg-battle-stats-labels {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

.rpg-battle-stats-title {
    font-weight: 600;
    margin-bottom: 2px;
}

.rpg-battle-stats-total {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}

.rpg-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rpg-stat-color {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

.rpg-stat-bonus {
    color: #2e7d32;
    font-weight: 500;
}

.rpg-stat-bonus-neg {
    color: #c62828;
}

.rpg-power-value {
    margin: 6px 0 2px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

.rpg-power-formula {
    margin: 0;
    font-size: 0.9em;
    color: #666;
}

.rpg-def-item {
    margin-top: 12px;
    padding: 12px 14px;
    background: #f8f8f8;
    border-radius: 8px;
    border-left: 3px solid #e65100;
}

.rpg-def-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: #333;
    display: block;
}

.rpg-def-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.rpg-def-nrg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 0.85em;
    font-weight: 500;
    line-height: 1;
    background: #1976d2;
    color: #fff;
}

.rpg-def-cd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 0.85em;
    font-weight: 500;
    line-height: 1;
    background: #9e9e9e;
    color: #fff;
}

.rpg-def-desc,
.rpg-def-example {
    margin: 8px 0 0 0;
    font-size: 15px;
    color: #555;
    line-height: 1.45;
}

.rpg-def-example {
    font-style: italic;
    color: #666;
}

.rpg-artifact-item {
    margin-top: 12px;
    padding: 12px 14px;
    background: #f8f8f8;
    border-radius: 8px;
    border-left: 3px solid #2196f3;
}
.rpg-artifact-item--rare {
    border-left-color: #2196f3;
}
.rpg-artifact-item--epic {
    border-left-color: #9c27b0;
}
.rpg-artifact-item--legendary {
    border-left-color: #c9a227;
}
.rpg-artifact-item--mythic {
    border-left-color: #d32f2f;
}

.rpg-artifact-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 6px;
}

.rpg-artifact-stats {
    font-size: 14px;
    color: #555;
    margin-bottom: 4px;
}

.rpg-atk ul {
    margin: 6px 0 0 0;
    padding-left: 0;
    font-size: 16px;
    list-style: none;
}

.rpg-atk li {
    position: relative;
    margin-bottom: 12px;
}

@keyframes rpg-atk-upgrade-float {
    0% {
        transform: translate(-20%, -50%);
        opacity: 1;
    }
    100% {
        transform: translate(-20%, calc(-50% - 65px));
        opacity: 0;
    }
}

.rpg-atk-upgrade-float {
    position: fixed;
    left: 20%;
    top: 50%;
    font-size: 30px;
    font-family: Oswald;
    font-weight: 700;
    pointer-events: none;
    animation: rpg-atk-upgrade-float 0.7s ease-out forwards;
    z-index: 2;
}

.rpg-atk-upgrade-float--legendary {
    color: #996515;
}

.rpg-atk-upgrade-float--mythic {
    color: #b71c1c;
}

.rpg-atk-skill-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-family: Oswald;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(8, 8, 8, 1) 0%, rgba(248, 248, 248, 0.1) 100%);
    border: 1px solid #666;
    position: relative;
    overflow: hidden;
}

.rpg-atk-skill-icon {
    width: 96px;
    height: 96px;
    object-fit: contain;
    flex: 0 0 auto;
    border-radius: 8px;
    /* image-rendering: pixelated; */
}

.rpg-atk-skill-row {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.rpg-atk-skill-right {
    flex: 1;
    min-width: 0;
}

/* Old ATK styling used left margins; now layout is handled by flex. */
.rpg-atk-skill-right .rpg-atk-badges {
    margin-left: 0;
}

.rpg-atk-skill-right .rpg-atk-skill-desc {
    margin-left: 0;
}

.rpg-atk-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    margin-top: 4px;
    margin-left: 30px;
}

.rpg-atk-nrg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 0.85em;
    font-weight: 500;
    line-height: 1;
    background: #1976d2;
    color: #fff;
}

.rpg-atk-cd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 0.85em;
    font-weight: 500;
    line-height: 1;
    background: #9e9e9e;
    color: #fff;
}

.rpg-atk-skill-desc {
    color: #555;
    font-size: 15px;
    line-height: 1.4;
    margin-top: 15px;
    margin-left: 30px;
}

.rpg-atk-skill-desc .green {
    color: #4caf50;
}

.rpg-atk-skill-desc .orange {
    color: #e65100;
}

.rpg-atk-skill-desc .red {
    color: #c62828;
}

.rpg-desc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 4px !important;
    color: #fff;
    font-weight: 800;
    font-size: 0.85em;
    line-height: 1.2;
    margin: 0 2px;
    vertical-align: baseline;
}
.rpg-desc-badge b {
    font-weight: 800;
}
.rpg-desc-badge--dmg {
    background: #111;
}
.rpg-desc-badge--atk {
    background: #b71c1c;
}

.rpg-atk-upgrade-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    margin-left: 30px;
}

.upgrade-cdmgx-button,
.upgrade-atk-button {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.upgrade-cdmgx-button:hover:not(:disabled),
.upgrade-atk-button:hover:not(:disabled) {
    transform: scale(1.03);
}

.upgrade-cdmgx-button:disabled,
.upgrade-atk-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Legendary themed */
.upgrade-cdmgx-button {
    color: #fff;
    background: linear-gradient(135deg, #c9a227 0%, #996515 50%, #6b4a0f 100%);
    border: 1px solid #6b4a0f;
    box-shadow: 0 1px 4px rgba(153, 101, 21, 0.3);
}

.upgrade-cdmgx-button:hover:not(:disabled) {
    box-shadow: 0 2px 8px rgba(153, 101, 21, 0.45);
}

/* Mythic themed */
.upgrade-atk-button {
    color: #fff;
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 50%, #8b0000 100%);
    border: 1px solid #8b0000;
    box-shadow: 0 1px 4px rgba(183, 28, 28, 0.3);
}

.upgrade-atk-button:hover:not(:disabled) {
  box-shadow: 0 2px 8px rgba(183, 28, 28, 0.45);
}

.upgrade-atk-button-maxed {
  color: #333;
  background: #efefef !important;
  border-color: #424242 !important;
  cursor: default !important;
}

/* Upshot Skills (below ATK Skills in RPG window) */
.rpg-upshot.rpg-upshot--locked {
    position: relative;
}

.rpg-upshot.rpg-upshot--locked .rpg-upshot-list {
    filter: blur(2.5px);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}

.rpg-upshot.rpg-upshot--locked::after {
    content: "Upshot is locked — unlock to view";
    position: absolute;
    left: 50%;
    top: 46px;
    transform: translateX(-50%);
    padding: 6px 10px;
    border-radius: 4px;
    font-family: Oswald;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    font-size: 12px;
    color: #7a1313;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(122, 19, 19, 0.25);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.rpg-upshot ul.rpg-upshot-list {
    list-style: none;
    margin: 6px 0 0 0;
    padding: 0;
}
.rpg-upshot-item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.rpg-upshot-item:last-child {
    border-bottom: none;
}
.rpg-upshot-row {
    display: flex;
    align-items: center;
    /* align-items: flex-start; */
    gap: 10px;
}
.rpg-upshot-img {
    width: 100px;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
}
.rpg-upshot-body {
    flex: 1;
    min-width: 0;
}
.rpg-upshot-name {
    font-weight: bold;
    font-size: 18px;
    color: #a11010;
}

.rpg-upshot-slot {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: Oswald;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    color: #333;
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.12);
    vertical-align: middle;
}

.rpg-upshot-slot--equipped {
    background: rgba(76, 175, 80, 0.22);
    border-color: rgba(46, 125, 50, 0.35);
    color: #1b5e20;
}

.rpg-upshot-slot--unequipped {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.12);
    color: #444;
}

.rpg-upshot-actions {
    margin-top: 10px;
}

.equip-upshot-skill-button {
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #7a1313;
    background: #fff;
    color: #7a1313;
    font-weight: 800;
    font-family: Oswald;
    text-transform: uppercase;
    cursor: pointer;
}

.equip-upshot-skill-button:hover {
    background: rgba(122, 19, 19, 0.06);
}

.unequip-upshot-skill-button {
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #7a1313;
    background: #fff;
    color: #7a1313;
    font-weight: 800;
    font-family: Oswald;
    text-transform: uppercase;
    cursor: pointer;
}

.unequip-upshot-skill-button:hover {
    background: rgba(122, 19, 19, 0.06);
}
.rpg-upshot-desc {
    margin: 6px 0 0 0;
    font-size: 16px;
    font-weight: bold;
    color: #555;
    line-height: 1.4;
}
.rpg-upshot-expanded {
    margin: 8px 0 0 0;
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1.45;
    color: #8b0b0b;
    background: #fcdbdf;
    border: 2px dashed #f07373;
    border-radius: 4px;
}

.rpg-upshot-unlock {
    margin: 22px 0 24px 0;
}

.rpg-upshot-unlock-card {
    max-width: 520px;
    margin: 0 auto;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 235, 238, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
    border: 1px solid rgba(139, 0, 0, 0.2);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

.rpg-upshot-unlock-remark {
    margin: 0 0 10px 0;
    color: #5d0a0a;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    text-align: center;
}

.unlock-upshot-button {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid #8b0000;
    background: linear-gradient(135deg, #c62828 0%, #8b0000 100%);
    color: #fff;
    font-family: Oswald;
    text-transform: uppercase;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(139, 0, 0, 0.18);
}

.unlock-upshot-button:hover {
    filter: brightness(1.03);
}

.rpg-loading,
.rpg-empty,
.rpg-error {
    margin: 0;
    font-size: 16px;
    color: #666;
}

.rpg-error {
    color: #c62828;
}

/* Create Hero form (no RPG data yet) */
.rpg-create-hero {
    padding: 16px;
    font-size: 16px;
    color: #333;
}
.rpg-create-hero-title {
    margin: 0 0 20px 0;
    font-size: 1.25rem;
    font-weight: 600;
}
.rpg-create-hero-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.rpg-create-hero-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
}
.rpg-create-hero-hint {
    font-weight: normal;
    color: #666;
    font-size: 0.9em;
}
.rpg-create-hero-field-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}
.rpg-create-hero-class-item-icon {
    width: 5rem;
}

/* Section headers: Class, ATK Skills, DEF Skills */
.rpg-create-hero-section-header {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: 0.02em;
    padding: 6px 12px;
    margin-bottom: 10px;
    border-bottom: 2px solid #e0e0e0;
    background-color: #e8e8e8;
    border-radius: 4px;
}
.rpg-create-hero-section-header .rpg-create-hero-hint {
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: normal;
}

/* DEF Skills: hint below header with light-yellow box */
.rpg-create-hero-def-header-wrap {
    display: block;
    margin-bottom: 10px;
}
.rpg-create-hero-def-header-wrap .rpg-create-hero-section-header {
    display: inline-block;
    margin-bottom: 0;
}
.rpg-create-hero-def-header-wrap .rpg-create-hero-section-hint {
    display: block;
    margin-top: 8px;
    padding: 6px 10px;
    font-size: 0.9rem;
    font-weight: 400;
    color: #6b5a00;
    background-color: #fffde7;
    border: 1px dashed #d4b106;
    border-radius: 4px;
}

/* ATK Skills: hint below header, same yellow box, only visible when class selected */
.rpg-create-hero-atk-header-wrap {
    display: block;
    margin-bottom: 10px;
}
.rpg-create-hero-atk-header-wrap .rpg-create-hero-section-header {
    display: inline-block;
    margin-bottom: 0;
}
.rpg-create-hero-atk-hint {
    display: none;
    margin-top: 8px;
    padding: 6px 10px;
    font-size: 0.9rem;
    font-weight: 400;
    color: #6b5a00;
    background-color: #fffde7;
    border: 1px dashed #d4b106;
    border-radius: 4px;
}
.rpg-create-hero-atk-hint.rpg-create-hero-atk-hint--visible {
    display: block;
}
.rpg-create-hero-actions {
    margin-top: 8px;
}
.rpg-create-hero-deploy {
    padding: 10px 24px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, #2e7d32 0%, #1b5e20 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.rpg-create-hero-deploy:hover:not(:disabled) {
    background: linear-gradient(180deg, #388e3c 0%, #2e7d32 100%);
}
.rpg-create-hero-deploy:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.rpg-create-hero-field input[type="text"] {
    width: 100%;
    max-width: 280px;
    padding: 8px 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
}
.rpg-create-hero-class-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rpg-create-hero-class-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.rpg-create-hero-class-item:hover {
    border-color: #bbb;
    background-color: #f8f8f8;
}
.rpg-create-hero-class-item.selected {
    border-color: #1976d2;
    background-color: #e3f2fd;
}
.rpg-create-hero-class-item-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.rpg-create-hero-class-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rpg-create-hero-class-details {
    display: none;
    width: 100%;
    margin-top: 8px;
    padding: 8px 10px;
    background: #fafafa;
    border-radius: 6px;
    box-sizing: border-box;
}

.rpg-create-hero-class-item.expanded .rpg-create-hero-class-details {
    display: block;
}

.rpg-create-hero-class-subheader {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
    font-family: 'Oswald', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 0.03em;

    background-color: #333;
    color: #fff;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px !important;
}

.rpg-create-hero-class-atk-block,
.rpg-create-hero-class-def-block {
    margin-bottom: 6px;
    padding: 6px 8px;
    border-radius: 4px;
}

.rpg-create-hero-class-atk-block {
    background-color: #ffe6e6; /* light red */
}

.rpg-create-hero-class-def-block {
    background-color: #f3e0d0; /* light brown */
}

/* In class details, stack each ATK/DEF skill name and description vertically */
.rpg-create-hero-class-atk-block .rpg-create-hero-atk-item {
    display: block;
    margin-bottom: 20px;
}

.rpg-create-hero-class-def-block .rpg-create-hero-def-item {
    display: block;
    margin-bottom: 20px;
}
.rpg-create-hero-class-item-name {
    font-weight: 600;
    font-size: 1rem;
}
.rpg-create-hero-class-item-desc {
    font-size: 0.9em;
    color: #555;
}
.rpg-create-hero-class-item-attrs {
    font-size: 0.9em;
    color: #555;
}

@media (max-width: 600px) {
    .rpg-create-hero-class-item {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 10px 12px;
    }
    .rpg-create-hero-class-item-content {
        flex-direction: row;
        align-items: flex-start;
        gap: 8px;
    }
    .rpg-create-hero-class-item-icon {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }
    .rpg-create-hero-class-item-name {
        font-size: 0.95rem;
    }
    .rpg-create-hero-class-item-attrs {
        font-size: 0.8rem;
    }
    .rpg-create-hero-class-details {
        margin-top: 6px;
        padding: 6px 8px;
    }
    .rpg-create-hero-class-subheader {
        font-size: 0.9rem;
    }
}

/* ATK Skills (create hero form) */
.rpg-create-hero-atk-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.rpg-create-hero-atk-list.rpg-create-hero-atk-list--visible {
    animation: rpg-atk-fade-in 0.35s ease-out forwards;
}
@keyframes rpg-atk-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.rpg-create-hero-atk-placeholder,
.rpg-create-hero-atk-empty {
    margin: 0;
    color: #666;
    font-size: 0.95em;
}
.rpg-create-hero-atk-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-weight: normal;
}
.rpg-create-hero-atk-item input {
    margin: 0;
    flex-shrink: 0;
    order: 2;
    align-self: flex-start;
}
.rpg-create-hero-atk-item-content {
    order: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.rpg-create-hero-def-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.rpg-create-hero-def-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-weight: normal;
}
.rpg-create-hero-def-item input {
    margin: 0;
    flex-shrink: 0;
    order: 2;
    align-self: flex-start;
}
.rpg-create-hero-def-item-content {
    order: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.rpg-create-hero-def-detail {
    display: block;
    margin-top: 4px;
}
.rpg-create-hero-def-item .rpg-def-desc,
.rpg-create-hero-def-item .rpg-def-example {
    margin: 4px 0 0 0;
    font-size: 0.9em;
    color: #555;
}
.rpg-create-hero-def-item .rpg-def-example {
    font-style: italic;
    color: #666;
}

/* Photo Upload Interface */
.photo-upload-interface,
.profile-edit-interface,
.craft-artifact-interface {
    padding: 20px;
}

.craft-artifact-interface {
    /* Blend artwork with white overlay so foreground text stays readable. */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.2)),
        url('assets/img/craft-artifact.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: lighten;
    border-radius: 6px;
}

.photo-upload-interface h3,
.profile-edit-interface h3,
.craft-artifact-interface h3 {
    margin: 0 0 20px 0;
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

/* Craft Artifact Interface */
.craft-artifact-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.craft-artifact-badges .craft-artifact-badge {
    margin-right: 0;
}

.craft-artifact-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    user-select: none;
    border: none;
    transition: opacity 0.2s, filter 0.2s;
    position: relative;
}

.craft-artifact-badge input {
    margin: 0;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    border: 1px solid #fff !important;
    outline: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
}
.craft-artifact-badge input:focus {
    outline: 1px solid #fff;
    outline-offset: 1px;
}

.craft-artifact-badge:hover {
    opacity: 0.9;
    filter: brightness(1.05);
}

.craft-artifact-badge:has(input:checked) {
    filter: brightness(1.15);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* Checkmark inside checkbox when checked */
.craft-artifact-badge:has(input:checked)::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    width: 6px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-50%) rotate(45deg);
    margin-top: -1px;
    pointer-events: none;
}

.craft-artifact-badge-hp {
    background: #4caf50; /* linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%); */
}

.craft-artifact-badge-atk {
    background: #f44336; /* linear-gradient(135deg, #c62828 0%, #b71c1c 100%); */
}

.craft-artifact-badge-def {
    background: #795548; /* linear-gradient(135deg, #724639 0%, #3e2723 100%); */
}

.craft-artifact-badge-spd {
    background: #d1b200; /* linear-gradient(135deg, #f9a825 0%, #f57f17 100%); */
}

.craft-artifact-badge-spd input {
    accent-color: #1a1a1a;
}

.craft-artifact-badge-acc {
    background: #ec3981; /* pink – matches endless tower */
}

.craft-artifact-badge-res {
    background: #ef6c00; /* linear-gradient(135deg, #ec0335 0%, #ef6c00 100%); */
}

/* Gemstone inventory panel – same attribute colors as craft artifacts */
.gemstone-inventory-content {
    margin: 0;
}
.gemstone-inventory-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px 0;
}
.gemstone-inventory-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border: none;
    min-width: 80px;
}
.gemstone-inventory-badge .gemstone-inventory-count {
    font-variant-numeric: tabular-nums;
    margin-left: 2px;
}

/* Crystal inventory panel – tabular layout with light grey grid */
.crystal-inventory-content {
    margin: 0;
}
.crystal-inventory-hint {
    font-family: Oswald;
}
.crystal-inventory-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #d0d0d0;
    font-size: 14px;
    margin: 0 0 12px 0;
}
.crystal-inventory-table th,
.crystal-inventory-table td {
    border: 1px solid #d0d0d0;
    padding: 8px 12px;
    text-align: left;
}
.crystal-inventory-th {
    background: #e8e8e8;
    font-weight: 600;
}
.crystal-inventory-cell {
    background: #fff;
}
.crystal-inventory-name {
    font-weight: 600;
}
.crystal-inventory-name.crystal-inventory-convertible {
    cursor: pointer;
}
.crystal-inventory-name.crystal-inventory-convertible:hover {
    filter: brightness(1.05);
}
.crystal-inventory-name.level-reward-rare { color: #1565c0; }
.crystal-inventory-name.level-reward-epic { color: #6a1b9a; }
.crystal-inventory-name.level-reward-legendary { color: #996515; }
.crystal-inventory-name.level-reward-mythic { color: #b71c1c; }
.crystal-inventory-count {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.crystal-convert-summary {
    margin-bottom: 12px;
    color: #333;
    font-size: 14px;
}
.crystal-convert-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.crystal-convert-label {
    font-weight: 600;
    color: #333;
}
.crystal-convert-range {
    width: 100%;
    height: 10px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}
/* Rare → Epic: blue (wider) to purple */
#crystal-convert-overlay[data-convert-from="RARE"] .crystal-convert-range::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(to right, #1565c0 0%, #1565c0 65%, #6a1b9a 100%);
}
#crystal-convert-overlay[data-convert-from="RARE"] .crystal-convert-range::-moz-range-track {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(to right, #1565c0 0%, #1565c0 65%, #6a1b9a 100%);
}
/* Epic → Legendary: purple (wider) to legendary (gold/brown) */
#crystal-convert-overlay[data-convert-from="EPIC"] .crystal-convert-range::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(to right, #6a1b9a 0%, #6a1b9a 65%, #996515 100%);
}
#crystal-convert-overlay[data-convert-from="EPIC"] .crystal-convert-range::-moz-range-track {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(to right, #6a1b9a 0%, #6a1b9a 65%, #996515 100%);
}
/* Legendary → Mythic: legendary (wider) to red */
#crystal-convert-overlay[data-convert-from="LEGENDARY"] .crystal-convert-range::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(to right, #996515 0%, #996515 65%, #b71c1c 100%);
}
#crystal-convert-overlay[data-convert-from="LEGENDARY"] .crystal-convert-range::-moz-range-track {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(to right, #996515 0%, #996515 65%, #b71c1c 100%);
}
.crystal-convert-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #555;
    cursor: pointer;
    margin-top: -5px;
}
.crystal-convert-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #555;
    cursor: pointer;
}
.crystal-convert-preview {
    font-size: 14px;
    color: #333;
}
.crystal-convert-hint {
    font-size: 12px;
    color: #666;
}

.craft-artifact-gem-amounts {
    margin-bottom: 14px;
    padding: 10px 0;
}
.craft-artifact-gem-amounts.hidden {
    display: none !important;
}
.craft-artifact-gem-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 14px;
}
.craft-artifact-gem-row .craft-artifact-gem-name {
    min-width: 36px;
    font-weight: 600;
    color: #333;
}
.craft-artifact-gem-row .craft-artifact-gem-available {
    color: #666;
    margin-right: 4px;
}
.craft-artifact-gem-row .craft-artifact-gem-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.craft-artifact-gem-row .craft-artifact-gem-minus,
.craft-artifact-gem-row .craft-artifact-gem-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #f5f5f5;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}
.craft-artifact-gem-row .craft-artifact-gem-minus:hover,
.craft-artifact-gem-row .craft-artifact-gem-plus:hover {
    background: #e8e8e8;
}
.craft-artifact-gem-row .craft-artifact-gem-value {
    min-width: 24px;
    text-align: center;
    font-weight: 600;
}

.craft-artifact-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 20px;
}
.craft-artifact-form #craft-artifact-name {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}
.craft-artifact-form #craft-artifact-name:focus {
    outline: none;
    border-color: #c9a227;
}
.craft-artifact-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(135deg, #c9a227 0%, #8b6914 100%);
    color: white;
    transition: transform 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}
.craft-artifact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 162, 39, 0.4);
}

/* Profile Edit Interface */
.profile-edit-form {
    margin-bottom: 20px;
}

.profile-edit-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.profile-edit-form input[type="text"] {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.profile-edit-form input[type="text"]:focus {
    outline: none;
    border-color: #c9a227;
}

.form-hint {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
    margin-bottom: 16px;
}

.profile-edit-error {
    display: none;
    background: #fee;
    color: #c33;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 14px;
    text-align: center;
}

.profile-edit-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

/* User profile view (readonly) */
.user-profile-view {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.user-profile-view .user-profile-view-display-name,
.user-profile-view .user-profile-view-username,
.user-profile-view .btn-close-interface {
    align-self: stretch;
}

/* Keep profile photo, display name and username centered (override .side-panel-middle *) */
.user-profile-view .user-profile-view-avatar-wrap {
    margin-left: auto;
    margin-right: auto;
}

.user-profile-view .user-profile-view-avatar-wrap .user-profile-view-avatar,
.user-profile-view .user-profile-view-avatar-wrap .user-profile-view-avatar-placeholder {
    margin-left: auto;
    margin-right: auto;
}

#user-profile-view .user-profile-view-display-name,
#user-profile-view .user-profile-view-username {
    display: block;
    width: 100%;
    text-align: center !important;
}

.user-profile-view h3 {
    margin: 0 0 20px 0;
    font-size: 16px;
    color: #333;
    font-weight: 600;
    text-align: center;
}

.user-profile-view-avatar-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.user-profile-view-avatar {
    display: block;
    width: 290px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    object-fit: cover;
    border: 4px solid #e0e0e0;
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.user-profile-view-avatar-placeholder {
    width: 290px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;    
    background: linear-gradient(135deg, #8b6914 0%, #c9a227 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    font-weight: 600;
    color: white;
    border: 4px solid #e0e0e0;
}

.user-profile-view-avatar-placeholder.hidden {
    display: none !important;
}

.user-profile-view-display-name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 4px;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.user-profile-view-username {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-bottom: 12px;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Profile icons – same tight spacing as input icons, centered under username */
/* Override .side-panel-middle * { margin-right: auto } so icons stay together and centered */
.user-profile-view .profile-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    position: relative;
    z-index: 2;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.user-profile-view .profile-icon-btn {
    cursor: pointer;
    color: #666;
    font-size: 1.1rem;
    /* Match legacy icon chip: symmetric padding inside 40×40 so glyphs center (asymmetric 10px 12px squeezed FA/Bi) */
    padding: 10px;
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    background: #e8e8e8;
    border: none;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    flex-shrink: 0;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.user-profile-view .profile-icon-btn i {
    pointer-events: none;
    font-size: 1.1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    height: 1.15em;
    margin: 0;
    vertical-align: middle;
}

.user-profile-view .profile-icons .hero-icon {
    width: 1.1rem;
    height: 1.1rem;
    object-fit: contain;
}

.user-profile-view .profile-icon-btn:hover,
.user-profile-view .profile-icon-btn:focus-visible {
    color: #c9a227;
    background: #ddd;
    outline: none;
}

.user-profile-view .profile-icon-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.45);
}

/* Status interface (side-panel middle) */
.status-interface {
    padding: 20px;
}

.status-interface h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

.status-interface-hint {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: #666;
}

.status-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.status-option {
    padding: 12px 16px;
    border-radius: 8px;
    border: 2px solid transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s, border-color 0.2s, transform 0.1s;
}

.status-option:hover {
    transform: translateX(2px);
}

.status-option-active {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #4caf50;
}

.status-option-active:hover {
    background: #c8e6c9;
}

.status-option-away {
    background: #fffde7;
    color: #f9a825;
    border-color: #ffc107;
}

.status-option-away:hover {
    background: #fff9c4;
}

.status-option-busy {
    background: #ffebee;
    color: #c62828;
    border-color: #f44336;
}

.status-option-busy:hover {
    background: #ffcdd2;
}

.upload-area {
    border: 2px dashed #c9a227;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    background: #fff9e6;
    transition: background 0.2s;
    cursor: pointer;
}

.upload-area:hover {
    background: #fff5d6;
}

.upload-area.drag-over {
    background: #ffeeaa;
    border-color: #8b6914;
}

.upload-label {
    cursor: pointer;
    display: block;
}

.upload-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

.upload-hint {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}

.photo-preview-container {
    margin-top: 20px;
    text-align: center;
}

.photo-preview {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
}

.upload-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.btn-upload,
.btn-cancel,
.btn-close-interface {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-upload {
    background: linear-gradient(135deg, #c9a227 0%, #8b6914 100%);
    color: white;
}

.btn-upload:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 162, 39, 0.4);
}

.btn-cancel {
    background: #f0f0f0;
    color: #666;
}

.btn-cancel:hover {
    background: #e0e0e0;
}

.btn-close-interface {
    margin-top: 20px;
    background: #f0f0f0;
    color: #666;
    width: 100%;
}

.btn-close-interface:hover {
    background: #e0e0e0;
}

.side-panel-input-spacer {
    flex-shrink: 0;
    height: 5px;
}

/* ≥500px: panel visible when .side-panel-visible, hidden otherwise */
.app-wrapper:not(.side-panel-visible) .side-panel {
    width: 0;
    min-width: 0;
    overflow: hidden;
    border-left: none;
    opacity: 0;
}

.side-panel-inventory-intro {
    font-family: Oswald;
    margin-bottom: 10px;
}

@media (min-width: 500px) {
    .side-panel {
        width: 480px;
    }
    .side-panel-toggle-wrap.panel-open {
        right: 480px;
    }
}

@media (max-width: 499px) {

    .side-panel {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        width: 320px;
        z-index: 500;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
        transform: translateX(100%);
    }

    /* <500px: button position matches 320px panel width */
    .side-panel-toggle-wrap.panel-open {
        right: 320px;
    }

    /* <500px: panel shown when .side-panel-visible */
    .app-wrapper.side-panel-visible .side-panel {
        transform: translateX(0);
        opacity: 1;
    }

    .app-wrapper:not(.side-panel-visible) .side-panel {
        width: 320px;
        min-width: 320px;
        pointer-events: none;
    }

    /* On mobile: no overlap — header stays on top and is never cut */
    .chat-container {
        margin-top: 0;
    }
    .messages {
        padding-top: 20px;
    }

    /* Message time below username on mobile */
    .message-username {
        flex: none;
    }
    .message-time {
        width: 100%;
        margin-left: 0;
        padding-left: 38px;
    }

    /* Bigger icons on mobile for easier tapping */
    .input-icons .fa-solid,
    .input-icons .bi,
    .input-icons i {
        font-size: 1.5rem !important;
        padding: 12px 14px;
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
        box-sizing: border-box;
        background: #e8e8e8;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Keep GIF button same size as other icons on mobile (text can make it grow) */
    #emote-picker-btn {
        font-size: 1rem !important;
        max-width: 48px;
        max-height: 44px;
        min-width: 48px;
        min-height: 44px;
    }
    /* Profile view icons – same bigger tap targets as input icons on mobile */
    .user-profile-view .profile-icon-btn {
        padding: 12px 14px;
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }

    .user-profile-view .profile-icon-btn i {
        font-size: 1.5rem !important;
        width: 1em;
        height: 1em;
    }

    .user-profile-view .profile-icons .hero-icon {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
    /* Prevent horizontal scroll: constrain profile view and avatar to panel width */
    .user-profile-view {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    .user-profile-view .user-profile-view-avatar-wrap {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    .user-profile-view .user-profile-view-avatar,
    .user-profile-view .user-profile-view-avatar-placeholder {
        max-width: 100%;
    }
    
    /* RPG hero avatar and pie: 50% size on mobile, keep matching */
    .rpg-class-badge {
        width: 55px;
        height: 55px;
    }

    .rpg-class-badge--puwersa {
        width: 64px;
        height: 64px;
    }

    .rpg-hero-avatar-wrap--stacked.rpg-hero-avatar-wrap--puwersa .rpg-hero-avatar {
        margin-left: -32px; /* half of 64px */
    }

    .rpg-class-badge--taktika {
        width: 55px;
        height: 55px;
    }

    .rpg-hero-avatar-wrap--stacked.rpg-hero-avatar-wrap--taktika .rpg-hero-avatar {
        margin-left: -27.5px; /* half of 55px */
    }

    .rpg-class-badge--mahika {
        width: 55px;
        height: 55px;
    }

    .rpg-hero-avatar-wrap--stacked.rpg-hero-avatar-wrap--mahika .rpg-hero-avatar {
        margin-left: -27.5px; /* half of 55px */
    }

    .rpg-hero-avatar-wrap--stacked .rpg-hero-avatar {
        margin-left: -27.5px; /* half of 55px */
    }

    .rpg-hero-avatar {
        width: 55px;
        height: 55px;
        border-width: 2px;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.35),
            0 1px 6px rgba(0, 0, 0, 0.12);
    }
    
    .rpg-stats-bar {
        width: 90px;
        height: 66px;
    }
        
    .side-panel-toggle .toggle-icon-unlock,
    .side-panel-toggle .toggle-icon-lock {
        font-size: 24px;
        
    }
    .side-panel-bottom .status-dot {
        width: 12px;
        height: 12px;
    }
    .profile-app-info .logout-btn,
    .profile-app-info .profile-btn,
    .profile-app-info .hero-btn {
        min-width: 48px;
        min-height: 48px;
        padding: 12px 14px;
        font-size: 1.5rem;
    }

    .profile-app-info .hero-btn .hero-icon {
        width: 1.5rem;
        height: 1.5rem;
    }    
    
    /* Extra right padding on panel bottom so content doesn't touch the edge */
    .side-panel-bottom {
        padding-right: 20px;
    }
}

.chat-header {
    flex-shrink: 0;
    min-height: 52px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    color: #333;
    padding: 10px 20px 20px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    overflow: visible;
}

.header-logo {
    display: block;
    flex: 1;
    min-width: 0;
    width: 100%;
    max-height: 80px;
    height: auto;
    object-fit: contain;
    object-position: left center;
    z-index: 1;
}

/* "Users online" at bottom-right of chat header, so it appears at top-right of chat content */
.online-users-float {
    position: absolute;
    bottom: -40px;
    right: 18px;
    z-index: 10;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    opacity: 0.9;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.online-users-float i {
    font-size: 20px;
    color: #b7b5b1;
}

.online-users-float .online-users-dot {
    animation: status-dot-pulse 2s ease-in-out infinite;
    margin-left: 4px;
}

/* All notifications stack in one column; empty by default. Each child is a dynamic div with class .private-chat-notifications, .game-invite-notifications, or .game-session-notifications */
.notifications-stack {
    position: absolute;
    top: 150%;
    right: 18px;
    z-index: 10;
    width: 48px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0;
    transition: top 0.2s ease;
}
.chat-header:has(#new-messages-indicator:not(.hidden)) .notifications-stack {
    top: calc(150% + 50px);
}

/* Temporary: button to destroy session for testing ensureSession */
.destroy-session-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 11;
    font-size: 11px;
    padding: 4px 8px;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.85;
}
.destroy-session-btn:hover {
    opacity: 1;
}

.notifications-stack > * {
    margin-top: -14px;
}
.notifications-stack > *:first-child {
    margin-top: 0;
}

/* Single notification item: private chat (gold) */
.private-chat-notifications {
    position: relative;
    width: 48px;
    height: 48px;
    cursor: pointer;
    border-radius: 50%;
    overflow: visible;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
    animation: notification-fade-in 0.3s ease-out;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.private-chat-notifications:hover {
    transform: translateZ(0) scale(1.1);
}
.private-chat-notifications .private-chat-notification-avatar {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

@keyframes notification-fade-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.private-chat-notifications .private-chat-notification-avatar,
.private-chat-notifications .private-chat-notification-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.private-chat-notifications .private-chat-notification-placeholder {
    background: linear-gradient(135deg, #8b6914 0%, #c9a227 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    color: white;
}
.private-chat-notifications .private-chat-notification-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #dc3545;
    border-radius: 50%;
    border: 2px solid white;
    animation: notification-dot-pulse 1.5s ease-in-out infinite;
}

@keyframes notification-dot-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

/* Single notification item: game invite (blue) */
.game-invite-notifications {
    position: relative;
    width: 48px;
    height: 48px;
    cursor: pointer;
    border-radius: 50%;
    overflow: visible;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
    animation: notification-fade-in 0.3s ease-out;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.game-invite-notifications:hover {
    transform: translateZ(0) scale(1.1);
}
.game-invite-notifications .game-invite-notification-avatar {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}
.game-invite-notifications .game-invite-notification-avatar,
.game-invite-notifications .game-invite-notification-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.game-invite-notifications .game-invite-notification-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
}
.game-invite-notifications .game-invite-notification-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #2196f3;
    border-radius: 50%;
    border: 2px solid white;
    animation: notification-dot-pulse 1.5s ease-in-out infinite;
}
.game-invite-notifications .game-notification-icon,
.game-session-notifications .game-notification-icon {
    position: absolute;
    bottom: 2px;
    left: -2px;
    font-size: 16px;
    padding: 2px 14px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.6);
    color: #2196f3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    display: none;
}

/* Single notification item: game session / resume game (pink dot to distinguish from blue game-invite) */
.game-session-notifications {
    position: relative;
    width: 48px;
    height: 48px;
    cursor: pointer;
    border-radius: 50%;
    overflow: visible;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
    animation: notification-fade-in 0.3s ease-out;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.game-session-notifications:hover {
    transform: translateZ(0) scale(1.1);
}
.game-session-notifications .game-session-notification-avatar {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}
.game-session-notifications .game-session-notification-avatar,
.game-session-notifications .game-session-notification-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.game-session-notifications .game-session-notification-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
}
.game-session-notifications .game-session-notification-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: #f44336;
    border-radius: 50%;
    border: 2px solid white;
    animation: notification-dot-pulse 1.5s ease-in-out infinite, game-session-dot-rgb 2.5s linear infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: white;
    line-height: 1;
}
@keyframes game-session-dot-rgb {
    0%, 100% { background-color: #f44336; box-shadow: 0 0 6px #f44336; }
    33% { background-color: #4caf50; box-shadow: 0 0 6px #4caf50; }
    66% { background-color: #2196f3; box-shadow: 0 0 6px #2196f3; }
}

/* Team-up Endless Tower invite notification: like game invite, red bigger pulsating dot with chess-rook icon inside */
.teamup-invite-notifications {
    position: relative;
    width: 48px;
    height: 48px;
    cursor: pointer;
    border-radius: 50%;
    overflow: visible;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
    animation: notification-fade-in 0.3s ease-out;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.teamup-invite-notifications:hover {
    transform: translateZ(0) scale(1.1);
}
.teamup-invite-notifications .teamup-invite-notification-avatar,
.teamup-invite-notifications .teamup-invite-notification-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.teamup-invite-notifications .teamup-invite-notification-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
}
.teamup-invite-notifications .teamup-invite-notification-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    background: #c62828;
    border-radius: 50%;
    border: 2px solid white;
    animation: notification-dot-pulse 1.5s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 6px rgba(198, 40, 40, 0.6);
}
.teamup-invite-notifications .teamup-invite-notification-dot .teamup-invite-notification-icon {
    font-size: 11px;
    color: white;
    pointer-events: none;
}

/* Team-up Endless Tower window (5-min countdown); behaves like game window */
.teamup-endlesstower-window .teamup-countdown-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.teamup-endlesstower-window .teamup-countdown {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    font-variant-numeric: tabular-nums;
}

/* Team-up session (resume) notification: return to countdown window */
.teamup-session-notifications {
    position: relative;
    width: 48px;
    height: 48px;
    cursor: pointer;
    border-radius: 50%;
    overflow: visible;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
    animation: notification-fade-in 0.3s ease-out;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.teamup-session-notifications:hover {
    transform: translateZ(0) scale(1.1);
}
.teamup-session-notifications .teamup-session-notification-avatar,
.teamup-session-notifications .teamup-session-notification-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.teamup-session-notifications .teamup-session-notification-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #c62828 0%, #8e0000 100%);
}
.teamup-session-notifications .teamup-session-notification-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    background: #c62828;
    border-radius: 50%;
    border: 2px solid white;
    animation: notification-dot-pulse 1.5s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 6px rgba(198, 40, 40, 0.6);
}
.teamup-session-notifications .teamup-session-notification-dot .teamup-session-notification-icon {
    font-size: 11px;
    color: white;
    pointer-events: none;
}

/* Game list panel (side panel) */
.game-list-panel {
    padding: 12px 0;
}
.game-list-panel h3 {
    margin: 0 0 12px 0;
    font-size: 1.1rem;
    color: #333;
}
.game-list {
    list-style: none;
    margin: 0 0 12px 0;
    padding: 0;
}
.game-list-item {
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    border: none;
    background: #f5f5f5;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    margin-bottom: 8px;
    transition: background 0.2s;
}
.game-list-item:hover {
    background: #e0e0e0;
}
.game-list-item:focus {
    background: #f5f5f5;
}
.game-list-item:focus:hover {
    background: #e0e0e0;
}

/* Private game window (tic-tac-toe) */
.private-game-window {
    display: none;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    max-height: 100%;
    padding: 16px;
    padding-bottom: 24px;
    overflow: hidden;
}
.private-game-window.active {
    display: flex;
}
.game-window-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.game-window-header {
    flex-shrink: 0;
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #555;
    font-weight: bold;
    text-transform: uppercase;
}
.game-mechanics {
    flex-shrink: 0;
    min-height: 0;
}
/* Wrapper so board stays centered; no flex: 1 to avoid wide gap above ttt-status */
.private-game-window .ttt-board-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ttt-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
    min-width: 280px;
    max-width: 360px;
    aspect-ratio: 1;
    min-height: 280px;
    position: relative;
}
.ttt-winner-line {
    position: absolute;
    background: #66bb6a;
    pointer-events: none;
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(102, 187, 106, 0.5);
}
.ttt-winner-line[data-line="row-0"] { top: 16.666%; left: 0; right: 0; height: 10px; transform: translateY(-50%); }
.ttt-winner-line[data-line="row-1"] { top: 50%; left: 0; right: 0; height: 10px; transform: translateY(-50%); }
.ttt-winner-line[data-line="row-2"] { top: 83.333%; left: 0; right: 0; height: 10px; transform: translateY(-50%); }
.ttt-winner-line[data-line="col-0"] { left: 16.666%; top: 0; bottom: 0; width: 10px; transform: translateX(-50%); }
.ttt-winner-line[data-line="col-1"] { left: 50%; top: 0; bottom: 0; width: 10px; transform: translateX(-50%); }
.ttt-winner-line[data-line="col-2"] { left: 83.333%; top: 0; bottom: 0; width: 10px; transform: translateX(-50%); }
.ttt-winner-line[data-line="diag-0"] { left: 50%; top: 50%; width: 141.42%; height: 10px; transform: translate(-50%, -50%) rotate(45deg); }
.ttt-winner-line[data-line="diag-1"] { left: 50%; top: 50%; width: 141.42%; height: 10px; transform: translate(-50%, -50%) rotate(-45deg); }
.ttt-cell {
    position: relative;
    background: #f0f0f0;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: clamp(3rem, 26vmin, 6.5rem);
    font-weight: bold;
    line-height: 1;
    padding: 0;
    display: block;
    cursor: pointer;
    transition: background 0.2s;
    min-height: 56px;
}
/* Center X/O in the cell with no extra padding (works on mobile and desktop) */
.ttt-cell-char {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
}
@media (min-width: 641px) {
    .ttt-cell-char {
        top: 45%;
        transform: translate(-50%, -50%);
    }
}
.ttt-cell:hover:not(.ttt-cell-taken):not(.ttt-game-over) {
    background: #e0e0e0;
}
.ttt-cell-taken,
.ttt-cell.ttt-game-over {
    cursor: default;
}
.ttt-cell-mark-x { color: #1976d2; }
.ttt-cell-mark-o { color: #c62828; }
.ttt-status {
    flex-shrink: 0;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    margin-top: 8px;
    margin-bottom: 8px;
}

/* Race game: 36-block board, snake layout (1–6 bottom, 7–12 up, etc.) */
.race-status {
    flex-shrink: 0;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 8px;
}
.race-board-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0;
}
.game-window-scroll .race-board-wrap {
    flex: none;
    min-height: 0;
}
.race-board {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 4px;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1;
}
.race-cell {
    position: relative;
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 0;
    font-size: 0.75rem;
    color: #666;
}
.race-cell-trail-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: race-trail-dot-fade-in 0.4s ease-out forwards;
}
.race-cell-trail-dot.race-cell-trail-dot-fade-out {
    animation: race-trail-dot-fade-out 0.5s ease-out forwards;
}
@keyframes race-trail-dot-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes race-trail-dot-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
.race-cell-trail-dot-p1 {
    background: #1976d2;
}
.race-cell-trail-dot-p2 {
    background: #c62828;
}
.race-cell-trail-dot-p1.race-cell-trail-dot-p2 {
    background: linear-gradient(135deg, #1976d2 50%, #c62828 50%);
}
.race-cell-num {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 0.65rem;
    color: #999;
}
.race-cell-trophy {
    font-size: 1.25rem;
    color: #f9a825;
}
.race-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #333;
    font-size: 0.7rem;
    font-weight: bold;
    background: #e0e0e0;
    z-index: 1;
}
.race-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.race-avatar-p1 { border-color: #1976d2; background: #bbdefb; }
.race-avatar-p2 { border-color: #c62828; background: #ffcdd2; }
.race-avatar.race-avatar-animating {
    z-index: 10;
    pointer-events: none;
}
.race-avatar-clone {
    box-sizing: border-box;
    overflow: hidden;
}
.race-roll-wrap {
    flex-shrink: 0;
    text-align: center;
    padding: 10px 0;
}
.race-roll-btn {
    padding: 10px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    background: #2196f3;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
}
.race-roll-btn:hover:not(:disabled) {
    background: #1976d2;
}
.race-roll-btn:disabled {
    background: #9e9e9e;
    cursor: not-allowed;
}

/* Reusable dice (Bootstrap Icons bi-dice-*-fill) */
.dice-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, color 0.2s ease;
    background: #e0e0e0;
    color: #757575;
}
.dice-wrap:not(:disabled) {
    background: #2196f3;
    color: #fff;
}
.dice-wrap:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
    background: #1976d2;
}
.dice-wrap:disabled {
    cursor: not-allowed;
    opacity: 0.9;
}
.dice-wrap .bi,
.dice-wrap .fa-solid,
.dice-wrap i {
    font-size: 2rem;
}
.dice-wrap.rolling .bi,
.dice-wrap.rolling .fa-solid,
.dice-wrap.rolling i {
    animation: dice-shuffle 0.1s ease-in-out infinite;
}
@keyframes dice-shuffle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}

/* Game indicator - blue theme (mirrors .private-chat-indicator); flex-shrink: 0 so game window above can scroll */
.game-indicator {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #e3f2fd;
    border: 1px solid #2196f3;
    border-radius: 8px;
    margin-bottom: 4px;
}

.game-indicator.hidden {
    display: none;
}

.game-indicator-avatar,
.game-indicator-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.game-indicator-avatar {
    object-fit: cover;
    border: 2px solid #2196f3;
}

.game-indicator-placeholder {
    background: linear-gradient(135deg, #1565c0 0%, #2196f3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: white;
    border: 2px solid #2196f3;
}

.game-opponent-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.back-to-public-from-game {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    color: #2196f3;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.back-to-public-from-game:hover {
    background: #2196f3;
    color: #fff;
}

.chat-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Hide message input when game window is active */
.chat-container.game-window-active .input-area {
    display: none !important;
}

/* When game window is active, keep notifications stack on top */
.container.game-window-active .notifications-stack {
    z-index: 50;
}

/* Keep floating toggle wrapper below game window when game is active */
.chat-container.game-window-active .bottom-icons-wrapper {
    z-index: -1;
}
/* Game window must stack above the fixed toggle */
.chat-container.game-window-active .chat-window.private-game-window.active {
    position: relative;
    z-index: 1;
}

/* When a private chat window is active, put bottom icons behind it (same as game window) */
.chat-container:has(.chat-window.private-chat-window.active) .bottom-icons-wrapper {
    z-index: -1;
}
.chat-container:has(.chat-window.private-chat-window.active) .chat-window.private-chat-window.active {
    position: relative;
    z-index: 1;
}

/* When RPG window is open, keep notifications stack on top so game/chat notifications remain visible */
.container:has(#rpg-window:not(.hidden)) .notifications-stack {
    z-index: 50;
}

/* Remove the global .messages style - now scoped to .chat-window only */

.message {
    margin-bottom: 15px;
    animation: fadeIn 0.3s ease-in;
}

.message.system-separator {
    text-align: center;
    color: #999;
    font-style: italic;
    font-size: 12px;
    margin: 20px 0;
    padding: 10px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: rgba(255, 255, 255, 0.5);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 5px;
    gap: 8px;
}

.message-thumbnail,
.message-thumbnail-placeholder {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
}

.message-thumbnail {
    object-fit: cover;
    border: 2px solid #e0e0e0;
}

.message-thumbnail-placeholder {
    background: linear-gradient(135deg, #8b6914 0%, #c9a227 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    border: 2px solid #e0e0e0;
}

.message.own-message .message-thumbnail {
    border-color: #c9a227;
}

.message.own-message .message-thumbnail-placeholder {
    background: linear-gradient(135deg, #c9a227 0%, #f4d03f 100%);
}

/* System messages (game result broadcast) – dark grey theme */
.message.system-message .message-content {
    background: #404040;
    color: #eee;
}

.message.system-message .message-thumbnail-placeholder {
    background: linear-gradient(135deg, #4a4a4a 0%, #404040 100%);
    color: #eee;
}

.message.system-message .message-username {
    color: #999;
}

.message-username {
    font-weight: 600;
    color: #8b6914;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.message-time {
    font-size: 12px;
    color: #999;
    margin-left: auto;
}

.message-content {
    background: white;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    word-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

.message-content.has-photo,
.message-content.has-audio,
.message-content.has-emote {
    width: fit-content;
    max-width: 100%;
}

.message-photo-wrap {
    margin-bottom: 8px;
}
.message-photo-wrap:last-child {
    margin-bottom: 0;
}
.message-photo {
    max-width: 280px;
    max-height: 280px;
    width: auto;
    height: auto;
    border-radius: 8px;
    display: block;
    cursor: pointer;
}
.message-text {
    word-wrap: break-word;
}

.message-text .world-map-chat-jump {
    color: #666;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 700;
    background: #efefef;
    padding: 2px 4px;
    border-radius: 4px;
    text-decoration: none;
}

.message-text .world-map-chat-jump:hover {
    color: #333;
    background: #e0e0e0;
}

/* In-chat emote images (allowed via emote_pack class) – scaled to 300px, content doesn’t stretch */
.message-text .emote_pack {
    display: block;
    /* vertical-align: middle; */
    width: auto;
    height: auto;
    max-width: 300px;
    max-height: 300px;
    object-fit: contain;
}

.message-audio-block {
    margin-bottom: 8px;
}
.message-audio-block:last-child {
    margin-bottom: 0;
}
.message-audio-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.message-audio {
    flex: 1;
    min-width: 180px;
    max-width: 280px;
    height: 36px;
}
.message-audio-filename {
    font-size: 12px;
    color: #666;
    max-width: 324px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.message.own-message .message-audio-filename {
    color: rgba(255, 255, 255, 0.85);
}
.message-audio-mute-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.message-audio-mute-btn:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #333;
}
.message.own-message .message-audio-mute-btn {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}
.message.own-message .message-audio-mute-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.message.own-message .message-content {
    background: #b2903c;
    color: white;
}

.message.own-message .message-username {
    color: #6b4e0f;
}

/* Green theme for own messages in private chat */
.private-chat-window .message.own-message .message-content {
    background: #4caf50;
    color: white;
}

.private-chat-window .message.own-message .message-username {
    color: #2e7d32;
}

.private-chat-window .message.own-message .message-thumbnail {
    border-color: #4caf50;
}

.private-chat-window .message.own-message .message-thumbnail-placeholder {
    background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
}

/* Chat windows: public and private - simple display toggle, same styling */
.chat-window {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.chat-window.active {
    display: flex;
}

/* Scroll wrapper so daily mission panel can stick to top when scrolling */
.chat-window-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
}

.chat-window .messages {
    padding: 50px 20px 20px 20px;
    background: #f5f5f5;
}

/* Public chat: top spacing for messages (daily mission panel does not affect this) */
#public-chat-window .chat-window-scroll > .messages {
    padding-top: 50px;
    padding-bottom: 70px;
}

/* Private chat: .messages is direct child of .chat-window (no .chat-window-scroll wrapper), so it must be the scroll container */
.private-chat-window .messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.chat-window .typing-indicator {
    flex-shrink: 0;
    padding: 10px 20px;
    font-style: italic;
    color: #999;
    font-size: 14px;
    min-height: 40px;
    display: flex;
    align-items: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    background: #f5f5f5;
    border-top: 1px solid #eee;
}

.typing-indicator {
    flex-shrink: 0;
    padding: 10px 20px;
    font-style: italic;
    color: #999;
    font-size: 14px;
    min-height: 40px;
    display: flex;
    align-items: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Wrapper for Endless Tower and Idle Reward toggles: fixed, same position as former single toggle */
.bottom-icons-wrapper {
    position: fixed;
    bottom: 190px;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    z-index: 1;
    transition: bottom 0.25s ease;
    padding: 10px 0;
    box-sizing: border-box;
}

/* Horizontal strip: full viewport width; overflow scrolls with touch / drag (no visible scrollbar) */
.bottom-icons-viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
    -ms-overflow-style: none;
    outline: none;
    /* Left padding: keeps the first button (shadow/hover) inside the visible strip */
    padding: 8px 0 8px 16px;
    box-sizing: border-box;
}
.bottom-icons-viewport:focus-visible {
    outline: 2px solid rgba(200, 220, 255, 0.65);
    outline-offset: 3px;
    border-radius: 10px;
}
.bottom-icons-viewport::-webkit-scrollbar {
    display: none;
}
.bottom-icons-viewport.bottom-icons-overflow {
    cursor: grab;
}
.bottom-icons-viewport.bottom-icons-overflow:active {
    cursor: grabbing;
}

.bottom-icons-track {
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    min-height: 48px;
    padding-right: 8px;
    box-sizing: border-box;
}
.bottom-icons-track > .endless-tower-toggle,
.bottom-icons-track > .idle-reward-toggle,
.bottom-icons-track > .shop-toggle,
.bottom-icons-track > .lucky-spin-toggle,
.bottom-icons-track > .technology-toggle,
.bottom-icons-track > .hiraya-manawari-toggle,
.bottom-icons-track > .tambayan-guide-toggle,
.bottom-icons-track > .world-map-toggle,
.bottom-icons-track > .world-map-editor-toggle,
.bottom-icons-track > .chat-expand-btn {
    flex-shrink: 0;
}

/*
 * Desktop: bottom-icons-wrapper is position:fixed full viewport width (left:0; right:0) with z-index:1.
 * The side panel is in-flow with no z-index, so this strip sat above the panel and stole clicks
 * (e.g. profile actions). When the panel is visible, limit the strip to the chat column only.
 * Mobile: panel is a fixed overlay (z-index:500); keep full-width strip under it.
 */
@media (min-width: 500px) {
    .app-wrapper.side-panel-visible .bottom-icons-wrapper {
        right: 480px;
        left: 0;
    }
    .side-panel {
        position: relative;
        z-index: 2;
    }
}

/* Shared floating toggle button style (Endless Tower, Idle Reward, Shop, Lucky Spin, Technology, …) */
.endless-tower-toggle,
.idle-reward-toggle,
.shop-toggle,
.lucky-spin-toggle,
.technology-toggle,
.hiraya-manawari-toggle,
.tambayan-guide-toggle,
.world-map-toggle,
.world-map-editor-toggle,
.chat-expand-btn {
    position: relative;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(74, 74, 74, 0.75) 0%, rgba(45, 45, 45, 0.75) 100%);
    color: #eee;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.endless-tower-toggle:hover,
.idle-reward-toggle:hover,
.shop-toggle:hover,
.lucky-spin-toggle:hover,
.technology-toggle:hover,
.hiraya-manawari-toggle:hover,
.tambayan-guide-toggle:hover,
.world-map-toggle:hover,
.world-map-editor-toggle:hover,
.chat-expand-btn:hover {
    color: #fff;
    transform: scale(1.1);
}

.endless-tower-toggle-rays-wrap {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.endless-tower-toggle-ray {
    position: absolute;
    width: 12px;
    height: 55%;
    left: 50%;
    bottom: 50%;
    margin-left: -6px;
    transform-origin: 50% 100%;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background: linear-gradient(to top, transparent 0%, rgba(255, 220, 140, 0.2) 35%, rgba(255, 235, 180, 0.4) 100%);
    pointer-events: none;
}
.endless-tower-toggle-rays-wrap .endless-tower-toggle-ray:nth-child(1) {
    width: 8px;
    margin-left: -4px;
    height: 48%;
    transform: rotate(-15deg);
}
.endless-tower-toggle-rays-wrap .endless-tower-toggle-ray:nth-child(2) {
    width: 16px;
    margin-left: -8px;
    height: 62%;
    transform: rotate(95deg);
}
.endless-tower-toggle-rays-wrap .endless-tower-toggle-ray:nth-child(3) {
    width: 11px;
    margin-left: -5.5px;
    height: 52%;
    transform: rotate(210deg);
}
.endless-tower-toggle > i {
    position: relative;
    z-index: 1;
}
.endless-tower-toggle > .endless-tower-toggle-dot {
    z-index: 1;
}

.endless-tower-toggle-circle {
    display: flex;
    align-items: center;
    justify-content: center;
}
.endless-tower-toggle-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #dc3545;
    border-radius: 50%;
    border: 2px solid white;
    animation: notification-dot-pulse 1.5s ease-in-out infinite;
}

.idle-reward-toggle-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #b8860b;
    border-radius: 50%;
    border: 2px solid white;
    animation: notification-dot-pulse 1.5s ease-in-out infinite;
}
.idle-reward-toggle-dot.hidden {
    display: none;
}

.idle-reward-toggle > i,
.shop-toggle > i,
.lucky-spin-toggle > i,
.technology-toggle > i,
.hiraya-manawari-toggle > i,
.tambayan-guide-toggle > i,
.world-map-toggle > i,
.world-map-editor-toggle > i,
.chat-expand-btn > i {
    font-size: 2.3em;
}

.endless-tower-toggle > i {
    font-size: 1.7em;
}

/* Endless Tower window reuses .rpg-window; optional override */
.endless-tower-window.rpg-window.hidden {
    display: none;
}

.endless-tower-mechanics-window.hidden {
    display: none;
}

.endless-tower-hof-window.hidden {
    display: none;
}

/* Idle Reward window */
.idle-reward-window.rpg-window.hidden {
    display: none;
}

/* Shop window */
.shop-window.rpg-window.hidden {
    display: none;
}

/* Hiraya Manawari window */
.hiraya-manawari-window.rpg-window.hidden {
    display: none;
}

.hiraya-manawari-window-content {
    padding: 12px;
}

.hiraya-manawari-goal {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    margin-bottom: 12px;
    background: #fafafa;
}

.hiraya-manawari-goal-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 1rem;
    font-family: Oswald;
    color: #333;
}

.hiraya-manawari-price-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.hiraya-manawari-pay-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    border: 1px solid #8b6914;
    border-radius: 6px;
    cursor: pointer;
    background: linear-gradient(135deg, #d4a84b 0%, #b8860b 50%, #8b6914 100%);
}

.hiraya-manawari-pay-btn:hover {
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.45);
}

.hiraya-manawari-pay-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.hiraya-manawari-pay-btn--money {
    background: linear-gradient(135deg, #666 0%, #444 100%);
    border-color: #444;
}

.hiraya-manawari-pay-btn--money:disabled {
    opacity: 0.55;
}

.hiraya-manawari-window-content .hiraya-manawari-goal-img {
    max-width: 100%;
    max-height: 220px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

.hiraya-manawari-window-content .hiraya-manawari-image-wrap {
    margin-bottom: 8px;
    text-align: center;
}

.hiraya-manawari-window-content .hiraya-manawari-desc {
    font-size: 1rem;
    color: #555;
    white-space: normal;
    line-height: 1.45;
    margin-bottom: 8px;
}

/* Technology window */
.technology-window.rpg-window.hidden {
    display: none;
}

.technology-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.technology-item {
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    background: #fafafa;
}

.technology-name {
    font-weight: 600;
    font-size: 1rem;
    color: #333;
    margin-bottom: 4px;
}

.technology-desc {
    font-size: 0.9rem;
    color: #555;
    white-space: pre-wrap;
    margin-bottom: 4px;
}

.technology-cost {
    font-size: 0.85rem;
    color: #666;
}

.technology-empty {
    margin: 0;
    padding: 12px;
    color: #666;
}

.shop-window-content {
    padding: 12px;
}

.shop-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    margin-bottom: 12px;
    background: #fafafa;
}

.shop-item-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 15px;
    color: #333;
}

.shop-item-label .shop-item-crystal-icon,
.shop-item-label .fa-diamond {
    color: #1565c0;
}

.shop-item-artifact-slot-icon {
    color: #7b1fa2;
}

.shop-item-desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
    color: #555;
}

.shop-crystal-per-pack {
    font-weight: 500;
    font-size: 13px;
    color: #666;
}

.shop-crystal-bulk {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.shop-crystal-bulk-label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
}

.shop-crystal-bulk-controls {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid #c5c5c5;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.shop-crystal-qty-btn {
    min-width: 40px;
    padding: 8px 12px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #333;
    background: #eee;
    border: none;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.shop-crystal-qty-btn:hover {
    background: #e0e0e0;
}

.shop-crystal-qty-btn:active {
    background: #d5d5d5;
}

.shop-crystal-qty-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.shop-crystal-qty {
    min-width: 36px;
    padding: 8px 10px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #222;
    background: #fff;
}

.shop-buy {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #d4a84b 0%, #b8860b 50%, #8b6914 100%);
    border: 1px solid #8b6914;
    border-radius: 6px;
    cursor: pointer;
}

.shop-buy .shop-buy-coin-icon,
.shop-buy .fa-coins {
    color: #fff;
}

.shop-buy:hover {
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.45);
}

.shop-buy:hover .shop-buy-coin-icon,
.shop-buy:hover .fa-coins {
    color: #fff;
}

.shop-buy:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.shop-worker-desc {
    font-size: 0.95rem;
    color: #555;
    white-space: pre-wrap;
    line-height: 1.4;
}

.shop-worker-item {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.shop-worker-visual {

    min-width: 160px;
    min-height: 200px;
    border-radius: 8px;
    border: 1px solid #d0d0d0;
    background-image: url('/assets/img/worker.jpg');
    background-repeat: no-repeat;
    background-position: left center;
    /* Keep original ratio and anchor on the left (no full-box stretch). */
    background-size: cover;
    background-color: #efefef;
    overflow: hidden;
    justify-self: start;
}

.shop-worker-details {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    min-width: 0;
}

.worker-buy-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    border: 1px solid #8b6914;
    border-radius: 6px;
    cursor: pointer;
    background: linear-gradient(135deg, #d4a84b 0%, #b8860b 50%, #8b6914 100%);
}

.worker-buy-btn:hover {
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.45);
}

.worker-buy-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.shop-worker-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.worker-buy-money {
    background: linear-gradient(135deg, #666 0%, #444 100%);
    border-color: #444;
}

.worker-buy-money:disabled {
    opacity: 0.55;
}

.idle-reward-content {
    padding: 12px;
}

.idle-reward-elapsed {
    font-size: 15px;
    margin-bottom: 12px;
    color: #333;
}

.idle-reward-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #d0d0d0;
    margin-bottom: 14px;
    font-size: 14px;
}

.idle-reward-table th,
.idle-reward-table td {
    border: 1px solid #d0d0d0;
    padding: 8px 12px;
    text-align: left;
}

.idle-reward-table th {
    background: #e8e8e8;
    font-weight: 600;
}

.idle-reward-table td:first-child i {
    margin-right: 8px;
}

.idle-reward-table .idle-reward-label-cell.idle-reward-label-coins,
.idle-reward-table .idle-reward-label-cell.idle-reward-label-coins i { color: #b8860b; }

.idle-reward-table .idle-reward-label-cell.idle-reward-label-hp,
.idle-reward-table .idle-reward-label-cell.idle-reward-label-hp i { color: #2e7d32; }

.idle-reward-table .idle-reward-label-cell.idle-reward-label-atk,
.idle-reward-table .idle-reward-label-cell.idle-reward-label-atk i { color: #c62828; }

.idle-reward-table .idle-reward-label-cell.idle-reward-label-def,
.idle-reward-table .idle-reward-label-cell.idle-reward-label-def i { color: #5d4037; }

.idle-reward-table .idle-reward-label-cell.idle-reward-label-spd,
.idle-reward-table .idle-reward-label-cell.idle-reward-label-spd i { color: #f9a825; }

.idle-reward-table .idle-reward-label-cell.idle-reward-label-acc,
.idle-reward-table .idle-reward-label-cell.idle-reward-label-acc i { color: #c2185b; }

.idle-reward-table .idle-reward-label-cell.idle-reward-label-rare,
.idle-reward-table .idle-reward-label-cell.idle-reward-label-rare i { color: #1565c0; }

.idle-reward-table .idle-reward-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.idle-reward-table .idle-reward-next-in {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.idle-reward-table .idle-reward-every {
    font-size: 12px;
    color: #555;
}

.idle-reward-claim-btn {
    margin-top: 8px;
    padding: 12px 24px;
    min-height: 44px;
    min-width: 44px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    touch-action: manipulation;
}

.idle-reward-claim-btn:hover {
    background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%);
    transform: scale(1.02);
}

.idle-reward-claim-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.endless-tower-hof-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.endless-tower-hof-content .book-paragraph {
    flex-shrink: 0;
}

.endless-tower-hof-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.endless-tower-hof-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    min-height: 88px;
    box-sizing: border-box;
}

.endless-tower-hof-rank {
    width: 32px;
    text-align: right;
    font-weight: 700;
}

.endless-tower-hof-avatars {
    flex-shrink: 0;
}

.endless-tower-hof-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.endless-tower-hof-avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.endless-tower-hof-teammates {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.endless-tower-hof-teammate-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.endless-tower-hof-teammate-placeholder {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #b0bec5;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.endless-tower-hof-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.endless-tower-hof-name {
    font-weight: 600;
}

.endless-tower-hof-meta {
    font-size: 12px;
    color: #666;
}

.endless-tower-hof-level {
    font-weight: 700;
    color: #b71c1c;
}

/* Endless Tower level cards (readonly preview) */
.endless-tower-levels {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.endless-tower-level-card {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 14px 18px;
    background: #fafafa;
}
.endless-tower-level-card.current {
    border-color: #4a9;
    background: #f0fff4;
    cursor: pointer;
}
.endless-tower-level-card.current:hover {
    background: #e0f5e8;
}
.endless-tower-level-card.endless-tower-level-card-m5 {
    background: #fff;
    border-color: #90caf9;
    border-width: 2px;
}
.endless-tower-level-card.endless-tower-level-card-m5 .level-title {
    color: #1565c0;
}
.endless-tower-level-card.endless-tower-level-card-m10 {
    border-color: #ce93d8;
    border-width: 2px;
    background: #fff;
}
.endless-tower-level-card.endless-tower-level-card-m10 .level-title {
    color: #6a1b9a;
}
.endless-tower-level-card.endless-tower-level-card-m15 {
    border-color: #ef9a9a;
    border-width: 2px;
    background: #fff;
}
.endless-tower-level-card.endless-tower-level-card-m15 .level-title {
    color: #c62828;
}

.endless-tower-level-card.preview {
    opacity: 0.85;
    border-style: dashed;
}
.endless-tower-level-card .level-title {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 6px;
}
.endless-tower-level-card .level-hint {
    font-size: 0.9rem;
    color: #666;
    margin-top: 10px;
}
.endless-tower-level-card .level-rewards {
    margin-top: 10px;
    font-weight: 600;
    color: #333;
}
.endless-tower-level-card .level-rewards i {
    margin-right: 3px;
}
/* Reward type color coding (text + icon) in Endless Tower level cards */
.endless-tower-level-card .level-reward-hp { color: #2e7d32; }
.endless-tower-level-card .level-reward-atk { color: #c62828; }
.endless-tower-level-card .level-reward-spd { color: #f57f17; }
.endless-tower-level-card .level-reward-acc { color: #ec3981; }
.endless-tower-level-card .level-reward-def { color: #5d4037; }
.endless-tower-level-card .level-reward-rare { color: #1565c0; }
.endless-tower-level-card .level-reward-epic { color: #6a1b9a; }
.endless-tower-level-card .level-reward-legendary { color: #996515; }
.endless-tower-level-card .level-reward-mythic { color: #b71c1c; }
.endless-tower-level-card .level-reward-coin { color: #c9a227; }

.endless-tower-team-panel {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.03);
}
.endless-tower-team-panel.hidden {
    display: none;
}
.endless-tower-teamup-partners {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.endless-tower-team-panel .endless-tower-teamup-partners-title {
    margin-top: 0;
}
.endless-tower-teamup-partners-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 2px;
}
.endless-tower-teamup-partner {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}
.endless-tower-teamup-partner-avatar-wrap {
    flex-shrink: 0;
}
.endless-tower-teamup-partner-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.endless-tower-teamup-partner-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4a9 0%, #6cc 100%);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.endless-tower-teamup-partner-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.endless-tower-teamup-countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #1a5;
    flex-shrink: 0;
    min-width: 3em;
    padding: 2px 6px;
    background: rgba(74, 170, 153, 0.15);
    border-radius: 4px;
    font-size: 0.95rem;
}
.endless-tower-teamup-countdown-expired {
    color: #777;
    background: rgba(0, 0, 0, 0.06);
}

.endless-tower-battle-log-btn {
    margin-top: 12px;
    padding: 8px 14px;
    font-size: 0.85rem;
    border: 1px solid #4a9;
    border-radius: 8px;
    background: #fff;
    color: #2a7;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.endless-tower-battle-log-btn:hover {
    background: #f0fff4;
}
.endless-tower-battle-log-btn i {
    font-size: 1rem;
}
.endless-tower-battle-log-title {
    font-weight: 600;
    margin-bottom: 8px;
}
.endless-tower-battle-log-content {
    max-height: 60vh;
    overflow-y: auto;
    text-align: left;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.input-area {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: white;
    border-top: 1px solid #eee;
    gap: 10px;
    align-items: stretch;
    /* Keep input area above floating quest panels (z=5/6) but below RPG window (z=10). */
    z-index: 9;
}

/* Private chat recipient indicator - green theme */
.private-chat-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #e8f5e9;
    border: 1px solid #4caf50;
    border-radius: 8px;
    margin-bottom: 4px;
}

.private-chat-indicator.hidden {
    display: none;
}

.private-chat-recipient-avatar,
.private-chat-recipient-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.private-chat-recipient-avatar {
    object-fit: cover;
    border: 2px solid #4caf50;
}

.private-chat-recipient-avatar-placeholder {
    background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: white;
    border: 2px solid #4caf50;
}

.private-chat-recipient-info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.private-chat-recipient-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.back-to-public-chat-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    color: #4caf50;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.back-to-public-chat-btn:hover {
    background: #4caf50;
    color: #fff;
}

.input-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.input-icons .fa-solid,
.input-icons .bi,
.input-icons i {
    cursor: pointer;
    color: #666;
    font-size: 1.1rem;
    padding: 10px 12px;
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    background: #e8e8e8;
    border-radius: 10px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.input-icons .fa-solid:hover,
.input-icons .bi:hover,
.input-icons i:hover {
    color: #c9a227;
    background: #ddd;
}

#emote-picker-btn {
    font-size: 1rem;
    max-height: 40px;
    font-weight: bold; 
    font-style: normal;
    font-family: Oswald;
}

/* Chat-btn collapse toggle (only visible in public chat) */
#chat-btn {
    margin-left: auto;
    transition: transform 0.2s ease;
}

/* Collapsed input area */
.input-area.input-area--collapsed {
    display: none !important;
}

.chat-container:has(.input-area--collapsed) .bottom-icons-wrapper {
    bottom: 20px;
    transition: bottom 0.25s ease;
}

.chat-expand-btn[hidden] {
    display: none;
}

/* Emote picker panel (below input icons) */
.emote-picker-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    margin-bottom: 6px;
    max-height: 420px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 100;
    display: flex;
    flex-direction: column;
}
.emote-picker-search-wrap {
    flex-shrink: 0;
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
}
.emote-picker-search {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95rem;
    box-sizing: border-box;
}
.emote-picker-search:focus {
    outline: none;
    border-color: #c9a227;
}
.emote-picker-content {
    padding: 10px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.emote-picker-empty {
    margin: 0;
    padding: 12px;
    color: #666;
    font-size: 0.95rem;
}
.emote-pack-group {
    margin-bottom: 12px;
}
.emote-pack-group:last-child {
    margin-bottom: 0;
}
.emote-pack-label {
    display: block;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 6px;
}
.emote-pack-emotes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.emote-picker-item {
    padding: 4px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.emote-picker-item:hover {
    background: #eee;
}
.emote-picker-thumb {
    width: 150px;
    height: 150px;
    max-width: 150px;
    max-height: 150px;
    object-fit: contain;
    vertical-align: middle;
}

/* Emoji picker panel (below input icons) */
.emoji-picker-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    margin-bottom: 6px;
    max-height: 280px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 100;
    display: flex;
    flex-direction: column;
}
.emoji-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.emoji-picker-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
}
.emoji-picker-close {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 1.4rem;
    line-height: 1;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.emoji-picker-close:hover {
    background: #eee;
    color: #333;
}
.emoji-picker-content {
    padding: 10px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.emoji-picker-item {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 1.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.emoji-picker-item:hover {
    background: #eee;
}

/* Baybayin picker panel (styled like emoji panel, empty for now) */
.baybayin-picker-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    margin-bottom: 6px;
    max-height: 280px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 100;
    display: flex;
    flex-direction: column;
}
.baybayin-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.baybayin-picker-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
}
.baybayin-picker-close {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 1.4rem;
    line-height: 1;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.baybayin-picker-close:hover {
    background: #eee;
    color: #333;
}
.baybayin-picker-content {
    padding: 10px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.baybayin-picker-content .baybayin-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
}

.baybayin-picker-content .baybayin-table caption {
    caption-side: top;
    padding: 6px 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    text-align: left;
    background: #eee;
}

.baybayin-picker-content .baybayin-cell {
    vertical-align: top;
    text-align: center;
    padding: 0.4em 0.35em;
    min-width: 3em;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
}

.baybayin-picker-content .baybayin-char {
    color: #800080;
    font-size: 1.5em;
    line-height: 1.3;
    white-space: nowrap;
}

.baybayin-picker-content .baybayin-roman {
    font-size: 0.85em;
    line-height: 1.35;
    color: #555;
    margin-top: 2px;
}

.input-message {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

/* Decoy input: receives autofill so the real chat input is left alone; hidden from view and interaction */
.input-decoy {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.input-message #message-input {
    flex: 1;
    min-width: 0;
}

/*.attach-photo-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid #eee;
    border-radius: 50%;
    background: white;
    font-size: 20px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.attach-photo-btn:hover {
    border-color: #c9a227;
    background: #fdfbf5;
}*/

#message-input {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid #eee;
    border-radius: 25px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s;
}

#message-input:focus {
    border-color: #c9a227;
}

#send-button {
    padding: 12px 30px;
    background: linear-gradient(135deg, #c9a227 0%, #8b6914 100%);
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
}

#send-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(201, 162, 39, 0.4);
}

#send-button:active {
    transform: translateY(0);
}

/* Green theme when in private chat mode */
#send-button.private-mode {
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
}

#send-button.private-mode:hover {
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
}

/* Auth Modal (above daily mission panel: 10000) */
.auth-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 11000;
}

.auth-modal.hidden {
    display: none;
}

/* When not logged in: only the header visible behind the login form */
/* Fallback for browsers without :has() – JS sets body.auth-modal-visible */
body.auth-modal-visible .container .chat-container,
.container:has(.auth-modal:not(.hidden)) .chat-container {
    display: none;
}
body.auth-modal-visible .app-wrapper .side-panel,
.app-wrapper:has(.auth-modal:not(.hidden)) .side-panel {
    display: none;
}
body.auth-modal-visible .side-panel-toggle-wrap,
body:has(.auth-modal:not(.hidden)) .side-panel-toggle-wrap {
    display: none !important;
}
body.auth-modal-visible .online-users-float,
body:has(.auth-modal:not(.hidden)) .online-users-float {
    display: none;
}

body.auth-modal-visible .new-messages-indicator,
body:has(.auth-modal:not(.hidden)) .new-messages-indicator {
    display: none;
}

body.auth-modal-visible .private-chat-notifications,
body:has(.auth-modal:not(.hidden)) .private-chat-notifications {
    display: none;
}

.auth-content {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    min-width: 350px;
    max-width: 90%;
}

.auth-form h2 {
    margin-bottom: 25px;
    color: #333;
    text-align: center;
    font-size: 24px;
}

.auth-form.hidden {
    display: none;
}

.auth-form input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #eee;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 15px;
    outline: none;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.auth-form input:focus {
    border-color: #c9a227;
}

.auth-button {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #c9a227 0%, #8b6914 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 10px;
}

.auth-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(201, 162, 39, 0.4);
}

.auth-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.auth-switch {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #666;
}

.auth-switch a {
    color: #c9a227;
    text-decoration: none;
    font-weight: 600;
}

.auth-switch a:hover {
    text-decoration: underline;
}

.error-message {
    display: none;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 14px;
    text-align: center;
}

.error-message.auth-message-error {
    background: #fee;
    color: #c33;
}

.error-message.auth-message-success {
    background: #e8f5e9;
    color: #2e7d32;
}

/* Legacy modal styles (keep for compatibility) */
.username-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.username-modal.hidden {
    display: none;
}

.modal-content {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    text-align: center;
    min-width: 300px;
}

.modal-content h2 {
    margin-bottom: 20px;
    color: #333;
}

.modal-content input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #eee;
    border-radius: 25px;
    font-size: 14px;
    margin-bottom: 20px;
    outline: none;
    transition: border-color 0.3s;
}

.modal-content input:focus {
    border-color: #c9a227;
}

.modal-content button {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #c9a227 0%, #8b6914 100%);
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: transform 0.2s;
}

.modal-content button:hover {
    transform: translateY(-2px);
}

/* Scrollbar styling */
.messages::-webkit-scrollbar {
    width: 8px;
}

.messages::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.messages::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.messages::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.user-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: white;
    border-radius: 6px;
    border: 1px solid #eee;
    font-size: 14px;
    color: #333;
    transition: background 0.2s, border-color 0.2s;
    gap: 10px;
    cursor: pointer;

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.user-thumbnail,
.user-thumbnail-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.user-thumbnail {
    object-fit: cover;
    border: 2px solid #e0e0e0;
}

.user-thumbnail-placeholder {
    background: linear-gradient(135deg, #8b6914 0%, #c9a227 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    border: 2px solid #e0e0e0;
}

.user-item:hover {
    background: #f9f9f9;
    border-color: #c9a227;
}

.user-item.current-user {
    background: #fff9e6;
    border-color: #c9a227;
    font-weight: 600;
}

.username-text {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@keyframes status-dot-pulse {
    0%, 100% {
       
        transform: scale(1);
    }
    50% {
       
        transform: scale(1.5);
    }
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

/* Pulsating effect for status dots in user list only */
.user-item .status-dot {
    animation: status-dot-pulse 2s ease-in-out infinite;
}

.status-dot.status-active {
    background: #4caf50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.status-dot.status-away {
    background: #ffc107;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.3);
}

.status-dot.status-busy {
    background: #f44336;
    box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.2);
}

/* Default when no status class (e.g. guest) */
.status-dot:not([class*="status-"]) {
    background: #9e9e9e;
    box-shadow: 0 0 0 2px rgba(158, 158, 158, 0.2);
}

/* .logout-btn in profile-app-info styled above with .profile-app-info .logout-btn */
.logout-btn {
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, transform 0.1s;
    flex-shrink: 0;
    line-height: 1;
}

/* Scrollbar styling for side panel */
.side-panel-top::-webkit-scrollbar,
.side-panel-middle::-webkit-scrollbar {
    width: 6px;
}

.side-panel-top::-webkit-scrollbar-track,
.side-panel-middle::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.side-panel-top::-webkit-scrollbar-thumb,
.side-panel-middle::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.side-panel-top::-webkit-scrollbar-thumb:hover,
.side-panel-middle::-webkit-scrollbar-thumb:hover {
    background: #999;
}