/* The Realm of Lost: the IdleRPG page in the LostIRC 2030 look. Dark glass panels and gold glow around the inked
   parchment map from realm.js, like RealmBot's cards in the chat. Shared header and tokens come from ../css/lost2030.css. */
:root {
  --rule: rgba(226,181,62,.18);
  --gold-dim: #a8874a;
  --muted: #b3a283;
  --sea: #8fb5b4;
  --blood: #ff7a7a;
  --realm-serif: "EB Garamond", Georgia, serif;
}
body { margin: 0; color: var(--text); font: 16px/1.55 var(--ui); background: var(--bg); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 45% at 30% 0%, rgba(226,181,62,.09), transparent 70%), radial-gradient(50% 40% at 100% 30%, rgba(111,211,216,.05), transparent 70%); }
a { color: var(--cyan); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 40px max(16px, env(safe-area-inset-right, 0px)) 64px max(16px, env(safe-area-inset-left, 0px)); }

/* header row */
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 32px; margin-bottom: 26px; }
.head > div:first-child { min-width: 0; flex: 1 1 520px; }
.realm-k { color: var(--gold-dim); display: flex; align-items: center; gap: 10px; }
h1 { margin: 10px 0 0; font: 400 clamp(56px, 8vw, 96px)/.9 var(--display); color: var(--gold); text-shadow: 0 0 26px rgba(226,181,62,.4); }
.sub { margin: 14px 0 0; color: var(--soft); font-size: 18px; max-width: 58ch; }
.top { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.top .cta, .top .cta-2 { height: 40px; font-size: 14px; border-radius: 12px; }
.cta.gold { background: var(--gold); color: #120e0a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 0 24px rgba(226,181,62,.35); }
.stats { display: flex; gap: 12px; flex-wrap: wrap; }
.stat { min-width: 120px; padding: 14px 18px; border-radius: 18px; background: var(--bg-1); border: 1px solid var(--line); color: var(--dim); font: 600 11px var(--ui); letter-spacing: .14em; text-transform: uppercase; }
.stat b { display: block; margin-bottom: 4px; font: 400 44px/1 var(--display); letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.stat:first-child b { color: var(--gold); text-shadow: 0 0 14px rgba(226,181,62,.4); }
.stat:last-child b { color: var(--rose); }
.mode { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.05); color: var(--dim); font: 600 11px var(--mono); letter-spacing: .04em; text-transform: none; }
.mode::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: currentColor; }
.mode.live { background: rgba(226,181,62,.12); color: var(--gold); }
.mode.live::before { box-shadow: 0 0 8px var(--gold); animation: breathe 2.4s ease-in-out infinite; }

/* map and side panels */
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
.grid > * { min-width: 0; }
.board { position: relative; aspect-ratio: 1; max-width: 100%; border-radius: 26px; overflow: hidden; border: 1px solid rgba(226,181,62,.35); box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 60px rgba(226,181,62,.1); background: #3e626e; }
canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.card { position: absolute; pointer-events: none; min-width: 210px; max-width: 260px; padding: 12px 14px; border-radius: 14px; background: rgba(16,21,28,.94); backdrop-filter: blur(8px); border: 1px solid rgba(226,181,62,.45); box-shadow: 0 12px 30px rgba(0,0,0,.55), 0 0 20px rgba(226,181,62,.12); font-size: 14px; line-height: 1.4; color: var(--soft); }
.card b { display: block; color: var(--gold); font: 400 24px/1 var(--display); margin-bottom: 4px; }
.card .where { color: var(--cyan); }
.card .on { color: var(--gold); } .card .off { color: var(--dim); }
.side { display: flex; flex-direction: column; gap: 14px; }
.box { border-radius: 22px; overflow: hidden; background: var(--bg-1); border: 1px solid var(--line); }
.box h2 { margin: 0; padding: 14px 18px 10px; font: 600 11px var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dim); }
.land { background: linear-gradient(180deg, #211912, #1b1510); border-color: #3a2c1e; }
.land h2 { font: 400 28px/1 var(--display); letter-spacing: .02em; text-transform: none; color: var(--gold); padding-top: 16px; }
.land p { margin: 0; padding: 0 18px 16px; font: italic 500 17px/1.45 var(--realm-serif); color: #d9c9a8; min-height: 7.5em; }
.online { list-style: none; margin: 0; padding: 0 8px 10px; max-height: 230px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2a3440 transparent; }
.online li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 0 10px; border-radius: 10px; cursor: pointer; }
.online li:hover, .online li.sel { background: rgba(226,181,62,.1); }
.online li span:first-child { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.online li span:first-child::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 4px; background: var(--gold); box-shadow: 0 0 8px rgba(226,181,62,.7); }
.online li span:last-child { color: var(--gold); font: 12px var(--mono); flex: none; }
.log { padding: 0 18px 14px; height: 270px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; font-size: 14px; line-height: 1.35; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }
.log div { flex: none; color: var(--dim); padding-left: 12px; border-left: 2px solid #2a3440; }
.log .fight { color: var(--text); border-color: var(--rose); } .log .good { color: var(--cyan); border-color: var(--cyan); } .log .bad { color: var(--rose); border-color: var(--rose); } .log .quest { color: var(--gold); border-color: var(--gold); }

.legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.legend span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--bg-1); border: 1px solid var(--line); color: var(--soft); font-size: 13px; }
.legend i { display: inline-block; width: 10px; height: 12px; margin-right: 8px; border: 1px solid #000; }
.legend .k-good { background: #e2b53e; } .legend .k-neutral { background: #b9c2c9; } .legend .k-evil { background: #b8402f; }
.legend .k-off { background: #e4d6b0; clip-path: polygon(50% 0, 100% 100%, 0 100%); border: 0; }
.legend .k-quest { border: 1px dashed var(--gold); border-radius: 50%; height: 10px; }
.legend .k-fight { background: none; border: 0; position: relative; }
.legend .k-fight::before, .legend .k-fight::after { content: ""; position: absolute; left: 4px; top: -1px; width: 2px; height: 13px; background: var(--text); transform: rotate(45deg); }
.legend .k-fight::after { transform: rotate(-45deg); }
.note { margin-top: 12px; font-size: 14px; color: var(--dim); max-width: 72ch; }

/* every hero */
.players { margin-top: 28px; }
.players h2 { padding: 20px 20px 6px; font: 400 40px/1 var(--display); letter-spacing: .01em; text-transform: none; color: var(--gold); text-shadow: 0 0 16px rgba(226,181,62,.3); }
.players h2 .count { margin-left: 12px; font: 13px var(--mono); color: var(--dim); text-shadow: none; }
.ptools { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 10px 20px 16px; }
.ptools #pSearch { flex: 1 1 240px; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; font: 15px var(--ui); color: var(--text); background: var(--bg); border: 1px solid var(--line-2); outline: 0; }
.ptools #pSearch:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(226,181,62,.1); }
.ptools label { color: var(--soft); font-size: 14px; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.ptools input[type="checkbox"] { accent-color: var(--gold); }
.ptable-wrap { overflow-x: auto; max-height: 560px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2a3440 transparent; }
.ptable { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.ptable th { position: sticky; top: 0; background: var(--bg-2); text-align: left; font: 600 11px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); padding: 10px 20px; border-bottom: 1px solid var(--line); }
.ptable td { padding: 9px 20px; border-bottom: 1px solid var(--line); color: var(--soft); white-space: nowrap; }
.ptable td:nth-child(1) { font: 12px var(--mono); color: var(--dim); }
.ptable td:nth-child(4), .ptable td:nth-child(5) { font: 13px var(--mono); }
.ptable td:nth-child(4) { color: var(--gold); }
.ptable .r { text-align: right; }
.ptable tr { cursor: pointer; }
.ptable tr:hover td, .ptable tr.sel td { background: rgba(226,181,62,.06); }
.ptable td:nth-child(2) { color: var(--text); font-weight: 600; }
.ptable tr.on td:nth-child(2) { color: var(--gold); }
.ptable tr.on td:nth-child(6) { color: var(--cyan); }
.ptable .empty { text-align: center; padding: 22px; cursor: default; color: var(--dim); }

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
  .log { height: 200px; }
  .land p { min-height: 0; }
  .stats { width: 100%; }
  .stat { flex: 1; min-width: 0; }
}
@media (max-width: 520px) { .wrap { padding-top: 24px; } .stat b { font-size: 34px; } .stat { padding: 12px; letter-spacing: .08em; } }