:root {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  color: #fff;
  background: #00006b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  padding: 12px;
  background-color: #00004f;
  background-image: radial-gradient(#fff 1px, transparent 1px), radial-gradient(#00ffff 1px, transparent 1px);
  background-position: 0 0, 17px 17px;
  background-size: 34px 34px;
}

.page-shell {
  width: min(100%, 1080px);
  margin: auto;
  border: 5px ridge #00ffff;
  background: #000080;
  box-shadow: 0 0 22px #00ffff, 0 0 45px #ff00ff;
}

.construction {
  padding: 5px;
  overflow: hidden;
  color: #000;
  background: repeating-linear-gradient(135deg, #ffec00 0 14px, #000 14px 28px);
  font: bold 13px Arial, sans-serif;
  text-align: center;
  text-shadow: 1px 1px #ffec00, -1px -1px #ffec00, 1px -1px #ffec00, -1px 1px #ffec00;
  letter-spacing: 2px;
}

.title-row { display: flex; align-items: center; justify-content: center; gap: 34px; padding: 18px 12px 13px; text-align: center; }
.welcome { margin: 0 0 3px; color: #00ffff; font-size: 14px; }
h1 { margin: 0; color: #fff; font: 900 clamp(36px, 7vw, 68px)/.72 Impact, sans-serif; letter-spacing: 2px; text-shadow: 4px 4px 0 #ff00ff, 7px 7px 0 #000; transform: rotate(-2deg); }
h1 span { color: #00ffff; font-size: 1.08em; }
.ball { font-size: clamp(38px, 7vw, 70px); filter: drop-shadow(4px 4px #ff00ff); animation: spin 5s linear infinite; }
.mirror { animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.marquee { overflow: hidden; border-block: 3px outset #fff; color: #000; background: #00ffff; font: bold 15px "Courier New", monospace; white-space: nowrap; }
.marquee span { display: inline-block; min-width: 100%; padding: 7px 0; animation: scroll 15s linear infinite; }
@keyframes scroll { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

.columns { display: grid; grid-template-columns: 170px minmax(0, 1fr) 170px; gap: 12px; padding: 12px; align-items: start; }
.sidebar { display: grid; gap: 12px; }
.web-box { border: 3px ridge #c0c0c0; color: #000; background: #c0c0c0; font: 13px Arial, sans-serif; text-align: center; box-shadow: 4px 4px 0 #000; }
.web-box h2 { margin: 0; padding: 6px 3px; color: #fff; background: linear-gradient(90deg, #000080, #1084d0); font-size: 14px; letter-spacing: 1px; }
.web-box p { margin: 10px 6px; }
nav { padding: 4px; text-align: left; }
nav a { display: block; margin: 3px 0; padding: 7px 5px; border: 2px outset #eee; color: #000080; background: #eee; font-weight: bold; text-decoration: none; }
nav a:hover, nav a:focus { color: #fff; background: #ff00ff; outline: 1px dotted #fff; }
.force-gif { display: block; width: 150px; height: 48px; margin: 0 auto; image-rendering: pixelated; }
.counter-box strong { display: inline-block; padding: 3px 6px; border: 2px inset #aaa; color: #00ff00; background: #000; font: 20px "Courier New", monospace; letter-spacing: 2px; }
.sun { padding-top: 8px; font-size: 45px; animation: pulse .65s steps(2) infinite; }
@keyframes pulse { 50% { transform: scale(1.2); } }
.news-box p { line-height: 1.35; }
.news-box hr { width: 80%; border: 0; border-top: 1px dashed #555; }
.guestbook p { color: #800080; font-style: italic; }
.guestbook small { display: block; margin: 8px; }

.main-content { min-width: 0; }
.photo-frame { position: relative; margin: 0 0 12px; padding: 7px 7px 23px; border: 4px ridge #ffff00; background: #fff; transform: rotate(.5deg); }
.photo-frame img { display: block; width: 100%; height: 150px; border: 1px solid #000; object-fit: cover; filter: saturate(1.8) contrast(1.15); image-rendering: pixelated; }
.photo-frame::after { content: "13"; position: absolute; right: 20px; top: 14px; color: #fff; font: 900 46px Impact, sans-serif; text-shadow: 3px 3px #00a9e0, -2px -2px #00a9e0; transform: rotate(10deg); }
.photo-frame p { position: absolute; bottom: 4px; left: 0; width: 100%; margin: 0; color: #000080; font: 11px "Courier New", monospace; text-align: center; }

.upload-card { padding: 8px; border: 6px ridge #c0c0c0; color: #000; background: #e8e8e8; box-shadow: 6px 6px 0 #000; }
.card-heading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; border: 2px inset #aaa; color: #fff; background: #000080; text-align: center; }
.card-heading > span { font-size: 28px; }
.card-heading p { margin: 0; color: #ffff00; font: bold 11px Arial, sans-serif; }
.card-heading h2 { margin: 1px 0 0; color: #00ffff; font-size: clamp(22px, 5vw, 30px); text-shadow: 2px 2px #ff00ff; }
.intro { margin: 12px auto; text-align: center; line-height: 1.45; }
.intro b { color: #ff0000; text-decoration: underline; }
.intro em { color: #000080; font-size: 12px; }
.dropzone { display: flex; min-height: 175px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; border: 4px dashed #000080; color: #000080; background: repeating-linear-gradient(-45deg, #fff 0 10px, #e5ffff 10px 20px); cursor: pointer; text-align: center; }
.dropzone:hover, .dropzone:focus-within, .dropzone.dragging { border-color: #ff00ff; color: #ff00ff; background: #ffff99; }
.floppy { font-size: 46px; filter: drop-shadow(3px 3px #00ffff); }
.dropzone strong { font: bold 15px Arial, sans-serif; text-decoration: underline; }
.dropzone span:last-of-type { max-width: 100%; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
input[type=file] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
button { width: 100%; margin-top: 12px; padding: 15px 10px; border: 5px outset #efefef; color: #fff; background: #ff00a8; font: bold clamp(15px, 3vw, 20px) "Comic Sans MS", cursive; text-shadow: 2px 2px #000; cursor: pointer; }
button:hover { color: #000; background: #00ffff; text-shadow: none; }
button:active { border-style: inset; transform: translate(2px, 2px); }
.note { margin: 12px 0 0; color: #005000; font: bold 10px Arial, sans-serif; text-align: center; }
.fine-print { margin: 3px 0 0; color: #555; font-size: 9px; text-align: center; }
.error { margin: 10px 0; padding: 9px; border: 3px double #ff0000; color: #fff; background: #ff0000; font: bold 13px Arial, sans-serif; text-align: center; animation: blink .8s steps(2) infinite; }
@keyframes blink { 50% { color: #ffff00; } }

footer { padding: 13px; border-top: 3px ridge #fff; color: #c0c0c0; background: #000; font: 11px "Courier New", monospace; text-align: center; }
footer p { margin: 4px; }
footer a { color: #00ffff; }
.badges span { display: inline-block; margin: 5px 2px; padding: 3px 5px; border: 2px outset #fff; color: #fff; background: #555; font: bold 9px Arial, sans-serif; }

@media (max-width: 780px) {
  body { padding: 5px; }
  .columns { grid-template-columns: 135px minmax(0, 1fr); }
  .right-sidebar { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .title-row { gap: 12px; }
}
@media (max-width: 550px) {
  .columns { display: flex; flex-direction: column; }
  .main-content { order: -1; width: 100%; }
  .sidebar { width: 100%; grid-template-columns: repeat(2, 1fr); }
  .right-sidebar { grid-template-columns: 1fr; }
  .force-gif { align-self: center; }
  .ball { display: none; }
  .photo-frame img { height: 110px; }
  .construction { font-size: 10px; }
}