/* ============================================================
   LOSTZONE Manual Tester - Animation & Effect Styles (Part 2)
   ============================================================ */

/* ============================================================
   \u30c0\u30a4\u30b9\u30ed\u30fc\u30eb\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3(\u30c9\u30c3\u30c8\u30bf\u30a4\u30d7)
   ============================================================ */
.dice-roll-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  pointer-events: none;
  display: flex;
  gap: 20px;
}

.dice-cube {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  animation: diceRoll 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

@keyframes diceRoll {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.3);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  70% {
    transform: rotateX(1080deg) rotateY(1440deg) rotateZ(720deg) scale(1.1);
  }
  85% {
    transform: rotateX(1440deg) rotateY(1800deg) rotateZ(900deg) scale(1);
  }
  100% {
    transform: rotateX(1440deg) rotateY(1800deg) rotateZ(900deg) scale(1);
    opacity: 1;
  }
}

.dice-face {
  position: absolute;
  width: 100px;
  height: 100px;
  background: linear-gradient(145deg, #ffffff, #e0e0e0);
  border: 3px solid #333;
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
  padding: 10px;
  box-shadow: 
    inset 0 4px 8px rgba(255, 255, 255, 0.6),
    inset 0 -4px 8px rgba(0, 0, 0, 0.3),
    0 8px 16px rgba(0, 0, 0, 0.5);
}

.dice-face.front  { transform: translateZ(50px); }
.dice-face.back   { transform: rotateY(180deg) translateZ(50px); }
.dice-face.right  { transform: rotateY(90deg) translateZ(50px); }
.dice-face.left   { transform: rotateY(-90deg) translateZ(50px); }
.dice-face.top    { transform: rotateX(90deg) translateZ(50px); }
.dice-face.bottom { transform: rotateX(-90deg) translateZ(50px); }

.dice-dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #1a1a1a, #000);
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.3);
}

.dice-face.face-1 .dice-dot:nth-child(5) { display: block; }
.dice-face.face-1 .dice-dot:not(:nth-child(5)) { display: none; }

.dice-face.face-2 .dice-dot:nth-child(1),
.dice-face.face-2 .dice-dot:nth-child(9) { display: block; }
.dice-face.face-2 .dice-dot:not(:nth-child(1)):not(:nth-child(9)) { display: none; }

.dice-face.face-3 .dice-dot:nth-child(1),
.dice-face.face-3 .dice-dot:nth-child(5),
.dice-face.face-3 .dice-dot:nth-child(9) { display: block; }
.dice-face.face-3 .dice-dot:not(:nth-child(1)):not(:nth-child(5)):not(:nth-child(9)) { display: none; }

.dice-face.face-4 .dice-dot:nth-child(1),
.dice-face.face-4 .dice-dot:nth-child(3),
.dice-face.face-4 .dice-dot:nth-child(7),
.dice-face.face-4 .dice-dot:nth-child(9) { display: block; }
.dice-face.face-4 .dice-dot:not(:nth-child(1)):not(:nth-child(3)):not(:nth-child(7)):not(:nth-child(9)) { display: none; }

.dice-face.face-5 .dice-dot:nth-child(1),
.dice-face.face-5 .dice-dot:nth-child(3),
.dice-face.face-5 .dice-dot:nth-child(5),
.dice-face.face-5 .dice-dot:nth-child(7),
.dice-face.face-5 .dice-dot:nth-child(9) { display: block; }
.dice-face.face-5 .dice-dot:not(:nth-child(1)):not(:nth-child(3)):not(:nth-child(5)):not(:nth-child(7)):not(:nth-child(9)) { display: none; }

.dice-face.face-6 .dice-dot:nth-child(1),
.dice-face.face-6 .dice-dot:nth-child(3),
.dice-face.face-6 .dice-dot:nth-child(4),
.dice-face.face-6 .dice-dot:nth-child(6),
.dice-face.face-6 .dice-dot:nth-child(7),
.dice-face.face-6 .dice-dot:nth-child(9) { display: block; }
.dice-face.face-6 .dice-dot:not(:nth-child(1)):not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(6)):not(:nth-child(7)):not(:nth-child(9)) { display: none; }

/* ============================================================
   \u30c0\u30a4\u30b9\u7d50\u679c\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7
   ============================================================ */
