/* tower_town_v1 · town chat (chat.js). Low-key see-through bar; panel ~40% tall; see-through name card; solid DM window. */
.chat-dock {
  position: absolute; z-index: 18; left: 362px; bottom: 14px; width: min(500px, calc(100% - 460px));
  font-family: "Source Sans 3", Georgia, sans-serif; color: #f6ead0;
}
.chat-bar {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; padding: 0 12px; box-sizing: border-box;
  border-radius: 15px; border: 1px solid rgba(217, 178, 92, .38); cursor: pointer; text-align: left;
  background: rgba(26, 16, 8, .42); color: #f6ead0; font-size: .82rem;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.chat-bar:hover, .chat-bar:focus-visible { background: rgba(26, 16, 8, .6); outline: none; border-color: rgba(233, 194, 122, .7); }
.chat-bar[hidden] { display: none; }
.cb-ic { font-size: .9rem; opacity: .85; }
.cb-line { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92; }
.cb-line b { color: #ffe3a6; font-weight: 700; }
.cb-ch { font-style: normal; font-size: .68rem; font-weight: 700; padding: 0 5px; border-radius: 5px; margin-right: 2px; background: rgba(90, 120, 160, .55); }
.cb-ch.alliance { background: rgba(170, 50, 50, .6); }
.cb-dot, .cp-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0453a; box-shadow: 0 0 0 2px rgba(0,0,0,.35); flex: none; }
.cb-dot[hidden], .cp-dot[hidden] { display: none; }

.chat-panel {
  display: flex; flex-direction: column; height: 40vh; min-height: 220px; box-sizing: border-box;
  border-radius: 14px; border: 1.5px solid rgba(217, 178, 92, .55); overflow: hidden;
  background: rgba(30, 19, 10, .78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.chat-panel[hidden] { display: none; }
.cp-head { display: flex; align-items: center; gap: 6px; padding: 6px 6px 0 8px; border-bottom: 1px solid rgba(217, 178, 92, .3); }
.cp-tabs { display: flex; gap: 2px; flex: 1; }
.cp-tab, .cp-friends {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 7px; border: 0; border-radius: 9px 9px 0 0;
  background: transparent; color: #d8c49a; font: 700 .86rem Georgia, serif; cursor: pointer;
}
.cp-tab.on, .cp-friends.on { background: rgba(247, 232, 200, .14); color: #fff2d0; box-shadow: inset 0 -2px 0 #e9c27a; }
.cp-tab .cp-dot { position: absolute; top: 4px; right: 3px; }
.cp-friends { font-size: .8rem; padding: 5px 10px 6px; }
.cp-friends b { background: rgba(233, 194, 122, .25); border-radius: 8px; padding: 0 6px; font-size: .72rem; }
.cp-min { width: 30px; height: 28px; border: 0; background: transparent; color: #e9c27a; font-size: 1rem; cursor: pointer; }
.cp-list { flex: 1; overflow-y: auto; padding: 6px 10px; font-size: .88rem; line-height: 1.35; scrollbar-width: thin; }
.cm { margin: 0 0 4px; word-wrap: break-word; }
.cm-t { font-size: .68rem; opacity: .55; }
.cm-n { border: 0; background: none; padding: 0; color: #ffcf7a; font: 700 .88rem "Source Sans 3", sans-serif; cursor: pointer; text-decoration: underline dotted rgba(255,207,122,.5); text-underline-offset: 2px; }
.cm.me .cm-n { color: #9fd08a; text-decoration: none; cursor: default; }
.cm-x { color: #f6ead0; }
.cp-form { display: flex; gap: 6px; padding: 6px 8px 8px; border-top: 1px solid rgba(217, 178, 92, .25); }
.cp-form[hidden] { display: none; }
.cp-form input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(217, 178, 92, .5); background: rgba(250, 240, 214, .92); color: #2a1a0a; font-size: .9rem; }
.cp-send { height: 32px; padding: 0 14px; border-radius: 8px; border: 1.5px solid #e9c27a; color: #fbe7bf; font: 700 .86rem Georgia, serif; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #b8452e, #7a1e14 70%); }
.cf-h { margin: 2px 0 6px; font: 700 .8rem Georgia, serif; color: #e9c27a; letter-spacing: .04em; }
.cf-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(217, 178, 92, .15); }
.cf-meta { flex: 1; font-size: .74rem; opacity: .75; }
.cf-msg { padding: 3px 10px; border-radius: 7px; border: 1px solid #e9c27a; background: rgba(233, 194, 122, .15); color: #ffe3a6; font-size: .78rem; cursor: pointer; }
.cf-empty { opacity: .7; font-size: .84rem; }

/* name card: see-through */
.chat-card {
  position: absolute; z-index: 3; box-sizing: border-box; padding: 10px 12px 10px; border-radius: 12px;
  background: rgba(250, 240, 214, .5); color: #1e1208; border: 1.5px solid rgba(184, 134, 42, .8);
  -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1);
  box-shadow: 0 8px 22px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 2px;
}
.chat-card[hidden] { display: none; }
.cc-name { font: 700 1.05rem Georgia, serif; padding-right: 24px; }
.cc-meta { font-size: .82rem; font-weight: 600; }
.cc-x { position: absolute; top: 4px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(60, 36, 16, .7); color: #fbe7bf; cursor: pointer; }
.cc-btns { display: flex; gap: 6px; margin-top: 7px; }
.cc-btns.small { margin-top: 4px; }
.cc-b { flex: 1; padding: 6px 6px; border-radius: 8px; border: 1px solid rgba(90, 58, 26, .7); background: rgba(255, 248, 230, .72); color: #2a1a0a; font: 700 .78rem "Source Sans 3", sans-serif; cursor: pointer; }
.cc-b.main { background: rgba(122, 30, 20, .88); color: #fbe7bf; border-color: #e9c27a; }
.cc-b.ok { background: rgba(60, 110, 60, .75); color: #f2ffe8; }
.cc-b:disabled { opacity: .6; cursor: not-allowed; }
.cc-b.main:disabled { background: rgba(80, 60, 44, .55); color: #f1e3c3; }
.cc-btns.small .cc-b { font-size: .72rem; padding: 4px; background: rgba(255, 248, 230, .45); font-weight: 600; }

/* DM window: solid */
.chat-dm {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 40vh; min-height: 220px; box-sizing: border-box;
  display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: #f3e3c0; color: #2a1a0a; border: 3px solid #6b4226; outline: 1.5px solid #3d2412; box-shadow: inset 0 0 0 2px #b8893a, 0 12px 28px rgba(0,0,0,.55);
}
.chat-dm[hidden] { display: none; }
.dm-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: linear-gradient(180deg, #7a4e2c, #4a2c16); color: #fbe7bf; }
.dm-head b { font: 700 1rem Georgia, serif; }
.dm-meta { flex: 1; font-size: .74rem; opacity: .85; }
.dm-back, .dm-x { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d9b25c; background: #3d2412; color: #fbe7bf; cursor: pointer; font-size: 1rem; line-height: 1; }
.dm-list { flex: 1; overflow-y: auto; padding: 8px 10px; font-size: .9rem; }
.chat-dm .cm-x { color: #2a1a0a; }
.chat-dm .cm-n { color: #8a2a16; }
.chat-dm .cm.me .cm-n { color: #2f6b3f; }
.chat-dm .cp-form { border-top: 1px solid rgba(107, 66, 38, .35); }
.chat-dock.dm-open .chat-panel { visibility: hidden; }

.chat-toast { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); margin: 0; z-index: 4; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px; background: rgba(26, 16, 8, .85); color: #fbe7bf; font-size: .8rem; border: 1px solid rgba(217, 178, 92, .6); }
.chat-toast[hidden] { display: none; }

/* phones: full width just above the wooden bottom dock (Play Campaign + event badges live inside the dock) */
@media (orientation: portrait) and (max-width: 699px) {
  .chat-dock { left: 8px; right: 8px; width: auto; bottom: 132px; } /* chat.js fine-tunes this to sit just above the Play button */
  .chat-bar { height: 26px; font-size: .76rem; border-radius: 13px; }
  .chat-panel, .chat-dm { height: 40vh; max-height: calc(100vh - 132px - 150px); }
}
/* short landscape screens: keep it clear of the Play button */
@media (max-height: 520px) and (orientation: landscape) {
  .chat-panel, .chat-dm { height: 60vh; }
}

/* ---- herald / system lines (World Hunt announcements): a banner, not a player line ---- */
.cm.sys { margin: 5px -2px 6px; padding: 4px 8px 5px; border-radius: 6px; text-align: center;
  background: linear-gradient(90deg, rgba(120,40,16,0) 0%, rgba(120,40,16,.75) 12%, rgba(120,40,16,.75) 88%, rgba(120,40,16,0) 100%);
  border-top: 1px solid rgba(255,207,122,.55); border-bottom: 1px solid rgba(255,207,122,.55); }
.cm.sys .cm-x { color: #ffe3a0; font: italic 700 .86rem Georgia, "Times New Roman", serif; letter-spacing: .01em; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.cm.sys .cm-t { display: none; }
.cm.sys .cm-herald { font-style: normal; margin-right: 2px; }
.cm.sys.k-slain { background: linear-gradient(90deg, rgba(150,110,20,0), rgba(150,110,20,.8) 12%, rgba(150,110,20,.8) 88%, rgba(150,110,20,0)); }
.cm.sys.k-bighit .cm-x { font-size: .8rem; }
.chat-bar .cb-herald { color: #ffcf7a; font-family: Georgia, serif; font-style: italic; }

/* ---- chatmod_v1: settings gear, filter note, report flag + sheet, blocked list ---- */
.cp-set { width: 34px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #e9c27a; font-size: 1.05rem; cursor: pointer; }
.cp-set.on, .cp-set:hover { background: rgba(247, 232, 200, .14); }
.cp-note { margin: 0 8px; padding: 6px 10px; border-radius: 8px; font: 700 .86rem Georgia, serif; text-align: center;
  color: #3a2410; background: linear-gradient(180deg, #f6e6bf, #e6cd94); border: 2px solid #8a2a16; box-shadow: 0 2px 0 #4a2a12; }
.cp-note[hidden] { display: none; }
.cm { position: relative; padding-right: 34px; }
.cm.me, .cm.sys { padding-right: 0; }
.cm-rep { position: absolute; right: 0; top: -3px; width: 32px; height: 28px; padding: 0; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: rgba(233, 194, 122, .55); font-size: .95rem; line-height: 28px; }
.cm-rep:hover, .cm-rep:focus-visible { color: #ffcf7a; background: rgba(247, 232, 200, .12); outline: none; }
.chat-dm .cm-rep { color: rgba(122, 30, 20, .55); }
.cc-b.warn { color: #7a1e14; }
.cs-rules { margin: 0 0 10px; font-size: .84rem; line-height: 1.35; opacity: .9; }
.cs-rules.small { margin-top: 10px; font-size: .76rem; opacity: .7; }
.cs-name { color: #ffcf7a; font-size: .9rem; }
.cs-unblock { min-height: 36px; padding: 4px 14px; border-radius: 8px; border: 1.5px solid #e9c27a; cursor: pointer;
  background: rgba(233, 194, 122, .18); color: #ffe3a6; font: 700 .86rem Georgia, serif; }

/* report sheet: solid parchment over the chat panel */
.chat-report {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; max-height: min(78vh, 520px); overflow-y: auto; box-sizing: border-box;
  padding: 12px 14px 14px; border-radius: 14px; color: #2a1a0a; font-family: Georgia, serif;
  background: #f3e3c0; border: 3px solid #6b4226; outline: 1.5px solid #3d2412; box-shadow: inset 0 0 0 2px #b8893a, 0 12px 28px rgba(0,0,0,.55);
}
.chat-report[hidden] { display: none; }
.cr-h { margin: 0 0 6px; font-size: 1.1rem; text-align: center; }
.cr-q { margin: 0 0 8px; padding: 6px 10px; border-left: 4px solid #8a2a16; background: rgba(255, 250, 235, .7); border-radius: 4px;
  font: italic .9rem "Source Sans 3", sans-serif; word-wrap: break-word; }
.cr-sub { margin: 4px 0 8px; font-size: .9rem; text-align: center; }
.cr-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cr-r { min-height: 48px; padding: 6px 8px; border-radius: 10px; cursor: pointer; border: 2px solid #6e4520;
  background: linear-gradient(180deg, #fff4da, #ecd6a2); color: #3a2410; font: 800 1rem Georgia, serif; box-shadow: 0 2px 0 #4a2a12; }
.cr-r:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cr-r:active { transform: translateY(1px); box-shadow: 0 1px 0 #4a2a12; }
.cr-block { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; font: 700 .92rem Georgia, serif; cursor: pointer; }
.cr-block input { width: 22px; height: 22px; accent-color: #8a1f17; }
.cr-cancel { display: block; width: 100%; min-height: 44px; margin-top: 4px; border-radius: 10px; cursor: pointer;
  border: 2px solid #3b220e; background: linear-gradient(180deg, #8a5a2c, #5f3b1a); color: #fbecc8; font: 800 1rem Georgia, serif; }
.chat-dock.report-open .chat-panel, .chat-dock.report-open .chat-dm { visibility: hidden; }
.chat-dock.report-open .chat-report { visibility: visible; }
/* rank login herald: brass-and-crown banner */
.cm.sys.k-login { background: linear-gradient(90deg, rgba(70,50,110,0), rgba(70,50,110,.78) 12%, rgba(70,50,110,.78) 88%, rgba(70,50,110,0)); border-color: rgba(233,194,122,.75); }
.cm.sys.k-login .cm-herald::after { content: "👑"; margin-left: 2px; }
.cm.sys.k-login .cm-x { color: #ffe9b0; }
/* av6: your portrait before your name on your own lines (face markup + brass ring come from avatar.js faceHtml) */
.cm .arena-face.cm-face { width: 22px !important; height: 22px !important; margin: 0 4px 0 0 !important; vertical-align: -6px !important; }
/* av9: other players' portraits (stable gallery face hashed from the name, from avatar.js faceFor) in lines, friends, blocked, name card, DM header */
.cm-n .arena-face.cm-face { text-decoration: none; }
.cf-row .cm-n, .cs-name, .cc-name, .dm-head b { display: inline-flex; align-items: center; min-width: 0; }
.arena-face.cf-face { margin-right: 6px !important; }
.arena-face.cc-face { margin-right: 8px !important; }
.arena-face.dm-face { margin-right: 7px !important; }