@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Inter:wght@400;600;800&display=swap');

.snake-mystic-wrap {
    position: relative;
    overflow: hidden;
    margin: 0 auto 20px;
    padding: 24px 10px 30px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 20% 10%, rgba(132, 92, 255, .32), transparent 34%),
        radial-gradient(circle at 78% 12%, rgba(0, 255, 209, .18), transparent 30%),
        radial-gradient(circle at 50% 95%, rgba(72, 12, 168, .42), transparent 38%),
        linear-gradient(135deg, #070510 0%, #110920 44%, #050816 100%);
    box-shadow: inset 0 0 80px rgba(104, 66, 255, .12), 0 25px 70px rgba(0,0,0,.35);
}
.snake-mystic-wrap:before,
.snake-mystic-wrap:after {
    content: '';
    position: absolute;
    inset: -30%;
    pointer-events: none;
}
.snake-mystic-wrap:before {
    background-image:
        radial-gradient(circle, rgba(255,255,255,.45) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(130,255,224,.26) 0 1px, transparent 1.5px);
    background-size: 80px 80px, 130px 130px;
    animation: snakeStars 28s linear infinite;
    opacity: .32;
}
.snake-mystic-wrap:after {
    background: linear-gradient(90deg, transparent, rgba(187, 134, 252, .12), transparent);
    filter: blur(18px);
    animation: snakeMist 12s ease-in-out infinite alternate;
}
@keyframes snakeStars { from { transform: translate3d(0,0,0); } to { transform: translate3d(90px,70px,0); } }
@keyframes snakeMist { from { transform: translateX(-12%) rotate(0deg); opacity: .25; } to { transform: translateX(12%) rotate(8deg); opacity: .65; } }

.snake-shell {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}
.snake-card {
    width: 100%;
    max-width: 620px;
    padding: 22px;
    border-radius: 24px;
    color: #f7ecff;
    text-align: center;
    background: linear-gradient(145deg, rgba(16, 9, 34, .88), rgba(7, 12, 30, .82));
    border: 1px solid rgba(188, 147, 255, .32);
    box-shadow: 0 0 0 1px rgba(0,255,209,.09), 0 0 40px rgba(124, 58, 237, .28), 0 28px 60px rgba(0,0,0,.4);
    backdrop-filter: blur(10px);
}
.snake-title {
    margin: 0;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 34px;
    letter-spacing: .04em;
    color: #fff7d6;
    text-shadow: 0 0 12px rgba(255, 214, 102, .65), 0 0 28px rgba(157, 78, 221, .7);
}
.snake-subtitle {
    margin: 4px 0 0;
    color: rgba(231, 215, 255, .78);
}
.snake-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    text-align: left;
}
.snake-kicker {
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #7fffe3;
    text-shadow: 0 0 10px rgba(127,255,227,.65);
}
.snake-score {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
}
.snake-score span { color: #7fffe3; text-shadow: 0 0 16px rgba(127,255,227,.9); }
.snake-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(127, 255, 227, .08);
    border: 1px solid rgba(127, 255, 227, .35);
    color: #dffcf8;
    font-weight: 800;
    box-shadow: inset 0 0 18px rgba(127,255,227,.08), 0 0 16px rgba(127,255,227,.16);
}
.snake-canvas-frame {
    position: relative;
    display: inline-block;
    padding: 9px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(127,255,227,.45), rgba(157,78,221,.55), rgba(255,215,105,.38));
    box-shadow: 0 0 28px rgba(127,255,227,.24), 0 0 45px rgba(157,78,221,.28);
}
.snake-canvas-frame:before {
    content: 'ᚱ ᛟ ᚾ ᛖ';
    position: absolute;
    left: 50%; top: -18px;
    transform: translateX(-50%);
    color: rgba(255, 247, 214, .75);
    letter-spacing: .55em;
    font-size: 13px;
    text-shadow: 0 0 12px rgba(255,214,102,.9);
}
#snakeCanvas {
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
    border-radius: 16px;
    background: #050816;
    box-shadow: inset 0 0 35px rgba(127,255,227,.09), inset 0 0 70px rgba(157,78,221,.18);
    touch-action: none;
}
.snake-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
}
.snake-toolbar .button,
.snake-toolbar .btn {
    border-radius: 999px !important;
    padding: 9px 20px !important;
    font-weight: 800 !important;
    letter-spacing: .03em;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: linear-gradient(135deg, rgba(127,255,227,.18), rgba(157,78,221,.35)) !important;
    color: #fff !important;
    box-shadow: 0 0 18px rgba(157,78,221,.25);
    transition: transform .18s ease, box-shadow .18s ease;
}
.snake-toolbar .button:hover,
.snake-toolbar .btn:hover { transform: translateY(-1px); box-shadow: 0 0 26px rgba(127,255,227,.35); }
.snake-help {
    margin: 13px auto 0;
    max-width: 470px;
    color: rgba(231,215,255,.8);
}
.snake-table {
    border: 1px solid rgba(157,78,221,.2);
    box-shadow: 0 0 30px rgba(157,78,221,.08);
}
.snake-table td,
.snake-table th { vertical-align: middle !important; }
.snake-table th { font-family: 'Cinzel', Georgia, serif; }
@media (max-width: 520px) {
    .snake-mystic-wrap { padding: 18px 6px 24px; border-radius: 20px; }
    .snake-card { padding: 14px; border-radius: 18px; }
    .snake-title { font-size: 26px; }
    .snake-score { font-size: 22px; }
    .snake-topline { align-items: flex-start; }
}


