/*
 * Doge Soda — card ladder (Jukebox Hi-Lo) board.
 * Dark grape-cola table, candy call buttons, glossy cards.
 */
.dgs-hilo-table {
    container-type: inline-size;
    display: grid;
    gap: clamp(12px, 3cqi, 22px);
    width: 100%;
    box-sizing: border-box;
    padding: clamp(12px, 3.5cqi, 28px);
    border-radius: var(--dgs-radius, 18px);
    color: var(--dgs-on-night, #fff4e6);
    font-family: var(--dgs-body, system-ui);
    background:
        radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--tone, #db2777) 26%, transparent), transparent 70%),
        linear-gradient(180deg, var(--dgs-night-2, #2d1450), var(--dgs-night, #1e0b33));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 12px 30px rgb(8 0 20 / 0.4);
}
.dgs-hilo-label {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
}
.dgs-hilo-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 8px 16px;
}
.dgs-hilo-run {
    display: block;
    font-family: var(--dgs-display, system-ui);
    font-size: clamp(1.8rem, 7cqi, 2.8rem);
    font-weight: 900;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 0 color-mix(in srgb, var(--tone, #db2777) 70%, #000);
}
.dgs-hilo-meta {
    display: grid;
    justify-items: end;
    gap: 2px;
    font-size: 0.92rem;
    text-align: right;
}
.dgs-hilo-steps { font-weight: 700; }
.dgs-hilo-back { opacity: 0.85; }

.dgs-hilo-middle {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: 'hi card lo';
    align-items: center;
    gap: clamp(10px, 3cqi, 24px);
}
.dgs-hilo-slot {
    grid-area: card;
    display: grid;
    place-items: center;
    padding: 8px;
    border-radius: calc(var(--dgs-radius, 18px) + 4px);
    background: radial-gradient(circle, color-mix(in srgb, var(--tone, #db2777) 30%, transparent), transparent 70%);
    transition: box-shadow 0.25s ease-out;
}
.dgs-hilo-slot .dgs-hilo-card { --card-w: clamp(92px, 25cqi, 156px); }
.dgs-hilo-table.is-miss .dgs-hilo-slot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dgs-acc, #d0103a) 70%, transparent); }
.dgs-hilo-table.is-done .dgs-hilo-slot { box-shadow: 0 0 0 3px var(--dgs-lime, #7cc520), 0 0 26px color-mix(in srgb, var(--dgs-lime, #7cc520) 50%, transparent); }

.dgs-hilo-guess {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    min-height: 120px;
    padding: 14px 10px;
    overflow: hidden;
    border: 0;
    border-radius: var(--dgs-radius, 18px);
    color: #fff;
    font: inherit;
    cursor: pointer;
    box-shadow: inset 0 -5px 0 rgb(0 0 0 / 0.22), 0 6px 16px rgb(8 0 20 / 0.4);
    transition: transform 0.16s ease-out, opacity 0.2s ease-out, filter 0.2s ease-out;
}
.dgs-hilo-guess--hi { grid-area: hi; background: linear-gradient(170deg, #a6e34a, var(--dgs-lime, #7cc520) 45%, #3f8a12); }
.dgs-hilo-guess--lo { grid-area: lo; background: linear-gradient(170deg, #5cc6ff, var(--dgs-sky, #1a9be0) 45%, #5a2bd0); }
.dgs-hilo-guess::before {
    content: '';
    position: absolute;
    inset: 4px 8px 52% 8px;
    border-radius: 14px 14px 40% 40%;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0));
    pointer-events: none;
}
.dgs-hilo-guess:hover:not(:disabled) { transform: translateY(-2px); }
.dgs-hilo-guess:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
.dgs-hilo-guess:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.dgs-hilo-guess:disabled { cursor: default; opacity: 0.42; filter: saturate(0.4); }
.dgs-hilo-arrow { width: 30px; height: 30px; fill: #fff; filter: drop-shadow(0 2px 0 rgb(0 0 0 / 0.25)); }
.dgs-hilo-guess-name { font-weight: 700; line-height: 1.15; text-align: center; }
.dgs-hilo-guess-x {
    font-family: var(--dgs-display, system-ui);
    font-size: clamp(1.25rem, 4.5cqi, 1.7rem);
    font-weight: 900;
    text-shadow: 0 2px 0 rgb(0 0 0 / 0.25);
}
.dgs-hilo-guess-odds { font-size: 0.8rem; opacity: 0.9; }

.dgs-hilo-trailwrap { display: grid; gap: 8px; }
.dgs-hilo-trail {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dgs-hilo-trail-item { position: relative; }
.dgs-hilo-trail-mark {
    position: absolute;
    right: -6px;
    bottom: -6px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 900;
    color: #fff;
    box-shadow: 0 0 0 2px var(--dgs-night, #1e0b33);
}
.dgs-hilo-trail-mark--ok { background: var(--dgs-lime, #7cc520); }
.dgs-hilo-trail-mark--miss { background: var(--dgs-acc, #d0103a); }

@container (max-width: 460px) {
    .dgs-hilo-middle {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 'card card' 'hi lo';
    }
    .dgs-hilo-slot .dgs-hilo-card { --card-w: clamp(96px, 34cqi, 132px); }
    .dgs-hilo-guess { min-height: 0; padding: 12px 8px; }
    .dgs-hilo-arrow { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .dgs-hilo-guess { transition: none; }
}

/* ---------- playing cards (markup from cardkit.js) ---------- */
.dgs-hilo-card {
    --card-w: clamp(56px, 16cqi, 112px);
    position: relative;
    flex: none;
    width: var(--card-w);
    aspect-ratio: 5 / 7;
    perspective: 700px;
}
.dgs-hilo-card.is-small { --card-w: clamp(30px, 7.5cqi, 46px); }
.dgs-hilo-card-in {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dgs-hilo-card.is-down .dgs-hilo-card-in { transform: rotateY(180deg); }
.dgs-hilo-card-face,
.dgs-hilo-card-back {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: calc(var(--card-w) * 0.12);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.dgs-hilo-card-face {
    color: #24123d;
    background: linear-gradient(165deg, #fffdf7 0%, #fff3e2 58%, #f6e6ff 100%);
    box-shadow: 0 6px 14px rgb(8 0 20 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.9),
        inset 0 -4px 0 rgb(123 47 247 / 0.12);
}
.dgs-hilo-card.is-red .dgs-hilo-card-face { color: var(--dgs-acc, #d0103a); }
.dgs-hilo-card-face::after {
    content: '';
    position: absolute;
    inset: 0 0 62% 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0));
    pointer-events: none;
}
.dgs-hilo-card-corner {
    position: absolute;
    z-index: 1;
    top: 6%;
    left: 8%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--dgs-display, system-ui);
    font-size: calc(var(--card-w) * 0.21);
    font-weight: 800;
    line-height: 0.95;
}
.dgs-hilo-card-corner--end {
    top: auto;
    left: auto;
    right: 8%;
    bottom: 6%;
    transform: rotate(180deg);
}
.dgs-hilo-card-suit { font-size: 0.85em; }
.dgs-hilo-card-pip {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: calc(var(--card-w) * 0.5);
    line-height: 1;
}
.dgs-hilo-card.is-small .dgs-hilo-card-pip,
.dgs-hilo-card.is-small .dgs-hilo-card-corner--end { display: none; }
.dgs-hilo-card.is-small .dgs-hilo-card-corner {
    inset: 0;
    justify-content: center;
    font-size: calc(var(--card-w) * 0.36);
}
.dgs-hilo-card-back {
    transform: rotateY(180deg);
    background:
        radial-gradient(circle at 28% 24%, rgb(255 255 255 / 0.4) 0 6%, transparent 7%),
        radial-gradient(circle at 70% 58%, rgb(255 255 255 / 0.22) 0 10%, transparent 11%),
        radial-gradient(circle at 38% 80%, rgb(255 255 255 / 0.18) 0 5%, transparent 6%),
        radial-gradient(circle at 76% 22%, rgb(255 255 255 / 0.16) 0 4%, transparent 5%),
        linear-gradient(150deg, var(--tone, #7b2ff7), var(--dgs-grape, #7b2ff7) 55%, var(--dgs-night-2, #2d1450));
    box-shadow: inset 0 0 0 3px rgb(255 244 230 / 0.9), 0 6px 14px rgb(8 0 20 / 0.45);
}
.dgs-hilo-card--slot {
    border: 2px dashed rgb(255 244 230 / 0.28);
    border-radius: calc(var(--card-w) * 0.12);
}
.dgs-hilo-card.is-fresh { animation: dgs-hilo-deal 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes dgs-hilo-deal {
    from { opacity: 0; transform: translateY(-18px) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
    .dgs-hilo-card.is-fresh { animation: none; }
    .dgs-hilo-card-in { transition: none; }
}