/* 「！」だけが斜めに倒れて「／」に見える。Shippori Mincho B1 の字形なので、
   この一字だけ端末の明朝・ゴシックへ逃がす。無い端末では今までどおりに戻るだけ。 */
@font-face {
  font-family: "Upright Bang";
  src:
    local("Yu Mincho"),
    local("YuMincho"),
    local("Hiragino Mincho ProN"),
    local("Yu Gothic"),
    local("Hiragino Kaku Gothic ProN"),
    local("Meiryo");
  unicode-range: U+FF01, U+203C, U+2049;
}

/*
 * High-impact decision effects.
 * Loaded after style.css so these game-critical controls always win the cascade.
 */

[hidden] {
  display: none !important;
}

/* Large, quiet utility controls: no tutorial copy and no micro type. */

.turn-status {
  width: 20.4%;
  min-height: clamp(92px, calc(8 * var(--shell-vw)), 146px);
  left: 1%;
  bottom: 6%;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: clamp(7px, calc(0.55 * var(--shell-vw)), 11px);
  padding: clamp(8px, calc(0.68 * var(--shell-vw)), 13px) !important;
  border: 1px solid rgba(179, 159, 191, 0.52);
  border-left: 0 !important;
  border-radius: clamp(7px, calc(0.55 * var(--shell-vw)), 11px);
  background:
    linear-gradient(145deg, rgba(71, 65, 77, 0.2), transparent 48%),
    rgba(3, 11, 10, 0.96);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 calc(0.45 * var(--shell-vw)) calc(1.2 * var(--shell-vw)) rgba(0, 0, 0, 0.46);
}

.turn-status > .turn-lamp {
  width: clamp(12px, calc(0.9 * var(--shell-vw)), 17px);
  height: clamp(12px, calc(0.9 * var(--shell-vw)), 17px);
}

.turn-status .hand-meta {
  grid-column: 2;
  gap: clamp(5px, calc(0.38 * var(--shell-vw)), 8px);
  color: #eae5ed;
  font-size: clamp(13px, calc(0.86 * var(--shell-vw)), 17px) !important;
  font-weight: 900;
}

.turn-status .hand-meta span {
  padding: 0.28em 0.55em;
  border-color: rgba(183, 160, 196, 0.4);
  border-radius: 999px;
  background: rgba(26, 24, 28, 0.86);
}

.turn-status .hand-meta span:empty {
  display: none;
}

.assist-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(5px, calc(0.38 * var(--shell-vw)), 8px) !important;
  margin: 0 !important;
}

.assist-controls > * {
  min-height: clamp(38px, calc(2.65 * var(--shell-vw)), 51px) !important;
  display: grid;
  place-items: center;
  padding: 0.35em 0.45em !important;
  border: 1px solid rgba(188, 184, 191, 0.46) !important;
  border-radius: clamp(5px, calc(0.38 * var(--shell-vw)), 8px) !important;
  background: linear-gradient(180deg, #232125, #0b1311) !important;
  color: #e6e6e7 !important;
  font-size: clamp(12px, calc(0.82 * var(--shell-vw)), 16px) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-shadow: 0 1px 1px #000;
  white-space: nowrap;
}

.assist-controls button.active,
.assist-controls .assist-fixed {
  border-color: #a293b2 !important;
  background: linear-gradient(180deg, #41354e, #241d2b) !important;
  color: #effff9 !important;
  box-shadow: inset 0 0 0 1px rgba(228, 221, 236, 0.18), 0 0 calc(0.6 * var(--shell-vw)) rgba(131, 108, 155, 0.22);
}

.item-button strong,
.item-state {
  font-size: clamp(14px, calc(0.9 * var(--shell-vw)), 17px) !important;
}

/* The riichi control remains the visual anchor even while unavailable. */

.action-bar {
  width: clamp(220px, 20%, 390px);
  min-height: clamp(86px, calc(7.2 * var(--shell-vw)), 138px);
  right: 1%;
  bottom: 7%;
  grid-template-columns: minmax(0, 1.7fr) minmax(76px, 0.8fr) !important;
  gap: clamp(7px, calc(0.52 * var(--shell-vw)), 11px) !important;
  padding: 0 !important;
  overflow: visible;
  border: 0 !important;
  outline: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.action-bar #riichi-button {
  min-height: clamp(86px, calc(7.2 * var(--shell-vw)), 138px) !important;
  position: relative;
  grid-column: 1;
  grid-row: 1;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-content: center;
  padding: calc(0.45 * var(--shell-vw)) calc(0.6 * var(--shell-vw)) !important;
  border: 2px solid #746a79;
  border-radius: clamp(9px, calc(0.7 * var(--shell-vw)), 14px);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 40%),
    linear-gradient(180deg, #343335, #161417);
  color: #a79fac;
  text-align: center;
  opacity: 1;
  box-shadow:
    inset 0 0 0 2px #080c0b,
    inset 0 0 calc(1.4 * var(--shell-vw)) rgba(255, 255, 255, 0.035),
    0 calc(0.36 * var(--shell-vw)) 0 #020403,
    0 calc(0.65 * var(--shell-vw)) calc(1.25 * var(--shell-vw)) rgba(0, 0, 0, 0.5);
}

.action-bar #riichi-button strong {
  display: block;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(34px, calc(3 * var(--shell-vw)), 58px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}

.action-bar #riichi-button.mode-active strong {
  font-size: clamp(26px, calc(2.25 * var(--shell-vw)), 44px);
  letter-spacing: 0.04em;
  text-indent: 0.04em;
}

.action-bar #riichi-button:not(:disabled) {
  border-color: #d9c1e7;
  background:
    linear-gradient(110deg, transparent 0 33%, rgba(255, 255, 255, 0.82) 43%, transparent 53%) -180% 0 / 65% 100% no-repeat,
    radial-gradient(circle at 50% 115%, #b483d0 0, #cc3f86 45%, #7b1b4b 76%),
    linear-gradient(180deg, #d74990, #7b184a);
  color: #fffbe7;
  text-shadow:
    0 2px 0 #521232,
    0 0 0.32em #d7bee6,
    0 0 0.72em #8f46b9;
  box-shadow:
    inset 0 0 0 2px #521433,
    inset 0 0 calc(1.5 * var(--shell-vw)) rgba(184, 138, 211, 0.72),
    0 5px 0 #43102a,
    0 0 0 3px rgba(177, 126, 206, 0.28),
    0 0 calc(1.3 * var(--shell-vw)) #9f61c3,
    0 0 calc(3 * var(--shell-vw)) rgba(226, 54, 140, 0.68);
  animation: riichi-ready-beat 0.82s cubic-bezier(0.22, 0.8, 0.24, 1) infinite,
    riichi-ready-sweep 1.25s linear infinite;
}

.action-bar #riichi-button:not(:disabled)::before,
.action-bar #riichi-button:not(:disabled)::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.action-bar #riichi-button:not(:disabled)::before {
  width: 150%;
  aspect-ratio: 1;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(217, 193, 231, 0.45) 0 3deg,
    transparent 3deg 13deg
  );
  animation: riichi-ready-rays 8s linear infinite;
}

.action-bar #riichi-button:not(:disabled)::after {
  inset: 4px;
  border: 1px solid rgba(238, 227, 244, 0.75);
  border-radius: inherit;
  box-shadow: inset 0 0 calc(0.8 * var(--shell-vw)) rgba(241, 232, 246, 0.64);
}

.action-bar #riichi-button.mode-active:not(:disabled) {
  filter: hue-rotate(-18deg) saturate(1.35);
  animation-duration: 0.5s, 0.78s;
}

.action-bar #ankan-button {
  min-height: clamp(86px, calc(7.2 * var(--shell-vw)), 138px) !important;
  grid-column: 2;
  grid-row: 1;
  padding: 0.5em !important;
  border: 1px solid #897e8f;
  border-radius: clamp(9px, calc(0.7 * var(--shell-vw)), 14px);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), transparent 42%),
    linear-gradient(180deg, #323034, #141315);
  color: #e7e6e8;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(20px, calc(1.55 * var(--shell-vw)), 30px) !important;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  text-shadow: 0 2px 0 #000;
  box-shadow:
    inset 0 0 0 1px #090d0c,
    0 calc(0.36 * var(--shell-vw)) 0 #020403,
    0 calc(0.65 * var(--shell-vw)) calc(1.25 * var(--shell-vw)) rgba(0, 0, 0, 0.5);
}

.action-bar #ankan-button:not(:disabled) {
  border-color: #c1a4d2;
  background:
    linear-gradient(145deg, rgba(220, 198, 233, 0.14), transparent 42%),
    linear-gradient(180deg, #47394f, #1c1421);
  color: #e2cfed;
  box-shadow:
    inset 0 0 0 1px #171105,
    0 calc(0.36 * var(--shell-vw)) 0 #100b03,
    0 0 calc(1 * var(--shell-vw)) rgba(173, 135, 195, 0.26);
}

.action-bar #ankan-button:disabled {
  opacity: 0.62;
}

@keyframes riichi-ready-beat {
  0%,
  100% { scale: 1; filter: brightness(1); }
  46% { scale: 1.035; filter: brightness(1.28); }
  58% { scale: 0.995; }
}

@keyframes riichi-ready-sweep {
  0% { background-position: -180% 0, 0 0, 0 0; }
  100% { background-position: 380% 0, 0 0, 0 0; }
}

@keyframes riichi-ready-rays {
  to { rotate: 360deg; }
}

/* Mandatory, center-screen win confirmation. */

.win-confirm-prompt,
.riichi-effect {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 82;
  inset: 0;
  margin: auto;
  overflow: hidden;
}

.win-confirm-prompt {
  display: grid;
  place-items: center;
  pointer-events: auto;
  isolation: isolate;
}

.win-confirm-backdrop,
.win-confirm-rays,
.win-confirm-shock,
.win-confirm-sparks {
  position: absolute;
  pointer-events: none;
}

.win-confirm-backdrop {
  z-index: -4;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(1, 5, 6, 0.86), rgba(2, 8, 9, 0.28) 30% 70%, rgba(1, 5, 6, 0.86)),
    radial-gradient(circle at center, rgba(122, 17, 70, 0.24), rgba(0, 0, 0, 0.56) 62%);
  animation: win-backdrop-in 0.22s ease-out both;
}

.win-confirm-rays {
  z-index: -3;
  width: min(calc(76 * var(--shell-vw)), calc(135 * var(--shell-vh)));
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from -8deg,
    rgba(191, 149, 215, 0.24) 0 4deg,
    transparent 4deg 14deg,
    rgba(226, 52, 139, 0.16) 14deg 18deg,
    transparent 18deg 29deg
  );
  mix-blend-mode: screen;
  animation: win-rays-in 0.48s cubic-bezier(0.12, 0.78, 0.18, 1.15) both,
    win-rays-turn 12s 0.48s linear infinite;
}

.win-confirm-shock {
  z-index: -2;
  width: min(calc(31 * var(--shell-vw)), calc(55 * var(--shell-vh)));
  aspect-ratio: 1;
  border: clamp(5px, calc(0.6 * var(--shell-vw)), 12px) solid rgba(211, 183, 227, 0.88);
  border-radius: 50%;
  box-shadow:
    0 0 calc(2 * var(--shell-vw)) #d7bee6,
    inset 0 0 calc(2 * var(--shell-vw)) #e3398e;
  animation: win-shock 1.05s ease-out infinite;
}

.win-confirm-copy {
  position: relative;
  display: grid;
  place-items: center;
  gap: clamp(5px, calc(0.42 * var(--shell-vw)), 9px);
  transform: skew(-4deg);
  animation: win-copy-slam 0.36s cubic-bezier(0.04, 0.84, 0.16, 1.2) both;
}

.win-confirm-copy::before,
.win-confirm-copy::after {
  content: "";
  width: 155%;
  height: clamp(2px, calc(0.18 * var(--shell-vw)), 4px);
  position: absolute;
  left: 50%;
  translate: -50%;
  background: linear-gradient(90deg, transparent, #dbc4e9 18% 82%, transparent);
  box-shadow: 0 0 calc(1.2 * var(--shell-vw)) #9e5fc2;
}

.win-confirm-copy::before { top: 9%; }
.win-confirm-copy::after { bottom: 20%; }

#win-confirm-kicker {
  color: #d5bae5;
  font-size: clamp(13px, calc(1.1 * var(--shell-vw)), 21px);
  font-weight: 900;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-shadow: 0 2px 0 #440e29, 0 0 calc(0.8 * var(--shell-vw)) #9f60c3;
}

#win-button {
  min-width: clamp(260px, calc(28 * var(--shell-vw)), 530px);
  min-height: clamp(116px, calc(12 * var(--shell-vw)), 225px);
  position: relative;
  overflow: hidden;
  border: clamp(3px, calc(0.28 * var(--shell-vw)), 6px) solid #dbc4e8;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  background:
    linear-gradient(105deg, transparent 0 38%, rgba(255, 255, 255, 0.9) 47%, transparent 56%) -140% 0 / 62% 100% no-repeat,
    radial-gradient(circle at 50% 115%, #ad77cc, #d23a86 43%, #781748 74%),
    #8c1d55;
  color: #fffdf0;
  cursor: pointer;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(62px, calc(7.7 * var(--shell-vw)), 146px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-shadow:
    0 0.04em 0 #501030,
    0 0.08em 0 #2b0619,
    0 0 0.16em #c097d8,
    0 0 0.38em #e33d90;
  box-shadow:
    inset 0 0 0 3px #62143b,
    inset 0 0 calc(2 * var(--shell-vw)) rgba(176, 125, 206, 0.82),
    0 calc(0.42 * var(--shell-vw)) 0 #400c26,
    0 0 0 calc(0.35 * var(--shell-vw)) rgba(166, 109, 199, 0.22),
    0 0 calc(2 * var(--shell-vw)) #9f60c3,
    0 0 calc(6 * var(--shell-vw)) rgba(225, 45, 135, 0.82);
  animation: win-button-beat 0.68s cubic-bezier(0.22, 0.78, 0.2, 1) infinite,
    win-button-sweep 1.15s linear infinite;
}

.win-confirm-prompt.ron #win-button {
  background:
    linear-gradient(105deg, transparent 0 38%, rgba(255, 255, 255, 0.94) 47%, transparent 56%) -140% 0 / 62% 100% no-repeat,
    radial-gradient(circle at 50% 115%, #b98bd3, #c93881 42%, #4c0b2c 76%);
}

#win-button:hover {
  filter: brightness(1.32) saturate(1.25);
  scale: 1.045;
}

#win-button:active {
  translate: 0 calc(0.38 * var(--shell-vw));
  scale: 0.98;
}

#pass-button {
  min-width: clamp(96px, calc(8.5 * var(--shell-vw)), 164px);
  min-height: clamp(32px, calc(2.7 * var(--shell-vw)), 52px);
  margin-top: calc(0.2 * var(--shell-vw));
  border: 1px solid rgba(224, 222, 225, 0.55);
  border-radius: 3px;
  background: rgba(7, 14, 14, 0.9);
  color: #d3d2d4;
  cursor: pointer;
  font-size: clamp(16px, calc(1.05 * var(--shell-vw)), 20px);
  font-weight: 800;
}

.win-confirm-sparks {
  z-index: -1;
  width: 64%;
  height: 72%;
}

.win-confirm-sparks i {
  width: clamp(5px, calc(0.5 * var(--shell-vw)), 10px);
  height: clamp(28px, calc(4 * var(--shell-vw)), 76px);
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  background: linear-gradient(#ebdef3, #a367c6, transparent);
  filter: drop-shadow(0 0 calc(0.45 * var(--shell-vw)) #9c5dc1);
  transform-origin: 50% 0;
  animation: win-spark 0.9s ease-out infinite;
}

.win-confirm-sparks i:nth-child(1) { rotate: 12deg; animation-delay: -0.12s; }
.win-confirm-sparks i:nth-child(2) { rotate: 58deg; animation-delay: -0.48s; }
.win-confirm-sparks i:nth-child(3) { rotate: 104deg; animation-delay: -0.26s; }
.win-confirm-sparks i:nth-child(4) { rotate: 151deg; animation-delay: -0.68s; }
.win-confirm-sparks i:nth-child(5) { rotate: 198deg; animation-delay: -0.18s; }
.win-confirm-sparks i:nth-child(6) { rotate: 242deg; animation-delay: -0.54s; }
.win-confirm-sparks i:nth-child(7) { rotate: 288deg; animation-delay: -0.34s; }
.win-confirm-sparks i:nth-child(8) { rotate: 334deg; animation-delay: -0.76s; }

@keyframes win-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes win-rays-in {
  from { opacity: 0; scale: 0.05; rotate: -20deg; }
  to { opacity: 1; scale: 1; rotate: 0; }
}

@keyframes win-rays-turn {
  to { rotate: 360deg; }
}

@keyframes win-shock {
  0% { opacity: 0.9; scale: 0.55; }
  75%,
  100% { opacity: 0; scale: 1.85; }
}

@keyframes win-copy-slam {
  from { opacity: 0; scale: 3.2; filter: brightness(3); }
  68% { opacity: 1; scale: 0.92; filter: brightness(1.4); }
  to { opacity: 1; scale: 1; filter: none; }
}

@keyframes win-button-beat {
  0%,
  100% { scale: 1; }
  44% { scale: 1.055; }
  58% { scale: 0.99; }
}

@keyframes win-button-sweep {
  0% { background-position: -140% 0, 0 0, 0 0; }
  100% { background-position: 350% 0, 0 0, 0 0; }
}

@keyframes win-spark {
  from { opacity: 0; translate: 0 0; scale: 0.25; }
  24% { opacity: 1; }
  to { opacity: 0; translate: 0 calc(-31 * var(--shell-vh)); scale: 1; }
}

/* Both players receive the same full-table riichi announcement. */

.riichi-effect {
  z-index: 84;
  display: grid;
  place-items: center;
  pointer-events: auto;
  isolation: isolate;
}

.riichi-effect-wash,
.riichi-effect-rays {
  position: absolute;
  inset: 0;
}

.riichi-effect-wash {
  z-index: -3;
  background:
    linear-gradient(105deg, rgba(211, 182, 227, 0) 14%, rgba(211, 182, 227, 0.82) 46%, rgba(153, 32, 93, 0.82) 51%, rgba(0, 0, 0, 0) 79%),
    rgba(0, 0, 0, 0.55);
  transform: skewX(-12deg) scaleX(1.25);
  animation: riichi-wash 1.2s cubic-bezier(0.05, 0.78, 0.17, 1) both;
}

.riichi-effect.anna .riichi-effect-wash {
  background:
    linear-gradient(105deg, rgba(0, 0, 0, 0) 14%, rgba(154, 129, 179, 0.72) 46%, rgba(74, 46, 99, 0.84) 51%, rgba(0, 0, 0, 0) 79%),
    rgba(0, 0, 0, 0.55);
}

.riichi-effect-rays {
  z-index: -2;
  left: 32%;
  right: 32%;
  background: repeating-conic-gradient(
    rgba(216, 191, 231, 0.58) 0 3deg,
    transparent 3deg 13deg
  );
  mix-blend-mode: screen;
  animation: riichi-action-rays 1.2s ease-out both;
}

.riichi-effect-stick {
  width: clamp(410px, calc(50 * var(--shell-vw)), 950px);
  height: clamp(30px, calc(3.3 * var(--shell-vw)), 62px);
  position: absolute;
  z-index: -1;
  top: 58%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: clamp(3px, calc(0.25 * var(--shell-vw)), 5px) solid #c7bdcd;
  border-radius: 999px;
  /* 1000点棒は白い棒に赤い点がひとつだけ。数字も飾りも載っていない。 */
  background: linear-gradient(180deg, #ffffff, #f6f3f8 58%, #ccc5d2);
  box-shadow: 0 calc(0.42 * var(--shell-vw)) 0 #353236, 0 0 calc(2 * var(--shell-vw)) #dec9ea, 0 0 calc(5 * var(--shell-vw)) #e33e91;
  transform: rotate(-8deg);
  animation: riichi-stick-slam 1.2s cubic-bezier(0.06, 0.75, 0.12, 1) both;
}

.riichi-effect.anna .riichi-effect-stick {
  box-shadow: 0 calc(0.42 * var(--shell-vw)) 0 #353236, 0 0 calc(2 * var(--shell-vw)) #dcd2e7, 0 0 calc(5 * var(--shell-vw)) #7c5e9b;
}

.riichi-effect-stick i {
  height: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #cf2233;
}

.riichi-effect-copy {
  display: grid;
  place-items: center;
  transform: skew(-7deg);
  text-align: center;
  animation: riichi-copy-strike 1.2s cubic-bezier(0.04, 0.82, 0.13, 1) both;
}

.riichi-effect-copy small {
  color: #e2d0ed;
  font-size: clamp(13px, calc(1 * var(--shell-vw)), 19px);
  font-weight: 900;
  letter-spacing: 0.48em;
  text-indent: 0.48em;
  text-shadow: 0 2px 4px #000, 0 0 calc(1 * var(--shell-vw)) #9f61c3;
}

.riichi-effect.anna .riichi-effect-copy small {
  color: #e4dcec;
  text-shadow: 0 2px 4px #000, 0 0 calc(1 * var(--shell-vw)) #8566a5;
}

.riichi-effect-copy strong {
  color: #eadcf2;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(92px, calc(14 * var(--shell-vw)), 265px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  -webkit-text-stroke: clamp(2px, calc(0.18 * var(--shell-vw)), 4px) #6b1d44;
  text-shadow:
    0 0.045em 0 #fff,
    0 0.09em 0 #8b2156,
    0 0.14em 0 #2f081c,
    0 0 0.26em #a367c6,
    0 0 0.6em #e3388e;
}

.riichi-effect.anna .riichi-effect-copy strong {
  -webkit-text-stroke-color: #42265a;
  text-shadow:
    0 0.045em 0 #fff,
    0 0.09em 0 #522f70,
    0 0.14em 0 #251433,
    0 0 0.26em #a58ac0,
    0 0 0.6em #703f9a;
}

.riichi-effect-copy span {
  margin-top: calc(0.8 * var(--shell-vw));
  color: #e1ceec;
  font-size: clamp(11px, calc(0.9 * var(--shell-vw)), 17px);
  font-weight: 900;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-shadow: 0 2px 4px #000;
}

@keyframes riichi-wash {
  0% { opacity: 0; translate: -90% 0; }
  17% { opacity: 1; translate: 0 0; }
  78% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 88% 0; }
}

@keyframes riichi-action-rays {
  0% { opacity: 0; scale: 0.1; rotate: -15deg; }
  25% { opacity: 1; scale: 1.3; }
  100% { opacity: 0; scale: 1.9; rotate: 24deg; }
}

@keyframes riichi-stick-slam {
  0% { opacity: 0; translate: calc(88 * var(--shell-vw)) calc(-38 * var(--shell-vh)); rotate: 20deg; }
  22% { opacity: 1; translate: calc(-3 * var(--shell-vw)) calc(1 * var(--shell-vh)); rotate: -11deg; }
  31% { translate: 0 0; rotate: -8deg; }
  76% { opacity: 1; }
  100% { opacity: 0; translate: calc(-74 * var(--shell-vw)) calc(24 * var(--shell-vh)); rotate: -22deg; }
}

@keyframes riichi-copy-strike {
  0% { opacity: 0; scale: 4.5; filter: brightness(4); }
  22% { opacity: 1; scale: 0.9; filter: brightness(1.5); }
  30% { scale: 1.04; }
  76% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 0.72; filter: brightness(1); }
}

/* Result tiles need the physical white tile body behind transparent face art. */

.result-tile {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: url("../assets/tiles/regular/Front.png") center / 100% 100% no-repeat !important;
  box-shadow: none;
}

.result-tile > .tile-face {
  width: 100%;
  height: 100%;
  display: block;
}

.result-tile > .tile-face > .tile-art {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Win and loss are deliberately different silhouettes, palettes and movement. */

.win-effect-outcome {
  display: block;
  margin: 0.18em 0 0.08em;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(28px, calc(3.4 * var(--shell-vw)), 64px);
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
}

.win-effect.player-win {
  grid-template-columns: 43% 57%;
  background:
    linear-gradient(102deg, rgba(19, 4, 7, 0.98) 0 34%, transparent 59%),
    repeating-linear-gradient(118deg, transparent 0 calc(3.8 * var(--shell-vw)), rgba(204, 172, 223, 0.035) calc(3.8 * var(--shell-vw)) calc(3.92 * var(--shell-vw))),
    radial-gradient(circle at 70% 47%, rgba(172, 118, 203, 0.52), transparent 31%),
    linear-gradient(135deg, #44102a, #170407 58%, #080303);
}

.win-effect.player-win .win-effect-outcome {
  border-block: 2px solid #d5bae5;
  color: #e2cfed;
  text-shadow: 0 0.08em 0 #8b2257, 0 0.16em 0 #2e071b, 0 0 0.42em #a062c3;
}

.win-effect.player-win .win-effect-rays {
  background: repeating-conic-gradient(
    from 0deg,
    rgba(203, 169, 223, 0.92) 0 2deg,
    transparent 2deg 9deg
  );
}

.win-effect.player-win .win-effect-slash {
  rotate: -11deg;
  border-color: #d9c0e7;
  background: linear-gradient(90deg, transparent 5%, #8c1d55 21%, #d5bae5 50%, #8c1d55 79%, transparent 95%);
  box-shadow: 0 0 calc(3 * var(--shell-vw)) #a062c3;
}

.win-effect.player-win .win-effect-copy {
  grid-column: 2;
  justify-self: end;
}

.win-effect.player-win .win-effect-character {
  grid-column: 1;
  justify-self: start;
}

.win-effect.anna-win {
  grid-template-columns: 56% 44%;
  background:
    linear-gradient(258deg, rgba(3, 8, 18, 0.99) 0 34%, transparent 60%),
    repeating-linear-gradient(-38deg, transparent 0 calc(2.8 * var(--shell-vw)), rgba(150, 124, 175, 0.045) calc(2.8 * var(--shell-vw)) calc(2.94 * var(--shell-vw))),
    radial-gradient(circle at 30% 48%, rgba(103, 66, 135, 0.42), transparent 31%),
    linear-gradient(135deg, #02060c, #1b1123 56%, #160309);
}

.win-effect.anna-win::before,
.win-effect.anna-win::after {
  content: "";
  width: 140%;
  height: clamp(4px, calc(0.34 * var(--shell-vw)), 7px);
  position: absolute;
  z-index: 2;
  left: -20%;
  background: linear-gradient(90deg, transparent, #8a6ca9 16% 45%, #e43f92 55% 84%, transparent);
  box-shadow: 0 0 calc(1.2 * var(--shell-vw)) #774b9e;
}

.win-effect.anna-win::before {
  top: 18%;
  rotate: -7deg;
}

.win-effect.anna-win::after {
  bottom: 16%;
  rotate: 8deg;
}

.win-effect.anna-win .win-effect-copy {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  transform: skew(5deg);
  text-shadow: 0 0.08em 0 #2a1938, 0 0.16em 0 #02070b;
}

.win-effect.anna-win .win-effect-character {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  transform: scale(1.08);
}

.win-effect.anna-win .win-effect-outcome {
  border-block: 2px solid #b7a2cd;
  color: #e6fbff;
  text-shadow: 0 0.08em 0 #42275a, 0 0.16em 0 #02070b, 0 0 0.42em #7846a3;
}

.win-effect.anna-win .win-effect-copy > small {
  border-color: #a992c0;
  color: #ded4e8;
}

.win-effect.anna-win .win-effect-copy > strong {
  color: #f4fdff;
  -webkit-text-stroke: clamp(1px, calc(0.11 * var(--shell-vw)), 2px) #321e44;
  text-shadow: 0 0.06em 0 #563276, 0 0.12em 0 #02070b, 0.04em 0.04em 0 #902058;
}

.win-effect.anna-win .win-effect-copy > span {
  border-color: #9f88b7;
  background: rgba(1, 13, 23, 0.9);
  color: #ece6f2;
}

.win-effect.anna-win .win-effect-score,
.win-effect.anna-win .win-effect-line {
  color: #ede8f2;
  text-shadow: 0 0.06em 0 #412659, 0 0.12em 0 #01060a;
}

.win-effect.anna-win .win-effect-rays {
  width: calc(92 * var(--shell-vw));
  height: calc(92 * var(--shell-vw));
  background: repeating-conic-gradient(
    from 8deg,
    rgba(149, 122, 176, 0.72) 0 1.4deg,
    transparent 1.4deg 7deg,
    rgba(228, 63, 146, 0.52) 7deg 8.4deg,
    transparent 8.4deg 15deg
  );
}

.win-effect.anna-win .win-effect-slash {
  rotate: 13deg;
  border-color: #a087ba;
  background: linear-gradient(90deg, transparent 5%, #331f45 22%, #b098c8 48%, #b82b72 72%, transparent 95%);
  box-shadow: 0 0 calc(2 * var(--shell-vw)) #7b4aa6;
}

.win-effect.active.player-win .win-effect-copy {
  animation: player-victory-strike 2.25s cubic-bezier(.08, .8, .18, 1) both;
}

.win-effect.active.anna-win .win-effect-copy {
  animation: anna-defeat-strike 2.25s cubic-bezier(.08, .8, .18, 1) both;
}

.win-effect.active.player-win .win-effect-character {
  animation: player-win-character 2.25s cubic-bezier(.15, .8, .18, 1) both;
}

.win-effect.active.anna-win .win-effect-character {
  animation: anna-win-character 2.25s cubic-bezier(.15, .8, .18, 1) both;
}

@keyframes player-victory-strike {
  0% { translate: calc(38 * var(--shell-vw)) 0; scale: 1.7; opacity: 0; }
  17% { translate: calc(-1.2 * var(--shell-vw)) 0; scale: 0.94; opacity: 1; }
  25% { translate: 0 0; scale: 1.03; }
  72% { translate: 0 0; scale: 1; opacity: 1; }
  100% { translate: calc(9 * var(--shell-vw)) 0; scale: 1.08; opacity: 0; }
}

@keyframes anna-defeat-strike {
  0% { translate: calc(-44 * var(--shell-vw)) 0; scale: 1.55; opacity: 0; }
  18% { translate: calc(1.4 * var(--shell-vw)) 0; scale: 0.93; opacity: 1; }
  27% { translate: 0 0; scale: 1.02; }
  72% { translate: 0 0; scale: 1; opacity: 1; }
  100% { translate: calc(-10 * var(--shell-vw)) 0; scale: 1.06; opacity: 0; }
}

@keyframes player-win-character {
  0% { translate: calc(-24 * var(--shell-vw)) calc(3 * var(--shell-vh)); scale: 0.86; opacity: 0; }
  18% { translate: 0 0; scale: 1.02; opacity: 1; }
  72% { translate: 0 0; scale: 1; opacity: 1; }
  100% { translate: calc(-3 * var(--shell-vw)) 0; scale: 1.02; opacity: 0; }
}

@keyframes anna-win-character {
  0% { translate: calc(25 * var(--shell-vw)) calc(-2 * var(--shell-vh)); scale: 1.34; opacity: 0; }
  18% { translate: 0 0; scale: 1.1; opacity: 1; }
  72% { translate: 0 0; scale: 1.08; opacity: 1; }
  100% { translate: calc(4 * var(--shell-vw)) 0; scale: 1.13; opacity: 0; }
}

/* Result dialog keeps the same win/loss language after the action ends. */

.result-showcase {
  position: relative;
}

.result-showcase.player-result {
  background:
    radial-gradient(circle at 29% 50%, rgba(204, 76, 140, 0.34), transparent 38%),
    linear-gradient(135deg, #220b17, #43172d 52%, #100507);
}

.result-showcase.anna-result {
  background:
    radial-gradient(circle at 28% 50%, rgba(110, 70, 145, 0.28), transparent 38%),
    linear-gradient(135deg, #02070d, #261a31 58%, #12040a);
}

.result-showcase {
  /* 右上の「RESULT 勝利」の幅。上段はこのぶん右を空けて、重なりを起こさない。 */
  --result-badge-w: clamp(88px, calc(9 * var(--shell-vw)), 170px);
}

.result-outcome-badge {
  min-width: var(--result-badge-w);
  position: absolute;
  z-index: 6;
  top: 2.2%;
  right: 1.8%;
  display: grid;
  place-items: center;
  padding: calc(0.45 * var(--shell-vw)) calc(0.8 * var(--shell-vw));
  border: 2px solid;
  transform: skew(-7deg);
  text-align: center;
}

.result-outcome-badge small {
  font: 900 clamp(7px, calc(0.58 * var(--shell-vw)), 11px)/1 ui-monospace, monospace;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
}

.result-outcome-badge strong {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(26px, calc(3 * var(--shell-vw)), 56px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}

.player-result .result-outcome-badge {
  border-color: #c59fdb;
  background: linear-gradient(135deg, #982f63, #4a102d);
  color: #e2cfed;
  box-shadow: 0 calc(0.4 * var(--shell-vw)) 0 #230815, 0 0 calc(1.2 * var(--shell-vw)) rgba(158, 95, 194, 0.52);
}

.anna-result .result-outcome-badge {
  border-color: #9f88b7;
  background: linear-gradient(135deg, #39224e, #140e1a);
  color: #e1fbff;
  box-shadow: 0 calc(0.4 * var(--shell-vw)) 0 #01080d, 0 0 calc(1.2 * var(--shell-vw)) rgba(126, 81, 166, 0.48);
}

.player-result .result-score {
  background: linear-gradient(90deg, rgba(140, 41, 91, 0.9), rgba(32, 9, 21, 0.94));
}

.anna-result .result-score {
  border-color: rgba(163, 140, 186, 0.66);
  background: linear-gradient(90deg, rgba(53, 31, 73, 0.92), rgba(7, 14, 22, 0.96));
}

.anna-result .result-score strong,
.anna-result .result-score span {
  color: #efeaf4;
  text-shadow: 0 0.08em 0 #42265a, 0 0.16em 0 #010609;
}

.anna-result .result-call-row {
  border-color: rgba(159, 136, 183, 0.58);
}

.anna-result .result-call-row strong {
  color: #efeaf4;
  text-shadow: 0 0.08em 0 #4b2c67, 0 0.15em 0 #01070c;
}

.anna-result .result-dialogue {
  border-left-color: #876ea1;
  background: rgba(1, 10, 17, 0.72);
}

.call-pass-button small {
  display: block;
  margin-top: 0.14em;
  color: #bc9acf;
  font-size: clamp(11px, calc(0.72 * var(--shell-vw)), 14px);
  font-weight: 800;
  letter-spacing: 0.08em;
}

@container shell (max-aspect-ratio: 4 / 3) {
  .action-bar {
    width: 21%;
  }

  #win-button {
    min-width: min(calc(68 * var(--shell-vw)), 530px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .action-bar #riichi-button:not(:disabled),
  #win-button,
  .win-confirm-rays,
  .win-confirm-shock,
  .win-confirm-sparks i {
    animation-duration: 1.8s;
  }
}

/* Keep table dialogue wholly inside the portrait layer, above the lower hand HUD. */
.game-frame .character-panel .anna-speech.kinugawa-message-panel.table-message-panel {
  width: 126%;
  max-width: min(calc(76 * var(--shell-vw)), 780px);
  min-height: clamp(112px, calc(8 * var(--shell-vw)), 154px);
  z-index: 38;
  top: auto;
  right: auto;
  bottom: clamp(76px, calc(8 * var(--shell-vh)), 118px);
  left: 4.5%;
  padding:
    clamp(31px, calc(2.15 * var(--shell-vw)), 42px)
    clamp(22px, calc(1.8 * var(--shell-vw)), 35px)
    clamp(16px, calc(1.1 * var(--shell-vw)), 23px);
}

.game-frame .character-panel .anna-speech .anna-line.kinugawa-message-text {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* ── 7-stack dead wall and supplied Kinugawa portraits ─────────────────── */

.center-console {
  max-width: min(720px, 54%) !important;
  grid-template-columns: minmax(72px, auto) minmax(94px, auto) auto !important;
  scale: 1 !important;
}

.center-console > .dead-wall-box {
  min-width: clamp(292px, 23cqw, 438px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 0.8cqw, 16px);
  padding-inline: clamp(10px, 0.8cqw, 16px) !important;
}

.dead-wall-box > .console-label {
  flex: 0 0 auto;
  color: #d5bae5 !important;
  font-size: clamp(18px, 1.15cqw, 23px) !important;
  font-weight: 900;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
}

.dead-wall {
  --dead-wall-tile-width: clamp(24px, 1.78cqw, 36px);
  display: grid;
  grid-template-columns: repeat(7, var(--dead-wall-tile-width));
  align-items: end;
  gap: clamp(2px, 0.18cqw, 4px);
}

.dead-wall-stack {
  display: grid;
  grid-template-rows: repeat(2, calc(var(--dead-wall-tile-width) * var(--tile-ratio, 1.4)));
  gap: 1px;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.58));
}

.dead-wall .dead-wall-tile {
  --tile-width: var(--dead-wall-tile-width);
  width: var(--dead-wall-tile-width) !important;
  min-width: 0 !important;
  height: calc(var(--dead-wall-tile-width) * var(--tile-ratio, 1.4)) !important;
  margin: 0 !important;
  border-radius: clamp(3px, 0.24cqw, 5px) !important;
}

.dead-wall .tile-back.dead-wall-tile {
  display: block;
  overflow: hidden;
}

.dead-wall .tile-back.dead-wall-tile > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
}

.dead-wall .dead-wall-indicator {
  z-index: 2;
  outline: 2px solid #ae81c9;
  box-shadow:
    0 0 0 2px rgba(65, 35, 82, 0.82),
    0 0 14px 4px rgba(164, 105, 198, 0.76) !important;
}

.dead-wall .indicator-stack:has(.dead-wall-indicator) {
  filter:
    drop-shadow(0 4px 3px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 8px rgba(162, 101, 197, 0.7));
}

#anna-portrait {
  object-fit: contain !important;
  object-position: 50% 100% !important;
}

.kinugawa-story-anna {
  height: 108% !important;
  max-width: 70% !important;
  top: -2% !important;
  right: 3% !important;
  object-fit: contain !important;
  object-position: 50% 0 !important;
}

.win-effect-face-frame > img,
.result-face-frame > img {
  width: 190% !important;
  height: 190% !important;
  max-width: none !important;
  position: absolute;
  top: 0;
  left: 50%;
  object-fit: contain !important;
  object-position: 50% 0 !important;
  transform: translateX(-50%) !important;
  transform-origin: 50% 0 !important;
}

/* Exhaustive draw with an exposed tenpai hand must fit as one complete board. */
#dialog-card.draw-result-dialog .draw-result:has(.draw-tenpai-reveal),
#dialog-card:has(> #dialog-content > .draw-result) .draw-result:has(.draw-tenpai-reveal) {
  min-height: 0;
  grid-template-rows: auto auto auto auto;
  align-content: center;
  gap: clamp(9px, calc(1.4 * var(--shell-vh)), 18px);
  padding: clamp(18px, calc(2.2 * var(--shell-vh)), 30px) clamp(22px, calc(2.4 * var(--shell-vw)), 42px);
}

#dialog-card.draw-result-dialog .draw-result:has(.draw-tenpai-reveal) .draw-result-title,
#dialog-card:has(> #dialog-content > .draw-result) .draw-result:has(.draw-tenpai-reveal) .draw-result-title {
  min-height: 0;
  align-self: center;
  padding: 0.08em 0 0.12em;
  overflow: visible;
}

#dialog-card.draw-result-dialog .draw-result:has(.draw-tenpai-reveal) .draw-result-title > strong,
#dialog-card:has(> #dialog-content > .draw-result) .draw-result:has(.draw-tenpai-reveal) .draw-result-title > strong {
  font-size: clamp(112px, calc(12 * var(--shell-vh)), 132px);
  line-height: 0.9;
}

#dialog-card.draw-result-dialog .draw-tenpai-reveal,
#dialog-card:has(> #dialog-content > .draw-result) .draw-tenpai-reveal {
  grid-template-columns: clamp(190px, 23%, 270px) minmax(0, 1fr);
  gap: clamp(14px, calc(1.5 * var(--shell-vw)), 26px);
  padding: clamp(10px, calc(1.2 * var(--shell-vh)), 17px) clamp(14px, calc(1.5 * var(--shell-vw)), 26px);
  overflow: hidden;
}

#dialog-card.draw-result-dialog .draw-tenpai-reveal > strong,
#dialog-card:has(> #dialog-content > .draw-result) .draw-tenpai-reveal > strong {
  /* 見出しは一行で出す。折り返すと「形」だけが次の行に落ちて読みにくい。 */
  font-size: clamp(24px, calc(2 * var(--shell-vw)), 36px);
  white-space: nowrap;
  text-align: center;
}

#dialog-card.draw-result-dialog .draw-tenpai-hand,
#dialog-card:has(> #dialog-content > .draw-result) .draw-tenpai-hand {
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-content: center;
  gap: 0.18cqi;
  margin: 0;
  padding-inline: 2px;
  overflow: hidden;
}

#dialog-card.draw-result-dialog .draw-tenpai-hand .result-tile,
#dialog-card:has(> #dialog-content > .draw-result) .draw-tenpai-hand .result-tile {
  --result-tile-width: min(6.2cqi, 50px) !important;
  width: var(--result-tile-width) !important;
  height: calc(var(--result-tile-width) * var(--tile-ratio, 1.4)) !important;
  flex: 0 0 var(--result-tile-width) !important;
  max-width: var(--result-tile-width) !important;
}

#dialog-card.draw-result-dialog .draw-tenpai-hand .result-meld,
#dialog-card:has(> #dialog-content > .draw-result) .draw-tenpai-hand .result-meld {
  min-width: 0;
  flex: 0 0 auto;
  gap: 0.12cqi;
  margin-left: 0.55cqi;
  padding-left: 0.55cqi;
}

/* ── Persistent table dialogue, anchored to Anna's portrait ─────────── */

.character-panel .anna-speech.kinugawa-message-panel.table-message-panel {
  width: 104%;
  min-height: clamp(118px, calc(8.6 * var(--shell-vw)), 164px);
  position: absolute;
  z-index: 30;
  top: auto;
  right: auto;
  bottom: clamp(10px, calc(1 * var(--shell-vw)), 19px);
  left: 5%;
  display: grid;
  align-content: center;
  padding:
    clamp(32px, calc(2.3 * var(--shell-vw)), 44px)
    clamp(22px, calc(1.8 * var(--shell-vw)), 35px)
    clamp(18px, calc(1.25 * var(--shell-vw)), 25px);
  overflow: visible;
  border: 2px solid rgba(255, 105, 208, 0.68);
  border-left: clamp(6px, calc(0.5 * var(--shell-vw)), 10px) solid #ec3475;
  border-radius: 6px;
  background:
    linear-gradient(112deg, rgba(116, 12, 63, 0.56), transparent 44%),
    linear-gradient(172deg, rgba(19, 9, 34, 0.97), rgba(6, 2, 13, 0.98) 62%) !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.74),
    0 0 32px rgba(217, 29, 158, 0.32),
    inset 0 1px 0 rgba(255, 236, 255, 0.12);
  backdrop-filter: none;
  pointer-events: none;
}

.character-panel .anna-speech.kinugawa-message-panel.table-message-panel[hidden] {
  display: none;
}

.character-panel .anna-speech > span.table-message-speaker {
  left: clamp(22px, calc(1.8 * var(--shell-vw)), 34px);
  padding:
    clamp(8px, calc(0.6 * var(--shell-vw)), 12px)
    clamp(25px, calc(1.8 * var(--shell-vw)), 35px)
    clamp(9px, calc(0.65 * var(--shell-vw)), 13px)
    clamp(21px, calc(1.5 * var(--shell-vw)), 29px);
  font-size: clamp(18px, calc(1.25 * var(--shell-vw)), 24px);
}

.character-panel .anna-speech .anna-line.kinugawa-message-text {
  color: #fff8ff;
  font-size: clamp(28px, calc(2.15 * var(--shell-vw)), 42px);
  font-weight: 900;
  line-height: 1.34;
  letter-spacing: 0.025em;
  text-wrap: pretty;
}

@container shell (max-width: 1100px) or (max-height: 720px) {
  .character-panel .anna-speech.kinugawa-message-panel.table-message-panel {
    width: 102%;
    min-height: 104px;
    bottom: 8px;
    left: 4%;
    padding: 30px 18px 15px;
  }

  .character-panel .anna-speech .anna-line.kinugawa-message-text {
    font-size: clamp(26px, calc(2.1 * var(--shell-vw)), 34px);
  }
}

@container shell (max-width: 1100px) {
  .center-console {
    max-width: 58% !important;
  }

  .center-console > .dead-wall-box {
    min-width: clamp(248px, calc(28 * var(--shell-vw)), 330px);
  }

  .dead-wall {
    --dead-wall-tile-width: clamp(21px, calc(2.45 * var(--shell-vw)), 30px);
  }
}

/* ── Zoom-safe table geometry and purpose-built hand console ───────────── */

.app-shell {
  container-type: inline-size;
  --hand-tile-width: 3.35cqw;
  --river-tile-width: 2.55cqw;
  --opponent-tile-width: 2.72cqw;
  --call-tile-width: 1.92cqw;
  --tile-ratio: 1.4;
}

/*
 * This area has exactly two jobs: show hand state and hold persistent toggles.
 * It is intentionally not styled as a message window.
 */

.turn-status {
  width: 20.4%;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 0.48cqw;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.hand-state-core {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.55cqw;
  padding-inline: 0.28cqw;
}

.hand-state-core > .turn-lamp {
  width: 0.78cqw;
  height: 0.78cqw;
  min-width: 9px;
  min-height: 9px;
  flex: 0 0 auto;
}

.turn-status .hand-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  grid-column: auto;
  gap: 0.35cqw;
  color: #f0e6f5;
  font-size: 1.02cqw !important;
  line-height: 1;
}

.turn-status .hand-meta span {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
}

#shanten-label {
  color: #e9daf1;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.28em;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 0 #000;
}

