:root{
  --ink:#17162B; --cobalt:#0078BF; --pink:#FF48B0; --sun:#FFE800; --paper:#F3F1EC;
  --bg:#17162B; --fg:#F3F1EC;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#17162B; --fg:#F3F1EC; } }
:root[data-theme="dark"]{ --bg:#17162B; --fg:#F3F1EC; }
*,*::before,*::after{ box-sizing:inherit; }
html{ height:100%; scroll-padding-top:env(safe-area-inset-top,0px); background:var(--bg); }
body{ height:100%; margin:0; background:var(--bg); color:var(--fg); overflow:hidden; overscroll-behavior:none;
  touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif; }
#wrap{ position:relative; width:100%; height:100%; overflow:hidden; }
#bgc{ position:absolute; left:0; top:0; display:block; pointer-events:none; }
#c{ position:absolute; left:0; top:0; display:block; outline:none; box-shadow:0 0 0 1px rgba(242,244,255,.12), 0 24px 60px rgba(0,0,0,.45); }
#pad{ position:absolute; inset:0; pointer-events:none; display:none; }
#pad.on{ display:block; }
#stick{ position:absolute; left:0; bottom:0; width:45%; height:70%; pointer-events:auto; touch-action:none; }
#ring{ position:absolute; width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:50%; border:2px solid rgba(242,244,255,.6); background:rgba(26,22,51,.3); opacity:.5; }
#knob{ position:absolute; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:rgba(242,244,255,.9); border:3px solid #17162B; }
.btn{ position:absolute; pointer-events:auto; touch-action:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; color:#17162B; border:3px solid #17162B; box-shadow:0 4px 0 #17162B; opacity:.92; }
.btn.down{ transform:translateY(3px); box-shadow:0 1px 0 #17162B; }
#bA{ width:84px; height:84px; background:#FF48B0; color:#F3F1EC; font-size:17px; }
#bJ{ width:68px; height:68px; background:#FFE800; font-size:13px; }
#bS{ width:60px; height:60px; background:#0078BF; color:#F3F1EC; opacity:.6; }
#bS::before{ content:''; position:absolute; inset:-10px; border-radius:50%; pointer-events:none; background:conic-gradient(#FFE800 calc(var(--sp,0) * 3.6deg), rgba(243,241,236,.18) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px)); mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px)); }
#bS.ready::before{ background:#FF48B0; }
#bD{ width:68px; height:68px; background:#82D8D5; font-size:13px; }
#bS.ready{ opacity:1; animation:glow .55s ease-in-out infinite alternate; }
@keyframes glow{ from{ box-shadow:0 4px 0 #17162B, 0 0 0 0 rgba(255,232,0,0); } to{ box-shadow:0 4px 0 #17162B, 0 0 0 9px rgba(255,232,0,.6); } }
@media (prefers-reduced-motion: reduce){ #bS.ready{ animation:none; box-shadow:0 4px 0 #17162B, 0 0 0 6px rgba(255,232,0,.6); } }
/* 見出しは画面に出さず、読み上げと検索のために置く */
.sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.nojs{ position:fixed; inset:auto 16px 40% 16px; z-index:3; margin:0; text-align:center; color:var(--paper); font:600 15px/1.8 "Hiragino Sans","Yu Gothic UI",sans-serif; }
.nojs a{ color:inherit; }
/* フッター（GAME_FOOTER_LINK_PLAN.md・tool-g-ovprint と同じ控えめな形）。はじめの画面とタイトルだけ出す。位置と大きさは js/game.js の syncFoot */
#links, #credit{ position:fixed; z-index:3; display:none; margin:0; padding:0; color:var(--paper); white-space:nowrap; font:600 12px/1 "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Noto Sans JP",sans-serif; }
#links.on, #credit.on{ display:flex; }
#credit{ font-size:11px; opacity:.72; }
#credit a{ color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:rgba(243,241,236,.45); padding:12px 0; margin:-12px 0; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#credit .bar{ margin:0 .35em; opacity:.6; }
#links a{ color:inherit; text-decoration:none; opacity:.72; padding:12px 7px; margin:-12px 0; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#links a span{ border-bottom:1px solid rgba(243,241,236,.45); padding-bottom:2px; }
#links a + a::before{ content:'/'; opacity:.45; margin:0 6px 0 -1px; }
#links a:hover, #links a:focus-visible, #credit a:hover, #credit a:focus-visible{ opacity:1; }
#links a:focus-visible, #credit a:focus-visible{ outline:1px solid var(--paper); outline-offset:2px; }