:root {
  --bronze: #d1a052; --bronze-d: #8a6128; --cream: #f5e9c8; --gold: #ffd76a; --red: #9b2d1c; --ink: #2a160a;
  --panel: rgba(28, 20, 12, .92); --line: rgba(209, 160, 82, .45);
  --stroke: 0 1px 0 #2a1406, 0 -1px 0 #2a1406, 1px 0 0 #2a1406, -1px 0 0 #2a1406, 0 2px 3px rgba(0,0,0,.55);
  --serif: "Palatino", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #111; color: var(--cream);
  font: 14px/1.35 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-user-select: none; user-select: none; touch-action: none; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; }
img { -webkit-user-drag: none; }
[hidden] { display: none !important; }

/* ---------- khung 9-slice (ảnh ở assets/ui, cắt bởi tools/cut_ui.py) ---------- */
.f-panel, .sheet, .create { border-style: solid; border-color: transparent; border-width: 28px;
  border-image: url(../assets/ui/panel.png) 84 fill / 28px stretch; }
.f-plaque, #quest-track, #target-frame, .toast, .detail, .cls-desc, #chat-box, #dead, #status {
  border-style: solid; border-color: transparent; border-width: 9px;
  border-image: url(../assets/ui/plaque.png) 26 fill / 9px stretch; }
.f-slot, .slot, #preview { border-style: solid; border-color: transparent; border-width: 7px;
  border-image: url(../assets/ui/slot.png) 22 fill / 7px stretch; }
.f-tab, .cls-btn, .pick button { border-style: solid; border-color: transparent; border-width: 6px;
  border-image: url(../assets/ui/tab.png) 16 fill / 6px stretch; }
.cls-btn.sel, .pick button.sel { border-image-source: url(../assets/ui/tab_sel.png); border-image-slice: 20 fill; color: var(--ink); }
.f-input, #chat-input, #name-input { border-style: solid; border-color: transparent; border-width: 7px;
  border-image: url(../assets/ui/frame_sq.png) 26 fill / 7px stretch; }

/* nút chữ nhật: vàng (mặc định), đỏ, xanh lá, xanh dương, kem */
.btn, .primary, #chat-form button { border-style: solid; border-color: transparent; border-width: 11px;
  border-image: url(../assets/ui/btn_gold.png) 34 fill / 11px stretch; background: none;
  color: #fff; font-weight: 800; text-shadow: var(--stroke); letter-spacing: .3px; }
.btn.red, .primary { border-image-source: url(../assets/ui/btn_red.png); }
.btn.green { border-image-source: url(../assets/ui/btn_green.png); }
.btn.blue { border-image-source: url(../assets/ui/btn_blue.png); }
.btn.alt { border-image-source: url(../assets/ui/btn_beige.png); color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.btn:active, .primary:active, #chat-form button:active { transform: scale(.96); filter: brightness(1.1); }
.btn:disabled, .primary:disabled { filter: grayscale(.8) brightness(.75); opacity: .8; }

/* ---------- cần điều khiển ---------- */
#cv { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#touch { position: fixed; inset: 0; z-index: 1; }
#joy { position: absolute; inset: 0; pointer-events: none; }
.joy-base, .joy-knob { position: absolute; left: 0; top: 0; will-change: transform; background: center / contain no-repeat; }
.joy-base { width: 128px; height: 128px; background-image: url(../assets/ui/joy_base.png); opacity: .5; transition: opacity .15s; }
.joy-knob { width: 58px; height: 58px; background-image: url(../assets/ui/joy_knob.png); filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); opacity: .75; }
#joy.active .joy-base, #joy.active .joy-knob { opacity: 1; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#hud > * { pointer-events: auto; }
.bar { position: relative; height: 15px; margin-top: 3px; border-style: solid; border-color: transparent; border-width: 7px 8px;
  border-image: url(../assets/ui/bar_frame.png) 21 16 fill / 7px 8px stretch; }
.bar i { position: absolute; inset: -4px -5px; transform-origin: left; transition: transform .15s;
  background: url(../assets/ui/bar_hp.png) center / 100% 100% no-repeat; }
.bar span { position: absolute; inset: -7px -8px; text-align: center; font-size: 10px; line-height: 15px; font-weight: 800;
  text-shadow: var(--stroke); }
