/* ════════════════════════════════════════════════════════════════
   OPEN WORLD — server select, in-world HUD, race-portal popup
   (TrenchRush "Deep Degen": navy glass + neon-cyan brand + bright-yellow CTA, gold reward)
   ════════════════════════════════════════════════════════════════ */

/* ── server select ── */
.server-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.server-card {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 14px 16px; cursor: pointer; text-align: left;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(0,229,255,0.08), rgba(8,20,40,0.55));
    border: 1px solid rgba(0,229,255,0.24);
    box-shadow: inset 0 1px 0 rgba(127,242,255,0.12), 0 6px 18px rgba(0,0,0,0.4);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.server-card:hover, .server-card:active {
    transform: translateY(-2px);
    border-color: rgba(0,229,255,0.6);
    box-shadow: inset 0 1px 0 rgba(127,242,255,0.12), 0 6px 18px rgba(0,0,0,0.4), 0 0 18px rgba(0,229,255,0.22);
}
.srv-dot {
    flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%;
    background: #888; box-shadow: 0 0 0 3px rgba(0,0,0,0.18);
}
.srv-dot.open { background: var(--gem-emerald); box-shadow: 0 0 10px var(--gem-emerald), 0 0 0 3px rgba(0,0,0,0.18); }
.srv-dot.full { background: var(--gem-ruby); box-shadow: 0 0 10px var(--gem-ruby), 0 0 0 3px rgba(0,0,0,0.18); }
.srv-dot.off  { background: #6b6b6b; }
.srv-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.srv-name { font-family: var(--font-head); font-weight: 700; font-size: clamp(16px, 2.2vw, 20px); color: var(--cream); }
.srv-meta { font-family: var(--font-mono); font-size: clamp(11px, 1.4vw, 13px); color: var(--brass-hi); opacity: 0.92; }
.srv-region { flex: 0 0 auto; font-size: clamp(11px, 1.4vw, 13px); color: var(--gem-aqua); opacity: 0.9; }

/* ── in-world HUD ── */
#world-hud { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
#world-hud .world-top {
    position: absolute;
    top: max(var(--edge, 14px), env(safe-area-inset-top), var(--ogp-safe-top-inset, 0px));
    left: max(var(--edge, 14px), env(safe-area-inset-left));
    right: max(var(--edge, 14px), env(safe-area-inset-right));
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.world-brand {
    pointer-events: auto; display: flex; align-items: center; gap: 9px;
    padding: 7px 14px; border-radius: 999px;
    background: linear-gradient(180deg, rgba(14,27,51,0.82), rgba(8,20,40,0.9));
    border: 1px solid rgba(0,229,255,0.28);
    box-shadow: inset 0 1px 0 rgba(127,242,255,0.14), 0 4px 14px rgba(0,0,0,0.4), 0 0 14px rgba(0,229,255,0.12);
    color: var(--cream); font-weight: 600;
}
.world-gem { width: 11px; height: 11px; border-radius: 50%; background: var(--gem-gold); box-shadow: 0 0 10px var(--gem-gold); }
.world-name { font-family: var(--font-head); font-weight: 700; font-size: clamp(13px, 1.8vw, 17px); }
.world-pop { font-family: var(--font-mono); font-size: clamp(11px, 1.5vw, 14px); color: var(--brass-hi); padding-left: 8px; margin-left: 4px; border-left: 1px solid rgba(0,229,255,0.22); }
.world-pop, .world-coins { font-family: var(--font-mono); font-size: clamp(11px, 1.5vw, 14px); padding-left: 8px; margin-left: 4px; border-left: 1px solid rgba(0,229,255,0.22); }
.world-coins { color: var(--gem-gold); }
.world-btns { pointer-events: auto; display: flex; gap: 8px; }

.world-hint {
    position: absolute; left: 50%; top: 16%; transform: translate(-50%, -8px);
    padding: 10px 20px; border-radius: 14px; max-width: 86vw; text-align: center;
    background: linear-gradient(180deg, rgba(0,229,255,0.18), rgba(8,20,40,0.74));
    border: 1px solid rgba(0,229,255,0.4);
    color: var(--cream); font-weight: 600; font-size: clamp(12px, 1.8vw, 16px);
    box-shadow: 0 6px 22px rgba(0,0,0,0.4), 0 0 18px rgba(0,229,255,0.18);
    opacity: 0; transition: opacity 0.4s, transform 0.4s; pointer-events: none;
}
.world-hint.show { opacity: 1; transform: translate(-50%, 0); }
.world-hint b { color: var(--gold-hot); }

.world-help {
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: max(12px, env(safe-area-inset-bottom), var(--ogp-safe-bottom-inset, 0px));
    font-size: clamp(10px, 1.3vw, 12px); color: var(--cream); opacity: 0.5;
    pointer-events: none; letter-spacing: 0.4px;
}
.world-help b { color: var(--gold-hot); opacity: 0.95; }
body.touch-mode .world-help { display: none; }

/* ── race-portal popup ── */
#race-prompt {
    position: fixed; inset: 0; z-index: 24; display: flex;
    align-items: center; justify-content: center; padding: 20px;
    background: radial-gradient(circle at 50% 40%, rgba(10,20,40,0.6), rgba(5,13,31,0.86));
    backdrop-filter: blur(3px);
}
#race-prompt.hidden { display: none; }
#race-prompt .rp-card {
    width: min(440px, 92vw); text-align: center; padding: 24px 26px 22px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(14,27,51,0.96), rgba(8,20,40,0.97));
    border: 1px solid rgba(0,229,255,0.3);
    box-shadow: inset 0 1px 0 rgba(127,242,255,0.14), 0 18px 50px rgba(0,0,0,0.6), 0 0 26px rgba(0,229,255,0.2);
    animation: rpPop 0.4s cubic-bezier(.2,1.3,.5,1) both;
}
@keyframes rpPop { from { opacity: 0; transform: scale(0.86) translateY(10px); } to { opacity: 1; transform: none; } }
#race-prompt .rp-ico { font-size: 52px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); }
#race-prompt h2 { font-family: var(--font-head); font-weight: 700; color: var(--cream); margin: 8px 0 6px; font-size: clamp(22px, 3.2vw, 30px); }
#race-prompt p { color: var(--cream); opacity: 0.86; font-size: clamp(13px, 1.7vw, 15px); line-height: 1.5; margin: 0 0 18px; }
#race-prompt p b { color: var(--gold-hot); }
#race-prompt .rp-actions { display: flex; gap: 12px; justify-content: center; }