#wait-label {
  overflow: hidden;
  color: #d1cfd3;
  font-size: 0.88em;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.turn-status .assist-controls {
  grid-column: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(190, 187, 193, 0.46);
  border-radius: 0.52cqw;
  background: rgba(3, 10, 9, 0.86);
  box-shadow: 0 0.35cqw 0.85cqw rgba(0, 0, 0, 0.34);
}

.turn-status .assist-controls > * {
  min-width: 0;
  min-height: 2.6cqw !important;
  padding: 0.32cqw 0.2cqw !important;
  border: 0 !important;
  border-right: 1px solid rgba(190, 187, 193, 0.3) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #222024, #0a1210) !important;
  color: #eae9ea !important;
  font-size: 0.78cqw !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  white-space: nowrap;
}

.turn-status .assist-controls > :last-child {
  border-right: 0 !important;
}

.turn-status .assist-controls button.active,
.turn-status .assist-controls .assist-fixed {
  background: linear-gradient(180deg, #433551, #271e30) !important;
  color: #f1fff9 !important;
  box-shadow: inset 0 -0.18cqw 0 rgba(144, 120, 168, 0.18);
}

/* One source of truth for every physical tile footprint. */

.player-hand {
  gap: 0.18cqw !important;
}

.player-hand > .tile {
  --tile-width: var(--hand-tile-width);
  width: var(--hand-tile-width) !important;
  min-width: 0 !important;
  height: calc(var(--hand-tile-width) * var(--tile-ratio)) !important;
  flex: 0 0 var(--hand-tile-width) !important;
}

.player-hand > .tile.drawn {
  margin-left: 0.7cqw !important;
}

.opponent-hand {
  gap: 0.16cqw !important;
}

.opponent-hand > .tile-back {
  width: var(--opponent-tile-width) !important;
  min-width: 0 !important;
  height: calc(var(--opponent-tile-width) * var(--tile-ratio)) !important;
  flex: 0 0 var(--opponent-tile-width) !important;
}

.river {
  width: max-content;
  max-width: 100%;
  grid-template-columns: repeat(8, var(--river-tile-width)) !important;
  grid-auto-rows: calc(var(--river-tile-width) * var(--tile-ratio)) !important;
  column-gap: 0.22cqw !important;
  row-gap: 0.28cqw !important;
  overflow: visible;
}

.river > .mini-tile,
.meld-group > .mini-tile {
  --tile-width: var(--river-tile-width);
  width: var(--river-tile-width) !important;
  min-width: 0 !important;
  height: calc(var(--river-tile-width) * var(--tile-ratio)) !important;
  flex: 0 0 var(--river-tile-width) !important;
}

.river > .mini-tile.riichi-discard {
  grid-column: span 2;
  justify-self: center;
  margin: 0 !important;
  rotate: 90deg;
}

.meld-group {
  gap: 0.08cqw !important;
}

.call-prompt .call-tiles {
  gap: 0.12cqw !important;
}

.call-prompt .call-tile,
.kan-tile-face {
  --tile-width: var(--call-tile-width);
  width: var(--call-tile-width) !important;
  min-width: 0 !important;
  height: calc(var(--call-tile-width) * var(--tile-ratio)) !important;
  flex: 0 0 var(--call-tile-width) !important;
  overflow: visible;
  background: url("../assets/tiles/regular/Front.png") center / 100% 100% no-repeat !important;
}

.call-prompt .call-tile > .tile-art,
.kan-tile-face > .tile-art {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.result-tile {
  /* cqw は近くに問い合わせ先がないとウィンドウ幅で解かれ、広い画面ほど牌が
     大きくなって結果画面からあふれていた。枠は1920固定なので実寸で決める。
     牌数が多い手（カンや鳴き）では --result-tile-count が入り、そのぶん縮む。 */
  --result-tile-width: min(
    calc(2 * var(--shell-vw)),
    calc(46 * var(--shell-vw) / var(--result-tile-count, 14))
  ) !important;
  width: var(--result-tile-width) !important;
  min-width: 0 !important;
  height: calc(var(--result-tile-width) * var(--tile-ratio, 1.4)) !important;
  flex: 0 0 var(--result-tile-width) !important;
}

@container shell (max-aspect-ratio: 4 / 3) {
  .app-shell {
    --hand-tile-width: 3.16cqw;
    --river-tile-width: 2.35cqw;
  }

  .turn-status {
    width: 21.5%;
  }
}

/* ── Shuffle Time: one-screen responsive hand tray ─────────────────────── */

.shuffle-dialog {
  width: min(1100px, calc(94 * var(--shell-vw)));
  max-height: calc(90 * var(--shell-vh));
  overflow: hidden !important;
}

.shuffle-dialog #dialog-content {
  min-width: 0;
  padding: clamp(14px, calc(1.5 * var(--shell-vw)), 26px);
  overflow: hidden;
}

.shuffle-dialog .dialog-actions:empty {
  display: none;
}

.shuffle-dialog .shuffle-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, calc(2.4 * var(--shell-vw)), 42px);
  margin-bottom: clamp(12px, calc(1.25 * var(--shell-vw)), 22px);
  padding-bottom: clamp(11px, calc(1 * var(--shell-vw)), 18px);
}

.shuffle-dialog .shuffle-head > div {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  white-space: nowrap;
}

.shuffle-dialog .shuffle-head > div > span {
  color: #c7acd7;
  font-size: clamp(14px, calc(1.05 * var(--shell-vw)), 19px);
  font-weight: 900;
  letter-spacing: 0.12em;
}

.shuffle-dialog .shuffle-head p {
  color: #eef4ef;
  font-size: clamp(16px, calc(1.08 * var(--shell-vw)), 20px);
  font-weight: 800;
  line-height: 1.5;
  text-align: right;
}

.shuffle-dialog #shuffle-countdown {
  min-width: 0;
  color: #d9c0e7;
  font-size: clamp(42px, calc(4.6 * var(--shell-vw)), 76px);
  line-height: 0.9;
}

.shuffle-dialog .shuffle-tray {
  --shuffle-tile-count: 14;
  width: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(var(--shuffle-tile-count), minmax(0, 1fr));
  align-items: end;
  justify-content: stretch;
  gap: clamp(2px, calc(0.3 * var(--shell-vw)), 6px);
  padding: clamp(8px, calc(1.1 * var(--shell-vw)), 18px);
  overflow: hidden;
}

.shuffle-dialog .shuffle-tray > .tile {
  --tile-width: 100%;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 72px;
  height: auto !important;
  aspect-ratio: 1 / 1.4;
  flex: none !important;
  justify-self: center;
  margin: 0 !important;
}

.shuffle-dialog .shuffle-tray > .tile:hover {
  translate: 0 clamp(-7px, calc(-0.45 * var(--shell-vw)), -4px);
}

@container shell (max-width: 700px) {
  .shuffle-dialog .shuffle-head {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .shuffle-dialog .shuffle-head p {
    text-align: left;
  }

  .shuffle-dialog .shuffle-tray {
    gap: 2px;
    padding: 7px;
  }
}

/* ── Two-step discard confirmation ────────────────────────────────────── */

.player-hand > .tile.selected-discard {
  z-index: 12;
  translate: 0 -1.05cqw !important;
  scale: 1.075;
  filter:
    brightness(1.18)
    drop-shadow(0 0 0.14cqw #e6d6f0)
    drop-shadow(0 0 0.48cqw #ac77cb)
    drop-shadow(0 0.4cqw 0.75cqw rgba(182, 53, 118, 0.95)) !important;
}

.player-hand > .tile.selected-discard::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  z-index: 5;
  top: -0.62cqw;
  left: 50%;
  border-right: 0.34cqw solid transparent;
  border-left: 0.34cqw solid transparent;
  border-top: 0.48cqw solid #bd92d6;
  translate: -50% 0;
  filter: drop-shadow(0 0 0.24cqw #e54997);
  animation: discard-selection-pulse 0.7s ease-in-out infinite alternate;
}

@keyframes discard-selection-pulse {
  from { translate: -50% -0.08cqw; filter: drop-shadow(0 0 0.15cqw #e54997); }
  to { translate: -50% 0.12cqw; filter: drop-shadow(0 0 0.42cqw #a367c5); }
}

/* ── Large-format yaku reveal ─────────────────────────────────────────── */

.result-showcase .yaku-showcase {
  position: relative;
  margin: calc(0.45 * var(--shell-vw)) 0 calc(0.9 * var(--shell-vw));
  padding: clamp(9px, calc(0.72 * var(--shell-vw)), 14px);
  overflow: hidden;
  border: 1px solid rgba(201, 167, 221, 0.7);
  background:
    linear-gradient(105deg, rgba(111, 29, 70, 0.78), rgba(6, 15, 19, 0.92) 66%),
    #071013;
  box-shadow:
    inset 0 0 0 1px rgba(235, 222, 243, 0.09),
    0 0 calc(1.2 * var(--shell-vw)) rgba(156, 91, 193, 0.18);
}

.result-showcase .yaku-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 30%, rgba(223, 203, 235, 0.2) 49%, transparent 68%);
  translate: -110% 0;
  animation: yaku-panel-sweep 1.1s 0.16s ease-out both;
}

.result-showcase .yaku-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: clamp(7px, calc(0.48 * var(--shell-vw)), 10px);
  padding-bottom: clamp(5px, calc(0.38 * var(--shell-vw)), 8px);
  border-bottom: 1px solid rgba(204, 171, 223, 0.42);
}

.result-showcase .yaku-heading > strong {
  color: #dec9eb;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(20px, calc(1.55 * var(--shell-vw)), 29px);
  font-weight: 900;
  letter-spacing: 0.2em;
  text-shadow: 0 0.08em 0 #701b46, 0 0.18em 0 #120205;
}

.result-showcase .yaku-heading > b {
  color: #e7d7f0;
  font-size: clamp(25px, calc(2.15 * var(--shell-vw)), 40px);
  line-height: 0.9;
  text-shadow: 0 0.08em 0 #882356, 0 0 0.48em #a368c6;
}

.result-showcase .yaku-heading i,
.result-showcase .yaku-entry i {
  margin-left: 0.14em;
  font-size: 0.52em;
  font-style: normal;
}

.result-showcase .yaku-list {
  position: relative;
  z-index: 1;
  min-height: 0;
  /* 中身の高さぶんだけ場所を取る。0にすると欄が縮んで枠が切れる。 */
  flex: 0 1 auto;
  display: grid;
  /* 列数は役の数で決める（game.js が --yaku-cols を入れる）。 */
  grid-template-columns: repeat(var(--yaku-cols, 3), minmax(0, 1fr));
  /* 枠は字の高さに合わせる。欄が広いときに間延びした空箱にしない。 */
  grid-auto-rows: max-content;
  align-content: center;
  gap: clamp(4px, calc(0.38 * var(--shell-vw)), 9px);
  margin: 0;
}

.result-showcase .yaku-list > .yaku-entry {
  min-width: 0;
  min-height: 0;
  /* わずかに溢れても切って見せる。字は上下中央なので見た目は変わらない。 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45em;
  padding: 0.38em 0.58em;
  border: 1px solid rgba(197, 160, 219, 0.68);
  border-radius: calc(0.16 * var(--shell-vw));
  background:
    linear-gradient(135deg, rgba(207, 175, 225, 0.13), transparent 48%),
    rgba(4, 11, 15, 0.9);
  color: #e9dbf2;
  box-shadow: inset 0 calc(-0.18 * var(--shell-vw)) 0 rgba(119, 33, 76, 0.52);
  animation: yaku-entry-slam 0.48s cubic-bezier(.12, .82, .18, 1) both;
  animation-delay: calc(0.16s + var(--yaku-index, 0) * 0.07s);
}

.result-showcase .yaku-entry > strong {
  overflow: hidden;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  /* 行が増えるほど小さくする。--yaku-scale と --yaku-rows は game.js が入れる。
     欄の高さを行数で割った値も上限にして、何役あっても枠に収める。 */
  font-size: calc(clamp(15px, calc(1.35 * var(--shell-vw)), 26px) * var(--yaku-scale, 1));
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0.08em 0 #5a1a3a;
}

.result-showcase .yaku-entry > b {
  flex: 0 0 auto;
  color: #bf96d7;
  font-size: calc(clamp(15px, calc(1.5 * var(--shell-vw)), 29px) * var(--yaku-scale, 1));
  line-height: 1;
  text-shadow: 0 0 0.38em rgba(157, 93, 194, 0.72);
}

.anna-result .yaku-showcase {
  border-color: rgba(168, 146, 190, 0.72);
  background:
    linear-gradient(105deg, rgba(55, 32, 76, 0.82), rgba(3, 12, 20, 0.94) 66%),
    #050d14;
  box-shadow: inset 0 0 0 1px rgba(226, 217, 235, 0.08), 0 0 calc(1.2 * var(--shell-vw)) rgba(128, 83, 168, 0.2);
}

.anna-result .yaku-list > .yaku-entry {
  border-color: rgba(168, 146, 191, 0.62);
  color: #e5fbff;
  box-shadow: inset 0 calc(-0.18 * var(--shell-vw)) 0 rgba(56, 32, 77, 0.72);
}

.anna-result .yaku-heading > strong,
.anna-result .yaku-heading > b,
.anna-result .yaku-entry > b {
  color: #efeaf4;
  text-shadow: 0 0.08em 0 #45285f, 0 0 0.42em #7b5e98;
}

.win-effect-copy > span#win-effect-title {
  max-width: 96%;
  margin-block: 0.25em 0.18em;
  padding: 0.3em 1.1em;
  border-width: 2px;
  background: linear-gradient(90deg, rgba(98, 23, 60, 0.92), rgba(10, 4, 7, 0.82), rgba(98, 23, 60, 0.92));
  font-size: clamp(20px, calc(2.15 * var(--shell-vw)), 42px);
  font-weight: 900;
  line-height: 1.22;
  text-shadow: 0 0.08em 0 #62143b, 0 0 0.42em #9f61c3;
  box-shadow: 0 0 calc(1.3 * var(--shell-vw)) rgba(156, 92, 193, 0.34);
}

.win-effect.anna-win .win-effect-copy > span#win-effect-title {
  background: linear-gradient(90deg, rgba(53, 30, 74, 0.94), rgba(2, 9, 15, 0.86), rgba(53, 30, 74, 0.94));
  text-shadow: 0 0.08em 0 #412659, 0 0 0.42em #7d5e9c;
  box-shadow: 0 0 calc(1.3 * var(--shell-vw)) rgba(133, 104, 162, 0.3);
}

@keyframes yaku-entry-slam {
  0% { opacity: 0; translate: calc(1.8 * var(--shell-vw)) 0; scale: 1.18; }
  72% { opacity: 1; translate: calc(-0.12 * var(--shell-vw)) 0; scale: 0.98; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes yaku-panel-sweep {
  to { translate: 110% 0; }
}

@container shell (max-width: 760px) {
  .result-showcase .yaku-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Contextual table cheats / persistent wait information ───────────── */

#wait-label:not(:empty) {
  overflow: visible;
  color: #d7bde6;
  font-size: clamp(16px, 1.08cqw, 22px);
  font-weight: 900;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
  text-shadow: 0 1px 0 #000, 0 0 0.45cqw rgba(175, 123, 205, 0.36);
}

.action-bar .cheat-actions {
  width: clamp(450px, 35cqw, 700px);
  max-width: calc(72 * var(--shell-vw));
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.72cqw);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 0.62cqw, 13px);
  pointer-events: auto;
}

.action-bar .cheat-actions > button {
  min-width: 0;
  min-height: clamp(82px, 6.2cqw, 124px) !important;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.16em 0.62em;
  padding: clamp(10px, 0.72cqw, 15px) clamp(14px, 1cqw, 21px) !important;
  border: 2px solid #b58dcc !important;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  border-radius: 0 !important;
  background:
    linear-gradient(108deg, rgba(255, 255, 255, 0.09), transparent 30%),
    linear-gradient(145deg, #641f42, #210a16 56%, #061313) !important;
  color: #ebdef3 !important;
  cursor: pointer;
  text-align: left;
  box-shadow:
    inset 0 0 0 2px rgba(188, 145, 213, 0.13),
    0 0 1cqw rgba(205, 70, 138, 0.38) !important;
  animation: table-cheat-ready 1.15s ease-in-out infinite;
}

.action-bar .cheat-actions > button::after {
  content: "";
  width: 42%;
  height: 180%;
  position: absolute;
  top: -40%;
  left: -70%;
  rotate: 18deg;
  background: linear-gradient(90deg, transparent, rgba(227, 209, 238, 0.72), transparent);
  animation: table-cheat-sweep 1.7s linear infinite;
}

.action-bar .cheat-actions small {
  grid-row: 1 / -1;
  width: clamp(42px, 3.2cqw, 64px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid #d5b9e5;
  border-radius: 50%;
  color: #dac3e8;
  font-size: clamp(16px, 1.1cqw, 22px);
  font-weight: 1000;
}

.action-bar .cheat-actions strong {
  overflow: hidden;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(21px, 1.65cqw, 33px);
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.action-bar .cheat-actions span {
  color: #c6a9d7;
  font-size: clamp(15px, 1cqw, 20px);
  font-weight: 800;
}

.action-bar #safety-cheat-button {
  border-color: #a693ba !important;
  background:
    linear-gradient(108deg, rgba(255, 255, 255, 0.09), transparent 30%),
    linear-gradient(145deg, #392a48, #1e1328 56%, #050e13) !important;
  box-shadow:
    inset 0 0 0 2px rgba(176, 157, 196, 0.13),
    0 0 1cqw rgba(128, 100, 157, 0.38) !important;
}

@keyframes table-cheat-ready {
  0%,
  100% { filter: brightness(1); scale: 1; }
  50% { filter: brightness(1.24); scale: 1.018; }
}

@keyframes table-cheat-sweep {
  to { left: 140%; }
}

@container shell (max-width: 760px) {
  .action-bar .cheat-actions {
    width: calc(76 * var(--shell-vw));
    max-width: none;
  }

  .action-bar .cheat-actions > button {
    min-height: 74px !important;
  }

  .action-bar .cheat-actions strong {
    font-size: clamp(18px, calc(3.8 * var(--shell-vw)), 25px);
  }
}

/* ── Persistent furiten warning / illicit ron decision ───────────────── */

.turn-status {
  overflow: visible !important;
}

.furiten-status {
  width: clamp(420px, 33cqw, 650px);
  max-width: calc(82 * var(--shell-vw));
  position: absolute;
  z-index: 18;
  left: 0;
  bottom: calc(100% + 0.62cqw);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 0.75cqw, 16px);
  padding: clamp(10px, 0.75cqw, 16px) clamp(14px, 1cqw, 21px);
  border: 2px solid #e969a9;
  border-left-width: clamp(6px, 0.5cqw, 10px);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  background:
    linear-gradient(100deg, rgba(116, 24, 70, 0.96), rgba(36, 9, 23, 0.97) 54%, rgba(4, 12, 15, 0.98));
  color: #f0e6f5;
  box-shadow:
    inset 0 0 1.2cqw rgba(231, 90, 161, 0.2),
    0 0 1.1cqw rgba(228, 66, 147, 0.38),
    0 0.45cqw 1.4cqw rgba(0, 0, 0, 0.52);
}

.furiten-status::before {
  content: "!";
  width: clamp(28px, 2.2cqw, 44px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid #d4b8e4;
  border-radius: 50%;
  color: #dac1e8;
  font-size: clamp(20px, 1.65cqw, 32px);
  font-weight: 1000;
  line-height: 1;
}

.furiten-status > strong {
  grid-column: 2;
  color: #dbc4e9;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(25px, 2cqw, 40px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-shadow: 0 0.08em #6a0f3d, 0 0 0.45em #e64c99;
}

.furiten-status > span {
  grid-column: 1 / -1;
  color: #fff;
  font-size: clamp(16px, 1.05cqw, 21px);
  font-weight: 800;
  line-height: 1.4;
}

.furiten-status > b {
  grid-column: 3;
  grid-row: 1;
  padding: 0.42em 0.65em;
  border: 1px solid rgba(212, 184, 228, 0.7);
  background: rgba(0, 0, 0, 0.34);
  color: #dbc4e8;
  font-size: clamp(16px, 1.05cqw, 21px);
  font-weight: 900;
  white-space: nowrap;
}

.win-confirm-prompt.furiten .win-confirm-backdrop {
  background:
    linear-gradient(90deg, rgba(14, 0, 7, 0.94), rgba(67, 0, 19, 0.55) 30% 70%, rgba(14, 0, 7, 0.94)),
    repeating-linear-gradient(118deg, transparent 0 calc(5 * var(--shell-vw)), rgba(228, 69, 149, 0.09) calc(5 * var(--shell-vw)) calc(5.14 * var(--shell-vw)));
}

.win-confirm-prompt.furiten .win-confirm-rays {
  background: repeating-conic-gradient(
    from -8deg,
    rgba(198, 161, 219, 0.3) 0 3deg,
    transparent 3deg 11deg,
    rgba(226, 55, 141, 0.26) 11deg 16deg,
    transparent 16deg 27deg
  );
}

.win-confirm-prompt.furiten #win-confirm-kicker {
  color: #d7bee6;
  font-size: clamp(19px, calc(1.65 * var(--shell-vw)), 32px);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}

.win-confirm-prompt.furiten #win-button {
  min-width: clamp(460px, calc(57 * var(--shell-vw)), 1040px);
  min-height: clamp(126px, calc(13 * var(--shell-vw)), 238px);
  padding-inline: clamp(38px, calc(4 * var(--shell-vw)), 76px);
  border-color: #d7bce6;
  background:
    linear-gradient(105deg, transparent 0 38%, rgba(255, 255, 255, 0.95) 47%, transparent 56%) -140% 0 / 62% 100% no-repeat,
    radial-gradient(circle at 50% 118%, #ae7acd, #ac2569 42%, #33071d 78%);
  font-size: clamp(36px, calc(4.7 * var(--shell-vw)), 90px);
  letter-spacing: 0.04em;
  text-indent: 0.04em;
  white-space: nowrap;
  box-shadow:
    inset 0 0 0 3px #500b2e,
    inset 0 0 calc(2 * var(--shell-vw)) rgba(165, 106, 199, 0.74),
    0 calc(0.42 * var(--shell-vw)) 0 #250515,
    0 0 calc(2.4 * var(--shell-vw)) #e64c99,
    0 0 calc(7 * var(--shell-vw)) rgba(154, 22, 88, 0.9);
}

.win-confirm-prompt.mangan-locked .win-confirm-backdrop {
  background:
    linear-gradient(90deg, rgba(4, 5, 7, 0.97), rgba(31, 8, 20, 0.68) 24% 76%, rgba(4, 5, 7, 0.97)),
    repeating-linear-gradient(118deg, transparent 0 calc(4.8 * var(--shell-vw)), rgba(165, 117, 193, 0.07) calc(4.8 * var(--shell-vw)) calc(4.96 * var(--shell-vw)));
}

.win-confirm-prompt.mangan-locked .win-confirm-rays {
  background: repeating-conic-gradient(
    from -7deg,
    rgba(198, 161, 219, 0.2) 0 3deg,
    transparent 3deg 13deg,
    rgba(168, 39, 104, 0.16) 13deg 17deg,
    transparent 17deg 28deg
  );
  animation-duration: 7s;
}

.win-confirm-prompt.mangan-locked.hokuto-crisis .win-confirm-backdrop {
  background:
    linear-gradient(90deg, rgba(2, 4, 8, 0.98), rgba(41, 21, 52, 0.78) 24% 76%, rgba(2, 4, 8, 0.98)),
    repeating-linear-gradient(118deg, transparent 0 calc(4.8 * var(--shell-vw)), rgba(187, 143, 212, 0.12) calc(4.8 * var(--shell-vw)) calc(4.96 * var(--shell-vw)));
}

.win-confirm-prompt.mangan-locked.hokuto-crisis #mangan-lock-title {
  color: #eadcf2;
  text-shadow:
    0 0.06em 0 #663284,
    0 0.12em 0 #1a0d22,
    0 0 0.42em rgba(179, 130, 208, 0.98);
}

.win-confirm-prompt.mangan-locked.hokuto-crisis #win-button {
  background:
    linear-gradient(105deg, transparent 0 38%, rgba(255, 255, 255, 0.98) 47%, transparent 56%) -140% 0 / 62% 100% no-repeat,
    radial-gradient(circle at 50% 120%, #ccabdf, #7b3c9f 44%, #35081f 80%);
  box-shadow:
    inset 0 0 0 3px #3c1e4e,
    inset 0 0 calc(2 * var(--shell-vw)) rgba(185, 140, 211, 0.84),
    0 calc(0.42 * var(--shell-vw)) 0 #180c1e,
    0 0 calc(2.8 * var(--shell-vw)) #9f60c3,
    0 0 calc(7 * var(--shell-vw)) rgba(143, 70, 185, 0.74);
}

.win-confirm-prompt.mangan-locked .win-confirm-copy {
  width: min(calc(82 * var(--shell-vw)), 1320px);
  gap: clamp(8px, calc(0.7 * var(--shell-vw)), 14px);
  padding: clamp(18px, calc(1.8 * var(--shell-vw)), 34px) clamp(24px, calc(3 * var(--shell-vw)), 58px);
  border-block: 2px solid rgba(198, 161, 220, 0.72);
  background:
    linear-gradient(90deg, transparent, rgba(91, 16, 54, 0.72) 13% 87%, transparent);
}

.win-confirm-prompt.mangan-locked .win-confirm-copy::before {
  top: -7px;
}

.win-confirm-prompt.mangan-locked .win-confirm-copy::after {
  bottom: -7px;
}

.win-confirm-prompt.mangan-locked #win-confirm-kicker {
  color: #d3b6e3;
  /* 一行で出す問いかけなので、字数に合わせて必ず画面内へ収める。 */
  font-size: min(clamp(18px, calc(1.55 * var(--shell-vw)), 30px), calc(92cqw / var(--kicker-chars, 20)));
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  white-space: nowrap;
  word-break: keep-all;
}

#mangan-lock-title {
  color: #e5d5ef;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(58px, calc(7.2 * var(--shell-vw)), 136px);
  font-weight: 950;
  line-height: 0.94;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  white-space: nowrap;
  word-break: keep-all;
  text-shadow:
    0 0.06em 0 #7e184b,
    0 0.12em 0 #230514,
    0 0 0.32em rgba(171, 116, 202, 0.84);
}

#mangan-lock-detail {
  margin: 0 0 clamp(5px, calc(0.5 * var(--shell-vw)), 10px);
  color: #f1e8f6;
  font-size: clamp(19px, calc(1.7 * var(--shell-vw)), 33px);
  font-weight: 900;
  letter-spacing: 0.03em;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  text-shadow: 0 2px 0 #230514;
}

