@import url('https://fonts.googleapis.com/css2?family=Kaisei+HarunoUmi:wght@400;500;700&display=swap');

html,
body {
  margin: 0;
  min-height: 100%;
  background: #050306;
}

body {
  display: flex;
  justify-content: center;
  font-family: "Kaisei HarunoUmi", "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif;
  overflow-x: hidden;
}

img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.shelf-top {
  width: 100%;
  min-height: 100svh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background:
    radial-gradient(circle at center top, rgba(91, 27, 117, .28), transparent 46%),
    #050306;
}

.shelf-top__stage {
  position: relative;
  width: min(100vw, 640px, calc(100svh * 941 / 1672));
  max-width: 941px;
  aspect-ratio: 941 / 1672;
  min-height: 0;
  height: auto;
  max-height: 100svh;
  overflow: hidden;
  background: #09060a;
  box-shadow: 0 0 42px rgba(0, 0, 0, .85);
}

.shelf-top__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.shelf-top__logo {
  position: absolute;
  z-index: 4;
  top: 2%;
  left: 50%;
  width: 90%;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .72));
}

.shelf-top__devil {
  position: absolute;
  z-index: 2;
  top: 19.3%;
  right: 1.7%;
  width: 29.7%;
  max-width: none;
  opacity: .63;
  pointer-events: none;
  transform-origin: 50% 48%;
  animation: questionDevilFloat 3.8s ease-in-out infinite;
  will-change: transform, opacity, filter;
  filter: drop-shadow(0 0 12px rgba(132, 43, 255, .34));
}

.shelf-top__main {
  position: absolute;
  z-index: 3;
  top: 23%;
  left: 0;
  width: 100%;
  max-width: none;
  pointer-events: none;
}

.shelf-top__frame {
  position: absolute;
  z-index: 5;
  top: 55.7%;
  left: 50%;
  width: 96%;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .55));
}

.shelf-top__button {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 3%;
  width: 90%;
  max-width: none;
  transform: translateX(-50%);
  display: block;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 9px 14px rgba(0, 0, 0, .62));
  transition: transform .12s ease, filter .12s ease;
}

.shelf-top__button img {
  width: 100%;
  height: auto;
}

.shelf-top__button:hover {
  transform: translateX(-50%) translateY(-2px);
  filter: drop-shadow(0 11px 18px rgba(0, 0, 0, .7)) brightness(1.05);
}

.shelf-top__button:active {
  transform: translateX(-50%) translateY(1px) scale(.985);
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .55)) brightness(.98);
}

@keyframes questionDevilFloat {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: .58;
    filter: drop-shadow(0 0 10px rgba(132, 43, 255, .28)) brightness(1);
  }
  25% {
    transform: translateY(-.28%) rotate(-.8deg);
  }
  50% {
    transform: translateY(-.64%) rotate(.7deg);
    opacity: .68;
    filter: drop-shadow(0 0 15px rgba(132, 43, 255, .42)) brightness(1.06);
  }
  75% {
    transform: translateY(-.24%) rotate(-.4deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: .58;
    filter: drop-shadow(0 0 10px rgba(132, 43, 255, .28)) brightness(1);
  }
}

@media (min-width: 942px) {
  .shelf-top__stage {
    min-height: auto;
  }
}
/*
@media (prefers-reduced-motion: reduce) {
  .shelf-top__devil,
  .shelf-top__button {
    animation: none;
    transition: none;
  }
}
*/

/* --- 2026-06 fixed stage ratio --- */
.shelf-top__stage {
  width: min(100vw, 640px, calc(100svh * 941 / 1672));
  max-width: 941px;
  aspect-ratio: 941 / 1672;
  min-height: 0;
  height: auto;
  max-height: 100svh;
}


