/* Jonestown — an original interface in the spirit of classic 2007-era MMO game UIs:
   carved brown stone frames, yellow/orange pixel text with hard black shadows,
   an inventory grid and a parchment chatbox. All drawn in CSS; no game assets. */
@font-face { font-family: "Tiny5"; src: url("tiny5.woff2") format("woff2"); font-display: swap; } /* clear 2/5/8, plain capitals */

:root {
  --stone: #3e3529;
  --stone-dk: #2b241b;
  --stone-lt: #5c4f3d;
  --edge: #0e0b07;
  --yellow: #ffff00;
  --orange: #ff981f;
  --white: #ffffff;
  --red: #ff3030;
  --cyan: #00ffff;
  --parch: #cdbf95;
  --parch-dk: #a8976a;
  --chat-blue: #0000ff;
  --pixel: "Tiny5", "Courier New", monospace;
  --shadow: 1px 1px 0 #000;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  font: 16px/1.35 var(--pixel); color: var(--white); text-shadow: var(--shadow);
  -webkit-font-smoothing: none; font-smooth: never; font-variant-ligatures: none; font-synthesis: none; /* single-weight pixel font: no fake bold */
  padding: 18px 12px 12px;
}
/* worn flagstones on <html>, so a member's background image (z-index -1) can sit above it */
html {
  background-color: #151109;
  background:
    radial-gradient(ellipse at 50% 35%, transparent 30%, rgba(0,0,0,.65) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 2px, transparent 2px 48px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 2px, transparent 2px 64px),
    linear-gradient(135deg, #2a2219, #1a150e 60%, #231c14);
  background-attachment: fixed;
}
::selection { background: var(--orange); color: #000; text-shadow: none; }
a { color: var(--cyan); }
.y { color: var(--yellow); } .o { color: var(--orange); } .w { color: var(--white); } .r { color: var(--red); }
.dim { color: #b9a98a; } .small { font-size: 13px; }
.big { font-size: 24px; margin: 0 0 6px; font-weight: 700; }

/* user background image, dimmed so the interface stays readable */
.bgimg { position: fixed; inset: 0; z-index: -1; }
.bgimg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.45) saturate(.9); }

/* ---------- carved stone frame ---------- */
.frame {
  position: relative; background: var(--stone);
  border: 2px solid var(--edge);
  box-shadow:
    inset 2px 2px 0 var(--stone-lt), inset -2px -2px 0 var(--stone-dk),
    inset 0 0 0 4px #4a3f30, inset 0 0 0 5px var(--edge),
    0 6px 18px rgba(0,0,0,.6);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.035) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,.12) 0 1px, transparent 2px);
  background-size: 7px 7px, 11px 11px;
}