/* ── top-center profile button ── */
.world-profile {
    pointer-events: auto; position: absolute; left: 50%; top: 46px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px;
    padding: 7px 16px; border-radius: 999px; cursor: pointer;
    background: linear-gradient(180deg, rgba(14,27,51,0.82), rgba(8,20,40,0.9));
    border: 1px solid rgba(255,209,102,0.36);
    box-shadow: inset 0 1px 0 rgba(127,242,255,0.14), 0 4px 14px rgba(0,0,0,0.4), 0 0 14px rgba(255,209,102,0.12);
    color: var(--cream); font-weight: 700; font-family: var(--font-head);
    font-size: clamp(12px, 1.6vw, 15px); transition: transform 0.15s, box-shadow 0.2s;
}
.world-profile .ti { font-size: 18px; color: var(--gold-hot); }
.world-profile:hover { transform: translateX(-50%) scale(1.05); box-shadow: inset 0 1px 0 rgba(127,242,255,0.14), 0 6px 18px rgba(0,0,0,0.46), 0 0 18px rgba(255,209,102,0.26); }
.world-profile .wp-name { max-width: 26vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .world-profile .wp-name { display: none; } }

/* ── profile popup ── */
#profile-pop {
    position: fixed; inset: 0; z-index: 26; display: flex;
    align-items: center; justify-content: center; padding: 20px;
    background: radial-gradient(circle at 50% 40%, rgba(10,20,40,0.6), rgba(5,13,31,0.86));
    backdrop-filter: blur(3px);
}
#profile-pop.hidden { display: none; }
.pf-card {
    position: relative; width: min(420px, 92vw); padding: 24px 24px 22px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(14,27,51,0.96), rgba(8,20,40,0.97));
    border: 1px solid rgba(0,229,255,0.3);
    box-shadow: inset 0 1px 0 rgba(127,242,255,0.14), 0 18px 50px rgba(0,0,0,0.6), 0 0 26px rgba(0,229,255,0.2);
    animation: rpPop 0.4s cubic-bezier(.2,1.3,.5,1) both;
}
.pf-close {
    position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    border-radius: 9px; background: rgba(0,0,0,0.3); border: 1px solid rgba(0,229,255,0.22);
    color: var(--cream); font-size: 16px; transition: transform 0.15s;
}
.pf-close:hover { transform: scale(1.1); }
.pf-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.pf-avatar {
    width: 64px; height: 64px; border-radius: 14px; object-fit: cover;
    border: 1px solid rgba(0,229,255,0.34); background: rgba(0,0,0,0.3);
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.pf-name { font-family: var(--font-head); font-weight: 700; color: var(--cream); font-size: clamp(18px, 2.6vw, 24px); }
.pf-sub { color: var(--brass-hi); font-size: clamp(12px, 1.6vw, 14px); margin-top: 2px; }
.pf-stats { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.pf-stat {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 14px; border-radius: 12px;
    background: rgba(0,229,255,0.06); border: 1px solid rgba(0,229,255,0.16);
}
.pf-k { display: flex; align-items: center; gap: 8px; color: var(--cream); opacity: 0.86; font-size: clamp(12px, 1.6vw, 14px); }
.pf-k .ti { color: var(--gem-gold); }
.pf-v { font-family: var(--font-mono); font-weight: 700; color: var(--cream); font-size: clamp(13px, 1.7vw, 16px); }
.pf-wallet {
    border-radius: 14px; padding: 12px 14px;
    background: linear-gradient(135deg, rgba(153,69,255,0.16), rgba(20,241,149,0.12));
    border: 1px solid rgba(153,69,255,0.4);
}
.pf-wallet-head {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-head); font-weight: 700; letter-spacing: 0.6px;
    font-size: clamp(11px, 1.5vw, 13px); color: #c9b8ff; margin-bottom: 8px;
}
.pf-sol { width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(135deg, #9945FF, #14F195); box-shadow: 0 0 8px rgba(153,69,255,0.6); }
.pf-wallet-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pf-addr { font-family: var(--font-mono); color: var(--cream); opacity: 0.7; font-size: clamp(12px, 1.6vw, 14px); }
.pf-soon {
    padding: 4px 11px; border-radius: 999px; white-space: nowrap;
    background: rgba(20,241,149,0.16); border: 1px solid rgba(20,241,149,0.5);
    color: #7bf2c0; font-weight: 700; font-size: clamp(10px, 1.3vw, 12px);
}
.pf-wallet-body .pf-addr { flex: 1 1 auto; font-family: var(--font-mono); }
.pf-copy { width: 32px; height: 28px; flex: 0 0 auto; font-size: 13px; }
/* in-profile Connect Phantom — shown only when the wallet isn't verified yet */
.pf-connect {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; margin-top: 10px; padding: 9px 12px; border: 0; border-radius: 11px; cursor: pointer;
    font-family: var(--font-head); font-weight: 700; font-size: clamp(12px, 1.6vw, 14px); color: #120726;
    background: linear-gradient(180deg, #c9a3ff, #9945FF);
    box-shadow: 0 4px 14px rgba(153,69,255,0.35);
    transition: transform 0.12s, filter 0.2s;
}
.pf-connect:hover { transform: translateY(-1px); filter: brightness(1.07); }
.pf-connect:active { transform: scale(0.98); }
.pf-connect .ti { font-size: 16px; }
.pf-connect.hidden { display: none; }

/* ── create-room count + race-full popups (share race-prompt styling) ── */
#create-pop, #race-full-pop {
    position: fixed; inset: 0; z-index: 28; display: flex;
    align-items: center; justify-content: center; padding: 20px;
    background: radial-gradient(circle at 50% 40%, rgba(10,20,40,0.6), rgba(5,13,31,0.86));
    backdrop-filter: blur(3px);
}
#create-pop.hidden, #race-full-pop.hidden { display: none; }
.cp-card, .rf-card {
    width: min(440px, 92vw); text-align: center; padding: 24px 26px 22px; border-radius: 22px;
    background: linear-gradient(180deg, rgba(14,27,51,0.96), rgba(8,20,40,0.97));
    border: 1px solid rgba(0,229,255,0.3);
    box-shadow: inset 0 1px 0 rgba(127,242,255,0.14), 0 18px 50px rgba(0,0,0,0.6), 0 0 26px rgba(0,229,255,0.2);
    animation: rpPop 0.4s cubic-bezier(.2,1.3,.5,1) both;
}
.cp-ico, .rf-ico { font-size: 48px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); }
.rf-ico { color: var(--gold-hot); }
.cp-card h2, .rf-card h2 { font-family: var(--font-head); font-weight: 700; color: var(--cream); margin: 8px 0 6px; font-size: clamp(20px, 3vw, 28px); }
.cp-card p, .rf-card p { color: var(--cream); opacity: 0.86; font-size: clamp(13px, 1.7vw, 15px); line-height: 1.5; margin: 0 0 18px; }
.cp-counts { display: flex; gap: 10px; justify-content: center; margin-bottom: 18px; flex-wrap: wrap; }
.cp-counts button {
    width: 54px; height: 54px; border-radius: 14px; cursor: pointer;
    font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--cream);
    background: rgba(0,229,255,0.08); border: 1px solid rgba(0,229,255,0.28);
    transition: transform 0.12s, background 0.2s, box-shadow 0.2s;
}
.cp-counts button:hover {
    transform: translateY(-2px) scale(1.06); background: rgba(0,229,255,0.18);
    box-shadow: 0 6px 16px rgba(0,0,0,0.4), 0 0 14px rgba(0,229,255,0.3); border-color: var(--gem-aqua);
}
.cp-actions { display: flex; justify-content: center; }

/* ── teleport overlay ── */
#teleport {
    position: fixed; inset: 0; z-index: 40; display: flex;
    align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 45%, rgba(8,30,56,0.82), rgba(4,11,26,0.94));
    backdrop-filter: blur(5px);
}
#teleport.hidden { display: none; }
.tp-inner { text-align: center; }
.tp-ring {
    width: 74px; height: 74px; margin: 0 auto 22px; border-radius: 50%;
    border: 4px solid rgba(0,229,255,0.18); border-top-color: var(--gem-aqua);
    box-shadow: 0 0 22px rgba(0,229,255,0.4); animation: tpSpin 0.85s linear infinite;
}
@keyframes tpSpin { to { transform: rotate(360deg); } }
.tp-text { font-family: var(--font-head); font-weight: 700; color: var(--cream); font-size: clamp(20px, 3.2vw, 30px); letter-spacing: 0.6px; }
.tp-dots i { font-style: normal; animation: tpDot 1.2s infinite; opacity: 0; }
.tp-dots i:nth-child(2) { animation-delay: 0.2s; }
.tp-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes tpDot { 0%, 60%, 100% { opacity: 0; } 30% { opacity: 1; } }
.tp-sub { margin-top: 8px; color: var(--brass-hi); font-size: clamp(12px, 1.7vw, 15px); opacity: 0.85; }

