:root {
  --ink: #2d2a26;
  --muted-ink: #746c61;
  --paper: #f4edda;
  --paper-light: #fffaf0;
  --wood-dark: #68452f;
  --wood: #8d6041;
  --wood-light: #a97750;
  --cell-size: clamp(30px, 3vw, 42px);
  --danger: #a54134;
  --success: #3f7255;
}

* {
  box-sizing: border-box;
}

button {
  font: inherit;
}

.page-shell {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns:
    minmax(0, 1180px)
    minmax(180px, 260px);
  gap: 22px;
  justify-content: center;
  align-items: start;
  padding: 28px;
}

.game-shell {
  min-width: 0;
}

.game-header {
  min-height: 92px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 0 8px 18px;
}

.eyebrow,
.paper-label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.eyebrow {
  color: #867b6c;
}

.game-header h1 {
  margin: 2px 0 0;
  color: #2e2924;
  font-family:
    Georgia,
    'Times New Roman',
    serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.subtitle {
  margin: 8px 0 0;
  color: #71695f;
  font-size: 0.9rem;
}

.best-card {
  min-width: 138px;
  transform: rotate(1.2deg);
  border: 1px solid #d3c5a6;
  border-radius: 3px;
  background: #f4e8bd;
  box-shadow: 0 5px 12px #4a34211f;
  padding: 12px 16px;
  text-align: center;
}

.best-card span {
  display: block;
  color: #82775f;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.best-card strong {
  display: block;
  margin-top: 3px;
  color: #40392e;
  font-family:
    'Courier New',
    monospace;
  font-size: 1.08rem;
}

.desk {
  position: relative;
  min-height: 690px;
  display: grid;
  grid-template-columns:
    minmax(150px, 190px)
    minmax(0, 1fr)
    minmax(150px, 190px);
  gap: 20px;
  align-items: start;
  overflow: hidden;
  border: 1px solid #68432e;
  border-radius: 14px;
  background:
    linear-gradient(
      90deg,
      #0000000a 1px,
      transparent 1px
    ),
    linear-gradient(
      180deg,
      #ffffff0d,
      #00000012
    ),
    repeating-linear-gradient(
      2deg,
      var(--wood),
      var(--wood) 56px,
      var(--wood-light) 57px,
      var(--wood) 59px,
      var(--wood-dark) 118px
    );
  background-size:
    120px 100%,
    100% 100%,
    100% 100%;
  box-shadow:
    inset 0 0 60px #3b241d38,
    0 18px 45px #33241825;
  padding: 34px 28px;
}

.paper-card,
.board-paper {
  position: relative;
  border: 1px solid #d4c9af;
  background:
    linear-gradient(
      90deg,
      transparent 31px,
      #d66d6824 32px,
      transparent 33px
    ),
    repeating-linear-gradient(
      180deg,
      transparent,
      transparent 27px,
      #728aa017 28px
    ),
    var(--paper);
  color: var(--ink);
  box-shadow:
    0 7px 13px #38251b38,
    inset 0 0 25px #826d4420;
}

.paper-card {
  border-radius: 2px;
  padding: 24px 18px 18px;
}

.run-panel {
  display: flex;
  flex-direction: column;
}

.run-card {
  transform: rotate(-1deg);
}

.inventory-card {
  transform: rotate(1.1deg);
}

.memo-card {
  margin-top: 18px;
  transform: rotate(-0.7deg);
}

.tape {
  position: absolute;
  z-index: 2;
  top: -12px;
  left: 50%;
  height: 24px;
  transform: translateX(-50%) rotate(-2deg);
  background: #e9d9a7b8;
  box-shadow: 0 1px 2px #5d4b3329;
}

.tape-small {
  width: 62px;
}

.tape-wide {
  width: 92px;
}

.paper-label {
  color: var(--muted-ink);
}

.floor-number {
  margin: 14px 0 20px;
  color: #746b5c;
  font-family:
    'Courier New',
    monospace;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.floor-number strong {
  display: block;
  margin-top: -4px;
  color: #302b25;
  font-family:
    Georgia,
    serif;
  font-size: 3.4rem;
  letter-spacing: -0.08em;
}

.run-stats {
  margin: 0;
}

.run-stats div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-height: 29px;
  border-bottom: 1px dashed #958b773f;
  align-items: center;
}

.run-stats dt {
  color: #827969;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.run-stats dd {
  margin: 0;
  font-family:
    'Courier New',
    monospace;
  font-size: 0.8rem;
  font-weight: 800;
}

.status-note {
  margin-top: 20px;
  border: 1px solid #cfc0a0;
  background: #fff9e9a6;
  padding: 10px;
}

.status-note strong,
.status-note span {
  display: block;
}

.status-note strong {
  font-family:
    'Courier New',
    monospace;
  font-size: 0.78rem;
}

.status-note span {
  margin-top: 4px;
  color: #71685b;
  font-size: 0.68rem;
  line-height: 1.5;
}

.board-area {
  min-width: 0;
}

.board-paper {
  transform: rotate(0.15deg);
  padding: 25px 22px 18px;
}

.board-topline {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  color: #746b5e;
  font-family:
    'Courier New',
    monospace;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.board-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 7px solid #4f3c2e;
  border-radius: 2px;
  background: #4f3c2e;
  box-shadow:
    inset 0 0 0 1px #241b15,
    0 5px 10px #3d2b2038;
}

.mine-board {
  width: max-content;
  display: grid;
  gap: 1px;
  margin-inline: auto;
  background: #817663;
  user-select: none;
}

.mine-cell {
  width: var(--cell-size);
  height: var(--cell-size);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family:
    "MineSweeper",
    Impact,
    "Arial Black",
    sans-serif;
  font-size: calc(var(--cell-size) * 0.60);
  font-weight: normal;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.mine-cell-closed {
  border-top: 3px solid #e7dfcd;
  border-left: 3px solid #e7dfcd;
  border-right: 3px solid #8c8171;
  border-bottom: 3px solid #8c8171;
  background:
    linear-gradient(
      135deg,
      #c9c1b1,
      #b5ac9d
    );
  color: #433c33;
}

.mine-cell-closed:hover {
  filter: brightness(1.08);
}

.mine-cell-closed:active {
  border: 1px solid #918676;
  background: #b9b0a0;
}

.mine-cell-open {
  border: 1px solid #b4aa99;
  background: #ddd6c8;
  color: #39342e;
  cursor: default;
}

.mine-cell-flagged {
  color: #9c4138;
}

.flag-icon {
  position: relative;
  width: calc(var(--cell-size) * 0.58);
  height: calc(var(--cell-size) * 0.64);
  display: block;
  transform: translate(1px, 1px);
  pointer-events: none;
}

.flag-cloth {
  position: absolute;
  top: 0%;
  left: 25%;
  width: 72%;
  height: 52%;
  background: #b9473d;
  clip-path: polygon(
    0 0,
    100% 50%,
    0 100%
  );
  filter:
    drop-shadow(0 1px 0 #fff5)
    drop-shadow(1px 1px 0 #6f2f2a55);
}

.flag-pole {
  position: absolute;
  top: 5%;
  bottom: 14%;
  left: 21%;
  width: max(
    2px,
    calc(var(--cell-size) * 0.07)
  );
  border-radius: 1px;
  background: #55483b;
  box-shadow:
    1px 0 #f4eadc55;
}

.flag-base {
  position: absolute;
  left: 5%;
  bottom: 8%;
  width: 48%;
  height: max(
    3px,
    calc(var(--cell-size) * 0.09)
  );
  border-radius: 1px;
  background: #55483b;
  box-shadow:
    0 1px #f4eadc55;
}

.mine-cell-mine {
  background: #b84f40;
  color: #fff5e8;
}

.mine-cell.number-1,
.mine-cell.number-2,
.mine-cell.number-3,
.mine-cell.number-4,
.mine-cell.number-5,
.mine-cell.number-6,
.mine-cell.number-7,
.mine-cell.number-8 {
  padding-top: calc(var(--cell-size) * 0.05);
  padding-left: 2px;
}
.number-1 {
  color: #315d9a;
}

.number-2 {
  color: #3d7850;
}

.number-3 {
  color: #a03f37;
}

.number-4 {
  color: #554583;
}

.number-5 {
  color: #8d4b32;
}

.number-6 {
  color: #347a7a;
}

.number-7 {
  color: #292929;
}

.number-8 {
  color: #6b6258;
}
.board-help {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 13px;
  color: #766d60;
  font-size: 0.68rem;
}

.result-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin: 18px 4px 0;
  border: 1px solid #d0c4a8;
  border-radius: 3px;
  background: #fff9e9;
  box-shadow: 0 7px 16px #3b291f38;
  padding: 14px 16px;
}

.result-card span,
.result-card strong {
  display: block;
}

.result-card span {
  color: #827767;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.result-card strong {
  margin-top: 3px;
  font-family:
    'Courier New',
    monospace;
  font-size: 0.9rem;
}

.result-card button {
  border: 1px solid #4e453a;
  border-radius: 3px;
  background: #4e453a;
  color: #fff8e8;
  padding: 9px 13px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.clear-card {
  border-left: 5px solid var(--success);
}

.gameover-card {
  border-left: 5px solid var(--danger);
}

.inventory-panel {
  min-width: 0;
}

.empty-item {
  margin-top: 18px;
  border: 1px dashed #aa9d84;
  padding: 17px 10px;
  text-align: center;
}

.empty-item span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin: 0 auto 7px;
  border: 1px solid #a89c85;
  border-radius: 50%;
  color: #91856f;
  font-family: Georgia, serif;
  font-size: 1.35rem;
}

.empty-item strong,
.empty-item small {
  display: block;
}

.empty-item strong {
  color: #756b5b;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

.empty-item small {
  margin-top: 5px;
  color: #8a806f;
  font-size: 0.62rem;
  line-height: 1.5;
}

.memo-card p:not(.paper-label) {
  margin: 13px 0 0;
  color: #5f574c;
  font-size: 0.7rem;
  line-height: 1.7;
}

.ad-reserve {
  min-height: 620px;
  display: grid;
  align-content: center;
  justify-items: center;
  margin-top: 92px;
  border: 1px dashed #c9c4b9;
  border-radius: 8px;
  background: #f8f7f3;
  color: #aaa59c;
  padding: 24px;
  text-align: center;
}

.ad-reserve span {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.ad-reserve p {
  margin: 9px 0 3px;
  font-size: 0.75rem;
}

.ad-reserve small {
  font-size: 0.64rem;
}

@media (max-width: 1050px) {
  .page-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .ad-reserve {
    min-height: 120px;
    margin-top: 0;
  }
}

@media (max-width: 800px) {
  :root {
    --cell-size: 34px;
  }

  .page-shell {
    padding: 14px;
  }

  .desk {
    grid-template-columns: 1fr;
    padding: 26px 18px;
  }

  .run-panel,
  .inventory-card,
  .memo-card,
  .board-paper {
    transform: none;
  }

  .inventory-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .memo-card {
    margin-top: 0;
  }
}

@media (max-width: 520px) {
  .game-header {
    align-items: flex-end;
  }

  .subtitle {
    display: none;
  }

  .best-card {
    min-width: 110px;
    padding: 9px;
  }

  .desk {
    border-radius: 8px;
  }

  .inventory-panel {
    grid-template-columns: 1fr;
  }

  .result-card {
    align-items: stretch;
    flex-direction: column;
  }

  .result-card button {
    width: 100%;
  }
}
/* =========================================================
   STEP 5A - RUN ECONOMY / SHOP / ITEM PLACEHOLDER ART
   ========================================================= */

.header-cards {
  display: flex;
  align-items: center;
  gap: 10px;
}

.coin-card {
  min-width: 92px;
  transform: rotate(-1deg);
  border: 1px solid #d1bd83;
  border-radius: 3px;
  background: #f7e6a7;
  box-shadow: 0 5px 12px #4a34211f;
  padding: 10px 13px;
  text-align: center;
}

.coin-card span,
.coin-card strong {
  display: block;
}

.coin-card span {
  color: #887548;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.coin-card strong {
  margin-top: 2px;
  color: #493c22;
  font-family: 'Courier New', monospace;
  font-size: 1.15rem;
}

.inventory-heading {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.inventory-heading > span {
  color: #806f43;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  font-weight: 800;
}

.inventory-list {
  display: grid;
  gap: 9px;
  margin-top: 15px;
}

.inventory-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border-bottom: 1px dashed #9d90783f;
  padding-bottom: 8px;
}

.inventory-item:has(button) {
  grid-template-columns:
    38px minmax(0, 1fr) auto;
}

.inventory-item strong,
.inventory-item small {
  display: block;
}

.inventory-item strong {
  color: #544b3f;
  font-size: 0.59rem;
  line-height: 1.25;
}

.inventory-item small {
  margin-top: 2px;
  color: #8a7d69;
  font-family: 'Courier New', monospace;
  font-size: 0.62rem;
}

.inventory-item button {
  border: 1px solid #625848;
  border-radius: 2px;
  background: #625848;
  color: #fff8e8;
  padding: 5px 6px;
  font-size: 0.55rem;
  font-weight: 800;
  cursor: pointer;
}

.inventory-item button:disabled {
  opacity: 0.38;
  cursor: default;
}

.item-art {
  position: relative;
  width: 54px;
  height: 54px;
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid #b8a98d;
  border-radius: 5px;
  background:
    radial-gradient(
      circle at 35% 28%,
      #fffdf4,
      #e8dec8 72%
    );
  box-shadow:
    inset 0 0 8px #7d6b4d20,
    0 2px 4px #44342620;
}

/* Placeholder artwork.
   Later these boxes can be replaced with the user's
   actual PNG / WebP item illustrations. */

.item-art-scanner {
  display: grid;
  place-items: center;
}

.scanner-ring {
  width: 31px;
  height: 31px;
  border: 4px solid #577879;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 3px #dbe7df;
}

.scanner-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a64d3d;
}

.scanner-line {
  position: absolute;
  width: 25px;
  height: 2px;
  transform: rotate(-36deg);
  transform-origin: right center;
  background: #577879;
}

.item-art-rescue-plate {
  display: grid;
  place-items: center;
}

.shield-shape {
  position: relative;
  width: 31px;
  height: 36px;
  background: #6f8790;
  clip-path: polygon(
    50% 0,
    92% 15%,
    84% 69%,
    50% 100%,
    16% 69%,
    8% 15%
  );
  filter: drop-shadow(1px 2px 1px #4b403a55);
}

.shield-shape span {
  position: absolute;
  inset: 6px 8px 9px;
  background: #d9d0b8;
  clip-path: inherit;
}

.item-art-coupon {
  display: grid;
  place-items: center;
}

.coupon-shape {
  width: 38px;
  height: 25px;
  display: grid;
  place-items: center;
  transform: rotate(-6deg);
  border: 2px dashed #9d7042;
  background: #f2d89b;
  color: #81572e;
  font-family: 'Courier New', monospace;
  font-size: 0.68rem;
  font-weight: 900;
}


.shop-panel {
  margin: 18px 4px 0;
  border: 1px solid #cbb991;
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      180deg,
      transparent,
      transparent 27px,
      #728aa00d 28px
    ),
    #f7eed7;
  box-shadow: 0 8px 18px #3b291f42;
  padding: 16px;
}

.shop-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
  border-bottom: 1px dashed #9d8e713f;
  padding-bottom: 11px;
}

.shop-heading span,
.shop-heading strong,
.shop-heading small {
  display: block;
}

.shop-heading span {
  color: #87775e;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.shop-heading strong {
  margin-top: 2px;
  color: #40372d;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
}

.shop-heading small {
  margin-top: 3px;
  color: #8b7041;
  font-size: 0.63rem;
  font-weight: 700;
}

.shop-wallet {
  border: 1px solid #c6ac6f;
  border-radius: 3px;
  background: #f6dfa1;
  color: #554321;
  padding: 7px 10px;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  font-weight: 900;
  white-space: nowrap;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.shop-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #cbbda1;
  border-radius: 4px;
  background: #fff9e9;
  box-shadow: 0 3px 7px #4d38271c;
  padding: 12px 9px 9px;
  text-align: center;
}

.shop-item-copy {
  min-height: 105px;
}

.shop-item-copy > span {
  display: block;
  margin-top: 8px;
  color: #9a8b72;
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.shop-item-copy strong {
  display: block;
  margin-top: 2px;
  color: #493f33;
  font-family: Georgia, serif;
  font-size: 0.82rem;
}

.shop-item-copy p {
  margin: 7px 0 0;
  color: #716557;
  font-size: 0.6rem;
  line-height: 1.45;
}

.shop-item > button {
  width: 100%;
  margin-top: auto;
  border: 1px solid #574c3e;
  border-radius: 3px;
  background: #574c3e;
  color: #fff8e9;
  padding: 7px 5px;
  font-size: 0.62rem;
  font-weight: 800;
  cursor: pointer;
}

.shop-item > button:disabled {
  opacity: 0.4;
  cursor: default;
}

.shop-item-sold {
  opacity: 0.58;
}

.shop-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
}

.shop-actions button {
  border-radius: 3px;
  padding: 8px 11px;
  font-size: 0.62rem;
  font-weight: 800;
  cursor: pointer;
}

.reroll-button {
  border: 1px solid #a39377;
  background: #fffaf0;
  color: #645947;
}

.reroll-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.leave-shop-button {
  border: 1px solid #4e453a;
  background: #4e453a;
  color: #fff8e8;
}

.scanner-target {
  cursor: crosshair;
}

.scanner-target:hover {
  outline: 3px solid #5d8b8d;
  outline-offset: -4px;
  filter: brightness(1.12);
}

.scanner-result-safe {
  box-shadow:
    inset 0 0 0 4px #315d9a;
}

.scanner-result-mine {
  box-shadow:
    inset 0 0 0 4px #b1493d;
}

.scanner-readout,
.rescue-readout {
  margin-top: 10px;
  border: 1px solid;
  border-radius: 2px;
  padding: 7px 10px;
  font-family: 'Courier New', monospace;
  font-size: 0.68rem;
  font-weight: 900;
  text-align: center;
}

.scanner-safe {
  border-color: #759b82;
  background: #dce9d9;
  color: #41684d;
}

.scanner-mine {
  border-color: #bd786e;
  background: #efd6cf;
  color: #8c3d34;
}

.rescue-readout {
  border-color: #a58a52;
  background: #f2e3b8;
  color: #715b2f;
}

@media (max-width: 650px) {
  .header-cards {
    gap: 5px;
  }

  .coin-card {
    min-width: 72px;
    padding: 8px;
  }

  .shop-grid {
    grid-template-columns: 1fr;
  }

  .shop-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    text-align: left;
  }

  .shop-item-copy {
    min-height: 0;
  }

  .shop-item-copy > span {
    margin-top: 0;
  }

  .shop-item > button {
    grid-column: 1 / -1;
  }

  .shop-actions {
    flex-direction: column;
  }
}
/* =========================================================
   STEP 5B - SHOP REPLACES THE BOARD
   ========================================================= */

.board-area-shop .board-paper {
  display: none;
}

.board-area-shop .shop-panel {
  min-height: 430px;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotate(0.15deg);
  border: 1px solid #d4c9af;
  background:
    linear-gradient(
      90deg,
      transparent 31px,
      #d66d6824 32px,
      transparent 33px
    ),
    repeating-linear-gradient(
      180deg,
      transparent,
      transparent 27px,
      #728aa017 28px
    ),
    var(--paper);
  box-shadow:
    0 7px 13px #38251b38,
    inset 0 0 25px #826d4420;
}

@media (max-width: 800px) {
  .board-area-shop .shop-panel {
    min-height: 0;
    transform: none;
  }
}
/* =========================================================
   STEP 6B - FLOOR PERFORMANCE SHEET
   ========================================================= */

.performance-sheet {
  min-width: 300px;
  display: grid;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  gap: 6px;
  margin: 0 4px;
}

.performance-sheet > div {
  min-width: 0;
  border: 1px solid #cfc2a6;
  border-radius: 2px;
  background: #f8f0dc;
  padding: 6px 7px;
  text-align: center;
}

.performance-sheet span,
.performance-sheet strong {
  display: block;
}

.performance-sheet span {
  color: #887d6a;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.performance-sheet strong {
  margin-top: 2px;
  color: #463e34;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
}

.clear-card {
  flex-wrap: wrap;
}

.clear-card .performance-sheet {
  order: 3;
  width: 100%;
  margin: 2px 0 0;
}

.performance-sheet-shop {
  width: 100%;
  margin: 0 0 14px;
  grid-template-columns:
    repeat(8, minmax(48px, 1fr));
}

@media (max-width: 800px) {
  .performance-sheet,
  .performance-sheet-shop {
    grid-template-columns:
      repeat(4, minmax(58px, 1fr));
  }
}

@media (max-width: 520px) {
  .performance-sheet,
  .performance-sheet-shop {
    min-width: 0;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}
/* =========================================================
   STEP 6B UI - CLEAR POPUP + DEV
   ========================================================= */

.board-paper {
  position: relative;
}

.clear-card {
  display: none;
}

.clear-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(48 38 29 / 46%);

}

.clear-popup {
  position: relative;
  width: min(460px, calc(100% - 8px));
  max-height: calc(100% - 8px);
  overflow-y: auto;
  border: 1px solid #cbbd9c;
  border-radius: 3px;
  padding: 25px 22px 17px;
  background:
    repeating-linear-gradient(
      180deg,
      transparent,
      transparent 27px,
      rgb(114 138 160 / 8%) 28px
    ),
    #fff8e6;
  box-shadow:
    0 16px 40px rgb(38 27 20 / 48%),
    inset 0 0 24px rgb(130 109 68 / 8%);
  text-align: center;
  transform: rotate(-0.2deg);
}

.clear-popup-tape {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 48px;
  height: 12px;
  background: rgb(216 199 156 / 70%);
  transform:
    translateX(-50%)
    rotate(1deg);
}

.clear-popup-kicker {
  margin: 2px 0 0;
  color: #8a795f;
  font-family: 'Courier New', monospace;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.clear-popup h2 {
  margin: 4px 0 0;
  color: #40382f;
  font-size: 1.45rem;
}

.clear-reward {
  margin: 3px 0 13px;
  color: #8b6a2e;
  font-family: 'Courier New', monospace;
  font-size: 0.88rem;
  font-weight: 900;
}

.friendly-performance {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.friendly-performance > div {
  min-width: 0;
  border: 1px solid #d2c4a4;
  border-radius: 3px;
  padding: 9px 6px 8px;
  background: rgb(255 253 245 / 80%);
}

.friendly-performance span,
.friendly-performance strong,
.friendly-performance small {
  display: block;
}

.friendly-performance span {
  color: #746956;
  font-size: 0.66rem;
  font-weight: 900;
}

.friendly-performance strong {
  margin-top: 2px;
  color: #443c32;
  font-family: 'Courier New', monospace;
  font-size: 1rem;
}

.friendly-performance small {
  margin-top: 3px;
  color: #918571;
  font-size: 0.54rem;
  line-height: 1.3;
}

.clear-details {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 10px;
}

.clear-details > span {
  color: #8b806d;
  font-size: 0.54rem;
}

.clear-details strong {
  display: block;
  margin-top: 1px;
  color: #51483c;
  font-family: 'Courier New', monospace;
  font-size: 0.66rem;
}

.clear-continue {
  width: 100%;
  margin-top: 14px;
  border: 1px solid #4e453a;
  border-radius: 3px;
  padding: 10px 14px;
  background: #4e453a;
  color: #fff8e8;
  font-size: 0.74rem;
  font-weight: 900;
  cursor: pointer;
}

.clear-continue:hover {
  filter: brightness(1.08);
}

.clear-popup-note {
  margin: 6px 0 0;
  color: #8a806f;
  font-size: 0.55rem;
}

@media (max-width: 520px) {
  .clear-overlay {
    padding: 9px;
  }

  .clear-popup {
    width: 100%;
    padding: 23px 13px 14px;
  }

  .clear-details {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}
/* =========================================================
   STEP 6C - SHOP READABILITY REDESIGN
   ========================================================= */

.shop-panel .performance-sheet-shop {
  display: none;
}

/* ----- Coin placeholder ------------------------------- */

.coin-icon {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  width: 1.35em;
  height: 1.35em;
  place-items: center;
  border: 0.12em solid #9a722d;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 36% 30%,
      #fff2a8 0 12%,
      transparent 13%
    ),
    radial-gradient(
      circle,
      #f4cf62 0 56%,
      #d9a83d 57% 100%
    );
  box-shadow:
    inset 0 0 0 0.12em #f9df83,
    0 1px 2px rgb(80 55 20 / 24%);
  vertical-align: middle;
}

.coin-icon > span {
  width: 0.34em;
  height: 0.34em;
  border: 0.09em solid #a97927;
  border-radius: 50%;
}

/* ----- Shop header ------------------------------------ */

.shop-heading {
  margin-bottom: 22px;
  padding: 2px 4px 15px;
  border-bottom: 1px dashed #9d8e7160;
}

.shop-heading h2 {
  margin: 0;
  color: #40372d;
  font-family: Georgia, 'Yu Mincho', serif;
  font-size: clamp(1.65rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.shop-wallet {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 86px;
  justify-content: center;
  padding: 8px 13px;
  font-size: 1rem;
}

.shop-wallet .coin-icon {
  font-size: 0.9rem;
}

.shop-wallet strong {
  color: #554321;
  font-family: 'Courier New', monospace;
  font-size: 1.05rem;
}

/* ----- Product cards ---------------------------------- */

.shop-grid {
  gap: 14px;
}

.shop-item {
  padding: 16px 13px 12px;
}

.shop-item-copy {
  min-height: 132px;
}

.shop-item-copy > span {
  margin-top: 10px;
  font-size: 0.68rem;
}

.shop-item-copy strong {
  margin-top: 4px;
  font-size: 1.08rem;
  line-height: 1.35;
}

.shop-item-copy p {
  margin-top: 9px;
  font-size: 0.78rem;
  line-height: 1.65;
}

.shop-item > button {
  min-height: 40px;
  padding: 9px 8px;
  font-size: 0.78rem;
}

.coin-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.coin-price .coin-icon {
  font-size: 0.83rem;
}

.coin-price strong {
  color: inherit;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
}

/* ----- Bottom actions --------------------------------- */

.shop-actions {
  align-items: stretch;
  gap: 12px;
  margin-top: 18px;
}

.shop-actions button {
  min-height: 42px;
  padding: 10px 14px;
  font-size: 0.76rem;
}

.reroll-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.reroll-button .coin-price {
  gap: 5px;
}

.leave-shop-button {
  min-width: 145px;
}

/* ----- Large shop sheet ------------------------------- */

.board-area-shop .shop-panel {
  justify-content: flex-start;
  padding: 24px 22px 20px;
}

/* ----- Mobile ----------------------------------------- */

@media (max-width: 650px) {
  .shop-heading {
    margin-bottom: 16px;
  }

  .shop-heading h2 {
    font-size: 1.65rem;
  }

  .shop-wallet {
    min-width: 76px;
    padding: 7px 10px;
  }

  .shop-item {
    grid-template-columns:
      64px minmax(0, 1fr);
    padding: 13px;
  }

  .shop-item-copy > span {
    margin-top: 0;
  }

  .shop-item-copy strong {
    font-size: 1rem;
  }

  .shop-item-copy p {
    font-size: 0.76rem;
  }

  .shop-item > button {
    grid-column: 1 / -1;
  }

  .shop-actions button {
    width: 100%;
    font-size: 0.78rem;
  }
}
/* =========================================================
   STEP 6D - COIN DISPLAY FIX
   ========================================================= */

/*
 * Temporary coin artwork.
 * Keep this as a reusable UI component so it can later be
 * replaced by the final coin PNG/WebP without changing
 * wallet / shop / price layouts.
 */

.coin-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 1.28em;
  height: 1.28em;
  box-sizing: border-box;
  border: 0.11em solid #9b742c;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 34% 27%,
      rgb(255 250 202 / 95%) 0 7%,
      transparent 8%
    ),
    linear-gradient(
      145deg,
      #ffe58b 0%,
      #f1c956 48%,
      #dca83c 100%
    );
  box-shadow:
    inset 0 0 0 0.12em #f8da72,
    inset 0 0 0 0.19em #c99435,
    0 1px 2px rgb(70 48 16 / 22%);
  vertical-align: -0.15em;
}

/*
 * Remove the old inner dot completely.
 * This also protects against any stale nested span.
 */

.coin-icon > span {
  display: none;
}

/* Small balance used in side panels */

.mini-coin-balance {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  white-space: nowrap;
  color: #675129;
}

.mini-coin-balance .coin-icon {
  font-size: 0.78rem;
}

.mini-coin-balance strong {
  color: inherit;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  font-weight: 900;
}

/* Main shop wallet */

.shop-wallet {
  gap: 8px;
}

.shop-wallet .coin-icon {
  font-size: 0.95rem;
}

.shop-wallet strong {
  line-height: 1;
}

/* Product / reroll prices */

.coin-price {
  gap: 6px;
}

.coin-price .coin-icon {
  font-size: 0.82rem;
}

@media (max-width: 520px) {
}
/* ============================================================
   STEP 7 - RESCUE FX + ACTION LOG
   ============================================================ */

.mine-cell {
  position: relative;
}

.rescue-fx {
  position: absolute;
  z-index: 30;
  inset: 50% auto auto 50%;
  width: calc(var(--cell-size) * 2.25);
  height: calc(var(--cell-size) * 2.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
}

.rescue-fx-shield {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 54%;
  height: 62%;
  border: max(2px, calc(var(--cell-size) * 0.08)) solid #d7f5f1;
  border-radius: 50% 50% 58% 58% / 38% 38% 70% 70%;
  background:
    linear-gradient(
      145deg,
      rgb(239 255 252 / 82%),
      rgb(111 188 185 / 34%) 52%,
      rgb(62 125 139 / 18%)
    );
  box-shadow:
    0 0 0 2px rgb(58 108 116 / 42%),
    0 0 10px rgb(188 244 235 / 88%),
    inset 0 0 9px rgb(255 255 255 / 76%);
  transform:
    translate(-50%, -50%)
    scale(0.2);
  opacity: 0;
  animation:
    rescue-shield-burst 820ms
    cubic-bezier(.2,.85,.25,1)
    forwards;
}

.rescue-fx-shield::after {
  content: '';
  position: absolute;
  top: 13%;
  left: 18%;
  width: 22%;
  height: 34%;
  border-radius: 50%;
  background: rgb(255 255 255 / 58%);
  transform: rotate(24deg);
}

.rescue-fx-ring {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 44%;
  height: 44%;
  border: 3px solid rgb(205 247 239 / 90%);
  border-radius: 50%;
  transform:
    translate(-50%, -50%)
    scale(0.25);
  opacity: 0;
  animation:
    rescue-impact-ring 720ms
    ease-out
    80ms
    forwards;
}

.rescue-fx-crack {
  position: absolute;
  z-index: 5;
  display: block;
  width: 2px;
  border-radius: 2px;
  background: #557f83;
  opacity: 0;
  transform-origin: top center;
  animation:
    rescue-crack-in 280ms
    ease-out
    310ms
    forwards;
}

.rescue-fx-crack-a {
  top: 34%;
  left: 49%;
  height: 32%;
  transform: rotate(24deg);
}

.rescue-fx-crack-b {
  top: 43%;
  left: 48%;
  height: 27%;
  transform: rotate(-48deg);
}

.rescue-fx-crack-c {
  top: 47%;
  left: 52%;
  height: 22%;
  transform: rotate(68deg);
}

.rescue-fx-shard {
  position: absolute;
  z-index: 4;
  top: 47%;
  left: 47%;
  width: 12%;
  height: 16%;
  border: 1px solid rgb(212 249 243 / 85%);
  background: rgb(112 188 187 / 54%);
  opacity: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 72%);
}

.rescue-fx-shard-a {
  --shard-x: -31px;
  --shard-y: -25px;
  --shard-r: -55deg;
  animation: rescue-shard-fly 520ms ease-out 390ms forwards;
}

.rescue-fx-shard-b {
  --shard-x: 31px;
  --shard-y: -21px;
  --shard-r: 72deg;
  animation: rescue-shard-fly 520ms ease-out 410ms forwards;
}

.rescue-fx-shard-c {
  --shard-x: -29px;
  --shard-y: 27px;
  --shard-r: -112deg;
  animation: rescue-shard-fly 500ms ease-out 420ms forwards;
}

.rescue-fx-shard-d {
  --shard-x: 30px;
  --shard-y: 25px;
  --shard-r: 128deg;
  animation: rescue-shard-fly 500ms ease-out 400ms forwards;
}

@keyframes rescue-shield-burst {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(0.2);
  }

  18% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(1.12);
  }

  34% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(0.96);
  }

  58% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(1.03);
    filter: brightness(1.35);
  }

  74% {
    opacity: 0.92;
    transform:
      translate(-50%, -50%)
      scale(1.08);
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(1.28);
  }
}

