/* ==========================================================================
   Hatch Your Own Dinosaur (hatch.php, 2026-10). Sits on the redesigned
   sub-page frame (body.sub.scene + .ab-scene/.ab-card from style.css).
   Kid-facing buttons use Fredoka (imported by style.css); all classes .hx-*.
   ========================================================================== */
body.hx .site-footer-legal a[href^="http"] {display:none;}   /* no off-site links in the kids' area */
body.hx .site-footer-legal span:has(+ a[href^="http"]) {display:none;}

.hx-card {max-width:880px; padding-top:22px; overflow:hidden;}
.hx-card, .hx-card button, .hx-card input {font-family:Fredoka,'PT Sans',sans-serif;}
.hx-topbar {display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:44px; margin:0 0 4px;}
.hx-topbar #hx-player[hidden] + .hx-sound {margin-left:auto;}
.hx-chip {display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:6px 16px 6px 8px; border:2px solid #f1e6cf; border-radius:30px; background:#fff; color:#5a3d0c; font-weight:600; font-size:16px; cursor:pointer; box-shadow:0 2px 6px rgba(90,61,12,.08);}
.hx-card [hidden] {display:none !important;}
.hx-chip:hover, .hx-chip:focus-visible {border-color:#e6cf9d;}
.hx-sound {padding-left:14px;}
.hx-sound-icon {width:22px; height:22px; background:no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='%235a3d0c'/%3E%3Cpath d='M17 9l5 6M22 9l-5 6' stroke='%23e63946' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");}
.hx-sound.is-on {background:#e8f4d8; border-color:#cfe6b3;}
.hx-sound.is-on .hx-sound-icon {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='%235a3d0c'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12' stroke='%232e9e44' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");}
.hx-badge-icon {display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; box-shadow:inset 0 -3px 0 rgba(0,0,0,.15); flex:0 0 auto;}
.hx-chip .hx-badge-icon {width:30px; height:30px;}

.hx-title {margin-top:4px;}
.hx-sub {font-family:'PT Sans',sans-serif; font-weight:700; font-size:22px; color:#2e9e44; margin:0 0 18px;}
.hx-card[data-view="home"] .hx-title, .hx-card[data-view="home"] .hx-sub,
.hx-card[data-view="nest"] .hx-sub, .hx-card[data-view="celebrate"] .hx-sub {display:none;}
.hx-card[data-view="nest"] .hx-title, .hx-card[data-view="celebrate"] .hx-title {font-size:34px; margin-bottom:10px;}
.hx-h2 {font-family:Fredoka,'PT Sans',sans-serif; font-weight:700; font-size:28px; line-height:1.15; color:#1e3a6e; margin:18px 0 12px;}
.hx-h3 {font-family:Fredoka,'PT Sans',sans-serif; font-weight:700; font-size:21px; color:#5a3d0c; margin:22px 0 10px;}
.hx-step {display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:#2e9e44; color:#fff; font-size:21px; margin-right:6px; vertical-align:2px;}
.hx-msg {font-size:21px; font-weight:500; line-height:1.35; color:#3b2a0a; margin:10px auto 16px; max-width:560px;}
.hx-hint {font-family:'PT Sans',sans-serif; font-size:15px; color:#6b5a3e; margin:8px 0 0;}
.hx-note {font-size:18px; color:#5a3d0c;}
.hx-storage-warn {margin:18px auto 0; max-width:560px; padding:12px 16px; border-radius:14px; background:#fff3cd; color:#6b4b00; font-family:'PT Sans',sans-serif; font-size:16px;}

/* big friendly buttons */
.hx-btn {display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:58px; padding:10px 34px; border:3px solid #fff; border-radius:40px; background:#FF471F; color:#fff; font-family:Fredoka,'PT Sans',sans-serif; font-weight:700; font-size:22px; letter-spacing:.02em; text-decoration:none; cursor:pointer; box-shadow:0 6px 0 #b8300f, 0 10px 18px rgba(0,0,0,.16); transition:transform .12s ease, box-shadow .12s ease, opacity .2s ease; -webkit-tap-highlight-color:transparent; touch-action:manipulation;}
.hx-btn:hover, .hx-btn:focus-visible {color:#fff; text-decoration:none; transform:translateY(-2px); box-shadow:0 8px 0 #b8300f, 0 12px 20px rgba(0,0,0,.18);}
.hx-btn:active {transform:translateY(3px); box-shadow:0 2px 0 #b8300f;}
.hx-btn:disabled {opacity:.45; cursor:default; transform:none; box-shadow:0 4px 0 #b8300f;}
.hx-btn-big {font-size:28px; min-height:68px; padding:12px 46px; margin-top:16px;}
.hx-btn-play {background:#2e9e44; box-shadow:0 6px 0 #1e6e2f, 0 10px 18px rgba(0,0,0,.16); margin-top:8px;}
.hx-btn-play:hover, .hx-btn-play:focus-visible {box-shadow:0 8px 0 #1e6e2f, 0 12px 20px rgba(0,0,0,.18);}
.hx-btn-play:active {box-shadow:0 2px 0 #1e6e2f;}
.hx-btn-play span {font-size:.7em;}
.hx-btn-glow {animation:hxGlow 1.4s ease-in-out infinite;}
.hx-link {background:none; border:0; padding:10px; min-height:44px; color:#1a73c9; font-weight:600; font-size:17px; text-decoration:underline; cursor:pointer;}
.hx-card :focus-visible {outline:4px solid #35b6f0; outline-offset:3px;}

/* ---------- 1. choose ---------- */
.hx-egg-pick {display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; max-width:720px; margin:0 auto;}
.hx-egg-btn {position:relative; display:block; padding:12px 8px 4px; border:4px solid transparent; border-radius:26px; background:#fff; cursor:pointer; box-shadow:0 4px 12px rgba(90,61,12,.1); transition:transform .15s ease, border-color .15s ease, background .15s ease; -webkit-tap-highlight-color:transparent;}
.hx-egg-btn svg {display:block; width:100%; height:auto;}
.hx-egg-btn:hover {transform:translateY(-4px);}
.hx-egg-btn.is-on {border-color:#2e9e44; background:#eefbe3; transform:translateY(-4px) scale(1.04);}
.hx-egg-btn.is-on .hx-egg-rock {animation:hxHop .6s ease;}
.hx-egg-check {position:absolute; top:-12px; right:-12px; width:40px; height:40px; border-radius:50%; background:#2e9e44; color:#fff; font-size:24px; line-height:40px; font-weight:700; border:3px solid #fff; opacity:0; transform:scale(.4); transition:opacity .15s ease, transform .2s ease;}
.hx-egg-btn.is-on .hx-egg-check {opacity:1; transform:scale(1);}
.hx-name-row {display:flex; justify-content:center; gap:10px; max-width:440px; margin:0 auto;}
.hx-card input.hx-name {flex:1 1 auto; min-width:0; height:62px; box-sizing:border-box; padding:0 20px; border:3px solid #e6cf9d; border-radius:20px; background:#fff; font-size:28px !important; font-weight:600; color:#1e3a6e; text-align:center; box-shadow:inset 0 2px 4px rgba(0,0,0,.05); margin:0;}
.hx-card input.hx-name:focus {border-color:#35b6f0; outline:none; box-shadow:0 0 0 4px rgba(53,182,240,.25);}
.hx-dice {flex:0 0 62px; height:62px; border:3px solid #e6cf9d; border-radius:20px; background:#fff8ea; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.hx-dice:active svg {transform:rotate(90deg);}
.hx-dice svg {transition:transform .2s ease;}
.hx-name-chips {display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:12px auto 0; max-width:520px;}
.hx-name-chip {min-height:48px; padding:6px 18px; border:0; border-radius:24px; background:#e6f4ff; color:#1e3a6e; font-size:19px; font-weight:600; cursor:pointer; box-shadow:0 3px 0 #b9dcf6;}
.hx-name-chip:nth-child(2) {background:#ffe8f2; box-shadow:0 3px 0 #f6bcd5;}
.hx-name-chip:nth-child(3) {background:#eefbe3; box-shadow:0 3px 0 #c9e8ad;}
.hx-name-chip:nth-child(4) {background:#fff4d6; box-shadow:0 3px 0 #f2d98d;}
.hx-name-chip:nth-child(5) {background:#f1e9ff; box-shadow:0 3px 0 #d6c4fb;}
.hx-name-chip:active {transform:translateY(2px); box-shadow:none;}

/* ---------- 2. nest ---------- */
.hx-tabs {display:inline-flex; gap:6px; padding:5px; border-radius:30px; background:#efe5d0; margin:4px 0 6px;}
.hx-tab {min-height:46px; padding:6px 20px; border:0; border-radius:24px; background:transparent; color:#5a3d0c; font-size:18px; font-weight:600; cursor:pointer;}
.hx-tab.is-on {background:#fff; box-shadow:0 2px 6px rgba(90,61,12,.15);}
.hx-egg-name {margin-top:6px;}
.hx-stage-pill {display:inline-block; margin:0 0 4px; padding:6px 18px; border-radius:20px; background:#fff; border:2px solid #f1e6cf; font-size:18px; font-weight:600; color:#5a3d0c;}
.hx-pill-wiggling {background:#fff4d6; border-color:#f2d98d;}
.hx-pill-cracking {background:#ffe8f2; border-color:#f6bcd5;}
.hx-pill-almost {background:#e6f4ff; border-color:#b9dcf6;}
.hx-pill-hatching {background:#2e9e44; border-color:#fff; color:#fff;}
.hx-egg-big {display:block; width:min(300px, 72vw); margin:4px auto 0; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.hx-egg-big svg {display:block; width:100%; height:auto; overflow:visible;}
.hx-egg-big.is-poked .hx-egg-rock {animation:hxPoke .5s ease;}
.hx-nest.is-ready .hx-egg-big svg {filter:drop-shadow(0 0 18px rgba(255,212,63,.9));}
.hx-meter {display:flex; justify-content:center; flex-wrap:wrap; gap:4px; margin:12px auto 0; max-width:520px;}
.hx-meter-star {width:42px; height:42px;}
.hx-meter-star svg {width:100%; height:100%; fill:#ece0c6; stroke:#d8c7a1; stroke-width:1.2;}
.hx-meter-star.is-on svg {fill:#ffcc2e; stroke:#e09a00; filter:drop-shadow(0 2px 0 rgba(176,110,0,.35));}
.hx-meter-star.is-on:last-of-type svg, .hx-meter-star.is-on {animation:none;}

/* egg + dino SVG animations (transform-box so each part pivots on itself) */
.hx-egg-rock, .hx-peek, .hx-zzz, .hx-tail, .hx-arm-l, .hx-arm-r, .hx-eyes {transform-box:fill-box;}
.hx-egg-rock {transform-origin:50% 100%;}
.hx-stage-sleeping .hx-egg-rock {animation:hxRock 3.4s ease-in-out infinite;}
.hx-stage-wiggling .hx-egg-rock {animation:hxWiggle 1.6s ease-in-out infinite;}
.hx-stage-cracking .hx-egg-rock {animation:hxWiggle 1.1s ease-in-out infinite;}
.hx-stage-almost .hx-egg-rock {animation:hxHopWiggle 1.3s ease-in-out infinite;}
.hx-stage-hatching .hx-egg-rock {animation:hxWiggle .55s ease-in-out infinite;}
.hx-peek {transform-origin:50% 100%; animation:hxPeek 2.6s ease-in-out infinite;}
.hx-zzz {animation:hxZzz 2.8s ease-in-out infinite; transform-origin:0 100%;}
.hx-sparkles polygon {transform-box:fill-box; transform-origin:center; animation:hxTwinkle 1s ease-in-out infinite alternate;}
.hx-sparkles polygon:nth-child(2n) {animation-delay:.5s;}
.hx-egg-pick .hx-egg-rock {animation:none;}
.hx-egg-pick .hx-egg-btn:hover .hx-egg-rock {animation:hxWiggle .9s ease-in-out;}

/* ---------- 3. celebrate ---------- */
.hx-celebrate {position:relative; padding-bottom:8px;}
.hx-hatch-stage {position:relative; width:min(300px, 72vw); aspect-ratio:200 / 300; margin:0 auto;}
.hx-hatch-stage > * {position:absolute;}
.hx-glow {inset:-10%; border-radius:50%; background:radial-gradient(circle, rgba(255,230,120,.95) 0%, rgba(255,214,90,.45) 40%, rgba(255,214,90,0) 70%); opacity:0; animation:hxFadeIn .6s ease .5s forwards;}
.hx-hatch-dino {left:9%; right:9%; bottom:27%; transform:translateY(30%) scale(.6); opacity:0; animation:hxRise .9s cubic-bezier(.3,1.5,.5,1) .75s forwards;}
.hx-hatch-dino svg {display:block; width:100%; height:auto;}
.hx-shell {left:0; bottom:0; width:100%; height:auto;}
.hx-shell-top {transform-origin:70% 60%; animation:hxPreShake .45s ease-in-out, hxShellTop 1.1s cubic-bezier(.4,0,.6,1) .45s forwards;}
.hx-burst {left:-14%; top:-4%; width:128%; height:auto; opacity:0; animation:hxBurst 1.2s ease .8s forwards;}
.hx-hooray {font-size:36px; color:#2e9e44;}
.hx-celebrate.is-still .hx-glow, .hx-celebrate.is-still .hx-burst {opacity:1; animation:none;}
.hx-celebrate.is-still .hx-hatch-dino {opacity:1; transform:none; animation:none;}
.hx-celebrate.is-still .hx-shell-top {display:none;}

.hx-confetti {position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:5;}
.hx-confetti i {position:absolute; top:-20px; width:10px; height:16px; border-radius:2px; animation:hxFall 3s linear forwards;}
.hx-confetti i.is-round {width:12px; height:12px; border-radius:50%;}

/* ---------- 4. home ---------- */
.hx-home-stage {position:relative; width:min(330px, 78vw); margin:6px auto 0;}
.hx-dino-big {display:block; width:100%; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.hx-dino-big svg, .hx-coll svg, .hx-player-pic svg, .hx-modal-pic svg {display:block; width:100%; height:auto; overflow:visible;}
.hx-dino-big .hx-dino-svg {animation:hxBob 2.6s ease-in-out infinite; transform-origin:50% 100%;}
.hx-dino-big.is-happy .hx-dino-svg {animation:hxJump .7s ease;}
.hx-dino-big .hx-tail {transform-origin:0% 80%; animation:hxWag 1.8s ease-in-out infinite;}
.hx-dino-big .hx-eyes {transform-origin:50% 50%; animation:hxBlink 4.5s infinite;}
.hx-dino-big.is-happy .hx-arm-r {transform-origin:20% 80%; animation:hxWave .7s ease;}
.hx-bubble {position:absolute; top:-6px; left:50%; transform:translateX(-50%); z-index:2; white-space:nowrap; padding:10px 18px; border-radius:20px; background:#fff; color:#1e3a6e; font-size:19px; font-weight:600; box-shadow:0 4px 12px rgba(0,0,0,.15); animation:hxPopIn .25s ease;}
.hx-bubble::after {content:""; position:absolute; left:50%; bottom:-10px; margin-left:-9px; border:10px solid transparent; border-top-color:#fff; border-bottom:0;}
.hx-dino-name {font-size:38px; margin:4px 0 2px;}
.hx-starcount {display:inline-flex; align-items:center; gap:6px; margin:0; padding:6px 18px; border-radius:24px; background:#fff4d6; color:#6b4b00; font-size:19px;}
.hx-starcount .hx-star {width:26px; height:26px; fill:#ffcc2e; stroke:#e09a00;}
.hx-next {max-width:440px; margin:14px auto 0;}
.hx-next p {margin:0 0 8px; font-size:18px; color:#3b2a0a;}
.hx-bar {height:18px; border-radius:10px; background:#efe5d0; overflow:hidden; box-shadow:inset 0 2px 3px rgba(0,0,0,.08);}
.hx-bar span {display:block; height:100%; border-radius:10px; background:linear-gradient(90deg, #ffcc2e, #ff9f3c);}
.hx-closet {max-width:640px; margin:0 auto;}
.hx-acc-grid {display:grid; grid-template-columns:repeat(5, 1fr); gap:10px;}
.hx-acc {position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; min-height:110px; padding:10px 6px 8px; border:3px solid #f1e6cf; border-radius:18px; background:#fff; cursor:pointer; transition:transform .12s ease, border-color .12s ease, background .12s ease;}
.hx-acc:hover:not(:disabled) {transform:translateY(-3px);}
.hx-acc.is-on {border-color:#2e9e44; background:#eefbe3;}
.hx-acc.is-locked {cursor:default; background:#f6f1e6;}
.hx-acc.is-locked .hx-acc-pic {filter:grayscale(1) brightness(1.15); opacity:.45;}
.hx-acc-pic {display:block; width:100%; height:62px;}
.hx-acc-svg {display:block; width:100%; height:100%;}
.hx-acc-label {font-size:14px; font-weight:600; line-height:1.15; color:#5a3d0c; display:inline-flex; align-items:center; gap:2px;}
.hx-star-sm {width:16px; height:16px; fill:#ffcc2e; stroke:#e09a00; vertical-align:-2px;}
.hx-lock {position:absolute; top:6px; right:6px;}
.hx-new {position:absolute; top:-10px; left:50%; transform:translateX(-50%); padding:2px 10px; border-radius:12px; background:#ff5fa2; color:#fff; font-size:13px; font-weight:700; animation:hxTwinkle .8s ease-in-out infinite alternate;}
.hx-colors {display:flex; flex-wrap:wrap; justify-content:center; gap:12px;}
.hx-swatch {position:relative; width:58px; height:58px; border-radius:50%; border:4px solid #fff; cursor:pointer; background:radial-gradient(circle at 70% 30%, var(--sw2) 0 18%, transparent 19%), var(--sw); box-shadow:0 0 0 2px #e6cf9d, 0 3px 8px rgba(0,0,0,.12);}
.hx-swatch.is-on {box-shadow:0 0 0 4px #2e9e44, 0 3px 8px rgba(0,0,0,.12); transform:scale(1.08);}
.hx-swatch.is-locked {cursor:default; filter:saturate(.25); opacity:.6;}
.hx-swatch-lock {position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;}
.hx-swatch-lock small {font-size:12px; font-weight:700; color:#5a3d0c;}
.hx-actions {margin:22px 0 4px;}
.hx-newegg {display:flex; align-items:center; gap:16px; max-width:520px; margin:22px auto 0; padding:14px 20px; border-radius:22px; background:#eef6ff; box-shadow:inset 0 0 0 2px #cfe3f7; text-align:left;}
.hx-newegg svg {flex:0 0 70px; width:70px; height:auto;}
.hx-newegg p {margin:0 0 6px; font-size:18px; color:#1e3a6e;}
.hx-newegg.is-ready {background:#fff1f7; box-shadow:inset 0 0 0 2px #f6bcd5;}
.hx-newegg .hx-btn {min-height:50px; font-size:19px; padding:8px 24px;}
.hx-collection {display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
.hx-coll {width:104px; padding:8px 6px; border:3px solid #f1e6cf; border-radius:18px; background:#fff; cursor:pointer; font-size:15px; font-weight:600; color:#5a3d0c;}
.hx-coll.is-on {border-color:#2e9e44; background:#eefbe3;}
.hx-coll span {display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hx-rename {margin:16px 0 0;}

/* unlock pop-up */
.hx-modal {position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(40,28,8,.45); animation:hxFadeIn .2s ease;}
.hx-modal-card {position:relative; z-index:6; width:100%; max-width:420px; padding:24px 22px 26px; border-radius:28px; background:#fbf6ec; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.3); font-family:Fredoka,'PT Sans',sans-serif; animation:hxPopIn .35s cubic-bezier(.3,1.5,.5,1);}
.hx-modal-eyebrow {margin:0; font-size:18px; font-weight:600; color:#ff5fa2;}
.hx-modal-pic {width:200px; margin:6px auto 0;}
.hx-modal .hx-h2 {margin:8px 0 4px;}

/* ---------- 5. players ---------- */
.hx-player-grid {display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:14px; max-width:760px; margin:0 auto;}
.hx-player-card {position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 10px; border:3px solid #f1e6cf; border-radius:22px; background:#fff; cursor:pointer; font-family:Fredoka,'PT Sans',sans-serif; color:#5a3d0c;}
.hx-player-card.is-on {border-color:#2e9e44;}
.hx-player-card > .hx-badge-icon {position:absolute; top:10px; left:10px;}
.hx-player-pic {display:block; width:110px; height:120px;}
.hx-player-pic svg {height:100%; width:auto; margin:0 auto;}
.hx-player-name {font-size:18px; font-weight:600;}
.hx-player-stars {font-size:15px; color:#6b4b00;}
.hx-player-add {cursor:default; border-style:dashed; justify-content:center;}
.hx-icon-pick {display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;}
.hx-icon-btn {width:52px; height:52px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer;}
.hx-icon-btn .hx-badge-icon {width:48px; height:48px;}
.hx-icon-btn[data-used] {opacity:.4;}

/* ---------- grown-ups ---------- */
.hx-grown {position:relative; z-index:2; max-width:880px; margin:20px auto 0; background:#fff; border-radius:22px; box-shadow:0 6px 20px rgba(60,40,10,.18); text-align:left; font-family:'PT Sans',sans-serif; color:#3b2a0a;}
.hx-grown summary {cursor:pointer; padding:16px 22px; list-style:none; display:flex; align-items:center; gap:10px;}
.hx-grown summary::-webkit-details-marker {display:none;}
.hx-grown summary::before {content:"\25B6"; font-size:13px; color:#8a7a5e; transition:transform .15s ease;}
.hx-grown details[open] summary::before {transform:rotate(90deg);}
.hx-grown summary h2 {display:inline; margin:0; font-family:'PT Sans',sans-serif; font-size:19px; font-weight:700; color:#5a3d0c;}
.hx-grown-body {padding:0 22px 20px;}
.hx-grown-body p {font-size:16px; line-height:1.5; margin:0 0 10px;}
.hx-grown-body h3 {font-family:'PT Sans',sans-serif; font-size:17px; font-weight:700; color:#5a3d0c; margin:18px 0 8px;}
.hx-small {font-size:15px !important; color:#6b5a3e;}
.hx-grown-row {display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:8px 0;}
.hx-gbtn {display:inline-flex; align-items:center; min-height:42px; padding:6px 16px; border:2px solid #e6cf9d; border-radius:12px; background:#fff8ea; color:#5a3d0c; font-family:'PT Sans',sans-serif; font-size:15px; font-weight:700; cursor:pointer; margin:0;}
.hx-gbtn:hover {background:#fff1d6;}
.hx-gbtn-go {background:#2e9e44; border-color:#2e9e44; color:#fff;}
.hx-gbtn-go:hover {background:#278a3b;}
.hx-gbtn-sm {min-height:34px; padding:3px 12px; font-size:14px;}
.hx-file input {position:absolute; width:1px; height:1px; opacity:0;}
.hx-file:focus-within {outline:3px solid #35b6f0;}
.hx-grown textarea {width:100%; box-sizing:border-box; min-height:70px; padding:10px; border:2px solid #e6cf9d; border-radius:12px; font-family:monospace; font-size:13px;}
.hx-gmsg {font-size:15px; font-weight:700; color:#2e9e44; margin:0;}
.hx-gmsg.is-bad {color:#c0392b;}
.hx-gconfirm {padding:12px 14px; border-radius:12px; background:#fff3cd; margin:8px 0;}
.hx-gconfirm p {margin:0 0 8px;}
.hx-glist {list-style:none; margin:0; padding:0;}
.hx-glist li {display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid #f1e6cf; font-size:16px;}
.hx-glist li span:not(.hx-badge-icon) {flex:1 1 auto;}
.hx-glist .hx-badge-icon {width:28px; height:28px;}

.hx-test {position:relative; z-index:3; max-width:880px; margin:16px auto 0; padding:12px 16px; border-radius:14px; background:#1e3a6e; color:#fff; display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-family:'PT Sans',sans-serif;}
.hx-test button {min-height:40px; padding:4px 12px; border:0; border-radius:10px; background:#fff; color:#1e3a6e; font-weight:700; cursor:pointer;}

/* ---------- phones ---------- */
@media (max-width: 767px) {
  .hx-card {padding:14px 14px 20px;}
  .hx-sub {font-size:18px; margin-bottom:10px;}
  .hx-h2 {font-size:23px; margin:14px 0 10px;}
  .hx-egg-pick {grid-template-columns:repeat(2, 1fr); gap:12px; max-width:340px;}
  .hx-card input.hx-name {font-size:24px !important; height:58px;}
  .hx-dice {flex-basis:58px; height:58px;}
  .hx-msg {font-size:18px;}
  .hx-meter-star {width:30px; height:30px;}
  .hx-btn-big {font-size:24px; padding:10px 30px;}
  .hx-acc-grid {grid-template-columns:repeat(3, 1fr);}
  .hx-dino-name {font-size:32px;}
  .hx-newegg {flex-direction:column; text-align:center;}
  .hx-chip {font-size:14px; padding-right:12px;}
  .hx-grown {margin-top:14px; border-radius:18px;}
  .hx-grown-body {padding:0 16px 16px;}
}

/* ---------- keyframes ---------- */
@keyframes hxRock {0%,100% {transform:rotate(-3deg);} 50% {transform:rotate(3deg);}}
@keyframes hxWiggle {0%,40%,100% {transform:rotate(0);} 8% {transform:rotate(-8deg);} 16% {transform:rotate(7deg);} 24% {transform:rotate(-6deg);} 32% {transform:rotate(4deg);}}
@keyframes hxHopWiggle {0%,100% {transform:translateY(0) rotate(0);} 10% {transform:translateY(-14px) rotate(-6deg);} 20% {transform:translateY(0) rotate(5deg);} 30% {transform:translateY(-8px) rotate(-4deg);} 40% {transform:translateY(0) rotate(0);}}
@keyframes hxHop {0%,100% {transform:translateY(0);} 40% {transform:translateY(-16px);} 70% {transform:translateY(0) scaleY(.94);}}
@keyframes hxPoke {0%,100% {transform:rotate(0);} 20% {transform:rotate(-12deg);} 45% {transform:rotate(10deg);} 70% {transform:rotate(-6deg);}}
@keyframes hxPeek {0%,100% {transform:translateY(16px);} 30%,70% {transform:translateY(0);}}
@keyframes hxZzz {0% {opacity:0; transform:translate(0,6px);} 30%,70% {opacity:1;} 100% {opacity:0; transform:translate(8px,-10px);}}
@keyframes hxTwinkle {from {transform:scale(.7); opacity:.6;} to {transform:scale(1.15); opacity:1;}}
@keyframes hxGlow {0%,100% {box-shadow:0 6px 0 #b8300f, 0 0 0 0 rgba(255,204,46,.7);} 50% {box-shadow:0 6px 0 #b8300f, 0 0 0 14px rgba(255,204,46,0);}}
@keyframes hxFadeIn {from {opacity:0;} to {opacity:1;}}
@keyframes hxPopIn {from {opacity:0; transform:translateX(var(--tx,0)) scale(.6);} to {opacity:1;}}
@keyframes hxPreShake {0%,100% {transform:rotate(0);} 25% {transform:rotate(-6deg);} 75% {transform:rotate(6deg);}}
@keyframes hxShellTop {0% {transform:translate(0,0) rotate(0);} 35% {transform:translate(10%,-40%) rotate(25deg);} 100% {transform:translate(70%,-120%) rotate(80deg); opacity:0;}}
@keyframes hxRise {from {opacity:0; transform:translateY(30%) scale(.6);} to {opacity:1; transform:translateY(0) scale(1);}}
@keyframes hxBurst {0% {opacity:0; transform:scale(.6) rotate(-10deg);} 50% {opacity:1;} 100% {opacity:1; transform:scale(1) rotate(0);}}
@keyframes hxFall {0% {transform:translate(0,0) rotate(0); opacity:1;} 100% {transform:translate(var(--drift,0),110vh) rotate(var(--spin,360deg)); opacity:.9;}}
@keyframes hxBob {0%,100% {transform:translateY(0) scale(1,1);} 50% {transform:translateY(-6px) scale(1.01,.99);}}
@keyframes hxJump {0%,100% {transform:translateY(0) scale(1);} 25% {transform:translateY(4px) scale(1.06,.9);} 55% {transform:translateY(-28px) scale(.96,1.05);} 80% {transform:translateY(0) scale(1.04,.95);}}
@keyframes hxWag {0%,100% {transform:rotate(0);} 50% {transform:rotate(-9deg);}}
@keyframes hxBlink {0%,94%,100% {transform:scaleY(1);} 97% {transform:scaleY(.1);}}
@keyframes hxWave {0%,100% {transform:rotate(0);} 30% {transform:rotate(-40deg);} 60% {transform:rotate(-15deg);} 80% {transform:rotate(-40deg);}}

@media (prefers-reduced-motion: reduce) {
  .hx-card *, .hx-modal * {animation:none !important; transition:none !important;}
  .hx-hatch-dino, .hx-glow, .hx-burst {opacity:1 !important; transform:none !important;}
  .hx-shell-top {display:none;}
}