/* MapleVerse companion site — v16 "Portal × Toybox" redesign.
   2005 fan-portal layout wearing a candy-cartoon skin: tiled sky wallpaper,
   cream shell, thick dark outlines, rounded cards, fat left-nav pills,
   Jua/Fredoka display type, news ticker, bouncy sprites.
   All selector contracts from v15 are preserved (rank.js / online.js /
   news.js / forum PHP untouched). Game art served locally from assets/. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #3f7fd6;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 14px, rgba(0,0,0,.03) 14px 28px);
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 12px;
  color: #4a4560;
}
a { color: #f2711c; text-decoration: none; }
a:hover { color: #d85a10; text-decoration: underline; }

#page {
  max-width: 1080px;
  margin: 14px auto 26px;
  background: #fbf7ec;
  border: 3px solid #2c2648;
  border-radius: 18px;
  box-shadow: 0 8px 0 rgba(44,38,72,.28), 0 18px 40px rgba(0,0,0,.25);
  overflow: hidden;
}

/* ── Top bar ──────────────────────────────────────────────────────── */
#topbar {
  background: #2f9fe0;
  border-bottom: 3px solid #2c2648;
  height: auto;
  text-align: right;
  padding: 6px 14px;
}
#topbar a {
  color: #fff; font: 600 10px Fredoka, Verdana, sans-serif;
  letter-spacing: 1px; margin-left: 14px;
}
#topbar a:hover { color: #ffe9a8; text-decoration: none; }

/* ── News ticker (new in v16) ─────────────────────────────────────── */
#ticker {
  height: 42px;
  background: linear-gradient(180deg, #ffd23f, #ffab2e);
  border-bottom: 3px solid #2c2648;
  display: flex; align-items: stretch; overflow: hidden;
}
#ticker .ticker-tag {
  flex: 0 0 auto; display: flex; align-items: center;
  background: #ff5aa0; color: #fff;
  font: 700 12px Fredoka, Verdana, sans-serif; letter-spacing: 1px;
  padding: 0 13px; border-right: 3px solid #2c2648;
  text-shadow: 1px 1px 0 #9c2c63; z-index: 1;
}
#ticker .ticker-viewport { flex: 1; overflow: hidden; white-space: nowrap; display: flex; align-items: center; }
#ticker .ticker-track {
  display: inline-block; width: max-content; white-space: nowrap;
  will-change: transform; transform: translateX(0);
  color: #5a3a00; font: 700 13px Fredoka, Verdana, sans-serif;
}
#ticker .ticker-track > span { padding: 0 24px; }
/* The crawl is driven by requestAnimationFrame in index.html, NOT a CSS
   animation: a CSS keyframe animation is frozen by the compositor whenever the
   viewer has "reduce motion" enabled, which left the ticker stationary. rAF
   keeps the headline crawl moving for everyone (it's the site's news feed). */
@keyframes mv-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) {
  .grass img { animation: none !important; }
}

/* ── Banner ───────────────────────────────────────────────────────── */
#banner {
  position: relative;
  height: 264px;
  background-color: #7ab8f0;
  /* Static fallback shown before hero.js runs (or if it can't): amherst.png at
     `cover` so it fills the FULL header width with no seam (the old `auto 300px`
     rendered it only ~673px wide on a ~1074px header — the hard cutoff). Once
     hero.js initializes the live map, #hero-canvas is painted over this. */
  background-image:
    url("assets/map/amherst.png"),
    linear-gradient(180deg, #7ab8f0 0%, #a9d6f5 55%, #cdeafc 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center bottom, top left;
  background-size: cover, 100% 100%;
  overflow: hidden;
  border-bottom: 0;
}
/* Live map header canvas (hero.js). Fills the banner, sits under the logo/chip. */
#hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
}
#banner.hero-live { cursor: pointer; }
/* Once the canvas scene is live it draws its own ground + characters, so the
   static grass strip, its bobbing mob gifs and the NPC greeter are hidden — but
   the "players online" chip stays (it just floats over the canvas ground). */