@keyframes rescue-impact-ring {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(0.25);
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(2.05);
  }
}

@keyframes rescue-crack-in {
  0% {
    opacity: 0;
    scale: 1 0;
  }

  100% {
    opacity: 0.95;
    scale: 1 1;
  }
}

@keyframes rescue-shard-fly {
  0% {
    opacity: 0.95;
    transform:
      translate(0, 0)
      rotate(0deg)
      scale(1);
  }

  100% {
    opacity: 0;
    transform:
      translate(
        var(--shard-x),
        var(--shard-y)
      )
      rotate(var(--shard-r))
      scale(0.45);
  }
}

/* Action log */

.action-log-card {
  margin-top: 18px;
  transform: rotate(0.45deg);
}

.action-log-card .paper-label {
  margin-bottom: 12px;
}

.action-log-empty {
  margin: 0;
  color: #887d6c;
  font-family:
    'Courier New',
    monospace;
  font-size: 0.68rem;
  line-height: 1.55;
}

.action-log-list {
  display: grid;
  gap: 7px;
}

.action-log-entry {
  position: relative;
  display: grid;
  gap: 2px;
  border-left: 3px solid #918574;
  padding: 5px 6px 5px 9px;
  background: rgb(255 255 255 / 18%);
}

.action-log-floor {
  color: #918574;
  font-family:
    'Courier New',
    monospace;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.action-log-entry strong {
  color: #51493f;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.35;
}

.action-log-scanner {
  border-left-color: #56858a;
}

.action-log-rescue {
  border-left-color: #6f9b91;
}

.action-log-coupon {
  border-left-color: #b38b45;
}

/* ============================================================
   STEP 8 - SCANNER TARGET FX
   Mechanical target lock -> scan beam -> result flash
   ============================================================ */

.scanner-fx {
  --scanner-fx-color: #8ad8d1;
  --scanner-fx-glow: rgb(122 222 211 / 72%);

  position: absolute;
  z-index: 28;
  inset: 50% auto auto 50%;
  width: calc(var(--cell-size) * 1.72);
  height: calc(var(--cell-size) * 1.72);
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}

.scanner-fx-safe {
  --scanner-fx-color: #83b9ed;
  --scanner-fx-glow: rgb(91 155 225 / 76%);
}

.scanner-fx-mine {
  --scanner-fx-color: #e48273;
  --scanner-fx-glow: rgb(224 89 73 / 78%);
}

/* circular targeting rings */

.scanner-fx-reticle {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  border: 2px solid var(--scanner-fx-color);
  border-radius: 50%;
  opacity: 0;
  box-shadow:
    0 0 4px var(--scanner-fx-glow),
    inset 0 0 4px var(--scanner-fx-glow);
}

.scanner-fx-reticle-outer {
  width: 82%;
  height: 82%;
  border-style: dashed;
  animation:
    scanner-reticle-outer 720ms
    cubic-bezier(.16,.8,.24,1)
    forwards;
}

.scanner-fx-reticle-inner {
  width: 48%;
  height: 48%;
  border-width: 1px;
  animation:
    scanner-reticle-inner 650ms
    cubic-bezier(.16,.8,.24,1)
    35ms
    forwards;
}

/* four mechanical corner brackets */

.scanner-fx-corner {
  position: absolute;
  z-index: 4;
  width: 24%;
  height: 24%;
  box-sizing: border-box;
  opacity: 0;
  filter:
    drop-shadow(
      0 0 2px
      var(--scanner-fx-glow)
    );
}

.scanner-fx-corner-tl {
  top: 5%;
  left: 5%;
  border-top: 2px solid var(--scanner-fx-color);
  border-left: 2px solid var(--scanner-fx-color);
  animation:
    scanner-corner-tl 600ms
    ease-out
    forwards;
}

.scanner-fx-corner-tr {
  top: 5%;
  right: 5%;
  border-top: 2px solid var(--scanner-fx-color);
  border-right: 2px solid var(--scanner-fx-color);
  animation:
    scanner-corner-tr 600ms
    ease-out
    forwards;
}

.scanner-fx-corner-bl {
  bottom: 5%;
  left: 5%;
  border-bottom: 2px solid var(--scanner-fx-color);
  border-left: 2px solid var(--scanner-fx-color);
  animation:
    scanner-corner-bl 600ms
    ease-out
    forwards;
}

.scanner-fx-corner-br {
  right: 5%;
  bottom: 5%;
  border-right: 2px solid var(--scanner-fx-color);
  border-bottom: 2px solid var(--scanner-fx-color);
  animation:
    scanner-corner-br 600ms
    ease-out
    forwards;
}

/* scan beam */

.scanner-fx-beam {
  position: absolute;
  z-index: 5;
  top: 17%;
  left: 20%;
  width: 60%;
  height: 3px;
  border-radius: 50%;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--scanner-fx-color) 18%,
      #fff 50%,
      var(--scanner-fx-color) 82%,
      transparent
    );
  box-shadow:
    0 0 5px var(--scanner-fx-glow),
    0 0 9px var(--scanner-fx-glow);
  opacity: 0;
  animation:
    scanner-beam-pass 470ms
    cubic-bezier(.3,.05,.65,.95)
    170ms
    forwards;
}

/* final SAFE / MINE pulse */

.scanner-fx-flash {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 54%;
  height: 54%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      var(--scanner-fx-glow) 0%,
      rgb(255 255 255 / 18%) 42%,
      transparent 72%
    );
  transform:
    translate(-50%, -50%)
    scale(0.2);
  opacity: 0;
  animation:
    scanner-result-flash 340ms
    ease-out
    480ms
    forwards;
}

@keyframes scanner-reticle-outer {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(1.65)
      rotate(-25deg);
  }

  22% {
    opacity: 0.95;
  }

  55% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(0.9)
      rotate(12deg);
  }

  72% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(1)
      rotate(20deg);
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(1.08)
      rotate(35deg);
  }
}

@keyframes scanner-reticle-inner {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(1.9);
  }

  30% {
    opacity: 0.9;
  }

  62% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(0.92);
  }

  78% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(1);
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(1.15);
  }
}

@keyframes scanner-beam-pass {
  0% {
    top: 17%;
    opacity: 0;
    transform: scaleX(0.35);
  }

  12% {
    opacity: 1;
    transform: scaleX(1);
  }

  82% {
    opacity: 1;
  }

  100% {
    top: 80%;
    opacity: 0;
    transform: scaleX(0.72);
  }
}

@keyframes scanner-result-flash {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(0.2);
  }

  35% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(1.65);
  }
}

@keyframes scanner-corner-tl {
  0% {
    opacity: 0;
    transform: translate(-14px, -14px);
  }

  38% {
    opacity: 1;
  }

  70% {
    opacity: 1;
    transform: translate(5px, 5px);
  }

  100% {
    opacity: 0;
    transform: translate(5px, 5px);
  }
}

@keyframes scanner-corner-tr {
  0% {
    opacity: 0;
    transform: translate(14px, -14px);
  }

  38% {
    opacity: 1;
  }

  70% {
    opacity: 1;
    transform: translate(-5px, 5px);
  }

  100% {
    opacity: 0;
    transform: translate(-5px, 5px);
  }
}

@keyframes scanner-corner-bl {
  0% {
    opacity: 0;
    transform: translate(-14px, 14px);
  }

  38% {
    opacity: 1;
  }

  70% {
    opacity: 1;
    transform: translate(5px, -5px);
  }

  100% {
    opacity: 0;
    transform: translate(5px, -5px);
  }
}

@keyframes scanner-corner-br {
  0% {
    opacity: 0;
    transform: translate(14px, 14px);
  }

  38% {
    opacity: 1;
  }

  70% {
    opacity: 1;
    transform: translate(-5px, -5px);
  }

  100% {
    opacity: 0;
    transform: translate(-5px, -5px);
  }
}


/* ============================================================
   STEP 9B - TOTAL COIN WIDTH
   Keep the existing coin-card paper design.
   Only give the accumulated total more horizontal room.
   ============================================================ */

.header-cards .coin-card {
  min-width: 150px;
  padding-inline: 18px;
}

.header-cards .coin-card strong {
  min-width: 7ch;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 800px) {
  .header-cards .coin-card {
    min-width: 136px;
    padding-inline: 14px;
  }
}
/* ============================================================
   STEP 9C - TOTAL COIN JAPANESE LABEL
   Use a normal Japanese UI font for the label so full-width
   Japanese kana are displayed with natural proportions.
   ============================================================ */

.header-cards .coin-card > span {
  font-family:
    "Yu Gothic UI",
    "Yu Gothic",
    "Meiryo",
    "Hiragino Kaku Gothic ProN",
    sans-serif;
  font-stretch: normal;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ============================================================
   STEP 2 DEV ITEM CATALOG V4
   ============================================================ */

.catalog-placeholder-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.catalog-placeholder-detail {
  position: absolute;
  width: 44px;
  height: 44px;
  border: 1px dashed #9d8d7466;
  border-radius: 50%;
  transform: rotate(12deg);
}

.catalog-placeholder-mark {
  position: relative;
  z-index: 2;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 2px solid #675b4b;
  border-radius: 50%;
  background: #eee3c9;
  color: #554a3c;
  box-shadow:
    inset 0 0 0 3px #fff9e7,
    1px 2px 2px #3d302330;
  font-family: Georgia, serif;
  font-size: 1.15rem;
  font-weight: 900;
}

.catalog-art-danger
.catalog-placeholder-mark {
  border-radius: 45%;
  background: #ded0c2;
}

.catalog-art-coin
.catalog-placeholder-mark {
  border-color: #9a7737;
  background: #e7ca73;
  color: #77591f;
}

.catalog-art-shop
.catalog-placeholder-mark {
  border-radius: 4px;
  transform: rotate(-5deg);
}

.catalog-art-chest
.catalog-placeholder-mark {
  border-radius: 6px 6px 2px 2px;
  background: #b98755;
  color: #fff0bd;
}

.catalog-art-shield
.catalog-placeholder-mark {
  background: #cbd4d2;
}

.catalog-art-risk
.catalog-placeholder-mark {
  border-color: #8d4e42;
  background: #ead0bf;
  color: #8d4035;
}

@keyframes dev-legendary-shine {
  0%,
  58% {
    left: -70%;
  }

  82%,
  100% {
    left: 135%;
  }
}


@media (max-width: 720px) {
}

/*
 * Mobile keeps the same readability improvement.
 */
@media (max-width: 720px) {
}


/* ------------------------------------------------------------
   15. TABLET
   ------------------------------------------------------------ */

@media (max-width: 900px) {
}


/* ------------------------------------------------------------
   16. MOBILE

   Do not shrink the text back to tiny sizes.
   Instead use fewer columns.
   ------------------------------------------------------------ */

@media (max-width: 620px) {
}

/*
 * Narrow desktop/tablet.
 */
@media (max-width: 900px) {
}

/*
 * Mobile remains one card per row and can size naturally.
 */
@media (max-width: 560px) {
}

/* ============================================================
   QUALITY PLACEHOLDER ART SET V1
   Rescue Plate quality direction.

   IMPORTANT:
   - no card hover transforms
   - no activation animations yet
   - illustrations are replaceable placeholders
   ============================================================ */

/* ------------------------------------------------------------
   Shared centering
   ------------------------------------------------------------ */

.item-art-scanner,
.item-art-mine-removal-kit,
.item-art-dud-bomb,
.item-art-golden-bell,
.item-art-coin-pickaxe,
.item-art-piggy-bank,
.item-art-treasure-chest,
.item-art-mimic,
.item-art-pattern-drone-mk1 {
  display: grid;
  place-items: center;
}

/* ============================================================
   SCANNER
   handheld radar unit
   ============================================================ */

.quality-scanner {
  position: relative;
  width: 39px;
  height: 43px;
}

.quality-scanner-case {
  position: absolute;
  left: 5px;
  bottom: 1px;
  width: 31px;
  height: 36px;
  box-sizing: border-box;
  border: 2px solid #465d5e;
  border-radius: 7px 7px 9px 9px;
  background:
    linear-gradient(
      145deg,
      #8ba3a0,
      #5e7776 62%,
      #4d6565
    );
  box-shadow:
    inset 2px 2px 2px rgb(255 255 255 / 24%),
    1px 2px 2px rgb(55 44 35 / 28%);
}

.quality-scanner-antenna {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 7px;
  width: 3px;
  height: 12px;
  border-radius: 3px;
  background: #4d5551;
  transform: rotate(13deg);
  transform-origin: bottom center;
}

.quality-scanner-antenna::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: 7px;
  height: 5px;
  border-radius: 50%;
  background: #777b70;
}

.quality-scanner-screen {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 19px;
  height: 19px;
  overflow: hidden;
  border: 2px solid #394e4e;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      #b9d0bd 0 12%,
      #719485 13% 16%,
      #b4cbb8 17% 42%,
      #759789 43% 46%,
      #aec5b4 47%
    );
}

.quality-scanner-grid::before,
.quality-scanner-grid::after {
  content: "";
  position: absolute;
  background: rgb(60 89 78 / 42%);
}

.quality-scanner-grid::before {
  top: 0;
  left: 8px;
  width: 1px;
  height: 100%;
}

.quality-scanner-grid::after {
  top: 8px;
  left: 0;
  width: 100%;
  height: 1px;
}

.quality-scanner-sweep {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: #446f60;
  transform: rotate(-35deg);
  transform-origin: left center;
}

.quality-scanner-blip {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #a94d3f;
  box-shadow: 0 0 2px #a94d3f;
}

.quality-scanner-button {
  position: absolute;
  right: 4px;
  bottom: 5px;
  width: 5px;
  height: 5px;
  border: 1px solid #394e4e;
  border-radius: 50%;
  background: #d6b66c;
}

/* ============================================================
   MINE REMOVAL KIT
   ============================================================ */

.quality-toolbox {
  position: relative;
  width: 41px;
  height: 35px;
}

.quality-toolbox-handle {
  position: absolute;
  top: 0;
  left: 12px;
  width: 17px;
  height: 10px;
  box-sizing: border-box;
  border: 4px solid #5f5141;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

.quality-toolbox-body {
  position: absolute;
  left: 2px;
  bottom: 1px;
  width: 37px;
  height: 27px;
  box-sizing: border-box;
  border: 2px solid #665440;
  border-radius: 4px;
  background:
    linear-gradient(
      #b36f55 0 42%,
      #8f5745 43% 100%
    );
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / 17%),
    1px 2px 2px rgb(55 42 30 / 25%);
}

.quality-toolbox-latch {
  position: absolute;
  top: 10px;
  left: 15px;
  width: 7px;
  height: 6px;
  border-radius: 1px;
  background: #d0b77c;
  box-shadow: inset 0 0 0 1px #76613c;
}

.quality-toolbox-cross {
  position: absolute;
  right: 4px;
  bottom: 1px;
  color: #eadbb7;
  font-size: 0.72rem;
  font-weight: 900;
}

/* ============================================================
   DUD BOMB
   ============================================================ */

.quality-bomb {
  position: relative;
  width: 40px;
  height: 43px;
}

.quality-bomb-body {
  position: absolute;
  left: 7px;
  bottom: 1px;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 2px solid #4d4940;
  border-radius: 48% 48% 44% 44%;
  background:
    radial-gradient(
      circle at 32% 27%,
      #77766b,
      #55564f 58%,
      #3f413d
    );
  box-shadow:
    inset 2px 2px 2px rgb(255 255 255 / 12%),
    1px 2px 2px rgb(48 38 30 / 28%);
}

.quality-bomb-cap {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 17px;
  width: 10px;
  height: 7px;
  border-radius: 2px;
  background: #75634c;
}

.quality-bomb-fuse {
  position: absolute;
  z-index: 1;
  top: 1px;
  left: 22px;
  width: 13px;
  height: 13px;
  border-top: 2px solid #786247;
  border-right: 2px solid #786247;
  border-radius: 0 9px 0 0;
  transform: rotate(-9deg);
}

.quality-bomb-fuse::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b9824d;
}

.quality-bomb-mark {
  color: #b9aa8e;
  font-size: 0.8rem;
  font-weight: 900;
}

/* ============================================================
   GOLDEN BELL
   ============================================================ */

.quality-bell {
  position: relative;
  width: 40px;
  height: 42px;
}

.quality-bell-loop {
  position: absolute;
  top: 0;
  left: 15px;
  width: 10px;
  height: 8px;
  box-sizing: border-box;
  border: 3px solid #9b762f;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}

.quality-bell-body {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 27px;
  height: 27px;
  background:
    linear-gradient(
      110deg,
      #b48632,
      #f0d177 38%,
      #c99c42 66%,
      #8e6929
    );
  clip-path: polygon(
    34% 0,
    66% 0,
    78% 16%,
    83% 67%,
    100% 87%,
    0 87%,
    17% 67%,
    22% 16%
  );
  filter: drop-shadow(1px 2px 1px rgb(65 46 24 / 25%));
}

.quality-bell-rim {
  position: absolute;
  left: 4px;
  top: 29px;
  width: 33px;
  height: 5px;
  border: 1px solid #8e6929;
  border-radius: 50%;
  background: #d2a84d;
}

.quality-bell-clapper {
  position: absolute;
  left: 17px;
  bottom: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9c7430;
}

/* ============================================================
   COIN PICKAXE
   ============================================================ */

.quality-pickaxe {
  position: relative;
  width: 44px;
  height: 44px;
}

.quality-pickaxe-handle {
  position: absolute;
  left: 20px;
  top: 8px;
  width: 5px;
  height: 35px;
  border-radius: 3px;
  background:
    linear-gradient(
      90deg,
      #765034,
      #b17b4c,
      #6e482f
    );
  transform: rotate(38deg);
}

.quality-pickaxe-head {
  position: absolute;
  left: 6px;
  top: 7px;
  width: 33px;
  height: 8px;
  border-radius: 60% 10% 60% 10%;
  background:
    linear-gradient(
      #9ca2a0,
      #687270
    );
  transform: rotate(-10deg);
  box-shadow: 1px 1px 1px rgb(45 40 34 / 22%);
}

.quality-pickaxe-coin {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 2px solid #98712c;
  border-radius: 50%;
  background: #dfbd58;
  color: #74551f;
  font-family: Georgia, serif;
  font-size: 0.5rem;
  font-weight: 900;
}

/* ============================================================
   PIGGY BANK
   ============================================================ */

.quality-piggy {
  position: relative;
  width: 45px;
  height: 38px;
}

.quality-piggy-body {
  position: absolute;
  left: 5px;
  top: 8px;
  width: 33px;
  height: 25px;
  border: 2px solid #875f5c;
  border-radius: 48% 50% 44% 46%;
  background:
    radial-gradient(
      circle at 31% 25%,
      #efc5b7,
      #c98d85 70%
    );
  box-shadow:
    inset 2px 2px 2px rgb(255 255 255 / 20%),
    1px 2px 2px rgb(61 44 36 / 20%);
}

.quality-piggy-ear {
  position: absolute;
  z-index: 2;
  top: 4px;
  right: 11px;
  width: 10px;
  height: 11px;
  border: 2px solid #875f5c;
  background: #c98d85;
  clip-path: polygon(0 100%, 55% 0, 100% 100%);
}

.quality-piggy-snout {
  position: absolute;
  z-index: 3;
  right: 0;
  top: 16px;
  width: 12px;
  height: 10px;
  border: 2px solid #875f5c;
  border-radius: 50%;
  background: #d9a29a;
}

.quality-piggy-snout::before,
.quality-piggy-snout::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #805b58;
}

