/* Täringud — stiilid (tokenid vt DISAIN.md) */

:root {
    --taring-table-a: #e8eef7;
    --taring-table-b: #dde5f0;
    --taring-hint: #8899aa;
    --taring-danger: #e53935;
    --die-4: #4CAF50;
    --die-6: #00BCD4;
    --die-8: #9C27B0;
    --die-10: #E91E63;
    --die-12: #F44336;
    --die-20: #FF9800;
    --taring-shadow-1: 0 1px 2px rgba(17,17,26,.06), 0 4px 12px rgba(17,17,26,.08);
    --taring-shadow-2: 0 2px 4px rgba(17,17,26,.08), 0 12px 24px rgba(17,17,26,.12);
    --taring-dur-fast: 150ms;
    --taring-dur-base: 250ms;
    --taring-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --taring-ease-out: cubic-bezier(0, 0, 0.2, 1);
}

[data-theme="dark"] {
    --taring-table-a: #1a1f2b;
    --taring-table-b: #11151d;
    --taring-hint: #7a8aa0;
    --taring-danger: #e06b64;
    --die-4: #4c9f57;
    --die-6: #1ba7ba;
    --die-8: #9b4bab;
    --die-10: #d1416e;
    --die-12: #d95149;
    --die-20: #e08e2b;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --taring-table-a: #1a1f2b;
        --taring-table-b: #11151d;
        --taring-hint: #7a8aa0;
        --taring-danger: #e06b64;
        --die-4: #4c9f57;
        --die-6: #1ba7ba;
        --die-8: #9b4bab;
        --die-10: #d1416e;
        --die-12: #d95149;
        --die-20: #e08e2b;
    }
}

.dice-app {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    box-shadow: var(--taring-shadow-1);
    overflow: hidden;
}

/* Fookus — clip-path lõikaks nupu enda outline'i ära, seepärast on
   kujund sisemisel .dice-icon elemendil ja outline jääb nupu kastile */
.dice-app button:focus-visible,
.dice-fullscreen button:focus-visible,
.table-die:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

/* Täringulaud */
.dice-table {
    background: linear-gradient(135deg, var(--taring-table-a) 0%, var(--taring-table-b) 100%);
    min-height: 280px;
    padding: 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dice-table-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 100%;
    min-height: 200px;
}

.dice-hint {
    color: var(--taring-hint);
    font-size: 1rem;
    text-align: center;
}

/* Summa (stat-pill) */
.sum-display {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: 4px 16px;
    border-radius: 999px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    box-shadow: var(--taring-shadow-1);
}

.sum-display span {
    font-weight: 700;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    margin-left: 8px;
}

/* Täring laual */
.table-die {
    cursor: pointer;
    transition: transform var(--taring-dur-fast) var(--taring-ease),
                opacity var(--taring-dur-fast) var(--taring-ease);
    position: relative;
}

.table-die::after {
    content: '\00d7';
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--text-muted);
    color: var(--bg-card);
    width: 24px;
    height: 24px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    opacity: 0;
    transition: opacity var(--taring-dur-fast) var(--taring-ease),
                background var(--taring-dur-fast) var(--taring-ease);
}

@media (hover: hover) {
    .table-die:hover {
        transform: translateY(-2px) scale(1.03);
    }

    .table-die:hover:not(.rolling)::after {
        opacity: 1;
        background: var(--taring-danger);
        color: #fff;
    }
}

.table-die.rolling .die-shape {
    animation: diceRoll 0.6s var(--taring-ease-out);
}

.table-die.rolling .die-shape.d4 {
    animation: diceRollD4 0.6s var(--taring-ease-out);
    transform-origin: 50% 66.7%;
}

@keyframes diceRoll {
    0% { transform: scale(0.5) rotate(0deg); opacity: 0.5; }
    50% { transform: scale(1.2) rotate(180deg); }
    100% { transform: scale(1) rotate(360deg); opacity: 1; }
}

@keyframes diceRollD4 {
    0% { transform: scale(0.5) rotate(0deg); opacity: 0.5; }
    50% { transform: scale(1.2) rotate(180deg); }
    100% { transform: scale(1) rotate(360deg); opacity: 1; }
}

/* Numbri ilmumine — lõppolek eksplitsiitselt, MITTE fill-mode: forwards */
.die-shape .die-number {
    display: inline-block;
    opacity: 0;
    transform: scale(0);
}