#banner.hero-live .grass { background: none; border-top: 0; }
#banner.hero-live .grass img { display: none; }
.clouds { display: none; } /* v16: real cloud art tiles in the banner bg */
.grass {
  position: absolute; left: 0; right: 0; bottom: 0; height: 36px;
  background: linear-gradient(180deg, #93df5f 0%, #63ad36 45%, #4e9a2e 100%);
  border-top: 4px solid #2c2648;
  z-index: 1;
}
.grass img {
  position: absolute; bottom: 3px;
  image-rendering: pixelated; pointer-events: none;
  animation: mv-bob 2.6s ease-in-out infinite;
}
.grass .m1 { right: 24px; animation-delay: .3s; }
.grass .m2 { right: 96px; animation-delay: .1s; }
.grass .m3 { right: 196px; animation-delay: .5s; }
.grass .m4 { right: 288px; animation-delay: .7s; }
.grass .m5 { right: 356px; animation-delay: .2s; }
.grass .m6 { right: 430px; animation-delay: .9s; }
.grass .npcgreet { left: 150px; bottom: 2px; }

/* Logo — bubbly Jua wordmark with a thick outline. */
#logo { position: absolute; left: 22px; top: 22px; transform: none; z-index: 2; }
#logo a { text-decoration: none; display: inline-flex; flex-direction: column; align-items: center; }
/* Real MAPLEVERSE shield wordmark (transparent PNG). */
#logo .logoimg {
  height: 104px; width: auto; display: block;
  filter: drop-shadow(2px 4px 7px rgba(0,0,0,.42));
}
#logo .logosub {
  display: block; width: max-content; margin: 4px 0 0;
  padding: 4px 12px;
  background: #fff; border: 2.5px solid #2c2648;
  border-radius: 12px;
  color: #2c2648; font: 600 11px Fredoka, Verdana, sans-serif;
  letter-spacing: 1px; text-transform: none;
  box-shadow: 0 3px 0 rgba(44,38,72,.25);
  text-shadow: none;
}

/* Players-online chip on the grass. */
.online-chip {
  position: absolute; left: 14px; bottom: 8px; z-index: 3;
  background: #fff; border: 3px solid #2c2648; border-radius: 13px;
  padding: 3px 12px; font: 700 11px Fredoka, Verdana, sans-serif; color: #2e8a1e;
  box-shadow: 0 2px 0 rgba(44,38,72,.25);
}
.online-chip .dotg { color: #3cba2c; }

/* ── Columns ──────────────────────────────────────────────────────── */
#cols { display: flex; align-items: flex-start; gap: 16px; padding: 16px; }
#side { width: 216px; flex: 0 0 216px; padding: 0; background: none; border: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
#main { flex: 1; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
#main > * { margin: 0 !important; }

/* Main nav — fat candy pills in the sidebar; PLAY floats to the top. */
#mainnav {
  position: static; height: auto; background: none; border: 0; box-shadow: none;
  display: flex; flex-direction: column; gap: 11px;
  font-weight: 600; font-size: 13px; letter-spacing: 1px;
}
#mainnav::before, #mainnav::after { content: none; }
#mainnav .dot { display: none; }
#mainnav a {
  display: block; text-align: center; text-decoration: none;
  padding: 11px 14px; border-radius: 15px;
  border: 3px solid #2c2648;
  color: #fff; font-family: Fredoka, Verdana, sans-serif;
  text-shadow: 1px 1px 0 rgba(44,38,72,.35);
  box-shadow: 0 4px 0 rgba(44,38,72,.28);
  position: relative;
}
#mainnav a:hover { text-decoration: none; filter: brightness(1.07); transform: translateY(-1px); }
#mainnav a:not(.play)::after { content: none; }
#mainnav a:nth-of-type(1) { background: linear-gradient(180deg, #ffe066, #ffc12e); color: #5a3a00; text-shadow: none; }   /* NEWS */
#mainnav a:nth-of-type(2) { background: linear-gradient(180deg, #ff9dc0, #ff5f9c); }                                       /* GUIDE */
#mainnav a:nth-of-type(3) { background: linear-gradient(180deg, #7fd0f7, #2f9fe0); }                                       /* RANKING */
#mainnav a:nth-of-type(4) { background: linear-gradient(180deg, #c79bef, #a06cd6); }                                       /* FORUM */
/* Teal, not green — PLAY directly below it is green, and two greens stacked
   read as one block. */
#mainnav a:nth-of-type(5) { background: linear-gradient(180deg, #63dcd0, #21a99b); }                                       /* SUGGEST */
/* Orange — the sheet's existing accent gradient (scroll-rod :205, .btn-archive
   :251, feature heads :325, :566). The one warm hue not already spoken for, and
   far enough from the yellow NEWS pill to read as a separate button. PLAY needs
   no positional rule: it is nth-of-type(7) now and takes its green from
   #mainnav a.play below. */
#mainnav a:nth-of-type(6) { background: linear-gradient(180deg, #ffb163, #f2801c); }                                       /* REPORT BUG */
#mainnav a.active { outline: 3px solid #ffd23f; outline-offset: 2px; }
#mainnav a.play {
  order: -1;
  margin-left: 0; padding: 15px 14px;
  background: linear-gradient(180deg, #a6ea5e, #5fb02f);
  border: 3px solid #2c2648; border-radius: 18px;
  color: #fff; font: 400 20px Jua, Fredoka, sans-serif; letter-spacing: 1px;
  text-shadow: 2px 2px 0 rgba(44,38,72,.4);
  box-shadow: 0 5px 0 rgba(44,38,72,.3);
}
#mainnav a.play::before { content: "▶ "; }
#mainnav a.play:hover { background: linear-gradient(180deg, #b4f470, #6cc03a); color: #fff; }

