.kdm-game {
    --kdm-gold: #d8b766;
    --kdm-gold-bright: #f5dd91;
    --kdm-violet: #a47ae8;
    --kdm-ink: #090a0d;
    --kdm-panel: #12151b;
    --kdm-line: rgba(216, 183, 102, .35);
    --kdm-text: #eee8d8;
    --kdm-muted: #aaa394;
    margin: 2rem auto;
    max-width: 980px;
    color: var(--kdm-text);
    font-family: Georgia, "Times New Roman", serif;
}

.kdm-game *, .kdm-game *::before, .kdm-game *::after { box-sizing: border-box; }

.kdm-frame {
    position: relative;
    overflow: hidden;
    padding: clamp(20px, 4vw, 44px);
    border: 1px solid var(--kdm-line);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 0%, rgba(216,183,102,.12), transparent 38%),
        linear-gradient(145deg, #171a21, #090a0d 72%);
    box-shadow: 0 24px 70px rgba(0,0,0,.45), inset 0 0 70px rgba(0,0,0,.55);
}

.kdm-frame::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(216,183,102,.13);
    border-radius: 16px;
    pointer-events: none;
}

.kdm-header { text-align: center; position: relative; z-index: 1; }
.kdm-kicker { text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; color: var(--kdm-gold); }
.kdm-header h2 { margin: .35rem 0 .5rem; color: var(--kdm-gold-bright); font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 500; }
.kdm-header p { margin: 0 auto; max-width: 620px; color: var(--kdm-muted); }

.kdm-stele { width: 90px; height: 110px; margin: 30px auto 18px; perspective: 600px; }
.kdm-stele-core {
    display: grid; place-items: center; width: 100%; height: 100%;
    color: var(--kdm-gold-bright); font-size: 2.1rem;
    border: 1px solid rgba(216,183,102,.35);
    background: linear-gradient(165deg, #242831, #050608 68%);
    clip-path: polygon(18% 0,82% 0,100% 14%,88% 100%,12% 100%,0 14%);
    box-shadow: inset 0 0 30px rgba(216,183,102,.1);
    text-shadow: 0 0 18px rgba(245,221,145,.65);
    animation: kdmPulse 3s ease-in-out infinite;
}

.kdm-pool-wrap, .kdm-slots-wrap, .kdm-history-wrap { margin-top: 26px; }
.kdm-pool-wrap h3, .kdm-slots-wrap h3, .kdm-history-wrap h3 { margin: 0 0 12px; text-align: center; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--kdm-muted); }

.kdm-rune-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; min-height: 102px; padding: 14px; border: 1px dashed rgba(216,183,102,.22); border-radius: 16px; background: rgba(255,255,255,.018); }