.dice-result-success,
.dice-result-miss {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 96px;
  font-weight: 900;
  letter-spacing: 8px;
  z-index: 10001;
  pointer-events: none;
  animation: resultPopup 1s ease-out forwards;
  text-transform: uppercase;
  will-change: transform, opacity;
}

.dice-result-success {
  color: var(--accent);
  text-shadow: 
    0 0 30px rgba(74, 168, 255, 1),
    0 0 60px rgba(74, 168, 255, 0.8),
    0 0 90px rgba(74, 168, 255, 0.6),
    0 8px 20px rgba(0, 0, 0, 0.8);
}

.dice-result-miss {
  color: var(--danger);
  text-shadow: 
    0 0 30px rgba(255, 92, 124, 1),
    0 0 60px rgba(255, 92, 124, 0.8),
    0 0 90px rgba(255, 92, 124, 0.6),
    0 8px 20px rgba(0, 0, 0, 0.8);
}

@keyframes resultPopup {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(-10deg);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3) rotate(5deg);
  }
  45% {
    transform: translate(-50%, -50%) scale(1.1) rotate(-2deg);
  }
  65% {
    transform: translate(-50%, -50%) scale(1.15) rotate(1deg);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -60%) scale(0.8) rotate(0deg);
  }
}

/* ============================================================
   BOSS\u30c0\u30e1\u30fc\u30b8\u30fb\u30df\u30b9\u30fb\u30d6\u30ed\u30c3\u30af\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7
   ============================================================ */
.boss-damage-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 80px;
  font-weight: 900;
  color: var(--danger);
  text-shadow: 
    0 0 30px rgba(255, 92, 124, 1),
    0 0 60px rgba(255, 92, 124, 0.6),
    0 8px 16px rgba(0, 0, 0, 0.8);
  z-index: 9999;
  pointer-events: none;
  animation: damagePopup 1.8s ease-out forwards;
  letter-spacing: 4px;
  will-change: transform, opacity;
}

@keyframes damagePopup {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(-10deg);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.8) rotate(5deg);
  }
  30% {
    transform: translate(-50%, -50%) scale(1.5) rotate(-2deg);
  }
  45% {
    transform: translate(-50%, -50%) scale(1.6) rotate(1deg);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -60%) scale(1.4) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.8) rotate(0deg);
  }
}

.boss-miss-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 72px;
  font-weight: 900;
  color: #666;
  text-shadow: 
    0 0 20px rgba(100, 100, 100, 0.8),
    0 4px 8px rgba(0, 0, 0, 0.6);
  z-index: 9999;
  pointer-events: none;
  animation: missPopup 1.5s ease-out forwards;
  letter-spacing: 8px;
  will-change: transform, opacity;
}

@keyframes missPopup {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
  40% {
    transform: translate(-50%, -50%) scale(1.1) translateX(-10px);
  }
  60% {
    transform: translate(-50%, -50%) scale(1.1) translateX(10px);
  }
  80% {
    opacity: 0.8;
    transform: translate(-50%, -70%) scale(0.9);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.6);
  }
}

.boss-blocked-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 56px;
  font-weight: 900;
  color: var(--warn);
  text-shadow: 
    0 0 20px rgba(255, 211, 107, 0.9),
    0 0 40px rgba(255, 211, 107, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.6);
  z-index: 9999;
  pointer-events: none;
  animation: blockedPopup 1.6s ease-out forwards;
  letter-spacing: 2px;
  will-change: transform, opacity;
}

@keyframes blockedPopup {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.4);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -65%) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -95%) scale(0.7);
  }
}

/* ============================================================
   \u30b9\u30e9\u30c3\u30b7\u30e5\u30a8\u30d5\u30a7\u30af\u30c8
   ============================================================ */
.slash-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
  transform: rotate(var(--slash-angle, 0deg));
  will-change: transform;
}

.slash-line {
  position: absolute;
  top: 50%;
  left: -20%;
  width: 140%;
  height: 4px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.9) 20%,
    rgba(255, 50, 50, 0.9) 40%,
    rgba(255, 200, 50, 0.9) 60%,
    rgba(255, 255, 255, 0.9) 80%,
    transparent 100%
  );
  box-shadow: 0 0 10px rgba(255, 50, 50, 0.8),
              0 0 20px rgba(255, 100, 50, 0.6);
  animation: slash-sweep 0.5s ease-out forwards;
  opacity: 0;
  will-change: transform, opacity;
}

