body {
    background: #050510;
    color: #fff;
    font-family: sans-serif;
    margin: 0;
    text-align: center;

    /* ネオンぼかし＋グリッド */
    background-image:
        radial-gradient(circle at 20% 30%, rgba(0,255,255,0.15), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255,0,150,0.15), transparent 40%),

        linear-gradient(rgba(0,255,255,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,255,0.08) 1px, transparent 1px);

    background-size:
        100% 100%,
        100% 100%,
        40px 40px,
        40px 40px;

    animation: cyberMove 20s linear infinite;
}

/* ===== イベント本体 ===== */
.event {
    margin: 40px auto;
    width: 500px;
    position: relative;
}

/* ▼ イベント間の区切り線（アニメーション版） */
.event::after {
    content: "";
    display: block;
    margin: 40px auto 0;

    width: 100%;
    height: 3px;

    background: linear-gradient(
        90deg,
        transparent,
        #39ff14,
        #00f2ff,
        #39ff14,
        transparent
    );

    background-size: 200% 100%;

    animation: lineFlow 3s linear infinite, lineGlow 2s ease-in-out infinite;

    box-shadow:
        0 0 10px #00f2ff,
        0 0 20px #00f2ff,
        0 0 40px #00f2ff;
}

/* タイトル */
.event-title {
    margin-top: 20px;
    font-size: 28px;
}

/* サブタイトル */
.event-subtitle {
    margin-bottom: 15px;
    color: #aaa;
}

/* 画像中央 */
.image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.image-wrapper img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 2px solid red;
}

/* 期間 */
.period {
    margin-bottom: 10px;
    font-size: 14px;
    color: #ccc;
}

/* ランキング */
.ranking {
    margin-top: 5px;
}

/* 線の調整 */
:root {
    --line-width: 80%;
    --line-color: rgba(255,255,255,0.15);
}

/* ランク */
.rank {
    display: grid;
    grid-template-columns: 90px 1fr;

    align-items: center;
    padding: 6px 8px;

    position: relative;
}

/* ランク内の下線 */
.rank::after {
    content: "";
    position: absolute;
    bottom: 0;

    left: 0;
    width: var(--line-width);
    height: 1px;

    background: var(--line-color);
}

/* 順位 */
.label {
    text-align: left;
}

/* 名前＋スコア */
.name {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* スコア */
.score {
    font-size: 14px;
    font-weight: bold;
}

/* 上位カラー */
.rank-1 { color: gold; }
.rank-2 { color: silver; }
.rank-3 { color: #cd7f32; }

/* 背景アニメーション */
@keyframes cyberMove {
    from {
        background-position: 0 0, 0 0, 0 0, 0 0;
    }
    to {
        background-position: 0 0, 0 0, 40px 40px, 40px 40px;
    }
}

/* ===== 区切り線アニメーション ===== */

/* 光が流れる */
@keyframes lineFlow {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 0%;
    }
}

/* 光が脈動する */
@keyframes lineGlow {
    0%, 100% {
        opacity: 0.6;
        box-shadow:
            0 0 8px #00f2ff,
            0 0 16px #00f2ff,
            0 0 32px #00f2ff;
    }
    50% {
        opacity: 1;
        box-shadow:
            0 0 15px #39ff14,
            0 0 30px #39ff14,
            0 0 60px #39ff14;
    }
}

/* スキャンライン */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;

    background: repeating-linear-gradient(
        transparent 0px,
        transparent 2px,
        rgba(255,255,255,0.03) 3px
    );
}
/* ===== 部門プルダウン ===== */
.division-select {

    margin: 15px 0;

    width: 260px;
    padding: 12px 15px;

    font-size: 16px;
    font-weight: bold;

    color: #00f2ff;
    background: rgba(10,15,30,0.9);

    border: 2px solid #00f2ff;
    border-radius: 10px;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    cursor: pointer;

    text-align: center;

    box-shadow:
        0 0 10px rgba(0,242,255,0.6),
        inset 0 0 10px rgba(0,242,255,0.2);

    transition: all .3s ease;
}

/* ホバー */
.division-select:hover {

    border-color: #39ff14;

    box-shadow:
        0 0 15px #39ff14,
        0 0 30px rgba(57,255,20,0.5);
}

/* 選択中 */
.division-select:focus {

    outline: none;

    border-color: gold;

    box-shadow:
        0 0 20px gold,
        0 0 40px rgba(255,215,0,0.5);
}

