/* The same forest green and aged brass as the round bar, in a compact tray. */
.shop {
  --shop-brass:#a08e58;
  --shop-ink:#12271f;
  --shop-height:132px;
  --shop-actions-width:154px;
  --gold:#e6d7a5;
  align-self:center; width:min(1180px,calc(100% - 48px));
  padding:30px 0 0; border:0; background:transparent; box-shadow:none;
}
.shop::before { display:none; }
/* Keep the arena geometry steady while replacing the entire shop for scouting. */
.shop[data-scouting="true"] .shop-inner { visibility:hidden; pointer-events:none; }
.shop[data-scouting="true"] .sell-drop-zone { display:none; }
.return-to-arena {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:7;
  display:grid; place-items:center; width:196px; height:54px; padding:5px;
  border:2px solid #ae995f; border-radius:2px; color:#e8d59d;
  background:radial-gradient(ellipse at 50% 100%,#39664d88,transparent 75%),linear-gradient(#263e30,#142c23);
  box-shadow:inset 0 0 0 2px #0b1b15,inset 0 0 0 3px #c8b57855,0 2px 12px #07150f66;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.return-to-arena[hidden] { display:none; }
.return-to-arena svg { width:38px; height:38px; filter:drop-shadow(0 1px 2px #071a12); }
.zaap-stone,.zaap-base { fill:#a79761; stroke:#e4cf93; stroke-width:1.2; stroke-linejoin:round; }
.zaap-runes { fill:none; stroke:#304a37; stroke-width:1.5; }
.zaap-portal { fill:none; stroke:#9bdac1; stroke-width:2; stroke-linecap:round; }
.return-to-arena:hover { border-color:#e0c989; background:radial-gradient(ellipse at 50% 100%,#4b8c6688,transparent 75%),linear-gradient(#314f3b,#1b392b); box-shadow:inset 0 0 0 2px #0b1b15,inset 0 0 0 3px #dec78977,0 0 14px #b9cd8e22; }
.return-to-arena:focus-visible { outline:2px solid #efdfa6; outline-offset:3px; }
.return-to-arena:active { transform:translate(-50%,1px); }
.shop-inner {
  position:relative; max-width:none; margin:0; padding:7px;
  border:2px solid var(--shop-brass); border-bottom:0;
  background:radial-gradient(ellipse at 50% 0,#354b37 0,transparent 65%),linear-gradient(#1e352a,#12271f);
  box-shadow:0 -4px 20px #0d1b153b,inset 0 0 0 2px #0b1b15,inset 0 4px 0 #dfc98824;
}
.shop-inner::after {
  content:''; pointer-events:none; position:absolute; inset:4px;
  border:1px solid #c6b57626; border-bottom:0;
}
.shop-toolbar { position:absolute; top:-31px; left:-2px; right:-2px; height:32px; display:block; z-index:1; }
.level-panel {
  position:absolute; top:0; left:0; width:calc(var(--shop-actions-width) + 32px); height:32px;
  display:block; padding:2px 2px 0; background:linear-gradient(110deg,#8d7e4c,#c0ac6d 65%,#7f7248);
  clip-path:polygon(0 0,calc(100% - 23px) 0,100% 100%,0 100%);
}
.level-face {
  height:100%; padding:4px 25px 3px 10px;
  background:linear-gradient(105deg,#21382c,#172d25);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 100%,0 100%);
}
.level-info { display:flex; width:100%; align-items:center; justify-content:space-between; font-size:12px; line-height:16px; color:#d4dbc3; }
.level-info strong { font-size:15px; font-weight:650; margin-left:1px; color:#e9ddaf; }
.xp-label { font-size:9px; color:#aebfa6; font-variant-numeric:tabular-nums; }
.xp-track { height:3px; width:100%; margin-top:3px; border-radius:0; background:#0c1f18; box-shadow:0 1px #b4ce8b20; }
#xp-fill { height:100%; background:linear-gradient(90deg,#5e9a78,#b4dba0); box-shadow:0 0 5px #a7d78744; }
.wallet {
  top:0; left:50%; transform:translateX(-50%); width:128px; height:32px;
  padding:0 22px; justify-content:center; gap:7px; isolation:isolate;
  background:linear-gradient(105deg,#7f7044,#c7b578 50%,#7f7044);
  clip-path:polygon(23px 0,calc(100% - 23px) 0,100% 100%,0 100%);
}
.wallet::before {
  content:''; position:absolute; z-index:-1; inset:2px 3px 0;
  background:radial-gradient(ellipse at 50% 0,#3c5141,transparent),#193027;
  clip-path:polygon(21px 0,calc(100% - 21px) 0,100% 100%,0 100%);
}
.wallet svg { width:19px; height:19px; flex:none; filter:drop-shadow(0 1px 2px #0005); }
#kamas-count { font-size:20px; min-width:0; font-weight:650; color:#eee0ae; }
.streak-indicator {
  position:absolute; left:calc(50% + 65px); top:5px; height:26px; min-width:48px;
  display:flex; align-items:center; justify-content:center; gap:5px; padding:0 9px 0 6px;
  color:#83968a; border:1px solid #8d7e4c; border-bottom:0; border-radius:7px 7px 0 0;
  background:linear-gradient(#263f30,#142b23); font-variant-numeric:tabular-nums;
  font-size:16px; font-weight:650; cursor:default;
}
.streak-indicator svg { width:17px; height:20px; fill:currentColor; flex:none; }
.streak-indicator[data-kind=win] { color:#e5b86e; }
.streak-indicator[data-kind=loss] { color:#8cbfca; }
.streak-loss-mark { display:none; fill:none; stroke:#19352b; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
[data-kind=loss] .streak-loss-mark { display:block; }
.streak-indicator:focus-visible { outline:1px solid #dfcf95; outline-offset:2px; }
.shop-content { display:grid; grid-template-columns:var(--shop-actions-width) minmax(0,1fr); gap:8px; }
.shop-actions { display:grid; grid-template-columns:1fr; grid-template-rows:1fr 1fr; gap:6px; height:var(--shop-height); }
.shop-action {
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) 32px; grid-template-rows:auto auto;
  align-content:center; column-gap:8px; row-gap:3px; padding:8px 11px;
  border:1px solid #877b4d; border-radius:0; color:#e0e3c9;
  background:linear-gradient(132deg,#ffffff04 0 63%,#0c1e1938 63%),linear-gradient(#2b4133,#1a3026);
  box-shadow:inset 0 0 0 2px #0c201880,inset 0 3px 0 #d0c4870c;
}
.shop-action .action-icon { grid-column:2; grid-row:1 / 3; width:30px; height:30px; justify-self:end; color:#c9b876; filter:drop-shadow(0 2px 1px #0004); }
.shop-action .action-label { grid-column:1; grid-row:1; font-size:14px; font-weight:550; line-height:17px; white-space:nowrap; }
.shop-action .action-cost { grid-column:1; grid-row:2; margin:0; justify-self:start; gap:4px; color:#d9c78b; font-size:11px; line-height:13px; }
.shop-action .action-cost svg { width:12px; height:12px; }
.xp-action { background:linear-gradient(132deg,#b3e6bc05 0 63%,#0b262538 63%),linear-gradient(#29463b,#183329); border-color:#667f60; }
.xp-action .action-icon { color:#a7cfa0; }
.shop-action:hover:not(:disabled) { transform:none; border-color:#d9c37e; background:linear-gradient(#3a5140,#263e2d); box-shadow:inset 0 0 0 2px #172c2080,0 0 12px #c5b16b18; }
.xp-action:hover:not(:disabled) { border-color:#bad29c; background:linear-gradient(#3b5b47,#244532); }
.shop-action:active:not(:disabled) { transform:translateY(1px); }
.shop-action:disabled,.xp-action:disabled { opacity:.45; }
.shop-action:focus-visible { outline:2px solid #e3d49e; outline-offset:-3px; }
.shop-cards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; padding:0; margin:0; overflow:visible; }
.shop-card {
  height:var(--shop-height); border:1px solid #8b9b76; border-radius:0;
  background:#14291f; box-shadow:inset 0 0 0 1px #0e2219,0 2px 5px #07181060;
}
.shop-card::before { height:2px; background:linear-gradient(90deg,#768e65,#b1bb8e,#768e65); opacity:.75; }
.tofu-card .card-art { background:radial-gradient(ellipse at 50% 35%,#a4ac60 0,#637c47 42%,#294936 100%); }
.card-art { background:radial-gradient(ellipse at 50% 35%,#a5b99d 0,#657e66 42%,#294a38 100%); }
.bouftou-card .card-art { background:radial-gradient(ellipse at 50% 35%,#a5b99d 0,#657e66 42%,#294a38 100%); }
.card-art::after { background:linear-gradient(0deg,#15302199,transparent 45%); box-shadow:inset 0 0 20px #0a1c1a26; }
.card-art img { transform:scale(1.08); }
.card-info { min-height:27px; padding:5px 8px; background:linear-gradient(110deg,#324b35,#1d3829); border-top:1px solid #adbc7f50; box-shadow:inset 0 -1px #c9cc9130; }
.card-copy { min-width:0; }
.card-copy strong { font-size:13px; font-weight:550; letter-spacing:0; color:#e7e8d3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-cost { gap:4px; font-size:13px; color:#e3d39a; }
.card-cost svg { width:13px; height:13px; }
.shop-card:hover:not(:disabled) { transform:translateY(-2px); border-color:#e5d38e; box-shadow:0 0 0 1px #d8bc6a70,0 3px 12px #091b1566; }
.shop-card:hover:not(:disabled) .card-art img { transform:scale(1.13); }
.shop-card:focus-visible { outline:2px solid #f1dda0; outline-offset:-3px; }
.sold-card { background:radial-gradient(ellipse at center,#354d3326,transparent),#10261d; border-color:#536e4755; box-shadow:inset 0 0 15px #07180e50; }
.sold-card:hover { transform:none; border-color:#536e4755; box-shadow:inset 0 0 15px #07180e50; }
/* Only the perimeter lights up; artwork and card panels retain their colors. */
@property --shop-orbit {
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}
.shop-card.owned-monster {
  --rim-rgb:207 222 216;
  --rim-speed:9s;
  --rim-opacity:.28;
  --rim-width:1px;
}
.shop-card.completes-merge {
  --rim-rgb:224 235 246;
  --rim-speed:4.8s;
  --rim-opacity:.9;
  --rim-width:2px;
  z-index:2; border-color:#8b9b76;
  box-shadow:inset 0 0 0 1px #0e2219,0 2px 5px #07181060;
}
.shop-card[data-upgrade-stars="3"] {
  --rim-rgb:249 215 138;
  --rim-speed:4.2s;
  --rim-opacity:1;
}
.shop-card.owned-monster::after {
  content:''; position:absolute; z-index:2; inset:0;
  padding:var(--rim-width); border-radius:inherit; pointer-events:none;
  background:conic-gradient(from var(--shop-orbit),transparent 0deg 220deg,rgb(var(--rim-rgb) / .08) 255deg,rgb(var(--rim-rgb) / .4) 290deg,rgb(var(--rim-rgb) / 1) 320deg,rgb(var(--rim-rgb) / .9) 330deg,transparent 350deg 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:var(--rim-opacity);
  animation:shop-border-orbit var(--rim-speed) linear infinite;
}
.shop-card.completes-merge:hover:not(:disabled) {
  border-color:rgb(var(--rim-rgb) / .65);
  box-shadow:inset 0 0 0 1px #0e2219,0 3px 8px #091b1566;
}
.merge-hint {
  top:6px; left:0; right:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none;
  text-align:center; font-size:18px; line-height:22px; letter-spacing:3px;
  color:#e1ebf3; text-shadow:0 1px 2px #172630,0 0 5px #dcebf255;
  pointer-events:none;
}
.shop-card[data-upgrade-stars="3"] .merge-hint {
  color:#f2d58c; text-shadow:0 1px 2px #3e321a,0 0 6px #ebc86666;
}
@keyframes shop-border-orbit { to { --shop-orbit:360deg; } }
@media (prefers-reduced-motion:reduce) {
  .shop-card.owned-monster::after { animation:none; --shop-orbit:45deg; }
}
.sell-drop-zone { inset:37px 9px 7px; width:calc(100% - 18px); border:1px solid #c8b778; border-radius:0; gap:5px; background:radial-gradient(ellipse at center,#43533aef,#152f24f7 80%); box-shadow:inset 0 0 0 3px #182a1e,inset 0 0 40px #bdab5520; }
.sell-eyebrow { font-size:9px; letter-spacing:1px; color:#cbd3a8; }
.sell-monster { font-size:18px; }
.sell-refund { font-size:24px; color:#f0d58f; }
.sell-hover .sell-drop-zone,.sell-drop-zone:hover,.sell-drop-zone:focus-visible { border:1px solid #f3da8e; background:radial-gradient(ellipse at center,#5c673cf5,#1d3b29f7 80%); box-shadow:inset 0 0 0 3px #30432b,0 0 20px #d4bc6b26; }
@media (max-width:1000px) {
  .shop { --shop-actions-width:128px; --shop-height:121px; width:calc(100% - 24px); }
  .shop-inner { padding:6px; }
  .shop-content { gap:6px; }
  .shop-action { padding:7px 9px; column-gap:4px; grid-template-columns:minmax(0,1fr) 25px; }
  .shop-action .action-label { font-size:12px; }
  .shop-action .action-icon { width:25px; height:25px; }
  .shop-cards { gap:5px; }
  .card-copy strong { font-size:12px; }
  .card-info { padding:5px 6px; }
  .card-cost { font-size:12px; gap:3px; }
}
@media (max-width:650px) {
  .shop { --shop-height:117px; width:calc(100% - 16px); }
  .shop-content { display:flex; flex-direction:column; gap:6px; }
  .shop-actions { grid-template-columns:1fr 1fr; grid-template-rows:38px; height:38px; }
  .shop-action { grid-template-columns:1fr auto 22px; grid-template-rows:1fr; align-items:center; padding:5px 9px; column-gap:8px; }
  .shop-action .action-label { grid-column:1; grid-row:1; }
  .shop-action .action-cost { grid-column:2; grid-row:1; }
  .shop-action .action-icon { grid-column:3; grid-row:1; width:22px; height:22px; }
  .level-panel { width:140px; }
  .level-face { padding-left:8px; padding-right:24px; }
  .wallet { left:auto; right:50px; transform:none; width:100px; }
  .streak-indicator { left:auto; right:0; min-width:46px; }
  .card-info { padding:5px; min-height:26px; }
  .card-copy strong { font-size:10px; }
  .card-cost { font-size:10px; gap:2px; }
  .card-cost svg { width:10px; height:10px; }
  .shop-cards { gap:4px; }
  .shop-card { flex:initial; }
}
@media (max-width:420px) {
  .shop-cards { display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:#697f51 #14291f; }
  .shop-card { flex:0 0 106px; scroll-snap-align:start; }
  .shop-card:hover:not(:disabled) { transform:none; }
  .card-copy strong { font-size:11px; }
}
@media (max-height:650px) and (min-width:851px) {
  .shop { --shop-height:112px; }
}