.snake-game-over-screen {
    position: absolute;
    inset: 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border-radius: 16px;
    color: #fff7d6;
    text-align: center;
    background:
        radial-gradient(circle at 50% 42%, rgba(157, 78, 221, .36), transparent 42%),
        rgba(3, 4, 12, .78);
    border: 1px solid rgba(255, 214, 102, .28);
    box-shadow: inset 0 0 50px rgba(127, 255, 227, .08), 0 0 28px rgba(157, 78, 221, .35);
    opacity: 0;
    transform: scale(.96);
    pointer-events: none;
    z-index: 5;
    transition: opacity .7s ease, transform .7s ease;
    backdrop-filter: blur(5px);
}
.snake-game-over-screen.is-visible {
    opacity: 1;
    transform: scale(1);
    animation: snakeGameOverPulse 2.8s ease-in-out infinite alternate;
}
.snake-game-over-title {
    font-family: 'Cinzel', Georgia, serif;
    font-size: clamp(30px, 7vw, 54px);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.12;
    color: #fff7d6;
    text-shadow:
        0 0 10px rgba(255, 247, 214, .95),
        0 0 24px rgba(255, 214, 102, .85),
        0 0 42px rgba(157, 78, 221, .95);
}
.snake-game-over-sub {
    margin-top: 14px;
    font-size: clamp(14px, 3.2vw, 20px);
    color: rgba(231, 215, 255, .92);
    text-shadow: 0 0 14px rgba(127, 255, 227, .55);
}
@keyframes snakeGameOverPulse {
    from { box-shadow: inset 0 0 50px rgba(127, 255, 227, .08), 0 0 28px rgba(157, 78, 221, .35); }
    to { box-shadow: inset 0 0 70px rgba(255, 214, 102, .12), 0 0 46px rgba(127, 255, 227, .38); }
}


