body {
    font-family: 'Comic Neue', cursive;
    background-color: #aee1f9; /* Light Sky Blue */
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}
.swiss-background {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}
.swiss-background svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.font-bangers {
    font-family: 'Bangers', cursive;
    letter-spacing: 2px;
}
.comic-panel {
    background-color: rgba(255, 255, 255, 0.9);
    border: 4px solid black;
    border-radius: 0.5rem;
    box-shadow: 8px 8px 0px #000000;
    transition: all 0.2s ease-in-out;
    position: relative;
}
.comic-button {
    border: 3px solid black;
    box-shadow: 5px 5px 0px #000000;
    transition: all 0.1s ease-in-out;
}
.comic-button:hover {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0px #000000;
}
.comic-button:active {
    transform: translate(5px, 5px);
    box-shadow: 0px 0px 0px #000000;
}
.comic-input {
    border: 3px solid black;
    border-radius: 0.375rem;
    transition: all 0.2s;
}
.comic-input:focus {
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.5); /* Amber-300 */
    border-color: black;
    outline: none;
}
.static-cloud {
    background-color: rgba(255, 255, 255, 0.95);
    border: 3px solid black;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    padding: 0.5rem 1.5rem;
    display: inline-block;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
}
.cloud-style {
    background-color: rgba(255, 255, 255, 0.95);
    border: 3px solid black;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    padding: 0.5rem 1.5rem;
    display: inline-block;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
    animation: moveCloud 30s linear infinite alternate;
}
@keyframes moveCloud {
    from { transform: translateX(-8px) rotate(-1deg); }
    to { transform: translateX(8px) rotate(1deg); }
}
.toast {
    visibility: hidden; min-width: 250px; margin-left: -125px; background-color: #333; color: #fff; text-align: center;
    border-radius: 2px; padding: 16px; position: fixed; z-index: 100; left: 50%; bottom: 30px; font-size: 17px;
    opacity: 0; transition: visibility 0.5s, opacity 0.5s linear; border: 3px solid black; box-shadow: 5px 5px 0 #000;
}
.toast.show { visibility: visible; opacity: 1; }
.modal, .view {
    display: none;
}
.modal.flex, .view.active {
    display: block;
}
.modal.flex {
    display: flex;
}
.is-capturing .hide-on-capture {
    display: none !important;
    visibility: hidden !important;
}
.cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 100px;
    box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
    animation: animateCloud linear infinite;
}
.cloud:before, .cloud:after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    z-index: -1;
}
.cloud:before {
    width: 100px; height: 100px;
    top: -50px; left: 40px;
    border-radius: 100px;
}
.cloud:after {
    width: 120px; height: 120px;
    top: -60px; right: 30px;
    border-radius: 120px;
}
@keyframes animateCloud {
    from { transform: translateX(-100vw); }
    to { transform: translateX(100vw); }
}
.sun-container {
    animation: sunPulse 8s infinite ease-in-out;
    transform-origin: 150px 180px;
}
@keyframes sunPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.water-flow {
    animation: waterFlow 15s linear infinite;
}
@keyframes waterFlow {
    from { transform: translateX(0); }
    to { transform: translateX(-50px); }
}
.flag-container {
    perspective: 1000px;
}
.flag-flipper {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s;
}
.flag-container:hover .flag-flipper {
    transform: rotateY(180deg);
}
.flag-front, .flag-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    top: 0;
    left: 0;
}
.flag-back {
    transform: rotateY(180deg);
    background-color: #D52B1E;
    border: 4px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Styles for settled activities accordion */
.settled-group summary {
    list-style: none; /* Remove default marker */
    cursor: pointer;
}
.settled-group summary::-webkit-details-marker {
    display: none; /* Remove default marker for Chrome/Safari */
}
.settled-group summary::before {
    content: '▶';
    display: inline-block;
    margin-right: 0.5rem;
    transition: transform 0.2s ease-in-out;
}
.settled-group[open] > summary::before {
    transform: rotate(90deg);
}
.settled-content {
    padding: 1rem;
    border: 4px solid black;
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
    background-color: rgba(240, 255, 240, 0.85); /* Honeydew with transparency */
}
.settled-activity {
    background-color: rgba(230, 245, 230, 0.9);
    border-color: #22c55e; /* green-500 */
}

.activity-card {
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.activity-card:hover {
    background-color: rgba(255, 252, 224, 0.9); /* Light yellow hover */
}