.bar.mp i { background-image: url(../assets/ui/bar_mp.png); }
.bar.xp { height: 9px; border-width: 4px 6px; border-image-width: 4px 6px; }
.bar.xp i { inset: -2px -4px; background-image: url(../assets/ui/bar_gold.png); }

#me-frame { position: absolute; left: calc(8px + var(--sal)); top: calc(6px + var(--sat)); width: 236px; display: flex; gap: 4px;
  align-items: center; pointer-events: none; }
.me-port { position: relative; width: 62px; height: 62px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--c, #8a6128), #1b110a 72%); }
.me-port::after { content: ""; position: absolute; inset: -3px; background: url(../assets/ui/ring.png) center / contain no-repeat; }
.me-port img { position: absolute; left: 9px; top: 12px; width: 44px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.lv { position: absolute; left: -4px; bottom: -4px; z-index: 1; width: 26px; height: 26px; line-height: 26px; text-align: center;
  font-size: 12px; font-weight: 900; color: #fff; text-shadow: var(--stroke); background: url(../assets/ui/badge.png) center / contain no-repeat; }
.me-info { flex: 1; min-width: 0; padding: 1px 6px 3px; border-style: solid; border-color: transparent; border-width: 9px;
  border-image: url(../assets/ui/plaque.png) 26 fill / 9px stretch; }
.me-top { display: flex; align-items: center; gap: 6px; font-weight: 800; text-shadow: var(--stroke); }
#me-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffe8b8; }
#me-gold { color: var(--gold); font-size: 12px; white-space: nowrap; }
.coin { display: inline-block; width: 1.15em; height: 1.15em; margin-right: 3px; vertical-align: -0.22em;
  background: url(../assets/ui/ic_gold.png) center / contain no-repeat; }

#quest-track { position: absolute; left: calc(8px + var(--sal)); top: calc(96px + var(--sat)); width: 236px; padding: 3px 6px; font-size: 12px; }
#quest-track:empty { display: none; }
#quest-track .qt-title { color: var(--gold); font-weight: 800; font-family: var(--serif); text-shadow: var(--stroke); }
#quest-track .qt-title img, .q-ic { width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; }
#quest-track .qt-goal { opacity: .92; }
#quest-track .qt-ready { color: #9dff8d; font-weight: 800; }

#target-frame { position: absolute; left: 50%; top: calc(6px + var(--sat)); transform: translateX(-50%); width: min(300px, 44vw);
  padding: 2px 8px 4px; text-align: center; pointer-events: none; }
#target-frame .t-name { font-weight: 800; font-size: 13px; text-shadow: var(--stroke); }
#target-frame.boss { width: min(440px, 60vw); }
#target-frame.boss .t-name { color: #ff9a7a; font-family: var(--serif); font-size: 15px; }
#target-frame.boss .bar { height: 18px; }

#top-right { position: absolute; right: calc(8px + var(--sar)); top: calc(6px + var(--sat)); text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; }
#zone-name { min-width: 150px; padding: 2px 30px; text-align: center; font: 800 15px/22px var(--serif); color: #ffe3a3; text-shadow: var(--stroke);
  border-style: solid; border-color: transparent; border-width: 6px 16px; border-image: url(../assets/ui/nameplate.png) 20 50 fill / 6px 16px stretch;
  white-space: nowrap; }
#zone-name:empty { display: none; }
#zone-name small { font-size: 12px; color: #9dff8d; }
#net-info { font-size: 11px; opacity: .85; text-shadow: var(--stroke); margin: 2px 16px 0 0; }
#net-info span + span::before { content: " · "; }
.menu { display: flex; gap: 4px; justify-content: flex-end; margin-top: 4px; }
.icon-btn { position: relative; width: 50px; height: 50px; border: 0; padding: 0; background: url(../assets/ui/frame_round.png) center / contain no-repeat; }
.icon-btn img { width: 64%; height: 64%; object-fit: contain; margin-top: 2px; filter: drop-shadow(0 2px 1px rgba(0,0,0,.5)); }
.icon-btn:active { transform: scale(.92); }
#chat-dot { position: absolute; right: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a6a, #c22410);
  border: 2px solid #f3d38a; }

#chat-log { position: absolute; left: calc(10px + var(--sal)); bottom: calc(172px + var(--sab)); width: min(330px, 42vw);
  max-height: 128px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  font-size: 12px; pointer-events: none; }
