/* General shop entry (GAME_SPEC §4.17): the green "+" on the coin capsule and the
   "coming soon" shop screen (content preview mode only until the shop opens).
   Real elements with ids (web-ui-style.md §6): no pseudo-elements, no forced
   priority on visual properties. */

.resource-plus {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  margin-right: -6px;
  padding: 0;
  border: 2px solid #0f6b14;
  border-radius: 50%;
  background: linear-gradient(180deg, #7fe043 0%, #2aa313 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 0 #0f6b14;
  cursor: pointer;
}

.resource-plus-mark {
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 #0f6b14;
}

.resource-plus:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 0 #0f6b14;
}

@media (max-width: 420px) {
  .resource-plus { width: 22px; height: 22px; margin-right: -7px; }
  .resource-plus-mark { font-size: 16px; }
}

.shop-card {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 16px 18px 18px;
  border: 3px solid var(--cs-gold);
  border-radius: var(--cs-radius);
  background: linear-gradient(180deg, #fffdf5, var(--cs-cream));
  box-shadow: var(--cs-shadow);
  color: var(--cs-brown);
  text-align: center;
}

.shop-card-art {
  width: min(120px, 32vw);
  height: auto;
}

.shop-card-title {
  margin: 0;
  color: #4a2a10;
  font-size: clamp(22px, 6vw, 28px);
  line-height: 1.2;
}

.shop-card-body {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.shop-card-body:empty {
  display: none;
}

/* Website notice (2.5.2): one slim row, the line on the left and the store button on the right. */
.shop-card[data-variant="app"] {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: start;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  text-align: left;
}

.shop-card[data-variant="app"] .shop-card-art {
  display: none;
}

.shop-card[data-variant="app"] .shop-card-title {
  font-size: 15px;
}

.shop-card[data-variant="app"] .shop-get-app {
  max-width: 50vw;
  min-height: 40px;
  margin-top: 0;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
}

/* The app download shortcut under the in-app notice (website only, js/shopUi.js). */
.shop-get-app {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  margin-top: 8px;
  padding: 8px 22px;
  border: 2px solid #0f6b14;
  border-radius: 16px;
  background: linear-gradient(180deg, #8ee84f 0%, #3dbb1d 55%, #23950f 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 3px 0 #0f6b14;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  text-decoration: none;
}

.shop-get-app:focus-visible {
  outline: 3px solid var(--cs-blue-top);
  outline-offset: 2px;
}

.shop-get-app:active {
  transform: translateY(1px);
}

/* ---------- Shop screen (PRD_SHOP_ADS_v0.3 §8, js/shopUi.js; owner mockup 2026-10-29) ----------
   The view keeps the World / Collection backdrop (owner decision 2026-10-29: no shop picture).
   Layout: hero (wooden sign with the title, the detective cat, subtitle), five tabs,
   then one scroll box: notices, the BEST package card, one row of pack cards, free rewards, restore.
   Layout values live on the containers; cards only carry their look. */
/* Sections hidden by the screen's state stay hidden even though their class sets a display. */
.shop-scroll [hidden] {
  display: none;
}

.shop-hero {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  width: 100%;
  max-width: var(--cs-content-width);
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.shop-sign {
  position: relative;
  grid-area: 1 / 1;
  align-self: end;
  width: min(62%, 300px);
  /* The row ends at the board's bottom edge; the vines below it hang over the next rows (owner
     2026-10-31). The art never takes a tap. */
  margin: 0 0 calc(min(62%, 300px) * -92 / 720) 2%;
  pointer-events: none;
}

.shop-sign-art {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 6px rgba(30, 14, 2, 0.45));
}

/* The title sits on the sign's empty board (the board's middle is about 56% down the art). */
.shop-sign-title {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 56%;
  margin: 0;
  transform: translateY(-50%);
  color: #ffd84a;
  font-size: clamp(30px, 10vw, 46px);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

/* Same row as the sign; the cat's drawn bottom level with the board's bottom edge, not the vines under
   it (owner 2026-10-31). The board edge is 92/720 of the sign's width above the sign's box bottom, the
   cat art leaves 15/400 of its width clear under it. The cat is 34% wide (was 38%) so its hat stays
   level with the sign's top, about 12px under the top bar. */
.shop-hero-cat {
  position: relative;
  grid-area: 1 / 1;
  align-self: end;
  justify-self: end;
  margin: 0 -6px calc(min(34%, 170px) * -15 / 400) 0;
  width: min(34%, 170px);
  height: auto;
  filter: drop-shadow(0 4px 6px rgba(30, 14, 2, 0.4));
  pointer-events: none;
}

.shop-subtitle {
  position: relative;
  z-index: 1;
  grid-row: 2;
  max-width: 100%;
  margin: 8px 0 0;
  padding: 5px 14px;
  border: 2px solid rgba(255, 216, 120, 0.7);
  border-radius: 999px;
  background: rgba(70, 36, 10, 0.82);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  box-sizing: border-box;
}

/* Five tabs in one row (aria-current marks the open one). */
.shop-tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  max-width: var(--cs-content-width);
  margin: 0 auto 8px;
  padding: 0 10px;
  box-sizing: border-box;
}

.shop-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 52px;
  padding: 4px 2px 5px;
  border: 2px solid #d9a441;
  border-radius: 14px 14px 10px 10px;
  background: linear-gradient(180deg, #fffaf0, #f3e2bd);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #a8742a;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
}

.shop-tab[aria-current="page"] {
  border-color: #c98a12;
  background: linear-gradient(180deg, #fff3a8, #ffc93a);
  box-shadow: inset 0 1px 0 #fffbe0, 0 3px 0 #a8650a;
}

.shop-tab:focus-visible {
  outline: 3px solid var(--cs-blue-top);
  outline-offset: 2px;
}

.shop-tab-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* Words stay whole (js/shopUi.js fitTabs shrinks a word wider than its tab); Korean keeps its
   word breaks from the screen rule, scripts without spaces break between characters. */
.shop-tab-label {
  max-width: 100%;
  padding-bottom: 2px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: normal;
}

.shop-scroll {
  display: grid;
  align-content: start;
  gap: 12px;
  width: 100%;
  max-width: var(--cs-content-width);
  margin-inline: auto;
  padding: 0 12px 24px;
  box-sizing: border-box;
}

.shop-status {
  min-height: 0;
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  text-shadow: 0 1px 0 var(--cs-brown), 0 0 3px var(--cs-brown);
}

.shop-status:empty {
  display: none;
}

.shop-section {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 3px solid var(--cs-gold);
  border-radius: var(--cs-radius);
  background: linear-gradient(180deg, #fffdf5, var(--cs-cream));
  box-shadow: var(--cs-shadow);
  color: var(--cs-brown);
}

.shop-section-title {
  margin: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1.25;
}

/* The drawn sign starts about 12px under the real bottom of the fixed top bar (owner 2026-10-31): the
   sign art's top 35/474 is near-clear (about 10px at 390px wide, 8px at 320px), so the box starts 2px
   under the bar. --lobby-bar-bottom is measured by js/hybridLobby.js. Top padding only: the shop keeps the
   shared view background. */
#screen-shop.hybrid-lobby-view {
  padding-top: calc(var(--lobby-bar-bottom, 62px) + 2px);
}

/* Korean breaks between words (as on World and Collection). */
html:lang(ko) #screen-shop {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ---- BEST package card: name, line and contents on the left, gift and price on the right ---- */
.shop-best {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 8px;
  row-gap: 6px;
  margin-top: 6px;
  padding: 28px 12px 12px;
  border: 3px solid var(--cs-gold);
  border-radius: var(--cs-radius);
  background: linear-gradient(180deg, #fffdf6, #fbefd2);
  box-shadow: inset 0 2px 0 #fff, var(--cs-shadow);
  color: var(--cs-brown);
}

.shop-best-ribbon {
  position: absolute;
  top: -8px;
  left: -6px;
  padding: 4px 14px 5px 10px;
  border-radius: 6px 14px 14px 6px;
  background: linear-gradient(180deg, #ff6a3d, #e2341b);
  box-shadow: 0 2px 0 #9b1d0c;
  transform: rotate(-8deg);
}

.shop-best-ribbon-label {
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.shop-best-bubble {
  position: absolute;
  top: -10px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a7a, #e8344a 70%);
  box-shadow: 0 3px 6px rgba(120, 10, 20, 0.35);
  transform: rotate(12deg);
}

.shop-best-bubble-label {
  padding: 0 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

.shop-best-title {
  grid-column: 1;
  margin: 0;
  color: #3d2410;
  font-size: clamp(18px, 5.2vw, 22px);
  font-weight: 900;
  line-height: 1.2;
}

.shop-best-desc {
  grid-column: 1;
  margin: 0;
  color: var(--cs-brown-soft);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.shop-best-body,
.shop-best-row {
  display: contents;
}

.shop-best-tiles {
  grid-column: 1;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(240, 214, 160, 0.45);
}

.shop-best-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  padding: 6px 2px;
  border-radius: 10px;
  background: #fffaf0;
  box-shadow: inset 0 -2px 0 rgba(200, 160, 90, 0.35);
}

.shop-best-tile-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.shop-best-tile-name {
  max-width: 100%;
  color: var(--cs-brown-soft);
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
  text-align: center;
}

.shop-best-tile-amount {
  color: #3d2410;
  font-size: 16px;
  font-weight: 900;
}

.shop-best-side {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: end;
  display: grid;
  justify-items: center;
  gap: 4px;
}

.shop-best-art {
  width: 100%;
  max-width: 160px;
  height: auto;
  filter: drop-shadow(0 4px 6px rgba(60, 30, 4, 0.3));
}

.shop-best-side .shop-buy {
  width: 100%;
}

/* ---- Pack cards: one row of three (coins, hints, hearts) ---- */
.shop-goods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.shop-goods-group,
.shop-goods-list {
  display: contents;
}

.shop-product[data-shop-tab="coins"] { order: 1; }
.shop-product[data-shop-tab="hints"] { order: 2; }
.shop-product[data-shop-tab="play"] { order: 3; }

.shop-product {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  justify-items: center;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 8px 6px;
  border: 3px solid var(--cs-gold);
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdf6, #fbefd2);
  box-shadow: inset 0 2px 0 #fff, var(--cs-shadow);
  color: var(--cs-brown);
}

.shop-product-name {
  max-width: 100%;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

.shop-product-art {
  width: 100%;
  max-width: 120px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.shop-product-amount {
  color: #3d2410;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.shop-product .shop-buy {
  width: 100%;
  min-width: 0;
  padding: 6px 3px;
}

/* Every pressable control is at least 48 x 48 CSS px (PRD §8.3). */
.shop-free-button,
.shop-buy,
.shop-restore,
.shop-retry {
  min-width: 48px;
  min-height: 48px;
}

.shop-buy {
  min-width: 96px;
  max-width: 200px;
  padding: 6px 10px;
  border: 2px solid #0f6b14;
  border-radius: 16px;
  background: linear-gradient(180deg, #8ee84f 0%, #3dbb1d 55%, #23950f 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 3px 0 #0f6b14;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

/* The store's own price text (currency and tax notes vary): two lines at most; js/shopUi.js lowers
   the size for long strings, never below 12px. */
.shop-price {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.2;
  overflow-wrap: anywhere;
  font-size: 18px;
}

/* ---- Free rewards ---- */
.shop-free {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 18px 12px 12px;
  border: 3px solid var(--cs-gold);
  border-radius: var(--cs-radius);
  background: linear-gradient(180deg, #fffdf6, #fbefd2);
  box-shadow: inset 0 2px 0 #fff, var(--cs-shadow);
  color: var(--cs-brown);
}

.shop-free-head {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  margin: -34px 0 0 -18px;
  padding: 4px 18px 4px 6px;
  border: 2px solid var(--cs-blue-edge);
  border-radius: 8px 18px 18px 8px;
  background: linear-gradient(180deg, var(--cs-blue-top), var(--cs-blue-bottom));
  box-shadow: 0 3px 0 var(--cs-blue-edge);
}

.shop-free-head-icon {
  width: 36px;
  height: 36px;
  margin: -8px 0 -6px;
  object-fit: contain;
}

.shop-free-title {
  margin: 0;
  color: #fff;
  font-size: 19px;
  line-height: 1.2;
}

.shop-free-count {
  color: #dff0ff;
  font-size: 13px;
  font-weight: 800;
}

.shop-free-count:empty {
  display: none;
}

.shop-free-buttons {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.shop-free-note {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.shop-free-note:empty {
  display: none;
}

.shop-free-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 10px;
  border: 2px solid #b9d7f2;
  border-radius: 14px;
  background: linear-gradient(180deg, #f4faff, #ddeefc);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #a7c4de;
  color: #3d2410;
  font-size: 15px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

#btn-shop-ad-hints {
  border-color: #f0d79a;
  background: linear-gradient(180deg, #fffbee, #fbefcf);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #dcc184;
}

.shop-free-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.shop-free-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.shop-free-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 38px;
  border-radius: 12px;
}

.shop-free-play--blue {
  border: 2px solid #062f7a;
  background: linear-gradient(180deg, #2f7ff0, #0b4bb8);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 3px 0 #062f7a;
}

.shop-free-play--gold {
  border: 2px solid #a8650a;
  background: linear-gradient(180deg, #ffd25a, #f2a114);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 3px 0 #a8650a;
}

.shop-free-play-icon {
  width: 22px;
  height: 22px;
}

.shop-holds-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 14px;
  font-weight: 700;
}

.shop-restore {
  justify-self: center;
  padding: 8px 20px;
  border: 2px solid var(--cs-gold);
  border-radius: 16px;
  background: var(--cs-cream);
  box-shadow: 0 3px 0 var(--cs-gold-lo);
  color: var(--cs-brown);
  font-weight: 800;
  cursor: pointer;
}

.shop-free-button:focus-visible,
.shop-buy:focus-visible,
.shop-restore:focus-visible,
.shop-retry:focus-visible {
  outline: 3px solid var(--cs-blue-top);
  outline-offset: 2px;
}

.shop-free-button:disabled,
.shop-free-button[aria-disabled="true"],
.shop-buy:disabled,
.shop-buy[aria-disabled="true"],
.shop-restore:disabled {
  cursor: default;
  filter: grayscale(0.6);
  opacity: 0.6;
}

.shop-free-button:active,
.shop-buy:active,
.shop-tab:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .shop-free-button:active,
  .shop-buy:active,
  .shop-tab:active {
    transform: none;
  }
}

@media (max-width: 360px) {
  .shop-best-art { max-width: 120px; }
  .shop-tab { padding-inline: 1px; }
  .shop-tab-label { font-size: 11px; }
  /* The three BEST tiles are ~35px wide at 320: a word like "Hearts" stays whole (smaller type, tighter
     tile gaps) instead of breaking into "Hear/ts". */
  .shop-best-tiles { gap: 3px; padding: 4px; }
  .shop-best-tile { padding-inline: 0; }
  /* English only: longer words in other languages (Corazones, Podpowiedzi) still break rather than overflow. */
  .shop-best-tile-name:lang(en) { font-size: 10px; word-break: keep-all; overflow-wrap: normal; hyphens: none; }
}

/* Out-of-hints popup: the rewarded-ad option under the coin purchase (js/game.js watchRefillAd). */
.refill-ad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
}

.refill-ad-icon {
  width: 24px;
  height: 24px;
}

/* ---------- Shop | Dream Shop switch and app-only items (2.5.2 design §8, §0-1 8) ----------
   The switch's look is the shared .shop-modes / .shop-mode in css/dreamShop.css; here only its place
   in the shop column. Where the store does not sell (the website), the paid items stay listed with a
   greyed "in the app" button that explains where to buy (js/shopUi.js). */
/* The side not shown (js/shopUi.js sets hidden) stays hidden although its class sets a display. */
#screen-shop > [hidden] {
  display: none;
}

.shop-modes {
  flex: 0 0 auto;
  padding: 0 12px;
  box-sizing: border-box;
}

.shop-product[data-sale="app"] .shop-product-art,
.shop-best[data-sale="app"] .shop-best-art,
.shop-best[data-sale="app"] .shop-best-tile-icon {
  filter: grayscale(0.7);
}

.shop-buy[aria-disabled="true"],
.shop-free-button[aria-disabled="true"] {
  cursor: pointer;
}