/* =========================================================
   Arnika Games v2 zones. Shared UI tokens come from app.css;
   each zone adds its own art style here.
   ========================================================= */

/* ---------- shared zone kit ---------- */
.zk { overflow: hidden; }
.zk-hub { position: absolute; inset: 0; display: grid; place-items: center; padding: calc(110px + var(--safe-t)) 18px calc(24px + var(--safe-b)); overflow-y: auto; transition: opacity .25s, transform .25s; }
.zk-hub.is-behind { opacity: 0; transform: scale(.96); pointer-events: none; }
.zk-hub__deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.zk-doors { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 3vw, 28px); max-width: 1100px; }
.zk-door { position: relative; width: clamp(140px, 27vw, 230px); aspect-ratio: 1; border-radius: 34px; display: grid; place-items: center; transition: transform .2s var(--ease-bounce); }
.zk-door > svg { width: 100%; height: 100%; display: block; }
.zk-door:active, .zk-door.is-pressed { transform: scale(.94); }
.zk-door__key { position: absolute; right: 10px; bottom: 8px; font-size: 13px; font-weight: 800; opacity: .0; }
.zk-door:focus-visible .zk-door__key { opacity: .6; }
.zk-sub { position: absolute; inset: 0; z-index: 8; overflow: hidden; animation: screen-in .4s var(--ease-bounce) both; }
.zk-sub.is-leaving { animation: screen-out .2s ease-in both; }
.zk-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }
.zk-word { position: absolute; z-index: 30; left: 50%; top: 22%; transform: translate(-50%, 0); padding: 14px 34px 16px; border-radius: 30px; background: var(--white); box-shadow: var(--shadow-soft); text-align: center; pointer-events: none; animation: zk-word-in .45s var(--ease-bounce) both; transition: opacity .4s, transform .4s; }
/* keep the -50% centring inside the keyframes, or the bubble jumps right while it bounces in */
@keyframes zk-word-in { from { opacity: 0; transform: translate(-50%, 30px) scale(.4); } to { opacity: 1; transform: translate(-50%, 0); } }
.zk--sub-open > .topbar { visibility: hidden; pointer-events: none; }
.zk-word b { display: block; font-size: clamp(40px, 9vw, 72px); line-height: 1.05; font-weight: 800; }
.zk-word small { display: block; font-size: 20px; color: var(--ink-soft); font-weight: 700; }
.zk-word.is-out { opacity: 0; transform: translate(-50%, -20px); }
.zk-tools { position: absolute; z-index: 12; display: flex; gap: 12px; }
.zk-tools--bottom { left: 50%; transform: translateX(-50%); bottom: calc(14px + var(--safe-b)); }
.zk-tools--right { right: calc(14px + var(--safe-r)); top: 50%; transform: translateY(-50%); flex-direction: column; }
.zk-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------- island additions ---------- */
.zone-badge--garage { background: #FF8A5B; color: #fff; } .zone-badge--garage::after { border-top-color: #FF8A5B; }
.zone-badge--festival { background: #B4532F; color: #FFF4E2; } .zone-badge--festival::after { border-top-color: #B4532F; }
.zone-badge--puzzles { background: #E9B36C; } .zone-badge--puzzles::after { border-top-color: #E9B36C; }
.zone-badge--kitchen { background: #F2A27C; } .zone-badge--kitchen::after { border-top-color: #F2A27C; }
.zone-badge--stories { background: #F6E7C8; } .zone-badge--stories::after { border-top-color: #F6E7C8; }
.zone-badge--magic { background: #2A2350; color: #7CF7FF; box-shadow: 0 0 0 3px #7CF7FF, 0 0 18px #7CF7FF; } .zone-badge--magic::after { border-top-color: #7CF7FF; }
.zone-badge--silly { background: var(--lilac); } .zone-badge--silly::after { border-top-color: var(--lilac); }
.zone-badge.is-off { filter: grayscale(1) opacity(.55); }
.zone-badge.is-back { opacity: .0; pointer-events: none; }
/* phone dock: portrait = two rows along the bottom (scrolls sideways); landscape = two columns on the right */
.zone-dock { position: absolute; z-index: 6; left: 0; right: 0; bottom: calc(6px + var(--safe-b)); display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 76px); grid-auto-columns: 76px; gap: 12px 12px; overflow-x: auto; overflow-y: hidden; padding: 10px 22px 12px; scroll-snap-type: x proximity; scrollbar-width: none; touch-action: pan-x; overscroll-behavior: contain; -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); }
.zone-dock::-webkit-scrollbar { display: none; }
.zone-dock .zone-badge { position: relative; left: auto; top: auto; margin: 0; width: 76px; height: 76px; scroll-snap-align: start; transform: none !important; transition: transform .2s var(--ease-bounce); }
.zone-dock .zone-badge::after { display: none; }
.zone-dock .zone-badge:active, .zone-dock .zone-badge.is-pressed { transform: scale(.9) !important; }
.zone-dock[hidden] { display: none; }
.zone-dock--side { left: auto; top: calc(96px + var(--safe-t)); bottom: calc(6px + var(--safe-b)); right: calc(4px + var(--safe-r)); grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(2, 72px); grid-auto-rows: 72px; gap: 10px; padding: 12px 12px 18px; overflow-x: hidden; overflow-y: auto; touch-action: pan-y; scroll-snap-type: y proximity; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(180deg, transparent, #000 14px, #000 calc(100% - 18px), transparent); }
.zone-dock--side .zone-badge { width: 72px; height: 72px; }
@media (min-width: 380px) and (max-width: 639px) and (orientation: portrait) { .zone-dock { justify-content: start; } }
.island-fallback { padding-top: calc(110px + var(--safe-t)); flex-wrap: wrap; }
.island-screen.is-docked .zone-dock { animation: dock-in .5s .4s var(--ease-bounce) both; }
@keyframes dock-in { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.island-screen.is-docked .zone-dock--side { animation-name: dock-in-side; }
@keyframes dock-in-side { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.zone-badge--stories { color: #6B4A2A; }

/* ---------- Garage / race (low-poly toy) ---------- */
.garage { background: linear-gradient(180deg, #CDEBFF 0%, #EAF6FF 55%, #FFF3E0 100%); }
.garage.is-racing { background: linear-gradient(180deg, #8FD0FF 0%, #CDEBFF 45%, #E9F7FF 100%); }
.garage__panel { position: absolute; z-index: 10; left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--safe-b)); width: min(760px, calc(100% - 24px)); display: grid; gap: 10px; padding: 12px; border-radius: 34px; background: rgba(255, 253, 249, .9); box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); }
.garage__tabs { display: flex; gap: 10px; justify-content: center; }
.garage__tab { width: 72px; height: 72px; border-radius: 22px; background: var(--cream); box-shadow: inset 0 0 0 3px #F1DCCB; display: grid; place-items: center; transition: transform .2s var(--ease-bounce); }
.garage__tab svg { width: 46px; height: 46px; }
.garage__tab[aria-selected="true"] { background: var(--sun); box-shadow: var(--shadow-clay); transform: translateY(-3px); }
.garage__choices { display: flex; gap: 10px; overflow-x: auto; justify-content: safe center; padding: 4px 2px 6px; scrollbar-width: none; touch-action: pan-x; }
.garage__choices::-webkit-scrollbar { display: none; }
.garage__choice { flex: none; width: 84px; height: 84px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 3px #EDE3F2; display: grid; place-items: center; padding: 8px; transition: transform .2s var(--ease-bounce), box-shadow .2s; }
.garage__choice svg { width: 100%; height: 100%; }
.garage__choice[aria-selected="true"] { box-shadow: inset 0 0 0 5px var(--coral), 0 8px 16px -8px rgba(255,127,110,.9); transform: scale(1.06); }
.garage__swatch { width: 56px; height: 56px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -5px 0 rgba(0,0,0,.14), inset 0 0 0 3px rgba(0,0,0,.06); }
.garage__go { position: absolute; z-index: 11; right: calc(18px + var(--safe-r)); bottom: calc(196px + var(--safe-b)); width: 112px; height: 112px; border-radius: 50%; background: #5CC9A0; color: #fff; box-shadow: var(--shadow-clay); display: grid; place-items: center; animation: go-pulse 2.2s ease-in-out infinite; }
.garage__go svg { width: 60%; height: 60%; --fill: #FFFDF9; }
@keyframes go-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.garage__nogl { position: absolute; inset: 0; display: grid; place-items: center; } .garage__nogl svg { width: min(60vw, 340px); }
.race-hud { position: absolute; z-index: 10; top: calc(36px + var(--safe-t)); left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 260px)); min-width: 140px; }
.race-hud__bar { position: relative; height: 18px; border-radius: 99px; background: rgba(255,255,255,.75); box-shadow: inset 0 3px 0 rgba(0,0,0,.08); }
.race-hud__car { position: absolute; top: 50%; left: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: grid; place-items: center; background: #fff; border-radius: 50%; box-shadow: var(--shadow-clay); transition: left .2s linear; }
.race-hud__car svg { width: 34px; height: 34px; }
.race-hud__flag { position: absolute; right: -14px; top: 50%; width: 40px; height: 40px; margin-top: -26px; }
.race-stars { display: flex; align-items: center; gap: 6px; min-height: 72px; padding: 6px 22px 6px 12px; border-radius: 99px; background: rgba(255,253,249,.9); box-shadow: var(--shadow-clay); font-size: 30px; font-weight: 800; }
.race-stars svg { width: 48px; height: 48px; }
.race-ctrls { position: absolute; z-index: 10; left: calc(14px + var(--safe-l)); right: calc(14px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.race-ctrls > * { pointer-events: auto; display: flex; gap: 14px; align-items: flex-end; }
.race-lane { width: 92px; height: 92px; border-radius: 50%; background: rgba(255,253,249,.92); box-shadow: var(--shadow-clay); display: grid; place-items: center; }
.race-lane svg { width: 54%; height: 54%; }
.race-lane:active, .race-lane.is-pressed { transform: scale(.92); }
.race-horn { width: 78px; height: 78px; border-radius: 50%; background: rgba(255,253,249,.92); box-shadow: var(--shadow-clay); display: grid; place-items: center; }
.race-horn svg { width: 58%; height: 58%; }
.race-pedal { width: 132px; height: 132px; border-radius: 50%; background: #5CC9A0; color: #fff; box-shadow: var(--shadow-clay); display: grid; place-items: center; transition: transform .12s; touch-action: none; }
.race-pedal svg { width: 70%; height: 70%; --fill: #47B58C; }
.race-pedal.is-down { transform: scale(.9) translateY(4px); box-shadow: var(--shadow-clay-pressed); background: #47B58C; }
.race-done { position: absolute; z-index: 20; inset: 0; display: flex; align-items: center; justify-content: center; gap: 28px; padding-top: 30vh; pointer-events: none; }
.race-done button { pointer-events: auto; width: 120px; height: 120px; animation: bounce-in .6s var(--ease-bounce) both; }

@media (max-width: 560px) {
  .garage__go { width: 96px; height: 96px; bottom: calc(206px + var(--safe-b)); }
  .race-pedal { width: 116px; height: 116px; }
  .race-lane { width: 80px; height: 80px; }
  .race-hud { top: calc(112px + var(--safe-t)); width: calc(100% - 60px); }
  .race-horn { width: 72px; height: 72px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .garage__panel { left: auto; right: calc(150px + var(--safe-r)); transform: none; width: min(560px, calc(100% - 300px)); bottom: calc(8px + var(--safe-b)); padding: 8px; gap: 6px; }
  .garage__go { bottom: calc(16px + var(--safe-b)); }
  .garage__tab { width: 64px; height: 64px; } .garage__tab svg { width: 40px; height: 40px; }
  .garage__choice { width: 76px; height: 76px; }
}