/*
 * sakuya-kit 共通スタイル
 *
 * 咲耶シリーズ全タイトルで同じ見た目にするための正典。
 * タイトルごとに変えてよいのは :root のトークン（色）だけ。
 * ゲーム側の CSS で上書きするときは、このファイルの後に
 *   :root { --gold: #...; --magenta: #...; }
 * だけを書く。部品の寸法・配置・ベベルはここ以外で書かない。
 *
 * canvas 側も retro.js がこのトークンを読むので、色の二重管理は起きない。
 */
@import url("https://fonts.googleapis.com/css2?family=DotGothic16&family=Press+Start+2P&display=swap");

:root {
  color-scheme: dark;

  /* --- レトロアーケード トークン --- */
  --bg: #06070C;        /* 地 */
  --panel: #120E1F;     /* 面 */
  --panel-ghost: rgba(18, 14, 31, 0.5); /* canvasに重なる操作ボタンの面 */
  --ink: #E8ECF5;       /* 文字（燐光の白） */
  --dim: #7C8BA6;       /* 減光した補助文字 */
  --gold: #E8C56A;      /* 二次: 枠・スコア・ランク。面に塗らない */
  --magenta: #FF2D9B;   /* 徴: CTA・選択・自機の発光。最も希少に使う */
  --danger: #FF4D2E;    /* 橙赤 */
  --ok: #E8C56A;        /* 確認済み表示（X ID など） */

  /* 筐体のベベル: ぼかし0のハードな3色で金属の縁を作る */
  --edge-hi: #2A3242;
  --edge-lit: #39445A;
  --edge-lo: #05060A;
  --bevel-up: inset 2px 2px 0 var(--edge-lit), inset -2px -2px 0 var(--edge-lo);
  --bevel-down: inset 2px 2px 0 var(--edge-lo), inset -2px -2px 0 var(--edge-lit);

  --radius: 0px;
  /* 長押しトグルの必要保持時間。JS側(HOLD_MS)と必ず同じ値にする */
  --hold-ms: 600ms;

  --font-display: "Press Start 2P", "DotGothic16", monospace;
  --font-body: "DotGothic16", "Press Start 2P", monospace;
}

html, body {
  overscroll-behavior: none;
}
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  min-height: 100dvh;
  /* ホーム画面アプリ(black-translucent)ではステータスバーの下まで広がる */
  padding: calc(20px + env(safe-area-inset-top)) 12px 40px;
  box-sizing: border-box;
  touch-action: manipulation;
  /* 長押しでの選択・コピーメニュー・タップハイライトを止める */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
input, textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
/* プレイ中のみ: スワイプでのスクロール／pull-to-refreshを止める */
body.sk-playing-lock {
  touch-action: none;
  overflow: hidden;
}
body.sk-fullscreen {
  padding: calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));
  gap: 8px;
}
body.sk-fullscreen .sk-wrap canvas {
  width: min(96vw, calc(92vh * var(--sk-aspect, 1.7778)));
}

/* ===== 筐体（canvas） ===== */
.sk-wrap {
  position: relative;
  text-align: center;
}
/* 幅だけを決め、高さは canvas の縦横比に任せる（max-height で高さだけ削ると
   縦横比が崩れて絵が伸びる）。--sk-aspect は kit.js が canvas の width/height から入れる */
.sk-wrap canvas {
  width: min(92vw, 960px, calc(72vh * var(--sk-aspect, 1.7778)));
  height: auto;
  border: 2px solid var(--edge-hi);
  box-shadow:
    inset 0 0 0 2px var(--edge-lo),
    0 0 0 2px var(--edge-lo),
    0 0 24px rgba(232, 197, 106, 0.10);
  background: #02040a;
  image-rendering: pixelated;
  touch-action: none;
}
/* 演出動画の供給元。canvasへ描くだけなので画面には出さない。
   display:none / visibility:hidden だとコマの更新が止まる環境があるので1pxに畳む */
.sk-video {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  left: 0;
  top: 0;
}
.sk-status {
  min-height: 1.4em;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.6;
}
.sk-footer {
  margin: 20px auto 24px;
  max-width: 960px;
  padding: 0 12px;
  color: var(--dim);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
  box-sizing: border-box;
}

/* ===== 縦持ち案内 ===== */
.sk-orientation {
  position: absolute;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* 完全不透過。半透明だと背後のタイトルと二重に見える */
  background: #050810;
  border: 2px solid var(--gold);
  z-index: 30;
  text-align: center;
  padding: 16px;
  box-sizing: border-box;
  pointer-events: auto;
}
.sk-orientation.visible {
  display: flex;
}
.sk-orientation .sk-orientation-icon {
  font-size: 42px;
}
/* キービジュアル付きの縦持ち案内は canvas より縦に長くなるので、canvas の上に重ねず、
   canvas を隠して案内そのものをページの流れに置く（下のランキングはスクロールで見られる）。
   位置と大きさは kit.js が canvas に合わせて style に入れるので、ここでは !important で上書きする */