#chat-log div { background: linear-gradient(90deg, rgba(30,18,8,.72), rgba(30,18,8,.25)); border-left: 2px solid var(--bronze);
  border-radius: 2px 6px 6px 2px; padding: 2px 7px; text-shadow: 0 1px 2px #000; animation: fadeLine 14s forwards; word-break: break-word; }
#chat-log b { color: var(--gold); }
#chat-log .sys { color: #b9f5a0; }
#chat-log .loot { color: #ffe3a3; }
@keyframes fadeLine { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* nút hành động: cụm vòng cung góc phải dưới */
#actions { position: absolute; right: calc(14px + var(--sar)); bottom: calc(14px + var(--sab)); width: 230px; height: 230px; pointer-events: none; }
#actions > * { pointer-events: auto; position: absolute; }
.act-atk { right: 0; bottom: 0; width: 100px; height: 100px; border: 0; padding: 0; border-radius: 50%;
  background: url(../assets/ui/btn_atk.png) center / contain no-repeat; filter: drop-shadow(0 4px 8px rgba(0,0,0,.55)); }
.act-atk:active, .act-atk.on { transform: scale(.93); filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)) brightness(1.15); }
.act-sk { width: 66px; height: 66px; border-radius: 50%; border: 0; padding: 0; background: #1d140b center / 88% no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.55)); }
.act-sk::after { content: ""; position: absolute; inset: -2px; background: url(../assets/ui/ring.png) center / contain no-repeat; pointer-events: none; }
.act-sk[data-i="0"] { right: 110px; bottom: 2px; }
.act-sk[data-i="1"] { right: 92px; bottom: 84px; }
.act-sk[data-i="2"] { right: 12px; bottom: 112px; }
.act-sk .ico { display: none; }
.act-sk .cd { position: absolute; inset: 4px; border-radius: 50%; background: conic-gradient(rgba(0,0,0,.72) var(--p, 0%), transparent 0); pointer-events: none; }
.act-sk .cdt { position: absolute; inset: 0; line-height: 66px; font-size: 19px; font-weight: 900; text-shadow: var(--stroke); pointer-events: none; }
.act-sk .lock { position: absolute; inset: 4px; border-radius: 50%; display: none; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(15,8,3,.7); font-style: normal; font-size: 10px; font-weight: 800; color: #ffcf7a; text-shadow: var(--stroke); }
.act-sk .lock::before { content: ""; width: 22px; height: 26px; background: url(../assets/ui/ic_lock.png) center / contain no-repeat; }
.act-sk.locked .lock { display: flex; }
.act-sk.nomp { filter: grayscale(.7) brightness(.7) drop-shadow(0 3px 5px rgba(0,0,0,.55)); }
.act-sk:active { transform: scale(.92); }
.act-talk { right: 110px; bottom: 150px; height: 50px; min-width: 50px; padding: 0 12px 0 6px; display: flex; align-items: center; gap: 4px;
  font-size: 15px; font-weight: 800; white-space: nowrap; color: #fff; text-shadow: var(--stroke);
  border-style: solid; border-color: transparent; border-width: 11px; border-image: url(../assets/ui/btn_green.png) 34 fill / 11px stretch;
  background: none; animation: pulse 1.2s infinite; }
.act-talk img { width: 26px; height: 26px; margin: -6px 0; }
@keyframes pulse { 50% { transform: scale(1.06); } }
#quick { right: 172px; bottom: 4px; display: flex; flex-direction: column; gap: 6px; }
.quick-btn { position: relative; width: 50px; height: 50px; border: 0; padding: 0; background: url(../assets/ui/frame_sq.png) center / contain no-repeat; }
.quick-btn .qi img { width: 34px; height: 34px; object-fit: contain; margin-top: 3px; filter: drop-shadow(0 2px 1px rgba(0,0,0,.5)); }
.quick-btn b { position: absolute; right: 4px; bottom: 1px; font-size: 12px; font-weight: 900; text-shadow: var(--stroke); }
.quick-btn.empty { filter: grayscale(.8) brightness(.7); }

#toasts { position: absolute; left: 50%; top: calc(74px + var(--sat)); transform: translateX(-50%); display: flex; flex-direction: column;
  align-items: center; gap: 4px; pointer-events: none; width: min(520px, 90vw); }
.toast { padding: 3px 12px; font-weight: 700; text-align: center; text-shadow: 0 1px 2px #000;
  animation: toastIn .25s, toastOut .4s 3.2s forwards; }
@keyframes toastIn { from { transform: translateY(-8px); opacity: 0; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-6px); } }

