/* hats.css — positioning for hats drawn on top of cylinders. */

/* The on-cylinder hat: a child of the cylinder element, anchored to its top.
   margin-bottom (set inline) slides the brim down so it rests on the cylinder. */
.cyl-hat {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 280%;             /* of the host cylinder's width */
  margin-bottom: -96%;     /* slide the brim down so the sit-line meets the cyl top */
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 7;
  line-height: 0;
}
.cyl-hat svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Middle-column bookshelf cylinders only: nudge the hat down 6px (keeps the
   translateX centering, adds a +6px downward shift). Other views' hats are
   unaffected. */
.shelf-cyl .cyl-hat { transform: translate(-50%, 9px); }

/* Any cylinder element that can host a hat must be a positioning context. */
.cylarmy-npc-cyl,
.cf-cyl,
.adv-party-cyl,
.cc-seat-cyl,
.racing-runner-cyl,
.shelf-cyl,
.cylarmy-fuse-pick-cyl,
.cylarmy-fuse-prev-cyl,
.cylarmy-fuse-prev-mini-cyl { position: relative; }

/* Hat art shown inline as a gear icon (list rows, slots, toast). */
.equip-row-ico .hat-svg,
.equip-slot-ico .hat-svg,
.equip-toast-ico .hat-svg { display: inline-block; vertical-align: middle; }
.equip-slot-ico .hat-svg { width: 29px; height: 29px; }
.equip-row-ico .hat-svg { width: 31px; height: 31px; }

/* Prestige card: let the hat poke above its color bar without clipping. */
.pcyl-card { overflow: visible; }