:root { --tw-caret: 0.12em; }
html, body { height: 100%; }
body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bs-body-bg, #212529);
    color: var(--bs-body-color, #e9ecef);
}

/* HERO + kirjoituskone */
.page-wrap { padding: 6vh 1.5rem 3vh; }
.hero { max-width: 980px; margin: 0 auto; text-align: center; }
.big-title {
    font-weight: 900; line-height: .9; letter-spacing: -0.02em;
    font-size: clamp(3rem, 10vw, 8rem);
    background: linear-gradient(180deg,#ffffff 0%,#9aa0a6 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    margin-bottom: .35em; text-shadow: 0 0 24px rgba(255,255,255,.06);
}
.lead-sub {
    font-size: clamp(1rem, 2.2vw, 1.35rem);
    color: #c9ced6;
    margin-bottom: 1.2rem;
}
.type-area {
    margin: 0 auto 2.25rem;
    max-width: 900px;
    text-align: left;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: .5rem;
    padding: 1rem 1.25rem 1.25rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.02);
}
.typewriter {
    font-family: Consolas, "Liberation Mono", Menlo, Monaco, monospace;
    font-size: clamp(.95rem, 2vw, 1.05rem);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    position: relative;
}
.typewriter::after {
    content: '';
    display: inline-block;
    width: var(--tw-caret);
    height: 1.05em;
    translate: 0 .15em;
    background: currentColor;
    margin-left: .12em;
    animation: blink 1s steps(1, end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ======= PANEELI-MOSAIKKI ======= */
.section-grid { padding-top: .25rem; padding-bottom: 3rem; }

.masonry { margin: 0 auto; contain: layout paint; }
.grid-sizer, .panel { width: 360px; }
@media (max-width: 575.98px){ .grid-sizer, .panel { width: 100%; } }

.panel {
    margin-bottom: 24px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.3);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.02);
    transition: box-shadow .25s ease, background-color .25s ease;
}
.panel:hover {
    transform: translateY(-3px);
    transition: transform .18s ease-out, box-shadow .25s ease, background-color .25s ease;
}
.body-is-resizing .panel { transition: none !important; transform: none !important; }

