:where(html:has(body > #tap-tutorial)),#tap-tutorial{color-scheme:dark;font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif;background:#100f1d;color:#eeeaf9}:where(#tap-tutorial),:where(#tap-tutorial) *{box-sizing:border-box}html:has(body > #tap-tutorial),body:has(> #tap-tutorial){width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body:has(> #tap-tutorial){position:fixed;inset:0;height:var(--wf-viewport-height,100dvh);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);touch-action:none}
/* The field fills the largest 9:16 rectangle inside the safe visual viewport.
   Game/input coordinates stay 360×640; the UI backing follows display pixels. */#tap-tutorial{position:relative;width:100%;height:100%;min-height:0;display:grid;place-items:center;overflow:hidden}:where(#tap-tutorial) .field{position:relative;width:min(100%,calc((var(--wf-viewport-height,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom))*9/16));height:auto;min-height:0;min-width:0;aspect-ratio:9/16;overflow:hidden;background:#191323}#tap-canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}:where(#tap-tutorial) .sr-only,:where(#tap-tutorial) .skill-accessibility{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* These semantic buttons never cover the painted gauges. Keyboard focus opens
   explicit controls; touch users operate the source swipe sectors on Canvas. */#tap-skill-group:focus-within{clip:auto;width:auto;height:auto;right:4%;top:12%;margin:0;padding:8px;display:flex;gap:8px;overflow:visible;white-space:normal;background:#24262cee;z-index:2}:where(#tap-tutorial,body:has(> #tap-tutorial) > #story) a{color:#d5baff;text-decoration:none}:where(#tap-tutorial) .cover,:where(#tap-tutorial) .help{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:14px;text-align:center;background:#100d20ef}:where(#tap-tutorial) .cover{z-index:3}#tap-paused{z-index:5;background:#0009;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}:where(#tap-tutorial) .pause-menu{border:3px solid white;border-image:url('./assets/battle-ui/window.png') 10 fill / 10px / 0 stretch;border-radius:7px;width:88%;max-height:100%;padding:14px 16px;background:#f3f3f0;color:#424242;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;box-shadow:0 3px 5px #0008}:where(#tap-tutorial) .pause-menu h2{margin:0 0 14px;font-size:20px}:where(#tap-tutorial) .pause-guide,#tap-progress{font-size:12px;line-height:1.7}:where(#tap-tutorial) .controls{display:grid;gap:9px}:where(#tap-tutorial) .controls button,:where(#tap-tutorial) .controls>a{display:block;width:100%;min-height:38px;padding:9px 8px;word-break:keep-all;color:#4c514e;background:linear-gradient(#fff 0 45%,#e8ece6 46% 100%);border:2px solid #fff;border-radius:3px;box-shadow:0 0 0 1px #bec5be,0 2px 1px #8d958d;font-weight:700}:where(#tap-tutorial) .help{z-index:4;padding:0;gap:0;background:transparent;display:block}:where(#tap-tutorial) .help canvas{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:9/16;background:transparent}:where(#tap-tutorial) .result h2{font-size:19px}:where(#tap-tutorial) .result p{font-size:12px;line-height:1.6}:where(#tap-tutorial)[hidden],:where(#tap-tutorial) [hidden]{display:none!important}:where(#tap-tutorial,body:has(> #tap-tutorial) > #story) button{font:inherit;font-size:12px;color:#fff;border:1px solid #6a5289;border-radius:7px;padding:8px 12px;background:#38264f;touch-action:manipulation;cursor:pointer}:where(#tap-tutorial,body:has(> #tap-tutorial) > #story) button:disabled{opacity:.5;cursor:default}:where(#tap-tutorial,body:has(> #tap-tutorial) > #story) button:focus-visible,:where(#tap-tutorial,body:has(> #tap-tutorial) > #story) a:focus-visible{outline:3px solid #f5cf69;outline-offset:-3px}:where(#tap-tutorial) .help button{position:absolute;min-width:0;padding:0;border:0;border-radius:0;background:transparent;color:transparent;box-shadow:none}:where(#tap-tutorial,body:has(> #tap-tutorial) > #story) details{font-size:11px;line-height:1.6;text-align:left}:where(#tap-tutorial,body:has(> #tap-tutorial) > #story) summary{cursor:pointer;touch-action:manipulation}:where(#tap-tutorial,body:has(> #tap-tutorial) > #story) details p{margin:5px 0}:where(#tap-tutorial,body:has(> #tap-tutorial) > #story) details[open]{overflow:auto;overscroll-behavior:contain;touch-action:pan-y}:where(#tap-tutorial) .scenario{position:absolute;inset:0;z-index:3;pointer-events:none;background:transparent}:where(#tap-tutorial) .scenario button{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;color:transparent;box-shadow:none;pointer-events:auto}
@media(max-height:520px){:where(#tap-tutorial) .pause-menu{padding:9px 12px}:where(#tap-tutorial) .pause-menu h2{margin-bottom:8px}:where(#tap-tutorial) .controls{gap:6px}:where(#tap-tutorial) .controls button,:where(#tap-tutorial) .controls>a{min-height:32px;padding:6px}:where(#tap-tutorial) .pause-guide{display:none}}

/* Source game surfaces have no browser focus frame. Keep menu focus styles. */#tap-canvas:focus,#tap-canvas:focus-visible,#tap-help-close:focus-visible,#tap-scenario-next:focus-visible{outline:none}

/* The tutorial document already applies safe-area padding to its body. */body:has(> #tap-tutorial) > #story{padding:0}#story-canvas:focus,#story-canvas:focus-visible{outline:none}

/* Embedded use keeps the index page and its title/viewer CSS independent. */
#app > #tap-tutorial{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}

body:has(> #tap-tutorial) > #story .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}