/* ==============================================================================================
   GLASS — the frosted, glowing look.
   A skin laid over the existing styles: it changes how things look (colour, glass, glow, shape),
   not how they are laid out, so every screen keeps working exactly as before.
   ============================================================================================== */
:root{
  /* The original theme's shared colours were grey-greens, and they feed borders, labels and
     highlights all over the game. Redefined here in the same blue family as the glass. */
  --accent:#a9c4da;
  --dim:#7497b4;
  --muted:#7497b4;
  --line:#1e3b64;
  --panel:#121a47;
  --bg:#1c1723;
  --white:#dae7f1;
  --reveal-color:#dae7f1;
  --g-ink:#f4efe3;            /* text */
  --g-soft:#a9c4da;           /* secondary text */
  --g-muted:#7497b4;          /* quiet text */
  --g-violet:#7497b4;
  --g-violet-2:#356488;
  --g-blue:#7497b4;
  --g-cyan:#a9c4da;
  --g-gold:#f1c593;
  --g-pink:#e77bb4;
  --g-glass:linear-gradient(180deg,rgba(53,100,136,.30),rgba(30,59,100,.42));
  --g-glass-strong:linear-gradient(180deg,rgba(53,100,136,.40),rgba(30,59,100,.55));
  --g-edge:rgba(169,196,218,.26);
  --g-edge-bright:rgba(169,196,218,.62);
  --g-shadow:0 10px 30px rgba(28,23,35,.45),inset 0 1px 0 rgba(255,255,255,.07);
  --g-glow:0 0 0 1px rgba(169,196,218,.35),0 0 22px rgba(116,151,180,.35);
  --g-grad:linear-gradient(100deg,#356488 0%,#356488 45%,#3f91a7 100%);
  --g-blur:blur(16px) saturate(140%);
}

/* ---- The old dark greys, in navy ---------------------------------------------------------------------
   Generated by tests/tools/navyify.py from the older stylesheets: every dark grey or grey-green
   background and border from the original theme, in navy at the same darkness. It comes first
   so the hand-made glass rules below still win. Regenerate rather than edit. */
.rarity-pips i{border:1px solid #1e3b64}
.slot.selected{border-color:#1e3b64;background:#1c1723}
.slot.empty{border:1px dashed #121a47}
.slot.chest-slot{background:#1c1723;border:1px solid #1e3b64}
.slot.chest-slot::before{background:#121a47}
.collection-button{border:1px solid #1e3b64;background:#1c1723}
.collection-button:hover{background:#121a47;border-color:#1e3b64}
dialog::backdrop{background:#020203cb}
.progress-track{background:#121a47}
.filter-tabs button.selected{background:#121a47}
.creature-card{border:1px solid #1e3b64;background:#1c1723}
.creature-card:hover{background:#1c1723}
.creature-card.undiscovered{background:#1c1723;border-color:#121a47}
.secondary-button{border:1px solid #1e3b64;background:#1c1723}
.replace-slots button{border:1px solid #1e3b64}
.setting-row{border-bottom:1px solid #121a47}
.switch{border:1px solid #1e3b64;background:#1c1723}
.setting-row input:checked+.switch:before{background:#1e3b64}
.test-entry{border:1px dashed #1e3b64}
select{border:1px solid #1e3b64;background:#1c1723}
.reveal-dialog{background:#1c1723}
.reveal-dialog::backdrop{background:#1c1723}
.reveal-dialog.secret-reveal{background:#1c1723}
.noscript{background:#1c1723}
.test-visitor{border:1px dashed #1e3b64}
.creature-card.shiny-card{background:linear-gradient(150deg,#1c172325,#1c1723);border-color:#1e3b644f}
.variant-switch{background:#1c1723}
.variant-switch button.active{background:#1e3b64}
.variant-switch button.active.shiny{background:#1e3b64}
.pet-secrets{border-top:1px solid #1e3b64}
.series-tag{border:1px solid #1e3b64}
#save-code-input{background:#1c1723;border:1px solid #1e3b64}
.haul-row{border:1px solid #121a47;background:#1c1723}
.haul-row.new{border-color:#1e3b64}
.class-chips button{border:1px solid #1e3b64;background:#1c1723}
.class-chips button[aria-pressed="true"]{background:#1c1723}
.title-screen{background:radial-gradient(ellipse at 50% 45%,#1c1723 0%,#1c1723 70%)}
.family-tag{border:1px solid #1e3b64}
.family-strip button{border:1px solid #1e3b64;background:#1c1723}
.family-strip button[aria-pressed="true"]{background:#1c1723}
.first-dots i{background:#1e3b64}
.profile-card canvas{border:1px solid #1e3b64;background:#1c1723}
.profile-picker{border-bottom:1px solid #1e3b64}
.first-name{background:#1c1723;border:1px solid #1e3b64}
.first-art{border:1px solid #1e3b64;background:#1c1723}
.first-dots button{background:#1e3b64}
.guide-button:hover{border-color:#1e3b64}
.profile-avatar-button canvas{border:1px solid #1e3b64;background:#1c1723}
.stat-tile{border:1px solid #121a47;background:#1c1723}
.mark-tag{background:#1c1723}
.detail-life{border-top:1px solid #121a47}
.awaken-button{background:#1c1723}
.awaken-button:hover{background:#1c1723}
.bottom-nav{border:1px solid #121a47;background:#1c1723}
.nav-item.is-active{background:#1c1723}
.profile-pill{border:1px solid #1e3b64;background:#1c1723}
.favorites-grid{border-bottom:1px solid #1e3b64}
.chest-tier{border:1px solid #1e3b64;background:#1c1723}
.nav-badge.muted{background:#1c1723}
.nav-badge{background:#1c1723}
.stage{background:radial-gradient(ellipse at 50% 42%,#1c1723 0%,#1c1723 45%,transparent 70%)}
.chest-tier{background:linear-gradient(180deg,#1c1723,#1c1723)}
.bottom-nav{background:linear-gradient(180deg,#1c1723,#1c1723)}
.account{border-top:1px solid #121a47}
.account input{background:#1c1723;border:1px solid #1e3b64}
.market-row{border:1px solid #1e3b64;background:#1c1723}
.journey-label{background:linear-gradient(to top,#000000cc,#00000000)}
.copy-chip{border:1px solid #1e3b64;background:#1c1723}
.copy-chip.picked{background:#1c1723}
.account-restore{border:1px solid #1e3b64;background:#1c1723}
.detail-close{border:1px solid #1e3b64;background:#1c1723cc}
.detail-close:hover,.detail-close:focus-visible{background:#1c1723}
.icon-button{border:1px solid #121a47;background:#1c172300}
.icon-button:hover,.icon-button:focus-visible{background:#1c1723;border-color:#1e3b64}
.detail-close{border-color:#121a47;background:#1c1723cc}
.world-dialog{background:#1c1723}
.quest-route{border:1px solid #1e3b64;background:#1c1723}
.quest-route[aria-pressed=true]{background:#121a47}
.quest-route:hover{background:#121a47}
.journey-progress{background:#1e3b64}
.quest-postcards{border-top:1px solid #1e3b64}
.postcard{border:1px solid #1e3b64;background:#1c1723}
.quest-row{border:1px solid #1e3b64;background:#1c1723}
.expedition-meter>div{border:1px solid #121a47;background:#1c1723}
.expedition-chip{border:1px solid #1e3b64;background:#1c1723}
.journey-away .journey-frame{border:1px solid #1e3b64;background:#1c1723}
.expedition-tools button{border:1px solid #1e3b64}
.expedition-tools button:hover{border-color:#1e3b64}
.scuffle-join input{background:#1c1723;border:1px solid #1e3b64}
.scuffle-rules{border-top:1px solid #1e3b64}
.scuffle-moon{border:1px solid #1e3b64;background:#1c1723}
.scuffle-slot{border:1px solid #1e3b64;background:#1c1723}
.scuffle-slot.lantern{background:#1c1723}
.scuffle-grid{border-top:1px solid #1e3b64;border-bottom:1px solid #1e3b64}
.scuffle-card{border:1px solid #1e3b64;background:#1c1723}
.scuffle-card.picked{background:#1c1723}
.scuffle-chip{border:1px solid #1e3b64;background:#1c1723}
.trade-panel{border:1px dashed #1e3b64}
.trade-panel.filled{background:#1c1723}
.trade-panel-tag{border:1px solid #1e3b64}
.trade-panel-tag.new{border-color:#1e3b64}
.scuffle-code-text{background:#1c1723;border:1px solid #1e3b64}
.play-join{border:1px dashed #1e3b64}
.play-card{border:1px solid #1e3b64;background:#1c1723}
.play-card-head canvas{border:1px solid #1e3b64;background:#1c1723}
.play-section{border-top:1px solid #121a47}
.journal-dialog{background:#1c1723}
.journal-dialog::backdrop{background:#070709b8}
.journal-tabs{background:#08090c55}
.chapter-step{background:#1c1723}
.wish-card{background:radial-gradient(ellipse at 50% 25%,color-mix(in srgb,var(--wish-color) 12%,transparent),transparent 68%),#1c1723}
.wish-filters input,.wish-filters select{background:#1c1723}
.wish-pet{background:#1c1723}
.wish-pet.picked{background:color-mix(in srgb,var(--wish-color) 9%,#1c1723)}
.scene-card{background:#1c1723}
.collection-search{background:#1c1723}
.scuffle-dialog .play-card{background:linear-gradient(125deg,#a9c4da08,#1c1723)}
.daily-row{border:1px solid #1e3b64;background:#1c1723}
.daily-row.done{background:#1c1723}
.nav-badge[data-kind="tonight"]{background:#121a47;border:1px solid #1e3b64}
.chest-family-dialog{background:#1c1723}
.family-choice{background:#1c1723}
.family-choice[aria-pressed=true]{background:#121a47}
.chest-family-dialog footer{background:#1c1723}
#collection-sort{background:#1c1723}
.creature-card{border-color:color-mix(in srgb,var(--card-color) 28%,#121a47);background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--card-color) 7%,transparent),transparent 64%),#1c1723}
.creature-card.undiscovered{border-color:#1e3b64;background:#1c1723}
.creature-card.shiny-card{background:radial-gradient(ellipse at 50% 35%,#f1c59313,transparent 70%),#1c1723}
.rarity-dots i{background:#1e3b64}
.variant-switch button.active{background:#1e3b64}
.wish-pet{border-color:color-mix(in srgb,var(--wish-color) 24%,#121a47);background:radial-gradient(ellipse at 50% 32%,color-mix(in srgb,var(--wish-color) 9%,transparent),transparent 65%),#1c1723}
.chest-odds-dialog select{background:#1c1723;border:1px solid #1e3b64}
.update-bar{border:1px solid #1e3b64;background:#1c1723f2}
.install-block{border:1px solid #1e3b64;background:#1c1723}
.notify-block{border:1px solid #1e3b64;background:#1c1723}
.run-canvas{background:#1c1723}
.run-jump{background:linear-gradient(145deg,#1e3b64,#1e3b64)}
.duo-chat-row input{background:#1c1723}
.scuffle-swap-tag{background:rgba(28,23,35,.7)}
.scuffle-lamp{background:rgba(28,23,35,.55)}
.scuffle-lamp.is-on{background:rgba(18,26,71,.55)}
.walk-scene{background:#1c1723}
.welcome-card{background:linear-gradient(180deg,#1c1723fa,#1c1723f7);border:1px solid #1e3b64}
.welcome-input{background:#1c1723;border:1px solid #1e3b64}
.friends-dialog select,.friends-dialog input{background:#1c1723;border:1px solid #1e3b64}
.friend-swap{border-top:1px solid #121a47}
.swap-chip{border:1px solid #1e3b64;background:#1c1723}
.share-paste .share-input{background:#1c1723;border:1px solid #1e3b64}
.friend-offer{border-top:1px solid #121a47}
.offer-grid{border-bottom:1px solid #1e3b64}
.offer-dust,.offer-note{background:#1c1723;border:1px solid #1e3b64}
.waiting-card{background:linear-gradient(180deg,#1c1723,#1c1723)}
.waiting-line{border-bottom:1px solid #121a47}
.friend-cell{border:1px solid #121a47;background:#1c1723}
.friend-cell{border-color:color-mix(in srgb,var(--rarity-color,#121a47) 34%,#121a47)}
.friend-cell:hover{border-color:var(--rarity-color,#1e3b64)}
.bottom-nav .nav-badge,
.bottom-nav #collection-count{background:#1c1723;border:1px solid #1e3b64}
.bottom-nav .nav-badge[data-kind="tonight"]{background:#1c1723;border-color:#1e3b64}
.slot.selected{background:#1c1723}
.slot.empty{border:1px dashed #121a47}
.slot.chest-slot{background:#1c1723;border:1px solid #1e3b64}
.slot.chest-slot::before{background:#121a47}
.collection-button{border:1px solid #1e3b64;background:#1c1723}
.collection-button:hover{background:#121a47}
.progress-track{background:#121a47}
.creature-card{border:1px solid #1e3b64}
.secondary-button{background:#1c1723}
.setting-row{border-bottom:1px solid #121a47}
.switch{background:#1c1723}
.setting-row input:checked+.switch:before{background:#1e3b64}
select{background:#1c1723}
.variant-switch{background:#1c1723}
.pet-secrets{border-top:1px solid #1e3b64}
.series-tag{border:1px solid #1e3b64}
#save-code-input{background:#1c1723}
.haul-row{border:1px solid #121a47;background:#1c1723}
.class-chips button{border:1px solid #1e3b64;background:#1c1723}
.class-chips button[aria-pressed="true"]{background:#1c1723}
.family-tag{border:1px solid #1e3b64}
.family-strip button{border:1px solid #1e3b64;background:#1c1723}
.family-strip button[aria-pressed="true"]{background:#1c1723}
.first-dots i{background:#1e3b64}
.profile-picker{border-bottom:1px solid #1e3b64}
.first-name{background:#1c1723}
.first-dots button{background:#1e3b64}
.guide-button:hover{border-color:#1e3b64}
.stat-tile{border:1px solid #121a47;background:#1c1723}
.detail-life{border-top:1px solid #121a47}
.bottom-nav{border:1px solid #121a47;background:#1c1723}
.nav-item.is-active{background:#1c1723}
.profile-pill{border:1px solid #1e3b64;background:#1c1723}
.favorites-grid{border-bottom:1px solid #1e3b64}
.chest-tier{background:#1c1723}
.nav-badge.muted{background:#1c1723}
.nav-badge{background:#1c1723}
.chest-tier{background:linear-gradient(180deg,#1c1723,#1c1723)}
.bottom-nav{background:linear-gradient(180deg,#1c1723,#1c1723)}
.account{border-top:1px solid #121a47}
.account input{background:#1c1723}
.market-row{border:1px solid #1e3b64;background:#1c1723}
.copy-chip{border:1px solid #1e3b64;background:#1c1723}
.copy-chip.picked{background:#1c1723}
.detail-close{border:1px solid #1e3b64;background:#1c1723cc}
.detail-close:hover,.detail-close:focus-visible{background:#1c1723}
.icon-button{border:1px solid #121a47;background:#1c172300}
.icon-button:hover,.icon-button:focus-visible{background:#1c1723}
.detail-close{border-color:#121a47;background:#1c1723cc}
.quest-route{background:#1c1723}
.quest-route[aria-pressed=true]{background:#121a47}
.quest-route:hover{background:#121a47}
.quest-postcards{border-top:1px solid #1e3b64}
.postcard{background:#1c1723}
.quest-row{border:1px solid #1e3b64;background:#1c1723}
.expedition-meter>div{border:1px solid #121a47;background:#1c1723}
.expedition-chip{border:1px solid #1e3b64;background:#1c1723}
.journey-away .journey-frame{border:1px solid #1e3b64}
.expedition-tools button{border:1px solid #1e3b64}
.scuffle-join input{background:#1c1723}
.scuffle-rules{border-top:1px solid #1e3b64}
.scuffle-moon{background:#1c1723}
.scuffle-slot{background:#1c1723}
.scuffle-slot.lantern{background:#1c1723}
.scuffle-grid{border-top:1px solid #1e3b64;border-bottom:1px solid #1e3b64}
.scuffle-card{border:1px solid #1e3b64;background:#1c1723}
.scuffle-card.picked{background:#1c1723}
.scuffle-chip{border:1px solid #1e3b64;background:#1c1723}
.trade-panel.filled{background:#1c1723}
.trade-panel-tag{border:1px solid #1e3b64}
.scuffle-code-text{background:#1c1723}
.play-card{background:#1c1723}
.play-section{border-top:1px solid #121a47}
.journal-dialog{background:#1c1723}
.wish-pet.picked{background:color-mix(in srgb,var(--wish-color) 9%,#1c1723)}
.daily-row{border:1px solid #1e3b64;background:#1c1723}
.daily-row.done{background:#1c1723}
.nav-badge[data-kind="tonight"]{background:#121a47}
.chest-family-dialog{background:#1c1723}
.chest-family-dialog footer{background:#1c1723}
.update-bar{background:#1c1723f2}
.install-block{border:1px solid #1e3b64;background:#1c1723}
.notify-block{border:1px solid #1e3b64;background:#1c1723}
.friend-swap{border-top:1px solid #121a47}
.swap-chip{border:1px solid #1e3b64;background:#1c1723}
.share-paste .share-input{background:#1c1723}
.friend-offer{border-top:1px solid #121a47}
.offer-grid{border-bottom:1px solid #1e3b64}
.offer-dust,.offer-note{background:#1c1723}
.waiting-card{background:linear-gradient(180deg,#1c1723,#1c1723)}
.waiting-line{border-bottom:1px solid #121a47}
.friend-cell{border:1px solid #121a47;background:#1c1723}
.friend-cell{border-color:color-mix(in srgb,var(--rarity-color,#121a47) 34%,#121a47)}
.bottom-nav .nav-badge,.bottom-nav #collection-count{background:#1c1723;border:1px solid #1e3b64}
.bottom-nav .nav-badge[data-kind="tonight"]{background:#1c1723}
.welcome-card{background:linear-gradient(180deg,#1c1723fa,#1c1723f7)}
.welcome-input{background:#1c1723}
.stage{background:radial-gradient(ellipse at 50% 42%,rgba(9,10,14,.55) 0%,rgba(9,10,14,.32) 45%,transparent 70%)}
:root[data-scene="none"] .stage{background:radial-gradient(ellipse at 50% 42%,#1c1723 0%,#1c1723 45%,transparent 70%)}
.scene-card .scene-preview{background:var(--scene,#1c1723) no-repeat center top / cover;background-color:#1c1723}

/* ---- end of generated navy */

/* ---- The night behind everything ------------------------------------------------------------ */
html,body{background:#1c1723}
body{
  background:
    radial-gradient(120% 60% at 10% 0%,rgba(116,151,180,.22),transparent 60%),
    radial-gradient(90% 50% at 100% 30%,rgba(116,151,180,.16),transparent 60%),
    radial-gradient(80% 40% at 50% 100%,rgba(53,100,136,.18),transparent 70%),
    #1c1723;
  color:var(--g-ink);
}

/* ---- One recipe for glass, shared by every surface ---------------------------------------------- */
.dust-button,.profile-pill,.missions-button,.journal-home,.news-door,.market-button,.stage-arrow,
.lineup .slot,.bottom-nav,.guide-button{
  background:var(--g-glass)!important;
  border:1px solid var(--g-edge)!important;
  box-shadow:var(--g-shadow)!important;
  color:var(--g-ink);
}

/* ---- Top bar ---------------------------------------------------------------------------------- */
.wordmark{color:var(--g-ink);letter-spacing:.2em}
.wordmark .brand-mark{
  background:linear-gradient(135deg,#a9c4da,#a9c4da);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 8px rgba(169,196,218,.8));
}
.dust-button,.missions-button{border-radius:999px!important}
.dust-button{display:inline-flex;align-items:center;gap:8px}
.dust-icon{display:inline-grid;color:var(--g-cyan);filter:drop-shadow(0 0 6px rgba(169,196,218,.7))}
.missions-button{color:var(--g-soft);padding:5px 6px 5px 12px!important;gap:6px;font-size:10px!important;letter-spacing:.12em}
.missions-button>span:first-child{font-size:10px}
.missions-count{background:rgba(116,151,180,.22)!important;border:1px solid rgba(169,196,218,.45)!important;color:var(--g-ink)!important}
.profile-pill{border-radius:999px!important;box-shadow:var(--g-shadow),0 0 18px rgba(116,151,180,.28)!important}

/* ---- The event banner ------------------------------------------------------------------------- */
/* As in the mockup: a dark glass bar with a violet-to-blue edge, a glowing sparkle, a small gold
   "happening now", the title, and the days left with a chevron. */
.event-banner{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:10px 16px 10px 18px!important;min-height:0;text-align:left;border-radius:14px!important;
  border:1px solid transparent!important;
  background:
    linear-gradient(95deg,#1e3b64,#1e3b64 55%,#1e3b64) padding-box,   /* solid, so only the rim is coloured */
    linear-gradient(90deg,#7497b4,#7497b4 50%,#7497b4) border-box!important;
  box-shadow:0 6px 20px rgba(28,23,35,.45),0 0 18px rgba(116,151,180,.18)!important;
  position:relative;overflow:hidden;
}
.event-spark{display:grid;color:#f4efe3;filter:drop-shadow(0 0 6px rgba(255,255,255,.9)) drop-shadow(0 0 12px rgba(169,196,218,.8))}
.event-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.event-kicker{font-size:10px;letter-spacing:.14em;color:#f1c593}
#event-banner-name{font-size:16px;color:#f4efe3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
.event-side{display:flex;align-items:center;gap:10px;color:var(--g-soft)}
.event-banner-left{font-size:11.5px!important;color:var(--g-soft)!important;white-space:nowrap}
.event-chev{display:grid;color:#dae7f1}
.event-banner-badge{padding:2px 8px;border-radius:999px;background:var(--g-gold)!important;color:#1c1723!important;font-size:10px;white-space:nowrap}
.event-banner .micro{display:none}

/* ---- Journal and the two small doors ----------------------------------------------------------- */
.journal-home{border-radius:12px!important;display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:14px;align-items:center;text-align:left!important;padding-left:18px!important}
.journal-icon{grid-row:1 / span 2;display:grid;color:#dae7f1;filter:drop-shadow(0 0 8px rgba(169,196,218,.8))}
#journal-home-label{color:var(--g-soft)!important;letter-spacing:.16em}
#journal-home-action{color:var(--g-ink)!important}
#journal-home-progress{background:linear-gradient(90deg,var(--g-violet),var(--g-blue))!important;box-shadow:0 0 10px rgba(116,151,180,.6)}
.news-door,.market-button{border-radius:12px!important;color:#a9c4da!important}
.news-door svg,.market-button svg{filter:drop-shadow(0 0 6px rgba(116,151,180,.6))}
.news-dot{background:var(--g-pink)!important;box-shadow:0 0 8px var(--g-pink)}
.market-badge{background:var(--g-pink)!important;color:#f4efe3!important}

/* ---- The stage ---------------------------------------------------------------------------------- */
.stage-arrow{border-radius:12px!important;color:var(--g-ink)!important}
.stage-arrow:hover{box-shadow:var(--g-shadow),var(--g-glow)!important}
/* the pedestal is drawn in play.js, under the pal's feet, so it follows the pal */
.pet-glow{background:radial-gradient(circle,rgba(116,151,180,.32),transparent 62%)!important}

/* ---- Who they are ---------------------------------------------------------------------------- */
.pet-index{color:var(--g-soft)!important;letter-spacing:.22em}
#pet-name{color:#f4efe3;letter-spacing:.22em;text-shadow:0 0 18px rgba(169,196,218,.45)}
.series-tag,.class-tag,.mark-tag{border-radius:999px!important;padding:4px 14px!important;
  }
.series-tag{background:var(--g-glass)!important;border:1px solid var(--g-edge)!important;color:var(--g-soft)!important}
.class-tag{
  background:linear-gradient(135deg,color-mix(in srgb,var(--class-color,#7497b4) 26%,#356488),color-mix(in srgb,var(--class-color,#7497b4) 14%,#356488))!important;
  border:1px solid color-mix(in srgb,var(--class-color,#7497b4) 55%,#a9c4da)!important;color:#f4efe3!important;
  box-shadow:0 0 14px rgba(116,151,180,.35)}
.mark-tag{background:linear-gradient(135deg,#356488,#356488)!important;border:1px solid rgba(169,196,218,.7)!important;color:#f4efe3!important;
  box-shadow:0 0 16px rgba(116,151,180,.5)}
.gesture-hint button,.gesture-hint span{color:var(--g-soft)!important}

/* ---- Favourites ---------------------------------------------------------------------------------- */
.lineup .slot{border-radius:12px!important}
.lineup .slot.selected{
  background:var(--g-glass-strong)!important;
  border:1.5px solid transparent!important;
  background-image:var(--g-glass-strong),linear-gradient(135deg,#a9c4da,#7497b4)!important;
  background-origin:border-box!important;background-clip:padding-box,border-box!important;
  box-shadow:0 0 18px rgba(169,196,218,.55),var(--g-shadow)!important}
.edit-favorites{color:var(--g-soft)!important}

/* ---- The bottom bar ------------------------------------------------------------------------------ */
.bottom-nav{border-radius:16px!important}
.nav-item{color:var(--g-soft)!important;border-radius:12px!important}
.nav-item .nav-icon{display:grid;place-items:center;height:24px;color:#a9c4da}
.nav-item .nav-icon svg{width:22px;height:22px}
.nav-item.is-active{
  background:linear-gradient(160deg,rgba(116,151,180,.55),rgba(116,151,180,.35))!important;
  box-shadow:inset 0 0 0 1px rgba(169,196,218,.45),0 0 20px rgba(116,151,180,.4)!important;color:#f4efe3!important}
.nav-item.is-active .nav-icon{color:#a9c4da;filter:drop-shadow(0 0 8px rgba(169,196,218,.7))}
.nav-badge{background:rgba(30,59,100,.9)!important;border:1px solid var(--g-edge)!important;color:var(--g-ink)!important}

/* ---- Buttons everywhere ----------------------------------------------------------------------------- */
.primary-button{
  background:var(--g-grad)!important;color:#f4efe3!important;border:1px solid var(--g-edge-bright)!important;
  box-shadow:0 8px 22px rgba(53,100,136,.45),0 0 18px rgba(116,151,180,.35),inset 0 1px 0 rgba(255,255,255,.2)!important;
  border-radius:12px!important}
.secondary-button{
  background:var(--g-glass)!important;border:1px solid var(--g-edge)!important;color:var(--g-ink)!important;
  box-shadow:var(--g-shadow)!important;border-radius:12px!important;
  }
.text-button{color:var(--g-soft)}
.icon-button{border-radius:10px}

/* ---- Panels and popups ------------------------------------------------------------------------------- */
dialog{
  background:linear-gradient(180deg,rgba(30,59,100,.92),rgba(28,23,35,.95))!important;
  border:1px solid var(--g-edge)!important;
  box-shadow:0 30px 80px rgba(28,23,35,.7),0 0 0 1px rgba(255,255,255,.03),inset 0 1px 0 rgba(255,255,255,.06)!important;
  
  color:var(--g-ink)}
dialog::backdrop{background:rgba(28,23,35,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog .micro{color:var(--g-soft)}

/* ---- The top bar has to fit a phone ---------------------------------------------------------------
   The glass pills are roomier than the old flat ones; together they came to 11px wider than the
   screen, which nudged the whole app sideways. Tighter spacing, and on narrow phones the missions
   pill shows only its count. */
.topbar{gap:8px;min-width:0}
.topbar>*{min-width:0}
.wordmark{letter-spacing:.14em!important;white-space:nowrap}
.missions-button{padding:5px 5px 5px 11px!important;letter-spacing:.08em!important}
.dust-button{padding:7px 12px 7px 10px!important}
.top-actions{gap:8px!important;flex:none}
@media (max-width:389px){
  .missions-button>span:first-child{display:none}
  .missions-button{padding:5px!important}
  .wordmark .edition{display:none}
}

/* The missions pill: a checklist icon and the count. The word stays for screen readers and wide
   screens; at phone width it was squeezing the count off the edge. */
.missions-button{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 10px!important;flex:none}
.missions-icon{display:grid;color:#a9c4da;filter:drop-shadow(0 0 6px rgba(169,196,218,.6))}
.missions-word{display:none}
@media (min-width:480px){.missions-word{display:inline}}
.missions-button span.missions-icon:first-child{display:grid}

/* The chosen favourite: a dark tile with a bright edge and a glow, not a lit-up tile. */
.lineup .slot.selected{
  background-image:linear-gradient(180deg,#1e3b64,#1e3b64),linear-gradient(135deg,#a9c4da,#7497b4)!important;
  box-shadow:0 0 0 1px rgba(169,196,218,.25),0 0 18px rgba(116,151,180,.6),var(--g-shadow)!important}
.dust-icon svg{fill:var(--g-cyan);stroke:none}
.dust-icon{color:var(--g-cyan)!important}

/* ---- Cards inside panels ------------------------------------------------------------------------
   Every card, tile and row inside a panel, which were still the older flat near-black. */
.play-card,
.chest-tier,
.event-row,
.event-week-head,
.event-chest,
.event-pet,
.stat-tile,
.setting-block,
.quest-door,
.friends-own,
.friends-trade,
.friend-card,
.walk-notes,
.duo-chat,
.run-card,
.world-dialog .panel{
  background:var(--g-glass)!important;
  border:1px solid var(--g-edge)!important;
  box-shadow:var(--g-shadow)!important;
  border-radius:12px!important;
}
.play-card:hover,.quest-door:hover,.chest-tier:hover{border-color:var(--g-edge-bright)!important;box-shadow:var(--g-shadow),0 0 18px rgba(116,151,180,.3)!important}
.event-chest{background:linear-gradient(160deg,rgba(241,197,147,.14),rgba(30,59,100,.4))!important;border-color:rgba(241,197,147,.35)!important}
.event-pet.is-exclusive{border-style:dashed!important;border-color:rgba(241,197,147,.4)!important}
.quest-door.is-soon{opacity:.72}

/* Collection cards keep their rarity colour at the edge, on glass. */
.creature-card{background:linear-gradient(180deg,rgba(30,59,100,.35),rgba(28,23,35,.6))!important;
  border:1px solid color-mix(in srgb,var(--card-color,#7497b4) 40%,rgba(169,196,218,.2))!important;border-radius:12px!important}
.creature-card.undiscovered{background:rgba(28,23,35,.55)!important;border-color:rgba(169,196,218,.12)!important}

/* ---- Inputs ---------------------------------------------------------------------------------------- */
dialog input,dialog select,dialog textarea,.collection-search,#collection-sort,#series-filter{
  background:rgba(28,23,35,.65)!important;border:1px solid var(--g-edge)!important;color:var(--g-ink)!important;
  border-radius:10px!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)!important}
dialog input:focus,dialog select:focus,dialog textarea:focus{outline:none;border-color:var(--g-violet)!important;
  box-shadow:0 0 0 3px rgba(116,151,180,.25)!important}
dialog input::placeholder{color:var(--g-muted)}

/* ---- Tabs and filter chips: the chosen one lights up violet ------------------------------------------ */
.class-filter button{border-radius:999px!important}
dialog button.selected:not(.slot){
  background:linear-gradient(135deg,rgba(116,151,180,.55),rgba(116,151,180,.4))!important;
  border:1px solid var(--g-edge-bright)!important;color:#f4efe3!important;box-shadow:0 0 14px rgba(116,151,180,.35)!important}
dialog button.complete{background:rgba(30,59,100,.5)!important;border:1px solid var(--g-edge)!important}

/* ---- Panel headers: see-through, not a black strip ----------------------------------------------------- */
.panel-header{background:linear-gradient(180deg,rgba(30,59,100,.96),rgba(30,59,100,.7) 70%,rgba(30,59,100,0))!important;
}
.close-dialog,.icon-button.close-dialog,#friends-refresh{background:var(--g-glass)!important;border:1px solid var(--g-edge)!important;color:var(--g-ink)!important;border-radius:10px!important}

/* Picked pals in the 2v2 room and the night run: the same bright edge as the chosen favourite. */
.run-pet{background:var(--g-glass)!important;border:1px solid var(--g-edge)!important;border-radius:12px!important;box-shadow:var(--g-shadow)!important}
.run-pet.is-on{
  background-image:linear-gradient(180deg,#1e3b64,#1e3b64),linear-gradient(135deg,#a9c4da,#7497b4)!important;
  background-origin:border-box!important;background-clip:padding-box,border-box!important;border:1.5px solid transparent!important;
  box-shadow:0 0 16px rgba(116,151,180,.55),var(--g-shadow)!important}

/* Nothing above forces display: the game hides things with the hidden attribute and with
   .chest-page rules (no event banner or journal row on the chest screen), and both must win. */

/* Panels keep their own corners: some are full-height sheets meant to sit flush with the screen. */

/* The scenery behind everything is painted in purple tones. A gentle shift toward blue brings it in
   line with the interface without turning the warm window lights cold. */
/* A still, blue wash over the scene picture: drawn once, unlike a filter, which re-runs every frame. */
body::after{content:'';position:fixed;top:0;left:0;right:0;bottom:auto;height:100%;height:100lvh;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(53,100,136,.10),rgba(53,100,136,.08))}


/* ---- One design, the same on every phone ---------------------------------------------------------
   No live background blur anywhere. It made the phone re-blur what sat behind each element every
   frame (the Android lag), it trips a Safari rendering bug that stopped names drawing, and the only
   way to keep it cheap on Android was a separate Android look, which is exactly how phones started
   to differ. The glass is simply solid enough to read the same without it. */
*,*::before,*::after,dialog::backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
:root{--g-glass:linear-gradient(180deg,rgba(53,100,136,.62),rgba(18,26,71,.78));--g-glass-strong:linear-gradient(180deg,rgba(53,100,136,.72),rgba(30,59,100,.86))}
.bottom-nav{background:linear-gradient(180deg,rgba(30,59,100,.94),rgba(18,26,71,.96))!important}
dialog::backdrop{background:rgba(28,23,35,.78)!important}
button,input,select,textarea{font-family:inherit}

/* Samsung Internet repaints any page it thinks has no dark theme of its own, and it decides that by
   looking for a prefers-color-scheme section in the stylesheet, ignoring the color-scheme hint. So
   here is one, for both settings, saying the same thing: this is the only look. */
@media (prefers-color-scheme:dark){:root{color-scheme:dark}}
@media (prefers-color-scheme:light){:root{color-scheme:dark}}

/* The badges never wrap: a second row pushed the name below the visible part of the caption. */
.pet-identity{flex-wrap:nowrap!important;gap:6px!important}
.series-tag,.class-tag,.mark-tag{padding:3px 11px!important;font-size:12px!important;white-space:nowrap}

/* The game is dark already; this stops Android's "dark mode for websites" recolouring it. */
:root{color-scheme:dark}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}


.journal-icon svg{width:28px!important;height:28px!important}

/* While a pal is away, its scene sits between the arrows rather than under them. */
.journey-away .journey-frame{left:52px!important;right:52px!important}
.journey-away .journey-frame canvas{width:100%;height:100%;object-fit:cover}

/* ---- The stage gives way on short screens ---------------------------------------------------------
   The picture took a fixed height and the caption got whatever was left. With a phone's address bar
   and toolbar taking their share, that could be nothing: the name, badges and rarity were pushed
   below the stage and hidden. Now the picture shrinks first and the caption always keeps its room. */
body:not(.chest-page) #home .stage{display:flex;flex-direction:column}
body:not(.chest-page) #home .stage-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(2px,1.6svh,22px)!important}
body:not(.chest-page) #home .pet-world{flex:1 1 auto;min-height:clamp(82px,15svh,96px);height:auto!important;max-height:190px}
body:not(.chest-page) #home .pet-caption{flex:none;height:auto!important;padding-top:6px!important;padding-bottom:2px}

/* ---- The title screen --------------------------------------------------------------------------- */
.title-screen{
  background:
    radial-gradient(58% 34% at 50% 50%,rgba(116,151,180,.26),transparent 72%),
    radial-gradient(110% 60% at 8% 0%,rgba(116,151,180,.26),transparent 62%),
    radial-gradient(100% 60% at 100% 100%,rgba(116,151,180,.22),transparent 62%),
    #1c1723!important}
/* the parade of pals stays, a little quieter toward the middle so the title reads */
.title-screen canvas{opacity:.82;
  -webkit-mask-image:radial-gradient(46% 20% at 50% 50%,rgba(0,0,0,.18),#000 100%);mask-image:radial-gradient(46% 20% at 50% 50%,rgba(0,0,0,.18),#000 100%)}
.title-center{display:flex;flex-direction:column;align-items:center}
.title-set{display:inline-block;padding:4px 12px;border-radius:999px;font-size:10.5px;letter-spacing:.24em;color:var(--g-soft)!important;
  background:rgba(30,59,100,.55);border:1px solid var(--g-edge)}
.title-spark{display:grid;margin:14px 0 2px;filter:drop-shadow(0 0 10px rgba(169,196,218,.9)) drop-shadow(0 0 24px rgba(116,151,180,.6))}
.title-word{color:#f4efe3!important;letter-spacing:.16em!important;
  text-shadow:0 0 22px rgba(116,151,180,.55),0 0 48px rgba(116,151,180,.35),0 2px 16px #1c1723!important}
.title-hint{margin-top:18px!important;padding:11px 26px;border-radius:14px;font-size:13px;letter-spacing:.16em;color:#f4efe3!important;
  border:1px solid transparent;
  background:linear-gradient(95deg,#1e3b64,#1e3b64 55%,#1e3b64) padding-box,linear-gradient(90deg,#7497b4,#7497b4 50%,#7497b4) border-box;
  box-shadow:0 6px 20px rgba(28,23,35,.5),0 0 18px rgba(116,151,180,.25);
  animation:title-glow 2.6s ease-in-out infinite!important}
@keyframes title-glow{0%,100%{box-shadow:0 6px 20px rgba(28,23,35,.5),0 0 14px rgba(116,151,180,.18);opacity:.86}
  50%{box-shadow:0 6px 20px rgba(28,23,35,.5),0 0 26px rgba(116,151,180,.45);opacity:1}}
.reduced-motion .title-hint{animation:none!important;opacity:1}

/* ---- Deeper surfaces, for contrast ----------------------------------------------------------------
   The everyday surfaces (nav, favourites, journal row, the small doors, arrows, and the cards, tiles
   and rows on every screen) sit a step darker: the fill about 30% darker, the edge about 20%. The top
   bar pills, badges and event banner keep the lighter glass, so they read against them. */
:root{
  --g-deep:linear-gradient(180deg,rgba(30,59,100,.70),rgba(28,23,35,.84));
  --g-deep-edge:rgba(116,151,180,.26);
}
/* home */
.bottom-nav,
.lineup .slot,
.journal-home,
.news-door,
.market-button,
.stage-arrow,
.creature-card,
.play-card,
.chest-tier,
.event-row,
.event-week-head,
.stat-tile,
.setting-block,
.quest-door,
.quest-route,
.quest-row,
.friends-own,
.friends-trade,
.friend-card,
.walk-notes,
.duo-chat,
.scuffle-card,
.scuffle-slot,
.scuffle-moon,
.run-pet,
.run-biome,
.chapter-step,
.journal-tabs,
.prize-board{
  background:var(--g-deep)!important;
  border-color:var(--g-deep-edge)!important;
}
.bottom-nav{background:linear-gradient(180deg,rgba(18,26,71,.95),rgba(28,23,35,.97))!important}
/* a pal you have not found stays darker still, so found and missing are easy to tell apart */
.creature-card.undiscovered{background:rgba(28,23,35,.7)!important;border-color:rgba(116,151,180,.12)!important}
/* the chosen favourite and picked pals: the darker inside, the same bright edge */
.lineup .slot.selected,.run-pet.is-on{
  background-image:linear-gradient(180deg,#121a47,#1c1723),linear-gradient(135deg,#a9c4da,#a9c4da)!important;
  background-origin:border-box!important;background-clip:padding-box,border-box!important;border-color:transparent!important}
/* the gold event chest keeps its warmth, just deeper */
.event-chest{background:linear-gradient(160deg,rgba(241,197,147,.10),rgba(18,26,71,.7))!important}

/* ---- No background -----------------------------------------------------------------------------------
   With the "No background" home scene, only the dark blue: no coloured glows round the edges. */
:root[data-scene="none"] body{background:#1c1723!important}
:root[data-scene="none"] body::after{display:none}
:root[data-scene="none"] .stage{background:radial-gradient(ellipse at 50% 42%,#1c1723 0%,#1c1723 45%,transparent 70%)!important}
/* collection cards take the deeper fill but keep their rarity-coloured edge */
.creature-card:not(.undiscovered){border-color:color-mix(in srgb,var(--card-color,#7497b4) 40%,rgba(116,151,180,.2))!important}

/* The family and class chips' dark navy is the fill for every deeper surface, with an edge a small
   step lighter than the chips had, and the chips take that edge too. */
:root{
  --g-deep:linear-gradient(180deg,rgb(28,23,35),rgb(28,23,35));
  --g-deep-edge:rgb(30,59,100);
}
.bottom-nav{background:linear-gradient(180deg,rgb(28,23,35),rgb(28,23,35))!important;border-color:var(--g-deep-edge)!important}
#family-strip button,#class-filter button,.class-chips button,.family-strip button{border-color:var(--g-deep-edge)!important}

/* ---- The page background, 15% darker ------------------------------------------------------------- */
html,body{background-color:#1c1723}
body{
  background:
    radial-gradient(120% 60% at 10% 0%,rgba(116,151,180,.19),transparent 60%),
    radial-gradient(90% 50% at 100% 30%,rgba(116,151,180,.14),transparent 60%),
    radial-gradient(80% 40% at 50% 100%,rgba(53,100,136,.15),transparent 70%),
    #1c1723!important}
body::before{opacity:.46!important}                /* the scene picture, a little softer; backdrop.css fades its edges */
body::after{background:linear-gradient(180deg,rgba(53,100,136,.085),rgba(53,100,136,.068))!important}
:root[data-scene="none"] body{background:#1c1723!important}
.title-screen{
  background:
    radial-gradient(58% 34% at 50% 50%,rgba(116,151,180,.22),transparent 72%),
    radial-gradient(110% 60% at 8% 0%,rgba(116,151,180,.22),transparent 62%),
    radial-gradient(100% 60% at 100% 100%,rgba(116,151,180,.19),transparent 62%),
    #1c1723!important}

/* The painted landscape around the pal, 25% gentler, so the scenery sits back behind the pal. */
#home-scene{opacity:.75}

/* ---- The look, chosen on the profile --------------------------------------------------------------- */
.look-choice{margin:16px 0 6px}
.look-choice .micro{margin:0 0 8px;color:var(--g-soft)}
.look-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.look-option{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;
  text-align:left;padding:11px 12px;border-radius:12px;background:var(--g-deep);border:1px solid var(--g-deep-edge);color:var(--g-ink)}
.look-option b{font-weight:500;font-size:13px}
.look-option span:last-child{grid-column:2;font-size:11px;color:var(--g-soft)}
.look-swatch{grid-row:1 / span 2;width:30px;height:30px;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.look-blue{background:linear-gradient(135deg,#121a47 0%,#1e3b64 55%,#7497b4 100%)}
.look-green{background:linear-gradient(135deg,#1c1723 0%,#2c2838 55%,#f1c593 100%)}
.look-option.is-on{border-color:var(--g-edge-bright);box-shadow:0 0 0 1px var(--g-edge-bright),0 0 16px rgba(116,151,180,.2)}
:root[data-theme="green"] .look-option.is-on{box-shadow:0 0 0 1px var(--g-edge-bright),0 0 16px rgba(241,197,147,.22)}
/* three looks now: three across, a touch tighter */
.look-options{grid-template-columns:repeat(3,1fr)!important;gap:8px!important}
.look-option{grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important;row-gap:4px;padding:10px!important;text-align:center!important;justify-items:center}
.look-swatch{grid-row:auto!important;width:34px;height:34px}
.look-option span:last-child{grid-column:auto!important}
.look-pink{background:linear-gradient(135deg,#1c1723 0%,#2c2838 55%,#e77bb4 100%)}
:root[data-theme="pink"] .look-option.is-on{box-shadow:0 0 0 1px var(--g-edge-bright),0 0 16px rgba(231,123,180,.25)}

/* ---- The page background, 20% darker for contrast ---------------------------------------------------
   A 20% black veil over everything behind the interface (base colour, glows, scene picture, wash),
   in the same still layer as the look's wash: every background layer drops by exactly 20% at no cost.
   The painted scenery around the pal and the splash screen are dimmed to match. */
body::after{display:block;background:linear-gradient(rgba(0,0,0,.24),rgba(0,0,0,.24)),linear-gradient(180deg,rgba(53,100,136,.085),rgba(53,100,136,.068))!important}
:root[data-scene="none"] body::after{display:block;background:linear-gradient(rgba(0,0,0,.24),rgba(0,0,0,.24))!important}
#home-scene{opacity:.6!important}
.title-screen{background:radial-gradient(58% 34% at 50% 50%,rgba(53,100,136,.22),transparent 72%),
    radial-gradient(110% 60% at 8% 0%,rgba(53,100,136,.22),transparent 62%),
    radial-gradient(100% 60% at 100% 100%,rgba(53,100,136,.19),transparent 62%),
    #1c1723!important}
/* ---- Home scenes, chosen on the profile (11.4.1) ---------------------------------------------------- */
.scene-choice{margin-top:14px}
.scene-options{display:grid;grid-auto-flow:column;grid-auto-columns:96px;gap:8px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.scene-option{scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 6px 8px;border-radius:12px;background:var(--g-deep);border:1px solid var(--g-deep-edge);color:var(--g-ink);text-align:center;min-width:0}
.scene-option canvas,.scene-option .scene-none{display:block;width:84px;height:112px;border-radius:8px;image-rendering:pixelated;background:#1c1723}
.scene-option .scene-none{background:radial-gradient(ellipse at 50% 45%,#2c2838,#1c1723 70%)}
.scene-option b{font-weight:500;font-size:11px;line-height:1.25;margin-top:3px}
.scene-option span:last-child{font-size:9.5px;color:var(--g-soft);letter-spacing:.02em}
.scene-option.is-on{border-color:var(--g-edge-bright);box-shadow:0 0 0 1px var(--g-edge-bright)}
.scene-option.is-locked{opacity:.5}
.scene-option.is-locked canvas{filter:grayscale(.85) brightness(.45)}
/* 11.5: a pal's name on home is where you rename it, so it says so */
#pet-name{cursor:pointer}
#pet-name::after{content:'✎';display:inline-block;margin-left:.4em;font-size:.56em;letter-spacing:0;vertical-align:.3em;opacity:.8}
#pet-name:hover::after{opacity:.9}
body.chest-page #pet-name::after{display:none}