[hidden] { display: none !important; }
:root {
  --bg: #0f1418;
  --panel: rgba(18, 24, 30, 0.92);
  --line: rgba(255, 255, 255, 0.09);
  --text: #eef2f4;
  --muted: #93a1ab;
  --accent: #f4c64e;
  --good: #5cd17a;
  --bad: #ff6b6b;
  --btn: #2b3742;
  --btn-hover: #364553;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; color: var(--text); background: var(--btn); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
button:hover:not(:disabled) { background: var(--btn-hover); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: #c9962b; color: #1a1406; border-color: transparent; font-weight: 600; }
button.primary:hover:not(:disabled) { background: #dfa936; }
input { font: inherit; color: var(--text); background: #0c1115; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; outline: none; }
input:focus { border-color: var(--accent); }

.overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% 30%, rgba(40, 70, 50, .55), rgba(5, 8, 10, .92)); z-index: 20; }
.card { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.card h1 { margin: 0 0 4px; font-size: 34px; letter-spacing: .5px; color: var(--accent); }
.card .sub { margin: 0 0 18px; color: var(--muted); }
#loginForm { display: flex; gap: 8px; }
#loginForm input { flex: 1; min-width: 0; }
#loginForm button { background: #c9962b; color: #1a1406; font-weight: 700; border: 0; padding: 8px 18px; }
.error { color: var(--bad); min-height: 1.4em; margin: 8px 0 0; }
.howto { margin: 12px 0 0; padding-left: 18px; color: var(--muted); }

#hud { position: fixed; left: 12px; top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 250px; z-index: 5; }
#hud .who { font-weight: 700; margin-bottom: 6px; }
#hud .bar { position: relative; height: 16px; background: #3a1d1d; border-radius: 8px; overflow: hidden; }
#hpFill { height: 100%; width: 100%; background: linear-gradient(#ff7a7a, #d63c3c); transition: width .2s; }
#hpText { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 16px; font-weight: 600; text-shadow: 0 1px 2px #000; }
#hud .stats { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
#hud .gold { color: var(--accent); }

#minimap { position: fixed; left: 12px; top: 126px; width: 140px; height: 140px; border-radius: 10px; border: 1px solid var(--line); z-index: 5; image-rendering: pixelated; background: #000; }

#panel { position: fixed; right: 12px; top: 12px; width: 320px; max-height: calc(100% - 24px); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; z-index: 5; }
#panel nav { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); }
#panel nav button { flex: 1; padding: 6px 4px; background: transparent; border-color: transparent; color: var(--muted); }
#panel nav button.active { background: var(--btn); color: var(--text); border-color: var(--line); }
#panel section { padding: 10px 12px 12px; overflow: auto; }
#panel h3 { margin: 8px 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row .name { flex: 1; min-width: 0; }
.row .qty { color: var(--muted); }
.row .price { color: var(--accent); white-space: nowrap; }
.row input { width: 64px; padding: 4px 6px; }
.note { color: var(--muted); font-size: 12px; margin: 6px 0; }
.warn { color: #ffcf70; font-size: 12px; margin: 6px 0; }
.empty { color: var(--muted); padding: 8px 0; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; word-break: break-all; }
.listForm { display: grid; grid-template-columns: 1fr 70px 80px; gap: 6px; margin-top: 6px; }
.listForm select { font: inherit; color: var(--text); background: #0c1115; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.listForm button { grid-column: 1 / -1; }

#chat { position: fixed; left: 12px; bottom: 12px; width: min(420px, calc(100% - 24px)); z-index: 5; }
#chatLog { max-height: 180px; overflow: auto; padding: 8px 10px; background: rgba(10, 14, 18, .62); border-radius: 10px 10px 0 0; font-size: 13px; }
#chatLog .sys { color: #9fc7ff; }
#chatLog b { font-weight: 700; }
#chatForm input { width: 100%; border-radius: 0 0 10px 10px; background: rgba(10, 14, 18, .85); }

#toasts { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 30; pointer-events: none; }
.toast { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; animation: fade 3.2s forwards; text-align: center; }
@keyframes fade { 0% { opacity: 0; transform: translateY(-6px); } 8%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (max-width: 760px) {
  #panel { top: auto; bottom: 12px; right: 12px; left: 12px; width: auto; max-height: 42%; }
  #chat { bottom: calc(42% + 24px); width: calc(100% - 24px); }
  #chatLog { max-height: 90px; }
  #minimap { display: none; }
  #hud { width: auto; right: 12px; }
}

/* --- v2: login with appearance editor, HUD, bag grid, tooltips --- */
.card.login { width: min(720px, 100%); display: grid; grid-template-columns: 1fr 240px; gap: 24px; }
.card h2 { margin: 0 0 12px; font-size: 20px; color: var(--accent); }
.lookEditor { display: flex; flex-direction: column; gap: 6px; }
.lookEditor canvas { align-self: center; width: 140px; height: 160px; background: radial-gradient(circle at 50% 70%, #3d6b34, #1b2a1f 75%); border-radius: 14px; border: 1px solid var(--line); }
.lookRow { display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; gap: 6px; }
.lookRow button { padding: 2px 0; }
.lookRow span { text-align: center; font-size: 12px; color: var(--muted); }
.lookRow .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-left: 6px; border: 1px solid rgba(255,255,255,.3); }
.lookRandom { margin-top: 2px; }
.modalButtons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
#lookModal .card { width: min(300px, 100%); }

#hud { width: 270px; }
#hud .who { display: flex; align-items: center; justify-content: space-between; }
.hudTools { display: flex; align-items: center; gap: 4px; font-weight: 500; }
#clock { color: var(--muted); font-size: 12px; margin-right: 4px; font-variant-numeric: tabular-nums; }
button.icon { padding: 2px 7px; font-size: 13px; line-height: 1.3; }
.goldRow { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--accent); }
.goldRow img { width: 18px; height: 18px; }
.goldRow b { font-size: 15px; }
.goldRow.bump b { animation: bump .35s; }
@keyframes bump { 40% { transform: scale(1.35); color: #fff3a8; } }
.skills { display: grid; gap: 5px; margin-top: 8px; }
.skill { display: grid; grid-template-columns: 18px 1fr 34px; align-items: center; gap: 6px; font-size: 12px; }
.skill .xpbar { height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.skill .xpbar div { height: 100%; background: linear-gradient(90deg, #5a9cf0, #7fd1ff); transition: width .3s; }
.skill b { text-align: right; color: var(--muted); font-weight: 600; }
#minimap { top: 172px; }

.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.slot { position: relative; aspect-ratio: 1; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 9px; display: grid; place-items: center; cursor: default; }
.slot.filled { background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.09), rgba(255,255,255,.03)); }
.slot.usable { cursor: pointer; }
.slot.usable:hover, .slot.filled:hover { border-color: rgba(244,198,78,.6); }
.slot img { width: 72%; height: 72%; image-rendering: auto; pointer-events: none; }
.slot .count { position: absolute; right: 4px; bottom: 2px; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.row img.ic { width: 26px; height: 26px; flex: none; }
.equip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.equip .slot { aspect-ratio: auto; padding: 6px 2px; gap: 2px; }
.equip .slot img { width: 34px; height: 34px; }
.equip .slot small { font-size: 10px; color: var(--muted); text-align: center; line-height: 1.2; }

#tip { position: fixed; z-index: 40; pointer-events: none; max-width: 220px; background: rgba(12,16,20,.96); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
#tip b { display: block; font-size: 13px; margin-bottom: 2px; }
#tip .p { color: var(--accent); margin-top: 4px; }

@media (max-width: 760px) {
  .card.login { grid-template-columns: 1fr; }
  .lookEditor canvas { width: 100px; height: 115px; }
  .skills { display: none; }
}

/* --- v3: quests, crafting, 6 skills --- */
.skills { grid-template-columns: 1fr 1fr; column-gap: 10px; }
.skill { grid-template-columns: 16px 1fr 36px; gap: 4px; font-size: 11px; }
.skill b { white-space: nowrap; }
#minimap { top: auto; }
#leftStack { position: fixed; left: 12px; top: 12px; display: flex; flex-direction: column; gap: 8px; z-index: 5; }
#leftStack > #hud, #leftStack > #minimap { position: static; }
.tracker { margin-top: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(244,198,78,.08); border: 1px solid rgba(244,198,78,.25); font-size: 12px; cursor: pointer; }
.tracker b { color: var(--accent); }
.tracker.ready { background: rgba(92,209,122,.12); border-color: rgba(92,209,122,.4); }
/* world boss timers (HUD) */
.bossBox { margin-top: 6px; padding: 5px 8px; border-radius: 8px; background: rgba(199,125,255,.07); border: 1px solid rgba(199,125,255,.25); font-size: 11.5px; line-height: 1.45; }
.bossBox > b { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.bossBox .bt { font-variant-numeric: tabular-nums; color: var(--muted); }
.bossBox .alive { color: #ff8a7a; font-weight: 700; }
.bossBox .alive .bt { color: #ff8a7a; animation: bossPulse 1s infinite alternate; }
.bossBox small { color: var(--muted); }
@keyframes bossPulse { to { opacity: .45; } }
/* virtual joystick (touch devices) */
#joystick { position: fixed; left: 16px; bottom: 16px; width: 116px; height: 116px; border-radius: 50%; z-index: 6; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  background: radial-gradient(circle, rgba(255,255,255,.06), rgba(255,255,255,.14)); border: 2px solid rgba(255,255,255,.22); opacity: .55; transition: opacity .15s; }
#joystick.on { opacity: .85; }
#joystick .joyKnob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.7), rgba(200,210,220,.35)); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
body.joyOn, body.joyOn #game { touch-action: none; }
#panel nav button { font-size: 12px; padding: 6px 2px; }
.quest { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.quest h4 { margin: 0 0 4px; font-size: 15px; color: var(--accent); }
.quest p { margin: 0 0 8px; color: var(--text); }
.progress { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; margin: 6px 0; }
.progress div { height: 100%; background: linear-gradient(90deg, #c9962b, #f4c64e); }
.rewards { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; font-size: 12px; }
.rewards span { background: rgba(255,255,255,.06); border-radius: 6px; padding: 2px 7px; display: inline-flex; align-items: center; gap: 4px; }
.rewards img { width: 16px; height: 16px; }
.btnRow { display: flex; gap: 8px; }
.recipe { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.recipe:last-child { border-bottom: 0; }
.recipe > img { width: 34px; height: 34px; }
.recipe .nm { font-weight: 600; }
.recipe .ins { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; font-size: 11px; color: var(--muted); }
.recipe .ins span { display: inline-flex; align-items: center; gap: 2px; }
.recipe .ins span.miss { color: var(--bad); }
.recipe .ins img { width: 15px; height: 15px; }
.recipe .lvl { font-size: 11px; color: var(--muted); }
.recipe .lvl.miss { color: var(--bad); }
.recipe .act { display: flex; flex-direction: column; gap: 4px; }
.recipe .act button { padding: 4px 8px; font-size: 12px; }
@media (max-width: 760px) { #leftStack { right: 12px; } #leftStack #hud { width: auto; } }

/* --- v4: wallet, players, equipment, context menu --- */
.walletBtn { width: 100%; padding: 10px; font-size: 15px; }
.orLine { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; margin: 10px 0 8px; }
.orLine::before, .orLine::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.zoneLabel { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 600; }
.zoneLabel.z2 { color: #ffcf70; } .zoneLabel.z3 { color: #ff8a7a; }
#panel { width: 340px; }
#panel nav { flex-wrap: nowrap; gap: 2px; }
#panel nav button { font-size: 11.5px; padding: 6px 1px; }
.panelToggle { display: none; flex: 0 0 26px !important; }
#panel.collapsed section { display: none; }
.slot.r-rare { border-color: rgba(90,169,255,.75); box-shadow: inset 0 0 12px rgba(90,169,255,.25); }
.slot.r-epic { border-color: rgba(199,125,255,.85); box-shadow: inset 0 0 14px rgba(199,125,255,.35); }
.slot.r-common.filled { border-color: rgba(201,206,212,.35); }
.slot.equipped::after { content: 'E'; position: absolute; left: 4px; top: 2px; font-size: 10px; font-weight: 800; color: #7dff9a; }
.eqSlots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.eqSlots .slot { aspect-ratio: auto; padding: 6px 2px; gap: 2px; cursor: pointer; }
.eqSlots .slot img { width: 34px; height: 34px; }
.eqSlots .slot small { font-size: 10px; color: var(--muted); text-align: center; line-height: 1.2; }
.statRow { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.statRow b { color: var(--text); }
#tip .r-rare { color: #6fb6ff; } #tip .r-epic { color: #d6a8ff; } #tip .r-common { color: #d8dde2; }
#ctxMenu { position: fixed; z-index: 45; background: rgba(12,16,20,.97); border: 1px solid var(--line); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 170px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#ctxMenu[hidden] { display: none; }
#ctxMenu .who { font-weight: 700; padding: 2px 6px 4px; color: var(--accent); }
#ctxMenu button { text-align: left; }
#invites { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 35; }
.invite { background: var(--panel); border: 1px solid rgba(244,198,78,.5); border-radius: 12px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
#duelBanner { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 30; background: rgba(120,20,20,.85); border: 1px solid #ff7070; border-radius: 10px; padding: 8px 14px; font-weight: 700; display: flex; gap: 12px; align-items: center; }
#duelBanner[hidden] { display: none; }
.board { display: flex; gap: 4px; margin-bottom: 6px; }
.board button { flex: 1; font-size: 11px; padding: 4px 2px; }
.board button.active { background: var(--btn-hover); border-color: var(--accent); }
.rank { display: grid; grid-template-columns: 22px 1fr auto; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.rank .n { color: var(--muted); }
.rank.me { color: var(--accent); }
.member { display: grid; grid-template-columns: 1fr 90px; gap: 8px; align-items: center; padding: 4px 0; }
.member .bar { height: 8px; background: #3a1d1d; border-radius: 4px; overflow: hidden; }
.member .bar div { height: 100%; background: #5cd17a; }
@media (max-width: 760px) {
  .panelToggle { display: block; }
  #panel { width: auto; }
  #panel.collapsed { max-height: none; }
  #invites { bottom: 50%; }
}

@media (max-width: 760px) {
  .overlay { overflow-y: auto; place-items: start center; }
  .lookEditor canvas { width: 90px; height: 103px; }
}
@media (max-width: 760px) {
  body:has(#panel.collapsed) #chat { bottom: 70px; }
  body:has(#panel.collapsed) #chatLog { max-height: 70px; }
}

/* --- v5: settings, performance, new version --- */
#settings { position: fixed; left: 290px; top: 12px; z-index: 40; width: 240px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
#settings[hidden] { display: none; }
#settings h3 { margin: 0; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
#settings label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
#settings label.chk { flex-direction: row; align-items: center; gap: 6px; }
#settings input[type=range] { width: 100%; accent-color: var(--accent); }
#settings select { font: inherit; color: var(--text); background: #0c1115; border: 1px solid var(--line); border-radius: 8px; padding: 5px; }
#perf { position: fixed; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 6; font: 600 11px ui-monospace, Menlo, monospace; color: #cfe6ff; background: rgba(0,0,0,.45); padding: 2px 8px; border-radius: 6px; pointer-events: none; }
#updateBar { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 50; background: #2b4f7a; border: 1px solid #6fb6ff; border-top: 0; border-radius: 0 0 10px 10px; padding: 6px 12px; display: flex; gap: 10px; align-items: center; font-weight: 600; }
#updateBar[hidden] { display: none; }
#updateBar button { padding: 3px 10px; }
@media (max-width: 760px) { #settings { left: 12px; right: 12px; top: 120px; width: auto; } }

/* --- v6: credit --- */
.creditBal { font-size: 22px; color: #9fdcff; margin: 4px 0 2px; }
.creditBal b { color: #cfeeff; }
.creditHud { color: #c39bff; font-weight: 700; font-size: 13px; cursor: pointer; }
/* Realm Gems (RGM) icon drawn in icons.js */
img.gemIcon { width: 15px; height: 15px; vertical-align: -3px; margin-right: 1px; filter: drop-shadow(0 0 3px rgba(170,120,255,.55)); }
img.gemBig { width: 44px; height: 44px; filter: drop-shadow(0 0 10px rgba(170,120,255,.85)); }
.treasuryBal { display: inline-flex; font-size: 13px; margin-left: 8px; vertical-align: middle; }
.formRow { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.formRow input { width: 90px; }
.row .ic.emoji { width: 26px; text-align: center; font-size: 18px; }
.buffs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; font-size: 11px; color: #ffdf9a; }
.buffs:empty { display: none; }

/* --- v7: announcements, gains summary, tool path, shop groups --- */
#achieve { position: fixed; top: 92px; left: 50%; transform: translateX(-50%); z-index: 42; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.ach { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; min-width: 300px; max-width: 420px;
  background: linear-gradient(135deg, rgba(40,32,10,.96), rgba(20,24,30,.96)); border: 2px solid #f4c64e; border-radius: 14px; padding: 10px 16px 10px 10px;
  box-shadow: 0 0 0 4px rgba(244,198,78,.15), 0 14px 40px rgba(0,0,0,.55); animation: achIn 4.2s forwards; }
.ach.rare { border-color: #6fb6ff; box-shadow: 0 0 0 4px rgba(111,182,255,.18), 0 14px 40px rgba(0,0,0,.55); }
.ach.epic { border-color: #c77dff; box-shadow: 0 0 0 4px rgba(199,125,255,.22), 0 0 30px rgba(199,125,255,.35); }
.ach.level { border-color: #7dd3ff; }
.ach .aicon { width: 52px; height: 52px; border-radius: 12px; background: radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,.03)); display: grid; place-items: center; font-size: 28px; }
.ach .aicon img { width: 42px; height: 42px; }
.ach .atitle { font-weight: 800; font-size: 16px; color: #ffe08a; line-height: 1.2; }
.ach.rare .atitle { color: #9fd0ff; } .ach.epic .atitle { color: #e2b8ff; } .ach.level .atitle { color: #bfe8ff; }
.ach .atext { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
@keyframes achIn { 0% { opacity: 0; transform: translateY(-14px) scale(.92); } 7% { opacity: 1; transform: none; } 10% { transform: scale(1.04); } 14% { transform: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
#lootFeed { position: fixed; right: 360px; bottom: 16px; z-index: 6; display: flex; flex-direction: column-reverse; gap: 4px; pointer-events: none; }
.feed { display: flex; align-items: center; gap: 6px; background: rgba(10,14,18,.78); border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px 3px 4px; font-size: 13px; font-weight: 600; animation: feedIn 2.8s forwards; }
.feed img { width: 22px; height: 22px; }
.feed.minus { color: #ffb3a8; }
.feed b { color: #8dffa8; } .feed.minus b { color: #ffb3a8; }
@keyframes feedIn { 0% { opacity: 0; transform: translateX(16px); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
.flash { animation: flash 1.4s; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 2px #f4c64e, 0 0 18px rgba(244,198,78,.6); } 100% { box-shadow: none; } }
.ladder { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 10px; padding: 8px; margin-bottom: 8px; }
.ladder .lh { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 6px; }
.ladder .lh span { color: var(--muted); font-weight: 500; font-size: 12px; }
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.tier { position: relative; text-align: center; border: 1px solid var(--line); border-radius: 8px; padding: 4px 2px; font-size: 10.5px; line-height: 1.15; color: var(--muted); }
.tier img { width: 30px; height: 30px; display: block; margin: 0 auto 2px; }
.tier.have { opacity: .55; }
.tier.cur { border-color: #f4c64e; color: var(--text); opacity: 1; background: rgba(244,198,78,.08); }
.tier.cur::after { content: 'OWNED'; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 800; background: #f4c64e; color: #1a1406; border-radius: 4px; padding: 0 4px; }
.tier.next { border-color: #5cd17a; color: var(--text); background: rgba(92,209,122,.08); }
.tier.next::after { content: 'NEXT'; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 800; background: #5cd17a; color: #062010; border-radius: 4px; padding: 0 4px; }
.tier.lock { opacity: .45; }
.tier .req { display: block; color: #ffcf70; font-size: 9.5px; }
.ways { margin-top: 6px; display: grid; gap: 4px; }
.way { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.way .wl { flex: 1; min-width: 0; }
.way .wl small { color: var(--muted); }
.way .ins { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.way .ins span { display: inline-flex; align-items: center; gap: 1px; }
.way .ins span.miss { color: var(--bad); }
.way .ins img { width: 14px; height: 14px; }
.way button { padding: 3px 8px; font-size: 12px; }
.needlvl { color: #ffcf70; font-size: 12px; }
details.sec { border: 1px solid var(--line); border-radius: 10px; margin: 8px 0; background: rgba(255,255,255,.02); }
details.sec > summary { cursor: pointer; padding: 8px 10px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.sec > summary::after { content: '▸'; color: var(--muted); transition: transform .15s; }
details.sec[open] > summary::after { transform: rotate(90deg); }
details.sec > .body { padding: 0 10px 8px; }
@media (max-width: 760px) { #lootFeed { right: 12px; bottom: 120px; } #achieve { top: 70px; } .ach { min-width: 0; width: calc(100vw - 32px); } }

/* --- v8: healing, regeneration, low health, death --- */
#hud .bar.hp { transition: box-shadow .2s; }
#hud .bar.hp.f-heal { animation: hpHeal .9s; }
#hud .bar.hp.f-regen { animation: hpRegen .8s; }
#hud .bar.hp.f-hurt { animation: hpHurt .45s; }
#hud .bar.hp.low #hpFill { animation: hpLow 1s infinite; }
@keyframes hpHeal { 0% { box-shadow: 0 0 0 0 rgba(125,255,154,0); } 25% { box-shadow: 0 0 0 3px rgba(125,255,154,.9), 0 0 18px rgba(125,255,154,.8); filter: brightness(1.5) hue-rotate(80deg); } 100% { box-shadow: 0 0 0 0 rgba(125,255,154,0); } }
@keyframes hpRegen { 0% { box-shadow: 0 0 0 0 rgba(125,255,154,0); } 30% { box-shadow: 0 0 8px rgba(125,255,154,.6); } 100% { box-shadow: none; } }
@keyframes hpHurt { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); box-shadow: 0 0 12px rgba(255,60,60,.9); } 60% { transform: translateX(3px); } }
@keyframes hpLow { 0%, 100% { filter: none; } 50% { filter: brightness(1.6); } }
canvas#game { transition: filter .5s; }
canvas#game.dead { filter: grayscale(1) brightness(.6); transition: filter .2s; }
.ach.death { border-color: #ff6b6b; background: linear-gradient(135deg, rgba(60,10,10,.96), rgba(20,24,30,.96)); box-shadow: 0 0 0 4px rgba(255,80,80,.18), 0 14px 40px rgba(0,0,0,.55); }
.ach.death .atitle { color: #ffb3b3; }

/* --- v9: Hero's Path, wardrobe, plots, offers --- */
.srow { display: grid; grid-template-columns: 24px 1fr 1fr; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.srow.head { color: var(--muted); font-weight: 700; }
.srow > b { color: var(--muted); text-align: center; }
.srow.reached > b { color: #ffe08a; }
.srow .sv { color: var(--muted); }
.srow .sv.premium { color: #cdb8ff; }
.srow .sv.ready { color: var(--text); }
.srow .sv.done { color: var(--good); opacity: .7; }
.srow .sv button { padding: 1px 7px; font-size: 11px; margin-left: 4px; background: #2f6a3f; }
.wd { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.wd button { padding: 3px 7px; font-size: 11.5px; }
.invite.offer { border-color: rgba(159,220,255,.6); }
.plotCard { width: min(560px, 100%); }
.tradeCard { width: min(640px, 100%); padding: 20px; }
.tradeCard h2 { display: flex; align-items: center; gap: 10px; }
.tradeCard h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 6px; font-size: 14px; }
.tradeTimer { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tradeCols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tradeCol { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px 10px; background: rgba(255,255,255,.03); }
.tradeCol.theirs { background: rgba(159,220,255,.05); }
.tradeGold { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; }
.tradeGold img.coin, .tradeCard h3 img.coin { width: 16px; height: 16px; }
.tradeGold input { width: 110px; }
.tradeQty { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted); }
.tradeQty input { width: 64px; }
.tflag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 8px; background: rgba(255,255,255,.08); color: var(--muted); }
.tflag.ready { background: rgba(244,198,78,.18); color: var(--accent); }
.tflag.ok { background: rgba(92,209,122,.2); color: #7dff9a; }
@media (max-width: 560px) { .tradeCols { grid-template-columns: 1fr; } }
.plotCard h2 { margin: 0 0 8px; color: var(--accent); }
.stages { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; font-size: 13px; }
.stages span { padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); }
.stages span.done { color: var(--good); border-color: rgba(92,209,122,.4); }
.stages span.cur { color: var(--text); border-color: var(--accent); }
.stages i { color: var(--muted); font-style: normal; }
.ins.big { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
.ins.big span { display: inline-flex; align-items: center; gap: 4px; }
.ins.big span.miss { color: var(--bad); }
.ins.big img { width: 22px; height: 22px; }
.chestCols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-height: 50vh; overflow: auto; }
@media (max-width: 760px) { .chestCols { grid-template-columns: 1fr; } }
/* Farming: garden beds in the plot window */
.garden { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.bed { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: rgba(110,76,44,.18); font-size: 12px; }
.bed.ripe { border-color: var(--accent); }
.bed > span { display: inline-flex; align-items: center; gap: 4px; }
.bed img { width: 18px; height: 18px; }
.bed .xpbar { height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.bed .xpbar div { height: 100%; background: linear-gradient(90deg, #6fae45, #ecc65a); }
.bed .bbtns { display: flex; flex-wrap: wrap; gap: 4px; }
.bed .bbtns button { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; font-size: 11px; }
@media (max-width: 560px) { .garden { grid-template-columns: 1fr; } }

/* --- v10: shop styling (Merchant, Jeweler) --- */
.shopHead { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; margin: 2px 0 10px;
  border: 1px solid var(--line); position: relative; overflow: hidden; }
.shopHead.merchant { background: linear-gradient(120deg, rgba(200,74,60,.28), rgba(201,150,43,.18) 60%, rgba(20,24,30,.2)); border-color: rgba(244,198,78,.35); }
.shopHead.jeweler { background: linear-gradient(120deg, rgba(122,63,176,.45), rgba(90,170,255,.18) 65%, rgba(20,24,30,.2)); border-color: rgba(199,125,255,.45); }
.shopHead::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 0%, rgba(255,255,255,.14), transparent 55%); pointer-events: none; }
.shopArt { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.shopGem { width: 56px; height: 56px; display: grid; place-items: center; font-size: 34px; color: #bfe6ff; text-shadow: 0 0 14px rgba(140,200,255,.9), 0 0 2px #fff; }
.shopTitle { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shopTitle b { font-size: 17px; letter-spacing: .3px; }
.shopTitle span { font-size: 11.5px; color: var(--muted); }
.shopTitle span.good { color: #8dffa8; } .shopTitle span.bad { color: #ffb3a8; }
.shopBal { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 16px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid var(--line); white-space: nowrap; }
.shopBal img { width: 20px; height: 20px; }
.shopBal.gold { color: #ffd24a; } .shopBal.credit { color: #c39bff; }
.shopBal button { padding: 2px 8px; font-size: 11px; border-radius: 999px; background: #2b4f7a; border-color: rgba(159,220,255,.5); }
.chips { display: flex; gap: 5px; flex-wrap: wrap; margin: 0 0 10px; }
.chips button { padding: 5px 10px; border-radius: 999px; font-size: 12px; background: rgba(255,255,255,.04); color: var(--muted); }
.chips button.on { background: linear-gradient(180deg, #3a4a5a, #2b3742); color: var(--text); border-color: rgba(244,198,78,.6); box-shadow: 0 0 0 1px rgba(244,198,78,.2) inset; }
.shopGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.pcard { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 12px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); transition: transform .12s, border-color .12s, box-shadow .12s; min-width: 0; }
.pcard:hover { transform: translateY(-2px); border-color: rgba(244,198,78,.55); box-shadow: 0 8px 18px rgba(0,0,0,.35); }
.pcard.owned { opacity: .72; }
.pcard.r-rare { border-color: rgba(90,169,255,.55); } .pcard.r-epic { border-color: rgba(199,125,255,.7); box-shadow: inset 0 0 18px rgba(199,125,255,.15); }
.pimg { position: relative; height: 64px; border-radius: 9px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, var(--sw, rgba(255,255,255,.16)) 0%, rgba(255,255,255,.03) 72%); }
.pimg img { width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.pemoji { font-size: 32px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.pbadge { position: absolute; right: 5px; top: 5px; font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; }
.pbadge.ok { background: rgba(46,125,72,.9); }
.pname { font-weight: 700; font-size: 13px; line-height: 1.2; }
.pdesc { font-size: 11px; color: var(--muted); line-height: 1.25; flex: 1; }
.pprice { font-weight: 800; font-size: 13px; }
.pprice.gold { color: #ffd24a; } .pprice.credit { color: #c39bff; }
.pbtns { display: flex; gap: 4px; }
.pbtns button { flex: 1; padding: 5px 4px; font-size: 12px; }
.plock { flex: 1; text-align: center; font-size: 11.5px; color: #ffcf70; padding: 5px 0; border: 1px dashed rgba(255,207,112,.4); border-radius: 8px; }
.pcard.cat-gold .pimg { --sw: rgba(255,210,74,.35); }
.pcard.cat-tools .pimg { --sw: rgba(201,206,212,.3); }
.pcard.cat-comfort .pimg { --sw: rgba(125,255,154,.25); }
.pcard.cat-events .pimg { --sw: rgba(255,140,90,.35); }
.pcard.cat-progress .pimg { --sw: rgba(125,255,216,.3); }
.pcard.cat-cosmetic .pimg { --sw: rgba(199,125,255,.35); }
@media (max-width: 380px) { .shopGrid { grid-template-columns: 1fr; } }

.pprice img.coin { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; }

.pbtns .solbtn { flex: 0 0 auto; padding: 5px 8px; background: linear-gradient(135deg, #9945ff, #14f195); color: #0b0f14; font-weight: 800; border: 0; }
.pbtns .solbtn:hover:not(:disabled) { filter: brightness(1.1); background: linear-gradient(135deg, #9945ff, #14f195); }

/* wallet picker (Wallet Standard) and deposit address */
.walletCard { width: min(380px, 100%); }
#walletList { display: grid; gap: 8px; margin-top: 10px; }
.walletPick { display: flex; align-items: center; gap: 12px; padding: 12px 14px; font-size: 15px; text-align: left; }
.walletPick img { width: 28px; height: 28px; border-radius: 8px; }
.walletPick small { margin-left: auto; color: var(--muted); font-size: 11px; }
.walletPick.last { border-color: var(--accent); }
.depAddr { display: flex; gap: 8px; align-items: center; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 6px 0; }
.depAddr .mono { flex: 1; word-break: break-all; font-size: 12px; }
#wdTo { width: 100%; font-family: ui-monospace, monospace; font-size: 12px; }

/* Crafting: cards with status */
.shopHead.workshop.forge { background: linear-gradient(120deg, rgba(120,130,145,.35), rgba(255,140,60,.16) 65%, rgba(20,24,30,.2)); border-color: rgba(200,206,214,.35); }
.shopHead.workshop.campfire { background: linear-gradient(120deg, rgba(255,120,40,.32), rgba(255,200,80,.14) 65%, rgba(20,24,30,.2)); border-color: rgba(255,160,80,.4); }
.shopHead .near { font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.3); white-space: nowrap; }
.shopHead .near.on { color: var(--good); box-shadow: 0 0 0 1px rgba(92,209,122,.45) inset; }
.pcard.craft .pimg { --sw: rgba(255,255,255,.08); }
.pcard.craft .xp { position: absolute; left: 5px; bottom: 4px; font-size: 10px; font-weight: 800; color: #9be7ff; text-shadow: 0 1px 2px #000; }
.pcard.craft.st-ready { border-color: rgba(92,209,122,.7); box-shadow: inset 0 0 18px rgba(92,209,122,.14); }
.pcard.craft.st-ready .pimg { --sw: rgba(92,209,122,.3); }
.pcard.craft.st-locked { opacity: .55; }
.pcard.craft.st-locked .pimg img { filter: grayscale(.85) brightness(.8); }
.pcard.craft.st-owned { opacity: .6; }
.pbadge.ready { background: rgba(46,125,72,.95); }
.pbadge.miss { background: rgba(140,60,40,.9); }
.pbadge.lock { background: rgba(0,0,0,.7); }
.pcard .ings { display: flex; flex-wrap: wrap; gap: 4px; }
.pcard .ing { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; padding: 2px 6px 2px 3px; border-radius: 999px; background: rgba(0,0,0,.28); color: var(--muted); }
.pcard .ing img { width: 16px; height: 16px; }
.pcard .ing b { color: var(--text); }
.pcard .ing.ok { box-shadow: 0 0 0 1px rgba(92,209,122,.35) inset; }
.pcard .ing.miss { box-shadow: 0 0 0 1px rgba(255,107,107,.45) inset; }
.pcard .ing.miss b { color: var(--bad); }
.pcard .reqs { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; align-content: flex-start; }
.pcard .req { font-size: 10.5px; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.05); }
.pcard .req.ok { color: var(--good); }
.pcard .req.miss { color: var(--bad); background: rgba(255,107,107,.08); }
.stations { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 2px 0 10px; }
.stations .shopHead { grid-template-columns: 30px 1fr; margin: 0; padding: 8px; gap: 6px 8px; }
.stations .shopGem { font-size: 22px; width: 30px; height: 30px; }
.stations .shopTitle b { font-size: 14px; }
.stations .shopTitle span { font-size: 10.5px; }
.stations .near { grid-column: 1 / -1; justify-self: start; font-size: 10.5px; padding: 2px 8px; }
.tierHead { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 800; letter-spacing: .3px; margin: 8px 0 6px; padding: 4px 9px; border-radius: 8px; border-left: 3px solid; }
.tierHead span { font-weight: 600; font-size: 11px; color: var(--muted); }
.tierHead.t1 { color: #d6d2c8; border-color: #9a948a; background: rgba(154,148,138,.12); }
.tierHead.t2 { color: #9fd0ff; border-color: #5aa9ff; background: rgba(90,169,255,.12); }
.tierHead.t3 { color: #e0b8ff; border-color: #c77dff; background: rgba(199,125,255,.13); }
.pcard .uses { list-style: none; margin: 0; padding: 5px 7px; border-radius: 8px; background: rgba(0,0,0,.22); display: grid; gap: 2px; font-size: 11px; line-height: 1.3; color: #cfd6de; }
.pcard .uses li.y { color: var(--good); }
.pcard .uses li.n { color: #ffb3a8; }
#reconnectBar { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; padding: 8px 16px; border-radius: 999px;
  background: rgba(20,26,34,.92); border: 1px solid rgba(244,198,78,.5); color: var(--text); font-weight: 700; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
#reconnectBar::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--accent); border-top-color: transparent; animation: spin .8s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.termsBox { border: 1px solid rgba(244,198,78,.55); background: rgba(244,198,78,.08); border-radius: 12px; padding: 12px; margin: 6px 0 12px; }
.termsBox p { margin: 6px 0; font-size: 12.5px; color: var(--muted); }
.termsBox label { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; margin: 8px 0; }
.termsBox a { color: #8cc8ff; }
.tierHead.t4 { color: #bff4ff; border-color: #6fe0ff; background: rgba(111,224,255,.12); }

/* new-player guide */
#coach { position: fixed; left: 50%; bottom: 140px; transform: translateX(-50%); z-index: 40; width: min(420px, calc(100% - 32px));
  background: rgba(20,26,34,.94); border: 1px solid rgba(244,198,78,.6); border-radius: 14px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
#coach .coachHead { display: flex; align-items: center; gap: 8px; }
#coach .coachHead b { flex: 1; color: var(--accent); font-size: 15px; }
#coach .coachStep { font-size: 11px; font-weight: 800; color: #0b0f14; background: var(--accent); border-radius: 999px; padding: 2px 8px; }
#coach .coachHead button { padding: 3px 10px; font-size: 12px; }
#coach .coachText { font-size: 13px; color: var(--text); margin: 6px 0 4px; line-height: 1.4; }
#coach .coachBar { height: 4px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; }
#coach .coachBar i { display: block; height: 100%; background: var(--accent); transition: width .4s; }
@media (max-width: 760px) { #coach { bottom: auto; top: 160px; } }

/* chat channels */
#chatTabs { display: flex; gap: 3px; padding: 0 4px; }
#chatTabs button { position: relative; padding: 4px 10px; font-size: 11.5px; font-weight: 700; border-radius: 8px 8px 0 0; border-bottom: 0;
  background: rgba(10,14,18,.55); color: var(--muted); }
#chatTabs button.on { background: rgba(10,14,18,.78); color: var(--text); }
#chatTabs button.ch-trade.on { color: #ffd166; } #chatTabs button.ch-local.on { color: #8dffa8; } #chatTabs button.ch-party.on { color: #7dd3ff; }
#chatTabs .unread { position: absolute; top: -6px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #e04860; color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
#chat[data-chan="trade"] #chatInput { box-shadow: inset 3px 0 0 #ffd166; }
#chat[data-chan="local"] #chatInput { box-shadow: inset 3px 0 0 #8dffa8; }
#chat[data-chan="party"] #chatInput { box-shadow: inset 3px 0 0 #7dd3ff; }
/* whispers (private messages) + friends */
#chatTabs button.ch-whisper.on { color: #c9a7ff; }
#chat[data-chan="whisper"] #chatInput { box-shadow: inset 3px 0 0 #c9a7ff; }
#chatLog .wconvs { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
#chatLog .wconvs button { position: relative; padding: 2px 8px; font-size: 11.5px; border-radius: 999px; }
#chatLog .wconvs button.on { background: rgba(201,167,255,.22); color: #e6d9ff; }
#chatLog .wconvs .unread { position: absolute; top: -6px; right: -6px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: #e04860; color: #fff; font-size: 9.5px; line-height: 15px; text-align: center; }
#chatLog .wout { color: #e6d9ff; }
#chatLog .win { color: #f2eaff; }
.friendAdd input { flex: 1; min-width: 0; }
.row.friend .dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #666d76; vertical-align: middle; }
.row.friend .dot.on { background: #5cd17a; box-shadow: 0 0 6px #5cd17a; }

/* worlds */
.worldPick { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
.worldPick label { font-size: 12px; color: var(--muted); }
.worldPick select { flex: 1; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.3); color: var(--text); border: 1px solid var(--line); }
.worldLabel { font-size: 11px; font-weight: 700; color: #9fd0ff; }

/* arena duel */
#duelBanner { top: 12px; padding: 8px 10px; gap: 10px; background: rgba(16,20,28,.92); border-color: rgba(255,112,112,.6); align-items: stretch; width: min(560px, calc(100% - 24px)); }
#duelBanner .dside { flex: 1; min-width: 0; }
#duelBanner .dside.foe { text-align: right; }
#duelBanner .dname { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#duelBanner .dname span { color: var(--muted); font-weight: 600; font-size: 11px; }
#duelBanner .drate { font-size: 11px; color: var(--muted); margin: 1px 0 4px; }
#duelBanner .dhp { position: relative; height: 14px; border-radius: 7px; background: rgba(0,0,0,.5); overflow: hidden; }
#duelBanner .dhp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #3fbf5f, #7dff9a); transition: width .25s; }
#duelBanner .dside.foe .dhp i { inset: 0 0 0 auto; background: linear-gradient(270deg, #d84a4a, #ff8a7a); }
#duelBanner .dhp.low i { animation: hpPulse .6s ease-in-out infinite alternate; }
#duelBanner .dhp b { position: relative; display: block; text-align: center; font-size: 10px; line-height: 14px; text-shadow: 0 1px 2px #000; }
#duelBanner .dmid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px; }
#duelBanner .vs { font-weight: 900; font-size: 16px; color: #ff7070; letter-spacing: 1px; }
#duelBanner .dtimer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 14px; }
#duelBanner .dtimer.urgent { color: #ff7070; animation: hpPulse .5s ease-in-out infinite alternate; }
#duelBanner .dforfeit { padding: 1px 8px; font-size: 10.5px; }
@keyframes hpPulse { from { opacity: 1; } to { opacity: .55; } }
#duelCount { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 45; pointer-events: none;
  font-size: 110px; font-weight: 900; color: #fff; text-shadow: 0 0 24px rgba(255,90,90,.8), 0 6px 0 #6a1010; }
#duelCount.fight { color: #ffd24a; font-size: 90px; text-shadow: 0 0 30px rgba(255,200,60,.9), 0 6px 0 #6a4a00; }
#duelCount.pop { animation: countPop .9s ease-out; }
@keyframes countPop { 0% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.9); opacity: .2; } }
.dres { width: min(400px, 100%); text-align: center; }
.dresTitle { font-size: 40px; font-weight: 900; letter-spacing: 3px; }
.dres.win .dresTitle { color: #ffd24a; text-shadow: 0 0 20px rgba(255,210,74,.6); }
.dres.loss .dresTitle { color: #ff7070; }
.dres.draw .dresTitle { color: #9fd0ff; }
.dresReason { color: var(--muted); margin: 2px 0 10px; }
.dresRating { font-size: 16px; margin-bottom: 12px; }
.dresRating .up { color: var(--good); font-weight: 800; } .dresRating .down { color: var(--bad); font-weight: 800; }
.dresStats { width: 100%; border-collapse: collapse; font-size: 13px; }
.dresStats td, .dresStats th { padding: 5px 6px; border-bottom: 1px solid var(--line); }
.dresStats th { color: var(--muted); font-weight: 600; }
.dresStats thead th { color: var(--text); font-weight: 800; }
#duelBanner { width: min(460px, calc(100% - 24px)); }
@media (max-width: 1180px) { #duelBanner { top: auto; bottom: 150px; } }
#duelResult { z-index: 60; }

/* town projects */
.tprojs { display: grid; gap: 6px; margin-bottom: 10px; }
.tproj { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(0,0,0,.2); border: 1px solid var(--line); }
.tproj .ti { font-size: 18px; width: 24px; text-align: center; }
.tproj .tb { flex: 1; min-width: 0; }
.tproj .tn { font-size: 13px; font-weight: 700; }
.tproj .tbar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 4px; }
.tproj .tbar i { display: block; height: 100%; background: linear-gradient(90deg, #c9962b, #ffd24a); }
.tproj.done { border-color: rgba(92,209,122,.45); background: rgba(92,209,122,.08); }
/* achievements + collection (Quests tab) */
.achCats { flex-wrap: wrap; }
.achCats button { flex: 0 1 auto; padding: 4px 8px; }
.achRow { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; margin: 4px 0; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.achRow .achIco { font-size: 22px; line-height: 1; width: 28px; text-align: center; }
.achRow .achBody { flex: 1; min-width: 0; }
.achRow .tbar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 4px; }
.achRow .tbar i { display: block; height: 100%; background: linear-gradient(90deg, #c9962b, #ffd24a); }
.achRow.locked { opacity: .55; }
.achRow.locked .achIco { filter: grayscale(1); }
.achRow.got { border-color: rgba(92,209,122,.45); background: rgba(92,209,122,.08); }
.achRow.got.rare { border-color: rgba(90,169,255,.6); background: rgba(90,169,255,.1); }
.achDate { color: #7dff9a; }
.achTitle { font-size: 11px; padding: 2px 8px; margin: 2px 0; }
.achTitle.active { background: var(--btn-hover); border-color: var(--accent); }
.colGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; }
.colItem { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border-radius: 6px; background: rgba(255,255,255,.04); font-size: 10px; text-align: center; }
.colItem img { width: 32px; height: 32px; }
.colItem.missing { opacity: .35; filter: grayscale(1); }
.colItem.have { border: 1px solid rgba(92,209,122,.35); }