:root { color-scheme: dark; font-family: system-ui, "Noto Sans KR", sans-serif; color: #fff; background: #080b0b; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; }
main { width: 100%; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #ffe391; outline-offset: 3px; }
[hidden] { display: none !important; }
.tk-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tk-preview { width: min(100%, 1600px); min-width: 0; max-width: 100vw; }
.tk-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 100svh; overflow: hidden; background: #142227; isolation: isolate; }
#tk-canvas { position: absolute; inset: 0; min-width: 0; }
#tk-canvas, #tk-canvas canvas { display: block; width: 100%; height: 100%; }
.tk-stage:focus-visible { outline: 2px solid #d5b16b; outline-offset: -2px; }
.tk-hud { position: absolute; z-index: 2; inset: 0; pointer-events: none; text-shadow: 0 1px 2px #000; }
.tk-player-hud { position: absolute; top: 20px; left: 20px; display: flex; align-items: center; gap: 10px; width: 258px; padding: 8px 12px 8px 8px; border-left: 3px solid #e4be70; background: rgba(10, 17, 18, .86); }
.tk-portrait-frame { width: 48px; height: 48px; flex: none; overflow: hidden; background: #2a3736; border-radius: 50%; }
.tk-player-hud img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transform: scale(3.2); transform-origin: 50% 0%; }
.tk-vitals { flex: 1; min-width: 0; }
.tk-stats { display: block; margin-top: 4px; color: #dbd4be; font-size: 11px; line-height: 1.3; white-space: nowrap; }
.tk-move { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(2, 56px); align-self: end; }
.tk-move [data-hold=up] { grid-area: 1 / 2; }
.tk-move [data-hold=left] { grid-area: 2 / 1; }
.tk-move [data-hold=down] { grid-area: 2 / 2; }
.tk-move [data-hold=right] { grid-area: 2 / 3; }
.tk-health-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 12px; font-variant-numeric: tabular-nums; }
.tk-health-label > strong { font-size: 18px; }
progress { appearance: none; display: block; width: 100%; height: 10px; border: 0; overflow: hidden; background: #453637; border-radius: 2px; }
progress::-webkit-progress-bar { background: #453637; }
#tk-health-meter::-webkit-progress-value { background: #e35551; }
#tk-health-meter::-moz-progress-bar { background: #e35551; }
.tk-player-hud.is-hurt { animation: tk-health-hit .28s ease-out; }
@keyframes tk-health-hit { 0% { box-shadow: 0 0 0 3px #f18b76; } 100% { box-shadow: 0 0 0 0 transparent; } }
.tk-battle-hud { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; padding: 10px 15px; background: rgba(10, 17, 18, .78); font-size: 13px; white-space: nowrap; }
.tk-enemy-count strong { color: #ffdf9f; font-size: 18px; font-variant-numeric: tabular-nums; }
.tk-route { position: absolute; top: 71px; left: 50%; transform: translateX(-50%); width: 180px; height: 3px; background: rgba(8, 18, 19, .7); }
.tk-route > div { height: 100%; width: 0; background: #f4d291; transition: width .1s linear; }
.tk-route > span { position: absolute; top: 6px; right: 0; color: #ffe5b0; font-size: 10px; }
.tk-special-hud { position: absolute; right: 20px; bottom: 90px; display: grid; grid-template-columns: 90px 76px; align-items: center; gap: 5px 10px; padding: 8px 12px; background: rgba(10, 17, 18, .82); font-size: 12px; }
.tk-special-hud > span { grid-column: 1 / -1; color: #ffdda1; }
#tk-special-meter { height: 5px; }
#tk-special-meter::-webkit-progress-value { background: #d0ae66; }
#tk-special-meter::-moz-progress-bar { background: #d0ae66; }
.tk-special-hud strong { font-size: 11px; text-align: right; }
.tk-combo { position: absolute; right: 32px; top: 108px; display: grid; justify-items: end; color: #ffe5a6; }
.tk-combo strong { font-size: 44px; font-variant-numeric: tabular-nums; line-height: 1; }
.tk-combo span { margin-top: 5px; font-size: 12px; }
.tk-enemy-pointer { position: absolute; left: 12px; top: 50%; padding: 6px 9px; background: rgba(10, 17, 18, .85); color: #ffe3a4; font-size: 12px; }
.tk-enemy-pointer[data-direction=right] { left: auto; right: 12px; }
.tk-system-controls { position: absolute; z-index: 5; top: 20px; right: 20px; display: flex; gap: 8px; }
.tk-system-controls > button, .tk-effects-sound { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(239, 222, 187, .45); background: rgba(10, 17, 18, .82); border-radius: 4px; color: #eee6d7; font-size: 20px; }
.tk-effects-sound { position: relative; cursor: pointer; }
.tk-effects-sound input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.tk-effects-sound:has(input:checked) { background: #51654d; border-color: #dbd9a6; }
.tk-effects-sound:has(input:focus-visible) { outline: 3px solid #ffe391; outline-offset: 3px; }
.tk-control-row { position: absolute; z-index: 3; left: 20px; right: 20px; bottom: 20px; }
.tk-mobile-controls { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.tk-move, .tk-actions { align-items: end; gap: 10px; }
.tk-actions { display: flex; }
.tk-control-row button { width: 56px; height: 56px; padding: 0; border: 1px solid rgba(243, 222, 188, .65); border-radius: 50%; background: rgba(15, 24, 24, .86); color: #fff9e9; font-size: 13px; font-weight: 700; touch-action: none; user-select: none; -webkit-user-select: none; }
.tk-move button { font-size: 28px; }
.tk-actions button[data-action=attack] { width: 68px; height: 68px; background: rgba(139, 65, 40, .94); border: 2px solid #f5c88e; font-size: 16px; }
.tk-actions button[data-action=special] { border-color: #c9b776; color: #ffe9a8; }
.tk-control-row button:active, .tk-control-row button.is-held { background: #806c48; transform: translateY(1px); }
.tk-message { position: absolute; z-index: 2; left: 50%; top: 106px; transform: translateX(-50%); max-width: calc(100% - 44px); margin: 0; padding: 8px 14px; background: rgba(9, 18, 19, .88); color: #fff3cf; border-left: 2px solid #e3c682; font-size: 13px; text-align: center; pointer-events: none; }
.tk-message:empty { display: none; }
.tk-overlay { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: 24px; background: rgba(9, 17, 19, .83); }
.tk-overlay-inner { width: min(100%, 640px); text-align: center; }
.tk-overline { margin: 0 0 10px; font-size: 12px; color: #f5c98c; }
.tk-overlay h3 { margin: 0 0 24px; font-size: 30px; line-height: 1.2; }
.tk-heroes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tk-heroes button { display: grid; justify-items: center; gap: 7px; min-width: 0; padding: 14px 8px; border: 1px solid #69736b; border-radius: 4px; background: rgba(23, 38, 38, .9); color: #fff; transition: border-color .15s, transform .15s; }
.tk-heroes button:not(:disabled):hover { border-color: #f0cc8a; transform: translateY(-4px); }
.tk-hero-art { width: 104px; height: 128px; object-fit: contain; }
.tk-heroes strong { font-size: 20px; }
.tk-heroes small { font-size: 12px; color: #e0d5bf; }
.tk-loading { margin: 16px 0 0; font-size: 13px; }
.tk-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.tk-result-actions button, #tk-resume { min-height: 44px; padding: 10px 20px; border: 1px solid #dfc796; border-radius: 4px; color: #fff5dd; background: #33423c; font-weight: 700; }
.tk-result-actions button:first-child, #tk-resume { color: #231e12; background: #e8bd78; }
.tk-help { max-width: 360px; margin: 24px auto 0; border-top: 1px solid #63736e; padding-top: 14px; font-size: 13px; }
.tk-help summary { cursor: pointer; }
.tk-help p { line-height: 2; color: #cdd9d1; }
@media (max-width: 900px) { .tk-battle-hud { top: 104px; }.tk-route { top: 155px; }.tk-message { top: 182px; }.tk-special-hud { bottom: 85px; }.tk-combo { top: 202px; } }
@media (max-width: 670px) {
  .tk-stage { aspect-ratio: 5 / 6; }
  .tk-player-hud { top: 12px; left: 12px; width: calc(100% - 115px); padding: 6px 8px; gap: 7px; }
  .tk-portrait-frame { width: 32px; height: 32px; }
  .tk-health-label { font-size: 10px; margin-bottom: 5px; gap: 4px; }
  .tk-health-label > strong { font-size: 15px; }
  progress { height: 7px; }
  .tk-system-controls { top: 12px; right: 12px; gap: 6px; }
  .tk-system-controls > button, .tk-effects-sound { width: 36px; height: 36px; }
  .tk-battle-hud { top: 88px; font-size: 11px; padding: 5px 10px; gap: 14px; }
  .tk-enemy-count strong { font-size: 14px; }
  .tk-route { top: 120px; width: 120px; }
  .tk-route > span { display: none; }
  .tk-control-row { left: 12px; right: 12px; bottom: 12px; }
  .tk-mobile-controls { gap: 8px; }
  .tk-move, .tk-actions { gap: 4px; }
  .tk-move { grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(2, 40px); }
  .tk-move button { width: 40px; height: 40px; }
  .tk-control-row button { width: 44px; height: 44px; font-size: 11px; }
  .tk-move button { width: 40px; height: 40px; }
  .tk-move button { font-size: 23px; }
  .tk-actions button[data-action=attack] { width: 52px; height: 52px; font-size: 13px; }
  .tk-special-hud { right: 12px; bottom: 73px; grid-template-columns: 58px 56px; padding: 5px 8px; gap: 3px 6px; font-size: 10px; }
  .tk-special-hud strong { font-size: 9px; }
  .tk-message { top: 133px; font-size: 11px; padding: 6px 10px; max-width: calc(100% - 24px); width: max-content; }
  .tk-combo { right: 16px; top: 166px; }.tk-combo strong { font-size: 30px; }.tk-combo span { font-size: 10px; }
  .tk-overlay { padding: 16px; }.tk-overlay h3 { font-size: 23px; margin-bottom: 18px; }
  .tk-heroes { gap: 6px; }.tk-heroes button { padding: 10px 3px; gap: 6px; }.tk-heroes strong { font-size: 17px; }.tk-heroes small { font-size: 10px; }
  .tk-hero-art { width: 62px; height: 94px; }
}
@media (max-height: 440px) and (min-width: 500px) {
  .tk-player-hud { top: 10px; left: 10px; width: 210px; }.tk-portrait-frame { width: 32px; height: 32px; }
  .tk-system-controls { top: 10px; right: 10px; }.tk-battle-hud { top: 10px; }.tk-route { top: 55px; }
  .tk-combo { top: 90px; }.tk-control-row { bottom: 10px; }.tk-special-hud { bottom: 84px; }
  .tk-message { top: 80px; }
  .tk-overlay h3 { font-size: 22px; margin-bottom: 12px; }.tk-hero-art { height: 70px; }.tk-heroes button { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }