/* 10.23 · Safari. The gate is a panel; walking in fills the screen, like the night run. */
.safari-dialog.is-playing{width:min(100vw,1100px);max-width:100vw;height:100dvh;max-height:100dvh;overflow:hidden;border-radius:0;padding:0}
@media(min-width:601px){.safari-dialog.is-playing{height:min(100dvh,880px);border-radius:22px}}
@media(max-width:600px){.safari-dialog.is-playing{inset:0;margin:0;border-radius:0}}
.safari-dialog.is-playing .world-shell{padding:0;height:100%;display:flex;flex-direction:column}
.safari-dialog.is-playing .panel-header{display:none}
.safari-play{flex:1;min-height:0;display:flex;flex-direction:column}

/* ---- the gate ---- */
.safari-gate{display:flex;flex-direction:column;gap:10px;padding-bottom:6px}
.safari-today{display:flex;flex-direction:column;gap:8px}
.safari-banner{position:relative;border-radius:16px;overflow:hidden;border:1px solid color-mix(in srgb,var(--biome) 45%,transparent);min-height:112px;background:#121a47}
.safari-banner-art{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;object-fit:cover}
.safari-banner-text{position:relative;display:flex;flex-direction:column;gap:3px;padding:14px 16px;background:linear-gradient(90deg,#1c1723e6,#1c172399 60%,transparent)}
.safari-banner-text .micro{margin:0;font-size:9px;letter-spacing:.18em;color:var(--biome)}
.safari-banner-text b{font-weight:500;font-size:19px;color:#f4efe3;letter-spacing:.03em}
.safari-banner-text span:last-child{font-size:12px;color:#dae7f1;max-width:26ch;line-height:1.45}
.safari-feature{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:#2c283880;border:1px solid #dae7f114}
.safari-feature canvas{width:44px;height:44px;flex:none}
.safari-feature div{display:flex;flex-direction:column;gap:2px;min-width:0}
.safari-feature .micro{margin:0;font-size:9px;letter-spacing:.16em;color:#c9a0dc}
.safari-feature b{font-weight:500;font-size:14px;color:#f4efe3}
.safari-feature span:last-child{font-size:11px;color:#a1a2a7}
.safari-notes{display:flex;flex-direction:column;gap:6px}
.safari-note{margin:0;padding:9px 12px;border-radius:12px;background:#1c172399;border:1px solid #dae7f112;font-size:12px;line-height:1.5;color:#a1a2a7}
.safari-note b{font-weight:600;color:#dae7f1}
.safari-note.is-on{border-color:#f1c59366;color:#dae7f1}.safari-note.is-on b{color:#f1c593}
.safari-note.is-wish{border-color:#fbaec566;color:#dae7f1}.safari-note.is-wish b{color:#fbaec5}
.safari-label{margin:6px 0 0;font-size:9.5px;letter-spacing:.18em;color:#a1a2a7}
.safari-tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:420px){.safari-tickets{grid-template-columns:1fr}}
.safari-ticket{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;border-radius:14px;background:#1c1723;border:1px solid #dae7f11f;color:#dae7f1;font:inherit;text-align:left;cursor:pointer}
.safari-ticket b{font-weight:500;font-size:13.5px;color:#f4efe3}
.safari-ticket span{font-size:11px;line-height:1.45;color:#a1a2a7}
.safari-ticket em{font-style:normal;font-size:12px;color:#ffe4c0;margin-top:auto}
@media(max-width:420px){.safari-ticket{display:grid;grid-template-columns:1fr auto;align-items:center}.safari-ticket span{grid-column:1}.safari-ticket em{grid-row:1 / span 2;grid-column:2}}
.safari-shop{display:flex;flex-direction:column;gap:6px}
.safari-shop-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#1c1723;border:1px solid #dae7f114}
.safari-shop-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.safari-shop-text b{font-weight:500;font-size:13px;color:#f4efe3}
.safari-shop-text b span{color:#c9a0dc}
.safari-shop-text>span{font-size:11px;line-height:1.45;color:#a1a2a7}
.safari-stepper{display:flex;align-items:center;gap:4px}
.safari-stepper button{width:30px;height:30px;border-radius:50%;border:1px solid #dae7f133;background:#2c2838;color:#f4efe3;font:inherit;font-size:15px;line-height:1;cursor:pointer}
.safari-stepper button:disabled{opacity:.35;cursor:default}
.safari-qty{min-width:18px;text-align:center;font-size:13px;color:#f4efe3}
.safari-price{font-style:normal;font-size:12px;color:#ffe4c0;min-width:44px;text-align:right}
.safari-summary{margin:4px 0 0;font-size:12px;line-height:1.5;color:#a1a2a7;text-align:center}
.safari-go{width:100%;margin:0}
.safari-resume{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:16px;background:#1c1723;border:1px solid #7aefec55}
.safari-resume .micro{margin:0;font-size:9px;letter-spacing:.18em;color:#7aefec}
.safari-resume b{font-weight:500;font-size:15px;color:#f4efe3}.safari-resume p{margin:0;font-size:12px;color:#a1a2a7}
.safari-log{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:14px;background:#1c172399;border:1px solid #dae7f112;margin-top:4px}
.safari-log .micro{margin:0;font-size:9px;letter-spacing:.18em;color:#a1a2a7}
.safari-log p{margin:0;font-size:12px;line-height:1.5;color:#c7c8cc}.safari-log b{color:#f4efe3;font-weight:600}
.safari-last{display:flex;flex-wrap:wrap;gap:6px}
.safari-last-pal{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:#2c283880}
.safari-last-pal canvas{width:36px;height:36px}
.safari-last-pal.is-new::after{content:'NEW';position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);font-size:7px;letter-spacing:.1em;padding:1px 4px;border-radius:5px;background:#7aefec;color:#1c1723;font-weight:700}

/* ---- in the wild ---- */
.safari-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:#121a47;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline:none}
.safari-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
.safari-spots{position:absolute;inset:0;pointer-events:none;z-index:2}
.safari-spot{position:absolute;transform:translateX(-50%);min-width:56px;padding:0;border:0;border-radius:14px;background:transparent;pointer-events:auto;cursor:pointer}
.safari-spot:hover,.safari-spot:focus-visible{background:#f4efe314;outline:2px dashed #f4efe366;outline-offset:2px}
.safari-spot-hint{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);white-space:nowrap;padding:3px 8px;border-radius:999px;background:#1c1723d9;border:1px solid #dae7f133;color:#dae7f1;font-size:10px;letter-spacing:.04em;animation:safari-hint 2.6s ease-in-out infinite}
.safari-spot.is-sparkle .safari-spot-hint{color:#ffe4c0;border-color:#ffe4c088}
.safari-spot.is-call .safari-spot-hint{color:#fbaec5;border-color:#fbaec5aa;box-shadow:0 0 12px #fbaec566}
.safari-spot.is-tracks .safari-spot-hint{color:var(--tracks);border-color:color-mix(in srgb,var(--tracks) 60%,transparent)}
@keyframes safari-hint{0%,100%{translate:0 0}50%{translate:0 -2px}}
@media(prefers-reduced-motion:reduce){.safari-spot-hint{animation:none}}
.safari-top{position:absolute;z-index:4;top:max(10px,env(safe-area-inset-top));left:10px;right:10px;display:flex;align-items:center;gap:8px;pointer-events:none}
.safari-top>*{pointer-events:auto}
.safari-where{flex:1;min-width:0;display:flex;flex-direction:column;padding:6px 12px;border-radius:14px;background:#1c1723c4;border:1px solid color-mix(in srgb,var(--biome,#dae7f1) 40%,transparent)}
.safari-where .micro{margin:0;font-size:8.5px;letter-spacing:.16em;color:var(--biome,#a1a2a7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.safari-where b{font-weight:500;font-size:14px;color:#f4efe3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.safari-pouch{display:flex;gap:8px;padding:10px 12px;border-radius:14px;background:#1c1723c4;border:1px solid #dae7f124;color:#dae7f1;font-size:13px;white-space:nowrap}
.safari-pouch span:first-child{color:#7aefec}
.safari-trail{position:absolute;z-index:3;top:calc(max(10px,env(safe-area-inset-top)) + 56px);left:0;right:0;display:flex;justify-content:center;gap:5px;pointer-events:none}
.safari-trail i{width:7px;height:7px;border-radius:50%;background:#1c1723c4;border:1px solid #dae7f155}
.safari-trail i.is-done{background:#a9c4da;border-color:#a9c4da}
.safari-trail i.is-here{background:#ffe4c0;border-color:#ffe4c0;box-shadow:0 0 8px #ffe4c088}
.safari-plate{position:absolute;z-index:3;top:calc(max(10px,env(safe-area-inset-top)) + 72px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 14px;border-radius:14px;background:#1c1723d0;border:1px solid color-mix(in srgb,var(--rarity) 55%,transparent);max-width:calc(100% - 24px);text-align:center}
.safari-plate .micro{margin:0;font-size:8px;letter-spacing:.18em;color:#a1a2a7}
.safari-plate b{font-weight:500;font-size:16px;color:#f4efe3;letter-spacing:.03em}
.safari-plate-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.safari-plate-tags i{font-style:normal;font-size:9px;letter-spacing:.08em;padding:2px 6px;border-radius:999px;color:var(--rarity);border:1px solid color-mix(in srgb,var(--rarity) 50%,transparent)}
.safari-plate-tags i.is-new{color:#1c1723;background:#7aefec;border-color:#7aefec;font-weight:700}
.safari-plate-tags i.is-wish{color:#1c1723;background:#fbaec5;border-color:#fbaec5;font-weight:700}
.safari-plate-tags i.is-feature{color:#c9a0dc;border-color:#c9a0dc88}
.safari-say{position:absolute;z-index:3;top:34%;left:0;right:0;margin:0;text-align:center;font-size:18px;letter-spacing:.08em;color:#ffe4c0;text-shadow:0 2px 0 #1c1723,0 0 14px #1c1723;pointer-events:none;opacity:0}
.safari-say.is-show{animation:safari-say 1.6s ease-out forwards}
.safari-say.is-soft{font-size:14px;color:#dae7f1;letter-spacing:.12em}
.safari-say.is-nice{color:#dae7f1}.safari-say.is-great{color:#85cd74;font-size:21px}.safari-say.is-excellent{color:#fbaec5;font-size:24px}
.safari-say.is-miss{color:#a1a2a7;font-size:14px}.safari-say.is-caught{color:#ffe4c0;font-size:24px}
@keyframes safari-say{0%{opacity:0;transform:translateY(8px) scale(.9)}12%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.safari-foot{position:absolute;z-index:3;left:12px;right:12px;bottom:max(8px,env(safe-area-inset-bottom));margin:0;text-align:center;font-size:11px;line-height:1.45;color:#dae7f1;text-shadow:0 1px 0 #1c1723,0 0 8px #1c1723;pointer-events:none}
.safari-actions{position:absolute;z-index:4;right:10px;bottom:calc(max(8px,env(safe-area-inset-bottom)) + 30px);display:flex;flex-direction:column;gap:8px}
.safari-actions[hidden]{display:none}
.safari-action{padding:9px 13px;border-radius:999px;border:1px solid #dae7f133;background:#1c1723d9;color:#f4efe3;font:inherit;font-size:12px;cursor:pointer}
.safari-action:disabled{opacity:.45;cursor:default}
#safari-berry span{color:#c4685c}
.safari-card{position:absolute;z-index:5;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 18px max(18px,env(safe-area-inset-bottom));text-align:center;
  background:linear-gradient(#1c1723ec,#1c1723fa);border-top:1px solid #dae7f124;border-radius:22px 22px 0 0;box-shadow:0 -18px 40px #0008;animation:safari-card .35s ease-out}
@media(min-width:601px){.safari-card{left:50%;right:auto;width:min(100%,520px);transform:translateX(-50%)}}
.safari-card[hidden]{display:none}
.safari-card .safari-card-kicker{margin:0;font-size:10px;letter-spacing:.2em;color:#ffe4c0}
.safari-card h3{margin:0;font-weight:500;font-size:20px;color:#f4efe3}
.safari-card p{margin:0;font-size:12.5px;line-height:1.5;color:#c7c8cc;max-width:36ch}
.safari-card p b.is-new{color:#7aefec}
.safari-card .primary-button{width:100%;margin:4px 0 0}
.safari-card-pal{width:96px;height:96px}
.safari-card-pal.is-gone{width:72px;height:72px;opacity:.55;filter:grayscale(.4)}
.safari-camp-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:420px}
.safari-camp-pal{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px;border-radius:12px;background:#2c283880;border:1px solid #dae7f114}
.safari-camp-pal canvas{width:48px;height:48px}
.safari-camp-pal small{font-size:9px;color:#a1a2a7}
.safari-camp-pal.is-new{border-color:#7aefec88}.safari-camp-pal.is-new small{color:#7aefec;font-weight:700}
@keyframes safari-card{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:601px){@keyframes safari-card{from{opacity:0}to{opacity:1}}}

.safari-spot.is-up .safari-spot-hint{top:auto;bottom:calc(100% + 3px)}

/* ---- 10.24 · the trail ---- */
.safari-note.is-how{border-color:#7aefec55;color:#dae7f1}.safari-note.is-how b{color:#7aefec}
.safari-trail{gap:4px;flex-wrap:wrap;padding:0 64px}
.safari-trail[hidden]{display:none}
.safari-trail i{width:6px;height:6px;background:#1c1723a0;border-color:#dae7f144}
.safari-trail i.is-left{background:#ffe4c0;border-color:#ffe4c0;box-shadow:0 0 5px #ffe4c066}
.safari-pouch .is-steps{color:#ffe4c0}.safari-pouch .is-cubes{color:#7aefec}.safari-pouch .is-berry{color:#fbaec5}.safari-pouch .is-gold{color:#f1c593}
.safari-pouch span:first-child{color:#ffe4c0}
@media(max-width:420px){.safari-pouch{gap:7px;padding:9px 10px;font-size:12px}}
.safari-blessing{position:absolute;z-index:4;top:calc(max(10px,env(safe-area-inset-top)) + 70px);left:50%;transform:translateX(-50%);padding:4px 11px;border-radius:999px;
  border:1px solid #7aefec77;background:#1c1723d9;color:#7aefec;font:inherit;font-size:10.5px;letter-spacing:.06em;cursor:pointer;box-shadow:0 0 14px #7aefec33;white-space:nowrap}
.safari-blessing[hidden]{display:none}

/* the ways on */
.safari-exitsign{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;width:max-content;max-width:min(31vw,178px);padding:6px 10px 6px 6px;border-radius:12px;
  border:1px solid #dae7f140;background:#1c1723e6;color:#f4efe3;font:inherit;text-align:left;pointer-events:auto;cursor:pointer;box-shadow:0 8px 18px -8px #000c;
  animation:safari-sign .45s cubic-bezier(.2,1.4,.4,1) both;transition:transform .15s ease,border-color .15s ease}
.safari-exitsign.is-R{flex-direction:row-reverse;text-align:right;padding:6px 6px 6px 10px}
.safari-exitsign.is-F{flex-direction:column;gap:3px;text-align:center;padding:5px 10px 7px}
.safari-exit-arrow{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ffe4c0;color:#1c1723;font-size:14px;font-weight:700;line-height:1}
.safari-exit-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.safari-exit-text b{font-weight:500;font-size:11.5px;line-height:1.2;color:#f4efe3}
.safari-exit-text small{font-size:10px;line-height:1.3;color:#a9c4da}
.safari-exit-text small i{font-style:normal;font-weight:600}
.safari-exit-icon{margin-right:4px;color:#c9a0dc}
.safari-exit-class{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--tracks);margin-right:4px;vertical-align:0}
.safari-exitsign.is-special{border-color:#ffe4c0aa;box-shadow:0 0 0 1px #ffe4c044,0 0 18px #ffe4c055;animation:safari-sign .45s cubic-bezier(.2,1.4,.4,1) both,safari-glow 2.2s ease-in-out .5s infinite}
.safari-exitsign.is-special small{color:#ffe4c0}
.safari-exitsign.is-visited{opacity:.7}
.safari-exitsign.is-visited .safari-exit-arrow{background:#a1a2a7}
.safari-exitsign:hover,.safari-exitsign:focus-visible{border-color:#ffe4c0;outline:none;transform:translate(-50%,-50%) scale(1.05)}
.safari-exitsign:disabled{opacity:.35;cursor:default;transform:translate(-50%,-50%)}
@keyframes safari-sign{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes safari-glow{0%,100%{box-shadow:0 0 0 1px #ffe4c044,0 0 14px #ffe4c044}50%{box-shadow:0 0 0 1px #ffe4c088,0 0 24px #ffe4c088}}

/* what's here */
.safari-act{position:absolute;padding:0;border:0;border-radius:16px;background:transparent;pointer-events:auto;cursor:pointer;font:inherit}
.safari-act:hover,.safari-act:focus-visible{background:#f4efe310;outline:2px dashed #f4efe355;outline-offset:2px}
.safari-act-label{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;padding:7px 14px;border-radius:999px;background:#ffe4c0;color:#1c1723;
  font-size:12px;font-weight:600;letter-spacing:.03em;box-shadow:0 0 0 2px #1c1723,0 6px 16px -4px #000c;animation:safari-hint 2.6s ease-in-out infinite}
.safari-act.is-pal .safari-act-label{background:#7aefec}
.safari-act.is-special .safari-act-label{background:#fbaec5}
.safari-act:disabled{cursor:default}.safari-act:disabled .safari-act-label{background:#2c2838;color:#a1a2a7;box-shadow:0 0 0 1px #dae7f133;animation:none}

/* walking */
.safari-walkbar{position:absolute;z-index:4;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:6px;padding:5px;border-radius:999px;
  background:#1c1723e0;border:1px solid #dae7f124;box-shadow:0 10px 26px -10px #000e}
.safari-walkbar[hidden]{display:none}
.safari-walk-btn{padding:9px 14px;border-radius:999px;border:1px solid transparent;background:#2c2838;color:#f4efe3;font:inherit;font-size:12px;white-space:nowrap;cursor:pointer;transition:background .15s ease}
.safari-walk-btn:disabled{opacity:.4;cursor:default}
.safari-walk-btn[aria-pressed="true"]{border-color:#ffe4c0;color:#ffe4c0}
.safari-walk-btn.is-home{color:#ffe4c0}
.safari-walk-btn.is-now{background:#ffe4c0;color:#1c1723;font-weight:600}
.safari-stage.is-explore .safari-foot{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 54px)}
#safari-gold span{color:#f1c593}
.safari-plate-tags i.is-shiny{color:#1c1723;background:#ffe4c0;border-color:#ffe4c0;font-weight:700}

/* the travelling merchant */
.safari-wares{display:flex;flex-direction:column;gap:6px;width:100%;max-width:440px}
.safari-ware{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#2c283880;border:1px solid #dae7f11f;color:#f4efe3;font:inherit;text-align:left;cursor:pointer}
.safari-ware:not(:disabled):hover{border-color:#ffe4c0}
.safari-ware:disabled{opacity:.5;cursor:default}
.safari-ware-icon{font-size:18px;color:#c9a0dc;width:22px;text-align:center}
.safari-ware-text{display:flex;flex-direction:column;gap:2px}.safari-ware-text b{font-weight:500;font-size:13px}.safari-ware-text small{font-size:11px;color:#a1a2a7;line-height:1.4}
.safari-ware em{font-style:normal;font-size:12px;color:#ffe4c0;white-space:nowrap}
.safari-ware.is-out em{color:#a1a2a7}

/* the map */
.safari-map{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));background:#121a47f4;animation:safari-card .3s ease-out}
.safari-map[hidden]{display:none}
.safari-map-head{display:flex;align-items:center;justify-content:space-between}
.safari-map-head .micro{margin:0;font-size:10px;letter-spacing:.2em;color:#ffe4c0}
.safari-map-canvas{flex:1;min-height:0;width:100%}
.safari-map-note{margin:6px auto 0;max-width:520px;font-size:12px;line-height:1.5;color:#dae7f1;text-align:center}
.safari-map-note span{display:block;font-size:10.5px;color:#a1a2a7;margin-top:3px}
@media(prefers-reduced-motion:reduce){.safari-exitsign,.safari-exitsign.is-special,.safari-act-label{animation:none}}
:root.reduced-motion .safari-exitsign,:root.reduced-motion .safari-exitsign.is-special,:root.reduced-motion .safari-act-label{animation:none}
@media(min-width:601px){
  .safari-exitsign{max-width:230px;padding:8px 13px 8px 8px;gap:9px}.safari-exitsign.is-R{padding:8px 8px 8px 13px}
  .safari-exit-arrow{width:28px;height:28px;font-size:16px}
  .safari-exit-text b{font-size:13px}.safari-exit-text small{font-size:11px}
  .safari-act-label{font-size:13px;padding:8px 16px}
  .safari-walk-btn{font-size:13px;padding:10px 16px}
}
.safari-stage.is-explore .safari-say{top:19%}