/* ================================================================
   FROGMARKS — pond.exe (webcore edition)
   Structure borrowed from the great tradition of old-web shrines:
   tiled bg + fixed gradient, win95 frames, marquees, 88x31 butts.
   Swap any img/ asset with your own — paths are the contract.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

/* If you add font files later, drop them next to this css:
@font-face { font-family: "porkys"; src: url(porkys.ttf); }
@font-face { font-family: "cool";   src: url(coolvetica.ttf); }
*/

/* PLACEHOLDER: custom cursors — add img/cur.png + img/cur2.png then uncomment
html       { cursor: url("img/cur.png"), default; }
a:hover    { cursor: url("img/cur2.png"), pointer; }
*/

* { box-sizing: border-box; }

body {
  margin: 0;
  /* tiled pattern over a fixed vertical gradient, daiko-style */
  background-image: url("img/bg/dots.gif"),
    linear-gradient(to bottom, rgb(188, 223, 200) 40%, rgb(34, 197, 175) 100%);
  background-attachment: fixed;
  font-family: "MS PGothic", "DotGothic16", sans-serif;
  font-size: 14px;
  text-align: center;
  color: #1a1a1a;
}

a { color: #1c7a3a; }
a:hover { color: #ff4fa3; }

/* ---------------- page frame ---------------- */
.pagewrapper {
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* ---------------- header / logo ---------------- */
.top1 {
  position: relative;
  margin: auto;
  width: 700px;
  max-width: 100%;
  height: 240px;
}

.hd_logo {
  animation: wobbler 6s infinite ease-in-out;
  position: absolute;
  left: 0; right: 0;
  top: 40px;
  z-index: 1;
}

.logo_en {
  font-family: "DotGothic16", "MS PGothic", monospace;
  font-size: 84px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #57c277;
  -webkit-text-stroke: 3px #0c140f;
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 #ffffff, 7px 7px 0 rgba(12, 20, 15, 0.45);
  margin: 0;
  line-height: 1;
}
.logo_jp {
  font-family: "MS PGothic", "DotGothic16", sans-serif;
  font-size: 26px;
  letter-spacing: 14px;
  color: #ffffff;
  text-shadow: 2px 2px 0 #0c140f;
  margin: 6px 0 0;
}

@keyframes wobbler {
  0%   { transform: rotate(-3deg); }
  50%  { transform: rotate(3deg); }
  100% { transform: rotate(-3deg); }
}

/* PLACEHOLDER: header mascot — absolutely position a transparent png
   of your frog/character peeking over the logo, daiko-style */
.hd_mascot {
  position: absolute;
  right: -160px;
  bottom: -10px;
  z-index: 2;
}

/* ---------------- win95 windows ---------------- */
.winbody {
  background-color: rgb(192, 192, 192);
  border: 2px outset rgb(230, 230, 230);
  display: inline-block;
  text-align: left;
  vertical-align: top;
}

.wincontent {
  border: 1px inset rgb(158, 158, 158);
  margin: 3px;
  background: #f6f4ec;
  padding: 6px;
}

.winbar {
  margin: 3px;
  display: block;
  height: 18px;
  background-image: linear-gradient(to right, rgb(34, 102, 56), rgb(83, 145, 139));
}
.winbar2 {
  margin: 3px;
  display: block;
  height: 18px;
  background-image: linear-gradient(to right, rgb(83, 145, 139), rgb(112, 179, 120));
}
.winbar3 {
  margin: 3px;
  display: block;
  height: 18px;
  background-image: linear-gradient(to right, rgb(199, 86, 146), rgb(255, 158, 199));
}

.infospan {
  display: inline-block;
  padding: 1px 4px;
  font-family: "MS PGothic", sans-serif;
  color: #ffffff;
  text-shadow: 1px 1px 1px black;
  font-size: 13px;
}

#buttx {
  float: right;
  margin: 2px;
  width: 16px;
  height: 14px;
  background: rgb(192,192,192);
  border: 1px outset #fff;
  font-size: 9px;
  line-height: 12px;
  text-align: center;
  font-family: monospace;
}
#buttx:active { border-style: inset; }

/* ---------------- marquee ---------------- */
.motdmarquee {
  height: 24px;
  overflow: hidden;
  position: relative;
  background: #0c140f;
  border: 1px inset #9e9e9e;
  margin: 3px;
}
.motdmarquee span {
  position: absolute;
  white-space: nowrap;
  color: #6fdc8c;
  font-family: "DotGothic16", monospace;
  font-size: 15px;
  line-height: 24px;
  animation: marq 18s linear infinite;
}
@keyframes marq {
  0%   { left: 100%; transform: translateX(0); }
  100% { left: 0;    transform: translateX(-100%); }
}

/* ---------------- layout columns ---------------- */
.cols {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  margin-top: 10px;
  text-align: center;
}
.sidebar { width: 260px; flex-shrink: 0; }
.maincol { width: 710px; max-width: 100%; }
.sidebar .winbody, .maincol .winbody { width: 100%; margin-bottom: 12px; }

@media (max-width: 1010px) {
  .cols { flex-direction: column; align-items: center; }
  .sidebar, .maincol { width: 96%; }
}

/* ---------------- nav list ---------------- */
.list {
  list-style: none;
  text-align: left;
  margin: 4px;
  padding: 0;
}
.list li {
  background: url("img/ico/frog16.png") no-repeat left center;
  padding: 3px 0 3px 22px;
  border-bottom: 1px dotted #9bbfa6;
}
.list a { text-decoration: none; }
.list .dots { color: #9bbfa6; }

/* ---------------- welcome wave text ---------------- */
.waves { position: relative; margin: 10px 0; }
.waves span {
  font-family: "DotGothic16", "MS PGothic", monospace;
  font-weight: bold;
  position: relative;
  display: inline-block;
  animation: waves 1.4s infinite;
  animation-delay: calc(.08s * var(--i));
  font-size: 52px;
  color: #57c277;
  -webkit-text-stroke: 2px #0c140f;
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 #ffffff;
}
@keyframes waves {
  0%, 40%, 100% { transform: translateY(0); }
  20%           { transform: translateY(-10px); }
}

/* ---------------- effects ---------------- */
.rainbowanim { animation: rainbow_animation 3s ease-in-out infinite; }
@keyframes rainbow_animation {
  0%   { color: rgb(255, 67, 67); }
  20%  { color: rgb(255, 227, 67); }
  40%  { color: rgb(67, 255, 130); }
  60%  { color: rgb(67, 155, 255); }
  80%  { color: rgb(149, 67, 255); }
  100% { color: rgb(255, 67, 155); }
}

.anim_flash { animation: flash 1s alternate-reverse infinite; }
@keyframes flash {
  0%   { filter: saturate(0%); }
  100% { filter: saturate(100%); }
}

.counter {
  font-family: "DotGothic16", monospace;
  font-size: 22px;
  color: #2bff6a;
  background: #000;
  padding: 2px 10px;
  border: 2px inset #777;
  letter-spacing: 3px;
}

/* ---------------- updates log ---------------- */
.updates {
  height: 260px;
  overflow-y: scroll;
  text-align: left;
  padding: 6px 10px;
}
.update_date {
  font-family: "DotGothic16", monospace;
  color: #d6336c;
  font-size: 20px;
  margin: 8px 0 2px;
}
.update_divider {
  border: none;
  border-top: 2px dotted #333;
  margin: 10px 0;
}

/* ---------------- button wall ---------------- */
.buttwall { text-align: center; padding: 4px; }
.buttwall img, .buttwall .butt_ph {
  width: 88px; height: 31px;
  margin: 2px;
  vertical-align: middle;
  image-rendering: pixelated;
}
.butt_ph {
  display: inline-block;
  background: #14241b;
  border: 1px dashed #6fdc8c;
  color: #6fdc8c;
  font-size: 9px;
  line-height: 29px;
  font-family: monospace;
}

/* copy-the-code box */
.codebox {
  width: 95%;
  height: 60px;
  font-family: monospace;
  font-size: 10px;
  background: #e8e4d8;
  border: 1px inset #999;
  resize: none;
}

/* ---------------- misc ---------------- */
.infotext {
  text-align: left;
  margin: 3px;
  font-family: "MS PGothic", "DotGothic16", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

.bannerimg { image-rendering: pixelated; border: 1px solid #0c140f; margin: 4px 2px; max-width: 100%; }

#dashedbord { border: 1px dashed black; margin: 10px; display: inline-block; background: rgba(255,255,255,0.65); }

.footerbar {
  display: inline-block;
  margin: 20px auto 40px;
  padding: 6px 18px;
  background: rgb(192,192,192);
  border: 2px outset #e6e6e6;
  font-size: 13px;
}
.footerbar .c { color: #d6336c; font-family: "DotGothic16", monospace; }

/* hide scrollbar helper (from daiko) */
.hide::-webkit-scrollbar { display: none; }
.hide { -ms-overflow-style: none; scrollbar-width: none; }