/* --- play page styles --- */
:root {
  --mk-w: min(100vw, 720px);
  --mk-gold: #d7b56c;
  --mk-wine: #8a174d;
  --mk-ink: #1d140f;
  --mk-paper: rgba(238, 216, 174, .94);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--mk-ink);
  font-family: "Kaisei HarunoUmi", "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif;
  background: #100b08;
  touch-action: manipulation;
}
button, a { font: inherit; }
button { cursor: pointer; }
.mk-shell {
  position: relative;
  width: var(--mk-w);
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background-image: linear-gradient(rgba(8,5,4,.12), rgba(8,5,4,.18)), url("tana/u/searchBack.webp");
  background-size: cover;
  background-position: center top;
  box-shadow: 0 0 40px rgba(0,0,0,.7);
}
.is-hidden { display: none !important; }
.mk-start {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.mk-start-card {
  width: min(92%, 560px);
  padding: 26px 22px 28px;
  text-align: center;
  background: var(--mk-paper);
  border: 3px solid rgba(91, 55, 25, .75);
  box-shadow: 0 7px 0 rgba(40,20,10,.6), 0 0 24px rgba(0,0,0,.55);
}
.mk-kicker { margin: 0 0 10px; font-size: clamp(13px, 3.3vw, 18px); letter-spacing: .08em; }
.mk-start h1 { margin: 0 0 14px; font-size: clamp(36px, 10vw, 60px); line-height: 1.1; }
.mk-start h1 span { color: var(--mk-wine); font-size: .62em; }
.mk-start p { margin: 10px 0; line-height: 1.8; font-weight: 700; }
.mk-note { color: #4b241b; }
.mk-main-btn, .mk-share {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 4px 22px;
  border: 2px solid #4a2414;
  border-radius: 10px;
  background: linear-gradient(#f7d889, #c6842f);
  color: #241006;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 3px 0 #5a2b15, 0 0 12px rgba(255,190,80,.25);
}
.mk-main-btn:active, .mk-share:active { transform: translateY(2px); box-shadow: 0 1px 0 #5a2b15; }
.mk-main-btn[disabled] { opacity: .5; cursor: wait; }
.mk-play {
  min-height: 100svh;
  display: grid;
  grid-template-rows: clamp(140px, 18svh, 185px) 1fr clamp(135px, 19svh, 205px);
  gap: 4px;
  padding: max(8px, env(safe-area-inset-top)) 8px max(0px, env(safe-area-inset-bottom));
}
.mk-board {
  position: relative;
  z-index: 1;
  min-height: 140px;
  padding: 13px 18px 11px;
  background: var(--mk-paper);
  border: 3px solid rgba(91, 55, 25, .82);
  box-shadow: 0 5px 0 rgba(43,22,10,.55), inset 0 0 20px rgba(91,55,25,.22);
  overflow: hidden;
}
.mk-speaker { text-align: center; font-weight: 900; font-size: clamp(12px, 2.7vw, 15px); letter-spacing: .08em;background: #2a160b;
    border-radius: 999px;
    width: fit-content;
    margin: auto;
    padding: 1px 4% 3px; }
.mk-message {
  margin: 6px 0px;
  place-items: center;
  text-align: center;
  font-weight: 900;
  font-size: clamp(10px, 4.6vw, 16px);
  line-height: 1.2;
}
.mk-actions { min-height: 44px; display: grid; place-items: center; }
.mk-tools { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mk-tool-btn {
  min-height: 38px;
  padding: 6px 4px;
  border: 2px solid #4a2414;
  border-radius: 10px;
  background: linear-gradient(#f2dfb4, #c78d54);
  font-size: clamp(11px, 2.7vw, 14px);
  font-weight: 900;
  color: #271308;
}
.mk-shelf {
  position: relative;
  z-index: 2;
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: min(3.2vw, 18px) min(2.3vw, 35px);
  padding: min(4vw, 18px) min(4vw, 42px) min(2vw, 12px);
  overflow: visible;
}
.mk-shelf::before,
.mk-shelf::after,
.mk-shelf .mk-board-line {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(90deg, #3b1b12, #7b3d1d 28%, #3b1b12 100%);
  box-shadow: 0 4px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,206,120,.12);
  z-index: -1;
}
.mk-shelf::before { top: calc(33.33% - 6px); }
.mk-shelf::after { top: calc(66.66% - 6px); }
.mk-shelf .mk-board-line { top: calc(100% - 12px); }
.mk-item {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: transparent;
  border: 0;
  padding: 0;
  overflow: visible;
  display: block;
  pointer-events: none;
}
.mk-item.is-tappable { pointer-events: auto; }
.mk-item:focus-visible { outline: 3px solid rgba(255,220,120,.9); border-radius: 12px; }
.mk-item-inner {
  position: absolute;
  inset: 0;
  overflow: visible;
}
.mk-overlay,
.mk-item-img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.mk-overlay {
  z-index: 1;
  bottom: 10%;
  max-width: 110%;
  max-height: 110%;
  opacity: 0;
  transition: opacity .28s ease;
  filter: drop-shadow(0 0 8px rgba(0,0,0,.85));
}
.mk-item.has-overlay .mk-overlay { opacity: .98; }
.mk-item-img { z-index: 2; filter: drop-shadow(0 4px 3px rgba(0,0,0,.42)); }
.mk-item.is-tappable .mk-item-img { filter: drop-shadow(0 0 5px rgba(255,230,0,1.88)) drop-shadow(0 4px 3px rgba(0,0,0,1.42)); }
.mk-item.is-revealing .mk-item-img {
  animation: makai-shake .42s ease-in-out 2;
}
.mk-item.is-flash .mk-item-img { animation: makai-flash .35s ease-out 1; }
.mk-item.is-demon .mk-item-img {
  animation: demon-pop .45s ease-out forwards;
  filter: drop-shadow(0 0 8px rgba(255, 40, 90, .95)) drop-shadow(0 0 24px rgba(150, 40, 255, .78));
}
.mk-item.is-capture-target { pointer-events: auto; }
.mk-item.is-capture-target .mk-item-img { animation: demon-pulse 1.2s ease-in-out infinite; }
.mk-characters {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 34% 66%;
  align-items: end;
  pointer-events: none;
  margin-top: 4%;
}
.mk-bro { width: 116%; max-height: 100%; object-fit: contain; align-self: end; justify-self: start; transform: translateX(2%); filter: drop-shadow(0 5px 4px rgba(0,0,0,.45)); }
.mk-kel-btn {
  justify-self: end;
  width: 87%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
	margin-right: 5%;
}
.mk-kel { width: 100%; height: 100%; object-fit: contain; object-position: right top; filter: drop-shadow(0 5px 4px rgba(0,0,0,.45)); margin-top: 10%; }
.mk-kel-btn.is-capture-target { pointer-events: auto; }
.mk-kel-btn.is-capture-target .mk-kel { animation: kel-pulse 1.4s ease-in-out infinite; filter: drop-shadow(0 0 9px rgba(255,230,160,.55)) drop-shadow(0 5px 4px rgba(0,0,0,.45)); }
.mk-modal {
  width: min(92vw, 520px);
  border: 3px solid rgba(91, 55, 25, .86);
  background: var(--mk-paper);
  color: var(--mk-ink);
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.68), 0 0 26px rgba(255,70,140,.45);
}
.mk-modal::backdrop { background: rgba(0,0,0,.65); }
.mk-modal-inner { text-align: center; padding: 10px; }
.mk-modal h2 { margin: 0 0 8px; font-size: 25px; color: var(--mk-wine); }
.mk-modal h3 { margin: 4px 0; font-size: 22px; }
.mk-modal p { line-height: 1.7; font-weight: 700; margin: 8px 0; }
.mk-modal img { width: min(64vw, 250px); max-height: 230px; object-fit: contain; filter: drop-shadow(0 0 16px rgba(150,40,255,.55));margin: auto;}
.mk-modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
@keyframes makai-shake {
  0% { transform: translateX(-50%) translate(0,0) rotate(0deg) scale(1); }
  25% { transform: translateX(-50%) translate(-1px,1px) rotate(-1deg) scale(1.02); }
  50% { transform: translateX(-50%) translate(1px,-1px) rotate(1deg) scale(1.03); }
  75% { transform: translateX(-50%) translate(-1px,0) rotate(-.8deg) scale(1.02); }
  100% { transform: translateX(-50%) translate(0,0) rotate(0deg) scale(1); }
}
@keyframes makai-flash {
  0% { filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); }
  45% { filter: brightness(1.8) drop-shadow(0 0 20px rgba(255,255,255,.9)); }
  100% { filter: brightness(1) drop-shadow(0 0 18px rgba(160,40,255,.65)); }
}
@keyframes demon-pop {
  0% { transform: translateX(-50%) translateY(0) scale(1); opacity: .78; }
  65% { transform: translateX(-50%) translateY(-10%) scale(1.48); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-10%) scale(1.48); opacity: 1; }
}
@keyframes demon-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255,40,90,.95)) drop-shadow(0 0 24px rgba(150,40,255,.78)); }
  50% { filter: drop-shadow(0 0 12px rgba(255,230,160,1)) drop-shadow(0 0 30px rgba(160,40,255,.9)); }
}
@keyframes kel-pulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@media (max-width: 520px) {
  .mk-play { grid-template-rows: 142px 1fr 132px; padding-left: 6px; padding-right: 6px; }
  .mk-board { padding: 10px 11px 9px;}
  .mk-message { font-size: clamp(10px, 4.6vw, 16px); line-height: 1.43; }
  .mk-main-btn { min-height: 38px; padding: 8px 18px; }
  .mk-shelf { gap: 44px 0px; padding: 52px 19px 7px; }
  .mk-overlay { max-width: 142%; max-height: 142%; bottom: 8%; }
  .mk-item-img { max-width: 118%; max-height: 111%; }
}
@media (max-height: 700px) {
  .mk-play { grid-template-rows: 132px 1fr 112px; }
  .mk-message { font-size: clamp(16px, 4vw, 22px); }
  .mk-characters { margin-top: 8px; }
}


