/* ===== 中身：フラットレイ＋インベントリ ===== */
.contents { padding: 72px clamp(16px, 3vw, 36px) 110px; }
.contents-head {
  max-width: 1440px; margin: 0 auto 24px; display: flex; align-items: baseline;
  justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
}
.contents-head h2 {
  font-family: var(--cond); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.2rem, 5.4vw, 4.6rem); line-height: .86; margin: 0;
}
.contents-head h2 span { color: var(--paper); }
.contents-head p { margin: 0; font-size: .95rem; }
.contents-grid {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 25vw, 360px); gap: 22px; align-items: start;
}

/* 帆布シート */
.sheet {
  position: relative;
  width: 100%;
  container-type: inline-size;
  background-color: var(--canvas);
  background-image:
    /* ゆるい折り目 */
    linear-gradient(90deg, transparent 49.6%, rgba(90,70,40,.07) 50%, rgba(255,255,255,.25) 50.4%, transparent 51%),
    linear-gradient(0deg, transparent 33.1%, rgba(90,70,40,.06) 33.4%, rgba(255,255,255,.2) 33.7%, transparent 34.2%),
    /* 織り目 */
    repeating-linear-gradient(0deg, rgba(80,60,30,.045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(80,60,30,.04) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .27  0 0 0 0 .15  0 0 0 .13 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  box-shadow: 0 1px 0 var(--canvas-edge), 0 26px 40px -22px rgba(0,0,0,.45);
  user-select: none;
  -webkit-user-select: none;
}
/* 縁のステッチ */
.sheet::before {
  content: "";
  position: absolute;
  inset: 1.1cqw;
  border: 0.13cqw dashed rgba(70,55,35,.28);
  pointer-events: none;
}
/* ハトメ（四隅） */
.grommet {
  position: absolute;
  width: 1.5cqw; height: 1.5cqw;
  border-radius: 50%;
  background: radial-gradient(circle, var(--bg) 0 34%, #8d8676 36% 44%, #d9d4c7 46% 62%, #7c7567 66% 72%, transparent 74%);
  pointer-events: none;
}
.grommet.tl { left: 0.7cqw; top: 0.7cqw; }
.grommet.tr { right: 0.7cqw; top: 0.7cqw; }
.grommet.bl { left: 0.7cqw; bottom: 0.7cqw; }
.grommet.br { right: 0.7cqw; bottom: 0.7cqw; }


/* ギア：どれも拾い上げられる */
.gear { position: absolute; display: block; z-index: 2; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.gear img { display: block; width: 100%; height: auto; pointer-events: none; }
.gear-lift {
  display: block;
  filter: drop-shadow(0 0.12cqw 0.1cqw rgba(50,35,15,.35)) drop-shadow(0 0.35cqw 0.5cqw rgba(50,35,15,.16));
  transition: transform .35s cubic-bezier(.25,1.4,.45,1), filter .35s ease;
}
/* 拾い上げ：大きく手前へ迫り、少しあおってから着地して浮遊 */
.gear.on { z-index: 30; }
.gear.on .gear-lift {
  transform: translate(var(--dx), var(--dy)) scale(var(--s));
  filter: drop-shadow(0 0.4cqw 0.3cqw rgba(0,0,0,.35)) drop-shadow(0 3.2cqw 3cqw rgba(0,0,0,.5));
  transition: transform .6s cubic-bezier(.16,1.3,.36,1), filter .45s ease;
}
.gear.on img { animation: swoop .6s cubic-bezier(.2,.9,.3,1), bob 3.4s ease-in-out .6s infinite; }
.gear-soon { cursor: default; }
@keyframes swoop {
  0%   { transform: perspective(900px) rotateX(24deg) rotateZ(-3deg); }
  55%  { transform: perspective(900px) rotateX(-4deg) rotateZ(1deg); }
  100% { transform: perspective(900px) rotateX(0) rotateZ(0); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-1.2%) rotate(-.6deg); }
  70% { transform: translateY(.5%) rotate(.5deg); }
}
/* 背景を少し落として荷札を読ませる */
.fl-veil {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(22, 15, 8, .52);
  backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.sheet.picking .fl-veil { opacity: 1; }
.gear:focus-visible .gear-lift { outline: 0.2cqw dashed var(--ink); outline-offset: 0.6cqw; }

/* 道具の名前（手書き） */
.hand {
  position: absolute;
  z-index: 3;
  white-space: nowrap;
  pointer-events: none;
  font-family: var(--hand);
  color: var(--pen);
  opacity: .85;
  font-size: max(11px, 1.6cqw);
  line-height: 1.05;
  transform: rotate(var(--r));
  transform-origin: 0 0;
}

/* ===== 荷札：拾った道具の横に下がる（タイトル・一文・重さの数字） ===== */
.tag {
  position: absolute; z-index: 31;
  width: clamp(200px, 25cqw, 340px);
  padding: clamp(14px, 1.6cqw, 22px) clamp(16px, 1.8cqw, 26px) clamp(14px, 1.6cqw, 22px) clamp(36px, 3.6cqw, 52px);
  background: #FFF9EC; color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: 6px 14px 14px 6px;
  box-shadow: 0 1.4cqw 2.4cqw -0.8cqw rgba(0,0,0,.55);
  pointer-events: none;
  opacity: 0;
  transform: translate(1.5cqw, -50%) rotate(-2deg);
  transform-origin: 0 50%;
  transition: opacity .2s ease, transform .5s cubic-bezier(.2,1.3,.4,1);
}
.tag.to-l {
  padding-left: clamp(16px, 1.8cqw, 26px); padding-right: clamp(36px, 3.6cqw, 52px);
  border-radius: 14px 6px 6px 14px; transform: translate(-1.5cqw, -50%) rotate(2deg); transform-origin: 100% 50%;
}
.tag.on { opacity: 1; transform: translate(0, -50%) rotate(-2deg); transition-delay: .12s; }
.tag.to-l.on { transform: translate(0, -50%) rotate(2deg); }
/* ハトメの穴と、道具へつながるひも */
.tag-hole {
  position: absolute; top: 50%; left: clamp(12px, 1.3cqw, 18px); width: clamp(12px, 1.2cqw, 16px); aspect-ratio: 1; margin-top: calc(clamp(12px, 1.2cqw, 16px) / -2);
  border-radius: 50%; background: #2a241c; box-shadow: 0 0 0 3px #C9B98F, 0 0 0 5px var(--ink);
}
.tag.to-l .tag-hole { left: auto; right: clamp(12px, 1.3cqw, 18px); }
.tag::before {
  content: ""; position: absolute; top: 50%; right: calc(100% - clamp(18px, 1.9cqw, 26px)); width: calc(var(--gap, 40px) + clamp(18px, 1.9cqw, 26px));
  border-top: 2px solid #F3E6C4; transform: rotate(4deg); transform-origin: 100% 0;
}
.tag.to-l::before { right: auto; left: calc(100% - clamp(18px, 1.9cqw, 26px)); transform: rotate(-4deg); transform-origin: 0 0; }
.tag-title {
  display: block; font-family: var(--cond); font-weight: 800; text-transform: uppercase;
  font-size: clamp(26px, 3.6cqw, 52px); line-height: .85;
}
.tag-desc { display: block; margin-top: .55em; font-size: clamp(12px, 1.1cqw, 15px); line-height: 1.45; }
.tag-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding-top: 12px; border-top: 2px dashed rgba(17,17,17,.35); }
.tag-stats dd { margin: 0; font-family: var(--cond); font-weight: 800; font-size: clamp(22px, 2.4cqw, 34px); line-height: .9; font-variant-numeric: tabular-nums; }
.tag-stats dt { font: clamp(9px, .75cqw, 11px) var(--mono); text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; opacity: .7; }
.tag-go, .tag-soon {
  display: inline-block; margin-top: 14px; font: 600 clamp(10px, .85cqw, 12px) var(--mono); text-transform: uppercase; letter-spacing: .1em;
}
.tag-go { background: var(--ink); color: #FFF9EC; padding: 5px 10px; border-radius: 99px; }
.tag-soon { border: 2px solid var(--ink); padding: 3px 9px; border-radius: 4px; transform: rotate(-3deg); }

/* ===== インベントリ（ゲームの持ち物欄） ===== */
.inv {
  position: sticky; top: 76px;
  background: #16130F; color: #EDE6D6;
  border: 4px solid var(--ink); border-radius: 14px;
  box-shadow: 6px 6px 0 var(--ink);
  font-family: var(--pixel);
  overflow: hidden;
}
.inv-bar {
  display: flex; justify-content: space-between; padding: 10px 14px;
  font-size: 12px; letter-spacing: .08em; background: #2B241B; border-bottom: 3px solid #0b0a08;
}
.inv-bar span:last-child { color: var(--bg); }
.inv-stage { padding: 14px 10px 4px; background: radial-gradient(circle at 50% 55%, #2B241B, #16130F 72%); }
.inv-stage svg { display: block; width: 100%; height: auto; overflow: visible; }
.strap { fill: none; stroke: #3a342b; stroke-width: 14; stroke-linecap: round; }
.zone { fill: #241e17; stroke: #5A5040; stroke-width: 2.5; stroke-dasharray: 7 6; transition: fill .25s, stroke .25s, opacity .25s; }
.inv.picking .zone { opacity: .45; }
.zone.on { opacity: 1 !important; fill: color-mix(in srgb, var(--bg) 30%, #2B241B); stroke: var(--bg); stroke-dasharray: none; stroke-width: 3.5; animation: zonePulse 1.4s steps(2) infinite; }
@keyframes zonePulse { 50% { fill: color-mix(in srgb, var(--bg) 46%, #2B241B); } }
.inv-item { cursor: pointer; transition: opacity .2s, transform .35s cubic-bezier(.2,1.5,.4,1); filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)); }
.inv.picking .inv-item { opacity: .22; }
.inv-item.on { opacity: 1 !important; transform: scale(1.9) translateY(-4px); filter: drop-shadow(0 10px 8px rgba(0,0,0,.7)); }

.inv-read {
  display: grid; grid-template-columns: 14px 1fr; gap: 4px 8px; align-items: start;
  margin: 8px 10px 10px; padding: 10px 12px; min-height: 76px;
  background: #F4EFE3; color: var(--ink); border: 3px solid #0b0a08; border-radius: 8px;
}
.inv-read .cur { color: var(--bg); visibility: hidden; font-size: 12px; line-height: 1.6; animation: blink .8s steps(2) infinite; text-shadow: 0 0 0 #000; -webkit-text-stroke: .5px #000; }
.inv-read.on .cur { visibility: visible; }
.inv-read b { display: block; font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.inv-read div small { display: block; font: 12px var(--mono); margin-top: 3px; }
.inv-read:not(.on) b { opacity: .45; }
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 900px) {
  .contents-grid { grid-template-columns: 1fr; }
  .inv { position: relative; top: 0; max-width: 420px; }
}