/* Local stream-chat prototype. Game-panel skin; reuses local fonts and texture. */
.arena-chat { width: 100%; max-width: 820px; min-width: 0; margin-inline: auto; color: #efedf1; }
.arena-chat__heading { margin-bottom: 22px; text-align: center; }
.arena-chat__eyebrow { margin: 0 0 10px; color: #a9b8a5; font-size: 11px; font-weight: 700; letter-spacing: .14em; line-height: 1.4; }
.arena-chat__heading h2 { margin: 0; color: #f5f6ef; font: 400 clamp(25px, 6.5vw, 36px)/1.12 "Titan One Local", "Lilita One Local", sans-serif; letter-spacing: -.025em; text-wrap: balance; }
.arena-chat__heading h2 span { color: #a4d66c; }
.arena-chat__card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 2px solid #0c172b;
    border-radius: 22px;
    background: linear-gradient(180deg, #303e59, #25324c);
    box-shadow: inset 0 0 0 5px #367fc5, inset 0 -9px 0 #155995, 0 6px 0 #0b294c, 0 10px 0 #081321, 0 16px 26px #0005;
    font-family: Arial, Helvetica, sans-serif;
}
.arena-chat__card::before {
    content: "";
    position: absolute;
    inset: 72px 7px 90px;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: url("branding/nossa-arena-doodles.svg") center top / 330px 220px repeat;
    filter: grayscale(1) brightness(1.8);
    opacity: .055;
}
.arena-chat__toolbar {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 88px;
    padding: 0 14px 22px;
    border-bottom: 2px solid #17213c;
    background: linear-gradient(180deg, #d576fb 0, #c45cf3 7px, #a733e5 9px, #a12de0 100%);
    box-shadow: inset 0 2px 0 #edacff, inset 0 -3px 0 #8a20c5, 0 3px 0 #15213b55;
}
.arena-chat__toolbar strong {
    display: block;
    max-width: 100%;
    padding: 9px 24px 11px;
    border-radius: 0 0 3px 3px;
    background: #242638;
    color: #fff;
    font: 400 clamp(22px, 6.8vw, 32px)/1.15 "Lilita One Local", sans-serif;
    letter-spacing: .01em;
    text-align: center;
    white-space: nowrap;
    -webkit-text-stroke: 2.5px #101521;
    paint-order: stroke fill;
    text-shadow: 0 3px 0 #0b101c;
    box-shadow: 0 2px 0 #671ca277;
}
.arena-chat [hidden] { display: none !important; }
/* Fixed viewing window: JS follows new messages; gestures scroll the page,
   never the chat history. Hidden (not clip) preserves programmatic scrollTop. */
.arena-chat__feed { height: clamp(320px, 48vh, 440px); overflow: hidden; overscroll-behavior-y: auto; margin-inline: 6px; padding: 18px; scroll-behavior: auto; overflow-anchor: none; }
.arena-chat__messages { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; }
.arena-chat__message { margin: 0; min-width: 0; color: #f1f5ff; font: 400 17px/1.5 Arial, Helvetica, sans-serif; overflow-wrap: anywhere; }
.arena-chat__message--new { animation: arena-chat-arrive 280ms ease-out both; }
.arena-chat__badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 7px; vertical-align: -3px; color: var(--chat-color); border: 1px solid #101d32; border-radius: 4px; background: #1a2944; box-shadow: inset 0 1px 0 #a6c2ed40, 0 1px 0 #111c30; }
.arena-chat__badge svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.arena-chat__author { margin-right: 5px; color: var(--chat-color); font-weight: 700; }
.arena-chat__automation { display: inline-block; margin-right: 6px; padding: 1px 5px; border: 1px solid #7e95b3; border-radius: 4px; background: #24334c; color: #dce9fb; font-size: 11px; font-weight: 600; line-height: 1.4; vertical-align: 1px; white-space: nowrap; }
.arena-chat__message--mint { --chat-color: #7beaaf; }
.arena-chat__message--blue { --chat-color: #83c9ff; }
.arena-chat__message--gold { --chat-color: #ffe17a; }
.arena-chat__message--rose { --chat-color: #ff9fd9; }
.arena-chat__message--purple { --chat-color: #c5a8ff; }
.arena-chat__message--orange { --chat-color: #ffb58d; }
.arena-chat__message--self .arena-chat__author { color: #fff0a6; }
.arena-chat__message--self .arena-chat__badge { background: #7543b1; color: #fff0a6; }
.arena-chat__composer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 16px 16px 23px;
    border-top: 2px solid #111d32;
    background: linear-gradient(180deg, #354865, #2b3c58);
    box-shadow: inset 0 3px 0 #7f99be88, inset 0 -7px 0 #205d96, inset 0 -10px 0 #3788cf;
}
.arena-chat__composer input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 52px;
    padding: 0 14px;
    border: 2px solid #111c30;
    outline: 0;
    box-shadow: inset 0 2px 0 #0d182a88, 0 2px 0 #7895bd66;
    border-radius: 10px;
    background: #1c2b45;
    color: #f1f5ff;
    font: 400 16px/1.25 Arial, Helvetica, sans-serif;
}
.arena-chat__composer input:focus { border-color: #ffdc5e; box-shadow: 0 0 0 2px #ffdc5e33, inset 0 2px 0 #0d182a88; }
.arena-chat__composer input::placeholder { color: #c0cee1; opacity: 1; }
.arena-chat__send, .arena-chat__emoji-toggle {
    position: relative;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0 0 4px;
    border: 2px solid #121e34;
    border-radius: 12px;
    background: linear-gradient(180deg, #59bff4, #2287df 46%, #2068b9);
    box-shadow: inset 0 2px 0 #a3deff, inset 0 -5px 0 #174c8b, 0 3px 0 #0c192e;
    color: #fff;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms ease;
}
.arena-chat__send {
    background: linear-gradient(180deg, #ffe65b, #ffd32a 44%, #ffb914);
    box-shadow: inset 0 2px 0 #fff0a3, inset 0 -6px 0 #e88708, 0 3px 0 #0c192e;
    color: #fff;
}
.arena-chat__send::before { content: ""; position: absolute; top: 4px; left: 7px; right: 7px; height: 3px; border-radius: 4px; background: #fff3af99; pointer-events: none; }
.arena-chat__composer button svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 2px 0 #11213e); }
.arena-chat__composer .arena-chat__send svg { fill: #fff; stroke: #172139; stroke-width: 1.8; }
.arena-chat__send:disabled { opacity: .6; cursor: default; }
.arena-chat__send:not(:disabled):hover { filter: brightness(1.08); }
.arena-chat__send:not(:disabled):active { transform: translateY(2px); box-shadow: inset 0 2px 0 #fff0a3, inset 0 -3px 0 #e88708, 0 1px 0 #0c192e; }
.arena-chat__emoji-toggle:hover, .arena-chat__emoji-toggle[aria-expanded="true"] { filter: brightness(1.12); }
.arena-chat__emoji-toggle:active { transform: translateY(2px); box-shadow: inset 0 2px 0 #a3deff, inset 0 -3px 0 #174c8b, 0 1px 0 #0c192e; }
.arena-chat__emoji-picker { position: absolute; z-index: 2; right: 16px; bottom: 94px; display: flex; flex-wrap: wrap; gap: 2px; max-width: calc(100% - 32px); padding: 6px; border: 2px solid #111d32; border-radius: 12px; background: linear-gradient(180deg, #354865, #25324c); box-shadow: inset 0 2px 0 #7f99be88, 0 4px 0 #112441, 0 8px 20px #0006; }
.arena-chat__emoji-picker button { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; font-size: 24px; cursor: pointer; touch-action: manipulation; }
.arena-chat__emoji-picker button:hover { background: #ffffff10; }
.arena-chat__notice { margin: 0; padding: 10px 8px 14px; color: #c0cee1; background: #25324c; text-align: center; font: 400 10px/1.4 Arial, Helvetica, sans-serif; }
.arena-chat :is(button, .arena-chat__feed):focus-visible { outline: 2px solid #ffe17a; outline-offset: -3px; }
.arena-chat__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes arena-chat-arrive { from { opacity: .2; } to { opacity: 1; } }
@media (max-width: 767px) {
    body.arena-chat-in-view > :is(.mega-pix-launcher, .iphone-promo-launcher) { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (max-width: 480px) {
    .arena-chat__card { border-radius: 18px; }
    .arena-chat__toolbar { min-height: 76px; padding-inline: 10px; padding-bottom: 20px; }
    .arena-chat__toolbar strong { font-size: 26px; padding-inline: 18px; }
    .arena-chat__feed { height: clamp(300px, 46svh, 380px); padding: 14px 10px; }
    .arena-chat__message { font-size: 15px; line-height: 1.55; }
    .arena-chat__messages { gap: 10px; }
    .arena-chat__composer { padding: 14px 10px 21px; gap: 8px; }
    .arena-chat__composer input { height: 48px; padding-inline: 10px; }
    .arena-chat__send, .arena-chat__emoji-toggle { flex-basis: 48px; width: 48px; height: 48px; }
}
@media (max-width: 359px) {
    .arena-chat__heading h2 { font-size: 24px; }
    .arena-chat__toolbar { min-height: 70px; padding-inline: 8px; }
    .arena-chat__toolbar strong { font-size: 21px; padding-inline: 14px; }
    .arena-chat__message { font-size: 14px; }
    .arena-chat__badge { width: 17px; height: 17px; margin-right: 5px; }
    .arena-chat__composer { gap: 6px; padding-inline: 8px; }
    .arena-chat__composer input { padding-inline: 8px; }
    .arena-chat__send, .arena-chat__emoji-toggle { flex-basis: 44px; width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .arena-chat__message--new { animation: none; }
    .arena-chat__send, .arena-chat__emoji-toggle { transition: none; }
}