/* --- 2026-06: play.php direct start / image assets tune --- */
.mk-board {
  background: url("tana/u/playFrame.webp") center center / 96% 102% no-repeat;
  border: 0;
  box-shadow: none;
  padding: clamp(12px, 2.3vw, 10px) clamp(24px, 5vw, 40px) clamp(12px, 2.3vw, 18px);
  overflow: visible;
}

.mk-speaker {
  color: #ffffff;
}

.mk-message {
  color: #170d07;
  text-shadow: 0 1px 0 rgba(255, 238, 190, .48);
}

.mk-actions {
  position: relative;
  z-index: 10;
  min-height: 42px;
}

.mk-tools {
  align-items: center;
  gap: clamp(2px, 1vw, 8px);
}

.mk-tool-btn {
  width: 100%;
  aspect-ratio: 1080 / 458;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  overflow: visible;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.45));
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}

.mk-tool-btn--1 { background-image: url("tana/u/playBtn1.webp"); }
.mk-tool-btn--2 { background-image: url("tana/u/playBtn2.webp"); }

.mk-tool-btn span,
.mk-tool-btn small {
  display: none;
}

.mk-tool-btn:active {
  transform: translateY(2px) scale(.985);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.45));
}

.mk-shelf::before,
.mk-shelf::after,
.mk-shelf .mk-board-line {
  display: none;
}

