@font-face { font-family: Galmuri11; src: url('../undertale/fonts/Galmuri11.woff2') format('woff2'); font-display: swap; }
:root { color-scheme: dark; font-family: Galmuri11, sans-serif; color: #e9edf9; background: #080910; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 50% 32%, #30264d55, transparent 65%); }
button, a { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, canvas:focus-visible { outline: 2px solid #9ff5e4; outline-offset: 4px; }
button:disabled { cursor: default; opacity: .35; }
main { width: min(100% - 40px, 1000px); margin: auto; }
header { display: flex; align-items: center; justify-content: space-between; height: 76px; border-bottom: 1px solid #252635; font-size: 11px; color: #9195b0; }
header a { text-decoration: none; }
header button, #pause { border: 1px solid #353647; background: transparent; padding: 9px 12px; border-radius: 5px; font-size: 11px; }
#pause { flex-shrink: 0; white-space: nowrap; }
.heading { display: flex; justify-content: space-between; align-items: center; padding: 30px 0 24px; }
.eyebrow { color: #b6a1ed; font-size: 10px; letter-spacing: 2px; }
h1 { margin: 12px 0; font-size: 36px; letter-spacing: -2px; }
h1 span { color: #bea6fa; }
.heading p:last-child { color: #9296ad; font-size: 12px; }
.badge { color: #dcd9ef; font-size: 12px; text-align: right; }
.badge small { display: block; font-size: 9px; letter-spacing: 1px; color: #7d829f; margin-top: 12px; }
.badge i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #a1f3c7; margin-right: 8px; }
.machine { max-width: 820px; margin: auto; border: 1px solid #3d3853; border-radius: 12px; overflow: hidden; background: #090b14; box-shadow: 0 20px 100px #0008; }
.machine-top { display: flex; justify-content: space-between; gap: 8px; padding: 15px 20px; font-size: 9px; letter-spacing: 1px; background: #141321; color: #b9b0d2; }
.live { color: #91cbb4; }
.screen { position: relative; }
canvas { display: block; width: 100%; aspect-ratio: 800 / 620; image-rendering: pixelated; touch-action: none; }
#overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 20px 6%; background: linear-gradient(transparent 25%, #090b1499 48%, #090b14 92%); text-align: center; }
#overlay[hidden] { display: none; }
#overlay h2 { font-size: clamp(24px, 5vw, 44px); line-height: 1.4; margin: 10px 0; text-shadow: 0 0 30px #c5a2ff77; }
#overlay-copy { font-size: 12px; color: #b4b5ce; line-height: 1.9; margin: 8px 0 22px; }
#start { width: min(280px, 90%); padding: 16px 22px; background: #e2d4ff; border: none; border-radius: 5px; color: #211638; font-weight: bold; display: flex; justify-content: space-between; }
.small { color: #7c819b; font-size: 10px; margin-top: 18px; }
.actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px 20px; }
.actions button { padding: 13px 8px; border: 1px solid #776146; background: #19151a; border-radius: 4px; color: #ecc78c; font-size: 14px; }
.actions button.selected { border-color: #fff0b3; background: #3f3026; box-shadow: inset 0 0 0 1px #fff0b3; }
.actions button:last-child { color: #d0b4ff; border-color: #72559b; }
#choices:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 20px 14px; }
#choices button { padding: 12px 8px; color: #e6d9f9; background: #211a30; border: 1px solid #7a6598; font-size: 12px; border-radius: 4px; }
#choices button.selected { border-color: #ffe99b; color: #ffe99b; }
.actions small { opacity: .5; margin-left: 8px; font-size: 9px; }
.status { padding: 10px 20px 15px; min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #aaa6bc; font-size: 11px; }
.instructions { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin: 24px 0; font-size: 10px; color: #8a8ea5; }
kbd { font: inherit; color: #ccc9dc; }
footer { display: flex; justify-content: space-between; gap: 18px; padding: 20px 0 30px; border-top: 1px solid #232432; font-size: 9px; color: #656a82; }
.touch { display: none; touch-action: none; user-select: none; }
@media (pointer: coarse), (max-width: 650px) {
  main { width: min(100% - 20px, 820px); }
  header { height: 55px; } header > span { display: none; }
  .heading { padding: 18px 0 12px; } h1 { font-size: 28px; } .badge { display: none; }
  .machine-top { padding: 12px; font-size: 8px; } .live { display: none; }
  .actions { padding: 10px; gap: 6px; } .actions button { font-size: 12px; } .actions small { display: none; }
  .status { padding: 8px 10px; font-size: 10px; }
  #overlay .eyebrow { font-size: 7px; letter-spacing: 1px; } #overlay h2 { margin: 3px; font-size: 25px; }
  #overlay-copy { font-size: 10px; margin: 5px 0 10px; } #start { padding: 12px 20px; } .small { font-size: 8px; margin: 9px 0; }
  .touch { display: flex; gap: 12px; align-items: center; margin-top: 15px; }
  .touch button { border: 1px solid #454159; border-radius: 7px; background: #1a1828; min-width: 48px; height: 48px; touch-action: none; }
  .dpad { display: grid; grid-template-columns: repeat(3, 48px); gap: 4px; margin-right: auto; }
  .dpad button:first-child { grid-column: 2; } .dpad button:nth-child(2) { grid-column: 1; }
  .touch > button { width: 60px; height: 64px; font-size: 12px; }
  footer { flex-direction: column; font-size: 8px; }
}

.boss-modes { display: flex; justify-content: center; gap: 8px; padding: 12px 0 0; }
.boss-modes a { padding: 10px 14px; border: 1px solid #443d58; border-radius: 6px; font-size: 11px; color: #a69fb9; text-decoration: none; background: #121019; }
.boss-modes a[aria-current="page"] { color: #eadfff; border-color: #b49be5; background: #282037; }
@media (orientation: landscape) and (max-height: 540px) { .boss-modes { display: none; } }

.touch button.pressed { color: #f0ddff; background: #4c365e; }
@media (orientation: landscape) and (max-height: 540px) and (max-width: 1100px) {
  main { width: 100%; min-height: 100dvh; padding: 8px 12px; display: grid; grid-template-columns: minmax(0, 1fr) 178px; align-items: center; gap: 12px; }
  .heading, .instructions, footer, header a, header > span { display: none; }
  header { display: contents; }
  header button { position: fixed; top: 10px; right: 20px; z-index: 2; }
  .machine { width: min(100%, calc((100dvh - 150px) * 800 / 620)); grid-column: 1; grid-row: 1; }
  .machine-top { padding: 7px 10px; font-size: 7px; }
  .live { display: none; }
  .actions { padding: 5px; gap: 4px; }
  .actions button { padding: 9px 2px; font-size: 10px; }
  .actions small, .actions b { display: none; }
  .status { padding: 5px 8px; min-height: 50px; font-size: 8px; }
  #pause { padding: 7px; font-size: 9px; }
  .touch { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; justify-content: center; width: 100%; gap: 14px; margin: 0; }
  .dpad { margin: auto; }
  #choices:not([hidden]) { padding: 4px; gap: 4px; } #choices button { padding: 8px 4px; font-size: 9px; }
  #overlay h2 { font-size: 20px; } #overlay-copy { font-size: 8px; margin: 2px 0 6px; } #overlay .eyebrow { font-size: 6px; }
  #start { padding: 8px 12px; font-size: 11px; } .small { font-size: 7px; margin: 6px 0; }
}
/* 가로 화면의 데스크톱 터치 검사에서도 동일한 조작부를 그린다. */
.touch { user-select: none; -webkit-user-select: none; }
.touch button { border: 1px solid #454159; border-radius: 7px; background: #1a1828; min-width: 48px; height: 48px; touch-action: none; font-size: 17px; }
.dpad { display: grid; grid-template-columns: repeat(3, 48px); gap: 4px; }
.dpad button:first-child { grid-column: 2; }
.dpad button:nth-child(2) { grid-column: 1; }
.touch > button { width: 60px; height: 64px; font-size: 12px; }
.touch button.pressed { color: #f0ddff; background: #4c365e; }