/* Terra-Anvil — mobile-first · dark warm world · SVG art, no WebGL */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root {
  --bg: #14120f; --panel: #1e1b17; --panel2: #282420; --line: #3a342c;
  --tx: #efe9dd; --dim: #9a9184; --gold: #e8b94c; --cry: #7fc7e8; --ok: #7fd1b9; --bad: #e87f7f;
}
html, body { background: var(--bg); color: var(--tx); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 15px;
  height: 100%; overflow: hidden; }
/* จอเดียวจบ — โลก 3D เต็มจอ ไม่มีแท็บล่าง ไม่มีการเลื่อนหน้า */
#app { width: 100%; height: 100%; }

.top { position: sticky; top: 0; z-index: 20; display: flex; gap: 8px; align-items: center;
  background: linear-gradient(#1c1915, #1c1915f2); padding: 9px 12px; border-bottom: 1px solid var(--line); }
.stat { display: flex; flex-direction: column; min-width: 50px; }
.stat .lb { font-size: 10px; color: var(--dim); }
.stat b { font-size: 15px; }
.stat.gold b { color: var(--gold); } .stat.cry b { color: var(--cry); } .stat.stam b { color: var(--ok); }
.endday { margin-left: auto; background: linear-gradient(#f0c25a, #d09b2c); color: #241a03; border: 0;
  font-weight: 700; padding: 10px 15px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.endday:active { transform: scale(.96); }

.inv { display: flex; gap: 10px; overflow-x: auto; padding: 7px 12px; font-size: 12px; color: var(--dim);
  border-bottom: 1px solid var(--line); white-space: nowrap; scrollbar-width: none; }
.inv::-webkit-scrollbar { display: none; }
.inv b { color: var(--tx); }

.content { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.content.flush { padding: 0; gap: 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 13px; }
.card.goal { border-color: #7a6428; background: linear-gradient(160deg, #2b2413, var(--panel)); }
.card .h { font-weight: 700; margin-bottom: 9px; font-size: 14px; }
.big { font-size: 19px; } .dim { color: var(--dim); } .small { font-size: 12px; line-height: 1.5; }
.bad-t { color: var(--bad); font-weight: 700; } .cry-t { color: var(--cry); }

.row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.row:first-of-type { border-top: 0; }
.row .grow { flex: 1 1 130px; }
input[type=number] { width: 72px; background: var(--panel2); color: var(--tx); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px; font-size: 14px; }
button { background: var(--panel2); color: var(--tx); border: 1px solid #4a4238; border-radius: 9px;
  padding: 9px 13px; font-size: 13px; cursor: pointer; font-family: inherit; }
/* ปุ่มเข้มใช้เฉพาะนอกหน้าต่าง (HUD) — ในหน้าต่างใช้สไตล์ RO สว่างจาก ro-ui.css */
#rpg-mount button:not(.ghost):not(.skin):not(.dot):not(:disabled) { background: #46402f; border-color: #5d5541; }
button.ghost { background: transparent; } button.cry-btn { border-color: var(--cry); color: var(--cry); }
button:disabled { opacity: .36; cursor: default; }
button:active:not(:disabled) { transform: scale(.96); }

.q { font-size: 11px; padding: 2px 7px; border-radius: 20px; background: var(--panel2); }
.q-faint { color: #a8a396; } .q-normal { color: #9ccdf0; } .q-rich { color: #ffd97f; } .q-prime { color: #ffb3ec; }

/* ── แปลงที่ดินแบบภาพ ── */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.tile { position: relative; background: linear-gradient(#20262a, #1a1512); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color .15s, transform .1s; }
.tile:active { transform: scale(.98); }
.tile.sel { border-color: var(--gold); box-shadow: 0 0 0 2px #e8b94c44; }
.tile-svg { width: 100%; display: block; }
.tile-svg.dim { opacity: .62; filter: grayscale(.35); }
.tile-info { padding: 6px 8px 8px; font-size: 12px; border-top: 1px solid #ffffff10; }
.tile-badge { position: absolute; top: 6px; right: 7px; font-size: 15px; background: #0008; border-radius: 8px; padding: 1px 5px; }
.tbar { height: 4px; background: #ffffff14; border-radius: 3px; margin-top: 5px; overflow: hidden; }
.tbar i { display: block; height: 100%; background: var(--ok); }
.acard { background: var(--panel2); border-radius: 12px; overflow: hidden; }
.acard .tile { border: 0; border-radius: 0; }
.arow { display: flex; gap: 5px; padding: 7px; flex-wrap: wrap; }
.arow button { flex: 1; padding: 7px 8px; font-size: 12px; }
.selpanel { border-color: var(--gold); }

/* ── แอนิเมชันในภาพ ── */
.sparkle { animation: sp 2.6s ease-in-out infinite; }
@keyframes sp { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.pulse { animation: pl 2.2s ease-in-out infinite; }
@keyframes pl { 0%,100% { opacity: .3; } 50% { opacity: .85; } }
.sway { animation: sw 3.4s ease-in-out infinite; }
@keyframes sw { 0%,100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.cart { animation: ct 6s ease-in-out infinite; }
@keyframes ct { 0%,100% { transform: translateX(0); } 50% { transform: translateX(9px); } }
.spin { animation: spn 5s linear infinite; }
@keyframes spn { to { transform: rotate(360deg); } }
.smoke { opacity: 0; animation: sm 3.6s ease-out infinite; }
.smoke.s2 { animation-delay: 1.2s; } .smoke.s3 { animation-delay: 2.4s; }
@keyframes sm { 0% { opacity: .55; transform: translateY(0) scale(.5); } 100% { opacity: 0; transform: translateY(-26px) scale(1.5); } }
.worker { animation: wk 1.6s ease-in-out infinite; }
@keyframes wk { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
.pick { animation: pk 1.2s ease-in-out infinite; transform-origin: left center; }
@keyframes pk { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-38deg); } }

/* ── หน้าตัวละคร ── */
.charcard { display: flex; gap: 14px; align-items: center;
  background: linear-gradient(140deg, #2a2318, var(--panel)); }
.charbig { background: radial-gradient(circle at 50% 70%, #4a3d27, #211c15); border-radius: 14px;
  padding: 10px 16px; border: 1px solid var(--line); }
.charstat { flex: 1; }
.toolshow { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.skinrow { padding: 8px 0; border-top: 1px solid var(--line); }
.skinrow:first-of-type { border-top: 0; }
.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 6px; }
.skin { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 9px;
  font-size: 12px; background: var(--panel2); border: 1px solid var(--line); }
.skin i { font-style: normal; font-size: 10.5px; color: var(--dim); }
.skin.owned { border-color: #5d5541; }
.skin.on { border-color: var(--gold); background: #3a2f16; }
.skin.on i { color: var(--gold); }
.dots { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #0000; padding: 0; }
.dot.on { border-color: var(--gold); }

.skill { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.skill span { width: 62px; color: var(--dim); }
.skill .bar { flex: 1; height: 7px; background: var(--panel2); border-radius: 5px; overflow: hidden; }
.skill .bar i { display: block; height: 100%; background: var(--ok); }
.skill b { width: 34px; text-align: right; }

.sfbar { position: relative; height: 13px; background: var(--panel2); border-radius: 8px; overflow: hidden; }
.sfbar i { display: block; height: 100%; }
.sfbar i.warn { background: linear-gradient(90deg, #b8562e, var(--bad)); }
.sfbar i.good { background: linear-gradient(90deg, #2e7d5b, var(--ok)); }
.sfbar .mark { position: absolute; left: 76.9%; top: 0; bottom: 0; width: 2px; background: #fff6; }

.pricerow { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; }
.pricerow span { width: 74px; color: var(--dim); }
.pricerow b { margin-left: auto; color: var(--gold); }
.price { color: var(--gold); min-width: 50px; text-align: right; }
.tb { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tb th, .tb td { text-align: left; padding: 6px 7px; border-bottom: 1px solid var(--line); }
.tb th { color: var(--dim); font-weight: 500; }
.tb tr.cur td { background: #3a2f16; }
.log { font-size: 12px; color: var(--dim); line-height: 1.8; }

/* ── หน้าต่างแบบ Ragnarok — เปิดทับโลก 3D (แทนที่แท็บล่างเดิม) ── */
#win:empty { display: none; }
.winbg { position: fixed; inset: 0; background: #000000a8; z-index: 60; }
.winbox { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 61;
  width: min(94vw, 560px); max-height: min(88vh, 760px); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid #6a6250; border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 70px #000d, 0 0 0 1px #00000060; }
.win-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 15px;
  background: linear-gradient(#3a3324, #2a2419); border-bottom: 1px solid var(--line); }
.win-h .x { margin-left: auto; background: none; border: 0; font-size: 16px; padding: 2px 8px; color: var(--dim); }
.win-body { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }

#toasts { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); z-index: 70; display: flex;
  flex-direction: column; gap: 6px; width: min(92vw, 400px); pointer-events: none; }
.toast { background: #2c2a20; border: 1px solid var(--ok); border-radius: 10px; padding: 9px 13px;
  font-size: 13px; animation: pop .18s ease-out; box-shadow: 0 6px 20px #0009; }
.toast.bad { border-color: var(--bad); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
@media (min-width: 700px) { html { font-size: 16px; } }