/* =====================================================================================================
   v0.2 additions: stat chips, bars, menu buttons, boss bar, death overlay, announcements, panels
   ===================================================================================================== */
.hud-tl { gap: 6px; }
.profile .sub { font-size: 12px; color: var(--ink2); margin-top: 2px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; max-width: 330px; }
.chip { display: flex; align-items: center; gap: 6px; padding: 3px 10px 5px 6px; font-size: 17px; font-family: inherit; color: var(--ink); cursor: default; }
.chip img { width: 22px; height: 22px; }
.chip.usdc { cursor: pointer; background: #e3f6ec; border-color: var(--ink); }
.chip.usdc:hover { background: #f0fff6; }
.chip.usdc.glow { animation: usdcglow 1.2s ease-out; }
@keyframes usdcglow { 0% { box-shadow: 0 0 0 0 rgba(80, 220, 140, .9), inset 0 -4px 0 var(--cream2); } 100% { box-shadow: 0 0 0 14px rgba(80, 220, 140, 0), inset 0 -4px 0 var(--cream2); } }
.bars { padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; min-width: 190px; }
.bar { display: flex; align-items: center; gap: 6px; }
.bar img { width: 18px; height: 18px; flex: none; }
.bar .track { position: relative; flex: 1; height: 13px; background: var(--cream3); border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; }
.bar .track i { position: absolute; inset: 0 auto 0 0; width: 0; transition: width .25s; }
.bar .track span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 10px; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.7), 1px 0 0 rgba(0,0,0,.7), -1px 0 0 rgba(0,0,0,.7); }
.bar.energy i { background: linear-gradient(#ffe27a, #e2a91f); }
.bar.hp i { background: linear-gradient(#ff8a7a, #d8453b); }
.bar.mp i { background: linear-gradient(#8fc2ff, #4f7fe0); }
.bar.hidden { display: none; }
.loc { padding: 3px 12px 5px; font-size: 14px; margin-top: -2px; }
.info { gap: 10px; }

.icon-btns { max-width: 300px; gap: 5px; }
.ibtn { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.ibtn img { width: 26px; height: 26px; }
.ibtn .badge { position: absolute; right: -6px; top: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--red); border: 2px solid var(--ink); color: #fff; font-size: 11px; line-height: 14px; font-weight: 700; text-align: center; pointer-events: none; }
.ibtn .badge.gold { background: var(--gold); color: var(--ink); }

#bossbar { position: absolute; left: 50%; top: calc(58px + var(--safe-t)); transform: translateX(-50%); width: min(380px, 62vw); padding: 5px 12px 8px; text-align: center; border-color: #7a2a28; background: #fff0dc; }
#bossbar b { font-size: 17px; color: #9d2a24; }
#bossbar .track { position: relative; margin-top: 3px; height: 14px; background: #4b1f22; border: 2px solid var(--ink); border-radius: 5px; overflow: hidden; }
#bossbar .track i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(#ff9a62, #d8453b); transition: width .2s; }
#bossbar .track span { position: absolute; inset: 0; font-size: 11px; line-height: 12px; color: #fff; text-shadow: 0 1px 0 #000; }

#hotbar .slot.use { background: #f3e7c8; }
#hotbar .slot.weapon img { width: 44px; height: 44px; }
.slot .cnt.low { color: var(--red); }

.chatrow { display: flex; gap: 6px; align-items: center; }
.chat-scope { pointer-events: auto; width: 34px; height: 34px; flex: none; font-size: 17px; cursor: pointer; background: var(--cream); border: 3px solid var(--ink); border-radius: 8px; padding: 0; opacity: 0; transition: opacity .15s; }
#chat.focus .chat-scope { opacity: 1; }
#chatlog .line.global { background: rgba(35, 55, 90, .72); }
#chatlog .line.global b { color: #8ee0ff; }

#death { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(60, 10, 14, .35); }
#death .card { text-align: center; }
#death p { margin: 0 0 10px; font-size: 18px; }
.row-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

#announce { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 36; max-width: min(640px, 92vw); display: flex; align-items: center; gap: 14px; padding: 12px 22px 14px; background: linear-gradient(#fff3d6, #ffdca0); border: 4px solid var(--ink); border-radius: 12px; box-shadow: 0 6px 0 rgba(0, 0, 0, .35); font-size: 22px; text-align: center; animation: ann 7s forwards; pointer-events: none; }
#announce img { width: 48px; height: 48px; flex: none; }
@keyframes ann { 0% { opacity: 0; transform: translate(-50%, -30px) scale(.8); } 6% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 10% { transform: translate(-50%, 0) scale(1); } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -20px); } }

.teaser { margin-top: 10px; padding: 7px 10px 9px; font-size: 14px; text-align: center; background: #e3f6ec; border: 3px solid var(--ink); border-radius: 8px; }
.teaser b { color: #1d7a4a; }

/* ---- panel building blocks ---- */
.prog { position: relative; height: 14px; background: var(--cream3); border: 2px solid var(--ink); border-radius: 5px; overflow: hidden; }
.prog i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(#9bf07f, #52b23d); }
.prog.usd i { background: linear-gradient(#7dffb0, #1fb36b); }
.prog.warn i { background: linear-gradient(#ffd37a, #e08a1f); }
.prog span { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 11px; color: var(--ink); }
.pill { display: inline-block; padding: 0 8px; border-radius: 10px; font-size: 13px; background: var(--cream3); border: 2px solid var(--ink); }
.pill.good { background: #b8f0c6; } .pill.bad { background: #ffc4bd; } .pill.warn { background: #ffe3a3; } .pill.blue { background: #bcd8ff; }
.hero { text-align: center; padding: 12px 8px 14px; margin-bottom: 10px; background: linear-gradient(#e9fbf1, #d2f3e1); border: 3px solid var(--ink); border-radius: 10px; }
.hero .amount { font-size: 42px; font-weight: 700; color: #138a53; text-shadow: 0 3px 0 rgba(0,0,0,.12); line-height: 1.1; }
.hero small { display: block; color: var(--ink2); font-size: 14px; }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 10px 0; }
.mini { padding: 6px 10px 8px; background: #fff8e6; border: 3px solid var(--cream3); border-radius: 8px; font-size: 14px; }
.mini b { display: block; font-size: 18px; }
.btn.tiny { font-size: 13px; padding: 3px 8px; border-width: 2px; border-radius: 6px; }
.btn.usd { background: #35b774; box-shadow: inset 0 -4px 0 #1f8a54, 0 3px 0 rgba(30,14,24,.35); }
.row-i .ic { width: 44px; height: 44px; flex: none; }
.row-i.done { opacity: .6; }
.row-i.ready { background: #e9fbd9; border-color: #8fd36a; }
.row-i .rew { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink2); margin-top: 3px; }
.row-i .rew span { display: inline-flex; align-items: center; gap: 3px; }
.row-i .rew img { width: 16px; height: 16px; }
.qcat { margin: 12px 0 6px; font-size: 15px; color: var(--ink2); letter-spacing: .06em; text-transform: uppercase; }
.statrow { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-bottom: 2px dashed var(--cream3); }
.statrow b { width: 44px; } .statrow .v { width: 30px; text-align: right; font-weight: 700; } .statrow .d { flex: 1; font-size: 13px; color: var(--ink2); }
.equipgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.eslot { position: relative; aspect-ratio: 1; background: #fff8e6; border: 3px solid var(--cream3); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; color: var(--ink2); padding: 0; }
.eslot img { width: 70%; height: 70%; } .eslot small { position: absolute; bottom: 1px; left: 0; right: 0; text-align: center; font-size: 10px; }
.eslot:hover { background: #fff; border-color: var(--wood); }
.mapgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.dest { position: relative; padding: 10px 12px 12px; background: #fff8e6; border: 3px solid var(--cream3); border-radius: 10px; }
.dest.here { border-color: var(--green-d); background: #effbe4; }
.dest.lock { opacity: .6; }
.dest h4 { margin: 0 0 3px; font-size: 18px; } .dest p { margin: 0 0 8px; font-size: 14px; color: var(--ink2); min-height: 38px; }
.dest .ico { float: right; width: 40px; height: 40px; }
.compose label { display: block; font-size: 14px; margin: 8px 0 3px; color: var(--ink2); }
.compose input, .compose textarea, .compose select { width: 100%; padding: 7px 10px; font-size: 16px; font-family: inherit; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 8px; outline: none; user-select: text; }
.compose textarea { resize: vertical; min-height: 70px; }
.mailbody { white-space: pre-wrap; background: #fff; border: 3px solid var(--cream3); border-radius: 8px; padding: 8px 10px; margin: 8px 0; user-select: text; font-size: 16px; }
.wlist .row-i small { font-family: ui-monospace, monospace; }
.info-box { margin: 10px 0; padding: 8px 12px; font-size: 14px; line-height: 1.4; background: #fff3d1; border: 3px solid #e3b95a; border-radius: 8px; color: #5b4310; }
.info-box.green { background: #e3f6ec; border-color: #8fd3ad; color: #1f5a3c; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .cols2 { grid-template-columns: 1fr; } }
.inv-cell { position: relative; background: #fff8e6; border: 3px solid var(--cream3); border-radius: 8px; padding: 6px 4px 6px; text-align: center; font-size: 12px; cursor: pointer; }
.inv-cell img { width: 40px; height: 40px; } .inv-cell b { position: absolute; right: 5px; top: 2px; font-size: 15px; }
.inv-cell:hover { border-color: var(--wood); background: #fff; }
.inv-cell.gear { border-color: #9ec5ff; }
@media (max-width: 760px) {
  .chips { max-width: 230px; } .chip { font-size: 14px; padding: 2px 7px 4px 5px; } .chip img, .chip .coin { width: 18px; height: 18px; }
  .bars { min-width: 150px; padding: 4px 6px; } .bar .track { height: 11px; } .bar img { width: 14px; height: 14px; }
  .ibtn { width: 34px; height: 34px; } .ibtn img { width: 22px; }
  #announce { font-size: 17px; padding: 8px 12px 10px; } #announce img { width: 34px; height: 34px; }
  .hero .amount { font-size: 34px; } .loc { display: none; }
  #bossbar { top: calc(130px + var(--safe-t)); }
}

/* ---- phones: menu becomes a two-wide column on the right so it never collides with the profile card ---- */
@media (max-width: 760px) {
  .profile { max-width: 176px; } .profile .sub { font-size: 10px; } .xpbar span { font-size: 9px; }
  .hud-tr { gap: 4px; } .info #hud-online { display: none; }
  .icon-btns { position: fixed; right: 8px; top: calc(46px + var(--safe-t)); width: 84px; max-width: 84px; justify-content: flex-end; gap: 4px; }
  .ibtn { width: 40px; height: 40px; }
  .chips { max-width: 176px; } .bars { min-width: 0; width: 176px; }
}
@media (max-width: 760px) and (max-height: 520px) { .icon-btns { width: 168px; max-width: 168px; } }

/* ---- chat history window + phone chat log ---- */
.chatfull { height: min(300px, 46vh); overflow-y: auto; padding: 6px; background: #fff8e6; border: 3px solid var(--cream3); border-radius: 8px; user-select: text; }
.chatfull .line { padding: 2px 4px; font-size: 15px; word-break: break-word; border-radius: 4px; }
.chatfull .line b { color: #8a4a35; } .chatfull .line.me b { color: #2f8a3f; }
.chatfull .line.global { background: #e6f1ff; } .chatfull .line.global b { color: #2f5fa8; }
.chatsend { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.chatsend input { flex: 1; min-width: 0; padding: 7px 10px; font-size: 16px; font-family: inherit; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 8px; outline: none; user-select: text; }
body.touch #chat { display: flex; bottom: calc(250px + var(--safe-b)); width: min(240px, 58vw); }
body.touch #chat #chatinput { display: none; }
body.touch #chat.focus #chatinput { display: block; }
body.touch #chat.focus { bottom: 8px; }

.docs-link { display: block; margin-top: 12px; text-align: center; text-decoration: none; font-size: 15px; }

.social-btns { display: flex; gap: 8px; margin-top: 12px; }
.social-btns:empty { display: none; }
.social-btns .btn { flex: 1; text-align: center; text-decoration: none; font-size: 15px; padding: 8px 10px; }
.social-btns .soc-x { background: #1d1d1f; box-shadow: inset 0 -4px 0 #000, 0 3px 0 rgba(30,14,24,.35); }
.social-btns .soc-pumpfun { background: #3fd37a; color: #0b3b20; text-shadow: none; box-shadow: inset 0 -4px 0 #25a85a, 0 3px 0 rgba(30,14,24,.35); }

/* ---- compact login screen: everything fits one screen, no scrolling ---- */
#screen-login { overflow: hidden; gap: clamp(6px, 1.8vh, 16px); padding: 8px; }
#screen-login .logo-sub { font-size: 11px; margin-bottom: 0; }
#screen-login .logo h1 { font-size: clamp(34px, 9vh, 78px); -webkit-text-stroke: 3px var(--ink); text-shadow: 0 4px 0 var(--ink), 0 6px 0 rgba(0, 0, 0, .25); }
#screen-login .logo p { margin: clamp(4px, 1vh, 10px) 0 0; font-size: clamp(12px, 1.9vh, 17px); }
#screen-login .card { width: min(380px, 94vw); padding: 12px 16px 12px; }
#screen-login .card h2 { font-size: 18px; margin: 0 0 8px; }
#screen-login .wallets { gap: 6px; }
#screen-login .wbtn { padding: 7px 12px; font-size: 16px; }
#screen-login .wbtn img, #screen-login .wbtn .dot { width: 24px; height: 24px; }
#screen-login #resume { margin-bottom: 6px; }
#screen-login #resume .btn.big { font-size: 17px; padding: 8px 14px; }
#screen-login .status { min-height: 0; margin-top: 6px; font-size: 13px; }
#screen-login .status:empty { display: none; }
#screen-login .teaser { margin-top: 8px; padding: 4px 8px 5px; font-size: 12.5px; border-width: 2px; }
#screen-login .fine { margin-top: 6px; font-size: 11.5px; line-height: 1.3; }
#screen-login .social-btns { margin-top: 8px; } #screen-login .social-btns .btn { padding: 6px 8px; font-size: 14px; }
#screen-login .docs-link { margin-top: 8px; padding: 6px 10px; font-size: 14px; }
#screen-login .credits { font-size: 12px; }
@media (max-height: 700px) { #screen-login .fine { display: none; } }
@media (max-height: 600px) { #screen-login .logo p, #screen-login .logo-sub { display: none; } #screen-login .card h2 { display: none; } }
@media (max-height: 480px) { #screen-login .logo h1 { font-size: 30px; } #screen-login .teaser { display: none; } #screen-login .credits { display: none; } }

/* ---- brand logo on the login screen ---- */
.logo-mark { display: block; margin: 0 auto 4px; width: clamp(40px, 10vh, 84px); height: auto; image-rendering: auto; filter: drop-shadow(0 4px 0 rgba(63, 38, 49, .55)); }
@media (max-height: 560px) { .logo-mark { display: none; } }