.mk-shelf-board-img {
  position: absolute;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 0;
  filter: drop-shadow(0 5px 4px rgba(0,0,0,.48));
}

.mk-shelf-board-img--1 { top: 29.5%; }
.mk-shelf-board-img--2 { top: 62%; width: 100%; }
.mk-shelf-board-img--3 { top: 94%; width: 100%; }

.mk-item {
  z-index: 2;
}

.mk-overlay {
  transition: opacity .62s ease, filter .62s ease, transform .62s ease;
  transform: translateX(-50%) translateY(4px) scale(.98);
  will-change: opacity, transform;
}

.mk-item.has-overlay .mk-overlay {
  opacity: .98;
  transform: translateX(-50%) translateY(0) scale(1);
}

.mk-shelf.is-tool-aura .mk-overlay {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 10px rgba(130,70,255,.5)) brightness(1.08);
}

.mk-shelf.is-tool-shadow .mk-overlay {
  mix-blend-mode: multiply;
  filter: drop-shadow(0 0 7px rgba(0,0,0,.9)) brightness(.9);
}

.mk-shelf.is-tool-default .mk-overlay {
  mix-blend-mode: normal;
}

@media (max-width: 520px) {
  .mk-board {
    padding: 9px 20px 9px;
  }
  .mk-tools {
    gap: 6px;
  }
  .mk-tool-btn {
    transform: scale(1.08);
  }
  .mk-tool-btn:active {
    transform: translateY(2px) scale(1.06);
  }
  .mk-shelf-board-img--1 { top: 29%; width: 100%; }
  .mk-shelf-board-img--2 { top: 62%; width: 100%; }
  .mk-shelf-board-img--3 { top: 96%; width: 100%; }
}

