/* ===================================
   Squirrel Attack! - WordPress Game Styles
   Mobile Responsive Optimized
   =================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');

/* Base Reset & Variables */
:root {
    --color-green-50: #f0fdf4;
    --color-green-200: #bbf7d0;
    --color-green-400: #4ade80;
    --color-green-500: #22c55e;
    --color-green-600: #16a34a;
    --color-green-700: #15803d;
    --color-stone-50: #fafaf9;
    --color-stone-100: #f5f5f4;
    --color-stone-200: #e7e5e4;
    --color-stone-300: #d6d3d1;
    --color-stone-400: #a8a29e;
    --color-stone-500: #78716c;
    --color-stone-600: #57534e;
    --color-stone-800: #292524;
    --color-stone-900: #1c1917;
    --color-red-400: #f87171;
    --color-red-500: #ef4444;
    --color-red-600: #dc2626;
    --color-red-700: #b91c1c;
    --color-blue-400: #60a5fa;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-yellow-100: #fef9c3;
    --color-yellow-300: #fde047;
    --color-yellow-400: #facc15;
    --color-yellow-600: #ca8a04;
    --color-yellow-800: #3d2e06;
    --color-yellow-900: #1a0d00;
    --color-orange-50: #fff7ed;
    --color-orange-200: #fed7aa;
    --color-orange-600: #ea580c;

    /* Responsive sizing */
    --hole-size: 3rem;
    --hole-gap: 0.35rem;
    --font-size-base: 1rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    font-family: 'Jua', sans-serif;
    user-select: none;
    background: var(--color-green-50);
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: manipulation;
    min-height: 100vh;
    min-height: 100dvh;
    /* Dynamic viewport height for mobile */
    -webkit-tap-highlight-color: transparent;
}

/* Hammer Cursor */
.cursor-hammer {
    cursor: url('https://cdn-icons-png.flaticon.com/32/1150/1150612.png') 16 16, auto;
}

