/* Anna Super Apps — intentional Y2K / GeoCities nightmare */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes rainbow {
  0% { color: red; }
  17% { color: orange; }
  33% { color: yellow; }
  50% { color: lime; }
  67% { color: cyan; }
  83% { color: blue; }
  100% { color: magenta; }
}
@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  background-color: #00ff00;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%23ffff00' width='20' height='20'/%3E%3Crect fill='%23ff00ff' x='20' y='20' width='20' height='20'/%3E%3C/svg%3E");
  color: #000080;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ctext y='18' font-size='18'%3E⭐%3C/text%3E%3C/svg%3E"), auto;
}

.ie-banner {
  background: #000080;
  color: #ffff00;
  text-align: center;
  padding: 4px;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 11px;
  border-bottom: 3px ridge #c0c0c0;
}

.outer-table {
  width: 100%;
  min-height: 100vh;
  border-collapse: collapse;
}

.side-gutter {
  width: 72px;
  background: repeating-linear-gradient(45deg, #ff0000, #ff0000 10px, #ffff00 10px, #ffff00 20px);
  vertical-align: top;
  text-align: center;
  font-size: 10px;
  color: #fff;
  font-weight: bold;
  padding: 8px 4px;
}

.main-cell {
  vertical-align: top;
  padding: 10px;
  max-width: 900px;
}

.marquee-wrap {
  overflow: hidden;
  background: #000;
  border: 4px double #ff00ff;
  margin-bottom: 12px;
  white-space: nowrap;
}

.marquee-inner {
  display: inline-block;
  padding: 8px 0;
  font-size: 16px;
  font-weight: bold;
  animation: marquee 14s linear infinite;
  color: #00ff00;
  text-shadow: 2px 2px #ff0000;
}

.header-box {
  text-align: center;
  background: linear-gradient(180deg, #ff69b4, #4b0082, #00ced1);
  border: 5px outset #fff;
  border-color: #fff #808080 #808080 #fff;
  padding: 16px;
  margin-bottom: 12px;
}

.header-box h1 {
  margin: 0 0 8px;
  font-size: clamp(22px, 5vw, 32px);
  font-family: "Times New Roman", Times, serif;
  color: #ffff00;
  text-decoration: underline;
  text-shadow: 3px 3px #ff0000;
}

.header-box .subtitle {
  font-size: 13px;
  color: #fff;
  margin: 0;
}

.blink {
  animation: blink 1s step-start infinite;
  color: #ff0000;
  font-weight: bold;
  font-size: 14px;
}

.rainbow {
  animation: rainbow 2s linear infinite;
  font-weight: bold;
  font-size: 13px;
}

.visitor-counter {
  display: inline-block;
  background: #000;
  color: #0f0;
  font-family: "Courier New", monospace;
  font-size: 14px;
  padding: 4px 10px;
  border: 2px inset #c0c0c0;
  letter-spacing: 3px;
  margin-top: 8px;
}

.nav-bar {
  width: 100%;
  background: #c0c0c0;
  border: 3px outset #fff;
  margin-bottom: 14px;
  border-collapse: collapse;
}

.nav-bar td {
  text-align: center;
  padding: 8px 4px;
  border: 1px inset #808080;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

.nav-bar a {
  color: #0000ff;
  text-decoration: underline;
}

.nav-bar a:visited { color: #800080; }

.content-frame {
  width: 100%;
  max-width: 820px;
  margin: 0 auto 16px;
  background: #c0c0c0;
  border: 4px outset #fff;
  padding: 3px;
}

.content-inner {
  background: #ffffcc;
  border: 2px inset #808080;
  padding: 18px 20px;
}

.content-inner.center { text-align: center; }

.content-inner h2 {
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
  color: #800000;
  margin: 0 0 12px;
  text-align: center;
  text-decoration: underline;
}

.content-inner h3 {
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  color: #000080;
  margin: 14px 0 8px;
}

.content-inner p,
.content-inner li {
  font-size: 13px;
  line-height: 1.55;
  color: #333;
  margin: 0 0 10px;
}

.content-inner ul,
.content-inner ol {
  margin: 8px 0 12px 24px;
}

.content-inner a {
  color: #0000ff;
  font-weight: bold;
}

.content-inner a:visited { color: #800080; }

.hr-rainbow {
  height: 8px;
  border: none;
  background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  margin: 16px 0;
}

.warning-box {
  background: #ffcccc;
  border: 3px dashed #ff0000;
  padding: 10px;
  margin-bottom: 14px;
  font-size: 12px;
  color: #800000;
  font-weight: bold;
  text-align: center;
}

.note-box {
  background: #cce5ff;
  border: 2px dotted #0000ff;
  padding: 10px;
  margin: 12px 0;
  font-size: 12px;
}

.important-box {
  background: #ffe0e0;
  border: 3px double #ff0000;
  padding: 10px;
  margin: 12px 0;
  font-size: 12px;
  color: #800000;
}

.retro-btn {
  font-family: Tahoma, Arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
  padding: 8px 20px;
  background: linear-gradient(180deg, #dfdfdf 0%, #a0a0a0 100%);
  border: 3px outset #fff;
  border-color: #fff #404040 #404040 #fff;
  color: #000;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.retro-btn:active { border-style: inset; }
.retro-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.retro-input,
.retro-textarea {
  width: 100%;
  padding: 8px;
  font-family: "Courier New", monospace;
  font-size: 14px;
  border: 2px inset #808080;
  background: #fff;
  margin-bottom: 10px;
}

.retro-input:focus,
.retro-textarea:focus {
  outline: 2px dotted #ff00ff;
  background: #ffff99;
}

.phone-row {
  display: table;
  width: 100%;
  margin-bottom: 12px;
}

.phone-prefix {
  display: table-cell;
  width: 48px;
  background: #e0e0e0;
  border: 2px inset #808080;
  padding: 8px;
  font-family: "Courier New", monospace;
  font-weight: bold;
  vertical-align: middle;
  text-align: center;
}

.phone-input {
  display: table-cell;
  width: 100%;
  padding: 8px;
  font-family: "Courier New", monospace;
  font-size: 16px;
  border: 2px inset #808080;
  background: #fff;
}

.error-msg {
  color: #ff0000;
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 10px;
  background: #ffe0e0;
  border: 1px solid #ff0000;
  padding: 6px;
  display: none;
}

.app-grid {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

.app-grid td {
  width: 33.33%;
  vertical-align: top;
  padding: 8px;
  text-align: center;
}

.app-grid-2x2 td {
  width: 50%;
  padding: 10px;
}

.app-tile {
  background: #e6e6fa;
  border: 3px ridge #4b0082;
  padding: 14px 10px 12px;
  min-height: 200px;
  position: relative;
  text-align: center;
  transition: transform 0.15s ease;
}

.app-tile:hover {
  transform: scale(1.02);
  background: #f0f0ff;
  border-color: #ff00ff;
}

.app-tile-hot {
  background: linear-gradient(180deg, #fff5cc 0%, #ffe6e6 100%);
  border-color: #cc0000;
}

.app-tile-top {
  background: linear-gradient(180deg, #e8ffe8 0%, #e6e6fa 100%);
  border-color: #006400;
}

.app-tile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  text-align: left;
}

.app-tile-icon {
  font-size: 40px;
  line-height: 1;
  flex-shrink: 0;
  background: #c0c0c0;
  border: 2px outset #fff;
  padding: 6px;
  min-width: 52px;
  text-align: center;
}

.app-tile-meta {
  flex: 1;
  min-width: 0;
}

.app-tile h4 {
  font-size: 14px;
  color: #800000;
  margin: 0 0 4px;
  text-align: left;
  line-height: 1.2;
}

.app-badge {
  display: inline-block;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 9px;
  font-weight: bold;
  padding: 2px 6px;
  margin: 0 2px 4px 0;
  border: 1px solid #000;
  letter-spacing: 0.5px;
}

.app-badge-hot { background: #ff0000; color: #ffff00; }
.app-badge-free { background: #00aa00; color: #fff; }
.app-badge-top { background: #000080; color: #ffff00; }
.app-badge-new { background: #ff00ff; color: #fff; }

.app-stars {
  font-size: 11px;
  color: #ff9900;
  letter-spacing: 1px;
  margin: 0 0 4px;
  text-align: left;
}

.app-stats {
  font-family: "Courier New", monospace;
  font-size: 9px;
  color: #444;
  margin: 0 0 8px;
  text-align: left;
}

.app-tile p {
  font-size: 11px;
  margin: 0 0 10px;
  line-height: 1.45;
  text-align: left;
  color: #222;
}

.app-tags {
  margin-bottom: 10px;
  text-align: left;
}

.app-tag {
  display: inline-block;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 9px;
  background: #d4d4d4;
  border: 1px inset #808080;
  padding: 2px 5px;
  margin: 0 3px 3px 0;
  color: #000080;
}

.app-tile .retro-btn {
  font-size: 12px;
  width: 100%;
  max-width: 200px;
}

.app-tile .emoji { font-size: 32px; display: block; margin-bottom: 8px; }

.apps-toolbar {
  background: #c0c0c0;
  border: 2px inset #808080;
  padding: 6px 10px;
  margin: 0 0 14px;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 10px;
  text-align: left;
  color: #000;
}

.apps-toolbar b { color: #000080; }

.apps-counter {
  display: inline-block;
  background: #000;
  color: #0f0;
  font-family: "Courier New", monospace;
  font-size: 10px;
  padding: 2px 8px;
  border: 2px inset #c0c0c0;
  margin-left: 8px;
  letter-spacing: 2px;
}

.support-strip {
  background: #ffffcc;
  border: 3px dashed #4b0082;
  padding: 12px 16px;
  margin-top: 14px;
  display: table;
  width: 100%;
  box-sizing: border-box;
}

.support-strip-icon {
  display: table-cell;
  font-size: 28px;
  vertical-align: middle;
  width: 48px;
}

.support-strip-body {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  font-size: 11px;
}

.support-strip-body h4 {
  margin: 0 0 4px;
  font-size: 13px;
  color: #800000;
}

.support-strip-body p { margin: 0 0 8px; }

.support-strip-action {
  display: table-cell;
  vertical-align: middle;
  width: 140px;
  text-align: right;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 12px 0;
  font-family: Tahoma, Arial, sans-serif;
}

.pricing-table th {
  background: #000080;
  color: #ffff00;
  padding: 8px;
  border: 2px inset #fff;
}

.pricing-table td {
  padding: 8px;
  border: 1px solid #808080;
  background: #fff;
  text-align: center;
}

.pricing-table tr:nth-child(even) td { background: #ffffcc; }

.legal-layout {
  width: 100%;
  border-collapse: collapse;
}

.legal-layout td { vertical-align: top; }

.legal-sidebar {
  width: 180px;
  padding-right: 10px;
}

.side-menu {
  background: #e0e0e0;
  border: 3px outset #fff;
  padding: 10px;
  font-size: 11px;
  font-family: Tahoma, Arial, sans-serif;
}

.side-menu h4 {
  margin: 0 0 8px;
  font-size: 12px;
  color: #800000;
  text-decoration: underline;
}

.side-menu ul { list-style: square; margin: 0 0 12px 16px; padding: 0; }
.side-menu li { margin-bottom: 4px; }
.side-menu a { color: #0000ff; }
.side-menu a.active { color: #ff0000; font-weight: bold; }

.legal-body h2 {
  font-family: "Times New Roman", Times, serif;
  font-size: 15px;
  color: #800000;
  background: #ffcccc;
  border-left: 5px solid #ff0000;
  padding: 6px 10px;
  margin: 20px 0 10px;
}

.legal-body h2:first-child { margin-top: 0; }

.legal-body h3 {
  font-size: 13px;
  color: #000080;
  margin: 12px 0 6px;
}

.footer-links {
  text-align: center;
  font-size: 11px;
  margin-top: 16px;
  font-family: Arial, sans-serif;
}

.footer-links a { color: #0000ff; text-decoration: underline; }
.footer-links a:visited { color: #800080; }

.guestbook {
  margin-top: 12px;
  padding: 8px;
  background: #e6e6fa;
  border: 2px dotted #4b0082;
  font-size: 11px;
  text-align: center;
}

.construction {
  font-size: 11px;
  color: #666;
  margin-top: 10px;
  font-family: Arial, sans-serif;
  text-align: center;
}

.midi-note {
  font-size: 10px;
  color: #808080;
  font-style: italic;
  text-align: center;
}

.spinny {
  display: inline-block;
  animation: spin 3s linear infinite;
  font-size: 24px;
}

.award-badge {
  display: inline-block;
  background: #ffff00;
  border: 2px solid #ff0000;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: bold;
  margin: 4px;
  transform: rotate(-3deg);
}

@media (max-width: 700px) {
  .side-gutter { display: none; }
  .app-grid td,
  .app-grid-2x2 td { display: block; width: 100%; }
  .support-strip,
  .support-strip-icon,
  .support-strip-body,
  .support-strip-action {
    display: block;
    width: 100%;
    text-align: center;
  }
  .support-strip-action { margin-top: 10px; }
  .legal-sidebar { display: block; width: 100%; padding: 0 0 12px; }
  .legal-layout tr { display: block; }
  .legal-layout td { display: block; }
}