.slash-line:nth-child(2) {
  top: calc(50% - 15px);
  height: 3px;
}

.slash-line:nth-child(3) {
  top: calc(50% + 15px);
  height: 3px;
}

@keyframes slash-sweep {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  20% {
    opacity: 1;
  }
  50% {
    opacity: 1;
    transform: translateX(0);
  }
  70% {
    opacity: 0.6;
    transform: translateX(20%);
  }
  100% {
    opacity: 0;
    transform: translateX(50%);
  }
}

/* ============================================================
   \u30db\u30e9\u30fc\u30a8\u30d5\u30a7\u30af\u30c8\u30b3\u30f3\u30c6\u30ca
   ============================================================ */
.horror-effect-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
}

/* \u4e2d\u592e\u304b\u3089\u5e83\u304c\u308b\u8d64\u9ed2\u3044\u5149 */
.horror-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  transform: translate(-50%, -50%) scale(0.1);
  background: radial-gradient(circle, 
    rgba(150, 0, 0, 0.7) 0%,
    rgba(100, 0, 0, 0.5) 15%,
    rgba(50, 0, 0, 0.3) 30%,
    transparent 50%
  );
  animation: horrorFlash 2.5s ease-out;
  will-change: transform, opacity;
}

@keyframes horrorFlash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  35% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.2);
  }
  50% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.4);
  }
  70% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1.6);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2);
  }
}

/* \u753b\u9762\u5168\u4f53\u3092\u899a\u3059\u8d64\u3044\u30f4\u30a3\u30cd\u30c3\u30c8 */
.horror-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center,
    transparent 20%,
    rgba(100, 0, 0, 0.4) 60%,
    rgba(50, 0, 0, 0.7) 85%,
    rgba(0, 0, 0, 0.9) 100%
  );
  animation: horrorVignette 2.5s ease-in-out;
}

@keyframes horrorVignette {
  0% { 
    opacity: 0;
  }
  20% { 
    opacity: 0.3;
  }
  40% { 
    opacity: 1;
  }
  44% { 
    opacity: 0.5;
  }
  50% { 
    opacity: 0.9;
  }
  60% { 
    opacity: 0.7;
  }
  70% { 
    opacity: 0.4;
  }
  80% { 
    opacity: 0.2;
  }
  90% { 
    opacity: 0.1;
  }
  100% { 
    opacity: 0;
  }
}

/* \u56db\u9685\u304b\u3089\u8ffd\u308b\u6697\u3044\u5f71\uff08\u7259\uff09 */
.horror-fang {
  position: absolute;
  background: linear-gradient(45deg, 
    rgba(0, 0, 0, 1) 0%,
    rgba(30, 0, 0, 0.95) 30%,
    rgba(80, 0, 0, 0.7) 60%,
    transparent 100%
  );
  filter: blur(8px);
  clip-path: polygon(
    0% 0%,
    100% 0%,
    90% 20%,
    80% 10%,
    70% 25%,
    60% 15%,
    50% 30%,
    40% 20%,
    30% 35%,
    20% 25%,
    10% 40%,
    0% 30%
  );
  will-change: transform, opacity;
}

.horror-fang.top-left {
  top: -20%;
  left: -20%;
  width: 60%;
  height: 60%;
  transform-origin: bottom right;
  animation: fangAttackTopLeft 2.5s ease-in-out;
}

.horror-fang.top-right {
  top: -20%;
  right: -20%;
  width: 60%;
  height: 60%;
  transform-origin: bottom left;
  animation: fangAttackTopRight 2.5s ease-in-out;
}

.horror-fang.bottom-left {
  bottom: -20%;
  left: -20%;
  width: 60%;
  height: 60%;
  transform-origin: top right;
  animation: fangAttackBottomLeft 2.5s ease-in-out;
}

.horror-fang.bottom-right {
  bottom: -20%;
  right: -20%;
  width: 60%;
  height: 60%;
  transform-origin: top left;
  animation: fangAttackBottomRight 2.5s ease-in-out;
}