/* --- fixed: tool image must follow tool type, not randomized position --- */
.mk-tool-btn--aura { background-image: url("tana/u/playBtn1.webp") !important; }
.mk-tool-btn--shadow { background-image: url("tana/u/playBtn2.webp") !important; }

/* --- fixed: overlays stay BEHIND items, and blend with the shelf backdrop --- */
.mk-shelf {
  isolation: auto !important;
}

.mk-item {
  z-index: auto !important;
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
}

.mk-overlay {
  z-index: 1 !important;
  pointer-events: none;
  opacity: 0;
}

.mk-item-img {
  z-index: 2 !important;
}

.mk-shelf.is-tool-aura .mk-item.has-overlay .mk-overlay {
  mix-blend-mode: screen !important;
  opacity: .96;
  filter: brightness(1.08) contrast(1.04) saturate(1.08) drop-shadow(0 0 10px rgba(150,80,255,.42));
}

.mk-shelf.is-tool-shadow .mk-item.has-overlay .mk-overlay {
  mix-blend-mode: multiply !important;
  opacity: .94;
  filter: contrast(1.04) brightness(.96) drop-shadow(0 0 5px rgba(0,0,0,.42));
}

.mk-shelf.is-tool-default .mk-item.has-overlay .mk-overlay {
  mix-blend-mode: normal !important;
  opacity: .96;
}

/* --- fixed v2: overlay assets are alpha-cleaned; keep them behind items and blend softly --- */
.mk-item-inner {
  isolation: auto !important;
}
.mk-overlay {
  z-index: 1 !important;
  pointer-events: none !important;
  transition: opacity .55s ease, transform .55s ease, filter .55s ease !important;
  transform: translateX(-50%) translateY(4px) scale(.98) !important;
}
.mk-item.has-overlay .mk-overlay {
  transform: translateX(-50%) translateY(0) scale(1) !important;
}
.mk-item-img {
  z-index: 2 !important;
}
.mk-shelf.is-tool-aura .mk-item.has-overlay .mk-overlay {
  mix-blend-mode: screen !important;
  opacity: .4 !important;
  filter: saturate(1.1) brightness(1.05) drop-shadow(0 0 8px rgba(140,60,255,.28)) !important;
}
.mk-shelf.is-tool-shadow .mk-item.has-overlay .mk-overlay {
  mix-blend-mode: multiply !important;
  opacity: .6 !important;
  filter: contrast(1.05) brightness(.98) drop-shadow(0 0 4px rgba(0,0,0,.22)) !important;
}

