/* Game-only visuals. Shared paper, typography, controls and alerts live in duel-minigame-theme.css. */

/* Coin flip */
.cf24-arena {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    margin: 14px 0;
    padding: 25px;
    overflow: hidden;
}
.cf24-arena::before,
.cf24-arena::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255, 203, 63, .11);
    border-radius: 50%;
    animation: cfPulse 2.5s ease-in-out infinite;
}
.cf24-arena::after {
    width: 340px;
    height: 340px;
    animation-delay: .7s;
}
.cf24-coin-wrap {
    position: relative;
    z-index: 3;
    width: 190px;
    height: 190px;
    perspective: 900px;
    filter: drop-shadow(0 23px 20px rgba(0, 0, 0, .35));
}
.cf24-coin {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.2, .8, .2, 1);
    animation: cfIdleShow 5.2s linear infinite;
}
.cf24-face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border: 9px solid #c88608;
    border-radius: 50%;
    backface-visibility: hidden;
    background: radial-gradient(circle at 33% 27%, #fff3a8, #ffd44e 28%, #e9a817 62%, #a76105);
    color: #6d3b00;
    text-align: center;
    box-shadow: inset 0 0 0 5px #ffeb82, inset 0 0 25px rgba(104, 54, 0, .55), 0 0 28px rgba(255, 194, 32, .3);
}
.cf24-face::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 2px dashed rgba(109, 59, 0, .55);
    border-radius: 50%;
}
.cf24-face i { font-size: 58px; filter: drop-shadow(0 3px 0 rgba(255, 255, 255, .4)); }
.cf24-face b { display: block; margin-top: 2px; font-size: 15px; letter-spacing: 1px; }
.cf24-tails { transform: rotateY(180deg); }
.cf24-coin.is-flipping { animation: cfFlipPro 1.12s linear infinite; transition: none; }
.cf24-coin.show-heads { animation: none; transform: rotateY(0); }
.cf24-coin.show-tails { animation: none; transform: rotateY(180deg); }
.cf24-shadow {
    position: relative;
    z-index: 2;
    width: 180px;
    height: 25px;
    margin-top: 25px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .37);
    filter: blur(8px);
    animation: cfShadow 2.6s ease-in-out infinite;
}
.cf24-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.cf24-choice { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 62px; font-size: 13px; }
.cf24-choice i { color: #f4ba22; font-size: 22px; }
.cf24-outcomes { display: grid; gap: 9px; margin-top: 12px; }
.cf24-outcome,
.rps24-outcome {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border: 1px solid var(--bg_border);
    border-radius: 14px;
    background: var(--bg_sub);
}
.cf24-outcome > i,
.rps24-outcome > i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; font-size: 15px; }
.cf24-outcome strong,
.rps24-outcome strong { display: block; color: var(--font_main); font-size: 12px; }
.cf24-outcome small,
.rps24-outcome small { display: block; margin-top: 2px; color: var(--font_sub); font-size: 10px; line-height: 1.5; }
.cf24-outcome.win,
.rps24-outcome.win { border-color: rgba(32, 197, 116, .3); }
.cf24-outcome.win > i,
.rps24-outcome.win > i { background: rgba(32, 197, 116, .13); color: #20c574; }
.rps24-outcome.draw { border-color: rgba(255, 193, 7, .48); }
.rps24-outcome.draw > i { background: rgba(255, 193, 7, .12); color: #ffc107; }
.cf24-outcome.lose,
.rps24-outcome.lose { border-color: rgba(255, 64, 84, .28); }
.cf24-outcome.lose > i,
.rps24-outcome.lose > i { background: rgba(255, 64, 84, .12); color: #ff4054; }

@keyframes cfIdleShow {
    0% { transform: rotateY(0) translateY(0); }
    25% { transform: rotateY(90deg) translateY(-12px); }
    50% { transform: rotateY(180deg) translateY(0); }
    75% { transform: rotateY(270deg) translateY(-12px); }
    100% { transform: rotateY(360deg) translateY(0); }
}
@keyframes cfFlipPro {
    0% { transform: translateY(0) rotateY(0) scale(1); }
    15% { transform: translateY(-48px) rotateY(360deg) scale(1.035); }
    38% { transform: translateY(-108px) rotateY(900deg) scale(1.08); }
    52% { transform: translateY(-120px) rotateY(1260deg) scale(1.1); }
    72% { transform: translateY(-72px) rotateY(1800deg) scale(1.055); }
    100% { transform: translateY(0) rotateY(2160deg) scale(1); }
}
@keyframes cfShadow {
    0%, 100% { transform: scaleX(1); opacity: .55; }
    50% { transform: scaleX(.65); opacity: .25; }
}
@keyframes cfPulse {
    0%, 100% { transform: scale(.82); opacity: .25; }
    50% { transform: scale(1.08); opacity: .7; }
}

/* Roll the dice */
.rtd24-arena {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 300px;
    margin: 14px 0;
    padding: 24px;
    overflow: hidden;
    perspective: 750px;
}
.rtd24-floor { position: absolute; right: 17%; bottom: 31px; left: 17%; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, .28); filter: blur(11px); }
.rtd24-dice { position: relative; width: 125px; height: 125px; transform-style: preserve-3d; animation: rtdIdle 7s linear infinite; }
.rtd24-face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border: 2px solid color-mix(in srgb, var(--main) 65%, #fff);
    border-radius: 24px;
    backface-visibility: hidden;
    background: linear-gradient(145deg, #fff, #dce5f2);
    color: #161a22;
    font-size: 78px;
    line-height: 1;
    box-shadow: inset 0 0 22px rgba(0, 0, 0, .12), 0 0 18px color-mix(in srgb, var(--main) 20%, transparent);
}
.rtd24-face.f1 { transform: translateZ(62px); }
.rtd24-face.f6 { transform: rotateY(180deg) translateZ(62px); }
.rtd24-face.f3 { transform: rotateY(90deg) translateZ(62px); }
.rtd24-face.f4 { transform: rotateY(-90deg) translateZ(62px); }
.rtd24-face.f2 { transform: rotateX(90deg) translateZ(62px); }
.rtd24-face.f5 { transform: rotateX(-90deg) translateZ(62px); }
.rtd24-arena.is-rolling .rtd24-dice { animation: rtdRoll .48s linear infinite; }
.rtd24-dice.show-result { animation: none; transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.rtd24-title { margin: 14px 0 8px; color: var(--font_main); font-size: 13px; font-weight: 700; }
.rtd24-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.rtd24-exact { grid-template-columns: repeat(6, 1fr); }
.rtd24-choice { min-height: 58px; }
.rtd24-choice small { display: block; color: var(--font_sub); font-size: 10px; }
.rtd24-choice[data-type="low"] > i { color: #ff4054; }
.rtd24-choice[data-type="high"] > i { color: #20c574; }
.rtd24-exact .rtd24-choice { font-size: 28px; }
.rtd24-info { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px dashed var(--bg_border); }
.rtd24-info > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--main) 12%, transparent); color: var(--main); }
.rtd24-info:nth-of-type(1) > i { background: rgba(255, 64, 84, .12); color: #ff4054; }
.rtd24-info:nth-of-type(2) > i { background: rgba(32, 197, 116, .12); color: #20c574; }
.rtd24-info b { display: block; color: var(--font_main); font-size: 13px; }
.rtd24-info small { color: var(--font_sub); font-size: 10px; }

@keyframes rtdIdle { to { transform: rotateX(360deg) rotateY(720deg); } }
@keyframes rtdRoll {
    0% { transform: translateY(-30px) rotateX(0) rotateY(0) rotateZ(0); }
    50% { transform: translateY(18px) rotateX(360deg) rotateY(540deg) rotateZ(180deg); }
    100% { transform: translateY(-30px) rotateX(720deg) rotateY(1080deg) rotateZ(360deg); }
}

/* Rock paper scissors — Player blue vs Bot red. */
.rps24-arena { position: relative; overflow: hidden; margin: 14px 0; padding: 24px 14px; }
.rps24-versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 15px; }
.rps24-fighter { text-align: center; }
.rps24-fighter small { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.rps24-fighter:first-child small { color: #378bff; }
.rps24-fighter.system small { color: #ff4d61; }
.rps24-hand {
    display: grid;
    place-items: center;
    width: min(190px, 100%);
    aspect-ratio: 1;
    margin: auto;
    border: 2px solid var(--bg_border);
    border-radius: 30px;
    font-size: 78px;
    transition: .25s;
}
.rps24-fighter:first-child .rps24-hand {
    border-color: #287dff;
    background: radial-gradient(circle, rgba(40, 125, 255, .2), transparent 65%), var(--bg_main);
    box-shadow: inset 0 0 26px rgba(40, 125, 255, .13), 0 0 22px rgba(40, 125, 255, .22);
}
.rps24-fighter.system .rps24-hand {
    border-color: #ff4054;
    background: radial-gradient(circle, rgba(255, 64, 84, .18), transparent 65%), var(--bg_main);
    box-shadow: inset 0 0 26px rgba(255, 64, 84, .12), 0 0 22px rgba(255, 64, 84, .2);
}
.rps24-vs {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: linear-gradient(var(--bg_main), var(--bg_main)) padding-box, linear-gradient(135deg, #ff4054, #287dff) border-box;
    color: var(--font_main);
    font-size: 18px;
    font-weight: 700;
    box-shadow: -8px 0 22px rgba(255, 64, 84, .16), 8px 0 22px rgba(40, 125, 255, .18);
}
.rps24-arena.is-playing .rps24-fighter:first-child .rps24-hand { animation: rpsShakeLeft .42s ease-in-out infinite; }
.rps24-arena.is-playing .rps24-fighter.system .rps24-hand { animation: rpsShakeRight .42s ease-in-out infinite; }
.rps24-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.rps24-choice { min-height: 65px; font-size: 12px; }
.rps24-choice span { margin-right: 7px; font-size: 25px; vertical-align: middle; }
.rps24-outcomes { display: grid; gap: 9px; margin-top: 12px; }
.rps24-stat { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px dashed var(--bg_border); }
.rps24-stat b { color: var(--font_main); font-size: 13px; }

@keyframes rpsShakeLeft {
    0%, 100% { transform: rotate(-7deg) translateY(0); }
    50% { transform: rotate(8deg) translateY(-16px); }
}
@keyframes rpsShakeRight {
    0%, 100% { transform: rotate(7deg) translateY(0); }
    50% { transform: rotate(-8deg) translateY(-16px); }
}

@media (max-width: 575.98px) {
    .cf24-arena { min-height: 355px; }
    .cf24-coin-wrap { width: 150px; height: 150px; }
    .cf24-face { border-width: 7px; }
    .cf24-face i { font-size: 44px; }
    .rtd24-arena { min-height: 255px; }
    .rtd24-dice { width: 105px; height: 105px; }
    .rtd24-face { font-size: 65px; }
    .rtd24-face.f1 { transform: translateZ(52px); }
    .rtd24-face.f6 { transform: rotateY(180deg) translateZ(52px); }
    .rtd24-face.f3 { transform: rotateY(90deg) translateZ(52px); }
    .rtd24-face.f4 { transform: rotateY(-90deg) translateZ(52px); }
    .rtd24-face.f2 { transform: rotateX(90deg) translateZ(52px); }
    .rtd24-face.f5 { transform: rotateX(-90deg) translateZ(52px); }
    .rtd24-exact { grid-template-columns: repeat(3, 1fr); }
    .rps24-arena { padding: 20px 8px; }
    .rps24-versus { gap: 7px; }
    .rps24-hand { border-radius: 20px; font-size: 52px; }
    .rps24-vs { width: 42px; height: 42px; font-size: 13px; }
    .rps24-choice { min-height: 57px; }
    .rps24-choice span { display: block; margin: 0; font-size: 22px; }
}