* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #0d1b2a; font-family: 'Kanit', Tahoma, sans-serif; color: #eef2ff; user-select: none; }
#c { display: block; position: fixed; inset: 0; cursor: pointer; }

.panel {
  position: fixed;
  background: rgba(14, 20, 36, 0.8);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 215, 120, 0.25);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  padding: 10px 12px;
}

/* Player card */
#hudTL { top: 12px; left: 12px; width: 280px; }
.name-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 17px; }
#pName { color: #ffd84d; font-weight: 600; }
.lv { background: linear-gradient(135deg, #ffcf4d, #e08a1e); color: #2a1600; border-radius: 8px; padding: 0 8px; font-weight: 600; font-size: 13px; }
.bar { position: relative; height: 16px; background: rgba(0, 0, 0, 0.5); border-radius: 8px; overflow: hidden; margin: 5px 0; }
.bar > div { height: 100%; width: 0; transition: width 0.15s; }
.bar.hp > div { background: linear-gradient(90deg, #d92b45, #ff6b6b); }
.bar.exp > div { background: linear-gradient(90deg, #3b82f6, #60c8ff); }
.bar span { position: absolute; inset: 0; font-size: 11px; display: flex; align-items: center; justify-content: center; text-shadow: 0 1px 2px #000; }
.gold-row { display: flex; justify-content: space-between; margin-top: 6px; font-size: 14px; }
#gold { color: #ffd84d; }
.state { font-size: 12px; opacity: 0.85; }

/* Server info */
#hudTR { top: 12px; right: 12px; width: 290px; }
.info { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
#mini { width: 100%; display: block; border-radius: 8px; background: #2a6fb8; }

/* Side panel */
#side { top: 200px; right: 12px; width: 290px; bottom: 12px; overflow-y: auto; }
#side h3 { font-size: 14px; font-weight: 600; color: #ffd84d; margin: 10px 0 6px; }
#side h3:first-child { margin-top: 0; }
#side::-webkit-scrollbar { width: 6px; }
#side::-webkit-scrollbar-thumb { background: rgba(255, 215, 120, 0.3); border-radius: 3px; }

button { font-family: inherit; cursor: pointer; border: none; color: inherit; }
.btn-toggle { width: 100%; padding: 8px; border-radius: 8px; font-weight: 600; background: #444b5c; }
.btn-toggle.on { background: linear-gradient(135deg, #22c55e, #15803d); }
.btn-toggle.small { margin-top: 5px; padding: 5px; font-size: 12px; font-weight: 400; }
.btn-danger { width: 100%; margin-top: 12px; padding: 6px; border-radius: 8px; background: rgba(220, 38, 38, 0.25); color: #fca5a5; font-size: 12px; }
.btn-danger:hover { background: rgba(220, 38, 38, 0.45); }

.zone { display: flex; justify-content: space-between; width: 100%; padding: 7px 10px; margin-bottom: 4px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); font-size: 13px; border: 1px solid transparent; }
.zone:hover { background: rgba(255, 255, 255, 0.12); }
.zone.active { border-color: #ffd84d; background: rgba(255, 216, 77, 0.15); }
.zone .rec { opacity: 0.75; }
.zone.danger .rec { color: #ff7b7b; opacity: 1; }

.up { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 7px 10px; margin-bottom: 4px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); text-align: left; transition: background 0.15s, transform 0.05s; }
.up:hover:not(:disabled) { background: rgba(255, 216, 77, 0.18); }
.up:active:not(:disabled) { transform: scale(0.98); }
.up:disabled { opacity: 0.45; cursor: not-allowed; }
.up b { font-size: 13px; font-weight: 600; }
.up small { display: block; font-size: 11px; opacity: 0.7; }
.up .up-lv { font-size: 11px; color: #7cc7ff; margin-left: 4px; }
.up .up-cost { font-size: 13px; color: #ffd84d; white-space: nowrap; }

/* Chat */
#chat { left: 12px; bottom: 12px; width: 380px; height: 220px; display: flex; flex-direction: column; padding: 8px; }
#chatLog { flex: 1; overflow-y: auto; font-size: 13px; line-height: 1.45; padding-right: 4px; user-select: text; }
#chatLog::-webkit-scrollbar { width: 5px; }
#chatLog::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }
.msg .who { font-weight: 600; color: #7cc7ff; }
.msg.me .who { color: #ffd84d; }
.msg.sys { color: #ffd84d; font-style: italic; }
.msg.warn { color: #ff8a8a; }
#chatInput { width: 100%; margin-top: 6px; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(0, 0, 0, 0.4); color: #fff; font-family: inherit; font-size: 13px; outline: none; }
#chatInput:focus { border-color: #ffd84d; }

#hint { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); font-size: 12px; background: rgba(0, 0, 0, 0.45); padding: 4px 12px; border-radius: 20px; opacity: 0.8; pointer-events: none; }

.zone .cnt { font-style: normal; }

/* Gear (side panel) */
#gearMini { font-size: 12.5px; margin-bottom: 6px; }
.gm-row { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); margin-bottom: 3px; white-space: nowrap; overflow: hidden; }
.gm-row b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.gm-row small { margin-left: auto; opacity: 0.6; }
.gm-row i { opacity: 0.45; }
.btn-bag { width: 100%; padding: 7px; border-radius: 8px; font-weight: 600; background: linear-gradient(135deg, #6d4bd8, #4a2fa8); }
.btn-bag:hover { filter: brightness(1.15); }
kbd { font-family: inherit; font-size: 10px; padding: 0 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.25); margin-left: 4px; }

/* Inventory */
#inv { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 8; }
#inv.hidden { display: none; }
.inv-box { position: static; width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; padding: 14px 16px; }
.inv-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.inv-head h2 { color: #ffd84d; font-size: 20px; font-weight: 600; }
.inv-head small { font-size: 13px; color: #eef2ff; opacity: 0.6; margin-left: 6px; }
.inv-x { background: rgba(255, 255, 255, 0.08); width: 30px; height: 30px; border-radius: 8px; font-size: 14px; }
.inv-x:hover { background: rgba(255, 255, 255, 0.18); }
.inv-body { display: grid; grid-template-columns: 220px 1fr; gap: 14px; }
.inv-left { display: flex; flex-direction: column; gap: 10px; }
#equipSlots { display: flex; flex-direction: column; gap: 6px; }
.eq-slot { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border-radius: 10px; text-align: left; background: rgba(255, 255, 255, 0.05); border: 2px solid var(--rc, rgba(255, 255, 255, 0.12)); }
.eq-slot.empty { border-style: dashed; opacity: 0.5; }
.eq-slot .ilv { position: static; order: 3; margin-left: auto; }
.eq-name { font-size: 13px; font-weight: 600; color: var(--rc, inherit); }
.statgrid, #stats { font-size: 12.5px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; }
.statgrid div, #stats div { display: flex; justify-content: space-between; }
.statgrid span, #stats span { opacity: 0.7; }
#invGrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.it-tile { position: relative; aspect-ratio: 1; border-radius: 9px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 22%, transparent), rgba(0, 0, 0, 0.35)); border: 2px solid var(--rc, transparent); display: flex; align-items: center; justify-content: center; }
.it-tile.empty { background: rgba(255, 255, 255, 0.04); border: 1px dashed rgba(255, 255, 255, 0.1); }
.it-tile:hover, .eq-slot:not(.empty):hover { filter: brightness(1.2); }
.it-tile.sel, .eq-slot.sel { box-shadow: 0 0 0 2px #fff, 0 0 14px var(--rc); }
.ico { font-size: 22px; line-height: 1; }
.ilv { position: absolute; bottom: 2px; right: 4px; font-size: 10px; opacity: 0.85; }
.up-arrow { color: #4ade80; font-size: 11px; }
.it-tile .up-arrow { position: absolute; top: 2px; left: 4px; }
.iplus { position: absolute; top: 2px; right: 4px; font-size: 10.5px; font-weight: 600; color: #ffd84d; text-shadow: 0 1px 2px #000; }
.eq-slot .iplus { display: none; } /* the name already shows +N */
.icls { position: absolute; bottom: 1px; left: 3px; font-size: 11px; }
.it-tile.nofit { opacity: 0.45; filter: grayscale(0.6); }
.cls-weapons { display: flex; flex-direction: column; gap: 3px; }
.cls-weapon { padding: 4px 7px; border-radius: 7px; background: rgba(255, 216, 77, 0.08); }
.cls-weapon b { display: block; font-size: 12.5px; }
.cls-weapon small { opacity: 0.75; font-size: 11px; }
.it-plus { font-weight: 400; font-size: 11.5px; color: #ffd84d; }
.btn-act.enh { display: flex; flex-direction: column; align-items: center; gap: 1px; background: linear-gradient(135deg, #7a5a1e, #4a3510); color: #ffe3a3; }
.btn-act.enh small { font-size: 11px; font-weight: 400; opacity: 0.85; }
.btn-act.enh:hover:not(:disabled) { filter: brightness(1.2); background: linear-gradient(135deg, #7a5a1e, #4a3510); }
.enh-result { margin: -2px 0 6px; padding: 4px 8px; border-radius: 6px; font-weight: 600; text-align: center; animation: enhPop 0.35s ease-out; }
.enh-result.ok { background: rgba(255, 216, 77, 0.18); color: #ffd84d; }
.enh-result.fail { background: rgba(255, 90, 90, 0.15); color: #ff8a8a; }
@keyframes enhPop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#itemDetail { margin-top: 10px; min-height: 120px; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); font-size: 13px; }
#itemDetail .hint { opacity: 0.6; }
.it-name { font-size: 16px; font-weight: 600; }
.it-sub { font-size: 12px; opacity: 0.65; margin-bottom: 6px; }
.it-main { font-weight: 600; font-size: 14px; }
.it-aff { color: #9fd3ff; }
.it-cmp { margin-top: 6px; opacity: 0.8; }
.it-cmp.better { color: #4ade80; opacity: 1; }
.it-cmp.worse { color: #ff8a8a; opacity: 1; }
.it-actions { display: flex; gap: 6px; margin-top: 10px; }
.btn-act { flex: 1; padding: 7px; border-radius: 8px; font-weight: 600; background: rgba(255, 255, 255, 0.1); }
.btn-act:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); }
.btn-act.primary { background: linear-gradient(135deg, #22c55e, #15803d); }
.btn-act:disabled { opacity: 0.4; cursor: not-allowed; }
.inv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 13px; }
.inv-foot select { font-family: inherit; margin-left: 4px; padding: 3px 6px; border-radius: 6px; background: #1c2438; color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); }
.inv-foot input { accent-color: #22c55e; vertical-align: middle; }
.btn-sell { margin-left: auto; padding: 6px 12px; border-radius: 8px; background: rgba(255, 216, 77, 0.15); color: #ffd84d; font-size: 12.5px; }
.btn-sell:hover { background: rgba(255, 216, 77, 0.3); }
.msg.announce { color: #ffe9a8; background: rgba(255, 154, 46, 0.12); border-radius: 4px; padding: 0 4px; }
@media (max-width: 640px) {
  .inv-body { grid-template-columns: 1fr; }
  #invGrid { grid-template-columns: repeat(6, 1fr); gap: 4px; }
}

/* World boss */
#bossBar { top: 12px; left: 50%; transform: translateX(-50%); width: min(400px, calc(100vw - 640px)); min-width: 300px; padding: 8px 12px; border-color: rgba(255, 123, 255, 0.45); z-index: 3; }
#bossBar.hidden { display: none; }
/* the secret tower: floor, wave and timer (sits under the boss bar when both show) */
#towerHud { top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; padding: 6px 14px; border-color: rgba(176, 122, 255, 0.5); z-index: 3; font-size: 13px; white-space: nowrap; }
#towerHud.hidden { display: none; }
/* cloud save button (top right) and the save picker */
.cloud { margin-left: auto; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: inherit; border-radius: 8px; padding: 1px 8px; font: inherit; font-size: 12px; cursor: pointer; }
.cloud.out { color: #9fd3ff; }
.cloud.error, .cloud.conflict { border-color: #ff9a5a; color: #ffb27a; }
.cloud-pick { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.cloud-card { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px 12px; border-radius: 10px; background: rgba(124, 199, 255, 0.08); border: 1px solid rgba(124, 199, 255, 0.35); color: inherit; font: inherit; cursor: pointer; }
.cloud-card:hover { background: rgba(124, 199, 255, 0.18); }
.cloud-card small, .cloud-note { opacity: 0.75; font-size: 12px; }
#modalBox input[type=email] { width: 100%; box-sizing: border-box; margin: 6px 0; }
/* start screen: Google or Guest (online.js) */
#startScreen { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(20, 16, 40, 0.88), rgba(5, 4, 12, 0.96)); }
#startScreen[hidden] { display: none; }
.start-box { position: static; width: min(400px, 92vw); padding: 26px 22px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.start-box h1 { color: #ffd84d; font-size: 30px; margin: 0 0 4px; }
.start-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 14px; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.2); }
.start-btn small { font-size: 12px; font-weight: 400; opacity: 0.75; }
.start-btn.google { background: #ffffff; color: #1f1f1f; }
.start-btn.google .g { display: inline-block; font-weight: 800; color: #4285f4; margin-right: 6px; }
.start-btn.guest { background: rgba(124, 199, 255, 0.12); color: #e8f2ff; }
.start-btn:hover { filter: brightness(1.08); }
.start-btn:disabled { opacity: 0.6; cursor: wait; }
.start-email { display: flex; gap: 6px; }
.start-email input { flex: 1; padding: 9px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.4); color: #fff; font: inherit; }
.start-note { font-size: 12px; opacity: 0.75; margin: 0; }
.start-note.warn { color: #ffb27a; opacity: 1; }
/* world chat + leaderboards (online.js) */
.msg.world .who { color: #7cd8ff; }
.msg.me.world .who { color: #ffd84d; }
.who.clickable { cursor: pointer; }
.who.clickable:hover { text-decoration: underline; }
.cloud.rank { margin-left: auto; }
.cloud.rank + .cloud { margin-left: 4px; }
.rk-tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 6px 0 10px; }
.rk-tab { padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.rk-tab.on { background: rgba(255, 216, 77, 0.2); border-color: rgba(255, 216, 77, 0.6); color: #ffd84d; }
.rk-body { max-height: min(52vh, 420px); overflow-y: auto; }
.rk-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.rk-table td { padding: 5px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.rk-table td:first-child { width: 32px; text-align: center; opacity: 0.8; }
.rk-table td:last-child { text-align: right; white-space: nowrap; }
.rk-table tr.me td { color: #ffd84d; background: rgba(255, 216, 77, 0.08); }
.rk-table tr.gap td { text-align: center; opacity: 0.5; border: 0; }
#modalBox:has(.rk-table), #modalBox:has(.rk-tabs) { width: min(460px, 92vw); }
#towerHud .low { color: #ff6b6b; font-weight: 700; }
body.boss-on #towerHud { top: 122px; }
.tw-row.done { opacity: 0.85; }
body.boss-on #hint { display: none; }
.bb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
.bb-head b { color: #ff9bff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-head span { font-size: 12px; opacity: 0.85; white-space: nowrap; }
.bar.boss { height: 12px; margin: 5px 0 6px; }
.bar.boss > div { background: linear-gradient(90deg, #8e1fb0, #ff4fd8); }
#bbTop { list-style: none; font-size: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px 14px; }
#bbTop li { display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; overflow: hidden; }
#bbTop li span { overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }
#bbTop li.me { color: #ffd84d; }
#bbTop li.me span { opacity: 1; }
#bbTop li.low b { color: #ff8a8a; }
#bbTop li.empty { grid-column: 1 / -1; opacity: 0.55; }
.boss-tag { white-space: nowrap; font-style: normal; font-size: 10.5px; opacity: 0.55; margin-left: 2px; }
.boss-tag.soon { opacity: 1; color: #ffb347; }
.boss-tag.alive { opacity: 1; color: #ff7bff; font-weight: 600; animation: pulse 1s infinite alternate; }
@keyframes pulse { from { opacity: 0.6; } to { opacity: 1; } }
.btn-boss { width: 100%; padding: 8px; margin: 2px 0 4px; border-radius: 8px; font-weight: 600; font-size: 13px; background: linear-gradient(135deg, #b02aa8, #6a1b9a); box-shadow: 0 0 12px rgba(255, 79, 216, 0.35); }
.btn-boss:hover { filter: brightness(1.15); }
.btn-boss.hidden { display: none; }
@media (max-width: 860px) {
  #bossBar { top: auto; bottom: calc(42vh + 92px); width: calc(100vw - 24px); min-width: 0; }
  #bbTop { display: none; }
}

/* Classes */
#classMini { font-size: 12.5px; margin-bottom: 6px; }
.cm-row { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); }
.cm-row span { font-size: 16px; }
.cm-row small { margin-left: auto; opacity: 0.7; }
.cm-row small.cm-ready { opacity: 1; color: #ffd84d; font-weight: 600; }
.btn-class { width: 100%; padding: 7px; border-radius: 8px; font-weight: 600; background: linear-gradient(135deg, #2f6fe0, #1d4aa8); }
.btn-class:hover { filter: brightness(1.15); }
.btn-class.pulse { animation: classPulse 1.2s infinite alternate; }
@keyframes classPulse { from { box-shadow: 0 0 0 rgba(255, 216, 77, 0); } to { box-shadow: 0 0 14px rgba(255, 216, 77, 0.8); } }
#classUI { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 8; }
#classUI.hidden { display: none; }
.cls-box { position: static; width: min(980px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; padding: 14px 16px; }
.cls-intro { font-size: 14px; margin-bottom: 10px; }
.cls-go { width: auto; padding: 8px 16px; margin-bottom: 10px; }
.cls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; }
.cls-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 12px; }
.cls-card.mine { border-color: #ffd84d; }
.cls-card p { opacity: 0.8; line-height: 1.45; }
.cls-card .btn-act { margin-top: auto; }
.cls-top { display: flex; align-items: center; gap: 8px; }
.cls-top b { display: block; font-size: 16px; color: #ffd84d; }
.cls-top small { opacity: 0.7; }
.cls-ico { font-size: 28px; line-height: 1; }
.cls-ico.big { font-size: 44px; }
.cls-path { font-size: 11px; color: #9fd3ff; }
.cls-row { font-size: 12px; opacity: 0.9; }
.cls-skills { display: flex; flex-direction: column; gap: 4px; }
.cls-skill { padding: 5px 7px; border-radius: 7px; background: rgba(0, 0, 0, 0.3); }
.cls-skill b { display: block; font-size: 12.5px; }
.cls-skill small { opacity: 0.7; font-size: 11px; }
.cls-me { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(255, 216, 77, 0.08); border: 1px solid rgba(255, 216, 77, 0.3); margin-bottom: 10px; }
.cls-me b { font-size: 20px; color: #ffd84d; }
.cls-me small { display: block; opacity: 0.75; margin-bottom: 4px; }
.cls-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.cls-tier { display: flex; flex-direction: column; gap: 5px; padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.cls-tier.locked { opacity: 0.55; }
.cls-tier-h { font-weight: 600; font-size: 13.5px; }
.cls-tier-h small { display: block; font-weight: 400; font-size: 11px; opacity: 0.75; }
.quest { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; background: rgba(47, 111, 224, 0.12); border: 1px solid rgba(124, 199, 255, 0.35); font-size: 12.5px; }
.quest.done { background: rgba(255, 216, 77, 0.1); border-color: rgba(255, 216, 77, 0.5); }
.quest.locked { opacity: 0.7; background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); }
.quest-h { font-size: 14.5px; font-weight: 600; color: #ffd84d; }
.quest .btn-act { margin-top: 4px; }
.quest-fee .bad { color: #ff8a8a; }
.goal-t { display: flex; justify-content: space-between; gap: 8px; }
.goal-t b { font-weight: 600; white-space: nowrap; }
.goal-bar { height: 6px; margin-top: 3px; border-radius: 3px; background: rgba(0, 0, 0, 0.4); overflow: hidden; }
.goal-bar > div { height: 100%; background: linear-gradient(90deg, #3b82f6, #60c8ff); }
.goal.done .goal-bar > div { background: linear-gradient(90deg, #22c55e, #86efac); }
.quest.sub { background: rgba(124, 199, 255, 0.07); border-color: rgba(124, 199, 255, 0.3); }
.quest.sub .quest { margin: 4px 0 0; }
.sub-me { padding: 6px 8px; border-radius: 8px; background: rgba(124, 199, 255, 0.12); }
.sub-me b { font-size: 14px; color: #9fd3ff; }
.sub-me small { display: block; opacity: 0.8; }
.sub-pick-h { margin-top: 4px; font-size: 12px; opacity: 0.85; }
.sub-skills, .sub-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.sub-skill, .sub-opt { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border-radius: 9px; text-align: left; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); }
.sub-skill:hover, .sub-opt:hover { background: rgba(124, 199, 255, 0.15); }
.sub-skill.on { border-color: #7cc7ff; background: rgba(124, 199, 255, 0.18); }
.sub-skill b, .sub-opt b { font-size: 12.5px; }
.sub-skill small, .sub-opt small { font-size: 11px; opacity: 0.75; }
#questMini:empty { display: none; }
.qm { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; padding: 5px 7px; border-radius: 8px; background: rgba(47, 111, 224, 0.12); font-size: 11.5px; }
.qm b { font-size: 12px; color: #9fd3ff; }
.qm.done { background: rgba(255, 216, 77, 0.12); }
.qm.done b, .qm-go { color: #ffd84d; }
.qm-go { font-weight: 600; }
.it-warn { margin-top: 6px; padding: 4px 8px; border-radius: 6px; background: rgba(255, 154, 46, 0.15); color: #ffb35c; font-size: 12px; }

/* Crafting */
.btn-craft { width: 100%; padding: 7px; margin-top: 5px; border-radius: 8px; font-weight: 600; background: linear-gradient(135deg, #c0701e, #8a4a10); }
.btn-craft:hover { filter: brightness(1.15); }
.cr-new { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 10.5px; font-weight: 600; background: #ff4f6d; color: #fff; vertical-align: middle; }
.cr-new.hidden { display: none; }
#craftUI { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 8; }
#craftUI.hidden { display: none; }
.craft-box { position: static; width: min(900px, calc(100vw - 24px)); height: min(640px, calc(100vh - 24px)); display: flex; flex-direction: column; padding: 14px 16px; }
#craftBody { flex: 1; overflow-y: auto; padding-right: 4px; }
#craftBody .hint { margin-top: 10px; font-size: 11.5px; opacity: 0.6; }
.cr-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.cr-tab { padding: 6px 14px; border-radius: 8px; font-weight: 600; font-size: 13px; background: rgba(255, 255, 255, 0.07); }
.cr-tab.on { background: #ff9a2e; color: #1a1200; }
.cr-tab small { opacity: 0.7; }
.cr-gold { margin-left: auto; font-size: 13px; color: #ffd84d; }
.cr-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.cr-chip { padding: 3px 10px; border-radius: 12px; font-size: 12px; background: rgba(255, 255, 255, 0.07); }
.cr-chip.on { background: rgba(255, 154, 46, 0.3); color: #ffd9a8; }
.cr-group { margin-bottom: 10px; }
.cr-gh { font-size: 12.5px; font-weight: 600; color: #ffd84d; margin-bottom: 4px; }
.cr-gh small { font-weight: 400; color: #eef2ff; opacity: 0.6; font-size: 11px; }
.cr-mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
.cr-mat { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: rgba(255, 255, 255, 0.05); border-left: 3px solid var(--tc); font-size: 12px; }
.cr-mat .ico { font-size: 22px; }
.cr-mat b { display: block; color: var(--tc); font-size: 12.5px; }
.cr-mat small { opacity: 0.7; font-size: 11px; }
.cr-mat > div { flex: 1; min-width: 0; }
.cr-mat.unseen { opacity: 0.5; }
.cr-mat.unseen b { color: #aab3c5; }
.cr-sell { padding: 2px 7px; border-radius: 6px; font-size: 11px; background: rgba(255, 216, 77, 0.15); color: #ffe3a3; white-space: nowrap; }
.cr-sell:hover { background: rgba(255, 216, 77, 0.3); }
.cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.cr-card { display: flex; flex-direction: column; gap: 5px; padding: 9px 10px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 12px; }
.cr-card.can { border-color: rgba(255, 154, 46, 0.55); }
.cr-card.built { border-color: rgba(93, 255, 138, 0.4); background: rgba(93, 255, 138, 0.06); }
.cr-card.locked { opacity: 0.6; border-style: dashed; }
.cr-top { display: flex; align-items: center; gap: 8px; }
.cr-top .ico { font-size: 28px; line-height: 1; }
.cr-top b { display: block; font-size: 13.5px; color: #ffd84d; }
.cr-top small { opacity: 0.7; font-size: 11px; }
.cr-eff { color: #9fe8b0; }
.cr-desc { opacity: 0.6; font-style: italic; }
.cr-hint { color: #9fd3ff; }
.cr-active { color: #ffb347; }
.cr-fire { color: #ffb35c; opacity: 0.8; }
.cr-fire.on { color: #ffd25a; opacity: 1; font-weight: 600; }
.cr-needs { display: flex; flex-wrap: wrap; gap: 4px; }
.cr-need { padding: 1px 6px; border-radius: 6px; background: rgba(255, 79, 109, 0.15); color: #ff9aa9; font-size: 11.5px; }
.cr-need.ok { background: rgba(93, 255, 138, 0.12); color: #a8f5bd; }
.cr-btns { display: flex; gap: 5px; margin-top: auto; }
.cr-btns .btn-act { flex: 1; padding: 5px 4px; }
.cr-done { color: #5dff8a; font-weight: 600; }
.cr-auto { padding: 4px 10px; border-radius: 7px; font-size: 11px; font-weight: 600; background: rgba(0, 0, 0, 0.45); color: #8a93a6; }
.cr-auto.on { background: #15803d; color: #eafff0; }
.cr-grid.sets { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.cr-bonus { padding: 3px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.3); opacity: 0.6; }
.cr-bonus b { color: #9fd3ff; margin-right: 4px; }
.cr-bonus.on { opacity: 1; background: rgba(124, 199, 255, 0.15); color: #d5ecff; }
.cr-piece { display: flex; flex-direction: column; gap: 4px; padding: 6px 7px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); }
.cr-piece.on { background: rgba(93, 255, 138, 0.07); }
.cr-pn { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cr-pn small { color: #5dff8a; }
.cr-wts { display: flex; gap: 3px; margin-left: auto; }
.cr-wt { width: 28px; height: 24px; border-radius: 6px; font-size: 14px; background: rgba(0, 0, 0, 0.35); border: 1px solid transparent; }
.cr-wt.on { border-color: #ffd84d; background: rgba(255, 216, 77, 0.15); }
.cr-needs .cr-mk { margin-left: auto; padding: 3px 10px; flex: 0 0 auto; }
.iset { position: absolute; top: 1px; left: 50%; transform: translateX(-50%); font-size: 10px; }
.eq-slot .iset { top: auto; left: auto; transform: none; bottom: 2px; right: 4px; }
.it-set { margin: 4px 0; padding: 5px 8px; border-radius: 7px; background: rgba(124, 199, 255, 0.1); font-size: 12px; }
.it-set b { color: #9fd3ff; }
.it-set div { opacity: 0.55; }
.it-set div.on { opacity: 1; color: #d5ecff; }
.pot { display: grid; grid-template-columns: 210px 1fr; gap: 10px; }
.pot-list { display: flex; flex-direction: column; gap: 4px; }
.pot-item { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 8px; text-align: left; background: rgba(255, 255, 255, 0.05); border: 1px solid transparent; }
.pot-item .ico { font-size: 20px; }
.pot-item b { display: block; font-size: 12px; }
.pot-item small { font-size: 10.5px; opacity: 0.7; }
.pot-item.on { border-color: #ff9bff; background: rgba(255, 123, 255, 0.12); }
.pot-item.found b { color: #ff9bff; }
.pot-main { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 11px; background: rgba(255, 255, 255, 0.04); font-size: 12.5px; min-width: 0; }
.pot-main .cr-top b { color: #ff9bff; }
.pot-hints { display: flex; flex-direction: column; gap: 4px; }
.pot-hint { padding: 5px 8px; border-radius: 7px; background: rgba(255, 216, 77, 0.1); color: #ffe9a8; }
.pot-hint.locked { background: rgba(0, 0, 0, 0.25); color: #aab3c5; font-size: 11.5px; }
.pot-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.pot-arrow { opacity: 0.5; }
.pot-slot { width: 84px; height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); border: 2px dashed rgba(255, 255, 255, 0.2); }
.pot-slot .ico { font-size: 26px; opacity: 0.4; }
.pot-slot small { font-size: 10.5px; opacity: 0.7; max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pot-slot.full { border: 2px solid #ff9bff; background: rgba(255, 123, 255, 0.1); }
.pot-slot.full .ico { opacity: 1; }
.pot-go { align-self: center; padding: 7px 18px; }
.pot-warn { text-align: center; color: #ffb35c; font-size: 11px; }
.pot-descs { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); font-size: 11.5px; opacity: 0.9; }
.pot-descs b { color: #ff9bff; font-weight: 600; }
.pot-mats { display: flex; flex-wrap: wrap; gap: 4px; }
.pot-mat { display: flex; flex-direction: column; align-items: center; width: 46px; padding: 3px 0; border-radius: 8px; background: rgba(0, 0, 0, 0.3); border-bottom: 2px solid var(--tc); }
.pot-mat span { font-size: 19px; }
.pot-mat small { font-size: 10px; opacity: 0.8; }
.pot-mat:hover { background: rgba(255, 123, 255, 0.15); }
.pot-log { display: flex; flex-direction: column; gap: 3px; }
.pot-log-row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.25); font-size: 12px; }
.pot-log-row b { color: #ffd84d; }
.pot-found { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; background: rgba(255, 123, 255, 0.1); }
.pot-found .ico { font-size: 40px; }
.pot-found b { color: #ff9bff; font-size: 15px; }
.relic-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-weight: 600; color: #ff9bff; }
.relic-head small { font-weight: 400; color: #eef2ff; opacity: 0.55; font-size: 11px; }
.relic-head span { margin-left: auto; color: #ffd84d; }
.relic-slots { display: flex; gap: 8px; margin-bottom: 12px; }
.relic-slot { flex: 1; min-height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); border: 2px dashed rgba(255, 255, 255, 0.18); font-size: 11.5px; text-align: center; }
.relic-slot .ico { font-size: 24px; opacity: 0.5; }
.relic-slot.full { border: 2px solid #ff9bff; background: rgba(255, 123, 255, 0.1); }
.relic-slot.full .ico { opacity: 1; }
.relic-slot b { color: #ff9bff; }
.relic-slot small { opacity: 0.75; }
@media (max-width: 640px) { .pot { grid-template-columns: 1fr; } .pot-list { flex-direction: row; flex-wrap: wrap; } .pot-item { flex: 1 0 45%; } }
/* Story (C4) */
.btn-story { width: 100%; padding: 7px; margin-top: 5px; border-radius: 8px; font-weight: 600; background: linear-gradient(135deg, #2f9a8a, #1d6a60); }
.btn-story:hover { filter: brightness(1.15); }
#storyUI { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 8; }
#storyUI.hidden { display: none; }
.story-box { position: static; width: min(900px, calc(100vw - 24px)); height: min(640px, calc(100vh - 24px)); display: flex; flex-direction: column; padding: 14px 16px; }
.sy-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px 1fr; gap: 10px; }
#storyList { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
#storyBody { overflow-y: auto; padding: 4px 6px 4px 2px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.sy-tab { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; text-align: left; background: rgba(255, 255, 255, 0.05); border: 1px solid transparent; }
.sy-tab.on { border-color: #7cc7ff; background: rgba(124, 199, 255, 0.12); }
.sy-tab.done b { color: #8fe3a5; }
.sy-tab b { display: block; font-size: 12px; }
.sy-tab small { font-size: 10.5px; opacity: 0.65; }
.sy-mk { width: 22px; text-align: center; font-size: 15px; color: #ffd84d; font-weight: 700; }
.sy-head { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.sy-face { font-size: 30px; }
.sy-head b { display: block; font-size: 16px; color: #9fd3ff; }
.sy-head small { opacity: 0.7; }
.sy-line { display: flex; gap: 8px; align-items: flex-start; }
.sy-who { font-size: 18px; }
.sy-line > div { flex: 1; padding: 6px 10px; border-radius: 4px 12px 12px 12px; background: rgba(255, 255, 255, 0.07); }
.sy-line b { font-size: 11px; color: #9fd3ff; }
.sy-line p { line-height: 1.5; }
.sy-go, .sy-puz > .btn-act { flex: none; align-self: flex-start; padding: 7px 16px; }
.sy-lock { padding: 6px 10px; border-radius: 8px; background: rgba(255, 154, 46, 0.12); color: #ffcf8a; }
.sy-reward { padding: 8px 10px; border-radius: 8px; background: rgba(93, 255, 138, 0.1); color: #a8f5bd; font-weight: 600; }
.sy-puz { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 11px; background: rgba(124, 199, 255, 0.07); border: 1px solid rgba(124, 199, 255, 0.25); }
.sy-ph { font-weight: 600; color: #ffd84d; }
.sy-ph small { display: block; font-weight: 400; color: #eef2ff; opacity: 0.6; font-size: 11px; }
.sy-poem { padding: 8px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); font-style: italic; line-height: 1.7; color: #ffe9a8; }
.sy-finds { display: flex; flex-wrap: wrap; gap: 6px; }
.sy-finds span { padding: 4px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.3); opacity: 0.6; }
.sy-finds span.got { opacity: 1; background: rgba(93, 255, 138, 0.12); color: #a8f5bd; }
.sy-slots { display: flex; gap: 6px; flex-wrap: wrap; }
.sy-slot { width: 62px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; font-size: 22px; background: rgba(0, 0, 0, 0.35); border: 2px dashed rgba(255, 255, 255, 0.2); }
.sy-slot small { font-size: 10px; opacity: 0.7; }
.sy-slot.full { border: 2px solid #7cc7ff; background: rgba(124, 199, 255, 0.12); }
.sy-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.sy-choices.col { flex-direction: column; }
.sy-choice { padding: 6px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); text-align: left; }
.sy-choice:hover:not(:disabled) { background: rgba(124, 199, 255, 0.2); }
.sy-choice:disabled { opacity: 0.35; }
.sy-q { font-size: 14px; line-height: 1.5; }
.sy-tries { opacity: 0.6; font-size: 11px; }
.sy-give { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 5px; max-height: 220px; overflow-y: auto; }
.sy-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 3px; border-radius: 8px; font-size: 20px; background: rgba(0, 0, 0, 0.3); }
.sy-item small { font-size: 10px; opacity: 0.8; text-align: center; line-height: 1.2; }
.sy-item:hover { background: rgba(124, 199, 255, 0.2); }
.sy-msg { padding: 6px 10px; border-radius: 8px; font-weight: 600; }
.sy-shop-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: rgba(0, 0, 0, 0.25); border-left: 3px solid var(--tc); }
.sy-shop-row .ico { font-size: 22px; }
.sy-shop-row > div { flex: 1; min-width: 0; }
.sy-shop-row b { display: block; font-size: 12.5px; }
.sy-shop-row small { font-size: 11px; opacity: 0.8; }
.sy-shop-row s { opacity: 0.5; }
.sy-shop-row .btn-act { flex: none; padding: 4px 10px; font-size: 12px; }
.sy-shop-row.done { opacity: 0.6; }
.cr-shop { color: #ffd84d; font-weight: 600; }
.sy-msg.ok { background: rgba(93, 255, 138, 0.15); color: #a8f5bd; }
.sy-msg.bad { background: rgba(255, 79, 109, 0.15); color: #ffb0bd; }
@media (max-width: 640px) { .sy-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } #storyList { max-height: 150px; } }
#buffBar { position: fixed; bottom: 104px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 3; pointer-events: auto; }
.bf { display: flex; flex-direction: column; align-items: center; min-width: 38px; padding: 2px 4px; border-radius: 8px; background: rgba(10, 14, 26, 0.75); border: 1px solid rgba(255, 216, 77, 0.4); }
.bf span { font-size: 17px; line-height: 1.2; }
.bf small { font-size: 10px; opacity: 0.85; }
.bf.pot { border-color: rgba(93, 255, 138, 0.4); }
@media (max-width: 860px) { #buffBar { bottom: calc(42vh + 100px); } }
body.studio-edit #buffBar { display: none !important; }

/* Skill bar */
#skillBar { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; z-index: 3; width: max-content; max-width: calc(100vw - 24px); }
.sk { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sk-btn { position: relative; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #2c3a5c, #141c30); border: 2px solid rgba(255, 215, 120, 0.35); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); transition: transform 0.06s; }
.sk-btn:active { transform: scale(0.94); }
.sk.ready .sk-btn { border-color: #ffd84d; box-shadow: 0 0 12px rgba(255, 216, 77, 0.45), 0 4px 14px rgba(0, 0, 0, 0.5); }
.sk.active .sk-btn { border-color: #ff7a3b; box-shadow: 0 0 18px rgba(255, 106, 42, 0.8); }
.sk-ico { font-size: 26px; line-height: 52px; }
.sk-key { position: absolute; top: 2px; left: 5px; font-size: 11px; font-weight: 600; opacity: 0.8; }
.sk-cd { position: absolute; inset: 0; background: conic-gradient(rgba(5, 8, 16, 0.72) calc(var(--p, 0) * 360deg), transparent 0); pointer-events: none; }
.sk-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 600; text-shadow: 0 1px 3px #000; pointer-events: none; }
.sk-lock { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 11px; line-height: 1.2; background: rgba(5, 8, 16, 0.8); color: #aab3c5; }
.sk.locked .sk-lock { display: flex; }
.sk.locked .sk-btn { cursor: not-allowed; border-color: rgba(255, 255, 255, 0.12); }
.sk-auto { font-size: 9.5px; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); color: #8a93a6; letter-spacing: 0.5px; }
.sk-auto.on { background: #15803d; color: #eafff0; }
#skillBar.many { gap: 5px; }
#skillBar.many .sk-btn { width: 46px; height: 46px; }
#skillBar.many .sk-ico { font-size: 21px; line-height: 42px; }
.sk.locked .sk-auto { visibility: hidden; }
@media (max-width: 860px) {
  #skillBar { bottom: calc(42vh + 22px); gap: 6px; }
  .sk-btn { width: 48px; height: 48px; }
  .sk-ico { font-size: 22px; line-height: 44px; }
}

/* Dev Editor (?dev) */
.dv-toggle { position: fixed; left: 12px; top: 150px; z-index: 6; padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 13px; background: #2b2f45; border: 1px solid #ff9a2e; color: #ffb35c; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
.dv-toggle.on, .dv-toggle:hover { background: #ff9a2e; color: #1a1200; }
.dv-panel { left: 12px; top: 190px; bottom: 12px; width: 340px; z-index: 6; display: flex; flex-direction: column; padding: 10px; border-color: rgba(255, 154, 46, 0.5); }
.dv-panel.hidden { display: none; }
.dv-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; }
.dv-head b { color: #ffb35c; }
.dv-x { width: 26px; height: 26px; border-radius: 7px; background: rgba(255, 255, 255, 0.08); font-size: 13px; }
.dv-x:hover { background: rgba(255, 255, 255, 0.2); }
.dv-badge { margin-left: auto; margin-right: 8px; font-size: 11px; padding: 1px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); opacity: 0.7; }
.dv-badge.on { background: rgba(255, 154, 46, 0.25); color: #ffcf8a; opacity: 1; }
.dv-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.dv-tab { flex: 1 0 auto; padding: 5px 6px; border-radius: 7px; font-size: 12px; background: rgba(255, 255, 255, 0.07); }
.dv-tab.on { background: #ff9a2e; color: #1a1200; font-weight: 600; }
.dv-body { flex: 1; overflow-y: auto; padding-right: 4px; }
.dv-body::-webkit-scrollbar { width: 6px; }
.dv-body::-webkit-scrollbar-thumb { background: rgba(255, 154, 46, 0.35); border-radius: 3px; }
.dv-sec { margin: 12px 0 5px; padding-bottom: 3px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 13px; font-weight: 600; color: #ffd84d; }
.dv-sec small { display: block; font-weight: 400; font-size: 11px; color: #eef2ff; opacity: 0.55; }
.dv-row { display: grid; grid-template-columns: 1fr 120px auto; align-items: center; gap: 6px; padding: 2px 0; font-size: 12.5px; }
.dv-row > span { opacity: 0.85; }
.dv-row input[type=number], .dv-row input[type=text], .dv-row select { width: 100%; padding: 3px 6px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.18); background: #141b2d; color: #fff; font-family: inherit; font-size: 12.5px; }
.dv-row input[type=range] { width: 100%; accent-color: #ff9a2e; }
.dv-row input[type=color] { width: 100%; height: 24px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; background: none; cursor: pointer; }
.dv-row input[type=checkbox] { justify-self: start; accent-color: #ff9a2e; width: 16px; height: 16px; }
.dv-val { font-style: normal; font-size: 11.5px; min-width: 34px; text-align: right; color: #ffcf8a; }
.dv-pick { grid-template-columns: 70px 1fr; }
.dv-pick > span { font-weight: 600; }
.dv-btns { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.dv-btn { flex: 1 0 auto; padding: 6px 8px; border-radius: 7px; font-size: 12px; background: rgba(255, 255, 255, 0.1); }
.dv-btn:hover { background: rgba(255, 255, 255, 0.2); }
.dv-btn.primary { background: #ff9a2e; color: #1a1200; font-weight: 600; }
.dv-btn.danger { background: rgba(220, 38, 38, 0.3); color: #fca5a5; }
.dv-note { font-size: 11.5px; opacity: 0.75; margin: 4px 0; line-height: 1.5; }
.dv-note code { background: rgba(0, 0, 0, 0.4); padding: 0 4px; border-radius: 4px; }
.dv-row textarea.dv-lines { width: 100%; padding: 4px 6px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.18); background: #141b2d; color: #fff; font: 12px/1.45 inherit; font-family: inherit; resize: vertical; }
.dv-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin: 6px 0; }
.dv-tool { padding: 6px 4px; border-radius: 7px; font-size: 12px; background: rgba(255, 255, 255, 0.07); text-align: left; }
.dv-tool.on { background: #ff9a2e; color: #1a1200; font-weight: 600; }
.dv-row input.dv-qty { width: 56px; padding: 3px 4px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.18); background: #141b2d; color: #fff; }
.dv-code { width: 100%; height: 220px; margin-top: 6px; padding: 8px; border-radius: 8px; background: #0b1020; color: #b5f0c0; border: 1px solid rgba(255, 255, 255, 0.15); font: 11.5px/1.4 Consolas, monospace; resize: vertical; }
.dv-flash { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 5px 14px; border-radius: 8px; background: #22c55e; color: #052e12; font-weight: 600; font-size: 13px; }
@media (max-width: 860px) {
  .dv-toggle { top: auto; bottom: calc(42vh + 160px); }
  .dv-panel { top: 12px; bottom: calc(42vh + 24px); left: 12px; right: 12px; width: auto; }
}

/* Map travel */
#fade { position: fixed; inset: 0; background: #05070d; opacity: 0; pointer-events: none; transition: opacity 0.26s; z-index: 5; }
#fade.on { opacity: 1; }
#mapBanner { position: fixed; top: 22%; left: 50%; transform: translate(-50%, -10px); text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.5s, transform 0.5s; z-index: 4; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); }
#mapBanner.show { opacity: 1; transform: translate(-50%, 0); }
#mapBanner b { display: block; white-space: nowrap; font-size: clamp(22px, 6vw, 34px); font-weight: 600; color: #ffd84d; letter-spacing: 1px; }
#mapBanner small { display: block; font-size: 15px; opacity: 0.9; }
#mapBanner b::before, #mapBanner b::after { content: '—'; margin: 0 12px; opacity: 0.6; }

/* Modal */
#modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 10; }
#modal.hidden { display: none; }
#modalBox { position: static; width: min(380px, 90vw); text-align: center; padding: 24px; }
#modalBox h2 { color: #ffd84d; margin-bottom: 8px; }
#modalBox p { opacity: 0.85; margin-bottom: 12px; }
#modalBox input { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.4); color: #fff; font-family: inherit; font-size: 16px; text-align: center; margin-bottom: 12px; outline: none; }
.reward { background: rgba(255, 216, 77, 0.1); border-radius: 10px; padding: 10px; margin-bottom: 14px; font-size: 16px; line-height: 1.8; }
#modalBox p small { opacity: 0.7; }
.modal-btns { display: flex; gap: 8px; }
.modal-btns button { flex: 1; width: auto; }
.btn-ghost { padding: 10px; border-radius: 10px; font-size: 16px; font-weight: 600; background: rgba(255, 255, 255, 0.1); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.18); }
.btn-danger-solid { padding: 10px; border-radius: 10px; font-size: 16px; font-weight: 600; background: linear-gradient(135deg, #ef4444, #b91c1c); }
.btn-primary { width: 100%; padding: 10px; border-radius: 10px; font-size: 16px; font-weight: 600; background: linear-gradient(135deg, #ffcf4d, #e08a1e); color: #2a1600; }

@media (max-width: 860px) {
  #hint { display: none; }
  #hudTL { width: 220px; }
  #hudTR { width: 200px; }
  #side { top: auto; height: 42vh; width: calc(50% - 18px); }
  #chat { width: calc(50% - 18px); height: 42vh; }
}

/* Studio edit mode (game embedded in studio.html): hide the game HUD, the editor panels replace it */
body.studio-edit #hudTL, body.studio-edit #hudTR, body.studio-edit #side, body.studio-edit #chat,
body.studio-edit #skillBar, body.studio-edit #hint, body.studio-edit #bossBar, body.studio-edit #mapBanner { display: none !important; }
body.studio-edit #c { cursor: grab; }

/* party frame (online.js O4): under the player card */
#partyFrame { top: 132px; left: 12px; width: 230px; padding: 8px 10px; font-size: 12.5px; z-index: 3; }
#partyFrame[hidden] { display: none; }
.pf-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.pf-head b { color: #9fe8ff; }
.pf-head small { opacity: 0.8; color: #ffd84d; flex-basis: 100%; order: 3; }
.pf-x { margin-left: auto; padding: 1px 8px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); color: inherit; font: inherit; font-size: 11px; cursor: pointer; }
.pf-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; align-items: center; padding: 3px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.pf-row.me .pf-name { color: #ffd84d; }
.pf-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-name small { opacity: 0.7; }
.pf-hp { grid-column: 1; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.pf-hp i { display: block; height: 100%; background: #4cd964; }
.pf-go { grid-row: 1 / span 2; grid-column: 2; padding: 2px 6px; border-radius: 6px; border: 1px solid rgba(124, 199, 255, 0.4); background: rgba(124, 199, 255, 0.12); color: inherit; font: inherit; font-size: 11px; cursor: pointer; }
.pf-map { grid-row: 1 / span 2; grid-column: 2; opacity: 0.75; }
.msg.party .who { color: #9fe8ff; }
.msg.party { color: #d8f6ff; }

/* trading window (online.js O5) */
#tradeWin { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(600px, 94vw); max-height: 88vh; overflow: auto; padding: 14px 16px; z-index: 9; font-size: 13px; }
#tradeWin[hidden] { display: none; }
.tw-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tw-head b { color: #ffd84d; font-size: 15px; }
.tw-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tw-side { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 8px; min-height: 90px; }
.tw-side h4 { font-size: 13px; margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tw-tag { font-size: 11px; padding: 0 6px; border-radius: 6px; background: rgba(255, 216, 77, 0.15); color: #ffd84d; }
.tw-tag.ok { background: rgba(76, 217, 100, 0.15); color: #7dff9a; }
.tw-offer { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tw-offer.center { justify-content: center; margin-bottom: 12px; }
.tw-offer .it-tile, .tw-grid .it-tile { width: 46px; height: 46px; }
.tw-stack { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); font-size: 12px; white-space: nowrap; }
.tw-gold { color: #ffd84d; }
.tw-amt { display: inline-flex; align-items: center; gap: 3px; }
.tw-amt input { width: 64px; padding: 2px 4px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.4); color: #fff; font: inherit; font-size: 12px; }
.tw-goldin { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; }
.tw-goldin input { width: 110px; padding: 3px 6px; border-radius: 6px; border: 1px solid rgba(255, 216, 77, 0.35); background: rgba(0, 0, 0, 0.4); color: #ffd84d; font: inherit; }
.tw-goldin small { opacity: 0.7; }
.tw-bag { margin-top: 10px; }
.tw-bag > small { opacity: 0.75; display: block; margin-bottom: 4px; }
.tw-grid { display: flex; flex-wrap: wrap; gap: 4px; max-height: 160px; overflow: auto; }
.tw-grid .it-tile[data-on], .tw-sbtn.on { outline: 2px solid #ffd84d; outline-offset: -2px; opacity: 0.55; }
.tw-stacks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; max-height: 110px; overflow: auto; }
.tw-sbtn { padding: 0; border: none; background: none; cursor: pointer; font: inherit; color: inherit; }
.tw-note { color: #ffb27a; font-size: 12px; min-height: 0; }
.tw-note:empty { display: none; }
#tradeWin .modal-btns button:disabled { opacity: 0.45; cursor: default; }
/* guild window */
#modalBox:has(#gdBody) { width: min(480px, 94vw); }
.gd-list { max-height: 46vh; overflow: auto; margin: 8px 0; }
.gd-list td { padding: 3px 5px; }
.gd-acts { white-space: nowrap; text-align: right; }
.gd-b { padding: 1px 6px; margin-left: 2px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
.gd-b[data-armed] { border-color: #ff8a5a; color: #ffb27a; }
.gd-notice { background: rgba(212, 176, 255, 0.1); border-radius: 8px; padding: 6px 10px; text-align: left; }
#gdNotice { width: 100%; box-sizing: border-box; min-height: 56px; padding: 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.4); color: #fff; font: inherit; font-size: 13px; resize: vertical; }
.gd-inv { text-align: left; margin-bottom: 10px; }
.gd-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.gd-row button { padding: 3px 10px; margin-left: 4px; }
.msg.guild .who { color: #d4b0ff; }
.msg.guild { color: #eedcff; }

/* ===================== Phones (≤ 640px) =====================
   The world gets almost the whole screen: chat and the side panel become bottom sheets opened from a tab bar,
   the skill bar is one scrollable row, and the HUD/minimap shrink so they don't overlap. */
#mobNav { display: none; }
@media (max-width: 640px) {
  :root { --nav-h: 54px; --safe-b: env(safe-area-inset-bottom, 0px); }
  html, body { overscroll-behavior: none; }
  canvas { touch-action: none; }
  button, .sk-btn, .sk-auto { touch-action: manipulation; }
  #mobNav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: rgba(10, 14, 26, 0.95); border-top: 1px solid rgba(255, 255, 255, 0.12); z-index: 7; }
  #mobNav button { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 20px; line-height: 1.1; background: none; border: 0; color: #e8e6f0; font-family: inherit; cursor: pointer; }
  #mobNav button small { font-size: 10.5px; opacity: 0.8; }
  #mobNav button.on { color: #ffd84d; background: rgba(255, 216, 77, 0.1); }
  #mobNav .dot { position: absolute; top: 7px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: #ff5a5a; display: none; }
  #mobNav button.unread .dot { display: block; }

  #hudTL { top: 8px; left: 8px; width: calc(100vw - 152px); padding: 8px 10px; }
  #hudTL .name-row { font-size: 14px; }
  #hudTL .gold-row { font-size: 12px; }
  #hudTR { top: 8px; right: 8px; width: 128px; padding: 6px; }
  #hudTR .info { font-size: 11px; flex-wrap: wrap; gap: 3px 6px; margin-bottom: 4px; }
  #hudTR .info .cloud { padding: 0 6px; font-size: 11px; }

  /* the two panels: hidden until their tab is opened, then slide up as sheets above the tab bar */
  #side, #chat { display: none; left: 0; right: 0; width: auto; top: auto; bottom: calc(var(--nav-h) + var(--safe-b)); border-radius: 14px 14px 0 0; z-index: 6; }
  body.m-side #side { display: block; height: 62vh; }
  body.m-chat #chat { display: flex; height: 46vh; }
  body.m-side #skillBar, body.m-chat #skillBar, body.m-side #buffBar, body.m-chat #buffBar { display: none; }

  #skillBar, #skillBar.many { bottom: calc(var(--nav-h) + var(--safe-b) + 6px); left: 0; right: 0; transform: none; width: auto; max-width: none; flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; padding: 0 8px; gap: 6px; scrollbar-width: none; }
  #skillBar::-webkit-scrollbar { display: none; }
  .sk { flex: none; gap: 2px; }
  .sk-btn, #skillBar.many .sk-btn { width: 44px; height: 44px; border-radius: 10px; }
  .sk-ico, #skillBar.many .sk-ico { font-size: 20px; line-height: 40px; }
  .sk-auto { font-size: 8.5px; padding: 0 5px; }
  #buffBar { bottom: calc(var(--nav-h) + var(--safe-b) + 76px); max-width: calc(100vw - 16px); flex-wrap: wrap; justify-content: center; }

  #bossBar { top: auto; bottom: calc(var(--nav-h) + var(--safe-b) + 124px); width: calc(100vw - 16px); min-width: 0; }
  #towerHud, body.boss-on #towerHud { top: 128px; bottom: auto; font-size: 12px; gap: 8px; padding: 5px 10px; max-width: calc(100vw - 16px); white-space: normal; text-align: center; }
  #mapBanner { top: 26%; }
  #tradeWin { padding: 10px; font-size: 12px; }
  .tw-cols { grid-template-columns: 1fr; }
  .tw-offer .it-tile, .tw-grid .it-tile { width: 40px; height: 40px; }
  #partyFrame { top: 110px; left: 8px; width: 168px; padding: 6px 8px; font-size: 11.5px; }
  #partyFrame .pf-head small { display: none; }
  .dv-toggle { top: auto; bottom: calc(var(--nav-h) + 130px); }
  .dv-panel { top: 8px; bottom: calc(var(--nav-h) + 8px); left: 8px; right: 8px; width: auto; }
}