/* --- 2026-06 fixed play ratio / final stare timing --- */
:root {
  --mk-stage-w: min(100vw, 640px, calc(100svh * 941 / 1672));
}

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-x: hidden;
}

.mk-shell {
  width: var(--mk-stage-w) !important;
  max-width: 941px;
  aspect-ratio: 941 / 3000 !important;
  height: auto !important;
  max-height: 100svh;
  min-height: 0 !important;
}

.mk-start,
.mk-play {
  height: 100% !important;
  min-height: 0 !important;
}

.mk-start {
  padding: 4%;
}

.mk-play {
  grid-template-rows: 20.2% 57.4% 22.4% !important;
  gap: 0 !important;
  padding: max(1.1%, env(safe-area-inset-top)) 1.3% max(0px, env(safe-area-inset-bottom)) !important;
}

.mk-board {
  min-height: 0 !important;
  height: 107%;
}

.mk-message {
  font-size: clamp(12px, 3.4vw, 15px) !important;
  line-height: 1.2;
	text-align: left;
}

.mk-actions {
  min-height: 0;
}

.mk-shelf {
  align-self: stretch;
  min-height: 0;
}

.mk-characters {
  min-height: 0;
}

.mk-item.is-first-hint .mk-item-img {
  animation: makai-shake .42s ease-in-out 1;
}

.mk-item.is-revealing .mk-item-img {
  animation: makai-shake .42s ease-in-out 2;
}

@media (max-width: 520px) {
  .mk-play {
    grid-template-rows: 20.2% 57.4% 22.4% !important;
  }
  .mk-board {
    min-height: 0 !important;
    padding: 4% 10% !important;
  }
  .mk-shelf {
    gap: 15% 0 !important;
    padding: 11.8% 4.8% 1.6% !important;
  }
}

@media (max-height: 700px) {
  .mk-play {
    grid-template-rows: 20.2% 57.4% 22.4% !important;
  }
  .mk-board {
    min-height: 0 !important;
  }
}


/* --- fixed: demon reveal moves upward with transform, not bottom --- */
.mk-item.is-demon.is-capture-target .mk-item-img {
  transform: translateX(-50%) translateY(-10%) scale(1.48);
  animation: demon-pulse 1.2s ease-in-out infinite;
}


/* --- item name labels: visible only before the first remember step --- */
.mk-item-label {
  position: absolute;
  left: 50%;
  bottom: -1.55em;
  z-index: 6;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2em;
  max-width: 7em;
  padding: .16em .46em .18em;
  border: 1px solid rgba(82, 45, 18, .58);
  border-radius: 5px;
  background: rgba(244, 225, 178, .88);
  color: #251208;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .32);
  font-size: clamp(10px, 2.25vw, 14px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
}

.mk-shelf.has-item-labels .mk-item-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.mk-shelf:not(.has-item-labels) .mk-item-label {
  opacity: 0;
  transform: translateX(-50%) translateY(-3px);
}

@media (max-width: 520px) {
  .mk-item-label {
    bottom: -1.65em;
    max-width: 6.6em;
    padding: .13em .38em .16em;
    font-size: clamp(10px, 3.55vw, 14px);
  }
}

#modalDesc{
	text-align: left;
}


/* --- marked text from engine: 〘〘 ... 〙〙 --- */

.mk-mark {
  color: #8a174d;
  font-weight: 900;
  background: linear-gradient(transparent 58%, rgba(255, 214, 94, .76) 58%);
  padding: 0 .06em;
}