.panel-body { padding: 1.25rem 1.25rem 1.1rem; }
.panel h3 { margin: 0 0 .4rem; color: #fff; letter-spacing:.2px; font-weight: 700; }
.panel p  { color: #dfe3e7; margin-bottom: 1rem; }

.panel--glass {
    backdrop-filter: blur(10px);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
.panel--gradient {
    background: radial-gradient(1200px 600px at 10% -10%, rgba(0,163,255,0.15), transparent 40%),
                radial-gradient(900px 500px at 110% 20%, rgba(255,0,128,0.12), transparent 50%),
                rgba(0,0,0,0.3);
}
.panel--neon::before {
    content:""; position:absolute; inset:-2px;
    background: conic-gradient(from 180deg, #00e5ff, #8a2be2, #ff3d81, #00e5ff);
    filter: blur(18px); opacity:.25; z-index:0;
}
.panel--neon .panel-body { position: relative; z-index: 1; }

.panel--outline { border: 1px dashed rgba(255,255,255,0.22); }
.panel--striped {
    background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0 8px, rgba(255,255,255,0.0) 8px 16px);
}
.panel--spotlight::after {
    content:""; position:absolute; inset:0;
    background: radial-gradient(600px 300px at 80% -10%, rgba(255,255,255,0.15), transparent 40%);
    pointer-events:none;
}

.btn-ghost {
    display:inline-flex; align-items:center; gap:.5rem;
    border:1px solid rgba(255,255,255,.2);
    padding:.6rem .9rem; border-radius: .55rem; text-decoration:none;
    color:#fff; transition: background .2s ease, border-color .2s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); }

.panel--greenhouse-soft{
    background:
    linear-gradient(180deg, rgba(107,255,158,.10) 0%, rgba(107,255,158,0) 42%),
    linear-gradient( to bottom right, rgba(22,33,27,.92), rgba(16,24,20,.96) );
    border: 1px solid rgba(107,255,158,.18);
    box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.03);
}
.panel--greenhouse-soft::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(90deg, rgba(107,255,158,.12), rgba(107,255,158,0) 35% );
    mix-blend-mode: screen; opacity:.35;
}
.panel--greenhouse-soft h3{ color:#c8ffe0; }
.panel--greenhouse-soft p{ color:#dfe6e1; }
.panel--greenhouse-soft .btn-ghost{
    border-color: rgba(107,255,158,.25);
    background: rgba(255,255,255,.06);
    color:#e9f7ef;
}
.panel--greenhouse-soft .btn-ghost:hover{
    background: rgba(107,255,158,.12);
    border-color: rgba(107,255,158,.35);
}

.panel--electric{
    background:
    linear-gradient(160deg, rgba(255, 230, 120, 0.15) 0%, rgba(255, 200, 40, 0.08) 40%, rgba(0,0,0,0.25) 100%),
    linear-gradient(to bottom right, rgba(30,30,25,.95), rgba(15,15,10,.97));
    border: 1px solid rgba(255, 220, 80, .25);
    box-shadow:
    0 10px 30px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,200,.05);
}
.panel--electric::before{
    content:""; position:absolute; inset:-2px; pointer-events:none;
    background: conic-gradient(from 180deg, rgba(255,220,80,.35), transparent, rgba(255,200,40,.35));
    filter: blur(18px); opacity:.25;
}
.panel--electric h3{ color:#ffe97a; }
.panel--electric p{ color:#f0f0e0; }
.panel--electric .btn-ghost{
    border-color: rgba(255,220,80,.25);
    background: rgba(255,255,255,.05);
    color:#fff8dc;
}
.panel--electric .btn-ghost:hover{
    background: rgba(255,220,80,.15);
    border-color: rgba(255,220,80,.4);
}

.panel--electric .badge-float{
    background: rgba(255,220,80,.12);
    border-color: rgba(255,220,80,.3);
    color:#fff3c4;
}
.panel--greenhouse-soft .badge-float{
    background: rgba(107,255,158,.12);
    border-color: rgba(107,255,158,.22);
    color:#bfffd9;
}

/* --- ENIGMA (punamusta glassy neon) --- */
.panel--enigma{
    position: relative;
    background:
    repeating-linear-gradient(
        -45deg,
        rgba(0,0,0,.20) 0 8px,
        rgba(0,0,0,0)   8px 16px
    ),
    radial-gradient(1000px 600px at 10% -10%, rgba(255, 65, 90, .18), transparent 55%),
    radial-gradient(900px 500px at 110% 20%, rgba(180, 0, 60, .14), transparent 50%),
    linear-gradient( to bottom right, rgba(24, 18, 20, .96), rgba(14, 10, 12, .98) );
    border: 1px solid rgba(255, 80, 110, .28);
    box-shadow:
    0 10px 30px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.03);
    overflow: hidden;
}
.panel--enigma::before{
    content:"";
    position:absolute; inset:-2px; pointer-events:none; border-radius:16px;
    background: conic-gradient(from 180deg,
                rgba(255, 90, 120, .35),
                rgba(255, 0, 120, .25),
                rgba(255, 120, 80, .28),
                rgba(255, 90, 120, .35));
    filter: blur(18px); opacity: .27;
}
.panel--enigma::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(650px 320px at 80% -10%, rgba(255, 90, 120, .18), transparent 40%);
    mix-blend-mode: screen;
}

/* Tekstit sävyyn */
.panel--enigma h3{ color:#ffdbe2; }
.panel--enigma p { color:#f0d7dc; }

/* Lennokas hover */
.panel--enigma:hover{
    box-shadow: 0 14px 34px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.04);
    transform: translateY(-3px);
}

/* Kelluva “Enigma” -badge */
.badge-float--enigma{
    background: rgba(255, 90, 120, .14);
    border-color: rgba(255, 90, 120, .32);
    color: #ffdbe2;
}

/* Painikkeet (primääri ja toissijainen) */
.btn-ghost--enigma{
    border-color: rgba(255, 90, 120, .35);
    background: rgba(255,255,255,.06);
    color: #ffe8ed;
}
.btn-ghost--enigma:hover{
    background: rgba(255, 90, 120, .16);
    border-color: rgba(255, 90, 120, .50);
    color:#fff;
}
.btn-ghost--enigma-secondary{
    border-color: rgba(255, 120, 80, .30);
    background: rgba(255,255,255,.04);
    color: #ffe8e0;
}
.btn-ghost--enigma-secondary:hover{
    background: rgba(255, 120, 80, .14);
    border-color: rgba(255, 120, 80, .45);
    color:#fff7f2;
}

/* Pieni fokuskehys näppikselle */
.btn-ghost--enigma:focus-visible,
.btn-ghost--enigma-secondary:focus-visible{
    outline: 0;
    box-shadow: 0 0 0 .15rem rgba(255, 90, 120, .35);
    border-color: rgba(255, 90, 120, .55);
}

.badge-float {
    position:absolute; top:.75rem; right:.75rem; z-index:2;
    background: rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.15);
    padding:.3rem .55rem; border-radius:.5rem; font-size:.8rem;
    color:#cfe8ff;
}

/* ==========================================================
   PIMU — Turquoise theme (no glow)
   Matches existing panel look (glass + subtle gradient).
   ========================================================== */

.panel--pimu{
    /* subtle turquoise background, same structure as others */
    background:
      linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
      radial-gradient(1000px 520px at 12% -10%, rgba(34,230,218,0.12), transparent 42%),
      rgba(0,0,0,0.30);
    border: 1px solid rgba(34,230,218,0.22);
    box-shadow:
      0 10px 30px rgba(0,0,0,0.35),
      inset 0 1px 0 rgba(255,255,255,0.03);
}
.panel--pimu h3{ color:#dffbff; }
.panel--pimu p { color:#d6ecef; }

/* badge aligned with other panels (no glow, just color tint) */
.panel--pimu .badge-float{
    background: rgba(34,230,218,0.12);
    border-color: rgba(34,230,218,0.28);
    color: #c9fcff;
}

/* ghost button variant in turquoise */
.btn-ghost--pimu{
    border-color: rgba(34,230,218,0.28);
    background: rgba(255,255,255,0.06);
    color: #e9f8ff;
}
.btn-ghost--pimu:hover{
    background: rgba(34,230,218,0.12);
    border-color: rgba(34,230,218,0.38);
    color:#ffffff;
}

/* ===== Poker-kortti (vihreä raitateema + glass) ===== */
.panel--poker{
  /* pokerivera + harmaat diagonaaliraidat */
  --felt-1:#0e3a22; --felt-2:#11512d; --felt-3:#0b2b1a;
  --stripe:rgba(200,200,200,.07);
  --border:rgba(255,255,255,.18);
  --halo:rgba(140,210,165,.28);

  background:
    repeating-linear-gradient(45deg,var(--stripe) 0 12px,transparent 12px 24px),
    radial-gradient(1000px 600px at 12% -10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(1000px 600px at 110% 20%, rgba(0,0,0,.22), transparent 60%),
    linear-gradient(180deg,var(--felt-2),var(--felt-1) 40%,var(--felt-3));
  color:#eef2f4;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 22px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.panel--poker .btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.05);
}
.panel--poker .btn-ghost:hover {
  background: rgba(255,255,255,.12);
}

.panel--poker .panel-body{ padding:18px; }

.poker-head{
  display:flex; align-items:center; gap:12px; margin-bottom:8px;
}
.poker-icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.16);
}
.poker-title{ font-weight:800; margin:0; }

.poker-desc{ color:#bac4cd; margin-bottom:12px; }

.btn-ghost--poker{
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,#8ad1a7,#45b07a);
  color:#0f1a13!important; font-weight:700;
  padding:10px 14px; border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.btn-ghost--poker:hover{ filter:brightness(1.05); transform:translateY(-1px); }

.panel--poker:hover{
  box-shadow:0 14px 40px var(--halo), 0 22px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  border-color:rgba(180,235,195,.45);
}

/* pieni erotinviiva */
.hr-ghost{ border:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  margin:10px 0 6px;
}

.panel .actions { margin-top: auto; display:flex; flex-wrap:wrap; gap:.6rem; }

.media-slot { aspect-ratio: 16/9; background: rgba(255,255,255,0.04); }

.page-wrap { padding: 6vh 1.5rem 3vh; }

.big-title.neon-auto{
    color:#ffd6f6; display:inline-block; will-change: filter, opacity;
}
.big-title.neon-auto .word{ display:inline-block; white-space: nowrap; }
.big-title.neon-auto span{
    display:inline-block; position:relative;
    text-shadow: 0 0 0.02em currentColor, 0 0 0.15em #ff9be6, 0 0 0.4em #ff51c8, 0 0 1.1em #ff2ea6;
    transition: opacity 60ms linear, filter 60ms linear, text-shadow 60ms linear;
}
.big-title.neon-auto .sp{ width:.38em; }
.big-title.neon-auto span::after{
    content:""; position:absolute; inset:0;
    background: radial-gradient(100% 60% at 50% 50%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
    opacity:.22; mix-blend-mode:screen; pointer-events:none; transition: opacity 60ms linear;
}
.big-title.neon-auto span.dim{ opacity: .1; text-shadow: none; }
.big-title.neon-auto span.dim::after{ opacity: 0; }
.big-title.neon-auto .spark { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 0; height: 0; opacity: 0; pointer-events: none; }
.big-title.neon-auto .ember{
    position:absolute; left: var(--ex); top: var(--ey);
    width: var(--ember-size, 2px); height: var(--ember-size, 2px); border-radius:50%; background:#fff;
    box-shadow: 0 0 6px #fff, 0 0 14px #ff66e6; transform: translate(-50%,-50%);
    animation: ember var(--ember-dur, 600ms) ease-out forwards; pointer-events:none;
}
@keyframes ember{
    to{ transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); opacity: 0; filter: blur(.6px); }
}

/* --- Auth mini-nav (top-right) --- */
.kk-auth-nav {
    position: fixed; top: 10px; right: 12px; z-index: 1000;
    display: flex; gap: .6rem; align-items: center;
    background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12);
    padding: .35rem .55rem; border-radius: .5rem; backdrop-filter: blur(6px);
}
.kk-auth-link {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    color: #e9ecef; text-decoration: none; font-size: .95rem; padding: .2rem .4rem;
}
.kk-auth-link:hover { text-decoration: underline; color: #fff; }
.kk-auth-nav form { margin: 0; }

/* --- Verify-banner (glassy + neon) --- */
.verify-wrap{
    display:flex; justify-content:center; padding: 0 .75rem; margin-top:.25rem; margin-bottom:1rem;
}
.verify-banner{
    position:relative;
    width:100%; max-width:980px;
    border-radius:12px;
    padding:.75rem 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.14);
    box-shadow: 0 12px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
    backdrop-filter: blur(8px);
}
.verify-banner::before{
    content:""; position:absolute; inset:-2px; border-radius:14px; pointer-events:none;
    background: conic-gradient(from 180deg, rgba(255,220,80,.35), rgba(255,0,128,.25), rgba(0,163,255,.30), rgba(255,220,80,.35));
    filter: blur(18px); opacity:.25;
}
.verify-banner .rowline{
    display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
}
.verify-icon{
    flex:0 0 auto; display:grid; place-items:center;
    width:28px; height:28px; border-radius:50%;
    background: rgba(255,220,80,.18);
    border:1px solid rgba(255,220,80,.35);
    color:#ffe97a;
}
.verify-text{
    flex:1 1 auto; color:#e9ecef;
}
.verify-actions{
    flex:0 0 auto; display:flex; gap:.5rem; align-items:center;
}
.verify-link-btn{
    appearance:none; border:0; cursor:pointer;
    padding:.45rem .65rem; border-radius:.5rem;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.18);
    color:#e9ecef; text-decoration:none; font-weight:600;
}
.verify-link-btn:hover{
    background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28);
}
.verify-help{
    font-size:.9rem; color:#c9ced6;
}

/* ettei “liimaudu” kortteihin: */
.verify-wrap + .section-grid{ margin-top:.25rem; }