/* Home: the counter. The featured set's name is the sign, its pack stands
   forward on the laminate under the pendant light with the price gun's
   sticker on it, and the pack wall rises behind: the other sets' wrappers on
   shelves over paper labels. A checklist slip lies on the counter. Under it
   the glass case holds the most valuable cards on the site. The rest of the
   page is the plain back wall. The objects themselves are drawn in
   css/counter.css; this sheet lays them out. See DESIGN.md. */

/* ---- The counter scene (laptop) ------------------------------------------ */
/* Three columns: the sign and the action, the pack on the counter, the wall.
   The wall stands on the counter's back edge; the pack and the slip stand on
   its top. */
.home-page .home-counter { --counter-h: 180px; --lamp-x: 50%; }
.home-scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 340px) 300px minmax(0, 1fr);
  grid-template-areas: "head stage wall" "act stage wall";
  grid-template-rows: auto 1fr;
  column-gap: 44px;
  min-height: 740px;
}
.home-head { grid-area: head; min-width: 0; padding-top: 112px; container-type: inline-size; }
.home-page .home-title {
  margin: 0;
  /* The sign's own size, brought down only when a word would run out of the
     column (js/app.js measures the widest word in em as --name-em). */
  font-size: clamp(56px, 9vw, 92px);
  font-size: min(clamp(56px, 9vw, 92px), calc(100cqw * 0.98 / var(--name-em, 4)));
  text-wrap: balance;
  color: var(--ink);
}
.home-meta { margin: 18px 0 0; color: var(--ink-2); font-size: 16px; }
.home-act { grid-area: act; min-width: 0; }
.home-lede { margin: 22px 0 0; max-width: 30ch; color: var(--ink); font-size: 17px; line-height: 1.45; }
.home-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 30px; }
.home-cta .solid { min-height: 52px; padding-inline: 26px; font-size: 18px; font-weight: 700; }
.home-cta .text-btn { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; }
.home-cta .text-btn[hidden] { display: none; }

/* The featured pack, forward on the counter. */
.home-stand {
  grid-area: stage;
  align-self: end;
  position: relative;
  z-index: 2;
  margin-bottom: 78px;
}
.home-stand .counter-pack { width: 300px; }
/* A promo set has no boosters: its top promo stands there in a top-loader. */
.counter-loader {
  position: relative;
  width: 220px;
  margin: 0 auto;
  padding: 22px 8px 8px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
}
.counter-loader .tcg { width: 100%; }
/* The one moment on this page: a set brought over from the wall lands on the counter. */
.counter-pack.is-new, .counter-loader.is-new { animation: counter-land 0.6s var(--ease-out) both; }
@keyframes counter-land {
  from { opacity: 0; transform: translateY(-36px); }
}

/* The pack wall: two shelves behind the counter between gondola uprights. */
.home-wall {
  grid-area: wall;
  align-self: end;
  position: relative;
  min-width: 0;
  margin-bottom: calc(var(--counter-h) + 14px);
  padding: 0 12px;
  --wall-cols: 5;
  --wall-pack-h: 150px;
}
.home-wall::before, .home-wall::after {
  content: "";
  position: absolute;
  top: -26px;
  bottom: 0;
  width: 10px;
  background: linear-gradient(90deg, #2c2721, #3b352e 50%, #24201b);
}
.home-wall::before { left: 0; }
.home-wall::after { right: 0; }
.home-wall-h {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The checklist slip, lying on the counter top. */
.home-countertop {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 14px;
  height: var(--counter-h);
  display: flex;
  align-items: flex-end;
  padding: 0 110px 32px 0;
  pointer-events: none;
}
.checklist-slip {
  display: block;
  width: 300px;
  padding: 12px 14px 13px;
  border-radius: 1px;
  background: var(--paper);
  color: var(--print);
  text-decoration: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.28);
  transform: rotate(1.4deg);
  pointer-events: auto;
}
.checklist-slip:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.slip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; line-height: 1.25; }
.slip-head b { font-size: 14px; font-weight: 700; }
.slip-head span { color: var(--print-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slip-boxes {
  display: grid;
  grid-template-columns: repeat(var(--cols, 26), minmax(0, 1fr));
  gap: 2px;
  margin: 10px 0 9px;
}
/* A printed box per card; a pen tick once it is in the binder. */
.slip-boxes i { aspect-ratio: 1; border: 1px solid #9a9286; }
.slip-boxes i.on {
  border-color: #6f685d;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.4 2.6L9 1' fill='none' stroke='%231a1714' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 130% no-repeat;
}
.slip-count { display: block; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.checklist-slip:hover .slip-count { text-decoration: underline; text-underline-offset: 2px; }

/* ---- Under the counter ---------------------------------------------------- */
.home-block { margin: 56px 0 0; }
.home-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
}
.home-block-head h2 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.home-block-head .text-btn { flex: none; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }

/* Your pulls: the best one with its tag, then the latest as a strip. */
.home-pulls-row { display: grid; gap: 24px; }
.home-page .home-hit {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.home-hit-art {
  flex: none;
  width: 112px;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.home-hit-art:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.home-hit-copy { min-width: 0; }
.home-hit-label { margin: 0; font-size: 13px; color: var(--muted); }
.home-hit-copy h3 { margin: 4px 0; font-size: 20px; line-height: 1.15; overflow-wrap: anywhere; }
.home-hit-copy p { margin: 0; color: var(--ink-2); font-size: 13px; }
.home-hit-copy .price-tag { margin-top: 12px; font-size: 22px; }
.home-page .home-strip { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; background: none; }
.home-strip-label { margin: 0; font-size: 13px; color: var(--muted); }
.home-page .home-film {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin: 0;
  padding: 10px 0 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.home-page .home-film::-webkit-scrollbar { display: none; }
.home-page .home-film .mini-card { width: 92px; flex: none; }

/* Net worth: one sentence, and the chart plainly under it. (Not .home-worth,
   which theme.css still draws as a panel.) */
.home-worth-line { margin: 0; max-width: 60ch; font-size: 16px; color: var(--ink); }
.home-worth-chart { max-width: 640px; margin: 14px -4px 0; }
.pc-spark { height: 96px; cursor: default; }
/* Plain: an ink line, red only while it is under what the player started
   with, and no glow. */
.home-worth-chart .pc-svg, .home-worth-chart .pc-svg.up, .home-worth-chart .pc-svg.flat { --pc-key: var(--ink-2); }
.home-worth-chart .pc-svg.down { --pc-key: var(--bad); }
.home-worth-chart .pc-line { filter: none; }
.pc-base {
  stroke: rgba(243, 241, 236, 0.28);
  stroke-width: 1;
  stroke-dasharray: 4 5;
  vector-effect: non-scaling-stroke;
}

.home-road { margin: 0; max-width: 70ch; color: var(--ink-2); font-size: 15px; }

/* ---- The lounge: who is here, and the site's chat. Plain, no panels. ------ */
.home-page .home-lounge {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  margin: 64px 0 0;
  padding-top: 0;
}
.home-page .lounge-panel { padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.home-page .lounge-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
}
.home-page .lounge-head h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.home-page .lounge-head span { font-size: 14px; color: var(--muted); }
.home-page .lounge-head b { color: var(--ink); font-weight: 650; }
.home-page .online-list { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 10px 0 0; }
.home-page .online-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 14px;
  font-weight: 560;
}
.home-page .online-chip:hover { border: 0; background: none; text-decoration: underline; text-underline-offset: 3px; }
.home-page .chat-log { height: 280px; padding: 12px 0; }
.home-page .chat-line b { font-size: 13px; color: var(--ink); font-weight: 650; }
.home-page .chat-line span { font-size: 14px; color: var(--ink-2); }
.home-page .chat-form { gap: 8px; padding: 0; }
.home-page .chat-form input { padding: 10px 12px; background: var(--wall-dark); border-color: var(--line-2); border-radius: var(--r-sm); }
.home-page .lounge-empty { padding: 12px 0 0; font-size: 14px; }

@media (min-width: 861px) {
  .home-pulls-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
  .home-hit-art { width: 124px; }
  .home-page .home-lounge { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
}

/* ---- A narrower laptop: smaller columns, a shorter wall ------------------- */
@media (min-width: 1100px) and (max-width: 1279px) {
  .home-scene { grid-template-columns: minmax(0, 290px) 250px minmax(0, 1fr); column-gap: 36px; min-height: 680px; }
  .home-stand .counter-pack { width: 250px; }
  .home-wall { --wall-cols: 4; --wall-pack-h: 136px; }
  .home-wall .wall-slot:nth-child(n + 8):not(.wall-all) { display: none; }
  .home-countertop { padding-right: 40px; }
}

/* ---- Stacked: tablet and phone ---------------------------------------------
   The scene comes apart into a column: the sign, the pack on the counter's
   edge, the action and the slip on the laminate, the nosing, then the case,
   and the wall after it. The wrappers keep no box (display: contents), so
   each piece lays its own strip of the counter under itself. */
@media (max-width: 1099px) {
  .home-page { display: flex; flex-direction: column; }
  .home-page .home-counter, .home-scene, .home-page #home-body { display: contents; }
  .home-page .home-counter::before, .home-page .home-counter::after { content: none; }
  .home-head, .home-stand, .home-act, .home-countertop, .home-wall { align-self: stretch; }
  .home-head { order: 1; padding-top: 24px; }
  .home-meta { margin-top: 12px; font-size: 15px; }
  .home-stand {
    order: 2;
    display: flex;
    justify-content: center;
    margin: 0 calc(50% - 50vw);
    padding: 22px calc(50vw - 50%) 24px;
    background:
      linear-gradient(var(--wall) calc(100% - 96px), #574e44 calc(100% - 96px), #574e44 calc(100% - 95px), transparent calc(100% - 95px)),
      radial-gradient(ellipse 340px 90px at 50% calc(100% - 50px), rgba(255, 224, 178, 0.15), rgba(255, 224, 178, 0) 75%),
      url("/assets/textures/laminate.png"),
      var(--counter);
  }
  /* As tall as the phone allows while the rip button still lands above the tab bar. */
  .home-stand .counter-pack { width: auto; height: clamp(240px, calc(100svh - 440px), 430px); }
  .home-stand .counter-pack img { width: auto; height: 100%; }
  .home-act {
    order: 3;
    display: flex;
    flex-direction: column;
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%) 4px;
    background: url("/assets/textures/laminate.png"), var(--counter);
  }
  .home-cta { order: 1; margin-top: 0; }
  .home-lede { order: 2; margin: 14px 0 0; max-width: 46ch; font-size: 16px; }
  .home-countertop {
    order: 4;
    position: static;
    height: auto;
    display: block;
    margin: 0 calc(50% - 50vw);
    padding: 20px calc(50vw - 50%) 40px;
    background:
      var(--nosing) bottom / 100% 14px no-repeat,
      url("/assets/textures/laminate.png"),
      var(--counter);
  }
  .checklist-slip { width: 100%; max-width: 340px; transform: rotate(-1deg); }
  .home-page .home-case { order: 5; }
  .home-wall {
    order: 6;
    align-self: stretch;
    margin: 0;
    padding: 48px 0 8px;
    --wall-cols: 5;
    --wall-pack-h: 150px;
  }
  .home-wall::before, .home-wall::after { content: none; }
  .home-wall-h {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    margin: 0 0 22px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }
  .home-page .home-block { order: 7; }
  .home-page .home-lounge { order: 8; }
}
@media (max-width: 720px) {
  .home-wall { --wall-cols: 3; --wall-pack-h: 140px; }
  .home-wall .wall-slot:nth-child(n + 9):not(.wall-all) { display: none; }
  .home-wall .wall-shelves { row-gap: 30px; }
  .home-cta .solid { width: 100%; }
  .home-block { margin-top: 44px; }
  .home-page .home-lounge { margin-top: 48px; }
  .home-page .chat-log { height: 220px; }
}

/* ---- Motion off ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .counter-pack.is-new, .counter-loader.is-new { animation: none; }
}
body.no-motion .counter-pack.is-new, body.no-motion .counter-loader.is-new { animation: none; }