/* ════════ cards, shelf & drop zone ════════ */

.card {
  --card-w: 200px;
  --rc: var(--r-common);
  width: var(--card-w);
  height: calc(var(--card-w) * var(--card-ratio));
  font-size: calc(var(--card-w) * 0.075);
  user-select: none;
  -webkit-user-drag: none;
}

.card-face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0.85em;
  border: 0.28em solid var(--rc);
  background:
    linear-gradient(160deg, #fffdf6 0%, #f4ecd8 55%, #ece1c6 100%);
  box-shadow:
    0 0.5em 1.1em rgba(20, 16, 10, 0.35),
    inset 0 0 0 0.12em rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-top {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.55em 0.7em 0.3em;
}
.rarity-gem {
  width: 0.85em;
  height: 0.85em;
  flex: 0 0 auto;
  background: var(--rc);
  border: 0.1em solid rgba(0, 0, 0, 0.35);
  border-radius: 0.2em;
  transform: rotate(45deg);
  box-shadow: 0 0 0.4em color-mix(in srgb, var(--rc) 70%, transparent);
}
.card-top h3 {
  font-family: var(--ui);
  font-weight: 800;
  font-size: 0.98em;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
/* a card's nameplate follows its own theme, not its rarity */
.card-hand .card-top h3 {
  font-family: var(--hand-display);
  font-weight: 700;
  font-size: 1.35em;
}
.card-mono .card-top h3 {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-weight: 700;
  font-size: 0.86em;
  letter-spacing: 0.04em;
}
.card-display .card-top h3 {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 600;
  font-size: 1.12em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.card-serif .card-top h3 {
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-weight: 700;
  font-size: 1.02em;
  letter-spacing: 0.03em;
}

.card-art {
  flex: 1;
  margin: 0.25em 0.55em;
  border: 0.14em solid color-mix(in srgb, var(--rc) 55%, var(--ink) 20%);
  border-radius: 0.5em;
  background: var(--cream);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-art svg { width: 100%; height: 100%; display: block; }

.card-bottom {
  padding: 0.35em 0.7em 0.55em;
  text-align: center;
}
.rarity-name {
  display: inline-block;
  font-family: var(--ui);
  font-size: 0.62em;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: color-mix(in srgb, var(--rc) 80%, var(--ink) 20%);
  text-transform: uppercase;
}
.card-bottom p {
  font-family: var(--ui);
  font-size: 0.66em;
  color: #6d6353;
  line-height: 1.25;
}
.card-hand .card-bottom p { font-family: var(--hand-body); font-size: 0.78em; }
.card-mono .card-bottom p { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 0.6em; }
.card-serif .card-bottom p { font-family: Georgia, 'Iowan Old Style', serif; font-style: italic; font-size: 0.68em; }

/* rarity flavors */
.rarity-common    { --rc: var(--r-common); }
.rarity-uncommon  { --rc: var(--r-uncommon); }
.rarity-rare      { --rc: var(--r-rare); }
.rarity-epic      { --rc: var(--r-epic); }
.rarity-legendary { --rc: var(--r-legendary); }

.rarity-legendary .card-face {
  border-image: linear-gradient(140deg, #e9b64d, #ffe9a8, #c98a2c, #ffd873) 1;
  border-image-outset: 0;
  box-shadow:
    0 0.5em 1.4em rgba(20, 16, 10, 0.4),
    0 0 1.4em rgba(255, 205, 96, 0.55);
}
.holo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 236, 170, 0.5) 44%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(214, 178, 255, 0.4) 56%,
    transparent 70%
  );
  background-size: 260% 100%;
  animation: holo-sweep 3.4s ease-in-out infinite;
  mix-blend-mode: overlay;
}
@keyframes holo-sweep {
  0% { background-position: 120% 0; }
  55% { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}

/* a theme that's designed but not built yet */
.card.is-blank .card-art { position: relative; }
.card.is-blank .card-art::after {
  content: 'not built yet';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  text-align: center;
  font-family: var(--ui);
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fffdf6;
  background: rgba(38, 33, 28, 0.72);
  padding: 0.25em 0;
  pointer-events: none;
}

/* ════════ shelf ════════ */
.shelf {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: nowrap;
  padding: 10px 6px 4px;
  max-width: 100%;
  overflow-x: auto;
}
.slot {
  position: relative;
  flex: 0 0 auto;
  width: 138px;
  height: calc(138px * var(--card-ratio));
  border-radius: 12px;
}
.slot .card { --card-w: 138px; position: relative; z-index: 1; }
.slot .slot-ghostline {
  position: absolute;
  inset: 4px;
  border: 2.5px dashed var(--slot-line);
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.3s ease, border-color 0.4s ease;
}
.slot.empty .slot-ghostline { opacity: 1; }
.slot.empty::after {
  content: 'in play';
  position: absolute;
  left: 0; right: 0; top: 46%;
  text-align: center;
  font-family: var(--st-body-font);
  font-size: 13px;
  color: var(--st-muted);
}
.slot .card { cursor: grab; touch-action: none; transition: transform 0.18s ease, filter 0.18s ease; }
.slot .card:hover { transform: translateY(-6px) rotate(-1.2deg); filter: brightness(1.04); }
.slot .card.held { visibility: hidden; }

/* little bounce when a card refuses */
.slot .card.refused { animation: refuse-wiggle 0.5s ease; }
@keyframes refuse-wiggle {
  20% { transform: translateX(-5px) rotate(-3deg); }
  45% { transform: translateX(5px) rotate(3deg); }
  70% { transform: translateX(-3px) rotate(-1.5deg); }
}

/* ════════ drop zone ════════ */
.dropzone {
  position: relative;
  width: min(430px, 92vw);
  height: 158px;
  margin: 18px auto 36px;
  border-radius: 16px;
  /* flat fill on purpose: the alt-form's backing must match the zone exactly,
     or the hard switch shows up as a lighter panel */
  background: var(--zone-bg);
  transition: background 0.4s ease;
}
.zone-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--st-ink);
  transition: opacity 0.25s ease, color 0.4s ease;
  pointer-events: none;
}
.zone-label .zone-arrows { font-size: 14px; animation: arrows-bob 1.8s ease-in-out infinite; }
@keyframes arrows-bob { 50% { transform: translateY(4px); } }
.zone-label strong {
  font-family: var(--st-display-font);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
body.theme-coffee .zone-label strong {
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0;
  text-transform: none;
}
.zone-label em {
  font-family: var(--st-body-font);
  font-style: normal;
  font-size: 13px;
  opacity: 0.85;
}
body.theme-coffee .zone-label em { font-size: 14px; }
.dropzone.occupied .zone-label, .dropzone.hot .zone-label { opacity: 0; }

.zone-dock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the transformation line — rendered above the ghost */
.zone-borderline {
  position: fixed;
  z-index: 460;
  pointer-events: none;
  display: none;
}
body.phase-studio .zone-borderline { display: block; }
.zone-borderline svg { width: 100%; height: 100%; display: block; overflow: visible; }
.zbl-rect {
  fill: none;
  stroke: var(--zone-line);
  stroke-width: 3;
  stroke-dasharray: 12 9;
  stroke-linecap: round;
  transition: stroke 0.2s ease;
}
.zone-borderline.hot .zbl-rect {
  stroke: var(--zone-line-hot);
  stroke-width: 3.5;
  animation: ants 0.7s linear infinite;
}
@keyframes ants { to { stroke-dashoffset: -21; } }

/* note bubble by the zone */
.zone-note {
  position: fixed;
  z-index: 470;
  max-width: 250px;
  padding: 10px 16px;
  background: var(--note-bg);
  border: 2.5px solid var(--note-line);
  border-radius: 14px;
  font-family: var(--st-body-font);
  font-size: 14.5px;
  color: var(--note-ink);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  animation: note-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
body.theme-coffee .zone-note {
  border-width: 3px;
  border-radius: 18px 22px 20px 6px / 22px 16px 22px 16px;
  font-size: 16px;
  transform: rotate(-2deg);
  box-shadow: 3px 4px 0 rgba(47, 42, 38, 0.25);
}
@keyframes note-pop { from { transform: scale(0.6); opacity: 0; } }

/* ════════ drag ghost ════════ */
.ghost {
  --card-w: 156px;
  position: fixed;
  left: 0;
  top: 0;
  width: var(--card-w);
  height: calc(var(--card-w) * var(--card-ratio));
  z-index: 450;
  pointer-events: none;
  will-change: transform;
}
.ghost .glayer {
  position: absolute;
  inset: 0;
  will-change: clip-path;
}
.ghost .glayer-card {
  /* shadow fades as the card crosses the line (set from JS via --shadow-a) */
  filter: drop-shadow(0 14px 16px rgba(30, 22, 10, var(--shadow-a, 0.35)));
}
.ghost .glayer .card { --card-w: 156px; width: 100%; height: 100%; }

/* alt form: what the card becomes inside the zone */
.alt-face {
  width: 100%;
  height: 100%;
  background: var(--zone-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.alt-face svg { width: 78%; height: auto; display: block; }

/* brewed-object linework recolors with the page theme:
   chalk on the dark studio, ink once a paper theme owns the page */
.obj-line { stroke: var(--obj-ink); transition: stroke 0.4s ease; }
/* a real contact shadow: grounds the object on paper, vanishes on the dark studio */
.obj-shadow { fill: #120d05; opacity: 0.2; }
.mug-steam path { stroke: var(--steam-ink); }

/* each form has one small sign of life */
.pole-stripes { animation: pole-roll 2.8s linear infinite; }
@keyframes pole-roll { to { transform: translateY(-32px); } }

.chart-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bar-rise 3s ease-in-out infinite;
}
.chart-bar:nth-of-type(2) { animation-delay: 0.18s; }
.chart-bar:nth-of-type(3) { animation-delay: 0.36s; }
.chart-bar:nth-of-type(4) { animation-delay: 0.54s; }
@keyframes bar-rise {
  0%, 70%, 100% { transform: scaleY(1); }
  35% { transform: scaleY(0.82); }
}

.crt-cursor { animation: crt-blink 1.1s steps(1) infinite; }
@keyframes crt-blink { 50% { opacity: 0; } }

.fob-led { animation: led-blink 2.2s ease-in-out infinite; }

/* the docked watch keeps running */
.watch-hands g, .watch-hands .watch-min { transform-box: fill-box; transform-origin: 50% 85.7%; }
.watch-sec { animation: watch-sweep 60s linear infinite; }
.watch-min { animation: watch-sweep 3600s linear infinite; }
@keyframes watch-sweep { to { transform: rotate(360deg); } }
@keyframes led-blink { 0%, 82%, 100% { opacity: 1; } 88% { opacity: 0.15; } }

.frame-glint {
  transform-box: fill-box;
  animation: glint-sweep 5s ease-in-out infinite;
}
@keyframes glint-sweep {
  0%, 68%, 100% { transform: translateX(0); opacity: 0; }
  72% { opacity: 0.35; }
  92% { transform: translateX(72px); opacity: 0; }
}

/* whatever object is sitting on the line */
.docked-obj {
  width: 132px;
  cursor: grab;
  touch-action: none;
  transition: transform 0.2s ease;
  transform-origin: 24% 88%;
  animation: dock-bounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.docked-obj:hover { transform: translateY(-3px) rotate(-2deg); }
.docked-crt { width: 150px; transform-origin: 50% 80%; }
.docked-crt:hover { transform: translateY(-3px) rotate(0deg) scale(1.02); }
.docked-salon { width: 126px; transform-origin: 50% 12%; }
.docked-salon:hover { transform: translateY(-3px) rotate(1.5deg); }
.docked-obj.pouring {
  animation: none;
  transform: rotate(-24deg);
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.6, 1.4);
}
.docked-obj svg { width: 100%; display: block; overflow: visible; }
@keyframes dock-bounce {
  from { transform: scale(0.7); }
}

/* steam on any mug svg */
.mug-steam path {
  animation: steam-rise 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.mug-steam path:nth-child(2) { animation-delay: 0.55s; }
.mug-steam path:nth-child(3) { animation-delay: 1.1s; }
.pouring .mug-steam path { animation: none; opacity: 0; }
@keyframes steam-rise {
  0% { opacity: 0; transform: translateY(4px) scaleY(0.85); }
  35% { opacity: 0.75; }
  100% { opacity: 0; transform: translateY(-9px) scaleY(1.12); }
}

/* the tag under the zone once brewed */
.zone-tip {
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%) rotate(-1deg);
  white-space: nowrap;
  font-family: var(--st-body-font);
  font-size: 14px;
  color: var(--st-muted);
}