:root{
  --bg:#000;
  --ink:#f3ede2;
  --ink-dim:#b3a999;
  --ink-faint:#6b6453;
  --accent:#d97a3a;
  --accent-soft:#b66236;
  --rule:rgba(243,237,226,.18);
  --rule-soft:rgba(243,237,226,.08);
  --hud:#e9d9b8;
  --field-bg:rgba(243,237,226,.03);
  --field-bg-focus:rgba(243,237,226,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100svh;background:#000;color:var(--ink);}
body{
  font-family:"Maven Pro",system-ui,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background:#000 url("assets/tausta_9_16.webp") no-repeat 50% bottom / cover;
  background-attachment:fixed;
  min-height:100svh;
  overflow-x:hidden;
}
@media (min-aspect-ratio: 5/4){
  body{
    background-image:url("assets/tausta_4_3.webp");
    background-position:left center;
  }
}
@media (min-aspect-ratio: 16/10){
  body{
    background-image:url("assets/tausta_16_9.webp");
    background-position:left center;
  }
}
@media (min-aspect-ratio: 21/10){
  body{
    background-image:url("assets/tausta_21_9.webp");
    background-position:left center;
  }
}

.page{
  position:relative;
  min-height:100svh;
  padding:22px 22px 40px;
}

.page::before{
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.4) 25%,
    rgba(0,0,0,.55) 50%,
    rgba(0,0,0,.85) 80%,
    rgba(0,0,0,.96) 100%);
  pointer-events:none;
  z-index:0;
}
.page > *{position:relative;z-index:1}

/* Topbar — same vibe as card */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-dim);
  gap:12px;
}
.topbar .brand{
  display:block;
  height:40px;
  width:auto;
  opacity:.95;
}
.topbar .dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px rgba(217,122,58,.7);
  margin-right:8px;vertical-align:1px;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.85)}
}
.topbar .sep-live{display:none}
.topbar .br-live{display:inline}

/* Identity block */
.id-block{
  margin-top:28px;
  display:flex;
  flex-direction:column;
  gap:22px;
  max-width:680px;
}

