/* "Turn your phone" blocker (decision D-02, 2026-10-13): the game is landscape, so a phone or tablet held upright gets
   one full-screen card instead of the game, on every screen (loading, menu, cutscenes, play). Pure CSS decides when it
   shows, so it is up from the first paint, before any game file has loaded; src/game/turnphone.js adds the overrides
   (?touch=1 forces, ?touch=0 and ?portrait=1 switch it off), the language and the pause. ?diag=1 stays above it. */
#kk-turn { display: none; }
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
  html:not(.kk-turn-off) #kk-turn { display: flex; }
}
@media (orientation: portrait) {
  html.kk-turn-force:not(.kk-turn-off) #kk-turn { display: flex; }
}
#kk-turn {
  position: fixed; inset: 0; z-index: 99990; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: calc(24px + env(safe-area-inset-top, 0px)) calc(28px + env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) calc(28px + env(safe-area-inset-left, 0px));
  background: radial-gradient(120% 90% at 50% 20%, #23324a 0%, #10141c 60%, #0b0e14 100%);
  color: #f3f0ea; text-align: center; touch-action: none; -webkit-user-select: none; user-select: none;
}
#kk-turn .kk-turn-logo { font-family: 'Big Shoulders Display', Impact, sans-serif; font-weight: 900; font-size: 26px; letter-spacing: 0.06em; line-height: 1; opacity: 0.85; }
#kk-turn .kk-turn-phone { width: 128px; height: 128px; margin: 8px 0 4px; }
#kk-turn .kk-turn-phone .ph { transform-origin: 64px 64px; animation: kk-turn-spin 2.6s ease-in-out infinite; }
#kk-turn .kk-turn-phone .ar { opacity: 0; animation: kk-turn-arrow 2.6s ease-in-out infinite; }
@keyframes kk-turn-spin { 0%, 22% { transform: rotate(0deg); } 52%, 82% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@keyframes kk-turn-arrow { 0%, 10% { opacity: 0; } 22%, 50% { opacity: 1; } 62%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #kk-turn .kk-turn-phone .ph { animation: none; transform: rotate(-90deg); }
  #kk-turn .kk-turn-phone .ar { animation: none; opacity: 1; }
}
#kk-turn h1 { margin: 0; font-family: 'Barlow', system-ui, sans-serif; font-weight: 800; font-size: clamp(28px, 8.6vw, 40px); line-height: 1.12; max-width: 12em; }
#kk-turn .kk-turn-sub { margin: 0; font: 600 18px/1.35 'Barlow', system-ui, sans-serif; color: #ff8a52; max-width: 20em; }
#kk-turn .kk-turn-lock { margin: 18px 0 0; font: 500 16px/1.4 'Barlow', system-ui, sans-serif; color: rgba(243, 240, 234, 0.78); max-width: 21em; }