.win-confirm-prompt.mangan-locked #win-button {
  min-width: clamp(430px, calc(46 * var(--shell-vw)), 860px);
  min-height: clamp(88px, calc(8.4 * var(--shell-vw)), 158px);
  padding-inline: clamp(28px, calc(3 * var(--shell-vw)), 56px);
  border-color: #d5bae5;
  background:
    linear-gradient(105deg, transparent 0 38%, rgba(255, 255, 255, 0.94) 47%, transparent 56%) -140% 0 / 62% 100% no-repeat,
    radial-gradient(circle at 50% 120%, #b483d0, #a82868 44%, #280718 80%);
  font-size: clamp(34px, calc(4.2 * var(--shell-vw)), 78px);
  letter-spacing: 0.04em;
  text-indent: 0.04em;
  white-space: nowrap;
}

.win-confirm-prompt.mangan-locked #pass-button {
  min-width: clamp(150px, calc(14 * var(--shell-vw)), 260px);
  min-height: clamp(44px, calc(4 * var(--shell-vw)), 72px);
  margin-top: clamp(4px, calc(0.3 * var(--shell-vw)), 7px);
  border-color: rgba(211, 182, 227, 0.68);
  color: #e6d6f0;
  font-size: clamp(18px, calc(1.3 * var(--shell-vw)), 25px);
  white-space: nowrap;
}

.win-confirm-prompt.mangan-locked.no-dora-swap .win-confirm-rays,
.win-confirm-prompt.mangan-locked.no-dora-swap .win-confirm-sparks {
  display: none;
}

.win-confirm-prompt.mangan-locked.no-dora-swap .win-confirm-copy {
  background:
    linear-gradient(90deg, transparent, rgba(24, 22, 25, 0.9) 13% 87%, transparent);
}

