/* Brightwater MUD client - classic dark terminal look, responsive. */
:root {
  --bg: #0d0f14;
  --bg2: #151924;
  --bg3: #1d2331;
  --line: #2a3142;
  --text: #c9d1d9;
  --dim: #6e7681;
  --accent: #58a6ff;
  --font: "Cascadia Mono", "Consolas", "Menlo", "DejaVu Sans Mono", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; }
body { overscroll-behavior: none; }

#app { display: flex; height: 100vh; height: 100dvh; width: 100%; overflow: hidden; }
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }

#output {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 14px; white-space: pre-wrap; overflow-wrap: anywhere;
  line-height: 1.35; -webkit-overflow-scrolling: touch;
}
/* The login banner is ASCII art: never wrap it, shrink it on small screens instead. */
.c-banner { color: #ffa657; white-space: pre; display: inline-block; font-size: min(14px, 2.55vw); line-height: 1.15; }
#output .line { min-height: 1.35em; }
#output .echo { color: var(--dim); }

#newmsg {
  position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #000; padding: 4px 12px; border-radius: 12px; cursor: pointer; font-size: 12px;
}

#inputbar { display: flex; gap: 6px; padding: 8px; background: var(--bg2); border-top: 1px solid var(--line); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
#cmd {
  flex: 1; min-width: 0; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px;
  padding: 10px; font: inherit; font-size: 16px; /* 16px stops iOS zooming */
}
#cmd:focus { outline: none; border-color: var(--accent); }
#send { background: var(--bg3); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 0 14px; font: inherit; cursor: pointer; }

