/* shop.css – In-Game Shop, Coin-Toast, Theme-Akzente (geteilte Komponente) */

/* Shop-Trigger in der Game-Toolbar */
.shop-trigger {
    position: relative;
}

.shop-trigger .shop-btn-label {
    font-weight: 600;
}

.shop-trigger .shop-balance-mini {
    font-weight: 800;
    margin-left: 2px;
    font-variant-numeric: tabular-nums;
}

/* Gesperrte Features sind unsichtbar, bis sie gekauft wurden (striktes Gating) */
.coin-gated {
    display: none !important;
}

/* Shop-Modal */
.shop-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(10, 12, 30, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.shop-modal.open {
    display: flex;
}

.shop-box {
    width: min(92vw, 460px);
    max-height: 82vh;
    overflow-y: auto;
    background: var(--c-surface, #fff);
    color: var(--c-text, #333);
    border: 1px solid rgba(102, 126, 234, 0.25);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    padding: 18px 18px 20px;
}

.shop-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.shop-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05em;
    font-weight: 800;
    color: var(--c-text, #333);
    flex: 1;
}

.shop-title i {
    color: #f59e0b;
}

.shop-balance {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--c-muted, #666);
    white-space: nowrap;
}

.shop-balance b {
    color: #f59e0b;
}

.shop-close {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.12);
    color: var(--c-danger, #ef4444);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.shop-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shop-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--c-border, #e0e0e0);
    border-radius: 10px;
    background: var(--c-surface-2, #f0f3ff);
}

.shop-item.owned {
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.08);
}

.shop-item-info {
    min-width: 0;
}

.shop-item-name {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--c-text, #333);
}

.shop-item-price {
    font-size: 0.8em;
    color: var(--c-muted, #666);
    font-weight: 600;
}

.shop-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    border: none;
    border-radius: 9px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 0.85em;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.shop-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.shop-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}

/* Coin-Toast */
.coin-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(20px);
    z-index: 400;
    padding: 10px 18px;
    border-radius: 999px;
    background: #f59e0b;
    color: #1a1a2e;
    font-weight: 800;
    font-size: 0.95em;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}

.coin-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Theme-Akzente (HUD/Seite) – Canvas liest Farben via Theme.color().
   Themes sind DUNKEL und erzwingen den Dunkelmodus (theme.js setzt dark-theme). */
body.coin-theme-neon { --coin-bg: #0b0b20; --coin-accent: #00e5ff; --coin-accent2: #ff2fd6; }
body.coin-theme-retro { --coin-bg: #0a0a0a; --coin-accent: #ff7c00; --coin-accent2: #7cff00; }
body.coin-theme-rainbow { --coin-bg: #14142a; --coin-accent: #ff3d81; --coin-accent2: #7c4dff; }

/* ===== Dunkelmodus (aktives Theme + dark-theme) ===== */
body.coin-theme-neon.dark-theme,
body.coin-theme-retro.dark-theme,
body.coin-theme-rainbow.dark-theme {
    --c-bg: var(--coin-bg);
    --c-surface: #1c1c34;
    --c-surface-2: #2a2a4e;
    --c-text: #e8e8f0;
    --c-muted: #a6a6c0;
    --c-border: #2e2e46;
    --c-accent: var(--coin-accent);
    --c-accent-2: var(--coin-accent2);
    background: var(--coin-bg, #0d0d22);
}
body.coin-theme-neon.dark-theme {
    --c-accent-hover: #00c4d6;
    background:
        radial-gradient(42% 38% at 12% 12%, rgba(0, 229, 255, 0.16), transparent 70%),
        radial-gradient(46% 40% at 88% 86%, rgba(255, 47, 214, 0.14), transparent 70%),
        var(--coin-bg, #0b0b20);
    background-attachment: fixed;
}
body.coin-theme-retro.dark-theme {
    --c-accent-hover: #d96800;
    background:
        radial-gradient(40% 36% at 18% 18%, rgba(255, 124, 0, 0.14), transparent 70%),
        radial-gradient(44% 40% at 82% 82%, rgba(124, 255, 0, 0.10), transparent 70%),
        var(--coin-bg, #0a0a0a);
    background-attachment: fixed;
}
body.coin-theme-rainbow.dark-theme {
    --c-accent-hover: #e3326f;
    background:
        linear-gradient(180deg, rgba(10, 10, 26, 0.82) 0%, rgba(10, 10, 26, 0.90) 100%),
        linear-gradient(125deg, #ff3d81, #ffb300, #39ff14, #00cfff, #7c4dff, #ff3d81);
    background-size: 100% 100%, 320% 320%;
    background-attachment: fixed;
    animation: coin-rainbow-bg 22s ease-in-out infinite;
}

/* Themes sind DUNKEL: gekoppelt an den Dunkelmodus (theme.js erzwingt
   dark-theme bei aktivem Theme). @keyframes fuer den Regenbogen-Verlauf. */
@keyframes coin-rainbow-bg {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Regenbogen-Canvas: getönter Rahmen */
body.coin-theme-rainbow.dark-theme canvas {
    box-shadow: 0 0 0 1px rgba(124, 77, 255, 0.35), 0 0 24px rgba(124, 77, 255, 0.18);
}

/* Coin-System-Erklärung im Shop */
.shop-info {
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(102, 126, 234, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 12px;
}

.shop-info-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--c-accent);
    margin-bottom: 8px;
}

.shop-info-text {
    font-size: 0.88em;
    line-height: 1.55;
    color: var(--c-muted);
}

.shop-info-note {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(102, 126, 234, 0.25);
}