/* ===== 宇宙の背景(fx_space.js)と単語の嵐(fx_wordstorm.js)の見た目。2026-10-02 オーナー承認の試作A・B =====
   ・動かすのは transform / opacity だけ(低い端末でも合成だけで済むように)。重い描画は canvas 1枚。
   ・resources/ の画像は CSS の url() で書かない(ネイティブアプリでは同梱しないので壊れる)。
     画像はすべて JS が API_BASE を付けた img で入れる。
   ・ログイン画面の入力欄の id・onclick は index.html のまま。ここは見た目だけを上書きする
     (ui-polish.css の #screen-login … より強い #screen-login.lw … で書く)。 */

/* ---------- ログイン画面: 背景 ---------- */
#screen-login.lw { background: #02030a; }
#screen-login.lw .login-bg, #screen-login.lw .space-twinkle { display: none; }
/* 演出の設定でOFF: これまでの静かな背景に戻す */
#screen-login.lw.lw-off { background: radial-gradient(ellipse at 25% 20%, #173666 0%, #0a1227 48%, #070c19 100%); }
#screen-login.lw.lw-off .login-bg, #screen-login.lw.lw-off .space-twinkle { display: block; }
#screen-login.lw-off .lw-world { display: none; }

.lw-world { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#screen-login.lw-shake .lw-world { animation: lwShake 0.55s linear; }
@keyframes lwShake {
  0% { transform: translate(0, 0); } 10% { transform: translate(-11px, 6px); } 20% { transform: translate(9px, -8px); }
  30% { transform: translate(-7px, -5px); } 40% { transform: translate(6px, 7px); } 55% { transform: translate(-4px, 3px); }
  70% { transform: translate(3px, -2px); } 85% { transform: translate(-1px, 1px); } 100% { transform: translate(0, 0); }
}
.lw-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
.lw-vignette { position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(0,0,0,0) 45%, rgba(0,0,10,0.75) 100%); }
.lw-canopy { position: absolute; top: 0; bottom: 0; width: 22px; opacity: 0.55; }
.lw-canopy.l { left: 0; background: linear-gradient(90deg, rgba(0,229,255,0.25), rgba(0,229,255,0)); }
.lw-canopy.r { right: 0; background: linear-gradient(270deg, rgba(0,229,255,0.25), rgba(0,229,255,0)); }
.lw-ships { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
.lw-flash { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0;
  background: radial-gradient(circle at 50% var(--lw-vy, 22%), rgba(255,255,255,0.95), rgba(170,240,255,0.35) 40%, rgba(0,0,0,0) 75%); }
.lw-flash.on { animation: lwFlash 0.5s ease-out; }
@keyframes lwFlash { 0% { opacity: 0; } 12% { opacity: 0.6; } 100% { opacity: 0; } }
.lw-shock { position: absolute; left: 50%; top: var(--lw-vy, 22%); width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border-radius: 50%; opacity: 0; border: 5px solid #00e5ff; }
.lw-shock.m { border-color: #ff2a6d; }
.lw-shock.on { animation: lwShock 0.75s cubic-bezier(.15,.7,.3,1) forwards; }
.lw-shock.m.on { animation-delay: 0.07s; }
@keyframes lwShock { 0% { opacity: 1; transform: scale(0.2); } 100% { opacity: 0; transform: scale(16); } }

/* 機体(ログイン・ホーム共通。fx_space.js makeFlights) */
.sx-ship { position: absolute; left: 0; top: 0; width: 150px; will-change: transform; transform: translate3d(-999px,-999px,0); }
.sx-ship img { position: relative; width: 100%; display: block; z-index: 1; }
.sx-trail { position: absolute; right: 62%; top: 38%; height: 26%; width: 260%; border-radius: 40px; opacity: 0.9;
  background: linear-gradient(90deg, rgba(0,229,255,0), rgba(0,229,255,0.25) 50%, rgba(255,255,255,0.85)); }
.sx-enemy .sx-trail { background: linear-gradient(90deg, rgba(255,42,109,0), rgba(255,42,109,0.3) 50%, rgba(255,220,255,0.85)); }
.lw-pop { position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap; text-align: center; z-index: 15;
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 20px; color: #fff;
  text-shadow: 0 0 10px #00e5ff, 0 2px 0 #000; animation: lwPop 1s ease-out forwards; }
.lw-pop span { display: block; }
.lw-pop small { display: block; font-family: 'Noto Sans JP', sans-serif; font-size: 12px; font-weight: 700; color: #ffd700; }
@keyframes lwPop {
  0% { opacity: 0; transform: translate(-50%,-30%) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%,-80%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%,-190%) scale(1); }
}

/* ---------- ログイン画面: 配置(上にロゴ、下に操縦席の HUD の入力欄) ---------- */
#screen-login.lw .login-content {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch;
  width: 100%; max-width: 460px; min-height: 100%; margin: 0 auto; gap: 10px;
  padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(4px, env(safe-area-inset-bottom, 0px));
}
#screen-login.lw .login-logo {
  flex: 1 0 auto; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none; min-height: 96px; padding-top: 34px;
}
#screen-login.lw .title-story-art, #screen-login.lw .login-mascot { display: none; }
#screen-login.lw .login-logo-main {
  position: relative; font-family: 'Orbitron', sans-serif; font-weight: 900; line-height: 1; letter-spacing: 0.02em;
  font-size: clamp(44px, 15.5vw, 68px);
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; color: #fff; filter: none;
}
#screen-login.lw-slam .login-logo-main { animation: lwSlam 0.42s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes lwSlam { 0% { opacity: 0; transform: scale(5.5); } 55% { opacity: 1; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }
.lw-sub { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.42em; color: #00e5ff;
  margin-top: 6px; text-shadow: 0 0 8px rgba(0,229,255,0.8); transition: opacity 0.4s; }
.lw-tagline { margin-top: 10px; font-weight: 900; font-size: clamp(15px, 4.6vw, 19px); letter-spacing: 0.06em; color: #e8f4ff;
  text-shadow: 0 0 10px rgba(0,229,255,0.9), 0 2px 0 #000; transition: opacity 0.4s; }
.lw-charge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: 'Orbitron', sans-serif;
  font-weight: 900; font-size: 13px; letter-spacing: 0.3em; color: #00e5ff; text-align: center; white-space: nowrap; }
.lw-charge .lw-bar { width: 180px; height: 6px; margin: 8px auto 0; border: 1px solid #00e5ff; border-radius: 3px; overflow: hidden; }
.lw-charge .lw-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #00e5ff, #fff); transform-origin: left; transform: scaleX(0); }
.lw-charge.charging .lw-bar i { transition: transform 0.8s cubic-bezier(.6,0,1,1); transform: scaleX(1); }
.lw-charge.gone { opacity: 0; transition: opacity 0.15s; }
#screen-login:not(.lw-intro) .lw-charge { display: none; }
/* 編隊(ロゴの下で並走する仲間の機体)。低い画面では出さない */
.lw-formation { position: relative; width: 300px; height: 96px; margin-top: 14px; transition: opacity 0.5s; }
.lw-wing { position: absolute; will-change: transform; }
.lw-wing img { position: relative; width: 100%; display: block; z-index: 1; }
.lw-wing .sx-trail { right: 70%; top: 40%; height: 22%; width: 120%; border-radius: 20px;
  background: linear-gradient(90deg, rgba(0,229,255,0), rgba(0,229,255,0.35) 60%, rgba(255,255,255,0.9)); }
.lw-wing.w1 { left: 0; top: 4px; width: 84px; animation: lwBob 2.2s ease-in-out infinite; }
.lw-wing.w2 { left: 100px; top: 36px; width: 112px; animation: lwBob 2.6s ease-in-out infinite -0.8s; }
.lw-wing.w3 { left: 216px; top: 8px; width: 84px; animation: lwBob 2.4s ease-in-out infinite -1.4s; }
@keyframes lwBob { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(4px, -7px) rotate(-3deg); } }
#screen-login.lw-boost .lw-wing { animation-duration: 0.5s; }
#screen-login.lw-off .lw-formation, #screen-login.lw-short .lw-formation { display: none; }
#screen-login.lw-still .lw-wing, #screen-login.lw-off .lw-wing { animation: none; }
/* 低い画面(375x667 など。fx_space.js が lw-short を付ける)は飾りを詰める */
#screen-login.lw-short .lw-sub { display: none; }
#screen-login.lw-short .lw-tagline { margin-top: 6px; font-size: 14px; }
#screen-login.lw-short.lw-reg .lw-tagline { display: none; }
#screen-login.lw-short .login-logo { padding-top: 30px; }

/* ---------- ログイン画面: HUD の入力欄 ---------- */
#screen-login.lw .login-card {
  flex: none; position: relative; width: 100%; margin: 0;
  background: linear-gradient(180deg, rgba(6,20,44,0.92), rgba(3,9,22,0.94));
  border: 1px solid rgba(0,229,255,0.45); border-radius: 14px; padding: 10px 14px 12px;
  box-shadow: inset 0 0 18px rgba(0,229,255,0.12), 0 0 26px rgba(0,229,255,0.2);
  /* 後ろの canvas が毎フレーム動くので、ぼかし(backdrop-filter)は使わない(毎フレーム掛け直しになり重い) */
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transform-origin: 50% 50%;
  transition: transform 0.32s cubic-bezier(.2,1.3,.4,1), opacity 0.12s, visibility 0s;
}
.lw-br { position: absolute; width: 14px; height: 14px; border: 2px solid #00e5ff; pointer-events: none; }
.lw-br.tl { left: -3px; top: -3px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.lw-br.tr { right: -3px; top: -3px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.lw-br.bl { left: -3px; bottom: -3px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.lw-br.bt { right: -3px; bottom: -3px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.lw-scanwrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; border-radius: 14px; pointer-events: none; }
.lw-scan { position: absolute; left: 0; right: 0; top: 0; height: 40px;
  background: linear-gradient(180deg, rgba(0,229,255,0), rgba(0,229,255,0.16), rgba(0,229,255,0));
  transform: translateY(-40px); animation: lwScan 4.5s linear infinite 0.3s; }
@keyframes lwScan { 0% { transform: translateY(-40px); } 35%, 100% { transform: translateY(560px); } }
#screen-login.lw-still .lw-scan, #screen-login.lw-off .lw-scan { animation: none; display: none; }
.lw-hudbar { position: relative; display: flex; justify-content: space-between; align-items: center; font-family: 'Orbitron', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: #00e5ff; margin: 0 2px 8px; }
.lw-spd { color: #ffd700; min-width: 92px; text-align: right; }
.lw-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #00e676; margin-right: 6px;
  box-shadow: 0 0 6px #00e676; animation: lwBlink 1.4s steps(1) infinite; }
@keyframes lwBlink { 50% { opacity: 0.25; } }
#screen-login.lw-still .lw-dot, #screen-login.lw-off .lw-dot { animation: none; }
#screen-login.lw .login-tabs { position: relative; background: rgba(0,0,0,0.45); border: 1px solid rgba(0,229,255,0.25);
  border-radius: 10px; padding: 3px; margin-bottom: 9px; }
#screen-login.lw .login-tab { min-height: 36px; padding: 6px; border-radius: 7px; color: #8fb3cc; font-size: 14px; text-align: center; }
#screen-login.lw .login-tab.active { background: linear-gradient(180deg, rgba(0,229,255,0.32), rgba(0,229,255,0.14)); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,229,255,0.6); }
#screen-login.lw .login-form { position: relative; }
#screen-login.lw .form-group { margin-bottom: 8px; }
#screen-login.lw .form-label { font-size: 12px; font-weight: 700; color: #bfe9ff; margin: 0 0 3px 2px; }
#screen-login.lw .form-hint { font-size: 10.5px; font-weight: 400; color: #8fb3cc; }
#screen-login.lw .form-input { height: 42px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(0,229,255,0.3);
  background: rgba(0,12,28,0.9); color: #fff; font-size: 16px; }
#screen-login.lw .form-input::placeholder { color: #5f7f96; }
#screen-login.lw .form-input:focus { outline: none; border-color: #00e5ff; box-shadow: 0 0 0 3px rgba(0,229,255,0.22); }
#screen-login.lw .reg-nickname-dice { border-radius: 9px; border: 1px solid rgba(0,229,255,0.35); background: rgba(0,229,255,0.1); }
#screen-login.lw .form-note { font-size: 10.5px; margin-top: 3px; color: #8fb3cc; }
#screen-login.lw .form-error { font-size: 12.5px; margin: 2px 0 6px; min-height: 0; text-align: center; }
#screen-login.lw .form-error:empty { display: none; }
#screen-login.lw .form-submit { position: relative; overflow: hidden; height: 48px; padding: 0; margin-top: 4px; border-radius: 10px;
  background: linear-gradient(90deg, #ffd700, #00e676); color: #06210f; font-size: 17px; font-weight: 900; letter-spacing: 0.06em;
  box-shadow: 0 0 18px rgba(0,230,118,0.45); }
#screen-login.lw .form-submit::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
  transform: skewX(-20deg) translateX(0); animation: lwSheen 2.6s ease-in-out infinite;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.65), rgba(255,255,255,0)); }
@keyframes lwSheen { 0%, 55% { transform: skewX(-20deg) translateX(0); } 100% { transform: skewX(-20deg) translateX(560%); } }
#screen-login.lw-still .form-submit::after, #screen-login.lw-off .form-submit::after { animation: none; display: none; }
#screen-login.lw .form-submit:active { transform: scale(0.98); }
#screen-login.lw .forgot-password-link { margin-top: 6px; color: #9cc6dd; font-size: 12.5px; }
#screen-login.lw .guest-btn { height: 40px; min-height: 40px; padding: 0 8px; margin-top: 8px; border-radius: 10px;
  border: 1px solid rgba(0,229,255,0.35); background: rgba(0,229,255,0.06); color: #d6f3ff; font-size: 13.5px; font-weight: 700; }
#screen-login.lw .login-legal-links { flex: none; position: relative; margin-top: 0; padding: 2px 0 6px; font-size: 11px; color: #8aa3b5; }
#screen-login.lw .login-legal-links a { color: #a9c4d6; }

/* 音のボタン・スキップ表示 */
.lw-snd { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 8px); right: 8px; z-index: 20; display: flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px; border-radius: 16px; border: 1px solid rgba(0,229,255,0.5); background: rgba(0,10,25,0.7); color: #cfefff;
  font: 700 11px 'Noto Sans JP', sans-serif; cursor: pointer; }
.lw-snd svg { width: 16px; height: 16px; }
.lw-snd .lw-snd-on { display: none; }
.lw-snd.on .lw-snd-on { display: inline; }
.lw-snd.on .lw-snd-off { display: none; }
.lw-snd::after { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: 20px;
  border: 2px solid currentColor; opacity: 0; pointer-events: none; }
.lw-snd.wait::after { animation: lwPulse 1.3s ease-out infinite; }
#screen-login.lw-still .lw-snd.wait::after { animation: none; opacity: 0.5; }
@keyframes lwPulse { 0% { opacity: 0.6; transform: scale(0.92); } 100% { opacity: 0; transform: scale(1.12); } }
.lw-skip { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); left: 0; right: 0; text-align: center;
  font-family: 'Orbitron', sans-serif; font-size: 11px; letter-spacing: 0.3em; color: rgba(200,240,255,0.7); pointer-events: none; display: none; }
#screen-login.lw-intro .lw-skip { display: block; }

/* ---------- ログイン画面: 突入の段階 ----------
   lw-pre   … スクリプトが動くまで(中身を隠して暗い宇宙だけ。読み込めなかったときは安全策で4秒後に出す)
   lw-intro … 突入中(ロゴ・入力欄はまだ出さない。タップで飛ばせる)
   lw-logo-on / lw-top-on … ロゴの着地 / 見出しと編隊
   クラスが無い状態(演出OFF・控えめ・スクリプトが無い)はすべて表示。 */
#screen-login.lw-pre .login-logo-main, #screen-login.lw-pre .lw-sub, #screen-login.lw-pre .lw-tagline, #screen-login.lw-pre .lw-formation,
#screen-login.lw-pre .login-card, #screen-login.lw-pre .login-legal-links, #screen-login.lw-pre .lw-snd {
  visibility: hidden; opacity: 0; animation: lwFailsafe 0.3s ease 4s forwards;
}
@keyframes lwFailsafe { from { visibility: visible; opacity: 0; } to { visibility: visible; opacity: 1; } }
#screen-login.lw-intro:not(.lw-logo-on) .login-logo-main { visibility: hidden; opacity: 0; }
#screen-login.lw-intro:not(.lw-top-on) .lw-sub, #screen-login.lw-intro:not(.lw-top-on) .lw-tagline,
#screen-login.lw-intro:not(.lw-top-on) .lw-formation { opacity: 0; }
#screen-login.lw-intro .login-card { visibility: hidden; opacity: 0; transform: scaleY(0.02); }
#screen-login.lw-intro .login-legal-links { visibility: hidden; opacity: 0; }
#screen-login .login-legal-links { transition: opacity 0.4s; }

