/* 4.1: readable rarity, explicit coats, and a chest page that keeps its controls in reach. */
#app{height:100svh;min-height:0;display:flex;flex-direction:column}
.topbar{flex:none}
#home{flex:1;min-height:0;max-height:none}
.home-footer{flex:none}
.chest-page #home .stage{display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#1e3b64 transparent}
.chest-page .stage-content{flex:none;margin:auto 0;padding:10px 6px 14px}
.chest-page .pet-world{height:clamp(90px,18svh,166px)}
.chest-page .pet-target,.chest-page #pet-canvas{width:144px;height:144px}
.chest-page .pet-glow{top:auto;height:130px}
.chest-page .gesture-hint,.chest-page .ground,.chest-page .chest-info>.micro{display:none}
.chest-page .chest-info{padding:0;min-height:0}
.chest-page .chest-info h1{font-size:18px;letter-spacing:.14em;line-height:1.5;margin:0 0 5px}
.chest-page #chest-countdown{display:flex;flex-direction:column;gap:3px;line-height:1.5;min-height:0;font-size:12px}
#chest-countdown small{color:#86878f;font-size:11px}
.chest-page .chest-family{display:block;min-height:0;margin:7px 0 0;font-size:10px;line-height:1.5;color:#7497b4}
.chest-family:empty{display:none!important}
.chest-family-choice{display:block;margin:6px auto 0;min-height:40px;padding:6px 15px;border:1px solid #dad9813d;border-radius:20px;font-size:11px;color:#e5e0d5;background:#85cd7409}
.chest-page .chest-info .primary-button{min-height:44px;margin:10px auto 2px;background:#e5e0d5;color:#1c1723;box-shadow:0 0 24px #e5e0d50f}
.chest-page .chest-info .open-all{min-height:36px;margin:0 auto;font-size:11px}
.chest-page .chest-tiers{margin-top:9px;max-width:340px}
.chest-page .chest-tier{grid-template-columns:auto 1fr;grid-template-areas:'icon name' 'icon line';padding:7px 8px;min-height:48px;gap:2px 6px}
.chest-page .chest-tier-name{font-size:11px;overflow:visible;text-overflow:clip}
.chest-page .chest-tier-line{display:block;font-size:9px}
.chest-page .chest-tier-cost{display:none}
.chest-page .chest-tier-icon{width:24px;height:24px}
.chest-page .chest-tier-note{max-width:310px;margin:7px auto 0;font-size:9px;line-height:1.5}
#home #choose-chest-family{touch-action:manipulation}
.chest-family-dialog{width:min(430px,calc(100vw - 24px));max-height:calc(100dvh - 32px);border-radius:22px;padding:22px;border-color:#a9c4da40;background:#1c1723;overflow:hidden}
.chest-family-dialog[open]{display:flex;flex-direction:column}
.chest-family-dialog .panel-header{flex:none;align-items:flex-start}
.chest-family-dialog h2{font-size:20px;letter-spacing:-.03em}
.chest-family-dialog .micro{font-size:9px;color:#a9c4da}
.family-sheet-note{flex:none;font-size:11px;color:#7497b4;line-height:1.8;margin:14px 0}
.chest-family-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow-y:auto;min-height:0;overscroll-behavior:contain;padding:3px;scrollbar-width:thin}
.family-choice{display:flex;align-items:center;gap:7px;min-height:60px;text-align:left;border:1px solid #a9c4da20;border-radius:10px;padding:4px 7px;background:#1c1723;font-size:11px}
.family-choice canvas{width:40px;height:40px;flex:none}
.family-choice[aria-pressed=true]{border-color:#a9c4da;background:#1c1723;color:#dae7f1}
.chest-family-dialog footer{flex:none;padding-top:14px;background:#1c1723}
#chest-family-selection{font-size:10px;color:#a9c4da;line-height:1.5;text-align:center;margin:0 0 10px;min-height:15px}
#confirm-chest-family{width:100%;min-height:46px;font-size:12px;background:#e5e0d5;color:#1c1723}
.collection-tools{display:flex;align-items:flex-end;gap:10px;margin:18px 0 14px}
.collection-tools .collection-search{flex:1;width:45%;min-width:0;margin:0;height:44px}
.collection-sort-label{display:flex;flex-direction:column;gap:6px;color:#7497b4;font-size:10px;width:134px;flex:none}
#collection-sort{width:100%;height:44px;margin:0;border-color:#a9c4da29;background:#1c1723;color:#dae7f1;padding:0 8px;font-size:11px}
.creature-card{height:220px;padding:23px 7px 10px;border-color:color-mix(in srgb,var(--card-color) 28%,#2c2838);background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--card-color) 7%,transparent),transparent 64%),#1c1723}
.creature-card:after{position:absolute;inset:auto 24% 0;height:2px;content:'';background:var(--card-color);opacity:.45;border-radius:4px;pointer-events:none}
.creature-card.undiscovered{border-color:#2c2838;background:#1c1723}
.creature-card.shiny-card{border-color:#a0845366;background:radial-gradient(ellipse at 50% 35%,#f1c59313,transparent 70%),#1c1723}
.card-number{font-size:9px;top:10px;left:9px;color:#7497b4}
.card-level{position:absolute;top:9px;right:8px;font-size:9px;color:#a9c4da}
.creature-card .card-name{font-size:11px;letter-spacing:0;white-space:normal;overflow:visible;line-height:1.3;min-height:28px;margin-top:0;text-align:center;display:flex;align-items:center}
.card-coat{font-size:9px;color:#7497b4;line-height:1.5;margin:3px 0 7px}
.rarity-label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--rarity-color);min-height:28px;max-width:100%}
.rarity-label b{font-weight:500;font-size:10px;text-align:center;line-height:1.25}
.rarity-dots{display:flex;gap:3px;align-items:center}
.rarity-dots i{width:4px;height:4px;background:#1e3b64;border-radius:1px}
.rarity-dots .filled{background:var(--rarity-color);box-shadow:0 0 4px color-mix(in srgb,var(--rarity-color) 20%,transparent)}
.creature-card .card-footer{margin-top:9px;padding:0;min-height:14px;justify-content:space-between;gap:3px}
.creature-card .card-series{font-size:9px;color:#7497b4;letter-spacing:.02em}
.creature-card .card-class{font-size:9px;min-height:14px;padding:0 3px;border:0;background:none}
.creature-card.undiscovered .rarity-label{opacity:.7}
.creature-card.undiscovered:after{opacity:.18}
.detail-coat-label{display:block;margin:9px 0;color:#a9c4da;font-size:12px}
.variant-switch{border:1px solid #a9c4da26}
.variant-switch button.active{box-shadow:inset 0 0 0 1px #a9c4da70;background:#1c1723;color:#dae7f1}
.variant-switch button.active:before{content:'✓ ';font-size:10px}
.variant-switch button.active.shiny{box-shadow:inset 0 0 0 1px #f1c59399}
.wish-pet{min-height:182px;padding:10px 5px 13px;border-color:color-mix(in srgb,var(--wish-color) 24%,#1c1723);background:radial-gradient(ellipse at 50% 32%,color-mix(in srgb,var(--wish-color) 9%,transparent),transparent 65%),#1c1723}
.wish-pet>span:not(.rarity-label){font-size:11px;min-height:28px;line-height:1.3;display:flex;align-items:center;margin-top:0}
.wish-pet .rarity-label{margin:6px 0 0;color:var(--rarity-color)}
.wish-pet small{font-size:9px;color:#7497b4;margin-top:9px}
.wish-card>canvas{margin:0 auto}
.wish-card .rarity-label{margin:0 auto 14px;gap:7px}
.wish-card .rarity-label b{font-size:12px}
.wish-card .rarity-dots i{width:5px;height:5px}
.wish-how summary{min-height:44px;display:flex;align-items:center}
.wish-how summary:before{content:'▸';margin-right:7px}.wish-how[open] summary:before{content:'▾'}
.wish-how .wish-active{color:#a9c4da}
#play-night .play-card-text>b{font-size:17px;color:#dae7f1}
.play-ladder-progress{display:flex;justify-content:space-between;gap:8px;margin:13px 0 7px;font-size:10px;color:#a9c4da}
.play-ladder-progress b{font-weight:500;color:#dae7f1}
.ladder-reward-track{height:4px;border-radius:5px;background:#a9c4da10;overflow:hidden}
.ladder-reward-track i{display:block;height:100%;background:#a9c4da}
@media(max-height:740px){
 .chest-page .pet-world{height:82px}.chest-page .pet-target,.chest-page #pet-canvas{width:112px;height:112px}
 .chest-page .stage-content{padding-top:6px;padding-bottom:8px}.chest-page .chest-info h1{font-size:16px}
 .chest-page .chest-family{font-size:9px;margin-top:4px}.chest-page .chest-family-choice{min-height:36px;margin-top:3px}
 .chest-page .chest-tier-note{display:none}.chest-page .chest-info .primary-button{margin-top:6px}
 .chest-page .chest-tiers{margin-top:4px}.chest-page .chest-info .open-all{min-height:32px}
}
@media(max-width:600px){
 .chest-family-dialog{max-height:90dvh;margin:auto 0 0;inset:0;width:100%;max-width:100%;border-radius:22px 22px 0 0;padding:22px 18px max(20px,env(safe-area-inset-bottom))}
 .creature-card{height:218px}.creature-card .rarity-label b,.wish-pet .rarity-label b{font-size:9px}
}
@media(max-width:360px){.collection-tools{gap:7px}.collection-sort-label{width:123px}.creature-card{padding-left:5px;padding-right:5px}.card-level{right:5px}.wish-grid{gap:6px}.wish-pet>span:not(.rarity-label){font-size:10px}}

#play-night .primary-button{font-size:12px;gap:8px;padding:0 12px;white-space:nowrap}
.wish-empty{padding:16px 18px}
.wish-empty .wish-star{font-size:27px;margin:10px 0 7px}
.wish-empty h3{font-size:19px;margin:5px 0 8px}
.wish-empty .wish-line{font-size:11px;margin:8px auto 4px}
.wish-empty>.micro{display:none}

/* 4.2: center by layout, not the old fixed -96px offset at every canvas size. */
.chest-page .pet-world{margin-inline:auto;isolation:isolate}
.chest-page .pet-target{position:relative;inset:auto;left:auto;margin:0;padding:0;display:grid;place-items:center;justify-self:center;align-self:center}
.chest-page .pet-glow{left:50%;transform:translateX(-50%);pointer-events:none}
.chest-page .journey-frame{display:none}
.chest-page #chest-info .drop-rates-link{display:block;margin:0 auto;min-height:36px;font-size:11px;color:#a9c4da}
.chest-page #chest-info #open-chest{display:flex;margin-top:4px}
.chest-rates-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 auto;max-width:420px}
.chest-rates-links .text-button{min-height:40px;font-size:10px;color:#a9c4da;padding:5px}
.chest-page #chest-tier-note{display:none}
.chest-odds-dialog{width:min(460px,calc(100vw - 24px));max-width:calc(100vw - 24px);text-align:left}
.chest-odds-dialog .panel-header{margin-bottom:16px}
.odds-label{display:block;color:var(--muted);font-size:11px;margin:14px 0 7px}
.chest-odds-dialog select{width:100%;min-height:44px;font-size:13px;padding:10px 12px;border-radius:12px;background:#1c1723;border:1px solid #1e3b64;color:var(--white)}
.odds-note,.odds-footnote{font-size:11px;line-height:1.8;color:var(--muted);margin:15px 0}
.odds-table{width:100%;border-collapse:collapse;font-size:11px;font-variant-numeric:tabular-nums}
.odds-table caption{text-align:left;font-size:11px;color:var(--white);padding:8px 0}
.odds-table th,.odds-table td{padding:11px 0;border-bottom:1px solid #ffffff09;text-align:left;font-weight:400}
.odds-table td,.odds-table thead th:last-child{text-align:right;white-space:nowrap;padding-left:12px}
.odds-table thead{font-size:10px;color:var(--dim)}
.odds-shiny{font-size:11px;line-height:1.8;color:#f1c593;padding:14px 12px;background:#f1c59309;border:1px solid #f1c5931a;border-radius:12px;margin-top:16px}
.odds-pets{border-top:1px solid #ffffff0a;font-size:11px;margin-top:16px}
.odds-pets summary{padding:16px 0;cursor:pointer;color:var(--white)}
.odds-pet{display:flex;justify-content:space-between;gap:12px;line-height:1.8;margin:8px 0;font-variant-numeric:tabular-nums}
.odds-pet span:last-child{white-space:nowrap;color:var(--muted)}
#family-drop-rates{min-height:40px;font-size:11px;color:#a9c4da;margin-bottom:4px}
#play-scuffle .battle-modes{display:grid;grid-template-columns:1fr;gap:0}
.battle-mode{padding:14px 0 6px;border-top:1px solid #ffffff0b}
.battle-mode+.battle-mode{margin-top:10px}
.battle-mode>b{display:block;font-size:12px;color:#a9c4da;font-weight:400}
.battle-mode>p{font-size:11px;line-height:1.8;color:var(--muted);margin:8px 0 12px}
.battle-mode button{width:100%;font-size:12px;white-space:normal;min-height:44px}
.code-entry-label{font-size:11px;line-height:1.7;color:var(--muted);margin:14px 0 6px}
.shiny-battle-tag{display:block;font-size:9px;line-height:1.6;color:#f1c593;margin-top:4px}
.shiny-battle-perk{font-size:11px;line-height:1.8;color:#f1c593;background:#f1c59308;border:1px solid #f1c59316;border-radius:12px;padding:12px;margin:14px auto;max-width:320px}
@media(max-width:360px){.chest-odds-dialog{padding:20px}.odds-table{font-size:10px}.battle-mode>p{font-size:11px}}

/* What's new: one card per release. */
.news-dialog{max-width:380px;padding:26px 24px}
.news-dialog h2{margin:4px 0 12px;font-size:19px;line-height:1.4}
.news-lines{margin:0 0 16px;padding:0;list-style:none;text-align:left;display:flex;flex-direction:column;gap:10px}
.news-lines li{font-size:13px;line-height:1.7;color:#a9c4da;padding-left:16px;position:relative}
.news-lines li::before{content:'·';position:absolute;left:4px;color:#e5e0d5}
.news-dialog .primary-button{width:100%;margin:0}

/* A new build is ready. */
.update-bar{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%,14px);
  z-index:40;width:min(400px,calc(100vw - 20px));display:flex;align-items:center;gap:10px;
  padding:12px 14px;border:1px solid #403d51;border-radius:14px;background:#1c1723f2;
  box-shadow:0 14px 40px #000a;opacity:0;transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.update-bar.is-in{opacity:1;transform:translate(-50%,0)}
.update-bar p{flex:1;margin:0;font-size:13px;color:#e5e0d5}
.update-bar button{margin:0;min-height:38px;padding:0 14px;width:auto;font-size:13px;flex:none}
.update-bar .text-button{padding:0 6px;color:#a1a2a7}
.install-block{margin-top:14px;padding:12px;border:1px solid #2c2838;border-radius:12px;background:#1c1723}
.install-block .micro{margin-bottom:4px}
.install-block .account-line{font-size:12px;line-height:1.7;margin-bottom:8px}
.install-block button{width:100%;margin:0}

/* Notifications: what you want to hear about. */
.notify-block{margin-top:14px;padding:12px;border:1px solid #2c2838;border-radius:12px;background:#1c1723}
.notify-block .micro{margin-bottom:4px}
.notify-block .account-line{font-size:12px;line-height:1.7;margin-bottom:8px}
.notify-block button{width:100%;margin:8px 0 0}
.notify-kinds{display:flex;flex-direction:column;gap:2px}
.notify-row{display:flex;align-items:flex-start;gap:10px;padding:8px 2px;cursor:pointer}
.notify-row input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:#e5e0d5}
.notify-row span{display:flex;flex-direction:column;gap:2px}
.notify-row b{font-weight:500;font-size:13px;color:#e5e0d5}
.notify-row i{font-style:normal;font-size:11px;line-height:1.5;color:#86878f}

/* The invitation to turn notifications on. */
.notify-ask{max-width:370px;padding:26px 24px;text-align:center}
.notify-ask h2{margin:4px 0 12px;font-size:19px;line-height:1.4}
.notify-ask-list{margin:0 0 12px;padding:0;list-style:none;text-align:left;display:flex;flex-direction:column;gap:9px}
.notify-ask-list li{font-size:13px;line-height:1.6;color:#a9c4da;padding-left:16px;position:relative}
.notify-ask-list li::before{content:'·';position:absolute;left:4px;color:#e5e0d5}
.notify-ask .scuffle-help{text-align:left;margin-bottom:14px}
.notify-ask .primary-button{width:100%;margin:0}
.notify-ask .text-button{width:100%;margin-top:8px}
/* Whether notifications are on, at a glance. */
.notify-block[data-state="on"]{border-color:#387c47}
.notify-block[data-state="on"] .micro::after{content:' · ON';color:#85cd74}
.notify-block[data-state="off"] .micro::after{content:' · OFF';color:#86878f}

/* ---- The new shape of things -----------------------------------------------------------------
   MISSIONS reads as status, beside the dust and your face, rather than competing with the five
   activities at the bottom. The market gets its own door on the home screen: a low-frequency
   destination, so it sits in the hardest place to reach on purpose. */
.missions-button{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;
  color:var(--muted);font-size:10px;letter-spacing:.1em;padding:6px 0;min-height:38px;white-space:nowrap}
.missions-button span:first-child{font-weight:500}
/* The bar carries four things on a 390px screen, so nothing may grow or wrap. */
.topbar{gap:8px;flex-wrap:nowrap}
.wordmark{flex:0 0 auto;white-space:nowrap}
.wordmark .edition{display:none}
.missions-button{flex:0 1 auto;margin-left:auto}
.top-actions{flex:0 0 auto;gap:6px}
.dust-button{white-space:nowrap;padding:0 2px}
.guide-button{display:none}   /* the guide still lives in your profile */
@media(max-width:380px){.wordmark{font-size:13px;letter-spacing:.12em}.missions-button span:first-child{display:none}}
.missions-count{display:inline-grid;place-items:center;min-width:30px;height:18px;padding:0 6px;
  border:1px solid var(--line);border-radius:9px;font-size:10px;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;color:var(--white);background:rgba(255,255,255,.04)}
.missions-button[data-state="ready"] .missions-count{background:var(--accent);color:#1c1723;border-color:var(--accent)}
.topbar{gap:10px}

.home-strip{display:flex;align-items:stretch;gap:8px;margin:0 0 2px}
.home-strip .journal-home{flex:1;min-width:0}
.market-button{flex:0 0 auto;width:62px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.04);color:var(--white);display:grid;place-items:center;position:relative}
.market-button:hover{background:rgba(255,255,255,.05)}
.market-badge{position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2px #1c1723}
/* Four things on one bar. The profile keeps its face but drops the word, which is the cheapest
   30px on the screen and costs nothing: nobody needs telling that their own avatar is their profile. */
.topbar{padding-left:16px;padding-right:16px}
#settings-button #avatar-name{display:none}
#settings-button{padding:5px 8px;gap:0}

/* Event pals: marked in the collection whether or not you have one, so a permanently blank card
   reads as "you had to be there" rather than as something you have simply not found yet. */
.creature-card .card-event{position:absolute;left:8px;bottom:8px;font-size:8px;letter-spacing:.14em;
  padding:2px 6px;border-radius:6px;background:rgba(241,197,147,.16);color:#f1c593;border:1px solid rgba(241,197,147,.3)}
.creature-card.event-card{border-color:rgba(241,197,147,.3)}
.creature-card.event-card.undiscovered{border-style:dashed}

/* ---- Events ----------------------------------------------------------------------------------
   A banner only while something is on, and a screen that is mostly a list of things to do. */
.event-banner{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 8px;padding:10px 14px;
  border:1px solid rgba(241,197,147,.34);border-radius:14px;background:rgba(241,197,147,.07);
  color:var(--white);text-align:left}
.event-banner .micro{color:#f1c593;margin:0}
#event-banner-name{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.event-banner-left{font-size:11px;color:var(--muted);white-space:nowrap}
.event-banner-badge{padding:2px 8px;border-radius:9px;background:#f1c593;color:#1c1723;font-size:10px;letter-spacing:.02em}

.event-tagline{margin:0 0 4px;font-size:13px;line-height:1.7;color:var(--white)}
.event-left{margin:0 0 14px;font-size:11px;letter-spacing:.14em;color:#f1c593}
.event-row{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.event-row.is-done{border-color:rgba(241,197,147,.4);background:rgba(241,197,147,.06)}
.event-row.is-taken{opacity:.55}
.event-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.event-text b{font-weight:500;font-size:13px}
.event-text span{font-size:11px;color:var(--muted)}
.event-row>button{flex:0 0 auto;width:auto;margin:0;min-height:38px;padding:0 14px;font-size:12px}
.event-pets{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin:8px 0 14px}
.event-pet{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;
  border:1px dashed rgba(241,197,147,.3);border-radius:12px;background:rgba(241,197,147,.04)}
.event-pet b{font-weight:500;font-size:11px;text-align:center}
.event-pet span{font-size:9px;letter-spacing:.06em;color:var(--muted)}

/* ---- The announcement board ------------------------------------------------------------------- */
.news-door{flex:0 0 auto;width:56px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.04);color:var(--white);display:grid;place-items:center;position:relative}
.news-door:hover{background:rgba(255,255,255,.07)}
.news-dot{position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2px #1c1723}
.board-post{padding:14px 0;border-bottom:1px solid var(--line)}
.board-post:last-child{border-bottom:0}
.board-post.is-pinned{border-left:2px solid var(--accent);padding-left:12px}
.board-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.board-kind{font-size:9px;letter-spacing:.18em;color:var(--accent)}
.board-when{font-size:10px;color:var(--muted)}
.board-post h3{margin:0 0 6px;font-size:16px;font-weight:500;line-height:1.4}
.board-post p{margin:0 0 8px;font-size:13px;line-height:1.75;color:var(--white);
  /* Posts are plain text. A single line break is meant, so bullet lists read as a list rather than
     running together into one sentence. */
  white-space:pre-line}
.board-post p:last-child{margin-bottom:0}

/* The day's event chest */
.event-chest{margin:12px 0 14px;padding:14px;border:1px solid rgba(241,197,147,.28);border-radius:14px;
  background:rgba(241,197,147,.05)}
.event-chest .micro{margin:0 0 8px;color:#f1c593}
.event-task{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;font-size:13px}
.event-task+.event-task{border-top:1px solid rgba(241,197,147,.14)}
.event-task b{font-weight:500;font-size:11px;color:var(--muted)}
.event-task.is-done b{color:#f1c593}
.event-task.is-done span{opacity:.6}
.event-chest .primary-button{width:100%;margin:10px 0 0}
.event-chest .scuffle-help{margin:8px 0 0}
.event-chest.is-taken{opacity:.5}
.event-chest+.event-chest{margin-top:-4px}
.event-open{width:100%;margin:6px 0 0}

/* Live trade rooms, in Social where trading belongs */
.friends-trade{margin:16px 0 4px;padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.friends-trade .friends-heading{margin:0 0 4px}
.friends-trade .friends-help{margin:0 0 10px}
.friends-trade .primary-button{width:100%;margin:0 0 8px}

/* ---- Marks -----------------------------------------------------------------------------------
   Every mark a pal can earn, with what it takes. The requirement used to sit in a tooltip, which
   a phone never shows, so nobody knew these existed or how to get them. */
.mark-list{margin:10px 0 14px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mark-row{display:flex;align-items:center;gap:11px;padding:10px 12px;background:rgba(255,255,255,.015)}
.mark-row+.mark-row{border-top:1px solid var(--line)}
.mark-row.is-earned{background:rgba(169,196,218,.07)}
.mark-sign{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;
  border:1px solid var(--line);font-style:normal;font-size:13px;color:var(--muted)}
.mark-row.is-earned .mark-sign{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.mark-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mark-text b{font-weight:500;font-size:12.5px;color:var(--muted)}
.mark-row.is-earned .mark-text b{color:var(--white)}
.mark-text span{font-size:10.5px;color:var(--muted);opacity:.8}
.mark-state{flex:0 0 auto;font-style:normal;font-size:10px;letter-spacing:.06em;color:var(--muted);
  font-variant-numeric:tabular-nums}
.mark-row.is-earned .mark-state{color:var(--accent)}
.mark-open{cursor:pointer;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.mark-open:hover{background:rgba(255,255,255,.07)}
.marks-intro{margin:0 0 14px;font-size:12.5px;line-height:1.7;color:var(--muted)}

/* A pal you have been given but not yet opened. */
.creature-card .card-new{position:absolute;right:8px;top:8px;font-size:8px;letter-spacing:.14em;
  padding:2px 6px;border-radius:6px;background:var(--accent);color:#1c1723}
.creature-card.is-new{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.creature-card.is-new .card-level{display:none}

/* Past sales: a price guide, not a ledger. */
.sale-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.sale-row:last-child{border-bottom:0}
.sale-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sale-text b{font-weight:500;font-size:13px}
.sale-text span{font-size:11px;color:var(--muted)}
.sale-price{flex:0 0 auto;font-style:normal;font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums}

/* Enough spares of this one to make a shiny of it. */
.creature-card .card-fuse{position:absolute;right:8px;top:8px;font-size:8px;letter-spacing:.14em;
  padding:2px 6px;border-radius:6px;background:rgba(169,196,218,.2);color:#a9c4da;
  border:1px solid rgba(169,196,218,.45)}
.creature-card.can-fuse{border-color:rgba(169,196,218,.35)}

/* Folding spares into a coat. */
.fuse-box{margin:12px 0 4px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.02);text-align:left}
.fuse-box.is-ready{border-color:rgba(169,196,218,.4);background:rgba(169,196,218,.07)}
.fuse-box .micro{margin:0 0 6px;color:var(--muted)}
.fuse-box.is-ready .micro{color:#a9c4da}
.fuse-line{margin:0;font-size:13px;line-height:1.6}
.fuse-box .primary-button{width:100%;margin:10px 0 0}
.fuse-box .scuffle-help{margin:6px 0 0}
/* Bullet lines hang, so a wrapped one lines up under its own text rather than the dot. */
.board-post p{padding-left:0}
.board-post .board-list{margin:0 0 8px;padding:0;list-style:none}
.board-post .board-list li{position:relative;padding-left:16px;font-size:13px;line-height:1.7;margin-bottom:3px}
.board-post .board-list li::before{content:'·';position:absolute;left:4px;color:var(--muted)}

/* ---- The chest screen ------------------------------------------------------------------------
   Swiping across to the chest used to leave the event banner, the field journal, the megaphone and
   the cart above it, which made the page taller than the screen and let it scroll. The chest is a
   thing you look at, not a page you read, so everything above it steps out of the way. */
.chest-page #event-banner,
.chest-page .home-strip{display:none}
.chest-page #home{padding-top:6px}

/* ---- The Fusing tab --------------------------------------------------------------------------
   What folding costs, said once at the top, so nobody has to open a pal to find out. */
.fusing-note{margin:0 0 14px;padding:13px 14px;border:1px solid rgba(169,196,218,.3);border-radius:12px;
  background:rgba(169,196,218,.06)}
.fusing-note .micro{margin:0 0 6px;color:#a9c4da}
.fusing-line{margin:0 0 10px;font-size:12.5px;line-height:1.65;color:var(--white)}
.fusing-costs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.fusing-cost{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px;
  border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.02)}
.fusing-cost b{font-size:15px;font-weight:500;color:var(--rarity-color,var(--white))}
.fusing-cost span{font-size:7.5px;letter-spacing:.04em;color:var(--muted);text-align:center;line-height:1.25}
.creature-card .card-togo{position:absolute;right:8px;top:8px;font-size:8px;letter-spacing:.08em;
  padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.07);color:var(--muted)}

/* The level sits top right, and so do the NEW, FUSE and "n more" marks. Only one of them can have
   that corner, and on a card that is shouting about something the shout wins. */
.creature-card.is-new .card-level,
.creature-card.can-fuse .card-level,
.creature-card:has(.card-togo) .card-level{display:none}

/* ---- The night run ---------------------------------------------------------------------------
   The quest scene, with the hop under your thumb. */
.run-hud{margin:0 0 8px;font-size:26px;font-weight:500;letter-spacing:.04em;color:var(--white);
  font-variant-numeric:tabular-nums;text-align:center}
.run-canvas{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:336/204;
  border:1px solid var(--line);border-radius:14px;background:#1c1723;touch-action:none;
  image-rendering:pixelated;cursor:pointer}
.run-foot{margin:10px 0 4px;text-align:center;font-size:13px;line-height:1.6;color:var(--white);min-height:44px}
.run-foot span{color:var(--muted);font-size:12px}
.run-foot b{font-weight:500}
/* Somewhere for a thumb that is not on top of the pal you are watching. */
.run-jump{display:block;width:100%;margin:6px 0 0;min-height:76px;border-radius:18px;
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));
  background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--white);
  font-size:19px;letter-spacing:.16em;font-weight:500;touch-action:none;user-select:none;cursor:pointer}
.run-jump:active{background:color-mix(in srgb,var(--accent) 30%,transparent);transform:translateY(1px)}

/* Choosing who runs and where. */
.run-setup .micro{margin:0 0 8px;color:var(--muted)}
.run-pets{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.run-pet{width:62px;height:62px;display:grid;place-items:center;padding:0;
  border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02);cursor:pointer}
.run-pet.is-on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.run-biomes{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
.run-biome{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  padding:11px 14px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.02);cursor:pointer}
.run-biome.is-on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.run-biome b{font-weight:500;font-size:14px;color:var(--white)}
.run-biome span{font-size:11.5px;color:var(--muted)}
#run-start{width:100%;margin:0}
#run-back{width:100%;margin:18px 0 0;transition:opacity .2s}
#run-back.is-away{visibility:hidden;opacity:0;pointer-events:none}

.run-vitals{text-align:center;color:#a9c4da;font-size:13px;min-height:20px;margin:2px 0 12px}#run-progress{display:block;width:100%;height:5px;border:0;border-radius:6px;overflow:hidden;accent-color:#a9c4da;background:#1c1723}#run-progress::-webkit-progress-bar{background:#1c1723}#run-progress::-webkit-progress-value{background:linear-gradient(90deg,#55bac5,#a9c4da)}#run-goal{text-align:center;font-size:11px;margin:8px 0 14px;color:var(--muted)}.run-canvas,.run-jump{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.run-jump{background:linear-gradient(145deg,#1e3b64,#1c1723);border-color:#7497b4;transition:transform 140ms,background 140ms}.run-dialog{max-height:calc(100dvh - 24px);overflow-y:auto}@media(prefers-reduced-motion:reduce){.run-jump{transition:none}}

/* Night Run v102: persistent readable lives and event-driven impact feedback. */
#run-hearts{display:flex;gap:9px}.run-heart{display:block;width:29px;height:29px;position:relative;color:#fbaec5}.run-heart span{position:absolute;inset:0}.run-heart svg{width:100%;height:100%;fill:currentColor;shape-rendering:crispEdges}.heart-left,.heart-right{visibility:hidden}.heart-left{clip-path:polygon(0 0,52% 0,42% 35%,56% 56%,46% 100%,0 100%)}.heart-right{clip-path:polygon(52% 0,100% 0,100% 100%,46% 100%,56% 56%,42% 35%)}.run-heart.empty .heart-base{color:#403d51}.run-heart.breaking .heart-left,.run-heart.breaking .heart-right{visibility:visible;animation:heart-split-left 520ms cubic-bezier(.2,.7,.3,1) forwards}.run-heart.breaking .heart-right{animation-name:heart-split-right}
#run-life-count{font:12px/1.4 monospace;color:#e5e0d5}#run-loot{text-align:center;font-size:12px;color:#f1c593;min-height:18px;margin:0 0 12px}.run-vitals{margin:0 0 5px}#run-status{height:22px;text-align:center;font-size:11px;letter-spacing:.07em;color:#f1c593;margin:2px 0 6px}
@keyframes heart-split-left{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(-13px,15px) rotate(-30deg);opacity:0}}@keyframes heart-split-right{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(13px,15px) rotate(30deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.run-heart.breaking .heart-left,.run-heart.breaking .heart-right{animation:none;visibility:hidden}}
@media(max-height:740px){.run-foot{min-height:36px;margin:6px 0}.run-jump{min-height:60px}#run-goal{margin:5px 0}.run-dialog .panel-header{margin-bottom:8px}}

/* ---- What you win -----------------------------------------------------------------------------
   Prizes said as a short list with the numbers on the left, rather than buried in a paragraph. */
.prize-board{margin:14px 0 4px;padding:13px 15px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.02)}
.prize-board .micro{margin:0 0 9px;color:var(--muted)}
.prize-row{display:flex;align-items:baseline;gap:12px;padding:6px 0;font-size:13px}
.prize-row+.prize-row{border-top:1px solid var(--line)}
.prize-row b{flex:0 0 74px;font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums}
.prize-row span{flex:1;color:var(--white)}
.prize-row.is-soft b{color:var(--muted)}
.prize-row.is-had{opacity:.45}
.prize-row.is-had span{color:var(--muted)}
.prize-note{margin:10px 0 0;font-size:11.5px;color:var(--muted);line-height:1.6}

/* ---- Quests, as three doors -------------------------------------------------------------------
   Three small tabs asked you to guess what each held. These say it. */
.quest-home{display:flex;flex-direction:column;gap:11px;margin:4px 0 6px}
.quest-door{display:flex;align-items:center;gap:13px;text-align:left;padding:14px;
  border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02);cursor:pointer;width:100%}
.quest-door:hover{background:rgba(255,255,255,.05);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.quest-door-art{flex:0 0 60px;width:60px;height:60px;image-rendering:pixelated}
.quest-door-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.quest-door-text b{font-weight:500;font-size:16px;color:var(--white)}
.quest-door-text span{font-size:12px;line-height:1.55;color:var(--muted)}
.quest-door-prize{font-style:normal;font-size:11px;letter-spacing:.03em;color:var(--accent);margin-top:2px}
.quest-door-go{flex:0 0 auto;font-style:normal;font-size:22px;color:var(--muted)}
#quest-back{width:auto;margin:0 0 10px;padding:0}
.run-biome-prize{font-style:normal;font-size:11px;color:var(--accent);margin-top:3px}
.run-biome.is-done{opacity:.55}
.run-biome.is-done .run-biome-prize{color:var(--muted)}

/* The sort control sat unaligned with the search box beside it. */
.collection-sort-label{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.collection-sort-label select{min-height:44px;padding:0 30px 0 12px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--white);font-size:13px}
.collection-tools .collection-search{min-height:44px}



/* The sort control lives inside a label, and the global rule outlines the whole label with a five
   pixel offset, which drew a big box around the word "Sort" and the menu together. Outline the
   control itself instead, the way the search box beside it already is. */
.collection-sort-label:focus-within{outline:none}
.collection-sort-label select:focus-visible{outline:2px solid var(--accent);outline-offset:0;border-radius:12px}
.quest-door-prize.is-soon{color:var(--muted)}
.quest-door.is-soon{opacity:.72}
.quest-door.is-soon:hover{opacity:.85}

/* ---- The 2v2 arena ----------------------------------------------------------------------------
   Same shapes as the night run's screens, so the two read as siblings. */
#duo-room{display:flex;flex-direction:column;gap:9px;margin:14px 0 0}
.duo-code{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px;
  border:1px solid var(--accent);border-radius:14px;
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
.duo-code b{font-size:26px;letter-spacing:.3em;font-weight:500;color:var(--white)}
.duo-code span{font-size:11px;color:var(--muted)}
.duo-partner{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--line);
  border-radius:13px;background:rgba(255,255,255,.02);font-size:13px;color:var(--white)}
.duo-partner.is-waiting{color:var(--muted)}
#duo-next:disabled{opacity:.45}
#duo-leave{width:100%;margin:8px 0 0}

/* The arena canvas: a touch taller than the old one, and framed like a window rather than a box. */
.run-pet{position:relative}
.run-pet-lv{position:absolute;bottom:2px;right:4px;font-style:normal;font-size:8px;
  letter-spacing:.02em;color:var(--muted)}
.run-pet.is-on .run-pet-lv{color:var(--accent)}
#duo-actions{display:flex;gap:14px;justify-content:center;margin:2px 0 6px;min-height:22px}
#duo-caption b{font-weight:500}
#duo-caption span{color:var(--muted);font-size:12px}

/* The pair ladder's map: the next dozen stages, and what each pays. */
.duo-map{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:10px 0 0}
.duo-map-cell{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 2px;
  border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.02)}
.duo-map-cell b{font-size:13px;font-weight:500;color:var(--white);font-variant-numeric:tabular-nums}
.duo-map-cell span{font-size:9px;color:var(--muted)}
.duo-map-cell.is-now{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.duo-map-cell.is-boss{border-color:color-mix(in srgb,#fbaec5 45%,var(--line))}
.duo-map-cell.is-boss span{color:#fbaec5}
#duo-map{width:auto;margin:6px 0 0;padding:0}
.scuffle-chip.is-down{opacity:.34}
.scuffle-chip[data-who]::after{content:attr(data-who);display:block;font-size:7px;
  letter-spacing:.04em;color:var(--muted);text-align:center;margin-top:1px}

/* Trade, Battle now and Battle later sit in one row, but only the last was a primary button, so it
   came out taller and wider than its neighbours. Keep the emphasis, match the size. */
.friend-actions button,
.friend-actions button.primary-button{flex:1 1 0;min-width:0;padding:9px 6px;font-size:11px;
  min-height:38px;line-height:1.2;border-radius:11px}

/* ---- The panel titles were clipped ------------------------------------------------------------
   On a phone with a notch the blurred top edge cut through the micro label above each panel title.
   It only ever needed a few pixels: the first attempt pushed the whole panel down the screen and
   left a gap above it, which was worse than the problem. Nudge the header, leave the panel alone. */
.panel-header{padding-top:6px}
.panel-header .micro{line-height:1.5}
.event-prize{display:block;font-style:normal;font-size:11px;letter-spacing:.02em;
  color:var(--accent);margin-top:3px}
.event-row.is-taken .event-prize{color:var(--muted)}

/* The weekly quests, and what they have paid so far. */
.event-week-head{margin:18px 0 10px;padding:12px 14px;border:1px solid var(--line);
  border-radius:13px;background:rgba(255,255,255,.02)}
.event-week-head .micro{margin:0 0 5px;color:var(--accent)}
.event-week-note{margin:0;font-size:13px;color:var(--white);line-height:1.6}
.event-week-sub{margin:4px 0 0;font-size:11px;color:var(--muted)}

/* What you are actually holding, when it is more than one kind. */
.chest-held{display:block;margin-top:6px;font-size:10.5px;letter-spacing:.02em;color:var(--muted);
  line-height:1.6}
/* Chest shards toward the next Night Chest (shards.js). */
#chest-countdown small.chest-shards{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:5px;font-size:10.5px;letter-spacing:.02em}
.shard-pips{display:inline-flex;gap:3px}
.shard-pips i{width:7px;height:9px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:rgba(169,196,218,.28)}
.shard-pips i.on{background:#c9a0dc;box-shadow:0 0 6px rgba(201,160,220,.8)}

/* ---- Live chat in a 2v2 room ------------------------------------------------------------------ */
.duo-chat{margin:14px 0 0;padding:12px 13px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.02)}
.duo-chat .micro{margin:0 0 8px;color:var(--muted)}
.duo-chat-log{max-height:148px;overflow-y:auto;overscroll-behavior:contain;display:flex;
  flex-direction:column;gap:5px;margin-bottom:9px}
.duo-chat-line{margin:0;font-size:13px;line-height:1.5;color:var(--white);word-break:break-word}
.duo-chat-line b{font-weight:500;color:#f1c593;margin-right:2px}
.duo-chat-line.is-mine b{color:var(--accent)}
.duo-chat-empty{margin:0;font-size:12px;color:var(--muted)}
.duo-chat-row{display:flex;gap:7px}
.duo-chat-row input{flex:1;min-width:0;padding:9px 11px;border-radius:11px;font-size:13px;
  border:1px solid var(--line);background:#1c1723;color:var(--white)}
.duo-chat-row button{flex:0 0 auto;padding:9px 15px;font-size:12px}
.duo-chat-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.duo-quick{padding:6px 11px;font-size:11px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--muted)}
.duo-quick:hover{color:var(--white);border-color:var(--accent)}

/* The chat row. .secondary-button is width:100% everywhere, which squeezed the text box to a sliver
   and pushed Send off the edge. */
#duo-chat .duo-chat-row{display:flex;align-items:stretch;gap:7px}
#duo-chat .duo-chat-row input{flex:1 1 auto;width:auto;min-width:0;min-height:40px}
#duo-chat .duo-chat-row button{flex:0 0 auto;width:auto;min-width:0;min-height:40px;margin:0;padding:0 16px}
/* During a fight the chat sits under the arena, so keep it short. */
#duo-play:not([hidden]) ~ #duo-chat .duo-chat-log{max-height:96px}

/* When a pal last arrived, on the Recent sort. */
.creature-card .card-when{display:block;margin-top:3px;font-size:9.5px;letter-spacing:.04em;color:var(--muted)}

/* ---- Swapping a team member ----------------------------------------------------------------- */
.scuffle-slot{position:relative}
.scuffle-slot.swapping{outline:2px dashed var(--accent);outline-offset:3px;
  box-shadow:0 0 0 1px rgba(169,196,218,.18),0 0 22px rgba(169,196,218,.12)}
.scuffle-slot.swapping canvas{opacity:.55}
.scuffle-swap-tag{position:absolute;top:7px;left:50%;transform:translateX(-50%);
  font-size:9px;letter-spacing:.18em;color:var(--accent);padding:2px 7px;border-radius:999px;
  border:1px solid var(--accent);background:rgba(28,23,35,.7)}
/* The lantern, its own control rather than what a tap on the slot did. */
.scuffle-lamp{position:absolute;left:7px;top:7px;width:26px;height:26px;display:grid;place-items:center;
  border-radius:50%;font-size:13px;line-height:1;cursor:pointer;color:var(--muted);
  border:1px solid var(--line);background:rgba(28,23,35,.55);opacity:.55}
.scuffle-lamp:hover{opacity:1}
.scuffle-lamp.is-on{opacity:1;color:#f1c593;border-color:#a08453;
  box-shadow:0 0 12px rgba(241,197,147,.35);background:rgba(44,40,56,.55)}
.scuffle-swap-help{margin:8px 0 2px;text-align:center;font-size:11px;letter-spacing:.03em;color:var(--muted)}

/* The lamp button is the lantern's mark now; the old corner star would say it twice. */
.scuffle-slot.lantern:after{content:none}

/* ---- The long walk, while they are out ------------------------------------------------------- */
.walk-scene{margin:12px 0 10px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#1c1723}
.walk-scene canvas{display:block;width:100%;height:auto;image-rendering:pixelated}
.walk-leg{margin:0 0 10px;font-size:13px;color:var(--white)}
.walk-leg span{color:var(--muted);font-size:11px;margin-left:6px;letter-spacing:.04em}
.walk-route{position:relative;display:flex;gap:4px;list-style:none;margin:0 0 14px;padding:0;height:6px}
.walk-route li{flex:1;position:relative;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.walk-route li i{position:absolute;inset:0 auto 0 0;background:var(--accent);opacity:.75}
.walk-route li.is-done i{opacity:.4}
.walk-marker{position:absolute;top:-8px;font-size:12px;line-height:1;color:#f1c593;
  text-shadow:0 0 8px rgba(241,197,147,.6);transition:left .6s}
.walk-notes{margin:16px 0 6px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.02)}
.walk-notes .micro{margin:0 0 8px;color:var(--muted)}
.walk-notes ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.walk-notes li{display:flex;flex-direction:column;gap:2px;font-size:12.5px;line-height:1.5}
.walk-notes li b{font-weight:500;font-size:11px;letter-spacing:.04em;color:var(--muted)}
.walk-notes li span{color:var(--white)}
.walk-notes li.is-latest b{color:#f1c593}
.walk-notes li.is-next{opacity:.55}
.walk-notes li.is-next span{color:var(--muted)}
.walk-party-label{margin:14px 0 6px;color:var(--muted)}

/* ---- 10.14 usability pass ------------------------------------------------------------------ */
/* Change favorites and Share share one row, like Pet · Make a light above them, with full-size
   tap areas. Stacked, they were two 22px lines a thumb could not tell apart. */
.home-links{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:-8px;color:var(--dim)}
.home-links .edit-favorites{min-height:40px!important;margin:0!important;padding:0 10px!important}
.home-links .edit-favorites{white-space:nowrap}
@media(max-width:380px){.home-links{gap:0}.home-links .edit-favorites{padding:0 6px!important;font-size:11px;letter-spacing:.02em}}
/* Small text links keep their look but take a thumb-sized tap. */
.tap-pad{position:relative}
.tap-pad::after{content:'';position:absolute;inset:-12px -8px}
.mark-open{position:relative}
.mark-open::after{content:'';position:absolute;inset:-11px -4px}
/* The event banner: on a phone the days left go under "Happening now", so the event's name is not
   cut off by them. */
.event-left-inline{display:none}
@media(max-width:600px){
  .event-left-inline{display:inline;text-transform:uppercase}
  .event-banner .event-side .event-banner-left{display:none}
}

/* Deep Tide, the fishing quest. The water gets as much of the screen as the sheet can spare, and
   the steering bar sits under it so a thumb never covers the fish it is trying to dodge. */
.tide-dialog{width:420px}
.tide-dialog .panel-header{margin-bottom:4px}
.tide-stage{position:relative;border-radius:16px;overflow:hidden;background:#1c1723;box-shadow:0 0 0 1px rgba(218,231,241,.09)}
.tide-canvas{display:block;width:100%;image-rendering:pixelated;height:clamp(300px,calc(94dvh - 290px),640px);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}
.tide-foot{margin:8px 0 6px;min-height:34px;text-align:center;font-size:12px;line-height:1.45;color:var(--muted)}
.tide-pad{position:relative;display:grid;place-items:center;width:100%;min-height:62px;padding:0 16px;border-radius:18px;border:1px solid #7497b4;background:linear-gradient(180deg,#1e3b64,#121a47);color:var(--white);font:inherit;font-size:14px;letter-spacing:.08em;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer;overflow:hidden;transition:background .2s,border-color .2s,transform .12s}
.tide-pad:focus-visible{outline:2px solid #f1c593;outline-offset:3px}
.tide-pad-label{position:relative;z-index:1;pointer-events:none;transition:opacity .2s}
.tide-pad-hook{position:absolute;top:9px;bottom:9px;left:50%;width:4px;margin-left:-2px;border-radius:3px;background:#f1c593;box-shadow:0 0 12px #f1c593;opacity:0;transition:opacity .2s;pointer-events:none}
.tide-pad.is-steering{background:linear-gradient(180deg,#121a47,#1a0b38);border-color:#55bac5}
.tide-pad.is-steering .tide-pad-hook{opacity:.95}
.tide-pad.is-steering .tide-pad-label{opacity:.5;font-size:12px}
.tide-links{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px}
.tide-links .text-button{flex:1;min-height:44px;transition:opacity .2s}
.tide-links .is-away{visibility:hidden;opacity:0;pointer-events:none}
.tide-haul{position:absolute;left:10px;right:10px;bottom:10px;max-height:calc(100% - 60px);overflow-y:auto;padding:14px 14px 10px;border-radius:14px;background:rgba(28,23,35,.93);border:1px solid rgba(241,197,147,.35);box-shadow:0 10px 30px rgba(0,0,0,.45);opacity:0;transform:translateY(16px);transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .25s;cursor:pointer}
.tide-haul.is-up{opacity:1;transform:none}
.tide-haul .micro{margin:0 0 8px;color:#f1c593}
.tide-haul-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.tide-haul-list li{display:flex;align-items:center;gap:10px}
.tide-haul-list canvas{flex:0 0 36px;width:36px;height:36px}
.tide-haul-list div{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px}
.tide-haul-list b{font-weight:500;font-size:13px;color:var(--white)}
.tide-haul-list span{flex-basis:100%;font-size:11px;line-height:1.4;color:var(--muted)}
.tide-haul-list i{font-style:normal;font-size:13px;color:#f1c593;white-space:nowrap}
.tide-tag{order:-1;font-style:normal;font-size:9px;letter-spacing:.08em;padding:1px 5px;border-radius:6px;border:1px solid currentColor}
.tide-haul-list b~.tide-tag{order:0}
.tide-tag.is-new{color:#c8f298}.tide-tag.is-record{color:#fbaec5}.tide-tag.is-giant{color:#7aefec}.tide-tag.is-shiny{color:#ffe4c0}
.tide-note{font-style:italic}
.tide-haul-total{margin:10px 0 0;font-size:13px;color:#f1c593}
.tide-haul-note{margin:6px 0 0;font-size:11.5px;line-height:1.5;color:var(--white)}
.tide-haul-note.is-chest{color:#ffe4c0}
.tide-haul-note.is-cap{color:var(--muted)}
.tide-haul-hint{margin:8px 0 0;font-size:10px;text-align:center;color:var(--dim)}
.tide-page>.micro{margin:0 0 8px;color:var(--muted)}
.tide-page .run-pets{margin-bottom:18px}
.tide-gear{display:flex;flex-direction:column;gap:8px;margin:0 0 18px}
.tide-gear-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(244,239,227,.025)}
.tide-gear-row>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tide-gear-row b{font-weight:500;font-size:14px;color:var(--white)}
.tide-gear-row span{font-size:11.5px;line-height:1.45;color:var(--muted)}
.tide-pips{display:flex;gap:4px;margin-top:4px}
.tide-pips u{display:block;width:14px;height:4px;border-radius:2px;background:#2c2838;text-decoration:none}
.tide-pips u.is-on{background:#55bac5}
.tide-buy{flex:0 0 auto;min-width:92px;min-height:44px;margin:0;padding:0 12px;font-size:12px}
.tide-buy:disabled{opacity:.45;cursor:default}
.tide-page .prize-board{margin:0 0 18px}
#pond-tackle-back,#pond-log-back{width:100%;margin:0}
.tide-log-intro{margin:0 0 14px;font-size:12px;line-height:1.5;color:var(--muted)}
.tide-zone{margin:0 0 18px}
.tide-zone-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 8px}
.tide-zone-head b{font-weight:500;font-size:14px;color:var(--white)}
.tide-zone-head span{font-size:11px;color:var(--muted)}
.tide-zone-head em{margin-left:auto;font-style:normal;font-size:11px;color:var(--accent)}
.tide-zone-head em.is-had{color:#c8f298}
.tide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.tide-cell{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:8px 4px;border-radius:12px;border:1px solid var(--line);text-align:center}
.tide-cell canvas{width:44px;height:44px}
.tide-cell b{font-weight:500;font-size:10.5px;line-height:1.25;color:var(--white);overflow-wrap:anywhere}
.tide-cell span{font-size:9.5px;color:var(--muted)}
.tide-cell:not(.is-had){opacity:.72}
@media(max-width:600px){.tide-dialog{width:100%}}
@media(max-height:700px){.tide-foot{min-height:30px;margin:6px 0 4px;font-size:11.5px}.tide-pad{min-height:54px}}
@media(prefers-reduced-motion:reduce){.tide-haul,.tide-pad,.tide-pad-hook{transition:none}}

/* ---- 10.19 · The night run, full screen ------------------------------------------------------
   While a run is on, the panel steps aside: the scene fills the screen, the lives, distance and
   lights sit on top of it in two small glass corners, and the whole bottom edge is the jump. */
.run-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){.run-dialog.is-playing{height:min(100dvh,880px);border-radius:22px}}
@media(max-width:600px){.run-dialog.is-playing{inset:0;margin:0;border-radius:0}}
.run-dialog.is-playing .world-shell{padding:0;height:100%;display:flex;flex-direction:column}
.run-dialog.is-playing .panel-header{display:none}
.run-play{display:flex;flex-direction:column;flex:1;min-height:0}
.run-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:#121a47;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.run-stage .run-canvas{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;background:transparent}
.run-stage #run-progress{position:absolute;top:0;left:0;right:0;width:100%;height:4px;border-radius:0;z-index:2}
.run-hud-row{position:absolute;z-index:2;top:max(12px,env(safe-area-inset-top));left:10px;right:10px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none}
.run-hud-left,.run-hud-right{display:flex;flex-direction:column;gap:4px;padding:8px 11px;border-radius:14px;background:#1c1723b3;border:1px solid #dae7f11f;box-shadow:0 6px 20px #0006}
.run-hud-right{flex-direction:row;align-items:center;gap:10px;padding:5px 5px 5px 12px}
.run-stage #run-hearts{display:flex;gap:6px}
.run-stage .run-heart{width:20px;height:20px}
.run-stage .run-hud{margin:0;font-size:15px;text-align:left;letter-spacing:.06em}
.run-stage .run-vitals{margin:0;min-height:0;font-size:13px;color:#f1c593;white-space:nowrap}
.run-powers{margin:0;font-size:11px;letter-spacing:.06em;color:#7aefec;min-height:0}
.run-powers:empty{display:none}
.run-round{pointer-events:auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#2c2838;border:1px solid #dae7f133;color:#f4efe3;font-size:11px;letter-spacing:-.1em}
.run-stage #run-status{position:absolute;z-index:2;top:30%;left:0;right:0;height:auto;margin:0;text-align:center;font-size:14px;letter-spacing:.14em;color:#ffe4c0;text-shadow:0 2px 0 #1c1723,0 0 12px #1c1723;pointer-events:none}
.run-stage .run-foot{position:absolute;z-index:2;left:12px;right:12px;bottom:12px;margin:0;min-height:0;font-size:12px;line-height:1.5;color:#dae7f1;text-shadow:0 1px 0 #1c1723,0 0 8px #1c1723;pointer-events:none}
.run-card-over{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:min(88%,360px);display:flex;flex-direction:column;align-items:stretch;gap:9px;
  padding:22px 20px 16px;border-radius:20px;background:#1c1723eb;border:1px solid #dae7f133;box-shadow:0 18px 50px #000a;text-align:center;cursor:default}
.run-card-over .micro{color:#a9c4da;margin:0}
.run-card-over h3{margin:0 0 2px;font-size:22px;font-weight:500;letter-spacing:.04em;color:#f4efe3}
.run-card-over #run-loot{margin:0;font-size:13px;line-height:1.6;color:#f1c593;min-height:0}
.run-card-over #run-goal{margin:0 0 6px}
.run-card-over button{width:100%;margin:0}
.run-card-over #run-back{margin:0}
.run-play .run-jump{flex:none;margin:0;width:100%;border-radius:0;border-left:0;border-right:0;border-bottom:0;
  min-height:max(76px,11dvh);padding-bottom:env(safe-area-inset-bottom);font-size:20px}
@media(min-width:601px){.run-play .run-jump{border-radius:0 0 22px 22px}}

/* 10.22 · opened inside Instagram, TikTok and friends: one card up top, then out of the way */
.inapp-banner{position:fixed;z-index:60;left:10px;right:10px;top:max(10px,env(safe-area-inset-top));max-width:520px;margin:0 auto;padding:12px 14px;border-radius:16px;
  background:#1c1723f5;border:1px solid #ffe4c066;box-shadow:0 16px 40px #000a;color:#dae7f1;font-size:12.5px;line-height:1.5;animation:inapp-in .35s ease-out}
.inapp-banner p{margin:0}.inapp-banner b{color:#ffe4c0;font-weight:600}
.inapp-banner .inapp-how{margin-top:4px;color:#a1a2a7;font-size:11.5px}
.inapp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.inapp-actions button{padding:8px 12px;border-radius:999px;border:1px solid #dae7f133;background:#2c2838;color:#f4efe3;font:inherit;font-size:12px;cursor:pointer}
.inapp-actions .inapp-open,.inapp-actions .inapp-copy{background:#356488;border-color:#a9c4da66}
.inapp-actions .inapp-later{margin-left:auto;background:none;border-color:transparent;color:#a1a2a7}
@keyframes inapp-in{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}