.sk-orientation.sk-orientation-poster {
  position: relative;
  left: auto !important;
  top: auto !important;
  width: min(calc(100vw - 24px), 560px) !important;
  height: auto !important;
  min-height: 0 !important;
}
.sk-wrap:has(.sk-orientation-poster.visible) canvas {
  display: none;
}
/* 縦持ち案内のキービジュアル（orientation.image）。画面の幅いっぱい、高さは画面の半分まで */
.sk-orientation .sk-orientation-img {
  display: block;
  width: 100%;
  max-width: min(100%, 55vh, 55dvh);
  height: auto;
  border: 2px solid var(--gold);
  image-rendering: auto;
}
.sk-orientation .sk-orientation-img + .sk-orientation-icon {
  font-size: 30px;
}
.sk-orientation p {
  margin: 0;
  font-family: var(--font-body);
  color: var(--gold);
  font-size: 16px;
  line-height: 1.5;
}
.sk-orientation p.sk-orientation-title {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.sk-orientation p.sk-orientation-sub {
  font-family: var(--font-display);
  color: var(--magenta);
  font-size: 8px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

/* ===== スタートボタン（PUSH START の明滅） ===== */
.sk-start {
  position: absolute;
  transform: translate(-50%, -50%);
  /* 位置を決める前は左端の狭い場所に置かれていて、折り返すと高さを誤って測る */
  white-space: nowrap;
  z-index: 2;
  appearance: none;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 13px;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--gold);
  border: 2px solid var(--gold);
  box-shadow: var(--bevel-up);
  animation: sk-blink 1.1s steps(1, end) infinite;
}
.sk-start:active {
  box-shadow: var(--bevel-down);
  transform: translate(-50%, -50%) translateY(2px);
}
@keyframes sk-blink {
  /* 0.62未満にするとコントラストが4.5:1を割る */
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.62; }
}

/* ===== ポーズボタン（canvas中央。プレイ中は薄く、停止中だけはっきり） ===== */
.sk-pause {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  z-index: 7;
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  border: 2px solid var(--edge-hi);
  background: var(--panel);
  color: var(--ink);
  font-size: 22px;
  opacity: 0.1;
  box-shadow: var(--bevel-up);
  pointer-events: auto;
  touch-action: manipulation;
  transition: opacity 0.15s ease;
}
.sk-pause:active {
  box-shadow: var(--bevel-down);
  transform: translate(-50%, -50%) translateY(2px);
}
.sk-pause.paused {
  opacity: 0.95;
}

/* ===== 右下のボタン群 ===== */
.sk-pad {
  position: fixed;
  /* キャンバスの右下の角の内側(JSが --pad-* を入れる)。ノッチより内側には必ず収める */
  right: max(calc(12px + env(safe-area-inset-right)), var(--pad-right, 0px));
  bottom: max(calc(12px + env(safe-area-inset-bottom)), var(--pad-bottom, 0px));
  z-index: 6;
  display: none;
  pointer-events: auto;
  /* 右端(親指の付け根側)から 主ボタン → 副ボタン → トグル の順 */
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 10px;
}
.sk-pad.visible {
  display: flex;
}
.sk-btn {
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: var(--radius);
  border: 2px solid var(--edge-hi);
  background: var(--panel-ghost);
  color: var(--ink);
  text-shadow:
    1px 1px 0 var(--edge-lo), -1px -1px 0 var(--edge-lo),
    1px -1px 0 var(--edge-lo), -1px 1px 0 var(--edge-lo);
  font-size: 20px;
  font-weight: 400;
  /* backdrop-filterは中級端末でFPSが落ちるので使わない */
  box-shadow: var(--bevel-up);
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.sk-btn.sk-primary {
  border-color: var(--gold);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 14px;
}
.sk-btn:not(.sk-hold):active,
.sk-btn.active {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: var(--bevel-down);
  transform: translateY(2px);
}
/* 自動連射がオンの間、切り替えを兼ねるボタン（咲耶ジャンプバグ方式）をマゼンタで縁取る */
.sk-btn.sk-auto-on {
  border-color: var(--magenta);
}
/* 長押しトグル: 押している間だけ下から満ち、満ちてから離すと切り替わる */
.sk-hold {
  position: relative;
  overflow: hidden;
  width: 44px;
  height: 44px;
  font-size: 17px;
  align-self: center;
  opacity: 0.55;
}
.sk-hold.on {
  opacity: 1;
  border-color: var(--gold);
}
/* アイコン自体が状態を表すトグル（ジャイロ等）は減光しない */
.sk-hold.sk-icon-state {
  opacity: 1;
}
.sk-hold::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: rgba(232, 197, 106, 0.38);
  pointer-events: none;
}
.sk-hold.holding::after {
  height: 100%;
  transition: height var(--hold-ms) linear;
}
.sk-hold.holding {
  box-shadow: var(--bevel-down);
  transform: translateY(2px);
}
.sk-hold.hold-ready {
  border-color: var(--gold);
  color: var(--gold);
}

