/* ===========================================================================
   THE POTATO, AS A PICTURE
   ===========================================================================
   What a hashbrown LOOKS like: the body shapes, the face, and the hats. It is
   drawn entirely in CSS — border-radius blobs, box-shadow eyes, and (since
   2026-09-25) hats and face items as inline SVG inside the CSS itself — with no
   image files anywhere, which is the only reason it is portable enough to be
   shared like this.

   ⚠️ THE HAT AND FACE LINES ARE GENERATED. Edit scripts/potato-items.mjs and
   run it with --write; potato.test.mjs fails if a line here disagrees.

   ⚠️ EXTRACTED FROM client/public/mashpit/css/style.css ON 2026-08-22, AND
   MOVED VERBATIM. Not one declaration was retuned on the way out, because the
   whole point of the move was that MashPit's stage had to look identical
   afterwards — a refactor that also changes the art gives you no way to tell
   which of the two broke it. Verified by diffing computed styles for every
   body shape and every hat before and against after.

   WHY IT MOVED. That file already carried the warning "⚠️ DUPLICATED in
   client/src/styles/style.css — change one, change both", so the drift this
   project keeps paying for (four copies of the spoke list; the emote wall
   silently losing its animation toggles) was already underway here. The alert
   card needed a third copy to show a chatter their own potato, and a third
   copy of a thing already known to drift is how that story ends badly.

   WHAT IS *NOT* HERE, deliberately: anything about being on a stage. Facing,
   waddling, the bouncer rig, squish and fatality states, nametags, the glow —
   all of that is behaviour and all of it stays in MashPit's own stylesheet.
   The test for adding something here is "would this be true of a potato in a
   photograph". If it needs to know where it is standing or what is happening
   to it, it belongs to the game.

   CONSUMERS. Link this BEFORE the surface's own stylesheet, so that
   surface-specific rules of equal specificity still win:
     • client/public/mashpit/index.html   (the game stage)
     • client/public/overlays/alertcard.html   (a portrait beside the name)
     • site/public/potato.css — a BYTE-FOR-BYTE COPY for thesaltedhash.tv,
       because site/ never imports from client/. website.test.cjs fails if
       the two differ: after any edit here, cp this file over that one.
   ⚠️ client/src/styles/style.css STILL HOLDS ITS OWN COPY for the panel's
   wardrobe previews. Folding that one in as well is a Vite-bundling question
   rather than a link tag, so it is deliberately left for its own change —
   until then, the old "change one, change both" warning still applies to
   THAT file and this one.
   =========================================================================== */

/* The True Potato Body */
.sprite {
  width: 50px; height: 38px; background-color: #f2ba79; border: 3px solid #3d2310;
  box-shadow: inset -4px -4px 0px #d49a59, 0 2px 3px rgba(0, 0, 0, 0.45);
  position: relative; margin-top: 35px; transform-origin: center bottom; transition: transform 0.3s ease-out;
}

/* ⚠️ THE BLEMISHES ARE SHADING, NOT FEATURES. They were #2b1608 at 4px against
   6px #222 eyes, and on several bodies one sits within a couple of pixels of an
   eye — the operator could not tell which two dots were the face. They are now
   translucent black, so they read as marks on the skin at any body colour and
   recede next to the eyes instead of competing with them. Keep them
   TRANSLUCENT: an opaque colour is what made them read as a second pair of
   eyes, and it is also why v7 and v8 needed their own overrides, which this
   removes. */
.sprite::after {
  content: ''; position: absolute; width: 4px; height: 4px;
  background-color: rgba(0,0,0,.22); border-radius: 50%;
}