/* Main Container */
.game-container {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* ===================================
   Start Screen
   =================================== */
.start-screen {
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    padding: 1.5rem;
    border-radius: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 3px solid var(--color-green-500);
    max-width: 95%;
    width: 100%;
    animation: fadeInZoom 0.5s ease-out;
}

.start-screen .mascot {
    width: 6rem;
    height: 6rem;
    animation: bounce 1s infinite;
    margin-bottom: 1rem;
}

.start-screen h1 {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--color-green-700);
    margin-bottom: 0.75rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.start-screen .description {
    font-size: 1rem;
    color: var(--color-stone-600);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.start-screen .highlight-orange {
    color: var(--color-orange-600);
    font-weight: 700;
}

.start-screen .highlight-red {
    color: var(--color-red-500);
    font-weight: 700;
}

.start-btn {
    width: 100%;
    padding: 0.875rem;
    background: var(--color-green-500);
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Jua', sans-serif;
    border: none;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s;
}

.start-btn:hover {
    background: var(--color-green-600);
}

.start-btn:active {
    transform: scale(0.95);
}

/* ===================================
   Stats Overlay (Top Bar)
   =================================== */
.stats-overlay {
    position: relative; /* fixed에서 relative로 변경: 공간을 차지하게 함 */
    width: 100%;
    max-width: 600px; /* PC에서도 너무 퍼지지 않게 제한 */
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
    margin-bottom: 15px; /* 보드판과의 확실한 간격 확보 */
}

.stats-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 0.75rem;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--color-green-200);
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-item.center {
    align-items: center;
}

.stat-item.right {
    text-align: right;
}

.stat-label {
    font-size: 0.625rem;
    color: var(--color-stone-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.stat-value.score {
    color: var(--color-green-600);
}

.stat-value.round {
    color: var(--color-blue-600);
}

.lives-container {
    display: flex;
    gap: 0.125rem;
}

.heart {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.heart.active {
    color: var(--color-red-500);
}

.heart.inactive {
    color: var(--color-stone-300);
}

/* Progress Bar */
.progress-bar {
    width: 100%;
    max-width: 100%;
    height: 0.5rem;
    background: var(--color-stone-200);
    border-radius: 9999px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(to right, var(--color-green-400), var(--color-green-600));
    transition: width 0.5s ease-out;
}

/* ===================================
   Game Board
   =================================== */
.game-board {
    display: grid;
    padding: 12px;
    background: rgba(120, 80, 40, 0.15);
    border-radius: 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 4px solid rgba(120, 80, 40, 0.3);
    
    /* 중앙 정렬 유지 */
    margin: 0 auto; 
    width: fit-content;
    height: auto;
    
    /* [중요] max-height를 설정하여 화면을 벗어나지 않게 함 */
    max-height: calc(100vh - 200px); 
    overflow: hidden; 

    box-sizing: border-box;
    touch-action: none;
}

.hole {
    position: relative;
    /* width/height는 JS inline style로 들어감 */
    background: #2a2a2a;
    border-radius: 50%;
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.hole-depth {
    position: absolute;
    inset: 0;
    border-top: 3px solid rgba(0, 0, 0, 0.4);
    border-radius: 50%;
}

.target {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease-out;
}

.target.mole-up {
    transform: translateY(0);
}

.target.mole-down {
    transform: translateY(100%);
}

.target img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Star Effect */
.star-effect {
    position: fixed;
    width: 2.5rem;
    height: 2.5rem;
    pointer-events: none;
    z-index: 50;
    animation: starFade 0.4s ease-out forwards;
}

@keyframes starFade {
    0% {
        transform: scale(0.5) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: scale(1.5) rotate(45deg);
        opacity: 0;
    }
}

/* ===================================
   Level Up Overlay
   =================================== */
.level-up-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: 1rem;
}

.level-up-card {
    background: var(--color-yellow-400);
    color: var(--color-yellow-900);
    padding: 1.5rem 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 6px solid var(--color-yellow-600);
    transform: scale(1.1);
    animation: bounce 1s infinite;
    text-align: center;
}

.level-up-card h2 {
    font-size: 2.5rem;
    font-weight: 900;
}

.level-up-card p {
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    margin-top: 0.5rem;
}

/* ===================================
   Game Over Screen
   =================================== */
.game-over-screen {
    background: rgba(255, 255, 255, 0.95);
    padding: 1.5rem;
    border-radius: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 3px solid var(--color-red-500);
    max-width: 95%;
    width: 100%;
    animation: slideInUp 0.5s ease-out;
}

.game-over-screen h2 {
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-red-600);
    text-align: center;
    margin-bottom: 1rem;
}

.final-score-box {
    background: #fef2f2;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

.final-score-label {
    color: var(--color-stone-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.final-score-value {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--color-stone-800);
    margin-bottom: 0.5rem;
}

.final-round {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-red-700);
}

/* Score Submission Form */
.score-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.score-form input {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 2px solid var(--color-stone-200);
    font-size: 1.125rem;
    text-align: center;
    font-family: 'Jua', sans-serif;
    outline: none;
}

.score-form input:focus {
    border-color: var(--color-red-400);
}

.save-btn {
    width: 100%;
    padding: 0.75rem;
    background: var(--color-red-500);
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'Jua', sans-serif;
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background 0.2s;
}

.save-btn:hover {
    background: var(--color-red-600);
}

.success-message {
    text-align: center;
    padding: 0.75rem;
    color: var(--color-green-600);
    font-weight: 700;
    font-size: 1.125rem;
}

/* Button Row */
.button-row {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.btn-retry,
.btn-rankings {
    flex: 1;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Jua', sans-serif;
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background 0.2s;
}

.btn-retry {
    background: var(--color-stone-800);
    color: white;
}

.btn-retry:hover {
    background: var(--color-stone-900);
}

.btn-rankings {
    background: var(--color-blue-500);
    color: white;
}

.btn-rankings:hover {
    background: var(--color-blue-600);
}

/* ===================================
   Leaderboard Screen
   =================================== */
.leaderboard-screen {
    background: white;
    padding: 1.25rem;
    border-radius: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 3px solid var(--color-blue-400);
    max-width: 95%;
    width: 100%;
    max-height: 85vh;
    max-height: 85dvh;
    display: flex;
    flex-direction: column;
}

.leaderboard-screen h2 {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-blue-600);
    text-align: center;
    margin-bottom: 1rem;
}

.leaderboard-list {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 1rem;
    padding-right: 0.25rem;
    -webkit-overflow-scrolling: touch;
}

.no-records {
    text-align: center;
    color: var(--color-stone-400);
    padding: 2rem 0;
}

.leaderboard-entries {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.leaderboard-entry {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 0.75rem;
}

.leaderboard-entry.rank-1 {
    background: var(--color-yellow-100);
    border: 2px solid var(--color-yellow-300);
}

.leaderboard-entry.rank-2 {
    background: var(--color-stone-100);
    border: 2px solid var(--color-stone-200);
}

.leaderboard-entry.rank-3 {
    background: var(--color-orange-50);
    border: 2px solid var(--color-orange-200);
}

.leaderboard-entry.default {
    background: var(--color-stone-50);
}

.entry-rank {
    width: 1.75rem;
    font-weight: 900;
    font-size: 1rem;
    color: var(--color-stone-400);
}

.entry-info {
    flex: 1;
    padding: 0 0.5rem;
    min-width: 0;
}

.entry-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-stone-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entry-round {
    font-size: 0.7rem;
    color: var(--color-stone-500);
}

.entry-score {
    font-weight: 900;
    font-size: 1rem;
    color: var(--color-blue-600);
    text-align: right;
    white-space: nowrap;
}

.btn-back {
    width: 100%;
    padding: 0.75rem;
    background: var(--color-stone-800);
    color: white;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Jua', sans-serif;
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background 0.2s;
}

.btn-back:hover {
    background: var(--color-stone-900);
}

/* ===================================
   Animations
   =================================== */
@keyframes fadeInZoom {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(2.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(-5%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

/* Loading/Error States */
.loading-text,
.error-text {
    text-align: center;
    padding: 1.5rem;
    font-size: 1rem;
}

.loading-text {
    color: var(--color-stone-500);
}

.error-text {
    color: var(--color-red-500);
}

/* ===================================
   Bomb Effect (Penalty Animal)
   =================================== */
.bomb-effect {
    position: fixed;
    pointer-events: none;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bombShake 0.6s ease-out forwards;
}

.bomb-explosion {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
            rgba(255, 200, 0, 1) 0%,
            rgba(255, 100, 0, 1) 30%,
            rgba(255, 50, 0, 0.8) 50%,
            rgba(200, 0, 0, 0.5) 70%,
            transparent 100%);
    border-radius: 50%;
    animation: bombExplode 0.6s ease-out forwards;
}

.bomb-text {
    position: relative;
    z-index: 10;
    font-size: 1.5rem;
    font-weight: 900;
    color: white;
    text-shadow:
        2px 2px 0 #ff0000,
        -2px -2px 0 #ff0000,
        2px -2px 0 #ff0000,
        -2px 2px 0 #ff0000,
        0 3px 10px rgba(0, 0, 0, 0.5);
    animation: bombTextPop 0.6s ease-out forwards;
}

@keyframes bombExplode {
    0% {
        transform: scale(0.3);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes bombTextPop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    20% {
        transform: scale(1.3);
        opacity: 1;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.2) translateY(-20px);
        opacity: 0;
    }
}

@keyframes bombShake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

/* ===================================
   RESPONSIVE BREAKPOINTS
   =================================== */

/* Extra Small Devices (phones, 320px - 374px) */
@media screen and (max-width: 374px) {
    :root {
        --hole-size: 2.25rem;
        --hole-gap: 0.25rem;
    }

    .start-screen {
        padding: 1rem;
        border-radius: 1.5rem;
    }

    .start-screen .mascot {
        width: 4.5rem;
        height: 4.5rem;
    }

    .start-screen h1 {
        font-size: 2rem;
    }

    .start-screen .description {
        font-size: 0.875rem;
    }

    .start-btn {
        font-size: 1.25rem;
        padding: 0.75rem;
    }

    .stats-bar {
        padding: 0.375rem 0.5rem;
    }

    .stat-value {
        font-size: 1rem;
    }

    .heart {
        width: 1rem;
        height: 1rem;
    }

    .game-board {
        padding: 0.375rem;
        margin-top: 5rem;
    }

    .game-over-screen h2 {
        font-size: 1.75rem;
    }

    .final-score-value {
        font-size: 2rem;
    }

    .level-up-card h2 {
        font-size: 2rem;
    }
}

/* Small Devices (larger phones, 375px - 424px) */
@media screen and (min-width: 375px) and (max-width: 424px) {
    :root {
        --hole-size: 2.5rem;
        --hole-gap: 0.3rem;
    }

    .start-screen .mascot {
        width: 5rem;
        height: 5rem;
    }

    .game-board {
        margin-top: 5.25rem;
    }
}

/* Medium Devices (larger phones, 425px - 767px) */
@media screen and (min-width: 425px) and (max-width: 767px) {
    :root {
        --hole-size: 2.75rem;
        --hole-gap: 0.35rem;
    }

    .start-screen {
        padding: 1.75rem;
        max-width: 400px;
    }

    .start-screen .mascot {
        width: 6rem;
        height: 6rem;
    }

    .start-screen h1 {
        font-size: 2.75rem;
    }

    .game-over-screen,
    .leaderboard-screen {
        max-width: 400px;
    }
}

/* Tablets (768px - 1023px) */
@media screen and (min-width: 768px) {
    :root {
        --hole-size: 4rem;
        --hole-gap: 0.5rem;
    }

   /* 컨테이너 정렬 */
.game-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column; /* 세로로 순서대로 배치 */
    align-items: center;
    justify-content: flex-start; /* 위에서부터 차례대로 */
    padding-top: 20px;
}

    .start-screen {
        padding: 2.5rem;
        max-width: 450px;
        border-radius: 2.5rem;
        border-width: 4px;
    }

    .start-screen .mascot {
        width: 8rem;
        height: 8rem;
        margin-bottom: 1.5rem;
    }

    .start-screen h1 {
        font-size: 3.5rem;
        margin-bottom: 1rem;
    }

    .start-screen .description {
        font-size: 1.125rem;
        margin-bottom: 2rem;
    }

    .start-btn {
        font-size: 1.75rem;
        padding: 1rem;
    }

    .stats-overlay {
    width: 100%;
    padding: 10px 15px;
    box-sizing: border-box;
}

   .stats-bar {
    max-width: 100%; /* 부모 너비를 넘지 않게 */
}

    .stat-label {
        font-size: 0.75rem;
    }

    .stat-value {
        font-size: 1.75rem;
    }

    .heart {
        width: 1.75rem;
        height: 1.75rem;
    }

    .progress-bar {
        max-width: 600px;
        height: 0.625rem;
    }

    .game-board {
        padding: 0.75rem;
        margin-top: 6rem;
        border-radius: 1.25rem;
        border-width: 6px;
    }

    .hole-depth {
        border-top-width: 4px;
    }

    .game-over-screen,
    .leaderboard-screen {
        max-width: 450px;
        padding: 2rem;
        border-radius: 2.5rem;
        border-width: 4px;
    }

    .game-over-screen h2 {
        font-size: 2.5rem;
    }

    .final-score-box {
        padding: 1.5rem;
    }

    .final-score-value {
        font-size: 3rem;
    }

    .final-round {
        font-size: 1.125rem;
    }

    .score-form input {
        padding: 1rem;
        font-size: 1.25rem;
    }

    .save-btn,
    .btn-retry,
    .btn-rankings,
    .btn-back {
        padding: 1rem;
        font-size: 1.25rem;
    }

    .leaderboard-screen h2 {
        font-size: 2rem;
    }

    .leaderboard-entry {
        padding: 1rem;
    }

    .entry-rank {
        font-size: 1.125rem;
    }

    .entry-name {
        font-size: 1.125rem;
    }

    .entry-score {
        font-size: 1.125rem;
    }

    .level-up-card {
        padding: 2rem 3rem;
    }

    .level-up-card h2 {
        font-size: 3.5rem;
    }

    .level-up-card p {
        font-size: 1.25rem;
    }

    .star-effect {
        width: 3rem;
        height: 3rem;
    }
}

/* Large Tablets & Desktops (1024px+) */
@media screen and (min-width: 1024px) {
    :root {
        --hole-size: 5rem;
        --hole-gap: 0.75rem;
    }

    .start-screen {
        padding: 3rem;
        max-width: 500px;
        border-radius: 3rem;
    }

    .start-screen .mascot {
        width: 10rem;
        height: 10rem;
    }

    .start-screen h1 {
        font-size: 4rem;
    }

    .start-screen .description {
        font-size: 1.25rem;
    }

    .start-btn {
        font-size: 2rem;
        padding: 1.125rem;
    }

    .stats-bar {
        max-width: 700px;
        padding: 1rem 1.5rem;
    }

    .stat-value {
        font-size: 2rem;
    }

    .heart {
        width: 2rem;
        height: 2rem;
    }

    .progress-bar {
        max-width: 700px;
        height: 0.75rem;
    }

    .game-board {
        padding: 1rem;
        margin-top: 7rem;
        border-radius: 1.5rem;
        border-width: 8px;
    }

    .game-over-screen,
    .leaderboard-screen {
        max-width: 500px;
        padding: 2.5rem;
    }

    .game-over-screen h2 {
        font-size: 3rem;
    }

    .final-score-value {
        font-size: 3.75rem;
    }

    .level-up-card h2 {
        font-size: 4rem;
    }
}

/* Landscape Mode on Mobile */
@media screen and (max-height: 500px) and (orientation: landscape) {
    :root {
        --hole-size: 2.5rem;
        --hole-gap: 0.25rem;
    }

    .game-container {
        padding: 0.25rem;
        justify-content: flex-start;
    }

    .stats-overlay {
        padding: 0.25rem;
        gap: 0.25rem;
    }

    .stats-bar {
        padding: 0.25rem 0.5rem;
    }

    .stat-value {
        font-size: 1rem;
    }

    .heart {
        width: 1rem;
        height: 1rem;
    }

    .progress-bar {
        height: 0.375rem;
    }

    .game-board {
        margin-top: 3.5rem;
        padding: 0.375rem;
        border-width: 3px;
    }

    .start-screen {
        padding: 1rem;
        max-width: 350px;
    }

    .start-screen .mascot {
        width: 3.5rem;
        height: 3.5rem;
    }

    .start-screen h1 {
        font-size: 1.75rem;
    }

    .start-screen .description {
        font-size: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .start-btn {
        font-size: 1rem;
        padding: 0.5rem;
    }

    .game-over-screen,
    .leaderboard-screen {
        padding: 1rem;
        max-width: 90%;
        max-height: 95vh;
    }

    .game-over-screen h2 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .final-score-box {
        padding: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .final-score-value {
        font-size: 1.75rem;
    }

    .leaderboard-screen h2 {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }

    .level-up-card {
        padding: 1rem 1.5rem;
    }

    .level-up-card h2 {
        font-size: 1.75rem;
    }

    .level-up-card p {
        font-size: 0.875rem;
    }
}

/* 공유하기 버튼 스타일 */
.btn-share {
    width: 100%;
    margin-top: 1rem;
    padding: 0.75rem;
    background: white;
    color: var(--color-orange-600);
    border: 2px solid var(--color-orange-600);
    border-radius: 0.75rem;
    font-family: 'Jua', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-share:hover {
    background: var(--color-orange-50);
}

.btn-share:active {
    transform: scale(0.98);
}

/* High DPI / Retina Displays */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .hole {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
    }
}

/* Hover effects only on devices that support hover */
@media (hover: hover) and (pointer: fine) {
    .hole:hover {
        background: var(--color-stone-700);
    }

    .start-btn:hover,
    .save-btn:hover,
    .btn-retry:hover,
    .btn-rankings:hover,
    .btn-back:hover {
        transform: translateY(-2px);
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .start-screen .mascot {
        animation: none;
    }

    .level-up-card {
        animation: none;
        transform: none;
    }
}

/* 모바일 가로 모드 시 최적화 */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .game-board {
        margin-top: 65px !important;
        padding: 5px;
    }
    .stats-bar {
        padding: 4px 10px;
    }
}