/* Visszaváltás (vs-mag): on top of styles/palack.css (the page, the overlay, the touch stick). */
#overlay h1 span { color: #f2c14e; }
#start { margin-top: 18px; padding: 12px 34px; font-size: 20px; font-weight: 700; letter-spacing: .08em; border-radius: 10px;
  border: 2px solid #f2c14e; background: rgba(242,193,78,.16); }
#start:hover { background: rgba(242,193,78,.3); }
.boot .keys { margin-top: 16px; font-size: 13px; color: var(--dim); line-height: 1.6; }
body:has(.vs-tch:not(.hidden)) .boot .keys { display: none; }

/* ---- touch ---- */
.vs-tch { z-index: 15; }
.vs-b { position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); background: rgba(0,0,0,.35);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; width: 62px; height: 62px; padding: 0; touch-action: none; }
.vs-b.on, .vs-b:active { background: rgba(242,193,78,.4); }
.vs-light { right: calc(96px + var(--safe-r)); bottom: calc(22px + var(--safe-b)); width: 74px; height: 74px; font-size: 15px; }
.vs-heavy { right: calc(18px + var(--safe-r)); bottom: calc(70px + var(--safe-b)); }
.vs-kick { right: calc(170px + var(--safe-r)); bottom: calc(18px + var(--safe-b)); width: 56px; height: 56px; }
.vs-block { right: calc(96px + var(--safe-r)); bottom: calc(108px + var(--safe-b)); width: 58px; height: 58px; }
.vs-dodge { right: calc(22px + var(--safe-r)); bottom: calc(146px + var(--safe-b)); width: 52px; height: 52px; font-size: 10px; }
.vs-jump { right: calc(170px + var(--safe-r)); bottom: calc(84px + var(--safe-b)); width: 50px; height: 50px; font-size: 10px; }
.vs-zin, .vs-zout { width: 38px; height: 38px; font-size: 18px; right: calc(22px + var(--safe-r)); }
.vs-zin { top: calc(70px + var(--safe-t)); } .vs-zout { top: calc(114px + var(--safe-t)); }
.vs-use { position: absolute; right: calc(176px + var(--safe-r)); bottom: calc(148px + var(--safe-b)); min-width: 110px; height: 46px;
  border-radius: 23px; border: 2px solid #f2c14e; background: rgba(30,24,10,.7); font-weight: 700; font-size: 14px; padding: 0 14px;
  display: flex; align-items: center; gap: 6px; justify-content: center; }
.vs-use[hidden] { display: none; }
.vs-tch[data-mode="cut"] .vs-b, .vs-tch[data-mode="cut"] .vs-use, .vs-tch[data-mode="cut"] .tch-stick { display: none; }

