:root
{
--bg:#f4f8fc;--ink:#182e48;--muted:#738397;--line:#e1e8f0;--gold:#ad873f;--white:#fff;--blue:#356daa
}

input[type=text] {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  box-sizing: border-box;
  border: 3px solid #000;
  color: #000;
  font-size:25px;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}

.content {
	width: 75%;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.normalcontent
{
	width: 75%;
	margin:0 auto;
	margin-top: 5px;
}

.header
{
	width: 225px;
	position: absolute;
}

.headersup
{
	width: 150px;
	margin: 50px;
	background-color: #ccc;
}

.contentbrowse
{
	width: 100%;
	text-align: center;
}

.searchresults
{
	width: 100%;
	background-color: yellow;
}

.disclaimer
{   
   position:fixed;
   left:0px;
   bottom:0px;
   height:35px;
   width:100%;
   text-align: center;
   font-size: 10px;
}

a:link
{
  color: black;
  background-color: transparent;
  text-decoration: underline;
}
a:visited
{
  color: black;
  background-color: transparent;
  text-decoration: none;
}
a:hover
{
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active
{
  color: black;
  background-color: transparent;
  text-decoration: underline;
}

.categorydiv
{
	float:left;
	border-radius: 7px;
	border:1px solid var(--line);
	padding: 5px; 
	width: 200px;
	height: 20px;
	background-color: #fbfdff;
	text-align: center;
	margin: 5px;
	padding:20px 18px;
	transition:transform .2s,border-color .2s
}

.categorydiv:hover
{
	transform:translateY(-3px);
	border-color:#b2c3d6
}

.topicdiv
{
	float:left;
	border-radius: 25px;
	border: 2px solid #04AA6D;
	padding: 20px; 
	width: 200px;
	height: 20px;  
	text-align: center;
	margin: 5px;
}

.divrow
{
	height:50px;
}

*
{
	font-family:Georgia,serif;
	font-size:15px;
}

body
{
	background-color: #f4f8fc;
}
p, label, b, small
{
	background-color: #f4f8fc;
}

button,input,select
{
font:inherit
}
button,a,select
{
-webkit-tap-highlight-color:transparent
}
button
{
cursor:pointer;color:inherit
}
button:focus-visible,a:focus-visible,select:focus-visible
{
outline:2px solid #5685b4;outline-offset:3px
}


.sr
{
background:#fbfdff;
border:1px solid var(--line);
border-radius:7px;
display:flex;align-items:center;padding:10px 18px;gap:14px;text-align:left;transition:transform .2s,border-color .2s;
width: 100%;
	
}

.sr:hover
{
transform:translateY(-3px);border-color:#b2c3d6
}

.category:hover
{
transform:translateY(-3px);border-color:#b2c3d6
}


.categories
{
display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:2px 0 39px
}

.category
{
background:#fbfdff;border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;padding:20px 18px;gap:14px;text-align:left;transition:transform .2s,border-color .2s
}
.category:hover
{
transform:translateY(-3px);border-color:#b2c3d6
}
.category-icon
{
font-size:28px;width:41px;height:43px;border-radius:8px;display:grid;place-items:center;flex-shrink:0
}
.topictext
{
	background:#fbfdff;
	border:1px solid var(--line);
	border-radius:7px;
	align-items:center;
	padding:20px 18px;gap:14px;
	text-align:left;
}
.search-section
{
margin-top:31px
}
.searchbox
{
display:flex;align-items:center;gap:15px;background:white;border:1px solid #d4dfea;border-radius:8px;padding:18px 21px;box-shadow:0 5px 15px #233e5c04;color:#8193a8
}
.searchbox:focus-within
{
border-color:#7e9bbb;box-shadow:0 0 0 3px #356daa10
}
.searchbox input
{
outline:0;border:0;width:100%;color:var(--ink);font-size:15px; background-color:#fff;
}
.searchbox input::placeholder
{
color:#8b9aae
}
.searchbox kbd
{
padding:2px 8px;font-size:12px;background-color: #fff
}
.search-hints
{
display:flex;gap:10px;align-items:center;margin-top:25px; margin-left: 50px;font-size:16px;letter-spacing:1px;color:#93a0ae;
}
.search-hints button
{
border:0;background:#eaf0f6;border-radius:4px;font-size:11px;padding:5px 9px;color:#738398;letter-spacing:0
}

.category div
{
display:flex;
align-items:center;gap:15px;flex-wrap:wrap; background-color: #fbfdff
}

.category small
{
margin:0
}
.arrow
{
margin-left:auto;color:#96a5b5;font-size:18px;background-color: #fbfdff
}

.logintext
{
	text-align: right;
	position: float;
}

.test
{
	background-color: purple;
	width: 75%;
	margin:0 auto;
}

.muo-equipment-container
{
	width: 300px;
	border: 1px solid #000;
	background-color: purple;
	text-align: center;
}

.muo-equipment-itemname
{
	
}

   .map-app {
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
    }

    /* Details stay beside the map on wider screens. */
    .map-layout {
      display: grid;
      grid-template-columns: minmax(220px, 260px) minmax(0, 500px);
      align-items: start;
      justify-content: center;
      gap: 16px;
    }

    .map-main {
      min-width: 0;
    }

    .map-toolbar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .map-toolbar button {
      width: 40px;
      height: 36px;
      border: 1px solid #bbb;
      border-radius: 5px;
      background: #f5f5f5;
      font-size: 22px;
      cursor: pointer;
    }

    .map-toolbar button:hover { background: #e5e5e5; }
    .map-toolbar button:disabled { opacity: .45; cursor: default; }

    .map-toolbar .toolbar-action {
      width: auto;
      padding: 0 10px;
      font-size: 13px;
      white-space: nowrap;
    }

    #zoomLevel {
      min-width: 55px;
      text-align: center;
      font-size: 14px;
    }

    /* Fixed viewing window. The map itself is never fitted to this frame. */
    #mapViewport {
      position: relative;
      width: 500px;
      height: 500px;
      max-width: 100%;
      margin: 0;
      overflow: hidden;
      border: 1px solid #888;
      background: #e9e9e9;
      cursor: grab;
      touch-action: none;
      user-select: none;
    }

    #mapViewport.dragging { cursor: grabbing; }

    /*
      Only the image is transformed. Markers are rendered in a separate
      overlay and repositioned by JavaScript, so their text and borders
      are not raster-scaled and remain crisp.
    */
    #mapImage {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: auto;
      height: auto;
      max-width: none;
      max-height: none;
      transform-origin: top left;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    #markerLayer {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .marker {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--size, 32px);
      height: var(--size, 32px);
      padding: 0;
      border: 2px solid #fff;
      border-radius: 50%;
      color: #fff;
      font: bold 13px/1 Arial, sans-serif;
      text-align: center;
      box-shadow: 0 1px 5px #0008;
      cursor: pointer;
      pointer-events: auto;
      transform: translate(-50%, -50%);
      touch-action: manipulation;
    }

    .marker.selected {
      outline: 3px solid #ffdf35;
      outline-offset: 2px;
      z-index: 2;
    }

    .marker.hidden { display: none; }

    .filter-all {
      display: flex;
      align-items: center;
      gap: 5px;
      padding-right: 12px;
      border-right: 1px solid #ddd;
      font-size: 14px;
      cursor: pointer;
    }

    .map-filters {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      margin: 15px 0;
    }

    .map-filters label {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 14px;
      cursor: pointer;
    }

    .filter-dot {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }

    #details {
      min-height: 500px;
      max-height: 650px;
      overflow-y: auto;
      padding: 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background: #fafafa;
      overflow-wrap: anywhere;
    }

    #details h3 { margin: 0 0 10px; }
    .detail-row { margin: 7px 0; line-height: 1.45; }
    .detail-label { font-weight: 600; }
    .detail-list { margin: 5px 0 8px 18px; padding: 0; }
    .detail-object { margin: 5px 0 8px 12px; padding-left: 10px; border-left: 2px solid #ddd; }
    .detail-image { display: block; max-width: min(100%, 320px); max-height: 240px; object-fit: contain; margin-top: 8px; border: 1px solid #ddd; border-radius: 4px; }
    .details-meta { margin-bottom: 12px; color: #555; font-size: 13px; }

    /* Optional monster list for locations where roaming monsters are known. */
    .monster-list { display: grid; gap: 10px; margin-top: 8px; }
    .monster-entry {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 9px;
      border: 1px solid #ddd;
      border-radius: 5px;
      background: #fff;
    }
    .monster-entry-image {
      flex: 0 0 76px;
      width: 76px;
      height: 76px;
      object-fit: contain;
      border: 1px solid #e3e3e3;
      border-radius: 4px;
      background: #f5f5f5;
    }
    .monster-entry-content { min-width: 0; }
    .monster-entry-name { margin: 0 0 4px; font-weight: 700; }
    .monster-entry-meta { margin-bottom: 4px; color: #555; font-size: 12px; }
    .monster-entry-description { font-size: 13px; line-height: 1.4; }
    .monster-entry-image-fallback {
      flex: 0 0 76px;
      width: 76px;
      min-height: 56px;
      display: grid;
      place-items: center;
      padding: 4px;
      border: 1px dashed #bbb;
      border-radius: 4px;
      color: #777;
      font-size: 11px;
      text-align: center;
    }

    @media (max-width: 780px) {
      .map-layout {
        grid-template-columns: minmax(0, 500px);
      }

      #details {
        min-height: 80px;
        max-height: none;
        margin-top: 15px;
      }
    }

    @media (max-width: 520px) {
      body { margin: 10px; }
      .map-toolbar { flex-wrap: wrap; }
      #mapViewport {
        width: 100%;
        height: min(500px, 90vw);
      }
    }