@keyframes fangAttackTopLeft {
  0% {
    transform: translate(0, 0) scale(0.3) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  35% {
    transform: translate(35%, 35%) scale(1.3) rotate(10deg);
    opacity: 1;
  }
  50% {
    transform: translate(40%, 40%) scale(1.4) rotate(12deg);
    opacity: 0.95;
  }
  70% {
    transform: translate(30%, 30%) scale(1.1) rotate(8deg);
    opacity: 0.6;
  }
  85% {
    transform: translate(15%, 15%) scale(0.7) rotate(4deg);
    opacity: 0.3;
  }
  100% {
    transform: translate(0, 0) scale(0.3) rotate(0deg);
    opacity: 0;
  }
}

@keyframes fangAttackTopRight {
  0% {
    transform: translate(0, 0) scale(0.3) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  35% {
    transform: translate(-35%, 35%) scale(1.3) rotate(-10deg);
    opacity: 1;
  }
  50% {
    transform: translate(-40%, 40%) scale(1.4) rotate(-12deg);
    opacity: 0.95;
  }
  70% {
    transform: translate(-30%, 30%) scale(1.1) rotate(-8deg);
    opacity: 0.6;
  }
  85% {
    transform: translate(-15%, 15%) scale(0.7) rotate(-4deg);
    opacity: 0.3;
  }
  100% {
    transform: translate(0, 0) scale(0.3) rotate(0deg);
    opacity: 0;
  }
}

@keyframes fangAttackBottomLeft {
  0% {
    transform: translate(0, 0) scale(0.3) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  35% {
    transform: translate(35%, -35%) scale(1.3) rotate(-10deg);
    opacity: 1;
  }
  50% {
    transform: translate(40%, -40%) scale(1.4) rotate(-12deg);
    opacity: 0.95;
  }
  70% {
    transform: translate(30%, -30%) scale(1.1) rotate(-8deg);
    opacity: 0.6;
  }
  85% {
    transform: translate(15%, -15%) scale(0.7) rotate(-4deg);
    opacity: 0.3;
  }
  100% {
    transform: translate(0, 0) scale(0.3) rotate(0deg);
    opacity: 0;
  }
}

@keyframes fangAttackBottomRight {
  0% {
    transform: translate(0, 0) scale(0.3) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  35% {
    transform: translate(-35%, -35%) scale(1.3) rotate(10deg);
    opacity: 1;
  }
  50% {
    transform: translate(-40%, -40%) scale(1.4) rotate(12deg);
    opacity: 0.95;
  }
  70% {
    transform: translate(-30%, -30%) scale(1.1) rotate(8deg);
    opacity: 0.6;
  }
  85% {
    transform: translate(-15%, -15%) scale(0.7) rotate(4deg);
    opacity: 0.3;
  }
  100% {
    transform: translate(0, 0) scale(0.3) rotate(0deg);
    opacity: 0;
  }
}

/* \u30b0\u30ea\u30c3\u30c1\u30a8\u30d5\u30a7\u30af\u30c8 */
.horror-glitch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 0, 0, 0.03) 0px,
    rgba(0, 255, 0, 0.03) 2px,
    rgba(0, 0, 255, 0.03) 4px,
    transparent 6px
  );
  animation: glitchEffect 2.5s steps(10);
  mix-blend-mode: overlay;
  will-change: transform, opacity;
}

@keyframes glitchEffect {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  10% {
    transform: translate(-8px, 4px) scale(1.01);
    opacity: 0.7;
  }
  15% {
    transform: translate(6px, -6px) scale(0.99);
    opacity: 0.9;
  }
  20% {
    transform: translate(-4px, 8px) scale(1.02);
    opacity: 0.6;
  }
  25% {
    transform: translate(10px, -4px) scale(0.98);
    opacity: 0.8;
  }
  30% {
    transform: translate(-6px, 6px) scale(1.01);
    opacity: 0.5;
  }
  35% {
    transform: translate(8px, -8px) scale(0.99);
    opacity: 0.7;
  }
  40% {
    transform: translate(-10px, 4px) scale(1.02);
    opacity: 0.4;
  }
  45% {
    transform: translate(4px, -6px) scale(0.98);
    opacity: 0.6;
  }
  50% {
    transform: translate(-8px, 8px) scale(1.01);
    opacity: 0.3;
  }
  60% {
    transform: translate(6px, -4px) scale(0.99);
    opacity: 0.4;
  }
  70% {
    transform: translate(-4px, 6px) scale(1);
    opacity: 0.2;
  }
  80% {
    transform: translate(2px, -2px) scale(1);
    opacity: 0.1;
  }
  90% {
    transform: translate(-2px, 2px) scale(1);
    opacity: 0.05;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
}

/* \u30db\u30e9\u30fc\u30c6\u30ad\u30b9\u30c8 */
.horror-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 72px;
  font-weight: 900;
  color: rgba(180, 0, 0, 0.9);
  text-shadow: 
    0 0 40px rgba(255, 0, 0, 1),
    0 0 80px rgba(180, 0, 0, 0.8),
    0 0 120px rgba(120, 0, 0, 0.6),
    4px 4px 8px rgba(0, 0, 0, 0.9);
  z-index: 100000;
  pointer-events: none;
  animation: horrorTextAppear 2.5s ease-out;
  letter-spacing: 8px;
  font-family: 'Impact', 'Arial Black', sans-serif;
  text-transform: uppercase;
  will-change: transform, opacity, filter;
}

@keyframes horrorTextAppear {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(-15deg);
    filter: blur(20px);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.5) rotate(5deg);
    filter: blur(0px);
  }
  30% {
    transform: translate(-50%, -50%) scale(1.3) rotate(-3deg);
  }
  40% {
    transform: translate(-50%, -50%) scale(1.4) rotate(2deg);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.35) rotate(0deg);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -55%) scale(1.2) rotate(0deg);
  }
  85% {
    opacity: 0.6;
    transform: translate(-50%, -60%) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -70%) scale(0.7) rotate(0deg);
    filter: blur(10px);
  }
}


