/* The crew coins as heroes (round 4, Chris 31 Oct: "make the coin larger wherever it is the hero, so he can really see around it").
   Only places that hold a coin (svg.v-coin, coins.js) grow; a medallion keeps its size. The coin's own canvas is laid over the
   still by coins.js and follows its size. */

/* The welcome of a new session (his own, mine.js, and a crew member's, work-hero.js): a coin that turns by itself.
   (1 Nov, Chris: "nothing behind it") No plate, no ring: only the coin (or his own medallion), the page (the Matrix rain in his own
   sessions) showing all round it, and a soft shadow under it. The size of a good coin held in the hand: about 200 to 240 px on a
   phone, 300 to 340 on a wide screen, in proportion to the page and never dominating it (checked at 360 x 640, 390 x 844,
   1440 x 900 and 1920 x 1080: the greeting and the box stay on the first screen). */
.work-hero-ring { background: none; border: 0; box-shadow: none; }
.work-hero-ring .work-hero-face, .work-hero-ring .mine-start-face { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.26)); }
.work-hero-ring:has(svg.v-coin), .mine-start .work-hero-ring { width: clamp(200px, 56vw, 240px); height: clamp(200px, 56vw, 240px); }
@media (min-width: 820px) { .work-hero-ring:has(svg.v-coin), .mine-start .work-hero-ring { width: clamp(300px, 32vmin, 340px); height: clamp(300px, 32vmin, 340px); } }

/* A crew member's opened card: the coin in the sheet's head. */
.detail.tabbed #detail-pic:has(svg.v-coin) { width: 112px; height: 112px; }
@media (min-width: 820px) { .detail.tabbed #detail-pic:has(svg.v-coin) { width: 148px; height: 148px; } }
.detail.wide #detail-pic:has(svg.v-coin) { width: 132px; height: 132px; }

/* A visitor's card and talk (visit.html), the door's sheet on the yacht (door-sheet.js). */
.card-head .medallion:has(svg.v-coin) { width: 132px; height: 132px; }
.talk-head .medallion:has(svg.v-coin) { width: 96px; height: 96px; }
.ds-face:has(svg.v-coin) { width: 136px; height: 136px; background: transparent; box-shadow: none; }
@media (min-width: 820px) { .ds-face:has(svg.v-coin) { width: 164px; height: 164px; } }

/* The coin's own canvas: a hero shows a grab hand, and keeps every gesture on it. */
canvas.coin-3d.coin-inspect, canvas.coin-3d.coin-spin { cursor: grab; }
canvas.coin-3d.coin-inspect:active, canvas.coin-3d.coin-spin:active { cursor: grabbing; }

/* (1 Nov, Chris: Jason's coin sat on a brown disc in the visitors' crew row) A coin is never laid on a disc: wherever a medallion
   had a plate, a ring or a fill behind it (the desk's crew card, the yacht's crew row and sheets, the visitors' cards, the
   chats, the drawn yacht, the sessions' coins), a coin stands alone with a soft shadow under it. People who still have a
   medallion keep its frame. */
.medallion:has(svg.v-coin), .crew-portrait:has(svg.v-coin), .dc-med:has(svg.v-coin), .chat-face:has(svg.v-coin),
.mh-ring:has(svg.v-coin), .ds-face:has(svg.v-coin), .y2d-crew .medallion:has(svg.v-coin), .m-face:has(svg.v-coin) {
  background: none !important; border-color: transparent !important; box-shadow: none !important; overflow: visible !important;
}
svg.v-coin { overflow: visible; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.32)); }
/* A coin showing his back (coins.js face(): the window's head, Chris 1 Nov): the still shows the back's picture, where there is no 3D coin. */
svg.v-coin .v-coin-rev { display: none; }
svg.v-coin.on-back .v-coin-rev { display: inline; }
svg.v-coin.on-back .v-coin-base, svg.v-coin.on-back > g { display: none; }

/* (1 Nov) The yacht's name tags: the drawing in a tag sits on its own dark fill, which the tag's round face used to clip; a coin
   there is round with no fill and no square behind it, and the Matrix view's hexagon never cuts it. */
.w-tag-art.v-coin, svg.v-coin.w-tag-art { background: transparent !important; }
.w-tag-face:has(svg.v-coin) { border-radius: 50%; }
.w-tags.mx .w-tag-face:has(svg.v-coin) { clip-path: none !important; background: none !important; }