/* domino.css — Domino "The Old Glass" skin. Loads ON TOP of iris-mascot.css;
   every rule scoped to .pup.domino so Iris (.pup) and Apollo (.pup.apollo) are
   untouched. Variables scoped to .domino-box so nothing leaks.
   New silhouette: taller, leaner, longer neck, drop ears, upright sit.
   A white dog on a black UI needs value separation, not outlines — each part
   is a different step on the same warm-white ramp, plus a 1px ink edge. */
.domino-box{
  --w0:#fdfcf8; --w1:#f0ede4; --w2:#dcd7ca; --w3:#bdb7a8; --w4:#9d9789;
  --spot:#16151b; --spot2:#26242e; --ink:rgba(8,8,11,.55);
  --inear:#e0a39a; --paw:#f4efe2; --grey:#cfcabd;
  --violet:#8a4de0; --violethi:#d2b0f0;
  /* the rig's accessory palette lives on .pup-box, so every box class has to
     re-declare it or .acc.* loses its colors and fonts. His accents lean violet. */
  --gold0:#e2cdf6; --gold1:#d2b0f0; --gold2:#8a4de0; --gold3:#6f3ddb;
  --cream:#f6ecd6; --amber:#f0b24a; --pink:#f3a8b6;
  --red:#ff3b53; --brand:#c8102e; --green:#3fd08a;
  --panel2:#17171a; --panel3:#1d1d22; --border:#27272d; --hair:#1e1e23;
  --font:'Outfit',system-ui,sans-serif; --serif:'Newsreader',Georgia,serif; --mono:'JetBrains Mono',monospace;
  position:relative;
}

/* ── ground ── */
.pup.domino .puddle{ left:50%; bottom:-4px; width:200px; height:42px;
  background:radial-gradient(closest-side, rgba(138,77,224,.24), transparent 76%); }

