/* ===== えもじ王国 オープニング ===== */
#screen-opening {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 70% 20%, rgba(255,244,214,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 55%, rgba(200,220,255,.8), transparent 60%),
    radial-gradient(1px 1px at 40% 75%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 10% 60%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 55% 40%, rgba(255,244,214,.6), transparent 60%),
    linear-gradient(180deg, #101026 0%, #1a1a3e 55%, #241f4a 100%);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
#screen-opening.op-fadeout { opacity: 0; transition: opacity .6s ease; }

#op-skip {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 2;
  font: inherit;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 6px 14px;
}

#op-stage {
  position: relative;
  width: min(92vw, 560px);
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
}

.op-lines { display: flex; flex-direction: column; gap: 10px; }
.op-line {
  margin: 0;
  color: #f4efdf;
  font-size: clamp(15px, 4.2vw, 20px);
  line-height: 1.9;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  opacity: 0;
  animation: op-line-in 1.2s ease forwards;
}
.op-tapstart { animation: op-tap-blink 1.6s ease-in-out infinite; opacity: 1; }
@keyframes op-line-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes op-tap-blink { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* 二王 */
.op-kings { display: flex; gap: 14vw; font-size: clamp(44px, 13vw, 76px); }
.op-king { opacity: 0; animation: op-king-in 1.6s ease forwards; filter: drop-shadow(0 0 18px rgba(255,225,120,.35)); }
.op-king-sun { animation-delay: .2s; }
.op-king-moon { animation-delay: .9s; filter: drop-shadow(0 0 18px rgba(140,150,255,.4)); }
@keyframes op-king-in { from { opacity: 0; transform: translateY(-16px) scale(.7); } to { opacity: 1; transform: none; } }

/* 流れる絵文字 */
.op-rain { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.op-drop {
  position: absolute;
  top: -12%;
  font-size: clamp(20px, 6vw, 30px);
  opacity: 0;
  animation: op-drop-fall 5.2s linear infinite;
}
@keyframes op-drop-fall {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: .85; }
  80% { opacity: .6; }
  100% { transform: translateY(78vh); opacity: 0; }
}

/* ヒナと とびら */
.op-hina-wrap { display: flex; align-items: flex-end; gap: 18px; }
.op-hina { width: clamp(72px, 20vw, 104px); image-rendering: pixelated; animation: op-hina-walk 1s steps(1) infinite; }
.op-door { font-size: clamp(52px, 15vw, 84px); filter: drop-shadow(0 0 14px rgba(255,244,214,.3)); }
@keyframes op-hina-walk { 50% { transform: translateY(-3px); } }

/* ロゴ幕 */
.op-logo-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.op-logo-emoji { font-size: clamp(34px, 9vw, 52px); animation: op-king-in 1s ease both; }
.op-logo {
  margin: 0;
  font-size: clamp(40px, 12vw, 72px);
  letter-spacing: .06em;
  background: linear-gradient(180deg, #fff8e1 20%, #ffd54f 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 12px rgba(0,0,0,.5));
  animation: op-logo-in 1.1s cubic-bezier(0.22, 1.4, 0.36, 1) .25s both;
}
.op-logo-sub { margin: 0; color: rgba(255,255,255,.65); letter-spacing: .5em; font-size: clamp(10px, 2.8vw, 13px); animation: op-line-in 1.2s ease .9s both; }
.op-logo-tap { margin: 18px 0 0; color: rgba(255,255,255,.8); font-size: clamp(12px, 3.4vw, 15px); animation: op-tap-blink 1.6s ease-in-out 1.4s infinite both; }
@keyframes op-logo-in { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .op-line, .op-king, .op-logo, .op-logo-emoji, .op-logo-sub { animation-duration: .01s !important; animation-delay: 0s !important; }
  .op-drop, .op-hina { animation: none !important; opacity: .8; }
}