/* DINO POP Light. UI color, spacing and mobile shell contracts.
   stage-layout.css continues to own fitted character and egg geometry. */
:root {
  --title-mango:#ffae24;
  --name-rocky:#995018;
  --name-trix:#b54336;
  --name-bruno:#32649a;
  --name-stella:#7650a5;
  --name-anki:#47752e;
  --name-spark:#0b6a70;
  --name-vega:#a83d79;
  --app-safe-top:calc(max(env(safe-area-inset-top,0px),var(--tg-safe-top,0px)) + var(--tg-content-safe-top,0px));
  --app-safe-right:calc(max(env(safe-area-inset-right,0px),var(--tg-safe-right,0px)) + var(--tg-content-safe-right,0px));
  --app-safe-bottom:calc(max(env(safe-area-inset-bottom,0px),var(--tg-safe-bottom,0px)) + var(--tg-content-safe-bottom,0px));
  --app-safe-left:calc(max(env(safe-area-inset-left,0px),var(--tg-safe-left,0px)) + var(--tg-content-safe-left,0px));
}

/* Species identity is independent of outfit and rarity. */
.species-name[data-species] { color:var(--species-name-color,var(--ink));font-weight:900; }
.species-name[data-species=rocky] { --species-name-color:var(--name-rocky); }
.species-name[data-species=trix] { --species-name-color:var(--name-trix); }
.species-name[data-species=bruno] { --species-name-color:var(--name-bruno); }
.species-name[data-species=stella] { --species-name-color:var(--name-stella); }
.species-name[data-species=anki] { --species-name-color:var(--name-anki); }
.species-name[data-species=spark] { --species-name-color:var(--name-spark); }
.species-name[data-species=vega] { --species-name-color:var(--name-vega); }
.primary .species-name,.secondary .species-name,.back-button .species-name { font-size:inherit;opacity:1;margin-left:0;white-space:normal; }
.pet-serial { color:var(--muted);font-weight:600; }