/* --- board内ボタン：魔界札デザイン（高さ維持） --- */
.mk-board .mk-main-btn {
  position: relative;
  min-height: 36px;
  height: 36px;
  max-height: 36px;
  padding: 3px 24px 4px;
  border: 1px solid rgba(36, 14, 8, .92);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 232, 151, .42), transparent 36%),
    linear-gradient(180deg, #8a2f22 0%, #4b1713 50%, #1b0708 100%);
  color: #ffe7a2;
  font-weight: 900;
  letter-spacing: .08em;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, .95),
    0 0 7px rgba(255, 190, 70, .58);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 155, .38),
    inset 0 -2px 0 rgba(0, 0, 0, .36),
    0 2px 0 rgba(22, 7, 5, .95),
    0 0 10px rgba(127, 34, 83, .38);
  overflow: hidden;
}

.mk-board .mk-main-btn::before {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 4px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 232, 160, .28), transparent);
  pointer-events: none;
}

.mk-board .mk-main-btn::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 211, 103, .84);
  font-size: .68em;
  line-height: 1;
  text-shadow: 0 0 7px rgba(255, 194, 66, .8);
  pointer-events: none;
}

.mk-board .mk-main-btn:hover {
  filter: brightness(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 155, .46),
    inset 0 -2px 0 rgba(0, 0, 0, .36),
    0 2px 0 rgba(22, 7, 5, .95),
    0 0 14px rgba(194, 55, 113, .56);
}

.mk-board .mk-main-btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 155, .26),
    inset 0 -1px 0 rgba(0, 0, 0, .36),
    0 1px 0 rgba(22, 7, 5, .95),
    0 0 8px rgba(127, 34, 83, .35);
}

.mk-board .mk-main-btn[disabled] {
  opacity: .58;
  filter: grayscale(.25) brightness(.78);
}

@media (max-width: 520px) {
  .mk-board .mk-main-btn {
    min-height: 38px;
    height: 38px;
    max-height: 38px;
    padding: 4px 22px 5px;
  }
}



/* --- board説明文：RPG風タイプライター表示（カーソルなし） --- */
.mk-message.is-typing {
  white-space: pre-wrap;
}


/* 魔界家族トップへボタン */
.mkz-bottom-nav {
  width: 100%;
  text-align: center;
  margin: 60px auto 24px;
}