/* ============================================================
   \u30e2\u30d0\u30a4\u30eb\u6700\u9069\u5316 - iPad Pro\u5c02\u7528 (1024px\uff5e1366px)
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1366px) {
  /* \u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u3068\u540c\u3058\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u7dad\u6301\u3001\u30b5\u30a4\u30ba\u306e\u307f\u5fae\u8abf\u6574 */
  
  /* \u30c0\u30a4\u30b9\u30ed\u30fc\u30eb\u306e\u30b5\u30a4\u30ba\u8abf\u6574 */
  .dice-cube {
    width: 90px;
    height: 90px;
  }

  .dice-face {
    width: 90px;
    height: 90px;
    gap: 5px;
    padding: 9px;
  }

  .dice-face.front  { transform: translateZ(45px); }
  .dice-face.back   { transform: rotateY(180deg) translateZ(45px); }
  .dice-face.right  { transform: rotateY(90deg) translateZ(45px); }
  .dice-face.left   { transform: rotateY(-90deg) translateZ(45px); }
  .dice-face.top    { transform: rotateX(90deg) translateZ(45px); }
  .dice-face.bottom { transform: rotateX(-90deg) translateZ(45px); }

  /* \u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u306e\u30b5\u30a4\u30ba\u8abf\u6574 */
  .dice-result-success,
  .dice-result-miss {
    font-size: 80px;
  }

  .boss-damage-popup {
    font-size: 68px;
  }

  .boss-miss-popup {
    font-size: 60px;
  }

  .boss-blocked-popup {
    font-size: 48px;
  }

  .horror-text {
    font-size: 52px;
  }
}


/* ============================================================
   \u30e2\u30d0\u30a4\u30eb\u6700\u9069\u5316 - \u30bf\u30d6\u30ec\u30c3\u30c8\u6a2a\u753b\u9762 (1024px\u4ee5\u4e0b)
   ============================================================ */
@media (max-width: 1024px) {
  /* \u30c0\u30a4\u30b9\u30ed\u30fc\u30eb\u306e\u30b5\u30a4\u30ba\u8abf\u6574 */
  .dice-cube {
    width: 90px;
    height: 90px;
  }

  .dice-face {
    width: 90px;
    height: 90px;
  }

  .dice-face.front,
  .dice-face.back,
  .dice-face.right,
  .dice-face.left,
  .dice-face.top,
  .dice-face.bottom {
    transform: translateZ(45px);
  }

  .dice-face.back { transform: rotateY(180deg) translateZ(45px); }
  .dice-face.right { transform: rotateY(90deg) translateZ(45px); }
  .dice-face.left { transform: rotateY(-90deg) translateZ(45px); }
  .dice-face.top { transform: rotateX(90deg) translateZ(45px); }
  .dice-face.bottom { transform: rotateX(-90deg) translateZ(45px); }

  /* \u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u306e\u30b5\u30a4\u30ba\u8abf\u6574 */
  .dice-result-success,
  .dice-result-miss {
    font-size: 80px;
  }

  .boss-damage-popup {
    font-size: 68px;
  }

  .boss-miss-popup {
    font-size: 60px;
  }

  .boss-blocked-popup {
    font-size: 48px;
  }

  .horror-text {
    font-size: 60px;
  }
}

