/* VirtuaSoul UI polish — responsive layout, clearer hierarchy, accessible controls.
   Separate override layer so the established game logic and visual assets stay intact. */
:root {
  --vs-bg: #111719;
  --vs-panel: #1b2225;
  --vs-panel-2: #222b2f;
  --vs-border: rgba(226, 232, 232, .13);
  --vs-text: #f4f5f2;
  --vs-muted: #b6c0c0;
  --vs-accent: #e2a84b;
  --vs-gold: #f4b544;
  --vs-danger: #e36b5d;
  --vs-radius: 12px;
  --vs-shadow: 0 12px 34px rgba(0,0,0,.24);
}
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  background-color: var(--vs-bg);
  background-image: linear-gradient(180deg, rgba(8,12,13,.78), rgba(8,12,13,.91)), url("../assets/imgs/bkgvs.jpeg");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  line-height: 1.5;
}
a { color: #f4bd60; text-underline-offset: 3px; }
a:hover { color: #ffda91; }
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--vs-gold);
  outline-offset: 3px;
}
.btn {
  --bs-btn-border-radius: 8px;
  min-height: 38px;
  font-weight: 650;
  letter-spacing: .005em;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  --bs-btn-bg: #c98220;
  --bs-btn-border-color: #d89536;
  --bs-btn-hover-bg: #e09a36;
  --bs-btn-hover-border-color: #efb251;
  --bs-btn-active-bg: #a86a17;
  --bs-btn-color: #17130d;
  --bs-btn-hover-color: #17130d;
  box-shadow: 0 4px 14px rgba(201,130,32,.14);
}
.btn-dark, .btn-outline-light, .btn-outline-secondary {
  --bs-btn-border-radius: 8px;
}
.btn-dark {
  --bs-btn-bg: #242c30;
  --bs-btn-border-color: #394448;
  --bs-btn-hover-bg: #303b40;
  --bs-btn-hover-border-color: rgba(244,181,68,.5);
}
.form-control, .form-select {
  min-height: 42px;
  border-radius: 8px;
  border-color: #3b484c;
  background-color: #151c1f;
  color: var(--vs-text);
}
.form-control::placeholder { color: #879394; }
.form-control:focus, .form-select:focus {
  border-color: var(--vs-gold);
  background-color: #151c1f;
  color: var(--vs-text);
  box-shadow: 0 0 0 .2rem rgba(244,181,68,.16);
}
.form-check-input:checked { background-color: #c98220; border-color: #d89536; }
.form-range { accent-color: var(--vs-gold); }
.vs-view {
  width: min(calc(100% - 32px), 1040px);
  min-height: 100dvh;
  padding: 118px 0 36px;
}
.vs-view.no-hud { width: min(100%, 1040px); padding: 0 20px 24px; }
.vs-view[data-route="bank"], .vs-view[data-route="farm"], .vs-view[data-route="shop"] {
  width: min(calc(100% - 32px), 1120px);
}
.vs-screen { min-height: calc(100dvh - 150px); animation: vs-polish-in .18s ease-out; }
@keyframes vs-polish-in { from { opacity: .72; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.vs-page-title { margin-bottom: 22px; }
.vs-page-title h1 { font-size: clamp(1.65rem, 2.7vw, 2.25rem); letter-spacing: -.035em; line-height: 1.12; }
.vs-page-title p { margin-top: 8px; max-width: 65ch; color: var(--vs-muted); font-size: .94rem; line-height: 1.55; }
.vs-section-label { margin: 24px 0 12px; }
.vs-section-label strong { font-size: .95rem; letter-spacing: -.01em; }
.vs-section-label span { color: var(--vs-muted); font-size: .78rem; }
.vs-footer { padding: 24px 0 4px; text-align: center; opacity: .8; }
.vs-copy { padding: clamp(20px, 4vw, 36px); border: 1px solid var(--vs-border); border-radius: var(--vs-radius); background: rgba(18,24,26,.92); box-shadow: var(--vs-shadow); line-height: 1.7; }
.vs-copy h1 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 18px; }
.vs-copy h2 { margin-top: 28px; font-size: 1.12rem; color: #f3c474; }
.vs-copy h3 { margin-top: 18px; font-size: .98rem; color: #e6e9e5; }
.vs-copy p, .vs-copy li { color: #d4dbd9; }
.vs-start-inner { width: min(100%, 420px); padding: 32px 24px; }
.vs-logo { width: clamp(150px, 24vw, 210px); margin-bottom: 30px; filter: drop-shadow(0 12px 24px rgba(0,0,0,.3)); }
.vs-start .btn-lg { min-width: 190px; min-height: 50px; border-radius: 10px; font-size: 1rem; }
.vs-version { line-height: 1.8; }
.vs-menu { max-width: 940px; margin: 0 auto; }
.vs-menu .vs-page-title { margin-bottom: 24px; }
.vs-menu-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.vs-tile {
  min-height: 126px;
  align-content: center;
  gap: 12px;
  padding: 18px 12px;
  border-color: var(--vs-border);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(37,47,50,.98), rgba(24,31,34,.98));
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
  font-size: .9rem;
  font-weight: 700;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.vs-tile .vs-ui-icon { width: 28px; height: 28px; color: var(--vs-gold); }
.vs-tile:hover, .vs-tile:focus-visible {
  border-color: rgba(244,181,68,.65);
  background: linear-gradient(145deg, #303a3d, #20282b);
  transform: translateY(-2px);
}
.vs-home-hero {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 18px;
  align-items: center;
  padding: clamp(18px,3vw,28px);
  border: 1px solid rgba(244,181,68,.22);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(54,46,31,.78), rgba(24,32,34,.96) 58%);
  box-shadow: var(--vs-shadow);
}
.vs-home-avatar { width: 74px; height: 74px; padding: 8px; border-radius: 15px; background: rgba(244,181,68,.1); border: 1px solid rgba(244,181,68,.22); }
.vs-home-avatar img { width: 100%; height: 100%; object-fit: contain; }
.vs-home-hero-copy h2 { font-size: clamp(1.05rem,2vw,1.45rem); margin: 4px 0 6px; }
.vs-home-hero-copy p { margin: 0; color: var(--vs-muted); font-size: .85rem; }
.vs-home-hero-copy small { color: var(--vs-gold); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.vs-home-stats { grid-column: 1/-1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.vs-home-stat { padding: 12px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(7,12,13,.34); }
.vs-home-stat small { display: block; color: var(--vs-muted); font-size: .72rem; margin-bottom: 5px; }
.vs-home-stat strong { font-size: 1rem; }
.vs-action-card { width: 100%; height: 100%; min-height: 138px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 18px; border-radius: 12px; text-align: left; background: rgba(27,35,38,.96); box-shadow: none; }
.vs-action-card .vs-action-icon { width: 24px; height: 24px; color: var(--vs-gold); }
.vs-action-card strong { font-size: .95rem; }
.vs-action-card span:last-child { color: var(--vs-muted); font-size: .8rem; line-height: 1.5; }
.vs-action-card:hover { border-color: rgba(244,181,68,.48); background: #232e31; }
.vs-cryosleep { border-radius: 12px; padding: 16px; gap: 14px; background: #1b2427; }
.vs-cryosleep-icon { color: var(--vs-gold); }
.vs-shop-screen { width: 100%; }
.vs-shop-head { margin-bottom: 18px; }
.vs-shop-categories { gap: 7px; margin-bottom: 14px; padding: 2px 1px 8px; }
.vs-shop-categories button { min-height: 38px; padding: 8px 15px; border-radius: 8px; font-size: .78rem; }
.vs-shop-categories button:hover { border-color: rgba(244,181,68,.48); }
.vs-shop-categories button.active { color: #ffcf7b; background: #392f20; border-color: rgba(244,181,68,.6); }
.vs-shop-list { border-radius: 12px; background: rgba(18,24,26,.94); }
.vs-shop-row { grid-template-columns: minmax(0,1fr) minmax(110px,auto) auto; gap: 18px; padding: 13px 16px; }
.vs-shop-row:hover { background: rgba(255,255,255,.025); }
.vs-shop-icon-wrap { width: 50px; height: 50px; flex-basis: 50px; border-radius: 10px; }
.vs-shop-icon { width: 31px; height: 31px; }
.vs-shop-name { font-size: .86rem; }
.vs-shop-product-copy small { max-width: 480px; font-size: .7rem; }
.vs-shop-prices b { font-size: .82rem; }
.vs-shop-prices small { font-size: .68rem; }
.vs-shop-actions .btn { min-height: 36px; }
.vs-shop-pager { padding: 14px 0 4px; }
.vs-card, .vs-card-grid > *, .vs-game-vacancy {
  border-color: var(--vs-border);
  border-radius: 12px;
}
.vs-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.vs-game-vacancy { display: grid; grid-template-columns: minmax(120px,.72fr) minmax(0,1.3fr); gap: 0; overflow: hidden; border: 1px solid var(--vs-border); background: #182023; box-shadow: 0 8px 24px rgba(0,0,0,.16); }
.vs-game-vacancy-art { min-height: 100%; position: relative; overflow: hidden; background: #101617; }
.vs-game-vacancy-art img { width: 100%; height: 100%; min-height: 210px; object-fit: cover; }
.vs-game-vacancy-body { min-width: 0; padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.vs-game-vacancy-body h3 { font-size: 1rem; line-height: 1.3; margin: 3px 0 0; }
.vs-game-vacancy-body p { color: var(--vs-muted); font-size: .8rem; line-height: 1.55; margin: 0; }
.vs-game-vacancy-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: auto; padding: 10px 0; color: #bdc7c6; font-size: .68rem; }
.vs-game-vacancy-meta b { color: var(--vs-gold); margin-right: 3px; }
.vs-vacancy-live { top: 10px; left: 10px; }
.vs-vacancy-empty { grid-column: 1/-1; padding: 40px 18px; border: 1px dashed var(--vs-border); border-radius: 12px; text-align: center; color: var(--vs-muted); }
.vs-vacancy-empty strong, .vs-vacancy-empty span { display: block; }
.vs-vacancy-empty strong { color: var(--vs-text); margin-bottom: 6px; }
.vs-map-panel {
  position: relative;
  min-height: clamp(380px, 48vw, 560px);
  padding: clamp(20px,4vw,38px);
  justify-content: flex-end;
  border: 1px solid var(--vs-border);
  border-radius: 16px;
  background-color: #172022;
  box-shadow: var(--vs-shadow);
  isolation: isolate;
}
.vs-map-panel::before { z-index: -1; }
.vs-map-copy {
  max-width: 680px;
  padding: clamp(18px,3vw,28px);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  background: rgba(12,17,18,.84);
}
.vs-map-copy h1 { margin-bottom: 8px; font-size: clamp(1.7rem,3.5vw,2.6rem); letter-spacing: -.03em; }
.vs-map-copy p { max-width: 58ch; color: #d2d8d6; line-height: 1.6; }
.vs-boss { width: clamp(96px,14vw,160px); height: clamp(96px,14vw,160px); object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.vs-map-panel + .d-flex { display: grid !important; grid-template-columns: 54px minmax(100px,auto) minmax(0,1fr) 54px; gap: 9px !important; }
.vs-map-panel + .d-flex .btn { min-height: 44px; }
.vs-game-frame { border: 1px solid var(--vs-border); border-radius: 12px; box-shadow: var(--vs-shadow); }
.vs-farm-screen { padding-top: 0; }
.vs-farm-fieldbar { border-color: var(--vs-border); border-radius: 12px; padding: 12px 14px; }
.vs-field-stage { border-color: var(--vs-border); border-radius: 12px; box-shadow: var(--vs-shadow); }
.vs-farm-weather-strip { padding: 9px 13px; }
.vs-farm-tabs { gap: 8px; }
.vs-farm-tab { min-height: 46px; border-radius: 9px; justify-content: center; }
.vs-farm-tab b { font-size: .82rem; }
.vs-farm-inspector { border-color: var(--vs-border); border-radius: 10px; }
.vs-farm-inspector summary { padding: 12px 14px; }
.vs-farm-inspector .vs-farm-info { padding: 12px 14px; }
.vs-farm-screen .vs-water-dashboard, .vs-farm-storage-panel { border-color: var(--vs-border); border-radius: 12px; padding: 16px; }
.vs-view[data-route="bank"] { width: min(calc(100% - 32px), 1120px); }
#bankTabs { gap: 8px; padding: 5px; border: 1px solid var(--vs-border); border-radius: 12px; background: rgba(15,21,23,.84); }
#bankTabs .nav-link { min-height: 42px; border-radius: 8px; font-weight: 700; }
#bankTabs .nav-link.active { color: #17130d; background: var(--vs-gold); }
#bankPanel .vs-card, #bankPanel .card { border-radius: 12px; border-color: var(--vs-border); background: rgba(24,32,35,.96); }
.vs-market-layout { gap: 14px; }
.vs-market-asset-list { border-radius: 10px; }
.vs-market-canvas, .vs-market-macd-canvas { border-radius: 10px; }
.vs-inventory-layout { gap: 14px; }
.vs-inventory-slots { gap: 8px; }
.vs-inventory-detail { border-radius: 12px; background: #1b2326; border-color: var(--vs-border); }
.vs-settings-center { min-height: 130px; padding: 18px; }
.vs-settings-actions { padding: 14px; gap: 8px; }
.vs-settings-actions .btn { min-height: 40px; }
.vs-settings-drawer { padding: 18px; }
.vs-kitchen-room { padding: 18px !important; }
.vs-kitchen-topbar { gap: 14px; padding-bottom: 14px; }
.vs-kitchen-stations { gap: 9px; }
.vs-kitchen-station { min-height: 98px; border-radius: 10px; }
.vs-kitchen-view-tabs { margin: 12px 0; border-radius: 9px; }
.vs-kitchen-layout { gap: 14px; }
.vs-kitchen-detail { border-radius: 12px; }
.vs-phone-modal { max-width: 410px; border-radius: 22px; }
.vs-phone-shell { padding: 14px; }
.vs-phone-screen { border-radius: 14px; }
.modal-backdrop.show { opacity: .78; }
.modal-backdrop { background-color: #050808; }
.modal-dialog { padding: 10px 0; }
.modal-dialog:not(.modal-fullscreen-sm-down) { width: min(calc(100% - 28px), 720px); max-width: 720px; margin-inline: auto; }
.modal-dialog.modal-lg { max-width: 900px; }
.modal-dialog.modal-xl { max-width: 1120px; }
.modal-content {
  overflow: hidden;
  border: 1px solid rgba(244,181,68,.18);
  border-radius: 15px;
  background: #192124;
  color: var(--vs-text);
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
}
.modal-header, .modal-footer { gap: 12px; padding: 16px 20px; border-color: var(--vs-border); background: #1d272a; }
.modal-header { min-height: 64px; }
.modal-title { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.modal-body { padding: 20px; }
.modal-footer { flex-wrap: wrap; }
.btn-close { flex: 0 0 auto; padding: 10px; border-radius: 8px; background-color: rgba(255,255,255,.06); filter: invert(1) grayscale(1); opacity: .85; }
.btn-close:hover { opacity: 1; background-color: rgba(255,255,255,.12); }
#startModal .modal-dialog, #mapInfoModal .modal-dialog, #bossModal .modal-dialog, #coinModal .modal-dialog, #cryosleepHelpModal .modal-dialog { max-width: 480px; }
#startModal .modal-body { padding: 24px; }
#startModal [data-action="pi-login"] { min-height: 48px; }
#gameModal .modal-dialog { max-width: 1080px; }
#gameModal .modal-body { max-height: min(76dvh, 780px); overflow-y: auto; overscroll-behavior: contain; }
#gameModal .modal-header .modal-title::before { content: "GAME LOBBY"; display: block; margin-bottom: 3px; color: var(--vs-gold); font-size: .62rem; letter-spacing: .12em; }
#inventoryModal .modal-body, #kitchenModal .modal-body, #marketChartModal .modal-body, #helpModal .modal-body { overscroll-behavior: contain; }
#shopCartModal .modal-body { max-height: min(65dvh, 600px); overflow-y: auto; }
#shopCartModal .modal-footer { justify-content: space-between; }
#shopCartModal [data-bind="cartTotal"] { font-size: 1.1rem; color: var(--vs-gold); }
#formModal .modal-body { max-height: 62dvh; overflow-y: auto; }
#formFields .vs-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
#formFields .form-label { min-width: 0; margin: 0; color: #d9dfdd; font-size: .8rem; font-weight: 650; }
.toast-container { z-index: 1090; width: min(100%, 480px); }
.toast { border: 1px solid var(--vs-border); border-radius: 10px; box-shadow: var(--vs-shadow); }
.dropdown-menu { border: 1px solid var(--vs-border); border-radius: 10px; padding: 6px; background: #1b2326; box-shadow: var(--vs-shadow); }
.dropdown-item { border-radius: 6px; color: #e8ece9; padding: 9px 12px; font-size: .82rem; }
.dropdown-item:hover, .dropdown-item:focus { color: #ffcf7b; background: #303126; }
.alert { border-radius: 10px; }
.progress { border-radius: 999px; overflow: hidden; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.12); }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #465256; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #68777b; background-clip: padding-box; }
@media (min-width: 1200px) {
  .vs-home .row { --bs-gutter-x: 16px; --bs-gutter-y: 16px; }
}
@media (max-width: 900px) {
  .vs-view, .vs-view[data-route="bank"], .vs-view[data-route="farm"], .vs-view[data-route="shop"] { width: min(calc(100% - 28px), 760px); }
  .vs-menu-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .vs-card-grid { grid-template-columns: 1fr; }
  .vs-game-vacancy { grid-template-columns: 150px minmax(0,1fr); }
  .vs-home-hero { gap: 14px; }
}
@media (max-width: 700px) {
  body { background-attachment: scroll; }
  .vs-view, .vs-view[data-route="bank"], .vs-view[data-route="farm"], .vs-view[data-route="shop"] { width: calc(100% - 24px); padding-top: 104px; padding-bottom: 28px; }
  .vs-view.no-hud { width: 100%; padding: 0 14px 24px; }
  .vs-page-title { margin-bottom: 18px; }
  .vs-page-title p { font-size: .84rem; }
  .vs-menu-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .vs-tile { min-height: 100px; padding: 12px 7px; gap: 9px; font-size: .78rem; }
  .vs-tile .vs-ui-icon { width: 24px; height: 24px; }
  .vs-home-hero { padding: 16px; grid-template-columns: 54px minmax(0,1fr); gap: 12px; border-radius: 12px; }
  .vs-home-avatar { width: 54px; height: 54px; border-radius: 12px; padding: 6px; }
  .vs-home-hero-copy h2 { font-size: 1rem; }
  .vs-home-hero-copy p { font-size: .75rem; }
  .vs-home-stats { gap: 6px; }
  .vs-home-stat { padding: 9px; }
  .vs-home-stat strong { font-size: .82rem; }
  .vs-home-stat small { font-size: .65rem; }
  .vs-action-card { min-height: 142px; padding: 13px; }
  .vs-cryosleep { align-items: flex-start; flex-wrap: wrap; }
  .vs-cryosleep .d-grid { width: 100%; grid-template-columns: 1fr 1fr; }
  .vs-shop-row { grid-template-columns: minmax(0,1fr) auto; padding: 12px; }
  .vs-shop-product-copy small { max-width: 48vw; }
  .vs-shop-actions { justify-content: flex-start; }
  .vs-shop-actions .btn { max-width: none; }
  .vs-map-panel { min-height: 430px; padding: 14px; border-radius: 12px; }
  .vs-map-copy { padding: 15px; }
  .vs-map-panel + .d-flex { grid-template-columns: 42px minmax(0,auto) minmax(0,1fr) 42px; gap: 6px !important; }
  .vs-map-panel + .d-flex .btn { padding-inline: 8px; font-size: .75rem; }
  .vs-boss { width: 96px; height: 96px; }
  .vs-farm-fieldbar { grid-template-columns: minmax(0,1fr) auto; }
  .vs-farm-weather-strip { gap: 7px; }
  .vs-farm-weather-strip>div:not(.vs-farm-weather-copy) { padding-right: 7px; }
  .modal-dialog { margin: 10px auto; }
  .modal-header, .modal-footer { padding: 13px 15px; }
  .modal-body { padding: 15px; }
  .vs-kitchen-room { padding: 14px !important; }
}
@media (max-width: 480px) {
  .vs-view, .vs-view[data-route="bank"], .vs-view[data-route="farm"], .vs-view[data-route="shop"] { width: calc(100% - 18px); }
  .vs-menu-grid { gap: 6px; }
  .vs-tile { min-height: 92px; font-size: .73rem; }
  .vs-home-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vs-action-card { min-height: 132px; }
  .vs-shop-head { align-items: flex-start; }
  .vs-cart-button { padding: 7px 9px; font-size: .75rem; }
  .vs-shop-row { gap: 7px; }
  .vs-shop-icon-wrap { width: 42px; height: 42px; flex-basis: 42px; }
  .vs-shop-icon { width: 25px; height: 25px; }
  .vs-shop-product { gap: 8px; }
  .vs-shop-product-copy small { max-width: 48vw; }
  .vs-shop-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vs-shop-actions .btn { width: 100%; min-height: 35px; padding: 6px; font-size: .7rem; }
  .vs-map-panel { min-height: 440px; }
  .vs-map-panel + .d-flex { grid-template-columns: 38px minmax(0,auto) minmax(0,1fr) 38px; gap: 4px !important; }
  .vs-map-panel + .d-flex .btn { min-height: 40px; padding: 5px; font-size: .69rem; }
  .vs-game-vacancy { grid-template-columns: 1fr; }
  .vs-game-vacancy-art img { height: 150px; min-height: 150px; max-height: 180px; }
  .vs-game-vacancy-body { padding: 13px; }
  .vs-game-vacancy-meta { font-size: .64rem; }
  #formFields .vs-form-grid { grid-template-columns: 1fr; gap: 12px; }
  #shopCartModal .modal-footer { align-items: stretch; }
  #shopCartModal .modal-footer .btn { width: 100%; }
  .vs-farm-fieldname strong { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* UI QA refinements: prevent image intrinsic sizing from covering game details. */
.vs-game-vacancy { grid-template-columns: minmax(145px,.62fr) minmax(0,1.38fr); align-items: stretch; }
.vs-game-vacancy-art { grid-column: 1; grid-row: 1; min-width: 0; width: auto; height: 100%; min-height: 0; align-self: stretch; }
.vs-game-vacancy-art img { display: block; width: 100%; min-width: 0; height: 100%; min-height: 210px; object-fit: cover; }
.vs-game-vacancy-body { grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }
.vs-game-vacancy-body .btn { margin-top: auto; }
@media (max-width: 560px) {
  .vs-hud-chip { font-size: 9px !important; gap: 4px; padding-inline: 3px; white-space: nowrap; }
  .vs-hud-chip .vs-ui-icon { width: 12px; height: 12px; flex: 0 0 12px; }
}
@media (max-width: 480px) {
  .vs-game-vacancy { grid-template-columns: minmax(0,1fr); }
  .vs-game-vacancy-art { grid-column: 1; grid-row: 1; width: auto; height: 150px; min-height: 0; aspect-ratio: auto; }
  .vs-game-vacancy-art img { height: 150px; min-height: 0; }
  .vs-game-vacancy-body { grid-column: 1; grid-row: 2; }
}

/* Final vacancy-card layout: artwork above details, no intrinsic-image grid overflow. */
.vs-game-vacancy { display: flex; flex-direction: column; min-width: 0; }
.vs-game-vacancy-art {
  position: relative;
  flex: 0 0 164px;
  width: 100% !important;
  max-width: 100%;
  height: 164px;
  min-width: 0 !important;
  min-height: 0;
  overflow: hidden;
  aspect-ratio: auto;
}
.vs-game-vacancy-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: 100% !important;
  min-width: 0;
  min-height: 0 !important;
  object-fit: cover;
}
.vs-game-vacancy-body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; grid-column: auto; grid-row: auto; }
@media (max-width: 480px) {
  .vs-game-vacancy-art { flex-basis: 150px; height: 150px; }
}

@media (max-width: 575.98px) {
  .modal-dialog.modal-fullscreen-sm-down {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-dialog.modal-fullscreen-sm-down .modal-content {
    min-height: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-dialog.modal-fullscreen-sm-down .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #gameModal .modal-body { max-height: none; flex: 1 1 auto; }
  #shopCartModal .modal-body { max-height: none; flex: 1 1 auto; }
}

@media (max-width: 700px) { html { scrollbar-gutter: auto; } }

/* Market dates use the fictional calendar; keep this clock visible above data. */
.vs-market-world-clock {
  display:flex; flex-direction:column; gap:4px; margin:0 0 14px; padding:13px 15px;
  border:1px solid rgba(255,199,106,.25); border-left:3px solid #ffc76a;
  background:linear-gradient(100deg,rgba(248,148,6,.10),rgba(18,22,24,.96) 62%);
}
.vs-market-world-clock > span { color:#ffc76a; font-size:9px; font-weight:900; letter-spacing:.14em; }
.vs-market-world-clock strong { color:#f4f1e9; font-size:15px; font-variant-numeric:tabular-nums; }
.vs-market-world-clock small { color:rgba(255,255,255,.48); font-size:11px; }

/* Inventory: quick find + category filter, with one obvious detail/action panel. */
.vs-inventory-toolbar {
  display:grid; grid-template-columns:minmax(150px,1fr) minmax(170px,1.1fr) minmax(145px,.8fr);
  align-items:center; gap:10px; margin-bottom:12px; padding:12px;
  border:1px solid var(--vs-border); background:rgba(10,13,15,.48);
}
.vs-inventory-capacity { display:grid; grid-template-columns:auto 1fr; align-items:baseline; column-gap:8px; }
.vs-inventory-capacity strong { color:#ffc76a; font-size:22px; line-height:1; }
.vs-inventory-capacity span { color:rgba(255,255,255,.78); font-size:11px; font-weight:800; }
.vs-inventory-capacity small { grid-column:1/-1; margin-top:5px; color:rgba(255,255,255,.45); font-size:10px; }
#inventorySearch,#inventoryCategory { min-width:0; min-height:40px; font-size:12px; }
.vs-inventory-empty-state { grid-column:1/-1; padding:24px 12px; text-align:center; color:rgba(255,255,255,.55); border:1px dashed var(--vs-border); }
#inventoryModal .vs-inventory-slot.empty { cursor:default; opacity:.48; min-height:88px; }
#inventoryModal .vs-inventory-slot.empty span { color:rgba(255,255,255,.55); font-size:10px; }
#inventoryModal .vs-inventory-detail > strong { font-size:17px; line-height:1.3; }
#inventoryModal .vs-quantity-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
#inventoryModal .vs-quantity-actions .btn { min-height:40px; }

/* Kitchen tabs now genuinely focus the selected task instead of leaving every
   panel competing for attention at once. */
#kitchenModal[data-kitchen-view="recipes"] .vs-kitchen-history-head,
#kitchenModal[data-kitchen-view="recipes"] .vs-kitchen-history-head + .vs-list { display:none; }
#kitchenModal[data-kitchen-view="dish"] .vs-kitchen-section-head,
#kitchenModal[data-kitchen-view="dish"] #recipeGrid,
#kitchenModal[data-kitchen-view="dish"] .vs-kitchen-history-head,
#kitchenModal[data-kitchen-view="dish"] .vs-kitchen-history-head + .vs-list { display:none; }
#kitchenModal[data-kitchen-view="dish"] .vs-kitchen-layout { grid-template-columns:minmax(0,1fr); }
#kitchenModal[data-kitchen-view="dish"] .vs-kitchen-detail { max-width:none; }
#kitchenModal[data-kitchen-view="log"] .vs-kitchen-section-head,
#kitchenModal[data-kitchen-view="log"] #recipeGrid,
#kitchenModal[data-kitchen-view="log"] .vs-kitchen-detail { display:none; }
#kitchenModal[data-kitchen-view="log"] .vs-kitchen-history-head { margin-top:0; padding-top:0; border-top:0; }
#kitchenModal[data-kitchen-view="log"] .vs-kitchen-history-head + .vs-list { max-height:none; }
#kitchenModal .vs-kitchen-view-tabs { position:sticky; top:-1px; z-index:4; background:#171b1e; }
#kitchenModal .vs-kitchen-view-tabs button { min-height:40px; font-size:12px; }
#kitchenModal .vs-kitchen-room .vs-recipe-slot small { font-size:10px; line-height:1.35; }
#kitchenModal .vs-ingredient-list > div { display:flex; justify-content:space-between; gap:12px; }
#kitchenModal .vs-ingredient-list > div b { font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (max-width: 700px) {
  .vs-inventory-toolbar { grid-template-columns:1fr 1fr; }
  .vs-inventory-capacity { grid-column:1/-1; }
  #inventoryModal .vs-inventory-layout { grid-template-columns:1fr; }
  #inventoryModal .vs-inventory-slots { max-height:44dvh; }
  #inventoryModal .vs-inventory-detail { position:static; max-height:none; }
  #kitchenModal .vs-kitchen-stations { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #kitchenModal .vs-kitchen-station { grid-template-columns:1fr; grid-template-rows:auto auto auto; text-align:center; justify-items:center; gap:4px; padding:8px 4px; min-height:94px; }
  #kitchenModal .vs-kitchen-station i { grid-row:auto; }
  #kitchenModal .vs-kitchen-station small { font-size:9px; }
}

/* Always-visible system refresh action in Settings */
.vs-system-refresh-panel { padding: 18px; border-top: 1px solid var(--vs-border); }
.vs-system-refresh-panel h6 { margin: 0 0 8px; color: var(--vs-gold); }
.vs-system-refresh-panel .btn { min-height: 42px; }

/* Simplified kitchen: one recipe list, one clear cook action */
.vs-kitchen-simple-help{padding:12px 14px;margin:0 0 14px;border:1px solid var(--vs-border);border-left:3px solid var(--vs-gold);background:rgba(255,255,255,.025);font-size:.9rem;color:var(--vs-text-muted,#b9bec5)}
.vs-kitchen-simple-help strong{color:var(--vs-gold)}
.vs-kitchen-room .vs-kitchen-layout{display:flex;flex-direction:column;gap:14px}
.vs-kitchen-room .vs-kitchen-detail{width:100%;position:static}
.vs-kitchen-room .vs-kitchen-detail-head{display:none}
.vs-kitchen-room .vs-kitchen-topbar .vs-kitchen-resources span:last-child{display:none}
.vs-kitchen-room .vs-kitchen-section-head small{display:none}
.vs-kitchen-room .vs-kitchen-section-head h6{font-size:1.05rem}
.vs-kitchen-room .vs-recipe-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.vs-kitchen-room .vs-recipe-slot{min-width:0;padding:10px;text-align:left}
.vs-kitchen-room .vs-recipe-slot img{width:42px;height:42px;object-fit:contain}
.vs-kitchen-room .vs-recipe-slot small{display:block;line-height:1.25}
.vs-kitchen-room .vs-recipe-meta{display:flex;flex-wrap:wrap;gap:6px}
.vs-kitchen-room .vs-recipe-meta span{font-size:.78rem;padding:4px 7px;background:rgba(255,255,255,.04);border:1px solid var(--vs-border)}
.vs-kitchen-room .vs-ingredient-list>div{padding:8px 10px}
.vs-kitchen-room #recipeDetail h3{font-size:1.2rem;margin:.5rem 0}
.vs-kitchen-room #recipeDetail p{font-size:.9rem;margin-bottom:.65rem}
.vs-kitchen-room #recipeDetail [data-cook]{min-height:46px;font-weight:700}
.vs-kitchen-room .vs-kitchen-history-head{margin-top:12px}
@media(min-width:768px){.vs-kitchen-room .vs-kitchen-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);align-items:start}.vs-kitchen-room .vs-recipe-picker{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* Farm UX refresh: fewer competing surfaces, clearer actions, and comfortable touch targets. */
.vs-farm-screen .vs-farm-shell{gap:12px}
.vs-farm-screen .vs-farm-fieldbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:14px;border-radius:14px}
.vs-farm-screen .vs-farm-weather-mini{grid-column:1/-1;grid-row:2;min-width:0}
.vs-farm-screen .vs-farm-quick{grid-column:2;grid-row:1;display:flex;gap:6px}
.vs-farm-screen .vs-field-stage{overflow:hidden;border-radius:14px}
.vs-farm-screen .vs-farm-canvas{touch-action:pan-y;min-height:260px}
.vs-farm-screen .vs-farm-weather-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 12px}
.vs-farm-screen .vs-farm-weather-copy{grid-column:1/-1;font-size:.78rem;opacity:.75}
.vs-farm-screen .vs-farm-tabs{position:sticky;bottom:8px;z-index:5;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:6px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(15,19,23,.96);backdrop-filter:blur(12px)}
.vs-farm-screen .vs-farm-tab{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:8px 5px;border-radius:10px;font-size:.82rem}
.vs-farm-screen .vs-farm-tab b{font-size:.78rem;white-space:nowrap}
.vs-farm-screen .vs-farm-tab-panel{margin-top:10px}
.vs-farm-screen .vs-farm-inspector summary{padding:13px;cursor:pointer}
.vs-farm-screen .vs-farm-info{display:flex;flex-wrap:wrap;gap:8px;padding:12px}
.vs-farm-screen .vs-farm-info>span{font-size:.84rem;padding:6px 8px;background:rgba(255,255,255,.045);border-radius:7px}
.vs-animal-summary{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:10px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.035)}
.vs-animal-emoji{font-size:2rem}.vs-animal-summary strong,.vs-animal-summary small,.vs-animal-plot-copy strong,.vs-animal-plot-copy small{display:block}.vs-animal-summary small,.vs-animal-plot-copy small{color:var(--bs-secondary-color);font-size:.82rem;margin-top:3px}
.vs-animal-plot-list{display:grid;gap:8px}.vs-animal-plot-row{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.025)}
.vs-animal-plot-icon{font-size:1.45rem;width:36px;text-align:center}.vs-animal-plot-copy{flex:1;min-width:0}.vs-animal-plot-row .btn{white-space:normal;max-width:48%;font-size:.8rem}.vs-animal-note{font-size:.8rem;color:var(--bs-secondary-color);margin:12px 2px 0}
@media(max-width:520px){.vs-farm-screen .vs-farm-fieldbar{padding:10px}.vs-farm-screen .vs-farm-weather-mini{font-size:.82rem}.vs-farm-screen .vs-farm-quick .btn{padding:.35rem .5rem}.vs-farm-screen .vs-farm-tab{flex-direction:column;gap:3px;min-height:54px}.vs-farm-screen .vs-farm-tab b{font-size:.7rem}.vs-animal-plot-row{flex-wrap:wrap}.vs-animal-plot-copy{flex:1 1 calc(100% - 50px)}.vs-animal-plot-row .btn{max-width:none;width:100%}}

.vs-farm-screen .vs-farm-tab .vs-coming-soon-tag{display:block;font-size:.58rem;line-height:1.1;color:#d6a84b;font-weight:600;white-space:nowrap}
.vs-animal-coming-soon{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:22px 14px;margin-top:12px;border:1px dashed rgba(214,168,75,.45);border-radius:12px;background:rgba(214,168,75,.05)}
.vs-animal-coming-soon>span{font-size:2rem}.vs-animal-coming-soon strong{font-size:1rem}.vs-animal-coming-soon small{max-width:360px;color:var(--bs-secondary-color);font-size:.82rem}

/* Private VirtuaSoul Pet Home test entry points */
.vs-pet-home-card { border-color: rgba(240,184,75,.28); }
.vs-pet-home-emoji { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(240,184,75,.12); font-size: 1.45rem; }
.vs-pet-modal-dialog { max-width: 1180px; }
.vs-pet-modal-content { overflow: hidden; background: #101311; }
#petHomeFrame { display: block; width: 100%; height: min(78vh, 850px); border: 0; background: #101311; }
.vs-phone-pet-alert { position: relative; border-color: rgba(240,184,75,.5) !important; }
.vs-pet-alert-dot { display: inline-flex !important; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #f0b84b; color: #17130a; font-style: normal; font-size: .72rem; font-weight: 900; }
.vs-pet-alert-heading { color: #f0b84b; }
@media (max-width: 575.98px) { #petHomeFrame { height: calc(100dvh - 70px); } }

/* Cozy village home map */
.vs-village-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.vs-village-heading h1{margin:.25rem 0 .35rem}.vs-village-heading p{max-width:580px}.vs-weather-pill,.vs-travel-stamp{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid rgba(244,181,68,.23);border-radius:999px;background:rgba(244,181,68,.09);color:#f8cf7a;white-space:nowrap;font-size:.8rem}.vs-village-map{height:360px;position:relative;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.15);border-radius:18px;background:linear-gradient(#9bd6e6 0%,#c3e9d8 46%,#7fbf78 46%,#5a9a61 100%);box-shadow:0 16px 40px #0004;margin-bottom:24px}.vs-village-sky{position:absolute;inset:0 0 48%}.vs-cloud{position:absolute;color:#fff9;font-size:48px;line-height:1}.cloud-one{left:13%;top:12%}.cloud-two{right:24%;top:24%;font-size:36px}.vs-sun{position:absolute;right:8%;top:9%;color:#ffda78;font-size:40px;text-shadow:0 0 26px #ffe8a4}.vs-village-hill{position:absolute;border-radius:50%;pointer-events:none}.hill-back{width:130%;height:210px;left:-14%;top:30%;background:#91c982;transform:rotate(-5deg)}.hill-front{width:125%;height:210px;left:-10%;top:48%;background:#5da565;transform:rotate(4deg)}.vs-village-path{position:absolute;background:#d9bd8a;border:3px solid #eedbb0;box-shadow:inset 0 0 0 2px #bda16e}.path-horizontal{height:38px;left:-5%;right:-5%;top:60%;transform:rotate(-5deg);border-left:0;border-right:0}.path-vertical{width:36px;top:38%;bottom:-8%;left:49%;transform:rotate(18deg);border-top:0;border-bottom:0}.vs-village-spot{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:94px;padding:6px 8px 8px;border:1px solid #ffffff85;border-radius:13px;background:#18251dd9;color:#fff;box-shadow:0 6px 16px #17371c44;transition:transform .18s,border-color .18s}.vs-village-spot:hover{transform:translateY(-4px) scale(1.03);border-color:#ffe19a}.vs-village-spot>span{font-size:35px;line-height:1.2;filter:drop-shadow(0 3px 1px #0003)}.vs-village-spot b{font-size:.78rem}.vs-village-spot small{font-size:.65rem;color:#d2e4d0}.spot-home{left:7%;top:29%}.spot-shop{right:8%;top:34%}.spot-farm{left:14%;bottom:9%}.spot-pet{left:43%;top:39%}.spot-gate{right:8%;bottom:8%}.vs-village-tree,.vs-village-flower{position:absolute;z-index:1;font-size:29px;filter:drop-shadow(0 3px 1px #0002)}.tree-one{left:3%;bottom:9%}.tree-two{left:37%;top:22%}.tree-three{right:30%;bottom:8%}.flower-one{left:29%;bottom:7%}.flower-two{right:30%;top:53%;font-size:23px}.vs-village-sign{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);font-size:.68rem;white-space:nowrap;background:#263c2bdc;color:#f8f1d7;padding:4px 12px;border-radius:999px;z-index:3}.vs-village-sign span{color:#f5c75e;margin:0 5px}.vs-home-hero{margin-bottom:22px}

/* Journey map: village edge, scenic route, destination cards and animated bus */
.vs-travel-screen{padding-bottom:20px}.vs-travel-heading,.vs-city-picker-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}.vs-travel-heading h1{font-size:clamp(1.55rem,3vw,2.2rem);margin:.25rem 0 .4rem}.vs-travel-heading p,.vs-city-picker-head p{color:var(--vs-muted);margin:0;max-width:610px}.vs-travel-scene{position:relative;isolation:isolate;height:300px;overflow:hidden;border-radius:18px;border:1px solid #ffffff20;background:linear-gradient(#9ad6eb 0%,#d0f0dd 55%,#91c77e 55%,#73ad68 100%);box-shadow:0 14px 35px #0003}.vs-travel-sky{position:absolute;inset:0 0 42%;z-index:0}.vs-travel-sky>span{position:absolute;right:7%;top:10%;font-size:40px}.travel-cloud{position:absolute;color:#fff9;font-size:39px;font-style:normal}.cloud-a{left:18%;top:20%}.cloud-b{left:63%;top:8%;font-size:29px}.vs-travel-hill{position:absolute;z-index:0;border-radius:50%;pointer-events:none}.travel-hill-a{width:130%;height:210px;left:-15%;top:20%;background:#8dc982;transform:rotate(-4deg)}.travel-hill-b{width:125%;height:190px;left:-10%;top:42%;background:#4f9a63;transform:rotate(4deg)}.vs-travel-road{position:absolute;z-index:1;left:-5%;right:-5%;height:76px;bottom:9px;background:#b99c72;border-top:6px solid #e4d0a7;border-bottom:6px solid #e4d0a7;transform:rotate(-2deg);box-shadow:0 0 0 1px #816c53}.road-dashes{position:absolute;left:0;right:0;top:31px;border-top:4px dashed #f8e9bd}.vs-travel-landmark{position:absolute;z-index:2;left:24px;top:20px;display:flex;align-items:center;gap:14px;max-width:min(76%,560px);padding:12px 16px 12px 12px;border:1px solid #ffffff80;border-radius:15px;background:#14201edb;color:#fff;box-shadow:0 9px 25px #0003;transition:transform .4s,opacity .4s}.vs-travel-landmark img{width:88px;height:72px;object-fit:cover;border-radius:10px;border:1px solid #ffffff4a}.vs-travel-landmark small{font-size:.65rem;color:#f4c875;letter-spacing:.12em;font-weight:800}.vs-travel-landmark h2{font-size:1.1rem;margin:3px 0}.vs-travel-landmark p{font-size:.78rem;color:#d8e2dc;margin:0;max-width:390px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.vs-travel-bus{position:absolute;z-index:4;left:11%;bottom:36px;width:102px;height:43px;border:3px solid #8b501c;border-radius:11px 15px 7px 7px;background:#e6a33c;box-shadow:0 5px 0 #0002;transition:left 1.35s cubic-bezier(.4,0,.2,1),transform .3s}.vs-travel-bus:before{content:"";position:absolute;left:8px;right:8px;top:6px;height:16px;background:#c6eff4;border:2px solid #8b501c;border-radius:4px}.vs-travel-bus .bus-sign{position:absolute;z-index:1;right:10px;top:8px;font-size:9px;font-weight:900;color:#51351d}.vs-travel-bus .bus-window{display:none}.vs-travel-bus .bus-wheel{position:absolute;bottom:-8px;width:18px;height:18px;background:#252a2b;border:4px solid #d6d7c8;border-radius:50%}.wheel-left{left:13px}.wheel-right{right:13px}.vs-travel-scene.is-travelling .vs-travel-bus{left:calc(100% - 125px);transform:translateY(-5px) rotate(-1deg)}.vs-travel-scene.is-travelling .vs-travel-landmark{transform:translateX(-9px);opacity:.72}.vs-travel-scene.just-arrived .vs-travel-landmark{animation:landmark-pop .6s ease}.vs-travel-scene.just-arrived .vs-travel-bus{left:11%}.vs-travel-status{position:absolute;z-index:5;left:50%;bottom:13px;transform:translateX(-50%);max-width:calc(100% - 24px);width:max-content;text-align:center;padding:6px 12px;border:1px solid #ffffff8c;border-radius:999px;background:#17231ee8;color:#fff;font-size:.75rem;box-shadow:0 3px 12px #0002}.vs-city-picker-head{align-items:center;margin:22px 0 12px}.vs-city-picker-head h2{font-size:1.08rem;margin:0 0 4px}.vs-city-picker-head>span{font-size:.75rem;color:var(--vs-muted);white-space:nowrap}.vs-city-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.vs-city-card{padding:0;text-align:left;overflow:hidden;border:1px solid var(--vs-border);border-radius:13px;background:var(--vs-panel);color:var(--vs-text);transition:transform .18s,border-color .18s,background .18s}.vs-city-card:hover{transform:translateY(-3px);border-color:#d6a347}.vs-city-card.active{border-color:#f4b544;box-shadow:0 0 0 1px #f4b54455;background:#2c2a20}.vs-city-card-art{height:75px;position:relative;display:block;background:linear-gradient(#83c6d8,#bfe2bd 58%,#65985a 58%);overflow:hidden}.vs-city-card-art:before{content:"";position:absolute;inset:0;background-image:linear-gradient(0deg,#1c28243d,#1c282400),var(--city-art);background-size:cover;background-position:center;opacity:.66}.vs-city-pin{position:absolute;left:9px;top:8px;font-size:20px;filter:drop-shadow(0 2px 3px #0005)}.vs-city-check{display:none;position:absolute;right:7px;top:7px;width:22px;height:22px;border-radius:50%;background:#f4b544;color:#242016;text-align:center;font-weight:900}.vs-city-card.active .vs-city-check{display:block}.vs-city-card-copy{display:flex;flex-direction:column;gap:4px;padding:10px}.vs-city-card-copy b{font-size:.78rem;line-height:1.25}.vs-city-card-copy small{font-size:.69rem;color:var(--vs-muted)}.vs-city-card.active .vs-city-card-copy small{color:#f4ca72}.vs-travel-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}.vs-travel-actions .btn{min-height:42px}@keyframes landmark-pop{0%{transform:scale(.97)}65%{transform:scale(1.02)}100%{transform:scale(1)}}
@media(max-width:700px){.vs-village-map{height:345px;border-radius:14px}.vs-village-spot{min-width:78px;padding:5px 6px 6px}.vs-village-spot>span{font-size:29px}.vs-village-spot b{font-size:.68rem}.vs-village-spot small{font-size:.58rem}.spot-home{left:3%;top:30%}.spot-shop{right:3%;top:30%}.spot-farm{left:4%;bottom:9%}.spot-pet{left:40%;top:40%}.spot-gate{right:3%;bottom:8%}.path-vertical{left:48%}.vs-weather-pill{font-size:0;padding:8px}.vs-weather-pill span{font-size:.7rem}.vs-travel-heading{align-items:flex-start}.vs-travel-stamp{font-size:0;padding:8px}.vs-travel-stamp:first-letter{font-size:1rem}.vs-travel-scene{height:280px;border-radius:14px}.vs-travel-landmark{left:12px;top:14px;max-width:calc(100% - 24px);gap:10px;padding:9px}.vs-travel-landmark img{width:68px;height:62px}.vs-travel-landmark h2{font-size:.98rem}.vs-travel-landmark p{font-size:.7rem}.vs-travel-bus{bottom:38px;transform:scale(.88);transform-origin:left bottom}.vs-travel-scene.is-travelling .vs-travel-bus{left:calc(100% - 105px)}.vs-travel-status{font-size:.66rem;bottom:12px}.vs-city-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.vs-city-card-art{height:66px}.vs-city-card-copy{padding:9px}.vs-city-card-copy b{font-size:.78rem}.vs-travel-actions{display:grid;grid-template-columns:1fr 1.3fr}.vs-travel-actions .btn{padding-inline:8px;font-size:.78rem}.vs-city-picker-head h2{font-size:1rem}.vs-city-picker-head p{font-size:.77rem}.vs-city-picker-head>span{font-size:.68rem}}
@media(prefers-reduced-motion:reduce){.vs-travel-bus,.vs-travel-landmark,.vs-city-card,.vs-village-spot{transition:none!important;animation:none!important}}

/* Use the game's existing illustrated icons rather than emoji glyphs, which vary by platform. */
.vs-village-spot>img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 3px 2px #0002)}.vs-village-tree{width:29px;height:35px;font-size:0;filter:none}.vs-village-tree:before{content:"";position:absolute;left:2px;top:0;width:25px;height:25px;border-radius:55% 55% 48% 48%;background:#276b42;border:2px solid #9acb81;box-shadow:inset -4px -2px #1f5738}.vs-village-tree:after{content:"";position:absolute;left:12px;top:22px;width:7px;height:13px;background:#805a36;border-radius:2px}.tree-two:before{background:#286b49;clip-path:polygon(50% 0,100% 75%,75% 75%,100% 100%,0 100%,25% 75%,0 75%)}.vs-village-flower{width:13px;height:13px;font-size:0;border-radius:50%;background:#f9d35b;box-shadow:0 -7px 0 -2px #fff3b8,0 7px 0 -2px #fff3b8,7px 0 0 -2px #fff3b8,-7px 0 0 -2px #fff3b8}.vs-city-pin{display:grid;place-items:center;width:29px;height:29px;border-radius:50% 50% 50% 6px;transform:rotate(-45deg);background:#eab24e;color:#3b2a11;font-size:10px;font-weight:900;box-shadow:0 2px 6px #0004}.vs-city-pin::first-letter{transform:rotate(45deg)}.vs-travel-sun{position:absolute;right:7%;top:10%;width:30px;height:30px;border-radius:50%;background:#ffd86c;box-shadow:0 0 0 7px #ffe9a544,0 0 25px #ffe9a5}.vs-compass-mark{width:19px;height:19px;border:2px solid #f3c66a;border-radius:50%;display:inline-block;position:relative}.vs-compass-mark:after{content:"";position:absolute;left:6px;top:2px;width:4px;height:11px;background:#f3c66a;clip-path:polygon(50% 0,100% 100%,50% 75%,0 100%)}
.vs-travel-bus{width:112px;height:48px;z-index:5}.vs-travel-bus:before{height:19px;right:9px;left:9px;background:linear-gradient(90deg,#b9eaf1 0 42%,#e6a33c 42% 48%,#b9eaf1 48% 100%)}.vs-travel-bus .bus-sign{top:10px;right:14px}.vs-travel-bus .bus-wheel{bottom:-8px}
.vs-city-pin{transform:none;border-radius:50%}.vs-city-pin::first-letter{transform:none}

/* Main dashboard hometown map (the first screen after login) */
.vs-town-grid{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:18px 10px 22px;border:1px solid rgba(255,255,255,.22);border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#a7dce8 0%,#d3ead0 32%,#91c97e 32%,#6fae68 100%);box-shadow:0 16px 36px #0003}
.vs-town-grid:before{content:"";position:absolute;z-index:-1;left:-10%;right:-10%;top:38%;height:115px;border:16px solid #f1d9a5;border-left:0;border-right:0;background:#c9ae7b;transform:rotate(-7deg);box-shadow:0 0 0 3px #fff4,inset 0 0 0 2px #b39461}
.vs-town-grid:after{content:"";position:absolute;z-index:-1;width:38px;top:18%;bottom:-10%;left:48%;background:#c9ae7b;border-left:4px solid #f1d9a5;border-right:4px solid #f1d9a5;transform:rotate(13deg);opacity:.95}
.vs-town-grid .vs-tile{position:relative;z-index:1;min-width:0;min-height:108px;padding:12px 5px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid #ffffffa8;border-radius:15px;background:linear-gradient(145deg,rgba(37,60,48,.93),rgba(26,35,37,.94));color:#fff;box-shadow:0 5px 12px #203d2544;transition:transform .18s,border-color .18s,box-shadow .18s}
.vs-town-grid .vs-tile:hover,.vs-town-grid .vs-tile:focus-visible{transform:translateY(-3px);border-color:#ffe19a;box-shadow:0 8px 18px #203d2566;outline:none}
.vs-town-grid .vs-tile .vs-ui-icon{width:35px;height:35px;color:#f4c567;filter:drop-shadow(0 2px 2px #0004)}
.vs-town-grid .vs-tile>span:last-of-type{font-size:.8rem;font-weight:750;text-align:center;line-height:1.2;overflow-wrap:anywhere}
.vs-town-grid .vs-tile:nth-child(4n+2){background:linear-gradient(145deg,rgba(28,82,76,.94),rgba(25,39,41,.96))}
.vs-town-grid .vs-tile:nth-child(4n+3){background:linear-gradient(145deg,rgba(107,75,38,.94),rgba(35,38,35,.96))}
.vs-town-grid .vs-tile:nth-child(7),.vs-town-grid .vs-tile:nth-child(8),.vs-town-grid .vs-tile:nth-child(9){min-height:92px}
.vs-town-grid .vs-tile:nth-child(7) .vs-ui-icon,.vs-town-grid .vs-tile:nth-child(8) .vs-ui-icon,.vs-town-grid .vs-tile:nth-child(9) .vs-ui-icon{color:#dce7d9}
.vs-menu.vs-screen .vs-page-title{position:relative;padding:4px 2px 10px}
.vs-menu.vs-screen .vs-page-title h1{letter-spacing:-.035em}
.vs-menu.vs-screen .vs-page-title p{margin-bottom:0}
.vs-menu .vs-footer{padding-top:12px}
@media(max-width:420px){.vs-town-grid{gap:8px;padding:14px 7px 16px;border-radius:17px}.vs-town-grid .vs-tile{min-height:100px;padding:9px 3px;gap:6px;border-radius:12px}.vs-town-grid .vs-tile .vs-ui-icon{width:31px;height:31px}.vs-town-grid .vs-tile>span:last-of-type{font-size:.73rem}.vs-town-grid .vs-tile:nth-child(n+7){min-height:84px}}
@media(prefers-reduced-motion:reduce){.vs-town-grid .vs-tile{transition:none}}

/* Map UX refinement: separate selecting a destination from confirming travel. */
.vs-travel-heading{align-items:center;padding:4px 0 8px}
.vs-travel-heading .vs-kicker{display:inline-block;color:#f4c875;font-size:.68rem;font-weight:850;letter-spacing:.13em}
.vs-travel-stamp{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid #e2a84b44;border-radius:12px;background:#e2a84b12;color:#f4ca72;font-size:.75rem}
.vs-travel-scene{height:270px;border-radius:16px}
.vs-travel-landmark{max-width:min(82%,580px)}
.vs-travel-status{max-width:calc(100% - 22px);white-space:normal;line-height:1.3;border-radius:12px;padding:8px 12px}
.vs-city-picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 10px;padding-bottom:10px;border-bottom:1px solid var(--vs-border)}
.vs-city-picker-head p{font-size:.82rem}
.vs-city-picker-head>span{padding:5px 9px;border-radius:99px;background:#ffffff0b;border:1px solid var(--vs-border)}
.vs-city-card{position:relative;min-width:0;min-height:132px}
.vs-city-card.active{border-color:#73c8ad;background:#1d332c;box-shadow:inset 0 0 0 1px #73c8ad55}
.vs-city-card.selected{outline:2px solid #f4b544;outline-offset:1px}
.vs-city-card.selected .vs-city-card-art:after{content:"SELECTED";position:absolute;left:7px;bottom:7px;padding:3px 6px;border-radius:5px;background:#f4b544;color:#211b10;font-size:9px;font-weight:900;letter-spacing:.04em}
.vs-city-card.active .vs-city-check{display:block}
.vs-city-card-copy{min-height:52px}
.vs-city-card-copy small{line-height:1.3}
.vs-travel-actions{display:grid;grid-template-columns:1fr 1.4fr 1.2fr;gap:8px;padding:12px;margin-top:14px;border:1px solid var(--vs-border);border-radius:14px;background:#ffffff05}
.vs-travel-actions .btn{display:flex;align-items:center;justify-content:center;min-height:44px;white-space:normal;line-height:1.25;font-size:.82rem}
.vs-travel-actions [data-action="map-travel-selected"]{font-weight:800;box-shadow:0 5px 15px #e2a84b22}
@media(max-width:700px){
 .vs-travel-heading{gap:8px}.vs-travel-stamp{padding:8px;font-size:.65rem}
 .vs-travel-scene{height:250px}
 .vs-travel-landmark{left:10px;top:10px;max-width:calc(100% - 20px)}
 .vs-city-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .vs-city-card{min-height:130px}
 .vs-travel-actions{grid-template-columns:1fr 1fr}
 .vs-travel-actions [data-action="map-travel-selected"]{grid-column:1/-1;grid-row:1;min-height:48px}
 .vs-travel-actions .btn{font-size:.78rem;padding:8px}
}

/* Clear current location vs destination preview */
.vs-travel-landmark small{display:inline-block;margin-bottom:4px;padding:4px 7px;border-radius:5px;background:#19251e;color:#f6ce79;font-size:9px;font-weight:900;letter-spacing:.08em}
.vs-city-card.active:not(.selected){border-color:#74c6a3}
.vs-city-card.selected{outline:2px solid #f4b544;outline-offset:2px}
.vs-city-card.active.selected .vs-city-card-copy small{color:#f4d18a}
.vs-travel-actions [data-action="map-travel-selected"]:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.vs-travel-status{z-index:5}

/* VirtuaSoul travel flow: one focused step at a time */
.vs-travel-page[hidden],#travelArrivalActions[hidden]{display:none!important}
.vs-travel-flow{max-width:1040px;margin-inline:auto}
.vs-travel-flow .vs-travel-heading{margin-bottom:18px}
.vs-travel-route-card,.vs-city-info-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;margin:16px 0 24px;border:1px solid #343a3e;border-radius:12px;background:linear-gradient(135deg,#1b2224,#121719)}
.vs-travel-route-card>div{display:grid;gap:5px;min-width:0}
.vs-travel-route-card small{font-size:.66rem;letter-spacing:.09em;color:#b7b9b5;font-weight:800}
.vs-travel-route-card b{font-size:1rem;color:#fff;overflow-wrap:anywhere}
.vs-travel-route-card>span{font-size:1.5rem;white-space:nowrap;color:#f4b544}
.vs-city-picker-head,.vs-vacancies-head,.vs-vacancies-head>div{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vs-city-picker-head h2,.vs-vacancies-head h2{font-size:1.1rem;margin:0 0 4px}
.vs-city-picker-head p,.vs-vacancies-head p{font-size:.82rem;color:#a9b0ad;margin:0}
#travelCityCount,.vs-vacancies-head>span{font-size:.75rem;color:#f4c66c;white-space:nowrap}
.vs-city-picker{margin-top:14px}
.vs-travel-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:22px}
.vs-travel-actions .btn:disabled{opacity:.45;cursor:not-allowed}
.vs-city-info-card{justify-content:flex-start;overflow:hidden}
.vs-city-info-card>img{width:clamp(100px,28%,220px);height:145px;object-fit:cover;border-radius:8px;background:#252b2d}
.vs-city-info-card h2{font-size:1.35rem;margin:5px 0}
.vs-city-info-card p{margin:0;color:#b9bfbc;line-height:1.5}
.vs-vacancies-head{margin:24px 0 12px}
.vs-travel-vacancies{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vs-vacancy-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:1px solid #343a3e;border-radius:10px;background:#171d1f;min-width:0}
.vs-vacancy-card b{color:#f5f3ed}
.vs-vacancy-card p{font-size:.8rem;color:#a9b0ad;margin:5px 0 0}
.vs-travel-arrival-actions{display:flex;justify-content:center;margin-top:14px}
@media(max-width:600px){
 .vs-travel-route-card{padding:12px;gap:8px}
 .vs-travel-route-card b{font-size:.85rem}
 .vs-travel-route-card>span{font-size:1.15rem}
 .vs-travel-actions{grid-template-columns:1fr}
 .vs-city-info-card{align-items:flex-start;padding:12px;gap:12px}
 .vs-city-info-card>img{width:108px;height:120px}
 .vs-travel-vacancies{grid-template-columns:1fr}
 .vs-vacancy-card{padding:12px}
}

.vs-vacancy-tag{flex:0 0 auto;padding:5px 8px;border-radius:5px;background:#26372b;color:#a8e0b6;font-size:.65rem;font-weight:900;letter-spacing:.08em}