/* Combat log window (public/combatlog.js): closed by default; a small LOG plate sits above the Chat button. Plate art = the Teleport / ADMIN plate (ui/btn_admin.webp). */
#leftBtns #btnClog { position:absolute; left:150px; bottom:78px; width:46px; height:21px; padding:0; border:0; border-radius:0; background:url(/ui/btn_admin.webp) 0 0/100% 300% no-repeat; filter:drop-shadow(0 2px 2px rgba(0,0,0,.55)); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#btnClog span { display:block; font:700 9px/21px Arial,"Liberation Sans",Helvetica,sans-serif; letter-spacing:.1em; color:#e0a64a; text-shadow:0 1px 1px #000,0 0 3px rgba(0,0,0,.8); pointer-events:none; }
#btnClog::after { content:""; position:absolute; inset:-12px -6px -3px -6px; } /* touch area ~58x36, stops above the Chat button */
#btnClog:hover, #btnClog.on { background-position:0 50%; } #btnClog:hover span, #btnClog.on span { color:#ff7d12; }
#btnClog:active { background-position:0 100%; }
#btnClog .dot { position:absolute; right:-2px; top:-3px; width:7px; height:7px; border-radius:50%; background:#7be08f; box-shadow:0 0 0 1.5px #17120a; display:none; } #btnClog.unread .dot { display:block; }
body.noclog #btnClog, body.noclog #clog, body.noclog #clFeed { display:none !important; }

/* the window: sits right above the chat box (child of #chat), same ember-glass box art as the chat log, see-through */
#clog { position:absolute; left:0; right:0; bottom:100%; margin-bottom:3px; display:none; flex-direction:column; pointer-events:auto; z-index:3; user-select:none; -webkit-user-select:none; max-width:360px;
  border:2px solid transparent; border-image:url(/ui/sh_chat_box.png) 2 fill / 2px stretch; opacity:.93;
  --cl-hitout:#fff3b0; --cl-hitin:#ff6b61; --cl-gold:#ffd54a; --cl-loot:#7be08f; --cl-exp:#6fe3f2; --cl-good:#9be08f; }
#clog.open { display:flex; }
#clog .clt { display:flex; align-items:center; gap:2px; padding:2px 2px 0; }
#clog .clt button { flex:none; width:56px; height:25px; padding:0; border:0; background:url(/ui/btn_admin.webp) 0 0/100% 300% no-repeat; font:700 10px/25px Arial,"Liberation Sans",Helvetica,sans-serif; letter-spacing:.06em; color:#a8894f; text-shadow:0 1px 1px #000; cursor:pointer; touch-action:manipulation; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
#clog .clt button.on { background-position:0 100%; color:#ff9a30; } #clog .clt button:hover { color:#e0a64a; }
#clog .clt .clx { margin-left:auto; width:26px; height:25px; font:700 16px/23px Arial,sans-serif; color:#d9b66a; background-size:100% 300%; background-position:0 0; }
#clog .clb { height:84px; overflow-y:auto; overscroll-behavior:contain; padding:2px 6px 3px; scrollbar-width:thin; scrollbar-color:#6b5a3a transparent; touch-action:pan-y; }
#clog .clb div { font:600 10.5px/13px system-ui,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--c); text-shadow:0 1px 2px #000; }
#clog .clb.empty::before { content:"Nothing yet"; font:italic 10.5px/13px system-ui,sans-serif; color:rgba(220,205,170,.4); }
#clog .hitout { --c:var(--cl-hitout); } #clog .hitin { --c:var(--cl-hitin); } #clog .gold { --c:var(--cl-gold); } #clog .loot { --c:var(--cl-loot); }
#clog .exp { --c:var(--cl-exp); } #clog .good { --c:var(--cl-good); }
#chat.kb #clog { display:none; }
/* mini feed (window closed): ONE fading line above the LOG plate, level-up / item drops only. Never takes touches. */
#clFeed { position:fixed; left:calc(12px + 150px + var(--sl,0px)); bottom:calc(22px + 100px + env(safe-area-inset-bottom,0px)); max-width:min(46vw,260px); padding:1px 6px; box-sizing:border-box; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:700 10.5px/14px system-ui,sans-serif; color:var(--c,#7be08f); background:rgba(10,8,5,.45); border-radius:3px; text-shadow:0 1px 2px #000; opacity:0; transition:opacity .5s; pointer-events:none; z-index:30; }
#clFeed.on { opacity:.92; } #clFeed.gold { --c:#ffd54a; } #clFeed.loot { --c:#7be08f; } #clFeed.good { --c:#b8f09b; }
@media (max-height:420px) { #clog .clb { height:84px; } }
@media (orientation:portrait) { #clog { position:fixed; left:calc(10px + var(--sl,0px)); right:auto; width:min(70vw,260px); bottom:calc(196px + env(safe-area-inset-bottom,0px)); margin:0; } }