/* motion3d.css — the interactive half of motion3d.js (the 3D copy only).
   Loaded by _rk_harness_3d.html alone; every rule is scoped to
   html[data-rk-motion="3d"], so nothing here reaches the original page. */

/* ── the relic card's back, shown only while the offer is being dealt ── */
/* The square is a <button>: Chrome flattens its contents, so no backface
   trick. motion3d.js fades the back in and the face out on the edge-on frame. */
html[data-rk-motion="3d"] .vx-square > .m3d-back { display: none; }
html[data-rk-motion="3d"] .vx-square.m3d-dealing > .m3d-back {
    display: grid;
    place-items: center;
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    z-index: 7;
    pointer-events: none;
    border: 1px solid rgba(200, 170, 110, .55);
    background:
        radial-gradient(60% 45% at 50% 50%, rgba(10, 200, 185, .22) 0%, transparent 70%),
        repeating-linear-gradient(45deg, rgba(200, 170, 110, .07) 0 6px, transparent 6px 12px),
        linear-gradient(180deg, #0a1428 0%, #010a13 100%);
    box-shadow: inset 0 0 0 4px rgba(1, 10, 19, .9), inset 0 0 0 5px rgba(200, 170, 110, .35);
}
html[data-rk-motion="3d"] .m3d-back-glyph {
    font-size: 34px;
    line-height: 1;
    color: #c8aa6e;
    text-shadow: 0 0 14px rgba(10, 200, 185, .55);
}

/* ── hover: tilt toward the cursor, lift off the table ── */
html[data-rk-motion="3d"] .vx-square:not(.guardian-card):not(.is-passed):not(.is-taken):hover {
    transform: perspective(700px) rotateX(var(--m3d-rx, 0deg)) rotateY(var(--m3d-ry, 0deg)) translateY(-4px) translateZ(16px);
    transition: transform .09s linear, box-shadow .16s ease, border-color .16s ease, opacity .26s ease, filter .26s ease;
}
html[data-rk-motion="3d"] #ability-slots .ability-btn:not(.disabled):hover,
html[data-rk-motion="3d"] .confirm-action-btn:hover {
    transform: perspective(600px) rotateX(var(--m3d-rx, 0deg)) rotateY(var(--m3d-ry, 0deg)) translateZ(8px);
    transition: transform .09s linear;
}

/* ── press: sinks into the table ── */
html[data-rk-motion="3d"] .m3d-press,
html[data-rk-motion="3d"] .m3d-press:hover {
    transform: perspective(600px) translateZ(-12px) scale(.96) !important;
    transition: transform .06s ease-out !important;
}

/* ── the glare that follows the cursor across a card or button ── */
html[data-rk-motion="3d"] .m3d-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    background: radial-gradient(circle at var(--m3d-gx, 50%) var(--m3d-gy, 50%), rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .05) 28%, transparent 58%);
    mix-blend-mode: screen;
    transition: opacity .2s ease;
}
html[data-rk-motion="3d"] :hover > .m3d-glare { opacity: 1; }
html[data-rk-motion="3d"] .disabled > .m3d-glare { display: none; }

/* ── an ability you can use breathes, like a ready power ── */
@keyframes m3d-ready {
    0%, 100% { box-shadow: 0 0 0 1px rgba(10, 200, 185, .18), 0 0 8px rgba(10, 200, 185, .10); }
    50%      { box-shadow: 0 0 0 1px rgba(10, 200, 185, .45), 0 0 18px rgba(10, 200, 185, .30); }
}
html[data-rk-motion="3d"] #ability-slots .ability-btn:not(.disabled):not(.selected):not(.enhanced-glow):not(.echo-flash):not(.wax-flash) {
    animation: m3d-ready 2.6s ease-in-out infinite;
}

/* ── a passed relic is gone once the pick is made ── */
html[data-rk-motion="3d"] .vx-square.is-passed { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    html[data-rk-motion="3d"] #ability-slots .ability-btn { animation: none; }
    html[data-rk-motion="3d"] .vx-square:hover,
    html[data-rk-motion="3d"] #ability-slots .ability-btn:hover,
    html[data-rk-motion="3d"] .confirm-action-btn:hover { transform: none; }
}

