/* ═══════════════════════════════════════════════════════════════════════
   The hobbies: four things lying on the floorboards by the bed.

   hobbies.js builds them and places each one (room-layout.js says where);
   this file gives them their form and their light. Everything is drawn in
   pixels of the painting and scaled with it by --room-k.

   The same light as everything else in the room: warm, from the upper
   left, deep shadow to the lower right. Every object is shaded across its
   own form toward that light, graded into the painting's ambers and its
   exposure (--expose: the hand by the bed lies in the bed's shadow),
   softened a touch to the painting's focus, and pooled in its own shadow
   where it touches the boards.
   ═══════════════════════════════════════════════════════════════════ */

.room { --room-k: 1; }

.hobbies { position: absolute; inset: 0; pointer-events: none; }

.hobby {
  position: absolute;
  width:  calc(var(--room-k) * var(--aw) * 1px);
  height: calc(var(--room-k) * var(--ah) * 1px);
  margin: 0; padding: 0; border: 0;
  background: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.hobby__art {
  position: absolute; left: 0; top: 0;
  width:  calc(var(--aw) * 1px);
  height: calc(var(--ah) * 1px);
  transform: scale(var(--room-k));
  transform-origin: 0 0;
  pointer-events: none;
  /* graded toward the floor's own orange-amber, so nothing reads cool or
     olive against it */
  filter: brightness(var(--expose, .9)) sepia(.14) saturate(1.3) hue-rotate(-5deg) blur(.22px);
  transition: filter 260ms ease;
}
@media (hover: hover) {
  .hobby:hover .hobby__art {
    filter: brightness(calc(var(--expose, .9) * 1.32)) sepia(.14) saturate(1.25) hue-rotate(-5deg) blur(.22px)
            drop-shadow(0 0 2.6px rgba(255, 196, 120, .6));
  }
}
.hobby:focus-visible { outline: 1.5px solid var(--gilt-lit); outline-offset: 2px; }
.hobby:focus-visible .hobby__art {
  filter: brightness(calc(var(--expose, .9) * 1.32)) sepia(.14) saturate(1.25) hue-rotate(-5deg) blur(.22px)
          drop-shadow(0 0 2.6px rgba(255, 196, 120, .6));
}

.hobby__art i, .hobby__art b { position: absolute; display: block; font-style: normal; }

/* The floor, laid back to the painting's angle. Flat things lie on it and
   foreshorten as the boards do; +Z on it is up off the boards. */
.floor {
  left: var(--fx); top: var(--fy);
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: perspective(700px) rotateX(64deg);
}

/* ══ poker ═══════════════════════════════════════════════════════════ */

.hobby--poker { --aw: 80; --ah: 42; --fx: 30px; --fy: 23px; --expose: .74; }

/* the dim pool the hand lies in */
.pk-pool {
  left: -32px; top: -22px; width: 66px; height: 48px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--shade), .55), rgba(var(--shade), 0));
  transform: translate(3px, 4px);
  filter: blur(2px);
}

