/*
 * MINEWORLD Minecraft-menu theme (shared by index.html and worlds.html).
 * Title screen over a world panorama, chiseled stone logo, slate menu buttons,
 * dimmed panels and white pixel text with a hard drop shadow.
 * Textures in icons/tex are original 16x16 pixel art generated for this site.
 */
@font-face { font-family: 'Monocraft'; src: url('fonts/Monocraft.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Monocraft'; src: url('fonts/Monocraft-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  /* Minecraft chat colors */
  --mc-white: #ffffff;
  --mc-gray: #a0a0a0;
  --mc-dark-gray: #555555;
  --mc-shadow: #3f3f3f;
  --mc-yellow: #ffff55;
  --mc-gold: #ffaa00;
  --mc-green: #55ff55;
  --mc-aqua: #55ffff;
  --mc-red: #ff5555;

  /* Menu chrome */
  --slate-top: #4d6b80;
  --slate: #3a5568;
  --slate-bottom: #2c4252;
  --slate-edge: #10181e;
  --slate-bar: #8fd0cf;
  --hover-top: #4f9aa0;
  --hover: #3f868c;
  --hover-bottom: #2f6a70;
  --panel-dim: rgba(10, 10, 10, 0.72);
  --panel-line: #4a4a4a;
  --font-mc: 'Monocraft', ui-monospace, monospace;

  /* Tokens used by the page's original stylesheet, remapped to the dark menu palette */
  --ink: #000000;
  --bg: rgba(0, 0, 0, 0.55);
  --bg2: linear-gradient(rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.74)), url('icons/tex/dirt.png') 0 0 / 64px 64px;
  --panel: rgba(12, 12, 12, 0.8);
  --panel2: rgba(255, 255, 255, 0.06);
  --line: #4a4a4a;
  --green: #6fcf3f;
  --green2: #8fe35a;
  --green-dk: #3b7a24;
  --robin: #6fcf3f;
  --sun: #ffaa00;
  --coral: #ff5555;
  --purple: #c77dff;
  --sky: #55ffff;
  --gold: #ffaa00;
  --cream: #ffffff;
  --text: #ffffff;
  --muted: #a0a0a0;
  --pix: var(--font-mc);
  --body: var(--font-mc);
}

/* ------------------------------------------------------------------ base */
html { overflow-x: clip; }
body {
  background: #0b0f12 url('bg.jpg') center / cover fixed no-repeat;
  color: var(--mc-white);
  font-family: var(--font-mc);
  text-shadow: 2px 2px 0 var(--mc-shadow);
}
body::before { /* dim the panorama so text always reads */
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.55));
}
input, textarea, select, code, .mono { text-shadow: none; }
::selection { background: #3f5bd6; color: #fff; }

/* ------------------------------------------------------------------ title screen */
.mc-title-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 16px; width: 100%; }
.mc-logo {
  position: relative; margin: 0; line-height: 1; text-align: center;
  font: 700 clamp(46px, 12.5vw, 148px) / 1 var(--font-mc); letter-spacing: 0.02em;
  color: transparent; text-shadow: none;
  /* grass on top, stone below, clipped to the letters */
  background:
    url('icons/tex/grass_top.png') 0 0 / 0.16em 0.16em repeat-x,
    url('icons/tex/grass_top.png') 0 0.12em / 0.16em 0.16em repeat-x,
    url('icons/tex/stone.png') 0 0 / 0.32em 0.32em repeat;
  image-rendering: pixelated;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 0.035em #1a2326;
  filter: drop-shadow(0 0.05em 0 #1a2326) drop-shadow(0 0.09em 0 rgba(0, 0, 0, 0.45));
}
.mc-edition {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  margin-top: -6px; padding: 4px 16px; background: #24474b;
  border: 3px solid #12262a; box-shadow: inset 0 0 0 2px #5fb2ad;
  font: 700 clamp(13px, 2.2vw, 20px) var(--font-mc); letter-spacing: 0.12em; color: #e8fbfa;
}
.mc-edition::before, .mc-edition::after {
  content: ''; position: absolute; top: 50%; width: 9px; height: 9px; background: #5fb2ad;
  border: 2px solid #12262a; transform: translateY(-50%) rotate(45deg);
}
.mc-edition::before { left: -22px; }
.mc-edition::after { right: -22px; }
.mc-splash {
  margin-top: -2px; padding: 4px 22px; background: #e8604a; color: #fff;
  font: 700 clamp(13px, 2.1vw, 19px) var(--font-mc); text-shadow: 2px 2px 0 #8a2d1f;
  box-shadow: inset 0 -3px 0 #b8432f, inset 0 3px 0 #f59a7c;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%);
}
.mc-menu { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; width: 100%; }
.mc-row { display: flex; gap: 8px; justify-content: center; width: min(400px, 92vw); }
.mc-desc { max-width: 600px; margin: 8px 0 0; padding: 10px 16px; background: rgba(0, 0, 0, 0.55); text-align: center; color: #d0d0d0; font-size: 14px; line-height: 1.6; text-shadow: 2px 2px 0 #202020; }
.mc-desc b { color: var(--mc-white); font-weight: 400; }

/* ------------------------------------------------------------------ menu buttons */
.mcb {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: min(400px, 92vw); height: 44px; padding: 0 22px; cursor: pointer; text-decoration: none;
  font: 400 18px var(--font-mc); color: var(--mc-white); text-shadow: 2px 2px 0 #2a2a2a;
  background: linear-gradient(var(--slate-top) 0 44%, var(--slate) 44% 88%, var(--slate-bottom) 88%);
  border: 3px solid var(--slate-edge);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 3px 0 rgba(0, 0, 0, 0.35);
  user-select: none;
}
.mcb::before, .mcb::after { content: ''; position: absolute; top: 8px; bottom: 8px; width: 3px; background: var(--slate-bar); opacity: 0.85; }
.mcb::before { left: 8px; }
.mcb::after { right: 8px; }
.mcb:hover, .mcb:focus-visible {
  outline: none; color: #ffffa0;
  background: linear-gradient(var(--hover-top) 0 44%, var(--hover) 44% 88%, var(--hover-bottom) 88%);
}
.mcb:active { transform: translateY(1px); }
.mcb.half { width: auto; flex: 1; min-width: 0; padding: 0 14px; }
.mcb.small { height: 34px; font-size: 14px; width: auto; padding: 0 18px; }
.mcb.small::before, .mcb.small::after { top: 6px; bottom: 6px; }
.mcb.green { background: linear-gradient(#5aa83a 0 44%, #47912c 44% 88%, #377322 88%); border-color: #142409; }
.mcb.green::before, .mcb.green::after { background: #b6f08c; }
.mcb.green:hover { background: linear-gradient(#69bd45 0 44%, #55a536 44% 88%, #3f832a 88%); }
.mcb.x { background: linear-gradient(#2a2a2a 0 44%, #1a1a1a 44% 88%, #0d0d0d 88%); border-color: #000; }
.mcb.x::before, .mcb.x::after { background: #9a9a9a; }
.mcb[disabled], .mcb.disabled { cursor: not-allowed; color: var(--mc-gray); background: #3b3b3b; border-color: #1c1c1c; box-shadow: none; transform: none; }
.mcb[disabled]::before, .mcb[disabled]::after { display: none; }

/* ------------------------------------------------------------------ panels & inputs */
.mcp {
  background: var(--panel-dim); border: 3px solid #000; box-shadow: inset 0 0 0 2px var(--panel-line);
  padding: 18px;
}
.mcp.dirt { background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('icons/tex/dirt.png') 0 0 / 64px 64px; image-rendering: pixelated; }
.mc-input, .mcp input, .mcp textarea, .mcp select {
  width: 100%; padding: 10px 12px; background: #000; color: #fff; caret-color: #fff;
  border: 2px solid var(--mc-gray); font: 16px var(--font-mc); border-radius: 0; outline: none;
}
.mc-input:focus, .mcp input:focus, .mcp textarea:focus, .mcp select:focus { border-color: #fff; }
.mc-h { font: 400 20px var(--font-mc); color: #fff; margin: 0 0 12px; }
.mc-label { display: block; color: var(--mc-gray); margin: 12px 0 6px; font-size: 14px; }
.mc-note { color: var(--mc-gray); font-size: 13px; text-shadow: 2px 2px 0 #202020; }
.mc-yellow { color: var(--mc-yellow); }
.mc-green { color: var(--mc-green); }
.mc-red { color: var(--mc-red); }
.mc-aqua { color: var(--mc-aqua); }

/* ------------------------------------------------------------------ re-skin of the landing page's original components  (scoped to body.landing) */
.landing .scan, .landing .ore-rain { display: none !important; }
.landing nav { background: rgba(0, 0, 0, 0.72) !important; border-bottom: 3px solid #000 !important; box-shadow: inset 0 -2px 0 #2c2c2c; backdrop-filter: blur(6px); }
.landing .brand { color: var(--mc-white) !important; text-shadow: 2px 2px 0 var(--mc-shadow); }
.landing .brand .logo { background: url('icons/tex/grass_side.png') center / 100% 100% no-repeat !important; image-rendering: pixelated !important; border: 3px solid #000 !important; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15); }
.landing .nav-l a { color: #e0e0e0; }
.landing .nav-l a:hover { color: var(--mc-yellow); }
.landing .nav-ca { background: #000 !important; border: 2px solid var(--mc-gray) !important; color: var(--mc-gray) !important; box-shadow: none !important; }
.landing .nav-ca b { color: var(--mc-green) !important; }
.landing .mobile { background: rgba(0, 0, 0, 0.92) !important; }
.landing .mobile a { color: #fff !important; border-color: #333 !important; }
.landing .burger { color: #fff !important; background: transparent !important; border-color: #fff !important; }

.landing .hero.mc-title { min-height: calc(100svh - 68px); align-items: center; justify-content: center; background: transparent !important; box-shadow: none !important; }

.landing .btn {
  font-family: var(--font-mc) !important; text-transform: none; letter-spacing: 0; color: #fff !important;
  text-shadow: 2px 2px 0 #2a2a2a; border: 3px solid var(--slate-edge) !important;
  background: linear-gradient(var(--slate-top) 0 44%, var(--slate) 44% 88%, var(--slate-bottom) 88%) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 3px 0 rgba(0, 0, 0, 0.35) !important;
}
.landing .btn:hover:not(:disabled) { color: #ffffa0 !important; background: linear-gradient(var(--hover-top) 0 44%, var(--hover) 44% 88%, var(--hover-bottom) 88%) !important; transform: none !important; }
.landing .btn-green { background: linear-gradient(#5aa83a 0 44%, #47912c 44% 88%, #377322 88%) !important; border-color: #142409 !important; }
.landing .btn-gold { background: linear-gradient(#d29a2c 0 44%, #b98320 44% 88%, #8f6418 88%) !important; border-color: #2e1f05 !important; }
.landing .btn:disabled { color: var(--mc-gray) !important; background: #3b3b3b !important; border-color: #1c1c1c !important; box-shadow: none !important; }

.landing section { background: rgba(0, 0, 0, 0.38); }
.landing .frame, .landing .hero-card, .landing .lb-frame, .landing .mkt-frame, .landing .dig-frame {
  background: var(--panel-dim) !important; border: 3px solid #000 !important;
  box-shadow: inset 0 0 0 2px var(--panel-line) !important;
}
.landing .thead, .landing .mkt-head, .landing .lb-header { background: rgba(255, 255, 255, 0.06) !important; color: var(--mc-gray) !important; border-bottom: 2px solid #000 !important; }
.landing .head .ey { color: var(--mc-yellow) !important; background: transparent !important; border-color: var(--mc-yellow) !important; }
.landing .head h2, .landing h2, .landing h3, .landing h4 { color: #fff; text-shadow: 3px 3px 0 var(--mc-shadow); }
.landing .head p, .landing .ph, .landing .copy, .landing .disc { color: var(--mc-gray) !important; }
.landing input[type="text"], .landing input:not([type]), .landing #nc-nick, .landing #qr-input-nick, .landing .lb-rename-card input {
  background: #000 !important; color: #fff !important; border: 2px solid var(--mc-gray) !important; border-radius: 0 !important; font-family: var(--font-mc) !important;
}
.landing .tape { background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('icons/tex/stone.png') 0 0 / 48px 48px !important; image-rendering: pixelated; border-color: #000 !important; color: #fff !important; }
.landing .tape-inner span { color: #fff !important; }
.landing .keysrow b, .landing #status b { color: var(--mc-yellow) !important; }
.landing .lvl .tag { background: #24474b !important; color: #e8fbfa !important; border: 3px solid #12262a !important; box-shadow: inset 0 0 0 2px #5fb2ad !important; }
.landing .ca, .landing .sbtn { background: #000 !important; border: 2px solid var(--mc-gray) !important; color: #fff !important; box-shadow: none !important; }
.landing .ca code { color: var(--mc-green) !important; }
.landing footer { background: rgba(0, 0, 0, 0.75) !important; border-top: 3px solid #000 !important; }
.landing .totop { background: var(--slate) !important; border: 3px solid var(--slate-edge) !important; color: #fff !important; }
.landing #leaderboard-modal { background: rgba(0, 0, 0, 0.6) !important; }
.landing .lb-table th { color: var(--mc-gray) !important; border-color: #333 !important; }
.landing .lb-table td { color: #fff !important; border-color: #222 !important; }
.landing .lb-tab { background: #2b2b2b !important; color: var(--mc-gray) !important; border: 2px solid #000 !important; }
.landing .lb-tab.active { background: var(--slate) !important; color: #fff !important; }
.landing table.mkt td, .landing .news, .landing .rich { color: #e8e8e8; }
.landing .about-copy p, .landing .mines-copy p, .landing .lvl li, .landing .spec .k, .landing .specfoot { color: #d8d8d8 !important; }
.landing .about-copy h2 { color: var(--mc-green) !important; }
.landing .lvl .body h4 { color: var(--mc-yellow) !important; }
.landing .totop svg { color: #fff !important; }

@media (max-width: 560px) {
  .mcb { height: 40px; font-size: 16px; }
  .mc-edition::before, .mc-edition::after { display: none; }
}