/* 
    =================================
    Yuni's Cozy Campsite - Stylesheet
    =================================
*/

/* ----- CURSOR & PARTICLE STYLES ----- */
html { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23f0d68c' stroke='%23414141' stroke-width='1.5' stroke-linejoin='round' d='M16 2.5 L20.5 11.5 L30 12.5 L22.5 19.5 L24.5 29.5 L16 24.5 L7.5 29.5 L9.5 19.5 L2 12.5 L11.5 11.5 Z'/%3E%3C/svg%3E") 16 16, auto; }
a, button { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='white' stroke='%23f0d68c' stroke-width='2.5' stroke-linejoin='round' d='M16 2.5 L20.5 11.5 L30 12.5 L22.5 19.5 L24.5 29.5 L16 24.5 L7.5 29.5 L9.5 19.5 L2 12.5 L11.5 11.5 Z'/%3E%3C/svg%3E") 16 16, pointer; }
.particle { position: fixed; top: 0; left: 0; height: 10px; width: 10px; pointer-events: none; z-index: 9999; animation: particle-trail 0.7s ease-out forwards; transform: rotate(-45deg); }
.particle::before, .particle::after { content: ''; position: absolute; width: 10px; height: 10px; background: var(--dark-charcoal); opacity: 0.5; border-radius: 50%; }
.particle::before { top: -5px; left: 0; }
.particle::after { top: 0; left: 5px; }
@keyframes particle-trail { 0% { transform: scale(1) rotate(-45deg); opacity: 1; } 100% { transform: scale(0) rotate(-45deg) translateY(-20px); opacity: 0; } }

/* ----- COLOR PALETTE & FONTS ----- */
:root { --bg-color: #fdfaeb; --card-bg: #ffffff; --grid-color: #eaddc0; --primary-green: #5a7251; --accent-green: #b4c164; --dark-charcoal: #414141; --heart-pink: #ff8fab; --accent-yellow: #f0d68c; --border-radius: 15px; --font-family: 'M PLUS Rounded 1c', sans-serif; }

/* ----- GENERAL STYLES ----- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--bg-color); font-family: var(--font-family); color: var(--dark-charcoal); line-height: 1.6; }
.container { max-width: 1100px; margin: 2rem auto; padding: 1rem; }

/* ----- HEADER & PROFILE PIC ----- */
header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem; 
    flex-wrap: wrap; 
    margin-bottom: 2rem;
}
.profile-pic {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 5px solid var(--primary-green);
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin: 0;
}
h1 { font-size: 2.5rem; font-weight: 700; color: var(--dark-charcoal); }
.oshi-mark { font-size: 1.5rem; margin-top: -5px; }

/* ----- FIX: NEW BUBBLY/WOBBLY HEADER STYLE ----- */
.wordart-header {
    font-size: 4.5rem;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    margin: 0;
    color: var(--primary-green);
    /* Soft shadow for a bubbly effect */
    text-shadow: 2px 3px 4px rgba(90, 114, 81, 0.4); 
}

/* Individual wobbling letters will be wrapped in this class by JavaScript */
.wobble-char {
    display: inline-block; /* Required for transform to work */
    animation: wobble 3.5s ease-in-out infinite alternate;
}

@keyframes wobble {
    0% { transform: rotate(-1.5deg) translateY(0px); }
    50% { transform: rotate(1.5deg) translateY(-3px); }
    100% { transform: rotate(-1.5deg) translateY(0px); }
}

/* ----- NAVIGATION LINKS ----- */
.links { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2rem; }
.links a, .links button {
    background-color: var(--accent-green);
    color: var(--card-bg);
    padding: 10px 20px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 50px;
    border: 2px solid var(--primary-green);
    transition: all 0.2s ease-in-out;
    font-family: var(--font-family); /* Ensure button uses the same font */
    font-size: 1em; /* Ensure button text is the same size */
}
.links a:hover, .links button:hover {
    background-color: var(--primary-green);
    transform: translateY(-2px);
}
.links .active-link {
    background-color: var(--primary-green);
    color: var(--bg-color);
    transform: translateY(-2px);
    pointer-events: none;
}

/* (The rest of your CSS remains the same... just paste this over it) */
.main-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: start; }
.card { background-color: var(--card-bg); border: 3px solid var(--dark-charcoal); border-radius: var(--border-radius); padding: 1.5rem 2rem; margin-bottom: 2rem; background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(to right, var(--grid-color) 1px, var(--card-bg) 1px); background-size: 25px 25px; box-shadow: 8px 8px 0px var(--primary-green); }
h2 { font-size: 1.8rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--grid-color); }
h2::before { content: '🍀'; margin-right: 10px; }
ul { list-style-type: none; padding-left: 0; }
ul li { padding-left: 2em; position: relative; margin-bottom: 0.5rem; }
ul li::before { content: '›'; position: absolute; left: 0; top: 0; color: var(--accent-green); font-weight: 700; font-size: 1.5em; line-height: 1; }
.credits-list li { padding-left: 0; }
.credits-list li::before { content: ''; }
.card a { color: var(--primary-green); font-weight: 700; text-decoration: none; background-image: linear-gradient(var(--accent-green), var(--accent-green)); background-repeat: no-repeat; background-size: 100% 30%; background-position: 0 90%; transition: background-size 0.2s; }
.card a:hover { background-size: 100% 100%; color: var(--card-bg); }
.calendar-table { width: 100%; border-collapse: collapse; text-align: center; }
.calendar-table thead { font-weight: 700; }
.calendar-table th, .calendar-table td { padding: 0.3em; }
.calendar-table thead tr:first-child th { font-size: 1.1em; color: var(--primary-green); }
.calendar-table thead tr:nth-child(2) { font-size: 0.8em; color: var(--dark-charcoal); }
.calendar-table .today { background-color: var(--accent-green); color: var(--card-bg); font-weight: 700; border-radius: 50%; }
.clock-entry { display: flex; justify-content: space-between; align-items: baseline; padding: 0.4rem 0; border-bottom: 1px solid var(--grid-color); }
.clock-entry:last-child { border-bottom: none; }
.clock-label { font-size: 1em; }
.clock-time { font-size: 1.1em; font-weight: 700; color: var(--primary-green); }
.color-palette { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
.color-item { display: flex; align-items: center; gap: 10px; }
.color-swatch { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--dark-charcoal); }
.ref-image-container { position: relative; cursor: none; }
#ref-image { display: block; max-width: 100%; }
#magnifying-loupe { position: absolute; display: none; border: 5px solid var(--primary-green); border-radius: 50%; width: 200px; height: 200px; background-repeat: no-repeat; box-shadow: 5px 5px 0px var(--dark-charcoal); pointer-events: none; }
.game-container { max-width: 320px; margin: 0 auto; }
#game-board { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(6, 1fr); gap: 0.25rem; padding: 1rem 0; }
.tile { width: 100%; height: 0; padding-bottom: 100%; position: relative; border: 2px solid var(--grid-color); border-radius: 5px; font-size: 1.8rem; font-weight: bold; text-transform: uppercase; color: var(--dark-charcoal); transition: transform 250ms linear; }
.tile > * { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tile.flip { transform: rotateX(90deg); }
.tile[data-state="active"] { border-color: var(--primary-green); animation: pop-in 0.1s ease-out; }
.tile[data-state="correct"] { background-color: var(--primary-green); border-color: var(--primary-green); color: var(--card-bg); }
.tile[data-state="present"] { background-color: var(--accent-green); border-color: var(--accent-green); color: var(--card-bg); }
.tile[data-state="absent"] { background-color: #d1d1d1; border-color: #d1d1d1; color: var(--card-bg); }
#keyboard { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 1rem; }
.key-row { display: flex; justify-content: center; gap: 0.25rem; }
.key { font-family: inherit; font-weight: bold; font-size: 0.9rem; padding: 0.7rem 0.4rem; border: none; background-color: var(--grid-color); color: var(--dark-charcoal); border-radius: 5px; flex-grow: 1; text-transform: uppercase; transition: background-color 0.2s, color 0.2s; min-width: 20px; }
.key:hover { background-color: var(--accent-green); color: white; }
.key.large { flex-grow: 1.5; padding: 0.7rem; }
.key.correct { background-color: var(--primary-green); color: white; }
.key.present { background-color: var(--accent-green); color: white; }
.key.absent { background-color: #888; color: white; }
#toast-container { position: fixed; top: 5vh; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.toast { background-color: var(--dark-charcoal); color: var(--card-bg); padding: 0.75rem 1.5rem; border-radius: 50px; font-weight: bold; box-shadow: 0 4px 10px rgba(0,0,0,0.2); opacity: 1; transition: opacity 500ms ease-in-out; }
.toast.hide { opacity: 0; }
.settings-area { display: flex; flex-direction: column; gap: 0.75rem; }
.settings-area input { font-family: inherit; font-size: 1rem; padding: 0.5rem; border-radius: 5px; border: 2px solid var(--grid-color); }
.settings-buttons { display: flex; gap: 1rem; }
.settings-buttons button { background-color: var(--primary-green); color: white; border: none; padding: 0.5rem 1rem; border-radius: 5px; font-weight: bold; flex-grow: 1; }
.settings-buttons button:hover { background-color: var(--accent-green); }
@keyframes pop-in { from { transform: scale(0.8); } to { transform: scale(1); } }
.tile.shake { animation: shake 250ms ease-in-out; }
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
.tile.dance { animation: dance 500ms ease-in-out; }
@keyframes dance { 20% { transform: translateY(-10px); } 40% { transform: translateY(5px); } 60% { transform: translateY(-5px); } 80% { translateY(2px); } 100% { transform: translateY(0); } }
.game-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
#high-score-display { font-weight: bold; color: var(--accent-green); }
#roasting-area { position: relative; height: 250px; margin-top: 1rem; overflow: hidden; border-radius: 10px; background: #fdf1d1; }
#campfire { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100px; }
#campfire .flame-group { transition: transform 0.3s ease-out; }
#campfire .flame { animation: flicker 1.5s ease-in-out infinite alternate; }
@keyframes flicker { 0% { transform: scaleY(1) skewX(0); opacity: 1; } 50% { transform: scaleY(0.9) skewX(5deg); opacity: 0.8; } 100% { transform: scaleY(1.1) skewX(-5deg); opacity: 1; } }
#marshmallow-stick { position: absolute; top: 20px; left: 20px; width: 200px; height: 40px; cursor: grab; transform-origin: left center; transform: rotate(30deg); }
#marshmallow-stick.grabbing { cursor: grabbing; }
#marshmallow-body { transition: fill 0.5s ease-in-out; }
#marshmallow-body.toasted-light { fill: #f0e0c8; }
#marshmallow-body.toasted-medium { fill: #d4a778; }
#marshmallow-body.toasted-dark { fill: #8b5a2b; }
#marshmallow-body.burnt { fill: #333333; }
#game-controls, #results-area { text-align: center; margin-top: 1rem; }
#roasting-instructions { font-weight: bold; color: var(--primary-green); min-height: 1.6em; }
#timer-display { font-size: 1.2em; font-weight: 700; color: var(--primary-green); margin-top: 0.5rem; }
#done-roasting-btn, #play-again-btn { font-family: inherit; font-size: 1rem; font-weight: bold; background-color: var(--primary-green); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 50px; margin-top: 0.5rem; transition: background-color 0.2s; }
#done-roasting-btn:hover, #play-again-btn:hover { background-color: var(--accent-green); }
#results-area h3 { font-size: 1.5rem; color: var(--primary-green); }
#results-area p { font-size: 1.2rem; margin: 0.5rem 0; }
#results-area p span { font-weight: 700; }
.sparkle-effect::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffd700' fill-opacity='0.7'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); animation: sparkle 2s linear infinite; }
@keyframes sparkle { from { opacity: 0; } 50% { opacity: 1; } to { opacity: 0; } }

/* ----- YULU CAMP GAME STYLES ----- */
#game-container { display: flex; flex-direction: column; }
#campsite-visuals { position: relative; height: 250px; border-radius: 10px; overflow: hidden; margin-bottom: 1.5rem; }
#sky, #ground { position: absolute; width: 100%; left: 0; transition: background-color 1s ease; }
#sky { top: 0; height: 60%; }
#ground { bottom: 0; height: 40%; }
#campsite-visuals.morning #sky { background: linear-gradient(to bottom, #a7d8de, #d2f8de); }
#campsite-visuals.morning #ground { background-color: var(--primary-green); }
#campsite-visuals.afternoon #sky { background: linear-gradient(to bottom, #f0c394, #f5e4b1); }
#campsite-visuals.afternoon #ground { background-color: #516949; }
#campsite-visuals.night #sky { background: linear-gradient(to bottom, #2c3e50, #465a75); }
#campsite-visuals.night #ground { background-color: #3b4f35; }
#ground.snow-ground { background-color: #f5fafd !important; }
.game-asset, .campsite-item { position: absolute; z-index: 2; }
.spawned-chinchilla, .party-chinchilla, .attack-chinchilla { cursor: pointer; }
#tent-art { width: 120px; left: 25%; bottom: 20%; transform: translateX(-50%); }
#campfire-art { width: 80px; left: 70%; bottom: 10%; transform: translateX(-50%); }
.game-asset img { display: block; width: 100%; height: auto; }
.spawned-chinchilla, .party-chinchilla, .attack-chinchilla { width: 40px; height: auto; z-index: 2; }
.boombox-art { z-index: 1; bottom: 5%; left: 50%; transform: translateX(-50%); width: 50px; }
#campfire-art .flame { animation: flicker 1.5s ease-in-out infinite alternate; }
#campfire-art.glow { filter: drop-shadow(0 0 15px #f0d68c); }
#firefly-cursor { position: fixed; pointer-events: none; z-index: 9998; width: 32px; height: 32px; transform: translate(-50%, -50%); animation: firefly-float 2s ease-in-out infinite; }
#firefly-cursor img { filter: drop-shadow(0 0 8px #f0d68c); }
@keyframes firefly-float { 0% { transform: translate(-50%, -50%) translateY(0px); } 50% { transform: translate(-50%, -50%) translateY(-10px); } 100% { transform: translate(-50%, -50%) translateY(0px); } }
#weather-vfx-container, #cloud-container { position: absolute; top:0; left:0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 3; }
.cloud { position: absolute; width: 100px; height: 30px; background: #fff; border-radius: 20px; opacity: 0.8; animation: drift linear infinite; transition: background-color 0.5s ease; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; transition: background-color 0.5s ease; }
.cloud::before { width: 40px; height: 40px; top: -20px; left: 15px; }
.cloud::after { width: 60px; height: 60px; top: -30px; left: 35px; }
@keyframes drift { from { transform: translateX(-150px); } to { transform: translateX(100vw); } }
.rain-drop { position: absolute; bottom: 100%; width: 2px; height: 10px; background: #a7d8de; animation: fall linear infinite; }
@keyframes fall { from { transform: translateY(0); } to { transform: translateY(300px); } }
.snow-flake { position: absolute; top: -10px; width: 5px; height: 5px; background: white; border-radius: 50%; animation: snow-fall linear infinite; }
@keyframes snow-fall { from { transform: translateY(0) translateX(0); } to { transform: translateY(300px) translateX(20px); } }
.other-tent, .attack-tent { transform: translateX(-50%); z-index: 2; }
.other-tent { width: 90px; }
.attack-tent { width: 60px; }
.tree-art { bottom: 18%; width: 80px; z-index: 1; transform: translateX(-50%); }
#river-art { top: 30%; height: 40%; left: 0; width: 100%; z-index: 0; background: linear-gradient(#6ca9ea, #82c4ff); }
.floating-item { position: absolute; font-size: 2rem; z-index: 1; animation: float-downstream 10s linear infinite; cursor: pointer; }
@keyframes float-downstream { from { transform: translateX(-40px); } to { transform: translateX(320px); } }
.butterfly { position: absolute; width: 20px; height: 20px; z-index: 6; pointer-events: none; animation: flutter 5s ease-in-out infinite; }
@keyframes flutter { 0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); } 25% { transform: translateY(-20px) translateX(30px) rotate(15deg); } 50% { transform: translateY(10px) translateX(-20px) rotate(-10deg); } 75% { transform: translateY(-10px) translateX(10px) rotate(5deg); } }
.thought-bubble { position: absolute; top: -20px; right: -20px; font-size: 1.2rem; background: white; padding: 2px 5px; border-radius: 8px; box-shadow: 2px 2px 0px rgba(0,0,0,0.1); animation: thought-pop 0.3s ease-out, thought-fade 3s 0.5s forwards; }
@keyframes thought-pop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes thought-fade { from { opacity: 1; } to { opacity: 0; } }
.cloud.nightmare-cloud, .cloud.nightmare-cloud::before, .cloud.nightmare-cloud::after { background-color: #d4edda; }
.wandering-sheep { position: absolute; bottom: 25%; font-size: 2.5rem; animation: walk-across 15s linear forwards; }
@keyframes walk-across { from { transform: translateX(-50px); } to { transform: translateX(330px); } }
#party-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; opacity: 0.4; background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3); background-size: 1800% 1800%; animation: rainbow-strobe 18s ease infinite; }
@keyframes rainbow-strobe { 0%{background-position:0% 82%} 50%{background-position:100% 19%} 100%{background-position:0% 82%} }
#livestream-border { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; border-radius: 10px; border: 8px solid #ff1f1f; box-shadow: 0 0 15px #ff1f1f, inset 0 0 15px #ff1f1f; animation: pulse-red 2s infinite; }
#livestream-border::before { content: '🔴 LIVE'; position: absolute; top: 10px; left: 10px; background-color: #ff1f1f; color: white; padding: 4px 10px; border-radius: 5px; font-weight: bold; font-size: 0.9rem; }
@keyframes pulse-red { 0% { box-shadow: 0 0 15px #ff1f1f, inset 0 0 15px #ff1f1f; } 50% { box-shadow: 0 0 25px #ff6060, inset 0 0 25px #ff6060; } 100% { box-shadow: 0 0 15px #ff1f1f, inset 0 0 15px #ff1f1f; } }
#game-ui { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; background: #fdf1d1; padding: 1rem; border-radius: 10px; margin-bottom: 1.5rem; }
.stat-box { text-align: center; }
.stat-label { font-weight: bold; color: var(--primary-green); }
.stat-value { font-size: 1.5rem; font-weight: 700; }
.stat-value.with-bonus { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
#happiness-bonus { display: flex; align-items: center; gap: 0.2rem; background: var(--accent-green); color: white; padding: 0.1rem 0.4rem; border-radius: 5px; font-size: 0.8rem; animation: pop-in 0.3s; }
#happiness-bonus span { font-weight: bold; }
#energy-display { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
#energy-face { width: 24px; height: 24px; fill: var(--dark-charcoal); transition: filter 0.3s; }
#energy-face .mouth { fill: none; stroke: var(--dark-charcoal); stroke-width: 2; stroke-linecap: round; }
#energy-face.energy-high { filter: drop-shadow(0 0 8px #76c86ac0); }
#energy-face.energy-low { filter: drop-shadow(0 0 8px #ff0000c0); }
#energy-face.energy-sleepy #energy-value { opacity: 0.7; }
#game-log { min-height: 3em; padding: 0.5rem; text-align: center; font-style: italic; color: var(--primary-green); }
#game-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.action-group { display: flex; flex-direction: column; gap: 0.5rem; flex-grow: 1; }
#game-actions button { font-family: inherit; font-size: 1rem; font-weight: bold; background-color: var(--primary-green); color: white; border: none; padding: 0.75rem; border-radius: 10px; transition: background-color 0.2s, transform 0.1s; }
#game-actions button:hover:not(:disabled) { background-color: var(--accent-green); transform: translateY(-2px); }
#game-actions button:disabled { background-color: #ccc; cursor: not-allowed; }
.popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 1rem; }
.popup-content { max-width: 400px; text-align: center; animation: popup-in 0.3s ease-out; }
.popup-content.shake-popup { animation: popup-in 0.3s ease-out, shake-horizontal 0.5s ease-in-out; }
.popup-content button { font-family: inherit; font-size: 1rem; font-weight: bold; background-color: var(--primary-green); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 50px; margin-top: 1rem; }
@keyframes popup-in { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes shake-horizontal { 10%, 90% { transform: scale(1) translateX(-1px); } 20%, 80% { transform: scale(1) translateX(2px); } 30%, 50%, 70% { transform: scale(1) translateX(-4px); } 40%, 60% { transform: scale(1) translateX(4px); } }
#star-rating-area { font-size: 2.5rem; margin: 1rem 0; line-height: 1.2; word-break: break-all; }
.star { color: var(--grid-color); display: inline-block; transition: color 0.3s, transform 0.3s; }
.star.filled { color: var(--accent-yellow); text-shadow: 0 0 5px var(--accent-yellow); transform: scale(1.2); }
footer { text-align: center; font-size: 0.9rem; color: #96896f; margin-top: 2rem; }
@media (max-width: 900px) {
    .container { margin: 1rem auto; padding: 0.5rem; }
    h1, .wordart-header { font-size: 2rem; }
    .card { padding: 1rem 1.5rem; box-shadow: 5px 5px 0px var(--primary-green); }
    .main-layout { grid-template-columns: 1fr; }
    #magnifying-loupe { display: none !important; }
}
.corner-chinchilla { position: fixed; bottom: 20px; right: 20px; z-index: 1000; pointer-events: none; }
.corner-chinchilla img { width: 120px; height: auto; animation: float 3s ease-in-out infinite alternate; }
@keyframes float { from { transform: translateY(0px); } to { transform: translateY(-10px); } }
#heatwave-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 80, 80, 0.2); z-index: 4; pointer-events: none; animation: heatwave-shimmer 2s ease-in-out infinite alternate; }
@keyframes heatwave-shimmer { from { opacity: 0.5; } to { opacity: 1; } }
.audio-controls { background: #fdf1d1; padding: 0.75rem; border-radius: 10px; display: flex; justify-content: center; gap: 1.5rem; align-items: center; max-width: 320px; margin: 0 auto 1.5rem auto; flex-wrap: wrap; }
.volume-slider-group { display: flex; align-items: center; gap: 0.5rem; }
.volume-slider-group label { font-weight: bold; color: var(--primary-green); font-size: 0.9rem; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100px; height: 8px; background: var(--grid-color); border-radius: 5px; outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: var(--primary-green); border-radius: 50%; cursor: pointer; border: 2px solid var(--card-bg); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: var(--primary-green); border-radius: 50%; cursor: pointer; border: 2px solid var(--card-bg); }
@media (max-width: 600px) { 
    .corner-chinchilla { display: none; } 
    #game-ui { grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.5rem; }
    .stat-label { font-size: 0.8rem; }
    .stat-value { font-size: 1.1rem; }
    #energy-face { width: 18px; height: 18px; }
    #game-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .action-group { display: contents; }
    #game-actions button { padding: 0.5rem; font-size: 0.9rem; width: 100%; }
    header { flex-direction: column; gap: 0.5rem; }
}
#new-high-score-tag { color: var(--primary-green); background-color: var(--accent-yellow); padding: 2px 8px; border-radius: 5px; font-size: 0.8rem; font-weight: bold; animation: pop-in 0.5s ease-out; display: inline-block; margin-left: 10px; }
#recent-scores-area { margin-top: 1.5rem; padding-top: 1rem; border-top: 2px solid var(--grid-color); }
#recent-scores-area h4 { margin-bottom: 0.5rem; color: var(--primary-green); }
#recent-scores-list { list-style: none; padding: 0; display: flex; justify-content: center; gap: 1.5rem; font-size: 1.2rem; font-weight: bold; }
#recent-scores-list li { padding-left: 0; }
#recent-scores-list li::before { content: ''; }
#marshmallow-emoji-hat { font-size: 16px; -webkit-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; overflow: visible !important; }
#game-controls { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.campfire-settings { text-align: center; margin: 0 auto 1rem auto; padding: 0.5rem; background: rgba(253, 241, 209, 0.5); border-radius: 10px; max-width: 300px; }
.campfire-settings label { font-weight: bold; color: var(--primary-green); vertical-align: middle; }
.campfire-settings input[type="range"] { vertical-align: middle; }
.campfire-settings span { display: inline-block; width: 65px; text-align: left; font-weight: bold; color: var(--primary-green); vertical-align: middle; padding-left: 5px; }
#epic-countdown-timer { position: fixed; top: 50%; left: 50%; font-size: 15rem; font-weight: 700; color: var(--accent-yellow); -webkit-text-stroke: 3px var(--dark-charcoal); text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2); z-index: 2000; pointer-events: none; display: none; }
#epic-countdown-timer.animate { animation: fancy-countdown 1s ease-out forwards; }
@keyframes fancy-countdown { from { opacity: 1; transform: translate(-50%, -50%) scale(0.5); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.2); } }
.results-flavor-text { font-style: italic; color: var(--primary-green); margin: 0.5rem 1rem 1rem 1rem; font-size: 1.1rem; min-height: 2.5em; }--- START OF FILE main.js ---

document.addEventListener('DOMContentLoaded', function() {
    const headerPlaceholder = document.getElementById('header-placeholder');

    // Function to set the active state for the current page's navigation link
    function setActiveLink() {
        const navLinks = document.querySelectorAll('.links a');
        const currentPage = window.location.pathname.split('/').pop();
        
        navLinks.forEach(link => {
            if (link.getAttribute('href') === currentPage) {
                link.classList.add('active-link');
            }
        });
    }

    // Function to apply the wobble effect to the header text
    function initWobbleHeader() {
        const headerText = document.querySelector('.wordart-header');
        if (!headerText) return;

        const text = headerText.textContent;
        headerText.innerHTML = ''; // Clear original text

        for (let i = 0; i < text.length; i++) {
            const char = text[i];
            const span = document.createElement('span');
            
            if (char === ' ') {
                span.innerHTML = ' '; // Use non-breaking space for spaces
            } else {
                span.textContent = char;
                span.classList.add('wobble-char');
                span.style.animationDelay = (i * 0.07) + 's';
            }
            headerText.appendChild(span);
        }
    }

    // Function to load a random header from headers.json
    async function loadRandomHeader() {
        try {
            const response = await fetch('headers.json');
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const headers = await response.json();
            const randomHeader = headers[Math.floor(Math.random() * headers.length)];

            const headerImage = document.querySelector('#header-placeholder .profile-pic');
            const headerTitle = document.querySelector('#header-placeholder .wordart-header');

            if (headerImage) headerImage.src = randomHeader.image;
            if (headerTitle) {
                headerTitle.textContent = randomHeader.name;
                initWobbleHeader(); // Re-apply wobble effect to the new text
            }

        } catch (error) {
            console.error("Could not load headers.json:", error);
        }
    }

    // Function to create and append the "New Header" button
    function createHeaderButton() {
        const navContainer = document.querySelector('.links');
        if (!navContainer) return;

        const button = document.createElement('button');
        button.textContent = 'New Header';
        button.addEventListener('click', loadRandomHeader);
        navContainer.appendChild(button);
    }
    
    // Main execution flow
    async function initializePage() {
        if (!headerPlaceholder) return;

        // 1. Fetch and inject the header HTML
        try {
            const response = await fetch('header.html');
            const headerHTML = await response.text();
            headerPlaceholder.innerHTML = headerHTML;
        } catch (error) {
            console.error('Could not load header.html:', error);
            headerPlaceholder.innerHTML = '<p style="text-align:center; color:red;">Error: Could not load header.</p>';
            return; // Stop if header fails to load
        }

        // 2. All subsequent functions run after the header is loaded
        setActiveLink();
        createHeaderButton();
        await loadRandomHeader(); // Load an initial random header
    }

    initializePage();

    // Initialize scripts for other pages if their containers exist
    // (This part is from your previous index.html script, now integrated)
    const calendarContainer = document.getElementById('calendar-container');
    const clockContainer = document.getElementById('world-clocks-container');
    const particleScript = () => {
        document.addEventListener('mousemove', function(e) {
            let particle = document.createElement('span'); particle.classList.add('particle'); document.body.appendChild(particle);
            let x = e.clientX + (Math.random() - 0.5) * 10; let y = e.clientY + (Math.random() - 0.5) * 10;
            particle.style.left = x + 'px'; particle.style.top = y + 'px';
            particle.addEventListener('animationend', function() { particle.remove(); });
        });
    };

    if (calendarContainer) {
        // Your calendar init logic here
        function initCalendar() {
            const names = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; const days = ["S", "M", "T", "W", "T", "F", "S"]; const today = new Date(); const month = today.getMonth(); const year = today.getFullYear(); let first = (new Date(year, month)).getDay(); let daysInMonth = 32 - new Date(year, month, 32).getDate(); let tbl = document.createElement("table"); tbl.className = "calendar-table"; let head = tbl.createTHead(); let headRow = head.insertRow(); let cell = headRow.insertCell(); cell.colSpan = 7; cell.innerHTML = `${names[month]} ${year}`; let dayRow = head.insertRow(); for (let day of days) { let dCell = dayRow.insertCell(); dCell.textContent = day; } let body = tbl.createTBody(); let date = 1; for (let i = 0; i < 6; i++) { let row = body.insertRow(); for (let j = 0; j < 7; j++) { if (i === 0 && j < first) { let cell = row.insertCell(); cell.appendChild(document.createTextNode("")); } else if (date > daysInMonth) { break; } else { let cell = row.insertCell(); cell.appendChild(document.createTextNode(date)); if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) { cell.classList.add("today"); } date++; } } } calendarContainer.appendChild(tbl);
        }
        initCalendar();
    }

    if (clockContainer) {
        // Your clock init logic here
        function initWorldClocks() {
            const timezones = [ { label: 'Japan', timezone: 'Asia/Tokyo' }, { label: 'Pacific', timezone: 'America/Los_Angeles' }, { label: 'Mountain', timezone: 'America/Denver' }, { label: 'Central', timezone: 'America/Chicago' }, { label: 'Eastern', timezone: 'America/New_York' }, ];
            function updateClocks() { clockContainer.innerHTML = ''; const now = new Date(); for (const loc of timezones) { const timeString = now.toLocaleTimeString('en-US', { timeZone: loc.timezone, hour: 'numeric', minute: '2-digit' }); const clockEntry = document.createElement('div'); clockEntry.className = 'clock-entry'; const labelSpan = document.createElement('span'); labelSpan.className = 'clock-label'; labelSpan.textContent = loc.label; const timeSpan = document.createElement('span'); timeSpan.className = 'clock-time'; timeSpan.textContent = timeString; clockEntry.appendChild(labelSpan); clockEntry.appendChild(timeSpan); clockContainer.appendChild(clockEntry); } }
            updateClocks(); setInterval(updateClocks, 15000);
        }
        initWorldClocks();
    }
    
    particleScript();

});