/* ---------------- side panel ---------------- */
#panel { width: 280px; background: var(--bg2); border-left: 1px solid var(--line); overflow-y: auto; position: relative; padding: 12px; }
#panelToggle { display: none; }
.pname { font-size: 16px; font-weight: bold; color: #fff; }
.pinfo { color: var(--dim); margin-bottom: 10px; font-size: 12px; }
.meter { display: flex; align-items: center; gap: 6px; margin: 5px 0; }
.mlabel { width: 22px; color: var(--dim); font-size: 12px; }
.mbar { flex: 1; height: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.mfill { height: 100%; width: 0; transition: width .3s; }
.mfill.hp { background: linear-gradient(90deg, #238636, #3fb950); }
.mfill.hp.low { background: linear-gradient(90deg, #9e6a03, #e3b341); }
.mfill.hp.crit { background: linear-gradient(90deg, #b62324, #f85149); animation: hpcrit 1s ease-in-out infinite; }
@keyframes hpcrit { 50% { opacity: .55; } }
.mfill.mp { background: linear-gradient(90deg, #1f6feb, #58a6ff); }
.mfill.st { background: linear-gradient(90deg, #9e6a03, #e3b341); }
.mfill.xp { background: linear-gradient(90deg, #6e40c9, #bc8cff); }
.mfill.enemy { background: linear-gradient(90deg, #8b2d2d, #da3633); }
.mfill.pet { background: linear-gradient(90deg, #196c2e, #3fb950); }
.mfill.res-rage { background: linear-gradient(90deg, #8b2d2d, #f0883e); }
.mfill.res-combo { background: linear-gradient(90deg, #6e7681, #e6edf3); }
.mfill.res-heat { background: linear-gradient(90deg, #b62324, #f0883e); }
.mfill.res-charge { background: linear-gradient(90deg, #1f6feb, #d2a8ff); }
.subNudge { cursor: pointer; color: var(--accent, #d29922); font-size: 12px; justify-content: center; border: 1px dashed var(--line); border-radius: 4px; padding: 3px 6px; }
.subNudge:hover { background: var(--bg); }
.petname { color: #7ee787; margin-bottom: 4px; font-size: 13px; }
.mtext { width: 86px; text-align: right; font-size: 11px; color: var(--text); }
.prow { display: flex; justify-content: space-between; margin: 8px 0; }
.goldtext { color: #e3b341; font-weight: bold; }
.psection { margin: 14px 0 6px; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.roomtext { color: #79c0ff; font-weight: bold; }
.areatext { color: var(--dim); font-size: 12px; margin-bottom: 6px; }
.exits, .quick { display: flex; flex-wrap: wrap; gap: 5px; }
.exits button, .quick button {
  background: var(--bg3); color: var(--text); border: 1px solid var(--line); border-radius: 5px;
  padding: 6px 9px; font: inherit; font-size: 12px; cursor: pointer; min-width: 40px;
}
.exits button:hover, .quick button:hover { border-color: var(--accent); }
.exits button.closed { color: var(--dim); font-style: italic; }
.effects { font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.effects .good { color: #56d364; }
.effects .bad { color: #f85149; }
#targetName { color: #ff7b72; margin-bottom: 4px; }
.dim { color: var(--dim); }

#conn {
  position: fixed; inset: 0; background: rgba(0,0,0,.75); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; font-size: 16px; z-index: 10;
}
#conn[hidden] { display: none; }
#conn button { background: var(--accent); color: #000; border: 0; border-radius: 6px; padding: 10px 20px; font: inherit; cursor: pointer; }

/* ---------------- color classes (server markup {tag}) ---------------- */
.c-title { color: #ffa657; font-weight: bold; }
.c-hl { color: #fff; font-weight: bold; }
.c-room { color: #79c0ff; font-weight: bold; }
.c-desc { color: #c9d1d9; }
.c-exits { color: #3fb950; }
.c-mob { color: #ffa198; }
.c-npc { color: #d2a8ff; }
.c-player { color: #7ee787; }
.c-boss { color: #ff4d4d; font-weight: bold; }
.c-elite { color: #ff9e64; font-weight: bold; }
.c-say { color: #e6edf3; }
.c-tell { color: #ff7ee8; }
.c-shout { color: #ffd33d; }
.c-chat { color: #56d4dd; }
.c-guild { color: #bc8cff; }
.c-group { color: #7ee787; }
.c-emote { color: #a5d6ff; font-style: italic; }
.c-hit { color: #e3b341; }
.c-hurt { color: #ff7b72; }
.c-miss { color: #8b949e; }
.c-combat { color: #d29922; }
.c-cond { color: #f0883e; font-size: 12px; }
.c-dmg { color: #8b949e; font-size: 12px; }
.c-death { color: #ff4d4d; font-weight: bold; }
.c-spell { color: #a371f7; }
.c-buff { color: #56d364; }
.c-debuff { color: #f778ba; }
.c-heal { color: #56d364; }
.c-xp { color: #bc8cff; }
.c-level { color: #ffd700; font-weight: bold; }
.c-loot { color: #e6edf3; }
.c-gold { color: #e3b341; }
.c-quest { color: #ffdf5d; }
.c-system { color: #58a6ff; }
.c-info { color: #8b949e; }
.c-error { color: #f85149; }
.c-good { color: #56d364; }
.c-dim { color: #6e7681; }
.c-admin { color: #ff7b72; font-weight: bold; }
.c-hp { color: #f85149; }
.c-mana { color: #58a6ff; }
.c-stamina { color: #e3b341; }
/* rarities */
.c-common { color: #c9d1d9; }
.c-uncommon { color: #3fb950; }
.c-rare { color: #388bfd; }
.c-epic { color: #a371f7; }
.c-legendary { color: #ff8c00; font-weight: bold; }

/* ---------------- clickable text & menus ---------------- */
.link { cursor: pointer; border-bottom: 1px dotted rgba(201, 209, 217, .35); }
.link:hover { border-bottom-color: currentColor; filter: brightness(1.25); }
.c-exit { color: #56d364; font-weight: 600; }
.menu { position: fixed; z-index: 40; background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; padding: 4px; min-width: 150px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5); font-size: 14px; }
.menu[hidden] { display: none; }
.menu .mh { color: var(--dim); font-size: 12px; padding: 4px 10px 6px; border-bottom: 1px solid var(--line); margin-bottom: 3px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu button { display: block; width: 100%; text-align: left; background: transparent; border: 0; color: var(--text); padding: 7px 10px; border-radius: 5px; font: inherit; cursor: pointer; }
.menu button:hover { background: #2a3350; }

/* ---------------- hotbar ---------------- */
#hotbarWrap { background: var(--bg2); border-top: 1px solid var(--line); }
#hotbarWrap.empty { display: none; }
#gcd { height: 3px; background: transparent; }
#gcdFill { height: 100%; width: 0; background: var(--accent); transition: width .9s linear; }
#hotbar { display: flex; gap: 5px; padding: 6px 8px; overflow-x: auto; scrollbar-width: thin; }
.hb { position: relative; flex: 0 0 auto; min-width: 74px; max-width: 120px; background: var(--bg3); border: 1px solid var(--line); border-radius: 7px;
  color: var(--text); padding: 5px 7px 4px; font: inherit; font-size: 12px; cursor: pointer; text-align: left; overflow: hidden; }
.hb:hover { border-color: var(--accent); }
.hb .hn { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.hb .hc { display: block; color: var(--dim); font-size: 10.5px; }
.hb .hk { position: absolute; top: 2px; right: 4px; font-size: 9px; color: #4f5b70; }
.hb.spell .hn { color: #bc8cff; } .hb.skill .hn { color: #e3b341; }
.hb.nores { opacity: .45; }
.hb .cd { position: absolute; inset: 0; background: rgba(8, 10, 14, .78); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; }
.hb.fixed { min-width: 58px; text-align: center; }
.hb.fixed .hn { color: var(--text); }

/* ---------------- minimap ---------------- */
#minimap { width: 100%; height: 170px; background: #0a0c10; border: 1px solid var(--line); border-radius: 6px; display: block; }
#minimap .mr { fill: #2a3142; stroke: #3b475f; stroke-width: 1; }
#minimap .mr.safe { fill: #1f4a31; }
#minimap .mr.here { fill: #e3b341; stroke: #fff; stroke-width: 2; }
#minimap .ml { stroke: #3b475f; stroke-width: 2; }
#minimap .ml.door { stroke-dasharray: 3 3; stroke: #8b6f3a; }
#minimap .mu { stroke: #56d4dd; stroke-width: 1.5; stroke-dasharray: 2 3; }

/* ---------------- target effects, misc ---------------- */
.tfx { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; font-size: 11px; }
.tfx span { padding: 1px 5px; border-radius: 4px; background: var(--bg3); }
.tfx .bad { color: #f778ba; } .tfx .good { color: #56d364; }
.nameRow { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.iconBtn { background: var(--bg3); border: 1px solid var(--line); border-radius: 6px; color: var(--text); padding: 3px 7px; cursor: pointer; font-size: 14px; }
#panelToggle ~ #panelBody .iconBtn { margin-right: 36px; }

/* ---------------- screen flashes ---------------- */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 30; opacity: 0; }
.fx.go { animation: fxflash .55s ease-out; }
.fx.hurt { box-shadow: inset 0 0 120px 30px rgba(248, 81, 73, .55); }
.fx.crit { box-shadow: inset 0 0 90px 20px rgba(227, 179, 65, .45); }
.fx.levelup { box-shadow: inset 0 0 160px 50px rgba(255, 215, 0, .55); }
.fx.death { box-shadow: inset 0 0 200px 90px rgba(120, 0, 0, .8); }
.fx.achievement { box-shadow: inset 0 0 160px 40px rgba(188, 140, 255, .55); }
@keyframes fxflash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ---------------- mobile ---------------- */
@media (max-width: 760px) {
  #app { flex-direction: column-reverse; }
  #panel { width: 100%; min-width: 0; flex-shrink: 0; border-left: 0; border-bottom: 1px solid var(--line); max-height: 45vh; padding: 8px 48px 8px 10px; }
  #panel.collapsed { max-height: 64px; overflow: hidden; }
  #panelToggle {
    display: block; position: absolute; right: 8px; top: 6px; background: var(--bg3); color: var(--text);
    border: 1px solid var(--line); border-radius: 5px; padding: 4px 9px; font-size: 16px; z-index: 2;
  }
  .pname { font-size: 14px; }
  .meter { margin: 3px 0; }
  .mtext { width: 76px; }
  #output { padding: 8px; font-size: 13px; }
  .exits button { padding: 9px 12px; font-size: 14px; }
  .hb { min-width: 66px; padding: 7px 7px 5px; }
  #minimap { height: 120px; }
  #panelToggle ~ #panelBody .iconBtn { margin-right: 40px; }
}