/* 飾り棚・保管庫・品の札 */
/* 読み込む順番に意味がある（後のファイルが前の規則を上書きする）。並べ方は tools/css/regroup.mjs が決める */
.rel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--wall);
  border: 1px solid var(--wall-hi);
}
.rel .nm {
  font-size: 15px;
}
.rel .ds {
  font-size: 12px;
  color: var(--dim);
  line-height: 1.5;
}
.rel .rk {
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid currentColor;
  min-width: 2.5em;
  text-align: center;
}
.rel.unk {
  grid-template-columns: auto 1fr;
}
.rel.unk .q {
  font-size: 22px;
  width: 2.5em;
  text-align: center;
}
.rel.r0 .rk {
  color: var(--dim);
}
.rel.r1 .rk {
  color: var(--moss);
}
.rel.r2 .rk {
  color: var(--sky);
}
.rel.r3 {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(242, 200, 91, 0.25);
}
.rel.r3 .rk {
  color: var(--gold);
}
.rel .val {
  display: grid;
  gap: 4px;
  justify-items: end;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.shelf-h {
  margin-top: 16px;
  color: var(--torch);
  font-size: 15px;
}
.rel.r3:not(.unk) {
  animation: glow 1.6s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .rel.r3 {
    animation: none;
  }
}
.rel .uk {
  width: 2.5em;
  display: grid;
  place-items: center;
}
.rel .uk .spr {
  width: 40px;
  height: 40px;
}
.rel.just {
  animation: relin 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.rel.just.r2 {
  animation:
    relin 0.45s cubic-bezier(0.2, 1.4, 0.4, 1),
    relf2 0.9s ease-out;
}
.rel.just.r3,
.rel.just.r4 {
  animation:
    relin 0.55s cubic-bezier(0.2, 1.4, 0.4, 1),
    relf3 1.3s ease-out;
}
.rel.unk.next {
  animation: relnext 0.45s ease-in-out infinite alternate;
}
.rel.unk.charge {
  border-color: var(--gold);
  box-shadow: 0 0 22px rgba(242, 200, 91, 0.8);
  animation: relcharge 0.08s linear infinite;
}
.rel.r0 .rk {
  color: #a9a18d;
}
.rel.r1 .rk {
  color: var(--moss);
}
.rel.r2 .rk {
  color: #c68cf2;
}
.rel.r2 {
  border-color: #6a4a8a;
}
.bk .rk {
  font-size: 11px;
  color: var(--dim);
}
.bk.r1 .rk {
  color: var(--moss);
}
.bk.r2 .rk {
  color: #c68cf2;
}
.bk.r3 .rk {
  color: var(--gold);
}
.rel .fx {
  font-size: 12px;
  color: var(--sky);
  margin-top: 2px;
}
.rel .fx.on {
  color: var(--moss);
}
.fxs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 10px;
}
.fxs {
  margin-bottom: 4px;
}
/* 飾り棚：木の棚板に品が乗る */
.cab {
  position: relative;
  margin-top: 8px;
  padding: 10px 10px 0;
  border: 6px solid #2a1a0c;
  border-bottom-width: 4px;
  background: radial-gradient(ellipse at 50% 0, rgba(232, 163, 61, 0.28), transparent 65%),
    repeating-linear-gradient(90deg, #3b2717 0 18px, #35220f 18px 20px);
  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.75),
    0 6px 16px rgba(0, 0, 0, 0.5);
}
.srow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  height: 104px;
  align-items: end;
  padding-inline: 4px;
}
.plank {
  height: 12px;
  margin: 0 -10px 16px;
  background: linear-gradient(#9a6834, #74481f 45%, #4d2e12);
  box-shadow:
    0 4px 0 #1f1308,
    0 10px 12px rgba(0, 0, 0, 0.55);
}
.srow + .plank:last-child {
  margin-bottom: 0;
}
.slot {
  background: none;
  border: 0;
  padding: 0 0 2px;
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 5px;
  min-width: 0;
  cursor: pointer;
}
.slot .spr {
  width: 58px;
  height: 58px;
  filter: drop-shadow(0 5px 2px rgba(0, 0, 0, 0.65));
}
.slot.r3 .spr {
  filter: drop-shadow(0 0 8px rgba(242, 200, 91, 0.8)) drop-shadow(0 5px 2px rgba(0, 0, 0, 0.6));
}
.slot.r2 .spr {
  filter: drop-shadow(0 0 6px rgba(198, 140, 242, 0.6)) drop-shadow(0 5px 2px rgba(0, 0, 0, 0.6));
}
.slot .plate {
  font-size: 9px;
  line-height: 1.5;
  padding: 0 5px;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: linear-gradient(#d8b25a, #9a7428);
  color: #2a1a08;
  box-shadow: 0 1px 0 #5a4010;
}
.slot.sel .plate {
  background: linear-gradient(#ffe29a, #e8a33d);
}
.slot.sel .spr {
  transform: translateY(-4px);
}
.slot.empty {
  height: 72px;
  align-self: end;
  margin-bottom: 2px;
  border: 1px dashed rgba(232, 163, 61, 0.18);
}
.sdet {
  margin-top: 10px;
}
.slot.lock {
  height: 72px;
  align-self: end;
  margin-bottom: 2px;
  border: 1px dashed rgba(151, 143, 124, 0.25);
  display: grid;
  place-items: center;
  opacity: 0.5;
  font-size: 18px;
  filter: grayscale(1);
}
.rel.withimg {
  grid-template-columns: 56px 1fr auto;
}
.rel .rimg {
  display: grid;
  justify-items: center;
  gap: 3px;
}
.rel .rimg .spr {
  width: 48px;
  height: 48px;
}
.rel .rimg .rk {
  font-size: 10px;
  padding: 0 4px;
  min-width: 0;
}
/* 棚を低く、下の文と重ならないように */
.cab {
  margin-bottom: 18px;
}
.srow {
  height: 84px;
}
.slot .spr {
  width: 48px;
  height: 48px;
}
.slot.empty {
  height: 56px;
}
.srow2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--wall-hi);
  font-size: 14px;
}
.srow2 span small {
  display: block;
  font-size: 11px;
  color: var(--dim);
  margin-top: 2px;
}
.srow2 .btn {
  flex: none;
  padding: 8px 14px;
  font-size: 13px;
}
.srow2.danger span {
  color: #ff9a8c;
}
.slot .life {
  font-size: 8px;
  line-height: 1.3;
  color: #cfc6b0;
  background: rgba(0, 0, 0, 0.5);
  padding: 0 4px;
}
.rel.r4 {
  border-color: var(--gold);
  box-shadow: 0 0 18px rgba(242, 200, 91, 0.35);
}
.rel.r4 .rk,
.bk.r4 .rk {
  color: var(--gold);
}
.srow {
  height: 92px;
}
.tcab {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 8px 0 14px;
  padding: 10px 8px;
  border: 4px solid #6a4a14;
  background: radial-gradient(ellipse at 50% 0, rgba(242, 200, 91, 0.3), transparent 70%),
    linear-gradient(#2a1d0c, #1a1208);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.7);
}
.tslot .plate {
  font-size: 9px;
  line-height: 1.5;
  padding: 0 4px;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: linear-gradient(#d8b25a, #9a7428);
  color: #2a1a08;
}
.tslot:not(.on) .plate {
  background: #3a3020;
  color: #8a7a5a;
}
.srow2 a.btn {
  flex: none;
  padding: 8px 14px;
  font-size: 13px;
}
.store {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
}
.lvb {
  font-size: 12px;
  color: var(--moss);
}
.dlg .bdet {
  margin: 0;
  border: 0;
  background: none;
  padding: 0;
}
.life-line {
  font-size: 12.5px;
  color: var(--ink);
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.appr .life-line {
  margin-top: 2px;
}
/* 飾り棚：ドットで描いた木（奥の板・棚板・外枠・空きの目印） */
.cab {
  border: 6px solid transparent !important;
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAUUlEQVR4nGMU4WH5z0AAsIAIPyMprJK3nn1iuPHiC0QRCBy79QZDkQgPG8IkGLjx4hsjjK0hwQV3BhMh9xCtCMU6ZCswFIF8AXMkNsBITDgBAPcuEzTGi7K4AAAAAElFTkSuQmCC") 3 fill / 6px !important;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAN0lEQVR4nGN00hL7/+P3XwYY+PLjD4MILzsDuhgTA5GAiWSFyFbhVcjBykxlq7EBZOfgVYjsHAD9bRNpg/x3LwAAAABJRU5ErkJggg==") 0 0/20px 16px !important;
  box-shadow: none !important;
  image-rendering: pixelated;
}
.plank {
  height: 16px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAYAAAA4GpVBAAAAL0lEQVR4nGNYUWD1n+nesw8MTJ++/WJgevL2GwODCA/LfwYGBoZpTAwMDLtALAYAXmwNKiUq2a8AAAAASUVORK5CYII=") 0 0/2px 16px repeat-x !important;
  box-shadow: none !important;
  image-rendering: pixelated;
}
.slot.empty {
  border: 6px solid transparent !important;
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKklEQVR4nGO8tswvjwEKtKI2TYKxkcUZUDhYAEieCZ+CgQJUczgjMeEEAL1TFVfUm8X/AAAAAElFTkSuQmCC") 3 / 6px !important;
  image-rendering: pixelated;
}
.srow2 {
  border-bottom: 0 !important;
  background: repeating-linear-gradient(90deg, #3a3f4f 0 4px, transparent 4px 8px) left bottom/100% 2px no-repeat;
}
.tcab {
  border: 6px solid transparent !important;
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAUUlEQVR4nGMU4WH5z0AAsIAIPyMprJK3nn1iuPHiC0QRCBy79QZDkQgPG8IkGLjx4hsjjK0hwQV3BhMh9xCtCMU6ZCswFIF8AXMkNsBITDgBAPcuEzTGi7K4AAAAAElFTkSuQmCC") 3 fill / 6px !important;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAN0lEQVR4nGN00hL7/+P3XwYY+PLjD4MILzsDuhgTA5GAiWSFyFbhVcjBykxlq7EBZOfgVYjsHAD9bRNpg/x3LwAAAABJRU5ErkJggg==") 0 0/20px 16px !important;
  box-shadow: none !important;
  image-rendering: pixelated;
}
.srow2 a:not(.btn) {
  display: inline-block;
  padding: 0 8px;
  border: 4px solid transparent;
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAASklEQVR4nGNkYGBgEOFh+Q+ikcGbL38YGUESR2Z5okhs2XefoWPFDQYWmIBN3vk3MHZFgIAIiGZCNw4Z4JUEGwuyA2YUMmDE51oAvE0VwRr+EREAAAAASUVORK5CYII=") 2 fill / 4px;
  image-rendering: pixelated;
  color: #f3e8cc;
  text-decoration: none;
  font-size: 13px;
}
/* ===== shelf（飾り棚・保管庫・品の札）・3段目 ===== */
.life-line small {
  font-size: 11px;
  color: var(--dim);
}