.furiten-caught-result {
  background:
    radial-gradient(circle at 22% 50%, rgba(185, 140, 212, 0.24), transparent 28%),
    repeating-linear-gradient(122deg, transparent 0 44px, rgba(229, 71, 150, 0.045) 45px 47px),
    linear-gradient(135deg, #0e0205, #521232 48%, #05090c);
}

@container shell (max-width: 760px) {
  .furiten-status {
    width: calc(calc(100 * var(--shell-vw)) - 20px);
    max-width: none;
    left: 0;
  }

  .furiten-status > span {
    grid-column: 1 / -1;
  }

  .win-confirm-prompt.furiten #win-button {
    min-width: calc(86 * var(--shell-vw));
    padding-inline: 20px;
    font-size: clamp(28px, calc(7 * var(--shell-vw)), 48px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .player-hand > .tile.selected-discard::before,
  .result-showcase .yaku-showcase::before,
  .result-showcase .yaku-list > .yaku-entry {
    animation-duration: 0.01ms !important;
  }
}

/* ── Anna win prelude / barrier reversal ──────────────────────────────── */

.anna-reaction-cut-in {
  --anna-reaction-duration: 0.98s;
  position: absolute;
  z-index: 168;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  background:
    repeating-linear-gradient(112deg, transparent 0 calc(4 * var(--shell-vw)), rgba(163, 140, 187, 0.045) calc(4 * var(--shell-vw)) calc(4.12 * var(--shell-vw))),
    radial-gradient(circle at 50% 50%, rgba(97, 61, 129, 0.38), transparent 38%),
    rgba(1, 6, 10, 0.94);
}

.anna-reaction-cut-in::before,
.anna-reaction-cut-in::after {
  content: "";
  width: calc(132 * var(--shell-vw));
  height: clamp(5px, calc(0.45 * var(--shell-vw)), 9px);
  position: absolute;
  /* 走る光は一枚絵の帯より後ろ。帯の上下へ抜けて見えるのが狙いで、
     顔の上を横切らせるためのものではない。 */
  z-index: 1;
  left: calc(-16 * var(--shell-vw));
  background: linear-gradient(90deg, transparent, #aa90c3 18% 45%, #dc4691 55% 82%, transparent);
  box-shadow: 0 0 calc(1.2 * var(--shell-vw)) #82659f;
}

/* 帯の外側、画面の上下のふちを走らせる。帯にかかる端は後ろへ潜って消える。 */
.anna-reaction-cut-in::before {
  top: 7%;
  rotate: -5deg;
}

.anna-reaction-cut-in::after {
  bottom: 9%;
  rotate: 6deg;
}

.anna-reaction-speedlines {
  width: calc(130 * var(--shell-vw));
  height: calc(130 * var(--shell-vw));
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 3deg,
    rgba(182, 162, 203, 0.48) 0 1.1deg,
    transparent 1.1deg 7deg
  );
}

.anna-reaction-eye {
  width: calc(112 * var(--shell-vw));
  height: calc(36 * var(--shell-vh));
  position: absolute;
  z-index: 2;
  top: calc(25 * var(--shell-vh));
  left: calc(-6 * var(--shell-vw));
  overflow: hidden;
  border-block: clamp(3px, calc(0.28 * var(--shell-vw)), 6px) solid #dcd2e7;
  background:
    linear-gradient(90deg, rgba(1, 8, 13, 0.98), transparent 18% 82%, rgba(1, 8, 13, 0.98)),
    #19151c;
  box-shadow: 0 0 calc(2 * var(--shell-vw)) #765a93, 0 calc(2 * var(--shell-vw)) calc(5 * var(--shell-vw)) rgba(0, 0, 0, 0.82);
  transform: skewY(-4deg);
}

.anna-reaction-eye img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center var(--anna-cut-in-focus-y, 50%);
  filter: contrast(1.12) saturate(0.78) drop-shadow(calc(1 * var(--shell-vw)) calc(1 * var(--shell-vw)) calc(1.2 * var(--shell-vw)) #000);
  transform: skewY(4deg) scale(1.035);
  transform-origin: center;
}

.anna-reaction-copy {
  position: relative;
  z-index: 6;
  display: grid;
  justify-items: center;
  align-self: end;
  margin-bottom: calc(9 * var(--shell-vh));
  transform: skew(-7deg);
  text-align: center;
}

.anna-reaction-copy small {
  padding: 0.32em 1.2em;
  border-inline: 3px solid #c5b4d7;
  color: #efeaf4;
  font-size: clamp(17px, calc(1.55 * var(--shell-vw)), 30px);
  font-weight: 900;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-shadow: 0 0.1em 0 #39214e, 0 0 0.5em #7b5e99;
}

.anna-reaction-copy strong {
  color: #f1fdff;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(110px, calc(16 * var(--shell-vw)), 290px);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  -webkit-text-stroke: clamp(2px, calc(0.18 * var(--shell-vw)), 4px) #3d2453;
  text-shadow:
    0 0.05em 0 #b29bc9,
    0 0.11em 0 #301d41,
    0 0.17em 0 #01070c,
    0 0 0.4em #785c95;
}

.anna-reaction-cut-in.active .anna-reaction-eye {
  animation: anna-eye-strike 0.98s cubic-bezier(.08, .82, .16, 1) both;
}

.anna-reaction-cut-in.active .anna-reaction-copy {
  animation: anna-call-strike 0.98s cubic-bezier(.08, .82, .16, 1) both;
}

.anna-reaction-cut-in.active .anna-reaction-speedlines {
  animation: anna-reaction-rays 0.98s ease-out both;
}

.anna-reaction-cut-in.barrier {
  --anna-reaction-duration: 1.28s;
  background:
    repeating-linear-gradient(-32deg, transparent 0 calc(3.2 * var(--shell-vw)), rgba(198, 161, 219, 0.055) calc(3.2 * var(--shell-vw)) calc(3.32 * var(--shell-vw))),
    radial-gradient(circle at 50% 48%, rgba(192, 50, 121, 0.52), transparent 35%),
    rgba(12, 2, 5, 0.97);
}

.anna-reaction-cut-in.barrier::before,
.anna-reaction-cut-in.barrier::after {
  background: linear-gradient(90deg, transparent, #d5bae5 17% 44%, #e54897 56% 83%, transparent);
  box-shadow: 0 0 calc(1.5 * var(--shell-vw)) #e54595;
}

.anna-reaction-cut-in.barrier .anna-reaction-eye {
  height: calc(52 * var(--shell-vh));
  top: calc(16 * var(--shell-vh));
  border-color: #cfb0e1;
  box-shadow: 0 0 calc(2.4 * var(--shell-vw)) #e44293, 0 calc(2 * var(--shell-vw)) calc(5 * var(--shell-vw)) rgba(0, 0, 0, 0.88);
}

.anna-reaction-cut-in.barrier .anna-reaction-eye img {
  filter: contrast(1.18) saturate(0.62) sepia(0.12) drop-shadow(calc(1 * var(--shell-vw)) calc(1 * var(--shell-vw)) calc(1.2 * var(--shell-vw)) #000);
}

.anna-reaction-cut-in.barrier .anna-reaction-copy {
  align-self: center;
  margin: 0;
}

.anna-reaction-cut-in.barrier .anna-reaction-copy small {
  border-color: #ceaee0;
  color: #d9c1e7;
  text-shadow: 0 0.1em 0 #771f4b, 0 0 0.5em #e54796;
}

.anna-reaction-cut-in.barrier .anna-reaction-copy strong {
  color: #e9dbf2;
  font-size: clamp(100px, calc(14 * var(--shell-vw)), 250px);
  -webkit-text-stroke-color: #7f2150;
  text-shadow:
    0 0.05em 0 #d5bae5,
    0 0.11em 0 #912159,
    0 0.17em 0 #200613,
    0 0 0.46em #e44394;
}

/* イカサマ露見と驚愕は、小さい状況説明を消して決め台詞だけを残す。
   斜めに切った画面、走る光、強い寄りで一枚絵をカットインとして成立させる。 */
.anna-reaction-cut-in.no-kicker .anna-reaction-copy small {
  display: none;
}

.anna-reaction-cut-in.cinematic-reaction {
  background:
    linear-gradient(124deg, transparent 0 38%, rgba(213, 172, 235, 0.1) 38.2% 38.7%, transparent 38.9%),
    radial-gradient(ellipse at 52% 48%, rgba(115, 69, 151, 0.56), transparent 45%),
    linear-gradient(145deg, #03030a 0 42%, #24142f 64%, #05030a 100%);
}

.anna-reaction-cut-in.cinematic-reaction .anna-reaction-eye {
  width: calc(118 * var(--shell-vw));
  height: calc(54 * var(--shell-vh));
  top: calc(13 * var(--shell-vh));
  left: calc(-9 * var(--shell-vw));
  border: 0;
  clip-path: polygon(3% 9%, 99% 0, 96% 91%, 0 100%);
  box-shadow:
    0 0 0 clamp(2px, calc(0.2 * var(--shell-vw)), 4px) rgba(232, 215, 244, 0.88),
    0 0 calc(2.4 * var(--shell-vw)) rgba(175, 111, 213, 0.9),
    0 calc(2.8 * var(--shell-vw)) calc(6 * var(--shell-vw)) rgba(0, 0, 0, 0.94);
}

/* 顔の上を流れる光の帯は置かない。白い縦帯と、その左右に付いていた黒い影が、
   流れているあいだ顔の上に縦の線として見えていた。
   残すのは枠の内側の線と、上下のごく薄い艶だけ。横方向なので顔に線が出ない。 */
.anna-reaction-cut-in.cinematic-reaction .anna-reaction-eye::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: clamp(5px, calc(0.5 * var(--shell-vw)), 10px);
  pointer-events: none;
  border-block: 1px solid rgba(255, 255, 255, 0.38);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 22% 78%, rgba(198, 132, 225, 0.18));
}

.anna-reaction-cut-in.barrier.cinematic-reaction .anna-reaction-eye {
  height: calc(57 * var(--shell-vh));
  top: calc(10 * var(--shell-vh));
  box-shadow:
    0 0 0 clamp(2px, calc(0.2 * var(--shell-vw)), 4px) rgba(255, 219, 239, 0.9),
    0 0 calc(3 * var(--shell-vw)) rgba(238, 63, 151, 0.95),
    0 calc(3 * var(--shell-vw)) calc(6 * var(--shell-vw)) rgba(0, 0, 0, 0.94);
}

.anna-reaction-cut-in.cheat-reveal {
  background:
    repeating-linear-gradient(118deg, transparent 0 calc(6 * var(--shell-vw)), rgba(255, 198, 111, 0.06) calc(6 * var(--shell-vw)) calc(6.16 * var(--shell-vw))),
    radial-gradient(ellipse at 50% 50%, rgba(155, 32, 68, 0.6), transparent 43%),
    linear-gradient(145deg, #080205 0 44%, #3b101c 67%, #050204 100%);
}

.anna-reaction-cut-in.cheat-reveal::before,
.anna-reaction-cut-in.cheat-reveal::after {
  background: linear-gradient(90deg, transparent, #ffe0a1 18% 45%, #e73d62 55% 82%, transparent);
  box-shadow: 0 0 calc(1.5 * var(--shell-vw)) rgba(239, 62, 99, 0.95);
}

.anna-reaction-cut-in.cinematic-reaction .anna-reaction-copy {
  position: absolute;
  left: 50%;
  bottom: calc(3.2 * var(--shell-vh));
  width: max-content;
  max-width: calc(94 * var(--shell-vw));
  margin: 0;
  padding: 0.12em 0.48em 0.2em;
  background: linear-gradient(90deg, transparent, rgba(3, 2, 8, 0.92) 16% 84%, transparent);
  transform: translateX(-50%) skew(-7deg);
}

.anna-reaction-cut-in.cinematic-reaction .anna-reaction-copy strong {
  font-size: clamp(72px, calc(10.5 * var(--shell-vw)), 205px);
  -webkit-text-stroke-width: clamp(3px, calc(0.26 * var(--shell-vw)), 6px);
  text-shadow:
    0 0.055em 0 #c7afd9,
    0 0.12em 0 #2b153d,
    0 0.2em 0 #000,
    0 0 0.22em rgba(5, 1, 9, 0.98),
    0 0 0.52em rgba(164, 90, 201, 0.9);
}

.anna-reaction-cut-in.cinematic-reaction.long-copy .anna-reaction-copy strong {
  font-size: clamp(48px, calc(7 * var(--shell-vw)), 136px);
}

.anna-reaction-cut-in.cinematic-reaction.extra-long-copy .anna-reaction-copy strong {
  font-size: clamp(36px, calc(5.4 * var(--shell-vw)), 106px);
}

.anna-reaction-cut-in.cinematic-reaction.active .anna-reaction-eye {
  animation: anna-cinematic-panel var(--anna-reaction-duration) cubic-bezier(.08, .82, .16, 1) both;
}

.anna-reaction-cut-in.cinematic-reaction.active .anna-reaction-eye img {
  animation: anna-cinematic-push var(--anna-reaction-duration) cubic-bezier(.08, .72, .16, 1) both;
}

@keyframes anna-cinematic-panel {
  0% { opacity: 0; translate: calc(-110 * var(--shell-vw)) calc(8 * var(--shell-vh)); scale: 1.18; rotate: -3deg; }
  17% { opacity: 1; translate: calc(2 * var(--shell-vw)) calc(-0.8 * var(--shell-vh)); scale: 0.985; rotate: 0.35deg; }
  25%, 77% { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }
  100% { opacity: 0; translate: calc(86 * var(--shell-vw)) calc(-5 * var(--shell-vh)); scale: 1.05; rotate: 1.2deg; }
}

@keyframes anna-cinematic-push {
  0% { scale: 1.24; translate: calc(-2.4 * var(--shell-vw)) calc(1 * var(--shell-vh)); }
  22% { scale: 1.055; translate: 0 0; }
  77% { scale: 1.02; translate: 0 0; }
  100% { scale: 1.09; translate: calc(2 * var(--shell-vw)) calc(-0.8 * var(--shell-vh)); }
}

@keyframes anna-eye-strike {
  0% { opacity: 0; translate: calc(-105 * var(--shell-vw)) 0; scale: 1.28; }
  19% { opacity: 1; translate: calc(2 * var(--shell-vw)) 0; scale: 0.98; }
  28%, 75% { opacity: 1; translate: 0 0; scale: 1; }
  100% { opacity: 0; translate: calc(72 * var(--shell-vw)) 0; scale: 1.05; }
}

@keyframes anna-call-strike {
  0% { opacity: 0; translate: 0 calc(24 * var(--shell-vh)); scale: 2.5; }
  22% { opacity: 1; translate: 0 calc(-1 * var(--shell-vh)); scale: 0.9; }
  31%, 76% { opacity: 1; translate: 0 0; scale: 1; }
  100% { opacity: 0; translate: 0 calc(-9 * var(--shell-vh)); scale: 1.12; }
}

@keyframes anna-reaction-rays {
  0% { opacity: 0; scale: 0.1; rotate: -18deg; }
  24% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1.8; rotate: 26deg; }
}

@media (prefers-reduced-motion: reduce) {
  .anna-reaction-cut-in.active .anna-reaction-eye,
  .anna-reaction-cut-in.active .anna-reaction-copy,
  .anna-reaction-cut-in.active .anna-reaction-speedlines {
    animation-duration: 0.01ms !important;
  }
  .anna-reaction-cut-in.cinematic-reaction.active .anna-reaction-eye img {
    animation-duration: 0.01ms !important;
  }
}

/* ── Persistent right-side cheat command rack ───────────────────────── */

.status-panel .cheat-rack {
  order: 5;
  min-height: 0;
  padding: clamp(8px, calc(0.55 * var(--shell-vw)), 12px);
  border: 1px solid rgba(173, 136, 195, 0.72);
  border-radius: calc(0.46 * var(--shell-vw));
  background:
    linear-gradient(118deg, rgba(124, 40, 82, 0.26), transparent 52%),
    rgba(3, 10, 11, 0.96);
  box-shadow:
    inset 0 0 calc(1.1 * var(--shell-vw)) rgba(178, 128, 207, 0.06),
    0 calc(0.45 * var(--shell-vw)) calc(1.2 * var(--shell-vw)) rgba(0, 0, 0, 0.55);
}

.cheat-rack-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.45 * var(--shell-vw));
  margin-bottom: clamp(7px, calc(0.46 * var(--shell-vw)), 10px);
  padding: 0 calc(0.1 * var(--shell-vw)) clamp(6px, calc(0.38 * var(--shell-vw)), 8px);
  border-bottom: 1px solid rgba(173, 136, 195, 0.48);
  white-space: nowrap;
}

.cheat-rack-heading strong {
  color: #d1b3e2;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(15px, calc(1 * var(--shell-vw)), 19px);
  font-weight: 900;
  letter-spacing: 0.14em;
}

.cheat-rack-heading span {
  color: #cec4d4;
  font-size: clamp(14px, calc(0.78 * var(--shell-vw)), 16px);
  font-weight: 800;
}

.status-panel .cheat-actions {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: clamp(6px, calc(0.38 * var(--shell-vw)), 9px);
}

.status-panel .cheat-actions > button {
  width: 100%;
  min-height: clamp(76px, calc(4.2 * var(--shell-vw)), 84px);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: clamp(34px, calc(2.25 * var(--shell-vw)), 44px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: clamp(7px, calc(0.48 * var(--shell-vw)), 10px);
  padding: clamp(7px, calc(0.46 * var(--shell-vw)), 10px);
  border: 1px solid rgba(151, 136, 160, 0.58);
  border-left: 4px solid #675e6c;
  border-radius: calc(0.28 * var(--shell-vw));
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.035), transparent 36%),
    linear-gradient(145deg, #1e1c1f, #080f0e);
  color: #dbd5df;
  cursor: default;
  opacity: 0.72;
  text-align: left;
  box-shadow: inset 0 0 0 1px #050908;
}

.status-panel .cheat-actions > button > i {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #a599ac;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(17px, calc(1.12 * var(--shell-vw)), 22px);
  font-style: normal;
  font-weight: 900;
  grid-row: 1 / -1;
}

.status-panel .cheat-actions > button > span {
  min-width: 0;
  display: grid;
  gap: 0.16em;
}

.status-panel .cheat-actions > button strong {
  overflow: hidden;
  color: #ece4f0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(15px, calc(0.92 * var(--shell-vw)), 18px);
  font-weight: 900;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-panel .cheat-actions > button em {
  color: #bab2bf;
  font-size: clamp(14px, calc(0.8 * var(--shell-vw)), 16px);
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
}

.status-panel .cheat-actions > button > b {
  grid-column: 2;
  justify-self: start;
  padding: 0.34em 0.48em;
  border: 1px solid rgba(186, 172, 194, 0.3);
  background: rgba(0, 0, 0, 0.28);
  color: #c1b9c6;
  font-size: clamp(14px, calc(0.8 * var(--shell-vw)), 16px);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

.status-panel .cheat-actions > button.ready {
  border-color: #bd99d2;
  border-left-color: #ad78cc;
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.32) 45%, transparent 57%) -180% 0 / 68% 100% no-repeat,
    linear-gradient(145deg, #5f2040, #210b16 58%, #071314);
  color: #dec8ea;
  cursor: pointer;
  opacity: 1;
  box-shadow:
    inset 0 0 0 1px rgba(202, 167, 222, 0.2),
    0 0 calc(1 * var(--shell-vw)) rgba(217, 85, 151, 0.34);
  animation: persistent-cheat-sweep 1.8s linear infinite;
}

.status-panel .cheat-actions > button.ready > i {
  color: #d4b8e4;
  box-shadow: 0 0 calc(0.65 * var(--shell-vw)) rgba(173, 120, 204, 0.34);
}

.status-panel .cheat-actions > button.ready > b {
  border-color: #b995cd;
  color: #dec9ea;
}

.status-panel .cheat-actions > button.active {
  border-color: #aa95c0;
  border-left-color: #947bad;
  background: linear-gradient(145deg, #362845, #1d1226 58%, #040d11);
  color: #ece6f2;
  opacity: 1;
  box-shadow: 0 0 calc(1.1 * var(--shell-vw)) rgba(133, 105, 161, 0.4);
}

.status-panel .cheat-actions > button.used:not(.active) {
  filter: grayscale(0.45);
}

.opponent-hand.cheat-revealed {
  padding: calc(0.2 * var(--shell-vw)) calc(0.5 * var(--shell-vw));
  border-color: transparent;
  background: linear-gradient(90deg, transparent, rgba(130, 111, 149, 0.025), transparent);
  box-shadow: none;
}

.opponent-hand.cheat-revealed::before {
  content: none;
}

.opponent-hand.cheat-revealed > .vision-glimpse {
  opacity: 0.055;
  filter: grayscale(0.72) saturate(0.35) contrast(0.76) brightness(0.88);
  box-shadow: 0 0 calc(0.35 * var(--shell-vw)) rgba(153, 132, 174, 0.12);
  animation: vision-glimpse-flicker 3.2s ease-in-out infinite;
}

@keyframes vision-glimpse-flicker {
  0%,
  12%,
  35%,
  100% {
    opacity: 0.025;
    filter: grayscale(0.86) saturate(0.22) contrast(0.66) brightness(0.76);
  }

  17%,
  25% {
    opacity: 0.14;
    filter: grayscale(0.62) saturate(0.42) contrast(0.8) brightness(0.92);
  }

  52% {
    opacity: 0.075;
    filter: grayscale(0.76) saturate(0.3) contrast(0.72) brightness(0.84);
  }

  68%,
  76% {
    opacity: 0.18;
    filter: grayscale(0.55) saturate(0.48) contrast(0.84) brightness(0.96);
  }

  87% {
    opacity: 0.035;
    filter: grayscale(0.9) saturate(0.18) contrast(0.62) brightness(0.72);
  }
}

@keyframes persistent-cheat-sweep {
  from { background-position: -180% 0, 0 0; }
  to { background-position: 360% 0, 0 0; }
}


/* ── Yaku-first win hierarchy / high-hand spectacle ─────────────────── */

.win-effect {
  grid-template-columns: 37% 63%;
  padding: calc(2.2 * var(--shell-vh)) calc(3.2 * var(--shell-vw));
}

.win-effect-copy {
  display: grid;
  grid-template-areas:
    "side outcome"
    "title title"
    "call call"
    "yaku yaku"
    "hand hand"
    "score score"
    "message message";
  grid-template-columns: 1fr auto;
  align-content: center;
  gap: clamp(4px, calc(0.42 * var(--shell-vw)), 9px);
  transform: none !important;
  text-align: left;
}

.win-effect-copy > small {
  grid-area: side;
  align-self: center;
  justify-self: start;
  padding: 0.28em 0.75em;
  font-size: clamp(17px, calc(1.25 * var(--shell-vw)), 24px);
  letter-spacing: 0.12em;
}

.win-effect-outcome {
  grid-area: outcome;
  align-self: center;
  justify-self: end;
  margin: 0;
  padding: 0.2em 0.65em;
  font-size: clamp(20px, calc(2.1 * var(--shell-vw)), 40px);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
}

.win-effect-copy > strong#win-effect-call {
  grid-area: call;
  justify-self: start;
  padding: 0.12em 0.7em;
  border: 1px solid currentColor;
  background: rgba(2, 8, 11, 0.74);
  color: #e2cfed;
  font-family: "M PLUS 1p", sans-serif;
  font-size: clamp(20px, calc(2.2 * var(--shell-vw)), 42px);
  line-height: 1;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.win-effect-copy > span#win-effect-title {
  grid-area: title;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.08em 0.1em 0.14em;
  overflow: visible;
  border: 0;
  background: transparent;
  color: #e1ceec;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  /* 「字一色・四暗刻」のような長い役名でも横にはみ出さないよう、字数で上限を作る。
     --yaku-chars は game.js が役名の文字数を入れる。 */
  --title-max: calc(calc(55 * var(--shell-vw)) / var(--yaku-chars, 4));
  font-size: min(clamp(54px, calc(7.5 * var(--shell-vw)), 142px), var(--title-max));
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0.05em;
  text-align: left;
  white-space: nowrap;
  -webkit-text-stroke: clamp(1px, calc(0.08 * var(--shell-vw)), 2px) #7c214e;
  text-shadow:
    0 0.06em 0 #92245b,
    0 0.12em 0 #210614,
    0.04em 0.04em 0 #a972c9;
  box-shadow: none;
}

.win-effect-yaku-list {
  grid-area: yaku;
  min-height: clamp(24px, calc(2.1 * var(--shell-vw)), 38px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(5px, calc(0.4 * var(--shell-vw)), 9px);
}

.win-effect-yaku-list:empty {
  display: none;
}

.win-effect-yaku-list > span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.28em 0.62em;
  border: 1px solid rgba(207, 175, 225, 0.58);
  background: rgba(4, 10, 13, 0.78);
  color: #e6d6f0;
  font-size: clamp(15px, calc(1.1 * var(--shell-vw)), 22px);
  font-weight: 900;
}

.win-effect-yaku-list b {
  color: #b98bd3;
  font-size: 0.82em;
}

.win-effect-hand {
  grid-area: hand;
  max-width: 100%;
  justify-content: flex-start;
  margin: clamp(4px, calc(0.34 * var(--shell-vw)), 7px) 0;
}

.win-effect-score {
  grid-area: score;
  font-size: clamp(30px, calc(4 * var(--shell-vw)), 72px);
  text-align: left;
}

.win-effect-message {
  grid-area: message;
  min-height: clamp(54px, calc(4.4 * var(--shell-vw)), 84px);
  display: flex;
  align-items: center;
  gap: clamp(9px, calc(0.75 * var(--shell-vw)), 15px);
  max-width: 94%;
  margin-top: clamp(3px, calc(0.3 * var(--shell-vw)), 6px);
  padding: 0.45em 0.7em;
  border-left: 4px solid #d15191;
  background: rgba(1, 7, 10, 0.78);
}

.win-effect-face-frame {
  width: clamp(48px, calc(4.2 * var(--shell-vw)), 80px);
  height: clamp(48px, calc(4.2 * var(--shell-vw)), 80px);
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  border: 2px solid #bc9ad0;
  border-radius: 50%;
  background: #1f1d21;
}

.win-effect-face-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 2%;
  transform: scale(1.9);
  transform-origin: 50% 15%;
}

.win-effect-line {
  max-width: none;
  margin: 0;
  font-size: clamp(15px, calc(1.2 * var(--shell-vw)), 23px);
  line-height: 1.45;
}

.win-effect.player-win .win-effect-character {
  width: calc(36 * var(--shell-vw));
  height: calc(89 * var(--shell-vh));
  grid-column: 1;
  justify-self: center;
  object-fit: contain;
  object-position: center;
  filter: none;
  opacity: 0.94;
}

.win-effect.anna-win .win-effect-character {
  width: calc(43 * var(--shell-vw));
  height: calc(94 * var(--shell-vh));
}

.win-effect.anna-win .win-effect-face-frame {
  display: none;
}

.win-effect.anna-win .win-effect-copy > span#win-effect-title {
  background: transparent;
  color: #e6fbff;
  -webkit-text-stroke-color: #3c2352;
  text-shadow:
    0 0.06em 0 #553175,
    0 0.12em 0 #01070b,
    0.04em 0.04em 0 #b72d72;
  box-shadow: none;
}

.win-effect-rank-aura {
  display: none;
  position: absolute;
  z-index: 1;
  right: calc(2 * var(--shell-vw));
  width: calc(62 * var(--shell-vw));
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  pointer-events: none;
}

.win-effect-rank-aura > span {
  --rank-stamp-size: clamp(104px, calc(10 * var(--shell-vw)), 190px);
  display: grid;
  place-items: center;
  width: var(--rank-stamp-size);
  aspect-ratio: 1;
  border: clamp(3px, calc(0.28 * var(--shell-vw)), 6px) double #d7bde6;
  border-radius: 50%;
  background: rgba(74, 16, 45, 0.9);
  color: #dbc4e8;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  /* 「ダブル役満」のような長い呼び名は丸からはみ出していた。
     二行に折ったうえで、一番長い行の字数から大きさを決める。 */
  font-size: min(
    clamp(30px, calc(3.3 * var(--shell-vw)), 62px),
    calc(var(--rank-stamp-size) * 0.72 / var(--rank-stamp-chars, 2)),
    calc(var(--rank-stamp-size) * 0.62 / var(--rank-stamp-lines, 1))
  );
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0.05em;
  white-space: pre-line;
  text-align: center;
  box-shadow: inset 0 0 0 calc(0.3 * var(--shell-vw)) #7b1f4d, 0 0 0 calc(0.35 * var(--shell-vw)) rgba(197, 160, 219, 0.28);
}

.win-effect.result-tier-normal .win-effect-rays,
.win-effect.result-tier-normal .win-effect-slash,
.win-effect.result-tier-normal .win-effect-sparks {
  display: none;
}

.win-effect.result-tier-normal {
  background:
    linear-gradient(104deg, rgba(20, 4, 7, 0.98) 0 32%, transparent 58%),
    linear-gradient(135deg, #220b17, #100507 68%, #030303);
}

.win-effect.result-tier-normal.anna-win {
  background:
    linear-gradient(258deg, rgba(3, 8, 18, 0.99) 0 34%, transparent 60%),
    linear-gradient(135deg, #02060c, #1b1123 62%, #100308);
}

.win-effect.result-tier-normal.anna-win::before,
.win-effect.result-tier-normal.anna-win::after {
  display: none;
}

.win-effect.active.result-tier-normal .win-effect-copy,
.win-effect.active.result-tier-normal .win-effect-character {
  animation-duration: 1.9s;
}

.win-effect.result-tier-high .win-effect-rank-aura,
.win-effect.result-tier-yakuman .win-effect-rank-aura {
  display: grid;
}

.win-effect.result-tier-high .win-effect-rank-aura {
  background: repeating-conic-gradient(
    from 0deg,
    rgba(207, 175, 225, 0.86) 0 1.4deg,
    transparent 1.4deg 9deg
  );
}

.win-effect.active.result-tier-high .win-effect-rank-aura {
  animation: high-hand-aura 3s cubic-bezier(.08, .76, .18, 1) both;
}

.win-effect.active.result-tier-high .win-effect-copy,
.win-effect.active.result-tier-high .win-effect-character {
  animation-duration: 3s;
}

.win-effect.result-tier-high .win-effect-copy > span#win-effect-title {
  color: #d5bae5;
  font-size: min(clamp(62px, calc(8.4 * var(--shell-vw)), 158px), var(--title-max));
}

.win-effect.result-tier-yakuman {
  background:
    repeating-linear-gradient(118deg, transparent 0 calc(4 * var(--shell-vw)), rgba(207, 177, 225, 0.055) calc(4 * var(--shell-vw)) calc(4.15 * var(--shell-vw))),
    radial-gradient(circle at 64% 48%, rgba(166, 108, 199, 0.48), transparent 28%),
    linear-gradient(135deg, #561134, #160204 58%, #010101);
}

.win-effect.result-tier-yakuman::after {
  content: "";
  position: absolute;
  z-index: 10;
  inset: 0;
  pointer-events: none;
  background: #e7d8f0;
  opacity: 0;
}

.win-effect.result-tier-yakuman .win-effect-rank-aura {
  right: calc(-2 * var(--shell-vw));
  width: calc(70 * var(--shell-vw));
  background:
    repeating-conic-gradient(from 0deg, #dec8ea 0 2deg, transparent 2deg 6deg),
    repeating-radial-gradient(circle, transparent 0 9%, rgba(168, 111, 201, 0.24) 9.2% 9.8%);
}

.win-effect.result-tier-yakuman .win-effect-rank-aura > span {
  --rank-stamp-size: clamp(142px, calc(14 * var(--shell-vw)), 260px);
  border-width: clamp(5px, calc(0.5 * var(--shell-vw)), 10px);
  background: #67163f;
  font-size: min(
    clamp(43px, calc(4.8 * var(--shell-vw)), 90px),
    calc(var(--rank-stamp-size) * 0.72 / var(--rank-stamp-chars, 2)),
    calc(var(--rank-stamp-size) * 0.62 / var(--rank-stamp-lines, 1))
  );
  box-shadow: inset 0 0 0 calc(0.5 * var(--shell-vw)) #210614, 0 0 0 calc(0.42 * var(--shell-vw)) #d6bce5;
}

.win-effect.result-tier-yakuman .win-effect-copy > span#win-effect-title {
  color: #e5d4ef;
  font-size: min(clamp(78px, calc(10.5 * var(--shell-vw)), 196px), var(--title-max));
  -webkit-text-stroke: clamp(2px, calc(0.18 * var(--shell-vw)), 4px) #891f54;
  text-shadow:
    0 0.05em 0 #bb8fd4,
    0 0.11em 0 #871f53,
    0 0.17em 0 #1d0103;
}

.win-effect.active.result-tier-yakuman .win-effect-rank-aura {
  animation: yakuman-aura 3.7s cubic-bezier(.08, .76, .18, 1) both;
}

.win-effect.active.result-tier-yakuman .win-effect-copy,
.win-effect.active.result-tier-yakuman .win-effect-character {
  animation-duration: 3.7s;
}

.win-effect.active.result-tier-yakuman::after {
  animation: yakuman-flash 3.7s steps(1, end) both;
}

@keyframes high-hand-aura {
  0% { opacity: 0; rotate: -18deg; scale: 0.3; }
  18% { opacity: 1; rotate: 0deg; scale: 1.04; }
  70% { opacity: 0.78; rotate: 12deg; scale: 1; }
  100% { opacity: 0; rotate: 24deg; scale: 1.5; }
}

@keyframes yakuman-aura {
  0% { opacity: 0; rotate: -28deg; scale: 0.08; }
  12% { opacity: 1; rotate: 0deg; scale: 1.14; }
  20% { rotate: -3deg; scale: 0.98; }
  74% { opacity: 1; rotate: 10deg; scale: 1; }
  100% { opacity: 0; rotate: 32deg; scale: 1.9; }
}

@keyframes yakuman-flash {
  0% { opacity: 0.92; }
  5% { opacity: 0; }
  12% { opacity: 0.42; }
  15%, 100% { opacity: 0; }
}

/* Result screen: the yaku name leads; the call is secondary. */

.result-call-row {
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(5px, calc(0.45 * var(--shell-vw)), 9px);
}

.result-call-row strong {
  padding: 0.18em 0.65em;
  border: 1px solid rgba(203, 169, 223, 0.6);
  background: rgba(3, 9, 12, 0.72);
  font-family: "M PLUS 1p", sans-serif;
  font-size: clamp(19px, calc(2 * var(--shell-vw)), 38px);
  line-height: 1;
  letter-spacing: 0.14em;
  text-shadow: none;
}

.result-primary-yaku {
  /* 役名の大きさはビューポートではなく、この帯の幅を基準に決める。
     ダイアログは画面より狭いので、vwのままだと長い役名が切れていた。 */
  container-type: inline-size;
  display: grid;
  position: relative;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(8px, calc(0.8 * var(--shell-vw)), 16px);
  margin: calc(0.25 * var(--shell-vw)) 0 calc(0.65 * var(--shell-vw));
  padding: clamp(7px, calc(0.58 * var(--shell-vw)), 12px) clamp(10px, calc(0.85 * var(--shell-vw)), 17px);
  border-block: 2px solid rgba(205, 173, 224, 0.72);
  background:
    linear-gradient(90deg, rgba(126, 33, 80, 0.72), rgba(4, 11, 15, 0.9) 68%);
}

.result-primary-yaku > small {
  color: #bc91d5;
  font-size: clamp(14px, calc(1.05 * var(--shell-vw)), 20px);
  font-weight: 900;
  letter-spacing: 0.16em;
}

.result-primary-yaku > strong {
  /* 帯の幅を字数で割った値を上限にする。何文字の役名でも必ず収まる。 */
  --yaku-fit: calc(62cqw / var(--yaku-chars, 4));
  min-width: 0;
  /* 字はグラデーションを切り抜いて出す。色は役の格で決まる（銀・金・虹）。
     段を重ねた袋文字は輪郭がぶれて読みにくいので使わない。 */
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #dfe3ea 34%, #9aa3ae 50%, #eef1f5 66%, #7d8792 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0.05em 0 #2a0a1c) drop-shadow(0 0 0.35em rgba(0, 0, 0, 0.55));
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: min(clamp(42px, calc(4.8 * var(--shell-vw)), 88px), var(--yaku-fit));
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.result-showcase.player-result .result-character.player-dragon img {
  width: 96%;
  height: 98%;
  right: 0;
  bottom: -2%;
  object-fit: contain;
  object-position: center;
  filter: none;
}

.result-showcase.player-result .result-character.player-dragon > span {
  border-left-color: #b17ece;
}

.result-dialogue.with-face {
  min-height: clamp(62px, calc(5.2 * var(--shell-vw)), 98px);
  display: flex;
  align-items: center;
  gap: clamp(10px, calc(0.75 * var(--shell-vw)), 15px);
}

.result-face-frame {
  width: clamp(52px, calc(4.8 * var(--shell-vw)), 88px);
  height: clamp(52px, calc(4.8 * var(--shell-vw)), 88px);
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  border: 2px solid #bc9ad0;
  border-radius: 50%;
  background: #1d1b1f;
}

.result-face-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 2%;
  transform: scale(1.9);
  transform-origin: 50% 15%;
}

.result-dialogue > span {
  display: block;
}

.result-showcase.result-tier-high {
  box-shadow: inset 0 0 0 clamp(3px, calc(0.3 * var(--shell-vw)), 6px) #8958a5;
}

.result-showcase.result-tier-high .result-primary-yaku {
  background:
    linear-gradient(100deg, rgba(152, 42, 97, 0.88), rgba(46, 25, 58, 0.84) 58%, rgba(6, 12, 15, 0.92));
}

.result-showcase.result-tier-high .result-primary-yaku > strong {
  font-size: min(clamp(49px, calc(5.6 * var(--shell-vw)), 104px), var(--yaku-fit));
}

.result-showcase.result-tier-yakuman {
  background:
    radial-gradient(circle at 28% 48%, rgba(218, 59, 139, 0.46), transparent 36%),
    repeating-linear-gradient(118deg, transparent 0 34px, rgba(203, 169, 223, 0.035) 35px 36px),
    linear-gradient(135deg, #49102d, #160204 60%, #020202);
  box-shadow: inset 0 0 0 clamp(5px, calc(0.5 * var(--shell-vw)), 10px) #9f70ba;
}

.result-showcase.result-tier-yakuman .result-primary-yaku {
  grid-template-columns: auto 1fr;
  background: linear-gradient(90deg, #761b49, #270818 62%, #080303);
  border-block-width: clamp(3px, calc(0.3 * var(--shell-vw)), 6px);
  border-color: #ceaee0;
}

.result-showcase.result-tier-yakuman .result-primary-yaku > small {
  color: #d5bae5;
  font-size: clamp(20px, calc(1.7 * var(--shell-vw)), 32px);
}

.result-showcase.result-tier-yakuman .result-primary-yaku > strong {
  /* 役満は役名だけで一行を使うので、帯の幅をほぼ丸ごと割り当てられる。 */
  --yaku-fit: calc(90cqw / var(--yaku-chars, 4));
  grid-column: 1 / -1;
  font-size: min(clamp(72px, calc(8.5 * var(--shell-vw)), 158px), var(--yaku-fit));
  text-align: center;
  /* 役満も同じ金文字。縁取りと三段の影は付けない（ぶれの原因）。 */
  filter: drop-shadow(0 0.05em 0 #2a0a1c) drop-shadow(0 0 0.45em rgba(0, 0, 0, 0.6));
}

@container shell (max-width: 860px) {
  .win-effect {
    grid-template-columns: 33% 67%;
    padding-inline: calc(2 * var(--shell-vw));
  }

  .win-effect.player-win .win-effect-character {
    width: calc(33 * var(--shell-vw));
  }

  .win-effect-copy > span#win-effect-title {
    font-size: min(clamp(42px, calc(7 * var(--shell-vw)), 72px), var(--title-max));
  }

  .win-effect-message {
    max-width: 100%;
  }

  .result-primary-yaku {
    grid-template-columns: auto 1fr;
  }

}

@media (prefers-reduced-motion: reduce) {
  .win-effect.active.result-tier-high .win-effect-rank-aura,
  .win-effect.active.result-tier-yakuman .win-effect-rank-aura,
  .win-effect.active.result-tier-yakuman::after {
    animation-duration: 0.01ms !important;
  }
}

/* ── Table dialogue: same visual language as the Kinugawa story scene ── */

.anna-speech.kinugawa-message-panel.table-message-panel {
  width: auto;
  height: auto;
  min-height: clamp(68px, calc(5.4 * var(--shell-vw)), 96px);
  top: clamp(8px, calc(0.7 * var(--shell-vw)), 13px);
  right: 18.5%;
  bottom: auto;
  left: 21.5%;
  padding:
    clamp(21px, calc(1.65 * var(--shell-vw)), 32px)
    clamp(22px, calc(2.1 * var(--shell-vw)), 40px)
    clamp(10px, calc(0.8 * var(--shell-vw)), 16px);
  overflow: visible;
  border: 1px solid rgba(255, 86, 196, 0.42);
  border-left: 1px solid rgba(255, 86, 196, 0.42);
  border-radius: 3px;
  background:
    linear-gradient(172deg, rgba(19, 9, 34, 0.91), rgba(6, 2, 13, 0.95) 62%),
    radial-gradient(140% 120% at 8% 0, rgba(144, 104, 234, 0.16), transparent 46%) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(150, 18, 148, 0.26),
    inset 0 1px 0 rgba(255, 236, 255, 0.09),
    inset 0 0 34px rgba(117, 49, 151, 0.12);
  backdrop-filter: blur(3px) saturate(1.05);
}

.anna-speech.kinugawa-message-panel.table-message-panel::before {
  translate: 0 0;
  animation: none !important;
}

.anna-speech.kinugawa-message-panel.table-message-panel.fresh::before {
  animation: none !important;
}

.anna-speech > span.table-message-speaker {
  display: block;
  position: absolute;
  z-index: 6;
  top: 0;
  left: clamp(22px, calc(2 * var(--shell-vw)), 38px);
  transform: translateY(-62%);
  margin: 0;
  padding:
    clamp(6px, calc(0.5 * var(--shell-vw)), 9px)
    clamp(22px, calc(1.7 * var(--shell-vw)), 32px)
    clamp(7px, calc(0.55 * var(--shell-vw)), 10px)
    clamp(18px, calc(1.4 * var(--shell-vw)), 27px);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 100%, 13px 100%);
  background: linear-gradient(102deg, rgba(255, 45, 166, 0.98), rgba(128, 71, 224, 0.98));
  color: #fff;
  font: 900 clamp(14px, calc(1.05 * var(--shell-vw)), 20px)/1 "M PLUS 1p", sans-serif;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.anna-speech .anna-line.kinugawa-message-text {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent !important;
  color: #f8f0ff;
  font-size: clamp(20px, calc(1.55 * var(--shell-vw)), 29px);
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: 0.02em;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.68),
    0 0 14px rgba(40, 4, 56, 0.62);
  box-shadow: none;
  line-break: strict;
}

.anna-speech.kinugawa-message-panel.table-message-panel.fresh {
  animation: table-message-enter 0.38s cubic-bezier(.17, .8, .2, 1);
}

@keyframes table-message-enter {
  0% { translate: 0 calc(2 * var(--shell-vh)); scale: 0.97; opacity: 0; }
  100% { translate: 0 0; scale: 1; opacity: 1; }
}

.river-zone {
  overflow: hidden;
}

.river {
  max-height: 100%;
  align-content: center;
}

@container shell (max-width: 860px) {
  .anna-speech.kinugawa-message-panel.table-message-panel {
    top: 6px;
    right: 20%;
    left: 22%;
    min-height: 64px;
    padding: 20px 16px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .anna-speech.kinugawa-message-panel.table-message-panel.fresh {
    animation-duration: 0.01ms !important;
  }
}

/* ── Result screens: one large outcome, no miniature narration ───────── */

.draw-result-dialog,
.terminal-result-dialog {
  width: min(calc(92 * var(--shell-vw)), 1120px);
  overflow: hidden;
  border-color: rgba(187, 156, 205, 0.62);
  background: #061011;
}

.draw-result-dialog .dialog-header,
.terminal-result-dialog .dialog-header {
  display: none;
}

.draw-result-dialog #dialog-content,
.terminal-result-dialog #dialog-content {
  padding: 0;
}

.draw-result-dialog .dialog-actions,
.terminal-result-dialog .dialog-actions {
  justify-content: center;
  padding: clamp(12px, calc(1.1 * var(--shell-vw)), 21px);
  border-top: 1px solid rgba(184, 151, 203, 0.34);
  background: #050c0d;
}

.draw-result-dialog .dialog-actions button,
.terminal-result-dialog .dialog-actions button {
  min-width: min(calc(64 * var(--shell-vw)), 310px);
  padding: 0.82em 1.8em;
  font-size: clamp(17px, calc(1.35 * var(--shell-vw)), 24px);
  letter-spacing: 0.12em;
}

.draw-result {
  min-height: min(calc(61 * var(--shell-vh)), 560px);
  display: grid;
  grid-template-rows: 1fr auto;
  position: relative;
  overflow: hidden;
  padding: clamp(24px, calc(3.2 * var(--shell-vw)), 58px);
  background:
    radial-gradient(circle at 50% 34%, rgba(126, 104, 149, 0.2), transparent 38%),
    repeating-linear-gradient(116deg, transparent 0 44px, rgba(183, 168, 199, 0.025) 45px 46px),
    linear-gradient(145deg, #061014, #1f1627 58%, #070d11);
}

.draw-result::before,
.draw-result::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.draw-result::before {
  width: min(calc(64 * var(--shell-vw)), 740px);
  aspect-ratio: 1;
  top: 38%;
  left: 50%;
  translate: -50% -50%;
  rotate: 45deg;
  border: 1px solid rgba(167, 149, 186, 0.18);
  box-shadow: inset 0 0 calc(4 * var(--shell-vw)) rgba(106, 85, 128, 0.08);
}

.draw-result::after {
  inset: 0;
  border: clamp(3px, calc(0.3 * var(--shell-vw)), 6px) solid rgba(179, 144, 199, 0.46);
  box-shadow: inset 0 0 calc(4 * var(--shell-vw)) rgba(0, 0, 0, 0.64);
}

.draw-result-title {
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  align-self: center;
}

.draw-result-title > span {
  color: #b3a2c5;
  font: 900 clamp(14px, calc(1.15 * var(--shell-vw)), 21px)/1 ui-monospace, monospace;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
}

.draw-result-title > strong {
  color: #dec8ea;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(84px, calc(11 * var(--shell-vw)), 178px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  -webkit-text-stroke: 1px #6b497e;
  text-shadow:
    0 0.05em 0 #472c56,
    0 0.11em 0 #061014,
    0 0 0.42em rgba(142, 117, 168, 0.38);
}

.draw-status-grid {
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, calc(1.2 * var(--shell-vw)), 22px);
}

.draw-status {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: clamp(14px, calc(1.25 * var(--shell-vw)), 23px) clamp(18px, calc(1.7 * var(--shell-vw)), 32px);
  border: 1px solid rgba(176, 160, 193, 0.46);
  background: rgba(2, 12, 17, 0.82);
  box-shadow: inset 0 0 calc(1.4 * var(--shell-vw)) rgba(147, 125, 169, 0.08);
}

.draw-status > span {
  color: #c5c1c9;
  font-size: clamp(17px, calc(1.35 * var(--shell-vw)), 24px);
  font-weight: 800;
}

.draw-status > strong {
  color: #f6fdff;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(30px, calc(3.3 * var(--shell-vw)), 58px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.draw-status.player {
  border-color: rgba(179, 138, 203, 0.56);
}

.draw-status.player > strong {
  color: #d3b7e3;
}

.terminal-result,
.counter-result {
  min-height: min(calc(55 * var(--shell-vh)), 510px);
  display: grid;
  grid-template-columns: minmax(150px, 30%) minmax(0, 1fr);
  align-items: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 50%, rgba(195, 73, 134, 0.32), transparent 30%),
    linear-gradient(135deg, #160508, #3a1327 42%, #071117);
}

.terminal-result-symbol,
.counter-result-symbol {
  justify-self: center;
  color: #ccaadf;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(112px, calc(15 * var(--shell-vw)), 240px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0.07em #882356, 0 0.15em #050202;
}

.terminal-result-copy,
.counter-result-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: clamp(12px, calc(1 * var(--shell-vw)), 20px);
  padding-right: clamp(24px, calc(3 * var(--shell-vw)), 54px);
}

.terminal-result-copy > strong,
.counter-result-copy > strong {
  color: #e0cceb;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(38px, calc(5 * var(--shell-vw)), 84px);
  font-weight: 900;
  line-height: 1.08;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.terminal-result-copy > em {
  width: fit-content;
  padding: 0.18em 0.82em;
  border: 2px solid #ec78b2;
  background: #8f265b;
  color: #fff;
  font-size: clamp(28px, calc(3.3 * var(--shell-vw)), 58px);
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.18em;
  white-space: nowrap;
  word-break: keep-all;
}

.counter-result {
  background:
    radial-gradient(circle at 22% 50%, rgba(174, 121, 204, 0.26), transparent 30%),
    linear-gradient(135deg, #130b02, #301b3d 42%, #071117);
}

.counter-result-copy > small {
  color: #ccabdf;
  font-size: clamp(17px, calc(1.4 * var(--shell-vw)), 25px);
  font-weight: 900;
  letter-spacing: 0.2em;
}

.counter-result-copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(9px, calc(0.8 * var(--shell-vw)), 15px);
}

.counter-result-copy b,
.counter-result-copy em {
  padding: 0.42em 0.75em;
  border: 1px solid rgba(204, 171, 223, 0.56);
  background: rgba(5, 12, 15, 0.76);
  color: #e3d1ed;
  font-size: clamp(18px, calc(1.7 * var(--shell-vw)), 31px);
  font-style: normal;
}

.win-result-dialog #dialog-content {
  position: relative;
}

.damage-result-banner {
  position: absolute;
  z-index: 9;
  bottom: clamp(12px, calc(1.2 * var(--shell-vw)), 22px);
  left: clamp(12px, calc(1.2 * var(--shell-vw)), 22px);
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  padding: 0.62em 0.95em;
  border: 2px solid #9e87b6;
  background: rgba(16, 10, 21, 0.94);
  color: #e8fcff;
  box-shadow: 0 0 calc(1.2 * var(--shell-vw)) rgba(134, 107, 162, 0.34);
}

.damage-result-banner > span {
  font-size: clamp(17px, calc(1.25 * var(--shell-vw)), 23px);
  font-weight: 900;
  letter-spacing: 0.14em;
}

.damage-result-banner > strong {
  font-size: clamp(34px, calc(3.6 * var(--shell-vw)), 64px);
  font-weight: 900;
  line-height: 1;
}

.damage-result-banner > strong i {
  margin-left: 0.16em;
  font-size: 0.52em;
  font-style: normal;
}

.game-over-result {
  position: relative;
}

@container shell (max-width: 760px) {
  .draw-result {
    min-height: calc(62 * var(--shell-vh));
    padding: 18px;
  }

  .draw-status-grid {
    grid-template-columns: 1fr;
  }

  .terminal-result,
  .counter-result {
    grid-template-columns: 30% 70%;
  }

  .terminal-result-copy > strong,
  .counter-result-copy > strong {
    font-size: clamp(32px, calc(6.2 * var(--shell-vw)), 56px);
  }
}

/* Game over is a primary result, not a footnote. */

.game-over-result {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.game-over-dialog .result-character > span {
  display: none;
}

.game-over-stamp {
  min-width: min(calc(36 * var(--shell-vw)), 520px);
  position: absolute;
  z-index: 14;
  left: clamp(14px, calc(1.6 * var(--shell-vw)), 30px);
  bottom: clamp(14px, calc(1.6 * var(--shell-vw)), 30px);
  display: grid;
  gap: clamp(4px, calc(0.4 * var(--shell-vw)), 8px);
  padding: clamp(14px, calc(1.15 * var(--shell-vw)), 22px) clamp(18px, calc(1.5 * var(--shell-vw)), 29px);
  overflow: hidden;
  border: clamp(3px, calc(0.25 * var(--shell-vw)), 5px) solid #eb70ad;
  background:
    linear-gradient(102deg, rgba(113, 20, 67, 0.98), rgba(32, 6, 19, 0.97));
  color: #ebdef3;
  box-shadow:
    inset 0 0 0 clamp(3px, calc(0.25 * var(--shell-vw)), 5px) #230615,
    calc(0.55 * var(--shell-vw)) calc(0.65 * var(--shell-vw)) 0 rgba(0, 0, 0, 0.72),
    0 0 calc(1.8 * var(--shell-vw)) rgba(229, 71, 150, 0.52);
  transform: rotate(-1.2deg);
}

.game-over-stamp::after {
  content: "";
  position: absolute;
  inset: 0;
  border-block: 1px solid rgba(223, 203, 235, 0.46);
  pointer-events: none;
}

.game-over-stamp > strong {
  position: relative;
  z-index: 1;
  color: #eee3f5;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(48px, calc(5.8 * var(--shell-vw)), 108px);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: 0.025em;
  white-space: nowrap;
  -webkit-text-stroke: clamp(1px, calc(0.08 * var(--shell-vw)), 2px) #420926;
  text-shadow:
    0 0.08em 0 #7b184a,
    0 0.16em 0 #180103;
}

.game-over-stamp > span {
  position: relative;
  z-index: 1;
  color: #d7bce6;
  font-size: clamp(18px, calc(1.45 * var(--shell-vw)), 27px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.06em;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

@container shell (max-width: 760px) or (max-height: 680px) {
  .game-over-stamp {
    min-width: min(calc(43 * var(--shell-vw)), 390px);
    left: 8px;
    bottom: 8px;
    padding: 10px 14px;
  }

  .game-over-stamp > strong {
    font-size: clamp(38px, calc(7 * var(--shell-vw)), 66px);
  }

  .game-over-stamp > span {
    font-size: clamp(16px, calc(2 * var(--shell-vw)), 21px);
  }
}

/* ── Viewport-safe result / reward flow ────────────────────────────────── */

.win-result-dialog {
  width: min(calc(96 * var(--shell-vw)), 1480px);
  /* 中身ぶんの高さで開く。足りるときは小さく、役が多いときは縦に伸びる。
     決め打ちで縦いっぱいにすると、下に大きな空きができて間が抜ける。 */
  height: auto;
  max-height: min(calc(94 * var(--shell-vh)), 1400px);
  max-height: min(calc(94 * var(--shell-vh)), 1400px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0;
  overflow: hidden;
}

.win-result-dialog .dialog-header {
  min-height: clamp(46px, calc(4.2 * var(--shell-vh)), 58px);
  flex: 0 0 auto;
}

.win-result-dialog #dialog-content {
  min-width: 0;
  min-height: 0;
  position: relative;
  /* スクロールバーは出さない。あふれるときは、あふれたまま見せる。 */
  overflow: hidden;
}

.win-result-dialog .result-showcase,
.reward-ready-dialog .result-showcase {
  width: 100%;
  /* 中身ぶんに伸ばす。決め打ちで縦いっぱいにすると中が切れる。 */
  height: auto;
  min-height: 100%;
  grid-template-columns: 34% 66%;
  overflow: hidden;
}

/* 画面が低いと、主役と点数と台詞だけで縦を使い切ってしまう。
   低い画面では上下の見出しを一段詰めて、成立役の欄へ高さを回す。 */
@container shell (max-height: 950px) {
  .win-result-dialog .result-primary-yaku {
    padding-block: calc(0.2 * var(--shell-vw));
  }

  .win-result-dialog .result-primary-yaku > strong {
    font-size: calc(min(clamp(28px, calc(3.6 * var(--shell-vw)), 52px), var(--yaku-fit)) * var(--yaku-row-shrink, 1));
  }

  .win-result-dialog .result-score {
    padding-block: calc(0.25 * var(--shell-vw));
  }

  .win-result-dialog .result-score span {
    font-size: calc(clamp(30px, calc(3.4 * var(--shell-vw)), 58px) * var(--yaku-row-shrink, 1));
  }

  .win-result-dialog .result-score strong {
    font-size: calc(clamp(22px, calc(2.3 * var(--shell-vw)), 40px) * var(--yaku-row-shrink, 1));
  }

  .win-result-dialog .result-dialogue {
    padding-block: calc(0.35 * var(--shell-vw));
  }
}

/* 成立役が二行以上あるときは、主役と点数を少しだけ詰めて高さを回す。 */
.win-result-dialog .result-showcase {
  --yaku-row-shrink: calc(1 - (var(--yaku-rows, 1) - 1) * 0.14);
}

/* 右上の勝敗表示と重ならないよう、上段2行だけ右を空けておく。 */
.win-result-dialog .result-call-row,
.win-result-dialog .result-primary-yaku {
  padding-right: calc(var(--result-badge-w) + 2.4%);
}

.win-result-dialog .result-board {
  /* 台詞が長い局（役満など）で最後の行が切れていた。
     縦に積んだ中身を縮められるようにして、台詞まで必ず収める。 */
  min-width: 0;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(4px, calc(0.7 * var(--shell-vh)), 14px);
  padding-block: clamp(8px, calc(1 * var(--shell-vh)), 20px);
  overflow: hidden;
}

/* 伸び縮みするのは成立役の欄だけ。ほかは自分の高さを保つので、
   どこかが押し出されて切れる、ということが起きない。 */
.win-result-dialog .result-board > * {
  flex: 0 0 auto;
}

.win-result-dialog .result-board > .yaku-showcase {
  /* 欄の高さは中身ぶんだけ。余った縦は板全体の間隔へ回し、
     空の箱を大きく広げない。役が増えたら下の主役と点数を詰めて場所を作る。 */
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 役満は役名が大きいぶん縦が足りなくなり、成立役の枠が途中で切れていた。 */
.win-result-dialog .result-tier-yakuman .yaku-showcase {
  margin-block: clamp(3px, calc(0.4 * var(--shell-vh)), 8px);
  padding: clamp(6px, calc(0.52 * var(--shell-vw)), 11px);
}

.win-result-dialog .result-dialogue {
  flex: 0 0 auto;
  margin-top: clamp(6px, calc(0.7 * var(--shell-vh)), 12px);
  padding: clamp(5px, calc(0.5 * var(--shell-vh)), 10px) clamp(8px, calc(0.7 * var(--shell-vw)), 14px);
  font-size: clamp(11px, calc(0.95 * var(--shell-vw)), 16px);
  line-height: 1.38;
}

.win-result-dialog .result-dialogue > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.win-result-dialog .result-hand-strip {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  /* ドラの金札は牌の上と右へはみ出す。横あふれは切りたいが、
     この札まで切れていたので、はみ出す分だけ内側に余白を作る。 */
  padding-top: clamp(9px, 0.85cqw, 18px);
  padding-right: clamp(8px, 0.75cqw, 16px);
}

/* 牌は伸ばさない。flex-grow を付けると、余った幅を分け合って
   カンや鳴きの牌だけが倍の大きさに膨らむ（アガリ画面のカンがこれだった）。 */
.win-result-dialog .result-hand-strip > .result-tile {
  flex: 0 0 var(--result-tile-width) !important;
  max-width: var(--result-tile-width);
}

.win-result-dialog .result-hand-strip > .result-meld {
  min-width: 0;
  flex: 0 0 auto;
  overflow: hidden;
}

.win-result-dialog .result-hand-strip > .result-meld > .result-tile {
  flex: 0 0 var(--result-tile-width) !important;
  max-width: var(--result-tile-width) !important;
}

.win-result-dialog .result-hand-strip .result-tile.winning-tile {
  margin-left: clamp(4px, calc(0.35 * var(--shell-vw)), 7px);
}

.win-result-dialog .dialog-actions {
  min-height: clamp(84px, calc(9 * var(--shell-vh)), 124px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: clamp(8px, calc(0.9 * var(--shell-vw)), 18px);
  padding: clamp(8px, calc(0.7 * var(--shell-vw)), 13px);
  border-top: 1px solid rgba(190, 154, 210, 0.44);
  background:
    linear-gradient(90deg, rgba(91, 24, 58, 0.32), transparent 24% 76%, rgba(91, 24, 58, 0.32)),
    #050d0e;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.46);
}

.win-result-dialog .dialog-actions button {
  /* 勝ちの一言を押す釦。小さいと締まらないので、幅も字も大きく取る。 */
  min-width: min(calc(86 * var(--shell-vw)), 860px);
  min-height: clamp(64px, calc(7.2 * var(--shell-vh)), 96px);
  padding: 0.5em 1.6em;
  font-size: clamp(24px, calc(2.05 * var(--shell-vw)), 40px);
  letter-spacing: 0.14em;
  white-space: nowrap;
}

/* 二択になる場面（第三戦のゲームオーバー）では、横幅を半分ずつ分け合う。
   一つぶんの大きさのまま二つ並べると、枠からはみ出して字が切れる。 */
.win-result-dialog .dialog-actions button:not(:only-child) {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 0.8em;
  font-size: clamp(19px, calc(1.55 * var(--shell-vw)), 32px);
  letter-spacing: 0.08em;
}

.terminal-result-dialog .dialog-actions button:not(:only-child) {
  flex: 1 1 0;
  min-width: 0;
}

.reward-ready-dialog .result-character.player-dragon > span {
  display: none;
}

.reward-ready-dialog .win-reward-badge {
  width: min(calc(34 * var(--shell-vw)), 470px);
  max-width: calc(38% - 24px);
  position: absolute;
  z-index: 10;
  left: clamp(12px, calc(1.35 * var(--shell-vw)), 24px);
  bottom: clamp(12px, calc(1.35 * var(--shell-vw)), 24px);
  display: grid;
  justify-items: start;
  gap: 0.2em;
  margin: 0;
  padding: clamp(10px, calc(0.8 * var(--shell-vw)), 15px) clamp(13px, calc(1.1 * var(--shell-vw)), 21px);
  border: 2px solid #bc97d2;
  background:
    linear-gradient(110deg, rgba(122, 33, 78, 0.98), rgba(36, 8, 22, 0.96));
  box-shadow:
    inset 0 0 0 3px rgba(32, 6, 19, 0.72),
    0 0 calc(1.4 * var(--shell-vw)) rgba(156, 93, 193, 0.42);
  text-align: left;
  pointer-events: none;
}

.reward-ready-dialog .win-reward-badge small {
  color: #d0b1e2;
  font: 900 clamp(11px, calc(0.8 * var(--shell-vw)), 14px)/1 ui-monospace, monospace;
  letter-spacing: 0.24em;
}

.reward-ready-dialog .win-reward-badge strong {
  color: #f1e8f6;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(18px, calc(1.55 * var(--shell-vw)), 30px);
  font-weight: 900;
  line-height: 1.16;
  /* 折り返すとしても、最後の1文字だけが次行へ落ちる形にはしない。 */
  text-wrap: balance;
  text-shadow: 0 0.07em #64163d, 0 0 0.42em rgba(161, 101, 196, 0.78);
}

.reward-ready-dialog .dialog-actions button {
  border-width: 2px;
  border-color: #d1b3e2;
  background:
    linear-gradient(180deg, #c46192 0%, #903261 48%, #5d1b3c 52%, #7d2652 100%);
  color: #fffbe8;
  box-shadow:
    inset 0 0 0 3px #3c1026,
    0 0 calc(1.4 * var(--shell-vw)) rgba(159, 96, 195, 0.48);
}

@container shell (max-height: 780px) {
  .win-result-dialog {
    height: calc(calc(100 * var(--shell-vh)) - 20px);
    max-height: calc(calc(100 * var(--shell-vh)) - 20px);
  }

  .win-result-dialog .dialog-header {
    min-height: 42px;
    padding-block: 6px;
  }

  .win-result-dialog .dialog-actions {
    min-height: 62px;
    padding: 7px;
  }

  .win-result-dialog .dialog-actions button {
    min-height: 48px;
  }

  .win-result-dialog .result-showcase {
    grid-template-columns: 34% 66%;
  }

  .win-result-dialog .result-board {
    padding: 0.55rem 0.8rem 0.5rem 0.25rem;
  }

  .win-result-dialog .result-primary-yaku > strong {
    font-size: calc(min(clamp(36px, calc(4.8 * var(--shell-vw)), 66px), var(--yaku-fit)) * var(--yaku-row-shrink, 1));
  }

  .win-result-dialog .result-showcase.result-tier-high .result-primary-yaku > strong {
    font-size: min(clamp(42px, calc(5.6 * var(--shell-vw)), 76px), var(--yaku-fit));
  }

  .win-result-dialog .result-showcase.result-tier-yakuman .result-primary-yaku > strong {
    font-size: min(clamp(58px, calc(7.4 * var(--shell-vw)), 98px), var(--yaku-fit));
  }

  .win-result-dialog .result-showcase .yaku-list > .yaku-entry {
    min-height: 0;
  }

  .win-result-dialog .result-showcase.result-tier-yakuman .yaku-list > .yaku-entry {
    min-height: 0;
  }

  .win-result-dialog .result-dialogue.with-face {
    min-height: 54px;
  }
}

@container shell (max-width: 760px) {
  .win-result-dialog {
    width: calc(calc(100 * var(--shell-vw)) - 16px);
    height: calc(calc(100 * var(--shell-vh)) - 16px);
    max-height: calc(calc(100 * var(--shell-vh)) - 16px);
  }

  .reward-ready-dialog .win-reward-badge {
    width: auto;
    max-width: 40%;
    left: 8px;
    bottom: 8px;
  }

  .win-result-dialog .dialog-actions {
    flex-direction: row;
  }
}

/* ── Full-size table typography and call cut-ins ─────────────────────── */

.app-shell {
  --hand-tile-width: 3.58cqw;
  --river-tile-width: 3.22cqw;
  --opponent-tile-width: 3.02cqw;
  --call-tile-width: 2.7cqw;
}

.felt-field {
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  padding-block: 0.35% !important;
}

.river-zone {
  width: min(68%, 1080px) !important;
  max-width: none;
  overflow: visible !important;
}

.river {
  max-height: none !important;
  grid-template-columns: repeat(8, var(--river-tile-width)) !important;
  grid-auto-rows: calc(var(--river-tile-width) * var(--tile-ratio)) !important;
  place-content: center;
  column-gap: 0.28cqw !important;
  row-gap: 0.32cqw !important;
}

.river > .mini-tile,
.meld-group > .mini-tile {
  --tile-width: var(--river-tile-width);
  width: var(--river-tile-width) !important;
  height: calc(var(--river-tile-width) * var(--tile-ratio)) !important;
}

.opponent-hand-wrap {
  padding-inline: 24% 18%;
}

.opponent-hand {
  min-height: calc(var(--opponent-tile-width) * var(--tile-ratio));
}

.center-console {
  scale: 1.08;
}

.center-console .console-label,
.center-console > div > span,
.brand h1,
.nameplate h2,
.top-bar .round-heading span,
.top-bar .round-heading strong,
.top-bar .icon-button,
.nameplate .seat-mark,
.status-panel .score-heading span,
.status-panel .section-title > span,
#item-count,
.item-button strong,
.item-state,
.turn-status .hand-meta,
#wait-label:not(:empty),
.turn-status .assist-controls > *,
.meld-label,
.hand-label b,
.call-prompt-title strong,
.call-pass-button > span,
.call-offer-head p,
.shuffle-head p,
#pass-button {
  font-size: clamp(18px, calc(1.12 * var(--shell-vw)), 24px) !important;
}

.anna-speech > span.table-message-speaker,
.win-confirm-copy small,
.riichi-effect-copy small,
.anna-reaction-copy small,
.win-effect-copy > small,
.result-outcome-badge small,
.result-primary-yaku > small,
.counter-result-copy > small,
.reward-ready-dialog .win-reward-badge small,
.reward-result small,
.reward-roulette-header p,
.reward-roulette-header span,
.kinugawa-story-hint,
.title-card .eyebrow,
.title-card .title-sub,
.title-card .rule-chips span,
#riichi-effect-sub {
  font-size: clamp(18px, calc(1.25 * var(--shell-vw)), 26px) !important;
}

.center-console strong,
.wind-box strong {
  font-size: clamp(28px, calc(2 * var(--shell-vw)), 40px) !important;
}

.furiten-status {
  min-width: 0;
  padding: 0.52em 0.85em !important;
  cursor: help;
}

.furiten-status > strong {
  font-size: clamp(22px, calc(1.5 * var(--shell-vw)), 30px) !important;
}

.call-prompt {
  min-height: calc(100 * var(--shell-vh));
}

.call-prompt .call-choice strong {
  font-size: clamp(44px, calc(4 * var(--shell-vw)), 72px) !important;
}

.call-prompt .call-tile {
  --tile-width: clamp(62px, calc(5.25 * var(--shell-vw)), 94px);
}

.call-pass-button {
  min-width: min(calc(52 * var(--shell-vw)), 640px);
  font-size: clamp(28px, calc(2.2 * var(--shell-vw)), 40px) !important;
}

.status-panel,
.status-panel .item-rack,
.status-panel .cheat-rack,
.status-panel .item-buttons,
.status-panel .cheat-actions {
  overflow: visible !important;
}

.cheat-rack-heading {
  justify-content: center;
  margin-bottom: clamp(8px, calc(0.55 * var(--shell-vw)), 12px);
}

.cheat-rack-heading strong {
  font-size: clamp(22px, calc(1.45 * var(--shell-vw)), 29px) !important;
}

.status-panel .cheat-actions > button {
  min-height: clamp(76px, calc(4.35 * var(--shell-vw)), 88px);
  overflow: visible;
  grid-template-columns: clamp(42px, calc(2.65 * var(--shell-vw)), 52px) minmax(0, 1fr);
  grid-template-rows: 1fr;
  opacity: 0.78;
}

.status-panel .cheat-actions > button > i {
  grid-row: 1;
  font-size: clamp(22px, calc(1.45 * var(--shell-vw)), 29px);
}

.status-panel .cheat-actions > button > span {
  min-width: 0;
  container-type: inline-size;
}

.status-panel .cheat-actions > button strong {
  overflow: visible;
  /* 名前が長いほど小さくする。一行に収まりきらない事故を起こさない。 */
  font-size: min(
    clamp(19px, calc(1.08 * var(--shell-vw)), 22px),
    calc(98cqw / var(--cheat-name-chars, 7))
  );
  line-height: 1.2;
  text-overflow: clip;
  white-space: nowrap;
}

.status-panel .cheat-actions > button > b {
  display: none !important;
}

.status-panel .cheat-actions > button em.cheat-rate {
  display: block !important;
  color: #c199d8;
  font-size: clamp(20px, calc(1.28 * var(--shell-vw)), 26px);
  font-style: normal;
  font-weight: 1000;
  line-height: 1.05;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-shadow: 0 0 0.55em rgba(164, 106, 198, 0.55);
}

.status-panel .cheat-actions > button.used:not(.active) em.cheat-rate {
  color: #b8aebd;
  text-shadow: none;
}

.status-panel .cheat-actions > button::after,
.status-panel .item-button::after {
  content: attr(data-tooltip);
  width: min(420px, calc(30 * var(--shell-vw)));
  position: absolute;
  z-index: 500;
  top: 50%;
  right: calc(100% + 14px);
  translate: 10px -50%;
  padding: 0.75em 0.9em;
  border: 2px solid #be9dd1;
  background: rgba(3, 9, 10, 0.98);
  color: #f0e6f5;
  font-size: clamp(18px, calc(1.08 * var(--shell-vw)), 22px);
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  /* 「アタリ牌」のような語の途中で折り返させない。文節で折る。 */
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: normal;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 calc(0.65 * var(--shell-vw)) calc(1.6 * var(--shell-vw)) rgba(0, 0, 0, 0.72);
  transition: opacity 120ms ease, translate 120ms ease;
}

.status-panel .cheat-actions > button:hover::after,
.status-panel .cheat-actions > button:focus-visible::after,
.status-panel .item-button:hover::after,
.status-panel .item-button:focus-visible::after {
  translate: 0 -50%;
  opacity: 1;
}

.status-panel .item-button {
  position: relative;
  overflow: visible;
}

.status-panel .item-button > span:nth-child(2) {
  display: grid;
  align-items: center;
}

/* ── Table-cheat activation: full-screen arcade cut-in ─────────────── */

.cheat-cutin {
  --cheat-accent: #bf96d7;
  --cheat-hot: #d94e94;
  --cheat-deep: #46102b;
  position: absolute;
  z-index: 535;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: all;
  isolation: isolate;
}

.cheat-cutin.safety {
  --cheat-accent: #cfc1dd;
  --cheat-hot: #644682;
  --cheat-deep: #21132d;
}

.cheat-cutin.vision {
  --cheat-accent: #ddaff8;
  --cheat-hot: #9156f1;
  --cheat-deep: #271043;
}

.cheat-cutin.dora {
  --cheat-accent: #d4b9e4;
  --cheat-hot: #9958bf;
  --cheat-deep: #500b2e;
}

.cheat-cutin-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.94), transparent 28% 72%, rgba(0, 0, 0, 0.94)),
    linear-gradient(135deg, #030607 0 42%, var(--cheat-deep) 42% 58%, #030607 58% 100%);
}

.cheat-cutin-rays {
  width: calc(155 * var(--shell-vw));
  aspect-ratio: 1;
  position: absolute;
  background: repeating-conic-gradient(
    from -4deg,
    color-mix(in srgb, var(--cheat-accent) 74%, transparent) 0 1.4deg,
    transparent 1.4deg 6.5deg,
    color-mix(in srgb, var(--cheat-hot) 48%, transparent) 6.5deg 8deg,
    transparent 8deg 13deg
  );
}

.cheat-cutin-slashes {
  position: absolute;
  inset: -35%;
  background: repeating-linear-gradient(
    105deg,
    transparent 0 7.5%,
    color-mix(in srgb, var(--cheat-hot) 70%, transparent) 7.5% 8.2%,
    transparent 8.2% 14%
  );
  transform: rotate(-8deg);
}

.cheat-cutin-symbol {
  position: absolute;
  z-index: 1;
  left: clamp(24px, calc(5 * var(--shell-vw)), 110px);
  color: color-mix(in srgb, var(--cheat-hot) 68%, #130208);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(260px, calc(38 * var(--shell-vw)), 720px);
  font-weight: 1000;
  line-height: 0.72;
  -webkit-text-stroke: clamp(3px, calc(0.32 * var(--shell-vw)), 7px) var(--cheat-accent);
  text-shadow:
    0.035em 0.045em 0 #050000,
    0.075em 0.09em 0 color-mix(in srgb, var(--cheat-hot) 66%, #000),
    0 0 0.18em var(--cheat-hot);
}

.cheat-cutin-band {
  width: calc(112 * var(--shell-vw));
  min-height: min(calc(52 * var(--shell-vh)), 560px);
  position: relative;
  z-index: 2;
  /* 帯は画面より広い。中の文字は字数に合わせて縮めるので、この帯を基準にする。 */
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(210px, 0.5fr) minmax(560px, 1.55fr) minmax(250px, 0.58fr);
  align-items: center;
  gap: clamp(20px, calc(2.6 * var(--shell-vw)), 52px);
  /* 左右8vwだと、帯のはみ出し分（片側calc(6 * var(--shell-vw))）を引いて画面端まで2vwしかなく、
     右端の「危険牌消去」が画面の外へ出ていた。内側の余白を広げる。 */
  padding: clamp(42px, calc(4 * var(--shell-vw)), 78px) calc(10.5 * var(--shell-vw));
  border-block: clamp(5px, calc(0.42 * var(--shell-vw)), 9px) solid var(--cheat-accent);
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--cheat-deep) 96%, #000) 8% 92%, transparent),
    linear-gradient(115deg, var(--cheat-hot), #060304 48% 62%, var(--cheat-hot));
  box-shadow:
    0 0 0 8px rgba(0, 0, 0, 0.84),
    0 0 0 12px color-mix(in srgb, var(--cheat-hot) 45%, transparent),
    0 0 calc(5 * var(--shell-vw)) var(--cheat-hot);
  transform: rotate(-2deg);
}

.cheat-cutin-band > span {
  color: var(--cheat-accent);
  font-size: clamp(28px, calc(2.2 * var(--shell-vw)), 46px);
  font-weight: 1000;
  letter-spacing: 0.22em;
  text-align: right;
  text-shadow: 0 0.1em 0 #000;
  white-space: nowrap;
}

.cheat-cutin-band > strong {
  color: #f0e6f5;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: min(clamp(64px, calc(7 * var(--shell-vw)), 134px), calc(43cqw / var(--cutin-name-chars, 6)));
  font-weight: 1000;
  line-height: 0.95;
  letter-spacing: 0.025em;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: clamp(1px, calc(0.12 * var(--shell-vw)), 3px) var(--cheat-deep);
  text-shadow:
    0.045em 0.055em 0 var(--cheat-hot),
    0.095em 0.11em 0 #090102,
    0 0 0.38em var(--cheat-accent);
}

/* 右の一言は廃止。三列目は空けたままにして、技名の位置を動かさない。 */

.cheat-cutin.dora .cheat-cutin-band > strong {
  font-size: min(clamp(48px, calc(5.6 * var(--shell-vw)), 104px), calc(43cqw / var(--cutin-name-chars, 6)));
  letter-spacing: 0;
}

.cheat-cutin.active .cheat-cutin-backdrop {
  animation: cheat-cutin-darken 1180ms ease both;
}

.cheat-cutin.active .cheat-cutin-rays {
  animation: cheat-cutin-rays 1180ms ease-out both;
}

.cheat-cutin.active .cheat-cutin-slashes {
  animation: cheat-cutin-slashes 1180ms cubic-bezier(.12, .75, .18, 1) both;
}

.cheat-cutin.active .cheat-cutin-symbol {
  animation: cheat-cutin-symbol 1180ms cubic-bezier(.12, .82, .2, 1) both;
}

.cheat-cutin.active .cheat-cutin-band {
  animation: cheat-cutin-strike 1180ms cubic-bezier(.12, .82, .2, 1) both;
}

@keyframes cheat-cutin-darken {
  0%, 100% { opacity: 0; }
  8%, 88% { opacity: 1; }
}

@keyframes cheat-cutin-rays {
  0% { opacity: 0; scale: 0.12; rotate: -28deg; }
  19% { opacity: 0.92; scale: 1; }
  72% { opacity: 0.76; }
  100% { opacity: 0; scale: 1.52; rotate: 22deg; }
}

@keyframes cheat-cutin-slashes {
  0% { opacity: 0; translate: calc(68 * var(--shell-vw)) 0; }
  18% { opacity: 0.9; translate: calc(-4 * var(--shell-vw)) 0; }
  72% { opacity: 0.68; translate: calc(-9 * var(--shell-vw)) 0; }
  100% { opacity: 0; translate: calc(-74 * var(--shell-vw)) 0; }
}

@keyframes cheat-cutin-symbol {
  0% { opacity: 0; translate: calc(-28 * var(--shell-vw)) calc(12 * var(--shell-vh)); scale: 2.1; }
  18% { opacity: 1; translate: calc(1 * var(--shell-vw)) 0; scale: 0.94; }
  26%, 78% { opacity: 0.86; translate: 0 0; scale: 1; }
  100% { opacity: 0; translate: calc(8 * var(--shell-vw)) calc(-5 * var(--shell-vh)); scale: 1.34; }
}

@keyframes cheat-cutin-strike {
  0% { opacity: 0; translate: calc(110 * var(--shell-vw)) 0; scale: 1.32; }
  17% { opacity: 1; translate: calc(-2 * var(--shell-vw)) 0; scale: 0.97; }
  24% { translate: calc(1 * var(--shell-vw)) 0; scale: 1.02; }
  31%, 80% { opacity: 1; translate: 0 0; scale: 1; }
  100% { opacity: 0; translate: calc(-105 * var(--shell-vw)) 0; scale: 1.08; }
}

.call-cutin {
  position: absolute;
  z-index: 520;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: all;
  isolation: isolate;
}

.call-cutin-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.76));
}

.call-cutin-rays {
  width: calc(150 * var(--shell-vw));
  aspect-ratio: 1;
  position: absolute;
  background: repeating-conic-gradient(
    from 8deg,
    rgba(196, 157, 218, 0.32) 0 2deg,
    transparent 2deg 8deg
  );
}

.call-cutin-band {
  /* 中の文字の大きさを、この帯の幅から決められるようにする。 */
  container-type: inline-size;
  width: calc(110 * var(--shell-vw));
  min-height: min(calc(48 * var(--shell-vh)), 510px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 0.52fr) minmax(300px, 1.25fr) minmax(320px, 1fr);
  align-items: center;
  gap: clamp(20px, calc(3 * var(--shell-vw)), 58px);
  padding: clamp(28px, calc(3.2 * var(--shell-vw)), 62px) calc(8 * var(--shell-vw));
  border-block: clamp(4px, calc(0.38 * var(--shell-vw)), 7px) solid #ccaadf;
  background:
    linear-gradient(100deg, rgba(109, 24, 67, 0.98), rgba(17, 3, 8, 0.97) 56%, rgba(100, 25, 63, 0.98));
  box-shadow: 0 0 0 7px rgba(18, 1, 5, 0.74), 0 0 calc(5 * var(--shell-vw)) rgba(229, 70, 150, 0.48);
  transform: rotate(-2.2deg);
}

.call-cutin.anna .call-cutin-band {
  border-color: #c7b6d8;
  background:
    linear-gradient(100deg, rgba(56, 32, 77, 0.98), rgba(2, 9, 17, 0.98) 56%, rgba(45, 18, 87, 0.98));
  box-shadow: 0 0 0 7px rgba(1, 7, 13, 0.78), 0 0 calc(5 * var(--shell-vw)) rgba(132, 100, 164, 0.46);
}

.call-cutin-band > strong {
  color: #e2cfed;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(30px, calc(3.2 * var(--shell-vw)), 64px);
  font-weight: 900;
  text-align: right;
  text-shadow: 0 0.08em 0 #6c1541, 0 0 0.6em rgba(159, 97, 195, 0.75);
}

.call-cutin-band > b {
  color: #d8bfe7;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(112px, calc(13 * var(--shell-vw)), 250px);
  font-weight: 1000;
  line-height: 0.9;
  text-align: center;
  letter-spacing: 0.04em;
  -webkit-text-stroke: 2px #440e29;
  text-shadow: 0 0.06em 0 #c83c82, 0 0.12em 0 #1d0511, 0 0 0.45em #9c5dc1;
}

.call-cutin.anna .call-cutin-band > strong,
.call-cutin.anna .call-cutin-band > b {
  color: #efeaf4;
  -webkit-text-stroke-color: #301b42;
  text-shadow: 0 0.06em 0 #765a93, 0 0.12em 0 #010a10, 0 0 0.45em #8a6ca8;
}

.call-cutin-tiles {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(8px, calc(0.7 * var(--shell-vw)), 14px);
}

.call-cutin-tile {
  width: clamp(62px, calc(5.2 * var(--shell-vw)), 102px);
  aspect-ratio: 0.714;
  display: block;
  flex: 0 0 auto;
  overflow: visible;
  background: url("../assets/tiles/regular/Front.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 calc(0.55 * var(--shell-vw)) calc(0.5 * var(--shell-vw)) rgba(0, 0, 0, 0.68));
}

.call-cutin-tile > .tile-art {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.call-cutin.active .call-cutin-backdrop {
  animation: call-cutin-darken 980ms ease both;
}

.call-cutin.active .call-cutin-rays {
  animation: call-cutin-rays 980ms ease-out both;
}

.call-cutin.active .call-cutin-band {
  animation: call-cutin-strike 980ms cubic-bezier(.14, .82, .22, 1) both;
}

.call-cutin.dora-discovery .call-cutin-backdrop {
  background:
    radial-gradient(circle at 50% 48%, rgba(67, 50, 84, 0.38) 0 24%, transparent 58%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.96), rgba(0, 13, 20, 0.91) 22% 78%, rgba(0, 0, 0, 0.96)),
    #010608;
}

.call-cutin.dora-discovery.active .call-cutin-backdrop {
  animation: dora-discovery-backdrop-in 360ms ease-out both;
}

.call-cutin.dora-discovery.active .call-cutin-rays {
  animation: dora-discovery-rays-in 520ms ease-out both;
}

.call-cutin.dora-discovery.active .call-cutin-band {
  animation: dora-discovery-board-in 430ms cubic-bezier(.12, .82, .2, 1) both;
}

.call-cutin.dora-discovery .call-cutin-band {
  width: min(calc(96 * var(--shell-vw)), 1740px);
  min-height: min(calc(54 * var(--shell-vh)), 560px);
  grid-template-columns: 1fr;
  justify-items: center;
  gap: clamp(16px, calc(2 * var(--shell-vh)), 30px);
  padding: clamp(30px, calc(4 * var(--shell-vh)), 68px) clamp(24px, calc(4 * var(--shell-vw)), 76px);
  border-color: #bfacd2;
  background:
    linear-gradient(90deg, rgba(2, 10, 15, 0.98), rgba(26, 15, 36, 1) 12% 88%, rgba(2, 10, 15, 0.98)),
    #100a15;
  box-shadow:
    0 0 0 8px rgba(1, 7, 13, 0.94),
    0 0 0 12px rgba(162, 139, 186, 0.28),
    0 0 calc(6 * var(--shell-vw)) rgba(132, 100, 164, 0.62);
}

.call-cutin.dora-discovery .call-cutin-band > strong {
  color: #cfc1dd;
  font-size: clamp(32px, calc(3 * var(--shell-vw)), 54px);
  text-align: center;
  letter-spacing: 0.22em;
}

.call-cutin.dora-discovery .call-cutin-band > b {
  max-width: 100%;
  color: #f1e8f6;
  /* 字数で上限を作る。長い文を入れてもはみ出さない。 */
  font-size: min(clamp(30px, calc(4.3 * var(--shell-vw)), 78px), calc(88cqw / var(--cutin-chars, 8)));
  line-height: 1.18;
  text-align: center;
  letter-spacing: 0.02em;
  white-space: normal;
  text-wrap: balance;
  -webkit-text-stroke: 1px #301d41;
  text-shadow: 0 0.08em 0 #48345c, 0 0.2em 0 #010a10, 0 0 0.5em #8a6ca8;
}

.call-cutin.dora-discovery .call-cutin-tiles {
  justify-content: center;
  flex-wrap: wrap;
  row-gap: clamp(16px, calc(2 * var(--shell-vh)), 28px);
}

.call-cutin.dora-discovery .bukkonuki-pair .call-cutin-tile {
  width: clamp(58px, calc(5.5 * var(--shell-vw)), 94px);
  height: clamp(80px, calc(7.7 * var(--shell-vw)), 132px);
}

.dora-discovery-question {
  flex: 0 0 100%;
  color: #dec9eb;
  /* 長い方の一文（25字）が一行で収まる大きさ。小さい画面では比率で縮む。 */
  font-size: min(clamp(17px, 3.1cqw, 40px), calc(86cqw / 25));
  line-height: 1.22;
  text-align: center;
  letter-spacing: 0.03em;
  text-shadow: 0 3px 0 #001118, 0 0 22px rgba(162, 135, 190, 0.58);
  /* 文の途中で折り返すと読みにくい。1文ずつ行にする。 */
  display: grid;
  gap: 0.2em;
  justify-items: center;
  line-height: 1.45;
}

.call-cutin.river-discovery .call-cutin-backdrop {
  background:
    radial-gradient(circle at 50% 48%, rgba(151, 16, 58, 0.42) 0 24%, transparent 58%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.96), rgba(29, 3, 14, 0.93) 22% 78%, rgba(0, 0, 0, 0.96)),
    #090104;
}

.call-cutin.river-discovery.active .call-cutin-backdrop {
  animation: dora-discovery-backdrop-in 360ms ease-out both;
}

.call-cutin.river-discovery.active .call-cutin-rays {
  animation: dora-discovery-rays-in 520ms ease-out both;
}

.call-cutin.river-discovery.active .call-cutin-band {
  animation: dora-discovery-board-in 430ms cubic-bezier(.12, .82, .2, 1) both;
}

.call-cutin.river-discovery .call-cutin-band {
  width: min(calc(96 * var(--shell-vw)), 1740px);
  min-height: min(calc(54 * var(--shell-vh)), 560px);
  grid-template-columns: 1fr;
  justify-items: center;
  gap: clamp(16px, calc(2 * var(--shell-vh)), 30px);
  padding: clamp(30px, calc(4 * var(--shell-vh)), 68px) clamp(24px, calc(4 * var(--shell-vw)), 76px);
  border-color: #ef92c1;
  background:
    linear-gradient(90deg, rgba(14, 2, 8, 0.99), rgba(74, 6, 29, 1) 12% 88%, rgba(14, 2, 8, 0.99)),
    #1b030b;
  box-shadow:
    0 0 0 8px rgba(10, 0, 4, 0.95),
    0 0 0 12px rgba(235, 112, 173, 0.3),
    0 0 calc(6 * var(--shell-vw)) rgba(233, 30, 82, 0.68);
}

.call-cutin.river-discovery .call-cutin-band > strong {
  color: #f5bcd9;
  font-size: clamp(32px, calc(3 * var(--shell-vw)), 54px);
  text-align: center;
  letter-spacing: 0.18em;
}

.call-cutin.river-discovery .call-cutin-band > b {
  max-width: 100%;
  color: #f0e7f6;
  font-size: min(clamp(28px, calc(3.25 * var(--shell-vw)), 62px), calc(88cqw / var(--cutin-chars, 8)));
  line-height: 1.18;
  text-align: center;
  letter-spacing: 0.01em;
  white-space: normal;
  text-wrap: balance;
  -webkit-text-stroke: 1px #5f061f;
  text-shadow: 0 0.08em 0 #a40e3a, 0 0.2em 0 #0b0105, 0 0 0.5em #e85ca2;
}

.call-cutin.river-discovery .call-cutin-tiles {
  justify-content: center;
}

.call-cutin.river-discovery .bukkonuki-pair .call-cutin-tile {
  width: clamp(58px, calc(5.5 * var(--shell-vw)), 94px);
  height: clamp(80px, calc(7.7 * var(--shell-vw)), 132px);
}

.call-cutin-confirm[hidden] {
  display: none !important;
}

.call-cutin-choices {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: clamp(18px, calc(2 * var(--shell-vw)), 34px);
  width: 100%;
}

.call-cutin.dora-discovery .call-cutin-confirm,
.call-cutin.river-discovery .call-cutin-confirm {
  min-width: min(440px, calc(72 * var(--shell-vw)));
  min-height: clamp(72px, calc(7 * var(--shell-vh)), 96px);
  display: grid;
  place-items: center;
  padding: 0.55em 2.4em;
  border: 3px solid #cebfdd;
  background: linear-gradient(180deg, #4b3162, #261833);
  color: #fffbe5;
  font-size: clamp(30px, calc(2.5 * var(--shell-vw)), 46px);
  font-weight: 1000;
  letter-spacing: 0.08em;
  box-shadow: 0 0 0 5px #020a0e, 0 0 calc(2 * var(--shell-vw)) rgba(159, 131, 188, 0.7);
  cursor: pointer;
}

.call-cutin.dora-discovery .call-cutin-confirm:hover,
.call-cutin.dora-discovery .call-cutin-confirm:focus-visible,
.call-cutin.river-discovery .call-cutin-confirm:hover,
.call-cutin.river-discovery .call-cutin-confirm:focus-visible {
  background: linear-gradient(180deg, #725b89, #39234d);
  outline: 4px solid #e1cdec;
  outline-offset: 5px;
}

.call-cutin.dora-discovery .call-cutin-decline {
  border-color: #cecad1;
  background: linear-gradient(180deg, #47434b, #201d23);
  box-shadow: 0 0 0 5px #020a0e, 0 0 calc(1.5 * var(--shell-vw)) rgba(203, 196, 209, 0.38);
}

.call-cutin.dora-discovery .call-cutin-decline:hover,
.call-cutin.dora-discovery .call-cutin-decline:focus-visible {
  background: linear-gradient(180deg, #655f6a, #332e37);
}

.call-cutin.river-discovery .call-cutin-confirm {
  border-color: #f3a8ce;
  background: linear-gradient(180deg, #9d1740, #53091f);
  box-shadow: 0 0 0 5px #100106, 0 0 calc(2 * var(--shell-vw)) rgba(230, 81, 156, 0.72);
}

.call-cutin.river-discovery .call-cutin-confirm:hover,
.call-cutin.river-discovery .call-cutin-confirm:focus-visible {
  background: linear-gradient(180deg, #d52e5d, #7c102f);
}

.call-cutin.dora-discovery.closing .call-cutin-backdrop,
.call-cutin.dora-discovery.closing .call-cutin-rays,
.call-cutin.dora-discovery.closing .call-cutin-band,
.call-cutin.river-discovery.closing .call-cutin-backdrop,
.call-cutin.river-discovery.closing .call-cutin-rays,
.call-cutin.river-discovery.closing .call-cutin-band {
  animation: dora-discovery-out 180ms ease-in both;
}

@keyframes call-cutin-darken {
  0%, 100% { opacity: 0; }
  15%, 82% { opacity: 1; }
}

@keyframes call-cutin-rays {
  0% { opacity: 0; scale: 0.18; rotate: -16deg; }
  24% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1.45; rotate: 18deg; }
}

@keyframes call-cutin-strike {
  0% { opacity: 0; translate: calc(-105 * var(--shell-vw)) 0; scale: 1.28; }
  19% { opacity: 1; translate: calc(2 * var(--shell-vw)) 0; scale: 0.98; }
  29%, 78% { opacity: 1; translate: 0 0; scale: 1; }
  100% { opacity: 0; translate: calc(92 * var(--shell-vw)) 0; scale: 1.05; }
}

@keyframes dora-discovery-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dora-discovery-rays-in {
  from { opacity: 0; scale: 0.45; rotate: -14deg; }
  to { opacity: 0.42; scale: 1; rotate: 0deg; }
}

@keyframes dora-discovery-board-in {
  0% { opacity: 0; translate: 0 calc(18 * var(--shell-vh)); scale: 1.16; }
  72% { opacity: 1; translate: 0 calc(-1 * var(--shell-vh)); scale: 0.98; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes dora-discovery-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@container shell (max-width: 900px) {
  .app-shell {
    --hand-tile-width: 3.4cqw;
    --river-tile-width: 3cqw;
  }

  .cheat-cutin-band {
    grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1.42fr) minmax(150px, 0.52fr);
    gap: 16px;
    padding-inline: calc(5 * var(--shell-vw));
  }

  .cheat-cutin-band > span {
    font-size: clamp(24px, calc(3 * var(--shell-vw)), 32px);
  }

  .cheat-cutin-band > strong {
    font-size: clamp(50px, calc(7.4 * var(--shell-vw)), 74px);
  }

  .cheat-cutin-band > b {
    font-size: clamp(30px, calc(4.3 * var(--shell-vw)), 44px);
  }

  .cheat-cutin.dora .cheat-cutin-band > strong {
    font-size: clamp(38px, calc(5.4 * var(--shell-vw)), 56px);
  }

  .call-cutin-band {
    grid-template-columns: 0.6fr 1.2fr;
  }

  .call-cutin-tiles {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cheat-cutin.active .cheat-cutin-backdrop,
  .cheat-cutin.active .cheat-cutin-rays,
  .cheat-cutin.active .cheat-cutin-slashes,
  .cheat-cutin.active .cheat-cutin-symbol,
  .cheat-cutin.active .cheat-cutin-band,
  .call-cutin.active .call-cutin-backdrop,
  .call-cutin.active .call-cutin-rays,
  .call-cutin.active .call-cutin-band,
  .opponent-hand.cheat-revealed > .vision-glimpse {
    animation-duration: 0.01ms !important;
  }
}

/* ── Three-row river containment ─────────────────────────────────────── */

.river-zone:has(> .river.three-row) {
  overflow: hidden !important;
}

.river.three-row {
  --river-tile-width: clamp(27px, 2.42cqw, 46px);
  max-height: 100% !important;
  row-gap: 0.18cqw !important;
}

/* 狭い画面では題名を出すと右の操作に重なるので、紋だけ残して読み上げ用に隠す。 */
@container shell (max-width: 900px) {
  .brand h1 {
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* 点数は「15,000点」と単位まで出すので、狭い画面でも折り返さない大きさにする。 */
.status-panel .score-card > strong {
  font-size: clamp(15px, calc(1.62 * var(--shell-vw)), 30px);
  white-space: nowrap;
}

/* 被弾の丸は点数表示の見出しへ同居させたので、文字の邪魔にならない大きさに抑える。 */
.status-panel .seal-row i {
  width: clamp(8px, calc(0.7 * var(--shell-vw)), 13px);
  height: clamp(8px, calc(0.7 * var(--shell-vw)), 13px);
}

/* 題名が長いので、上のまとめ指定より小さく詰める。 */
.brand h1 {
  font-size: clamp(13px, calc(0.92 * var(--shell-vw)), 18px) !important;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ── エンディング（GAME CLEAR → ご褒美3枚 → スタッフロール） ───────── */
/* 白から始まり、白で終わる。最後はそのまま起動時のロゴ画面へつながる。 */

.ending-sequence {
  position: absolute;
  z-index: 190;
  inset: 0;
  overflow: hidden;
  background: #000;
}

.ending-veil {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: #fff;
  opacity: 1;
  pointer-events: none;
}

.ending-sequence.opened .ending-veil {
  animation: ending-veil-out 0.9s 0.25s ease-out both;
}

.ending-sequence.closing .ending-veil {
  animation: ending-veil-in 1.2s ease-in both;
}

@keyframes ending-veil-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes ending-veil-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ending-clear {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-content: center;
  overflow: hidden;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 44%, #fff, #ffeef7 46%, #ffe0ef 78%, #ffd4e8);
  transition: opacity 0.8s ease;
}

/* 白のまま幕が開き、白のままご褒美画像へ溶ける。 */
.ending-sequence.stage-clear .ending-clear {
  opacity: 1;
}

.ending-clear-text {
  position: relative;
  z-index: 1;
  opacity: 0;
  color: #c2246d;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: min(clamp(46px, calc(9 * var(--shell-vw)), 150px), calc(15 * var(--shell-vh)));
  font-weight: 900;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-shadow:
    0 0.05em 0 #ffd9ec,
    0 0.1em 0.16em rgba(194, 36, 109, 0.22),
    0 0 0.7em rgba(255, 158, 203, 0.85);
}

.ending-sequence.stage-clear .ending-clear-text {
  animation: ending-clear-show 2.7s ease-out both;
}

@keyframes ending-clear-show {
  0% { opacity: 0; letter-spacing: 0.7em; }
  22% { opacity: 1; letter-spacing: 0.22em; }
  84% { opacity: 1; }
  100% { opacity: 0; }
}

.ending-clear-sparkles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ending-clear-sparkles > span {
  position: absolute;
  left: var(--x);
  bottom: -8%;
  color: var(--tone, #ff9ecb);
  font-size: var(--size, 22px);
  line-height: 1;
  text-shadow: 0 0 0.5em rgba(255, 190, 224, 0.95);
  animation: reward-cg-float var(--dur, 4.2s) linear var(--delay, 0s) infinite;
}

/* ご褒美画像はスタッフロールの後ろで、ゆっくり動きながら入れ替わる。 */
.ending-gallery {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: #07040c;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.ending-sequence.stage-gallery .ending-gallery,
.ending-sequence.stage-credits .ending-gallery {
  opacity: 1;
}

.ending-cg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.ending-cg.is-current {
  opacity: 1;
}

/* 寄りは絵が消えるまで続ける。ここで止めると引き戻って見える。 */
.ending-cg.is-playing {
  animation: ending-kenburns var(--ending-cut-ms, 9000ms) linear both;
}

/* 止め絵に見えないよう、ゆっくり寄りながら流す。 */
@keyframes ending-kenburns {
  0% { transform: scale(1) translate3d(0, 1.2%, 0); }
  100% { transform: scale(1.08) translate3d(0, -1.2%, 0); }
}

/* 文字が絵に埋もれないよう、上下を落として中央も少し暗くする。 */
.ending-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 2, 8, 0.82), rgba(4, 2, 8, 0.32) 26%, rgba(4, 2, 8, 0.32) 74%, rgba(4, 2, 8, 0.82)),
    rgba(6, 3, 12, 0.34);
}

.ending-credits {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.ending-sequence.stage-credits .ending-credits {
  opacity: 1;
}

.ending-credits-roll {
  position: absolute;
  left: 50%;
  width: min(760px, calc(88 * var(--shell-vw)));
  translate: -50% 0;
  top: 100%;
  display: grid;
  gap: clamp(8px, calc(1.1 * var(--shell-vh)), 18px);
  color: #f2e9f8;
  text-align: center;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.95),
    0 0 26px rgba(0, 0, 0, 0.8);
}

.ending-sequence.stage-credits .ending-credits-roll {
  animation: ending-roll var(--ending-roll-ms, 26000ms) linear both;
}

@keyframes ending-roll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, calc(-100% - calc(100 * var(--shell-vh))), 0); }
}

.ending-credits-roll .credit-title {
  margin-bottom: clamp(10px, calc(2 * var(--shell-vh)), 26px);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(22px, calc(3.2 * var(--shell-vw)), 44px);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #f0e2f8;
  text-shadow: 0 0.06em 0 #8b2257;
}

.ending-credits-roll .credit-heading {
  margin-top: clamp(16px, calc(3 * var(--shell-vh)), 40px);
  color: #c49ada;
  font-size: clamp(13px, calc(1.5 * var(--shell-vw)), 20px);
  font-weight: 900;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
}

.ending-credits-roll .credit-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: clamp(8px, calc(1.4 * var(--shell-vw)), 20px);
  font-size: clamp(13px, calc(1.5 * var(--shell-vw)), 21px);
  line-height: 1.5;
}

/* 最後の「制作・著作」だけ、ひと呼吸ぶん上を空ける。 */
.ending-credits-roll .credit-row.is-spaced {
  margin-top: clamp(16px, calc(3 * var(--shell-vh)), 40px);
}

.ending-credits-roll .credit-row > .credit-role {
  justify-self: end;
  color: #b394cc;
  text-align: right;
  text-wrap: balance;
}

.ending-credits-roll .credit-row > .credit-dot {
  color: rgba(179, 148, 204, 0.45);
  letter-spacing: 0.2em;
}

.ending-credits-roll .credit-row > .credit-name {
  justify-self: start;
  display: grid;
  gap: 0.2em;
  font-weight: 700;
  text-align: left;
}

/* 役目か名前が2行以上になる行は、…を1行目の高さへ合わせる。 */
.ending-credits-roll .credit-row:has(.credit-name-line + .credit-name-line) > .credit-role,
.ending-credits-roll .credit-row:has(.credit-name-line + .credit-name-line) > .credit-dot {
  align-self: start;
}

.ending-credits-roll .credit-row > .credit-dot,
.ending-credits-roll .credit-row > .credit-name {
  align-self: baseline;
}

/* 肩書きが長い行は、役目を上、名前を下に積む。 */
.ending-credits-roll .credit-note {
  margin-top: clamp(20px, calc(4 * var(--shell-vh)), 56px);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(15px, calc(1.9 * var(--shell-vw)), 26px);
  line-height: 1.9;
  color: #e9dcf2;
}

@media (prefers-reduced-motion: reduce) {
  .ending-sequence.stage-credits .ending-credits-roll { animation-duration: 1ms; }
  .ending-sequence.stage-clear .ending-clear-text { animation: none; opacity: 1; }
  .ending-clear-sparkles > span { animation: none; opacity: 0.85; }
  .ending-cg.is-playing { animation: none; }
}

/* ── 立ち絵デバッグ（開発用） ─────────────────────────────────────── */
/* Shift+D で開く。遊びながら、その場面に合う表情を選んで記録する。 */

.portrait-debug {
  position: fixed;
  /* 画面は16:9の枠へ収めたが、この道具箱だけは枠の外から全部の上に出す。 */
  z-index: 900;
  left: 12px;
  bottom: 12px;
  width: min(520px, calc(46 * var(--shell-vw)));
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(206, 174, 224, 0.6);
  border-radius: 6px;
  background: rgba(8, 4, 14, 0.94);
  color: #e7dbf1;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
}

.portrait-debug-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.portrait-debug-head > strong {
  color: #d9b9ef;
  letter-spacing: 0.08em;
}

.portrait-debug-head > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #a98cc4;
  font-family: ui-monospace, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portrait-debug-now {
  min-height: 2.6em;
  padding: 6px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  line-height: 1.35;
}

.portrait-debug-state {
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: #a98cc4;
  font-size: 11px;
}

.portrait-debug-state.is-decided {
  background: rgba(190, 120, 240, 0.22);
  color: #f0dcff;
  font-weight: 700;
}

.portrait-debug-list {
  max-height: 140px;
  overflow-y: auto;
  display: grid;
  gap: 2px;
  padding: 4px;
  border: 1px solid rgba(180, 148, 206, 0.28);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
}

.portrait-debug-empty {
  margin: 0;
  padding: 6px 4px;
  color: #7c6791;
  font-size: 10px;
}

.portrait-debug-pick {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
}

.portrait-debug-pick > span {
  overflow: hidden;
  color: #a98cc4;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portrait-debug-pick > b {
  flex: 0 0 auto;
  color: #f0dcff;
}

.portrait-debug-pick.is-current {
  background: rgba(190, 120, 240, 0.24);
}

.portrait-debug-note {
  margin: 0;
  color: #8d76a5;
  font-size: 10px;
  line-height: 1.5;
}

.portrait-debug button:disabled {
  opacity: 0.35;
  cursor: default;
}

.portrait-debug-poses {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.portrait-debug-pose {
  display: grid;
  gap: 2px;
  padding: 6px 4px;
  border: 1px solid rgba(180, 148, 206, 0.5);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: #e7dbf1;
  font-size: 11px;
  cursor: pointer;
}

.portrait-debug-pose > small {
  overflow: hidden;
  color: #9d82b8;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portrait-debug-pose.is-current {
  border-color: #e0b6ff;
  background: rgba(190, 120, 240, 0.28);
}

.portrait-debug-jump {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px dashed rgba(180, 148, 206, 0.3);
}

.portrait-debug-jump > span {
  color: #8d76a5;
  font-size: 10px;
  letter-spacing: 0.1em;
}

.portrait-debug-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.portrait-debug-foot > span {
  flex: 1 1 auto;
  color: #a98cc4;
}

.portrait-debug button {
  padding: 4px 10px;
  border: 1px solid rgba(180, 148, 206, 0.5);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: #e7dbf1;
  font-size: 11px;
  cursor: pointer;
}

/* ── 起動時のロゴ画面 ──────────────────────────────────────────────── */
/* ブラウザは操作前に音を鳴らせない。最初の一押しをここで受けてからBGMを始める。 */

.boot-splash {
  position: absolute;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  background: #fff;
  transition: opacity 0.45s ease;
}

.boot-splash.leaving {
  opacity: 0;
  pointer-events: none;
}

.boot-start {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(14px, calc(2.6 * var(--shell-vh)), 40px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.boot-start > img {
  width: min(calc(48 * var(--shell-vh)), calc(66 * var(--shell-vw)));
  max-width: 460px;
  height: auto;
  display: block;
}

.boot-start > strong {
  color: #24a3c2;
  font-size: clamp(19px, calc(2.3 * var(--shell-vh)), 32px);
  font-weight: 900;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  animation: boot-start-blink 1.25s ease-in-out infinite;
}

.boot-start:hover > strong,
.boot-start:focus-visible > strong {
  color: #127f9c;
}

@keyframes boot-start-blink {
  0%,
  100% { opacity: 1; }
  55% { opacity: 0.22; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-start > strong { animation: none; }
}

/* 読み込みが終わるまで Push START は出さない。押せない字を見せない。 */
.boot-start[disabled] {
  cursor: default;
}

.boot-start[disabled] > strong {
  visibility: hidden;
}

.boot-loading {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(56px, calc(16 * var(--shell-vh)), 150px);
  width: min(calc(48 * var(--shell-vh)), calc(66 * var(--shell-vw)));
  max-width: 460px;
  display: grid;
  gap: clamp(6px, calc(1 * var(--shell-vh)), 12px);
  pointer-events: none;
}

.boot-loading[hidden] {
  display: none;
}

.boot-loading-bar {
  height: clamp(6px, calc(0.9 * var(--shell-vh)), 10px);
  border-radius: 999px;
  background: #d8eef4;
  overflow: hidden;
}

.boot-loading-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: #24a3c2;
  transition: width 0.18s ease-out;
}

.boot-loading-label {
  margin: 0;
  color: #24a3c2;
  font-size: clamp(13px, calc(1.6 * var(--shell-vh)), 20px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: center;
}

/* ── Arcade title screen and one-screen rule board ──────────────────── */

#start-modal {
  overflow: hidden;
  /* 枠いっぱいに出す。対局画面と大きさが変わって見えないように。 */
  padding: 0;
  background:
    radial-gradient(circle at 72% 26%, rgba(118, 57, 159, 0.2), transparent 42%),
    #050308;
  backdrop-filter: none;
}

.title-screen {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  min-height: 0;
  container-type: inline-size;
  display: block;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  outline: 0;
  background: #06040a;
  box-shadow:
    0 0 0 1px rgba(10, 5, 16, 0.9),
    0 calc(2.4 * var(--shell-vw)) calc(7 * var(--shell-vw)) #000,
    inset 0 0 calc(6 * var(--shell-vw)) rgba(0, 0, 0, 0.6);
}

.title-screen::before {
  inset: clamp(8px, 0.8cqw, 14px);
  z-index: 8;
  border: 1px solid rgba(240, 226, 255, 0.16);
  clip-path: polygon(0 0, 20% 0, 20% 2px, 80% 2px, 80% 0, 100% 0, 100% 100%, 80% 100%, 80% calc(100% - 2px), 20% calc(100% - 2px), 20% 100%, 0 100%);
}

.title-screen::after {
  /* 斜めのストライプ装飾。キービジュアルの邪魔になるので出さない。 */
  display: none;
}

/* 題字ごと描かれたキービジュアルを主役にする。文字はすべて絵の中にあるので画面には足さない。 */
.title-screen > img.title-key-visual {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 1;
  object-fit: cover;
  object-position: center;
  filter: none;
  pointer-events: none;
}

/* 画面には出さないが、読み上げと文書構造のために題名を残す。 */
.title-screen-name {
  width: 1px;
  height: 1px;
  position: absolute;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 絵は暗くしない。右下には鬼怒川さんの手牌（中の対子）が描かれていて、
   影を落とすと当たり牌が見えなくなる。ボタンはそのまま絵の上に置く。 */
.title-screen-shade {
  display: none;
}

.title-actions {
  width: min(33%, 530px);
  position: absolute;
  z-index: 6;
  /* 角に寄せすぎず、題字にもかぶらない位置。下の手牌は隠さない。 */
  right: 5%;
  bottom: 7%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.15cqw;
  margin: 0;
}

.title-action {
  min-width: 0;
  min-height: clamp(48px, 5cqw, 104px);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(226, 206, 242, 0.42);
  background: rgba(10, 6, 16, 0.58);
  color: #f4ecff;
  font-size: clamp(18px, 1.8cqw, 36px);
  font-weight: 900;
  letter-spacing: 0.17em;
  text-indent: 0.17em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(3px);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, translate 0.14s ease;
}

/* 内側の細い一本線。題字の筆致に合わせて角は落とさない。 */
.title-action::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.title-action::after {
  content: "";
  position: absolute;
  inset: 0;
  translate: -115% 0;
  background: linear-gradient(105deg, transparent 34%, rgba(239, 217, 252, 0.34) 50%, transparent 66%);
  transition: translate 0.42s ease;
  pointer-events: none;
}

.title-action:hover::after,
.title-action:focus-visible::after {
  translate: 115% 0;
}

.title-action:hover,
.title-action:focus-visible {
  translate: 0 -1px;
}

.title-action-primary {
  border-color: rgba(237, 217, 252, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 46%),
    linear-gradient(108deg, #6c328a 0%, #441b65 52%, #250f38 100%);
  box-shadow:
    0 0 0 1px rgba(8, 4, 14, 0.9),
    0 1.1cqw 2.6cqw rgba(0, 0, 0, 0.66),
    0 0 2.4cqw rgba(160, 84, 204, 0.34);
}

.title-action-primary:hover,
.title-action-primary:focus-visible {
  border-color: #f6e9ff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 46%),
    linear-gradient(108deg, #8845ab 0%, #57287f 52%, #2f1447 100%);
  box-shadow:
    0 0 0 1px rgba(8, 4, 14, 0.9),
    0 1.2cqw 2.8cqw rgba(0, 0, 0, 0.7),
    0 0 3.4cqw rgba(187, 107, 235, 0.5);
}

.title-action-secondary {
  border-color: rgba(206, 191, 223, 0.34);
  /* 背景の絵を透かさない。下に牌があると字が読めない。 */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 46%),
    #150d21;
  color: #e6def0;
  box-shadow:
    0 0 0 1px rgba(8, 4, 14, 0.82),
    0 0.9cqw 2.2cqw rgba(0, 0, 0, 0.6);
}

.title-action-secondary:hover,
.title-action-secondary:focus-visible {
  border-color: rgba(237, 217, 252, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 46%),
    #24163a;
  box-shadow:
    0 0 0 1px rgba(8, 4, 14, 0.82),
    0 1cqw 2.4cqw rgba(0, 0, 0, 0.64),
    0 0 2cqw rgba(160, 84, 204, 0.26);
}

/* ルールは題字ごと1枚の図解にしたので、画面いっぱいに敷くだけにする。 */
.opening-rules-panel {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: block;
  padding: 0;
  background: #06040a;
  box-shadow: inset 0 0 7cqw #000;
}

/* 図の中に題字があるので、見出しは読み上げ用に隠しておく。 */
.opening-rules-name {
  width: 1px;
  height: 1px;
  position: absolute;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 図の上に重ねるので、背景へ溶けないよう濃い紫と白フチでしっかり浮かせる。 */
#opening-rules-close {
  position: absolute;
  z-index: 2;
  /* 一枚絵の文字は左半分に寄っている。ボタンは右下へ置いて重ねない。 */
  right: clamp(16px, 1.8cqw, 34px);
  bottom: clamp(16px, 1.8cqw, 34px);
  min-width: clamp(190px, 17cqw, 380px);
  min-height: clamp(52px, 5.4cqw, 104px);
  border: 2px solid #f3e7fb;
  background: linear-gradient(180deg, #6f2a92, #2a0f40);
  color: #fff;
  font-size: clamp(20px, 1.85cqw, 36px);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  box-shadow:
    0 0 0 4px rgba(5, 2, 9, 0.9),
    0 0.55cqw 1.4cqw rgba(0, 0, 0, 0.8),
    0 0 2.2cqw rgba(163, 74, 214, 0.45);
  transition: background 0.18s ease, border-color 0.18s ease, translate 0.14s ease;
}

#opening-rules-close:hover,
#opening-rules-close:focus-visible {
  border-color: #fff;
  background: linear-gradient(180deg, #8c3cb6, #3a1656);
  translate: 0 -2px;
}

.rules-overview {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  padding: 0;
  overflow: hidden;
}

.rules-overview > img.rules-board {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

.rules-overview-dialog {
  width: min(1540px, calc(96 * var(--shell-vw))) !important;
  height: min(900px, calc(92 * var(--shell-vh))) !important;
  max-height: none !important;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden !important;
}

.rules-overview-dialog #dialog-content {
  min-height: 0;
  padding: clamp(10px, calc(1 * var(--shell-vw)), 18px) !important;
  overflow: hidden !important;
}

.rules-overview-dialog #dialog-content > .rules-overview {
  height: 100%;
  padding-top: 0;
}

.rules-overview-dialog .dialog-actions {
  padding: 0 clamp(14px, calc(1.2 * var(--shell-vw)), 22px) clamp(12px, calc(1 * var(--shell-vw)), 18px);
}

@container shell (max-width: 1100px) or (max-height: 720px) {
  .title-actions {
    width: min(48%, 330px);
    right: 3%;
    bottom: 4.5%;
  }

  /* ルール画面は1枚絵なので、狭い画面でも上書きは要らない。 */
}

/* Portrait crops are intentionally last: later result layouts must not push faces out of frame. */
.win-effect-face-frame > img,
.result-face-frame > img {
  width: 190% !important;
  height: 190% !important;
  max-width: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  object-fit: contain !important;
  object-position: 50% 0 !important;
  transform: translateX(-50%) !important;
  transform-origin: 50% 0 !important;
}

/*
 * Keep the persistent command rail inside the table area.  The player console
 * owns the bottom 22.5% of the game frame, so the rail must finish above that
 * boundary instead of relying on z-index to hide the overlap.
 */
.game-frame > .status-panel {
  /* 右下の鳴きドックが大きくなったぶん、イカサマ欄の下端を引き上げる。
     重なると「ドラ爆弾」の下が隠れ、押してもポンが反応していた。 */
  inset: 1.4% 0.8% max(
    calc(22.5% + 8px),
    calc(2 * clamp(34px, 6.4cqw, 124px) + clamp(4px, 0.6cqw, 14px) + clamp(10px, 2cqw, 32px))
  ) auto !important;
  z-index: 9;
  min-height: 0;
}

.status-panel .item-rack {
  flex: 0 1 auto;
  min-height: 0;
}

.status-panel .cheat-rack {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: visible !important;
}

.status-panel .cheat-actions {
  min-height: 0;
  height: 100%;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: clamp(4px, calc(0.3 * var(--shell-vw)), 7px);
  /* 4Kのような広い画面では板が縦に伸びすぎて、文字も絵も中で迷子になる。
     一枚の高さに上限を置いて、余った分は上下に振り分ける。 */
  max-height: calc(4 * clamp(56px, 3.4cqw + 30px, 116px) + 3 * clamp(4px, calc(0.3 * var(--shell-vw)), 7px));
  align-self: center;
}

.status-panel .cheat-actions > button {
  min-height: 0 !important;
  height: 100%;
  padding-block: clamp(3px, calc(0.25 * var(--shell-vw)), 6px);
}

.status-panel .cheat-actions > button em.cheat-rate {
  font-size: clamp(18px, calc(1.05 * var(--shell-vw)), 22px);
}

/* Long reaction commands stay on one line without shrinking Ron/Tsumo calls. */
.anna-reaction-copy strong {
  white-space: nowrap;
}

.anna-reaction-cut-in.long-copy .anna-reaction-copy strong {
  max-width: calc(92 * var(--shell-vw));
  font-size: clamp(46px, calc(7.2 * var(--shell-vw)), 138px);
  letter-spacing: 0.02em;
  text-indent: 0.02em;
}

.anna-reaction-cut-in.extra-long-copy .anna-reaction-copy strong {
  font-size: clamp(36px, calc(5.6 * var(--shell-vw)), 112px);
}


/* ── 放射状エフェクトの見切れ対策 ─────────────────────────────── */
/* 四角や円の端が画面内に入ると「切れている」ように見える。
   どれも画面中央を基準に、対角線より大きい正方形にして端を外へ追い出す。
   大きさを変えるアニメーション（scale）とぶつからないよう、位置は translate で取る。 */

.win-effect-rays,
.win-confirm-rays,
.call-cutin-rays,
.cheat-cutin-rays,
.riichi-effect-rays,
.win-effect.anna-win .win-effect-rays,
.win-effect.player-win .win-effect-rays {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: calc(170 * var(--shell-vw));
  height: calc(170 * var(--shell-vw));
  aspect-ratio: auto;
  border-radius: 50%;
  translate: -50% -50%;
}


/* ── 1文字だけ次の行へ落ちるのを防ぐ ─────────────────────────── */
/* 画面に出る短い文言で「あと1字だけはみ出して折り返す」形は読みにくい。
   折り返すとしても行の長さが揃うようにする（台詞欄はふつうの折り返しでよい）。 */

.call-cutin-text,
.cheat-cutin-copy strong,
.cheat-cutin-copy em,
.call-prompt-title,
.anna-reaction-copy strong,
.anna-reaction-copy em,
.win-effect-outcome,
.win-effect-message,
.terminal-result-copy strong,
.terminal-result-copy em,
.game-over-stamp span,
.reward-roulette-title,
.reward-result strong,
.reward-result em,
.win-reward-badge strong,
.dialog-actions button,
.cheat-rack button,
.assist-controls button {
  text-wrap: balance;
}

/* ── 右下の鳴き・立直ボタン ─────────────────────────────────────────── */
/* 鳴けるたびに全画面を覆うのはうるさい。手牌の右にまとめて、使えるときだけ光らせる。 */

.action-bar#call-rack {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: auto auto;
  gap: calc(0.42 * var(--shell-vw));
}

.action-bar#call-rack > #riichi-button {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

.call-rack > button:not(#riichi-button) {
  min-width: 0;
  min-height: clamp(62px, calc(5.2 * var(--shell-vw)), 104px);
  padding: 0.3em 0.4em;
  border: 1px solid rgba(150, 134, 160, 0.5);
  border-radius: clamp(9px, calc(0.7 * var(--shell-vw)), 14px);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 42%),
    linear-gradient(180deg, #2a2830, #121115);
  color: #736e78;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(22px, calc(2 * var(--shell-vw)), 40px);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  line-height: 1.05;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px #090d0c, 0 calc(0.3 * var(--shell-vw)) 0 #020403;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.call-rack > button:not(#riichi-button).ready {
  border-color: #e7c7f6;
  background: linear-gradient(180deg, #7a2f64, #43164a);
  color: #fff4ff;
  text-shadow: 0 0 0.5em rgba(255, 210, 255, 0.85);
  box-shadow:
    inset 0 0 0 1px rgba(255, 233, 255, 0.5),
    0 calc(0.3 * var(--shell-vw)) 0 #1b0a1c,
    0 0 calc(0.9 * var(--shell-vw)) rgba(233, 120, 220, 0.6);
  animation: call-rack-ready 1.15s ease-in-out infinite alternate;
}

/* 鳴きを申し出ているあいだだけ出す見送りボタン。
   ここが無いと、鳴かない選択が右クリックだけになって手が止まる。 */
.call-rack-pass {
  grid-column: auto;
  min-height: clamp(38px, calc(3.1 * var(--shell-vw)), 62px);
  padding: 0.2em 0.4em;
  border: 1px solid #b49dc2;
  border-radius: clamp(7px, calc(0.55 * var(--shell-vw)), 12px);
  background: linear-gradient(180deg, #2b2830, #141218);
  color: #efe7f4;
  font-size: clamp(15px, calc(1.15 * var(--shell-vw)), 23px);
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.call-rack-pass:hover,
.call-rack-pass:focus-visible {
  border-color: #f0dcf8;
  background: linear-gradient(180deg, #3a3542, #1b1820);
}

@keyframes call-rack-ready {
  to {
    box-shadow:
      inset 0 0 0 1px rgba(255, 233, 255, 0.72),
      0 calc(0.3 * var(--shell-vw)) 0 #1b0a1c,
      0 0 calc(1.6 * var(--shell-vw)) rgba(233, 120, 220, 0.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  .call-rack > button.ready { animation: none; }
}

/* ── 帯を外したぶん、卓と右の欄を大きく使う ───────────────────────────── */

.game-frame {
  height: 100%;
}

/* 点数・名前は遠目でも読める大きさに。 */
.status-panel .score-card > strong {
  font-size: clamp(20px, calc(2.15 * var(--shell-vw)), 42px);
}

.status-panel .score-heading span {
  font-size: clamp(18px, calc(1.5 * var(--shell-vw)), 30px) !important;
}

.status-panel .section-title > span,
#item-count {
  font-size: clamp(16px, calc(1.32 * var(--shell-vw)), 26px) !important;
}

/* イカサマ欄も同じく。名前は字数に合わせて縮むので、上限だけ上げる。 */
.cheat-rack-heading strong {
  font-size: clamp(21px, calc(1.55 * var(--shell-vw)), 31px) !important;
}

.status-panel .cheat-actions > button strong {
  font-size: min(
    clamp(20px, calc(1.45 * var(--shell-vw)), 30px),
    calc(104cqw / var(--cheat-name-chars, 7))
  );
}

.status-panel .cheat-actions > button em.cheat-rate {
  font-size: clamp(15px, calc(1.32 * var(--shell-vw)), 22px);
}

.status-panel .cheat-actions > button > i {
  font-size: clamp(20px, calc(1.5 * var(--shell-vw)), 30px);
}

/* ── 文字と、左下のドックの組み直し ─────────────────────────────────── */

:root {
  --ui-font: "Zen Kaku Gothic New", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --display-font: "Upright Bang", "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

body,
button,
input,
select,
textarea {
  font-family: var(--ui-font);
}

/* 大書きする文字は明朝で。立直・鳴き・役名・題字など。 */
.action-bar #riichi-button strong,
.call-rack > button:not(#riichi-button),
.wind-box strong,
#shanten-label,
.win-effect-title,
.win-effect-call,
.call-cutin-band > b,
.cheat-cutin-band > strong,
.riichi-effect-call,
.kinugawa-message-text,
.title-action,
.ending-clear-text,
.status-panel .cheat-actions > button strong,
.center-console strong {
  font-family: var(--display-font);
}

/* 中央の左端は「あなたは東家」。席が一目で分かるようにする。 */
.wind-box {
  gap: calc(0.1 * var(--shell-vw));
}

.wind-box > span {
  color: #b7b2bc !important;
  font-size: clamp(11px, calc(0.78 * var(--shell-vw)), 16px) !important;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.wind-box strong {
  font-size: clamp(20px, calc(1.7 * var(--shell-vw)), 34px) !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ドックは二列二段。切り替えられない飾りは置かず、押せるものだけ並べる。 */
.turn-status .assist-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.turn-status .assist-controls > * {
  min-height: 3.1cqw !important;
  border-bottom: 1px solid rgba(190, 187, 193, 0.3) !important;
  font-size: 0.92cqw !important;
}

.turn-status .assist-controls > :nth-child(n + 3) {
  border-bottom: 0 !important;
}

.turn-status .assist-controls > :nth-child(even) {
  border-right: 0 !important;
}

/* 手牌の上に空いていた帯を詰める。向聴表示も枠に収めて、置き去り感をなくす。 */
.hand-state-core {
  min-height: 2.9cqw;
  padding: 0.2cqw 0.6cqw;
  border: 1px solid rgba(190, 187, 193, 0.46);
  border-radius: 0.52cqw;
  background: rgba(3, 10, 9, 0.86);
}

.turn-status {
  bottom: 5.5%;
}

.player-hand-stack {
  bottom: 6%;
}

#shanten-label {
  font-size: 1.42em;
}

/* ── イカサマ欄の作り直し ───────────────────────────────────────────── */
/* 丸で囲った印はやめ、背景へ大きな字を見切れるように敷く。名前は横いっぱいに。 */

.status-panel .cheat-actions > button {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 0.1em !important;
  padding: clamp(2px, calc(0.2 * var(--shell-vw)), 7px) clamp(11px, calc(0.72 * var(--shell-vw)), 18px) !important;
  border-left-width: 4px;
  /* ここを hidden にすると、横に出る説明まで切られる。 */
  overflow: visible !important;
}

.status-panel .cheat-actions > button::before {
  content: attr(data-mark);
  position: absolute;
  z-index: 0;
  right: 0.06em;
  bottom: -0.06em;
  color: currentColor;
  font-family: var(--display-font);
  font-size: clamp(38px, calc(3.2 * var(--shell-vw)), 64px);
  font-weight: 900;
  line-height: 0.86;
  opacity: 0.14;
  pointer-events: none;
}

.status-panel .cheat-actions > button.ready::before {
  opacity: 0.2;
}

.status-panel .cheat-actions > button > span {
  position: relative;
  z-index: 1;
}

/* 名前は字数に合わせて縮むので、はみ出さずに横幅いっぱいを使える。 */
.status-panel .cheat-actions > button strong {
  font-size: min(
    clamp(18px, calc(1.75 * var(--shell-vw)), 36px),
    calc(100cqw / var(--cheat-name-chars, 6))
  );
  white-space: nowrap;
}

/* フリテンのロンは初見で分からない。問いかけを大きく出して、答えを二択で並べる。 */
.win-confirm-prompt.furiten #win-confirm-kicker {
  max-width: 86cqw;
  color: #ffe6f6;
  font-family: var(--display-font);
  font-size: min(clamp(26px, calc(3.1 * var(--shell-vw)), 62px), calc(88cqw / 22));
  font-weight: 900;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 3px 0 #4a0f2b, 0 0 calc(1.1 * var(--shell-vw)) #ff6fb5;
}

.win-confirm-prompt.furiten #win-button {
  min-width: clamp(320px, calc(38 * var(--shell-vw)), 660px);
  min-height: clamp(96px, calc(9 * var(--shell-vw)), 168px);
  font-size: min(clamp(24px, calc(2.4 * var(--shell-vw)), 46px), calc(34cqw / 12));
}

.win-confirm-prompt.furiten #pass-button {
  min-width: clamp(180px, calc(16 * var(--shell-vw)), 300px);
  min-height: clamp(56px, calc(5 * var(--shell-vw)), 92px);
  font-size: clamp(18px, calc(1.6 * var(--shell-vw)), 32px);
}

/* 結果画面の鬼怒川さんの一言。小さくて読めないのでは意味がない。
   二行に収まる範囲で、字数に合わせていちばん大きく出す。 */
.win-result-dialog .result-dialogue {
  align-items: center;
  padding:
    calc(clamp(8px, calc(0.8 * var(--shell-vh)), 16px) * var(--dialogue-squeeze, 1))
    clamp(10px, calc(0.9 * var(--shell-vw)), 18px);
  font-size: unset;
  line-height: 1.32;
}

.win-result-dialog .result-dialogue {
  container-type: inline-size;
}

.win-result-dialog .result-dialogue > span:not(.result-face-frame) {
  min-width: 0;
  /* --dialogue-squeeze は、板からはみ出したときだけ台本側から下げる。
     成立役が二段三段に増えた局で、この一言が切れていた。 */
  font-size: calc(
    min(
      clamp(15px, 8.5cqw, 30px),
      calc(155cqw / var(--result-line-chars, 20))
    ) * var(--dialogue-squeeze, 1)
  );
  font-weight: 800;
  overflow-wrap: normal;
  text-wrap: pretty;
}

.win-result-dialog .result-dialogue .result-face-frame {
  flex: 0 0 auto;
  width: clamp(44px, calc(3.6 * var(--shell-vw)), 76px);
  height: clamp(44px, calc(3.6 * var(--shell-vw)), 76px);
}

/* 読めない大きさの文字は置かない。画面に出すからには、遠目でも読める下限を守る。 */
.call-rack-hint,
.wind-box > span,
.item-state,
.riichi-effect-copy span,
.call-pass-button small,
.cheat-rack-heading span {
  font-size: clamp(16px, calc(1.15 * var(--shell-vw)), 24px) !important;
}

/* 鬼怒川さんの側は持ち点を出さない（飛ばないので意味がない）。
   代わりに「あと何勝で決着か」を、字と目盛りの両方で示す。 */
.status-panel .opponent-score {
  align-content: center;
  gap: calc(0.4 * var(--shell-vw));
}

.damage-gauge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, calc(0.7 * var(--shell-vw)), 14px);
}

.status-panel .opponent-score .seal-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(4px, calc(0.34 * var(--shell-vw)), 8px);
}

.status-panel .opponent-score .seal-row i {
  width: auto;
  height: clamp(12px, calc(1.05 * var(--shell-vw)), 20px);
  border: 1px solid #5d5762;
  border-radius: clamp(3px, calc(0.24 * var(--shell-vw)), 5px);
  background: #191721;
  box-shadow: none;
}

.status-panel .opponent-score .seal-row i.filled {
  border-color: #ffb3dd;
  background: linear-gradient(180deg, #e0509a, #8d1f52);
  box-shadow: 0 0 calc(0.6 * var(--shell-vw)) rgba(255, 110, 175, 0.55);
}

.damage-remain {
  color: #f2dcea !important;
  font-size: clamp(15px, calc(1.25 * var(--shell-vw)), 25px) !important;
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 鳴けるあいだは、河に出たその牌も光らせる。見落として止まらないように。 */
.call-rack.call-offered {
  outline: 2px solid rgba(233, 160, 240, 0.75);
  outline-offset: clamp(4px, calc(0.4 * var(--shell-vw)), 9px);
  border-radius: clamp(10px, calc(0.8 * var(--shell-vw)), 16px);
  animation: call-rack-ready 1.15s ease-in-out infinite alternate;
}

.anna-river-zone .river > .tile:last-child.call-target {
  animation: bukkonuki-tile-pulse 0.86s ease-in-out infinite alternate;
}

/* 遊び方は向聴の並びへ。ドックは対局の設定と音の設定だけにする。 */
.hand-state-core {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.hand-state-core > #rules-button {
  min-height: 2.2cqw;
  padding: 0.28cqw 0.9cqw !important;
  border: 1px solid rgba(190, 187, 193, 0.5) !important;
  border-radius: 0.4cqw !important;
  background: linear-gradient(180deg, #222024, #0a1210) !important;
  color: #eae9ea !important;
  font-size: clamp(13px, 0.92cqw, 20px) !important;
  font-weight: 900 !important;
  white-space: nowrap;
}

/* ── 右下のドックを作り直し：4つを同じ大きさで、大きく ───────────────── */

.action-bar#call-rack {
  width: clamp(180px, 25%, 520px) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: auto auto auto;
  gap: clamp(4px, 0.6cqw, 14px) !important;
  min-height: 0 !important;
}

.action-bar#call-rack > button,
.action-bar#call-rack > #riichi-button,
.action-bar#call-rack > .call-rack-pass {
  min-width: 0;
  /* 端末の幅ではなく16:9の枠を基準にする。横向きスマホでは枠の高さが390pxしか
     ないので、72px固定だと下半分を鳴きドックが食い尽くしていた。 */
  min-height: clamp(34px, 6.4cqw, 124px) !important;
  grid-column: auto !important;
  grid-row: auto !important;
  display: grid;
  place-content: center;
  padding: 0.2em 0.3em !important;
}

.action-bar#call-rack > button:not(#riichi-button),
.action-bar#call-rack > .call-rack-pass,
.action-bar#call-rack > #riichi-button strong {
  font-family: var(--display-font);
  font-size: clamp(15px, 2.5cqw, 50px) !important;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  line-height: 1.05;
}

.action-bar#call-rack > #riichi-button.mode-active strong {
  font-size: clamp(22px, calc(2.05 * var(--shell-vw)), 40px) !important;
}

/* 「見送る」は立直の席をそのまま使う。行を足すと1マスだけ空いて不格好になる。 */
.call-rack-pass {
  grid-column: auto !important;
  grid-row: auto !important;
  letter-spacing: 0.04em !important;
  text-indent: 0 !important;
}

/* 鳴けるときは見逃しようがない光り方にする。 */
.call-rack > button:not(#riichi-button).ready {
  border-color: #ffe9a8;
  background: linear-gradient(180deg, #d8386f, #7a1240 62%, #c4173f);
  color: #fffdf4;
  text-shadow: 0 0 0.5em rgba(255, 220, 160, 0.9);
  box-shadow:
    inset 0 0 0 2px rgba(255, 240, 200, 0.85),
    0 calc(0.3 * var(--shell-vw)) 0 #2a0713,
    0 0 calc(1.6 * var(--shell-vw)) rgba(255, 96, 140, 0.9),
    0 0 calc(3 * var(--shell-vw)) rgba(255, 190, 90, 0.5);
  animation: call-rack-shout 0.6s ease-in-out infinite alternate;
}

@keyframes call-rack-shout {
  to {
    scale: 1.06;
    box-shadow:
      inset 0 0 0 2px #fff6d8,
      0 calc(0.3 * var(--shell-vw)) 0 #2a0713,
      0 0 calc(2.6 * var(--shell-vw)) rgba(255, 120, 160, 1),
      0 0 calc(5 * var(--shell-vw)) rgba(255, 200, 110, 0.75);
  }
}

/* ── 描いてもらったメダルのアイコンを使う ─────────────────────────────── */

/* アイテムは名前の左にメダルを置く。 */
.status-panel .item-button .item-symbol,
.item-select-intro .item-symbol,
.item-choice .item-symbol {
  overflow: visible;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.item-button .item-symbol > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 calc(0.1 * var(--shell-vw)) calc(0.25 * var(--shell-vw)) rgba(0, 0, 0, 0.75));
}

.status-panel .item-button {
  /* 状態の札は幅を固定する。auto のままだと行ごとに名前の幅が変わり、
     同じ欄なのに字の大きさが揃わない。 */
  grid-template-columns: clamp(38px, calc(2.9 * var(--shell-vw)), 58px) minmax(0, 1fr) clamp(40px, calc(3.1 * var(--shell-vw)), 62px);
  align-items: center;
  gap: clamp(8px, calc(0.6 * var(--shell-vw)), 13px);
}

/* イカサマは背景へ大きく敷く。漢字ではなく、描いてもらったメダルを薄く。 */
/* 絵は切らない。高さを文字の塊に合わせて、右端に丸ごと置く。 */
.status-panel .cheat-actions > button::before {
  content: "";
  top: 50%;
  right: clamp(10px, calc(0.7 * var(--shell-vw)), 18px);
  bottom: auto;
  left: auto;
  translate: 0 -50%;
  /* 大きさはボタンではなく文字に合わせる。ボタンは画面が広いと縦に伸びるので、
     高さを追うと絵だけ巨大になっていた。名前＋成功率の二行と同じ高さにする。 */
  height: min(
    calc(clamp(22px, calc(1.75 * var(--shell-vw)), 36px) + clamp(19px, calc(1.32 * var(--shell-vw)), 22px) + 6px),
    calc(100% - 4px)
  );
  aspect-ratio: 1;
  width: auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: brightness(1.1) saturate(1.1);
  opacity: 0.85;
}

.status-panel .cheat-actions > button.ready::before {
  opacity: 1;
}

/* 絵の下へ文字が潜り込まないよう、右側を空ける。 */
.status-panel .cheat-actions > button > span {
  padding-right: clamp(52px, calc(4.4 * var(--shell-vw)), 88px);
}

.reward-roulette-mark {
  width: clamp(54px, calc(4.6 * var(--shell-vw)), 96px);
  height: auto;
  display: block;
  margin: 0 auto clamp(4px, calc(0.4 * var(--shell-vw)), 10px);
  filter: drop-shadow(0 calc(0.2 * var(--shell-vw)) calc(0.5 * var(--shell-vw)) rgba(0, 0, 0, 0.8));
}

/* 絵の場所はこのCSSからの相対で書く。
   変数に url() を入れると、変数を使った側のCSSからの相対と解釈されて迷子になる。 */
#stack-cheat-button::before {
  background-image: url(../assets/ui/cheat-bukkonuki.webp);
}

#safety-cheat-button::before {
  background-image: url(../assets/ui/cheat-safety.webp);
}

#vision-cheat-button::before {
  background-image: url(../assets/ui/cheat-vision.webp);
}

#dora-indicator-cheat-button::before {
  background-image: url(../assets/ui/cheat-dora.webp);
}

/* ── 配牌アイテムの選択画面を組み直す ─────────────────────────────────── */

/* 見出しの横に漢字一字が裸で浮いていたのをやめ、説明と選択肢を大きくする。 */
.item-select-intro {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(8px, calc(0.7 * var(--shell-vw)), 14px);
  margin-bottom: clamp(16px, calc(1.4 * var(--shell-vw)), 28px);
}

.item-select-intro p {
  font-size: clamp(18px, calc(1.5 * var(--shell-vw)), 28px);
  line-height: 1.6;
}

.item-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(10px, calc(0.9 * var(--shell-vw)), 18px);
}

.item-choice {
  min-height: clamp(112px, calc(9 * var(--shell-vw)), 168px);
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, calc(1.2 * var(--shell-vw)), 24px);
  padding: clamp(14px, calc(1.15 * var(--shell-vw)), 24px);
  border: 2px solid rgba(214, 178, 236, 0.34);
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(86, 32, 66, 0.55), rgba(18, 14, 22, 0.94) 62%);
}

.item-choice:hover,
.item-choice:focus-visible {
  border-color: #e7b6ff;
  background:
    linear-gradient(135deg, rgba(126, 43, 92, 0.72), rgba(28, 18, 32, 0.96) 62%);
}

.item-choice .item-symbol {
  width: clamp(64px, calc(5.2 * var(--shell-vw)), 104px);
  height: clamp(64px, calc(5.2 * var(--shell-vw)), 104px);
  font-size: clamp(30px, calc(2.4 * var(--shell-vw)), 46px);
}

.item-choice .item-symbol > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 calc(0.1 * var(--shell-vw)) calc(0.25 * var(--shell-vw)) rgba(0, 0, 0, 0.75));
}

.item-choice strong {
  margin-bottom: 0.2em;
  color: #f2e4fa;
  font-family: var(--display-font);
  font-size: clamp(22px, calc(1.85 * var(--shell-vw)), 36px);
}

.item-choice small {
  color: #cfc6d6;
  font-size: clamp(16px, calc(1.3 * var(--shell-vw)), 24px);
  line-height: 1.5;
}

/* ── GAME OVER の札を重ねない ─────────────────────────────────────────── */

/* 左下へ重ねていたせいで、後ろの見出しと札の文字がぶつかって読めなかった。
   結果の下に一段置いて、どちらも最後まで読めるようにする。 */
.game-over-result {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(10px, calc(0.85 * var(--shell-vw)), 18px);
}

.game-over-result > .terminal-result,
.game-over-result > .counter-result {
  min-height: min(calc(40 * var(--shell-vh)), 380px);
}

.game-over-stamp {
  min-width: 0;
  width: 100%;
  position: static;
  container-type: inline-size;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, calc(1.1 * var(--shell-vw)), 24px);
  transform: none;
}

.game-over-stamp > strong {
  font-size: min(clamp(40px, calc(4.6 * var(--shell-vw)), 86px), 26cqw);
}

.game-over-stamp > span {
  font-size: min(clamp(18px, calc(1.45 * var(--shell-vw)), 27px), calc(66cqw / var(--game-over-reason-chars, 18)));
  white-space: normal;
}

@container shell (max-width: 760px) or (max-height: 680px) {
  .game-over-stamp {
    left: auto;
    bottom: auto;
  }
}

/* ── 盤面の中央で「はい／いいえ」だけ訊く ─────────────────────────────── */

/* 配牌アイテムのために別画面を挟むのをやめた。配牌を見たまま答えられる。 */
.center-choice {
  position: absolute;
  z-index: 528;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: all;
}

.center-choice[hidden] {
  display: none;
}

.center-choice-backdrop {
  position: absolute;
  inset: 0;
  /* 配牌を見ながら答える画面なので、暗くしすぎない。 */
  background: radial-gradient(ellipse at center, rgba(4, 2, 8, 0.32), rgba(4, 2, 8, 0.66));
}

.center-choice-panel {
  width: min(78cqw, 1040px);
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: clamp(14px, 1.2cqw, 26px);
  padding: clamp(24px, 2.4cqw, 52px) clamp(26px, 2.8cqw, 60px);
  border: clamp(3px, 0.25cqw, 6px) solid #e0b0f4;
  background: linear-gradient(135deg, rgba(112, 27, 80, 0.97), rgba(16, 8, 20, 0.98) 68%);
  box-shadow:
    inset 0 0 0 clamp(2px, 0.18cqw, 4px) #1d0714,
    0 0.5cqw 2.4cqw rgba(0, 0, 0, 0.8),
    0 0 3cqw rgba(214, 96, 176, 0.42);
  text-align: center;
  animation: center-choice-in 220ms cubic-bezier(.16, .84, .24, 1) both;
}

@keyframes center-choice-in {
  from { opacity: 0; scale: 0.94; }
  to { opacity: 1; scale: 1; }
}

.center-choice-panel > strong {
  /* 台本で入れた改行をそのまま効かせる。中途半端な折り返しを避ける。 */
  white-space: pre-line;
  color: #fdf2ff;
  font-family: var(--display-font);
  font-size: min(clamp(28px, 3.4cqw, 68px), calc(150cqw / var(--center-choice-chars, 16)));
  font-weight: 900;
  line-height: 1.25;
}

.center-choice-panel > p {
  margin: 0;
  max-width: 92%;
  color: #e3d2ec;
  font-size: clamp(17px, 1.5cqw, 30px);
  line-height: 1.5;
}

.center-choice-panel > p[hidden] {
  display: none;
}

.center-choice-actions {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.2cqw, 26px);
}

.center-choice-actions > button {
  min-height: clamp(56px, 5cqw, 104px);
  display: grid;
  place-content: center;
  padding: 0.2em 0.4em;
  border: clamp(2px, 0.18cqw, 4px) solid #f0c2ff;
  background: linear-gradient(180deg, #b23b7e, #6c0f43);
  color: #fff8fd;
  font-family: var(--display-font);
  font-size: clamp(24px, 2.4cqw, 48px);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  cursor: pointer;
}

.center-choice-actions > #center-choice-no {
  border-color: rgba(214, 196, 226, 0.6);
  background: linear-gradient(180deg, #3a3140, #1a1520);
  color: #ded3e6;
}

.center-choice-actions > button:hover,
.center-choice-actions > button:focus-visible {
  border-color: #fff4dd;
  filter: brightness(1.12);
}

/* ── 手前の三つを一本の物差しで並べる ─────────────────────────────────── */

/* 設定・手牌・鳴きドックが別々に幅を決めていたので、鳴きボタンが手牌の右端へ
   重なり、ツモ牌の中心が押せなかった。三つを同じ変数から配置して重なりを断つ。 */
.player-area {
  --dock-edge: 1%;
  --dock-gap: clamp(8px, 0.9%, 22px);
  --left-dock-w: 20.4%;
  --call-rack-w: clamp(180px, 25%, 520px);
}

.player-area > .turn-status {
  width: var(--left-dock-w);
  left: var(--dock-edge);
}

.player-area > .action-bar#call-rack {
  width: var(--call-rack-w) !important;
  right: var(--dock-edge);
}

.player-area > .player-hand-stack {
  width: auto;
  left: calc(var(--dock-edge) + var(--left-dock-w) + var(--dock-gap));
  right: calc(var(--dock-edge) + var(--call-rack-w) + var(--dock-gap));
}

/* ── 小さい画面でも枠の中に収める ─────────────────────────────────────── */

/* 縦積みだった頃の名残の最低高さ。16:9の枠に置く今の作りでは、枠より高い卓を
   作ってしまい、横向きスマホで残り枚数・王牌・河が操作欄の裏へ隠れていた。 */
.app-shell .table-panel,
.app-shell .character-panel {
  min-height: 0;
}

/* ダイアログは端末ではなくゲーム枠に収める。枠からはみ出すと、閉じるボタンが
   画面の外へ出て閉じられなくなる。 */
.modal-layer {
  padding: clamp(6px, 1.4%, 22px);
}

.modal-layer > .modal-card {
  max-width: 100%;
  max-height: 100%;
}

.rules-overview-dialog {
  width: min(1540px, 100%) !important;
  height: min(900px, 100%) !important;
}

.win-result-dialog,
.terminal-result-dialog,
.draw-result-dialog {
  width: min(1480px, 100%);
  max-width: 100%;
  max-height: 100%;
}

/* ── 手牌は必ず自分の枠に収める ───────────────────────────────────────── */

/* 牌の大きさを画面全体からではなく、手牌の枠から決める。こうすると、
   枠が狭い端末でも牌が右へはみ出して鳴きドックの下に潜り込まない。 */
.player-hand {
  container-type: inline-size;
  /* 手牌は牌同士をくっつける。麻雀の手牌は隙間なく並ぶもの。
     離れているのはツモ牌だけ。 */
  gap: 0 !important;
}

.player-hand > .tile {
  /* ツモ牌の前の隙間（2.6%）だけを差し引いて、14枚で枠を使い切る。
     割合はどちらも「手牌の枠」が基準なので、計算と実際がずれない。 */
  --hand-tile-width: calc((100cqw - 2.6cqw - 2px) / 14);
}

.player-hand > .tile.drawn {
  margin-left: 2.6% !important;
}

/* ── 小さいゲーム枠では右の欄を詰める ─────────────────────────────────── */

/* 問い合わせの相手を枠だと名指しする。名前がないと、字の入った箱（span）が
   相手になってしまい、広い画面でも小画面用の指定が効いてしまう。 */
.app-shell {
  container-name: shell;
}

/* 枠の横幅が1100px以下＝縦は620px以下。ここから先は詰めないと字が潰れる。 */
@container shell (max-width: 1100px) {
  .status-panel {
    gap: clamp(3px, 0.5cqw, 9px);
  }

  .status-panel .score-card,
  .status-panel .item-rack {
    padding: clamp(3px, 0.45cqw, 9px) clamp(4px, 0.7cqw, 11px);
  }

  .status-panel .score-card > strong {
    font-size: clamp(13px, 2.1cqw, 26px) !important;
  }

  .status-panel .score-heading span,
  .status-panel .section-title > span,
  .status-panel .item-button,
  .status-panel .opponent-score .seal-row i {
    font-size: clamp(9px, 1.15cqw, 15px) !important;
  }

  .cheat-rack-heading {
    padding: 0 !important;
  }

  .cheat-rack-heading strong {
    font-size: clamp(10px, 1.35cqw, 20px) !important;
  }

  .status-panel .cheat-actions {
    gap: clamp(2px, 0.35cqw, 6px);
  }

  .status-panel .cheat-actions > button {
    padding: clamp(2px, 0.3cqw, 6px) clamp(4px, 0.6cqw, 10px) !important;
  }

  /* 幅いっぱいまで使う。字数に合わせて縮めるのは今までどおり。 */
  .status-panel .cheat-actions > button strong {
    font-size: min(20px, calc(100cqw / var(--cheat-name-chars, 7))) !important;
  }

  .status-panel .cheat-actions > button em.cheat-rate {
    font-size: min(12px, calc(64cqw / 7)) !important;
  }
}

/* さらに狭い枠（横向きスマホ）では、絵と成功率をしまって名前だけ残す。 */
@container shell (max-width: 820px) {
  .status-panel .cheat-actions > button::before {
    display: none;
  }

  .status-panel .cheat-actions > button > span {
    padding-right: 0;
  }

  .status-panel .cheat-actions > button em.cheat-rate {
    display: none !important;
  }

  .status-panel .item-button .item-symbol {
    display: none;
  }
}

/* 縦向きスマホのように枠が極端に狭いときは、鳴きドックをさらに細くして
   手牌の場所を空ける。 */
@container shell (max-width: 560px) {
  .player-area {
    --call-rack-w: clamp(110px, 30%, 520px);
    --left-dock-w: 18%;
  }
}

/* どの版が動いているかをタイトル画面の隅に出す。画面が古いまま直っていない、
   という取り違えを防ぐための目印。 */
.title-build {
  margin: clamp(6px, 0.6cqw, 12px) 0 0;
  color: rgba(214, 196, 226, 0.5);
  font-size: clamp(10px, 0.85cqw, 16px);
  letter-spacing: 0.12em;
  text-align: center;
}

/* 「見送る」は右クリックでもできる。知らないと押す場所を探すので、ボタンに書く。 */
.action-bar#call-rack > .call-rack-pass {
  gap: 0.1em;
  line-height: 1.1;
}

.action-bar#call-rack > .call-rack-pass > strong {
  display: block;
  font-family: var(--display-font);
  font-size: 1em;
  font-weight: 900;
}

.action-bar#call-rack > .call-rack-pass > small {
  display: block;
  color: #cbb6da;
  font-size: 0.48em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 掴んだ手のカットイン。背景が抜いてあるので、帯の暗がりの上に手だけを置く。 */
.anna-reaction-cut-in.caught-wrist .anna-reaction-eye {
  height: calc(46 * var(--shell-vh));
  top: calc(19 * var(--shell-vh));
  background:
    radial-gradient(circle at 50% 46%, rgba(120, 34, 82, 0.6), transparent 62%),
    linear-gradient(90deg, rgba(1, 8, 13, 0.98), rgba(22, 8, 18, 0.9) 18% 82%, rgba(1, 8, 13, 0.98));
}

.anna-reaction-cut-in.caught-wrist .anna-reaction-eye img {
  /* 帯は横長なので、contain だと手が小さく浮いてしまう。
     cover で帯を埋め、掴んでいる位置（画像の中ほど）を中心に置く。 */
  object-fit: cover;
  object-position: center 46%;
  filter: drop-shadow(0 calc(0.4 * var(--shell-vw)) calc(0.9 * var(--shell-vw)) rgba(0, 0, 0, 0.72));
}

/* アイテム名は一行。長い名前でも欄からはみ出さないよう、字数で縮める。 */

/* 名前の欄を基準にして、漢字の一文も読みも枠内へ収める。 */
.status-panel .item-button > span:nth-child(2) {
  container-type: inline-size;
  min-width: 0;
}

.status-panel .item-button strong {
  display: block;
  /* 共通指定（18px以上）より、欄の幅を優先する。名前が長いと溢れるため。 */
  font-size: max(10px, min(clamp(18px, calc(1.12 * var(--shell-vw)), 24px), calc(100cqw / var(--item-name-chars, 8)))) !important;
  white-space: nowrap;
}

/* アイテムを三つ持っていても、イカサマ欄を潰させない。 */
.status-panel .cheat-rack {
  min-height: clamp(74px, 12.5cqw, 220px);
}

.status-panel .item-rack {
  flex: 0 1 auto;
  min-height: 0;
}

/* 枠が小さいときは、状態の札（使用／配牌時）を畳んで名前に幅を回す。
   使えるかどうかはボタンの明るさで分かる。説明はホバーに残る。 */
@container shell (max-width: 1500px) {
  .status-panel .item-button .item-state {
    display: none;
  }

  .status-panel .item-button {
    grid-template-columns: clamp(30px, calc(2.4 * var(--shell-vw)), 46px) minmax(0, 1fr);
  }
}

/* アイテムを三つ持つとイカサマ欄が痩せて、技名と成功率が重なっていた。
   アイテムの行は低く抑えて、余った高さをイカサマ欄へ回す。 */
.status-panel .item-button {
  min-height: clamp(26px, 2.35cqw, 46px);
  padding-block: clamp(2px, 0.25cqw, 6px);
}

/* ── アイテムはイカサマ欄と同じ並びにする ───────────────────────────── */

/* 絵だけ三つ並べると名前が読めない。イカサマの札と同じく、
   名前を左に大きく、メダルを右に置く。字の大きさも同じ理屈で決める。 */
.status-panel .item-buttons {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2px, 0.28cqw, 7px);
}

