/* the title screen and the map loading card (2026-10-24 dark panel; 2026-10-25 behind them five chibi-hero key arts take
   turns, js/titlescene.js; the boxes and buttons keep their ids and jobs from js/ui.js / game.js mapVeil) */
#title.dark { display: block; padding: 0; overflow: hidden; background: #0a0406; font-family: 'Prompt', var(--thai); }
.tscene-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#title.dark .t-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0) 55%, rgba(30,10,30,.28) 85%), linear-gradient(0deg, rgba(20,8,20,.35), rgba(0,0,0,0) 18%); }
#title.dark .title-card { position: absolute; right: 4vw; top: 50%; transform: translateY(-54%); width: min(500px, 38vw); max-width: none; gap: 14px; }
@keyframes tFade { from { opacity: 0; transform: translateY(-50%); } }
/* the opening (js/titlescene.js pulls back from the hero's face meanwhile): the logo pops in with a sweep of light and a
   burst of petals, then the tagline, then the box */
#title.dark .logo-wrap { position: relative; width: 100%; animation: tPop .75s cubic-bezier(.3, 1.6, .5, 1) 1.7s both, tLogo 3.2s ease-in-out 2.6s infinite; }
#title.dark .logo-img { width: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(40, 10, 30, .4)); }
#title.dark .logo-shine { position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--logo) center / 100% 100% no-repeat; mask: var(--logo) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .9) 50%, transparent 62%) 160% 0 / 250% 100% no-repeat; mix-blend-mode: screen; animation: tShine 5s ease-in-out 2.3s infinite; }
@keyframes tPop { from { opacity: 0; transform: scale(.35) rotate(-6deg); } 70% { opacity: 1; } }
@keyframes tLogo { 50% { transform: translateY(-5px) rotate(-.6deg); } }
@keyframes tShine { 0% { background-position: 160% 0; } 30%, 100% { background-position: -60% 0; } }
@keyframes tUp { from { opacity: 0; transform: translateY(26px); } }
@keyframes tIn { from { opacity: 0; } }
#title.dark .title-card > .tagline { animation: tIn .5s ease-out 2.25s both; }
#title.dark .title-card > .login-box, #title.dark .title-card > .title-actions { animation: tUp .6s cubic-bezier(.2, 1.3, .4, 1) 2.45s both; }
#title.dark .controls-strip, #title.dark .fineprint { animation: tIn .8s ease-out 2.9s both; }
#title.dark .tagline { align-self: center; margin-top: -10px; padding: 3px 18px; border-radius: 99px; background: #fff3dc; border: 3px solid #4a2430;
  box-shadow: 0 3px 0 #4a2430; color: #7a3a4a; font: 700 clamp(.72rem, 1.05vw, .95rem) 'Mali', sans-serif; letter-spacing: .06em; text-transform: uppercase; text-shadow: none; }
#title.dark .tagline small { display: inline; letter-spacing: 0; text-transform: none; color: #7a3a4a; font-weight: 600; }
/* the box: cream card with a thick cartoon outline */
#title.dark .login-box { width: min(420px, 100%); align-self: center; padding: 16px 20px 18px; border-radius: 20px; border: 4px solid #4a2430;
  background: #fff6e8; color: #4a2430; font-family: 'Mali', 'Prompt', sans-serif; box-shadow: 0 6px 0 #4a2430, 0 16px 30px rgba(30, 10, 20, .35); }
#title.dark .login-title { font: 700 1rem 'Mali', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #7a3a4a; justify-content: center; }
#title.dark .login-title small { color: #2f8a3a; letter-spacing: 0; text-transform: none; }
#title.dark .login-box label { font: 600 .92rem 'Mali', sans-serif; color: #4a2430; }
#title.dark .login-box input { border-radius: 12px; border: 3px solid #4a2430; background: #fff; color: #3a1a24; font: 600 1rem 'Mali', sans-serif; }
#title.dark .login-box input:focus-visible { outline: 3px solid #ff8fae; }
#title.dark .login-acc { color: #6a3a48; }
#title.dark .login-acc b { color: #3a1a24; }
#title.dark .link-btn { color: #d0406a; font: 600 .85rem 'Mali', sans-serif; }
#title.dark .login-note, #title.dark .login-steps, #title.dark .login-hint, #title.dark .login-wait { color: #7a5a62; }
#title.dark .login-wait { font-weight: 600; }
#title.dark .login-hint.ok { color: #2f8a3a; } #title.dark .login-hint.bad, #title.dark .login-err { color: #d0304a; }
#title.dark .title-actions { flex-direction: column; align-items: stretch; gap: 10px; }
#title.dark .login-actions { flex-direction: column; align-items: stretch; }
/* buttons: chunky cartoon buttons - pink for the main one, butter yellow for the rest */
#title.dark .btn { min-height: 48px; border-radius: 14px; border: 3px solid #4a2430; transform: none; text-shadow: none;
  background: #ffe9b0; box-shadow: inset 0 -4px 0 #f0c870, 0 3px 0 #4a2430; color: #4a2430 !important; -webkit-text-fill-color: #4a2430 !important; font: 700 1.02rem 'Mali', sans-serif; }