/* The Potato Lore Shapes */
.v0 { border-radius: 50% 45% 55% 40% / 40% 50% 45% 55%; background-color: #f0b26e; } .v0::after { top: 10px; left: 12px; box-shadow: 18px 4px 0 rgba(0,0,0,.22), 10px 14px 0 rgba(0,0,0,.22); }
.v1 { border-radius: 50%; background-color: #e5a35c; } .v1::after { top: 12px; left: 10px; box-shadow: 22px 0 0 rgba(0,0,0,.22), 11px 12px 0 rgba(0,0,0,.22); }
.v2 { border-radius: 60% 40% 50% 50% / 50% 50% 60% 40%; background-color: #f5c487; } .v2::after { top: 14px; left: 18px; box-shadow: 15px -4px 0 rgba(0,0,0,.22), -8px 10px 0 rgba(0,0,0,.22); }
.v3 { border-radius: 40% 60% 60% 40% / 50% 50% 50% 50%; width: 55px; background-color: #edb06b; } .v3::after { top: 10px; left: 10px; box-shadow: 10px 0 0 rgba(0,0,0,.22), 20px 0 0 rgba(0,0,0,.22), 30px 0 0 rgba(0,0,0,.22); }
.v4 { border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%; background-color: #f8cb92; } .v4::after { top: 18px; left: 12px; box-shadow: 18px 0 0 rgba(0,0,0,.22), 9px -8px 0 rgba(0,0,0,.22); }
.v5 { border-radius: 55% 45% 55% 45% / 42% 42% 58% 58%; width: 40px; background-color: #c9553d; box-shadow: inset -4px -4px 0px #a83f2b, 0 2px 3px rgba(0, 0, 0, 0.45); } .v5::after { top: 12px; left: 9px; box-shadow: 15px 4px 0 rgba(0,0,0,.22); }
.v6 { border-radius: 70% 30% 70% 30% / 50% 50% 50% 50%; width: 58px; background-color: #e88d4d; box-shadow: inset -4px -4px 0px #c47235, 0 2px 3px rgba(0, 0, 0, 0.45); } .v6::after { top: 16px; left: 20px; box-shadow: 15px 0 0 rgba(0,0,0,.22); }
.v7 { border-radius: 26% 26% 30% 30%; background-color: #a86c44; border-color: #3b200e; box-shadow: inset -4px -4px 0px #87522f, 0 2px 3px rgba(0, 0, 0, 0.45); } .v7::after { top: 12px; left: 12px; background-color: rgba(0,0,0,.22); box-shadow: 18px 2px 0 rgba(0,0,0,.22); }
.v8 { border-radius: 40% 60% 50% 50%; background-color: #6ee657; box-shadow: inset -4px -4px 0px #4db837, 0 2px 3px rgba(0, 0, 0, 0.45); } .v8::after { top: 10px; left: 14px; background-color: rgba(0,0,0,.22); box-shadow: 16px 0 0 rgba(0,0,0,.22); }

/* FIVE MORE BODIES (2026-09-10). Keys resume at v10 — ⚠️ v9 is the RETIRED
   Golden body and must never be reachable again; see gameStore's RETIRED_BODIES.

   ⚠️ EVERY ONE THAT CHANGES HEIGHT ALSO CHANGES margin-top TO MATCH. The sprite
   is bottom-anchored on the stage floor (transform-origin: center bottom) and
   the base rule is `height: 38px; margin-top: 35px` — a sum of 73. Change the
   height without the margin and the potato sinks through the floor or hovers
   above it, which is only visible on the stage, never in a preview. */
.v10 { border-radius: 46% 54% 48% 52% / 38% 38% 62% 62%; width: 38px; height: 46px; margin-top: 27px; background: #e9b071; } .v10::after { top: 14px; left: 10px; box-shadow: 14px 5px 0 rgba(0,0,0,.22); }
.v11 { border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%; width: 58px; height: 30px; margin-top: 43px; background: #f2c185; } .v11::after { top: 9px; left: 14px; box-shadow: 20px 3px 0 rgba(0,0,0,.22), 10px 10px 0 rgba(0,0,0,.22); }
.v12 { border-radius: 44% 56% 52% 48% / 46% 46% 54% 54%; width: 56px; height: 44px; margin-top: 29px; background: #dfa25e; box-shadow: inset -5px -5px 0px #bd8344, 0 2px 3px rgba(0, 0, 0, 0.45); } .v12::after { top: 14px; left: 15px; box-shadow: 22px 4px 0 rgba(0,0,0,.22); }
.v13 { border-radius: 70% 30% 55% 45% / 62% 38% 62% 38%; width: 48px; background: #eab97d; } .v13::after { top: 12px; left: 16px; box-shadow: 13px 6px 0 rgba(0,0,0,.22); }
.v14 { border-radius: 48% 52% 50% 50% / 50% 50% 50% 50%; width: 32px; height: 28px; margin-top: 45px; background: #f6cb96; } .v14::after { top: 8px; left: 8px; box-shadow: 11px 3px 0 rgba(0,0,0,.22); }

.face { position: absolute; inset: 0; transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); z-index: 5; }

.eye { position: absolute; width: 6px; height: 6px; background: #222; border-radius: 50%; top: 40%; transition: transform 0.2s ease; }

.eye.left { left: 26%; } 

.eye.right { right: 26%; }

.mouth { position: absolute; width: 10px; height: 4px; border-bottom: 2px solid #222; border-radius: 50%; bottom: 35%; left: 50%; transform: translateX(-50%); transition: transform 0.2s ease; }

/* EXPRESSIONS (2026-09-25) — moved here from the website's site.css so the
   stream's potatoes can wear them too. The server rolls one per spawn
   (gameEngine.js EYES_LIST / MOUTH_LIST); '' is the ordinary face. */
.face.e-happy .eye { height: 4px; background: none; border-top: 2px solid #222; border-radius: 50% 50% 0 0; }
.face.e-wide .eye { width: 8px; height: 8px; background: #222; box-shadow: inset 2px 2px 0 #fff; }
.face.m-o .mouth { width: 6px; height: 6px; border: 2px solid #222; border-radius: 50%; }
.face.m-grin .mouth { width: 12px; height: 6px; border: 0; background: #222; border-radius: 0 0 8px 8px; }
.face.m-flat .mouth { width: 8px; height: 0; border-radius: 0; }

/* --- HATS AND FACE ITEMS — most lines below are written by scripts/potato-items.mjs --- */
.hat { position: absolute; z-index: 10; pointer-events: none; transform: translateX(-50%); left: 50%; }

/* ⚠️ ACCESSORIES SCALE WITH THE BODY, AND FACE ITEMS ARE POSITIONED IN PERCENT.
   Every hat and face was drawn against the default 50x38 sprite, so a body that
   differs from it wears them badly — measured on 2026-09-10, a Nugget wore
   headphones 1.26x its own width and a beard hung off its chin, and a Squat is
   too short for a beard placed 21px down.

   `--acc` shrinks the accessory about CENTER BOTTOM, which is the only origin
   that keeps a hat seated on the head while it shrinks. Face tops are a % of
   the sprite height rather than pixels, so a short body wears them at the same
   place on its face rather than below it. A body with no `--acc` gets 1. */
.sprite { --acc: 1; }
.hat { transform: translateX(-50%) scale(var(--acc)); transform-origin: center bottom; }
.v3 { --acc: 1.05; }
.v5 { --acc: 0.88; }
.v6 { --acc: 1.05; }
.v10 { --acc: 0.9; }
.v11 { --acc: 0.95; }
.v12 { --acc: 1.05; }
.v14 { --acc: 0.68; }
.tophat { top: -27px; width: 38px; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 30'%3E%3Cpath d='M10,3 H28 L27,23 H11 Z' fill='%23151b28' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M11.3,17 H26.7 L26.5,22 H11.5 Z' fill='%23e63946'/%3E%3Cpath d='M14,6 V14' fill='none' stroke='%23fff' stroke-opacity='0.22' stroke-width='1.8' stroke-linecap='round'/%3E%3Crect x='2' y='22' width='34' height='5.5' rx='2.75' fill='%23151b28' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.cowboy { top: -23px; width: 56px; height: 27px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 27'%3E%3Cpath d='M16,21 C15.5,13 16.5,6 20.5,4 C23,3 25,6 28,6 C31,6 33,3 35.5,4 C39.5,6 40.5,13 40,21 Z' fill='%238b5a2b' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M16.3,16 H39.7 L39.9,20.5 H16.1 Z' fill='%235a3616'/%3E%3Cpath d='M19.5,8.5 C18.7,10.5 18.4,12.5 18.5,14' fill='none' stroke='%23fff' stroke-opacity='0.32' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M3,15.5 C7,20 15,21.5 28,21.5 C41,21.5 49,20 53,15.5 C54.5,21 46,25 28,25 C10,25 1.5,21 3,15.5 Z' fill='%236b421a' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.party { top: -27px; width: 24px; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M12,5 L21,26.5 Q12,29.5 3,26.5 Z' fill='%23ff0055' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cg fill='%23ffe066'%3E%3Ccircle cx='11.5' cy='13' r='1.5'/%3E%3Ccircle cx='14.5' cy='19.5' r='1.6'/%3E%3Ccircle cx='8.5' cy='22' r='1.6'/%3E%3Ccircle cx='17.2' cy='25' r='1.3'/%3E%3C/g%3E%3Cpath d='M10.5,9 L6.8,21.5' fill='none' stroke='%23fff' stroke-opacity='0.3' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='4.6' r='3.4' fill='%23ffbe0b' stroke='%233d2310' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.chef { top: -28px; width: 32px; height: 31px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 31'%3E%3Cg stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round' fill='none'%3E%3Ccircle cx='9' cy='12' r='7'/%3E%3Ccircle cx='16' cy='9' r='8'/%3E%3Ccircle cx='23' cy='12' r='7'/%3E%3C/g%3E%3Cg fill='%23eef3fa'%3E%3Ccircle cx='9' cy='12' r='7'/%3E%3Ccircle cx='16' cy='9' r='8'/%3E%3Ccircle cx='23' cy='12' r='7'/%3E%3C/g%3E%3Cpath d='M11.6,7 C12.2,9.5 12,12 11,14.5 M20.4,7 C19.8,9.5 20,12 21,14.5' fill='none' stroke='%23c3cbd8' stroke-width='1.1' stroke-linecap='round'/%3E%3Crect x='6' y='16.5' width='20' height='12' rx='2' fill='%23eef3fa' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M11,19 V26 M16,19 V26 M21,19 V26' stroke='%23c3cbd8' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.sunglasses { top: 27%; width: 36px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 12'%3E%3Crect x='1' y='1.3' width='34' height='2.4' rx='1.2' fill='%2312161f'/%3E%3Cpath d='M2,2 H16 V6.5 C16,9.5 14,10.5 10.5,10.5 H7 C3.5,10.5 2,9 2,6.5 Z' fill='%2312161f' stroke='%2305070a' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M20,2 H34 V6.5 C34,9 32.5,10.5 29,10.5 H25.5 C22,10.5 20,9.5 20,6.5 Z' fill='%2312161f' stroke='%2305070a' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M11.5,3.8 L8.6,8.4' fill='none' stroke='%23fff' stroke-opacity='0.5' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M14,4.2 L12.8,6.2' fill='none' stroke='%23fff' stroke-opacity='0.35' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M29.5,3.8 L26.6,8.4' fill='none' stroke='%23fff' stroke-opacity='0.5' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M32,4.2 L30.8,6.2' fill='none' stroke='%23fff' stroke-opacity='0.35' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.mustache { top: 54%; width: 26px; height: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 9'%3E%3Cpath d='M13,3 C10.5,1.2 7,1.2 5,3.4 C3.5,4.9 2.2,4.6 1.4,3.2 C1,7 4.2,8.4 7.8,7.8 C10,7.4 11.8,6.4 13,5.2 C14.2,6.4 16,7.4 18.2,7.8 C21.8,8.4 25,7 24.6,3.2 C23.8,4.6 22.5,4.9 21,3.4 C19,1.2 15.5,1.2 13,3 Z' fill='%233d2310' stroke='%2324140a' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M8,4.2 C9.5,3.6 10.8,3.7 11.8,4.3' fill='none' stroke='%23fff' stroke-opacity='0.25' stroke-width='0.9' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.wizard { top: -33px; width: 44px; height: 37px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 37'%3E%3Cpath d='M13,30 L20,10 Q22,3.5 27.5,2.5 Q24.2,5.8 24.5,10 L31,30 Z' fill='%236a1b9a' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M15.2,27.5 L16.3,24.4 H27.9 L29,27.5 Z' fill='%23ffd166'/%3E%3Cpath d='M21.5,15 l0.8,1.8 1.8,0.3 -1.4,1.2 0.4,1.9 -1.6,-1 -1.6,1 0.4,-1.9 -1.4,-1.2 1.8,-0.3 Z' fill='%23ffd166'/%3E%3Ccircle cx='25.5' cy='20.5' r='0.9' fill='%23ffd166'/%3E%3Ccircle cx='19' cy='21' r='0.7' fill='%23ffd166'/%3E%3Cpath d='M19.5,13 L16.2,22.5' fill='none' stroke='%23fff' stroke-opacity='0.25' stroke-width='1.4' stroke-linecap='round'/%3E%3Cellipse cx='22' cy='30.5' rx='20' ry='4' fill='%236a1b9a' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.propeller { top: -21px; width: 32px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M4,22 C4,13 9,8 16,8 C23,8 28,13 28,22 Z' fill='%230077b6' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M12.8,8.8 C11.8,12 11.6,17 12,21.6 H20 C20.4,17 20.2,12 19.2,8.8 C17.2,8.2 14.8,8.2 12.8,8.8 Z' fill='%23ffb703'/%3E%3Cpath d='M4,22 C4,13 9,8 16,8 C23,8 28,13 28,22 Z' fill='none' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Crect x='15' y='4.5' width='2' height='4' fill='%23ffb703' stroke='%233d2310' stroke-width='1' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cellipse cx='9.2' cy='4.2' rx='6.6' ry='1.9' fill='%23e63946' stroke='%233d2310' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cellipse cx='22.8' cy='4.2' rx='6.6' ry='1.9' fill='%23e63946' stroke='%233d2310' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='4.2' r='1.8' fill='%23ffb703' stroke='%233d2310' stroke-width='1.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M7.5,17 C7.5,14 8.8,12 10.5,10.8' fill='none' stroke='%23fff' stroke-opacity='0.3' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.halo { top: -22px; width: 30px; height: 8px; border: 3px solid #ffd700; border-radius: 50%; box-shadow: 0 0 10px #ffd700; }
.crown { top: -19px; width: 30px; height: 21px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 21'%3E%3Cpath d='M3,18 L3,6.5 L9,12 L15,4 L21,12 L27,6.5 L27,18 Z' fill='%23ffd700' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Crect x='4' y='14' width='22' height='3' fill='%23e0b400'/%3E%3Ccircle cx='15' cy='15.4' r='1.7' fill='%23e63946'/%3E%3Ccircle cx='8.5' cy='15.5' r='1.1' fill='%234cc9f0'/%3E%3Ccircle cx='21.5' cy='15.5' r='1.1' fill='%234cc9f0'/%3E%3Ccircle cx='3' cy='5.6' r='1.5' fill='%23ffd700' stroke='%233d2310' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='15' cy='3.1' r='1.5' fill='%23ffd700' stroke='%233d2310' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='27' cy='5.6' r='1.5' fill='%23ffd700' stroke='%233d2310' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M6,9.5 V12.5' fill='none' stroke='%23fff' stroke-opacity='0.5' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.tactical { top: -19px; width: 40px; height: 23px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 23'%3E%3Cpath d='M4.5,19 C4.5,8.5 11.5,2.5 20,2.5 C28.5,2.5 35.5,8.5 35.5,19 Z' fill='%232f3e46' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cellipse cx='11' cy='11' rx='3' ry='2' fill='%233e525c'/%3E%3Cellipse cx='27.5' cy='7.5' rx='3.2' ry='1.8' fill='%233e525c'/%3E%3Crect x='2' y='17.5' width='36' height='4.5' rx='2' fill='%2325323a' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Crect x='11.5' y='8.5' width='17' height='7' rx='3.5' fill='%231b252b' stroke='%233d2310' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='16.3' cy='12' r='2.3' fill='%2338b000'/%3E%3Ccircle cx='23.7' cy='12' r='2.3' fill='%2338b000'/%3E%3Ccircle cx='15.6' cy='11.2' r='0.7' fill='%23d8ffc0'/%3E%3Ccircle cx='23' cy='11.2' r='0.7' fill='%23d8ffc0'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.sprout { top: -17px; width: 22px; height: 19px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 19'%3E%3Cpath d='M11,18.5 C11,14 11,10 11.6,6.5' fill='none' stroke='%233d2310' stroke-width='3.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M11,18.5 C11,14 11,10 11.6,6.5' fill='none' stroke='%2352b788' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.2,8.5 C8,3.5 3.5,4 2,6.5 C4,9.8 8,10.5 11.2,8.5 Z' fill='%2340916c' stroke='%233d2310' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M11.8,6.8 C14,2 18.5,1.5 20.5,3.5 C19,7.2 15,8.8 11.8,6.8 Z' fill='%2352b788' stroke='%233d2310' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M4.5,6.8 C6.5,7.4 8.5,7.8 10.5,8' fill='none' stroke='%23fff' stroke-opacity='0.45' stroke-width='0.9' stroke-linecap='round'/%3E%3Cpath d='M13,6.2 C15,5.2 17,4.4 19,3.8' fill='none' stroke='%23fff' stroke-opacity='0.45' stroke-width='0.9' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.detective { top: -20px; width: 40px; height: 23px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 23'%3E%3Cpath d='M9.5,15 C5,15.5 2.5,17.5 1.5,20.5 H11 Z' fill='%237f4f24' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M30.5,15 C35,15.5 37.5,17.5 38.5,20.5 H29 Z' fill='%237f4f24' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M8,20.5 C8,10 13,4 20,4 C27,4 32,10 32,20.5 Z' fill='%239c6644' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M14.5,5.8 C13,10 12.8,15 13.2,20 M20,4.5 V20 M25.5,5.8 C27,10 27.2,15 26.8,20 M9.2,13 H30.8' fill='none' stroke='%237f4f24' stroke-width='1.1'/%3E%3Cpath d='M8.3,17.5 H31.7 V20.2 H8.3 Z' fill='%237f4f24'/%3E%3Cpath d='M8,20.5 C8,10 13,4 20,4 C27,4 32,10 32,20.5 Z' fill='none' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='3.6' r='2' fill='%237f4f24' stroke='%233d2310' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.headphones { top: -8px; width: 50px; height: 33px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 33'%3E%3Cpath d='M6,21 C6,8 14,2.5 25,2.5 C36,2.5 44,8 44,21' fill='none' stroke='%233d2310' stroke-width='5' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M6,21 C6,8 14,2.5 25,2.5 C36,2.5 44,8 44,21' fill='none' stroke='%232b2d42' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1.5' y='15.5' width='9' height='15.5' rx='4' fill='%23ef233c' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Crect x='39.5' y='15.5' width='9' height='15.5' rx='4' fill='%23ef233c' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Crect x='8' y='18' width='3.2' height='10.5' rx='1.5' fill='%232b2d42'/%3E%3Crect x='38.8' y='18' width='3.2' height='10.5' rx='1.5' fill='%232b2d42'/%3E%3Cpath d='M4.2,19 V25' fill='none' stroke='%23fff' stroke-opacity='0.45' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M42.2,19 V25' fill='none' stroke='%23fff' stroke-opacity='0.45' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.tiara { top: -16px; width: 34px; height: 19px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 19'%3E%3Cpath d='M5.5,15 L8.5,7.5 L12.5,13 L17,3 L21.5,13 L25.5,7.5 L28.5,15 Z' fill='%237fe8f0' stroke='%233d2310' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M2.5,15.3 C9,12.8 25,12.8 31.5,15.3 L31.5,17 C25,14.8 9,14.8 2.5,17 Z' fill='%237fe8f0' stroke='%233d2310' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='17' cy='9.6' r='2.3' fill='%23ff4f9a' stroke='%233d2310' stroke-width='1.1' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='8.9' cy='11.2' r='1.2' fill='%23ff4f9a'/%3E%3Ccircle cx='25.1' cy='11.2' r='1.2' fill='%23ff4f9a'/%3E%3Cpath d='M16.2,6.6 L14.9,8.8' fill='none' stroke='%23fff' stroke-opacity='0.75' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }

/* --- SEASONAL HATS ---
   Drawn the same way as every hat above — border triangles, radii and
   pseudo-elements, no image assets — which is the only reason a season can add
   to the Wardrobe without anybody drawing anything.

   ⚠️ THEY ARE CHOOSABLE, NOT RANDOM. Both are in wardrobeOptions.js so a
   chatter or the operator can pick one, and NEITHER is in the random spawn
   pool in gameEngine.js. That is deliberate: the random pool has no idea what
   month it is, so putting Santa in it would put Santa hats on strangers in
   July — which is the exact failure the whole seasonal design is built to
   avoid. Making the random pool follow the season is a real feature and wants
   the dressing plumbed into the engine; it is not this change. */
.witch { top: -35px; width: 46px; height: 38px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 38'%3E%3Cpath d='M13,32 L20,12 Q23,3.2 30,2 Q26.2,6 26.2,12 L33,32 Z' fill='%232d1b4e' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M15.2,28.8 L16.4,25.2 H29.6 L30.8,28.8 Z' fill='%237ac74f'/%3E%3Crect x='20.6' y='24.8' width='5' height='4.4' fill='none' stroke='%23ffd166' stroke-width='1.3'/%3E%3Cpath d='M19.4,15 L16.6,23' fill='none' stroke='%23fff' stroke-opacity='0.2' stroke-width='1.4' stroke-linecap='round'/%3E%3Cellipse cx='23' cy='32.5' rx='21' ry='4' fill='%232d1b4e' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.santa { top: -25px; width: 40px; height: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M8,22 C8,12 13,5 21,5 C27,5 31,8 33,12 C34.2,14.5 33.4,16.2 31.8,16.8 C30,13.4 27.6,11.4 25.2,11 C28,14 29.2,18 30,22 Z' fill='%23d62828' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M12.5,17 C12.8,13 14.5,10 17,8.5' fill='none' stroke='%23fff' stroke-opacity='0.3' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='33' cy='16' r='3.8' fill='%23fdfdfd' stroke='%233d2310' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3Crect x='5' y='19.5' width='29' height='6.5' rx='3.25' fill='%23fdfdfd' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }

/* The rest of the seasonal set, so every season has a hat the alert card can
   put on a potato. Same construction as everything above — border triangles,
   radii and pseudo-elements, no image assets — which is the entire reason a
   season can dress the card without anybody drawing anything. */
.leprechaun { top: -23px; width: 42px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26'%3E%3Cpath d='M11.5,4 H30.5 L29,20 H13 Z' fill='%231f7a3d' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M12.6,13.5 H29.4 L29,19 H13 Z' fill='%2314532a'/%3E%3Crect x='18' y='12.8' width='6' height='6.6' fill='none' stroke='%23e3b23c' stroke-width='1.6'/%3E%3Cpath d='M15,6.5 V11.5' fill='none' stroke='%23fff' stroke-opacity='0.3' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect x='2' y='19' width='38' height='5.5' rx='2.75' fill='%231f7a3d' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.bunnyears { top: -34px; width: 28px; height: 37px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 37'%3E%3Cpath d='M8.5,34 C4.5,25 3,11 5.8,4.5 C8.5,0 12.5,5 12.8,15 C13,23 12,29 11.8,34 Z' fill='%23f6eee8' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M16.2,34 C16,28 16.2,20 18,12.5 C20,4.5 24.5,2.5 25.2,7 C26,13 22,25 19.5,34 Z' fill='%23f6eee8' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M9.2,27 C7.4,21 6.6,13 7.8,8 C9.2,5.5 10.8,9 10.8,15 C10.8,20 10.3,24 10,27 Z' fill='%23f0a8bd'/%3E%3Cpath d='M18.2,27 C18.2,22 18.8,16 20,12 C21.2,8 23.2,7.5 23.3,10 C23.4,14 21.4,21 19.6,27 Z' fill='%23f0a8bd'/%3E%3Cpath d='M2,35 C8,32 20,32 26,35' fill='none' stroke='%233d2310' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M2,35 C8,32 20,32 26,35' fill='none' stroke='%23f0a8bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.pilgrim { top: -25px; width: 46px; height: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 28'%3E%3Cpath d='M13,22 L14.5,3 H31.5 L33,22 Z' fill='%23171b28' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M13.6,15 H32.4 L32.8,21 H13.2 Z' fill='%232b3246'/%3E%3Crect x='19' y='13.5' width='8' height='8' rx='1' fill='none' stroke='%23d8c37a' stroke-width='2'/%3E%3Cpath d='M17.5,5.5 V11' fill='none' stroke='%23fff' stroke-opacity='0.2' stroke-width='1.8' stroke-linecap='round'/%3E%3Crect x='2' y='20.5' width='42' height='5.5' rx='2.75' fill='%23171b28' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.heartband { top: -21px; width: 34px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 24'%3E%3Cpath d='M12.5,20.5 C12,15 10,11.5 7.5,9' fill='none' stroke='%233d2310' stroke-width='3.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M12.5,20.5 C12,15 10,11.5 7.5,9' fill='none' stroke='%232d1f2a' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21.5,20.5 C22,15 24,11.5 26.5,9' fill='none' stroke='%233d2310' stroke-width='3.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M21.5,20.5 C22,15 24,11.5 26.5,9' fill='none' stroke='%232d1f2a' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3,22.5 C9,19.5 25,19.5 31,22.5' fill='none' stroke='%233d2310' stroke-width='4.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M3,22.5 C9,19.5 25,19.5 31,22.5' fill='none' stroke='%23c9345a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.30,12.20 C2.98,9.23 1.90,6.80 1.90,5.18 C1.90,3.29 3.25,2.21 4.73,2.21 C5.95,2.21 6.89,3.02 7.30,3.96 C7.71,3.02 8.65,2.21 9.87,2.21 C11.35,2.21 12.70,3.29 12.70,5.18 C12.70,6.80 11.62,9.23 7.30,12.20 Z' fill='%23ff5c8a' stroke='%233d2310' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M26.70,12.20 C22.38,9.23 21.30,6.80 21.30,5.18 C21.30,3.29 22.65,2.21 24.13,2.21 C25.35,2.21 26.29,3.02 26.70,3.96 C27.11,3.02 28.05,2.21 29.27,2.21 C30.75,2.21 32.10,3.29 32.10,5.18 C32.10,6.80 31.02,9.23 26.70,12.20 Z' fill='%23ff5c8a' stroke='%233d2310' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M4.6,4.8 L5.6,4.1' fill='none' stroke='%23fff' stroke-opacity='0.7' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M24,4.8 L25,4.1' fill='none' stroke='%23fff' stroke-opacity='0.7' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }

/* CLOWN HAIR AND A CLOWN NOSE (2026-09-10, the operator's own idea).

   ⚠️ TWO ITEMS IN TWO DIFFERENT SLOTS, DELIBERATELY. The hair is a hat and the
   nose is a face, so nobody can be handed the pair — `rollLook` rolls the head
   always and the face on a coin flip, which makes the full clown roughly a
   1-in-90 roll. The operator: "I bet people try and roll to get them together."
   That is the point of splitting it; a single `clown` item would be a costume
   you either have or do not, and this is something to chase.

   ⚠️ THE NOSE IS POSITIONED OFF `.face`, NOT THE SPRITE, like the other two
   face items — so it follows the head rather than the body, and stays put
   through a squish. */
.clownhair { top: -24px; width: 62px; height: 28px; background: transparent; border-radius: 0; background-image: radial-gradient(circle 1.4px at 12.2px 7.2px, #f06a94 0 1.0px, transparent 1.4px), radial-gradient(circle 4.2px at 13.6px 8.8px, #d6356b 0 3.2px, #a3234f 3.2px 4.2px, transparent 4.2px), radial-gradient(circle 1.6px at 35.4px 2.9px, #ffe08f 0 1.1px, transparent 1.6px), radial-gradient(circle 4.6px at 37.0px 4.6px, #ffc93c 0 3.5px, #d29a14 3.5px 4.6px, transparent 4.6px), radial-gradient(circle 1.4px at 47.0px 6.5px, #6fdccd 0 1.0px, transparent 1.4px), radial-gradient(circle 4.0px at 48.4px 8.0px, #37c4b4 0 3.0px, #1d8f83 3.1px 4.0px, transparent 4.0px), radial-gradient(circle 2.7px at 3.7px 16.0px, #f06a94 0 1.9px, transparent 2.7px), radial-gradient(circle 7.8px at 6.4px 19.0px, #d6356b 0 5.9px, #a3234f 6.0px 7.8px, transparent 7.8px), radial-gradient(circle 2.1px at 7.7px 10.9px, #6fdccd 0 1.5px, transparent 2.1px), radial-gradient(circle 6.1px at 9.8px 13.2px, #37c4b4 0 4.6px, #1d8f83 4.7px 6.1px, transparent 6.1px), radial-gradient(circle 2.5px at 15.9px 5.4px, #ffe08f 0 1.8px, transparent 2.5px), radial-gradient(circle 7.3px at 18.4px 8.2px, #ffc93c 0 5.5px, #d29a14 5.6px 7.3px, transparent 7.3px), radial-gradient(circle 2.2px at 28.4px 4.3px, #f06a94 0 1.6px, transparent 2.2px), radial-gradient(circle 6.6px at 30.6px 6.8px, #d6356b 0 5.0px, #a3234f 5.1px 6.6px, transparent 6.6px), radial-gradient(circle 2.6px at 40.2px 6.0px, #6fdccd 0 1.9px, transparent 2.6px), radial-gradient(circle 7.6px at 42.8px 8.9px, #37c4b4 0 5.8px, #1d8f83 5.9px 7.6px, transparent 7.6px), radial-gradient(circle 2.0px at 50.2px 11.5px, #ffe08f 0 1.5px, transparent 2.0px), radial-gradient(circle 6.0px at 52.2px 13.8px, #ffc93c 0 4.6px, #d29a14 4.6px 6.0px, transparent 6.0px), radial-gradient(circle 2.5px at 53.1px 16.2px, #f06a94 0 1.8px, transparent 2.5px), radial-gradient(circle 7.4px at 55.6px 19.0px, #d6356b 0 5.6px, #a3234f 5.7px 7.4px, transparent 7.4px), radial-gradient(circle 2.3px at 19.3px 12.0px, #6fdccd 0 1.7px, transparent 2.3px), radial-gradient(circle 6.8px at 21.6px 14.6px, #37c4b4 0 5.2px, #1d8f83 5.2px 6.8px, transparent 6.8px), radial-gradient(circle 2.5px at 28.5px 13.0px, #ffe08f 0 1.8px, transparent 2.5px), radial-gradient(circle 7.4px at 31.0px 15.8px, #ffc93c 0 5.6px, #d29a14 5.7px 7.4px, transparent 7.4px), radial-gradient(circle 2.2px at 39.0px 12.5px, #6fdccd 0 1.6px, transparent 2.2px), radial-gradient(circle 6.5px at 41.2px 15.0px, #37c4b4 0 4.9px, #1d8f83 5.0px 6.5px, transparent 6.5px), radial-gradient(circle 2.7px at 5.3px 17.0px, #ffe08f 0 2.0px, transparent 2.7px), radial-gradient(circle 8.0px at 8.0px 20.0px, #ffc93c 0 6.1px, #d29a14 6.2px 8.0px, transparent 8.0px), radial-gradient(circle 2.7px at 17.3px 17.5px, #f06a94 0 2.0px, transparent 2.7px), radial-gradient(circle 8.0px at 20.0px 20.5px, #d6356b 0 6.1px, #a3234f 6.2px 8.0px, transparent 8.0px), radial-gradient(circle 2.7px at 28.3px 17.0px, #6fdccd 0 2.0px, transparent 2.7px), radial-gradient(circle 8.0px at 31.0px 20.0px, #37c4b4 0 6.1px, #1d8f83 6.2px 8.0px, transparent 8.0px), radial-gradient(circle 2.7px at 39.3px 17.5px, #f06a94 0 2.0px, transparent 2.7px), radial-gradient(circle 8.0px at 42.0px 20.5px, #d6356b 0 6.1px, #a3234f 6.2px 8.0px, transparent 8.0px), radial-gradient(circle 2.7px at 51.3px 17.0px, #ffe08f 0 2.0px, transparent 2.7px), radial-gradient(circle 8.0px at 54.0px 20.0px, #ffc93c 0 6.1px, #d29a14 6.2px 8.0px, transparent 8.0px); }
.clownnose { top: 45%; width: 11px; height: 11px; background: #ff3b30; border-radius: 50%; box-shadow: inset -2px -2px 0 rgba(0,0,0,.22); } .clownnose::before { content: ''; position: absolute; top: 2px; left: 2px; width: 3px; height: 3px; background: rgba(255,255,255,.75); border-radius: 50%; }

/* ── PAIRS: each of these is half a costume (2026-09-10) ──────────────── */
.bandana { top: -13px; width: 40px; height: 17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 17'%3E%3Cpath d='M5,15.5 C5,7.5 11,3 18,3 C25,3 30,6.5 31,12.5 L31,15.5 Z' fill='%23b03a2e' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cg fill='%23f4efe4'%3E%3Ccircle cx='12' cy='8.5' r='1.3'/%3E%3Ccircle cx='18' cy='6' r='1.3'/%3E%3Ccircle cx='24.5' cy='8' r='1.3'/%3E%3Ccircle cx='15' cy='12.3' r='1.3'/%3E%3Ccircle cx='21.2' cy='11.6' r='1.3'/%3E%3Ccircle cx='27.5' cy='12.6' r='1.2'/%3E%3Ccircle cx='9' cy='13' r='1.2'/%3E%3C/g%3E%3Cpath d='M33,11 L38.5,8.5 L37.5,13.2 Z' fill='%23b03a2e' stroke='%233d2310' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M33,13.5 L37.8,16.2 L33.6,16.6 Z' fill='%23b03a2e' stroke='%233d2310' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='32.2' cy='12.6' r='2.5' fill='%23b03a2e' stroke='%233d2310' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.viking { top: -20px; width: 48px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cpath d='M12.5,16 C6.5,16 2.5,11 3.5,2.5 C5.5,7 9,9.5 12.5,9.5 Z' fill='%23efe3cb' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M35.5,16 C41.5,16 45.5,11 44.5,2.5 C42.5,7 39,9.5 35.5,9.5 Z' fill='%23efe3cb' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M3.5,2.6 C4,4.6 4.8,6.1 6,7.2 L4.3,8 C3.6,6.4 3.3,4.6 3.5,2.6 Z M44.5,2.6 C44,4.6 43.2,6.1 42,7.2 L43.7,8 C44.4,6.4 44.7,4.6 44.5,2.6 Z' fill='%23c9b99a'/%3E%3Cpath d='M11,20.5 C11,11 16.5,5 24,5 C31.5,5 37,11 37,20.5 Z' fill='%2394a6bb' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Crect x='22.8' y='5.8' width='2.4' height='13' fill='%2379899c'/%3E%3Cpath d='M15.5,15 C15.5,12 16.8,9.6 19,8.2' fill='none' stroke='%23fff' stroke-opacity='0.35' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect x='10' y='17.5' width='28' height='5' rx='1.5' fill='%2379899c' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cg fill='%23d7dfe8'%3E%3Ccircle cx='14' cy='20' r='0.9'/%3E%3Ccircle cx='19' cy='20' r='0.9'/%3E%3Ccircle cx='24' cy='20' r='0.9'/%3E%3Ccircle cx='29' cy='20' r='0.9'/%3E%3Ccircle cx='34' cy='20' r='0.9'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.scrubs { top: -15px; width: 34px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 18'%3E%3Cpath d='M3.5,15 C3.5,7 9.5,2.5 17,2.5 C24.5,2.5 30.5,7 30.5,15 Z' fill='%232a9d8f' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M13,8 H16 M14.5,6.5 V9.5 M21,10.2 H23.6 M22.3,8.9 V11.5' stroke='%23fff' stroke-opacity='.45' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M7.5,12 C8,9 9.8,6.8 12,5.6' fill='none' stroke='%23fff' stroke-opacity='0.3' stroke-width='1.5' stroke-linecap='round'/%3E%3Crect x='2' y='12' width='30' height='4.5' rx='2' fill='%2321867a' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }

/* ── STANDALONE HATS ──────────────────────────────────────────────────── */
.beanie { top: -21px; width: 34px; height: 25px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 25'%3E%3Cpath d='M5,20 C5,11 10,6 17,6 C24,6 29,11 29,20 Z' fill='%233b6ea5' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M11,8.5 C10,12 9.8,15 10,18 M17,6.5 V18 M23,8.5 C24,12 24.2,15 24,18' fill='none' stroke='%23000' stroke-opacity='.16' stroke-width='1.2'/%3E%3Crect x='3' y='16.5' width='28' height='6.5' rx='2.5' fill='%232c5480' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M7,18.5 V21 M11,18.5 V21 M15,18.5 V21 M19,18.5 V21 M23,18.5 V21 M27,18.5 V21' stroke='%23fff' stroke-opacity='.18' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='17' cy='5' r='3.8' fill='%23e8eef5' stroke='%233d2310' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.bucket { top: -17px; width: 44px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20'%3E%3Cpath d='M12,14 L13.5,4 C17,2.5 27,2.5 30.5,4 L32,14 Z' fill='%237d8b52' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M12.4,10.5 H31.6 L32,13.8 H12 Z' fill='%235f6b3b'/%3E%3Cpath d='M16,5.5 L15.3,9' fill='none' stroke='%23fff' stroke-opacity='0.3' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M4,17.2 C8,13 15,13 22,13 C29,13 36,13 40,17.2 C36,18.9 30,19.3 22,19.3 C14,19.3 8,18.9 4,17.2 Z' fill='%236b7745' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M8,16.6 C14,15.6 30,15.6 36,16.6' fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='0.9' stroke-dasharray='1.6 1.2'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.fez { top: -19px; width: 24px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M4.5,19.5 L6.5,4.5 Q12,2.6 17.5,4.5 L19.5,19.5 Z' fill='%23b5303a' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M5,16 H19 L19.4,19.3 H4.6 Z' fill='%2392232c'/%3E%3Cpath d='M8.8,7 L8,13' fill='none' stroke='%23fff' stroke-opacity='0.28' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='3.8' r='1.4' fill='%232e2319'/%3E%3Cpath d='M12,3.8 C15.5,4 18.5,6 19.6,10.5' fill='none' stroke='%232e2319' stroke-width='1.2'/%3E%3Cpath d='M18.6,10.2 H20.6 L21.6,15 H17.6 Z' fill='%232e2319'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.hardhat { top: -17px; width: 40px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M8,16 C8,8 13,3 20,3 C27,3 32,8 32,16 Z' fill='%23f0b400' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M18,3.6 C18.6,3.3 21.4,3.3 22,3.6 V15.6 H18 Z' fill='%23d19e00'/%3E%3Cpath d='M12.2,12.5 C12.5,9.5 13.8,7.3 15.8,6' fill='none' stroke='%23fff' stroke-opacity='0.45' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect x='2' y='14.5' width='36' height='4.5' rx='2.25' fill='%23f0b400' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.antlers { top: -22px; width: 40px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M13,22.5 C12.5,16 10,9.5 5.5,3.5' fill='none' stroke='%233d2310' stroke-width='4.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M13,22.5 C12.5,16 10,9.5 5.5,3.5' fill='none' stroke='%237a5230' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11,13 C8.5,12 5.5,12.2 2.5,13.8' fill='none' stroke='%233d2310' stroke-width='4.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M11,13 C8.5,12 5.5,12.2 2.5,13.8' fill='none' stroke='%237a5230' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.3,17 C13.8,13.6 15.8,11 17.5,9.6' fill='none' stroke='%233d2310' stroke-width='4.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M12.3,17 C13.8,13.6 15.8,11 17.5,9.6' fill='none' stroke='%237a5230' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M27,22.5 C27.5,16 30,9.5 34.5,3.5' fill='none' stroke='%233d2310' stroke-width='4.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M27,22.5 C27.5,16 30,9.5 34.5,3.5' fill='none' stroke='%237a5230' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M29,13 C31.5,12 34.5,12.2 37.5,13.8' fill='none' stroke='%233d2310' stroke-width='4.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M29,13 C31.5,12 34.5,12.2 37.5,13.8' fill='none' stroke='%237a5230' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M27.7,17 C26.2,13.6 24.2,11 22.5,9.6' fill='none' stroke='%233d2310' stroke-width='4.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M27.7,17 C26.2,13.6 24.2,11 22.5,9.6' fill='none' stroke='%237a5230' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.cone { top: -22px; width: 30px; height: 25px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 25'%3E%3Cpath d='M11.5,3 H18.5 L24,20.5 H6 Z' fill='%23f26a1b' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M10.2,8 H19.8 L20.9,11.5 H9.1 Z' fill='%23f4f4f4'/%3E%3Cpath d='M8.3,14.2 H21.7 L22.6,17 H7.4 Z' fill='%23f4f4f4'/%3E%3Cpath d='M11.5,3 H18.5 L24,20.5 H6 Z' fill='none' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Crect x='2' y='19.5' width='26' height='4' rx='1.5' fill='%23d9560f' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.graduation { top: -16px; width: 40px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M11,17.5 C11,13.5 11.5,10.5 12,9 H28 C28.5,10.5 29,13.5 29,17.5 Z' fill='%23222839' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M20,1.5 L38,6.5 L20,11.5 L2,6.5 Z' fill='%23161b28' stroke='%233d2310' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M5.5,6.4 L20,2.5 L34.5,6.4' fill='none' stroke='%23fff' stroke-opacity='0.22' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M20,6.5 C26,7 30,8 31,9.5 V15' fill='none' stroke='%23e3b23c' stroke-width='1.3'/%3E%3Cpath d='M29.8,14.2 H32.2 L32.9,18.5 H29.1 Z' fill='%23e3b23c' stroke='%233d2310' stroke-width='1' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='6.5' r='1.4' fill='%23e3b23c'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }

/* ── FACES ────────────────────────────────────────────────────────────── */
.beard { top: 51%; width: 30px; height: 17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 17'%3E%3Cpath fill-rule='evenodd' d='M1.5,1.5 C1,9 6,16 15,16.5 C24,16 29,9 28.5,1.5 C27,3 25,3.5 23,3 C21,1.5 18,0.8 15,1.5 C12,0.8 9,1.5 7,3 C5,3.5 3,3 1.5,1.5 Z M9.2,4.8 C11,7.6 19,7.6 20.8,4.8 C18,5.9 12,5.9 9.2,4.8 Z' fill='%236b4423' stroke='%233d2310' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M6,9 C7,10.5 8,11 9.5,11.5 M24,9 C23,10.5 22,11 20.5,11.5 M13,12.5 C14,13.4 16,13.4 17,12.5' fill='none' stroke='%23000' stroke-opacity='.2' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.longbeard { top: 51%; width: 30px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Cpath fill-rule='evenodd' d='M1.5,1.5 C1,8.5 4.5,13 8.5,15.5 C11,17.5 13,20 15,21 C17,20 19,17.5 21.5,15.5 C25.5,13 29,8.5 28.5,1.5 C27,3 25,3.5 23,3 C21,1.5 18,0.8 15,1.5 C12,0.8 9,1.5 7,3 C5,3.5 3,3 1.5,1.5 Z M9.2,4.8 C11,7.6 19,7.6 20.8,4.8 C18,5.9 12,5.9 9.2,4.8 Z' fill='%23d8dee8' stroke='%233d2310' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M6.5,9 C7.8,11 9.5,12.5 11.5,13.5 M23.5,9 C22.2,11 20.5,12.5 18.5,13.5 M15,10.5 V17' fill='none' stroke='%238d96a8' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.eyepatch { top: 28%; width: 44px; height: 15px; margin-left: -1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 15'%3E%3Cpath d='M13,6 C22,2.2 32,1.2 43,2.2' fill='none' stroke='%233d2310' stroke-width='3.3' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M13,6 C22,2.2 32,1.2 43,2.2' fill='none' stroke='%23171b28' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8,9 L1,8' fill='none' stroke='%233d2310' stroke-width='3.3' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M8,9 L1,8' fill='none' stroke='%23171b28' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8,4 H18.5 C19.8,4 20.3,5 20.3,6.5 C20.3,10.5 17.3,13.5 13.3,13.5 C9.3,13.5 6.3,10.8 6.3,7 C6.3,5 7,4 8,4 Z' fill='%23171b28' stroke='%233d2310' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M9,6.5 C9.5,5.7 10.5,5.4 11.5,5.4' fill='none' stroke='%23fff' stroke-opacity='0.3' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.mask { top: 49%; width: 32px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 14'%3E%3Cpath d='M4.2,4 C1.2,4 0.8,9.5 4,9.8 M27.8,4 C30.8,4 31.2,9.5 28,9.8' fill='none' stroke='%23b9d4e8' stroke-width='1.3'/%3E%3Cpath d='M4,2.5 C10,1.5 22,1.5 28,2.5 L28.5,9 C24,12.8 8,12.8 3.5,9 Z' fill='%23cfe4f2' stroke='%233d2310' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M5,5.4 C12,4.7 20,4.7 27,5.4 M5,8 C12,9.4 20,9.4 27,8' fill='none' stroke='%239fbfd8' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.pipe { top: 38%; width: 16px; height: 20px; margin-left: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Ccircle cx='12.2' cy='4.2' r='1.9' fill='%23e8eef2' fill-opacity='.55'/%3E%3Ccircle cx='13.8' cy='1.8' r='1.3' fill='%23e8eef2' fill-opacity='.4'/%3E%3Cpath d='M1.8,9.3 C5,9.3 8,9.6 10,10.8' fill='none' stroke='%233d2310' stroke-width='3.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M1.8,9.3 C5,9.3 8,9.6 10,10.8' fill='none' stroke='%236b4423' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9,7 H15 V11.5 C15,14 13.5,15 12,15 C10.5,15 9,14 9,11.5 Z' fill='%233a2415' stroke='%233d2310' stroke-width='1.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cellipse cx='12' cy='7.2' rx='2.4' ry='0.8' fill='%23e85d04'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.monocle { top: 31%; width: 14px; height: 23px; margin-left: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 23'%3E%3Cpath d='M7,13 C7,16 5.5,19 3.5,22' fill='none' stroke='%23d8b449' stroke-width='1' stroke-dasharray='1.4 0.9'/%3E%3Ccircle cx='7' cy='7' r='5.4' fill='%23c8e6ff' fill-opacity='.35' stroke='%233d2310' stroke-width='3.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='7' r='5.4' fill='none' stroke='%23d8b449' stroke-width='1.8'/%3E%3Cpath d='M4.4,5.6 C4.9,4.3 6,3.6 7.3,3.5' fill='none' stroke='%23fff' stroke-opacity='0.8' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.blush { top: 50%; width: 8px; height: 5px; background: #ff9aa8; border-radius: 50%; opacity: .8; box-shadow: -20px 0 0 #ff9aa8; margin-left: 10px; }