/* Sidebar: login / launch box (old parchment scroll markup, candy chrome). */
.scrollbox {
  margin-bottom: 0;
  border: 3px solid #2c2648; border-radius: 16px;
  background: #fff; overflow: hidden;
  box-shadow: 0 4px 0 rgba(44,38,72,.2);
}
.scroll-rod {
  height: 26px; border: 0; border-radius: 0;
  background: linear-gradient(180deg, #ffb163, #f2801c);
  border-bottom: 3px solid #2c2648;
  position: relative;
}
.scroll-rod::before {
  content: "MAPLEVERSE"; position: absolute; left: 10px; top: 6px;
  color: #fff; font: 700 10px Fredoka, Verdana, sans-serif; letter-spacing: 2px;
  text-shadow: 1px 1px 0 rgba(44,38,72,.4);
  width: auto; height: auto; border: 0; background: none; border-radius: 0;
}
.scroll-rod::after { content: none; }
.scroll-rod.bottom { height: 0; border: 0; }
.scroll-rod.bottom::before { content: none; }
.scroll-body { background: #fff; padding: 12px 10px; text-align: center; border: 0; }
.btn-login {
  display: block; margin: 0 auto 8px;
  width: 100%; padding: 10px 0;
  background: linear-gradient(180deg, #a6ea5e, #5fb02f);
  color: #fff !important; font: 600 14px Fredoka, Verdana, sans-serif; letter-spacing: 1px;
  border: 3px solid #2c2648; border-radius: 14px;
  text-shadow: 1px 1px 0 rgba(44,38,72,.35); text-align: center;
  box-shadow: 0 3px 0 rgba(44,38,72,.25);
}
.btn-login:hover { filter: brightness(1.07); text-decoration: none; }
.btn-login.sub { background: linear-gradient(180deg, #7fd0f7, #2f9fe0); }
.side-note { color: #8a93a8; font: 600 10px Fredoka, Verdana, sans-serif; line-height: 1.5; }

/* Sidebar panels */
.sidepanel {
  border: 3px solid #2c2648; border-radius: 16px; background: #fff;
  margin-bottom: 0; overflow: hidden;
  box-shadow: 0 4px 0 rgba(44,38,72,.2);
}
.sidepanel-title {
  background: linear-gradient(180deg, #ffe066, #ffc12e); color: #5a3a00;
  font: 600 11px Fredoka, Verdana, sans-serif;
  padding: 7px 11px; border-bottom: 3px solid #2c2648; letter-spacing: .5px;
}
.sidepanel-title.poll { background: #a06cd6; color: #fff; text-shadow: 1px 1px 0 rgba(44,38,72,.3); }
.sidepanel-body { padding: 10px; line-height: 1.55; color: #555; font-size: 11px; }
.sidepanel-body ul { margin: 0; padding-left: 15px; }
.sidepanel-body li { margin: 4px 0; }
.sidepanel-body .go { text-align: right; font-weight: bold; margin-top: 5px; }
.sidepanel-body .go a { color: #f2711c; font-family: Fredoka, Verdana, sans-serif; }
.btn-archive {
  display: inline-block; margin-top: 8px; padding: 5px 13px;
  background: linear-gradient(180deg, #ffb163, #f2801c); color: #fff !important;
  font: 600 11px Fredoka, Verdana, sans-serif;
  border: 2px solid #2c2648; border-radius: 10px;
  box-shadow: 0 2px 0 rgba(44,38,72,.25);
}
a.btn-archive:hover { filter: brightness(1.07); text-decoration: none; }

/* Poll result bars. */
.pollbars { margin: 8px 0 4px; }
.pollrow { margin: 7px 0; }
.polllabel { display: flex; justify-content: space-between; font-size: 10px; color: #666; margin-bottom: 3px; }
.polllabel b { color: #2c2648; font-family: Fredoka, Verdana, sans-serif; }
.pollbar { height: 13px; background: #eef0f5; border: 2px solid #2c2648; border-radius: 7px; overflow: hidden; }
.pollfill { height: 100%; border-radius: 4px 0 0 4px; transition: width .4s; }
.pollfill.mobile { background: linear-gradient(180deg, #7fd0f7, #2f9fe0); }
.pollfill.desktop { background: linear-gradient(180deg, #ffd23f, #ffab2e); }
.pollnote { color: #999; font-size: 9px; margin-top: 5px; }
#snail { text-align: center; margin: 8px 0 0; }
#snail img { image-rendering: pixelated; }

/* Ranking showcase: big #1 beside the preview list. */
.rankflex { display: flex; align-items: stretch; }
.rk-showcase {
  width: 148px; flex: 0 0 148px;
  border-right: 3px dashed #cfe3f5; background: #f7fbff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 8px; text-align: center;
}
.rk-showcase img { image-rendering: pixelated; margin-bottom: 6px; }
.rk-showcase .n { font: 600 13px Fredoka, Verdana, sans-serif; color: #2c2648; }
.rk-showcase .j { color: #8a93a8; font-size: 10px; margin-top: 2px; }
.rankflex .tablecol { flex: 1; min-width: 0; }

/* ── Feature boxes: candy cards with colored header bars ─────────── */
.feature {
  border: 3px solid #2c2648; border-radius: 18px; margin-bottom: 0;
  background: #fff; overflow: hidden;
  box-shadow: 0 5px 0 rgba(44,38,72,.2);
}
.feature-head {
  background: linear-gradient(180deg, #7fd0f7, #2f9fe0);
  padding: 10px 16px;
  border-bottom: 3px solid #2c2648;
  display: flex; align-items: center;
}
.feature-head::before {
  content: ""; width: 11px; height: 11px; background: #fff;
  border: 2px solid #2c2648; border-radius: 3px;
  display: inline-block; margin-right: 9px; align-self: center; flex: 0 0 auto;
}
.feature-title {
  color: #fff; font-weight: 400; font-size: 19px; letter-spacing: .5px;
  font-family: Jua, Fredoka, Verdana, sans-serif;
  text-shadow: 2px 2px 0 rgba(44,38,72,.4);
  margin: 0; display: inline;
}
/* Terminal cursor after every section title. This used to be a literal "_"
   typed into all 57 headings, which read as a typo ("REPORT A BUG_") rather
   than as a cursor — a tester filed it as a bug. It is decoration, so it now
   lives in one CSS rule instead of the copy: it blinks (so it is legibly a
   cursor), it is aria-hidden by construction (generated content), and it no
   longer lands in page titles, search results or screen-reader output. */
.feature-title::after {
  content: "_";
  animation: mv-caret 1.1s step-end infinite;
}
@keyframes mv-caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .feature-title::after { animation: none; opacity: 1; }
}
.feature-sub { color: #eafaff; margin-left: 10px; font: 600 11px Fredoka, Verdana, sans-serif; }
/* Section color rhythm: 2nd feature green, 3rd orange, 4th purple. */
#main .feature:nth-of-type(2n) .feature-head { background: linear-gradient(180deg, #a6ea5e, #5fb02f); }
#main .feature:nth-of-type(2n) .feature-sub { color: #eaffe0; }
#main .feature:nth-of-type(3n) .feature-head { background: linear-gradient(180deg, #ffb163, #f2801c); }
#main .feature:nth-of-type(3n) .feature-sub { color: #ffedd8; }
.feature-body { padding: 14px 16px; line-height: 1.7; }
.feature-body h3 {
  color: #2c2648; font: 400 15px Jua, Fredoka, Verdana, sans-serif;
  margin: 18px 0 6px; border-bottom: 2px dashed #f0dcb0; padding-bottom: 4px;
}
.feature-body h3:first-child { margin-top: 0; }
.feature-body p { margin: 6px 0; }
.feature-body b { color: #2c2648; }
.feature-body ul, .feature-body ol { margin: 6px 0; padding-left: 20px; }
.feature-body li { margin: 4px 0; }
.feature-body table { border-collapse: collapse; margin: 8px 0; }
.feature-body table th {
  background: #2f9fe0; color: #fff; padding: 5px 11px;
  border: 2px solid #2c2648; text-align: left;
  font-family: Fredoka, Verdana, sans-serif; font-weight: 600;
}
.feature-body table td { padding: 5px 11px; border: 2px solid #dfe6f0; }
.tip {
  background: #fff8e0; border: 2px solid #2c2648; border-radius: 12px;
  padding: 9px 12px; margin: 10px 0; color: #7a5c22;
  box-shadow: 0 3px 0 rgba(44,38,72,.15);
}
.tip b { color: #d85a10; }
.warnbox {
  background: #ffeef2; border: 2px solid #2c2648; border-radius: 12px;
  padding: 9px 12px; margin: 10px 0; color: #a03a52;
  box-shadow: 0 3px 0 rgba(44,38,72,.15);
}

/* Job / metric tab strip */
.jobtabs {
  background: #eef4fb; padding: 8px 10px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  border-bottom: 2px dashed #cfe3f5;
}
.jobtabs-label { color: #2c2648; font: 600 11px Fredoka, Verdana, sans-serif; margin-right: 4px; letter-spacing: 1px; }
.jobtab {
  background: #fff; color: #5a6478;
  border: 2px solid #2c2648; border-radius: 11px;
  font: 600 10px Fredoka, Verdana, sans-serif; letter-spacing: 1px;
  padding: 5px 11px; cursor: pointer;
  box-shadow: 0 2px 0 rgba(44,38,72,.2);
}
.jobtab:hover { background: #fff4d8; color: #2c2648; }
.jobtab.active { background: linear-gradient(180deg, #ffd23f, #ffab2e); color: #5a3a00; }
.ranksearch { margin-left: auto; }
.ranksearch input {
  font: 600 11px Fredoka, Verdana, sans-serif; padding: 5px 10px;
  border: 2px solid #2c2648; border-radius: 10px;
  background: #fff; width: 140px;
}

/* Ranking table */
#ranktable { width: 100%; border-collapse: collapse; }
#ranktable th {
  background: #f7fbff; color: #2f9fe0; font: 600 10px Fredoka, Verdana, sans-serif;
  letter-spacing: 1px; padding: 7px 9px; border-bottom: 3px solid #2c2648; text-align: left;
}
#ranktable td { padding: 8px 9px; border-bottom: 2px dashed #e6eef6; vertical-align: middle; }
#ranktable tr:hover td { background: #fffbea; }
.c-rank { width: 52px; text-align: center !important; }
.c-char { width: 84px; }
.c-level { width: 70px; }
.c-job { width: 150px; }
td.c-rank { text-align: center; font-weight: bold; color: #8a93a8; }
.medal {
  display: inline-block; width: 24px; height: 24px; line-height: 21px; border-radius: 50%;
  color: #fff; font-weight: bold; text-align: center; font-size: 11px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.3); border: 2px solid #2c2648;
}
.medal.g { background: radial-gradient(circle at 35% 30%, #ffe27a, #d99a00); }
.medal.s { background: radial-gradient(circle at 35% 30%, #e8e8e8, #9aa0a8); }
.medal.b { background: radial-gradient(circle at 35% 30%, #e8b27a, #a05f22); }
.avatar {
  width: auto; height: auto; max-height: 96px; image-rendering: pixelated;
  display: block; margin: -4px 0;
}
.avatar-fallback {
  display: inline-block; width: 40px; height: 40px; line-height: 38px; text-align: center;
  font-size: 22px; background: #f7fbff; border: 2px solid #2c2648; border-radius: 10px;
}
.rk-name { font: 600 13px Fredoka, Verdana, sans-serif; color: #2c2648; }
.rk-job {
  display: inline-block; padding: 3px 10px; border-radius: 9px;
  font: 600 10px Fredoka, Verdana, sans-serif; color: #fff; letter-spacing: .5px;
  border: 2px solid #2c2648;
}
.rk-job.beginner { background: #8f8f8f; }
.rk-job.warrior  { background: #ff6b57; }
.rk-job.magician { background: #2f9fe0; }
.rk-job.bowman   { background: #5fb02f; }
.rk-job.thief    { background: #a06cd6; }
.rk-job.pirate   { background: #d9a520; }
.rk-level { font: 400 16px Jua, Fredoka, Verdana, sans-serif; color: #ff5f9c; }
.loading, .empty { text-align: center; color: #8a93a8; padding: 24px 0 !important; font-family: Fredoka, Verdana, sans-serif; }
.rank-foot {
  padding: 7px 12px; color: #a06a2a; font: 600 10px Fredoka, Verdana, sans-serif;
  background: #fff8ec; border-top: 2px dashed #f0dcb0;
}
.rank-foot a { font-weight: 600; }

/* ── Drop catalog (drops.php) ────────────────────────────────────── */
/* .jobtabs sets display:flex, which outranks the UA's [hidden]{display:none} —
   the mode-swapped filter rows need this or they never hide. */
.jobtabs[hidden] { display: none; }
.jobtab.bosstab.is-on { background: linear-gradient(180deg, #ff9dc0, #ff5f9c); color: #fff; }
.drop-results { padding: 0 0 4px; }
.drop-mob { border-bottom: 2px dashed #e6eef6; }
.drop-mob.is-boss { box-shadow: inset 4px 0 0 #ff5f9c; }
.drop-mob-head, .drop-item-head {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font: 600 13px Fredoka, Verdana, sans-serif; color: #2c2648;
}
.drop-mob-head:hover, .drop-item-head:hover { background: #fffbea; }
.drop-mob.is-open > .drop-mob-head,
.drop-mob.is-open > .drop-item-head { background: #f7fbff; }
.drop-lv {
  flex: 0 0 auto; min-width: 54px; padding: 2px 7px; border-radius: 9px;
  border: 2px solid #2c2648; background: #7fd0f7; color: #fff; text-align: center;
  font: 600 10px Fredoka, Verdana, sans-serif; letter-spacing: .5px;
}
.drop-name { flex: 1 1 auto; }
.drop-boss {
  font: 600 9px Fredoka, Verdana, sans-serif; color: #fff; background: #ff5f9c;
  border: 2px solid #2c2648; border-radius: 8px; padding: 1px 6px; margin-left: 6px;
  font-style: normal; letter-spacing: .5px;
}
.drop-count { flex: 0 0 auto; color: #8a93a8; font: 600 11px Fredoka, Verdana, sans-serif; }
.drop-caret { flex: 0 0 auto; color: #8a93a8; }
.drop-body { padding: 0 12px 12px; overflow-x: auto; }
.drop-item { padding: 4px 12px 12px; }
.drop-item h3 {
  margin: 12px 0 6px; font: 600 14px Fredoka, Verdana, sans-serif; color: #2c2648;
}
.drop-item-sub { color: #8a93a8; font-size: 11px; font-weight: 600; }
.drop-table { width: 100%; border-collapse: collapse; }
.drop-table th {
  background: #f7fbff; color: #2f9fe0; font: 600 10px Fredoka, Verdana, sans-serif;
  letter-spacing: 1px; padding: 6px 8px; border-bottom: 3px solid #2c2648; text-align: left;
}
.drop-table td {
  padding: 6px 8px; border-bottom: 2px dashed #e6eef6;
  font: 400 12px Fredoka, Verdana, sans-serif; color: #2c2648;
}
.drop-table tr:hover td { background: #fffbea; }
.drop-table .c-rate { width: 84px; text-align: right; font-weight: 600; color: #a06a2a; }
.drop-table .c-odds { width: 96px; text-align: right; color: #8a93a8; }
.drop-table .c-lv { width: 52px; text-align: center; }
.drop-flag {
  display: inline-block; padding: 1px 7px; border-radius: 8px; border: 2px solid #2c2648;
  background: #e6eef6; color: #2c2648; font: 600 9px Fredoka, Verdana, sans-serif;
  letter-spacing: .3px; white-space: nowrap;
}
.drop-flag.is-quest { background: #ffe066; }
.drop-none { text-align: center; color: #8a93a8; padding: 24px 12px; font-family: Fredoka, Verdana, sans-serif; }
.drop-more {
  display: block; width: calc(100% - 24px); margin: 12px; padding: 9px;
  border: 2px solid #2c2648; border-radius: 10px; background: #ffe066; cursor: pointer;
  font: 600 12px Fredoka, Verdana, sans-serif; color: #2c2648;
}
.drop-more:hover { background: #ffc12e; }
.drop-more.is-inline { width: auto; margin: 8px 0 0; padding: 6px 12px; font-size: 11px; }
@media (max-width: 620px) {
  .drop-count { display: none; }
  .drop-table .c-odds { display: none; }
}

/* ── Notice / Update boxes ───────────────────────────────────────── */
.newsrow { display: flex; gap: 16px; }
.newsbox {
  flex: 1; border: 3px solid #2c2648; border-radius: 16px; min-width: 0;
  background: #fff; overflow: hidden; box-shadow: 0 4px 0 rgba(44,38,72,.2);
}
.newsbox-head {
  color: #fff; font: 600 12px Fredoka, Verdana, sans-serif; letter-spacing: 1px;
  padding: 8px 12px; display: flex; justify-content: space-between;
  border-bottom: 3px solid #2c2648;
  text-shadow: 1px 1px 0 rgba(44,38,72,.3);
}
.newsbox-head.pink { background: linear-gradient(180deg, #ff9dc0, #ff5f9c); }
.newsbox-head.blue { background: linear-gradient(180deg, #7fd0f7, #2f9fe0); }
.newsbox-head .more a { color: #fff; font-size: 9px; }
.newsbox .bubble { margin-right: 4px; }
.newsbox ul { list-style: none; margin: 0; padding: 7px 12px; }
.newsbox li { padding: 5px 0; border-bottom: 2px dashed #eee6f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.newsbox li:last-child { border-bottom: 0; }
.newsbox .d { color: #b0a8c0; margin-right: 4px; }
.newsbox a { color: #3a3550; }
.newsbox a:hover { color: #f2711c; }

/* ── News articles ───────────────────────────────────────────────── */
.article {
  border: 3px solid #2c2648; border-radius: 16px; margin-bottom: 16px;
  background: #fff; overflow: hidden; box-shadow: 0 4px 0 rgba(44,38,72,.2);
}
.article-head {
  background: #f7fbff; padding: 9px 14px; border-bottom: 3px solid #2c2648;
  display: flex; align-items: baseline; gap: 10px;
}
.article-head .cat {
  font: 600 9px Fredoka, Verdana, sans-serif; color: #fff;
  padding: 3px 9px; border-radius: 8px; letter-spacing: 1px;
  border: 2px solid #2c2648;
}
.article-head .cat.notice { background: #ff5f9c; }
.article-head .cat.update { background: #2f9fe0; }
.article-head .cat.event { background: #5fb02f; }
.article-head h2 { font: 400 15px Jua, Fredoka, Verdana, sans-serif; color: #2c2648; margin: 0; flex: 1; }
.article-head .d { color: #8a93a8; font-size: 10px; }
.article-body { padding: 12px 16px; line-height: 1.7; }
.article-body ul { padding-left: 20px; }

/* ── Guide cards ─────────────────────────────────────────────────── */
.guidegrid { display: flex; flex-wrap: wrap; gap: 14px; padding: 14px; }
.guidecard {
  flex: 1 1 46%; border: 3px solid #2c2648; border-radius: 15px;
  background: #fffdf4; padding: 13px; min-width: 240px;
  box-shadow: 0 3px 0 rgba(44,38,72,.18);
  position: relative;
}
.guidecard h3 { margin: 0 0 6px; font: 400 15px Jua, Fredoka, Verdana, sans-serif; }
.guidecard h3 a { color: #d85a10; }
.guidecard p { margin: 0 0 8px; color: #6b6478; line-height: 1.6; }
.guidecard .ico { font-size: 22px; float: right; margin-left: 8px; }
.guidecard img.npc { float: right; margin: -2px 0 4px 10px; max-height: 74px; image-rendering: pixelated; }
.crumbs { padding: 0 0 2px; color: #8a93a8; font: 600 10px Fredoka, Verdana, sans-serif; }
.crumbs a { color: #f2711c; }

/* keyboard-key chip */
kbd {
  display: inline-block; padding: 2px 8px; margin: 0 1px;
  background: linear-gradient(180deg, #fff, #e8ecf4);
  border: 2px solid #2c2648; border-bottom-width: 3px; border-radius: 7px;
  font: 700 10px Fredoka, Verdana, sans-serif; color: #2c2648;
}

/* ── Forum ───────────────────────────────────────────────────────── */
.forum-user { text-align: right; padding: 0 0 4px; color: #8a93a8; font-family: Fredoka, Verdana, sans-serif; }
.forum-user b { color: #d85a10; }
table.ftable {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border: 3px solid #2c2648; border-radius: 14px; overflow: hidden;
  box-shadow: 0 4px 0 rgba(44,38,72,.2);
}
table.ftable th {
  background: linear-gradient(180deg, #7fd0f7, #2f9fe0); color: #fff;
  font: 600 11px Fredoka, Verdana, sans-serif; letter-spacing: 1px;
  padding: 8px 10px; border-bottom: 3px solid #2c2648; text-align: left;
  text-shadow: 1px 1px 0 rgba(44,38,72,.3);
}
/* Inside a .feature card the table must NOT be a second card: the feature
   already brings the border, radius, shadow and the colored title bar. Strip
   the inner chrome and turn the th row into a quiet column-header strip so
   it stops reading as a duplicated header band. */
.feature > table.ftable {
  border: 0; border-radius: 0; box-shadow: none;
}
.feature > table.ftable th {
  background: #f2f8fd; color: #4a6e8a; text-shadow: none;
  border-bottom: 2px solid #d9e8f4; letter-spacing: .6px;
}
table.ftable td { padding: 9px 10px; border-bottom: 2px dashed #e6eef6; vertical-align: middle; }
table.ftable tr:last-child td { border-bottom: 0; }
table.ftable tr:hover td { background: #fffbea; }
.fboard-name { font: 600 13px Fredoka, Verdana, sans-serif; }
.fboard-name a { color: #d85a10; }
.fboard-desc { color: #8a93a8; margin-top: 2px; }
.fnum { text-align: center; color: #666; width: 70px; }
.flast { width: 170px; color: #8a93a8; font-size: 10px; }
.post {
  border: 3px solid #2c2648; border-radius: 14px; margin-bottom: 12px;
  background: #fff; overflow: hidden; box-shadow: 0 3px 0 rgba(44,38,72,.18);
}
.post-head {
  background: #f7fbff; border-bottom: 2px solid #2c2648; padding: 6px 12px;
  display: flex; justify-content: space-between; color: #8a93a8; font-size: 10px;
}
.post-head b { color: #d85a10; font: 600 12px Fredoka, Verdana, sans-serif; }
.post-body { padding: 11px 14px; line-height: 1.7; word-wrap: break-word; }
.fform {
  background: #fff; border: 3px solid #2c2648; border-radius: 15px;
  padding: 14px; margin-top: 16px; box-shadow: 0 4px 0 rgba(44,38,72,.2);
}
.fform label { display: block; font: 600 12px Fredoka, Verdana, sans-serif; color: #2c2648; margin: 9px 0 4px; }
/* Titles can now run to 224 characters, so every place one is rendered has to
   wrap instead of stretching the layout. `anywhere` also breaks a pasted URL
   or an unspaced run, which plain word-wrap would not. */
.fboard-name, table.ftable td a, .crumbs, .feature-title { overflow-wrap: anywhere; }
.feature-head { flex-wrap: wrap; }
/* Own-post edit / delete controls in a post header. */
.fpost-act, .fpost-cancel { margin-left: 8px; font-weight: bold; }
.fpost-del { display: inline; margin-left: 6px; }
.fpost-del button {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: #c05a5a; font: inherit; font-weight: bold;
}
.fpost-del button:hover { color: #ff2e2e; text-decoration: underline; }
.post-head i { color: #a99; font-style: italic; }
.fform input[type=text], .fform input[type=password], .fform textarea {
  width: 100%; font: 12px Verdana, sans-serif; padding: 7px 9px;
  border: 2px solid #2c2648; border-radius: 9px; background: #fdfcf8;
}
.fform textarea { height: 110px; resize: vertical; }
.fbtn {
  margin-top: 10px; padding: 9px 22px;
  background: linear-gradient(180deg, #ffb163, #f2801c); color: #fff;
  border: 3px solid #2c2648; border-radius: 13px;
  font: 600 13px Fredoka, Verdana, sans-serif; letter-spacing: 1px; cursor: pointer;
  box-shadow: 0 3px 0 rgba(44,38,72,.25);
  text-shadow: 1px 1px 0 rgba(44,38,72,.3);
}
.fbtn:hover { filter: brightness(1.07); }
.ferr { background: #ffeef2; border: 2px solid #2c2648; border-radius: 11px; color: #a03a52; padding: 8px 11px; margin-bottom: 10px; }
.fok { background: #eefae4; border: 2px solid #2c2648; border-radius: 11px; color: #3a7a1e; padding: 8px 11px; margin-bottom: 10px; }
.pagenav { margin: 10px 0; color: #8a93a8; }
.pagenav a { font-weight: bold; margin: 0 3px; }

/* ── Footer ──────────────────────────────────────────────────────── */
#foot {
  border-top: 3px dashed #e6dcc0; background: #fbf7ec;
  color: #8a7a58; font: 600 10px Fredoka, Verdana, sans-serif; text-align: center;
  padding: 13px; line-height: 1.7;
}
#foot a { color: #f2711c; }

/* ── Job showcase strip (home) ───────────────────────────────────── */
.jobrow { display: flex; gap: 10px; padding: 14px; flex-wrap: wrap; }
.jobcard {
  flex: 1 1 0; min-width: 96px; text-align: center;
  border: 3px solid #2c2648; border-radius: 15px; background: #fff5e6;
  padding: 11px 4px 9px; text-decoration: none;
  box-shadow: 0 3px 0 rgba(44,38,72,.18);
}
.jobcard:nth-child(2) { background: #eef6ff; }
.jobcard:nth-child(3) { background: #eefaef; }
.jobcard:nth-child(4) { background: #f4eefc; }
.jobcard:nth-child(5) { background: #fff6e0; }
.jobcard:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 5px 0 rgba(44,38,72,.24); }
.jobcard img { image-rendering: pixelated; height: 72px; width: auto; object-fit: contain; }
.jobcard .jn { display: block; font: 600 12px Fredoka, Verdana, sans-serif; color: #2c2648; margin-top: 6px; letter-spacing: 1px; }
.jobcard .jt { display: block; color: #8a93a8; font-size: 9px; margin-top: 2px; }

/* Item-icon inline chips */
.iconlist { list-style: none; margin: 0 !important; padding: 0 !important; }
.iconlist li { display: flex; align-items: center; gap: 8px; margin: 6px 0 !important; }
.iconlist img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }

/* Tables that can outgrow a phone scroll inside their own box. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Narrow screens ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  body { font-size: 12px; }
  #page { margin: 0; border: 0; border-radius: 0; box-shadow: none; }

  #banner { height: 180px; background-size: cover, 100% 100%; background-position: center bottom, top left; }
  #logo { left: 12px; top: 14px; }
  #logo .logoimg { height: 74px; }
  #logo .logosub { margin: 3px 0 0; font-size: 10px; padding: 3px 9px; border-width: 2px; }
  .grass { height: 28px; border-top-width: 3px; }
  .grass img { transform-origin: bottom center; transform: scale(.82); bottom: 1px; }
  .grass .m4, .grass .m5, .grass .m6, .grass .npcgreet { display: none; }
  #ticker { height: 36px; }
  #ticker .ticker-tag { font-size: 10px; padding: 0 10px; }
  #ticker .ticker-track { font-size: 11px; }

  #cols { flex-direction: column; padding: 12px; gap: 12px; }
  #side { width: 100%; flex: none; }
  /* Nav becomes a 2-col grid of pills; PLAY spans the row. */
  #mainnav { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  #mainnav a { padding: 12px 6px; font-size: 12px; }
  #mainnav a.play { grid-column: 1 / -1; grid-row: 1; padding: 13px 6px; }
  #snail { display: none; }

  .newsrow { flex-direction: column; }
  .newsbox li { white-space: normal; }
  .rk-showcase { display: none; }

  .jobtabs { padding: 7px; }
  .jobtab { padding: 6px 8px; flex: 1 1 auto; text-align: center; }
  .ranksearch { margin: 6px 0 0; flex: 1 1 100%; }
  .ranksearch input { width: 100%; }
  #ranktable th, #ranktable td { padding: 6px 4px; }
  .c-char { width: 64px; }
  .c-job { width: auto; }
  .avatar { max-height: 72px; }

  .jobrow { gap: 8px; }
  .jobcard { flex: 1 1 30%; min-width: 88px; }
  .jobcard img { height: 56px; }

  .feature-body table { display: block; overflow-x: auto; }
  table.ftable th, table.ftable td { padding: 6px 5px; }
  .flast { width: auto; }
  .fbtn, .btn-login { padding: 11px 18px; }
  .fform input[type=text], .fform input[type=password], .fform textarea { font-size: 14px; }
}

@media (max-width: 480px) {
  #logo .logoimg { height: 60px; }
  .feature-title { font-size: 16px; }
  .feature-sub { display: block; margin: 2px 0 0 10px; }
  .jobcard { flex: 1 1 45%; }
  .guidecard img.npc { max-height: 56px; }
  .rk-name { font-size: 11px; }
  .medal { width: 20px; height: 20px; line-height: 17px; font-size: 10px; }
  .c-rank { width: 34px; }
  .fnum { width: 44px; }
}