/* ── confirm popup (leave race / leave server) ── */
#confirm-pop {
    position: fixed; inset: 0; z-index: 42; display: flex;
    align-items: center; justify-content: center; padding: 20px;
    background: radial-gradient(circle at 50% 40%, rgba(10,20,40,0.6), rgba(5,13,31,0.86));
    backdrop-filter: blur(3px);
}
#confirm-pop.hidden { display: none; }
.cf-card {
    width: min(420px, 92vw); text-align: center; padding: 24px 26px 22px; border-radius: 22px;
    background: linear-gradient(180deg, rgba(14,27,51,0.96), rgba(8,20,40,0.97));
    border: 1px solid rgba(0,229,255,0.3);
    box-shadow: inset 0 1px 0 rgba(127,242,255,0.14), 0 18px 50px rgba(0,0,0,0.6), 0 0 26px rgba(0,229,255,0.2);
    animation: rpPop 0.4s cubic-bezier(.2,1.3,.5,1) both;
}
.cf-ico { font-size: 46px; color: var(--gold-hot); filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); }
.cf-card h2 { font-family: var(--font-head); font-weight: 700; color: var(--cream); margin: 8px 0 6px; font-size: clamp(20px, 3vw, 27px); }
.cf-card p { color: var(--cream); opacity: 0.86; font-size: clamp(13px, 1.7vw, 15px); line-height: 1.5; margin: 0 0 18px; }
.cf-actions { display: flex; gap: 12px; justify-content: center; }