/* stone button, pressed when active */
.stone {
  display: inline-flex; align-items: center; justify-content: center; min-width: 130px;
  font: 700 15px var(--pixel); color: var(--orange); text-shadow: var(--shadow); text-decoration: none;
  background: linear-gradient(#5a4c39, #3f3427); border: 2px solid var(--edge); padding: 8px 14px; cursor: pointer;
  box-shadow: inset 2px 2px 0 #7a6850, inset -2px -2px 0 #2a2219;
  transition: color .15s ease, filter .2s ease;
}
.stone:hover { color: var(--yellow); filter: brightness(1.12); }
.stone:active { box-shadow: inset -2px -2px 0 #7a6850, inset 2px 2px 0 #2a2219; transform: translateY(1px); }
.stone:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* ---------- home / not found ---------- */
.login { flex: 1; display: grid; place-items: center; width: 100%; }
.login-box { width: min(100%, 440px); padding: 26px 24px 20px; text-align: center; }
.login-box p { margin: 0 0 14px; }
.lookup { margin: 16px 0 6px; }
.lookup label { display: block; margin-bottom: 6px; }
.lookup-row { display: flex; gap: 8px; justify-content: center; }
.lookup input {
  width: 100%; max-width: 220px; font: 16px var(--pixel); color: var(--yellow); text-shadow: var(--shadow);
  background: #1d1810; border: 2px solid var(--edge); box-shadow: inset 2px 2px 0 #0b0905; padding: 7px 10px; outline: none;
}
.lookup input:focus { border-color: var(--orange); }
.lookup input::placeholder { color: #6d5f48; }
.lookup .stone { min-width: 0; }
.login-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }

/* ---------- player page ---------- */
.game {
  width: min(100%, 860px); display: grid; gap: 8px;
  grid-template-columns: minmax(0, 1fr) 236px;
  grid-template-areas: "view side" "chat side";
}
.viewport { grid-area: view; min-height: 330px; padding: 8px; overflow: hidden; }
.side { grid-area: side; padding: 8px; }
.chat { grid-area: chat; padding: 6px; }

/* top-left action text, like the game's mouse-over text */
.hover { position: absolute; left: 10px; top: 8px; z-index: 2; font-size: 15px; color: var(--white); pointer-events: none; white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; }
.hover .act { color: var(--white); } .hover .tgt { color: var(--cyan); } .hover .more { color: var(--white); }

.scene {
  height: 100%; min-height: 310px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: radial-gradient(ellipse at 50% 70%, rgba(0,0,0,.25), rgba(0,0,0,.55)),
              linear-gradient(#3b4a2c, #2c3a20 60%, #24301b);
  border: 2px solid var(--edge); box-shadow: inset 0 0 40px rgba(0,0,0,.6);
  padding: 34px 12px 18px; text-align: center;
}
.has-bg .scene { background: rgba(0,0,0,.25); }
.overhead { margin: 0 0 6px; color: var(--yellow); font-size: 16px; max-width: 90%; overflow-wrap: anywhere; animation: overhead 6s steps(1) infinite; }
@keyframes overhead { 0%, 82% { opacity: 1; } 83%, 100% { opacity: 0; } }
.avatar {
  width: 132px; height: 132px; display: grid; place-items: center; cursor: pointer;
  background: #1d1810; border: 2px solid var(--edge); box-shadow: inset 2px 2px 0 #0b0905, 0 0 0 2px #5c4f3d;
  animation: idle 2.4s ease-in-out infinite;
}
@keyframes idle { 50% { transform: translateY(-3px); } }
.avatar img { width: 120px; height: 120px; object-fit: cover; image-rendering: auto; }
.noavatar { font-size: 64px; color: var(--orange); }
.name { margin: 10px 0 0; font-size: 26px; font-weight: 700; color: var(--yellow); overflow-wrap: anywhere; }
.tag { margin: 0; color: var(--orange); }
.crown { color: var(--yellow); }

/* side panel */
.tabs { display: flex; gap: 2px; margin-bottom: 6px; }
.tab { flex: 1; text-align: center; font-size: 13px; color: var(--orange); padding: 3px 0; background: var(--stone-dk); border: 2px solid var(--edge); box-shadow: inset 1px 1px 0 var(--stone-lt); }
.tab.on { background: #6b2a1d; color: var(--yellow); box-shadow: inset 1px 1px 0 #93412f; }
.stats { margin: 0 0 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.stats > div { background: var(--stone-dk); border: 2px solid var(--edge); padding: 4px 6px; box-shadow: inset 1px 1px 0 #4a3f30; }
.stats .wide { grid-column: 1 / -1; }
.stats dt { color: var(--orange); font-size: 12px; }
.stats dd { margin: 0; color: var(--yellow); font-size: 15px; overflow-wrap: anywhere; }

/* inventory: 4 columns of slots */
.inv { list-style: none; margin: 0; padding: 6px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: #2f281e; border: 2px solid var(--edge); box-shadow: inset 2px 2px 0 #1e1912; }
.slot { display: grid; place-items: center; aspect-ratio: 1; min-height: 44px; position: relative; text-decoration: none; }
.slot.item { color: var(--white); }
.slot .glyph {
  font-size: 18px; font-weight: 700; color: var(--yellow);
  width: 34px; height: 30px; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #c9a24b, #8a6a22 60%, #4d3a11);
  border: 2px solid #000; text-shadow: 1px 1px 0 #000, -1px 0 0 #000;
  transition: transform .15s ease, filter .15s ease;
}
.slot .lbl { position: absolute; left: 0; right: 0; bottom: -2px; font-size: 10px; text-align: center; color: var(--yellow); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.slot.item:hover .glyph, .slot.item:focus-visible .glyph { transform: translateY(-2px); filter: brightness(1.25); }
.slot.item:focus-visible { outline: 1px solid var(--yellow); }
.slot.item:active .glyph { transform: scale(.92); }

/* chatbox */
.chat-lines {
  height: 132px; overflow-y: auto; padding: 6px 8px; text-shadow: none; color: #000;
  background: linear-gradient(var(--parch), #c2b285); border: 2px solid var(--edge); box-shadow: inset 2px 2px 0 var(--parch-dk);
}
.chat-lines p { margin: 0 0 2px; font-size: 15px; overflow-wrap: anywhere; }
.chat-lines .who { color: #000; }
.chat-lines .said { color: var(--chat-blue); }
.chat-lines .sys { color: #000; }
.chat-input { font-size: 15px; color: #000; text-shadow: none; background: var(--parch); border: 2px solid var(--edge); border-top: 0; padding: 3px 8px; }
.chat-input .star { color: var(--chat-blue); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.chat-tabs { display: flex; gap: 2px; margin-top: 4px; }
.chat-tabs span { flex: 1; text-align: center; font-size: 12px; color: var(--orange); background: var(--stone-dk); border: 2px solid var(--edge); padding: 2px 0; box-shadow: inset 1px 1px 0 var(--stone-lt); }
.chat-tabs .on { color: var(--white); background: #6b2a1d; }

.foot { margin-top: 14px; font-size: 13px; color: #b9a98a; text-align: center; }
.foot a { color: var(--orange); text-decoration: none; }
.foot a:hover { color: var(--yellow); }

/* click markers: yellow on the ground, red on something you can use */
.xmark { position: fixed; z-index: 99; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none; animation: xmark .4s steps(4) forwards; }
.xmark::before, .xmark::after { content: ""; position: absolute; left: 6px; top: -1px; width: 3px; height: 16px; background: var(--yellow); box-shadow: 1px 1px 0 #000; }
.xmark::before { transform: rotate(45deg); } .xmark::after { transform: rotate(-45deg); }
.xmark.red::before, .xmark.red::after { background: var(--red); }
@keyframes xmark { from { transform: scale(1); } to { transform: scale(.25); opacity: .2; } }

@media (max-width: 700px) {
  .game { grid-template-columns: 1fr; grid-template-areas: "view" "side" "chat"; }
  .side { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .avatar, .overhead, .chat-input .star, .xmark { animation: none; }
}

/* ======================================================================
   accounts: top bar, notices, forms, editor, badges
   ====================================================================== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.topbar { width: min(100%, 860px); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 10px; }
.brand { font-size: 20px; font-weight: 700; text-decoration: none; }
.brand:hover { color: var(--yellow); }
.topnav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.topnav form { margin: 0; }
.stone.sm { min-width: 0; padding: 4px 10px; font-size: 13px; }

/* notices look like game messages: black on parchment, red for problems */
.gamemsg { width: min(100%, 860px); margin: 0 0 10px; padding: 6px 10px; font-size: 15px; text-shadow: none;
  background: var(--parch); color: #000; border: 2px solid var(--edge); box-shadow: inset 2px 2px 0 var(--parch-dk); }
.gamemsg.err { color: #b00000; }

/* login-screen forms */
.login-box.form { text-align: left; }
.login-box.form .big, .login-box.form > p.w { text-align: center; }
.login-box .row { display: grid; grid-template-columns: 9.5em 1fr; align-items: center; gap: 8px; margin: 8px 0; }
.login-box .small, .login-box .hint { text-align: center; }
.hint { color: #b9a98a; font-size: 13px; margin: 2px 0 8px; }
.login-box input, .edit-box input:not([type]), .edit-box input[type=text], .edit-box textarea, .login-box input[type=password] {
  width: 100%; font: 16px var(--pixel); color: var(--yellow); text-shadow: var(--shadow); font-variant-ligatures: none;
  background: #1d1810; border: 2px solid var(--edge); box-shadow: inset 2px 2px 0 #0b0905; padding: 6px 8px; outline: none;
}
.login-box input:focus, .edit-box input:focus, .edit-box textarea:focus { border-color: var(--orange); }
.login-box input::placeholder, .edit-box input::placeholder, .edit-box textarea::placeholder { color: #6d5f48; }
.edit-box textarea { resize: vertical; color: #fff; }

/* checkboxes: a little stone toggle with a red/green state like a prayer switch */
.chk { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.chk input { appearance: none; width: 18px; height: 18px; margin: 0; cursor: pointer; background: #1d1810; border: 2px solid var(--edge); box-shadow: inset 1px 1px 0 #0b0905; }
.chk input:checked { background: radial-gradient(circle, #6cff3a 0 3px, #2c8a12 4px, #1d4d0c 100%); }
.chk input:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

input[type=file] { font: 13px var(--pixel); color: #b9a98a; max-width: 100%; text-shadow: none; }
input[type=file]::file-selector-button { font: 700 13px var(--pixel); color: var(--orange); background: linear-gradient(#5a4c39, #3f3427); border: 2px solid var(--edge); box-shadow: inset 2px 2px 0 #7a6850, inset -2px -2px 0 #2a2219; padding: 3px 10px; margin-right: 8px; cursor: pointer; }
input[type=file]::file-selector-button:hover { color: var(--yellow); }

/* editor */
.editor { width: min(100%, 860px); flex: 1; }
.edit-box { padding: 16px 18px; }
.edit-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.panelset { margin: 12px 0 0; padding: 10px 12px 12px; border: 2px solid var(--edge); background: rgba(0,0,0,.18); box-shadow: inset 1px 1px 0 var(--stone-lt); }
.panelset legend { padding: 0 6px; font-weight: 700; }
.panelset .row { display: grid; grid-template-columns: 9em 1fr; align-items: center; gap: 8px; margin: 6px 0; }
.panelset .stack { display: grid; gap: 4px; margin: 6px 0 0; }
.img-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.img-field { display: grid; gap: 6px; align-content: start; }
.img-prev { display: block; max-width: 100%; max-height: 110px; border: 2px solid var(--edge); box-shadow: 0 0 0 2px var(--stone-lt); }
.img-prev.avatar { width: 80px; height: 80px; object-fit: cover; }
.link-rows { display: grid; gap: 6px; }
.link-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 6px; }
.edit-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* badges: little carved crests under the name */
.badges { list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pbadge {
  width: 30px; height: 30px; display: inline-grid; place-items: center; cursor: default; position: relative;
  font: 700 16px/1 "Segoe UI Symbol", "Noto Sans Symbols 2", var(--pixel); color: var(--yellow);
  background: radial-gradient(circle at 35% 30%, #6b5a42, #3a3024 70%); border: 2px solid var(--edge);
  box-shadow: inset 1px 1px 0 #8a7556, inset -1px -1px 0 #1d1810; transition: transform .15s ease, filter .15s ease;
}
.pbadge:hover { transform: translateY(-2px); filter: brightness(1.2); }
.pbadge.sm { width: 22px; height: 22px; font-size: 12px; vertical-align: middle; }
.b-owner { color: #ffd700; background: radial-gradient(circle at 35% 30%, #7a5c12, #3d2c07 70%); }
.b-admin { color: #ff5a3a; }
.b-recruiter { color: var(--cyan); }
.b-early { color: #c18cff; }
.b-popular { color: #ffb000; }
.b-verified { color: #5cff5c; }
.b-developer { color: #9ad0ff; }
.b-donator { color: #00ffd0; }
.b-friend { color: #ff7ab8; }
.b-bughunter { color: #ff3030; }
.edit-own { margin-top: 10px; }

/* member background inside the game view */
.scene { position: relative; overflow: hidden; }
.scene > *:not(.scene-bg) { position: relative; z-index: 1; }
.scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: brightness(.8); }
.scene.with-bg { background: #000; }
.scene.with-bg::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 50% 55%, transparent 35%, rgba(0,0,0,.55)); pointer-events: none; }

@media (max-width: 560px) {
  .login-box .row, .panelset .row { grid-template-columns: 1fr; gap: 4px; }
  .img-grid, .link-row { grid-template-columns: 1fr; }
}

/* ======================================================================
   admin panel, page links and custom badges
   ====================================================================== */
.slug-row { display: flex; align-items: center; gap: 4px; }
.slug-row input { flex: 1; min-width: 0; }
.left { justify-content: flex-start !important; text-align: left !important; }
.stone.danger { color: #ff6a4a; }
.stone.danger:hover { color: var(--red); }

/* hiscores-style tables */
.tablewrap { overflow-x: auto; background: #1d1810; border: 2px solid var(--edge); box-shadow: inset 2px 2px 0 #0b0905; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: left; color: var(--orange); padding: 6px 8px; background: var(--stone-dk); border-bottom: 2px solid var(--edge); white-space: nowrap; }
.tbl td { padding: 5px 8px; border-bottom: 1px solid #2f281e; white-space: nowrap; vertical-align: middle; }
.tbl tbody tr:nth-child(even) { background: rgba(255,255,255,.025); }
.tbl tbody tr:hover { background: rgba(255,152,31,.08); }
.tbl tr.off td { opacity: .55; }
.mini-badges { display: flex; gap: 3px; flex-wrap: wrap; }

/* badge catalogue */
.badge-cat { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.badge-cat li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; background: #2f281e; border: 2px solid var(--edge); box-shadow: inset 1px 1px 0 #4a3f30; }
.bc-text { display: grid; min-width: 0; }
.bc-act { display: flex; gap: 6px; align-items: center; }
.bc-act form { margin: 0; }

/* badge crest images */
.pbadge img { width: 22px; height: 22px; object-fit: contain; image-rendering: auto; }
.pbadge.sm img { width: 16px; height: 16px; }

/* custom badge colours (glyph colour + a tinted crest) */
.c-gold { color: #ffd700; } .c-yellow { color: #ffff00; } .c-orange { color: #ff981f; } .c-red { color: #ff3b3b; }
.c-green { color: #3cff3c; } .c-cyan { color: #00ffff; } .c-blue { color: #6aa8ff; } .c-purple { color: #c18cff; }
.c-pink { color: #ff7ab8; } .c-white { color: #ffffff; } .c-silver { color: #c8c8c8; }
.pbadge.c-gold { background: radial-gradient(circle at 35% 30%, #7a5c12, #3d2c07 70%); }
.pbadge.c-red { background: radial-gradient(circle at 35% 30%, #6b2a1d, #351009 70%); }
.pbadge.c-green { background: radial-gradient(circle at 35% 30%, #2f5a1d, #15300b 70%); }
.pbadge.c-blue, .pbadge.c-cyan { background: radial-gradient(circle at 35% 30%, #1f3f5c, #0d1f30 70%); }
.pbadge.c-purple, .pbadge.c-pink { background: radial-gradient(circle at 35% 30%, #4a2a5c, #22102e 70%); }

/* premade icon picker */
.icon-mode { display: flex; gap: 16px; flex-wrap: wrap; }
.chk input[type=radio] { width: 16px; height: 16px; }
.glyph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; margin: 8px 0 10px; padding: 6px; background: #1d1810; border: 2px solid var(--edge); box-shadow: inset 2px 2px 0 #0b0905; }
.glyph-pick { position: relative; display: grid; place-items: center; aspect-ratio: 1; cursor: pointer; font: 700 20px/1 "Segoe UI Symbol", "Noto Sans Symbols 2", var(--pixel);
  background: var(--stone-dk); border: 2px solid var(--edge); box-shadow: inset 1px 1px 0 var(--stone-lt); transition: filter .15s ease, transform .15s ease; }
.glyph-pick:hover { filter: brightness(1.25); transform: translateY(-1px); }
.glyph-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.glyph-pick:has(input:checked) { background: var(--tab-red, #6b2a1d); box-shadow: inset 1px 1px 0 #93412f, 0 0 0 2px var(--yellow); }
.glyph-pick:has(input:focus-visible) { outline: 2px solid var(--yellow); outline-offset: 2px; }
.img-upload { margin: 8px 0 10px; display: grid; gap: 6px; justify-items: start; }

/* colour swatches */
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch { position: relative; width: 26px; height: 26px; cursor: pointer; border: 2px solid var(--edge); box-shadow: inset 1px 1px 0 rgba(255,255,255,.35); transition: transform .15s ease; }
.swatch:hover { transform: translateY(-1px); }
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--yellow), inset 1px 1px 0 rgba(255,255,255,.35); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--yellow); outline-offset: 2px; }
.sw-gold { background: #ffd700; } .sw-yellow { background: #ffff00; } .sw-orange { background: #ff981f; } .sw-red { background: #ff3b3b; }
.sw-green { background: #3cff3c; } .sw-cyan { background: #00ffff; } .sw-blue { background: #6aa8ff; } .sw-purple { background: #c18cff; }
.sw-pink { background: #ff7ab8; } .sw-white { background: #ffffff; } .sw-silver { background: #c8c8c8; }

@media (max-width: 560px) {
  .badge-cat li { grid-template-columns: auto 1fr; }
  .bc-act { grid-column: 1 / -1; }
}

[hidden] { display: none !important; }