:root {
    --cnk-gold: #d9aa2b;
    --cnk-gold-light: #fff0a7;
    --cnk-red: #dd1710;
    --cnk-cyan: #9eeeff;
    --cnk-black: #020407;
}

.cnk-shell,
.cnk-shell * {
    box-sizing: border-box;
}

.cnk-shell {
    max-width: 960px;
    margin: 0 auto;
    color: #fff;
    font-family: Arial, "Noto Sans JP", sans-serif;
    -webkit-tap-highlight-color: transparent;
}

.cnk-machine {
    position: relative;
    overflow: hidden;
    width: 100%;
    background:
        radial-gradient(circle at 50% 0, #6b4300 0, #181000 36%, #071014 73%, #000 100%);
    border-inline: 4px solid var(--cnk-gold);
    box-shadow: 0 0 32px #d79b1d75;
    user-select: none;
}

.cnk-maintenance {
    position: absolute;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: start center;
    overflow: auto;
    padding: clamp(24px, 6vw, 56px) 14px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 10%, #5c1900 0, #160600e8 32%, #010204f7 76%),
        #000;
    user-select: text;
}

.cnk-maintenance[hidden] {
    display: none !important;
}

.cnk-maintenance-card {
    width: min(100%, 720px);
    padding: clamp(16px, 4vw, 28px);
    border: 2px solid var(--cnk-gold);
    border-radius: 16px;
    background: #07090dea;
    box-shadow: 0 0 30px #d9aa2b55, inset 0 0 22px #000;
    text-align: center;
}

.cnk-maintenance-card h2 {
    margin: 0 0 10px;
    color: var(--cnk-gold-light);
    font-size: clamp(22px, 5vw, 36px);
}

.cnk-maintenance-message {
    margin: 0 0 12px;
    font-size: clamp(16px, 3.8vw, 24px);
    font-weight: 800;
}

.cnk-maintenance-period,
.cnk-maintenance-reopen {
    margin: 8px 0;
    color: #d8f5ff;
    font-weight: 700;
}

.cnk-ranking-scroll {
    max-height: min(52vh, 520px);
    overflow: auto;
    margin-top: 12px;
    border: 1px solid #86c4d5;
    border-radius: 10px;
    background: #02060b;
}

.cnk-ranking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(13px, 3vw, 18px);
}

.cnk-ranking-table th,
.cnk-ranking-table td {
    padding: 9px 7px;
    border-bottom: 1px solid #274956;
    text-align: right;
}

.cnk-ranking-table th {
    position: sticky;
    z-index: 1;
    top: 0;
    color: #041014;
    background: #d9aa2b;
}

.cnk-ranking-table th:nth-child(2),
.cnk-ranking-table td:nth-child(2) {
    text-align: left;
}

.cnk-ranking-table tbody tr:nth-child(-n+3) {
    color: #fff0a7;
    font-weight: 800;
}

.cnk-ranking-page,
.cnk-ranking-page * {
    box-sizing: border-box;
}

.cnk-ranking-page {
    width: min(100%, 820px);
    margin: 24px auto;
    padding: clamp(16px, 4vw, 28px);
    color: #fff;
    border: 2px solid var(--cnk-gold);
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 0, #533500 0, #11100a 38%, #03070b 100%);
    box-shadow: 0 0 28px #d9aa2b45, inset 0 0 20px #000;
    font-family: Arial, "Noto Sans JP", sans-serif;
}