.die-shape .die-number.show {
    opacity: 1;
    transform: scale(1);
    animation: numberPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes numberPop {
    0% { opacity: 0; transform: scale(0); }
    70% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

/* Täringute kujundid */
.die-shape {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: 700;
    font-size: 32px;
    font-variant-numeric: tabular-nums;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.die-shape.d4 {
    width: 80px;
    height: 69px;
    background: var(--die-4);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    padding-top: 22px;
    align-items: flex-start;
}

.die-shape.d6 {
    width: 75px;
    height: 75px;
    background: var(--die-6);
    border-radius: 12px;
}

.die-shape.d8 {
    width: 80px;
    height: 80px;
    background: var(--die-8);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.die-shape.d10 {
    width: 70px;
    height: 85px;
    background: var(--die-10);
    clip-path: polygon(50% 0%, 100% 35%, 100% 70%, 50% 100%, 0% 70%, 0% 35%);
}

.die-shape.d12 {
    width: 85px;
    height: 85px;
    background: var(--die-12);
    clip-path: polygon(50% 0%, 79% 10%, 98% 35%, 98% 65%, 79% 90%, 50% 100%, 21% 90%, 2% 65%, 2% 35%, 21% 10%);
}

.die-shape.d20 {
    width: 90px;
    height: 100px;
    background: var(--die-20);
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

/* Valikuriba */
.dice-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-light);
    flex-wrap: wrap;
}

.selector-divider {
    width: 1px;
    height: 32px;
    background: var(--border-color);
    margin: 0 8px;
}

/* Täringu lisamise nupud — nupp ise ilma clip-path'ita (fookusraam!),
   kujund sisemisel .dice-icon elemendil */
.dice-btn {
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform var(--taring-dur-fast) var(--taring-ease);
}

.dice-btn .dice-icon {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: 700;
    font-size: 14px;
}

.dice-btn:active {
    transform: scale(0.95);
}

.dice-btn.d4 .dice-icon {
    background: var(--die-4);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    padding-top: 14px;
}

.dice-btn.d6 .dice-icon {
    background: var(--die-6);
    border-radius: 8px;
}

.dice-btn.d8 .dice-icon {
    background: var(--die-8);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.dice-btn.d10 .dice-icon {
    background: var(--die-10);
    clip-path: polygon(50% 0%, 100% 35%, 100% 70%, 50% 100%, 0% 70%, 0% 35%);
}

.dice-btn.d12 .dice-icon {
    background: var(--die-12);
    clip-path: polygon(50% 0%, 79% 10%, 98% 35%, 98% 65%, 79% 90%, 50% 100%, 21% 90%, 2% 65%, 2% 35%, 21% 10%);
}

.dice-btn.d20 .dice-icon {
    background: var(--die-20);
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

/* Primaarne CTA — veeretamine, rakenduse ainus aktsentnupp */
.roll-btn {
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 999px;
    background: var(--accent-color);
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    transition: transform var(--taring-dur-fast) var(--taring-ease),
                background var(--taring-dur-fast) var(--taring-ease);
}

.roll-btn:active {
    transform: scale(0.95);
}

.roll-btn.rolling i {
    animation: spin 0.5s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Sekundaarsed juhtnupud — vaiksed, üks visuaalne keel */
.clear-btn,
.sound-btn,
.fullscreen-btn {
    width: 52px;
    height: 52px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    transition: transform var(--taring-dur-fast) var(--taring-ease),
                background var(--taring-dur-fast) var(--taring-ease),
                color var(--taring-dur-fast) var(--taring-ease);
}

.clear-btn:active,
.sound-btn:active,
.fullscreen-btn:active {
    transform: scale(0.95);
}

.sound-btn.muted {
    color: var(--text-muted);
}

@media (hover: hover) {
    .dice-btn:hover {
        transform: translateY(-2px) scale(1.06);
    }

    .roll-btn:hover {
        background: var(--accent-hover);
        transform: scale(1.06);
    }

    .clear-btn:hover {
        background: var(--bg-hover);
        color: var(--taring-danger);
    }

    .sound-btn:hover,
    .fullscreen-btn:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }
}

/* Täisekraani vaade */
.dice-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(135deg, var(--taring-table-a) 0%, var(--taring-table-b) 100%);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

.dice-fullscreen:focus {
    outline: none; /* passiivne kest, fookus liigub siia ainult programmiliselt */
}

.dice-fullscreen.active {
    display: flex;
}

.fs-dice-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 5vw, 48px);
    max-width: 92vw;
}

.fs-die .die-shape {
    font-size: clamp(40px, 9vw, 72px);
}

.fs-die .die-shape.d4 { width: clamp(100px, 22vw, 170px); height: clamp(86px, 19vw, 146px); padding-top: clamp(28px, 6vw, 46px); }
.fs-die .die-shape.d6 { width: clamp(95px, 21vw, 160px); height: clamp(95px, 21vw, 160px); border-radius: clamp(14px, 3vw, 22px); }
.fs-die .die-shape.d8 { width: clamp(100px, 22vw, 170px); height: clamp(100px, 22vw, 170px); }
.fs-die .die-shape.d10 { width: clamp(90px, 19vw, 150px); height: clamp(108px, 23vw, 182px); }
.fs-die .die-shape.d12 { width: clamp(105px, 23vw, 180px); height: clamp(105px, 23vw, 180px); }
.fs-die .die-shape.d20 { width: clamp(110px, 24vw, 190px); height: clamp(122px, 26vw, 210px); }

.fs-die.rolling .die-shape {
    animation: diceRoll 0.6s var(--taring-ease-out);
}

.fs-exit {
    position: fixed;
    top: 16px;
    right: 24px;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: none;
    background: rgba(0,0,0,0.25);
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    transition: background var(--taring-dur-fast) var(--taring-ease),
                transform var(--taring-dur-fast) var(--taring-ease);
}

@media (hover: hover) {
    .fs-exit:hover {
        background: rgba(0,0,0,0.45);
        transform: scale(1.06);
    }
}

.fs-hint {
    position: fixed;
    top: 24px;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--taring-hint);
    font-size: 1rem;
    pointer-events: none;
    transition: opacity var(--taring-dur-base) var(--taring-ease);
}

.fs-sum {
    position: fixed;
    bottom: 32px;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--text-primary);
    font-size: clamp(2rem, 7vw, 3.5rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* Ajalugu */
.roll-history {
    border-top: 1px solid var(--border-light);
    background: var(--bg-secondary);
}

.history-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    cursor: pointer;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.875rem;
    background: transparent;
    border: none;
    user-select: none;
    transition: background var(--taring-dur-fast) var(--taring-ease);
}

@media (hover: hover) {
    .history-header:hover {
        background: var(--bg-hover);
    }
}

.history-toggle {
    transition: transform var(--taring-dur-fast) var(--taring-ease);
}

.roll-history.open .history-toggle {
    transform: rotate(180deg);
}

.history-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--taring-dur-base) var(--taring-ease);
}