#title.dark .btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
#title.dark .btn:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 #f0c870, 0 1px 0 #4a2430; }
#title.dark .btn.primary { min-height: 58px; padding: 8px 18px; background: #ff8fae; color: #fff !important; -webkit-text-fill-color: #fff !important;
  font-size: 1.12rem; box-shadow: inset 0 -5px 0 #e0607f, 0 4px 0 #4a2430; text-shadow: 0 2px 0 #c04a68; animation: tBob 2.4s ease-in-out infinite; }
@keyframes tBob { 50% { transform: translateY(-2px); } }
#title.dark .btn.warn { background: #ffb08a; box-shadow: inset 0 -4px 0 #e8845a, 0 3px 0 #4a2430; }
/* the keys along the bottom, the small print in the corner */
#title.dark .controls-strip { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: max-content; max-width: 94vw;
  background: rgba(255, 246, 232, .9); border: 3px solid #4a2430; border-radius: 14px; color: #4a2430; font: 600 .8rem 'Mali', sans-serif; padding: 5px 14px; }
#title.dark .controls-strip kbd { border: 2px solid #4a2430; background: #ffe9b0; color: #4a2430; font: 700 .78em 'Mali', sans-serif; border-radius: 6px; }
#title.dark .fineprint { position: absolute; right: 16px; top: 12px; background: none; color: rgba(255, 255, 255, .8); font: 600 .72rem 'Mali', sans-serif; text-shadow: 0 1px 2px #000; }
/* a narrow or short screen (phones): the box in the middle, the keys left out */
@media (max-width: 820px), (max-height: 520px) {
  #title.dark .t-shade { background: radial-gradient(ellipse at 50% 55%, rgba(8,2,4,.35), rgba(8,2,4,.8)); }
  #title.dark .title-card { left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%); width: min(440px, 92vw); gap: 8px; animation: none; }
  #title.dark .logo-wrap { width: min(340px, 70vw); align-self: center; }
  #title.dark .controls-strip { display: none; }
}
@media (max-height: 520px) { #title.dark .logo-wrap { width: min(260px, 40vw); } #title.dark .tagline small { display: none; } #title.dark .login-box { padding: 10px 16px; gap: 6px; } }

/* ---------- the map loading card ---------- */
#maploading.dark { display: block; background: #000; color: #fff; font-family: 'Prompt', var(--thai); }
#maploading.dark .ml-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 2, 4, .92) 0, rgba(5, 2, 4, .45) 24%, rgba(0, 0, 0, 0) 46%); }
#maploading.dark .ml-name { position: absolute; left: 5vw; bottom: calc(6vh + 54px); }
#maploading.dark .ml-name b { display: block; font: 600 clamp(1.8rem, 4vw, 3.4rem) 'Prompt', sans-serif; text-shadow: 0 4px 18px #000; }
#maploading.dark .ml-lv { display: block; margin-top: 2px; color: #ff8a5a; letter-spacing: .2em; font-size: clamp(.8rem, 1.2vw, 1.05rem); }
#maploading.dark .ml-tip { position: absolute; left: 5vw; bottom: 6vh; width: min(60vw, 900px); font-size: clamp(.85rem, 1.25vw, 1.1rem); color: rgba(255, 255, 255, .85); }
#maploading.dark .ml-tip em { font-style: normal; color: #ff8a5a; margin-right: 10px; }
#maploading.dark .ml-hero { position: absolute; right: 4vw; bottom: calc(6vh + 40px); width: clamp(90px, 10vw, 150px); height: auto; }
#maploading.dark .ml-bar { position: absolute; right: 4vw; bottom: 6vh; width: min(420px, 30vw); display: grid; gap: 6px; }
#maploading.dark .ml-pc { font-size: .95rem; color: #ffd9c2; }
#maploading.dark .load-bar { height: 5px; border: 0; border-radius: 3px; background: rgba(255, 255, 255, .14); }
#maploading.dark .load-bar i { background: linear-gradient(90deg, #6a0f14, #ff6a3d); box-shadow: 0 0 12px #ff5030; }
#maploading.dark small { font-size: .75rem; color: rgba(255, 255, 255, .5); font-weight: 400; text-align: left; }
@media (max-width: 820px) { #maploading.dark .ml-bar { width: 40vw; } #maploading.dark .ml-tip { width: 50vw; } }
#title.dark .title-card > .title-actions { width: min(420px, 100%); align-self: center; }
.tscene-gl { opacity: 0; transition: opacity .6s; }
@media (max-height: 520px) {
  #title.dark .fineprint, #title.dark #login-form .login-note { display: none; }
  #title.dark .title-card { max-height: 100vh; overflow-y: auto; gap: 4px; padding: 6px 0; }
  #title.dark .logo-wrap { width: min(210px, 30vw); }
  #title.dark .tagline { margin-top: -4px; font-size: .7rem; }
  #title.dark .login-box input { padding: 5px 10px; }
  #title.dark .btn { min-height: 38px; }
  #title.dark .btn.primary { min-height: 46px; font-size: 1.02rem; }
  #title.dark .login-err { min-height: 0; }
}