﻿    /* --- 賭博師: サイバー演出 --- */
    #visual-overlay {
        --gambler-theme: var(--seki-s);
        --gambler-theme-rgb: 0, 216, 255;
        font-family: var(--font-ui);
        overflow: hidden;
    }
    #visual-overlay.guess-a {
        --gambler-theme: var(--seki-s);
        --gambler-theme-rgb: 0, 216, 255;
    }
    #visual-overlay.guess-b {
        --gambler-theme: var(--seki-e);
        --gambler-theme-rgb: 52, 247, 141;
    }
    #visual-overlay.guess-c {
        --gambler-theme: var(--seki-k);
        --gambler-theme-rgb: 255, 53, 94;
    }
    #gambler-cyber-canvas,
    #gambler-cyber-scanlines,
    #gambler-cyber-meta,
    #gambler-cyber-fx {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }
    #gambler-cyber-canvas {
        z-index: 0;
    }
    #gambler-cyber-scanlines {
        z-index: 2;
        opacity: 0.48;
        background: repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.06) 0px,
            rgba(255, 255, 255, 0.06) 1px,
            rgba(0, 0, 0, 0) 1px,
            rgba(0, 0, 0, 0) 4px
        );
    }
    #gambler-cyber-meta {
        z-index: 3;
        color: rgba(var(--gambler-theme-rgb), 0.84);
        font-family: var(--font-readable);
        font-size: 11px;
        letter-spacing: 0.04em;
        mix-blend-mode: screen;
    }
    .gambler-meta-corner {
        position: absolute;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .gambler-meta-corner.tl {
        top: 20px;
        left: 20px;
    }
    .gambler-meta-corner.tr {
        top: 20px;
        right: 20px;
        text-align: right;
    }
    .gambler-meta-corner.bl {
        bottom: 20px;
        left: 20px;
    }
    .gambler-meta-corner.br {
        bottom: 20px;
        right: 20px;
        text-align: right;
    }
    .gambler-meta-stream {
        position: absolute;
        left: 0;
        right: 0;
        white-space: nowrap;
        opacity: 0.42;
        overflow: hidden;
    }
    .gambler-meta-stream.top {
        top: 6px;
        animation: gamblerMetaDriftRight 26s linear infinite;
    }
    .gambler-meta-stream.bottom {
        bottom: 6px;
        animation: gamblerMetaDriftLeft 26s linear infinite;
    }
    @keyframes gamblerMetaDriftRight {
        0% { transform: translateX(-24%); }
        100% { transform: translateX(0%); }
    }
    @keyframes gamblerMetaDriftLeft {
        0% { transform: translateX(0%); }
        100% { transform: translateX(-24%); }
    }
    #gambler-cyber-fx {
        z-index: 4;
        opacity: 0.7;
        background:
            radial-gradient(circle at 50% 40%, rgba(var(--gambler-theme-rgb), 0.16), transparent 62%),
            linear-gradient(120deg, rgba(var(--gambler-theme-rgb), 0.1), transparent 58%);
    }
    #gambler-cyber-fx::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(rgba(var(--gambler-theme-rgb), 0.18) 1px, transparent 1px),
            linear-gradient(90deg, rgba(var(--gambler-theme-rgb), 0.18) 1px, transparent 1px);
        background-size: 44px 44px;
        opacity: 0.32;
        animation: gamblerGridShift 8s linear infinite;
    }
    #gambler-cyber-fx::after {
        content: "";
        position: absolute;
        inset: -20%;
        border: 2px dashed rgba(var(--gambler-theme-rgb), 0.36);
        border-radius: 50%;
        filter: blur(0.2px);
        animation: gamblerRingSpin 14s linear infinite;
    }
    @keyframes gamblerGridShift {
        0% { transform: translate3d(0, 0, 0); }
        100% { transform: translate3d(44px, 44px, 0); }
    }
    @keyframes gamblerRingSpin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    #gambler-cyber-panel {
        position: relative;
        z-index: 10;
        width: min(840px, 94vw);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 26px 20px;
    }
    #gambler-cyber-guess {
        padding: 8px 16px;
        border: 1px solid rgba(var(--gambler-theme-rgb), 0.62);
        border-radius: 999px;
        font-family: var(--font-display-strong);
        font-size: clamp(20px, 3vw, 32px);
        font-weight: 900;
        color: #eaf7ff;
        letter-spacing: 0.09em;
        text-shadow: 0 0 20px rgba(var(--gambler-theme-rgb), 0.52);
        background: linear-gradient(135deg, rgba(6, 16, 32, 0.92), rgba(4, 11, 23, 0.82));
        box-shadow: 0 0 16px rgba(var(--gambler-theme-rgb), 0.24), inset 0 0 20px rgba(var(--gambler-theme-rgb), 0.16);
    }
    #gambler-cyber-card {
        position: relative;
        width: min(300px, 64vw);
        aspect-ratio: 2 / 3;
        border-radius: 16px;
        border: 1px solid rgba(var(--gambler-theme-rgb), 0.66);
        overflow: hidden;
        background: linear-gradient(165deg, rgba(8, 18, 36, 0.95), rgba(4, 10, 22, 0.98));
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.6), 0 0 24px rgba(var(--gambler-theme-rgb), 0.3);
    }
    #gambler-cyber-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(140deg, rgba(var(--gambler-theme-rgb), 0.12), transparent 55%);
        pointer-events: none;
    }
    #gambler-cyber-value {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display-strong);
        font-size: clamp(110px, 20vw, 190px);
        font-weight: 900;
        color: #eaf7ff;
        letter-spacing: 0.06em;
        opacity: 0.08;
        transform: scale(0.92);
        text-shadow: 0 0 26px rgba(var(--gambler-theme-rgb), 0.56);
        transition: transform 360ms ease, opacity 360ms ease;
    }
    #gambler-cyber-card.is-revealed #gambler-cyber-value {
        opacity: 1;
        transform: scale(1);
    }
    #gambler-cyber-mask {
        position: absolute;
        inset: 0;
        z-index: 2;
        transform: translateY(0%);
        transition: transform 2200ms cubic-bezier(0.22, 1, 0.36, 1);
        background:
            linear-gradient(160deg, rgba(10, 30, 54, 0.96), rgba(8, 16, 30, 0.95)),
            repeating-linear-gradient(45deg, rgba(var(--gambler-theme-rgb), 0.24), rgba(var(--gambler-theme-rgb), 0.24) 9px, rgba(0, 0, 0, 0.2) 9px, rgba(0, 0, 0, 0.2) 18px);
    }
    #gambler-cyber-mask .logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: var(--font-display-strong);
        font-size: clamp(44px, 9vw, 70px);
        letter-spacing: 0.2em;
        color: rgba(var(--gambler-theme-rgb), 0.3);
        text-shadow: 0 0 16px rgba(var(--gambler-theme-rgb), 0.32);
    }
    #gambler-cyber-card.is-scanning #gambler-cyber-mask::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 3px;
        top: 0;
        background: rgba(var(--gambler-theme-rgb), 0.9);
        box-shadow: 0 0 10px rgba(var(--gambler-theme-rgb), 0.9);
        animation: gamblerScanline 1.1s linear infinite;
    }
    @keyframes gamblerScanline {
        0% { top: -6%; }
        100% { top: 106%; }
    }
    #gambler-cyber-result {
        min-height: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 30px;
        border-radius: 999px;
        border: 2px solid rgba(var(--gambler-theme-rgb), 0.7);
        font-family: var(--font-display-strong);
        font-size: clamp(34px, 8vw, 62px);
        font-weight: 900;
        color: #eff6ff;
        letter-spacing: 0.12em;
        opacity: 0;
        transform: translateY(10px) scale(0.88);
        text-shadow: 0 0 18px rgba(var(--gambler-theme-rgb), 0.5), 0 0 4px rgba(0, 0, 0, 0.9);
        background: rgba(4, 10, 22, 0.84);
        box-shadow: 0 0 24px rgba(var(--gambler-theme-rgb), 0.24), inset 0 0 18px rgba(var(--gambler-theme-rgb), 0.2);
        transition: transform 260ms ease, opacity 260ms ease;
    }
    #gambler-cyber-result.is-show {
        opacity: 1;
        transform: translateY(0) scale(1);
        animation: gamblerResultGlitch 420ms steps(4, end) 1;
    }
    @keyframes gamblerResultGlitch {
        0% { clip-path: inset(0 0 0 0); transform: translateY(0) scale(1); }
        25% { clip-path: inset(8% 0 14% 0); transform: translate(-3px, 1px) scale(1.03); }
        50% { clip-path: inset(28% 0 33% 0); transform: translate(4px, -2px) scale(0.99); }
        75% { clip-path: inset(18% 0 21% 0); transform: translate(-2px, 2px) scale(1.02); }
        100% { clip-path: inset(0 0 0 0); transform: translateY(0) scale(1); }
    }
    @media (max-width: 680px) {
        #gambler-cyber-panel {
            padding: 18px 12px;
            gap: 14px;
        }
        #gambler-cyber-guess {
            font-size: clamp(16px, 4.8vw, 22px);
            letter-spacing: 0.06em;
        }
        .gambler-meta-corner {
            font-size: 9px;
            opacity: 0.75;
        }
    }
    