/* ===== バーチャルスティック（画面左半分のどこでも、指の下に出る） ===== */
.sk-joyring {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  display: none;
  width: 64px;
  height: 64px;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  border: 2px solid rgba(232, 236, 245, 0.3);
  background: rgba(18, 14, 31, 0.3);
}
.sk-joyknob {
  position: fixed;
  z-index: 31;
  pointer-events: none;
  display: none;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: var(--magenta);
  opacity: 0.85;
  box-shadow: 0 0 0 2px rgba(232, 236, 245, 0.35);
}
.sk-joyring.on,
.sk-joyknob.on {
  display: block;
}
/* 最初に倒すまでだけ出す、指の置き場所の影 */
.sk-joyhint {
  position: fixed;
  z-index: 29;
  pointer-events: none;
  display: none;
  width: 64px;
  height: 64px;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  border: 2px dashed rgba(232, 236, 245, 0.28);
  background: rgba(18, 14, 31, 0.28);
  animation: sk-joypulse 1.8s ease-in-out infinite;
}
.sk-joyhint::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: rgba(232, 236, 245, 0.2);
}
.sk-joyhintcap {
  position: fixed;
  z-index: 29;
  pointer-events: none;
  display: none;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: rgba(232, 236, 245, 0.62);
  text-shadow: 0 1px 3px #000, 0 0 6px #000;
}
body.sk-joyhint-on .sk-joyhint,
body.sk-joyhint-on .sk-joyhintcap {
  display: block;
}
@keyframes sk-joypulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* ===== ランキング（TOP10）とスコア登録 ===== */
.sk-leaderboard {
  width: min(92vw, 960px);
  box-sizing: border-box;
  background: var(--panel);
  border: 2px solid var(--edge-hi);
  border-radius: var(--radius);
  box-shadow: var(--bevel-up);
  padding: 16px 18px 20px;
  display: none;
}
.sk-leaderboard.visible {
  display: block;
}
.sk-lb-title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.5;
  color: var(--gold);
  text-align: center;
}
.sk-lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* 順位 / ニックネーム / Xの名称 / スコア */
.sk-lb-row {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: var(--radius);
  font-size: 13px;
}
.sk-lb-rank {
  color: var(--dim);
  font-family: var(--font-display);
  font-size: 11px;
  text-align: center;
}
.sk-lb-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sk-lb-xname {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sk-lb-avatar {
  width: 22px;
  height: 22px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--panel);
  flex: none;
}
.sk-lb-xlink {
  color: var(--dim);
  text-decoration: none;
  font-size: 11px;
  white-space: nowrap;
}
.sk-lb-xlink:hover {
  text-decoration: underline;
}
.sk-lb-score {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* 2段目: クリア / 進行度 / CNP の体数 */
.sk-lb-sub {
  grid-column: 1 / -1;
  color: var(--dim);
  font-size: 11px;
}
/* CNPロスター: 行の全幅を使う2段目 */
.sk-lb-roster {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}
.sk-lb-slot {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(232, 197, 106, 0.2);
  background: rgba(0, 0, 0, 0.32);
  overflow: hidden;
  flex: none;
}
.sk-lb-slot.got {
  border-color: hsl(var(--h), 85%, 62%);
  background: hsl(var(--h), 60%, 40%);
}
.sk-lb-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.sk-lb-roster-count {
  color: var(--dim);
  font-family: var(--font-display);
  font-size: 9px;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
/* 「このゲーム / 総合」の切り替え */
.sk-lb-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: -4px 0 14px;
}
.sk-lb-tabs[hidden] {
  display: none;
}
.sk-lb-tab {
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 2px solid var(--edge-hi);
  background: var(--bg);
  color: var(--dim);
  font-family: var(--font-body);
  font-size: 12px;
  box-shadow: var(--bevel-up);
}
.sk-lb-tab[aria-selected="true"] {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: var(--bevel-down);
}
.sk-lb-overall[hidden],
.sk-lb-list[hidden] {
  display: none;
}
.sk-lb-note {
  margin: 0 0 12px;
  color: var(--dim);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}
/* 総合: 2段目にタイトル別のポイント */
.sk-lb-games {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--dim);
  font-size: 11px;
}
.sk-lb-games .sk-lb-game-pts {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sk-lb-games .sk-lb-game-top {
  color: var(--gold);
}
.sk-lb-empty {
  color: var(--dim);
  font-size: 12px;
  text-align: center;
  padding: 10px 0;
}
.sk-register {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--edge-hi);
  display: none;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.sk-register.visible {
  display: flex;
}
.sk-register-msg {
  margin: 0;
  color: var(--gold);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.sk-register input {
  width: min(280px, 90%);
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 2px solid var(--edge-hi);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px; /* iOSの入力時ズームを防ぐ下限 */
  box-shadow: inset 2px 2px 0 var(--edge-lo);
}
.sk-register input:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-color: var(--gold);
}
.sk-cta {
  padding: 12px 22px;
  border-radius: var(--radius);
  border: 2px solid var(--gold);
  background: var(--panel);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 11px;
  box-shadow: var(--bevel-up);
}
.sk-cta:active:not(:disabled) {
  box-shadow: var(--bevel-down);
  transform: translateY(2px);
}
.sk-cta:disabled {
  opacity: 0.4;
  border-color: var(--edge-hi);
  color: var(--dim);
}
.sk-note {
  margin: 0;
  font-size: 12px;
  color: var(--dim);
  min-height: 1.2em;
  text-align: center;
}
.sk-share {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.sk-share.visible {
  display: flex;
}
.sk-xid {
  width: min(280px, 90%);
  min-height: 1.4em;
  font-size: 12px;
  display: none;
  align-items: center;
  gap: 6px;
}
.sk-xid.visible { display: flex; }
.sk-xid.xid-loading { color: var(--dim); }
.sk-xid.xid-error { color: var(--danger); }
.sk-xid.xid-found { color: var(--ok); }
.sk-xid .sk-xid-avatar {
  width: 22px;
  height: 22px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--panel);
}
.sk-xid a { color: var(--dim); }

/* ===== 全画面で遊ぶ / ホーム画面への追加案内 ===== */
.sk-fsbtn {
  font: inherit;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 10px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 2px solid var(--gold);
  background: var(--panel);
  color: var(--gold);
  box-shadow: var(--bevel-up);
}
.sk-wrap > .sk-fsbtn {
  margin-top: 14px;
}
.sk-fsbtn:active {
  box-shadow: var(--bevel-down);
  transform: translateY(2px);
}
.sk-fsbtn[hidden] {
  display: none;
}
.sk-fsmodal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  background: rgba(6, 7, 12, 0.86);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 14px;
  box-sizing: border-box;
}
.sk-fsmodal.show {
  display: block;
}
.sk-fsbox {
  max-width: 420px;
  margin: 0 auto;
  background: var(--panel);
  color: var(--ink);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--bevel-up);
  padding: 18px 16px 16px;
  box-sizing: border-box;
  text-align: center;
  font-family: var(--font-body);
}
.sk-fsbox h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--gold);
}
.sk-fs-lead {
  margin: 0 0 16px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--dim);
}
.sk-fs-lead b { color: var(--magenta); }
.sk-fs-step {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  text-align: left;
  padding: 12px 0;
  border-top: 1px solid var(--edge-hi);
}
.sk-fs-step-n {
  flex: 0 0 22px;
  height: 22px;
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--bg);
  font: 800 11px/22px ui-monospace, monospace;
  text-align: center;
}
.sk-fs-step-t {
  flex: 1 1 auto;
  font-size: 12.5px;
  line-height: 1.7;
}
.sk-fs-step-t em {
  font-style: normal;
  color: var(--gold);
  font-weight: 800;
}
.sk-fs-step-t svg {
  display: block;
  margin: 8px 0 0;
  width: 100%;
  max-width: 210px;
  height: auto;
}
.sk-fs-close {
  margin-top: 14px;
  font: inherit;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  width: 100%;
  padding: 11px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 2px solid var(--gold);
  background: var(--panel);
  color: var(--gold);
  box-shadow: var(--bevel-up);
  box-sizing: border-box;
}
.sk-fs-close:active {
  box-shadow: var(--bevel-down);
  transform: translateY(2px);
}
.sk-fs-foot {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--dim);
}
.sk-fs-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--danger);
}
.sk-fs-note[hidden] {
  display: none;
}

/* スマホの横持ち: 画面の高さが足りないので、画面の高さいっぱいまで canvas を使う。
   --sk-vh は kit.js が測った実際の表示の高さ（iOS のホーム画面アプリでは 100svh が
   実際より大きい値を返すことがあるため、小さいほうを使う） */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  body {
    padding-top: calc(4px + env(safe-area-inset-top));
    gap: 8px;
  }
  .sk-wrap canvas,
  body.sk-fullscreen .sk-wrap canvas {
    width: min(
      calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)),
      calc((min(100vh, var(--sk-vh, 100vh)) - 12px - env(safe-area-inset-top)) * var(--sk-aspect, 1.7778))
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-start { animation: none; }
  .sk-joyhint { animation: none; opacity: 0.8; }
}