/* ── race invite line in world chat ── */
.chat-invite {
    margin: 4px 0; padding: 9px 11px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,209,102,0.14), rgba(0,229,255,0.1));
    border: 1px solid rgba(255,209,102,0.4); color: var(--cream);
}
.chat-invite .ci-head { font-family: var(--font-head); font-weight: 700; color: var(--gold-hot); font-size: clamp(11px, 1.4vw, 13px); }
.chat-invite .ci-body { margin: 3px 0 8px; font-size: clamp(11px, 1.4vw, 13px); line-height: 1.35; }
.chat-invite .ci-body b { color: var(--gem-aqua); }
.chat-invite .ci-actions { display: flex; gap: 8px; }
.chat-invite .ci-actions button {
    flex: 1; padding: 6px 8px; border-radius: 9px; cursor: pointer;
    font-weight: 700; font-size: clamp(11px, 1.4vw, 13px); transition: transform 0.12s, filter 0.2s;
}
.chat-invite .ci-accept { background: linear-gradient(180deg, #2bd6e0, #1597a8); border: none; color: #04222a; }
.chat-invite .ci-ignore { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2); color: var(--cream); }
.chat-invite .ci-actions button:hover { transform: translateY(-1px); filter: brightness(1.1); }

/* ── world chat (side panel) ── */
#world-chat {
    position: fixed; z-index: 14;
    left: max(12px, env(safe-area-inset-left));
    bottom: max(12px, env(safe-area-inset-bottom), var(--ogp-safe-bottom-inset, 0px));
    width: clamp(220px, 25vw, 300px);
    display: flex; flex-direction: column;
    border-radius: 14px; overflow: hidden;
    background: linear-gradient(180deg, rgba(14,27,51,0.78), rgba(8,20,40,0.86));
    border: 1px solid rgba(0,229,255,0.22);
    box-shadow: 0 8px 26px rgba(0,0,0,0.44), 0 0 16px rgba(0,229,255,0.08);
    backdrop-filter: blur(4px);
}
#world-chat .chat-head {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 12px; font-family: var(--font-head); font-weight: 700;
    font-size: clamp(12px, 1.5vw, 14px); color: var(--brass-hi);
    background: rgba(0,229,255,0.08); border-bottom: 1px solid rgba(0,229,255,0.18);
}
.chat-gem { width: 9px; height: 9px; border-radius: 50%; background: var(--gem-aqua); box-shadow: 0 0 8px var(--gem-aqua); }
#chat-log {
    height: clamp(120px, 24vh, 220px); overflow-y: auto; padding: 8px 10px;
    display: flex; flex-direction: column; gap: 4px;
    font-size: clamp(11px, 1.4vw, 13px); line-height: 1.35;
    scrollbar-width: thin; scrollbar-color: rgba(0,229,255,0.4) transparent;
}
#chat-log::-webkit-scrollbar { width: 6px; }
#chat-log::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.4); border-radius: 3px; }
.chat-line { color: var(--cream); word-break: break-word; }
.chat-line .cl-name { color: var(--gem-aqua); margin-right: 5px; }
.chat-line.me .cl-name { color: var(--gold-hot); }
#chat-form { padding: 8px; border-top: 1px solid rgba(0,229,255,0.16); }
#chat-input {
    width: 100%; box-sizing: border-box; padding: 8px 11px; border-radius: 10px;
    background: rgba(0,0,0,0.34); border: 1px solid rgba(0,229,255,0.24);
    color: var(--cream); font-size: clamp(12px, 1.5vw, 14px); outline: none;
}
#chat-input::placeholder { color: rgba(201,217,245,0.42); }
#chat-input:focus { border-color: var(--gem-aqua); box-shadow: 0 0 0 2px rgba(0,229,255,0.25); }
/* mobile: chat is hidden by default and toggled by the left-center FAB */
body.touch-mode #world-chat { display: none; }
body.touch-mode.chat-open #world-chat { display: flex; }