/* ── tail: long, held low and out ── */
.pup.domino .tail{ left:172px; top:198px; width:22px; height:96px; border-radius:12px 12px 11px 11px;
  background-image:
    radial-gradient(circle at 11px 24px, var(--spot) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 8px 56px, var(--spot2) 0 3px, transparent 4px),
    linear-gradient(172deg,#f4f1e8 0%,#ddd8ca 56%,#b6b0a1 100%);
  transform-origin:50% 92%; transform:rotate(27deg);
  box-shadow:0 0 0 1px var(--ink), -2px 4px 8px -4px #000; }

/* ── hindquarter, set behind and a value darker ── */
.pup.domino .hind{ left:66px; top:202px; width:86px; height:92px; border-radius:52% 48% 42% 42%/ 62% 62% 38% 38%;
  background-image:
    radial-gradient(circle at 24px 30px, var(--spot) 0 4.5px, transparent 5.5px),
    radial-gradient(circle at 54px 20px, var(--spot2) 0 3px, transparent 4px),
    radial-gradient(circle at 36px 58px, var(--spot) 0 4px, transparent 5px),
    radial-gradient(circle at 62px 54px, var(--spot2) 0 3px, transparent 4px),
    radial-gradient(circle at 20px 74px, var(--spot) 0 3.5px, transparent 4.5px),
    radial-gradient(70% 62% at 42% 18%, var(--w2), var(--w3) 58%, var(--w4) 100%);
  box-shadow:0 0 0 1px var(--ink), 0 12px 26px -16px #000; }

/* ── body: narrow, deep-chested, tall ── */
.pup.domino .body{ left:92px; top:172px; width:104px; height:128px; border-radius:44% 44% 36% 36%/ 50% 50% 50% 50%;
  background:radial-gradient(74% 58% at 52% 12%, var(--w0), var(--w1) 48%, var(--w3) 100%);
  box-shadow:0 0 0 1px var(--ink), 0 14px 30px -16px #000; }
.pup.domino .spots{ left:92px; top:172px; width:104px; height:128px; border-radius:44% 44% 36% 36%/ 50% 50% 50% 50%;
  overflow:hidden; opacity:.92;
  background-image:
    radial-gradient(circle at 18px 24px, var(--spot)  0 4.5px, transparent 5.5px),
    radial-gradient(circle at 48px 12px, var(--spot2) 0 3px, transparent 4px),
    radial-gradient(circle at 78px 26px, var(--spot)  0 4px, transparent 5px),
    radial-gradient(circle at 30px 52px, var(--spot)  0 3.5px, transparent 4.5px),
    radial-gradient(circle at 62px 46px, var(--spot2) 0 3px, transparent 4px),
    radial-gradient(circle at 88px 62px, var(--spot)  0 4px, transparent 5px),
    radial-gradient(circle at 14px 78px, var(--spot2) 0 3px, transparent 4px),
    radial-gradient(circle at 44px 88px, var(--spot)  0 4px, transparent 5px),
    radial-gradient(circle at 76px 100px, var(--spot2) 0 3px, transparent 4px),
    radial-gradient(circle at 24px 108px, var(--spot) 0 3.5px, transparent 4.5px); }
/* clean chest plate (base .blaze re-used) */
.pup.domino .blaze{ left:108px; top:188px; width:70px; height:100px;
  background:radial-gradient(circle at 50% 24%, #fff 0%, var(--w0) 44%, rgba(253,252,248,0) 80%); opacity:.85; }

/* ── long front legs, brighter than the body so they read in front ── */
.pup.domino .legf{ top:232px; width:24px; height:68px; border-radius:12px 12px 9px 9px;
  background:linear-gradient(#fefdf9,#e4dfd2);
  box-shadow:0 0 0 1px var(--ink), inset 0 6px 8px -6px rgba(30,28,24,.5), 0 4px 9px -5px #000; }
.pup.domino .legf.l{ left:112px; } .pup.domino .legf.r{ left:150px; }
.pup.domino .legf::after{ left:-6px; bottom:-3px; width:38px; height:30px;
  background:linear-gradient(#fefdf8,var(--paw));
  box-shadow:0 0 0 1px var(--ink), 0 4px 8px -4px #000, inset 6px -7px 0 -5px rgba(70,66,56,.16), inset -6px -7px 0 -5px rgba(70,66,56,.16); }

/* ── long neck, set behind head and body ── */
.pup.domino .neck{ left:114px; top:112px; width:52px; height:80px; border-radius:42% 42% 28% 28%/ 36% 36% 64% 64%;
  background-image:
    radial-gradient(circle at 13px 44px, var(--spot2) 0 3px, transparent 4px),
    linear-gradient(168deg,var(--w1) 0%,var(--w2) 58%,var(--w3) 100%);
  box-shadow:0 0 0 1px var(--ink); }

/* ── head ── */
.pup.domino .head-grp{ transform-origin:140px 112px; }
.pup.domino .head{ left:84px; top:24px; width:112px; height:100px; border-radius:50% 50% 44% 44%;
  background:radial-gradient(58% 54% at 50% 22%, #fff, var(--w1) 52%, var(--w3) 100%);
  box-shadow:0 0 0 1px var(--ink), 0 10px 26px -14px #000; }
/* the patch — over the lens side, the thing you recognise him by.
   Sized to the whole head and clipped to it, so the blob can never break the
   silhouette; the shape itself is three overlapping gradient lobes. */
.pup.domino .patch{ left:84px; top:24px; width:112px; height:100px; border-radius:50% 50% 44% 44%; overflow:hidden;
  background-image:
    radial-gradient(37% 43% at 31% 47%, #1e1c26 0 80%, rgba(30,28,38,0) 97%),
    radial-gradient(21% 23% at 20% 22%, #16151b 0 78%, rgba(22,21,27,0) 96%),
    radial-gradient(18% 21% at 28% 72%, #16151b 0 76%, rgba(22,21,27,0) 96%); }
.pup.domino .hspots{ left:84px; top:24px; width:112px; height:100px; border-radius:50% 50% 44% 44%; overflow:hidden;
  background-image:
    radial-gradient(circle at 90px 22px, var(--spot)  0 3.5px, transparent 4.5px),
    radial-gradient(circle at 102px 46px, var(--spot2) 0 3px, transparent 4px),
    radial-gradient(circle at 80px 62px, var(--spot)  0 3px, transparent 4px),
    radial-gradient(circle at 98px 78px, var(--spot2) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 62px 84px, var(--spot)  0 3px, transparent 4px); }

.pup.domino .face{ left:107px; top:48px; width:66px; height:66px; }
.pup.domino .glint{ width:8px; height:8px;
  background:radial-gradient(circle at 38% 34%, #fff, var(--violethi) 55%, rgba(210,176,240,0) 78%); }
.pup.domino .glint.l{ left:114px; top:62px; } .pup.domino .glint.r{ left:156px; top:74px; }
.pup.domino .lid{ left:105px; top:82px; width:70px; height:15px; border-radius:0 0 36px 36px; background:#0e0d12; }

/* brows — the "straight when needed" face */
.pup.domino .brow{ width:28px; height:10px; opacity:0; border-radius:60% 60% 50% 50%/ 86% 86% 24% 24%;
  background:radial-gradient(60% 100% at 50% 20%, #2c2a34, #14131a 80%);
  transition:transform .35s cubic-bezier(.3,.7,.3,1), opacity .3s; }
.pup.domino .brow.l{ left:104px; top:40px; transform:rotate(-6deg); }
.pup.domino .brow.r{ left:148px; top:40px; transform:rotate(6deg); }
.pup.domino.m-stern .brow{ opacity:.95; }
.pup.domino.m-stern .brow.l{ transform:rotate(16deg) translateY(3px); }
.pup.domino.m-stern .brow.r{ transform:rotate(-16deg) translateY(3px); }
.pup.domino.m-sage .brow{ opacity:.5; }

/* muzzle: narrower, protrudes below the head, greying at the edges */
.pup.domino .muzzle{ left:108px; top:98px; width:64px; height:58px; border-radius:42% 42% 46% 46%/ 26% 26% 74% 74%;
  background:radial-gradient(66% 72% at 50% 14%, #fffefb 0%, var(--w1) 44%, var(--w2) 76%, var(--w3) 100%);
  box-shadow:0 0 0 1px var(--ink), 0 8px 16px -12px #000; }
.pup.domino .muzzle::after{ content:''; position:absolute; left:9px; top:20px; width:46px; height:30px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(190,184,170,.55), rgba(190,184,170,0) 78%); }
.pup.domino .nose{ left:124px; top:124px; width:32px; height:22px; border-radius:50% 50% 50% 50%/ 58% 58% 44% 44%;
  background:radial-gradient(circle at 42% 30%, #35333c, #08080b 76%); }
.pup.domino .maw{ display:none; left:118px; top:140px; width:44px; height:30px; border-radius:50% 50% 52% 52%/ 40% 40% 60% 60%;
  background:radial-gradient(60% 70% at 50% 24%, #6e2f3a 0%, #3a1620 70%); box-shadow:inset 0 3px 5px rgba(0,0,0,.5); }
.pup.domino .tongue{ left:132px; top:144px; width:19px; height:23px; border-radius:8px 8px 11px 12px; }

/* ── drop ears, hung long beside the head ── */
.pup.domino .ear{ width:42px; height:88px; border-radius:46% 46% 42% 42%/ 22% 22% 78% 78%;
  background:linear-gradient(166deg,#2b2933 0%,#16151b 54%,#08080b 100%);
  box-shadow:-3px 8px 14px -8px #000, 0 0 0 1px rgba(255,255,255,.05) inset;
  transform-origin:50% 12%; transition:transform .5s cubic-bezier(.3,.7,.3,1); }
.pup.domino .ear::after{ content:''; position:absolute; left:50%; top:26px; transform:translateX(-50%);
  width:17px; height:40px; border-radius:50% 50% 46% 46%/ 28% 28% 72% 72%;
  background:linear-gradient(var(--inear),#a86f68); opacity:.42; }
.pup.domino .ear.l{ left:62px; top:46px; transform:rotate(-5deg); }
.pup.domino .ear.r{ left:176px; top:46px; transform:rotate(5deg) scaleX(-1); }
.pup.domino.e-perk .ear.l{ transform:rotate(-17deg) scaleY(1.04); }
.pup.domino.e-perk .ear.r{ transform:rotate(17deg) scaleY(1.04) scaleX(-1); }
.pup.domino.e-rest .ear.l{ transform:rotate(-5deg); }
.pup.domino.e-rest .ear.r{ transform:rotate(5deg) scaleX(-1); }
.pup.domino.e-one  .ear.l{ transform:rotate(-16deg); }
.pup.domino.e-one  .ear.r{ transform:rotate(18deg) scaleX(-1); }
.pup.domino.e-back .ear.l{ transform:rotate(14deg) translateX(7px); }
.pup.domino.e-back .ear.r{ transform:rotate(14deg) scaleX(-1) translateX(7px); }

/* ── his own moves: a slow steady breath, an approving nod, a lean-in ── */
.pup.domino.an-steady{ animation:dmSteady 6s ease-in-out infinite; }
.pup.domino.an-steady .head-grp{ animation:dmSteadyHead 6s ease-in-out infinite; }
.pup.domino.an-nod .head-grp{ animation:dmNod 2.6s cubic-bezier(.3,.7,.3,1) infinite; }
.pup.domino.an-lean{ animation:dmLean 3.4s ease-in-out infinite; }
@keyframes dmSteady{ 0%,100%{ transform:translate(-50%,-50%) scale(var(--s)); }
  50%{ transform:translate(-50%,-50.6%) scale(calc(var(--s)*1.008)); } }
@keyframes dmSteadyHead{ 0%,100%{ transform:rotate(var(--tilt,0deg)) translateY(0); }
  50%{ transform:rotate(var(--tilt,0deg)) translateY(-1.5px); } }
@keyframes dmNod{ 0%,62%,100%{ transform:rotate(var(--tilt,0deg)) translateY(0); }
  74%{ transform:rotate(calc(var(--tilt,0deg) + 6deg)) translateY(3px); }
  88%{ transform:rotate(var(--tilt,0deg)) translateY(0); } }
@keyframes dmLean{ 0%,100%{ transform:translate(-50%,-50%) scale(var(--s)) rotate(0deg); }
  50%{ transform:translate(-47%,-50%) scale(var(--s)) rotate(2.5deg); } }