/* 盤面：マス・数字・魔物・品・主人公・ログ・下の道具のボタン */
/* 読み込む順番に意味がある（後のファイルが前の規則を上書きする）。並べ方は tools/css/regroup.mjs が決める */
/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  touch-action: manipulation;
}
.cell {
  aspect-ratio: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  position: relative;
  display: grid;
  place-items: center;
  font-size: clamp(18px, 6vw, 26px);
  background: var(--wall);
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.35),
    inset 0 2px 0 var(--wall-hi);
}
.cell.reach {
  background: var(--wall-hi);
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(232, 163, 61, 0.35);
}
.cell.rev {
  background: var(--floor);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.cell.rev.done {
  color: var(--dim);
}
.cell .n {
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: 12px;
}
.n1 {
  color: var(--moss);
}
.n2 {
  color: var(--torch);
}
.n3 {
  color: var(--blood);
}
.cell .g {
  opacity: 0.9;
}
.cell.mon .g {
  color: var(--blood);
}
.cell.gold .g,
.cell.chest .g {
  color: var(--gold);
}
.cell.pot .g {
  color: var(--moss);
}
.cell.stairs .g {
  color: var(--torch);
}
.cell.sword .g {
  color: var(--sky);
}
.cell.done .g {
  opacity: 0.35;
}
.cell.stairs.done .g {
  opacity: 1;
}
.cell.me {
  background: var(--floor-hi);
  box-shadow:
    inset 0 0 0 2px var(--torch),
    0 0 18px rgba(232, 163, 61, 0.35);
}
.cell.me .g {
  opacity: 1;
  color: var(--torch);
}
.hit {
  animation: hit 0.3s;
}
@media (prefers-reduced-motion: reduce) {
  .hit {
    animation: none;
  }
}
.log {
  min-height: 60px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--dim);
}
.log p {
  margin: 0;
}
.log p:first-child {
  color: var(--ink);
}
.actions {
  display: flex;
  gap: 8px;
}
.btn.safe {
  background: #243447;
  border-color: var(--sky);
  color: #dbe8f5;
}
.cell.seen {
  background: #332f29;
  box-shadow: inset 0 0 0 1px rgba(127, 166, 201, 0.25);
}
.cell.flag .g {
  color: var(--torch);
  opacity: 1;
}
.cell .lv {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 11px;
  color: var(--blood);
}
.grid.mode-flag .cell:not(.rev) {
  box-shadow: inset 0 0 0 1px rgba(232, 163, 61, 0.5);
}
.grid.mode-peek .cell:not(.rev) {
  box-shadow: inset 0 0 0 1px rgba(127, 166, 201, 0.6);
}
.cell {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.tools .btn {
  font-size: 13px;
  padding-inline: 4px;
}
#clk.low {
  color: var(--blood);
  animation: blink 1s steps(2) infinite;
}
.hsp {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  vertical-align: -3px;
}
.hsp .spr {
  width: 100%;
  height: 100%;
}
.spic {
  width: 40px;
  height: 40px;
  flex: none;
}
.spic .spr {
  width: 100%;
  height: 100%;
}
/* 目印・調べる・透視の案内はログ欄の上に重ねる（盤面の下に行を足すと、盤面が縮んで画面全体が動くため） */
.log {
  position: relative;
}
.log .hint {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  background: #1b2330;
  border-left: 2px solid var(--torch);
  padding: 6px 8px;
  font-size: 13px;
  box-sizing: border-box;
}
.cell {
  background:
    var(--wall-img) center/100% 100%,
    var(--wall);
  image-rendering: pixelated;
  overflow: hidden;
}
.cell.reach {
  background:
    linear-gradient(rgba(232, 163, 61, 0.18), rgba(232, 163, 61, 0.18)),
    var(--wall-img) center/100% 100%;
  box-shadow: inset 0 0 0 2px rgba(232, 163, 61, 0.7);
}
.cell.rev {
  background:
    linear-gradient(rgba(40, 34, 26, 0.55), rgba(40, 34, 26, 0.55)),
    var(--floor-img) center/100% 100%;
}
.cell.seen {
  background:
    linear-gradient(rgba(30, 40, 60, 0.6), rgba(30, 40, 60, 0.6)),
    var(--floor-img) center/100% 100%;
}
.cell .g {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.cell.done .spr {
  opacity: 0.3;
  filter: grayscale(1);
}
.cell.stairs.done .spr,
.cell.me .spr {
  opacity: 1;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.5));
}
.cell.mon.done .g::after {
  content: "×";
  position: absolute;
  color: var(--blood);
  font-size: 22px;
}
.cell .n {
  z-index: 1;
  background: rgba(15, 17, 22, 0.75);
  padding: 0 4px;
  top: 2px;
  left: 2px;
}
.cell .lv {
  z-index: 1;
  background: rgba(15, 17, 22, 0.75);
  padding: 0 3px;
}
.cell.relic.done .q {
  opacity: 0.3;
  text-shadow: none;
}
.n.nf {
  color: #b9a6d9;
}
.cell.relic:not(.done) .spr,
.cell.disg .spr {
  filter: drop-shadow(0 0 6px rgba(242, 200, 91, 0.7));
}
/* 踏んだ罠・倒した魔物は数字の引き算に要るので見えるまま残す */
.cell.trap.done .spr {
  opacity: 0.9;
  filter: sepia(0.4) drop-shadow(0 0 4px rgba(201, 73, 62, 0.8));
}
.cell.trap.done {
  box-shadow: inset 0 0 0 2px rgba(201, 73, 62, 0.55);
}
.cell.mon.done .spr {
  opacity: 0.6;
  filter: grayscale(0.8) brightness(0.8);
}
.cell.mon.done {
  box-shadow: inset 0 0 0 2px rgba(201, 73, 62, 0.35);
}
.cell.mon.done .g::after {
  font-size: clamp(24px, 8vw, 36px);
  text-shadow: 0 0 4px #000;
}
.cell.looked {
  outline: 2px solid var(--sky);
  outline-offset: -2px;
}
.log .lk {
  color: var(--ink);
  background: #1b2330;
  border-left: 2px solid var(--sky);
  padding: 6px 8px;
}
.log .bad {
  color: var(--blood);
}
.tools {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.cell.rkp {
  outline: 2px solid var(--torch);
  outline-offset: -2px;
  animation: rkp 0.5s ease-in-out infinite alternate;
}
.dlg .st-box .spic {
  width: 30px;
  height: 30px;
}
.cell.me.me {
  box-shadow:
    inset 0 0 0 2px var(--torch),
    0 0 18px rgba(232, 163, 61, 0.35);
}
.cell.me.me .spr {
  opacity: 1;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.5));
}
.take {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 10px;
  padding: 12px 16px;
  background: linear-gradient(rgba(242, 200, 91, 0.14), rgba(242, 200, 91, 0.04));
  border: 1px solid rgba(242, 200, 91, 0.5);
}
.take b.pop {
  animation: takepop 0.35s ease-out;
}
.take em {
  font-style: normal;
  font-size: 13px;
  padding: 2px 8px;
  background: var(--torch);
  color: #1c1408;
}
.heroimg {
  display: contents;
}
.heroimg.left .spr {
  transform: scaleX(-1);
}
.grid {
  position: relative;
}
.herofly {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-size: clamp(18px, 6vw, 26px);
}
.herofly .spr {
  opacity: 1;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.5));
}
.cell.me .g::after {
  content: none !important;
}
.cell.tuthl {
  outline: 3px solid var(--moss);
  outline-offset: -3px;
  animation: tp 1s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .cell.tuthl {
    animation: none;
  }
}
.enter {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 80%, rgba(10, 11, 16, 0.2), rgba(10, 11, 16, 0.92) 70%);
  animation: enter 2.4s ease forwards;
}
.cell.appear {
  animation: appear 0.45s ease backwards;
}
.cell.far {
  filter: brightness(0.45) saturate(0.7);
}
.gd {
  width: 44px;
  height: 44px;
  display: block;
}
.gd .spr {
  width: 100%;
  height: 100%;
  animation: bob 1.4s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .enter,
  .cell.appear,
  .gd .spr {
    animation: none;
  }
  .enter {
    display: none;
  }
}
.grid {
  margin-inline: auto;
}
.tutbox .gd {
  width: 36px;
  height: 36px;
}
/* 練習のスポットライト：説明しているマスだけ照らす */
.grid.spot .cell {
  filter: brightness(0.2) saturate(0.4);
  transition: filter 0.35s;
}
.grid.spot .cell.ringc {
  filter: brightness(0.6) saturate(0.8);
}
.grid.spot .cell.lit {
  filter: none;
  z-index: 2;
  box-shadow:
    0 0 0 2px var(--torch),
    0 0 26px 8px rgba(232, 163, 61, 0.55);
}
.cell.ringc::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px dashed rgba(232, 163, 61, 0.95);
  pointer-events: none;
  z-index: 1;
  animation: ringp 1s ease-in-out infinite alternate;
  animation-delay: var(--rd, 0ms);
}
.grid.spot .cell:has(.mk) {
  filter: brightness(0.85);
}
.mk {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  font-size: clamp(26px, 9vw, 40px);
  font-weight: 700;
  pointer-events: none;
  text-shadow:
    0 0 8px #000,
    0 0 2px #000;
}
.mk-q {
  color: var(--torch);
  animation: bob 0.6s ease-in-out infinite alternate;
}
.mk-ok {
  color: #9be07a;
}
.mk-ng {
  color: #ff6b5e;
}
/* 「ここを押す」は目印ボタンの上と同じ黄色の▼。文字でなく図形で描いて中心を合わせる */
.mk-go i {
  width: 38%;
  aspect-ratio: 1.15;
  background: var(--torch);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 0 6px rgba(232, 163, 61, 0.9));
  animation: drop 0.5s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .cell.ringc::before,
  .mk-q,
  .mk-go i {
    animation: none;
  }
}
.tools.tfocus .btn:not(.pointme) {
  filter: brightness(0.35);
}
.tools {
  position: relative;
}
.grid.mode-flag .cell.tuthl {
  outline: 3px solid var(--torch);
  box-shadow: 0 0 26px 8px rgba(232, 163, 61, 0.7);
}
.grid.ptrs {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 4;
}
.grid.ptrs > div {
  aspect-ratio: 1;
  position: relative;
}
.grid.ptrs i {
  position: absolute;
  left: 32%;
  right: 32%;
  bottom: calc(100% - 4px);
  aspect-ratio: 1.15;
  background: var(--torch);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 0 6px rgba(232, 163, 61, 0.9));
  animation: drop 0.5s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .grid.ptrs i {
    animation: none;
  }
}
.cell .under,
.cell .over {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.cell .under .spr {
  opacity: 0.9;
}
.cell .over .spr {
  width: 62%;
  height: 62%;
  transform: translateY(8%);
}
.appr + .actions,
.town .actions {
  position: relative;
}
/* ▼の分だけ上を空ける（道具ボタンの列は除く） */
.actions:not(.tools):has(.pointme) {
  margin-top: 30px;
}
.tools .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.tools .btn {
  white-space: nowrap;
}
.tools .btn {
  position: relative;
}
.tools .cnt {
  position: absolute;
  top: 4px;
  right: 5px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--torch);
  color: #1c1408;
  font:
    700 10px/15px system-ui,
    sans-serif;
  text-align: center;
}
.tools .btn:disabled .cnt {
  background: #555;
  color: #ccc;
}
.tools .cnt.full {
  background: var(--moss);
  color: #10180c;
}
.runapp .grid {
  width: min(100cqw, calc(100cqh * var(--ar)));
}
.runapp .grid.ptrs {
  margin-inline: auto;
}
/* ログ欄は常に3行ぶんの高さ（行数で欄が伸び縮みすると盤面の大きさが変わって画面が動く）。練習中に中身を出さないときも場所は取っておく（隠すと調べた瞬間に盤面が縮む）。長い行は1行に収めて末尾を…にする */
.runapp .log {
  height: calc(3 * 1.55em);
  min-height: 0;
  overflow: hidden;
  flex: none;
}
.runapp .log p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.runapp .log p.lk {
  white-space: normal;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  font-size: 12.5px;
  line-height: 1.5;
}
.cell.fallen {
  outline: 2px dashed var(--gold);
  outline-offset: -3px;
}
.cell .fl {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}
.cell .fl .spr {
  width: 70%;
  height: 70%;
  filter: drop-shadow(0 0 6px rgba(242, 200, 91, 0.9));
}
.cell.treasure:not(.done) .spr {
  filter: drop-shadow(0 0 8px rgba(242, 200, 91, 0.95)) drop-shadow(0 0 2px #fff);
}
.slot .life.low {
  color: #ff9a8c;
}
.dcard .actions {
  margin: 0;
}
.grid .cell.rev.psn {
  box-shadow:
    inset 0 0 0 2px rgba(134, 168, 100, 0.85),
    inset 0 0 14px rgba(120, 200, 90, 0.45) !important;
}
.grid .cell.rev.psn::before {
  content: "毒";
  position: absolute;
  top: 2px;
  left: 3px;
  z-index: 2;
  font-size: 10px;
  line-height: 1.4;
  padding: 0 3px;
  color: #c8ec9c;
  background: rgba(18, 28, 14, 0.85);
}
.bar i.psn {
  background: linear-gradient(90deg, #4d7a36, #86a864) !important;
}
.appr-bar .actions {
  margin: 0;
}
.grid .cell.rev.big2 .spr {
  transform: scale(1.14);
}
.grid .cell.rev.big3 .spr {
  transform: scale(1.26);
}
.grid .cell.rev.big2::after,
.grid .cell.rev.big3::after {
  content: "×2";
  position: absolute;
  top: 2px;
  right: 3px;
  z-index: 2;
  font-size: 10px;
  line-height: 1.4;
  padding: 0 3px;
  color: #ffd2a1;
  background: rgba(40, 20, 10, 0.85);
}
.grid .cell.rev.big3::after {
  content: "×3";
  color: #ffb0a0;
}
.grid .cell.rev.boss {
  box-shadow:
    inset 0 0 0 2px rgba(242, 200, 91, 0.9),
    inset 0 0 16px rgba(242, 200, 91, 0.35);
}
.grid .cell.rev.boss::after {
  content: "主";
  color: #ffe6a0;
}
.grid .cell.rev.ptrap {
  box-shadow:
    inset 0 0 0 2px rgba(120, 200, 70, 0.8),
    inset 0 0 14px rgba(110, 190, 60, 0.4) !important;
}
.grid .cell.rev.spring.done .spr,
.grid .cell.rev.pit.done .spr {
  opacity: 0.45;
}
.grid .cell.rev.fire {
  box-shadow:
    inset 0 0 0 2px rgba(230, 110, 60, 0.8),
    inset 0 0 14px rgba(230, 90, 40, 0.45) !important;
}
.toolwrap {
  position: relative;
}
/* 階段の上に立っているときは自分のマスが脈打つ。押すと階段の画面が開く（下の帯のボタンはやめた） */
.cell.me.onst {
  animation: stpulse 1.3s ease-in-out infinite alternate;
}
.cell.safe {
  box-shadow: inset 0 0 20px 6px rgba(255, 196, 90, 0.42);
}
.cell.safe::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 2px;
  width: 24px;
  height: 24px;
  background: var(--lamp-ic) center/contain no-repeat;
  image-rendering: pixelated;
  opacity: 0.95;
}
.bar i.psn {
  background: linear-gradient(#b8d890 0 2px, #6f9a4a 2px 8px, #3f6228 8px) !important;
}
/* 小さいマス（.grid.tight）：札が重なって読めないので、角は数字（左上）とLv（右下）だけ。×2・×3・主は外枠の色、毒は緑の内枠で見せる */
.grid.tight .cell.rev.big2::after,
.grid.tight .cell.rev.big3::after,
.grid.tight .cell.rev.boss::after,
.grid.tight .cell.rev.psn::before {
  content: none;
}
.grid.tight .cell.rev.big2:not(.done) {
  outline: 2px solid #e8913a;
  outline-offset: 0;
}
.grid.tight .cell.rev.big3:not(.done) {
  outline: 2px solid #ff5a48;
  outline-offset: 0;
}
.grid.tight .cell.rev.boss:not(.done) {
  outline: 2px solid #ffd060;
  outline-offset: 0;
}
.grid.tight .cell.rev.big2 .spr,
.grid.tight .cell.rev.big3 .spr {
  transform: none;
}
.grid.tight .cell .n {
  font-size: 10px;
  padding: 0 2px;
  top: 1px;
  left: 1px;
}
.grid.tight .cell .lv {
  font-size: 9px;
  padding: 0 2px;
  bottom: 1px;
  right: 1px;
}
.grid.tight .cell.safe::after {
  width: 14px;
  height: 14px;
  right: 1px;
  top: 1px;
}
@media (max-height: 620px) {
  .runapp .log {
    height: calc(2 * 1.55em);
  }
  .runapp .tools .btn {
    padding-block: 4px;
  }
  .runapp .grid {
    gap: 2px;
  }
}
.take span {
  color: var(--dim);
  font-size: 14px;
}
.take b {
  color: var(--gold);
  font-size: 38px;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.enter span {
  font-size: 13px;
  color: var(--ink);
}
.btn.safe.pointme {
  background: #243447;
  color: #dbe8f5;
  border-color: var(--torch);
}
/* ===== board（盤面）・3段目 ===== */
.enter b {
  font-size: 34px;
  font-weight: 400;
  color: var(--torch);
  text-shadow: 0 0 18px rgba(232, 163, 61, 0.6);
}