.mkz-top-link {
  display: inline-block;
  line-height: 0;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.mkz-top-link img {
  width: 220px !important;
  max-width: 40vw !important;
  height: auto;
  display: block;
}

.mkz-top-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.mkz-top-link:active {
  transform: translateY(1px) scale(0.98);
}

/* スマホ微調整 */
@media (max-width: 640px) {
  .mkz-bottom-nav {
    margin: 40px auto 20px;
  }

  .mkz-top-link img {
    width: 40vw;
    min-width: 140px;
    max-width: 190px;
  }
}

/* =========================================================
   2026-06 iOS Safari fix v7
   - Android/Chrome are left untouched
   - Fixes Safari shelf clipping without forcing full-body characters
   ========================================================= */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 520px) {
    :root {
      --mk-stage-w: min(100vw, 640px);
    }

    .mk-shell {
      width: min(100vw, 640px) !important;
      max-width: 941px !important;
      aspect-ratio: auto !important;
      min-height: 100svh !important;
      min-height: 100dvh !important;
      height: auto !important;
      max-height: none !important;
      overflow: hidden !important;
    }

    .mk-start,
    .mk-play {
      min-height: 100svh !important;
      min-height: 100dvh !important;
      height: auto !important;
    }

    .mk-play {
      display: grid !important;
      grid-template-rows: 126px 1fr 158px !important;
      gap: 0 !important;
      padding: max(8px, env(safe-area-inset-top)) 6px max(0px, env(safe-area-inset-bottom)) !important;
      overflow: visible !important;
    }

    .mk-board {
      height: auto !important;
      min-height: 126px !important;
      max-height: 126px !important;
      padding: 4% 10% !important;
      overflow: visible !important;
    }

    .mk-message {
      font-size: clamp(12px, 3.3vw, 15px) !important;
      line-height: 1.2 !important;
    }

    .mk-actions {
      min-height: 34px !important;
    }

    /* Shelf: keep all 3 rows visible, but restore a little top breathing room. */
    .mk-shelf {
      height: clamp(350px, calc(100dvh - 284px), 468px) !important;
      min-height: 0 !important;
      align-self: stretch !important;
      grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
      gap: 7.4% 0 !important;
      padding: 9.6% 4.8% 4.2% !important;
      overflow: visible !important;
    }

    .mk-shelf-board-img--1 { top: 29% !important; width: 100% !important; }
    .mk-shelf-board-img--2 { top: 62% !important; width: 100% !important; }
    .mk-shelf-board-img--3 { top: 95% !important; width: 100% !important; }

    /* Characters: crop the lower body naturally instead of shrinking full-body art. */
    .mk-characters {
      position: relative !important;
      height: 158px !important;
      min-height: 158px !important;
      max-height: 158px !important;
      display: grid !important;
      grid-template-columns: 38% 62% !important;
      align-items: end !important;
      margin-top: 0 !important;
      padding-top: 0 !important;
      overflow: hidden !important;
      pointer-events: none !important;
    }

    .mk-bro {
      align-self: end !important;
      justify-self: start !important;
      width: auto !important;
      height: 180px !important;
      max-width: none !important;
      max-height: none !important;
      object-fit: contain !important;
      object-position: left bottom !important;
      transform: translate(7%, 17%) !important;
      filter: drop-shadow(0 5px 4px rgba(0,0,0,.45));
    }

    .mk-kel-btn {
      align-self: end !important;
      justify-self: end !important;
      width: 106% !important;
      height: 190px !important;
      max-height: none !important;
      margin-right: -1% !important;
      padding: 0 !important;
      overflow: visible !important;
      pointer-events: none;
    }

    .mk-kel {
      width: 100% !important;
      height: 190px !important;
      max-height: none !important;
      object-fit: contain !important;
      object-position: right bottom !important;
      margin-top: 0 !important;
      transform: translateY(19%) !important;
      filter: drop-shadow(0 5px 4px rgba(0,0,0,.45));
    }

    .mk-kel-btn.is-capture-target {
      pointer-events: auto;
    }
  }

  /* iPhone 13 mini / narrow Safari viewport tuning */
  @media (max-width: 390px) and (max-height: 850px) {
    .mk-play {
      grid-template-rows: 124px 1fr 150px !important;
    }

    .mk-board {
      min-height: 124px !important;
      max-height: 124px !important;
      padding: 4% 10% !important;
    }

    .mk-shelf {
      height: clamp(342px, calc(100dvh - 274px), 452px) !important;
      gap: 7% 0 !important;
      padding: 9.8% 4.8% 4.4% !important;
    }

    .mk-characters {
      height: 150px !important;
      min-height: 150px !important;
      max-height: 150px !important;
      grid-template-columns: 38% 62% !important;
    }

  .mk-bro {
    width: 116% !important;
    transform: translateX(7%) !important;
    position: relative !important;
    top: -14px !important;
  }

    .mk-kel-btn {
      height: 182px !important;
      width: 100% !important;
    }

  .mk-kel {
    height: 182px !important;
    transform: none !important;
    position: relative !important;
    top: -18px !important;
  }
  }
}

/* =========================================================
   2026-06 iOS Safari fix v8
   - Keep v7 shelf + Kel balance
   - Enlarge only brother illustration to chest-up feeling
   ========================================================= */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 520px) {
    .mk-bro {
      height: 230px !important;
      width: auto !important;
      max-width: none !important;
      max-height: none !important;
      align-self: end !important;
      justify-self: start !important;
      object-fit: contain !important;
      object-position: left top !important;
      transform: translate(9%, 35%) !important;
    }
  }

  /* iPhone 13 mini / narrow Safari viewport tuning */
  @media (max-width: 390px) and (max-height: 850px) {
    .mk-bro {
      height: 300px !important;
      transform: translate(18%, 16%) !important;
    }
  }
}