/* ======================================================================
   Hullumajandi vana (2003–2006) lehe kujundus, tehtud originaalpiltidega
   kaustast static/img/hm/ (päis, tulpade taustad, nuppude tekstuur, logo).
   Mõõdud, värvid ja fondid on võetud originaallehe koodist:
   Arial 10 px (menüü) / 13 px (sisu), sildid #00FF00, nupu tekstuur menyynuppudetagataust.jpg.
   ====================================================================== */
body.retro {
  --lime: #00ff00;
  --btnbg: url("img/hm/menyynuppudetagataust.jpg");
  --body: Arial, Helvetica, sans-serif;
  --display: Arial, Helvetica, sans-serif;
  --text: #fff; --paper: #fff;
  font: 13px/1.4 Arial, Helvetica, sans-serif;
  color: #fff; margin: 0; display: block; min-height: 100vh; background: #000;
}
.retro .page { max-width: 1360px; margin: 0 auto; background: #000; }
.retro a { color: #fff; }
.retro a:hover { color: #00ff00; }

/* ---------------------------------------------------------------- päis (136 px) */
.rh { display: grid; grid-template-columns: var(--lw, 172px) minmax(0, 1fr); height: 136px; background: #000; }
.rh-logo { position: relative; display: block; width: var(--lw, 172px); height: 136px; background: #000 url("img/hm/vasakylatagataust.jpg") no-repeat 0 0 / 100% 100%; }
.rh-logo img.hm { position: absolute; left: calc((100% - 139px) / 2); top: 13px; width: 139px; height: 109px; display: block; }
.rh-logo .blink { position: absolute; left: calc((100% - 139px) / 2 + 86px); top: 95px; width: 8px; height: 5px; display: block; }
.rh-logo .blink img { display: block; width: 8px; height: 5px; }
.rh-main { position: relative; overflow: hidden; background: #000 url("img/hm/yleminetagataust.jpg") repeat-x 0 0; }
.rh-pics { position: absolute; left: 86px; top: 13px; width: 494px; height: 71px; line-height: 0; }
.rh-pics img { width: 494px; height: 71px; display: block; }
.rh-rand { position: absolute; left: 594px; right: 14px; top: 13px; height: 71px; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; column-gap: 9px; row-gap: 90px; overflow: hidden; }
.rh-rand a { position: relative; flex: 0 0 auto; display: block; box-sizing: border-box; border: 2px solid #1eff1e; background: #000; overflow: hidden; width: 52px; height: 44px; }
.rh-rand a::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); pointer-events: none; }
.rh-rand a:nth-child(8n+1) { width: 60px; height: 40px; margin-top: 22px; }
.rh-rand a:nth-child(8n+2) { width: 42px; height: 52px; margin-top: 2px; }
.rh-rand a:nth-child(8n+3) { width: 56px; height: 44px; margin-top: 18px; }
.rh-rand a:nth-child(8n+4) { width: 64px; height: 46px; margin-top: 4px; }
.rh-rand a:nth-child(8n+5) { width: 40px; height: 50px; margin-top: 14px; }
.rh-rand a:nth-child(8n+6) { width: 54px; height: 42px; margin-top: 0; }
.rh-rand a:nth-child(8n+7) { width: 38px; height: 34px; margin-top: 24px; }
.rh-rand a:nth-child(8n+8) { width: 58px; height: 48px; margin-top: 10px; }
.rh-rand a:hover { border-color: #fff; }
.rh-rand img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rh-marq { position: absolute; left: 0; right: 0; top: 89px; height: 19px; background: url("img/hm/yleminetagataust.jpg") repeat-x 0 -89px; animation: hm-marq 18s linear infinite; pointer-events: none; }
@keyframes hm-marq { from { background-position: 0 -89px; } to { background-position: -263px -89px; } }
@media (prefers-reduced-motion: reduce) { .rh-marq { animation: none; } }
.rh-s { position: absolute; font-family: Arial, sans-serif; font-weight: bold; white-space: nowrap; }
.rh-s1 { left: 13px; top: 40px; font-size: 18px; line-height: 14px; }
.rh-s2 { left: 38px; top: 54px; font-size: 18px; line-height: 14px; }
.rh-s3 { left: 60px; top: 69px; font-size: 13px; line-height: 14px; }
.rh-date { position: absolute; left: 45px; top: 110px; font-size: 10px; color: #fff; }

/* ---------------------------------------------------------------- tulbad */
.cols { display: grid; grid-template-columns: var(--lw, 172px) minmax(0, 1fr) 153px; min-height: 520px; background: #000; }
.side { padding: 4px 0 14px; font-size: 10px; line-height: 12px; background: #000 repeat-y 0 0; }
.left { order: 1; position: relative; background-image: url("img/hm/menyytagataust.jpg"); background-size: 100% auto; padding-left: 21px; padding-right: 23px; }
.left::before, .left::after { content: ""; position: absolute; top: 0; bottom: 0; background: url("img/hm/menyytagataust.jpg") repeat-y; pointer-events: none; }
.left::before { left: 0; width: 20px; background-position: 0 0; }
.left::after { right: 0; width: 22px; background-position: 100% 0; }
.left > * { position: relative; z-index: 1; }
.right { order: 3; background-image: url("img/hm/paremtagataust.jpg"); padding-left: 23px; padding-right: 23px; }
.mid { order: 2; }
.lbl { text-align: center; color: #00ff00; font-size: 9px; line-height: 11px; margin: 4px 0 1px; text-shadow: 0 0 3px #00ff00; }
.mbox { border: 1px solid #d0d0d0; background: #123 var(--btnbg) 0 0 / 100% auto repeat-y; margin: 0 0 1px; }
.mbox > * { border-top: 1px solid #d0d0d0; }
.mbox > *:first-child { border-top: 0; }
.mi, .mbox .mi { display: block; padding: 1px 2px; color: #fff; text-decoration: none; font-size: 10px; line-height: 13px; background: none; border: 0; border-top: 1px solid #d0d0d0; width: 100%; text-align: left; font-family: Arial, sans-serif; cursor: pointer; }
.mbox > .mi:first-child { border-top: 0; }
.mi b { font-weight: bold; }
.mi:hover, .mi.open { background: rgba(0, 255, 0, .18); color: #fff; }
.mtxt { display: block; padding: 2px; color: #fff; font-size: 10px; line-height: 12px; word-break: break-word; }
.mtxt a { text-decoration: none; }
.mtxt a:hover { text-decoration: underline; }
.mtxt a.cur, .mi.cur { color: #ffff00; font-weight: bold; }
.mtxt small { opacity: .85; font-size: 9px; }
.mbox.sub { margin: -1px 0 1px 0; }
.right form, .left form { margin: 0; }
.lgn input { display: block; width: 100%; margin: 0; padding: 1px 3px; font: 10px Arial, sans-serif; color: #fff; background: #04230f var(--btnbg) 0 0 / 100% auto repeat-y; border: 0; border-top: 1px solid #d0d0d0; border-radius: 0; height: 17px; }
.lgn input:first-child { border-top: 0; }
.lgn input::placeholder { color: #a0c8a0; }
.lgn input:focus { outline: 1px solid #00ff00; box-shadow: none; }
.hmx { display: block; margin: 6px auto 0; width: 97px; height: 36px; }
.mid .note { font-size: 10px; }

/* ---------------------------------------------------------------- keskosa */
.mid { background: #1e220f url("img/hm/sisutagataust.jpg"); }

/* ---------------------------------------------------------------- keskpaneel */
.mid { padding: 14px 16px 30px; min-width: 0; color: #fff; }
.retro main.mid { max-width: none; margin: 0; flex: none; }
.retro h1, .retro h2, .retro h3 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; letter-spacing: 0; color: #fff; }
.retro h1 { font-size: 28px; margin: 0 0 8px; }
.retro h2 { font-size: 20px; margin: 22px 0 10px; padding: 0 0 4px; background: none; border-bottom: 1px dashed #e8e8d0; color: var(--lime); }
.retro h3 { font-size: 16px; }
.retro .hl { background: none; color: var(--lime); padding: 0; }
.retro .muted { color: #c8d4b8; }
.retro .crumbs { color: #c8d4b8; font-size: 13px; }
.retro .crumbs a { font-weight: bold; }
.retro .sticker, .retro h3.sticker { background: var(--btn); color: #fff; border: 2px solid #f1f1e4; border-radius: 0; box-shadow: none; transform: none; padding: 1px 8px; }
.retro .flash { background: #04230f; border: 2px solid #f1f1e4; border-radius: 0; color: #fff; padding: 6px 10px 6px 34px; }
.retro .evdesc { border-left: 3px solid var(--lime); color: #fff; font-size: 15px; max-width: 70ch; }

/* nupud (keskel) — samad rohelised ristkülikud valge äärega */
.retro .btn, .retro button.btn {
  background: var(--btn); color: #fff; border: 2px solid #f1f1e4; border-radius: 0; box-shadow: none;
  font: bold 14px/17px Arial, sans-serif; padding: 3px 10px; transform: none;
}
.retro .btn:hover { background: #0c6a2c; color: #fff; border-color: #fff; transform: none; }
.retro .btn.primary { background: #0c7a2c; color: #fff; border-color: #fff; box-shadow: none; }
.retro .btn.primary:hover { background: #12a03c; transform: none; box-shadow: none; }
.retro .btn.danger { background: #8c0d12; color: #fff; border-color: #f1f1e4; box-shadow: none; }
.retro .btn.danger:hover { background: #c0151c; }
.retro .btn.sticker-btn { transform: none; }
.retro input, .retro select, .retro textarea {
  background: #04230f; color: #fff; border: 2px solid #f1f1e4; border-radius: 0; font: 14px Arial, sans-serif; padding: 4px 6px;
}
.retro input:focus, .retro select:focus, .retro textarea:focus { border-color: var(--lime); box-shadow: none; outline: none; }
.retro input::file-selector-button { background: var(--btn); color: #fff; border: 2px solid #f1f1e4; border-radius: 0; font: bold 13px Arial; padding: 2px 8px; }
.retro .form label { font-weight: bold; font-size: 14px; }
.retro th { color: var(--lime); font-family: Arial, sans-serif; letter-spacing: 0; text-transform: none; font-size: 14px; }
.retro th, .retro td { border-bottom: 1px dashed #5b7a40; }
.retro main > section { background: rgba(4,35,15,.72); border: 2px solid #f1f1e4; border-radius: 0; box-shadow: none; padding: 6px 16px 16px; margin: 16px 0; }

/* albumi/ürituse kaardid: rohelise äärega raamitud pisipildid nagu päise fotoriba */
.retro .events { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 16px; padding: 4px 0 0; }
.retro .polaroid {
  background: #04230f; color: #fff; border: 2px solid #46f046; border-radius: 0; padding: 5px;
  box-shadow: 0 0 8px rgba(60,240,60,.55); transform: none; --tilt: 0deg;
}
.retro .polaroid::before { display: none; }
.retro .polaroid:hover { transform: none; box-shadow: 0 0 14px #5dff5d; color: #fff; background: #0a3a1a; }
.retro .polaroid img { height: 150px; background: #0a2a0a; }
.retro .polaroid .noimg { height: 150px; background: #0a2a0a; color: #46f046; }
.retro .polaroid strong { font: bold 15px/1.2 Arial, sans-serif; color: #fff; }
.retro .polaroid .cap { padding-top: 6px; }
.retro .count { background: none; border-radius: 0; color: var(--lime); font: bold 14px Arial; padding: 0; min-width: 0; transform: none; text-align: right; }
.retro .count small { display: inline; margin-left: 3px; font: 12px Arial; text-transform: none; letter-spacing: 0; opacity: 1; }
.retro .evhead-art .polaroid.mini { width: 200px; padding: 5px; transform: none; }
.retro .evhead { grid-template-columns: 1fr auto; }

/* albumi pisipildid */
.retro .thumb { background: #04230f; border: 2px solid #46f046; border-radius: 0; box-shadow: 0 0 6px rgba(60,240,60,.45); transform: none; }
.retro .thumb:hover { transform: none; border-color: #fff; box-shadow: 0 0 12px #5dff5d; }
.retro .thumb .badge { background: var(--btn); color: #fff; border-radius: 0; }
.retro .pager .btn.cur { background: #12a03c; }

/* pildi vaade ja filmilint */
.retro .viewer { background: #04120a; border: 2px solid #46f046; border-radius: 0; }
.retro .filmstrip { background: #04120a; border-radius: 0; }
.retro .filmstrip .fs.cur { box-shadow: 0 0 0 2px #04120a, 0 0 0 4px #46f046; }

/* avaleht */
.home { text-align: center; padding: 10px 0 0; }
.home .sil { width: min(560px, 80%); height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 0 22px rgba(110,255,60,.55)) saturate(1.3) brightness(1.12); }
.home .bdgwrap { position: relative; width: min(530px, 78%); margin: -4px auto 0; }
.home .bdg { width: 100%; height: auto; display: block; }
.home .dot { position: absolute; left: 62%; top: 7%; width: 8%; height: 28%; border-radius: 50%; cursor: pointer; }
.home .dot:hover { box-shadow: 0 0 0 3px rgba(255,255,255,.5); }
.evbox.latest { border-top: 2px solid #f1f1e4; line-height: 1.5; }
.evbox.latest small { opacity: .8; }
.home .url { font: bold 13px "Courier New", monospace; letter-spacing: .45em; color: var(--lime); margin: 8px 0 12px; }
.home p { margin: 4px 0; font-size: 18px; }
.home .small { font-size: 14px; color: #dfe8d0; }
.home .latest { margin: 22px auto 0; max-width: 520px; text-align: left; }


/* ---------------------------------------------------------------- avaleht (originaali "sisu" kaader) */
.home { text-align: center; padding: 18px 0 0; }
.home .logowrap { position: relative; width: 358px; max-width: 100%; margin: 0 auto; }
.home .logowrap img { width: 100%; height: auto; display: block; }
.home .dot { position: absolute; left: 62%; top: 75.5%; width: 8%; height: 8.5%; border-radius: 50%; cursor: pointer; }
.home .dot:hover { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.home .url { margin: 6px 0 0; font: bold 10px Arial, sans-serif; letter-spacing: 0; }
.home .url a { color: #00ff00; text-decoration: none; }

/* ---------------------------------------------------------------- jalus (34 px) */
.rf { display: grid; grid-template-columns: var(--lw, 172px) minmax(0, 1fr); height: 34px; background: #000; }
.rf-l { position: relative; background: #000 url("img/hm/vasakalatagataust.jpg") no-repeat 0 0 / 100% 100%; }
.rf-r { position: relative; background: #000 url("img/hm/aluminetagataust.jpg") repeat-x 0 0; font-size: 10px; }
.rf-r span { position: absolute; left: 45px; top: 11px; color: #fff; }
.counter { position: absolute; left: 25px; top: 12px; display: inline-flex; font: bold 10px/12px Arial, sans-serif; }
.counter b { background: #fff; color: #000; padding: 0 3px 0 6px; min-width: 52px; text-align: right; height: 12px; letter-spacing: 0; }

/* ---------------------------------------------------------------- erinevad resolutsioonid */
.retro .mid { container-type: inline-size; container-name: mid; }
@container mid (max-width: 639px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container mid (max-width: 439px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
@container mid (max-width: 319px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.retro .thumb .meta { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* suured ekraanid: kogu leht skaleeritakse suuremaks */
@media (min-width: 1700px) { .retro .page { zoom: 1.25; } }
@media (min-width: 2000px) { .retro .page { zoom: 1.5; } }
@media (min-width: 2400px) { .retro .page { zoom: 1.85; } }
@media (min-width: 3000px) { .retro .page { zoom: 2.4; } }
@media (min-width: 3800px) { .retro .page { zoom: 3.2; } }

/* kitsad ekraanid: parem tulp läheb sisu alla */
@media (max-width: 1000px) {
  .cols { grid-template-columns: var(--lw, 172px) minmax(0, 1fr); }
  .right { grid-column: 1 / -1; order: 4; padding: 6px 12px 14px; background-image: none; background-color: #0c1208; }
  .right .mbox, .right .lgn { max-width: 320px; margin-inline: auto; }
  .right .lbl { text-align: center; }
}
@media (max-width: 720px) {
  /* telefon: logo ja riba samas reas (logo ei jää üksi mustale taustale) */
  .rh { grid-template-columns: 112px minmax(0, 1fr); height: 110px; }
  .rh-logo { width: 112px; height: 110px; margin: 0; }
  .rh-logo img.hm { left: 4px; top: 12px; width: 104px; height: 82px; }
  .rh-logo .blink { left: 68px; top: 76px; }
  .rh-main { height: 110px; }
  .rh-pics { display: none; }
  .rh-rand { left: 104px; right: 6px; top: 13px; }
  .rh-date { left: auto; right: 8px; top: 92px; display: none; }
  .cols { grid-template-columns: 1fr; }
  .mid { order: 1; padding: 12px 10px 26px; }
  .left { order: 2; padding: 6px 12px 14px; background-image: none; background-color: #0c1208; }
  .left .mbox, .left .lbl { max-width: 320px; margin-inline: auto; }
  .right { order: 3; }
  .rf { grid-template-columns: 1fr; height: auto; }
  .rf-l { height: 34px; } .rf-r { height: 34px; }
  .retro .events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .retro .polaroid img { height: 110px; }
  .retro .evhead { grid-template-columns: 1fr; }
  .retro .evhead-art { display: none; }
}
@media (max-width: 480px) { .retro h1 { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }
.only-mobile { display: none; }
.retro .lgn input { font: 10px Arial, sans-serif; padding: 1px 3px; height: 17px; border: 0; border-top: 1px solid #d0d0d0; background: #04230f var(--btnbg) 0 0 / 100% auto repeat-y; color: #fff; }
.retro .lgn input:first-child { border-top: 0; }
.retro .lgn input[type=hidden] { display: none; }

/* registreerimise küsimused: raadionupp ja vastus kõrvuti */
.retro .form label.opt { flex-direction: row; align-items: center; gap: 8px; font-weight: normal; font-size: 14px; padding: 3px 0; cursor: pointer; }
.retro .form label.opt input[type=radio] { width: auto; flex: 0 0 auto; margin: 0; }
.retro .quiz .qt, .retro .quiz p { margin: 10px 0 2px; }
.retro .quiz .q { margin: 0 0 12px; } .retro .quiz .q > strong { display: block; margin-bottom: 4px; }
.retro .auth { grid-template-columns: minmax(0, 520px); justify-content: center; min-height: 0; }

/* ürituse avatari suur vaade */
.avlb { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 20px; }
.avlb[hidden] { display: none; }
.avlb img { max-width: 100%; max-height: 100%; border: 3px solid #1eff1e; box-shadow: 0 0 24px #1eff1e; }
#avbig { cursor: zoom-in; display: block; }

/* päise avatar: kogu pilt, oma proportsioonidega */
.retro .evhead-art .polaroid.mini img { height: auto; max-height: 300px; width: 100%; object-fit: contain; display: block; background: #000; }
.retro .evhead-art .polaroid.mini { width: auto; max-width: 200px; display: inline-block; }

/* enim hinnatud pildid */
.retro .top3 { padding: 3px; display: flex; flex-direction: column; gap: 4px; }
.retro .top3 .tp { display: block; border: 2px solid #1eff1e; background: #000; position: relative; line-height: 0; }
.retro .top3 .tp img { width: 100%; height: 68px; object-fit: cover; display: block; }
.retro .top3 .tp span { position: absolute; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,.7); color: #ffe45c; font: bold 10px/14px Arial, sans-serif; padding: 0 4px; }
.retro .top3 .tp span small { color: #ccc; font-weight: normal; }
.retro .top3 .tp:hover { border-color: #fff; }

.retro .top3.views .tp span { color: #9dff9d; }

/* kordamööda vahelduvad pildid ühes kastis */
.retro .top3.rot { display: block; position: relative; height: 74px; padding: 3px; }
.retro .top3.rot .tp { position: absolute; left: 3px; right: 3px; top: 3px; bottom: 3px; opacity: 0; transition: opacity 1s ease; pointer-events: none; }
.retro .top3.rot .tp.on { opacity: 1; pointer-events: auto; }
.retro .top3.rot .tp img { height: 100%; }
@media (prefers-reduced-motion: reduce) { .retro .top3.rot .tp { transition: none; } }

.tsark { display: block; position: relative; margin: 0 0 1px; border: 1px solid #d0d0d0; background: #123 var(--btnbg) 0 0 / 100% auto repeat-y; text-align: center; text-decoration: none; padding: 5px 4px 3px; transition: box-shadow .2s, background-color .2s; }
.tsark img { display: block; width: 100%; max-width: 128px; height: auto; margin: 0 auto 3px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); transition: transform .25s ease; }
.tsark span { display: block; color: #fff; font: bold 10px/12px Arial, sans-serif; }
.tsark:hover { background-color: rgba(0,255,0,.18); box-shadow: 0 0 8px #00ff00; }
.tsark:hover img { transform: rotate(-3deg) scale(1.06); }
.tsark:focus-visible { outline: 2px solid #ff0; }
@media (max-width: 800px) { .left .tsark { max-width: 320px; margin-inline: auto; } }

.lbnav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 101; width: 48px; height: 72px; border: 2px solid #1eff1e; background: rgba(0,0,0,.55); color: #1eff1e; font-size: 40px; line-height: 1; cursor: pointer; border-radius: 8px; }
.lbnav:hover, .lbnav:focus-visible { background: rgba(30,255,30,.25); }
.lbprev { left: 12px; } .lbnext { right: 12px; }
.lbcount { position: fixed; bottom: 14px; left: 0; right: 0; text-align: center; color: #1eff1e; font: bold 13px Arial, sans-serif; text-shadow: 0 0 4px #000; pointer-events: none; }
@media (max-width: 800px) { .lbnav { width: 36px; height: 56px; font-size: 30px; } }

.mtxt.online .on { color: #1eff1e; font-size: 9px; }
.mtxt.online .muted-on { color: #cfe8c8; }