/* 一行で済ませる。名前を左、状態を右、メダルはその外側。
   縦に積むとアイテム三つで下のイカサマ欄がはみ出す。 */
.status-panel .item-button {
  position: relative;
  min-height: 0;
  /* 状態の札は幅を固定する。auto のままだと「使用」と「配牌時」で名前の欄の幅が
     変わり、同じ列なのに行ごとに字の大きさが揃わない。 */
  grid-template-columns: minmax(0, 1fr) clamp(30px, 2.35cqw, 46px) !important;
  grid-template-rows: auto;
  align-items: center;
  /* 名前の欄は必ず横いっぱいに伸ばす。内容に合わせて縮めると、
     欄の幅から字の大きさを決めている計算が0になって字が消える。 */
  justify-items: stretch;
  text-align: left;
  gap: clamp(5px, 0.45cqw, 12px);
  padding: clamp(2px, 0.22cqw, 7px) clamp(9px, 0.62cqw, 18px);
  /* メダルの居場所を空ける。 */
  padding-right: clamp(28px, 2.25cqw, 48px);
}

/* 名前は字数で縮める。イカサマの技名と同じ決め方。 */
.status-panel .item-button strong {
  font-size: min(
    clamp(16px, calc(1.45 * var(--shell-vw)), 30px),
    calc(100cqw / var(--item-name-chars, 8))
  ) !important;
  white-space: nowrap;
  line-height: 1.04;
}

