/* =====================================================================
   STO LAT!!! — strona w stylu lat 2000
   ---------------------------------------------------------------------
   1. Tło i ogólne czcionki (czarny motyw)
   2. Główna tabela ramki
   3. Pasek przewijany (marquee)
   4. Nagłówek + tęczowy napis
   5. Menu (przyciski "wypukłe")
   6. Treść / kolumny
   7. Tort i świeczki (@keyframes)
   8. Dym po zdmuchnięciu
   9. Przycisk ZDMUCHNIJ
   10. Panel boczny: budowa, plakietki, webring
   11. Stopka
   12. Ozdoby (opadające, ślad kursora)
   13. Responsywność
   ===================================================================== */

/* ---------- 1. Tło i czcionki ---------- */
body {
  margin: 0;
  padding: 12px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  color: #ffd6f2;
  background-color: #000000;
  overflow-x: hidden;
}

a { color: #7fb6ff; }
a:visited { color: #d9a0ff; }

.center { text-align: center; }

.tiny {
  font-size: 11px;
  color: #cc99dd;
  margin: 4px 0;
}

/* ---------- 2. Główna tabela ---------- */
.frame {
  width: min(940px, 98%);
  border: 5px ridge #ff66cc;
  background: #1f0a33;
  border-spacing: 0;
}

/* ---------- 3. Pasek przewijany ---------- */
.marquee-cell {
  background: #000033;
  border-bottom: 4px ridge #6666ff;
  overflow: hidden;
}

.ticker {
  color: #66ff66;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
}

.ticker-2 {
  color: #ff77aa;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 13px;
  white-space: nowrap;
}

/* ---------- 4. Nagłówek ---------- */
.header-cell {
  text-align: center;
  padding: 20px 10px 12px;
  background: linear-gradient(180deg, #3a0d33 0%, #1f0a33 100%);
  border-bottom: 5px ridge #ff66cc;
}

.fire-title {
  margin: 0;
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  font-weight: bold;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #ff6b6b, #ffa94d, #ffe066, #69db7c, #74c0fc, #b197fc, #ff7ac8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 2px 2px 0 #000000, 0 0 18px rgba(255, 120, 200, 0.85);
}

.highlight {
  font-size: clamp(1rem, 3vw, 1.3rem);
  font-weight: bold;
  color: #ff88c8;
}

/* migający tekst — zamiennik <blink> */
.blink {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ---------- 5. Menu ---------- */
.menu-cell {
  text-align: center;
  padding: 8px;
  background: #2b2b33;
  border-bottom: 4px ridge #555566;
}

.menu-btn {
  display: inline-block;
  margin: 2px 4px;
  padding: 4px 12px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-weight: bold;
  font-size: 14px;
  color: #ffffff;
  text-decoration: none;
  background: #44445a;
  border: 3px outset #777790;
}

.menu-btn:hover {
  border-style: inset;
  background: #3a3a4d;
}

.menu-btn:active {
  border-style: inset;
  background: #2f2f3f;
}

/* ---------- 6. Treść / kolumny ---------- */
.content-cell {
  background: #1c1230;
}

.content-table {
  border-collapse: collapse;
}

.left-col {
  background: #241536;
  border-right: 4px ridge #ff66cc;
  padding-bottom: 18px;
}

.section-title {
  margin: 4px 0 10px;
  font-size: 22px;
  color: #ff9ad5;
  text-align: center;
  letter-spacing: 1px;
}

.intro {
  font-size: 14px;
  margin-bottom: 14px;
  text-align: center;
}

.right-col {
  background: #16233a;
}

/* ---------- 7. Tort i świeczki ---------- */
.cake {
  position: relative;
  width: min(360px, 100%);
  margin: 24px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.candles {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: clamp(14px, 4vw, 26px);
  margin-bottom: -12px;
}

.candle {
  position: relative;
  width: 16px;
  height: 72px;
}

.candle-body {
  position: absolute;
  inset: 0;
  border-radius: 4px 4px 2px 2px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 60%),
    repeating-linear-gradient(90deg, var(--stripe-1, #ffffff) 0 7px, var(--stripe-2, #ff9ec0) 7px 14px);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
}

.wick {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 6px;
  background: #6b4a2f;
  border-radius: 1px;
}

.flame-wrap {
  position: absolute;
  bottom: calc(100% - 4px);
  left: 50%;
  transform: translateX(-50%);
}

.flame {
  width: 18px;
  height: 26px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 75%, #fff6b8 0 22%, #ffd75e 45%, #ffa22e 72%, rgba(255, 92, 0, 0.55) 100%);
  box-shadow: 0 0 10px 3px rgba(255, 170, 60, 0.5);
  transform-origin: 50% 100%;
  transition: opacity 0.35s ease;
  animation: flicker 0.45s ease-in-out infinite;
  will-change: transform;
}

/* migotanie płomieni */
@keyframes flicker {
  0%   { transform: scale(1, 1) rotate(-2.5deg); }
  20%  { transform: scale(1.06, 1.12) rotate(2deg); }
  40%  { transform: scale(0.95, 1.04) rotate(-1.5deg); }
  60%  { transform: scale(1.08, 1.16) rotate(1.5deg); }
  80%  { transform: scale(0.97, 1.02) rotate(-1deg); }
  100% { transform: scale(1, 1) rotate(-0.5deg); }
}

.candle:nth-child(2) .flame { animation-delay: -0.12s; }
.candle:nth-child(3) .flame { animation-delay: -0.3s; }
.candle:nth-child(4) .flame { animation-delay: -0.2s; }
.candle:nth-child(5) .flame { animation-delay: -0.38s; }

/* warstwy ciasta */
.layer {
  position: relative;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8cd7f 0%, #eda95a 55%, #df9c4d 100%);
  box-shadow: 0 6px 14px rgba(107, 74, 47, 0.28);
}

.layer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 34%;
  min-height: 26px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, #ffc9dd 0%, #ff9ec0 100%);
}

.layer::after {
  content: "";
  position: absolute;
  top: 26%;
  left: 0;
  right: 0;
  height: 18px;
  background:
    radial-gradient(circle at 6%  0, #ff9ec0 9px, transparent 10px),
    radial-gradient(circle at 20% 0, #ff9ec0 6px, transparent 7px),
    radial-gradient(circle at 36% 0, #ff9ec0 11px, transparent 12px),
    radial-gradient(circle at 52% 0, #ff9ec0 7px, transparent 8px),
    radial-gradient(circle at 68% 0, #ff9ec0 12px, transparent 13px),
    radial-gradient(circle at 84% 0, #ff9ec0 6px, transparent 7px),
    radial-gradient(circle at 96% 0, #ff9ec0 9px, transparent 10px);
}

.layer-top {
  width: 70%;
  height: 84px;
  z-index: 2;
}

.layer-bottom {
  width: 100%;
  height: 108px;
  margin-top: 4px;
  z-index: 1;
}

.cherry {
  position: absolute;
  top: 34%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd0d8 0 4px, #e02f5b 5px 100%);
  box-shadow: 0 3px 4px rgba(160, 20, 50, 0.35);
}

.cherry::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 55%;
  width: 10px;
  height: 7px;
  background: #58b26c;
  border-radius: 100% 0 100% 0;
}

.cherry:nth-of-type(1) { left: 16%; }
.cherry:nth-of-type(2) { left: 50%; transform: translateX(-50%); }
.cherry:nth-of-type(3) { right: 14%; }

.sprinkles {
  position: absolute;
  top: 20%;
  left: 4%;
  right: 4%;
  height: 12px;
  border-radius: 3px;
  background:
    radial-gradient(ellipse 10px 3px at 8% 50%,  #8ecbf5 transparent 55%),
    radial-gradient(ellipse 10px 3px at 24% 40%, #ffd166 transparent 55%),
    radial-gradient(ellipse 10px 3px at 42% 60%, #7bd8a8 transparent 55%),
    radial-gradient(ellipse 10px 3px at 60% 35%, #b388eb transparent 55%),
    radial-gradient(ellipse 10px 3px at 78% 55%, #ff9e57 transparent 55%),
    radial-gradient(ellipse 10px 3px at 94% 45%, #8ecbf5 transparent 55%);
}

.plate {
  width: 118%;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #ffe3f0 100%);
  box-shadow: 0 8px 16px rgba(90, 58, 78, 0.18);
}

/* ---------- 8. Dym po zdmuchnięciu ---------- */
.smoke {
  position: absolute;
  bottom: calc(100% - 2px);
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: rgba(200, 200, 212, 0.85);
  filter: blur(1.5px);
  opacity: 0;
  pointer-events: none;
}

.smoke::before,
.smoke::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  opacity: 0;
}

.cake.blown .flame {
  animation: none;
  opacity: 0;
  box-shadow: none;
}

.cake.blown .candle .smoke {
  animation: smoke-rise 1.5s ease-out forwards;
}

.cake.blown .candle .smoke::before { animation: smoke-rise 1.5s ease-out 0.2s forwards; }
.cake.blown .candle .smoke::after  { animation: smoke-rise 1.5s ease-out 0.4s forwards; }

.cake.blown .candle:nth-child(2n) .smoke     { --dx: -12px; }
.cake.blown .candle:nth-child(2n+1) .smoke   { --dx: 12px; }
.cake.blown .candle:nth-child(3) .smoke      { --dx: 0px; }

@keyframes smoke-rise {
  0%   { transform: translate(0, 0) scale(0.5); opacity: 0.9; }
  30%  { opacity: 0.8; }
  100% { transform: translate(var(--dx, 8px), -46px) scale(2.2); opacity: 0; }
}

/* ---------- 9. Przycisk ZDMUCHNIJ ---------- */
.retro-btn {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-weight: bold;
  font-size: clamp(1rem, 3vw, 1.25rem);
  color: #ffffff;
  padding: 10px 22px;
  cursor: pointer;
  background: linear-gradient(180deg, #ff6666 0%, #cc0000 100%);
  border: 4px outset #ff9999;
}

.retro-btn:hover {
  filter: brightness(1.12);
  border-style: inset;
}

.retro-btn:active {
  border-style: inset;
  filter: brightness(0.95);
}

.retro-btn:focus-visible {
  outline: 3px dashed #ff00ff;
  outline-offset: 3px;
}

/* link używający stylu przycisku */
a.retro-link {
  display: inline-block;
  text-decoration: none;
}

/* tabela aktualności na stronie głównej */
.news-table {
  border-collapse: collapse;
  border-color: #ff66cc;
  font-size: 13px;
}

.news-table td {
  background: #2a163f;
  color: #ffd6f2;
}

.news-date {
  white-space: nowrap;
  font-weight: bold;
  color: #ff88c8;
}

/* ---------- 10. Panel boczny ---------- */
.construction {
  background: repeating-linear-gradient(45deg, #ffcc00 0 12px, #000000 12px 24px);
  border: 4px ridge #000000;
  text-align: center;
  padding: 10px;
}

.construction span {
  display: block;
  background: #000000;
  color: #ffcc00;
  font-weight: bold;
  padding: 4px 6px;
  border: 2px outset #888800;
}

.construction small {
  display: block;
  margin-top: 6px;
  color: #ffffff;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.55);
}

.right-title {
  margin: 16px 0 6px;
  font-size: 16px;
  color: #7fb6ff;
  text-align: center;
  border-bottom: 2px dashed #4a7fd4;
  padding-bottom: 3px;
}

/* plakietki 88x31 */
.badges {
  text-align: center;
}

.badge {
  display: inline-block;
  width: 88px;
  height: 31px;
  margin: 2px;
  box-sizing: border-box;
  border: 1px solid #000000;
  font-family: Verdana, Arial, sans-serif;
  font-size: 9px;
  font-weight: bold;
  line-height: 1.25;
  text-align: center;
  padding: 3px 2px;
  vertical-align: top;
}

.badge-notepad { background: linear-gradient(180deg, #eeeeee, #9999ff); color: #000000; }
.badge-ie      { background: linear-gradient(180deg, #66ccff, #0066cc); color: #ffffff; }
.badge-netscape{ background: linear-gradient(180deg, #ff6666, #aa0000); color: #ffffff; }
.badge-html4   { background: linear-gradient(180deg, #ffff66, #ffaa00); color: #000000; }
.badge-800x600 { background: #000000; color: #00ff00; border-color: #00ff00; }
.badge-comic   { background: linear-gradient(180deg, #ff99cc, #ff3366); color: #ffffff; }
.badge-email   { background: linear-gradient(180deg, #99ff99, #006600); color: #ffffff; }

.webring {
  text-align: center;
  font-size: 13px;
}

/* ---------- 11. Stopka ---------- */
.footer-cell {
  text-align: center;
  padding: 10px;
  background: linear-gradient(180deg, #0d2b1a 0%, #082017 100%);
  border-top: 5px ridge #33cc66;
}

/* ---------- 12. Ozdoby ---------- */
/* opadające ozdoby w tle */
.stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.deco-fall {
  position: absolute;
  top: -40px;
  font-size: 16px;
  opacity: 0.85;
  animation: deco-fall linear infinite;
  will-change: transform;
}

@keyframes deco-fall {
  0%   { transform: translateY(-10vh) rotate(0deg); }
  100% { transform: translateY(110vh) rotate(360deg); }
}

/* ślad za kursorem */
.mouse-trail {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

.trail-star {
  position: absolute;
  font-size: 14px;
  animation: trail-fade 0.8s ease-out forwards;
}

@keyframes trail-fade {
  0%   { transform: translateY(0) scale(1);   opacity: 1; }
  100% { transform: translateY(-18px) scale(0.2); opacity: 0; }
}

/* ---------- 13. Responsywność ---------- */
@media (max-width: 640px) {
  body { padding: 6px; }

  .content-table,
  .content-table tbody,
  .content-table tr,
  .content-table td {
    display: block;
    width: 100%;
  }

  .left-col { border-right: none; border-bottom: 4px ridge #ff66cc; }
  .right-col { width: 100% !important; }
  .badges { text-align: center; }

  .cake { width: 280px; }
  .layer-top { height: 72px; }
  .layer-bottom { height: 92px; }
  .plate { height: 20px; }
  .candle { height: 62px; }
  .flame { width: 16px; height: 22px; }
}