.quality-piggy-snout::before {
  left: 3px;
}

.quality-piggy-snout::after {
  right: 3px;
}

.quality-piggy-eye {
  position: absolute;
  right: 5px;
  top: 6px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #51423b;
}

.quality-piggy-slot {
  position: absolute;
  top: 2px;
  left: 10px;
  width: 11px;
  height: 2px;
  border-radius: 2px;
  background: #76524f;
}

.quality-piggy-leg {
  position: absolute;
  bottom: 1px;
  width: 6px;
  height: 7px;
  border-radius: 0 0 3px 3px;
  background: #aa7771;
}

.quality-piggy-leg-a {
  left: 11px;
}

.quality-piggy-leg-b {
  right: 11px;
}

/* ============================================================
   TREASURE CHEST
   ============================================================ */

.quality-chest,
.quality-mimic {
  position: relative;
  width: 43px;
  height: 37px;
}

.quality-chest-lid {
  position: absolute;
  top: 3px;
  left: 4px;
  width: 35px;
  height: 15px;
  box-sizing: border-box;
  border: 2px solid #65462f;
  border-radius: 12px 12px 2px 2px;
  background:
    linear-gradient(
      #9a6840,
      #74492f
    );
}

.quality-chest-body {
  position: absolute;
  left: 4px;
  bottom: 2px;
  width: 35px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid #65462f;
  border-radius: 2px 2px 4px 4px;
  background:
    linear-gradient(
      90deg,
      #8e5d39,
      #a97548,
      #815132
    );
}

.quality-chest-band {
  position: absolute;
  z-index: 2;
  top: 4px;
  left: 18px;
  width: 7px;
  height: 30px;
  background: #b48b45;
  box-shadow: inset 0 0 0 1px #785d30;
}

.quality-chest-lock {
  position: absolute;
  z-index: 3;
  left: 17px;
  top: 18px;
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border: 1px solid #745727;
  border-radius: 2px;
  background: #d0aa55;
}

/* ============================================================
   MIMIC
   same chest language, visibly alive
   ============================================================ */

.quality-mimic-lid {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 4px;
  width: 35px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid #5d3f31;
  border-radius: 11px 11px 2px 2px;
  background:
    linear-gradient(
      #8d5d3d,
      #6c432f
    );
  transform: rotate(-7deg);
  transform-origin: left bottom;
}

.quality-mimic-eye {
  position: absolute;
  left: 13px;
  top: 4px;
  width: 8px;
  height: 5px;
  border-radius: 50%;
  background: #e5c96b;
  box-shadow: inset 0 0 0 2px #57452c;
}

.quality-mimic-mouth {
  position: absolute;
  z-index: 3;
  top: 13px;
  left: 5px;
  width: 33px;
  height: 10px;
  overflow: hidden;
  border: 2px solid #4f3530;
  background: #5b2f2d;
}

.quality-mimic-body {
  position: absolute;
  left: 4px;
  bottom: 1px;
  width: 35px;
  height: 19px;
  box-sizing: border-box;
  border: 2px solid #5d3f31;
  border-radius: 2px 2px 4px 4px;
  background: #795039;
}

.quality-mimic-tooth {
  position: absolute;
  top: 0;
  width: 7px;
  height: 6px;
  background: #eee1bf;
  clip-path: polygon(
    0 0,
    100% 0,
    50% 100%
  );
}

.quality-mimic-tooth-a {
  left: 2px;
}

.quality-mimic-tooth-b {
  left: 12px;
}

.quality-mimic-tooth-c {
  right: 2px;
}

.quality-mimic-lock {
  position: absolute;
  z-index: 5;
  left: 17px;
  bottom: 4px;
  width: 9px;
  height: 8px;
  border-radius: 2px;
  background: #aa8243;
}

/* ============================================================
   PATTERN DRONE Mk.I
   ============================================================ */

.quality-drone {
  position: relative;
  width: 46px;
  height: 39px;
}

.quality-drone-body {
  position: absolute;
  z-index: 3;
  left: 13px;
  top: 10px;
  width: 20px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 2px solid #4f6267;
  border-radius: 7px 7px 10px 10px;
  background:
    linear-gradient(
      145deg,
      #a9b9ba,
      #70878b
    );
  box-shadow:
    inset 2px 2px 2px rgb(255 255 255 / 20%),
    1px 2px 2px rgb(50 43 37 / 20%);
}

.quality-drone-lens {
  width: 8px;
  height: 8px;
  border: 2px solid #46585d;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      #b4d0c5 0 25%,
      #54736f 28% 55%,
      #334d50 58%
    );
}

.quality-drone-arm {
  position: absolute;
  z-index: 1;
  top: 16px;
  width: 20px;
  height: 3px;
  border-radius: 3px;
  background: #66787b;
}

.quality-drone-arm-a {
  left: 1px;
  transform: rotate(-20deg);
}

.quality-drone-arm-b {
  right: 1px;
  transform: rotate(20deg);
}

.quality-drone-rotor {
  position: absolute;
  z-index: 2;
  top: 7px;
  width: 17px;
  height: 4px;
  border: 1px solid #59676a;
  border-radius: 50%;
  background: #8d9b9a;
}

.quality-drone-rotor-a {
  left: 0;
}

.quality-drone-rotor-b {
  right: 0;
}

/* ============================================================
   QUALITY ART PAPER SHOP SET V1

   Paper / ticket / shop objects.
   Rescue Plate + Quality Set V1 remain the visual reference.

   No activation animations here.
   No gameplay/shop/economy changes.
   ============================================================ */

.item-art-white-flag,
.item-art-traveling-sales-bell,
.item-art-treasure-map,
.item-art-bounty-poster,
.item-art-overtime-form,
.item-art-time-card,
.item-art-exchange-ticket,
.item-art-recycle-shop,
.item-art-half-price-ticket,
.item-art-investment-trust,
.item-art-dangerous-request,
.item-art-lottery-ticket,
.item-art-reserve-tag,
.item-art-shop-stamp-card,
.item-art-closed-shop-declaration {
  display: grid;
  place-items: center;
}

/* ------------------------------------------------------------
   HALF-PRICE TICKET
   ------------------------------------------------------------ */

.quality-half-ticket {
  position: relative;
  width: 44px;
  height: 29px;
  display: flex;
  transform: rotate(-4deg);
  filter: drop-shadow(1px 2px 1px rgb(67 48 30 / 22%));
}

.quality-half-ticket-stub {
  position: relative;
  width: 12px;
  height: 29px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid #916b35;
  border-right: 1px dashed #9d7540;
  border-radius: 5px 0 0 5px;
  background:
    linear-gradient(
      135deg,
      #d6ad58,
      #f0d284
    );
  color: #795526;
  font-family: Georgia, serif;
  font-size: 0.65rem;
  font-weight: 900;
}

.quality-half-ticket-main {
  position: relative;
  width: 32px;
  height: 29px;
  box-sizing: border-box;
  border: 2px solid #916b35;
  border-left: 0;
  border-radius: 0 5px 5px 0;
  background:
    linear-gradient(
      150deg,
      #f8e6ae,
      #e8c875
    );
  box-shadow:
    inset 0 0 0 2px rgb(255 250 220 / 35%);
}

.quality-half-ticket-main::before,
.quality-half-ticket-main::after {
  content: "";
  position: absolute;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #eee4ce;
}

.quality-half-ticket-main::before {
  top: -4px;
}

.quality-half-ticket-main::after {
  bottom: -4px;
}