/* ---------- ホーム: 静かな宇宙の背景(fx_space.js homeStart) ---------- */
.home-space { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hs-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
.hs-glow { position: absolute; left: 50%; top: var(--hs-vy, 22%); width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax;
  background: radial-gradient(circle, rgba(0,229,255,0.10) 0%, rgba(90,60,210,0.07) 20%, rgba(0,0,0,0) 46%);
  animation: hsGlow 7s ease-in-out infinite; }
@keyframes hsGlow { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
.hs-ships { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.5; }
.hs-ship { width: 120px; }
#screen-title.hs-still .hs-glow { animation: none; }
/* 動いている間は CSS の星の瞬き(これまでの背景)を止めて重ねない。動かない版では残す */
#screen-title.hs-on:not(.hs-still) .title-bg-particles { display: none; }

/* ---------- 学習記録: 「自分の単語の嵐を見る」 ---------- */
.rec-storm-btn { display: block; width: 100%; margin-top: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255,61,154,0.55); background: linear-gradient(90deg, rgba(255,61,154,0.22), rgba(24,224,255,0.22));
  color: #fff; font-family: 'Noto Sans JP', sans-serif; font-size: 0.85rem; font-weight: 900; letter-spacing: 0.04em; text-align: center; }
.rec-storm-btn:active { transform: scale(0.98); }

/* ---------- 単語の嵐(fx_wordstorm.js) ---------- */
.ws-root { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9360; overflow: hidden; touch-action: none; user-select: none;
  -webkit-user-select: none; color: #fff; font-family: 'Noto Sans JP', sans-serif;
  background: radial-gradient(ellipse at 50% var(--ws-cy, 40%), #2a1060 0%, #120838 38%, #07041a 75%);
  animation: wsIn 0.25s ease; }
@keyframes wsIn { from { opacity: 0; } to { opacity: 1; } }
.ws-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
.ws-flash { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% var(--ws-cy, 40%), rgba(255,255,255,0.9), rgba(255,120,220,0.3) 35%, rgba(0,0,0,0) 70%); }
.ws-flash.on { animation: wsFlash 0.55s ease-out; }
@keyframes wsFlash { 0% { opacity: 0; } 15% { opacity: 0.55; } 100% { opacity: 0; } }
.ws-kin { position: absolute; left: 0; right: 0; top: 34%; text-align: center; pointer-events: none; z-index: 3; }
.ws-kw { display: inline-block; font-family: 'Poppins', sans-serif; font-weight: 900; font-size: clamp(44px, 15vw, 88px); line-height: 1;
  color: #fff; letter-spacing: -0.02em; text-shadow: 0 0 22px var(--c, #ff3d9a), 4px 4px 0 var(--c, #ff3d9a);
  animation: wsKin 0.34s cubic-bezier(.2,1.5,.4,1) forwards; }
.ws-kw small { display: block; font-family: 'Noto Sans JP', sans-serif; font-size: 0.3em; font-weight: 900; letter-spacing: 0.1em;
  color: #ffd700; text-shadow: 0 2px 0 #000; margin-top: 6px; }
@keyframes wsKin { 0% { opacity: 0; transform: scale(3.2) rotate(var(--r, -8deg)); } 60% { opacity: 1; transform: scale(0.92) rotate(0); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
.ws-center { position: absolute; left: 0; right: 0; top: 0; bottom: 236px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; pointer-events: none; z-index: 4; padding-top: env(safe-area-inset-top, 0px); }
.ws-title, .ws-num, .ws-caption { opacity: 0; }
.ws-title { font-family: 'Orbitron', 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 17px; letter-spacing: 0.08em; color: #fff;
  text-shadow: 0 0 12px rgba(255,61,154,0.95), 0 2px 0 #000; }
.ws-num { display: flex; align-items: baseline; justify-content: center; line-height: 1; margin-top: 6px; }
.ws-num b { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: clamp(64px, 23vw, 128px);
  background: linear-gradient(180deg, #fff7a8, #ffd700 40%, #00e676); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
.ws-num span { font-weight: 900; font-size: clamp(24px, 8vw, 40px); color: #ffd700; margin-left: 4px; text-shadow: 0 2px 0 #000; }
.ws-caption { margin-top: 8px; font-weight: 900; font-size: clamp(22px, 7vw, 32px); letter-spacing: 0.1em; color: #fff;
  text-shadow: 0 0 14px rgba(255,61,154,0.95), 0 3px 0 #000; }
.ws-root.ws-num-on .ws-num { opacity: 1; animation: wsNum 0.5s cubic-bezier(.2,1.6,.4,1) both; }
.ws-root.ws-num-on .ws-title { opacity: 1; animation: wsUp 0.4s ease 0.15s both; }
.ws-root.ws-num-on .ws-caption { opacity: 1; animation: wsUp 0.4s ease 0.3s both; }
@keyframes wsNum { 0% { opacity: 0; transform: scale(0.1) rotate(-20deg); } 100% { opacity: 1; transform: none; } }
@keyframes wsUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ws-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 16px); pointer-events: none; }
.ws-faces { display: flex; justify-content: center; gap: 4px; height: 60px; opacity: 0; }
.ws-root.ws-final .ws-faces { opacity: 1; }
.ws-face { position: relative; width: 60px; height: 60px; pointer-events: auto; cursor: pointer; will-change: transform; }
.ws-face img { width: 100%; height: 100%; display: block; }
.ws-face.idle { animation: wsPeek 2.8s ease-in-out infinite; }
.ws-face.boing { animation: wsBoing 0.5s cubic-bezier(.2,1.8,.4,1); }
@keyframes wsPeek { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes wsBoing { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-22px) scale(1.15, 0.9); } 100% { transform: translateY(0) scale(1); } }
.ws-bubble { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); white-space: nowrap; background: #fff; color: #14121f;
  font: 900 13px 'Poppins', 'Noto Sans JP', sans-serif; padding: 4px 9px; border-radius: 12px; border: 2px solid #14121f; pointer-events: none;
  animation: wsBub 1.3s ease-out forwards; }
.ws-bubble::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: #14121f; }
@keyframes wsBub { 0% { opacity: 0; transform: translate(-50%, 8px) scale(0.6); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -8px); } }
.ws-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 320px; opacity: 0; visibility: hidden; }
.ws-root.ws-final .ws-actions { opacity: 1; visibility: visible; transition: opacity 0.4s ease 0.5s; pointer-events: auto; }
.ws-actions .ws-share { width: 100%; margin: 0; padding: 13px 20px; font-size: 1.05rem; text-align: center; justify-content: center; }
.ws-close { width: 100%; padding: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.35); background: rgba(10,6,30,0.6);
  color: #fff; font-family: 'Noto Sans JP', sans-serif; font-size: 0.9rem; font-weight: 700; cursor: pointer; text-align: center; }
.ws-hint { font-size: 11px; color: rgba(255,255,255,0.65); opacity: 0; }
.ws-root.ws-final .ws-hint { opacity: 1; transition: opacity 0.4s ease 0.8s; }
.ws-skip { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); left: 0; right: 0; text-align: center; z-index: 5;
  font: 800 11px 'Poppins', sans-serif; letter-spacing: 0.3em; color: rgba(255,255,255,0.65); pointer-events: none; }
.ws-root:not(.ws-intro) .ws-skip { display: none; }
.ws-label { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 6; text-align: center; white-space: nowrap;
  transform: translate(-50%, -50%); animation: wsLabel 1.2s ease-out forwards;
  font: 900 22px 'Poppins', sans-serif; color: #fff; text-shadow: 0 0 12px #ff3d9a, 0 2px 0 #000; }
.ws-label span { display: block; }
.ws-label small { display: block; font: 900 14px 'Noto Sans JP', sans-serif; color: #ffd700; }
@keyframes wsLabel { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 15% { opacity: 1; transform: translate(-50%, -80%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -170%) scale(1); } }
.ws-label.still { animation: wsFade 1.2s ease-out forwards; }
@keyframes wsFade { 0% { opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
/* 控えめ(動かない版): 登場・揺れのアニメーションなし */
.ws-root.ws-still, .ws-root.ws-still .ws-num, .ws-root.ws-still .ws-title, .ws-root.ws-still .ws-caption,
.ws-root.ws-still .ws-face.idle, .ws-root.ws-still .ws-face.boing { animation: none; }
.ws-root.ws-still .ws-actions, .ws-root.ws-still .ws-hint { transition: none; }

@media (prefers-reduced-motion: reduce) {
  #screen-login .lw-wing, #screen-login .lw-scan, #screen-login .lw-dot, .hs-glow { animation: none; }
}

/* ===== ロゴ画像(ログイン画面・単語帳を選ぶ画面・ホーム共通) =====
   青→赤→金→緑の4枚を重ね、3秒ずつ順にクロスフェードする(1周12秒)。各色の後半は同じ色の光る版(.sx-glow)を
   上に重ねて光らせ、そのまま次の色へ移る。img は fx_space.js が 通常版→光る版 の順に色ごとに入れる。
   大きさは各画面の既存の font-size に比例させる(em 指定。画面幅ごとの font-size の調整をそのまま使う)。
   元の文字ロゴの -webkit-background-clip: text も必ず外す(残っていると、iOS の WebKit では浮かぶアニメ
   (titleFloat)の中の img が描かれないことがある。ホームのロゴが消える件の対策)。 */
.sx-logo, #title-logo-main.sx-logo, #screen-login .login-logo-main.sx-logo, .book-select-brand.sx-logo {
  position: relative; display: block; width: 5.4em; max-width: 100%; height: auto; aspect-ratio: 960 / 273; margin: 0 auto;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; filter: none; letter-spacing: 0;
}
#title-logo-main.sx-logo { animation: none; width: 6.6em; } /* ホームは元の文字ロゴの font-size が小さめなので一回り大きく */
.book-select-brand.sx-logo { margin-bottom: 10px; }
.sx-logo img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; opacity: 0;
  animation: sxLogoCycle 12s linear infinite; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.sx-logo img.sx-glow { animation-name: sxLogoGlow; }
.sx-logo img:not(.sx-ok) { visibility: hidden; } /* 読めていない img(壊れた画像の枠)は見せない */
.sx-logo img:nth-child(3), .sx-logo img:nth-child(4) { animation-delay: 3s; }
.sx-logo img:nth-child(5), .sx-logo img:nth-child(6) { animation-delay: 6s; }
.sx-logo img:nth-child(7), .sx-logo img:nth-child(8) { animation-delay: 9s; }
@keyframes sxLogoCycle { 0% { opacity: 0; } 5% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sxLogoGlow { 0% { opacity: 0; } 11% { opacity: 0; } 16% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } }
/* 画像が1枚も読めていない間(通信が遅い・失敗して読み直し中)は文字のロゴで埋める */
.sx-logo.sx-wait::before {
  content: 'STARVOX'; position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 0.82em; line-height: 1; letter-spacing: 0.02em;
  color: #b8f5ff; text-shadow: 0 0 0.25em rgba(0,229,255,0.7);
}
@media (prefers-reduced-motion: reduce) {
  .sx-logo img { animation: none; }
  .sx-logo img:first-child { opacity: 1; }
}