/* ~*~*~ Stop Drinking Binit — GeoCities edition ~*~*~ */

body {
  margin: 0;
  padding: 20px 8px;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive, sans-serif;
  /* classic teal desktop with a dotted "star field" tile */
  background-color: #008080;
  background-image:
    radial-gradient(#66cccc 1px, transparent 1.5px),
    radial-gradient(#005f5f 1px, transparent 1.5px);
  background-size: 28px 28px, 28px 28px;
  background-position: 0 0, 14px 14px;
}

table.page {
  width: 720px;
  max-width: 98%;
  margin: 0 auto;
  background: #ffffcc;
  border: 6px ridge #ff9900;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
}

/* ---- header ---- */
td.header {
  background: linear-gradient(180deg, #0033cc 0%, #3366ff 45%, #99ccff 100%);
  text-align: center;
  padding: 18px 10px 14px;
  border-bottom: 4px ridge #ffcc00;
}
.wordart {
  display: inline-block;
  font-family: Impact, "Arial Black", Arial, sans-serif;
  font-size: 44px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffff00 0%, #ff9900 35%, #ff0000 70%, #990099 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: skew(-8deg) rotate(-2deg);
  filter: drop-shadow(3px 3px 0 #000000);
}
.tagline {
  color: #ffff99;
  font-weight: bold;
  font-size: 13px;
  margin-top: 6px;
  text-shadow: 1px 1px 0 #000066;
}

/* ---- marquee bar ---- */
td.marquee-row {
  background: #000066;
  color: #00ff00;
  font-weight: bold;
  font-size: 14px;
  padding: 4px 0;
  border-bottom: 3px ridge #ffcc00;
}

/* ---- content ---- */
td.content { padding: 16px; text-align: center; }

.streak-box {
  border: 5px ridge #ff0000;
  background: #ffff99;
  padding: 10px;
  margin: 6px auto 14px;
  width: 90%;
}
.streak-label { font-size: 13px; font-weight: bold; color: #990099; }
.streak {
  font-family: Impact, "Arial Black", Arial, sans-serif;
  font-size: 46px;
  color: #ff0000;
  text-shadow: 2px 2px 0 #ffcc00, 4px 4px 0 #00000033;
  margin-top: 4px;
}
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }

.milestone {
  border: 4px dashed #ff00ff;
  background: #ccffcc;
  color: #ff0000;
  font-weight: bold;
  font-size: 22px;
  padding: 8px;
  margin: 0 auto 12px;
  width: 90%;
  animation: flash 0.5s steps(1) infinite;
}
@keyframes flash {
  0%   { background: #ccffcc; color: #ff0000; }
  50%  { background: #ff00ff; color: #ffff00; }
}

/* ---- stats table ---- */
table.stats {
  margin: 0 auto 16px;
  border-collapse: separate;
  border-spacing: 6px;
}
table.stats td {
  border: 4px ridge #3366ff;
  background: #ffffff;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: bold;
  color: #000066;
}
table.stats .big { display: block; font-size: 24px; color: #ff6600; }

/* ---- calendar ---- */
.cal-nav { margin-bottom: 8px; }
.cal-title {
  display: inline-block;
  min-width: 180px;
  font-size: 20px;
  font-weight: bold;
  color: #cc0000;
  text-shadow: 1px 1px 0 #ffcc00;
}
.btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  background: #d4d0c8;
  border: 3px outset #ffffff;
  padding: 3px 12px;
  cursor: pointer;
}
.btn:active { border-style: inset; }
.btn:disabled { color: #999999; cursor: default; }

table.cal {
  margin: 0 auto;
  border-collapse: collapse;
  background: #ffffff;
  border: 5px ridge #009900;
}
table.cal th {
  background: linear-gradient(180deg, #009900, #66ff66);
  color: #ffffff;
  text-shadow: 1px 1px 0 #003300;
  font-size: 12px;
  padding: 4px 6px;
  border: 2px ridge #66cc66;
}
table.cal td {
  border: 2px inset #cccccc;
  width: 58px;
  height: 54px;
  vertical-align: top;
  position: relative;
  font-size: 11px;
  background: #ffffff;
}
table.cal td.empty { background: #eeeecc; }
table.cal td.today { background: #ffffaa; outline: 2px dashed #ff6600; outline-offset: -3px; }
table.cal td.future { background: #f4f4f4; color: #bbbbbb; }
table.cal td.clickable { cursor: pointer; }
table.cal td.clickable:hover { background: #ccffff; }
.daynum { position: absolute; top: 2px; left: 4px; color: #666666; }
table.cal td.is-dry { background: #ccffcc; }
table.cal td.is-drank { background: #ffdddd; }
.x-dry {
  display: block;
  text-align: center;
  font-family: "Comic Sans MS", cursive;
  font-size: 38px;
  font-weight: bold;
  line-height: 52px;
  color: #009900;
  text-shadow: 1px 1px 0 #006600;
  transform: rotate(-4deg);
}
.x-drank { display: block; text-align: center; font-size: 26px; line-height: 52px; }
.day1-flag {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #ff6600;
  color: #ffffff;
  font-size: 9px;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px 0 #993300;
  border-top: 1px solid #993300;
}

.cal-legend { font-size: 12px; color: #333333; margin-top: 8px; }

/* ---- admin bits ---- */
.panel {
  border: 4px ridge #9966ff;
  background: #eeeeff;
  padding: 12px;
  margin: 14px auto;
  width: 90%;
}
.panel h3 { margin: 0 0 8px; color: #660099; font-size: 16px; }
.panel input {
  font-family: inherit;
  font-size: 14px;
  border: 2px inset #999999;
  padding: 3px 6px;
  width: 130px;
}
.panel label { font-size: 13px; font-weight: bold; color: #000066; }
.formrow { margin: 6px 0; }
.msg { font-size: 13px; font-weight: bold; color: #009900; min-height: 18px; }
.msg.err { color: #ff0000; }

/* ---- footer ---- */
td.footer {
  background: #333366;
  color: #ffffcc;
  text-align: center;
  font-size: 11px;
  padding: 12px;
  border-top: 4px ridge #ffcc00;
}
.counter { margin: 6px 0; }
.counter .digit {
  display: inline-block;
  background: #000000;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-size: 18px;
  font-weight: bold;
  border: 1px solid #00aa00;
  padding: 2px 5px;
  margin: 0 1px;
}
.badge {
  display: inline-block;
  background: linear-gradient(180deg, #6699ff, #003399);
  color: #ffffff;
  border: 2px outset #99ccff;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  padding: 3px 8px;
  margin: 4px 3px;
}
.construction {
  display: inline-block;
  background: repeating-linear-gradient(45deg, #ffcc00 0 12px, #000000 12px 24px);
  color: #ffffff;
  text-shadow: 1px 1px 2px #000000;
  font-weight: bold;
  font-size: 12px;
  padding: 4px 10px;
  border: 2px solid #000000;
  margin: 4px 3px;
}
td.footer a { color: #66ffff; }

/* ---- confetti ---- */
.confetti {
  position: fixed;
  top: -20px;
  width: 9px;
  height: 15px;
  z-index: 999;
  pointer-events: none;
  animation: fall 3s linear forwards;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(720deg); }
}