.snake-countdown-screen {
    position: absolute;
    inset: 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border-radius: 16px;
    color: #fff7d6;
    text-align: center;
    background:
        radial-gradient(circle at 50% 48%, rgba(127, 255, 227, .24), transparent 38%),
        radial-gradient(circle at 50% 50%, rgba(157, 78, 221, .34), transparent 54%),
        rgba(3, 4, 12, .68);
    border: 1px solid rgba(127, 255, 227, .28);
    box-shadow: inset 0 0 56px rgba(127, 255, 227, .10), 0 0 38px rgba(157, 78, 221, .32);
    opacity: 0;
    transform: scale(.96);
    pointer-events: none;
    z-index: 6;
    transition: opacity .32s ease, transform .32s ease;
    backdrop-filter: blur(4px);
}
.snake-countdown-screen.is-visible {
    opacity: 1;
    transform: scale(1);
}
.snake-countdown-number {
    font-family: 'Cinzel', Georgia, serif;
    font-size: clamp(54px, 15vw, 112px);
    font-weight: 700;
    line-height: 1;
    color: #fff7d6;
    text-shadow:
        0 0 12px rgba(255, 247, 214, .95),
        0 0 28px rgba(127, 255, 227, .86),
        0 0 58px rgba(157, 78, 221, .95);
}
.snake-countdown-text {
    margin-top: 12px;
    font-size: clamp(15px, 3.5vw, 22px);
    font-weight: 800;
    color: rgba(231, 215, 255, .96);
    letter-spacing: .04em;
    text-shadow: 0 0 14px rgba(127, 255, 227, .55);
}
.snake-countdown-pop {
    animation: snakeCountdownPop .75s ease both;
}
@keyframes snakeCountdownPop {
    0% { opacity: 0; transform: scale(.55) rotate(-4deg); filter: blur(8px); }
    45% { opacity: 1; transform: scale(1.14) rotate(2deg); filter: blur(0); }
    100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}


/* Top-10 Highscore Table */
.snake-highscore-panel {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 12% 10%, rgba(127, 255, 227, .14), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(157, 78, 221, .22), transparent 32%),
        linear-gradient(145deg, rgba(9, 10, 26, .94), rgba(22, 10, 42, .90));
    border: 1px solid rgba(127, 255, 227, .24);
    box-shadow: 0 0 34px rgba(157, 78, 221, .22), inset 0 0 40px rgba(127, 255, 227, .06);
}
.snake-highscore-panel:before {
    content: "ᚱ ᚢ ᚾ ᛖ ᛋ";
    position: absolute;
    right: 22px;
    top: 14px;
    opacity: .12;
    color: #fff7d6;
    font-size: 34px;
    letter-spacing: .35em;
    pointer-events: none;
}
.snake-highscore-head {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.snake-highscore-head h3 {
    margin: 4px 0 0;
    font-family: 'Cinzel', Georgia, serif;
    color: #fff7d6;
    text-shadow: 0 0 18px rgba(255, 214, 102, .5), 0 0 28px rgba(157, 78, 221, .45);
}
.snake-top10-badge {
    padding: 8px 12px;
    border-radius: 999px;
    color: #071018;
    background: linear-gradient(135deg, #fff7d6, #7fffe3);
    font-weight: 900;
    letter-spacing: .08em;
    box-shadow: 0 0 20px rgba(127, 255, 227, .35);
}
.snake-top10-table {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    color: rgba(231, 215, 255, .94);
    background: transparent;
}
.snake-top10-table thead th {
    border-bottom: 1px solid rgba(127, 255, 227, .28) !important;
    color: #7fffe3;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
}
.snake-top10-table tbody tr {
    background: rgba(255, 255, 255, .025);
    transition: background .2s ease, transform .2s ease;
}
.snake-top10-table tbody tr:hover {
    background: rgba(127, 255, 227, .08);
    transform: translateX(3px);
}
.snake-top10-table td,
.snake-top10-table th {
    border-top: 1px solid rgba(127, 255, 227, .10) !important;
    vertical-align: middle !important;
}
.snake-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #e7d7ff;
    background: rgba(127, 255, 227, .10);
    border: 1px solid rgba(127, 255, 227, .22);
    font-weight: 900;
}
.snake-rank-medal {
    color: #12081f;
    background: linear-gradient(135deg, #fff7d6, #ffd666, #7fffe3);
    box-shadow: 0 0 18px rgba(255, 214, 102, .35);
}
.snake-no-scores {
    position: relative;
    z-index: 1;
    margin: 0;
    color: rgba(231, 215, 255, .9);
}