.status-panel .item-button .item-state {
  font-size: clamp(10px, 0.72cqw, 15px) !important;
  white-space: nowrap;
  line-height: 1.05;
  text-align: right;
}

/* メダルは行の高さいっぱいで右端に置く。 */
.status-panel .item-button .item-symbol {
  position: absolute;
  top: 50%;
  right: clamp(5px, 0.4cqw, 11px);
  translate: 0 -50%;
  width: auto;
  height: min(clamp(24px, 2.2cqw, 48px), calc(100% - 2px));
  aspect-ratio: 1;
}

/* 右の欄の高さは有限。見出しと点数の箱を詰めて、イカサマ欄へ高さを回す。 */
.status-panel .score-card {
  padding-block: clamp(4px, 0.45cqw, 10px);
}

.status-panel .item-rack .section-title,
.status-panel .cheat-rack-heading {
  padding-block: clamp(1px, 0.15cqw, 4px);
}

.status-panel .cheat-rack-heading strong {
  font-size: clamp(16px, 1.15cqw, 24px) !important;
}

/* 二行の間を詰めて、板の高さに収める。 */
.status-panel .cheat-actions > button strong {
  line-height: 1.02;
}

.status-panel .cheat-actions > button em.cheat-rate {
  line-height: 1.05;
}

