@font-face { font-family: "NotoThai"; src: url("/pub/NotoSansThai.ttf") format("truetype"); font-display: swap; }
:root { --gold: #d9b45a; --gold2: #8a6a22; --ink: #0b0906; --panel: #15110a; --red: #ff8a7a; --ok: #9bd37a; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink); color: #f1e6c8; font-family: "NotoThai", system-ui, sans-serif; font-size: 15px; }
body.playing { overflow: hidden; }
.top { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #000; border-bottom: 1px solid var(--gold2); }
.top h1 { white-space: nowrap; margin: 0; font-size: 18px; color: var(--gold); flex: 1; }
.top button { flex: none; }
.top .who { white-space: nowrap; color: #bfae83; font-size: 14px; }
button { font: inherit; padding: 8px 14px; color: #f1e6c8; background: #2a2010; border: 1px solid var(--gold2); border-radius: 4px; cursor: pointer; }
button:hover { background: #3a2c14; }
button.big { font-size: 20px; font-weight: 600; padding: 14px 40px; color: #1a1205; background: linear-gradient(#f0cf7a, #b98d2f); border-color: #5d4512; }
button:disabled { opacity: .5; cursor: not-allowed; }
.wrap { max-width: 880px; margin: 0 auto; padding: 16px; display: grid; gap: 16px; }
.box { background: var(--panel); border: 1px solid var(--gold2); border-radius: 6px; padding: 14px 16px; }
.box h2 { margin: 0 0 10px; font-size: 16px; color: var(--gold); }
.news-item { margin-bottom: 12px; }
.news-item b { display: block; }
.news-item small { color: #9a8a62; }
.news-item p { margin: 4px 0 0; line-height: 1.6; }
.check { margin: 0; padding: 0; list-style: none; }
.check li { margin: 4px 0; }
.check .ok::before { content: "\2714  "; color: var(--ok); }
.check .no::before { content: "\2718  "; color: var(--red); }
.playbar { text-align: center; }
.warn { color: var(--red); margin: 8px 0 0; }
.banner { background: #3a2c14; padding: 8px 16px; text-align: center; font-size: 14px; }
.hidden { display: none !important; }
#game { position: fixed; inset: 0; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#game canvas { background: #000; max-width: 100vw; max-height: 100vh; object-fit: contain; image-rendering: pixelated; }  /* game text = real GDI pixels, no smoothing */
#loading { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2; min-width: 280px; max-width: 90vw; padding: 10px 16px; background: rgba(0,0,0,.78); border: 1px solid var(--gold2); border-radius: 6px; text-align: center; font-size: 14px; }
#loading .track { height: 6px; margin-top: 8px; background: #2a2010; border-radius: 3px; overflow: hidden; }
#loading .fill { height: 100%; width: 30%; background: var(--gold); animation: slide 1.4s infinite linear; }
@keyframes slide { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }
/* MSO-V2 mfix-recover: errors must remain reachable above portrait and rest. */
#err { position: fixed; inset: 0; z-index: 46; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: rgba(0,0,0,.88); }
#err p { max-width: 520px; line-height: 1.6; margin: 0; }
#note { width: min(420px, 90vw); font: inherit; padding: 8px; color: #fff; background: #19140b; border: 1px solid var(--gold2); border-radius: 4px; }
#dl{position:fixed;left:50%;bottom:10%;transform:translateX(-50%);z-index:20;background:rgba(0,0,0,.75);color:#fff;padding:8px 16px;border-radius:6px;font-size:15px;pointer-events:none}
#dl.hidden{display:none}
#verbar { position: fixed; top: 4px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 2px 10px; font-size: 13px; color: #f0d27a; background: rgba(0,0,0,.7); border-radius: 4px; pointer-events: none; }  /* only shown when a new version is published */
/* MSO-V2 mobile: gear + mode menu (only added element in PC mode), rotate overlay, iPhone home-screen card, ?stats=1 line */
/* MSO-V2 mobile: in game, gear + wrapping menu stay left of the reserved minimap strip. */
#gear { position: fixed; top: calc(4px + env(safe-area-inset-top)); right: calc(var(--mso-map-edge, 162px) + env(safe-area-inset-right)); z-index: 25; width: 44px; height: 44px; padding: 0; font-size: 18px; line-height: 1; opacity: .45; background: rgba(0,0,0,.5); }
#gear:hover { opacity: 1; }
body.m-menu #gear, body.m-menu #mmenu { display: none; }	/* MSO-V2 mobile-menu: the game-drawn bag page has its own close square */
#mmenu { position: fixed; top: calc(var(--mso-view-top, 0px) + 52px + env(safe-area-inset-top)); right: calc(var(--mso-map-edge, 162px) + env(safe-area-inset-right)); z-index: 25; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: rgba(0,0,0,.85); border: 1px solid var(--gold2); border-radius: 6px; }
/* MSO-V2 mobile: visible height includes both safe areas; buttons keep their tap height while scrolling. */
#mmenu { max-height: calc(var(--mso-view-height, 100vh) - 56px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; }
#mmenu button { flex: none; }
body:not(.m-game) #gear, body:not(.m-game) #mmenu { right: calc(8px + env(safe-area-inset-right)); }   /* MSO-V2 mobile: no minimap outside state 7. */
body.m-stopped #touch, body.m-stopped #gear, body.m-stopped #mmenu { display: none; }   /* MSO-V2 mobile: fatal / exit / rejoin. */
body.m-mobile #mmenu [data-m=mobile], body.m-pc #mmenu [data-m=pc] { color: #1a1205; background: var(--gold); }
body.m-mobile { overscroll-behavior: none; }
body.m-mobile #game canvas, body.m-mobile #rot, body.m-mobile #a2hs { touch-action: none; }
#rot, #a2hs { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: rgba(0,0,0,.94); font-size: 18px; }
#rot .ico { font-size: 64px; color: var(--gold); }
/* MSO-V2 mfix-recover: accessible portrait actions, including safe-area padding. */
#rot { padding: calc(24px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left)); overflow-y: auto; }
#rot button { min-height: 44px; min-width: 44px; touch-action: manipulation; }
#a2hs { z-index: 29; }
#a2hs .ico { color: #4a9eff; }
#stats { position: fixed; left: 4px; bottom: 4px; z-index: 26; padding: 1px 6px; font: 12px monospace; color: #9f9; background: rgba(0,0,0,.6); pointer-events: none; }

/* MSO-V2 mobile-rest */
#rest { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #020202; color: #3a3a3a; font-size: 18px; user-select: none; touch-action: manipulation; }
#rest .clock { font: 300 56px/1 monospace; color: #444; }
#rejoin { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; background: rgba(0,0,0,.88); font-size: 18px; }
/* MSO-V2 mfix-recover: temporary check blocks new holds without stopping the touch module. */
#netcheck { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; background: rgba(0,0,0,.88); font-size: 18px; touch-action: none; }
#rejoin button.big { font-size: 24px; padding: 18px 48px; }
#rjhint { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 28; display: flex; align-items: center; gap: 10px; max-width: 92vw; padding: 8px 12px; background: rgba(0,0,0,.85); border: 1px solid var(--gold2); border-radius: 6px; font-size: 15px; }
#rjhint p { margin: 0; }
#rjhint button { flex: none; min-height: 40px; }
body.m-pc #rjhint { display: none; }

/* MSO-V2 mobile-voice */
body.m-pc #mmenu .m-only { display: none; }
#mmenu .note { font-size: 12px; color: #aaa; max-width: 160px; }
#vbox { position: fixed; z-index: 24; display: flex; gap: 4px; top: 4px; right: 44px; }
#vbox button { padding: 4px 8px; font-size: 13px; opacity: .6; background: rgba(0,0,0,.6); }
#vbox button:hover, #vbox button.talk { opacity: 1; }
#vbox button.talk { color: #1a1205; background: var(--gold); }
#vbox button.dim { opacity: .3; }
body.m-mobile #vbox { flex-direction: column; top: auto; right: 8px; bottom: 40%; align-items: flex-end; }
body.m-mobile #vbox button { min-height: 44px; font-size: 15px; touch-action: none; user-select: none; -webkit-user-select: none; }

/* MSO-V2 botsimple-a2: game modal owns taps, including voice outside #touch. */
body.m-mobile.m-game-modal #gear, body.m-mobile.m-game-modal #mmenu, body.m-mobile.m-game-modal #vbox { display: none; }

/* MSO-V2 mobile-touch (touch.js): overlay passes taps through except the attack button; joystick base is moved by JS (transform) */
#touch { position: fixed; inset: 0; z-index: 22; pointer-events: none; user-select: none; -webkit-user-select: none; }
body.m-pc #touch { display: none; }
#touch .tjoy { position: absolute; left: 0; top: 0; width: 128px; height: 128px; margin: -64px 0 0 -64px; border-radius: 50%; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.25); }
#touch .tknob { position: absolute; left: 36px; top: 36px; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.35); }
#tatk { position: absolute; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); width: 88px; height: 88px; border-radius: 50%; pointer-events: auto; touch-action: none; font-size: 16px; opacity: .75; background: rgba(0,0,0,.55); border: 2px solid var(--gold2); }
#tatk.on { opacity: 1; color: #1a1205; background: var(--gold); }
/* MSO-V2 mobile: wrap within the safe width; blank space still passes taps to the game. */
#tmenu { position: absolute; top: calc(4px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left)); right: calc(var(--mso-map-edge, 162px) + 52px + env(safe-area-inset-right)); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; pointer-events: none; touch-action: manipulation; }
#tmenu button { flex: none; pointer-events: auto; min-width: 44px; min-height: 44px; padding: 4px 8px; font-size: 14px; opacity: .7; background: rgba(0,0,0,.55); }
#thud.on, #tskill.on { opacity: 1; color: #1a1205; background: var(--gold); }	/* MSO-V2 mfix-skillhide: independent chat / skill hidden states */
#tmenu button.tauto { border: 2px solid var(--gold2); }
#tmenu button.tauto.on { opacity: 1; color: #1a1205; background: var(--gold); }	/* MSO-V2 autohunt ah-ui: auto running */
/* MSO-V2 mobile chat + edit bridge (T5/T6): chat line + quick phrases; a native input over the focused game edit box */
#tchat { position: absolute; left: calc(8px + env(safe-area-inset-left)); right: calc(120px + env(safe-area-inset-right)); bottom: calc(8px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 4px; pointer-events: auto; }
#tchat .trow, #tchat .tphr { display: flex; gap: 4px; }
#tchat .tphr { overflow-x: auto; }
#tchat input { flex: 1; min-width: 0; min-height: 44px; padding: 4px 8px; font-size: 16px; background: rgba(0,0,0,.75); color: #fff; border: 2px solid var(--gold2); }
#tchat button { flex: none; min-width: 44px; min-height: 44px; padding: 4px 10px; font-size: 14px; background: rgba(0,0,0,.65); }
#tedit { position: fixed; z-index: 23; box-sizing: border-box; padding: 0 6px; font-size: 16px; background: #fff; color: #000; border: 2px solid var(--gold2); }
body.m-pc #tedit:not(.tdev) { display: none; }   /* codex CP-C 7: touch devices keep the edit bridge in PC mode (spec 8b) */

/* MSO-V2 mfix-attack: transient feedback above combat controls, never steals touches. */
#ttoast { position: fixed; left: 50%; top: calc(72px + env(safe-area-inset-top)); transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 8px 14px; border-radius: 8px; background: #161b25; color: #fff; font-size: 16px; text-align: center; pointer-events: none; z-index: 5; }
#mmenu [aria-pressed=false] { color: #9a9a9a; }   /* MSO-V2 ecocolor: off = grey text */
#mmenu [aria-pressed=true] { color: #5fe07a; font-weight: bold; }   /* MSO-V2 ecocolor: on = green bold text */
.uainfo { font-size: 12px; opacity: .75; word-break: break-all; user-select: text; margin: 10px 0 0; }   /* MSO-V2 gpumsg: browser/OS line for a screenshot */
/* MSO-V2 reportbtn: player report panel, above #err (46) and the gear menu */
#repbg, #markbg { position: fixed; inset: 0; z-index: 50; }
#reppanel, #markpanel { position: fixed; left: 50%; top: calc(var(--mso-view-top, 0px) + 8px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 51; width: calc(100vw - 16px); max-width: 440px; max-height: calc(var(--mso-view-height, 100vh) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgba(0,0,0,.92); border: 1px solid var(--gold2); border-radius: 6px; }
#reppanel p, #markpanel p { margin: 0; line-height: 1.5; }
#reppanel .reptitle, #markpanel .reptitle { font-weight: 600; color: var(--gold); }
#reppanel .repcats { display: flex; flex-wrap: wrap; gap: 4px; }
#reppanel .repcats button { padding: 6px 10px; }
#reppanel .repcats button[aria-pressed=true] { color: #1a1205; background: var(--gold); }
#reppanel textarea { font: inherit; font-size: 16px; width: 100%; box-sizing: border-box; resize: none; padding: 6px; color: #f1e6c8; background: #120d06; border: 1px solid var(--gold2); border-radius: 4px; }
#reppanel .repbtns, #markpanel .repbtns { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
#reppanel .repbtns .big, #markpanel .repbtns .big { font-size: 16px; padding: 8px 28px; }
body.m-mobile #reppanel button, body.m-mobile #markpanel button { min-height: 44px; touch-action: manipulation; }
/* MSO-V2 webnews: announcements reuse the report panel; red dot on the gear + menu item while something is unread */
#reppanel.newspanel .news-item { margin: 0; padding-top: 6px; border-top: 1px solid #3a2c14; }
#repbg.newsbg { background: rgba(0,0,0,.45); }
#reppanel.newspanel { max-width: 480px; }
#reppanel.newspanel .repbtns { position: sticky; bottom: -12px; margin: 0 -12px -12px; padding: 8px 12px 12px; background: rgba(0,0,0,.96); }
#reppanel .newtag { margin-left: 8px; padding: 0 6px; border-radius: 3px; font-size: 11px; font-weight: 600; color: #fff; background: #c8382a; }
#gear.dot { opacity: .9; }
#gear.dot::after, #newsbtn.dot::after { content: ""; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: #ff5a4a; }
#newsbtn { position: relative; }
/* MSO-V2 markui: the picture window reuses the report panel above. */
#markbg { background: rgba(0,0,0,.45); }
.markrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#markpanel select { min-height: 36px; font: inherit; color: #f1e6c8; background: #2a2010; border: 1px solid var(--gold2); border-radius: 4px; }
.markview { display: flex; gap: 12px; align-items: end; justify-content: center; }
.markzoom { width: 112px; height: auto; image-rendering: pixelated; border: 1px solid var(--gold2); }
.markreal { width: 16px; height: auto; image-rendering: pixelated; }
body.m-stopped #markpanel, body.m-stopped #markbg { display: none; }
body.m-mobile #markpanel select { min-height: 44px; }