/* Discovery World: the illustrated map with its place buttons, and the place pages. */

.k-main--world { max-width: 1440px; }

.k-world-intro { margin: 0 0 18px; }
.k-world-intro .k-bubble strong { display: block; font-size: 1.35rem; margin-bottom: 2px; }

.k-world { position: relative; }

.k-world-frame {
    position: relative;
    border-radius: 36px;
    overflow: hidden;
    box-shadow: 0 0 0 6px var(--paper), 0 0 0 8px color-mix(in srgb, var(--grape) 18%, transparent), var(--shadow-l);
    background: #9EDB8C;
}
.k-world-frame--wide { aspect-ratio: 16 / 10; }
.k-world-frame--tall { aspect-ratio: 9 / 16; display: none; }

.k-world-map { display: block; width: 100%; height: 100%; }
.k-world-map .place { transition: transform .45s var(--ease-bounce), filter .3s; transform-box: fill-box; transform-origin: 50% 100%; }
.k-world-map .place.is-active { transform: translateY(-10px) scale(1.04); filter: drop-shadow(0 0 18px rgba(255, 236, 160, .95)) saturate(1.15); }

.k-place {
    position: absolute;
    left: var(--x); top: var(--y);
    transform: translate(-50%, -50%);
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 18px 6px 6px;
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
    font-weight: 800; font-size: clamp(.9rem, 1.35vw, 1.2rem);
    white-space: nowrap;
    box-shadow: 0 6px 0 color-mix(in srgb, var(--td) 45%, transparent), 0 14px 26px rgba(31, 27, 77, .25);
    border: 3px solid color-mix(in srgb, var(--t) 55%, #fff);
    transition: transform .3s var(--ease-bounce), box-shadow .3s;
    animation: place-in .6s var(--ease-bounce) backwards;
    z-index: 2;
}
[dir="rtl"] .k-place { padding: 6px 6px 6px 18px; }
.k-place:nth-of-type(2) { animation-delay: .06s; }
.k-place:nth-of-type(3) { animation-delay: .12s; }
.k-place:nth-of-type(4) { animation-delay: .18s; }
.k-place:nth-of-type(5) { animation-delay: .24s; }
.k-place:nth-of-type(6) { animation-delay: .3s; }
.k-place:nth-of-type(7) { animation-delay: .36s; }
.k-place:hover, .k-place:focus-visible { transform: translate(-50%, -50%) translateY(-6px) scale(1.06); z-index: 3; }
.k-place:active { transform: translate(-50%, -50%) scale(.96); }
.k-place-icon {
    display: grid; place-items: center;
    width: clamp(34px, 3.4vw, 46px); height: clamp(34px, 3.4vw, 46px); border-radius: 50%;
    background: var(--ts);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--t) 40%, transparent);
}
.k-place-icon .k-ico { width: 78%; height: 78%; }

@keyframes place-in { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.k-menu-big { margin-top: 44px; }
.k-menu-big > h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin-bottom: 18px; }

@media (max-width: 760px) {
    .k-world-frame--wide { display: none; }
    .k-world-frame--tall { display: block; border-radius: 28px; }
    .k-place { font-size: .8rem; gap: 6px; padding: 4px 12px 4px 4px; border-width: 2px; }
    [dir="rtl"] .k-place { padding: 4px 4px 4px 12px; }
    .k-place-icon { width: 30px; height: 30px; }
    .k-world-intro .k-guide .k-mascot-svg { width: 64px; height: 80px; }
    .k-world-intro .k-bubble { font-size: 1rem; }
}

/* ---------- A place page ---------- */
.k-place-hero {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px;
    padding: clamp(22px, 4vw, 40px);
    border-radius: var(--radius-l);
    background:
        radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--t) 40%, transparent), transparent 60%),
        linear-gradient(135deg, var(--ts), var(--paper));
    box-shadow: var(--shadow);
    border: 2px solid color-mix(in srgb, var(--t) 30%, var(--paper));
    margin-bottom: 30px;
}
.k-place-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; margin: 0 0 6px; }
.k-place-hero p { font-family: var(--font-read); font-size: 1.15rem; color: var(--ink-soft); margin: 0 0 16px; }
.k-place-hero-art {
    width: clamp(120px, 18vw, 220px); aspect-ratio: 1; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--paper);
    box-shadow: 0 10px 0 color-mix(in srgb, var(--t) 40%, var(--paper)), var(--shadow);
}
.k-place-hero-art .k-ico { width: 70%; height: 70%; }

.k-activity-cover {
    margin: -22px -22px 6px; aspect-ratio: 3 / 2; overflow: hidden;
    border-radius: var(--radius-l) var(--radius-l) 18px 18px;
    background: var(--ts);
}
.k-activity-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.k-tile:hover .k-activity-cover img { transform: scale(1.05); }
.k-kind { position: absolute; inset-inline-start: 14px; top: 14px; z-index: 1; background: rgba(255, 255, 255, .92); color: var(--ink); }

@media (max-width: 760px) {
    .k-place-hero { grid-template-columns: 1fr; }
    .k-place-hero-art { display: none; }
}