.roll-history.open .history-content {
    max-height: 300px;
    overflow-y: auto;
}

.history-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.history-empty i {
    display: block;
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.history-list {
    padding: 0 16px 16px;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 0.875rem;
}

.history-item:last-child {
    margin-bottom: 0;
}

.history-dice {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
}

.history-die {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    color: white;
    font-weight: 700;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.history-die.d4 { background: var(--die-4); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); padding-top: 6px; height: 24px; }
.history-die.d6 { background: var(--die-6); }
.history-die.d8 { background: var(--die-8); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.history-die.d10 { background: var(--die-10); clip-path: polygon(50% 0%, 100% 35%, 100% 70%, 50% 100%, 0% 70%, 0% 35%); }
.history-die.d12 { background: var(--die-12); clip-path: polygon(50% 0%, 79% 10%, 98% 35%, 98% 65%, 79% 90%, 50% 100%, 21% 90%, 2% 65%, 2% 35%, 21% 10%); }
.history-die.d20 { background: var(--die-20); clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }

.history-sum {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    margin-left: 12px;
    white-space: nowrap;
}

.history-time {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-left: 12px;
}

/* Vähendatud liikumine — liikumine kaob, tagasiside jääb */
@media (prefers-reduced-motion: reduce) {
    .table-die.rolling .die-shape,
    .fs-die.rolling .die-shape,
    .die-shape .die-number.show,
    .roll-btn.rolling i {
        animation: none;
    }

    .table-die,
    .table-die::after,
    .dice-btn,
    .roll-btn,
    .clear-btn,
    .sound-btn,
    .fullscreen-btn,
    .fs-exit,
    .fs-hint,
    .history-header,
    .history-toggle,
    .history-content {
        transition-duration: 0.01ms;
    }
}

/* Mobiil */
@media (max-width: 480px) {
    .dice-selector {
        gap: 8px;
        padding: 12px 16px;
    }

    .dice-btn,
    .roll-btn,
    .clear-btn,
    .sound-btn,
    .fullscreen-btn {
        width: 44px;
        height: 44px;
    }

    .dice-btn .dice-icon {
        font-size: 12px;
    }

    .roll-btn {
        font-size: 18px;
    }

    .clear-btn,
    .sound-btn,
    .fullscreen-btn {
        font-size: 16px;
    }

    .selector-divider {
        height: 28px;
        margin: 0 4px;
    }

    .dice-table {
        padding: 16px;
    }

    .dice-table-inner {
        gap: 16px;
    }

    .sum-display {
        bottom: 12px;
        right: 12px;
    }

    .die-shape {
        font-size: 26px;
    }

    .die-shape.d4 { width: 65px; height: 56px; padding-top: 18px; }
    .die-shape.d6 { width: 60px; height: 60px; }
    .die-shape.d8 { width: 65px; height: 65px; }
    .die-shape.d10 { width: 55px; height: 70px; }
    .die-shape.d12 { width: 70px; height: 70px; }
    .die-shape.d20 { width: 75px; height: 85px; }
}