#dead { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; padding: 8px 24px;
  font: 800 26px var(--serif); color: #ff8f7a; text-shadow: var(--stroke); }
#dead small { display: block; font: 600 14px system-ui, sans-serif; color: var(--cream); }

/* bảng Chiến Thắng */
#banner { position: absolute; left: 50%; top: 24%; width: min(480px, 88vw); aspect-ratio: 720 / 325; transform: translate(-50%, -50%);
  background: url(../assets/ui/victory.png) center / contain no-repeat; pointer-events: none; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 11%;
  animation: bannerIn .45s cubic-bezier(.2, 1.6, .4, 1), bannerOut .5s 3.3s forwards; }
#banner .bn-t { font: 900 clamp(24px, 7vw, 38px)/1.05 var(--serif); letter-spacing: 2px; text-transform: uppercase;
  background: linear-gradient(#fff6c8, #ffd25a 55%, #d88a1c); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #4a1a06) drop-shadow(0 0 1px #4a1a06); }
#banner .bn-s { margin-top: 4px; font-size: clamp(11px, 3vw, 14px); font-weight: 700; color: #ffe8b8; text-shadow: var(--stroke); }
@keyframes bannerIn { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } }
@keyframes bannerOut { to { transform: translate(-50%, -60%); opacity: 0; } }

/* ---------- bảng (túi đồ / hội thoại / nhiệm vụ) ---------- */
#panel { position: fixed; inset: 0; z-index: 5; background: rgba(0,0,0,.4); display: flex; align-items: flex-end; justify-content: center;
  padding: 18px 8px calc(6px + var(--sab)); }