/* ── 第三戦の鬼怒川さんは本気 ─────────────────────────────────────── */

/* 立ち絵の後ろから紫のオーラを立てる。枠の中で息をするようにゆらす。 */
.character-panel.stage-three-aura .portrait-frame {
  background:
    radial-gradient(62% 52% at 50% 64%, rgba(150, 46, 214, 0.5), transparent 72%),
    linear-gradient(180deg, rgba(158, 119, 181, 0.14), transparent 35%),
    radial-gradient(circle at 50% 33%, #3f2c50 0, #241a2c 43%, #0b0714 100%);
}

.character-panel.stage-three-aura .portrait-frame::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -8% -12% -6%;
  pointer-events: none;
  background:
    radial-gradient(58% 48% at 50% 66%, rgba(186, 96, 255, 0.62), rgba(108, 22, 172, 0.3) 52%, transparent 78%);
  filter: blur(10px);
  mix-blend-mode: screen;
  animation: stage-three-aura-breathe 2.6s ease-in-out infinite alternate;
}

.character-panel.stage-three-aura #anna-portrait {
  /* position はここで触らない。立ち絵は枠に absolute で吊ってあり、relative に
     すると left/bottom の指定が「ずらし」になって、耳だけ残して画面下へ落ちる。 */
  z-index: 1;
  filter:
    drop-shadow(0 0 calc(0.9 * var(--shell-vw)) rgba(198, 118, 255, 0.9))
    drop-shadow(0 0 calc(2.6 * var(--shell-vw)) rgba(122, 32, 196, 0.65));
}