.cnk-ranking-page__header {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.cnk-ranking-page__header h2 {
    margin: 0;
    color: var(--cnk-gold-light);
    font-size: clamp(22px, 4.5vw, 34px);
}

.cnk-ranking-page__header span {
    flex: 0 0 auto;
    padding: 6px 10px;
    color: #021014;
    border-radius: 999px;
    background: var(--cnk-cyan);
    font-size: 13px;
    font-weight: 800;
}

.cnk-ranking-page__note {
    margin: 10px 0 0;
    color: #d8f5ff;
}

.cnk-ranking-page__refill-note {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid #8f7428;
    border-radius: 6px;
    background: #211b0b;
    color: #fff0ad;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    white-space: normal;
    overflow-wrap: anywhere;
}

.cnk-ranking-page .cnk-ranking-scroll {
    max-height: none;
}

.cnk-ranking-page__nav {
    display: none;
}

/* Keep all three columns inside the available width, including long common-ID names. */
.cnk-ranking-page .cnk-ranking-table {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    table-layout: fixed;
    margin: 0;
    line-height: 1.5;
}

.cnk-ranking-page .cnk-ranking-table :is(th, td):first-child {
    width: 18%;
    white-space: nowrap;
    text-align: center;
}

.cnk-ranking-page .cnk-ranking-table :is(th, td):nth-child(2) {
    width: 48%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.cnk-ranking-page .cnk-ranking-table :is(th, td):nth-child(3) {
    width: 34%;
    white-space: normal;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.cnk-ranking-player {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 7px;
    min-width: 0;
}

.cnk-ranking-player__name {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.cnk-ranking-page .cnk-change-member {
    display: inline-block;
    flex: 0 1 auto;
    max-width: 100%;
    padding: 2px 6px;
    border: 1px solid #d5ac28;
    border-radius: 4px;
    background: #fff0ad;
    color: #3b2b00;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}

.cnk-ranking-page .cnk-ranking-table tbody tr {
    color: #fff;
    font-weight: 400;
}

.cnk-ranking-page .cnk-ranking-table tbody tr.is-top-three {
    color: var(--cnk-gold-light);
    font-weight: 800;
}

.cnk-ranking-page .cnk-ranking-table tbody tr.is-current-user {
    background: #0a3949;
    box-shadow: inset 4px 0 0 var(--cnk-cyan);
}

.cnk-ranking-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
}

.cnk-ranking-pagination a {
    display: inline-block;
    width: fit-content;
    padding: 8px 12px;
    color: #071014;
    border-radius: 8px;
    background: var(--cnk-gold-light);
    font-weight: 800;
    text-decoration: none;
}

.cnk-ranking-pagination a:last-child {
    justify-self: end;
}

.cnk-ranking-pagination strong {
    color: #d8f5ff;
    text-align: center;
}

@media (max-width: 767px) {
    /* A page-sized mobile ranking, independent of Astra/Elementor outer spacing.
       Normal document scrolling preserves position during the existing live refresh. */
    html:has(.cnk-ranking-page),
    body:has(.cnk-ranking-page) {
        margin: 0 !important;
        padding: 0 !important;
        background: #03070b;
    }

    body:has(.cnk-ranking-page) :is(#masthead, #colophon, #wpadminbar, #secondary, .entry-header) {
        display: none !important;
    }

    body:has(.cnk-ranking-page) :is(#page, #content, .ast-container, #primary, #main,
        article:has(.cnk-ranking-page), .entry-content, [id^="cnk-live-"], [data-board],
        .elementor-element:has(.cnk-ranking-page), .e-con-inner:has(.cnk-ranking-page),
        .elementor-widget-container:has(.cnk-ranking-page)) {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    .cnk-ranking-page {
        width: 100%;
        max-width: none;
        min-height: 100vh;
        min-height: 100svh;
        margin: 0;
        padding: 8px max(8px, env(safe-area-inset-right)) 16px max(8px, env(safe-area-inset-left));
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .cnk-ranking-page__nav {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
    }

    .cnk-ranking-page__nav a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 4px 8px;
        color: var(--cnk-gold-light);
        font-size: 14px;
        text-decoration: none;
    }

    .cnk-ranking-page__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .cnk-ranking-page__header h2 {
        font-size: clamp(19px, 5.2vw, 26px);
        line-height: 1.4;
    }

    .cnk-ranking-page__header span {
        padding: 4px 9px;
        font-size: 12px;
    }

    .cnk-ranking-page .cnk-ranking-table {
        font-size: clamp(13px, 3.6vw, 16px);
    }

    .cnk-ranking-page .cnk-ranking-table th,
    .cnk-ranking-page .cnk-ranking-table td {
        padding: 11px 5px;
        vertical-align: middle;
    }

    .cnk-ranking-pagination {
        gap: 6px;
        font-size: 13px;
    }

    .cnk-ranking-pagination a {
        padding: 10px 6px;
    }

    body:has(.cnk-ranking-page) [data-status] {
        margin: 0;
        color: #d8f5ff;
    }
}

/* ⑤管理者モード以外：PUSHボタンより下（通信状況欄）を非表示にし、
   液晶からレバー／PUSH／BETボタンまでをスマホ画面いっぱいに表示する。 */
.cnk-shell--fullscreen .cnk-network {
    display: none;
}

.cnk-exit {
    position: absolute;
    z-index: 20;
    top: 7px;
    right: 7px;
    min-width: 50px;
    min-height: 30px;
    padding: 7px 9px;
    border: 1px solid #fff2a9;
    border-radius: 8px;
    color: #fff;
    background: #090700bf;
    box-shadow: 0 1px 5px #000b;
    font-size: clamp(12px, 2.2vw, 15px);
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
}

.cnk-exit:focus-visible {
    outline: 2px solid #9eeeff;
    outline-offset: 2px;
}

.cnk-lcd {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    height: clamp(245px, 39svh, 430px);
    background: #010205;
    border-bottom: 6px solid var(--cnk-gold);
}

.cnk-shell.is-mode-transition .cnk-lcd {
    background: #000;
}

.cnk-shell.is-mode-transition .cnk-scene-image {
    object-fit: contain;
    object-position: 50% 50%;
    background: #000;
    animation: cnkLightning 180ms linear 5 alternate;
}

/* 天井950G以降：通常背景を維持したまま赤空へ段階変化させる。 */
.cnk-shell.is-ceiling-redsky .cnk-lcd::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, #8e0900aa 0%, #dc3b0580 45%, #39000088 100%),
        radial-gradient(circle at 50% 20%, #ffbf4770 0%, transparent 52%);
    mix-blend-mode: color;
    animation: cnkCeilingSky 1600ms ease-in-out infinite alternate;
}

.cnk-effect-image.is-ceiling-lightning {
    z-index: 3;
    object-fit: contain;
    background: transparent !important;
    mix-blend-mode: screen;
    animation: cnkCeilingLightning 170ms linear 5 alternate;
}

@keyframes cnkCeilingSky {
    from { opacity: .68; filter: saturate(1.05); }
    to { opacity: .92; filter: saturate(1.35) brightness(1.08); }
}

@keyframes cnkCeilingLightning {
    from { opacity: .25; filter: brightness(.85); }
    to { opacity: 1; filter: brightness(1.65) drop-shadow(0 0 18px #fff); }
}

.cnk-lcd > .cnk-video,
.cnk-lcd > .cnk-scene-image,
.cnk-lcd > .cnk-character-image,
.cnk-lcd > .cnk-effect-image {
    position: absolute;
    inset: 0 !important;
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
    background: #000;
    vertical-align: top;
}

.cnk-lcd > [hidden] {
    display: none !important;
}

.cnk-video {
    z-index: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 140ms linear;
}

.cnk-video.is-active {
    visibility: visible;
    opacity: 1;
}

.cnk-scene-image {
    z-index: 1;
}

.cnk-character-image {
    z-index: 2;
    object-fit: contain;
}

/* CZ役告知(cz_role_cue)：白金の罫線・金色発光でアップ表示する。 */
.cnk-character-image.is-cz-role-cue {
    transform: scale(1.12);
    filter: drop-shadow(0 0 14px #ffe8a0) drop-shadow(0 0 26px #ffcf4d);
    outline: 3px solid #fff8dd;
    outline-offset: -6px;
    transition: transform 160ms ease-out, filter 160ms ease-out;
}

/* ⑩AT小役ナビ画像：画面いっぱいではなく1/3程度の大きさにして、
   リール幅に近い横位置へ中央寄せする。 */
.cnk-character-image.is-at-bell-nav {
    inset: auto !important;
    width: 60% !important;
    max-width: 400px !important;
    height: auto !important;
    top: 52% !important;
    object-fit: contain;
    background: transparent !important;
    transition: left 160ms ease-out;
}

/* ③キャラ画像が前面にアップしてくるようなポップ演出。 */
.cnk-character-image.is-at-bell-nav.is-popping {
    animation: cnkNavPop 320ms cubic-bezier(.2,.9,.3,1.3);
}

@keyframes cnkNavPop {
    0% { transform: translate(-50%, -50%) scale(.55); opacity: 0; filter: drop-shadow(0 0 0 #0000); }
    60% { transform: translate(-50%, -50%) scale(1.16); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 6px 10px #000a); }
}

/* ③デモと同じく、ナビされたリール（左／中／右）の位置にキャラ画像を表示する
   （以前はキャラの種類だけで左右に振り分けており、実際のナビ位置と無関係だった）。 */
.cnk-character-image.is-at-bell-nav.is-reel-0 {
    left: 20% !important;
    transform: translate(-50%, -50%);
}

.cnk-character-image.is-at-bell-nav.is-reel-1 {
    left: 50% !important;
    transform: translate(-50%, -50%);
}

.cnk-character-image.is-at-bell-nav.is-reel-2 {
    left: 80% !important;
    transform: translate(-50%, -50%);
}

.cnk-at-nav-digit {
    position: absolute;
    z-index: 6;
    top: 52%;
    transform: translate(-50%, -50%);
    width: clamp(40px, 11vw, 68px);
    height: clamp(40px, 11vw, 68px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 3px solid #5b3a00;
    background: radial-gradient(circle at 40% 32%, #fff 0 24%, #fff5c8 45%, #e6b83f 72%, #8d5900 100%);
    box-shadow: 0 0 0 2px #fff9, 0 3px 8px #000a, 0 0 16px #ffd86a;
    pointer-events: none;
    color: #050505;
    font-size: clamp(22px, 6.5vw, 38px);
    font-weight: 900;
    line-height: 1;
    -webkit-text-stroke: 0 transparent;
}

.cnk-at-nav-digit.is-reel-0 { left: 20%; }
.cnk-at-nav-digit.is-reel-1 { left: 50%; }
.cnk-at-nav-digit.is-reel-2 { left: 80%; }

.cnk-at-nav-digit::after {
    content: none;
}

.cnk-effect-image {
    z-index: 3;
    object-fit: contain;
    mix-blend-mode: screen;
    animation: cnkAura 1.2s ease-in-out infinite alternate;
}

/* ⑨赤7/CHANGE揃い後の炎エフェクト（継続率別に色を変える）。 */
.cnk-aura {
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .85;
    animation: cnkAuraFlicker 900ms ease-in-out infinite alternate;
}

.cnk-aura.is-blue {
    background: radial-gradient(ellipse at 50% 100%, #2b6fffcc, transparent 65%);
}

.cnk-aura.is-yellow {
    background: radial-gradient(ellipse at 50% 100%, #ffe93fcc, transparent 65%);
}

.cnk-aura.is-green {
    background: radial-gradient(ellipse at 50% 100%, #35e26bcc, transparent 65%);
}

.cnk-aura.is-red {
    background: radial-gradient(ellipse at 50% 100%, #ff3b30cc, transparent 65%);
}

.cnk-aura.is-rainbow {
    background: conic-gradient(from 0deg, #ff3b30, #ffe93f, #35e26b, #2b6fff, #a94bff, #ff3b30);
    animation: cnkAuraFlicker 900ms ease-in-out infinite alternate, cnkAuraSpin 4s linear infinite;
}

/* 上位CZ／上位AT／上位BATTLEだけに重ねる軽量な雨エフェクト。
   動画を再エンコードせず、サーバー通信も増やさないCSSレイヤーで描画する。 */
.cnk-rain {
    position: absolute;
    z-index: 3;
    inset: -18% 0;
    overflow: hidden;
    pointer-events: none;
    opacity: .72;
    mix-blend-mode: screen;
    background-image:
        repeating-linear-gradient(
            102deg,
            transparent 0 20px,
            #d9efff99 21px,
            transparent 23px 46px
        ),
        repeating-linear-gradient(
            100deg,
            transparent 0 42px,
            #ffffff70 43px,
            transparent 45px 78px
        );
    background-size: 110px 150px, 170px 220px;
    animation: cnkRainFall 620ms linear infinite;
    transform: translateZ(0);
}

@keyframes cnkRainFall {
    from { background-position: 0 -180px, 30px -240px; }
    to { background-position: -28px 180px, 0 240px; }
}

@keyframes cnkAuraFlicker {
    from { opacity: .55; filter: brightness(.9); }
    to { opacity: .95; filter: brightness(1.25); }
}

@keyframes cnkAuraSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ⑫バトル敗北背景：BATTLE◯・獲得枚数（数字は回転演出）。 */
.cnk-end-result {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1em;
    pointer-events: none;
    text-align: center;
}

.cnk-end-line {
    font-size: clamp(32px, 8vw, 64px);
    font-weight: 1000;
    font-style: italic;
    color: #fff;
    text-shadow: 0 4px 0 #000, 0 0 14px #000;
    white-space: nowrap;
}

.cnk-end-medals-label {
    font-size: clamp(25px, 6.4vw, 52px);
}

.cnk-end-line span.is-rolling {
    display: inline-block;
    animation: cnkEndSpin 420ms cubic-bezier(.2,.8,.25,1);
}

@keyframes cnkEndSpin {
    0% { opacity: .2; transform: perspective(220px) rotateX(-85deg) scale(1.3); }
    70% { opacity: 1; transform: perspective(220px) rotateX(10deg) scale(1.05); }
    100% { transform: none; }
}

.cnk-lcd-shade {
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, #0009 0, transparent 18%, transparent 70%, #000b 100%),
        repeating-linear-gradient(0deg, #fff0 0 3px, #00000012 4px);
}

.cnk-topline {
    position: absolute;
    z-index: 6;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 78px 12px 15px;
    color: #fff;
    font-weight: 900;
    font-size: clamp(14px, 3vw, 24px);
    letter-spacing: .04em;
    text-shadow: 0 2px 3px #000, 0 0 7px #000;
}

.cnk-message {
    position: absolute;
    z-index: 7;
    left: 50%;
    bottom: 8%;
    width: 92%;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 900;
    font-size: clamp(18px, 5vw, 42px);
    text-align: center;
    letter-spacing: .04em;
    text-shadow: 0 3px 0 #000, 0 0 12px #000;
    pointer-events: none;
}

.cnk-message:not(:empty) {
    padding: .25em .5em;
    border-radius: 10px;
    background: #00000066;
}

.cnk-message.is-role-result {
    bottom: 5%;
    width: auto;
    min-width: min(72%, 430px);
    padding: 9px 18px;
    border: none;
    border-radius: 12px;
    background: #000000b3;
    box-shadow: none;
    color: #fff;
    font-size: clamp(18px, 5vw, 42px);
}

/* ⑫「BATTLE◯」表示は大きく強調する。 */
.cnk-message.is-battle-number {
    font-size: clamp(34px, 9vw, 68px);
    font-style: italic;
    -webkit-text-stroke: 2px #000;
    paint-order: stroke fill;
}

.cnk-message.is-failure {
    top: 50%;
    bottom: auto;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: clamp(46px, 13vw, 104px);
    font-weight: 1000;
    line-height: 1;
    transform: translate(-50%, -50%);
    -webkit-text-stroke: clamp(2px, .45vw, 4px) #000;
    paint-order: stroke fill;
    text-shadow: 0 4px 5px #000, 0 0 18px #000;
}

.cnk-at-add-game {
    position: absolute;
    z-index: 13;
    top: 50%;
    left: 50%;
    width: 96%;
    transform: translate(-50%, -50%);
    color: #fff36e;
    font-size: clamp(46px, 13vw, 104px);
    font-weight: 1000;
    font-style: italic;
    line-height: 1;
    text-align: center;
    letter-spacing: .02em;
    -webkit-text-stroke: clamp(2px, .45vw, 4px) #601000;
    paint-order: stroke fill;
    text-shadow:
        0 5px 0 #a51b00,
        0 0 12px #fff,
        0 0 26px #ffb000,
        0 0 48px #ff3c00;
    pointer-events: none;
}

.cnk-at-add-game.is-showing {
    animation: cnkAtAddGameBurst 1450ms ease-out both;
}

.cnk-stars {
    position: absolute;
    z-index: 7;
    top: 18%;
    right: 2.5%;
    display: grid;
    gap: 5px;
}

.cnk-stars span {
    color: #555;
    font-size: clamp(24px, 6vw, 44px);
    line-height: .9;
    text-shadow: 0 2px 3px #000;
}

.cnk-stars span.is-filled {
    color: #fff;
    filter: drop-shadow(0 0 6px #fff);
}

.cnk-vstock {
    position: absolute;
    z-index: 9;
    top: 22%;
    right: 3%;
    color: #ffd84a;
    font-family: Impact, "Arial Black", sans-serif;
    font-size: clamp(42px, 10vw, 80px);
    font-weight: 1000;
    font-style: italic;
    line-height: 1;
    text-shadow: 0 2px 0 #6c3700, 0 0 8px #fff, 0 0 21px #ffb800;
    filter: drop-shadow(0 0 10px #ff8a00);
    animation: cnkStar 1s ease-in-out infinite alternate;
}

.cnk-push-overlay {
    position: absolute;
    z-index: 12;
    left: 50%;
    bottom: 8%;
    min-width: 180px;
    min-height: 74px;
    transform: translateX(-50%);
    border: 5px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: radial-gradient(circle at 50% 35%, #ff665e, #c00000 62%, #370000);
    box-shadow: 0 0 0 5px var(--cnk-gold), 0 0 28px #ff2b20;
    font-size: 30px;
    font-weight: 1000;
    cursor: pointer;
    animation: cnkPush 650ms ease-in-out infinite alternate;
}

.cnk-arrow {
    position: absolute;
    z-index: 10;
    right: 8%;
    bottom: 16%;
    color: #e6110d;
    -webkit-text-stroke: clamp(3px, 1vw, 7px) #000;
    paint-order: stroke fill;
    font-size: clamp(120px, 26vw, 230px);
    font-weight: 1000;
    line-height: .7;
    text-shadow: 0 0 10px #000;
    animation: cnkArrow 620ms ease-in-out infinite alternate;
}

.cnk-aim-symbol {
    position: absolute;
    z-index: 9;
    left: 50%;
    bottom: 4%;
    width: min(48%, 390px);
    height: auto;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 14px #fff);
}

/* ④JAC図柄はもう少し上・大きめに表示する。 */
.cnk-aim-symbol.is-jac {
    bottom: 14%;
    width: min(62%, 470px);
}

/* BONUS STARTの赤7／CHANGEは液晶中央、矢印は右側から図柄中央へ向ける。 */
.cnk-aim-symbol.is-bonus-aim {
    top: 50%;
    bottom: auto;
    width: min(48%, 390px);
    transform: translate(-50%, -50%);
}

.cnk-arrow.is-bonus-aim {
    top: 50%;
    right: 3%;
    bottom: auto;
    transform: translateY(-50%);
    font-size: clamp(100px, 22vw, 200px);
}

/* ⑫完全配達図柄成立：赤い光線が回転するエフェクトを図柄の周りに重ねる。
   img要素には::beforeが安定して効かないため、専用のdivを別に用意する。 */
.cnk-perfect-ray {
    position: absolute;
    z-index: 8;
    left: 50%;
    bottom: 4%;
    width: min(78%, 620px);
    aspect-ratio: 1;
    transform: translate(-50%, 18%);
    background: repeating-conic-gradient(
        from 0deg,
        #ff2b1fcc 0deg 8deg,
        transparent 8deg 20deg
    );
    border-radius: 50%;
    animation: cnkPerfectRay 1.6s linear infinite;
    pointer-events: none;
}

@keyframes cnkPerfectRay {
    from { transform: translate(-50%, 18%) rotate(0deg); }
    to { transform: translate(-50%, 18%) rotate(360deg); }
}

.cnk-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 4px solid var(--cnk-gold);
    background: linear-gradient(180deg, #17232b, #03080c);
}

.cnk-status span {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 7px 3px;
    overflow: hidden;
    border: 2px solid #658b9b;
    border-radius: 12px;
    color: #bfefff;
    font-size: clamp(12px, 2.7vw, 19px);
    text-align: center;
    white-space: nowrap;
}

.cnk-status b {
    display: inline;
    margin: 0;
    color: #fff1b0;
    font-size: clamp(16px, 3.4vw, 28px);
    line-height: 1;
}

.cnk-reel-frame {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 2vw, 22px);
    margin: 14px 20px;
    padding: clamp(12px, 2.5vw, 24px);
    overflow: hidden;
    border: 8px solid #161616;
    border-radius: 42px;
    outline: 8px solid #d1a42a;
    background: #000;
    box-shadow: inset 0 0 18px #000, 0 0 20px #d99d2f70;
}

.cnk-reel {
    position: relative;
    z-index: 1;
    min-width: 0;
    height: clamp(250px, 42vw, 400px);
    overflow: hidden;
    border-radius: 27px;
    background: linear-gradient(90deg, #b99c61, #fffbea 35%, #fff 50%, #fffbea 65%, #b99c61);
    box-shadow: inset 0 0 24px #5d430f99;
}

/* CZ「配達チャンス」デモ：ベルナビ中の押し順数字（左1・中2・右3など）。
   液晶中央のキャラ画像に重なる位置に、黄色い丸＋黒い太文字の数字バッジで表示する。
   横位置はリール3列の中心におおむね合わせている。 */
.cnk-nav-digit {
    position: absolute;
    z-index: 6;
    top: 46%;
    transform: translate(-50%, -50%);
    width: clamp(48px, 13vw, 84px);
    height: clamp(48px, 13vw, 84px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffd400;
    box-shadow: 0 3px 8px #000a;
    pointer-events: none;
    color: #050505;
    font-weight: 900;
    font-size: clamp(28px, 8vw, 48px);
    line-height: 1;
    -webkit-text-stroke: 0 transparent;
}

.cnk-nav-digit::after {
    content: none;
}

.cnk-nav-digit-0 { left: 20%; }
.cnk-nav-digit-1 { left: 50%; }
.cnk-nav-digit-2 { left: 80%; }

/* 毎フレームtransformだけを書き換えて連続スクロールさせる帯。
   img.srcの差し替え頻度に描画が引っ張られないので滑らかに動く。 */
.cnk-reel-strip {
    display: flex;
    flex-direction: column;
    width: 100%;
    will-change: transform;
    backface-visibility: hidden;
}

/* PVデモのreelStopキーフレームと同じバウンド（-12px→+7px→0、180ms ease-out）。 */
.cnk-reel-strip.is-just-stop {
    animation: cnkReelStop 180ms ease-out;
}

@keyframes cnkReelStop {
    0% { transform: translateY(-12px); }
    55% { transform: translateY(7px); }
    100% { transform: translateY(0); }
}

.cnk-reel-strip img,
.cnk-reel img {
    display: block;
    width: 100%;
    flex: 0 0 auto;
    padding: 5%;
    object-fit: contain;
    transform: translateZ(0);
}

.cnk-reel-strip img:not([alt="seven"]):not([alt="change"]):not([alt="perfect"]),
.cnk-reel img:not([alt="seven"]):not([alt="change"]):not([alt="perfect"]) {
    padding: 0;
    transform: scale(1.16) translateZ(0);
}

/* 赤7だけもう少し大きく表示する。change/perfectは従来のまま。 */
.cnk-reel-strip img[alt="seven"],
.cnk-reel img[alt="seven"] {
    padding: 1%;
    transform: scale(1.1) translateZ(0);
}

.cnk-reel.is-spinning .cnk-symbol {
    filter: blur(1.5px) brightness(1.12);
}

.cnk-reel.is-slip-stopping .cnk-symbol {
    filter: blur(.55px) brightness(1.08);
}

.cnk-reel.is-slip-stopping {
    box-shadow: inset 0 0 24px #5d430f99, inset 0 0 16px #dff8ff80;
}

.cnk-reel.is-reverse-spinning .cnk-reel-strip {
    animation: cnkFreezeReverse 420ms linear infinite;
}

.cnk-reel-frame.is-freeze-reverse {
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 9px #ff2b23,
        0 0 34px #ff2b23,
        inset 0 0 32px #ff2b2377;
}

.cnk-reel-frame.is-freeze-perfect-hit {
    animation: cnkRedFlash 120ms linear 12 alternate;
}

.cnk-reel-frame.is-freeze-perfect-hit::before {
    content: "";
    position: absolute;
    z-index: 24;
    inset: -3%;
    border-radius: inherit;
    pointer-events: none;
    background:
        repeating-conic-gradient(
            from 0deg,
            #fff 0 4deg,
            #ffef7a 5deg 10deg,
            transparent 11deg 23deg
        ),
        radial-gradient(circle at 50% 50%, #fff 0 9%, #fff8b7dd 20%, #ff1c12aa 45%, transparent 72%);
    mix-blend-mode: screen;
    filter: brightness(1.5) saturate(1.35);
    animation: cnkFreezePerfectBurst 260ms ease-out 6 both;
}

.cnk-reel-frame.is-freeze-perfect-hit::after {
    content: "";
    position: absolute;
    z-index: 25;
    inset: 0;
    border: clamp(5px, 1.4vw, 12px) solid #fff;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        0 0 12px #fff,
        0 0 30px #ffd91a,
        0 0 58px #ff1c12,
        inset 0 0 32px #fff,
        inset 0 0 65px #ff1c12;
    animation: cnkFreezePerfectBorder 120ms linear 12 alternate;
}

@keyframes cnkFreezeReverse {
    from { transform: translateY(7px); filter: blur(1.8px) brightness(1.2); }
    to { transform: translateY(-7px); filter: blur(2.5px) brightness(1.45); }
}

@keyframes cnkFreezePerfectBurst {
    0% { opacity: 0; transform: scale(.35) rotate(0deg); }
    45% { opacity: 1; transform: scale(1.12) rotate(14deg); }
    100% { opacity: .18; transform: scale(1.45) rotate(30deg); }
}

@keyframes cnkFreezePerfectBorder {
    from { opacity: .25; filter: brightness(1); }
    to { opacity: 1; filter: brightness(2.2); }
}

.cnk-reel-frame.is-hit {
    animation: cnkRedFlash 210ms linear 6 alternate;
}

.cnk-reel-frame.is-at-nav-hit::after {
    content: "";
    position: absolute;
    z-index: 20;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 8%, #fff 28%, #fff7a8 45%, transparent 67%),
        radial-gradient(circle, #fff 0 10%, #fffce8f2 21%, #ffd557c7 43%, #eaa00066 62%, transparent 78%);
    mix-blend-mode: screen;
    animation: cnkAtNavHit 1050ms ease-out both;
}

.cnk-reel-frame.is-at-nav-hit {
    animation: cnkAtNavFrameFlash 180ms linear 6 alternate;
}

.cnk-stop-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 2vw, 22px);
    padding: 4px 52px 2px;
}

.cnk-stop {
    width: 100%;
    min-height: 60px;
    border: 3px solid #555;
    border-radius: 15px;
    color: #111;
    background: linear-gradient(180deg, #fff, #a9b0b2);
    box-shadow: 0 7px 0 #1b2224, 0 12px 18px #000a;
    font-size: clamp(17px, 3.4vw, 29px);
    font-weight: 1000;
    cursor: pointer;
    touch-action: manipulation;
}

.cnk-stop:not(:disabled) {
    color: #095f9c;
    border-color: #efffff;
    background: linear-gradient(180deg, #ffffff 0%, #dffaff 48%, #8eddf8 100%);
    box-shadow:
        0 6px 0 #528ca7,
        0 0 10px #fff,
        0 0 24px #81e8ff,
        inset 0 0 12px #fff;
    text-shadow: 0 1px 0 #fff;
}

.cnk-stop:disabled {
    cursor: not-allowed;
    filter: brightness(.38);
}

.cnk-stop.is-queued {
    filter: brightness(.85);
    box-shadow: 0 0 0 3px #fff, 0 0 22px #8cecff;
}

.cnk-stop.is-warming {
    color: #245a73;
    filter: brightness(.78);
    box-shadow: 0 5px 0 #3f7085, 0 0 14px #68cde8;
}

.cnk-controls {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: start;
    gap: clamp(16px, 4vw, 36px);
    padding: 20px 52px 18px;
}

.cnk-lever,
.cnk-bet {
    justify-self: center;
    width: 64px;
    height: 64px;
    min-height: 64px;
    margin: 0;
    padding: 4px;
    border-radius: 50%;
    cursor: pointer;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.cnk-push-column {
    display: grid;
    justify-items: stretch;
    gap: 7px;
    min-width: 0;
}

.cnk-main-push {
    width: 100%;
    height: 64px;
    min-height: 64px;
    margin: 0;
    border-radius: 18px;
    cursor: pointer;
    touch-action: manipulation;
}

.cnk-mode-display {
    display: block;
    min-height: 18px;
    color: #c8eaff;
    font-size: clamp(11px, 2.2vw, 16px);
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    text-shadow: 0 1px 4px #000;
    white-space: nowrap;
}

.cnk-lever {
    border: 5px solid var(--cnk-gold);
    color: #fff;
    background: radial-gradient(circle at 40% 30%, #ff655c, #df0700 54%, #620000);
    box-shadow: 0 0 25px #d9a929, inset 0 0 12px #fff6;
    font-size: clamp(14px, 2.6vw, 20px);
    font-weight: 1000;
}

.cnk-main-push:hover,
.cnk-main-push:focus,
.cnk-main-push:focus-visible,
.cnk-main-push:active {
    color: #d4151b !important;
}

.cnk-lever:disabled {
    cursor: not-allowed;
    filter: grayscale(.65) brightness(.52);
}

.cnk-lever.is-queue-ready {
    cursor: pointer;
    filter: brightness(1.08);
    box-shadow:
        0 0 0 3px #dffaff,
        0 0 24px #75e6ff,
        inset 0 0 12px #fff8;
}

.cnk-lever.is-next-queued:disabled {
    cursor: wait;
    filter: grayscale(0) brightness(.92);
    box-shadow:
        0 0 0 3px #fff1a8,
        0 0 27px #ffd84a,
        inset 0 0 12px #fff8;
}

.cnk-bet {
    border: 4px solid var(--cnk-gold);
    color: #fff;
    background: radial-gradient(circle at 40% 30%, #72481a, #271700 58%, #080400);
    box-shadow: 0 0 16px #d9a92988, inset 0 0 10px #fff3;
    font-size: clamp(13px, 2.5vw, 19px);
    font-weight: 1000;
    line-height: 1;
}

.cnk-bet:disabled {
    cursor: not-allowed;
    filter: grayscale(.75) brightness(.42);
}

.cnk-bet.is-bet-ready {
    cursor: pointer;
    color: #151000;
    border-color: #fff1a6;
    background: radial-gradient(circle at 40% 28%, #fff5bd, #f1be35 54%, #8a4e00);
    box-shadow:
        0 0 0 3px #fff4ba,
        0 0 25px #ffd84d,
        inset 0 0 12px #fff9;
    filter: none;
}

.cnk-bet.is-bet-armed:disabled {
    color: #fff;
    border-color: #fff0a0;
    background: radial-gradient(circle at 40% 28%, #ff735d, #d81500 58%, #590000);
    box-shadow:
        0 0 0 3px #fff0a0,
        0 0 27px #ffbd2e,
        inset 0 0 12px #fff8;
    filter: none;
}

.cnk-bet.is-auto-bet:disabled {
    color: #04151a;
    border-color: #e9ffff;
    background: radial-gradient(circle at 40% 28%, #edffff, #78e4ff 58%, #12648a);
    box-shadow:
        0 0 0 3px #eaffff,
        0 0 25px #75e6ff,
        inset 0 0 12px #fff9;
    filter: none;
}

.cnk-main-push {
    border: 4px solid #e8f9ff;
    color: #d4151b;
    background: linear-gradient(180deg, #fff, #d8f5ff);
    box-shadow: 0 8px 0 #7dabb8, 0 0 20px #b7f0ff;
    font-size: clamp(20px, 4vw, 34px);
    font-weight: 1000;
}

.cnk-main-push.is-at-end-ready {
    border-color: #fff3a4;
    box-shadow:
        0 8px 0 #8a6114,
        0 0 0 3px #ffd74f,
        0 0 28px #ffd23f;
    animation: cnkAtEndPushReady 850ms ease-in-out infinite alternate;
}

.cnk-main-push.is-at-end-hit {
    animation: cnkAtEndPushHit 900ms ease-out both;
}

@keyframes cnkAtEndPushReady {
    from { filter: brightness(1); }
    to { filter: brightness(1.28); }
}

@keyframes cnkAtEndPushHit {
    0% { transform: scale(.94); filter: brightness(1.5); }
    45% { transform: scale(1.08); filter: brightness(1.3); }
    100% { transform: none; filter: none; }
}

.cnk-network {
    min-height: 28px;
    padding: 5px 12px 9px;
    color: #98bbc5;
    font-size: 12px;
    text-align: center;
}

.cnk-network.is-error {
    color: #ffaaa5;
}

.machine-buru-small {
    animation: cnkBuruSmall 90ms linear 2;
}

.machine-buru-middle {
    animation: cnkBuruMiddle 110ms linear 4;
}

.machine-buru-strong {
    animation: cnkBuruStrong 115ms linear 7;
}

.normal-reel-delay {
    filter: brightness(1.12);
}

.reel-lock-stage1 {
    animation: cnkBuruSmall 105ms linear 5;
}

.reel-lock-stage2 {
    animation: cnkBuruMiddle 125ms linear 7;
}

.reel-freeze,
.reel-lock-stage3-red,
.reel-reverse-premium {
    animation: cnkRedFlash 180ms linear 8 alternate;
}

.cnk-push-overlay[data-color="gold"] {
    background: radial-gradient(circle at 50% 35%, #fff8b0, #dc9b00 60%, #553000);
    box-shadow: 0 0 0 5px #fff1a0, 0 0 34px #ffc400;
}

.cnk-push-overlay[data-color="rainbow"] {
    background: conic-gradient(from 0deg, #e33, #fd3, #4e5, #3cf, #85f, #e3c, #e33);
    box-shadow: 0 0 0 5px #fff, 0 0 38px #ffef6a;
}

.cnk-push-overlay[data-color="blue-white"] {
    color: #06356a;
    background: radial-gradient(circle at 50% 35%, #fff, #b9edff 62%, #1773bd);
    box-shadow: 0 0 0 5px #fff, 0 0 28px #7adfff;
}

.cnk-push-overlay[data-color="yellow"] {
    color: #4c2a00;
    background: radial-gradient(circle at 50% 35%, #fff9b0, #ffd000 62%, #8a5200);
    box-shadow: 0 0 0 5px #fff4aa, 0 0 28px #ffd900;
}

@keyframes cnkAura {
    from { opacity: .62; transform: scale(.97); }
    to { opacity: 1; transform: scale(1.04); }
}

@keyframes cnkStar {
    from { transform: scale(.92) rotate(-4deg); }
    to { transform: scale(1.12) rotate(4deg); }
}

@keyframes cnkPush {
    from { filter: brightness(.9); transform: translateX(-50%) scale(.96); }
    to { filter: brightness(1.4); transform: translateX(-50%) scale(1.05); }
}

@keyframes cnkArrow {
    from { transform: translateX(12px); opacity: .65; }
    to { transform: translateX(-26px); opacity: 1; }
}

@keyframes cnkRedFlash {
    from { outline-color: #d1a42a; box-shadow: 0 0 10px #d99d2f70; }
    to { outline-color: #f21a10; box-shadow: 0 0 34px #f00, inset 0 0 26px #f006; }
}

@keyframes cnkAtNavHit {
    0% { opacity: 0; transform: translateX(-38%) scale(.28); }
    18% { opacity: 1; }
    68% { opacity: .98; transform: translateX(13%) scale(1.04); }
    100% { opacity: 0; transform: translateX(36%) scale(1.18); }
}

@keyframes cnkAtNavFrameFlash {
    from {
        outline-color: #d1a42a;
        box-shadow: inset 0 0 18px #000, 0 0 20px #d99d2f70;
        filter: brightness(1);
    }
    to {
        outline-color: #fff4a3;
        box-shadow: inset 0 0 42px #fff8a8b8, 0 0 42px #ffd640;
        filter: brightness(1.55);
    }
}

@keyframes cnkAtAddGameBurst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.25) rotate(-7deg);
        filter: brightness(2.2);
    }
    14% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.18) rotate(3deg);
    }
    22% { transform: translate(calc(-50% - 9px), calc(-50% + 5px)) scale(1.03) rotate(-2deg); }
    30% { transform: translate(calc(-50% + 10px), calc(-50% - 5px)) scale(1.08) rotate(2deg); }
    38% { transform: translate(calc(-50% - 8px), calc(-50% - 3px)) scale(1.04) rotate(-1deg); }
    46% { transform: translate(calc(-50% + 7px), calc(-50% + 4px)) scale(1.07) rotate(1deg); }
    54% { transform: translate(calc(-50% - 5px), calc(-50% + 2px)) scale(1.04); }
    65%, 86% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
        filter: brightness(1.15);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -53%) scale(1.12);
        filter: brightness(1.45);
    }
}

@keyframes cnkLightning {
    from { opacity: .48; filter: brightness(.8) contrast(1.05); }
    to { opacity: 1; filter: brightness(1.75) contrast(1.3); }
}

@keyframes cnkBuruSmall {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

@keyframes cnkBuruMiddle {
    0%, 100% { transform: translate(0); }
    33% { transform: translate(-6px, 2px); }
    66% { transform: translate(6px, -2px); }
}

@keyframes cnkBuruStrong {
    0%, 100% { transform: translate(0); filter: none; }
    25% { transform: translate(-9px, 3px); filter: brightness(1.35); }
    50% { transform: translate(8px, -3px); filter: brightness(1.7); }
    75% { transform: translate(-6px, -2px); filter: brightness(1.4); }
}

@media (max-width: 600px) {
    .cnk-machine {
        border-inline-width: 2px;
    }
    .cnk-lcd {
        height: min(37svh, 350px);
    }
    .cnk-status {
        gap: 4px;
        padding-inline: 5px;
    }
    .cnk-reel-frame {
        gap: 7px;
        margin-inline: 10px;
        padding: 10px;
        border-width: 6px;
        outline-width: 5px;
        border-radius: 30px;
    }
    .cnk-reel {
        height: clamp(242px, 63vw, 345px);
        border-radius: 20px;
    }
    .cnk-stop-row {
        gap: 7px;
        padding: 3px 26px 1px;
    }
    .cnk-stop {
        min-height: 50px;
    }
    .cnk-controls {
        gap: 14px;
        padding: 18px 26px 14px;
    }
    .cnk-shell--fullscreen .cnk-controls {
        padding-bottom: 10px;
    }
    .cnk-lever,
    .cnk-bet {
        width: 56px;
        height: 56px;
        min-height: 56px;
        border-radius: 50%;
    }
    .cnk-main-push {
        height: 56px;
        min-height: 56px;
        border-radius: 14px;
    }
}

/* 1.0.3: keep both the exit and all controls inside the visible mobile screen.
   Only the LCD and reel area share the remaining height; controls never shrink.
   Fixed positioning also removes theme/page padding from the height budget. */
@media (max-width: 720px), (max-width: 1024px) and (max-height: 600px) and (pointer: coarse) {
    html.cnk-viewport-active,
    body.cnk-viewport-active {
        overflow: hidden !important;
        overscroll-behavior: none;
    }
    .cnk-shell--fullscreen {
        position: fixed;
        z-index: 100000;
        top: var(--cnk-viewport-top, 0px);
        left: var(--cnk-viewport-left, 0px);
        width: var(--cnk-viewport-width, 100%);
        height: 100vh;
        height: 100svh;
        height: var(--cnk-viewport-height, 100dvh);
        max-width: none;
        margin: 0;
        padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        overflow: hidden;
        background: #020407;
        line-height: 1.2;
    }
    .cnk-shell--fullscreen .cnk-machine {
        height: 100%;
        min-height: 0;
        display: grid;
        grid-template-rows: minmax(0, 1.2fr) auto minmax(0, 1fr) auto auto;
        border: 0;
    }
    .cnk-shell--fullscreen .cnk-lcd {
        height: auto;
        min-height: 0;
    }
    .cnk-shell--fullscreen .cnk-reel-frame {
        min-height: 0;
        grid-template-rows: minmax(0, 1fr);
    }
    .cnk-shell--fullscreen .cnk-reel {
        height: 100%;
        min-height: 0;
    }
    .cnk-shell--fullscreen .cnk-stop {
        height: 50px;
        min-height: 44px;
        margin: 0;
        padding: 4px;
        line-height: 1.2;
    }
    .cnk-shell--fullscreen .cnk-main-push {
        padding: 4px;
        line-height: 1.2;
    }
}

/* Short landscape screens put the LCD beside the reels and controls. */
@media (max-width: 720px) and (orientation: landscape) and (max-height: 600px),
       (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {
    .cnk-shell--fullscreen .cnk-machine {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto auto;
    }
    .cnk-shell--fullscreen .cnk-lcd {
        grid-area: 1 / 1 / 5 / 2;
        border-bottom: 0;
        border-right: 4px solid var(--cnk-gold);
    }
    .cnk-shell--fullscreen .cnk-status { grid-area: 1 / 2 / 2 / 3; gap: 4px; padding: 5px; }
    .cnk-shell--fullscreen .cnk-status span { font-size: 12px; padding: 5px 2px; }
    .cnk-shell--fullscreen .cnk-status b { font-size: 16px; }
    .cnk-shell--fullscreen .cnk-reel-frame {
        grid-area: 2 / 2 / 3 / 3;
        gap: 6px;
        margin: 9px 10px;
        padding: 5px;
        border-width: 4px;
        outline-width: 4px;
        border-radius: 20px;
    }
    .cnk-shell--fullscreen .cnk-reel { border-radius: 14px; }
    .cnk-shell--fullscreen .cnk-stop-row { grid-area: 3 / 2 / 4 / 3; gap: 6px; padding: 2px 15px; }
    .cnk-shell--fullscreen .cnk-stop { height: 44px; font-size: 16px; border-radius: 12px; }
    .cnk-shell--fullscreen .cnk-controls { grid-area: 4 / 2 / 5 / 3; gap: 10px; padding: 12px 15px 10px; }
    .cnk-shell--fullscreen .cnk-lever,
    .cnk-shell--fullscreen .cnk-bet { width: 48px; height: 48px; min-height: 48px; font-size: 12px; }
    .cnk-shell--fullscreen .cnk-main-push { height: 48px; min-height: 48px; font-size: 20px; }
    .cnk-shell--fullscreen .cnk-exit { right: calc(50% + 7px); }
}

@media (prefers-reduced-motion: reduce) {
    .cnk-shell *,
    .cnk-shell *::before,
    .cnk-shell *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}

/* 1.0.4: theme-independent screen, including a portrait frame for permitted PCs. */
body.cnk-standalone {
    margin: 0;
    padding: 0;
    background: #020407;
    color: #fff;
    font-family: Arial, "Noto Sans JP", sans-serif;
}
.cnk-standalone .cnk-shell--fullscreen {
    position: fixed;
    z-index: 100000;
    top: var(--cnk-viewport-top, 0px);
    left: var(--cnk-viewport-left, 0px);
    width: var(--cnk-viewport-width, 100%);
    height: 100vh;
    height: var(--cnk-viewport-height, 100dvh);
    max-width: none;
    margin: 0;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    overflow: hidden;
    line-height: 1.2;
}
.cnk-standalone .cnk-machine {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1.2fr) auto minmax(0, 1fr) auto auto;
    border: 0;
}
.cnk-standalone .cnk-lcd { height: auto; min-height: 0; }
.cnk-standalone .cnk-reel-frame { min-height: 0; grid-template-rows: minmax(0, 1fr); }
.cnk-standalone .cnk-reel { height: 100%; min-height: 0; }
.cnk-standalone .cnk-stop { height: 50px; min-height: 44px; padding: 4px; margin: 0; line-height: 1.2; }
.cnk-standalone .cnk-main-push { padding: 4px; line-height: 1.2; }
body.cnk-desktop-allowed .cnk-shell--fullscreen {
    width: min(480px, var(--cnk-viewport-width, 100vw));
    left: 50%;
    transform: translateX(-50%);
}
.cnk-desktop-allowed .cnk-machine { grid-template-columns: minmax(0, 1fr); }
.cnk-desktop-allowed .cnk-machine > * { grid-area: auto; }
.cnk-desktop-allowed .cnk-exit { position: absolute; right: 7px; }
.cnk-desktop-allowed .cnk-status { gap: 4px; padding-inline: 5px; }
.cnk-desktop-allowed .cnk-reel-frame { gap: 7px; margin-inline: 10px; padding: 10px; border-width: 6px; outline-width: 5px; border-radius: 30px; }
.cnk-desktop-allowed .cnk-reel { border-radius: 20px; }
.cnk-desktop-allowed .cnk-stop-row { gap: 7px; padding: 3px 26px 1px; }
.cnk-desktop-allowed .cnk-controls { gap: 14px; padding: 18px 26px 10px; }
.cnk-desktop-allowed .cnk-lever,
.cnk-desktop-allowed .cnk-bet { width: 56px; height: 56px; min-height: 56px; }
.cnk-desktop-allowed .cnk-main-push { height: 56px; min-height: 56px; border-radius: 14px; }
.cnk-access-card {
    box-sizing: border-box;
    width: min(92%, 500px);
    margin: 12vh auto;
    padding: 28px;
    border: 1px solid #d9aa2b;
    border-radius: 16px;
    background: #101820;
    line-height: 1.8;
    text-align: center;
}
.cnk-access-card a { display: block; margin-top: 16px; padding: 10px; border-radius: 8px; background: #d9aa2b; color: #111; text-decoration: none; }
@media (max-width: 720px) and (orientation: landscape) and (max-height: 600px),
       (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {
    body.cnk-standalone:not(.cnk-desktop-allowed) .cnk-machine {
        grid-template-rows: auto minmax(0, 1fr) auto auto;
    }
}