.kdm-rune {
    width: 112px; min-height: 78px; padding: 9px 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--kdm-text); cursor: grab;
    border: 1px solid rgba(216,183,102,.43); border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #54482a, #201b12 46%, #0e0d0a 80%);
    box-shadow: 0 5px 16px rgba(0,0,0,.35), inset 0 0 12px rgba(245,221,145,.12);
    transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
    font-family: inherit;
}
.kdm-rune:hover, .kdm-rune.is-selected { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 2px rgba(245,221,145,.18); }
.kdm-rune.is-selected { outline: 2px solid var(--kdm-gold-bright); }
.kdm-rune.is-placed { opacity: .08; pointer-events: none; }
.kdm-rune.is-dragging { opacity: .35; }
.kdm-rune-symbol { font-size: 2rem; line-height: 1; color: var(--kdm-gold-bright); text-shadow: 0 0 10px rgba(245,221,145,.45); }
.kdm-rune-label { font-size: .76rem; color: #d8d0bd; }

.kdm-slots { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); gap: 12px; }
.kdm-slot {
    position: relative; min-height: 118px; padding: 18px 8px 10px;
    border: 1px solid rgba(216,183,102,.28); border-radius: 16px;
    background: linear-gradient(180deg, rgba(216,183,102,.04), rgba(0,0,0,.18));
    color: var(--kdm-muted); cursor: pointer; font-family: inherit;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.kdm-slot:hover, .kdm-slot.is-drop-target, .kdm-slot.is-selected { border-color: rgba(245,221,145,.68); background: rgba(216,183,102,.08); transform: translateY(-2px); }
.kdm-slot.is-selected { outline: 2px solid rgba(245,221,145,.55); outline-offset: 2px; }
.kdm-slot.is-dragging { opacity: .5; }
.kdm-slot.is-filled { color: var(--kdm-text); border-color: rgba(216,183,102,.55); }
.kdm-slot-number { position: absolute; top: 7px; left: 10px; color: rgba(216,183,102,.45); font-size: .72rem; }
.kdm-slot-content { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kdm-slot-symbol { font-size: 2.35rem; color: var(--kdm-gold-bright); text-shadow: 0 0 12px rgba(245,221,145,.45); }
.kdm-slot-label { font-size: .8rem; }

.kdm-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: 24px; }
.kdm-controls button { border-radius: 999px; padding: 11px 18px; font: 600 .86rem/1.1 Arial, sans-serif; cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.kdm-controls button:hover:not(:disabled) { transform: translateY(-1px); }
.kdm-controls button:disabled { opacity: .45; cursor: not-allowed; }
.kdm-activate { border: 1px solid #e1c36e; background: linear-gradient(#e1c36e,#a9893f); color: #17130a; }
.kdm-clear, .kdm-reset { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.04); color: #ddd7c9; }
.kdm-attempts { width: 100%; text-align: center; margin-top: 4px; color: var(--kdm-muted); font-size: .86rem; }

.kdm-feedback { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.kdm-feedback-card { min-height: 122px; padding: 16px; text-align: center; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(0,0,0,.2); }
.kdm-feedback-value { display: block; font: 700 2rem/1 Arial, sans-serif; margin-bottom: 8px; }
.kdm-feedback-card strong { display: block; font-size: .92rem; }
.kdm-feedback-card small { display: block; margin-top: 5px; color: var(--kdm-muted); line-height: 1.3; }
.kdm-gold .kdm-feedback-value, .kdm-gold strong { color: var(--kdm-gold-bright); }
.kdm-violet .kdm-feedback-value, .kdm-violet strong { color: #c7a7ff; }
.kdm-black .kdm-feedback-value, .kdm-black strong { color: #c6c8ce; }

.kdm-status { min-height: 24px; margin-top: 18px; padding: 0 10px; text-align: center; color: var(--kdm-muted); }
.kdm-status.is-success { color: #f3da87; font-weight: 700; }
.kdm-status.is-error { color: #e28b8b; }
.kdm-status.is-warning { color: #e3bd6f; }
.kdm-status.is-working { color: #c7a7ff; }

.kdm-history-wrap { padding-top: 6px; }
.kdm-history-empty { text-align: center; color: #777267; font-style: italic; }
.kdm-history { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.kdm-history-entry { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.018); }
.kdm-history-runes { display: flex; gap: 7px; }
.kdm-history-rune { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(216,183,102,.32); border-radius: 50%; color: var(--kdm-gold-bright); background: #15130d; }
.kdm-history-result { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; font: 600 .76rem Arial, sans-serif; }
.kdm-history-result .gold { color: var(--kdm-gold-bright); }
.kdm-history-result .violet { color: #c7a7ff; }
.kdm-history-result .black { color: #b8bbc3; }

.kdm-game.is-open .kdm-frame { box-shadow: 0 24px 70px rgba(0,0,0,.45), inset 0 0 90px rgba(216,183,102,.12), 0 0 40px rgba(216,183,102,.15); }
.kdm-game.is-open .kdm-stele-core { animation: kdmOpen 1.2s ease-in-out infinite alternate; }
.kdm-game.is-failed .kdm-stele-core { color: #8f809f; border-color: #463c51; box-shadow: inset 0 0 32px rgba(74,51,90,.35); text-shadow: none; animation: none; }
.kdm-game.is-busy .kdm-stele-core { animation-duration: .7s; }

@keyframes kdmPulse { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes kdmOpen { from { filter: brightness(1); transform: scale(1); } to { filter: brightness(1.55); transform: scale(1.05); } }

@media (max-width: 760px) {
    .kdm-slots { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
    .kdm-slot { min-height: 92px; padding-left: 4px; padding-right: 4px; }
    .kdm-slot-symbol { font-size: 1.7rem; }
    .kdm-slot-label { font-size: .66rem; }
    .kdm-feedback { grid-template-columns: 1fr; }
    .kdm-rune { width: 92px; min-height: 70px; }
}

@media (max-width: 520px) {
    .kdm-frame { padding: 18px 12px; border-radius: 16px; }
    .kdm-slots { gap: 4px; }
    .kdm-slot { min-height: 80px; border-radius: 10px; }
    .kdm-slot-label { display: none; }
    .kdm-history-entry { align-items: flex-start; flex-direction: column; }
    .kdm-history-result { justify-content: flex-start; }
}