/* the game's own pixel cursor (tools/make_cursors.py): the gold arrow everywhere, clickables
   included — the browser's white hand never shows. Text fields keep the text caret. */
:root { --cur: url('assets/ui/cursor/arrow.png') 1 1, default; }
html, body { cursor: var(--cur); }
input, textarea, [contenteditable] { cursor: text; }
:root { color-scheme: dark;
  /* the game's two faces (index.html loads both): a looped Thai sans for everything you read,
     a book serif for titles and names — Thai and Latin in each */
  --font-body: 'IBM Plex Sans Thai Looped', 'Noto Sans Thai', system-ui, sans-serif;
  --font-title: 'Taviraj', 'IBM Plex Sans Thai Looped', serif; }
* { box-sizing: border-box; }
/* ID rules like #dialog{display:grid} would otherwise beat the UA [hidden] rule,
   leaving the dialog overlay visible (and swallowing every click) while hidden */
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%;
  background: #10130f;
  font-family: var(--font-body);
  color: #dfe7d5;
  overflow: hidden;
  overscroll-behavior: none;
}
#stage {
  position: relative;
  width: 100%; height: 100%;
}
#screen {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #223018;
  /* fill the stage; the JS sizes the backing store to match so the browser never
     downscales the render (which would drop thin pixels like the lower face) */
  display: block; width: 100%; height: 100%;
  touch-action: none;
  cursor: var(--cur);   /* game.js swaps in a custom SVG arrow / skill-aim hand */
}
#hud {
  position: absolute; top: 14px; left: 14px;
  padding: 10px 12px;
  background: rgba(12,16,10,.72);
  border: 1px solid #3c4a2e;
  border-radius: 8px;
  font-size: 12px; line-height: 1.55;
  pointer-events: none;
  backdrop-filter: blur(3px);
}
#hud .title { font-weight: 700; letter-spacing: .12em; margin-bottom: 4px; color: #eaf1df; }
#hud .tag {
  font-weight: 400; letter-spacing: .05em; font-size: 10px;
  color: #a9c07f; border: 1px solid #4b5e34; border-radius: 4px;
  padding: 1px 5px; margin-left: 6px;
}
#hud .row { color: #9fb283; }
#hud .row span { color: #d6e6bd; }
#help {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  padding: 7px 14px;
  background: rgba(12,16,10,.72);
  border: 1px solid #3c4a2e; border-radius: 20px;
  font-size: 11px; color: #b9caa0;
  pointer-events: none;
}
#help b { color: #f2d98a; font-weight: 600; }
#quest {
  position: absolute; top: 14px; right: 14px;
  max-width: 240px; padding: 10px 12px;
  background: rgba(12,16,10,.78); border: 1px solid #4b5e34; border-radius: 8px;
  font-size: 12px; line-height: 1.5; color: #d6e6bd; pointer-events: none;
  backdrop-filter: blur(3px);
}
#quest .qt { color: #ffe27a; font-weight: 700; margin-bottom: 3px; letter-spacing: .04em; }
#quest .qp { color: #9fb283; }
#quest .qp b { color: #eaf1df; }
#quest .qdone { color: #7be08f; font-weight: 700; }
/* A conversation is modal: it must sit above the HUD windows (the chat panel shares
   the bottom of the screen and was covering the reply buttons), and clear of the chat
   line so both stay usable. */
#dialog {
  position: absolute; inset: 0; display: grid; place-items: end center;
  padding-bottom: 200px; background: rgba(0,0,0,.28); z-index: 85;
}
@media (max-width: 720px) { #dialog { padding-bottom: 210px; } }
/* a short screen (a phone held sideways): the dialog takes the middle, not the space above the HUD */
@media (max-height: 520px) { #dialog { padding: 8px; place-items: center; } }
/* never taller than the screen: the NPC's words scroll, the reply buttons always stay in view */
#dialog .box {
  display: flex; flex-direction: column; max-height: calc(100vh - 216px); min-height: 0;
  width: min(560px, 88%); font-family: var(--font-body);
  background: linear-gradient(180deg, rgba(26,29,39,.96), rgba(11,13,19,.97));
  border: 1px solid rgba(233,196,106,.42); border-radius: 12px; padding: 16px 20px;
  box-shadow: 0 12px 48px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,241,196,.08);
}
#dialog .name { color: #fff1c4; font-family: var(--font-title); font-weight: 600; font-size: 16px; letter-spacing: .04em; margin-bottom: 6px;
  padding-bottom: 6px; border-bottom: 1px solid rgba(233,196,106,.16); text-shadow: 0 0 10px rgba(233,196,106,.35); }
#dialog .text { color: #f1e9d6; font-size: 14px; line-height: 1.65; margin-bottom: 14px; white-space: pre-line;   /* NPC lines are joined with line breaks */
  flex: 1 1 auto; min-height: 3.3em; overflow-y: auto; overscroll-behavior: contain; }