/* 選択肢 */
.division-select option {

    background: #0b1020;
    color: #ffffff;
}
/* ===== とかげんブロック崩し専用 ===== */

.block-ranking{
    width:100%;
    border-collapse:collapse;
    margin-top:15px;
    background:rgba(10,15,30,.9);
    border:2px solid #00f2ff;
    box-shadow:0 0 15px rgba(0,242,255,.5);
}

.block-ranking th{
    background:#00bcd4;
    color:#fff;
    padding:10px;
    font-size:16px;
}

.block-ranking td{
    padding:10px;
    border-top:1px solid rgba(255,255,255,.15);
    text-align:center;
    font-size:15px;
}

.block-ranking tr.rank-1{
    color:gold;
    font-weight:bold;
}

.block-ranking tr.rank-2{
    color:silver;
    font-weight:bold;
}

.block-ranking tr.rank-3{
    color:#cd7f32;
    font-weight:bold;
}


/* ===== ランキング視認性・レスポンシブ調整 ===== */
.event {
    width: min(680px, calc(100% - 32px));
}

.image-wrapper img {
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 12px;
}

.ranking {
    display: grid;
    gap: 10px;
}

.rank {
    grid-template-columns: 70px minmax(0, 1fr);
    min-height: 52px;
    padding: 10px 14px;
    background: rgba(10, 15, 30, 0.88);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 12px;
}

.rank::after {
    display: none;
}

.label {
    font-weight: 800;
}

.name {
    min-width: 0;
    justify-content: space-between;
    text-align: left;
    font-weight: 700;
}

.score {
    flex-shrink: 0;
    color: #ff4f78;
    font-size: 16px;
}

.rank-1 {
    background: linear-gradient(90deg, rgba(255,215,0,.20), rgba(10,15,30,.92));
    border-color: gold;
}

.rank-2 {
    border-color: silver;
}

.rank-3 {
    border-color: #cd7f32;
}

@media (max-width: 520px) {
    .event-title { font-size: 23px; }
    .rank { grid-template-columns: 58px minmax(0, 1fr); padding: 9px 10px; }
    .name { font-size: 14px; }
    .score { font-size: 14px; }
    .division-select { width: 100%; }
}

/* ===== 表彰演出（右上ボタンで停止可能） ===== */
.motion-toggle { position:fixed;z-index:100;top:14px;right:14px;padding:9px 14px;color:#dfffff;background:rgba(5,10,24,.86);border:1px solid #00f2ff;border-radius:999px;font-weight:800;cursor:pointer;box-shadow:0 0 14px rgba(0,242,255,.35);backdrop-filter:blur(8px) }
.motion-toggle:hover { color:#08120a;background:#7cff00;border-color:#7cff00 }
html[data-motion="on"] .event { animation:eventReveal .65s both;animation-timeline:view();animation-range:entry 5% cover 28% }
html[data-motion="on"] .image-wrapper { position:relative;overflow:hidden;border-radius:12px }
html[data-motion="on"] .image-wrapper::after { content:"";position:absolute;inset:-30% auto -30% -45%;width:28%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);animation:imageScan 5.5s ease-in-out infinite;pointer-events:none }
html[data-motion="on"] .rank { animation:rankEnter .48s cubic-bezier(.2,.8,.2,1) both }
html[data-motion="on"] .rank:nth-child(1){animation-delay:.04s} html[data-motion="on"] .rank:nth-child(2){animation-delay:.10s} html[data-motion="on"] .rank:nth-child(3){animation-delay:.16s} html[data-motion="on"] .rank:nth-child(4){animation-delay:.22s} html[data-motion="on"] .rank:nth-child(5){animation-delay:.28s}
html[data-motion="on"] .rank-1 { animation-name:rankEnter,championGlow;animation-duration:.48s,2.8s;animation-delay:.04s,.65s;animation-fill-mode:both;animation-iteration-count:1,infinite }
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after { animation:none!important;transition:none!important }
@keyframes eventReveal { from{opacity:0;transform:translateY(35px) scale(.985)} to{opacity:1;transform:none} }
@keyframes rankEnter { from{opacity:0;transform:translateX(-22px);filter:blur(4px)} to{opacity:1;transform:none;filter:none} }
@keyframes championGlow { 0%,100%{box-shadow:0 0 8px rgba(255,215,0,.20)} 50%{box-shadow:0 0 24px rgba(255,215,0,.55),inset 0 0 18px rgba(255,215,0,.10)} }
@keyframes imageScan { 0%,62%{left:-45%;opacity:0} 68%{opacity:1} 88%,100%{left:125%;opacity:0} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important} }