.eyebrow{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{
  content:"";width:24px;height:1px;background:var(--accent);
}

h1.prize{
  font-family:"Maven Pro",sans-serif;
  font-weight:800;
  font-size:clamp(40px, 11vw, 78px);
  line-height:.96;
  letter-spacing:-.025em;
  color:var(--ink);
  text-wrap:balance;
}
h1.prize .accent{
  display:block;
  font-weight:400;
  color:var(--hud);
  letter-spacing:-.02em;
}

p.lede{
  font-size:clamp(15px, 2.4vw, 18px);
  line-height:1.55;
  color:var(--ink-dim);
  max-width:38ch;
}

.detail{
  padding-top:18px;
  border-top:1px solid var(--rule);
  font-size:15px;
  line-height:1.6;
  color:var(--ink-dim);
}
.detail p + p{margin-top:10px}

/* Meta row — end date + entry count */
.meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  padding-top:14px;
}
.meta-row > div{
  display:flex;flex-direction:column;gap:2px;
}
.meta-row .k{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.meta-row .v{
  font-size:18px;
  font-weight:700;
  color:var(--hud);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

/* Form */
.form{
  margin-top:8px;
  padding-top:24px;
  border-top:1px solid var(--rule);
  display:flex;
  flex-direction:column;
  gap:20px;
}
.form-head{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-dim);
  display:flex;align-items:center;gap:10px;
}
.form-head::before{
  content:"";width:24px;height:1px;background:var(--ink-dim);
}
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
#extraFields{
  display:flex;
  flex-direction:column;
  gap:20px;
}
#extraFields:empty{display:none}
.field label.k{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.field label .req{color:var(--accent);margin-left:4px}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea,
.field select{
  appearance:none;
  background:var(--field-bg);
  border:0;
  border-bottom:1px solid var(--rule);
  color:var(--ink);
  font:inherit;
  font-size:16px;
  padding:10px 0;
  outline:none;
  transition:border-color .15s ease, background .15s ease;
  border-radius:0;
}
.field textarea{
  min-height:84px;
  resize:vertical;
  line-height:1.5;
}
.field input:focus,
.field textarea:focus,
.field select:focus{
  border-bottom-color:var(--accent);
  background:var(--field-bg-focus);
}
.field input::placeholder,
.field textarea::placeholder{color:var(--ink-faint)}
.field .hint{
  font-size:12px;
  color:var(--ink-faint);
  letter-spacing:.02em;
}
.field.invalid input,
.field.invalid textarea{border-bottom-color:var(--accent)}
.field .err{
  display:none;
  font-size:12px;
  color:var(--accent);
  letter-spacing:.04em;
}
.field.invalid .err{display:block}

/* Radio / checkbox groups */
.choices{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.choice{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:8px 0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.choice input{
  appearance:none;
  flex:0 0 18px;
  width:18px;height:18px;
  margin:2px 0 0;
  background:transparent;
  border:1px solid var(--rule);
  position:relative;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.choice input[type="radio"]{border-radius:50%}
.choice input:checked{
  border-color:var(--accent);
  background:var(--accent);
}
.choice input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;left:5px;top:1px;
  width:5px;height:10px;
  border:solid #0a0807;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.choice input[type="radio"]:checked::after{
  content:"";
  position:absolute;inset:3px;
  border-radius:50%;
  background:#0a0807;
}
.choice .label{
  font-size:15px;
  color:var(--ink);
  line-height:1.5;
}
.choice .label small{
  display:block;
  font-size:12.5px;
  color:var(--ink-faint);
  margin-top:2px;
}

/* Newsletter row — distinct */
.newsletter{
  margin-top:4px;
  padding:16px 14px;
  border:1px solid var(--rule);
  background:rgba(243,237,226,.025);
}
.newsletter .choice{padding:0}
.newsletter .label{font-size:15.5px}
.newsletter .label small{color:var(--ink-dim);margin-top:4px}

/* Actions */
.actions{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:8px;
}
button.submit{
  appearance:none;
  border:0;
  background:var(--ink);
  color:#0a0807;
  font:inherit;
  font-weight:700;
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:16px 20px;
  cursor:pointer;
  transition:background .15s ease, transform .12s ease, color .15s ease;
  text-align:center;
}
button.submit:hover{background:var(--accent);color:#0a0807}
button.submit:active{transform:scale(.98)}
button.submit:disabled{opacity:.4;cursor:not-allowed}

.rules-link{
  text-align:center;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--ink-dim);
}
.rules-link a{
  color:var(--ink-dim);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--rule);
  transition:color .15s ease, text-decoration-color .15s ease;
}
.rules-link a:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* Success state */
.success{
  display:none;
  margin-top:8px;
  padding:24px 22px;
  border:1px solid var(--accent);
  background:rgba(217,122,58,.06);
}
.success.show{display:block}
.success .eyebrow{margin-bottom:10px}
.success h2{
  font-size:clamp(24px, 5vw, 36px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.05;
  color:var(--ink);
  margin-bottom:10px;
}
.success p{
  font-size:15px;
  color:var(--ink-dim);
  line-height:1.55;
}

/* Footer ribbon */
.footer-line{
  margin-top:40px;
  padding-top:14px;
  border-top:1px solid var(--rule-soft);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.footer-line a{color:var(--ink-faint);text-decoration:none}
.footer-line a:hover{color:var(--accent)}

/* Landscape — content panel on right, Raimo on left */
@media (min-aspect-ratio: 5/4){
  .page::before{
    inset:0 0 0 auto;
    width:62%;
    height:100%;
    background:linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.35) 22%,
      rgba(0,0,0,.85) 60%,
      rgba(0,0,0,.96) 100%);
  }
  .page{
    padding:32px 5vw 48px 0;
    display:grid;
    grid-template-rows:auto 1fr;
    grid-template-columns:1fr;
  }
  .topbar{
    width:min(620px, 52%);
    margin-left:auto;
  }
  .id-block{
    margin:24px 0 0 auto;
    width:min(620px, 52%);
    max-width:none;
  }
  .topbar .brand{height:44px}
  .topbar .sep-live{display:inline}
  .topbar .br-live{display:none}
  h1.prize{font-size:clamp(40px, 5.4vw, 68px)}
  .footer-line{
    width:min(620px, 52%);
    margin-left:auto;
  }
}
@media (min-aspect-ratio: 16/10){
  .topbar,
  .id-block,
  .footer-line{
    width:min(700px, 58%);
  }
  .topbar .brand{height:48px}
  h1.prize{font-size:clamp(52px, 6vw, 84px)}
}
@media (min-aspect-ratio: 21/10){
  .page{padding:32px 0 48px 18vw;}
  .page::before{
    inset:0;
    width:auto;
    background:linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 36%,
      rgba(0,0,0,.5) 50%,
      rgba(0,0,0,.85) 68%,
      rgba(0,0,0,.85) 90%,
      rgba(0,0,0,.55) 100%);
  }
  .topbar,
  .id-block,
  .footer-line{
    width:min(720px, 50%);
    margin-left:auto;
    margin-right:auto;
  }
}
@media (min-aspect-ratio: 16/10) and (max-width: 1500px){
  .topbar,
  .id-block,
  .footer-line{
    width:min(600px, 50%);
  }
}

@media (max-width: 380px){
  .page{padding:18px 18px 36px}
  h1.prize{font-size:42px}
}

/* Verkkokauppa-banner (etusivu, listan alla) */
.shop-banner{
  margin-top:28px;
  padding:24px 28px;
  background:rgba(243,237,226,.025);
  border:1px solid var(--rule);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  text-decoration:none;
  color:var(--ink);
  transition:border-color .15s ease, background .15s ease, transform .12s ease;
}
.shop-banner:hover{
  border-color:var(--accent);
  background:rgba(217,122,58,.08);
}
.shop-banner:active{transform:scale(.995)}
.shop-banner .shop-title{
  font-size:clamp(20px, 3vw, 26px);
  font-weight:800;
  letter-spacing:-.015em;
  line-height:1.2;
  color:var(--ink);
  margin:0;
  flex:1 1 320px;
}
.shop-banner .shop-cta{
  display:inline-block;
  font-weight:700;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:14px 22px;
  color:var(--accent);
  border:1px solid var(--accent);
  transition:background .15s ease, color .15s ease;
  white-space:nowrap;
}
.shop-banner:hover .shop-cta{
  background:var(--accent);
  color:#0a0807;
}
@media (max-width: 540px){
  .shop-banner{
    flex-direction:column;
    align-items:stretch;
    text-align:left;
  }
  .shop-banner .shop-cta{
    text-align:center;
  }
}

/* Language switcher — lippu-ikonit */
.lang-switch{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}
.lang-switch .lang-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  letter-spacing:.04em;
  text-decoration:none;
  color:var(--ink-dim);
  transition:color .15s ease;
}
.lang-switch .lang-item img{
  display:block;
  width:28px;
  height:auto;
  border:1px solid var(--rule);
  border-radius:2px;
}
.lang-switch .lang-item:not(.is-active):not(.is-disabled):hover{
  color:var(--accent);
}
.lang-switch .lang-item.is-active{
  color:var(--accent);
  font-weight:600;
}
.lang-switch .lang-item.is-disabled{
  color:var(--ink-faint);
  cursor:not-allowed;
}
.lang-switch .lang-item.is-disabled img{
  filter:grayscale(100%);
  opacity:.4;
}