/* ── the medallion's edge: rim layers stacked behind the face, shown while it turns ── */
html[data-rk-motion="3d"] .vs-medallion.m3d-turning { transform-style: preserve-3d; }
html[data-rk-motion="3d"] .vs-medallion > .m3d-coin-edge { display: none; }
html[data-rk-motion="3d"] .vs-medallion.m3d-turning > .m3d-coin-edge {
    display: block;
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    pointer-events: none;
    transform: translateZ(var(--z));
    background: radial-gradient(circle, rgba(70, 55, 20, calc(var(--shade) * .95)) 0 62%, rgba(200, 170, 110, var(--shade)) 63% 100%);
    box-shadow: 0 0 0 1px rgba(120, 90, 40, var(--shade));
}
html[data-rk-motion="3d"] .vs-medallion.m3d-turning > .m3d-coin-back {
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 60% 35%, #1a2a38, #0a1420 70%);
    box-shadow: 0 0 0 2px #785a28, inset 0 0 0 3px rgba(200, 170, 110, .35);
    color: #c8aa6e;
    font-size: 26px;
}
html[data-rk-motion="3d"] .vs-medallion.m3d-turning > .m3d-coin-back > span { transform: scaleX(-1); }
/* the back carrying something (the mana die): it sits on the back face, mirrored once to read true, and can be pressed */
html[data-rk-motion="3d"] .vs-medallion.m3d-turning > .m3d-coin-back.m3d-coin-carry { overflow: visible; }
html[data-rk-motion="3d"] .vs-medallion.m3d-turning > .m3d-coin-back > .m3d-coin-face { display: grid; place-items: center; }
html[data-rk-motion="3d"] .vs-medallion.m3d-turning > .m3d-coin-back > .m3d-coin-face > * { pointer-events: auto; }
/* the mana die's controls tilt toward the cursor like the arena's buttons (the die by its body, so it keeps its place) */
html[data-rk-motion="3d"] .md-btn:hover {
    transform: perspective(600px) rotateX(var(--m3d-rx, 0deg)) rotateY(var(--m3d-ry, 0deg)) translateZ(8px);
    transition: transform .09s linear;
}
html[data-rk-motion="3d"] .md-die.md-press:hover > .md-body {
    transform: perspective(600px) rotateX(var(--m3d-rx, 0deg)) rotateY(var(--m3d-ry, 0deg)) translateZ(8px);
    transition: transform .09s linear;
}

/* ── the round timer as pips: one per second, the ring and its dividers step aside ── */
html[data-rk-motion="3d"] .round-timer.m3d-pipped .timer-fill,
html[data-rk-motion="3d"] .round-timer.m3d-pipped .timer-seg { opacity: 0; }
html[data-rk-motion="3d"] .round-timer.m3d-pipped .timer-bg { opacity: 0; }
html[data-rk-motion="3d"] .m3d-pips { position: absolute; inset: 0; pointer-events: none; }
html:not([data-rk-motion="3d"]) .m3d-pips { display: none; }
html[data-rk-motion="3d"] .m3d-pips > i {
    /* a thin square-cut strip laid along the ring; spent strips are
       simply not there */
    position: absolute;
    width: var(--len);
    height: 8.5%;
    border-radius: 0;
    transform: translate(-50%, -50%) rotate(var(--a));
    background: #0ac8b9;
    opacity: 0;
    transition: opacity .2s ease;
}
html[data-rk-motion="3d"] .m3d-pips > i.lit {
    opacity: 1;
    background: #0ac8b9;
    box-shadow: 0 0 5px rgba(10, 200, 185, .6);
}
html[data-rk-motion="3d"] .m3d-pips > i.lit.urgent {
    background: #e8433f;
    box-shadow: 0 0 6px rgba(232, 67, 63, .7);
}