.pk-card {
  left: calc(var(--x) - 9px); top: calc(var(--y) - 12.5px);
  width: 18px; height: 25px;
  border-radius: 1.5px;
  transform: translateZ(var(--z)) rotate(var(--r));
  box-shadow:
    0 0 0 .25px rgba(60, 40, 22, .75),
    .7px 1.3px 1.2px rgba(var(--shade), .55),
    1.6px 2.6px 3px rgba(var(--shade), .35);
}
.pk-card--back {
  background:
    linear-gradient(135deg, rgba(255,232,190,.18), rgba(255,232,190,0) 45%, rgba(var(--shade), .3)),
    repeating-linear-gradient(45deg,  rgba(236,196,150,.32) 0 .3px, transparent .3px 1.25px),
    repeating-linear-gradient(-45deg, rgba(236,196,150,.32) 0 .3px, transparent .3px 1.25px),
    radial-gradient(70% 60% at 50% 50%, #7a2620, #561814);
  box-shadow:
    inset 0 0 0 1.1px #d9c6a2,
    inset 0 0 0 1.45px rgba(120, 40, 30, .7),
    0 0 0 .25px rgba(60, 40, 22, .75),
    .7px 1.3px 1.2px rgba(var(--shade), .55),
    1.6px 2.6px 3px rgba(var(--shade), .35);
}
.pk-card--face {
  background:
    linear-gradient(135deg, rgba(255,240,214,.3), rgba(255,240,214,0) 50%, rgba(var(--shade), .28)),
    radial-gradient(120% 90% at 30% 20%, #cdbd9c, #b4a282);
  color: #1e1610;
}
.pk-card--red { color: #7c1e18; }
.pk-card__corner {
  left: 1.2px; top: .9px;
  display: flex; flex-direction: column; align-items: center;
  font: 600 4.3px/0.95 var(--display);
}
.pk-card__pip {
  left: 0; right: 0; top: 50%;
  transform: translateY(-52%);
  text-align: center;
  font: 400 10px/1 var(--body);
}
/* the sheen the light leaves across a card's coated face */
.pk-card__light {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255,236,205,.26), rgba(255,236,205,0) 38%);
  mix-blend-mode: screen;
}

/* ── chips · short cylinders, drawn upright ─────────────────────────── */

/* d = 12px across; the top is a disc squashed to the floor's angle (.44),
   and the edge shows below it, 2px of it */
.chips { left: 59px; top: 19px; width: 0; height: 0; }
.chips--lone { left: 69px; top: 32px; }
.chips__pool {
  left: -6.5px; top: -1.4px; width: 14px; height: 5.4px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--shade), 1), rgba(var(--shade), .8) 55%, rgba(var(--shade), 0));
  filter: blur(.45px);
}
/* the shadow the stack throws away from the light, longer for the taller stack */
.chips__pool::after {
  content: ''; position: absolute;
  left: 4px; top: 0; width: 16px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(closest-side at 35% 50%, rgba(var(--shade), .7), rgba(var(--shade), 0));
  filter: blur(1.2px);
}
.chips--lone .chips__pool::after { left: 2px; width: 12px; }