/* chat toggle FAB — only on touch devices, left-center of the screen */
#chat-fab { display: none; }
body.touch-mode #chat-fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; z-index: 16; pointer-events: auto;
    left: max(10px, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%);
    width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
    background: linear-gradient(180deg, rgba(14,27,51,0.9), rgba(8,20,40,0.94));
    border: 1px solid rgba(0,229,255,0.42); color: var(--cream); font-size: 25px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 16px rgba(0,229,255,0.22);
}
body.touch-mode.chat-open #chat-fab { border-color: var(--gold-hot); color: var(--gold-hot); }
/* header button cluster (minimize + close), pinned to the right of the title */
.chat-head-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
/* close button in the chat header — only useful on touch */
#chat-close { display: none; background: none; border: none; cursor: pointer; color: var(--cream); font-size: 16px; padding: 0 2px; }
body.touch-mode #chat-close { display: inline-flex; }

/* minimize — desktop affordance: collapse the panel to just its header bar (touch uses the FAB) */
#chat-min { display: inline-flex; align-items: center; justify-content: center; background: none; border: none;
    cursor: pointer; color: var(--cream); font-size: 16px; line-height: 1; padding: 0 3px; opacity: 0.82;
    transition: color 0.15s, opacity 0.15s; }
#chat-min:hover { opacity: 1; color: var(--gem-aqua); }
body.touch-mode #chat-min { display: none; }
#world-chat.chat-min { width: clamp(170px, 18vw, 210px); }
#world-chat.chat-min #chat-log,
#world-chat.chat-min #chat-form { display: none; }
#world-chat.chat-min .chat-head { border-bottom: none; cursor: pointer; }
/* unread dot: while minimized, a new line turns the gem gold + pulses until you expand */
#world-chat.chat-min.chat-unread .chat-gem { background: var(--gold-hot); box-shadow: 0 0 10px var(--gold-hot);
    animation: chatUnread 1.1s ease-in-out infinite; }
