/* สร้างจาก replica/design/design.template.html ห้ามแก้ตรงนี้ ให้แก้ที่ต้นทางแล้วรัน sync:design */
*{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--color-text);font:var(--weight-base) var(--text-base)/var(--leading-base) var(--font-sans)}
h1,h2,h3{font-family:var(--font-heading);margin:0}
h1{font-size:var(--text-xl);line-height:var(--leading-xl)}
h2{font-size:var(--text-lg);line-height:var(--leading-lg);color:var(--color-text);margin-bottom:var(--space-4)}
.page main{max-width:var(--layout-site-max-width);margin:0 auto;padding:var(--space-6) var(--space-4) var(--space-8)}
.page section{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--color-border)}
.muted{color:var(--color-text-muted)}
.row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.stage{background:linear-gradient(160deg,#171428,#0c0b14 60%);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);position:relative;overflow:hidden}
:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}

/* Button */
.btn{font:inherit;font-size:var(--text-sm);font-weight:600;min-height:40px;padding:0 var(--space-4);border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-2);transition:background var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease),transform var(--motion-fast) var(--motion-ease)}
.btn-sm{min-height:32px;padding:0 var(--space-3)}
.btn-lg{min-height:48px;padding:0 var(--space-5);font-size:var(--text-base)}
.btn-primary{background:var(--color-accent);color:var(--color-on-accent)}
.btn-primary:hover{box-shadow:var(--shadow-glow)}
.btn-primary:active{transform:translateY(1px)}
.btn-secondary{background:var(--color-surface-2);color:var(--color-text);border-color:var(--color-border-input)}
.btn-secondary:hover{background:var(--color-border)}
.btn-ghost{background:transparent;color:var(--color-text)}
.btn-ghost:hover{background:var(--color-surface-2)}
.btn-danger{background:var(--color-danger);color:var(--color-on-accent)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.btn[aria-busy="true"]{position:relative;cursor:progress}
.btn[aria-busy="true"]::after{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 700ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Input */
.field{display:grid;gap:var(--space-1);min-width:220px}
.field label{font-size:var(--text-sm);color:var(--color-text-muted)}
.input{font:inherit;min-height:40px;padding:0 var(--space-3);background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border-input);border-radius:var(--radius-md)}
.input::placeholder{color:var(--color-text-muted)}
.input[aria-invalid="true"]{border-color:var(--color-danger)}
.field .err{font-size:var(--text-xs);color:var(--color-danger)}

/* Window (หน้าต่างในเกม: กระเป๋า สกิล ตัวละคร) */
.win{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);max-width:var(--layout-game-window-max);width:100%}
.win-head{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);font-family:var(--font-heading);font-weight:600}
.win-body{padding:var(--space-4)}
.icon-btn{width:var(--layout-hud-min-tap);height:var(--layout-hud-min-tap);display:inline-grid;place-items:center;background:var(--color-surface-2);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;font:inherit;font-size:var(--text-xs)}
.icon-btn:hover{box-shadow:var(--shadow-glow)}

/* Slot (สกิล / ไอเทมด่วน) */
.slot{position:relative;width:52px;height:52px;background:var(--color-surface-2);border:1px solid var(--color-border-input);border-radius:var(--radius-md);display:grid;place-items:center;color:var(--color-text);font-size:var(--text-xs);cursor:pointer;overflow:hidden}
.slot .key{position:absolute;top:2px;left:4px;font-size:11px;font-weight:600;color:var(--color-text-muted)}
.slot .qty{position:absolute;bottom:2px;right:4px;font-size:11px;font-weight:600}
.slot[data-empty="true"]{border-style:dashed;color:var(--color-text-muted)}
.slot .cd{position:absolute;inset:0;background:rgba(12,11,20,.72);display:grid;place-items:center;font-weight:700;font-size:var(--text-sm)}
.slot[aria-pressed="true"]{box-shadow:var(--shadow-glow)}

/* Bar (HP/MP/EXP) */
.bar{height:12px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-pill);overflow:hidden}
.bar>i{display:block;height:100%;width:var(--v,50%);border-radius:inherit;transition:width var(--motion-base) var(--motion-ease)}
.bar-hp>i{background:var(--color-bar-hp)} .bar-mp>i{background:var(--color-bar-mp)} .bar-exp>i{background:var(--color-bar-exp)}
.bar-row{display:grid;grid-template-columns:28px 1fr 84px;gap:var(--space-2);align-items:center;font-size:var(--text-xs)}
.bar-row span:last-child{text-align:right;color:var(--color-text-muted)}

/* Chat */
.chat{background:rgba(21,19,31,.88);border:1px solid var(--color-border);border-radius:var(--radius-md);max-width:380px}
.tabs{display:flex;border-bottom:1px solid var(--color-border)}
.tab{font:inherit;font-size:var(--text-xs);font-weight:600;padding:var(--space-2) var(--space-3);background:none;border:0;color:var(--color-text-muted);cursor:pointer;border-bottom:2px solid transparent;min-height:32px}
.tab[aria-selected="true"]{color:var(--color-text);border-bottom-color:var(--c,var(--color-accent))}
.tab[data-ch="world"]{--c:var(--color-warning)} .tab[data-ch="whisper"]{--c:var(--color-success)}
.lines{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);line-height:20px;display:grid;gap:2px}
.lines .ch-near{color:var(--color-text)} .lines .ch-world{color:var(--color-warning)} .lines .ch-whisper{color:var(--color-success)}
.bubble{display:inline-block;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-1) var(--space-3);font-size:var(--text-sm)}

/* Banner / Sign / Loading */
.levelup{text-align:center;padding:var(--space-4);border:1px solid var(--color-accent);border-radius:var(--radius-lg);box-shadow:var(--shadow-glow);background:var(--color-surface)}
.levelup b{font-family:var(--font-heading);font-size:var(--text-xl);color:var(--color-accent)}
.sign{display:inline-flex;flex-direction:column;align-items:center;padding:var(--space-2) var(--space-6);border-top:1px solid var(--color-border-input);border-bottom:1px solid var(--color-border-input);letter-spacing:.04em}
.sign small{color:var(--color-text-muted);font-size:var(--text-xs)}
.loading{max-width:420px}

/* Mobile controls */
.joystick{width:112px;height:112px;border-radius:50%;border:1px solid var(--color-border-input);background:rgba(29,26,43,.6);display:grid;place-items:center}
.joystick i{width:44px;height:44px;border-radius:50%;background:var(--color-surface-2);border:1px solid var(--color-border-input)}
.atk{width:72px;height:72px;border-radius:50%;border:1px solid var(--color-accent);background:rgba(109,124,255,.18);color:var(--color-text);font:inherit;font-weight:700;cursor:pointer}
.menubar{display:flex;gap:var(--space-2)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:1ms!important}}