.chip {
  --c: #7a1f1a; --ins: #d8c5a0; --core: #ccb894;
  left: calc(var(--cx) - 6px); top: calc(var(--cy) - 5.3px);
  width: 12px; height: 7.3px;
}
.chip--navy  { --c: #1f2738; --ins: #cbb894; --core: #c9b796; }
.chip--cream { --c: #d4c19e; --ins: #7d2721; --core: #e4d5b8; }

.chip__side {
  inset: 0;
  border-radius: 50% / 2.65px;
  /* the edge inserts, closer together toward the sides as the drum turns
     away, then the drum's own shading, lit left, dark right */
  background:
    linear-gradient(90deg,
      rgba(255,228,190,.12) 0%, rgba(255,228,190,.3) 22%, rgba(0,0,0,0) 46%,
      rgba(var(--shade), .5) 74%, rgba(var(--shade), .82) 100%),
    linear-gradient(90deg,
      var(--c) 0 2.6%, var(--ins) 2.6% 5%, var(--c) 5% 27.5%,
      var(--ins) 27.5% 34%, var(--c) 34% 66%,
      var(--ins) 66% 72.5%, var(--c) 72.5% 95%,
      var(--ins) 95% 97.4%, var(--c) 97.4%);
  box-shadow: inset 0 -.4px .5px rgba(var(--shade), .6);
}
/* fine ridging round the rim */
.chip__side::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(90deg, rgba(var(--shade), .2) 0 .25px, transparent .25px .8px);
}

.chip__top {
  left: 0; top: 0; width: 12px; height: 12px;
  border-radius: 50%;
  transform: scaleY(.44);
  transform-origin: 0 0;
  background: var(--c);
  box-shadow: 0 0 0 .2px rgba(var(--shade), .5);
}
.chip__rim {
  inset: 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(rgba(var(--shade), .28) 0 1.4deg, transparent 1.4deg 4.5deg),
    repeating-conic-gradient(from 12deg, var(--c) 0 33deg, var(--ins) 33deg 45deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 72%, #000 75%);
          mask: radial-gradient(circle closest-side, transparent 72%, #000 75%);
}
.chip__inlay {
  inset: 25%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, var(--core), color-mix(in srgb, var(--core) 80%, #5a4630));
  box-shadow:
    0 0 0 .45px var(--ins),
    0 0 0 .9px var(--c),
    0 0 0 1.25px rgba(255,228,190,.35),
    inset 0 0 0 .6px rgba(var(--shade), .2);
}
.chip--cream .chip__inlay { background: radial-gradient(circle at 40% 36%, #efe2c6, #c9b48e); }
/* the room's light on the top: a glint at the upper left, falling off to
   the lower right */
.chip__light {
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(22% 18% at 26% 24%, rgba(255,246,226,.6), rgba(255,246,226,0) 100%),
    linear-gradient(140deg, rgba(255,214,160,.2), rgba(255,214,160,0) 45%, rgba(var(--shade), .4));
}

/* ══ soccer ══════════════════════════════════════════════════════════ */

.hobby--soccer { --aw: 52; --ah: 48; --expose: .92; }

.ball {
  left: 7px; top: 4px; width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background: #3a2c21;                     /* the seams, between the panels */
  filter: sepia(.32) saturate(1.16) brightness(.93);
}
.ball__panels { inset: 0; }
.ball__panel {
  inset: 0;
  /* each panel is stitched a little proud, so it is lit a touch in its
     middle and falls off toward its seams */
  background: radial-gradient(7px 7px at var(--px) var(--py), #f2e7cf, #e1d2b2 55%, #c4ad86 100%);
  filter: brightness(var(--wear));
}
.ball__panel--dark {
  background: radial-gradient(6px 6px at var(--px) var(--py), #3b2c22, #261a12 60%, #1a110b 100%);
}
/* wear: scuffs and the grime of a used ball */
.ball__scuff {
  inset: 0;
  mix-blend-mode: multiply;
  background:
    radial-gradient(3.2px 1.5px at 58% 74%, rgba(120,82,44,.55), rgba(120,82,44,0)),
    radial-gradient(1.8px 2.6px at 34% 62%, rgba(110,76,42,.4), rgba(110,76,42,0)),
    radial-gradient(4.5px 1.8px at 72% 44%, rgba(130,92,52,.32), rgba(130,92,52,0)),
    radial-gradient(1.4px 1.1px at 46% 30%, rgba(110,76,42,.35), rgba(110,76,42,0)),
    radial-gradient(60% 40% at 50% 100%, rgba(120,90,55,.35), rgba(120,90,55,0)),
    var(--grain) 0 0 / 46px 46px;
  opacity: .9;
}
/* the sphere: lit from the upper left, the terminator round to the lower
   right, and the warm bounce off the boards along the bottom edge */
.ball__shade {
  inset: 0;
  border-radius: 50%;
  mix-blend-mode: multiply;
  background: radial-gradient(circle at 35% 30%,
    #fff8ec 0%, #f2dfc0 22%, #c79f72 44%, #7b5532 62%, #3a2412 80%, #1a0e06 100%);
}
.ball__light {
  inset: 0;
  border-radius: 50%;
  mix-blend-mode: screen;
  background:
    radial-gradient(17% 13% at 31% 25%, rgba(255,242,218,.75), rgba(255,242,218,0)),
    radial-gradient(44% 38% at 34% 29%, rgba(255,196,130,.2), rgba(255,196,130,0)),
    radial-gradient(48% 16% at 60% 99%, rgba(196,118,56,.32), rgba(196,118,56,0));
  box-shadow: inset -1.5px -2px 3px rgba(var(--shade), .35);
}
/* where it touches the boards, and the shadow it throws away from the light */
.ball-contact {
  left: 12px; top: 33.5px; width: 27px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--shade), 1), rgba(var(--shade), .75) 40%, rgba(var(--shade), 0));
  filter: blur(.7px);
}
.ball-cast {
  left: 16px; top: 30px; width: 38px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(closest-side at 38% 46%, rgba(var(--shade), .8), rgba(var(--shade), .4) 55%, rgba(var(--shade), 0));
  filter: blur(2.4px);
}

/* ══ eating · a takeout pail ═════════════════════════════════════════ */

/* 18px square at the base, 24px at the mouth, 20px tall */
.hobby--eating { --aw: 46; --ah: 52; --fx: 23px; --fy: 40px; }

.pail-cast {
  left: -13px; top: -13px; width: 26px; height: 26px;
  border-radius: 3px;
  background: rgba(var(--shade), .7);
  transform: translateZ(.05px) rotate(-28deg) translate(3px, 3.5px);
  filter: blur(2.6px);
}
.pail {
  left: 0; top: 0; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: rotateZ(-28deg);
}
.pail__hold {
  left: 0; top: 0; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: rotateZ(var(--turn));
}
.pail__face {
  --lit: .8;
  --paper: #e0b47e;
  left: -12px; top: -11.2px; width: 24px; height: 20.2px;
  transform-origin: 50% 100%;
  transform: rotateX(-98.5deg);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  clip-path: polygon(0 0, 100% 0, 87.5% 100%, 12.5% 100%);
  background:
    linear-gradient(180deg, rgba(255,240,214,.12), rgba(255,240,214,0) 30%, rgba(var(--shade), .38) 100%),
    var(--grain) 0 0 / 40px 40px,
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 88%, #5a3a1a), var(--paper) 45%, color-mix(in srgb, var(--paper) 85%, #5a3a1a));
  background-blend-mode: normal, multiply, normal;
  filter: brightness(var(--lit)) saturate(1.25);
}
.pail__face--left  { --lit: .92; }
.pail__face--front { --lit: .52; }
.pail__face--right { --lit: .36; }
.pail__face--back  { --lit: .9; }
/* where the top flaps were folded down, and the paper bowed between them */
.pail__fold {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,236,204,.4) 0, rgba(255,236,204,0) 5%),
    linear-gradient(180deg, transparent 15%, rgba(var(--shade), .3) 16.5%, rgba(255,236,204,.3) 18.5%, transparent 21%),
    linear-gradient(90deg, rgba(var(--shade), .2), transparent 14%, transparent 86%, rgba(var(--shade), .2));
}
.pail__top {
  left: -12px; top: -12px; width: 24px; height: 24px;
  transform-style: preserve-3d;
  transform: translateZ(20px);
}
/* the two long flaps fold up from the back and front edges and meet in a
   ridge down the middle; the far one faces the light, the near one away */
.pail__flap {
  left: 0; right: 0; height: 12.4px;
  background:
    var(--grain) 0 0 / 40px 40px,
    linear-gradient(90deg, #d6aa72, #e4b880 40%, #d0a46e);
  background-blend-mode: multiply;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.pail__flap--a {
  top: 0;
  transform-origin: 50% 0;
  transform: rotateX(20deg);
  filter: brightness(1.04) saturate(1.1);
  box-shadow: inset 0 -1.2px 1px rgba(var(--shade), .25);
}
.pail__flap--b {
  bottom: 0;
  transform-origin: 50% 100%;
  transform: rotateX(-20deg);
  filter: brightness(.7) saturate(1.1);
  box-shadow: inset 0 1px .8px rgba(255,236,204,.3), inset 0 -1.4px 1px rgba(var(--shade), .5);
}
.pail__ridge {
  left: 2px; right: 2px; top: 50%; height: .7px;
  transform: translateZ(4.2px);
  background: rgba(255,238,206,.55);
}
/* the wire handle, arched over the top from side to side */
.pail__wire {
  left: -11px; top: -13px; width: 22px; height: 13px;
  transform-origin: 50% 100%;
  transform: translateZ(20px) rotateX(-90deg);
  border: .8px solid #9a8466;
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-left-color: #d8c098;
  border-right-color: #4e3e2c;
}

/* ══ golf ════════════════════════════════════════════════════════════ */

.hobby--golf { --aw: 186; --ah: 46; --expose: .9; }

/* the club, lying along the boards: grip toward the bed, head toward the
   window. Drawn upright (a shaft looks round from any angle). */
.club {
  left: 10px; top: 21px; width: 168px; height: 6px;
  transform: rotate(-8deg);
  transform-origin: 0 50%;
}
.club__cast {
  left: 1px; width: 160px; top: 3.4px; height: 4.6px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(var(--shade), .85), rgba(var(--shade), .7) 22%, rgba(var(--shade), .5) 30%, rgba(var(--shade), .5) 85%, rgba(var(--shade), .8));
  filter: blur(1.3px);
}
/* and the head's own shadow, broader, beside it on the boards */
.club__cast::after {
  content: ''; position: absolute;
  left: 158px; top: -.4px; width: 17px; height: 8px;
  border-radius: 1px 4px 4px 2px;
  background: rgba(var(--shade), .9);
  transform-origin: 0 40%;
  transform: rotate(47deg) skewX(-10deg);
}
.club__grip {
  left: 0; top: .8px; width: 39px; height: 4.4px;
  border-radius: 2.2px 1.4px 1.4px 2.2px;
  background:
    linear-gradient(180deg, rgba(255,222,180,.2) 0%, rgba(255,222,180,.05) 28%, rgba(var(--shade), .35) 70%, rgba(var(--shade), .7) 100%),
    repeating-linear-gradient(62deg,  rgba(255,226,186,.12) 0 .35px, transparent .35px 1.1px),
    repeating-linear-gradient(-62deg, rgba(var(--shade), .3) 0 .35px, transparent .35px 1.1px),
    #2c2119;
}
/* the butt cap, and the collar where the grip ends */
.club__grip::before,
.club__grip::after { content: ''; position: absolute; top: 0; bottom: 0; }
.club__grip::before {
  left: 0; width: 1.6px;
  border-radius: 2.2px 0 0 2.2px;
  background: linear-gradient(180deg, #4a3a2c, #120c08);
}
.club__grip::after {
  right: 0; width: 1.4px;
  background: linear-gradient(180deg, #5a4836, #1a120c);
}
.club__shaft {
  left: 38px; top: 1.95px; width: 113px; height: 2.1px;
  clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%);
  /* steel by candlelight: dark, with one hot line along the lit side */
  background:
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(var(--shade), .4) 15px 15.4px, rgba(255,226,180,.22) 15.4px 15.8px),
    linear-gradient(180deg, #2a2016 0%, #8a7254 16%, #ead2a6 30%, #9a8062 42%, #5a4634 62%, #2e2318 82%, #140d07 100%);
}
.club__hosel {
  left: 150px; top: 1.7px; width: 10px; height: 2.6px;
  border-radius: 0 1.2px 1.2px 0;
  clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 84%);
  background: linear-gradient(180deg, #2a2016 0%, #9a8060 18%, #f0d8ac 32%, #a28766 50%, #4e3b2a 78%, #1a110a 100%);
}
/* The iron's head, lying on its back with the face up: the blade runs from
   the heel at the hosel out to a rounded toe, at the club's lie angle and
   foreshortened onto the boards. A thicker top line along its far edge, the
   face scored with grooves, a polished sole along the near edge. */
.club__head {
  left: 158px; top: .6px; width: 16px; height: 7.4px;
  transform-origin: 0 40%;
  transform: rotate(47deg) skewX(-10deg);
  border-radius: 1px 3.6px 4.2px 1.6px / 1px 3.2px 3.8px 1.6px;
  background:
    radial-gradient(60% 50% at 30% 30%, rgba(255,232,190,.22), rgba(255,232,190,0)),
    linear-gradient(180deg,
      #1e150d 0%, #9a7e5a 7%, #f4deb2 15%, #8a7052 25%,
      #4e3c2a 40%, #5a4632 66%, #a88c66 82%, #2a1e12 100%);
  box-shadow: 0 0 0 .2px rgba(var(--shade), .7);
}
.club__face {
  left: 2.2px; right: 2.4px; top: 33%; height: 42%;
  border-radius: .6px 2px 2px .6px;
  background:
    repeating-linear-gradient(180deg, rgba(var(--shade), .55) 0 .3px, rgba(255,226,180,.12) .3px .45px, transparent .45px 1px),
    linear-gradient(90deg, rgba(255,232,196,.22), rgba(var(--shade), .25));
}

.gball {
  left: 140px; top: 27px; width: 11px; height: 11px;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  /* the dimples are laid on by hobbies.js, projected round the sphere */
  background-color: #faf4e8;
  background-repeat: no-repeat;
}
.gball__shade {
  inset: 0;
  border-radius: 50%;
  mix-blend-mode: multiply;
  background: radial-gradient(circle at 34% 30%,
    #fffdf8 0%, #fbf1de 30%, #e8d4b2 52%, #a8825a 74%, #3a2210 100%);
}
.gball__light {
  inset: 0;
  border-radius: 50%;
  mix-blend-mode: screen;
  background:
    radial-gradient(22% 18% at 31% 27%, rgba(255,246,228,.85), rgba(255,246,228,0)),
    radial-gradient(50% 16% at 60% 98%, rgba(196,118,56,.3), rgba(196,118,56,0));
}
.gball-cast {
  left: 139px; top: 35.2px; width: 17px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(closest-side at 36% 45%, rgba(var(--shade), 1), rgba(var(--shade), .5) 50%, rgba(var(--shade), 0));
  filter: blur(.9px);
}

/* ══ badminton ═══════════════════════════════════════════════════════ */

.hobby--badminton { --aw: 120; --ah: 46; --fx: 14px; --fy: 25px; --expose: .86; }

/* The racket lies flat on the floor plane, grip toward the bed. Laid out
   along +x from the butt of the grip; the frame and strings are drawn in
   the plane, so the head foreshortens into an ellipse as the boards do. */
.racket {
  left: 0; top: 0; width: 0; height: 0;
  transform: rotate(-12deg);
  filter: drop-shadow(1px 1.6px 1px rgba(var(--shade), .85)) drop-shadow(2px 3px 3px rgba(var(--shade), .45));
}
.racket__grip {
  left: 0; top: -2.8px; width: 30px; height: 5.6px;
  border-radius: 2.8px 1.4px 1.4px 2.8px;
  /* a towel grip, wound on a slant, lit along its far side */
  background:
    linear-gradient(180deg, rgba(255,232,196,.35) 0%, rgba(255,232,196,0) 35%, rgba(var(--shade), .3) 70%, rgba(var(--shade), .65) 100%),
    repeating-linear-gradient(64deg, rgba(var(--shade), .35) 0 .4px, transparent .4px 2.1px),
    var(--grain) 0 0 / 30px 30px,
    #d9c7a4;
  background-blend-mode: normal, normal, multiply, normal;
}
.racket__grip::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1.6px;
  border-radius: 2.3px 0 0 2.3px;
  background: linear-gradient(180deg, #4a3020, #1a0e08);
}
.racket__shaft {
  left: 29px; top: -.8px; width: 34px; height: 1.6px;
  background: linear-gradient(180deg, #2a1c12 0%, #c8aa80 30%, #f0dcb4 42%, #8a6e50 64%, #24170d 100%);
}
/* the throat: the frame splits from the shaft into the head */
.racket__throat {
  left: 61px; top: -3px; width: 9px; height: 6px;
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%);
  background: linear-gradient(180deg, #5a1e18 0%, #b04a34 25%, #3c120e 70%, #1e0806 100%);
}
.racket__head {
  left: 68px; top: -15px; width: 42px; height: 30px;
  border-radius: 54% 46% 46% 54% / 50%;
  /* a lacquered frame: lit on its far edge, in shadow on the near one */
  border: 2.2px solid #5e1c16;
  border-top-color: #b85840;
  border-left-color: #8a3226;
  border-bottom-color: #2a0a08;
  border-right-color: #3c120e;
  box-shadow: inset 0 0 0 .4px rgba(255,214,170,.25), 0 0 0 .3px rgba(var(--shade), .7);
}
.racket__strings {
  inset: .6px;
  border-radius: inherit;
  background:
    repeating-linear-gradient(90deg, rgba(232,214,182,.55) 0 .32px, transparent .32px 2.05px),
    repeating-linear-gradient(0deg,  rgba(232,214,182,.5) 0 .32px, transparent .32px 2.05px);
  -webkit-mask: radial-gradient(closest-side, #000 70%, rgba(0,0,0,.75) 100%);
          mask: radial-gradient(closest-side, #000 70%, rgba(0,0,0,.75) 100%);
}

/* the shuttle, on its side: cork to the left, the feather skirt opening to
   the right. Drawn upright, like the balls. */
.shuttle {
  left: 98px; top: 27px; width: 16px; height: 10px;
  transform: rotate(-20deg);
}
/* the skirt: a cone of feathers seen side on, its rim scalloped where each
   feather ends, the near half in shadow */
.shuttle__skirt {
  left: 4.4px; top: 0; width: 11.6px; height: 10px;
  clip-path: polygon(0 34%, 92% 0, 100% 10%, 93% 21%, 100% 32%, 93% 44%, 100% 56%, 93% 68%, 100% 79%, 93% 90%, 92% 100%, 0 66%);
  background:
    linear-gradient(180deg, rgba(255,246,228,.5) 0%, rgba(255,246,228,0) 30%, rgba(var(--shade), .25) 62%, rgba(var(--shade), .6) 100%),
    repeating-linear-gradient(180deg, rgba(120,92,60,.35) 0 .28px, transparent .28px 1.65px),
    linear-gradient(90deg, #d8c8a8 0%, #f2e6cc 60%, #e4d4b4 100%);
}
/* the shafts of the feathers, gathering into the cork */
.shuttle__skirt::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(var(--shade), .25), rgba(var(--shade), 0) 40%);
}
.shuttle__band {
  left: 5.2px; top: 3.2px; width: 1.3px; height: 3.6px;
  background: linear-gradient(180deg, #8a3a2a, #3a120c);
}
.shuttle__cork {
  left: 0; top: 2.2px; width: 6px; height: 5.6px;
  border-radius: 55% 18% 18% 55% / 50%;
  background:
    radial-gradient(circle at 36% 28%, #fff4e0 0%, #e2c89c 32%, #a07a4c 70%, #3e2612 100%);
}
.shuttle-cast {
  left: 97px; top: 30px; width: 20px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(closest-side at 40% 50%, rgba(var(--shade), .85), rgba(var(--shade), .35) 55%, rgba(var(--shade), 0));
  filter: blur(1px);
}

/* ══ music · a teddy bear, sitting ═══════════════════════════════════ */

.hobby--music { --aw: 54; --ah: 60; --expose: .74; }

/* plush is never crisp: the whole bear is softened a little more than the
   hard objects, and graded down into the shadow by the wall */
.bear {
  left: 6px; top: 2px; width: 42px; height: 54px;
  filter: saturate(.85) blur(.3px);
  --fur:   #8c5a30;
  --fur-l: #c99158;
  --fur-d: #3a200e;
  --pad:   #d8b48a;
}
/* every part is a round, plush form: lit upper left, falling to the lower
   right, with the grain of the fur multiplied in */
.bear__body, .bear__arm, .bear__leg, .bear__ear, .bear__head {
  border-radius: 50%;
  /* fur: a fine grain twice over, at two scales, so it reads as pile and not
     as a smooth plastic sphere; a fuzzy rim where the light catches the
     tips; and the form, lit upper left */
  background:
    var(--grain) 0 0 / 9px 9px,
    var(--grain) 3px 5px / 17px 17px,
    radial-gradient(circle at 34% 28%, var(--fur-l) 0%, var(--fur) 40%, color-mix(in srgb, var(--fur) 50%, var(--fur-d)) 70%, var(--fur-d) 100%);
  background-blend-mode: multiply, multiply, normal;
  box-shadow:
    inset .6px .6px 1px rgba(236,190,130,.3),
    inset -1px -1.2px 1.8px rgba(var(--shade), .45),
    0 0 .8px .4px color-mix(in srgb, var(--fur) 50%, transparent);
}
/* each part a little lumpy, as stuffing is */
.bear__body { border-radius: 48% 52% 50% 50% / 46% 46% 54% 54%; }
.bear__body { left: 9px; top: 20px; width: 24px; height: 25px; }
/* the seam down the front of the body */
.bear__body::after {
  content: ''; position: absolute; left: 50%; top: 18%; bottom: 14%; width: .5px;
  background: rgba(var(--shade), .3);
}
.bear__arm  { top: 24px; width: 9px; height: 15px; }
.bear__arm--l { left: 4px;  transform: rotate(24deg); }
.bear__arm--r { left: 29px; transform: rotate(-24deg); }
/* the legs come forward, toward the viewer, so they sit in front of the
   body and show their pads */
.bear__leg  { top: 37px; width: 14px; height: 13px; }
.bear__leg--l { left: 5px;  transform: rotate(-10deg); }
.bear__leg--r { left: 23px; transform: rotate(10deg); }
.bear__pad {
  left: 3px; top: 3px; width: 8px; height: 7.5px;
  border-radius: 50%;
  background:
    var(--grain) 0 0 / 22px 22px,
    radial-gradient(circle at 38% 34%, #f0d6b0, var(--pad) 50%, #8e6a46 100%);
  background-blend-mode: multiply, normal;
}
.bear__ear { top: 1px; width: 10px; height: 10px; }
.bear__ear--l { left: 7px; }
.bear__ear--r { left: 25px; }
.bear__ear::after {
  content: ''; position: absolute; inset: 2.6px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #c8a07a, #7a5434);
}
.bear__head { left: 8px; top: 3px; width: 26px; height: 22px; }
.bear__eye {
  top: 8px; width: 2.6px; height: 2.8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,236,206,.7) 0 12%, #2a160a 24%, #0c0602 100%);
}
.bear__eye--l { left: 7.5px; }
.bear__eye--r { left: 16px; }
.bear__muzzle {
  left: 8px; top: 11px; width: 10px; height: 8px;
  border-radius: 50%;
  background:
    var(--grain) 0 0 / 22px 22px,
    radial-gradient(circle at 40% 30%, #ecd0a6, var(--pad) 45%, #8a6440 100%);
  background-blend-mode: multiply, normal;
}
.bear__nose {
  left: 2.9px; top: 1px; width: 4.2px; height: 3px;
  border-radius: 50% 50% 55% 55% / 45% 45% 60% 60%;
  background: radial-gradient(circle at 38% 30%, #8a6a52 0, #2a160a 40%, #0c0602 100%);
}
.bear__nose::after {
  content: ''; position: absolute;
  left: 50%; top: 100%; width: .5px; height: 2px;
  background: #2a160a;
}
/* it sits, so its whole seat presses into the boards: a dark pool right
   under the body and feet, and a softer shadow thrown to the right */
.bear-contact {
  left: 8px; top: 44px; width: 40px; height: 13px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--shade), 1), rgba(var(--shade), .85) 50%, rgba(var(--shade), 0));
  filter: blur(.9px);
}
.bear-cast {
  left: 16px; top: 38px; width: 44px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(closest-side at 40% 55%, rgba(var(--shade), .8), rgba(var(--shade), .35) 60%, rgba(var(--shade), 0));
  filter: blur(2.6px);
}

/* the small-screen row: the hobbies on a line of their own, beneath the zones */
.room__dock-break { flex-basis: 100%; height: 0; }
.room__dock-break + button::before,
.room__dock button.is-linestart::before { content: none; }

@media (prefers-reduced-motion: reduce) {
  .hobby__art { transition: none; }
}