@keyframes chatUnread { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { #world-chat.chat-min.chat-unread .chat-gem { animation: none; } }

/* ── chat bubbles above boats ── */
#chat-bubbles { position: fixed; inset: 0; z-index: 11; pointer-events: none; overflow: hidden; }
.chat-bubble {
    position: absolute; transform: translate(-50%, -100%) scale(0.7);
    max-width: 220px; padding: 6px 11px; border-radius: 13px;
    background: rgba(234,242,255,0.97); color: #081424;
    font-size: clamp(11px, 1.4vw, 13px); font-weight: 600; line-height: 1.3;
    white-space: normal; word-break: break-word; text-align: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.44), 0 0 12px rgba(0,229,255,0.18);
    opacity: 0; transition: opacity 0.18s, transform 0.18s; pointer-events: none;
}
.chat-bubble::after {
    content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
    border-left: 7px solid transparent; border-right: 7px solid transparent;
    border-top: 7px solid rgba(234,242,255,0.97);
}
.chat-bubble.show { opacity: 1; transform: translate(-50%, -100%) scale(1); }

/* ── shop screen ── */
.shop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.shop-head h2 { margin: 0; }
#shop-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 4px;
}
.shop-card {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 14px 8px 11px; border-radius: 14px; cursor: pointer; text-align: center;
    background: linear-gradient(180deg, rgba(0,229,255,0.08), rgba(8,20,40,0.45));
    border: 1px solid rgba(0,229,255,0.2);
    box-shadow: inset 0 1px 0 rgba(127,242,255,0.1);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.shop-card:hover, .shop-card:active { transform: translateY(-2px); border-color: rgba(0,229,255,0.6); box-shadow: inset 0 1px 0 rgba(127,242,255,0.1), 0 0 16px rgba(0,229,255,0.22); }
.shop-lock { position: absolute; top: 7px; right: 9px; font-size: 13px; opacity: 0.8; }
.shop-ico { font-size: clamp(26px, 4vw, 36px); filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35)); }
.shop-name { font-family: var(--font-head); font-weight: 700; color: var(--cream); font-size: clamp(12px, 1.6vw, 15px); }
.shop-price { font-family: var(--font-mono); font-size: clamp(10px, 1.3vw, 12px); color: var(--brass-hi); opacity: 0.72; }
@media (max-width: 560px) { #shop-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── short landscape: keep the 6-card shop grid + Back reachable ── */
@media (orientation: landscape) and (max-height: 430px) {
    #screen-shop .panel {
        max-height: calc(100dvh - 10px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 12px 14px;
    }
    #screen-shop .shop-head { margin-bottom: 0; }
    #screen-shop .shop-head h2 { font-size: clamp(16px, 3.4vw, 20px); }
    #screen-shop .hint { margin: 4px 0; font-size: clamp(11px, 1.6vw, 13px); }
    #screen-shop #shop-grid { gap: 7px; margin: 7px 0 3px; }
    #screen-shop .shop-card { padding: 8px 6px 7px; gap: 1px; }
    #screen-shop .shop-ico { font-size: clamp(20px, 3vw, 28px); }
}

@media (prefers-reduced-motion: reduce) {
    .world-hint { transition: opacity 0.2s; }
    #race-prompt .rp-card { animation: none; }
    .chat-bubble { transition: opacity 0.15s; }
}

/* ── Token Stats island screen ── */
.ts-ca-field { max-width: 560px; margin: 4px auto 0; }
.ts-grid {
    width: 100%; max-width: 560px; margin: 16px auto 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.ts-stat {
    position: relative; display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px; border-radius: 14px;
    background: rgba(8, 18, 36, 0.66);
    border: 1px solid rgba(155, 123, 255, 0.28);
    box-shadow: inset 0 1px 0 rgba(200, 180, 255, 0.08);
}
.ts-stat .ts-k {
    font-family: var(--font-mono, monospace); font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase; color: #b9a7ff;
}
.ts-stat .ts-v {
    font-family: var(--font-display, inherit); font-size: 24px; font-weight: 800;
    color: var(--cream, #eaf3ff); line-height: 1;
}
.ts-stat .ts-soon {
    position: absolute; top: 10px; right: 12px;
    font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: #9b7bff; border: 1px solid rgba(155, 123, 255, 0.4);
    border-radius: 999px; padding: 2px 7px;
}
@media (max-width: 560px) { .ts-grid { grid-template-columns: 1fr; } }