@keyframes stage-three-aura-breathe {
  from { opacity: 0.62; scale: 0.98; }
  to { opacity: 1; scale: 1.04; }
}

/* 版番号の右に、更新を見分けるための札を小さく添える。 */
.title-build .title-build-stamp {
  margin-left: 0.5em;
  opacity: 0.62;
  font-size: 0.78em;
}

/* ── 戦目で卓の色が変わる ──────────────────────────────────────────────
   第一戦は落ち着いた深緑。第二戦は血の気が差した臙脂。第三戦は紫黒に赤が滲み、
   四隅が暗く締まる。色だけでなく、進むほど空気が重くなるように組む。 */
.app-shell {
  --stage-frame-a: #0a1a15;
  --stage-frame-b: #040a08;
  --stage-glow: rgba(58, 96, 82, 0.34);
  --stage-table: #06120f;
  --stage-felt-a: #2a3d39;
  --stage-felt-b: #17221f;
  --stage-felt-glow: rgba(96, 132, 118, 0.26);
  --stage-vignette: 0;
  --stage-vignette-color: rgba(0, 0, 0, 0.55);
}

.app-shell[data-stage="2"] {
  --stage-frame-a: #1b0a10;
  --stage-frame-b: #070305;
  --stage-glow: rgba(128, 40, 62, 0.38);
  --stage-table: #14070b;
  --stage-felt-a: #4a1f2c;
  --stage-felt-b: #24101a;
  --stage-felt-glow: rgba(170, 70, 96, 0.28);
  --stage-vignette: 0.28;
  --stage-vignette-color: rgba(20, 0, 6, 0.9);
}

.app-shell[data-stage="3"] {
  --stage-frame-a: #120818;
  --stage-frame-b: #030105;
  --stage-glow: rgba(150, 30, 60, 0.46);
  --stage-table: #0a0410;
  --stage-felt-a: #2f1a3f;
  --stage-felt-b: #120818;
  --stage-felt-glow: rgba(190, 40, 90, 0.34);
  --stage-vignette: 0.55;
  --stage-vignette-color: rgba(8, 0, 12, 0.96);
}

.game-frame {
  background:
    radial-gradient(ellipse at 50% 42%, var(--stage-glow), transparent 45%),
    linear-gradient(145deg, var(--stage-frame-a), var(--stage-frame-b));
}

.table-panel {
  background: var(--stage-table);
}

.felt-field {
  background:
    radial-gradient(circle at 50% 48%, var(--stage-felt-glow), transparent 32%),
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, var(--stage-felt-a), var(--stage-felt-b));
}

/* 四隅を落とす幕。戦が進むほど濃くなる。操作は素通しする。 */
.game-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: var(--stage-vignette);
  background: radial-gradient(ellipse at 50% 45%, transparent 48%, var(--stage-vignette-color) 100%);
}

/* ── 枠の大きさを一つに固定する ─────────────────────────────────────────
   ゲームは 1920x1080 の論理サイズで組む。画面に収まる倍率で丸ごと縮めるだけなので、
   画面の大きさやブラウザの拡大率が変わっても、部品の位置と大きさの関係は変わらない。
   倍率は js/game.js の fitShellToViewport() が --shell-scale に書く。 */
html, body { overflow: hidden; }
/* 枠の外（デバッグ窓など）でも同じ単位が使えるよう、根にも置く。 */
:root {
  --shell-vw: 19.2px;
  --shell-vh: 10.8px;
}
/* 枠は body ではなく画面（表示領域）そのものを基準に中央へ置く。
   ブラウザの拡大縮小で body の大きさが追いつかない一瞬があっても、ずれない。 */
.app-shell {
  --shell-vw: 19.2px;
  --shell-vh: 10.8px;
  width: 1920px !important;
  height: 1080px !important;
  min-width: 0;
  min-height: 0;
  position: fixed;
  left: 50%;
  top: 50%;
  margin: 0;
  transform: translate(-50%, -50%) scale(var(--shell-scale, 1));
  transform-origin: center center;
  /* 高さと縦横比を問う @container は、この指定だと一瞬だけ別の答えを返すことがあり、
     そのたびに右側の欄が狭い画面用の配置へ飛んでいた。枠は常に1920x1080なので、
     幅だけを問える指定にして、高さ・縦横比の分岐は二度と当たらないようにする。
     cqw は今までどおり使える（cqh はこのゲームでは使っていない）。 */
  container-type: inline-size;
  container-name: shell;
}

/* ── 右下のボタンのドック ────────────────────────────────────────────
   枠は 1920x1080 で固定になったので、ここは実寸で決める。下の帯は高さ243px。
   チー・ポン・カンの段78px ＋ 隙間8px ＋ 立直110px ＝ 196px。帯の中に収まる。 */
.action-bar#call-rack {
  bottom: 14px;
  min-height: 0;
  gap: 8px;
}

.action-bar#call-rack > #riichi-button {
  min-height: 110px !important;
  padding: 6px 12px !important;
}

/* 先にある cqw 基準の !important に負けないよう、こちらも !important で置く。 */
.action-bar#call-rack > #riichi-button strong {
  font-size: 44px !important;
}

.action-bar#call-rack > button:not(#riichi-button) {
  min-height: 78px !important;
  font-size: 30px !important;
}

/* 起動画面の下に、全画面の案内を一行。 */
.boot-fullscreen-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  margin: 0;
  color: #7aa9b6;
  font-size: 20px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/* ── 左上の名札を消し、立ち絵をひとまわり大きく ────────────────────────
   名札の分だけ上が空くので、そこへ頭を入れる。腰から下は下の帯に隠す。
   絵の実寸: 1536x2048 のうち、人物が写っているのは左右 15% ずつを除いた中央 71%。
   透明な余白ぶん、枠（箱）の右端 x≈690 に対して、実際の人物の右端は x≈460。
   相手の河は x≈694 からなので、右にはまだ 230px ほど余っている。 */
.nameplate {
  display: none !important;
}

/* 頭が画面の最上端に届く大きさ。右腕の先は相手の河（x≈694）の手前で止める。 */
.portrait-frame {
  overflow: visible !important;
}

.portrait-frame img {
  width: 155%;
  height: 155%;
  /* 左の見切れをなくす位置。-34% だと人物の左端が画面外へ 30px ほど出ていた。
     8% ぶん右へ寄せると左が切れず、人物の右端は x≈500 で河の手前に収まる。 */
  left: -26%;
  /* 元の規則が top:0 も持っていて bottom が効かなかった。上を外して下端で決める。
     枠の下端から 38% 下（≈337px）に箱の底を置くと、絵の頭が画面の最上端に来る。 */
  top: auto;
  bottom: -38%;
}

/* ── 対局中の吹き出しは半透明。奥の立ち絵が透けて見えるようにする ──────────
   文字の読みやすさは、背景のぼかしと文字の縁取りで保つ。 */
.character-panel .anna-speech.kinugawa-message-panel.table-message-panel {
  background:
    linear-gradient(112deg, rgba(116, 12, 63, 0.34), transparent 44%),
    linear-gradient(172deg, rgba(19, 9, 34, 0.58), rgba(6, 2, 13, 0.62) 62%) !important;
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.5),
    0 0 32px rgba(217, 29, 158, 0.22),
    inset 0 1px 0 rgba(255, 236, 255, 0.12);
}

.character-panel .anna-speech .anna-line.kinugawa-message-text {
  text-shadow:
    0 0 6px rgba(0, 0, 0, 0.95),
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 0 14px rgba(0, 0, 0, 0.8);
}

/* ── ご褒美の絵へ移る前のホワイトアウト ──────────────────────────────────
   （………）を連打しても絵の差し替えが見えないよう、いったん白で覆ってから切り替える。
   白くなる 0.32秒、白のまま 0.28秒、明けるのに 0.5秒。 */
.kinugawa-story-scene .story-whiteout-veil {
  position: absolute;
  z-index: 12;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in;
}

.kinugawa-story-scene.story-whiteout .story-whiteout-veil {
  opacity: 1;
  transition: opacity 0.32s ease-out;
}

/* ── 吹き出しは相手の河にかからない幅まで ──────────────────────────────
   主人公の捨て牌の左端は x≈694。吹き出しの右端を 680 で止める（左端7 ＋ 幅673）。 */
.character-panel .anna-speech.kinugawa-message-panel.table-message-panel {
  width: 673px !important;
  max-width: none;
}

/* ── 満貫の和了にも放射の光を出す ─────────────────────────────────────
   満貫は最低の和了なので何も出していなかったが、それでは寂しい。
   跳満と同じ放射だけを、少し抑えた明るさで出す。斜めの帯と火花は跳満以上のまま。 */
.win-effect.result-tier-normal .win-effect-rays {
  display: block;
  opacity: 0.78;
}

/* ── ご褒美の絵のハートときらめきは、カメラが動き出す最初から舞わせる ─────
   元は全体像が出たあと（9.6秒の61%）からだった。絵に入って0.6秒で出そろい、あとは出しっぱなし。 */
.kinugawa-story-scene.reward-cg-scene .reward-cg-sparkles {
  animation: reward-cg-sparkles-from-start 9.6s linear both;
}

@keyframes reward-cg-sparkles-from-start {
  0% { opacity: 0; }
  6% { opacity: 1; }
  100% { opacity: 1; }
}

/* ── フリテンの札は小さく、手牌の上に ──────────────────────────────────
   元は幅420px超の帯を左下の状態表示の上に出していて、鬼怒川さんの吹き出しと重なった。
   卓の下端（y≈883）と手牌の上端（y≈965）のあいだ、手牌の左端（x≈428）に揃えて置く。 */
.turn-status .furiten-status,
.furiten-status {
  width: auto !important;
  max-width: none !important;
  left: calc(100% + 18px) !important;
  top: 12px !important;
  bottom: auto !important;
  right: auto !important;
  display: inline-grid !important;
  grid-template-columns: auto auto !important;
  gap: 8px !important;
  padding: 5px 14px 5px 10px !important;
  border-width: 1px 1px 1px 5px !important;
  clip-path: none !important;
  border-radius: 6px !important;
  box-shadow: 0 0 10px rgba(228, 66, 147, 0.35), 0 3px 8px rgba(0, 0, 0, 0.5) !important;
}

.furiten-status::before {
  width: 22px !important;
  font-size: 15px !important;
  border-width: 1px !important;
}

.furiten-status > strong {
  font-size: 20px !important;
  letter-spacing: 0.1em !important;
}

.furiten-status > span,
.furiten-status > b {
  display: none !important;
}

/* ── 拡大縮小で見た目が動かないようにする ─────────────────────────────
   1) フリテンの札は、出す指定が [hidden] より強くなってしまい、常に出ていた。
      隠す指定を同じ強さで後ろに置いて、伏せている間は必ず消す。
   2) backdrop-filter は、枠ごと縮めている画面では「ぼかす範囲」だけが
      画面基準で計算され、拡大縮小のたびに透けた部分がずれて伸び縮みする。
      枠の中では使わず、背景の濃さと文字の縁取りで読みやすさを保つ。 */
.furiten-status[hidden],
.turn-status .furiten-status[hidden] {
  display: none !important;
}

.app-shell *,
.app-shell {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.character-panel .anna-speech.kinugawa-message-panel.table-message-panel {
  background:
    linear-gradient(112deg, rgba(116, 12, 63, 0.46), transparent 44%),
    linear-gradient(172deg, rgba(19, 9, 34, 0.74), rgba(6, 2, 13, 0.78) 62%) !important;
}

/* ── 「見送る」「見逃す」を、押せる釦として見せる ──────────────────────
   鳴きの見送りが暗すぎて、押せるものだと分からなかった。鳴ける釦と同じ明るさにする。
   ツモ・ロンの横に出る見逃しも、同じ形でそろえる。 */
.call-rack-pass {
  border: 1px solid #e7c7f6 !important;
  background: linear-gradient(180deg, #7a2f64, #43164a) !important;
  color: #fff4ff !important;
  text-shadow: 0 0 0.5em rgba(255, 210, 255, 0.85);
  box-shadow:
    inset 0 0 0 1px rgba(255, 233, 255, 0.5),
    0 calc(0.3 * var(--shell-vw)) 0 #1b0a1c,
    0 0 calc(0.9 * var(--shell-vw)) rgba(233, 120, 220, 0.6);
  animation: call-rack-ready 1.15s ease-in-out infinite alternate;
}

.call-rack-pass:hover,
.call-rack-pass:focus-visible {
  border-color: #fff !important;
  background: linear-gradient(180deg, #93397a, #55205e) !important;
}

.call-rack-pass > strong {
  display: block;
  font-size: clamp(15px, calc(1.15 * var(--shell-vw)), 23px);
  font-weight: 900;
  line-height: 1.1;
}

.call-rack-pass > small,
#pass-button > small {
  display: block;
  margin-top: 0.15em;
  font-size: clamp(10px, calc(0.72 * var(--shell-vw)), 15px);
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.82;
}

/* 和了を確かめる帯では、決定の釦と見逃しの釦を横に並べる。
   ただしフリテンのロンと満貫未満の問いかけは、釦が大きく文も長いので縦積みのまま。 */
#win-confirm-prompt:not(.furiten):not(.mangan-locked) .win-confirm-copy:has(> #pass-button:not([hidden])) {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, calc(1.1 * var(--shell-vw)), 24px);
}

#win-confirm-prompt:not(.furiten):not(.mangan-locked) .win-confirm-copy > #win-confirm-kicker,
#win-confirm-prompt:not(.furiten):not(.mangan-locked) .win-confirm-copy > #mangan-lock-title,
#win-confirm-prompt:not(.furiten):not(.mangan-locked) .win-confirm-copy > #mangan-lock-detail {
  grid-column: 1 / -1;
}

#pass-button {
  min-height: clamp(44px, calc(3.4 * var(--shell-vw)), 74px);
  padding: 0.3em 1.1em;
  border: 2px solid #cbb6d8;
  border-radius: clamp(8px, calc(0.6 * var(--shell-vw)), 14px);
  background: linear-gradient(180deg, #3a3542, #1b1820);
  color: #f2ecf6;
  cursor: pointer;
}

#pass-button > strong {
  display: block;
  font-size: clamp(17px, calc(1.35 * var(--shell-vw)), 30px);
  font-weight: 900;
  line-height: 1.1;
}

#pass-button:hover,
#pass-button:focus-visible {
  border-color: #fff;
  background: linear-gradient(180deg, #4b4454, #26222c);
}

/* ── 危険度は星だけを一行で。呼び名はホバー説明に置く ──────────────────
   ボタンは名前と危険度の二段のまま。長い語を入れると枠から出るので、
   星の行だけにして、字数に応じて縮める。 */
.status-panel .cheat-actions > button em.cheat-rate {
  font-size: max(
    18px,
    min(
      clamp(15px, calc(1.32 * var(--shell-vw)), 22px),
      calc(100cqw / var(--cheat-rate-chars, 9))
    )
  );
  white-space: nowrap;
}

/* 絵は文字の塊ではなく、ボタンの縦の真ん中に置く。 */
.status-panel .cheat-actions > button::before {
  top: 50%;
  bottom: auto;
  translate: 0 -50%;
  height: min(calc(100% - 8px), clamp(46px, calc(3.3 * var(--shell-vw)), 64px));
}

/* ── 和了の確認で「見逃す」を横に並べるときは、枠を中身に合わせる ─────────
   立ち絵側の指定で幅が clamp(160px, 17cqw, 380px) に固定されているため、
   二つ並べると「ツモ」が一文字ぶんまで潰れて縦書きのようになっていた。 */
#win-confirm-prompt:not(.furiten):not(.mangan-locked) .win-confirm-copy:has(> #pass-button:not([hidden])) {
  width: max-content !important;
  max-width: calc(54 * var(--shell-vw));
  grid-template-columns: max-content max-content;
}

#win-confirm-prompt:not(.furiten):not(.mangan-locked) .win-confirm-copy:has(> #pass-button:not([hidden])) > #win-button,
#win-confirm-prompt:not(.furiten):not(.mangan-locked) .win-confirm-copy:has(> #pass-button:not([hidden])) > #pass-button {
  width: auto;
  min-width: 0;
  white-space: nowrap;
}

/* ── ゲームオーバーは一枚絵と二択だけ ──────────────────────────────────
   どの負け方（ハコ・ノーテン罰符・イカサマ露見）でも同じ画面へ来る。
   判子や「掴」のような字は出さない。絵の中に GAMEOVER... が描いてある。 */
.game-over-screen {
  position: absolute;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  /* 幕は最初から不透明。ここを薄くすると、後ろの対局画面が透けて見える。 */
  background: #000;
}

.game-over-screen[hidden] {
  display: none;
}

@keyframes game-over-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.game-over-art {
  /* 浮かび上がるのは絵だけ。黒い幕はその下で張ったままにする。 */
  animation: game-over-fade 0.9s ease both;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center;
}

.game-over-actions {
  position: absolute;
  left: 50%;
  bottom: 9%;
  translate: -50% 0;
  display: flex;
  gap: clamp(14px, calc(1.4 * var(--shell-vw)), 30px);
  animation: game-over-buttons 1.4s ease 0.6s both;
}

@keyframes game-over-buttons {
  from { opacity: 0; translate: -50% 12px; }
  to { opacity: 1; translate: -50% 0; }
}

.game-over-actions > button {
  min-width: clamp(200px, calc(16 * var(--shell-vw)), 320px);
  min-height: clamp(52px, calc(3.6 * var(--shell-vw)), 72px);
  padding: 0.5em 1.4em;
  border: 1px solid rgba(214, 205, 222, 0.5);
  border-radius: 2px;
  background: rgba(10, 10, 14, 0.62);
  color: #ece7f0;
  font-family: var(--ui-font);
  font-size: clamp(19px, calc(1.5 * var(--shell-vw)), 30px);
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.game-over-actions > button:hover,
.game-over-actions > button:focus-visible {
  border-color: #fff;
  background: rgba(30, 28, 36, 0.86);
  color: #fff;
}

/* ── 大きな文字は金と銀 ──────────────────────────────────────────────
   段を重ねた袋文字は輪郭がぶれて読みにくい。色のグラデーションを字の形に
   切り抜き、影は後ろに一枚だけ落とす。金＝和了の役名・勝敗・GAME CLEAR、
   銀＝立直・カットイン・流局・満貫未満の見出し。 */
.win-effect .win-effect-copy > span#win-effect-title,
.win-effect.anna-win .win-effect-copy > span#win-effect-title,
.win-effect.result-tier-yakuman .win-effect-copy > span#win-effect-title,
.win-effect.player-win .win-effect-outcome,
.riichi-effect .riichi-effect-copy strong,
.riichi-effect.anna .riichi-effect-copy strong,
.anna-reaction-cut-in .anna-reaction-copy strong#anna-reaction-text,
.call-cutin .call-cutin-band > strong#call-cutin-side,
.call-cutin .call-cutin-band > b#call-cutin-text,
#dialog-card.draw-result-dialog .draw-result-title > strong,
#dialog-card:has(> #dialog-content > .draw-result) .draw-result-title > strong,
.win-confirm-prompt.mangan-locked #mangan-lock-title,
.win-confirm-prompt.mangan-locked.hokuto-crisis #mangan-lock-title {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0;
  text-shadow: none;
  filter: drop-shadow(0 0.05em 0 #1a0a16) drop-shadow(0 0 0.35em rgba(0, 0, 0, 0.6));
}

/* 金。勝ったときの「勝利」は役の格に関係なく金のまま。
   「敗北」と GAME CLEAR は金にしない。もとの色（敗北=白青、GAME CLEAR=桃）へ戻した。 */
.win-effect.player-win .win-effect-outcome,
/* 役名は格で色が変わる。倍満・三倍満が金。 */
.win-effect.title-gold .win-effect-copy > span#win-effect-title,
.result-showcase.title-gold .result-primary-yaku > strong {
  background-image: linear-gradient(180deg, #fff6cf 0%, #f6d978 34%, #cf9d2c 50%, #f9e6a3 66%, #b97f1a 100%);
}

/* 銀。満貫・跳満の役名。 */
.win-effect.title-silver .win-effect-copy > span#win-effect-title,
.result-showcase.title-silver .result-primary-yaku > strong {
  background-image: linear-gradient(180deg, #ffffff 0%, #dfe3ea 34%, #9aa3ae 50%, #eef1f5 66%, #7d8792 100%);
}

/* 虹。役満の役名だけ。ゆっくり色が流れる。 */
.win-effect.title-rainbow .win-effect-copy > span#win-effect-title,
.result-showcase.title-rainbow .result-primary-yaku > strong {
  background-image: linear-gradient(100deg, #ff8ab3 0%, #ffd166 16%, #9cff8a 33%, #6be3ff 50%, #b39bff 66%, #ff8ab3 83%, #ffd166 100%);
  background-size: 260% 100%;
  animation: title-rainbow-flow 5.2s linear infinite;
}

@keyframes title-rainbow-flow {
  from { background-position: 0 0; }
  to { background-position: 260% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .win-effect.title-rainbow .win-effect-copy > span#win-effect-title,
  .result-showcase.title-rainbow .result-primary-yaku > strong {
    animation: none;
  }
}

/* 銀 */
.riichi-effect .riichi-effect-copy strong,
.riichi-effect.anna .riichi-effect-copy strong,
.anna-reaction-cut-in .anna-reaction-copy strong#anna-reaction-text,
.call-cutin .call-cutin-band > strong#call-cutin-side,
.call-cutin .call-cutin-band > b#call-cutin-text,
#dialog-card.draw-result-dialog .draw-result-title > strong,
#dialog-card:has(> #dialog-content > .draw-result) .draw-result-title > strong,
.win-confirm-prompt.mangan-locked #mangan-lock-title,
.win-confirm-prompt.mangan-locked.hokuto-crisis #mangan-lock-title {
  background-image: linear-gradient(180deg, #ffffff 0%, #dfe3ea 34%, #9aa3ae 50%, #eef1f5 66%, #7d8792 100%);
}

/* ── 和了画面の丸い顔 ──────────────────────────────────────────────
   立ち絵を上端合わせで抜いていた名残で、顔の絵に差し替えたら額だけが映っていた。
   顔の絵は正方形なので、そのまま円の中へ収める。 */
.win-effect-face-frame > img,
.result-face-frame > img {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  object-fit: cover !important;
  object-position: 50% 45% !important;
  transform: none !important;
}

/* 会話の本文は、台本に入れた改行をそのまま守る。 */
.kinugawa-story-scene .kinugawa-message-text {
  white-space: pre-line;
}


/* ── 危険度の最上位は赤い MAX ────────────────────────────────────────
   星五つは他の段と見分けが付きにくい。最上位だけ赤い MAX に替える。
   幅は字間で星五つと同じ五文字分に合わせ、並んだときに端が揃うようにする。
   （ＭＡＸ3文字 + 字間1em×3 − 末尾の1em = 5文字分） */
.status-panel .cheat-actions > button em.cheat-rate > b.cheat-rate-max {
  color: #ff5563;
  font-weight: inherit;
  letter-spacing: 1em;
  margin-right: -1em;
  text-shadow: 0 0 0.5em rgba(255, 64, 84, 0.6);
}

.status-panel .cheat-actions > button.used:not(.active) em.cheat-rate > b.cheat-rate-max {
  color: #b8aebd;
  text-shadow: none;
}

/* 押した時点で命取りと分かるよう、板そのものを赤黒くする。
   使える状態の光の走りはそのまま残し、色だけ紫から赤へ寄せる。 */
.status-panel .cheat-actions > button.danger-max {
  border-color: rgba(178, 96, 108, 0.58);
  border-left-color: #8e2230;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.035), transparent 36%),
    linear-gradient(145deg, #2c1417, #130709);
}

.status-panel .cheat-actions > button.danger-max.ready {
  border-color: #c0707c;
  border-left-color: #c6394c;
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.32) 45%, transparent 57%) -180% 0 / 68% 100% no-repeat,
    linear-gradient(145deg, #6d1b26, #250a0d 58%, #120708);
  box-shadow:
    inset 0 0 0 1px rgba(224, 150, 158, 0.2),
    0 0 calc(1 * var(--shell-vw)) rgba(226, 66, 88, 0.34);
}

.status-panel .cheat-actions > button.danger-max.ready > i {
  color: #e8a7ae;
  box-shadow: 0 0 calc(0.65 * var(--shell-vw)) rgba(205, 74, 92, 0.34);
}

.status-panel .cheat-actions > button.danger-max.ready:hover,
.status-panel .cheat-actions > button.danger-max.ready:focus-visible {
  border-left-color: #e04a5d;
}


/* ── 帯を出さない知らせ（積み込み成功） ────────────────────────────
   配牌のたびに出るので、帯・背景・光線・巨大な漢字は出さない。
   透けた画面の中央に、金文字だけを短く置く。
   字の形とグラデーションの切り抜きは、和了の大きな字と同じ作り。 */
.cheat-cutin.plain {
  pointer-events: none;
}

.cheat-cutin.plain :is(
  .cheat-cutin-backdrop,
  .cheat-cutin-rays,
  .cheat-cutin-slashes,
  .cheat-cutin-symbol
) {
  display: none;
}

.cheat-cutin.plain .cheat-cutin-band {
  /* 字が枠より広いと右が切れる。枠のほうを画面幅で止めておく。 */
  width: min(max-content, calc(86 * var(--shell-vw)));
  max-width: calc(86 * var(--shell-vw));
  min-height: 0;
  /* 帯を基準に字を縮める仕組みはやめる。帯そのものを出さないため。 */
  container-type: normal;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.cheat-cutin.plain .cheat-cutin-band > strong {
  /* 「積み込み成功！」のような短い文は大きく、案内のような長い文は
     字数ぶん小さくする。それでも収まらなければ折り返す（切らない）。 */
  font-size: min(
    clamp(40px, calc(7 * var(--shell-vw)), 134px),
    calc(78 * var(--shell-vw) / var(--cutin-name-chars, 8))
  );
  white-space: normal;
  line-height: 1.25;
  overflow-wrap: anywhere;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #fff6cf 0%, #f6d978 34%, #cf9d2c 50%, #f9e6a3 66%, #b97f1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0;
  text-shadow: none;
  filter: drop-shadow(0 0.05em 0 #1a0a16) drop-shadow(0 0 0.35em rgba(0, 0, 0, 0.6));
}

/* ── アタリ牌が出たのに受けられないときの一言 ────────────────────────
   金は「こちらの仕掛けが通った」ときの色なので、こちらは銀にする。
   和了画面の「満貫未満」と同じ銀。 */
.cheat-cutin.plain.ron-blocked .cheat-cutin-band > strong {
  background-image: linear-gradient(180deg, #ffffff 0%, #dfe3ea 34%, #9aa3ae 50%, #eef1f5 66%, #7d8792 100%);
}

/* ── 場風も出す ──────────────────────────────────────────────────────
   自風だけだと、南家の局で南が役になる理由が画面から読み取れない。
   場風は三戦を通して東。自風より控えめの大きさで、上に一行置く。 */
.wind-box {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "round round"
    "label seat";
  align-items: baseline;
  justify-content: center;
  column-gap: calc(0.25 * var(--shell-vw));
}

.wind-box > .round-wind {
  grid-area: round;
  color: #cbb6d8 !important;
  font-size: clamp(13px, calc(1 * var(--shell-vw)), 20px) !important;
  letter-spacing: 0.1em;
}

.wind-box > span {
  grid-area: label;
}

.wind-box > #player-wind {
  grid-area: seat;
}

/* ── 立直の案内テロップ ──────────────────────────────────────────────
   立直は「立直を押してから宣言牌を選ぶ」の二手。押しただけで待たされると、
   何をすればいいのか分からない。手牌のすぐ上に小さく置く。
   画面の真ん中を覆わず、牌にも重ならない。 */
.riichi-telop {
  margin: 0;
  padding: clamp(1px, calc(0.12 * var(--shell-vw)), 3px) clamp(6px, calc(0.6 * var(--shell-vw)), 12px);
  border: 1px solid rgba(219, 196, 233, 0.5);
  border-radius: 999px;
  background: rgba(10, 6, 14, 0.78);
  color: #e7d9f0;
  font-family: var(--ui-font);
  font-size: clamp(11px, calc(0.78 * var(--shell-vw)), 16px);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.3;
  white-space: nowrap;
  text-shadow: 0 1px 0 #000;
  box-shadow: 0 0 calc(0.6 * var(--shell-vw)) rgba(158, 95, 194, 0.5);
  animation: riichi-telop-in 0.18s ease-out both;
}

@keyframes riichi-telop-in {
  from { opacity: 0; translate: 0 4px; }
  to { opacity: 1; translate: 0 0; }
}

/* ── 北斗のリーチ棒で立直したときの掛け声 ──────────────────────────
   「お前の命は／あと3秒」の二行。長いので、いちばん長い行の字数で縮める。
   立直の二文字と同じ大きさのままだと画面から溢れる。 */
.riichi-effect.hokuto-call .riichi-effect-copy strong {
  /* 台本の改行をそのまま守る。 */
  white-space: pre-line;
  font-size: min(
    clamp(48px, calc(9 * var(--shell-vw)), 170px),
    calc(80 * var(--shell-vw) / var(--riichi-call-chars, 6))
  );
  line-height: 1.12;
  letter-spacing: 0.06em;
  text-indent: 0;
}