.island-arcade { --island-ink: #183744; --island-cream: #fff8e5; }
.island-arcade main { background: var(--island-cream); color: var(--island-ink); }
.island-header-actions { display: flex; align-items: center; gap: .65rem; }
.island-countdown { display: grid; color: #173b46; white-space: nowrap; }
.island-countdown span { font-size: .58rem; font-weight: 900; letter-spacing: .04em; }
.island-countdown strong { font-size: .93rem; font-variant-numeric: tabular-nums; }
.island-ticket, .island-play, .island-explore {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    font-weight: 900; text-decoration: none; border-radius: 999px;
}
.island-ticket { padding: .45rem .75rem; font-size: .75rem; text-align: center; background: #ffd45a; color: #45230f; }
.island-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(148deg, #7f2758 0%, #a63750 45%, #ed7136 100%);
    color: #fffaf0;
}
.island-hero::before {
    position: absolute; z-index: -1; inset: 0; content: "";
    background: radial-gradient(circle at 86% 54%, #ffc065 0 10%, transparent 10.3%),
        repeating-linear-gradient(128deg, transparent 0 15px, #fff5c910 16px 17px, transparent 18px 26px);
}
.island-hero::after {
    content: ""; position: absolute; z-index: -1; inset: auto 0 0; height: 23%;
    background: linear-gradient(170deg, #4db5a9, #157b87);
    clip-path: polygon(0 68%, 21% 84%, 40% 71%, 67% 28%, 82% 18%, 100% 39%, 100% 100%, 0 100%);
}
.island-hero-inner { padding-block: clamp(3.2rem, 8vw, 7.5rem); }
.island-kicker { display: inline-block; font-weight: 900; font-size: .78rem; letter-spacing: .11em; text-transform: uppercase; }
.island-hero .island-kicker { background: #471d38; border: 1px solid #fff4c57d; border-radius: 999px; padding: .42rem .8rem; }
.island-hero h1 { font-size: clamp(2.65rem, 8vw, 6.25rem); line-height: .99; margin: .65rem 0 1rem; color: #fffaf0; }
.island-hero h1 span { color: #ffdc65; }
.island-hero p { font-size: clamp(1rem, 2vw, 1.23rem); max-width: 34rem; margin-bottom: 1.4rem; color: #fffaf0; }
.island-explore { background: #fff8df; color: #542340; gap: .6rem; padding: .55rem 1rem; }
.island-catalog { padding-block: clamp(2.5rem, 6vw, 5rem); scroll-margin-top: 6rem; }
.island-catalog-heading { margin-bottom: 1.35rem; }
.island-catalog-heading .island-kicker { color: #087478; }
.island-catalog-heading h2 { margin: .25rem 0; font-size: clamp(2rem, 5vw, 3.35rem); }
.island-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.island-card { display: flex; flex-direction: column; padding: .65rem; border-radius: 1.25rem; background: #fffdfa; border: 1px solid #e8dbc2; box-shadow: 0 6px 18px #6d4e2c14; }
.island-thumb {
    display: grid; position: relative; isolation: isolate; place-items: center; overflow: hidden;
    min-height: 145px; border-radius: .9rem; background: var(--tile);
}
.island-thumb::before { content: ""; position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(145deg, transparent 0 13px, #ffffff25 14px 15px, transparent 16px 24px); }
.island-thumb::after { content: ""; position: absolute; z-index: -1; width: 130px; aspect-ratio: 1; border: 2px solid #fff7; border-radius: 50%; box-shadow: 0 0 0 12px #fff2, 0 0 0 25px #fff2; }
.island-thumb--sun { --tile: linear-gradient(145deg, #ffad54, #ffdc75); }
.island-thumb--sand { --tile: linear-gradient(145deg, #eeb45c, #ffeaab); }
.island-thumb--sea { --tile: linear-gradient(145deg, #2fb8db, #6bf1df); }
.island-thumb--mystery { --tile: linear-gradient(145deg, #9766d0, #dcc3fb); }
.island-thumb--quiz { --tile: linear-gradient(145deg, #f47788, #ffbd95); }
.island-thumb--lagoon { --tile: linear-gradient(145deg, #3bbd9f, #b0efb4); }
.island-thumb--night { --tile: linear-gradient(145deg, #383d80, #956bc6); }
.island-thumb--capture { --tile: linear-gradient(145deg, #fd8464, #ffd970); }
.island-art { font-size: 3.7rem; line-height: 1; filter: drop-shadow(0 7px 5px #452c4a42); }
.island-tag { position: absolute; inset: .55rem auto auto .55rem; background: #fff9e9; color: #243b45; border-radius: 999px; padding: .28rem .6rem; font-size: .73rem; font-weight: 900; }
.island-card-content { display: flex; flex: 1; flex-direction: column; padding: .85rem .45rem .35rem; }
.island-card h3 { font-size: 1.25rem; line-height: 1.12; margin: 0 0 .4rem; }
.island-card p { margin: 0 0 .65rem; font-size: .91rem; }
.island-card .island-record { margin-top: auto; padding-top: .35rem; font-size: .79rem; font-weight: 900; color: #325c47; }
.island-play { background: #09666a; color: white; padding: .55rem .9rem; }
.island-play:hover { background: #084b56; color: white; }
.island-bonus { margin: 1.5rem 0 0; }
.island-explore:hover, .island-ticket:hover { color: #542340; filter: brightness(.94); }
.island-arcade :is(.island-ticket, .island-explore, .island-play):focus-visible { outline: 3px solid #ae3554; outline-offset: 3px; }
@media (min-width: 560px) { .island-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .island-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .island-header-actions .island-countdown { display: none; } }
@media (max-width: 560px) {
    .island-arcade .header-inner { flex-wrap: wrap; gap: .15rem .55rem; padding-block: .25rem .5rem; }
    .island-arcade .header-inner .event-logo { width: 91px; height: auto; }
    .island-header-actions { order: 3; flex: 1 0 100%; justify-content: space-between; }
    .island-hero::before { opacity: .6; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .island-card { transition: transform .18s ease, box-shadow .18s ease; }
    .island-card:hover { transform: translateY(-4px); box-shadow: 0 12px 22px #6d4e2c24; }
}