/* ============================================================
   \u30e2\u30d0\u30a4\u30eb\u6700\u9069\u5316 - \u30b9\u30de\u30db\u6a2a\u30fb\u30bf\u30d6\u30ec\u30c3\u30c8\u7e26 (768px\u4ee5\u4e0b)
   ============================================================ */
@media (max-width: 768px) {
  /* \u30c0\u30a4\u30b9\u30ed\u30fc\u30eb\u3092\u7c21\u7565\u5316 */
  .dice-cube {
    width: 80px;
    height: 80px;
    animation: diceRollSimple 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  /* \u30b7\u30f3\u30d7\u30eb\u5316\u3057\u305f\u30c0\u30a4\u30b9\u30ed\u30fc\u30eb\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 */
  @keyframes diceRollSimple {
    0% {
      transform: rotateX(0deg) rotateY(0deg) scale(0.3);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    70% {
      transform: rotateX(720deg) rotateY(1080deg) scale(1.1);
    }
    100% {
      transform: rotateX(720deg) rotateY(1080deg) scale(1);
      opacity: 1;
    }
  }

  .dice-face {
    width: 80px;
    height: 80px;
    gap: 5px;
    padding: 8px;
  }

  .dice-face.front,
  .dice-face.back,
  .dice-face.right,
  .dice-face.left,
  .dice-face.top,
  .dice-face.bottom {
    transform: translateZ(40px);
  }

  .dice-face.back { transform: rotateY(180deg) translateZ(40px); }
  .dice-face.right { transform: rotateY(90deg) translateZ(40px); }
  .dice-face.left { transform: rotateY(-90deg) translateZ(40px); }
  .dice-face.top { transform: rotateX(90deg) translateZ(40px); }
  .dice-face.bottom { transform: rotateX(-90deg) translateZ(40px); }

  /* \u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u77ed\u7e2e */
  .dice-result-success,
  .dice-result-miss {
    font-size: 64px;
    animation: resultPopup 0.8s ease-out forwards;
  }

  .boss-damage-popup {
    font-size: 56px;
    animation: damagePopup 1.4s ease-out forwards;
  }

  .boss-miss-popup {
    font-size: 48px;
    animation: missPopup 1.2s ease-out forwards;
  }

  .boss-blocked-popup {
    font-size: 40px;
    animation: blockedPopup 1.2s ease-out forwards;
  }

  /* \u30db\u30e9\u30fc\u30a8\u30d5\u30a7\u30af\u30c8\u3092\u7c21\u7565\u5316 */
  .horror-text {
    font-size: 48px;
    animation: horrorTextAppear 2s ease-out;
  }

  .horror-flash {
    animation: horrorFlash 2s ease-out;
  }

  .horror-vignette {
    animation: horrorVignette 2s ease-in-out;
  }

  .horror-fang.top-left,
  .horror-fang.top-right,
  .horror-fang.bottom-left,
  .horror-fang.bottom-right {
    animation-duration: 2s;
  }

  .horror-glitch {
    animation: glitchEffect 2s steps(8);
  }

  /* \u30b7\u30f3\u30d7\u30eb\u5316\u3057\u305f\u30b0\u30ea\u30c3\u30c1\u30a8\u30d5\u30a7\u30af\u30c8 */
  @keyframes glitchEffect {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    15% {
      transform: translate(-6px, 4px);
      opacity: 0.8;
    }
    30% {
      transform: translate(6px, -4px);
      opacity: 0.6;
    }
    50% {
      transform: translate(-4px, 6px);
      opacity: 0.4;
    }
    70% {
      transform: translate(4px, -6px);
      opacity: 0.2;
    }
    100% {
      transform: translate(0, 0);
      opacity: 0;
    }
  }
}

/* ============================================================
   \u30e2\u30d0\u30a4\u30eb\u6700\u9069\u5316 - \u30b9\u30de\u30db\u6a2a\u753b\u9762\u5c02\u7528 (768px\u4ee5\u4e0b & landscape)
   ============================================================ */
@media (max-width: 768px) and (orientation: landscape) {
  /* \u6a2a\u753b\u9762\u3067\u306f\u30c0\u30a4\u30b9\u3092\u3055\u3089\u306b\u7e2e\u5c0f */
  .dice-cube {
    width: 70px;
    height: 70px;
  }

  .dice-face {
    width: 70px;
    height: 70px;
    gap: 4px;
    padding: 6px;
  }

  .dice-face.front,
  .dice-face.back,
  .dice-face.right,
  .dice-face.left,
  .dice-face.top,
  .dice-face.bottom {
    transform: translateZ(35px);
  }

  .dice-face.back { transform: rotateY(180deg) translateZ(35px); }
  .dice-face.right { transform: rotateY(90deg) translateZ(35px); }
  .dice-face.left { transform: rotateY(-90deg) translateZ(35px); }
  .dice-face.top { transform: rotateX(90deg) translateZ(35px); }
  .dice-face.bottom { transform: rotateX(-90deg) translateZ(35px); }

  /* \u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u306e\u9ad8\u3055\u65b9\u5411\u79fb\u52d5\u3092\u6291\u5236 */
  @keyframes resultPopup {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.5);
    }
    25% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.2);
    }
    80% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -55%) scale(0.8);
    }
  }

  @keyframes damagePopup {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.3);
    }
    15% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.5);
    }
    75% {
      opacity: 1;
      transform: translate(-50%, -55%) scale(1.2);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -70%) scale(0.8);
    }
  }

  .horror-text {
    font-size: 40px;
  }
}

