/* =========================================
   RPG Theme V3 (Major Japanese Game Studio Style)
   ========================================= */

:root {
    --game-bg: #f8f9fa;
    /* Clean White-Grey */
    --game-text-main: #2d3436;
    --game-text-sub: #636e72;

    /* Pop Colors (Nintendo/Pokemon Style) */
    --game-red: #ff4757;
    --game-red-shadow: #c0392b;
    --game-blue: #3742fa;
    --game-blue-shadow: #2830bc;
    --game-green: #2ed573;
    --game-green-shadow: #218c74;
    --game-yellow: #ffa502;
    --game-yellow-shadow: #e17055;

    --game-card-bg: #ffffff;
    --game-border-color: #dfe4ea;

    /* Fonts */
    --font-flavor: 'Noto Sans JP', sans-serif;
    /* Reverted from DotGothic16 */
    --font-body: 'Noto Sans JP', sans-serif;

    --game-radius: 16px;
    --game-shadow: 0 6px 0 rgba(0, 0, 0, 0.1);
}

body {
    background-color: var(--game-bg);
    color: var(--game-text-main);
    font-family: var(--font-body);
    /* Subtle dot pattern background */
    background-image: radial-gradient(#ced6e0 15%, transparent 16%), radial-gradient(#ced6e0 15%, transparent 16%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

/* --- Typography Strategy --- */
/* Headlines & Flavor Text -> Pixel Font */
h1,
h2,
h3,
.view-title,
.splash-title,
.modal-bird-name,
.widget-name,
.nav-icon,
.stat-num,
.bird-number,
.top5-badge,
.top5-rank {
    font-family: var(--font-flavor) !important;
    letter-spacing: 0.05em;
}

/* Body Text -> Readable Sans Serif */
p,
.bird-name,
.nav-tab,
input,
select,
textarea,
.stat-label,
.stat-unit {
    font-family: var(--font-body) !important;
    font-weight: 700;
    /* Bold for game feel */
}

/* --- Navigation (Mechanical Keycap Style) --- */
.scroll-nav {
    background: transparent;
    /* Container is transparent */
    backdrop-filter: none;
    border-top: none;
    box-shadow: none;
    margin: 0;
    width: 100%;
    bottom: 0px;
    padding: 10px;
    display: flex;
    justify-content: center;
    pointer-events: none;
    /* Let clicks pass through gaps */
}

.scroll-container {
    pointer-events: auto;
    background: #e0e0e0;
    /* Base plate color */
    padding: 5px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 4px;
}

.nav-tab {
    position: relative;
    width: 50px;
    height: 50px;
    background: #f1f2f6;
    /* Keycap Top */
    border-radius: 8px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Keycap 3D Effect */
    box-shadow:
        0 4px 0 #b2bec3,
        /* Side/Depth */
        0 6px 4px rgba(0, 0, 0, 0.1);
    /* Drop Shadow */

    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    color: #636e72;
    border: 1px solid rgba(255, 255, 255, 0.8);
    /* Highlight top edge */
}

.nav-tab:active,
.nav-tab.active {
    transform: translateY(4px);
    box-shadow:
        0 0 0 #b2bec3,
        0 0 0 rgba(0, 0, 0, 0);
    /* Flatten */
    background: #dfe4ea;
    border-color: transparent;
}

/* Mechanical Keycap Active Coloring */
.nav-tab.active {
    background: #fff;
    /* Active key lights up white */
}

/* Icon Silhouette Effect */
.nav-icon {
    font-size: 24px;
    /* Make emoji transparent and use text-shadow to create silhouette */
    color: transparent;
    text-shadow: 0 0 0 #b2bec3;
    /* Default inactive silhouette color (grey) */
    filter: none;
    /* Remove previous drop-shadows */
    transition: text-shadow 0.1s;
}

.nav-tab.active .nav-icon {
    /* Active color silhouette */
    text-shadow: 0 0 0 var(--game-red);
}

.nav-tab:hover .nav-icon {
    text-shadow: 0 0 0 #636e72;
    /* Darker grey on hover */
}

/* --- Header / Title --- */
.view-title {
    background: #fff;
    border: 4px solid var(--game-text-main);
    border-radius: 50px;
    display: inline-block;
    padding: 8px 32px;
    margin: 20px auto 30px;
    color: var(--game-text-main);
    box-shadow: 4px 4px 0 var(--game-text-main);
    /* Pop Shadow */
    text-align: center;
    width: auto;
    min-width: 200px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* --- Cards (Chunky & Touchable) --- */
.bird-card,
.widget-card,
.top5-card,
.bird-select-card {
    background: var(--game-card-bg);
    border: none;
    border-radius: var(--game-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.bird-card:hover,
.widget-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.bird-thumbnail,
.top5-image {
    border-radius: 12px;
    border: 2px solid #f1f2f6;
}

/* --- Buttons (Juicy Push Buttons) --- */
.action-button,
.login-button,
.save-button,
.modal-nav,
#modal-close,
.order-filter-btn {
    font-family: var(--font-body);
    /* Readable button text */
    font-weight: 800;
    background: var(--game-red);
    color: white;
    border: none;
    border-radius: 50px;
    /* Pill shape */
    padding: 12px 24px;
    box-shadow: 0 6px 0 var(--game-red-shadow), 0 12px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.1s;
    text-transform: none;
}

.action-button:active,
.save-button:active {
    transform: translateY(6px);
    /* Push down effect */
    box-shadow: 0 0 0 var(--game-red-shadow), 0 0 0 rgba(0, 0, 0, 0);
}

/* Secondary Buttons */
.modal-nav {
    border-radius: 50%;
    width: 44px;
    height: 44px;
    padding: 0;
    background: #fff;
    color: var(--game-text-main);
    box-shadow: 0 4px 0 #dfe4ea, 0 8px 10px rgba(0, 0, 0, 0.1);
}

.modal-nav:active {
    box-shadow: 0 0 0 #dfe4ea;
}

/* Order Filter Specifics */
.order-filter-btn {
    background: #fff;
    color: var(--game-text-main);
    border-radius: 16px;
    box-shadow: 0 4px 0 #dfe4ea;
    padding: 8px 12px;
}

.order-filter-btn.active {
    background: var(--game-green);
    color: white;
    box-shadow: 0 4px 0 var(--game-green-shadow);
}

.order-filter-btn:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* FAB */
.fab-button {
    background: var(--game-green);
    box-shadow: 0 6px 0 var(--game-green-shadow), 0 12px 20px rgba(46, 213, 115, 0.4);
    width: 72px;
    /* Bigger target */
    height: 72px;
}

.fab-button:hover {
    transform: scale(1.05) translateY(-2px);
}

.fab-button:active {
    transform: scale(0.95) translateY(6px);
    box-shadow: 0 0 0 var(--game-green-shadow);
}

/* --- Modal (Modern Pop-up) --- */
.modal-content,
.observation-modal-content {
    background: #fff;
    border-radius: 24px;
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

/* Inputs */
input,
select,
textarea,
.form-input {
    background: #f1f2f6;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 12px;
    color: var(--game-text-main);
    font-weight: 700;
    transition: all 0.2s;
}

input:focus,
select:focus,
textarea:focus {
    background: #fff;
    border-color: var(--game-blue);
    box-shadow: 0 0 0 4px rgba(55, 66, 250, 0.1);
    outline: none;
}

/* Stat Boxes */
.stat-box {
    border-radius: 20px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.stat-box.score-box {
    background: linear-gradient(135deg, #ff6b6b, #ee5253);
    color: white;
}

.stat-box.count-box {
    background: linear-gradient(135deg, #1dd1a1, #10ac84);
    color: white;
}

/* Override text colors for colored boxes */
.stat-box.score-box .stat-label,
.stat-box.score-box .stat-unit,
.stat-box.count-box .stat-label,
.stat-box.count-box .stat-unit {
    color: rgba(255, 255, 255, 0.9);
}

.stat-box.score-box .stat-num,
.stat-box.count-box .stat-num {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Widget Text */
.widget-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    border-radius: 0 0 var(--game-radius) var(--game-radius);
}

.widget-name {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Placeholder */
.placeholder-view {
    background: #fff;
    border: 4px dashed #dfe4ea;
    border-radius: 24px;
}