:root {
    --bg-gradient: linear-gradient(135deg, #FBF6ED 0%, #F3EADA 100%);
    /* Soft Cream */
    --card-bg: rgba(255, 255, 255, 0.6);
    --card-border: rgba(139, 94, 60, 0.1);
    --text-color: #23211B;
    /* Earthy Brown */

    /* Buttons */
    --primary-btn: #E85D3D;
    /* Terracotta/Peach */
    --primary-btn-hover: #C9431F;
    --secondary-btn: #CDE7DE;
    /* Sage Greenish */

    --accent-color: #1F8A70;
    /* Sage Green */

    --danger-color: #C9431F;
    /* Soft Red */
    --success-color: #1F8A70;
    /* Soft Green */

    --font-main: 'Schibsted Grotesk', sans-serif;
}

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

body {
    font-family: var(--font-main);
    background: var(--bg-gradient);
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-color);
}

#app {
    width: 100%;
    max-width: 600px;
    padding: 1.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Card Styling */
.glass-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 1.5rem;
    border: 2px solid #23211B;
    box-shadow: 8px 8px 0 #23211B;
    width: 100%;
    max-width: 480px;
    /* Reduced max-width from 600px */
    position: relative;
    margin: auto;
    /* Center in app */
}

h1,
h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    letter-spacing: -0.02em;
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 800;
    color: var(--text-color);
    font-size: 1.8rem;
    /* Reduced font size */
}

/* ... Buttons ... */
.btn-primary {
    background: var(--primary-btn);
    color: #fff;
    padding: 0.8rem 1.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 50px;
    width: 100%;
    margin-bottom: 0.8rem;
    box-shadow: 0 4px 12px rgba(230, 184, 156, 0.4);
}

.level-btn {
    background: #FFF;
    color: var(--text-color);
    padding: 0.9rem;
    font-size: 1.1rem;
    border-radius: 12px;
    width: 100%;
    margin-bottom: 0.8rem;
    border: 2px solid transparent;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Header & Nav */
.game-header {
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Number Bonds Visual - Strict Alignment - Scaled Down */
.bond-container {
    width: 260px;
    /* Reduced width */
    height: 180px;
    /* Reduced height */
    margin: 0 auto 1.5rem auto;
    position: relative;
}

/* Helper to center content */
.circle {
    width: 70px;
    /* Reduced from 90 */
    height: 70px;
    /* Reduced from 90 */
    border-radius: 50%;
    background: #fff;
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    /* Reduced font */
    font-weight: 800;
    position: absolute;
    box-shadow: 0 4px 12px rgba(139, 94, 60, 0.15);
    border: 3px solid var(--primary-btn);
    z-index: 2;
}

.bond-whole {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-color: var(--accent-color);
}

.bond-part-1 {
    bottom: 0;
    left: 10px;
    /* Adjusted for smaller container */
}

.bond-part-2 {
    bottom: 0;
    right: 10px;
    /* Adjusted for smaller container */
}

.bond-lines-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Update SVG coords in JS or CSS? SVG is fixed logic in screens.js, but viewBox aligns.
   Here we just scale the container, viewBox in screens.js might need slight tweak or just rely on relative positioning which works if lines match.
   Actually, the line coordinates in screens.js were hardcoded for 300x220. If I shrink container, I should update SVG viewBox or coordinates there too. 
   I will handle SVG update in screens.js replace. */

/* Input */
.bond-input {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: none;
    background: #FFEDC2;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-color);
    outline: none;
}

/* Numpad */
.numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    /* Reduced gap */
    margin-top: 0.5rem;
    width: 100%;
    max-width: 280px;
    /* Reduced max-width */
    margin-inline: auto;
}

.num-btn {
    background: #FFF;
    border: 1px solid #E0E0E0;
    color: var(--text-color);
    padding: 12px;
    /* Reduced padding */
    font-size: 1.3rem;
    border-radius: 12px;
    font-weight: 700;
    box-shadow: 0 3px 0 #E0E0E0;
    transition: transform 0.1s;
}

/* Feedback */
.feedback-msg {
    min-height: 1.5rem;
    margin: 0.5rem 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
}

/* Progress */
.progress-container {
    width: 100%;
    background: #E0E0E0;
    border-radius: 8px;
    height: 8px;
    /* Thinner */
    overflow: hidden;
}

/* Utilities */
.hidden {
    display: none !important;
}

.fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.dial-bar{position:sticky;top:0;z-index:500;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;padding:10px 20px;background:#FBF6ED;border-bottom:2px solid #23211B;flex-shrink:0}
.dial-bar .dlg{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:#23211B}
.dial-bar .dlg b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.35rem;letter-spacing:-.04em;line-height:1}
.dial-bar .dlg b::after{content:"";display:inline-block;width:.4em;height:.4em;border-radius:50%;background:#E85D3D;margin-left:.12em}
.dial-bar .dlg span{font-size:.68rem;color:#5A554A;font-family:'Schibsted Grotesk',sans-serif}
.dial-bar .dbk{text-decoration:none;color:#23211B;font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:.85rem;border:2px solid #23211B;border-radius:999px;padding:6px 14px;white-space:nowrap;transition:background .2s,color .2s}
.dial-bar .dbk:hover{background:#23211B;color:#FBF6ED}
@media(max-width:480px){.dial-bar .dlg span{display:none}}