/* Modal — säännöt */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:24px;
}
.modal.open{display:flex}
.modal-scrim{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
}
.modal-panel{
  position:relative;
  width:min(720px, 100%);
  max-height:88vh;
  background:#0c0a08;
  border:1px solid var(--rule);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:18px 24px;
  border-bottom:1px solid var(--rule);
  flex-shrink:0;
}
.modal-head .eyebrow{margin:0}
.modal-close{
  appearance:none;
  background:transparent;
  border:1px solid var(--rule);
  color:var(--ink);
  width:36px;
  height:36px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  font-family:inherit;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.modal-close:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(217,122,58,.08);
}
.modal-body{
  padding:24px 28px 28px;
  overflow-y:auto;
  flex:1 1 auto;
  -webkit-overflow-scrolling:touch;
}
.modal-body h2{
  font-size:18px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ink);
  margin-top:24px;
  margin-bottom:8px;
}
.modal-body h2:first-of-type{margin-top:4px}
.modal-body p{
  font-size:15px;
  line-height:1.65;
  color:var(--ink-dim);
  margin-bottom:12px;
}
.modal-body a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--rule);
}
.modal-body a:hover{
  color:var(--accent);
  text-decoration-color:var(--accent);
}
.modal-foot{
  padding:14px 24px;
  border-top:1px solid var(--rule);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--ink-faint);
  flex-shrink:0;
}
.modal-foot a{color:var(--ink-faint);text-decoration:underline;text-underline-offset:3px}
.modal-foot a:hover{color:var(--accent)}

body.modal-open{overflow:hidden}

@media (max-width: 540px){
  .modal{padding:0}
  .modal-panel{
    max-height:100vh;
    height:100vh;
    width:100%;
    border:0;
  }
  .modal-head{padding:16px 18px}
  .modal-body{padding:18px 20px 24px}
  .modal-foot{padding:12px 18px}
}

::selection{background:var(--accent);color:#0a0807}