/* All seven rarity materials include a distinct, readable text pigment. */
.rarity-theme,[data-rarity=common] {
  --rarity-accent:#9a8b75;--rarity-text:#66543b;--rarity-soft:#f4ecdd;--rarity-edge:#78654c;
  --rarity-frame:linear-gradient(135deg,#fff9ed,#b4a389);--rarity-width:2px;
}
.rarity-theme[data-rarity=uncommon],[data-rarity=uncommon] {
  --rarity-accent:#54a55c;--rarity-text:#2b6938;--rarity-soft:#e7f4d9;--rarity-edge:#36733d;
  --rarity-frame:linear-gradient(135deg,#d9efc6,#54a55c);--rarity-width:2px;
}
.rarity-theme[data-rarity=rare],[data-rarity=rare] {
  --rarity-accent:#4299e1;--rarity-text:#1c5e9f;--rarity-soft:#e1f2ff;--rarity-edge:#2a67a1;
  --rarity-frame:linear-gradient(135deg,#bce8ff,#4299e1);--rarity-width:3px;
}
.rarity-theme[data-rarity=epic],[data-rarity=epic] {
  --rarity-accent:#9c6adb;--rarity-text:#7040a2;--rarity-soft:#f0e7ff;--rarity-edge:#71469f;
  --rarity-frame:linear-gradient(135deg,#e5ceff,#9c6adb);--rarity-width:3px;
}
.rarity-theme[data-rarity=legendary],[data-rarity=legendary] {
  --rarity-accent:#e7ac25;--rarity-text:#875a0a;--rarity-soft:#fff0bd;--rarity-edge:#a67316;
  --rarity-frame:linear-gradient(135deg,#fff4bd,#e7ac25);--rarity-width:3px;
}
.rarity-theme[data-rarity=mythic],[data-rarity=mythic] {
  --rarity-accent:#e96b83;--rarity-text:#a53656;--rarity-soft:#ffe4e8;--rarity-edge:#ab425d;
  --rarity-frame:linear-gradient(135deg,#ffd6e4,#e96b83);--rarity-width:3px;
}
.rarity-theme[data-rarity=cosmic],[data-rarity=cosmic] {
  --rarity-accent:#25afc0;--rarity-text:#0c6674;--rarity-soft:#ddf6f4;--rarity-edge:#177381;
  --rarity-frame:linear-gradient(130deg,#a0e5e5,#25afc0 50%,#bdeee5);--rarity-width:3px;
}
.rarity-label,.plot-rarity,.rarity-theme .term-badge[data-term=rarity] { color:var(--rarity-text);font-weight:800; }
.plot-rarity { border-color:var(--rarity-accent);background:linear-gradient(#fffdf4,var(--rarity-soft)); }
.rarity-theme .term-badge[data-term=rarity] { background:linear-gradient(#fffdf4,var(--rarity-soft));border-color:var(--rarity-accent); }
.passport-tags .rarity-label { padding:0;border:0;border-radius:0;background:transparent;color:var(--rarity-text); }
.rarity-theme.market-card .badge { background:var(--rarity-soft);border-color:var(--rarity-accent);color:var(--rarity-text); }
.chance-ribbon i { background:var(--rarity-accent); }
.egg-odds .prob-row>span { color:var(--rarity-text); }
.egg-odds .prob-row>span i { background:var(--rarity-accent); }
.rarity-guide-table th .rarity-label { color:var(--rarity-text); }
.rarity-theme[data-rarity=mythic] .plot-caption,
.rarity-theme[data-rarity=mythic] .stat-card,
.rarity-theme[data-rarity=mythic].market-card,
.rarity-theme[data-rarity=cosmic] .plot-caption,
.rarity-theme[data-rarity=cosmic] .stat-card,
.rarity-theme[data-rarity=cosmic].market-card { outline:1px solid var(--rarity-accent);outline-offset:-6px;border-color:transparent; }

/* Heading and content rhythm across all routes. */
.page-head { flex-wrap:wrap;align-items:center;gap:12px;padding:18px 0 20px; }
.page-head h1 {
  flex:1 1 max-content;max-width:100%;font-size:clamp(28px,8.7cqw,35px);line-height:1.12;
  font-weight:900;letter-spacing:-.65px;color:var(--title-mango);padding:1px 0 5px;
  -webkit-text-stroke:1.15px var(--ink);paint-order:stroke fill;
  text-shadow:0 2px 0 var(--lagoon),0 3px 0 var(--ink);
}
.page-head h1 .species-name { -webkit-text-stroke:0;text-shadow:0 1px 0 #fffdf4,0 2px 0 #173f421f; }
.head-reading { flex:none;margin-left:auto; }
.intro-toggle { min-height:44px; }
.route-intro { margin-bottom:18px; }
.route-page { padding-bottom:8px; }
.section-label { margin-top:24px;margin-bottom:14px; }
.section-label h2,.nest-receipt h2,.guide-learning-card h2,.leaderboard-card>h2 { font-size:20px;line-height:1.35;letter-spacing:-.35px; }
.data-row { gap:14px;align-items:flex-start;padding-top:12px;padding-bottom:12px; }
.data-row>span { min-width:0; }
.data-row>b { min-width:0;max-width:62%;overflow-wrap:anywhere; }
.notice,.small-copy { line-height:1.7; }
.notice { margin-top:20px; }
.route-page>.primary+.small-copy,.route-page>.secondary+.small-copy { margin-top:18px; }
.route-page>.primary+.notice,.route-page>.secondary+.notice { margin-top:22px; }
.route-page>.button-row { margin-top:18px; }
.route-page>.record-sheet,.route-page>.appearance-random,.route-page>.owned-appearances,.route-page>.accessory-shop { margin-top:24px; }
.nest-receipt { margin-top:22px;padding:20px 16px 22px; }
.nest-receipt>.primary { margin-top:18px;min-height:52px; }
.nest-receipt>.small-copy { margin-top:18px;padding:0 1px; }
.nest-receipt+.notice { margin-top:22px; }
.validation-message { margin-top:16px;font-size:13px;line-height:1.65; }
.guide-learning-card { padding:19px 17px 20px; }
.guide-learning-card>button { margin-top:16px; }
.guide-learning-card>small { margin-top:17px; }
.guide-home>.input-label { margin-top:24px; }
.egg-facts { gap:14px;align-items:start; }
.egg-facts>div:last-child { min-width:0; }
.egg-facts b { line-height:1.5; }
.egg-purchases { font-size:12px;line-height:1.5;color:#4e6b5b; }
.egg-series-help { margin-top:12px; }
.egg-buy { margin-top:10px; }
.sheet { padding-bottom:30px; }
.sheet>p+.primary,.sheet>.panel+.primary { margin-top:18px; }
.sheet>.primary+.small-copy,.sheet>.primary+p { margin-top:18px; }

/* Island heading and stage share one continuous, responsive scene crop. */
.island-hero { --island-gutter:18px;position:relative;isolation:isolate;margin:0 calc(-1 * var(--island-gutter)); }
.island-hero:before { content:'';position:absolute;inset:0;z-index:-2;background-image:var(--route-scene);background-size:cover;background-position:center 30%;filter:hue-rotate(var(--scene-hue,0deg));pointer-events:none; }
.island-hero:after { content:'';position:absolute;inset:0;z-index:-1;background:var(--decor-tint);mix-blend-mode:soft-light;pointer-events:none; }
.island-hero>.page-head { margin:0 var(--island-gutter); }
.island-hero>.home-scene { margin:0;background:transparent; }
.island-hero>.home-scene>.scene-background,.island-hero>.home-scene:after { display:none; }
.island-shortcut { border-radius:18px; }

/* One clear object explains each utility scene. */
.page-head~.utility-scene { height:88px;margin:0 0 20px;border-radius:20px; }
.page-head~.utility-scene .scene-background { object-position:center 72%; }
.page-head~.utility-scene .utility-object { width:56px;height:56px;left:50%;bottom:13px;filter:drop-shadow(0 4px 3px #4f694d33); }
.utility-companion { display:none; }

/* Full-phone hatch: a single backdrop from first frame to final receipt. */
.phone[data-hatch]>.status-bar,.phone[data-hatch]>.hud,.phone[data-hatch]>.dock,.phone[data-hatch]>.home-indicator,
.phone[data-hatch]>.screen,.phone[data-hatch]>.toast { visibility:hidden;pointer-events:none; }
.phone[data-hatch]>.overlay-root { inset:0; }
.hatch-layer.hatch-v6 { display:block;padding:0;background:#dce8cc; }
.hatch-v6:before { display:none; }
.hatch-v6 .hatch-canvas-host { position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;margin:0;z-index:0; }
.hatch-v6 .dino-hatch { min-height:0; }
.hatch-v6 .hatch-top {
  position:absolute;top:calc(24px + var(--app-safe-top));left:calc(18px + var(--app-safe-left));right:calc(18px + var(--app-safe-right));
  display:block;width:auto;min-height:0;padding:0;z-index:3;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .25s;
}
.hatch-v6 .hatch-top h1 {
  width:100%;max-width:none;min-height:0;margin:0;font-size:clamp(30px,9.3cqw,38px);line-height:1.1;letter-spacing:-.7px;
  text-align:center;font-weight:900;color:var(--title-mango);-webkit-text-stroke:1.2px var(--ink);paint-order:stroke fill;
  text-shadow:0 2px 0 var(--lagoon),0 3px 0 var(--ink);
}
.hatch-v6 .hatch-footer {
  position:absolute;left:calc(18px + var(--app-safe-left));right:calc(18px + var(--app-safe-right));bottom:calc(18px + var(--app-safe-bottom));
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 54px;gap:16px;width:auto;min-height:0;
  z-index:3;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .25s;
}
.hatch-v6 .hatch-result {
  grid-area:1 / 1;position:relative;inset:auto;align-self:stretch;width:100%;height:auto;min-height:144px;margin:0;padding:16px 18px 18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:24px;
  border:var(--rarity-width) solid transparent;background:linear-gradient(145deg,#fffdf5f5,var(--rarity-soft)) padding-box,var(--rarity-frame) border-box;
  box-shadow:inset 0 2px 0 #fffdf5,0 4px 0 var(--rarity-edge),0 7px 14px #173f4224;
}
.hatch-v6 .hatch-result .badge { padding:6px 12px;font-size:13px;line-height:1.35;background:var(--rarity-soft);border-color:var(--rarity-accent);color:var(--rarity-text); }
.hatch-v6 .hatch-result h2 { font-size:32px;line-height:1.15;letter-spacing:-.5px;margin:10px 0 8px; }
.hatch-result-meta { display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px; }
.hatch-v6 .hatch-result p { font-size:13px;line-height:1.5;color:#45665a; }
.hatch-v6 .hatch-continue { grid-area:2 / 1;position:relative;inset:auto;width:100%;height:54px;min-height:54px;max-height:none;margin:0;font-size:15px; }
.hatch-v6[data-stage=complete] .hatch-top,.hatch-v6[data-stage=complete] .hatch-footer { visibility:visible;opacity:1; }
.hatch-v6[data-stage=complete] .hatch-footer { pointer-events:auto; }
.hatch-v6 .hatch-continue.ready { visibility:visible;opacity:1; }

@container phone (max-width:359px) {
  .island-hero { --island-gutter:14px; }
  .page-head { gap:10px;padding-bottom:18px; }
  .page-head h1 { font-size:29px;-webkit-text-stroke:1.1px var(--ink); }
  .page-head~.utility-scene { height:76px; }
  .page-head~.utility-scene .utility-object { width:50px;height:50px;bottom:11px; }
  .nest-receipt { padding:18px 14px 21px; }
  .nest-receipt>.primary { padding-left:11px;padding-right:11px; }
  .hatch-v6 .hatch-top { left:calc(14px + var(--app-safe-left));right:calc(14px + var(--app-safe-right)); }
  .hatch-v6 .hatch-footer { left:calc(14px + var(--app-safe-left));right:calc(14px + var(--app-safe-right)); }
  .hatch-v6 .hatch-result { padding-left:12px;padding-right:12px; }
  .hatch-v6 .hatch-result h2 { font-size:29px; }
}

@media (max-width:680px) {
  body { overflow:hidden;min-height:var(--tg-app-height,100dvh); }
  .preview-layout { display:block;width:100%;height:var(--tg-app-height,100dvh);min-height:0;padding:0; }
  .phone-frame { width:100%;height:100%;max-width:none;padding:0;border:0;border-radius:0;box-shadow:none; }
  .phone { width:100%;height:100%;max-height:none;min-height:0;border-radius:0;padding:var(--app-safe-top) var(--app-safe-right) 0 var(--app-safe-left); }
  .status-bar,.home-indicator,.demo-console { display:none; }
  .hud { height:66px;padding-top:6px; }
  .screen { padding-bottom:calc(116px + var(--app-safe-bottom)); }
  .dock { left:calc(12px + var(--app-safe-left));right:calc(12px + var(--app-safe-right));bottom:calc(14px + var(--app-safe-bottom)); }
  .overlay-root { inset:0; }
  .sheet { left:calc(8px + var(--app-safe-left));right:calc(8px + var(--app-safe-right));bottom:calc(12px + var(--app-safe-bottom));max-height:calc(100% - 24px - var(--app-safe-top) - var(--app-safe-bottom)); }
  .drawer { padding-top:calc(24px + var(--app-safe-top));padding-bottom:calc(24px + var(--app-safe-bottom)); }
}

@media (max-height:680px) {
  .hatch-v6 .hatch-top { top:calc(18px + var(--app-safe-top)); }
  .hatch-v6 .hatch-top h1 { font-size:30px; }
  .hatch-v6 .hatch-footer { bottom:calc(13px + var(--app-safe-bottom));grid-template-rows:auto 50px;gap:14px; }
  .hatch-v6 .hatch-result { min-height:132px;padding-top:13px;padding-bottom:14px; }
  .hatch-v6 .hatch-result h2 { font-size:28px;margin-top:8px;margin-bottom:7px; }
  .hatch-v6 .hatch-continue { height:50px;min-height:50px; }
}

@media (prefers-reduced-motion:reduce) {
  .hatch-v6 .hatch-top,.hatch-v6 .hatch-footer { transition:none; }
}
.reduced-motion .hatch-v6 .hatch-top,.reduced-motion .hatch-v6 .hatch-footer { transition:none; }