#dialog .name, #dialog #dlg-vis { flex: 0 0 auto; }
/* download bar while a class change fetches the new outfit */
#dialog .dlg-load { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: #e9c46a; font-size: 12px; font-variant-numeric: tabular-nums; }
#dialog .dlg-load-track { flex: 1; height: 10px; border-radius: 5px; background: rgba(0,0,0,.45); border: 1px solid rgba(233,196,106,.35); overflow: hidden; }
#dialog .dlg-load-track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#9a6f18,#f3d98a); transition: width .15s linear; }
#dialog .opts { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
@media (max-height: 520px) {
  #dialog .box { max-height: calc(100vh - 16px); padding: 10px 16px; }
  #dialog .text { font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
  #dialog .qvmob .pic, #dialog .qvmap .thumb { height: 54px; }        /* a smaller quest card */
  #dialog .qvis { margin-bottom: 8px; }
}
#dialog button {
  font: inherit; font-size: 13px; cursor: var(--cur);
  background: rgba(255,255,255,.05); color: #f1e9d6; border: 1px solid rgba(233,196,106,.28);
  border-radius: 8px; padding: 8px 14px; transition: border-color .12s, color .12s;
}
#dialog button:hover { border-color: #e9c46a; color: #fff1c4; }
#dialog button.primary { background: linear-gradient(180deg, #fff1c4, #e9c46a); border-color: #e9c46a; color: #2a1d04; font-weight: 600; }
#dialog button.primary:hover { filter: brightness(1.08); }
#bag {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.32); z-index: 6;
}
#bag .box {
  width: min(420px, 90%); max-height: 82%; overflow-y: auto;
  background: rgba(16,20,12,.97); border: 1px solid #5a6e3c;
  border-radius: 12px; padding: 14px 16px; box-shadow: 0 12px 48px rgba(0,0,0,.6);
}
#bag .bhead { display: flex; justify-content: space-between; align-items: center;
  color: #ffe27a; font-weight: 700; font-size: 15px; letter-spacing: .05em; }
#bag #bag-close { font: inherit; cursor: var(--cur); background: none; border: none;
  color: #9fb283; font-size: 16px; padding: 2px 6px; }
#bag #bag-close:hover { color: #eaf1df; }
#bag .bstats { color: #d6e6bd; font-size: 12px; margin: 8px 0 4px; }
#bag .bstats b { color: #f2d98a; }
#bag .bsec { color: #a9c07f; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  margin: 12px 0 6px; border-bottom: 1px solid #3c4a2e; padding-bottom: 3px; }
#bag .brows { display: flex; flex-direction: column; gap: 5px; }
#bag .item { display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; padding: 7px 10px; border: 1px solid #3c4a2e; border-radius: 7px;
  background: #1c2413; color: #dfe7d5; }
#bag .item.click { cursor: var(--cur); transition: background .12s, border-color .12s; }
#bag .item.click:hover { background: #2b3a1c; border-color: #5a6e3c; }
#bag .item.equipped { border-color: #b8892a; }
#bag .item .sub { color: #9fb283; font-size: 11px; }
#bag .item .empty { color: #6b7a54; }
#bag .item.mat { opacity: .92; }
#bag .item .tag { color: #7fd0ff; font-size: 11px; }
#bag .bhint { color: #7a8a5e; font-size: 11px; margin-top: 12px; line-height: 1.5; }
#bag .bhint b { color: #b9caa0; }
#bag .bempty { color: #6b7a54; font-size: 12px; font-style: italic; padding: 4px 2px; }
/* the splash while the world loads: the logo over the dark, then it fades into the game.
   Above the HUD and the sign-in card (90), under the opening story (95). */
#loading {
  position: fixed; inset: 0; z-index: 92;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(90% 70% at 50% 42%, #1a1d2a 0%, #0b0d13 55%, #050608 100%);
  color: #cdbf95; font-family: var(--font-title); font-size: 13px; letter-spacing: .12em;
  transition: opacity .6s ease, visibility .6s;
}
#loading .logo { width: min(420px, 78vw, 62vh); height: auto; filter: drop-shadow(0 0 28px rgba(233,196,106,.22));
  animation: logo-breathe 3.2s ease-in-out infinite; }
#loading .bar { width: min(220px, 50vw); height: 2px; border-radius: 2px; overflow: hidden; background: rgba(233,196,106,.15); }
#loading .bar i { display: block; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, #e9c46a, transparent);
  animation: load-sweep 1.4s ease-in-out infinite; }
#loading.done { opacity: 0; visibility: hidden; pointer-events: none; }
#loading.done .logo, #loading.done .bar i { animation: none; }
@keyframes logo-breathe { 50% { filter: drop-shadow(0 0 40px rgba(233,196,106,.38)); transform: scale(1.012); } }
@keyframes load-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { #loading .logo, #loading .bar i { animation: none; } }


@media(max-width:700px) {
  #hud {top:8px;left:8px;padding:6px;font-size:10px;max-width:220px;}
  #hud .title{letter-spacing:0;font-size:10px;}
  #quest{top:116px;left:8px;right:auto;max-width:240px;padding:6px;font-size:10px;}
  #help{bottom:92px;width:calc(100% - 24px);text-align:center;font-size:10px;padding:6px;}

}

/* the caravan's stops: grouped by distance, scrolling inside the dialog */
#dialog .travel { flex: 0 1 auto; min-height: 0; max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; margin: 0 0 12px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; padding-right: 4px; }
#dialog .travel .thd { grid-column: 1 / -1; margin-top: 6px; font-size: 12px; color: #e9c46a; letter-spacing: .03em;
  border-bottom: 1px solid rgba(233,196,106,.2); padding-bottom: 3px; }
#dialog .travel .thd:first-child { margin-top: 0; }
#dialog .travel .tstop { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; text-align: left; }
#dialog .travel .tstop b { font-weight: 600; font-size: 13px; }
#dialog .travel .tstop span { font-size: 11px; color: #b9b19c; }
#dialog .travel .tstop:disabled { opacity: .45; cursor: not-allowed; }
@media (max-height: 520px) { #dialog .travel { max-height: none; flex: 1 1 auto; margin-bottom: 8px; }
  #dialog .box:has(.travel) .text { flex: 0 0 auto; min-height: 0; max-height: 2.6em; margin-bottom: 4px; }
  #dialog .travel .tstop { padding: 5px 9px; } }