/* ============================================================
   \u30e2\u30d0\u30a4\u30eb\u6700\u9069\u5316 - \u5c0f\u578b\u30b9\u30de\u30db (480px\u4ee5\u4e0b)
   ============================================================ */
@media (max-width: 480px) {
  .dice-cube {
    width: 70px;
    height: 70px;
  }

  .dice-face {
    width: 70px;
    height: 70px;
  }

  .dice-result-success,
  .dice-result-miss {
    font-size: 56px;
  }

  .boss-damage-popup {
    font-size: 48px;
  }

  .boss-miss-popup {
    font-size: 40px;
  }

  .boss-blocked-popup {
    font-size: 36px;
  }

  .horror-text {
    font-size: 40px;
  }

  /* \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u3055\u3089\u306b\u77ed\u7e2e */
  .dice-cube {
    animation-duration: 0.9s;
  }

  .dice-result-success,
  .dice-result-miss {
    animation-duration: 0.7s;
  }

  .boss-damage-popup {
    animation-duration: 1.2s;
  }

  .boss-miss-popup,
  .boss-blocked-popup {
    animation-duration: 1s;
  }

  .horror-text,
  .horror-flash,
  .horror-vignette {
    animation-duration: 1.8s;
  }

  .horror-fang.top-left,
  .horror-fang.top-right,
  .horror-fang.bottom-left,
  .horror-fang.bottom-right {
    animation-duration: 1.8s;
  }
}

/* ============================================================
   \u30e2\u30d0\u30a4\u30eb\u6700\u9069\u5316 - \u8d85\u5c0f\u578b\u30b9\u30de\u30db (360px\u4ee5\u4e0b)
   ============================================================ */
@media (max-width: 360px) {
  .dice-cube {
    width: 60px;
    height: 60px;
  }

  .dice-face {
    width: 60px;
    height: 60px;
    gap: 3px;
    padding: 5px;
  }

  .dice-face.front,
  .dice-face.back,
  .dice-face.right,
  .dice-face.left,
  .dice-face.top,
  .dice-face.bottom {
    transform: translateZ(30px);
  }

  .dice-face.back { transform: rotateY(180deg) translateZ(30px); }
  .dice-face.right { transform: rotateY(90deg) translateZ(30px); }
  .dice-face.left { transform: rotateY(-90deg) translateZ(30px); }
  .dice-face.top { transform: rotateX(90deg) translateZ(30px); }
  .dice-face.bottom { transform: rotateX(-90deg) translateZ(30px); }

  .dice-result-success,
  .dice-result-miss {
    font-size: 48px;
  }

  .boss-damage-popup {
    font-size: 40px;
  }

  .boss-miss-popup {
    font-size: 36px;
  }

  .boss-blocked-popup {
    font-size: 32px;
  }

  .horror-text {
    font-size: 36px;
  }
}