/* ---- the HUD ---- */
.vs-hud { position: absolute; inset: 0; pointer-events: none; }
.vs-hud [hidden], .vs-end[hidden] { display: none !important; }
.vs-map { position: absolute; left: calc(18px + var(--safe-l)); bottom: calc(18px + var(--safe-b)); width: min(190px, 26cqh); height: min(190px, 26cqh);
  border-radius: 50%; overflow: hidden; border: 3px solid rgba(10,10,10,.85); box-shadow: 0 0 0 2px rgba(242,193,78,.35), 0 4px 14px rgba(0,0,0,.5); background: #1d1f22; }
.vs-map canvas { width: 100%; height: 100%; display: block; }
.vs-north { position: absolute; left: 0; top: 0; width: 14px; height: 16px; font-size: 11px; line-height: 16px; text-align: center; color: #fff;
  background: rgba(0,0,0,.6); border-radius: 50%; }
body:has(.vs-tch:not(.hidden)) .vs-map { left: calc(12px + var(--safe-l)); top: calc(12px + var(--safe-t)); bottom: auto; width: 118px; height: 118px; }
.vs-stats { position: absolute; right: calc(18px + var(--safe-r)); top: calc(14px + var(--safe-t)); text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  text-shadow: 0 2px 3px #000, 0 0 6px #000; }
.vs-hp { width: 150px; height: 9px; border: 2px solid rgba(0,0,0,.8); background: rgba(40,10,10,.7); border-radius: 3px; overflow: hidden; }
.vs-hp i { display: block; height: 100%; width: 100%; background: linear-gradient(#7bd36a, #3f9a33); transition: width .25s; }
.vs-hp.low i { background: linear-gradient(#e86a5a, #b0302a); }
.vs-money { font-size: 26px; font-weight: 800; color: #9fe08a; letter-spacing: .02em; }
.vs-bottles { font-size: 15px; font-weight: 700; color: #cfe9ff; min-height: 1px; }
body:has(.vs-tch:not(.hidden)) .vs-stats { right: calc(70px + var(--safe-r)); }
body:has(.vs-tch:not(.hidden)) .vs-money { font-size: 20px; }
.vs-marker { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; will-change: transform; }
.vs-marker svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)); animation: vs-bob 1.1s ease-in-out infinite; }
.vs-marker path { fill: #f2c14e; stroke: #3a2a00; stroke-width: 2; }
.vs-marker span { order: -1; font-size: 13px; font-weight: 700; text-shadow: 0 1px 3px #000; }
.vs-marker.edge svg { animation: none; transform: rotate(180deg); }
@keyframes vs-bob { 50% { transform: translateY(-6px); } }
.vs-bottom { position: absolute; left: 50%; bottom: calc(22px + var(--safe-b)); transform: translateX(-50%); width: min(760px, 70cqw);
  display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; text-align: center; }
.vs-obj { font-size: 19px; font-weight: 700; color: #fff; text-shadow: 0 2px 3px #000, 0 0 8px #000; }
.vs-obj::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 8px; background: #f2c14e; transform: rotate(45deg) translateY(-2px); }
.vs-sub { font-size: 20px; line-height: 1.3; color: #fff; background: rgba(0,0,0,.55); padding: 6px 14px; border-radius: 6px; }
.vs-sub b { font-weight: 800; margin-right: 8px; }
.vs-sub b::after { content: ':'; }
.vs-sub.whisper span { font-style: italic; opacity: .92; }
body:has(.vs-tch:not(.hidden)) .vs-bottom { width: 46cqw; left: 25cqw; transform: none; bottom: calc(10px + var(--safe-b)); }   /* between the stick and the fight buttons */
body:has(.vs-tch:not(.hidden)) .vs-sub { font-size: 15px; }
body:has(.vs-tch:not(.hidden)) .vs-obj { font-size: 14px; }
.vs-usehint { position: absolute; left: 50%; bottom: calc(120px + var(--safe-b)); transform: translateX(-50%); padding: 6px 14px; border-radius: 6px;
  background: rgba(0,0,0,.6); border: 1px solid rgba(242,193,78,.6); font-weight: 700; white-space: pre; }
.vs-floats { position: absolute; inset: 0; }
.vs-float { position: absolute; left: 0; top: 0; font-size: 20px; font-weight: 800; color: #9fe08a; text-shadow: 0 2px 3px #000; white-space: nowrap; }
.vs-tip { position: absolute; left: 50%; top: calc(18% + var(--safe-t)); transform: translateX(-50%); max-width: min(92%, 640px); padding: 7px 16px; border-radius: 10px;
  background: rgba(0,0,0,.55); border: 1px solid rgba(242,193,78,.5); font-size: 16px; text-align: center; pointer-events: none; }
.vs-tip[hidden] { display: none; } body:has(.vs-tch:not(.hidden)) .vs-tip { font-size: 13px; top: calc(16% + var(--safe-t)); }
.vs-banner { position: absolute; left: 0; right: 0; top: 30%; text-align: center; transition: opacity .6s; text-shadow: 0 3px 6px #000; }
.vs-banner h2 { margin: 0; font-size: clamp(30px, 6cqw, 64px); letter-spacing: .08em; color: #f2c14e; font-weight: 800; }
.vs-banner p { margin: 6px 0 0; font-size: 20px; }
.vs-banner.out { opacity: 0; }
.vs-lb { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height .5s; z-index: 2; }
.vs-lb-t { top: 0; } .vs-lb-b { bottom: 0; }
body.vs-cut .vs-lb { height: 11cqh; }
body.vs-cut .vs-hud > :not(.vs-bottom) { display: none; }
body.vs-cut .vs-bottom { z-index: 3; bottom: calc(1cqh + 4px); }
body.vs-cut .vs-obj { display: none; }
/* a cutscene: the line on the bottom bar, no box (the box straddled the bar's edge on a phone) */
body.vs-cut .vs-sub { background: transparent; text-shadow: 0 1px 3px #000, 0 0 2px #000; padding: 2px 8px; }
body.vs-cut:has(.vs-tch:not(.hidden)) .vs-bottom { width: 86cqw; left: 50%; transform: translateX(-50%); bottom: calc(2px + var(--safe-b)); }
.vs-skip { position: absolute; right: calc(18px + var(--safe-r)); top: calc(11cqh + 8px); font-size: 13px; opacity: .7; z-index: 3; }
.vs-fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 4; }
.vs-end { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(ellipse at center, rgba(30,10,8,.6), rgba(0,0,0,.92)); text-align: center; padding: 20px; z-index: 30; }
.vs-end.pass { background: radial-gradient(ellipse at center, rgba(30,24,8,.55), rgba(0,0,0,.92)); }
.vs-end h2 { margin: 0; font-size: clamp(30px, 6cqw, 60px); color: #e86a5a; letter-spacing: .06em; }
.vs-end.pass h2 { color: #f2c14e; }
.vs-end p { margin: 0; font-size: 20px; max-width: 640px; }
.vs-endstats { display: grid; grid-template-columns: auto auto; gap: 4px 18px; margin: 10px 0 0; font-size: 17px; }
.vs-endstats dt { text-align: right; opacity: .7; } .vs-endstats dd { margin: 0; text-align: left; font-weight: 700; }
.vs-endbtns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.vs-end button.share { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.1); }
.vs-end button { margin-top: 14px; padding: 10px 28px; font-size: 18px; font-weight: 700; border-radius: 10px; border: 2px solid #f2c14e; background: rgba(242,193,78,.16); }
.vs-mute { position: absolute; right: calc(18px + var(--safe-r)); top: calc(112px + var(--safe-t)); width: 36px; height: 36px; padding: 6px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); background: rgba(0,0,0,.35); z-index: 16; }
.vs-mute[hidden] { display: none; }
.vs-mute svg { width: 100%; height: 100%; display: block; }
.vs-mute path { fill: #e8e2d4; }
.vs-mute path.w, .vs-mute path.x { fill: none; stroke: #e8e2d4; stroke-width: 2; stroke-linecap: round; }
body:has(.vs-tch:not(.hidden)) .vs-mute { right: auto; left: calc(140px + var(--safe-l)); top: calc(12px + var(--safe-t)); }
body.vs-cut .vs-mute { display: none; }
.vs-pausebtn { top: calc(156px + var(--safe-t)); }
body:has(.vs-tch:not(.hidden)) .vs-pausebtn { top: calc(12px + var(--safe-t)); left: calc(184px + var(--safe-l)); }
.vs-pause { background: rgba(0,0,0,.72); z-index: 25; }
.vs-pause h2 { color: #f2c14e; }
.vs-pause .keys { font-size: 15px; line-height: 1.6; opacity: .85; max-width: 720px; }
.vs-pause .row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }