/* Settings gear + panel (settings.js). Uses the homepage tokens from style.css (--night, --night-glass, --wheat, --cream, --line,
   --display, --ease); fallbacks keep it readable if they are missing. */
/* owner tg 8041 「상단의 메뉴들 약간 낮춰줘」: the top icon row 10 px down from the edge (2 px under a notch), off the status bar;
   the seed chip and bag (shop/ui.js, shop/index.js) and the house home button (houses.js) follow it */
:root { --vg-top-row: max(10px, calc(env(safe-area-inset-top) + 2px)); }
.vg-gear {
  position: fixed; z-index: 2; opacity: 0.6; /* owner 10-31 「설정 버튼 반투명하게 하고 더 작게」: faint until hovered or pressed */
  top: var(--vg-top-row); right: max(4px, env(safe-area-inset-right)); /* owner tg 8041 (was max(2px, safe-area - 6px)); tg 6637 「약간위로」: 16 -> 8 px; tg 6821 「위로 조금만 더」 then 6837 「약간 내려」: 2 px (the 26 px disc inside the 44 px tap box 11 px from the top) */ /* owner 10-31 「오른쪽으로」: the disc 13 px from the edge; clear of the chat panel (top 72px) */
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%;
  background: var(--night-glass, rgba(15, 26, 51, 0.86)); color: var(--cream, #f4ecd8);
  border: 1px solid var(--line, rgba(244, 236, 216, 0.16)); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity 400ms ease, transform 200ms var(--ease, ease), border-color 150ms ease, color 150ms ease;
}
.vg-gear svg { transition: transform 400ms var(--ease, ease); }
.vg-gear:hover, .vg-gear:focus-visible, .vg-gear:active, .vg-gear[aria-expanded="true"] { opacity: 1; }
/* a 26 px disc and a 15 px icon inside the 44 px touch target (owner 10-31 「설정버튼이랑 말하기 버튼 줄여」) */
.vg-gear { background-clip: content-box; padding: 9px; border-color: transparent; box-shadow: none; }
.vg-gear::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1px solid var(--line, rgba(244, 236, 216, 0.16)); pointer-events: none; }
.vg-gear svg { width: 15px; height: 15px; }
.vg-gear:hover { border-color: var(--wheat, #e7b54a); color: var(--wheat, #e7b54a); }
.vg-gear:hover svg { transform: rotate(45deg); }
.vg-gear:active { transform: scale(0.94); }
.vg-gear:focus-visible { outline: 2px solid var(--wheat, #e7b54a); outline-offset: 3px; }
.vg-gear[aria-expanded="true"] { border-color: var(--wheat, #e7b54a); color: var(--wheat, #e7b54a); }
/* the one control that never hides (owner 10-31: the legal info lives in this panel once © Float is gone): while walking
   (body.is-walking, set by the walk chrome) it only shrinks and goes faint; hover or keyboard focus brings it back */
body.is-walking .vg-gear:not(:hover):not(:focus-visible):not([aria-expanded="true"]) { opacity: 0.4; transform: scale(0.82); box-shadow: none; }

.vgs {
  position: fixed; inset: 0; z-index: var(--z-modal, 100); display: grid; place-items: center; padding: 16px; /* top of style.css's scale */
  background: rgba(5, 9, 20, 0.5); animation: vgs-fade 220ms ease;
}
.vgs-card {
  width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--night, #0f1a33); color: var(--cream, #f4ecd8); border: 1px solid var(--line, rgba(244, 236, 216, 0.16));
  border-radius: 16px; padding: 18px 20px 20px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  -webkit-user-select: text; user-select: text; touch-action: pan-x pan-y; animation: vgs-rise 260ms var(--ease, ease); /* pan-x: the character strip scrolls sideways (tg 7171) */
}
.vgs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.vgs-head h2 { margin: 0; font-family: var(--display, serif); font-weight: 500; font-size: 1.7rem; color: var(--wheat, #e7b54a); letter-spacing: 0.01em; }
.vgs-x {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; color: var(--muted, #b9c3d9); font-size: 1.5rem; line-height: 1;
}
.vgs-x:hover, .vgs-x:focus-visible { color: var(--cream, #f4ecd8); background: rgba(244, 236, 216, 0.08); }
.vgs-sec { padding: 14px 0 4px; border-top: 1px solid var(--line, rgba(244, 236, 216, 0.16)); margin-top: 10px; }
.vgs-head + .vgs-sec { border-top: 0; margin-top: 0; padding-top: 8px; }
.vgs-sec h3 { margin: 0 0 10px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted, #b9c3d9); }
.vgs-sec h3 label { cursor: pointer; }

.vgs-name-row { display: flex; gap: 8px; }
.vgs-input {
  flex: 1; min-width: 0; font-family: var(--display, serif); font-size: 1.35rem; font-style: italic; color: var(--cream, #f4ecd8);
  background: rgba(244, 236, 216, 0.06); border: 1px solid var(--line, rgba(244, 236, 216, 0.16)); border-radius: 10px; padding: 6px 12px;
  transition: border-color 150ms ease;
}
.vgs-input:focus { outline: none; border-color: var(--wheat, #e7b54a); box-shadow: 0 0 0 3px rgba(231, 181, 74, 0.2); }
.vgs-input[aria-invalid="true"] { border-color: #e08a6f; }
.vgs-btn { border-radius: 10px; padding: 0 16px; min-height: 44px; }
.vgs-btn.primary { background: var(--wheat, #e7b54a); color: var(--night, #0f1a33); border: 0; font-weight: 600; }
.vgs-btn.primary:hover { filter: brightness(1.08); }
.vgs-btn:focus-visible { outline: 2px solid var(--cream, #f4ecd8); outline-offset: 2px; }
.vgs-under { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 6px; }
.vgs-hint { margin: 0; font-size: 0.8rem; color: var(--muted, #b9c3d9); line-height: 1.5; }
.vgs-msg { margin: 6px 0 0; min-height: 1.2em; font-size: 0.85rem; color: var(--wheat, #e7b54a); }
.vgs-msg.bad { color: #f0a58c; }
.vgs-msg:empty { min-height: 0; margin: 0; }
.vgs-link {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line, rgba(244, 236, 216, 0.16)); background: none; color: var(--cream, #f4ecd8); font-size: 0.85rem;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.vgs-link:hover { border-color: var(--wheat, #e7b54a); background: rgba(231, 181, 74, 0.08); }
.vgs-link:focus-visible { outline: 2px solid var(--wheat, #e7b54a); outline-offset: 2px; }
.vgs-link small { opacity: 0.7; }

.vgs-sliders { display: grid; gap: 4px; }
.vgs-slider { display: grid; grid-template-columns: minmax(84px, 7.5em) 1fr 2.4em; align-items: center; gap: 12px; min-height: 40px; }
.vgs-slider label { font-size: 0.92rem; }
.vgs-val { font-variant-numeric: tabular-nums; text-align: right; font-size: 0.85rem; color: var(--muted, #b9c3d9); }
.vgs-range {
  --fill: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: none; margin: 0; cursor: pointer;
}
.vgs-range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--wheat, #e7b54a) var(--fill), rgba(244, 236, 216, 0.18) var(--fill));
}
.vgs-range::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(244, 236, 216, 0.18); }
.vgs-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--wheat, #e7b54a); }
.vgs-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--cream, #f4ecd8);
  border: 2px solid var(--wheat, #e7b54a); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); transition: transform 150ms var(--ease, ease);
}
.vgs-range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--cream, #f4ecd8); border: 2px solid var(--wheat, #e7b54a);
}
.vgs-range:active::-webkit-slider-thumb { transform: scale(1.2); }
.vgs-range:focus { outline: none; }
.vgs-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(231, 181, 74, 0.35); }
.vgs-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(231, 181, 74, 0.35); }
.vgs.is-muted .vgs-sliders { opacity: 0.45; }

.vgs-mute { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: 4px; }
.vgs-mute label { font-size: 0.92rem; cursor: pointer; }
.vgs-switch {
  -webkit-appearance: none; appearance: none; position: relative; width: 46px; height: 26px; margin: 0; border-radius: 13px; cursor: pointer;
  background: rgba(244, 236, 216, 0.18); transition: background-color 200ms ease;
}
.vgs-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--cream, #f4ecd8);
  transition: transform 200ms var(--ease, ease);
}
.vgs-switch:checked { background: var(--wheat, #e7b54a); }
.vgs-switch:checked::after { transform: translateX(20px); background: var(--night, #0f1a33); }
.vgs-switch:focus-visible { outline: 2px solid var(--wheat, #e7b54a); outline-offset: 3px; }

.vgs-multi { display: flex; flex-wrap: wrap; gap: 8px; }

.vgs-biz { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 10px; font-size: 0.8rem; line-height: 1.5; }
.vgs-biz dt { color: var(--muted, #b9c3d9); }
.vgs-biz dd { margin: 0; overflow-wrap: anywhere; }
/* non-Korean pages: the English line under the registered Korean address / mail-order number (settings.js bizValue) */
.vgs-biz-en { display: block; margin-top: 1px; color: var(--muted, #b9c3d9); font-size: 0.95em; line-height: 1.45; overflow-wrap: break-word; text-wrap: pretty; }
.vgs-legal { margin: 6px 0 0; font-size: 0.82rem; line-height: 1.7; }
.vgs-legal a { color: var(--wheat, #e7b54a); text-underline-offset: 2px; }
.vgs-legal a:focus-visible { outline: 2px solid var(--wheat, #e7b54a); outline-offset: 2px; border-radius: 2px; }
.vgs-legal.trademark { font-size: 0.7rem; color: var(--muted, #b9c3d9); }

@keyframes vgs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vgs-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .vgs, .vgs-card { animation: none; }
  .vg-gear, .vg-gear svg, .vgs-switch, .vgs-switch::after { transition: none; }
}
@media (max-width: 420px) {
  .vgs { padding: 0; align-items: end; }
  .vgs-card { width: 100%; border-radius: 16px 16px 0 0; border-bottom: 0; max-height: 88dvh;
    padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .vgs-slider { grid-template-columns: 6.5em 1fr 2.2em; gap: 10px; }
}

/* language (settings.js langSection) */
.vgs-select {
  width: 100%; min-height: 44px; padding: 0 36px 0 12px; font: inherit; font-size: 0.95rem; color: var(--cream, #f4ecd8);
  background: rgba(244, 236, 216, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b9c3d9' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--line, rgba(244, 236, 216, 0.16)); border-radius: 10px; -webkit-appearance: none; appearance: none; cursor: pointer;
  transition: border-color 150ms ease;
}
.vgs-select:hover { border-color: var(--wheat, #e7b54a); }
.vgs-select:focus-visible { outline: none; border-color: var(--wheat, #e7b54a); box-shadow: 0 0 0 3px rgba(231, 181, 74, 0.2); }
.vgs-select option { color: #0f1a33; background: #f4ecd8; }
.vgs-select + .vgs-hint { margin-top: 6px; }
/* right-to-left (Arabic): the arrow on the left, the slider fill from the right like the native range */
[dir="rtl"] .vgs-select { padding: 0 12px 0 36px; background-position: left 12px center; }
[dir="rtl"] .vgs-range::-webkit-slider-runnable-track {
  background: linear-gradient(to left, var(--wheat, #e7b54a) var(--fill), rgba(244, 236, 216, 0.18) var(--fill));
}
[dir="rtl"] .vgs-val { text-align: left; }

/* long words (fi 「Taustamusiikki」, de, hu, nl …; controller 10-31 30-language check): the slider labels share one column as
   wide as the longest label (up to 48% of the row) instead of a fixed 7.5em that split words mid-letter; labels and headings
   hyphenate in the page language before any forced break */
.vgs-sliders { grid-template-columns: fit-content(48%) 1fr 2.4em; column-gap: 12px; row-gap: 4px; align-items: center; }
.vgs-slider { display: contents; }
.vgs-slider > label { min-height: 40px; display: flex; align-items: center; }
.vgs-card :is(label, h3, .vgs-hint, .vgs-link, .vgs-btn) { -webkit-hyphens: auto; hyphens: auto; }
@media (max-width: 420px) { .vgs-sliders { grid-template-columns: fit-content(48%) 1fr 2.2em; column-gap: 10px; } }

/* i18n layout pass 2 (controller 10-31, 360-shot review). Slider labels never break inside a word: no forced break
   (overflow-wrap: normal over the page's anywhere), a hyphenated break in the page language at most, and settings.js
   fitPanel() shrinks the label font when a word is still wider than its column. */
.vgs-slider > label { overflow-wrap: normal; word-break: normal; }
/* the legal links (controller 10-31): one row down to 11px (settings.js fitPanel(), measured with .is-fitting), else up to two
   lines; each link with the dot after it is one unbreakable piece, so no label splits and no line starts with a dot */
.vgs-legal-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.45em; }
.vgs-legal-row.is-fitting { flex-wrap: nowrap; }
.vgs-legal-item { flex: none; display: inline-flex; align-items: baseline; gap: 0.45em; white-space: nowrap; }
.vgs-sep { flex: none; color: var(--muted, #b9c3d9); }
.vgs-nowrap { white-space: nowrap; }
/* tracking breaks scripts whose letters join or stack (Thai, Arabic) */
:is(:lang(th), :lang(ar)) .vgs-sec h3 { letter-spacing: 0; text-transform: none; }
/* "Vincent's voice: AI voice (Fish Audio)" under the legal links */
.vgs-credit { font-size: 0.78rem; color: var(--muted, #b9c3d9); }

/* locked until Vincent's studio is found (settings.js lockedSection): the title dimmed, the line in wheat as a small hint */
.vgs-locked .vgs-lock-name { opacity: 0.55; }
.vgs-locked .vgs-hint { grid-column: 2 / -1; margin: 0; color: var(--wheat, #e7b54a); }

/* rows moved here from the chat panel (owner tg 5774 「다 설정으로 옮기고 아이콘 빼」): sign out as a plain text button, delete
   account last with its question inside the sheet */
.vgs-plain { background: none; border: 1px solid var(--line, rgba(244, 236, 216, 0.16)); color: var(--cream, #f4ecd8); }
.vgs-plain:hover { border-color: var(--wheat, #e7b54a); }
.vgs-delete-open { color: #f0a58c; }
.vgs-delete-open:hover { border-color: #f0a58c; background: rgba(240, 165, 140, 0.08); }
.vgs-delete-q { color: var(--cream, #f4ecd8); margin-bottom: 10px; }
.vgs-delete-row { display: flex; flex-wrap: wrap; gap: 8px; }
.vgs-danger { background: #b4442f; color: #fff; border: 0; font-weight: 600; }
.vgs-danger:hover { filter: brightness(1.1); }
.vgs-danger:disabled { opacity: 0.6; }

/* 「한 번 눌렀다 떼면 포커싱 풀리게」: on touch screens a tap leaves no hover colour behind (settings.js also blurs after a tap);
   the keyboard ring stays :focus-visible only */
@media (hover: none) {
  .vg-gear:hover:not([aria-expanded="true"]) { opacity: 0.6; border-color: transparent; color: var(--cream, #f4ecd8); }
  .vg-gear:hover svg { transform: none; }
  body.is-walking .vg-gear:hover:not(:focus-visible):not([aria-expanded="true"]) { opacity: 0.4; transform: scale(0.82); }
}

/* 시점: two buttons side by side instead of a select (owner tg 6195); the chosen one is filled wheat (aria-pressed="true") */
.vgs-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line, rgba(244, 236, 216, 0.16));
  border-radius: 10px; padding: 3px; background: rgba(244, 236, 216, 0.06); }
.vgs-seg-btn {
  min-height: 40px; padding: 4px 10px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 0.95rem; line-height: 1.25;
  color: var(--muted, #b9c3d9); cursor: pointer; overflow-wrap: normal; word-break: keep-all;
  transition: background-color 150ms ease, color 150ms ease;
}
.vgs-seg-btn:hover { color: var(--cream, #f4ecd8); }
.vgs-seg-btn[aria-pressed="true"] { background: var(--wheat, #e7b54a); color: var(--night, #0f1a33); font-weight: 600; cursor: default; }
.vgs-seg-btn:focus-visible { outline: 2px solid var(--cream, #f4ecd8); outline-offset: 2px; }
.vgs-seg + .vgs-btn { margin-top: 10px; }
/* 화질 (perf pass): 자동 / 높음 / 낮음 in three columns; long words may break inside the button rather than overflow it */
.vgs-seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vgs-seg-3 .vgs-seg-btn { padding: 4px 6px; overflow-wrap: anywhere; }
@media (hover: none) { .vgs-seg-btn:not([aria-pressed="true"]):hover { color: var(--muted, #b9c3d9); } }

/* Top bar (owner tg 7072, settings.js): the camera (first / third person; the small digit says which) and the eye (hide every
   on-screen control) left of the gear, the same 26 px disc in a 44 px tap box */
.vg-hud { position: fixed; z-index: 2; top: var(--vg-top-row); right: calc(max(4px, env(safe-area-inset-right)) + 40px);
  display: flex; flex-direction: row; }
.vg-hud-btn {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 9px; margin-left: -4px;
  border: 0; border-radius: 50%; background: var(--night-glass, rgba(15, 26, 51, 0.86)); background-clip: content-box;
  color: var(--cream, #f4ecd8); opacity: 0.6; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity 400ms ease, transform 200ms var(--ease, ease), color 150ms ease;
}
.vg-hud-btn::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1px solid var(--line, rgba(244, 236, 216, 0.16)); pointer-events: none; }
.vg-hud-btn svg { width: 15px; height: 15px; }
.vg-hud-n { position: absolute; right: 7px; bottom: 7px; min-width: 12px; height: 12px; padding: 0 2px; border-radius: 6px; box-sizing: border-box;
  background: var(--wheat, #e7b54a); color: #12161f; font: 700 9px/12px system-ui, sans-serif; text-align: center; pointer-events: none; }
.vg-hud-btn:hover, .vg-hud-btn:focus-visible, .vg-hud-btn:active { opacity: 1; color: var(--wheat, #e7b54a); }
.vg-hud-btn:active { transform: scale(0.94); }
.vg-hud-btn:focus-visible { outline: 2px solid var(--wheat, #e7b54a); outline-offset: -6px; }
body.is-walking .vg-hud-btn:not(:hover):not(:focus-visible) { opacity: 0.4; }
@media (hover: none) { .vg-hud-btn:hover:not(:focus-visible) { opacity: 0.6; color: var(--cream, #f4ecd8); } body.is-walking .vg-hud-btn:hover:not(:focus-visible) { opacity: 0.4; } }
body:has(#loading:not(.done)) .vg-hud { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .vg-hud-btn { transition: none; } }

/* Controls hidden (body.vg-hud-off): everything drawn over the view goes except the people's name tags and speech bubbles; the
   eye alone stays, moved into the gear's corner, to bring them back */
body.vg-hud-off :is(.vg-gear, .vg-hud-view, .ov-logo, .ov-steam-wrap, .ov-copy, .letter, #joystick, .near, .vg-policy,
  .vgm-chat, .vgm-emotes, .vgm-emote-sheet, .vgm-jump, .vgm-server, .vgm-float) { display: none !important; }
body.vg-hud-off .vg-hud { right: max(4px, env(safe-area-inset-right)); }
body.vg-hud-off .vg-hud-hide { opacity: 0.5; }