.quality-half-ticket-label {
  position: absolute;
  top: 4px;
  left: 4px;
  color: #85542c;
  font-family: Georgia, serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.quality-half-ticket-code {
  position: absolute;
  right: 3px;
  bottom: 2px;
  color: #a17c48;
  font-family: 'Courier New', monospace;
  font-size: 0.27rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

/* ------------------------------------------------------------
   WHITE FLAG
   ------------------------------------------------------------ */

.quality-white-flag {
  position: relative;
  width: 39px;
  height: 43px;
}

.quality-white-flag-pole {
  position: absolute;
  left: 10px;
  top: 3px;
  width: 4px;
  height: 37px;
  border-radius: 2px;
  background:
    linear-gradient(
      90deg,
      #684a31,
      #a1764f,
      #65472f
    );
}

.quality-white-flag-cloth {
  position: absolute;
  z-index: 2;
  left: 13px;
  top: 5px;
  width: 25px;
  height: 19px;
  background:
    linear-gradient(
      145deg,
      #fffdf4,
      #d9d4c5
    );
  clip-path: polygon(
    0 0,
    100% 7%,
    82% 50%,
    100% 93%,
    0 86%
  );
  filter: drop-shadow(1px 1px 1px rgb(65 54 43 / 20%));
}

.quality-white-flag-cloth span {
  position: absolute;
  left: 6px;
  top: 8px;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: #a7a293;
  transform: rotate(-4deg);
}

.quality-white-flag-base {
  position: absolute;
  left: 5px;
  bottom: 1px;
  width: 16px;
  height: 5px;
  border-radius: 50%;
  background: #71604b;
}

/* ------------------------------------------------------------
   TRAVELING SALES BELL
   ------------------------------------------------------------ */

.quality-sales-bell {
  position: relative;
  width: 42px;
  height: 38px;
}

.quality-sales-bell-button {
  position: absolute;
  z-index: 3;
  left: 17px;
  top: 1px;
  width: 8px;
  height: 8px;
  border: 2px solid #716653;
  border-radius: 50%;
  background: #d4c69e;
}

.quality-sales-bell-dome {
  position: absolute;
  left: 7px;
  top: 8px;
  width: 29px;
  height: 23px;
  box-sizing: border-box;
  border: 2px solid #756b59;
  border-radius: 50% 50% 15% 15%;
  background:
    radial-gradient(
      circle at 35% 24%,
      #f1ead7,
      #bcb49f 56%,
      #918978
    );
  box-shadow:
    inset 2px 2px 2px rgb(255 255 255 / 34%),
    1px 2px 2px rgb(60 48 36 / 22%);
}

.quality-sales-bell-base {
  position: absolute;
  left: 4px;
  bottom: 2px;
  width: 35px;
  height: 7px;
  border: 2px solid #6e624e;
  border-radius: 50%;
  background: #8f8168;
}

/* ------------------------------------------------------------
   TREASURE MAP
   ------------------------------------------------------------ */

.quality-map {
  position: relative;
  width: 44px;
  height: 39px;
}

.quality-map-sheet {
  position: absolute;
  left: 6px;
  top: 5px;
  width: 32px;
  height: 29px;
  overflow: hidden;
  border: 1px solid #9d7845;
  background:
    linear-gradient(
      135deg,
      #ead39a,
      #f4e3b4 48%,
      #d8bd7c
    );
  transform: rotate(-4deg);
  clip-path: polygon(
    4% 0,
    96% 4%,
    100% 94%,
    6% 100%,
    0 54%
  );
}

.quality-map-route {
  position: absolute;
  left: 5px;
  top: 17px;
  width: 20px;
  height: 9px;
  border-top: 2px dashed #8e6a3f;
  border-radius: 50%;
  transform: rotate(-18deg);
}

.quality-map-route::before {
  content: "";
  position: absolute;
  left: 5px;
  top: -12px;
  width: 11px;
  height: 10px;
  border-right: 2px dashed #8e6a3f;
  border-radius: 50%;
}

.quality-map-x {
  position: absolute;
  right: 5px;
  top: 4px;
  color: #a64f3d;
  font-size: 0.72rem;
  font-weight: 900;
}

.quality-map-roll {
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 31px;
  border: 1px solid #9b7748;
  border-radius: 50%;
  background: #dfc487;
}

.quality-map-roll-a {
  left: 4px;
  top: 4px;
}

.quality-map-roll-b {
  right: 4px;
  top: 4px;
}

/* ------------------------------------------------------------
   WANTED LIST
   ------------------------------------------------------------ */

.quality-wanted-list {
  position: relative;
  width: 44px;
  height: 44px;
}

.quality-wanted-sheet {
  position: absolute;
  width: 29px;
  height: 36px;
  box-sizing: border-box;
  border: 1px solid #987344;
  background: linear-gradient(150deg, #ead4a0, #d9bb7e);
  box-shadow: 1px 2px 2px rgb(65 47 30 / 20%);
}

.quality-wanted-sheet-back {
  left: 3px;
  top: 6px;
  transform: rotate(-10deg);
  background: linear-gradient(150deg, #ddc28b, #cba96d);
}

.quality-wanted-sheet-mid {
  left: 10px;
  top: 4px;
  transform: rotate(9deg);
  background: linear-gradient(150deg, #e4cb94, #d2b275);
}

.quality-wanted-sheet-front {
  z-index: 3;
  left: 7px;
  top: 3px;
  transform: rotate(1deg);
}

.quality-wanted-list-title {
  position: absolute;
  top: 3px;
  left: 4px;
  color: #704c2d;
  font-family: Georgia, serif;
  font-size: 0.31rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.quality-wanted-list-face {
  position: absolute;
  left: 8px;
  top: 12px;
  width: 11px;
  height: 11px;
  border: 1px solid #765538;
  border-radius: 50%;
}

.quality-wanted-list-face span {
  position: absolute;
  left: 2px;
  bottom: -6px;
  width: 7px;
  height: 6px;
  border: 1px solid #765538;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}

.quality-wanted-list-lines {
  position: absolute;
  left: 5px;
  bottom: 4px;
  width: 19px;
  height: 2px;
  background: #9c7a50;
  box-shadow: 0 -4px 0 #9c7a50;
}

/* ------------------------------------------------------------
   BOUNTY HUNTER BADGE
   ------------------------------------------------------------ */

.quality-bounty-hunter-badge {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

.quality-bounty-hunter-star {
  position: relative;
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #f1d47b, #b9822e);
  clip-path: polygon(
    50% 0%,
    61% 28%,
    88% 13%,
    75% 41%,
    100% 50%,
    75% 59%,
    88% 87%,
    61% 72%,
    50% 100%,
    39% 72%,
    12% 87%,
    25% 59%,
    0% 50%,
    25% 41%,
    12% 13%,
    39% 28%
  );
  filter: drop-shadow(1px 2px 1px rgb(61 45 24 / 28%));
}

.quality-bounty-hunter-center {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 2px solid #896326;
  border-radius: 50%;
  background: #e8c463;
  color: #76511f;
  font-family: Georgia, serif;
  font-size: 0.55rem;
  font-weight: 900;
  line-height: 1;
}

/* ------------------------------------------------------------
   REQUEST CHANGE FORM
   ------------------------------------------------------------ */

.quality-request-change {
  position: relative;
  width: 40px;
  height: 44px;
}

.quality-request-change-paper {
  position: absolute;
  left: 5px;
  top: 3px;
  width: 30px;
  height: 38px;
  box-sizing: border-box;
  border: 1px solid #6f7f78;
  background: linear-gradient(145deg, #eee3c7, #d8cba9);
  transform: rotate(-2deg);
  box-shadow: 1px 2px 2px rgb(55 48 36 / 20%);
}

.quality-request-change-title {
  position: absolute;
  left: 4px;
  top: 4px;
  color: #566d68;
  font-family: Georgia, serif;
  font-size: 0.26rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.quality-request-change-line {
  position: absolute;
  left: 5px;
  width: 18px;
  height: 2px;
  background: #a3987c;
}

.quality-request-change-line-a {
  top: 17px;
}

.quality-request-change-line-b {
  top: 22px;
}

.quality-request-change-stamp {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid #56827a;
  border-radius: 50%;
  color: #4d776f;
  font-family: Georgia, serif;
  font-size: 0.65rem;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-12deg);
}


/* ------------------------------------------------------------
   BOUNTY POSTER
   ------------------------------------------------------------ */

.quality-bounty {
  position: relative;
  width: 38px;
  height: 44px;
}

.quality-bounty-paper {
  position: absolute;
  left: 4px;
  top: 3px;
  width: 31px;
  height: 38px;
  box-sizing: border-box;
  border: 1px solid #987344;
  background:
    linear-gradient(
      150deg,
      #ead4a0,
      #d9bb7e
    );
  transform: rotate(2deg);
  box-shadow: 1px 2px 2px rgb(65 47 30 / 22%);
}

.quality-bounty-pin {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 17px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a75242;
  box-shadow: 0 1px 1px rgb(65 40 30 / 30%);
}

.quality-bounty-title {
  position: absolute;
  top: 3px;
  left: 4px;
  color: #704c2d;
  font-family: Georgia, serif;
  font-size: 0.34rem;
  font-weight: 900;
}

.quality-bounty-face {
  position: absolute;
  left: 9px;
  top: 12px;
  width: 12px;
  height: 12px;
  border: 1px solid #765538;
  border-radius: 50%;
}

.quality-bounty-face span {
  position: absolute;
  left: 2px;
  bottom: -7px;
  width: 8px;
  height: 7px;
  border: 1px solid #765538;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}

.quality-bounty-lines {
  position: absolute;
  left: 5px;
  bottom: 4px;
  width: 21px;
  height: 2px;
  background: #9c7a50;
  box-shadow:
    0 -4px 0 #9c7a50,
    0 -8px 0 #9c7a50;
}

/* ------------------------------------------------------------
   OVERTIME FORM
   ------------------------------------------------------------ */

.quality-overtime {
  position: relative;
  width: 39px;
  height: 43px;
}

.quality-overtime-paper {
  position: absolute;
  left: 5px;
  top: 2px;
  width: 30px;
  height: 38px;
  box-sizing: border-box;
  border: 1px solid #8c8370;
  background: #f2eedf;
  transform: rotate(-3deg);
  box-shadow: 1px 2px 2px rgb(57 47 38 / 18%);
}

.quality-overtime-heading {
  position: absolute;
  top: 4px;
  left: 5px;
  color: #5e6770;
  font-family: 'Courier New', monospace;
  font-size: 0.46rem;
  font-weight: 900;
}

.quality-overtime-line {
  position: absolute;
  left: 5px;
  width: 19px;
  height: 1px;
  background: #a9a291;
}

.quality-overtime-line-a {
  top: 16px;
}

.quality-overtime-line-b {
  top: 21px;
}

.quality-overtime-stamp {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
  border: 2px solid #b65e51;
  border-radius: 50%;
  color: #a54d43;
  font-size: 0.38rem;
  font-weight: 900;
  transform: rotate(-10deg);
}

/* ------------------------------------------------------------
   TIME CARD
   ------------------------------------------------------------ */

.quality-timecard {
  position: relative;
  width: 37px;
  height: 44px;
}

.quality-timecard-card {
  position: absolute;
  left: 4px;
  top: 1px;
  width: 30px;
  height: 40px;
  box-sizing: border-box;
  border: 2px solid #697985;
  border-radius: 3px;
  background:
    linear-gradient(
      #e6ece8,
      #c9d5d2
    );
  box-shadow: 1px 2px 2px rgb(55 47 38 / 20%);
}

.quality-timecard-hole {
  position: absolute;
  top: 3px;
  left: 10px;
  width: 7px;
  height: 3px;
  border-radius: 2px;
  background: #798b91;
}

.quality-timecard-clock {
  position: absolute;
  left: 7px;
  top: 10px;
  width: 12px;
  height: 12px;
  border: 2px solid #667983;
  border-radius: 50%;
  background: #eef1e8;
}

.quality-timecard-hand-a,
.quality-timecard-hand-b {
  position: absolute;
  left: 5px;
  top: 5px;
  border-radius: 2px;
  background: #596b75;
  transform-origin: left center;
}

.quality-timecard-hand-a {
  width: 5px;
  height: 1px;
  transform: rotate(-50deg);
}

.quality-timecard-hand-b {
  width: 4px;
  height: 1px;
  transform: rotate(30deg);
}

.quality-timecard-lines {
  position: absolute;
  left: 5px;
  bottom: 4px;
  width: 17px;
  height: 1px;
  background: #8e9a9a;
  box-shadow:
    0 -4px 0 #8e9a9a,
    0 -8px 0 #8e9a9a;
}

/* ------------------------------------------------------------
   EXCHANGE TICKET
   ------------------------------------------------------------ */

.quality-exchange-ticket {
  position: relative;
  width: 45px;
  height: 27px;
  display: grid;
  grid-template-columns: 11px 1fr 11px;
  align-items: center;
  box-sizing: border-box;
  border: 2px solid #557b75;
  border-radius: 5px;
  background:
    linear-gradient(
      145deg,
      #d5e4d9,
      #9fc2b6
    );
  color: #42675f;
  filter: drop-shadow(1px 2px 1px rgb(54 45 35 / 20%));
}

.quality-exchange-ticket::before,
.quality-exchange-ticket::after {
  content: "";
  position: absolute;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #eee4ce;
}

.quality-exchange-ticket::before {
  left: -5px;
}

.quality-exchange-ticket::after {
  right: -5px;
}

.quality-exchange-ticket-left,
.quality-exchange-ticket-right {
  display: grid;
  place-items: center;
  font-family: Georgia, serif;
  font-size: 0.45rem;
  font-weight: 900;
}

.quality-exchange-ticket-arrow {
  display: grid;
  place-items: center;
  border-right: 1px dashed #6d9189;
  border-left: 1px dashed #6d9189;
  font-size: 0.9rem;
  font-weight: 900;
}

/* ------------------------------------------------------------
   RECYCLE SHOP
   ------------------------------------------------------------ */

.quality-recycle-shop {
  position: relative;
  width: 45px;
  height: 42px;
}

.quality-recycle-shop-awning {
  position: absolute;
  z-index: 3;
  left: 3px;
  top: 4px;
  width: 39px;
  height: 11px;
  overflow: hidden;
  border: 2px solid #557267;
  border-radius: 5px 5px 2px 2px;
  background:
    repeating-linear-gradient(
      90deg,
      #7ca391 0 7px,
      #e5e0c9 7px 14px
    );
}

.quality-recycle-shop-awning span {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: rgb(73 93 79 / 25%);
}

.quality-recycle-shop-body {
  position: absolute;
  left: 7px;
  top: 13px;
  width: 31px;
  height: 26px;
  box-sizing: border-box;
  border: 2px solid #665d4c;
  background: #d5c8a7;
}

.quality-recycle-shop-door {
  position: absolute;
  left: 4px;
  bottom: 0;
  width: 9px;
  height: 15px;
  border: 1px solid #665d4c;
  background: #8c795d;
}

.quality-recycle-shop-sign {
  position: absolute;
  right: 4px;
  top: 5px;
  width: 11px;
  height: 11px;
  display: grid;
  place-items: center;
  border: 1px solid #527368;
  border-radius: 50%;
  color: #466b60;
  background: #e3eadc;
  font-size: 0.65rem;
  font-weight: 900;
}

/* ------------------------------------------------------------
   INVESTMENT TRUST
   ------------------------------------------------------------ */

.quality-investment {
  position: relative;
  width: 44px;
  height: 42px;
}

.quality-investment-board {
  position: absolute;
  left: 4px;
  top: 3px;
  width: 34px;
  height: 29px;
  overflow: hidden;
  box-sizing: border-box;
  border: 2px solid #5b6d68;
  border-radius: 3px;
  background: #d9e1d5;
  box-shadow: 1px 2px 2px rgb(50 44 35 / 20%);
}

.quality-investment-grid {
  position: absolute;
  inset: 4px;
  background:
    linear-gradient(
      rgb(82 104 96 / 18%) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgb(82 104 96 / 18%) 1px,
      transparent 1px
    );
  background-size: 7px 7px;
}

.quality-investment-chart {
  position: absolute;
  inset: 0;
}

.quality-investment-chart-a,
.quality-investment-chart-b,
.quality-investment-chart-c {
  position: absolute;
  height: 3px;
  border-radius: 2px;
  background: #5f8b69;
  transform-origin: left center;
}

.quality-investment-chart-a {
  left: 5px;
  bottom: 7px;
  width: 10px;
  transform: rotate(-25deg);
}

.quality-investment-chart-b {
  left: 13px;
  bottom: 11px;
  width: 9px;
  transform: rotate(20deg);
}

.quality-investment-chart-c {
  left: 20px;
  bottom: 9px;
  width: 10px;
  transform: rotate(-48deg);
}

.quality-investment-coin {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 2px solid #92702e;
  border-radius: 50%;
  background: #dbb951;
  color: #73551e;
  font-family: Georgia, serif;
  font-size: 0.46rem;
  font-weight: 900;
}

/* ------------------------------------------------------------
   DANGEROUS REQUEST
   ------------------------------------------------------------ */

.quality-danger-contract {
  position: relative;
  width: 38px;
  height: 43px;
}

.quality-danger-contract-paper {
  position: absolute;
  left: 4px;
  top: 2px;
  width: 30px;
  height: 38px;
  box-sizing: border-box;
  border: 1px solid #79564d;
  background:
    linear-gradient(
      145deg,
      #ead8b2,
      #d9bd8b
    );
  transform: rotate(3deg);
  box-shadow: 1px 2px 2px rgb(62 43 34 / 20%);
}

.quality-danger-contract-mark {
  position: absolute;
  top: 4px;
  left: 9px;
  width: 11px;
  height: 11px;
  display: grid;
  place-items: center;
  border: 2px solid #a24f43;
  border-radius: 50%;
  color: #9c463c;
  font-family: Georgia, serif;
  font-size: 0.58rem;
  font-weight: 900;
}

.quality-danger-contract-line {
  position: absolute;
  left: 5px;
  width: 19px;
  height: 2px;
  background: #9a7858;
}

.quality-danger-contract-line-a {
  top: 21px;
}

.quality-danger-contract-line-b {
  top: 26px;
}

.quality-danger-contract-seal {
  position: absolute;
  right: 3px;
  bottom: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #a74d42;
  box-shadow:
    inset 0 0 0 2px #c77a65;
}

/* ------------------------------------------------------------
   LOTTERY TICKET
   ------------------------------------------------------------ */

.quality-lottery {
  position: relative;
  width: 44px;
  height: 31px;
}

.quality-lottery-ticket {
  position: absolute;
  inset: 2px;
  box-sizing: border-box;
  border: 2px solid #9b6d3b;
  border-radius: 4px;
  background:
    linear-gradient(
      135deg,
      #f1d890,
      #e5b95f
    );
  transform: rotate(-3deg);
  box-shadow: 1px 2px 2px rgb(64 46 30 / 20%);
}

.quality-lottery-star {
  position: absolute;
  left: 4px;
  top: 4px;
  color: #a24d3f;
  font-size: 0.62rem;
}

.quality-lottery-number {
  position: absolute;
  right: 4px;
  top: 6px;
  color: #76502b;
  font-family: Georgia, serif;
  font-size: 0.58rem;
  font-weight: 900;
}

.quality-lottery-perf {
  position: absolute;
  left: 17px;
  top: 2px;
  width: 1px;
  height: 23px;
  border-left: 1px dashed #9f7947;
}

/* ------------------------------------------------------------
   RESERVE TAG
   ------------------------------------------------------------ */

.quality-reserve-tag {
  position: relative;
  width: 43px;
  height: 41px;
}

.quality-reserve-tag-string {
  position: absolute;
  z-index: 1;
  left: 5px;
  top: 4px;
  width: 23px;
  height: 18px;
  border-top: 2px solid #74624c;
  border-right: 2px solid #74624c;
  border-radius: 0 14px 0 0;
  transform: rotate(-14deg);
}

.quality-reserve-tag-body {
  position: absolute;
  z-index: 2;
  right: 2px;
  bottom: 3px;
  width: 29px;
  height: 24px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid #7c684b;
  background:
    linear-gradient(
      145deg,
      #e7d5a5,
      #cbb17b
    );
  clip-path: polygon(
    18% 0,
    100% 0,
    100% 100%,
    0 100%,
    0 18%
  );
  color: #725b3c;
  font-family: 'Courier New', monospace;
  font-size: 0.36rem;
  font-weight: 900;
}

.quality-reserve-tag-hole {
  position: absolute;
  z-index: 4;
  left: 13px;
  top: 16px;
  width: 6px;
  height: 6px;
  border: 2px solid #806a49;
  border-radius: 50%;
  background: #eee4ce;
}

/* ------------------------------------------------------------
   SHOP STAMP CARD
   ------------------------------------------------------------ */

.quality-stamp-card {
  position: relative;
  width: 44px;
  height: 32px;
}

.quality-stamp-card-paper {
  position: absolute;
  inset: 2px;
  box-sizing: border-box;
  border: 2px solid #6f7f67;
  border-radius: 4px;
  background:
    linear-gradient(
      145deg,
      #e4ead4,
      #cbd6b9
    );
  transform: rotate(2deg);
  box-shadow: 1px 2px 2px rgb(55 47 37 / 18%);
}

.quality-stamp-card-title {
  position: absolute;
  left: 4px;
  top: 3px;
  color: #5e7157;
  font-family: 'Courier New', monospace;
  font-size: 0.3rem;
  font-weight: 900;
}

.quality-stamp-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  box-sizing: border-box;
  border: 1px solid #75876c;
  border-radius: 50%;
  background: #f0efdc;
}

.quality-stamp-dot-a {
  left: 5px;
  bottom: 4px;
  background: #a86151;
}

.quality-stamp-dot-b {
  left: 14px;
  bottom: 4px;
  background: #a86151;
}

.quality-stamp-dot-c {
  left: 23px;
  bottom: 4px;
  background: #a86151;
}

.quality-stamp-dot-d {
  left: 5px;
  bottom: 13px;
}

.quality-stamp-dot-e {
  left: 14px;
  bottom: 13px;
}

.quality-stamp-dot-f {
  left: 23px;
  bottom: 13px;
}

/* ------------------------------------------------------------
   CLOSED SHOP DECLARATION
   ------------------------------------------------------------ */

.quality-closed-shop {
  position: relative;
  width: 45px;
  height: 43px;
}

.quality-closed-shop-string {
  position: absolute;
  z-index: 1;
  top: 1px;
  width: 2px;
  height: 16px;
  background: #6f5944;
  transform-origin: top center;
}

.quality-closed-shop-string-a {
  left: 13px;
  transform: rotate(25deg);
}

.quality-closed-shop-string-b {
  right: 13px;
  transform: rotate(-25deg);
}

.quality-closed-shop-board {
  position: absolute;
  z-index: 2;
  left: 3px;
  top: 14px;
  width: 39px;
  height: 24px;
  box-sizing: border-box;
  border: 2px solid #563d34;
  border-radius: 3px;
  background:
    linear-gradient(
      #775044,
      #5e3f37
    );
  transform: rotate(-2deg);
  box-shadow: 1px 2px 2px rgb(49 37 31 / 28%);
}

.quality-closed-shop-word {
  position: absolute;
  left: 4px;
  top: 7px;
  color: #ead9ba;
  font-family: Georgia, serif;
  font-size: 0.42rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.quality-closed-shop-cross {
  position: absolute;
  right: 3px;
  top: 3px;
  color: #c27762;
  font-size: 0.72rem;
  font-weight: 900;
}

/* ============================================================
   QUALITY ART ECONOMY SET V1
   Mining / coin / economy miniature illustrations.
   ============================================================ */

.item-art-metal-detector,
.item-art-vein,
.item-art-lucky-coin,
.item-art-greedy-pickaxe,
.item-art-jackpot,
.item-art-hidden-savings,
.item-art-mine-lover,
.item-art-hazard-license,
.item-art-change,
.item-art-bargainer {
  display: grid;
  place-items: center;
}

/* ------------------------------------------------------------
   METAL DETECTOR
   ------------------------------------------------------------ */

.quality-metal-detector {
  position: relative;
  width: 45px;
  height: 45px;
}

.quality-metal-detector-handle {
  position: absolute;
  z-index: 3;
  top: 1px;
  left: 8px;
  width: 16px;
  height: 5px;
  border: 2px solid #46585a;
  border-radius: 5px;
  background: #788b89;
  transform: rotate(14deg);
}

.quality-metal-detector-control {
  position: absolute;
  z-index: 4;
  left: 13px;
  top: 7px;
  width: 17px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid #4c5f60;
  border-radius: 4px;
  background:
    linear-gradient(
      145deg,
      #8ea29e,
      #607674
    );
  transform: rotate(14deg);
}

.quality-metal-detector-screen {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 8px;
  height: 5px;
  border: 1px solid #425855;
  background: #b7cbb6;
}

.quality-metal-detector-button {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d3b25c;
}

.quality-metal-detector-shaft {
  position: absolute;
  z-index: 2;
  left: 24px;
  top: 15px;
  width: 4px;
  height: 27px;
  border-radius: 3px;
  background:
    linear-gradient(
      90deg,
      #5b6b69,
      #9aa7a1,
      #536360
    );
  transform: rotate(-31deg);
  transform-origin: top center;
}

.quality-metal-detector-coil {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 1px;
  width: 23px;
  height: 10px;
  box-sizing: border-box;
  border: 3px solid #4e6261;
  border-radius: 50%;
  background: #a8b6aa;
  transform: rotate(-8deg);
}

.quality-metal-detector-coil span {
  position: absolute;
  inset: 1px 4px;
  border: 1px solid #667d78;
  border-radius: 50%;
}

/* ------------------------------------------------------------
   VEIN
   ------------------------------------------------------------ */

.quality-vein {
  position: relative;
  width: 44px;
  height: 40px;
}

.quality-vein-rock {
  position: absolute;
  left: 3px;
  top: 5px;
  width: 38px;
  height: 31px;
  background:
    linear-gradient(
      145deg,
      #77736a,
      #514f4b 65%,
      #45433f
    );
  clip-path: polygon(
    16% 9%,
    67% 0,
    96% 25%,
    88% 79%,
    58% 100%,
    11% 88%,
    0 43%
  );
  filter: drop-shadow(1px 2px 1px rgb(48 39 32 / 28%));
}

.quality-vein-gold {
  position: absolute;
  border-radius: 5px;
  background:
    linear-gradient(
      #f0d277,
      #b98931
    );
  box-shadow: 0 0 1px #f4d97f;
}

.quality-vein-gold-a {
  left: 7px;
  top: 15px;
  width: 24px;
  height: 4px;
  transform: rotate(-31deg);
}

.quality-vein-gold-b {
  left: 20px;
  top: 8px;
  width: 4px;
  height: 15px;
  transform: rotate(19deg);
}

.quality-vein-gold-c {
  left: 13px;
  top: 19px;
  width: 4px;
  height: 9px;
  transform: rotate(-15deg);
}

.quality-vein-chip {
  position: absolute;
  width: 7px;
  height: 6px;
  background: #67635c;
  clip-path: polygon(20% 0, 100% 25%, 73% 100%, 0 70%);
}

.quality-vein-chip-a {
  left: 1px;
  bottom: 0;
}

.quality-vein-chip-b {
  right: 1px;
  top: 2px;
  transform: scale(0.7);
}

/* ------------------------------------------------------------
   LUCKY COIN
   ------------------------------------------------------------ */

.quality-lucky-coin {
  position: relative;
  width: 43px;
  height: 43px;
}

.quality-lucky-coin-rim {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 3px solid #95702e;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 28%,
      #f2d77b,
      #d3a947 62%,
      #b48731
    );
  box-shadow:
    inset 0 0 0 2px #e8c965,
    1px 2px 2px rgb(62 47 27 / 22%);
}

.quality-lucky-clover {
  position: relative;
  width: 18px;
  height: 19px;
}

.quality-clover-leaf {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 70% 70% 55% 70%;
  background: #587a50;
}

.quality-clover-a {
  left: 5px;
  top: 0;
  transform: rotate(45deg);
}

.quality-clover-b {
  right: 0;
  top: 5px;
  transform: rotate(135deg);
}

.quality-clover-c {
  left: 5px;
  bottom: 2px;
  transform: rotate(225deg);
}

.quality-clover-d {
  left: 0;
  top: 5px;
  transform: rotate(315deg);
}

.quality-clover-stem {
  position: absolute;
  left: 9px;
  bottom: -1px;
  width: 2px;
  height: 7px;
  border-radius: 2px;
  background: #4c6d47;
  transform: rotate(-18deg);
}

.quality-lucky-spark {
  position: absolute;
  color: #e4c35d;
  font-size: 0.55rem;
}

.quality-lucky-spark-a {
  right: 0;
  top: 0;
}

.quality-lucky-spark-b {
  left: 1px;
  bottom: 4px;
}

/* ------------------------------------------------------------
   GREEDY PICKAXE
   ------------------------------------------------------------ */

.quality-greedy-pickaxe {
  position: relative;
  width: 45px;
  height: 45px;
}

.quality-greedy-handle {
  position: absolute;
  left: 20px;
  top: 8px;
  width: 5px;
  height: 36px;
  border-radius: 3px;
  background:
    linear-gradient(
      90deg,
      #68452e,
      #a76f45,
      #62402b
    );
  transform: rotate(38deg);
}

.quality-greedy-head {
  position: absolute;
  left: 5px;
  top: 7px;
  width: 34px;
  height: 9px;
  border-radius: 65% 8% 65% 8%;
  background:
    linear-gradient(
      #796b77,
      #4e4650
    );
  transform: rotate(-10deg);
  box-shadow: 1px 1px 1px rgb(45 38 34 / 25%);
}

.quality-greedy-gem {
  position: absolute;
  background:
    linear-gradient(
      135deg,
      #a14c56,
      #d47a67
    );
  clip-path: polygon(
    50% 0,
    100% 38%,
    78% 100%,
    22% 100%,
    0 38%
  );
}

.quality-greedy-gem-a {
  right: 4px;
  top: 1px;
  width: 9px;
  height: 9px;
}

.quality-greedy-gem-b {
  left: 2px;
  bottom: 5px;
  width: 7px;
  height: 7px;
}

.quality-greedy-coin {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 2px solid #8d6728;
  border-radius: 50%;
  background: #d9b34d;
  color: #6e4d1d;
  font-family: Georgia, serif;
  font-size: 0.45rem;
  font-weight: 900;
}

/* ------------------------------------------------------------
   JACKPOT
   ------------------------------------------------------------ */

.quality-jackpot {
  position: relative;
  width: 43px;
  height: 44px;
}

.quality-jackpot-top {
  position: absolute;
  z-index: 2;
  left: 11px;
  top: 0;
  width: 23px;
  height: 7px;
  border: 2px solid #7e5a32;
  border-radius: 8px 8px 2px 2px;
  background: #d3a449;
}

.quality-jackpot-machine {
  position: absolute;
  z-index: 3;
  left: 5px;
  top: 6px;
  width: 32px;
  height: 35px;
  box-sizing: border-box;
  border: 2px solid #69493b;
  border-radius: 6px 6px 4px 4px;
  background:
    linear-gradient(
      145deg,
      #a75f4e,
      #7d473f
    );
  box-shadow:
    inset 2px 2px 2px rgb(255 255 255 / 12%),
    1px 2px 2px rgb(55 39 31 / 25%);
}

.quality-jackpot-window {
  position: absolute;
  left: 4px;
  top: 7px;
  width: 20px;
  height: 11px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  box-sizing: border-box;
  border: 2px solid #5d463a;
  background: #eee2c5;
}

.quality-jackpot-window span {
  display: grid;
  place-items: center;
  color: #a84d42;
  font-family: Georgia, serif;
  font-size: 0.45rem;
  font-weight: 900;
}

.quality-jackpot-slot {
  position: absolute;
  left: 9px;
  bottom: 5px;
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: #503c34;
}

.quality-jackpot-lever {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 13px;
  width: 3px;
  height: 19px;
  border-radius: 3px;
  background: #68625b;
  transform: rotate(9deg);
}

.quality-jackpot-lever span {
  position: absolute;
  top: -4px;
  left: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #b44e43;
}

/* ------------------------------------------------------------
   HIDDEN SAVINGS
   ------------------------------------------------------------ */

.quality-hidden-savings {
  position: relative;
  width: 45px;
  height: 42px;
}

.quality-hidden-book {
  position: absolute;
  z-index: 3;
  left: 4px;
  top: 4px;
  width: 32px;
  height: 34px;
  box-sizing: border-box;
  border: 2px solid #5f4938;
  border-radius: 3px 6px 6px 3px;
  background:
    linear-gradient(
      90deg,
      #76523d 0 18%,
      #9a6c4e 19% 100%
    );
  transform: rotate(-7deg);
  box-shadow: 1px 2px 2px rgb(52 39 30 / 22%);
}

.quality-hidden-book-pages {
  position: absolute;
  right: 1px;
  top: 4px;
  width: 3px;
  height: 24px;
  border-radius: 0 2px 2px 0;
  background: #e6d9b8;
}

.quality-hidden-book-title {
  position: absolute;
  left: 10px;
  top: 8px;
  width: 12px;
  height: 2px;
  background: #d0ae6b;
  box-shadow:
    0 5px 0 #d0ae6b,
    0 10px 0 #d0ae6b;
}

.quality-hidden-coins {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 1px;
  width: 23px;
  height: 17px;
}

.quality-hidden-coin {
  position: absolute;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border: 2px solid #92702d;
  border-radius: 50%;
  background: #dbb750;
  color: #71531f;
  font-family: Georgia, serif;
  font-size: 0.38rem;
  font-weight: 900;
}

.quality-hidden-coin-a {
  left: 0;
  top: 2px;
}

.quality-hidden-coin-b {
  right: 0;
  top: 0;
}

/* ------------------------------------------------------------
   MINE LOVER
   ------------------------------------------------------------ */

.quality-mine-lover {
  position: relative;
  width: 43px;
  height: 42px;
}

.quality-mine-lover-heart {
  position: absolute;
  left: 5px;
  top: 4px;
  width: 34px;
  height: 32px;
  background:
    linear-gradient(
      145deg,
      #c6756e,
      #9f514e
    );
  clip-path: polygon(
    50% 100%,
    7% 55%,
    2% 28%,
    14% 8%,
    34% 3%,
    50% 19%,
    66% 3%,
    86% 8%,
    98% 28%,
    93% 55%
  );
  filter: drop-shadow(1px 2px 1px rgb(65 42 36 / 22%));
}

.quality-mine-lover-mine {
  position: absolute;
  left: 9px;
  top: 8px;
  width: 16px;
  height: 16px;
}

.quality-mine-lover-core {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 30%,
      #74746c,
      #3f413d
    );
}

.quality-mine-lover-spike {
  position: absolute;
  left: 7px;
  top: 0;
  width: 3px;
  height: 16px;
  background: #454641;
  transform-origin: center;
}

.quality-mine-lover-spike-a {
  transform: rotate(0deg);
}

.quality-mine-lover-spike-b {
  transform: rotate(45deg);
}

.quality-mine-lover-spike-c {
  transform: rotate(90deg);
}

.quality-mine-lover-spike-d {
  transform: rotate(135deg);
}

/* ------------------------------------------------------------
   HAZARD LICENSE
   ------------------------------------------------------------ */

.quality-hazard-license {
  position: relative;
  width: 44px;
  height: 37px;
}

.quality-hazard-license-card {
  position: absolute;
  left: 3px;
  top: 4px;
  width: 38px;
  height: 28px;
  box-sizing: border-box;
  border: 2px solid #7a6540;
  border-radius: 4px;
  background:
    linear-gradient(
      145deg,
      #e5d4a1,
      #cdb575
    );
  transform: rotate(-3deg);
  box-shadow: 1px 2px 2px rgb(58 45 32 / 20%);
}

.quality-hazard-photo {
  position: absolute;
  left: 4px;
  top: 5px;
  width: 10px;
  height: 12px;
  border: 1px solid #74634d;
  background: #a5a08c;
}

.quality-hazard-photo span {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #716c61;
}

.quality-hazard-mark {
  position: absolute;
  right: 4px;
  top: 3px;
  width: 11px;
  height: 11px;
  display: grid;
  place-items: center;
  background: #d5ad4f;
  color: #624c27;
  font-size: 0.55rem;
  font-weight: 900;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.quality-hazard-line {
  position: absolute;
  left: 17px;
  height: 2px;
  background: #917c55;
}

.quality-hazard-line-a {
  top: 17px;
  width: 15px;
}

.quality-hazard-line-b {
  top: 21px;
  width: 11px;
}

.quality-hazard-clip {
  position: absolute;
  z-index: 4;
  left: 17px;
  top: 0;
  width: 10px;
  height: 6px;
  border: 2px solid #68645b;
  border-radius: 4px 4px 1px 1px;
  background: #99917e;
}

/* ------------------------------------------------------------
   CHANGE
   ------------------------------------------------------------ */

.quality-change {
  position: relative;
  width: 45px;
  height: 40px;
}

.quality-change-palm {
  position: absolute;
  left: 5px;
  bottom: 3px;
  width: 34px;
  height: 16px;
  border: 2px solid #8c6851;
  border-radius: 50% 50% 40% 40%;
  background:
    linear-gradient(
      #d6a07f,
      #bc8167
    );
  transform: rotate(-5deg);
}

.quality-change-thumb {
  position: absolute;
  z-index: 2;
  left: 4px;
  bottom: 12px;
  width: 18px;
  height: 8px;
  border: 2px solid #8c6851;
  border-radius: 8px;
  background: #ce9477;
  transform: rotate(18deg);
}

.quality-change-coin {
  position: absolute;
  z-index: 4;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border: 2px solid #92702c;
  border-radius: 50%;
  background: #dcb84f;
  color: #6e501d;
  font-family: Georgia, serif;
  font-size: 0.35rem;
  font-weight: 900;
}

.quality-change-coin-a {
  left: 10px;
  top: 7px;
}

.quality-change-coin-b {
  left: 22px;
  top: 4px;
}

.quality-change-coin-c {
  right: 2px;
  top: 11px;
}

/* ------------------------------------------------------------
   BARGAINER
   ------------------------------------------------------------ */

.quality-bargainer {
  position: relative;
  width: 44px;
  height: 40px;
}

.quality-bargainer-tag {
  position: absolute;
  left: 3px;
  top: 5px;
  width: 31px;
  height: 28px;
  box-sizing: border-box;
  border: 2px solid #82633f;
  background:
    linear-gradient(
      145deg,
      #e7cf91,
      #cda961
    );
  clip-path: polygon(
    18% 0,
    100% 0,
    100% 100%,
    0 100%,
    0 18%
  );
  transform: rotate(-6deg);
  box-shadow: 1px 2px 2px rgb(58 43 29 / 20%);
}

.quality-bargainer-hole {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 5px;
  height: 5px;
  border: 1px solid #775b3b;
  border-radius: 50%;
  background: #eee4ce;
}

.quality-bargainer-old-price {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 15px;
  height: 2px;
  background: #785b39;
  transform: rotate(-13deg);
}

.quality-bargainer-old-price::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 18px;
  height: 2px;
  background: #a34f42;
  transform: rotate(28deg);
}

.quality-bargainer-down {
  position: absolute;
  right: 4px;
  bottom: 2px;
  color: #587355;
  font-size: 0.72rem;
  font-weight: 900;
}

.quality-bargainer-coin {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 1px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border: 2px solid #8e6929;
  border-radius: 50%;
  background: #d9b34c;
  color: #6c4d1c;
  font-family: Georgia, serif;
  font-size: 0.38rem;
  font-weight: 900;
}

/* ============================================================
   QUALITY ART BUILD STYLE SET V1
   Equipment / charms / playstyle relics.
   ============================================================ */

.item-art-no-flag-membership,
.item-art-speed-miner,
.item-art-efficiency-first,
.item-art-perfectionist,
.item-art-precision-work,
.item-art-my-pace,
.item-art-spare-armor,
.item-art-reuse-kit,
.item-art-narrow-escape,
.item-art-contrarian-charm,
.item-art-minimalist,
.item-art-back-to-the-wall,
.item-art-emergency-rations,
.item-art-safety-first {
  display: grid;
  place-items: center;
}

/* NO-FLAG MEMBERSHIP CARD */

.quality-noflag-card {
  position: relative;
  width: 43px;
  height: 35px;
}

.quality-noflag-card-body {
  position: absolute;
  left: 3px;
  top: 5px;
  width: 37px;
  height: 27px;
  box-sizing: border-box;
  border: 2px solid #5f7480;
  border-radius: 4px;
  background:
    linear-gradient(
      145deg,
      #dce5df,
      #b7cbc4
    );
  transform: rotate(-3deg);
  box-shadow: 1px 2px 2px rgb(52 45 37 / 20%);
}

.quality-noflag-clip {
  position: absolute;
  z-index: 4;
  left: 16px;
  top: 1px;
  width: 11px;
  height: 7px;
  box-sizing: border-box;
  border: 2px solid #6b6b64;
  border-radius: 4px 4px 1px 1px;
  background: #9d9b8d;
}

.quality-noflag-emblem {
  position: absolute;
  left: 4px;
  top: 5px;
  width: 14px;
  height: 16px;
}

.quality-noflag-pole {
  position: absolute;
  left: 2px;
  top: 0;
  width: 2px;
  height: 15px;
  background: #5b5d59;
}

.quality-noflag-cloth {
  position: absolute;
  left: 4px;
  top: 1px;
  width: 9px;
  height: 7px;
  background: #8b958f;
  clip-path: polygon(0 0, 100% 18%, 78% 50%, 100% 82%, 0 100%);
}

.quality-noflag-slash {
  position: absolute;
  left: 5px;
  top: -1px;
  width: 2px;
  height: 18px;
  background: #a54e46;
  transform: rotate(-43deg);
}

.quality-noflag-line {
  position: absolute;
  left: 21px;
  height: 2px;
  background: #728985;
}

.quality-noflag-line-a {
  top: 9px;
  width: 11px;
}

.quality-noflag-line-b {
  top: 15px;
  width: 8px;
}

/* SPEED MINER */

.quality-speed-watch {
  position: relative;
  width: 43px;
  height: 43px;
}

.quality-speed-watch-ring {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 3px solid #68777b;
  border-radius: 50%;
  background: #c9d4d0;
  box-shadow:
    inset 0 0 0 2px #eef0e7,
    1px 2px 2px rgb(52 45 37 / 20%);
}

.quality-speed-watch-face {
  position: relative;
  width: 19px;
  height: 19px;
  border: 1px solid #768484;
  border-radius: 50%;
  background: #eeeadd;
}

.quality-speed-watch-crown {
  position: absolute;
  left: 18px;
  top: 1px;
  width: 8px;
  height: 7px;
  border: 2px solid #646e70;
  border-radius: 3px;
  background: #929d9a;
}

.quality-speed-hand {
  position: absolute;
  left: 9px;
  top: 9px;
  height: 2px;
  border-radius: 2px;
  background: #9c4d43;
  transform-origin: left center;
}

.quality-speed-hand-a {
  width: 7px;
  transform: rotate(-65deg);
}

.quality-speed-hand-b {
  width: 5px;
  background: #596a6e;
  transform: rotate(25deg);
}

.quality-speed-center {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #596a6e;
}

.quality-speed-streak {
  position: absolute;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: #879b98;
}

.quality-speed-streak-a {
  top: 17px;
  width: 8px;
}

.quality-speed-streak-b {
  top: 24px;
  width: 5px;
}

/* EFFICIENCY */

.quality-efficiency {
  position: relative;
  width: 43px;
  height: 43px;
}

.quality-efficiency-disc {
  position: absolute;
  left: 4px;
  bottom: 3px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 2px solid #627b73;
  border-radius: 50%;
  background: #d7e0d5;
}

.quality-efficiency-ring {
  width: 14px;
  height: 14px;
  border: 2px solid #779087;
  border-radius: 50%;
}

.quality-efficiency-center {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #526a63;
}

.quality-efficiency-compass {
  position: absolute;
  z-index: 3;
  top: 3px;
  width: 4px;
  height: 36px;
  border-radius: 3px;
  background:
    linear-gradient(
      90deg,
      #5f6763,
      #a7aca1,
      #555e5b
    );
  transform-origin: top center;
}

.quality-efficiency-leg-a {
  left: 21px;
  transform: rotate(18deg);
}

.quality-efficiency-leg-b {
  left: 21px;
  transform: rotate(-25deg);
}

.quality-efficiency-hinge {
  position: absolute;
  z-index: 4;
  left: 17px;
  top: 0;
  width: 9px;
  height: 9px;
  border: 2px solid #5d6764;
  border-radius: 50%;
  background: #9fa69c;
}

/* PERFECTIONIST */

.quality-perfect-board {
  position: relative;
  width: 39px;
  height: 43px;
}

.quality-perfect-paper {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 30px;
  height: 35px;
  box-sizing: border-box;
  border: 2px solid #716a59;
  border-radius: 3px;
  background: #eee9d8;
  box-shadow: 1px 2px 2px rgb(54 45 36 / 18%);
}

.quality-perfect-clip {
  position: absolute;
  z-index: 4;
  left: 14px;
  top: 1px;
  width: 12px;
  height: 8px;
  box-sizing: border-box;
  border: 2px solid #686861;
  border-radius: 4px 4px 1px 1px;
  background: #9c9a8d;
}

.quality-perfect-check {
  position: absolute;
  left: 4px;
  color: #55775e;
  font-family: Georgia, serif;
  font-size: 0.52rem;
  font-weight: 900;
}

.quality-perfect-check-a {
  top: 5px;
}

.quality-perfect-check-b {
  top: 14px;
}

.quality-perfect-check-c {
  top: 23px;
}

.quality-perfect-line {
  position: absolute;
  left: 13px;
  width: 11px;
  height: 2px;
  background: #9c9584;
}

.quality-perfect-line-a {
  top: 9px;
}

.quality-perfect-line-b {
  top: 18px;
}

.quality-perfect-line-c {
  top: 27px;
}

/* PRECISION WORK */

.quality-precision {
  position: relative;
  width: 44px;
  height: 42px;
}

.quality-precision-ruler {
  position: absolute;
  left: 3px;
  bottom: 5px;
  width: 37px;
  height: 9px;
  border: 2px solid #8c693c;
  border-radius: 2px;
  background: #d4ad68;
  transform: rotate(-7deg);
}

.quality-precision-tick {
  position: absolute;
  top: 0;
  width: 1px;
  background: #76552f;
}

.quality-precision-tick-a {
  left: 8px;
  height: 4px;
}

.quality-precision-tick-b {
  left: 17px;
  height: 6px;
}

.quality-precision-tick-c {
  left: 27px;
  height: 4px;
}

.quality-precision-pencil {
  position: absolute;
  z-index: 3;
  left: 19px;
  top: 1px;
  width: 6px;
  height: 35px;
  border-radius: 3px 3px 1px 1px;
  background:
    linear-gradient(
      90deg,
      #c78b4c,
      #e1b46b,
      #a96d3c
    );
  transform: rotate(36deg);
}

.quality-precision-pencil-tip {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 6px;
  height: 7px;
  background: #d8bd91;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.quality-precision-target {
  position: absolute;
  right: 2px;
  top: 3px;
  width: 16px;
  height: 16px;
  border: 2px solid #607b79;
  border-radius: 50%;
}

.quality-precision-target span {
  position: absolute;
  inset: 4px;
  border: 1px solid #607b79;
  border-radius: 50%;
}

/* MY PACE */

.quality-mypace {
  position: relative;
  width: 44px;
  height: 42px;
}

.quality-mypace-cup {
  position: absolute;
  z-index: 3;
  left: 6px;
  bottom: 6px;
  width: 27px;
  height: 23px;
  box-sizing: border-box;
  border: 2px solid #765c49;
  border-radius: 3px 3px 10px 10px;
  background:
    linear-gradient(
      145deg,
      #e1d5ba,
      #bcae91
    );
}

.quality-mypace-coffee {
  position: absolute;
  left: 3px;
  top: 2px;
  width: 17px;
  height: 5px;
  border-radius: 50%;
  background: #66503d;
}

.quality-mypace-handle {
  position: absolute;
  z-index: 2;
  right: 4px;
  bottom: 12px;
  width: 13px;
  height: 13px;
  box-sizing: border-box;
  border: 4px solid #a3957c;
  border-radius: 50%;
}

.quality-mypace-saucer {
  position: absolute;
  left: 3px;
  bottom: 2px;
  width: 35px;
  height: 7px;
  border-radius: 50%;
  background: #a99b81;
}

.quality-mypace-steam {
  position: absolute;
  top: 1px;
  width: 5px;
  height: 14px;
  border-left: 2px solid #9b9a8d;
  border-radius: 50%;
}

.quality-mypace-steam-a {
  left: 14px;
  transform: rotate(8deg);
}

.quality-mypace-steam-b {
  left: 23px;
  top: 3px;
  transform: rotate(-8deg);
}

/* SPARE ARMOR */

.quality-spare-armor {
  position: relative;
  width: 44px;
  height: 43px;
}

.quality-spare-plate {
  position: absolute;
  width: 27px;
  height: 32px;
  background: #6f8388;
  clip-path: polygon(
    50% 0,
    93% 15%,
    84% 70%,
    50% 100%,
    16% 70%,
    7% 15%
  );
  filter: drop-shadow(1px 2px 1px rgb(52 45 39 / 25%));
}

.quality-spare-plate span {
  position: absolute;
  inset: 5px 7px 8px;
  background: #c6c3ad;
  clip-path: inherit;
}

.quality-spare-plate-back {
  left: 3px;
  top: 7px;
  opacity: 0.72;
  transform: rotate(-12deg);
}

.quality-spare-plate-front {
  right: 3px;
  top: 3px;
  z-index: 3;
  transform: rotate(8deg);
}

.quality-spare-bolt {
  position: absolute;
  z-index: 5;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #555f60;
}

.quality-spare-bolt-a {
  right: 7px;
  top: 11px;
}

.quality-spare-bolt-b {
  right: 13px;
  bottom: 10px;
}

/* REUSE KIT */

.quality-reuse-kit {
  position: relative;
  width: 44px;
  height: 40px;
}

.quality-reuse-handle {
  position: absolute;
  left: 13px;
  top: 1px;
  width: 18px;
  height: 10px;
  box-sizing: border-box;
  border: 3px solid #586d63;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

.quality-reuse-case {
  position: absolute;
  left: 3px;
  top: 9px;
  width: 38px;
  height: 28px;
  box-sizing: border-box;
  border: 2px solid #4f645b;
  border-radius: 4px;
  background:
    linear-gradient(
      #839a89,
      #607868
    );
  box-shadow: 1px 2px 2px rgb(50 42 34 / 23%);
}

.quality-reuse-arrow {
  position: absolute;
  left: 11px;
  top: 3px;
  color: #e0e2cf;
  font-size: 1rem;
  font-weight: 900;
}

.quality-reuse-latch {
  position: absolute;
  bottom: 3px;
  width: 6px;
  height: 4px;
  border-radius: 1px;
  background: #c1b690;
}

.quality-reuse-latch-a {
  left: 7px;
}

.quality-reuse-latch-b {
  right: 7px;
}

/* NARROW ESCAPE */

.quality-narrow-escape {
  position: relative;
  width: 40px;
  height: 43px;
}

.quality-narrow-cord {
  position: absolute;
  left: 17px;
  top: 0;
  width: 8px;
  height: 14px;
  border: 2px solid #735847;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}

.quality-narrow-charm {
  position: absolute;
  left: 7px;
  top: 11px;
  width: 27px;
  height: 28px;
  box-sizing: border-box;
  border: 2px solid #765548;
  background:
    linear-gradient(
      145deg,
      #b76a59,
      #88483f
    );
  clip-path: polygon(
    50% 0,
    100% 20%,
    88% 100%,
    12% 100%,
    0 20%
  );
  box-shadow: 1px 2px 2px rgb(56 41 34 / 22%);
}

.quality-narrow-crack {
  position: absolute;
  width: 2px;
  background: #563d37;
}

.quality-narrow-crack-a {
  left: 12px;
  top: 2px;
  height: 17px;
  transform: rotate(22deg);
}

.quality-narrow-crack-b {
  left: 9px;
  top: 14px;
  height: 10px;
  transform: rotate(-30deg);
}

.quality-narrow-star {
  position: absolute;
  right: 2px;
  top: 3px;
  color: #ead48d;
  font-size: 0.55rem;
}

/* CONTRARIAN CHARM */

.quality-contrarian {
  position: relative;
  width: 40px;
  height: 43px;
}

.quality-contrarian-cord {
  position: absolute;
  left: 13px;
  top: 0;
  width: 14px;
  height: 14px;
  border: 2px solid #745847;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
}

.quality-contrarian-pouch {
  position: absolute;
  left: 6px;
  top: 12px;
  width: 29px;
  height: 27px;
  box-sizing: border-box;
  border: 2px solid #765345;
  border-radius: 5px 5px 10px 10px;
  background:
    linear-gradient(
      145deg,
      #d19a62,
      #a66b4c
    );
  box-shadow: 1px 2px 2px rgb(56 42 33 / 22%);
}

.quality-contrarian-arrow {
  position: absolute;
  top: 5px;
  font-size: 0.62rem;
  font-weight: 900;
}

.quality-contrarian-arrow-a {
  left: 5px;
  color: #526f72;
}

.quality-contrarian-arrow-b {
  right: 5px;
  color: #a34f43;
}

.quality-contrarian-knot {
  position: absolute;
  z-index: 4;
  left: 16px;
  top: 9px;
  width: 8px;
  height: 6px;
  border-radius: 50%;
  background: #72513e;
}

/* MINIMALIST */

.quality-minimalist {
  position: relative;
  width: 40px;
  height: 40px;
}

.quality-minimalist-box {
  position: absolute;
  left: 7px;
  top: 6px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid #6c6c63;
  border-radius: 3px;
  background:
    linear-gradient(
      145deg,
      #dedbcf,
      #aaa99e
    );
}

.quality-minimalist-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #62635e;
}

.quality-minimalist-shadow {
  position: absolute;
  left: 10px;
  bottom: 2px;
  width: 24px;
  height: 5px;
  border-radius: 50%;
  background: rgb(72 59 46 / 20%);
}

/* BACK TO THE WALL */

.quality-last-stand {
  position: relative;
  width: 44px;
  height: 43px;
}

.quality-last-wall {
  position: absolute;
  right: 1px;
  top: 4px;
  width: 24px;
  height: 35px;
  box-sizing: border-box;
  border: 2px solid #655044;
  background:
    repeating-linear-gradient(
      0deg,
      #9c7660 0 7px,
      #70574b 7px 9px
    );
}

.quality-last-brick {
  position: absolute;
  height: 2px;
  background: #665046;
}

.quality-last-brick-a {
  left: 2px;
  top: 8px;
  width: 18px;
}

.quality-last-brick-b {
  left: 2px;
  top: 17px;
  width: 18px;
}

.quality-last-brick-c {
  left: 2px;
  top: 26px;
  width: 18px;
}

.quality-last-shield {
  position: absolute;
  z-index: 3;
  left: 1px;
  bottom: 2px;
  width: 27px;
  height: 31px;
  background: #64787d;
  clip-path: polygon(
    50% 0,
    93% 15%,
    84% 70%,
    50% 100%,
    16% 70%,
    7% 15%
  );
  transform: rotate(-8deg);
  filter: drop-shadow(1px 2px 1px rgb(49 41 35 / 25%));
}

.quality-last-shield span {
  position: absolute;
  inset: 5px 7px 8px;
  background: #c2bda8;
  clip-path: inherit;
}

/* EMERGENCY RATIONS */

.quality-rations {
  position: relative;
  width: 39px;
  height: 43px;
}

.quality-rations-can {
  position: absolute;
  left: 7px;
  top: 5px;
  width: 27px;
  height: 34px;
  box-sizing: border-box;
  border: 2px solid #65665e;
  border-radius: 5px;
  background:
    linear-gradient(
      90deg,
      #8d9188,
      #c1c3b5 45%,
      #858980
    );
  box-shadow: 1px 2px 2px rgb(50 43 36 / 20%);
}

.quality-rations-lid {
  position: absolute;
  left: -2px;
  top: -3px;
  width: 27px;
  height: 6px;
  box-sizing: border-box;
  border: 2px solid #64665f;
  border-radius: 50%;
  background: #aaa99e;
}

.quality-rations-label {
  position: absolute;
  left: 2px;
  top: 11px;
  width: 19px;
  height: 13px;
  display: grid;
  place-items: center;
  background: #b06b59;
}

.quality-rations-cross {
  width: 9px;
  height: 3px;
  background: #e6d9b8;
  position: relative;
}

.quality-rations-cross::after {
  content: "";
  position: absolute;
  left: 3px;
  top: -3px;
  width: 3px;
  height: 9px;
  background: #e6d9b8;
}

.quality-rations-tab {
  position: absolute;
  z-index: 4;
  left: 16px;
  top: 0;
  width: 10px;
  height: 7px;
  border: 2px solid #65665f;
  border-radius: 50%;
}

/* SAFETY FIRST */

.quality-safety {
  position: relative;
  width: 43px;
  height: 40px;
}

.quality-safety-helmet {
  position: absolute;
  left: 4px;
  top: 7px;
  width: 35px;
  height: 25px;
  box-sizing: border-box;
  border: 2px solid #886d30;
  border-radius: 50% 50% 10px 10px;
  background:
    linear-gradient(
      145deg,
      #e0bd58,
      #b88e37
    );
  box-shadow:
    inset 2px 2px 2px rgb(255 242 171 / 25%),
    1px 2px 2px rgb(57 44 31 / 22%);
}

.quality-safety-ridge {
  position: absolute;
  left: 14px;
  top: -6px;
  width: 5px;
  height: 19px;
  border: 2px solid #896d31;
  border-radius: 5px;
  background: #d3aa46;
}

.quality-safety-brim {
  position: absolute;
  left: -5px;
  bottom: -5px;
  width: 43px;
  height: 8px;
  border: 2px solid #84692f;
  border-radius: 50%;
  background: #c79d3f;
}

.quality-safety-cross {
  position: absolute;
  left: 12px;
  top: 8px;
  color: #f1e7c7;
  font-family: Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
}

/* ============================================================
   QUALITY ART FINAL 19 SET V1
   Exploration / machinery / challenge / special.
   ============================================================ */

.item-art-exploration-beacon,
.item-art-dynamite,
.item-art-double-down,
.item-art-copier,
.item-art-junk-box,
.item-art-broken-scanner,
.item-art-on-site-verification,
.item-art-second-opinion,
.item-art-black-market-membership,
.item-art-appraisal-eye,
.item-art-reroll-addiction,
.item-art-flag-collection-box,
.item-art-early-retirement,
.item-art-cursed-chest,
.item-art-gambler-coin,
.item-art-reckless,
.item-art-learning-drone,
.item-art-mystery-bag {
  display: grid;
  place-items: center;
}

/* EXPLORATION BEACON */

.quality-beacon {
  position: relative;
  width: 42px;
  height: 44px;
}

.quality-beacon-antenna {
  position: absolute;
  z-index: 4;
  left: 20px;
  top: 0;
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: #5c6866;
}

.quality-beacon-tip {
  position: absolute;
  left: -2px;
  top: -1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c96d54;
  box-shadow: 0 0 0 2px #e6c17a;
}

.quality-beacon-head {
  position: absolute;
  z-index: 3;
  left: 10px;
  top: 10px;
  width: 23px;
  height: 13px;
  box-sizing: border-box;
  border: 2px solid #536867;
  border-radius: 7px 7px 3px 3px;
  background: #879c94;
}

.quality-beacon-lens {
  position: absolute;
  left: 7px;
  top: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c5ddd2;
  box-shadow: inset 0 0 0 2px #5d7c78;
}

.quality-beacon-body {
  position: absolute;
  z-index: 2;
  left: 12px;
  top: 21px;
  width: 19px;
  height: 17px;
  box-sizing: border-box;
  border: 2px solid #586963;
  border-radius: 2px 2px 6px 6px;
  background: linear-gradient(#82958a, #5d756b);
}

.quality-beacon-light {
  position: absolute;
  left: 3px;
  top: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d9bc62;
}

.quality-beacon-line {
  position: absolute;
  right: 3px;
  top: 5px;
  width: 6px;
  height: 2px;
  background: #d4d6c5;
}

.quality-beacon-leg {
  position: absolute;
  z-index: 1;
  bottom: 1px;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: #58645f;
  transform-origin: top center;
}

.quality-beacon-leg-a {
  left: 16px;
  transform: rotate(24deg);
}

.quality-beacon-leg-b {
  right: 16px;
  transform: rotate(-24deg);
}

/* MARKING SPRAY */

.quality-spray {
  position: relative;
  width: 39px;
  height: 44px;
}

.quality-spray-can {
  position: absolute;
  left: 9px;
  top: 10px;
  width: 23px;
  height: 31px;
  box-sizing: border-box;
  border: 2px solid #676b65;
  border-radius: 4px 4px 6px 6px;
  background: linear-gradient(
    90deg,
    #999e96,
    #d0d1c5 45%,
    #858b85
  );
  box-shadow: 1px 2px 2px rgb(50 42 35 / 20%);
}

.quality-spray-cap {
  position: absolute;
  z-index: 3;
  left: 13px;
  top: 3px;
  width: 15px;
  height: 10px;
  box-sizing: border-box;
  border: 2px solid #686b65;
  border-radius: 3px 3px 1px 1px;
  background: #8e948d;
}

.quality-spray-nozzle {
  position: absolute;
  right: -4px;
  top: 1px;
  width: 6px;
  height: 4px;
  border-radius: 1px;
  background: #575e5a;
}

.quality-spray-label {
  position: absolute;
  left: 3px;
  top: 9px;
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #c66556;
}

.quality-spray-mark {
  color: #efe3c8;
  font-family: Georgia, serif;
  font-size: 0.7rem;
  font-weight: 900;
}

.quality-spray-mist {
  position: absolute;
  right: 0;
  top: 5px;
  width: 11px;
  height: 10px;
}

.quality-spray-mist span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #a9b3aa;
}

.quality-spray-mist span:nth-child(1) {
  left: 0;
  top: 4px;
}

.quality-spray-mist span:nth-child(2) {
  left: 5px;
  top: 1px;
}

.quality-spray-mist span:nth-child(3) {
  right: 0;
  bottom: 0;
}

/* DYNAMITE */

.quality-dynamite {
  position: relative;
  width: 44px;
  height: 42px;
}

.quality-dynamite-stick {
  position: absolute;
  top: 11px;
  width: 10px;
  height: 27px;
  box-sizing: border-box;
  border: 2px solid #85483e;
  border-radius: 5px;
  background: linear-gradient(
    90deg,
    #a64f45,
    #ca6b58,
    #99473f
  );
}

.quality-dynamite-stick-a {
  left: 7px;
  transform: rotate(-7deg);
}

.quality-dynamite-stick-b {
  left: 17px;
}

.quality-dynamite-stick-c {
  left: 27px;
  transform: rotate(7deg);
}

.quality-dynamite-band {
  position: absolute;
  z-index: 4;
  left: 6px;
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: #6a5947;
}

.quality-dynamite-band-a {
  top: 18px;
}

.quality-dynamite-band-b {
  top: 29px;
}

.quality-dynamite-fuse {
  position: absolute;
  z-index: 5;
  left: 22px;
  top: 2px;
  width: 16px;
  height: 13px;
  border-top: 3px solid #605546;
  border-right: 3px solid #605546;
  border-radius: 0 10px 0 0;
  transform: rotate(-14deg);
}

.quality-dynamite-spark {
  position: absolute;
  z-index: 6;
  right: 0;
  top: -2px;
  color: #e1b64e;
  font-size: 0.75rem;
}

/* DOUBLE DOWN */

.quality-double-down {
  position: relative;
  width: 44px;
  height: 42px;
}

.quality-double-card {
  position: absolute;
  width: 25px;
  height: 31px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid #70594b;
  border-radius: 4px;
  font-family: Georgia, serif;
  font-size: 0.7rem;
  font-weight: 900;
  box-shadow: 1px 2px 2px rgb(50 42 35 / 18%);
}

.quality-double-card-back {
  left: 3px;
  top: 3px;
  background: #71817d;
  color: #e6dfc8;
  transform: rotate(-10deg);
}

.quality-double-card-front {
  right: 3px;
  top: 6px;
  z-index: 3;
  background: #e4d4aa;
  color: #9a4e42;
  transform: rotate(8deg);
}

.quality-double-chip {
  position: absolute;
  z-index: 5;
  left: 15px;
  bottom: 0;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: 2px solid #8b672c;
  border-radius: 50%;
  background: #d4ad4a;
}

.quality-double-chip span {
  position: absolute;
  inset: 3px;
  border: 1px dashed #8b672c;
  border-radius: 50%;
}

/* COPIER */

.quality-copier {
  position: relative;
  width: 44px;
  height: 43px;
}

.quality-copier-lid {
  position: absolute;
  z-index: 4;
  left: 8px;
  top: 2px;
  width: 28px;
  height: 10px;
  box-sizing: border-box;
  border: 2px solid #596767;
  border-radius: 3px 3px 1px 1px;
  background: #8e9a95;
  transform: skewX(-8deg);
}

.quality-copier-paper-top {
  position: absolute;
  left: 5px;
  top: -5px;
  width: 17px;
  height: 8px;
  border: 1px solid #9c917a;
  background: #eee6cf;
}

.quality-copier-body {
  position: absolute;
  z-index: 3;
  left: 5px;
  top: 11px;
  width: 34px;
  height: 25px;
  box-sizing: border-box;
  border: 2px solid #596767;
  border-radius: 4px;
  background: linear-gradient(#9ca7a0, #77857f);
}

.quality-copier-panel {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 10px;
  height: 6px;
  border: 1px solid #53605e;
  background: #c3d0c4;
}

.quality-copier-panel span {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #c47b55;
}

.quality-copier-slot {
  position: absolute;
  left: 6px;
  bottom: 5px;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: #4f5c5a;
}

.quality-copier-paper-out {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 0;
  width: 21px;
  height: 13px;
  border: 1px solid #a39982;
  background: #eee6d1;
}

.quality-copier-copy-line {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 12px;
  height: 2px;
  background: #a9a08d;
  box-shadow: 0 4px 0 #a9a08d;
}

/* JUNK BOX */

.quality-junk {
  position: relative;
  width: 44px;
  height: 42px;
}

.quality-junk-box {
  position: absolute;
  z-index: 3;
  left: 5px;
  top: 14px;
  width: 34px;
  height: 25px;
  box-sizing: border-box;
  border: 2px solid #75583d;
  background: linear-gradient(#b78752, #8d633f);
  box-shadow: 1px 2px 2px rgb(52 40 31 / 22%);
}

.quality-junk-label {
  position: absolute;
  left: 11px;
  top: 5px;
  width: 10px;
  height: 12px;
  display: grid;
  place-items: center;
  background: #d7c18d;
  color: #6e5540;
  font-family: Georgia, serif;
  font-weight: 900;
}

.quality-junk-flap {
  position: absolute;
  z-index: 2;
  top: 7px;
  width: 22px;
  height: 13px;
  border: 2px solid #75583d;
  background: #a87949;
}

.quality-junk-flap-a {
  left: 3px;
  transform: skewY(-22deg);
}

.quality-junk-flap-b {
  right: 3px;
  transform: skewY(22deg);
}

.quality-junk-gear {
  position: absolute;
  z-index: 5;
  right: 1px;
  top: 2px;
  width: 15px;
  height: 15px;
  border: 3px dotted #656963;
  border-radius: 50%;
  background: #a6a99e;
}

.quality-junk-gear span {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #656963;
}

.quality-junk-spring {
  position: absolute;
  z-index: 4;
  left: 8px;
  top: 1px;
  width: 12px;
  height: 18px;
  border-left: 2px solid #676a65;
  border-right: 2px solid #676a65;
  transform: skewX(-18deg);
}

/* BROKEN SCANNER */

.quality-broken-scanner {
  position: relative;
  width: 42px;
  height: 43px;
}

.quality-broken-antenna {
  position: absolute;
  z-index: 3;
  left: 28px;
  top: 0;
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: #596865;
  transform: rotate(24deg);
}

.quality-broken-case {
  position: absolute;
  left: 5px;
  top: 8px;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border: 2px solid #4e625f;
  border-radius: 5px;
  background: linear-gradient(145deg, #758985, #536b66);
  transform: rotate(-4deg);
}

.quality-broken-screen {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 21px;
  height: 16px;
  overflow: hidden;
  box-sizing: border-box;
  border: 2px solid #405653;
  background: #a9bba8;
}

.quality-broken-error {
  position: absolute;
  left: 2px;
  bottom: 1px;
  color: #874d45;
  font-family: Arial, sans-serif;
  font-size: 0.38rem;
  font-weight: 900;
}

.quality-broken-crack {
  position: absolute;
  z-index: 3;
  width: 1px;
  background: #53655e;
}

.quality-broken-crack-a {
  left: 11px;
  top: -1px;
  height: 18px;
  transform: rotate(24deg);
}

.quality-broken-crack-b {
  left: 8px;
  top: 7px;
  height: 10px;
  transform: rotate(-39deg);
}

.quality-broken-button {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b27457;
}

/* ON-SITE VERIFICATION */

.quality-verification {
  position: relative;
  width: 44px;
  height: 43px;
}

.quality-verification-board {
  position: absolute;
  left: 2px;
  top: 4px;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border: 2px solid #78664e;
  background: #e5dcc5;
  transform: rotate(-4deg);
}

.quality-verification-grid {
  position: absolute;
  inset: 4px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.quality-verification-grid span {
  border: 1px solid #9c9077;
  background: #c9c5b3;
}

.quality-verification-glass {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  width: 28px;
  height: 29px;
}

.quality-verification-lens {
  position: absolute;
  left: 0;
  top: 0;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 3px solid #526b68;
  border-radius: 50%;
  background: rgb(194 218 208 / 75%);
}

.quality-verification-lens span {
  color: #4e765d;
  font-size: 0.6rem;
  font-weight: 900;
}

.quality-verification-handle {
  position: absolute;
  right: 4px;
  bottom: 1px;
  width: 5px;
  height: 16px;
  border-radius: 3px;
  background: #5c625b;
  transform: rotate(-42deg);
}

/* SECOND OPINION */

.quality-second-opinion {
  position: relative;
  width: 44px;
  height: 40px;
}

.quality-second-lens {
  position: absolute;
  top: 5px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 3px solid #5e7471;
  border-radius: 50%;
  background: #c5d6ca;
  box-shadow: 1px 2px 2px rgb(52 43 35 / 18%);
}

.quality-second-lens span {
  color: #596d69;
  font-family: Georgia, serif;
  font-size: 0.75rem;
  font-weight: 900;
}

.quality-second-lens-a {
  left: 1px;
  transform: rotate(-8deg);
}

.quality-second-lens-b {
  right: 1px;
  top: 9px;
  border-color: #786555;
  background: #ded0ad;
  transform: rotate(8deg);
}

.quality-second-link {
  position: absolute;
  left: 18px;
  bottom: 2px;
  width: 8px;
  height: 14px;
  border-left: 3px solid #646861;
  border-right: 3px solid #646861;
}

/* BLACK MARKET MEMBERSHIP */

.quality-black-card {
  position: relative;
  width: 43px;
  height: 34px;
}

.quality-black-card-body {
  position: absolute;
  left: 2px;
  top: 3px;
  width: 39px;
  height: 28px;
  overflow: hidden;
  box-sizing: border-box;
  border: 2px solid #4e4945;
  border-radius: 4px;
  background: linear-gradient(145deg, #4d4a48, #252827);
  transform: rotate(-3deg);
  box-shadow: 1px 2px 2px rgb(40 33 29 / 30%);
}

.quality-black-eye {
  position: absolute;
  left: 5px;
  top: 6px;
  width: 14px;
  height: 9px;
  border-radius: 70% 0 70% 0;
  background: #a5824b;
  transform: rotate(45deg);
}

.quality-black-eye span {
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #2d302e;
}

.quality-black-stripe {
  position: absolute;
  right: -5px;
  top: 4px;
  width: 22px;
  height: 4px;
  background: #765d3e;
  transform: rotate(-35deg);
}

.quality-black-code {
  position: absolute;
  left: 5px;
  bottom: 5px;
  width: 22px;
  height: 2px;
  background: #7f766a;
  box-shadow: 0 4px 0 #5f5a54;
}

.quality-black-corner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid #9b7946;
  border-bottom: 2px solid #9b7946;
}

/* APPRAISAL EYE */

.quality-appraisal {
  position: relative;
  width: 44px;
  height: 42px;
}

.quality-appraisal-glass {
  position: absolute;
  left: 3px;
  top: 2px;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 4px solid #766347;
  border-radius: 50%;
  background: rgb(220 229 213 / 70%);
}

.quality-appraisal-eye {
  position: relative;
  width: 17px;
  height: 10px;
  border-radius: 70% 0 70% 0;
  background: #9d8156;
  transform: rotate(45deg);
}

.quality-appraisal-pupil {
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4b514d;
}

.quality-appraisal-handle {
  position: absolute;
  right: 6px;
  bottom: 1px;
  width: 6px;
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    #604936,
    #96704d,
    #5a4434
  );
  transform: rotate(-42deg);
}

.quality-appraisal-spark {
  position: absolute;
  right: 1px;
  top: 0;
  color: #d3ad4d;
  font-size: 0.65rem;
}

/* REROLL ADDICTION */

.quality-reroll {
  position: relative;
  width: 44px;
  height: 42px;
}

.quality-reroll-token {
  position: absolute;
  z-index: 4;
  left: 10px;
  top: 6px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 3px solid #87682e;
  border-radius: 50%;
  background: #d3ad4d;
}

.quality-reroll-arrow {
  color: #675027;
  font-size: 0.95rem;
  font-weight: 900;
}

.quality-reroll-ticket {
  position: absolute;
  width: 22px;
  height: 10px;
  border: 2px solid #7d6750;
  background: #ded0a9;
}

.quality-reroll-ticket-a {
  left: 1px;
  bottom: 4px;
  transform: rotate(-16deg);
}

.quality-reroll-ticket-b {
  right: 0;
  bottom: 2px;
  transform: rotate(17deg);
}

.quality-reroll-counter {
  position: absolute;
  z-index: 5;
  right: 0;
  top: 1px;
  color: #9a5042;
  font-family: Georgia, serif;
  font-size: 0.55rem;
  font-weight: 900;
}

/* FLAG COLLECTION BOX */

.quality-flag-box {
  position: relative;
  width: 43px;
  height: 43px;
}

.quality-flag-box-body {
  position: absolute;
  left: 5px;
  top: 16px;
  width: 34px;
  height: 24px;
  box-sizing: border-box;
  border: 2px solid #71533a;
  border-radius: 3px;
  background: linear-gradient(#aa7b4d, #815b3d);
  box-shadow: 1px 2px 2px rgb(50 39 30 / 22%);
}

.quality-flag-box-slot {
  position: absolute;
  z-index: 4;
  left: 11px;
  top: 13px;
  width: 22px;
  height: 4px;
  border-radius: 3px;
  background: #4e4035;
}

.quality-flag-box-label {
  position: absolute;
  left: 10px;
  top: 6px;
  width: 13px;
  height: 12px;
  background: #d6c08d;
}

.quality-mini-flag-pole {
  position: absolute;
  left: 3px;
  top: 2px;
  width: 1px;
  height: 8px;
  background: #66564a;
}

.quality-mini-flag-cloth {
  position: absolute;
  left: 4px;
  top: 2px;
  width: 6px;
  height: 4px;
  background: #a6554a;
  clip-path: polygon(0 0, 100% 20%, 75% 50%, 100% 80%, 0 100%);
}

.quality-flag-in {
  position: absolute;
  z-index: 3;
  left: 20px;
  top: 0;
  width: 18px;
  height: 19px;
  transform: rotate(10deg);
}

.quality-flag-in-pole {
  position: absolute;
  left: 3px;
  top: 0;
  width: 2px;
  height: 18px;
  background: #625449;
}

.quality-flag-in-cloth {
  position: absolute;
  left: 5px;
  top: 1px;
  width: 11px;
  height: 7px;
  background: #a95349;
  clip-path: polygon(0 0, 100% 15%, 76% 50%, 100% 85%, 0 100%);
}

/* EARLY RETIREMENT */

.quality-retirement {
  position: relative;
  width: 44px;
  height: 42px;
}

.quality-retirement-chair {
  position: absolute;
  left: 3px;
  bottom: 2px;
  width: 31px;
  height: 34px;
  transform: rotate(-5deg);
}

.quality-retirement-back {
  position: absolute;
  left: 2px;
  top: 0;
  width: 22px;
  height: 21px;
  border: 3px solid #755a40;
  border-radius: 4px;
  background: repeating-linear-gradient(
    90deg,
    #d1b475 0 3px,
    #aa8956 3px 5px
  );
}

.quality-retirement-seat {
  position: absolute;
  left: 6px;
  top: 20px;
  width: 25px;
  height: 6px;
  border: 2px solid #72563e;
  border-radius: 3px;
  background: #c9aa6c;
}

.quality-retirement-leg {
  position: absolute;
  top: 26px;
  width: 3px;
  height: 10px;
  background: #72563e;
}

.quality-retirement-leg-a {
  left: 8px;
  transform: rotate(9deg);
}

.quality-retirement-leg-b {
  right: 1px;
  transform: rotate(-9deg);
}

.quality-retirement-drink {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 5px;
  width: 11px;
  height: 15px;
  border: 2px solid #75614c;
  border-radius: 2px 2px 5px 5px;
  background: #d59a65;
}

.quality-retirement-straw {
  position: absolute;
  left: 6px;
  top: -9px;
  width: 2px;
  height: 11px;
  background: #9b5549;
  transform: rotate(16deg);
}

.quality-retirement-sun {
  position: absolute;
  right: 1px;
  top: -3px;
  color: #d5ad4d;
  font-size: 0.7rem;
}

/* CURSED CHEST */

.quality-cursed-chest {
  position: relative;
  width: 44px;
  height: 42px;
}

.quality-cursed-lid {
  position: absolute;
  z-index: 4;
  left: 4px;
  top: 7px;
  width: 36px;
  height: 15px;
  box-sizing: border-box;
  border: 2px solid #4d3f4f;
  border-radius: 10px 10px 2px 2px;
  background: linear-gradient(#76526f, #543d59);
}

.quality-cursed-eye {
  position: absolute;
  left: 11px;
  top: 4px;
  width: 11px;
  height: 6px;
  border-radius: 70% 0 70% 0;
  background: #cba45d;
  transform: rotate(45deg);
}

.quality-cursed-eye span {
  position: absolute;
  left: 4px;
  top: 1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #48384a;
}

.quality-cursed-body {
  position: absolute;
  z-index: 3;
  left: 4px;
  top: 20px;
  width: 36px;
  height: 19px;
  box-sizing: border-box;
  border: 2px solid #493d4b;
  border-radius: 2px 2px 5px 5px;
  background: linear-gradient(#684963, #493a4c);
}

.quality-cursed-band {
  position: absolute;
  left: 15px;
  top: 0;
  width: 5px;
  height: 17px;
  background: #967342;
}

.quality-cursed-lock {
  position: absolute;
  z-index: 4;
  left: 13px;
  top: 5px;
  color: #d0a754;
  font-size: 0.55rem;
}

.quality-cursed-aura {
  position: absolute;
  z-index: 1;
  border: 2px solid #856381;
  border-radius: 50%;
  opacity: 0.55;
}

.quality-cursed-aura-a {
  inset: 1px;
}

.quality-cursed-aura-b {
  inset: 5px -2px -1px 4px;
}

/* GAMBLER COIN */

.quality-gambler-coin {
  position: relative;
  width: 43px;
  height: 43px;
}

.quality-gambler-rim {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 3px solid #89652a;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 28%,
    #ecd174,
    #c69b3d 65%,
    #a4772c
  );
  box-shadow:
    inset 0 0 0 2px #e0bd58,
    1px 2px 2px rgb(55 42 29 / 22%);
}

.quality-gambler-face {
  position: relative;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  overflow: hidden;
}

.quality-gambler-safe,
.quality-gambler-mine {
  position: absolute;
  top: 6px;
  font-family: Georgia, serif;
  font-size: 0.5rem;
  font-weight: 900;
}

.quality-gambler-safe {
  left: 2px;
  color: #52725c;
}

.quality-gambler-mine {
  right: 1px;
  color: #9b4d44;
}

.quality-gambler-divider {
  position: absolute;
  left: 10px;
  top: 1px;
  width: 2px;
  height: 19px;
  background: #89682f;
  transform: rotate(17deg);
}

.quality-gambler-spark {
  position: absolute;
  color: #d9b84f;
}

.quality-gambler-spark-a {
  right: 0;
  top: 0;
  font-size: 0.6rem;
}

.quality-gambler-spark-b {
  left: 0;
  bottom: 3px;
  font-size: 0.8rem;
}

/* RECKLESS */

.quality-reckless {
  position: relative;
  width: 44px;
  height: 43px;
}

.quality-reckless-shield {
  position: absolute;
  z-index: 3;
  left: 7px;
  top: 3px;
  width: 30px;
  height: 35px;
  background: linear-gradient(#78686a, #4e5556);
  clip-path: polygon(
    50% 0,
    93% 15%,
    84% 70%,
    50% 100%,
    16% 70%,
    7% 15%
  );
  filter: drop-shadow(1px 2px 1px rgb(48 39 34 / 25%));
}

.quality-reckless-crack {
  position: absolute;
  width: 2px;
  background: #342f31;
}

.quality-reckless-crack-a {
  left: 14px;
  top: 4px;
  height: 24px;
  transform: rotate(18deg);
}

.quality-reckless-crack-b {
  left: 10px;
  top: 17px;
  height: 13px;
  transform: rotate(-34deg);
}

.quality-reckless-slash {
  position: absolute;
  left: 14px;
  top: 1px;
  width: 3px;
  height: 34px;
  background: #a44f45;
  transform: rotate(47deg);
}

.quality-reckless-flame {
  position: absolute;
  z-index: 2;
  bottom: 0;
  background: #c66d4e;
  clip-path: polygon(50% 0, 100% 100%, 50% 76%, 0 100%);
}

.quality-reckless-flame-a {
  left: 2px;
  width: 15px;
  height: 22px;
  transform: rotate(-12deg);
}

.quality-reckless-flame-b {
  right: 1px;
  width: 14px;
  height: 19px;
  background: #d6a04d;
  transform: rotate(12deg);
}

/* LEARNING DRONE */

.quality-learning-drone {
  position: relative;
  width: 46px;
  height: 42px;
}

.quality-learning-body {
  position: absolute;
  z-index: 4;
  left: 12px;
  top: 11px;
  width: 23px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid #4f686a;
  border-radius: 7px;
  background: linear-gradient(#82999a, #5d7778);
  box-shadow: 1px 2px 2px rgb(48 42 35 / 20%);
}

.quality-learning-lens {
  position: absolute;
  left: 7px;
  bottom: 3px;
  width: 7px;
  height: 7px;
  border: 2px solid #435d60;
  border-radius: 50%;
  background: #b9d5d0;
}

.quality-learning-brain {
  position: absolute;
  left: 4px;
  top: 2px;
  width: 13px;
  height: 6px;
  border: 1px solid #516c6c;
  border-radius: 5px;
  background: #c1c997;
}

.quality-learning-node {
  position: absolute;
  top: 1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #68794f;
}

.quality-learning-node-a {
  left: 1px;
}

.quality-learning-node-b {
  left: 5px;
}

.quality-learning-node-c {
  right: 1px;
}

.quality-learning-arm {
  position: absolute;
  z-index: 2;
  top: 18px;
  width: 18px;
  height: 3px;
  border-radius: 3px;
  background: #566b6c;
}

.quality-learning-arm-a {
  left: 1px;
  transform: rotate(-14deg);
}

.quality-learning-arm-b {
  right: 1px;
  transform: rotate(14deg);
}

.quality-learning-rotor {
  position: absolute;
  z-index: 3;
  top: 8px;
  width: 16px;
  height: 7px;
  border-top: 2px solid #566363;
  border-bottom: 2px solid #566363;
  border-radius: 50%;
}

.quality-learning-rotor span {
  position: absolute;
  left: 7px;
  top: -4px;
  width: 2px;
  height: 10px;
  background: #596766;
}

.quality-learning-rotor-a {
  left: 0;
}

.quality-learning-rotor-b {
  right: 0;
}

/* MYSTERY BAG */

.quality-mystery-bag {
  position: relative;
  width: 43px;
  height: 43px;
}

.quality-mystery-body {
  position: absolute;
  z-index: 3;
  left: 5px;
  top: 11px;
  width: 33px;
  height: 29px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid #8b4d43;
  border-radius: 5px 5px 12px 12px;
  background: linear-gradient(
    145deg,
    #c85f53,
    #a44b45
  );
  box-shadow: 1px 2px 2px rgb(55 40 32 / 22%);
}

.quality-mystery-question {
  color: #ead8a1;
  font-family: Georgia, serif;
  font-size: 1rem;
  font-weight: 900;
}

.quality-mystery-knot {
  position: absolute;
  z-index: 5;
  left: 16px;
  top: 6px;
  width: 11px;
  height: 8px;
  border-radius: 50%;
  background: #d4b25f;
}

.quality-mystery-cord {
  position: absolute;
  z-index: 4;
  top: 2px;
  width: 15px;
  height: 12px;
  border-top: 2px solid #a88645;
}

.quality-mystery-cord-a {
  left: 5px;
  transform: rotate(19deg);
}

.quality-mystery-cord-b {
  right: 5px;
  transform: rotate(-19deg);
}

.quality-mystery-tag {
  position: absolute;
  z-index: 6;
  right: -1px;
  bottom: 2px;
  width: 14px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 1px solid #886b36;
  background: #e2cc8d;
  color: #9d4d43;
  font-family: serif;
  font-size: 0.55rem;
  font-weight: 900;
  transform: rotate(8deg);
}

@media (max-width: 800px) {
}
/* ==========================================================
   Pattern Drone Mk.I
   Drone-owned flags are visually distinct from player flags.
   ========================================================== */

.mine-cell-drone-flagged {
  box-shadow:
    inset 0 0 0 2px rgba(43, 168, 181, 0.32);
}

.flag-icon-drone .flag-cloth {
  background:
    linear-gradient(
      135deg,
      #74d8df 0%,
      #2ba8b5 100%
    );
  border-color: #176c76;
}

.flag-icon-drone .flag-pole,
.flag-icon-drone .flag-base {
  background-color: #176c76;
}
/* ==========================================================
   B-4A-2 Board Information
   ========================================================== */

.information-target {
  cursor: crosshair;
}


.beacon-area-cell {
  outline:
    2px dashed rgba(70, 151, 177, 0.72);
  outline-offset: -3px;
}

.beacon-result-fx {
  position: absolute;
  z-index: 34;
  left: 50%;
  top: 14%;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border: 1px solid rgb(61 121 143 / 38%);
  border-radius: 999px;
  background: rgb(235 250 253 / 96%);
  box-shadow:
    0 2px 6px rgb(31 71 84 / 18%),
    0 0 10px rgb(93 183 208 / 24%);
  color: #315f70;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation:
    beacon-result-rise 1400ms
    cubic-bezier(.18,.74,.24,1)
    both;
}

.beacon-result-fx-icon {
  font-size: 11px;
  line-height: 1;
}

@keyframes beacon-result-rise {
  0% {
    opacity: 0;
    transform:
      translate(-50%, 3px)
      scale(.88);
  }

  14% {
    opacity: 1;
    transform:
      translate(-50%, -3px)
      scale(1);
  }

  72% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -18px)
      scale(.96);
  }
}


/* ============================================================
   B-5A SHARED ITEM USE FX
   ============================================================ */

.item-use-fx {
  --item-use-accent: #6f9b91;
  --item-use-glow: rgb(111 155 145 / 42%);

  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.item-use-fx-common {
  --item-use-accent: #7f8c86;
  --item-use-glow: rgb(127 140 134 / 40%);
}

.item-use-fx-uncommon {
  --item-use-accent: #5e9a79;
  --item-use-glow: rgb(94 154 121 / 44%);
}

.item-use-fx-rare {
  --item-use-accent: #5f7fa7;
  --item-use-glow: rgb(95 127 167 / 46%);
}

.item-use-fx-legendary {
  --item-use-accent: #b18a45;
  --item-use-glow: rgb(177 138 69 / 50%);
}

.item-use-fx-burst {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, auto);
  align-items: center;
  gap: 15px;
  min-width: 245px;
  max-width: min(420px, calc(100vw - 36px));
  border: 1px solid rgb(81 73 63 / 20%);
  border-left: 5px solid var(--item-use-accent);
  border-radius: 7px;
  padding: 13px 20px 13px 13px;
  background:
    linear-gradient(
      105deg,
      rgb(255 253 244 / 97%),
      rgb(244 239 222 / 96%)
    );
  box-shadow:
    0 18px 42px rgb(54 47 38 / 24%),
    0 0 32px var(--item-use-glow);
  transform-origin: 50% 50%;
  animation:
    item-use-card-in 920ms
    cubic-bezier(0.2, 0.78, 0.22, 1)
    both;
}

.item-use-fx-art {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 2px solid var(--item-use-accent);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgb(255 255 255 / 94%) 0 38%,
      rgb(244 238 218 / 92%) 70%,
      rgb(218 207 179 / 92%) 100%
    );
  box-shadow:
    inset 0 0 0 4px rgb(255 255 255 / 38%),
    0 5px 14px rgb(63 54 43 / 20%),
    0 0 24px var(--item-use-glow);
  animation:
    item-use-art-pop 920ms
    cubic-bezier(0.2, 0.82, 0.25, 1)
    both;
}

.item-use-fx-art .item-art {
  transform: scale(1.22);
}

.item-use-fx-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.item-use-fx-copy > span {
  color: var(--item-use-accent);
  font-family:
    'Courier New',
    monospace;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.item-use-fx-copy > strong {
  overflow: hidden;
  color: #51493f;
  font-size: 0.94rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-use-fx-ring {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 51px;
  width: 74px;
  height: 74px;
  border: 2px solid var(--item-use-accent);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.item-use-fx-ring-a {
  animation:
    item-use-ring 700ms
    ease-out
    80ms
    both;
}

.item-use-fx-ring-b {
  animation:
    item-use-ring 680ms
    ease-out
    180ms
    both;
}

@keyframes item-use-card-in {
  0% {
    opacity: 0;
    transform:
      translateY(16px)
      rotate(-1.2deg)
      scale(0.88);
  }

  14% {
    opacity: 1;
  }

  34% {
    transform:
      translateY(-3px)
      rotate(0.35deg)
      scale(1.035);
  }

  62% {
    opacity: 1;
    transform:
      translateY(0)
      rotate(0deg)
      scale(1);
  }

  82% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translateY(-7px)
      scale(0.98);
  }
}

@keyframes item-use-art-pop {
  0% {
    opacity: 0;
    transform:
      rotate(-18deg)
      scale(0.42);
  }

  28% {
    opacity: 1;
    transform:
      rotate(5deg)
      scale(1.12);
  }

  48% {
    transform:
      rotate(-2deg)
      scale(0.98);
  }

  72% {
    opacity: 1;
    transform:
      rotate(0deg)
      scale(1);
  }

  100% {
    opacity: 0.88;
    transform:
      rotate(0deg)
      scale(1);
  }
}

@keyframes item-use-ring {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(0.45);
  }

  18% {
    opacity: 0.7;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(1.75);
  }
}

@media (max-width: 620px) {
  .item-use-fx-burst {
    grid-template-columns: 66px minmax(0, auto);
    gap: 12px;
    min-width: 220px;
    padding: 11px 16px 11px 11px;
  }

  .item-use-fx-art {
    width: 62px;
    height: 62px;
  }

  .item-use-fx-ring {
    left: 42px;
    width: 62px;
    height: 62px;
  }
}


/* =========================================================
   B-5B SHOP TYPE VISUAL DIFFERENTIATION
   Visual-only treatment for Normal / Rare / Recycle shops.
   ========================================================= */

.shop-panel {
  --shop-accent: #756149;
  --shop-soft: #e5d5b5;
  --shop-faint: #faf2df;
  --shop-ink: #493d31;
  --shop-card-paper: #fff9e9;
  --shop-card-border: #cbbda1;
  --shop-rule: #9d8e7160;
  --shop-wallet-bg: #f6dfa1;
  --shop-wallet-border: #c6ac6f;
  --shop-wallet-ink: #554321;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.shop-panel::before,
.shop-panel::after {
  position: absolute;
  pointer-events: none;
}

.shop-panel::before {
  z-index: -1;
  content: '';
}

.shop-panel::after {
  z-index: 2;
  font-family: 'Courier New', monospace;
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1;
}

/* NORMAL SHOP */

.shop-panel-normal {
  --shop-accent: #756149;
  --shop-soft: #e5d5b5;
  --shop-faint: #faf2df;
  --shop-ink: #493d31;
  --shop-card-paper: #fff9e9;
  --shop-card-border: #cbbda1;
  --shop-rule: #9d8e7160;
  --shop-wallet-bg: #f6dfa1;
  --shop-wallet-border: #c6ac6f;
  --shop-wallet-ink: #554321;
  border-color: #c9b78f;
  background:
    linear-gradient(
      90deg,
      transparent 31px,
      #d66d681f 32px,
      transparent 33px
    ),
    repeating-linear-gradient(
      180deg,
      transparent,
      transparent 27px,
      #728aa014 28px
    ),
    #f4edda;
  box-shadow:
    0 7px 13px #38251b38,
    inset 0 0 25px #826d4420;
}

/* RARE SHOP */

.shop-panel-rare {
  --shop-accent: #9a7330;
  --shop-soft: #ead39a;
  --shop-faint: #fff8df;
  --shop-ink: #493b25;
  --shop-card-paper: #fffaf0;
  --shop-card-border: #c9a85c;
  --shop-rule: #b592486b;
  --shop-wallet-bg: #f4dc8c;
  --shop-wallet-border: #b78b35;
  --shop-wallet-ink: #584218;
  border-color: #b9903d;
  background:
    radial-gradient(
      circle at 84% 8%,
      #f4d87942 0 7%,
      transparent 24%
    ),
    repeating-linear-gradient(
      135deg,
      transparent 0 22px,
      #b98a2c0b 23px 24px
    ),
    linear-gradient(
      180deg,
      #fff8df 0%,
      #f2e4bd 100%
    );
  box-shadow:
    0 8px 18px #3b291f42,
    0 0 0 2px #e0c16b45,
    inset 0 0 30px #b8872820;
}

/* RECYCLE SHOP */

.shop-panel-recycle {
  --shop-accent: #587368;
  --shop-soft: #cbd8c9;
  --shop-faint: #eef2e7;
  --shop-ink: #3f5048;
  --shop-card-paper: #f1eee1;
  --shop-card-border: #9da996;
  --shop-rule: #66807566;
  --shop-wallet-bg: #dce3c9;
  --shop-wallet-border: #81947a;
  --shop-wallet-ink: #435549;
  border-color: #829488;
  background:
    linear-gradient(
      17deg,
      transparent 0 48%,
      #65796e0b 49% 51%,
      transparent 52%
    ),
    repeating-linear-gradient(
      180deg,
      transparent,
      transparent 27px,
      #65796e12 28px
    ),
    linear-gradient(
      180deg,
      #ece8d7 0%,
      #ddd9c8 100%
    );
  box-shadow:
    0 8px 16px #302b2538,
    inset 0 0 28px #52645a1d;
}

/* SHARED SHOP-TYPE APPLICATION */

.shop-panel-normal .shop-heading,
.shop-panel-rare .shop-heading,
.shop-panel-recycle .shop-heading {
  border-bottom-color: var(--shop-rule);
}

.shop-panel-normal .shop-heading h2,
.shop-panel-rare .shop-heading h2,
.shop-panel-recycle .shop-heading h2 {
  color: var(--shop-ink);
}

.shop-panel-rare .shop-heading h2 {
  text-shadow: 0 1px 0 #fff9e5;
}

.shop-panel-recycle .shop-heading h2 {
  letter-spacing: 0.035em;
}

.shop-panel-normal .shop-wallet,
.shop-panel-rare .shop-wallet,
.shop-panel-recycle .shop-wallet {
  border-color: var(--shop-wallet-border);
  background: var(--shop-wallet-bg);
  color: var(--shop-wallet-ink);
}

.shop-panel-normal .shop-item,
.shop-panel-rare .shop-item,
.shop-panel-recycle .shop-item {
  border-color: var(--shop-card-border);
  background: var(--shop-card-paper);
}

.shop-panel-normal .shop-item {
  box-shadow: 0 3px 7px #4d38271c;
}

.shop-panel-rare .shop-item {
  box-shadow:
    0 4px 9px #6e4d1924,
    inset 0 0 0 1px #fff8d866;
}

.shop-panel-recycle .shop-item {
  border-style: dashed;
  box-shadow: 2px 3px 0 #53645b12;
}

.shop-panel-recycle .shop-item:nth-child(2) {
  transform: rotate(0.22deg);
}

.shop-panel-recycle .shop-item:nth-child(3) {
  transform: rotate(-0.18deg);
}

.shop-panel-normal .shop-item > button,
.shop-panel-rare .shop-item > button,
.shop-panel-recycle .shop-item > button {
  border-color: var(--shop-accent);
}

.shop-panel-normal .reroll-button,
.shop-panel-rare .reroll-button,
.shop-panel-recycle .reroll-button {
  border-color: var(--shop-accent);
  background: var(--shop-faint);
  color: var(--shop-ink);
}

.shop-panel-recycle .shop-item-copy > span {
  color: #718077;
}

.shop-panel-recycle .shop-item-copy strong {
  color: #435048;
}

.shop-panel-recycle .shop-item-copy p {
  color: #657068;
}

.shop-panel-rare .shop-item-copy > span {
  color: #9a7a3e;
}

.shop-panel-rare .shop-item-copy strong {
  color: #4d3d25;
}

.shop-panel-rare .shop-item-copy p {
  color: #756342;
}

.shop-panel .shop-item-sold {
  filter: saturate(0.55);
}

@media (max-width: 650px) {
  .shop-panel-recycle .shop-item:nth-child(2),
  .shop-panel-recycle .shop-item:nth-child(3) {
    transform: none;
  }
}
/* =========================================================
   B-6C CLEAR REWARD BREAKDOWN + MINING COIN CELL FX
   ========================================================= */

.clear-reward-breakdown {
  width: min(100%, 420px);
  margin: 12px auto 16px;
  padding: 12px 14px;
  border: 1px solid rgb(104 84 57 / 28%);
  border-radius: 10px;
  background:
    linear-gradient(
      180deg,
      rgb(255 252 238 / 96%),
      rgb(247 237 211 / 94%)
    );
  box-shadow:
    0 2px 0 rgb(255 255 255 / 62%) inset,
    0 5px 14px rgb(73 54 31 / 9%);
  color: #4f4233;
}

.clear-reward-breakdown-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 7px;
  border-bottom: 1px dashed rgb(105 84 56 / 28%);
}

.clear-reward-breakdown-title span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.clear-reward-breakdown-title strong {
  font-size: 13px;
  white-space: nowrap;
}

.clear-reward-breakdown-list {
  display: grid;
  gap: 5px;
}

.clear-reward-breakdown-list > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 22px;
  font-size: 12px;
}

.clear-reward-breakdown-list em {
  font-style: normal;
  color: rgb(79 66 51 / 78%);
}

.clear-reward-breakdown-list strong {
  min-width: 42px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #3f352a;
}

.mining-coin-fx {
  position: absolute;
  z-index: 36;
  left: 50%;
  top: 42%;
  display: grid;
  place-items: center;
  width: 1px;
  height: 1px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.mining-coin-fx strong {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  z-index: 2;
  left: 50%;
  top: 0;
  padding: 2px 4px;
  border: 1px solid rgb(118 83 25 / 24%);
  border-radius: 999px;
  background: rgb(255 247 205 / 96%);
  box-shadow:
    0 2px 5px rgb(60 43 16 / 20%),
    0 0 8px rgb(255 214 86 / 32%);
  color: #8a5c0d;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  transform: translateX(-50%);
  animation:
    b6c-mining-coin-rise 1000ms
    cubic-bezier(.18,.74,.24,1)
    both;
}

.mining-coin-fx-spark {
  position: absolute;
  z-index: 1;
  width: 13px;
  height: 13px;
  border: 1px solid rgb(235 176 49 / 68%);
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgb(255 222 114 / 14%),
    0 0 8px rgb(255 199 57 / 32%);
  animation:
    b6c-mining-coin-spark 700ms ease-out
    both;
}

.mining-coin-fx-lucky strong {
  background: rgb(240 255 218 / 97%);
  border-color: rgb(111 154 63 / 34%);
  color: #557c22;
  box-shadow:
    0 2px 5px rgb(48 73 24 / 18%),
    0 0 10px rgb(158 213 89 / 38%);
}

.mining-coin-fx-lucky .mining-coin-fx-spark {
  border-color: rgb(133 187 69 / 78%);
  box-shadow:
    0 0 0 3px rgb(172 224 104 / 20%),
    0 0 12px rgb(142 204 72 / 44%);
}

.mining-coin-fx-jackpot strong {
  padding: 2px 5px;
  background: rgb(255 238 168 / 98%);
  border-color: rgb(180 115 18 / 45%);
  color: #9c5600;
  font-size: 10px;
  box-shadow:
    0 2px 6px rgb(74 45 6 / 24%),
    0 0 14px rgb(255 180 30 / 58%);
  animation:
    b6c-mining-jackpot-rise 1050ms
    cubic-bezier(.16,.78,.2,1)
    both;
}

.mining-coin-fx-jackpot .mining-coin-fx-spark {
  width: 17px;
  height: 17px;
  border-width: 2px;
  border-color: rgb(245 155 22 / 86%);
  box-shadow:
    0 0 0 3px rgb(255 214 69 / 20%),
    0 0 11px rgb(255 159 16 / 48%);
}

@keyframes b6c-mining-coin-rise {
  0% {
    opacity: 0;
    transform:
      translate(-50%, 3px)
      scale(.82);
  }

  18% {
    opacity: 1;
    transform:
      translate(-50%, -4px)
      scale(1.04);
  }

  72% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -22px)
      scale(.96);
  }
}

@keyframes b6c-mining-jackpot-rise {
  0% {
    opacity: 0;
    transform:
      translate(-50%, 4px)
      scale(.72);
  }

  20% {
    opacity: 1;
    transform:
      translate(-50%, -5px)
      scale(1.18);
  }

  68% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -35px)
      scale(1.02);
  }
}

@keyframes b6c-mining-coin-spark {
  0% {
    opacity: 0;
    transform: scale(.35);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}


@media (max-width: 720px) {
  .clear-reward-breakdown {
    padding: 10px 11px;
  }

  .clear-reward-breakdown-title {
    gap: 8px;
  }

  .mining-coin-fx strong {
    font-size: 9px;
  }
}

/* B-6D COMPACT CLEAR RESULT V2 */

/*
 * The old result-card remains in JSX so the surrounding layout
 * structure is not modified by a fragile nested-JSX regex.
 * The modal is now the single visible clear result.
 */
.result-card.clear-card {
  display: none;
}

.clear-popup {
  width: min(420px, calc(100vw - 32px));
  max-height: none;
  overflow: visible;
  padding: 22px 24px 18px;
}

.clear-popup h2 {
  margin: 0 0 3px;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  line-height: 1.08;
}

.clear-popup .clear-reward {
  margin: 0 0 10px;
}

.clear-popup .clear-reward-breakdown {
  margin: 0 0 10px;
  padding: 9px 12px;
}

.clear-popup .clear-reward-breakdown-title {
  margin-bottom: 5px;
}

.clear-popup .clear-reward-breakdown-list {
  gap: 2px;
}

.clear-popup .clear-reward-breakdown-list > span {
  min-height: 0;
  padding: 2px 0;
}

.clear-skill-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 4px;
}

.clear-skill-summary > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 5px;
  border: 1px solid rgba(83, 66, 43, 0.2);
  background: rgba(255, 251, 235, 0.56);
  text-align: center;
}

.clear-skill-summary span {
  font-size: 0.7rem;
  line-height: 1.15;
  letter-spacing: 0.03em;
}

.clear-skill-summary strong {
  font-size: 1rem;
  line-height: 1.15;
}

.clear-handling-formula {
  margin: 0 0 9px;
  color: rgba(65, 53, 39, 0.68);
  font-size: 0.7rem;
  line-height: 1.2;
  text-align: center;
}

.clear-popup .clear-continue {
  margin-top: 0;
}

@media (max-width: 560px) {
  .clear-popup {
    width: min(390px, calc(100vw - 20px));
    padding: 18px 15px 15px;
  }

  .clear-skill-summary {
    gap: 4px;
  }

  .clear-skill-summary > div {
    padding: 6px 3px;
  }

  .clear-skill-summary span {
    font-size: 0.64rem;
  }

  .clear-skill-summary strong {
    font-size: 0.94rem;
  }
}


/* B-6E VISUAL IDENTITY AND WORKSPACE */

/* =========================================
   OWNED ITEM TYPE IDENTITY / ICON ALIGNMENT
   ========================================= */

.inventory-item {
  position: relative;
  align-items: center;
}
/*
 * B-6E-5 OWNED ART SHOP PARITY
 *
 * Keep ItemArt at its native Shop geometry (54x54).
 * The complete artwork, including its frame and all internal
 * pseudo-elements/transforms, is scaled as one unit to 36x36.
 *
 * 36 / 54 = 0.666666...
 */

/* =========================================
   OWNED ITEM / RELIC TOOLTIP
   ========================================= */

.inventory-tooltip {
  position: absolute;
  z-index: 40;
  top: 50%;
  right: calc(100% + 10px);
  width: min(230px, 42vw);
  padding: 9px 10px;
  border: 1px solid rgba(98, 88, 72, 0.72);
  border-radius: 3px;
  background:
    linear-gradient(
      180deg,
      #fffaf0 0%,
      #f3ead7 100%
    );
  box-shadow:
    0 7px 18px rgba(55, 44, 31, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  color: #544b3f;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform:
    translate(4px, -50%);
  transition:
    opacity 100ms ease,
    transform 100ms ease,
    visibility 100ms linear;
  text-align: left;
}

.inventory-tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: 8px;
  height: 8px;
  border-top: 1px solid rgba(98, 88, 72, 0.72);
  border-right: 1px solid rgba(98, 88, 72, 0.72);
  background: #f7efdf;
  transform:
    translate(-4px, -50%)
    rotate(45deg);
}

.inventory-item:hover .inventory-tooltip,
.inventory-item:focus-visible .inventory-tooltip,
.inventory-item:focus-within .inventory-tooltip {
  opacity: 1;
  visibility: visible;
  transform:
    translate(0, -50%);
}

.inventory-tooltip-name,
.inventory-tooltip-meta,
.inventory-tooltip-description {
  display: block;
}

.inventory-tooltip-name {
  color: #40382f;
  font-size: 0.72rem;
  line-height: 1.3;
}

.inventory-tooltip-meta {
  margin-top: 3px;
  color: #8b7553;
  font-family: 'Courier New', monospace;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.inventory-tooltip-description {
  margin-top: 6px;
  color: #625848;
  font-size: 0.62rem;
  line-height: 1.55;
  white-space: normal;
}


.owned-art-miniature {
  position: relative;
  width: 36px;
  height: 36px;
  align-self: center;
  justify-self: center;
  overflow: visible;
}

.owned-art-miniature > .item-art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  min-width: 54px;
  min-height: 54px;
  margin: 0;
  transform: translate(-50%, -50%) scale(0.6666667);
  transform-origin: center center;
}


.inventory-item-consumable {
  border-left: 3px solid rgba(72, 108, 132, 0.7);
}

.inventory-item-relic {
  border-left: 3px double rgba(157, 112, 31, 0.92);
  background:
    linear-gradient(
      90deg,
      rgba(211, 172, 80, 0.14),
      rgba(255, 255, 255, 0) 64%
    );
}


.inventory-item-special {
  border-left: 3px solid rgba(101, 80, 124, 0.7);
}

/* =========================
   SHOP ITEM TYPE IDENTITY
   ========================= */

.shop-item {
  position: relative;
}

.shop-item-consumable {
  box-shadow:
    inset 3px 0 0 rgba(72, 108, 132, 0.38);
}

.shop-item-relic {
  border-color: rgba(166, 121, 37, 0.52);
  box-shadow:
    inset 3px 0 0 rgba(166, 121, 37, 0.72),
    0 2px 7px rgba(74, 52, 18, 0.09);
}

.shop-item-relic::after {
  content: 'レリック';
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 17px;
  box-sizing: border-box;
  padding: 2px 6px;
  border: 1px solid rgba(150, 106, 29, 0.52);
  border-radius: 999px;
  background: rgba(255, 248, 216, 0.92);
  color: #75551e;
  font-family: "Yu Gothic",
    YuGothic,
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    sans-serif;
  font-size: 0.54rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
  pointer-events: none;
}

.shop-item-special {
  box-shadow:
    inset 3px 0 0 rgba(102, 80, 124, 0.46);
}

/* B-6E-4 SHOP JAPANESE LABELS */

.shop-rarity-label {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 17px;
  box-sizing: border-box;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(255, 252, 241, 0.94);
  font-family:
    "Yu Gothic",
    YuGothic,
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    sans-serif;
  font-size: 0.54rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
  pointer-events: none;
}

.shop-rarity-common {
  color: #6f746f;
  background: rgba(245, 246, 242, 0.95);
}

.shop-rarity-uncommon {
  color: #4f7b61;
  background: rgba(237, 247, 238, 0.95);
}

.shop-rarity-rare {
  color: #506f96;
  background: rgba(237, 243, 250, 0.96);
}

.shop-rarity-legendary {
  color: #9a6e1f;
  background: rgba(255, 246, 214, 0.97);
}

/* =========================
   RARE SHOP PREMIUM IDENTITY
   ========================= */

.shop-panel-rare {
  position: relative;
  border-color: #a97a27;
  background:
    linear-gradient(
      135deg,
      rgba(255, 251, 229, 0.99),
      rgba(246, 226, 168, 0.98) 48%,
      rgba(255, 249, 222, 0.99)
    );
  box-shadow:
    0 0 0 3px rgba(126, 87, 24, 0.14),
    0 9px 24px rgba(74, 50, 14, 0.2),
    inset 0 0 30px rgba(207, 162, 63, 0.12);
}

.shop-panel-rare .shop-heading {
  border-bottom-color: rgba(151, 105, 28, 0.34);
}

.shop-panel-rare .shop-heading h2 {
  color: #65420d;
  letter-spacing: 0.035em;
}

.shop-panel-rare .shop-wallet {
  border-color: rgba(158, 112, 32, 0.46);
  background: rgba(255, 250, 226, 0.8);
}

.shop-panel-rare .shop-item {
  border-color: rgba(169, 124, 38, 0.58);
  background:
    linear-gradient(
      145deg,
      rgba(255, 254, 242, 0.99),
      rgba(250, 239, 201, 0.97)
    );
}

.shop-panel-rare .shop-item:hover {
  border-color: rgba(145, 96, 17, 0.84);
  box-shadow:
    0 5px 14px rgba(91, 61, 14, 0.19);
}


/* B-6G-5B RARE SHOP GOLDEN AURA */

.shop-panel-rare {
  position: relative;
  isolation: isolate;
  box-shadow:
    0 0 0 2px rgba(174, 123, 31, 0.5),
    0 0 14px rgba(239, 193, 73, 0.52),
    0 0 30px rgba(222, 164, 45, 0.38),
    0 0 52px rgba(200, 137, 24, 0.22),
    0 10px 28px rgba(74, 50, 14, 0.24),
    inset 0 0 30px rgba(224, 180, 69, 0.14);
  animation: rare-shop-aura-pulse 3.4s ease-in-out infinite;
}

.shop-panel-rare::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 8% 18%,
      rgba(255, 244, 174, 0.95) 0 2px,
      rgba(255, 219, 94, 0.48) 2px 4px,
      transparent 5px
    ),
    radial-gradient(
      circle at 92% 22%,
      rgba(255, 249, 202, 0.95) 0 2px,
      rgba(239, 192, 68, 0.5) 2px 4px,
      transparent 5px
    ),
    radial-gradient(
      circle at 5% 78%,
      rgba(255, 247, 189, 0.9) 0 1px,
      rgba(239, 192, 68, 0.44) 2px 4px,
      transparent 5px
    ),
    radial-gradient(
      circle at 95% 72%,
      rgba(255, 246, 183, 0.95) 0 2px,
      rgba(239, 192, 68, 0.5) 2px 4px,
      transparent 5px
    ),
    linear-gradient(
      105deg,
      transparent 0 38%,
      rgba(255, 249, 207, 0.08) 44%,
      rgba(255, 245, 178, 0.22) 50%,
      rgba(255, 249, 207, 0.08) 56%,
      transparent 62% 100%
    );
  background-size:
    auto,
    auto,
    auto,
    auto,
    220% 100%;
  animation:
    rare-shop-sparkle 2.6s ease-in-out infinite,
    rare-shop-shimmer 6s linear infinite;
}


.shop-panel-rare > * {
  position: relative;
  z-index: 1;
}

.shop-panel-rare .shop-heading h2 {
  color: #714807;
  text-shadow:
    0 1px 0 rgba(255, 250, 218, 0.96),
    0 0 7px rgba(225, 170, 46, 0.36),
    0 0 15px rgba(238, 192, 73, 0.2);
  animation: rare-shop-title-glow 3.4s ease-in-out infinite;
}

@keyframes rare-shop-aura-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 2px rgba(174, 123, 31, 0.42),
      0 0 12px rgba(239, 193, 73, 0.42),
      0 0 27px rgba(222, 164, 45, 0.3),
      0 0 46px rgba(200, 137, 24, 0.17),
      0 10px 28px rgba(74, 50, 14, 0.24),
      inset 0 0 30px rgba(224, 180, 69, 0.12);
  }

  50% {
    box-shadow:
      0 0 0 3px rgba(191, 137, 33, 0.6),
      0 0 19px rgba(255, 211, 88, 0.68),
      0 0 39px rgba(230, 175, 51, 0.5),
      0 0 64px rgba(210, 147, 27, 0.3),
      0 10px 30px rgba(74, 50, 14, 0.25),
      inset 0 0 38px rgba(238, 195, 78, 0.18);
  }
}

@keyframes rare-shop-sparkle {
  0%,
  100% {
    opacity: 0.58;
  }

  50% {
    opacity: 1;
  }
}

@keyframes rare-shop-shimmer {
  from {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      130% 0;
  }

  to {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      -130% 0;
  }
}


@keyframes rare-shop-title-glow {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.12);
  }
}

/* =========================
   DESKTOP WORKSPACE GEOMETRY
   ========================= */

/*
 * The page structure is:
 *
 * page-shell
 *   game-shell
 *     desk
 *   ad-reserve
 *
 * Therefore game-shell, not desk, is the direct page-shell child.
 */

@media (min-width: 1560px) {
  .page-shell {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
  }

  .page-shell > .game-shell {
    width: min(1320px, calc(100vw - 48px));
    margin-left: auto;
    margin-right: auto;
  }

  .page-shell > .ad-reserve {
    position: absolute;
    top: 0;
    left: calc(50% + 674px);
    width: clamp(145px, 10vw, 180px);
    min-width: 0;
    box-sizing: border-box;
  }
}

@media (min-width: 1051px) and (max-width: 1559px) {
  .page-shell {
    grid-template-columns:
      minmax(0, 1180px)
      minmax(145px, 180px);
    gap: 14px;
    justify-content: center;
  }

  .page-shell > .game-shell,
  .page-shell > .ad-reserve {
    min-width: 0;
  }
}

@media (max-width: 1050px) {
  .page-shell > .ad-reserve {
    position: static;
    width: auto;
  }
}


/* B-6E-2 OWNED INVENTORY PANELS */
/* B-6E-3 OWNED PANEL CONSOLIDATED */

.memo-card-left {
  margin-top: 14px;
}

.owned-relics-card {
  margin-top: 12px;
}

.owned-items-card .inventory-list,
.owned-relics-card .inventory-list {
  gap: 7px;
}

.owned-items-card .inventory-item,
.owned-relics-card .inventory-item {
  min-height: 46px;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 7px;
  padding: 5px 6px;
  align-items: center;
}

.owned-items-card .inventory-item:has(button) {
  grid-template-columns:
    38px
    minmax(0, 1fr)
    auto;
}


.owned-items-card .inventory-item > div,
.owned-relics-card .inventory-item > div {
  min-width: 0;
}

.owned-items-card .inventory-item strong,
.owned-relics-card .inventory-item strong {
  display: block;
  font-size: 0.68rem;
  line-height: 1.25;
}

.owned-items-card .inventory-item small,
.owned-relics-card .inventory-item small {
  display: block;
  margin-top: 2px;
  font-size: 0.6rem;
  line-height: 1.2;
}

.owned-relics-card .inventory-item-relic {
  border-left-color: rgba(174, 130, 37, 0.68);
  background:
    linear-gradient(
      90deg,
      rgba(218, 183, 94, 0.12),
      rgba(255, 255, 255, 0)
    );
}

.owned-empty {
  min-height: 54px;
}

@media (max-width: 800px) {
  .memo-card-left {
    margin-top: 10px;
  }

  .owned-relics-card {
    margin-top: 10px;
  }
}

/* B-6D-5 CLEAR POPUP CANONICAL CRISP RENDERING */

/*
 * Canonical clear-result layer.
 *
 * B-6D-2 / B-6D-3 / B-6D-4 were intentionally consolidated
 * into this single block so the result sheet no longer depends
 * on a stack of conflicting visual overrides.
 *
 * Important:
 * - no backdrop blur
 * - no popup rotation
 * - no popup animation
 * - no filter / backdrop-filter
 * - no decorative tape / backing-sheet pseudo elements
 * - compact, non-scrolling result geometry
 */

.clear-overlay {
  padding: 18px;
  background: rgb(48 38 29 / 46%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.clear-popup {
  position: relative;
  isolation: auto;

  width: min(420px, calc(100vw - 32px));
  max-height: none;
  overflow: visible;

  padding: 22px 24px 18px;

  color: #493d2f;

  border: 1px solid rgba(103, 82, 51, 0.28);
  border-radius: 2px;

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 27px,
      rgba(113, 91, 58, 0.045) 28px,
      transparent 29px
    ),
    #f8f1dc;

  box-shadow:
    0 14px 28px rgba(45, 31, 20, 0.22),
    0 2px 4px rgba(45, 31, 20, 0.14);

  text-align: center;

  transform: none;
  translate: none;
  rotate: none;
  scale: none;

  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  animation: none;
  transition: none;

  opacity: 1;

  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.clear-popup::before,
.clear-popup::after {
  content: none;
  display: none;
}

.clear-popup,
.clear-popup * {
  text-shadow: none;
}

.clear-popup h2 {
  position: relative;

  margin: 0 0 13px;

  color: #2e2924;

  /*
   * Exact visual family used by .game-header h1 / Mine Survivor.
   */
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(1.48rem, 3vw, 1.92rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;

  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;

  text-align: center;

  opacity: 1;
  transform: none;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none;
}

.clear-popup h2::before,
.clear-popup h2::after {
  content: none;
  display: none;
}

.clear-popup .clear-reward {
  display: none;
}

.clear-popup .clear-reward-breakdown {
  position: relative;

  margin: 0 0 10px;
  padding: 9px 11px 8px;

  border: 1px solid rgba(101, 80, 49, 0.18);
  border-radius: 2px;

  background: rgba(255, 252, 235, 0.52);

  box-shadow: none;

  transform: none;
  filter: none;
}

.clear-popup .clear-reward-breakdown-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  margin: 0;
  padding: 0 0 8px;

  border-bottom: 1px solid rgba(94, 73, 43, 0.12);

  color: #514330;
}

.clear-popup .clear-reward-breakdown-title span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.clear-popup .clear-reward-breakdown-title strong {
  white-space: nowrap;
}

.clear-popup .clear-reward-total {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;

  color: #403421;

  font-family:
    "Courier New",
    Courier,
    monospace;

  font-size: 1rem;
  font-weight: 900;
  line-height: 1;

  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.clear-popup .clear-reward-total .coin-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  margin: 0;
}

.clear-popup .clear-reward-total > span {
  color: inherit;

  font-family:
    "Courier New",
    Courier,
    monospace;

  font-size: 1rem;
  font-weight: 900;
  line-height: 1;

  font-variant-numeric: tabular-nums;
}


.clear-popup .clear-reward-label {
  color: #514330;

  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.2;
}

.clear-popup .clear-reward-detail-label {
  margin: 8px 0 3px;

  color: rgba(81, 67, 48, 0.72);

  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.2;

  letter-spacing: 0.04em;
}

.clear-popup .clear-reward-row-amount {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;

  min-width: 52px;

  color: #40362b;

  font-family:
    "Courier New",
    Courier,
    monospace;

  font-weight: 800;
  line-height: 1;

  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.clear-popup .clear-reward-row-amount .coin-icon {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  margin: 0;
}

.clear-popup .clear-reward-row-amount > span {
  display: inline-flex;
  align-items: baseline;
}
.clear-popup .clear-reward-breakdown-list {
  display: grid;
  gap: 2px;
}

.clear-popup .clear-reward-breakdown-list > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;

  min-height: 0;
  padding: 2px 0;
}

.clear-popup .clear-reward-breakdown-list em {
  min-width: 0;

  color: rgba(73, 61, 47, 0.78);

  font-size: 0.7rem;
  font-style: normal;
  line-height: 1.2;

  text-align: left;
}

.clear-popup .clear-reward-breakdown-list strong {
  flex: 0 0 auto;

  color: #493d2f;

  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.2;

  text-align: right;
}


.clear-handling-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 3px 5px;

  margin: 0 0 10px;
  padding: 0;

  color: rgba(65, 53, 39, 0.68);

  font-family:
    "Yu Gothic",
    YuGothic,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Noto Sans JP",
    system-ui,
    sans-serif;

  font-size: 0.67rem;
  font-weight: 500;
  line-height: 1.45;

  text-align: center;
}

.clear-handling-formula span {
  color: rgba(65, 53, 39, 0.68);
}

.clear-handling-formula strong {
  color: #40362b;

  font-family:
    "Courier New",
    Courier,
    monospace;

  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;

  font-variant-numeric: tabular-nums;
}

.clear-handling-formula b {
  color: rgba(65, 53, 39, 0.68);

  font-family:
    "Courier New",
    Courier,
    monospace;

  font-size: 0.67rem;
  font-weight: 700;
  line-height: 1;
}

.clear-popup .clear-continue {
  margin-top: 0;

  border-color: #4e453a;

  background: #4e453a;

  color: #fff8e8;

  box-shadow:
    0 2px 0 rgba(58, 49, 39, 0.18),
    0 5px 10px rgba(58, 49, 39, 0.1);

  text-shadow: none;
  transform: none;
  filter: none;
}

@media (max-width: 560px) {
  .clear-overlay {
    padding: 9px;
  }

  .clear-popup {
    width: min(390px, calc(100vw - 20px));
    padding: 18px 15px 15px;
  }


}

/* B-6G-3a COLLAPSIBLE OWNED LISTS */

.inventory-expand-button {
  width: 100%;
  margin-top: 9px;
  padding: 7px 8px;
  border: 1px dashed rgba(98, 88, 72, 0.46);
  border-radius: 3px;
  background: rgba(255, 250, 240, 0.56);
  color: #625848;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.inventory-expand-button:hover,
.inventory-expand-button:focus-visible {
  border-style: solid;
  background: rgba(255, 250, 240, 0.92);
}

.inventory-expand-button:focus-visible {
  outline: 2px solid rgba(98, 88, 72, 0.32);
  outline-offset: 2px;
}

/* B-6G-3a BOARD CHALLENGE STRIP */

.board-challenge-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 7px 0 11px;
}

.board-challenge-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 5px 9px;
  box-sizing: border-box;
  border: 1px solid rgba(112, 96, 70, 0.34);
  border-radius: 2px;
  background: rgba(255, 249, 233, 0.72);
}

.board-challenge-item strong {
  flex: 0 0 auto;
  color: #574d40;
  font-family: 'Courier New', monospace;
  font-size: 0.68rem;
  line-height: 1.2;
}

.board-challenge-item span {
  color: #71685b;
  font-size: 0.62rem;
  line-height: 1.3;
}

.board-challenge-danger {
  border-color: rgba(151, 62, 48, 0.5);
  background: rgba(151, 62, 48, 0.08);
}

.board-challenge-danger strong {
  color: #8f392f;
}

/* ==========================================================
   B-6G OVERTIME COMPLETE CONFETTI
   ========================================================== */

.overtime-result-overlay {
  overflow: hidden;
}

.overtime-result-popup {
  position: relative;
  isolation: isolate;
}

.overtime-result-popup > :not(.overtime-confetti) {
  position: relative;
  z-index: 2;
}

.overtime-result-kicker {
  margin: 0 0 8px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  opacity: 0.72;
}

.overtime-result-reward {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 10px;
  font-size: 1.18rem;
}

.overtime-result-message {
  margin: 0 0 18px;
  line-height: 1.65;
}

.overtime-confetti {
  position: absolute;
  inset: -120px -90px -80px;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.overtime-confetti-piece {
  --confetti-x: 50%;
  --confetti-drift: 0px;
  --confetti-delay: 0s;
  --confetti-duration: 2.4s;
  --confetti-rotate: 720deg;

  position: absolute;
  top: -30px;
  left: var(--confetti-x);
  width: 9px;
  height: 18px;
  border-radius: 2px;
  background: #f1c84b;
  opacity: 0;
  transform:
    translate3d(0, -24px, 0)
    rotate(0deg);
  animation:
    overtime-confetti-fall
    var(--confetti-duration)
    cubic-bezier(0.18, 0.72, 0.32, 1)
    var(--confetti-delay)
    both;
}

.overtime-confetti-piece:nth-child(5n + 1) {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f6dc78;
}

.overtime-confetti-piece:nth-child(5n + 2) {
  width: 8px;
  height: 20px;
  background: #ffffff;
}

.overtime-confetti-piece:nth-child(5n + 3) {
  width: 11px;
  height: 15px;
  background: #d9a82f;
}

.overtime-confetti-piece:nth-child(5n + 4) {
  width: 7px;
  height: 17px;
  background: #ffeaa0;
}

.overtime-confetti-piece:nth-child(5n) {
  width: 13px;
  height: 8px;
  background: #e8bd42;
}

.overtime-confetti-piece:nth-child(6n + 1) {
  --confetti-drift: -75px;
}

.overtime-confetti-piece:nth-child(6n + 2) {
  --confetti-drift: 55px;
}

.overtime-confetti-piece:nth-child(6n + 3) {
  --confetti-drift: -38px;
}

.overtime-confetti-piece:nth-child(6n + 4) {
  --confetti-drift: 82px;
}

.overtime-confetti-piece:nth-child(6n + 5) {
  --confetti-drift: -58px;
}

.overtime-confetti-piece:nth-child(6n) {
  --confetti-drift: 35px;
}

.overtime-confetti-piece-1  { --confetti-x: 2%;  --confetti-delay: 0.00s; --confetti-duration: 2.25s; --confetti-rotate: 620deg; }
.overtime-confetti-piece-2  { --confetti-x: 5%;  --confetti-delay: 0.10s; --confetti-duration: 2.55s; --confetti-rotate: 780deg; }
.overtime-confetti-piece-3  { --confetti-x: 8%;  --confetti-delay: 0.03s; --confetti-duration: 2.38s; --confetti-rotate: 540deg; }
.overtime-confetti-piece-4  { --confetti-x: 11%; --confetti-delay: 0.18s; --confetti-duration: 2.70s; --confetti-rotate: 840deg; }
.overtime-confetti-piece-5  { --confetti-x: 14%; --confetti-delay: 0.06s; --confetti-duration: 2.44s; --confetti-rotate: 660deg; }
.overtime-confetti-piece-6  { --confetti-x: 17%; --confetti-delay: 0.24s; --confetti-duration: 2.62s; --confetti-rotate: 740deg; }
.overtime-confetti-piece-7  { --confetti-x: 20%; --confetti-delay: 0.01s; --confetti-duration: 2.30s; --confetti-rotate: 580deg; }
.overtime-confetti-piece-8  { --confetti-x: 23%; --confetti-delay: 0.14s; --confetti-duration: 2.58s; --confetti-rotate: 820deg; }
.overtime-confetti-piece-9  { --confetti-x: 26%; --confetti-delay: 0.05s; --confetti-duration: 2.48s; --confetti-rotate: 700deg; }
.overtime-confetti-piece-10 { --confetti-x: 29%; --confetti-delay: 0.22s; --confetti-duration: 2.72s; --confetti-rotate: 860deg; }
.overtime-confetti-piece-11 { --confetti-x: 32%; --confetti-delay: 0.08s; --confetti-duration: 2.36s; --confetti-rotate: 640deg; }
.overtime-confetti-piece-12 { --confetti-x: 35%; --confetti-delay: 0.28s; --confetti-duration: 2.64s; --confetti-rotate: 760deg; }
.overtime-confetti-piece-13 { --confetti-x: 38%; --confetti-delay: 0.02s; --confetti-duration: 2.42s; --confetti-rotate: 600deg; }
.overtime-confetti-piece-14 { --confetti-x: 41%; --confetti-delay: 0.16s; --confetti-duration: 2.76s; --confetti-rotate: 880deg; }
.overtime-confetti-piece-15 { --confetti-x: 44%; --confetti-delay: 0.07s; --confetti-duration: 2.50s; --confetti-rotate: 720deg; }
.overtime-confetti-piece-16 { --confetti-x: 47%; --confetti-delay: 0.25s; --confetti-duration: 2.68s; --confetti-rotate: 800deg; }
.overtime-confetti-piece-17 { --confetti-x: 50%; --confetti-delay: 0.00s; --confetti-duration: 2.32s; --confetti-rotate: 560deg; }
.overtime-confetti-piece-18 { --confetti-x: 53%; --confetti-delay: 0.12s; --confetti-duration: 2.60s; --confetti-rotate: 840deg; }
.overtime-confetti-piece-19 { --confetti-x: 56%; --confetti-delay: 0.04s; --confetti-duration: 2.46s; --confetti-rotate: 680deg; }
.overtime-confetti-piece-20 { --confetti-x: 59%; --confetti-delay: 0.20s; --confetti-duration: 2.74s; --confetti-rotate: 900deg; }
.overtime-confetti-piece-21 { --confetti-x: 62%; --confetti-delay: 0.09s; --confetti-duration: 2.40s; --confetti-rotate: 620deg; }
.overtime-confetti-piece-22 { --confetti-x: 65%; --confetti-delay: 0.27s; --confetti-duration: 2.66s; --confetti-rotate: 780deg; }
.overtime-confetti-piece-23 { --confetti-x: 68%; --confetti-delay: 0.01s; --confetti-duration: 2.34s; --confetti-rotate: 580deg; }
.overtime-confetti-piece-24 { --confetti-x: 71%; --confetti-delay: 0.15s; --confetti-duration: 2.56s; --confetti-rotate: 860deg; }
.overtime-confetti-piece-25 { --confetti-x: 74%; --confetti-delay: 0.05s; --confetti-duration: 2.80s; --confetti-rotate: 920deg; }
.overtime-confetti-piece-26 { --confetti-x: 77%; --confetti-delay: 0.23s; --confetti-duration: 2.70s; --confetti-rotate: 740deg; }
.overtime-confetti-piece-27 { --confetti-x: 80%; --confetti-delay: 0.08s; --confetti-duration: 2.82s; --confetti-rotate: 940deg; }
.overtime-confetti-piece-28 { --confetti-x: 83%; --confetti-delay: 0.29s; --confetti-duration: 2.74s; --confetti-rotate: 820deg; }
.overtime-confetti-piece-29 { --confetti-x: 86%; --confetti-delay: 0.03s; --confetti-duration: 2.52s; --confetti-rotate: 660deg; }
.overtime-confetti-piece-30 { --confetti-x: 89%; --confetti-delay: 0.17s; --confetti-duration: 2.78s; --confetti-rotate: 900deg; }
.overtime-confetti-piece-31 { --confetti-x: 92%; --confetti-delay: 0.06s; --confetti-duration: 2.48s; --confetti-rotate: 700deg; }
.overtime-confetti-piece-32 { --confetti-x: 95%; --confetti-delay: 0.26s; --confetti-duration: 2.68s; --confetti-rotate: 860deg; }
.overtime-confetti-piece-33 { --confetti-x: 7%;  --confetti-delay: 0.34s; --confetti-duration: 2.84s; --confetti-rotate: 960deg; }
.overtime-confetti-piece-34 { --confetti-x: 36%; --confetti-delay: 0.38s; --confetti-duration: 2.72s; --confetti-rotate: 780deg; }
.overtime-confetti-piece-35 { --confetti-x: 64%; --confetti-delay: 0.32s; --confetti-duration: 2.88s; --confetti-rotate: 980deg; }
.overtime-confetti-piece-36 { --confetti-x: 93%; --confetti-delay: 0.36s; --confetti-duration: 2.76s; --confetti-rotate: 840deg; }

@keyframes overtime-confetti-fall {
  0% {
    opacity: 0;
    transform:
      translate3d(0, -24px, 0)
      rotate(0deg);
  }

  8% {
    opacity: 1;
  }

  74% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate3d(
        var(--confetti-drift),
        470px,
        0
      )
      rotate(var(--confetti-rotate));
  }
}

/* Run result: reuse the existing board clear popup and typography. */
.run-result-popup { width: min(640px, calc(100% - 8px)); }
.run-result-close { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; color: #746b5c; font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.run-result-popup .run-share-image { display: block; width: 100%; height: auto; margin-top: 12px; border: 1px solid #cbbd9c; }
.run-share-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0; }
.run-share-actions a, .run-share-actions button { padding: 7px 10px; border: 1px solid #b9aa8d; border-radius: 3px; background: #f4edda; color: #40382f; font: inherit; font-size: .7rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.run-share-actions a:hover, .run-share-actions button:hover { background: #e9dec5; }
.run-share-actions button:disabled { opacity: .55; cursor: wait; }
.run-share-actions a:focus-visible { outline: 3px solid #5179a6; outline-offset: 2px; }
.run-share-status { margin-top: 8px; font-size: .7rem; color: #746b5c; }
.run-share-status textarea { display: block; box-sizing: border-box; width: 100%; margin-top: 6px; font: inherit; background: #fff8e6; border: 1px solid #cbbd9c; }
.run-result-summary { font-family: 'Courier New', monospace; font-weight: 900; }
.run-result-artwork { position: fixed; left: -10000px; top: 0; display: flex; pointer-events: none; }
.run-result-artwork > span { display: block; width: 58px; height: 58px; padding: 2px; box-sizing: border-box; }
.run-result-fallback-relics { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }

/* Beginner practice uses the same paper popup, cells and item illustrations. */
.tutorial-overlay { position: fixed; z-index: 120; padding: 24px; }
.tutorial-popup { width: min(520px, calc(100% - 8px)); max-height: calc(100dvh - 48px); box-sizing: border-box; }
.tutorial-popup h2 { margin: 10px 18px 14px; font-size: 1.25rem; }
.tutorial-popup h2:focus { outline: none; }
.tutorial-popup p { font-size: .86rem; line-height: 1.7; }
.tutorial-text { text-align: left; }
.tutorial-hint { padding: 10px 12px; text-align: left; background: #eee5cf; border-left: 3px solid #b6a17b; }
.tutorial-feedback { color: #3d634b; font-weight: 700; text-align: left; }
.tutorial-board { margin: 16px auto; }

.tutorial-cell.tutorial-target { box-shadow: inset 0 0 0 4px #b1493d; }
.tutorial-cell.tutorial-neighbour { box-shadow: inset 0 0 0 4px #b1493d; }
.tutorial-cell:focus-visible { outline: 2px solid #40382f; outline-offset: 2px; }
.tutorial-choices { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.tutorial-choices > span { flex-basis: 100%; font-size: .85rem; }
.tutorial-choices > button { flex: 1 1 0; min-width: 0; margin: 0; }
.tutorial-choices .clear-continue { width: auto; }
.tutorial-secondary, .tutorial-help-button { border: 1px solid #b9aa8d; border-radius: 3px; background: #f4edda; color: #40382f; padding: 9px 14px; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.tutorial-secondary:hover, .tutorial-help-button:hover { background: #e9dec5; }
.tutorial-hide { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: .8rem; color: #746b5c; }
.tutorial-hide input { width: 17px; height: 17px; accent-color: #4e453a; }
.tutorial-item { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0; font-size: .78rem; text-align: left; }
.tutorial-popup .tutorial-progress { margin: 16px 0 0; font-size: .68rem; color: #8a795f; }
.tutorial-return { position: sticky; top: 0; z-index: 2; display: block; margin: 0 0 8px auto; box-shadow: 0 2px 6px rgb(48 38 29 / 12%); }
.game-header { position: relative; }
.tutorial-help-button { position: absolute; top: -16px; right: 0; padding: 5px 10px; font-size: .7rem; }

.run-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.run-toolbar button { font: inherit; font-size: 13px; padding: 7px 12px; }
.run-toolbar button:disabled { opacity: .55; cursor: default; }
.run-mode-label { font-weight: 700; margin-right: auto; }
.run-save-notice { font-size: 12px; color: #615b4e; }
.mine-cell.daily-first-cell { outline: 3px solid #c88a28; outline-offset: -3px; box-shadow: inset 0 0 0 5px #f4dc97; }

.game-header { min-height: 72px; padding-bottom: 12px; }
.tutorial-question { background: #eee5cf; border: 1px solid #cbbd9c; padding: 12px; margin: 12px 0; text-align: left; font-size: .86rem; }
.tutorial-question .tutorial-choices { margin-top: 10px; }
.tutorial-cell.tutorial-reference { box-shadow: inset 0 0 0 4px #b1493d; }

.tutorial-scan-label { font: 700 10px sans-serif; }
.run-result-popup > .clear-continue { margin-top: 8px; }

.tutorial-choices > button { min-height: 40px; }

.tutorial-popup-practice { height: min(600px, calc(100dvh - 48px)); display: grid; grid-template-rows: 72px 50px 190px minmax(0, 1fr) 22px; gap: 8px; overflow: hidden; }
.tutorial-popup-practice .tutorial-heading h2 { margin: 0; line-height: 1.3; }
.tutorial-popup-practice .tutorial-return { margin: 0 0 8px auto; }
.tutorial-instruction { min-height: 0; overflow-y: auto; }
.tutorial-popup .tutorial-text { margin: 0; }
.tutorial-instruction .tutorial-question { margin: 8px 0 0; padding: 10px 12px; }
.tutorial-board-stage { display: flex; justify-content: center; align-items: flex-start; }
.tutorial-board-stage .tutorial-board { margin: 0; }
.tutorial-details { min-height: 0; overflow-y: auto; }
.tutorial-details > :first-child { margin-top: 0; }
.tutorial-popup-practice .tutorial-progress { margin: 0; align-self: end; }
@media (max-height: 650px) { .tutorial-popup-practice { overflow-y: auto; grid-template-rows: 72px 50px 190px minmax(190px, 1fr) 22px; } }

.run-save-policy { flex-basis: 100%; font-size: 12px; color: #615b4e; }

.tutorial-cell.tutorial-information { box-shadow: inset 0 0 0 4px #315d9a; }
.tutorial-cell.tutorial-safe { box-shadow: inset 0 0 0 4px #4e886c; }
.tutorial-cell.tutorial-mine { box-shadow: inset 0 0 0 4px #b1493d; }
.tutorial-details .tutorial-question { margin: 0 0 10px; }

/* Raise the whole effect-bearing cell above its siblings, including hovered cells. */
.mine-board { isolation: isolate; }
.mine-cell.mine-cell-effect { z-index: 35; overflow: visible; }

/* A compact paper strip keeps run controls in the existing desk palette. */
.run-toolbar { position: relative; gap: 10px 16px; margin-bottom: 14px; padding: 8px 12px; border: 1px solid #d3c5a6; border-radius: 3px; background: var(--paper); box-shadow: 0 3px 8px #4a342112; }
.run-mode-tabs { display: flex; align-items: center; gap: 4px; }
.run-toolbar button, .run-info summary { border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--muted-ink); font: inherit; font-size: .75rem; font-weight: 700; line-height: 1.2; padding: 7px 10px; cursor: pointer; }
.run-mode-tabs button { min-width: 72px; }
.run-mode-tabs button[aria-pressed="true"] { opacity: 1; color: #40392e; background: #f4e8bd; border-color: #c9b88c; box-shadow: 0 2px 3px #4a342115; }
.run-toolbar button:not(:disabled):hover, .run-info summary:hover { color: var(--ink); background: #e9dec5; }
.run-toolbar button:focus-visible, .run-info summary:focus-visible { outline: 2px solid #817057; outline-offset: 2px; }
.run-daily-label { color: var(--muted-ink); font-size: .75rem; }
.run-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 6px; min-width: 0; margin-left: auto; }
.run-toolbar .run-control { color: #514638; border-color: #cbbd9c; background: #fff8e6; box-shadow: 0 1px 2px #4a342110; }
.run-save-notice { max-width: 360px; margin-right: 6px; font-size: .7rem; color: var(--muted-ink); }
.run-info summary { list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.run-info summary::-webkit-details-marker { display: none; }
.run-info-paper { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(350px, 100%); padding: 14px 16px; border: 1px solid #cbbd9c; border-radius: 3px; background: #fff8e6; box-shadow: 0 5px 16px #4a34212b; text-align: left; }
.run-info-paper p { margin: 0 0 10px; font-size: .78rem; line-height: 1.65; color: #514638; }
.run-info-paper p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .run-toolbar-actions { flex-basis: 100%; justify-content: flex-start; margin-left: 0; } .run-save-notice { flex-basis: 100%; max-width: none; margin-bottom: 3px; } }

/* Run controls sit directly on the wood, without a separate paper panel. */
.desk { grid-template-rows: auto 1fr; padding-top: 18px; }
.desk > .run-toolbar { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.desk .run-toolbar button, .desk .run-info summary, .desk .run-save-notice, .desk .run-daily-label { color: #fff4df; }
.desk .run-mode-tabs button[aria-pressed="true"], .desk .run-toolbar .run-control { color: #514638; }
.desk .run-mode-tabs button:not(:disabled):hover, .desk .run-info summary:hover { color: #fff8e8; background: #ffffff16; }
.desk .run-toolbar button:focus-visible, .desk .run-info summary:focus-visible { outline-color: #fff0c6; }
.desk .run-save-notice { text-shadow: 0 1px 2px #3b241d80; }
@media (max-width: 800px) { .desk { grid-template-rows: auto; } }

.inventory-tooltip-guidance { display: block; margin-top: 6px; font-size: .62rem; line-height: 1.5; color: #726045; }
.inventory-tooltip-unavailable { display: block; margin-top: 7px; padding-top: 6px; border-top: 1px solid #d4c9af; font-size: .62rem; line-height: 1.5; color: #9b493c; }
.shop-item-copy .shop-item-timing { display: block; margin-top: 4px; font-size: .6rem; color: #80705b; }

/* Quiet navigation outside the game desk; links keep the current run open. */
.site-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;padding:22px 8px 10px;font-size:12px;line-height:1.8;color:var(--muted-ink)}
.site-footer a{color:inherit;text-underline-offset:3px}
.site-footer a:hover{color:var(--ink)}
.site-footer a:focus-visible{outline:3px solid #315d9a;outline-offset:4px}

/* Paired ad reserves: preserve game width on smaller screens. */
.page-shell{display:grid;grid-template-columns:minmax(0,1320px);gap:24px;justify-content:center;padding:24px}
.page-shell > .game-shell{grid-column:1;grid-row:1;width:100%;margin:0}
.page-shell > .ad-reserve{position:static;top:auto;left:auto;width:160px;min-width:0;min-height:600px;margin:150px 0 0;align-self:start;justify-self:center;padding:16px;text-align:center;align-content:center;gap:12px}
.page-shell > .ad-reserve-left{grid-column:1;grid-row:2;transform:translateX(-92px)}
.page-shell > .ad-reserve-right{grid-column:1;grid-row:2;transform:translateX(92px)}
@media(min-width:1700px){
.page-shell{grid-template-columns:160px minmax(0,1320px) 160px;column-gap:150px}
.page-shell > .game-shell{grid-column:2;grid-row:1}
.page-shell > .ad-reserve-left{grid-column:1;grid-row:1;transform:none}
.page-shell > .ad-reserve-right{grid-column:3;grid-row:1;transform:none}
}
@media(max-width:400px){.page-shell > .ad-reserve{width:130px}.page-shell > .ad-reserve-left{transform:translateX(-70px)}.page-shell > .ad-reserve-right{transform:translateX(70px)}}

.language-picker{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#f5e9cb}
.language-picker select{max-width:128px;min-height:30px;background:#f4edda;color:#2d2a26;border:1px solid #b8a98d;border-radius:3px;padding:3px 6px;font:inherit}
.language-picker select:focus-visible{outline:3px solid #5179a6;outline-offset:2px}
html:not([lang="ja"]) .inventory-item strong{font-size:10px;overflow-wrap:anywhere}
html:not([lang="ja"]) .inventory-item button{white-space:normal}
html:not([lang="ja"]) .shop-item-name{overflow-wrap:anywhere}

/* New provisional artwork follows the existing 54px CSS icon system. */
.quality-study-book{position:absolute;width:35px;height:42px;left:10px;top:6px;transform:rotate(-7deg);border-radius:3px 5px 5px 3px;box-shadow:2px 3px 2px #3b2f2944;border:2px solid #6c6150;background:#e8dfc8;overflow:hidden}.quality-study-spine{position:absolute;inset:0 auto 0 0;width:7px;background:#74634b}.quality-study-cover{position:absolute;inset:3px 2px 3px 8px;background:#718c82;border:1px solid #4b655d}.quality-study-cover strong{position:absolute;bottom:3px;left:1px;right:1px;font:700 10px system-ui;text-align:center;color:#fff6d9}.quality-study-grid{position:absolute;top:4px;left:3px;width:14px;height:14px;background:repeating-linear-gradient(0deg,transparent 0 4px,#fff6d970 4px 5px),repeating-linear-gradient(90deg,transparent 0 4px,#fff6d970 4px 5px)}.quality-study-book-drone-level3-book .quality-study-cover{background:#557693}.quality-study-book-advanced-drone-book .quality-study-cover{background:#765b85}.quality-expansion-kit{position:absolute;inset:8px}.quality-expansion-crate{position:absolute;inset:8px 4px 2px;background:#b49568;border:3px solid #715b3d;box-shadow:inset 0 3px #d5bd8e}.quality-expansion-tool{position:absolute;right:-1px;top:0;font:700 28px system-ui;color:#6b7f83;text-shadow:1px 1px #ede9de}.quality-expired-stamp{position:absolute;right:2px;bottom:2px;border:2px solid #a14b39;border-radius:50%;color:#a14b39;font:700 18px system-ui;line-height:18px;width:22px;text-align:center;z-index:3;transform:rotate(15deg)}.item-art-dangerous-mining-contract{filter:sepia(.18)}

.quality-growth-badge{position:absolute;right:-2px;bottom:-2px;z-index:4;padding:1px 3px;background:#eee2bd;color:#4a3a2b;border:1px solid #9d8457;border-radius:2px;font:700 9px system-ui;line-height:12px}