.sheet { position: relative; width: min(640px, 100%); max-height: 100%; display: flex; flex-direction: column;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.6)); animation: sheetIn .2s; }
@keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } }
.sheet-head { display: flex; justify-content: center; margin: -14px 18px 6px; }
.sheet-head h2 { margin: 0; padding: 2px 36px; min-width: 60%; text-align: center; font: 800 18px/24px var(--serif); color: #ffe3a3; text-shadow: var(--stroke);
  border-style: solid; border-color: transparent; border-width: 6px 16px; border-image: url(../assets/ui/nameplate.png) 20 50 fill / 6px 16px stretch;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-head h2 img { width: 22px; height: 22px; vertical-align: -5px; margin-right: 6px; }
.close { position: absolute; right: -16px; top: -16px; z-index: 1; width: 42px; height: 42px; border: 0; padding: 0;
  background: url(../assets/ui/btn_close.png) center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.close:active { transform: scale(.9); }
#panel-body { overflow-y: auto; padding: 4px 4px 6px; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  scrollbar-width: thin; scrollbar-color: var(--bronze-d) transparent; }
#panel-body::-webkit-scrollbar { width: 6px; }
#panel-body::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #b8843a, #7a5222); border-radius: 3px; }
@media (orientation: landscape) and (max-height: 520px) {
  #panel { align-items: stretch; justify-content: flex-end; padding: 14px calc(8px + var(--sar)) 6px 8px; }
  .sheet { max-height: 100%; height: 100%; width: min(560px, 70vw); animation: sheetInR .2s; }
  @keyframes sheetInR { from { transform: translateX(40px); opacity: 0; } }
}

.equip-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px; }
.inv-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.slot { position: relative; aspect-ratio: 1; background: none; display: flex; align-items: center; justify-content: center; padding: 0; }
.slot img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 2px 1px rgba(0,0,0,.5)); }
.slot .emo { font-size: 26px; }
.slot .n { position: absolute; right: -2px; bottom: -4px; font-size: 11px; font-weight: 800; text-shadow: var(--stroke); }
.slot .ph { opacity: .4; font-size: 10px; text-align: center; line-height: 1.1; }
.slot::after { content: ""; position: absolute; inset: -5px; border-radius: 6px; pointer-events: none; }
.slot.sel::after { box-shadow: 0 0 0 2px #ffe9a8, 0 0 10px 2px rgba(255,215,106,.7); }
.slot.r1 { box-shadow: inset 0 0 12px rgba(111,220,111,.5); }
.slot.r2 { box-shadow: inset 0 0 14px rgba(90,168,255,.6); }
.slot.r3 { box-shadow: inset 0 0 16px rgba(255,174,46,.7); }
.slot.r1::before, .slot.r2::before, .slot.r3::before { content: ""; position: absolute; left: 2px; top: 2px; width: 7px; height: 7px; border-radius: 50%; }
.slot.r1::before { background: #6fdc6f; } .slot.r2::before { background: #5aa8ff; } .slot.r3::before { background: #ffae2e; }
.stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; margin: 4px 0 10px; padding: 5px 8px; opacity: .95;
  background: rgba(0,0,0,.22); border-top: 1px solid rgba(209,160,82,.3); border-bottom: 1px solid rgba(209,160,82,.3); }
.stats b { color: #ffe3a3; }
.detail { margin-top: 12px; padding: 4px 6px; }
.detail h3 { margin: 0 0 2px; font: 800 16px var(--serif); text-shadow: var(--stroke); }
.detail .meta { font-size: 12px; opacity: .75; }
.detail .desc { font-size: 13px; margin: 6px 0; }
.detail .bad { color: #ff8f7a; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.btn { flex: 1; min-height: 44px; padding: 0 10px; font-size: 14px; }
.dlg-text { white-space: pre-line; font-size: 15px; line-height: 1.5; margin: 0 0 12px; }
.shop-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid rgba(209,160,82,.2); }
.shop-row .slot { width: 50px; flex: none; }
.shop-row .nm { flex: 1; font-weight: 700; }
.shop-row .nm small { display: block; opacity: .7; font-size: 11px; font-weight: 400; }
.shop-row .btn { flex: none; min-width: 92px; }
.q-steps { list-style: none; padding: 0; margin: 10px 0 0; font-size: 13px; }
.q-steps li { padding: 4px 0 4px 22px; opacity: .6; position: relative; }
.q-steps li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 12px; height: 12px; border-radius: 3px; border: 2px solid var(--bronze-d);
  background: rgba(0,0,0,.4); }
.q-steps li.cur { opacity: 1; color: #ffe3a3; font-weight: 800; }
.q-steps li.cur::before { border-color: var(--gold); }
.q-steps li.done::before { background: radial-gradient(circle, #9dff8d 35%, #2e7a24 40%); border-color: #d9b45a; }

#chat-box { position: fixed; left: calc(4px + var(--sal)); right: calc(4px + var(--sar)); bottom: calc(4px + var(--sab)); z-index: 6; padding: 2px; }
#chat-form { display: flex; gap: 6px; }
#chat-input { flex: 1; min-width: 0; height: 44px; background: none; color: var(--cream); padding: 0 8px; font: inherit; font-size: 16px;
  outline: none; -webkit-user-select: text; user-select: text; }
#chat-form button { min-width: 76px; }

/* ---------- màn hình tải / tạo nhân vật ---------- */
.screen { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 45%, rgba(20,10,4,.35), rgba(12,6,2,.85) 75%), url(../assets/ui/bg.jpg) center / cover #1b110a;
  overflow-y: auto; touch-action: pan-y; }
.logo { position: relative; font: 900 48px/1 var(--serif); text-align: center; letter-spacing: 2px; color: transparent;
  background: linear-gradient(#fff4c4, #f3c35a 55%, #b8741c); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 3px 0 #4a2208) drop-shadow(0 0 1px #4a2208) drop-shadow(0 8px 16px rgba(0,0,0,.6)); }
.logo span { display: block; font-size: .6em; letter-spacing: 10px; margin-top: 6px;
  background: linear-gradient(#ffb48a, #d8452a); -webkit-background-clip: text; background-clip: text; }
.logo .lantern { position: absolute; top: -6px; height: 84px; filter: drop-shadow(0 0 12px rgba(255,120,40,.7)); animation: sway 3s ease-in-out infinite; }
.logo .lantern:first-child { left: -72px; }
.logo .lantern:last-child { right: -72px; animation-delay: -1.5s; }
@keyframes sway { 50% { transform: rotate(5deg); } }
.logo.small { font-size: 32px; }
.load-bar { width: min(340px, 72vw); height: 20px; margin-top: 30px; border-style: solid; border-color: transparent; border-width: 9px 11px;
  border-image: url(../assets/ui/bar_frame.png) 21 16 fill / 9px 11px stretch; position: relative; }
.load-bar i { position: absolute; left: -6px; top: -5px; bottom: -5px; width: 0; max-width: calc(100% + 12px); transition: width .2s;
  background: url(../assets/ui/bar_gold.png) center / 100% 100% no-repeat; }
#load-msg { margin-top: 10px; opacity: .85; font-size: 13px; text-shadow: var(--stroke); text-align: center; }
#login { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
#g-btn { min-height: 44px; min-width: 260px; display: flex; justify-content: center; color: #ffb49a; font-size: 13px; text-shadow: var(--stroke); }
#dev-btn { min-width: 200px; height: 46px; font-weight: 800; }
.link-btn { align-self: center; background: none; border: 0; padding: 4px 10px; color: var(--cream); opacity: .7; font-size: 13px;
  text-decoration: underline; text-shadow: var(--stroke); }

#screen-create { justify-content: flex-start; padding: calc(8px + var(--sat)) 8px calc(8px + var(--sab)); }
.create { width: min(640px, 100%); margin: auto 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lore { text-align: center; opacity: .8; font-style: italic; margin: 0; font-size: 13px; font-family: var(--serif); }
.create-main { display: flex; gap: 12px; align-items: stretch; }
#preview { width: 150px; height: 170px; flex: none;
  background: radial-gradient(ellipse at 50% 85%, rgba(255,210,140,.22), transparent 70%); }
.create-side { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cls-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.cls-btn { background: none; padding: 3px 0; font-size: 11px; font-weight: 800; line-height: 1.2; color: #fff; text-shadow: var(--stroke); }
.cls-btn .dot { display: block; width: 12px; height: 12px; border-radius: 50%; margin: 0 auto 3px; border: 2px solid #f3d38a; }
.cls-btn.sel { text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.cls-desc { font-size: 12px; padding: 4px 6px; flex: 1; }
.cls-desc h3 { margin: 0; font: 800 16px var(--serif); text-shadow: var(--stroke); }
.cls-desc .role { opacity: .7; font-size: 11px; margin-bottom: 4px; }
.cls-desc .sk { margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.cls-desc .sk img { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 1.5px #d9b45a; flex: none; }
.row { display: flex; align-items: center; gap: 10px; }
.row label { width: 80px; font-size: 13px; opacity: .85; flex: none; font-family: var(--serif); font-weight: 700; }
.pick { display: flex; gap: 6px; flex-wrap: wrap; }
.pick button { min-width: 44px; height: 36px; background: none; font-weight: 800; color: #fff; text-shadow: var(--stroke); }
.pick button.sel { text-shadow: 0 1px 0 rgba(255,255,255,.5); }
#name-input { height: 48px; background: none; color: var(--cream); padding: 0 8px; font: inherit; font-size: 16px; outline: none;
  -webkit-user-select: text; user-select: text; }
#create-msg { color: #ff8f7a; min-height: 18px; font-size: 13px; text-align: center; text-shadow: var(--stroke); }
.primary { height: 56px; font: 900 20px var(--serif); letter-spacing: 2px; }

#status { position: fixed; left: 50%; top: calc(8px + var(--sat)); transform: translateX(-50%); z-index: 20; padding: 2px 12px; font-weight: 700;
  color: #ffb49a; }

@media (max-width: 700px) and (orientation: portrait) {
  #me-frame, #quest-track { width: 200px; }
  #zone-name { min-width: 0; max-width: calc(100vw - 222px - var(--sal) - var(--sar)); padding: 1px 4px; font-size: 12px; line-height: 18px;
    border-width: 5px 12px; border-image-width: 5px 12px; overflow: hidden; text-overflow: ellipsis; }
  #zone-name small { display: none; }
  #net-info { margin-right: 8px; }
  .menu { flex-direction: column; gap: 3px; }
  .icon-btn { width: 44px; height: 44px; }
  #target-frame { top: calc(150px + var(--sat)); width: 60vw; }
  #chat-log { bottom: calc(250px + var(--sab)); width: 60vw; }
  .create-main { flex-direction: column; align-items: center; }
  #preview { width: 140px; height: 150px; }
  .create-side { width: 100%; }
  .logo .lantern { height: 60px; }
  .logo .lantern:first-child { left: -54px; } .logo .lantern:last-child { right: -54px; }
}
@media (max-height: 420px) {
  #actions { transform: scale(.85); transform-origin: right bottom; }
  #quest-track { top: calc(92px + var(--sat)); }
  #chat-log { bottom: calc(150px + var(--sab)); max-height: 90px; }
}