/* ===== スタンプ・スロット数字・TOP3ゴールド粒子 ===== */
html[data-motion="on"] .rank,
html[data-motion="on"] .rank-1 {
    animation: none;
}

.rank {
    overflow: hidden;
    isolation: isolate;
}

.rank > * {
    position: relative;
    z-index: 2;
}

html[data-motion="on"] .ranking .label {
    transform-origin: center;
    animation: rankStamp .52s cubic-bezier(.15,1.55,.35,1) both;
}

html[data-motion="on"] .ranking .rank:nth-child(1) .label { animation-delay: .10s; }
html[data-motion="on"] .ranking .rank:nth-child(2) .label { animation-delay: .20s; }
html[data-motion="on"] .ranking .rank:nth-child(3) .label { animation-delay: .30s; }
html[data-motion="on"] .ranking .rank:nth-child(4) .label { animation-delay: .40s; }
html[data-motion="on"] .ranking .rank:nth-child(5) .label { animation-delay: .50s; }

.rank-1::before,
.rank-2::before,
.rank-3::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    opacity: .30;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(255,224,92,.95) 0 2px, transparent 3px),
        radial-gradient(circle, rgba(255,246,188,.80) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(255,196,36,.72) 0 1.5px, transparent 2.5px);
    background-size: 58px 58px, 83px 83px, 117px 117px;
    background-position: 0 0, 24px 38px, 70px 12px;
}

html[data-motion="on"] .rank-1::before,
html[data-motion="on"] .rank-2::before,
html[data-motion="on"] .rank-3::before {
    animation: goldParticles 10s linear infinite;
}

.score-slotting {
    min-width: 8ch;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    text-shadow: 0 0 10px currentColor;
}

@keyframes rankStamp {
    0% { opacity: 0; transform: scale(2.8) rotate(-13deg); filter: blur(5px); }
    65% { opacity: 1; transform: scale(.86) rotate(3deg); filter: none; }
    82% { transform: scale(1.10) rotate(-1deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes goldParticles {
    from { background-position: 0 70px, 24px 118px, 70px 92px; }
    to { background-position: 58px -70px, -59px -48px, 187px -142px; }
}

/* ===== 特殊ランキングも共通カード表示 ===== */
.rank-result {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    line-height: 1.15;
}
.rank-result strong { font-size: 16px; }
.rank-result small {
    color: #aebdcc;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
@media (max-width: 520px) {
    .rank-result strong { font-size: 14px; }
    .rank-result small { font-size: 10px; }
}

/* ===== ビューポートに入った時だけランキング演出 ===== */
html[data-motion="on"] .ranking:not(.is-visible) .label {
    animation: none;
    opacity: 1;
    transform: none;
}

html[data-motion="on"] .ranking:not(.is-visible) .rank-1::before,
html[data-motion="on"] .ranking:not(.is-visible) .rank-2::before,
html[data-motion="on"] .ranking:not(.is-visible) .rank-3::before {
    animation: none;
}

html[data-motion="on"] .ranking.is-visible .label {
    animation-name: rankStamp;
}

html[data-motion="on"] .ranking.is-visible .rank-1::before,
html[data-motion="on"] .ranking.is-visible .rank-2::before,
html[data-motion="on"] .ranking.is-visible .rank-3::before {
    animation-name: goldParticles;
}

/* 順位数に関係なく一定間隔でスタンプ表示 */
html[data-motion="on"] .ranking .rank .label {
    animation-delay: calc(.10s + var(--rank-index, 0) * .075s);
}

/* ===== 順位スタンプに続く名前スライド ===== */
.player-name { display:inline-block;min-width:0;overflow-wrap:anywhere }
html[data-motion="on"] .ranking:not(.is-visible) .player-name { animation:none;opacity:1;transform:none }
html[data-motion="on"] .ranking.is-visible .player-name {
    animation:playerNameEnter .58s cubic-bezier(.18,1.35,.36,1) both;
    animation-delay:calc(.22s + var(--rank-index,0) * .075s);
}
@keyframes playerNameEnter {
    0% { opacity:0;transform:translateX(34px) skewX(-8deg);filter:blur(4px) }
    68% { opacity:1;transform:translateX(-5px) skewX(2deg);filter:none }
    84% { transform:translateX(3px) skewX(0) }
    100% { opacity:1;transform:none;filter:none }
}