/* Plinko - styles. Paired with index.html and plinko.js. */
/* ============================================================
   PLINKO — single-file demo + landing.
   Clean-room build: original code and art. Palette, geometry and
   timings were measured from a live reference; game rules are not
   copyrightable, the code and artwork here are entirely our own.
   No external requests: no CDN, no webfonts, no analytics, no audio files.
   ============================================================ */

:root{
  /* ---- surfaces (measured) ---- */
  --bg:        #0d0d0d;
  --board:     #0d0d0d;
  --panel:     #1c1c1c;
  --panel-2:   #171717;
  --line:      #252525;
  --line-2:    #2a2a2a;
  --text:      #ffffff;
  --muted:     #9e9e9e;

  /* ---- brand accent: overwritten at runtime from CONFIG.brand ---- */
  --accent:    #c11c8b;
  --accent-hi: #e33fac;
  --accent-ink:#ffffff;

  /* ---- multiplier ramp (measured) ---- */
  --ramp-0: #ff003f;
  --ramp-1: #ff302f;
  --ramp-2: #ff6020;
  --ramp-3: #ff9010;
  --ramp-4: #ffc000;

  --good:  #24c98a;

  --r-sm: 4px;
  --r:    8px;
  --r-lg: 12px;
  --r-pill: 999px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --panel-w: 285px;
  --dock-h: 0px;
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--dock-h);
  overflow-x:hidden;
}
button,input,select{ font:inherit; color:inherit }
button{ cursor:pointer; border:0; background:none }
a{ color:inherit }
h1,h2,h3,p{ margin:0 }

.wrap{ width:min(1180px,100%); margin-inline:auto; padding-inline:16px }

/* ============================ header ============================ */
.site-head{
  position:sticky; top:0; z-index:40;
  background:rgba(13,13,13,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{ display:flex; align-items:center; gap:12px; height:58px }
.logo{ display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:.2px; font-size:16px }
.logo svg{ display:block; width:26px; height:26px; flex:none }
.head-sp{ flex:1 }
.lang{
  display:flex; border:1px solid var(--line-2); border-radius:var(--r-pill);
  padding:2px; gap:2px;
}
.lang button{
  padding:4px 10px; border-radius:var(--r-pill); font-size:12px; font-weight:700;
  color:var(--muted); transition:.15s;
}
.lang button[aria-pressed="true"]{ background:var(--line-2); color:var(--text) }

.btn-cta{
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  color:var(--accent-ink); font-weight:800; letter-spacing:.2px;
  padding:10px 20px; border-radius:var(--r-pill); white-space:nowrap;
  box-shadow:0 6px 20px -8px var(--accent);
  transition:transform .12s, filter .12s;
}
.btn-cta:hover{ filter:brightness(1.08) }
.btn-cta:active{ transform:translateY(1px) }
.btn-cta.sm{ padding:8px 16px; font-size:13px }
.btn-cta.lg{ padding:15px 34px; font-size:16px }

/* ============================= hero ============================= */
.hero{ padding:26px 0 16px; text-align:center }
.hero h1{
  font-size:clamp(24px,4.4vw,40px); font-weight:850; letter-spacing:-.6px; line-height:1.12;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(92deg,var(--ramp-0),var(--ramp-4));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ color:var(--muted); margin-top:9px; font-size:clamp(13px,1.6vw,16px) }
.tagrow{ display:flex; gap:7px; justify-content:center; flex-wrap:wrap; margin-top:14px }
.tag{
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  padding:5px 12px; font-size:12px; color:var(--muted);
}
.tag b{ color:var(--text); font-weight:700 }

/* ============================= game ============================= */
.shell{
  display:grid; grid-template-columns:var(--panel-w) 1fr;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; margin-top:8px;
}

/* -- left control panel -- */
.panel{ background:var(--panel); padding:14px; display:flex; flex-direction:column; gap:12px }
.seg{
  display:flex; background:var(--panel-2); border-radius:var(--r-pill); padding:4px; gap:4px;
}
.seg button{
  flex:1; padding:9px 0; border-radius:var(--r-pill); font-size:13px; font-weight:700;
  color:var(--muted); transition:.15s;
}
.seg button[aria-pressed="true"]{ background:var(--line-2); color:var(--text) }

.field > label{
  display:block; font-size:12px; color:var(--muted); margin-bottom:5px; font-weight:600;
}
.stepper{
  display:flex; align-items:center; background:var(--panel-2);
  border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden;
}
.stepper input{
  flex:1; min-width:0; background:none; border:0; padding:9px 10px;
  font-weight:700; font-variant-numeric:tabular-nums;
}
.stepper input:focus{ outline:none }
.stepper .cur{ color:var(--muted); font-size:12px; padding-right:8px; font-weight:700 }
.stepper button{
  padding:9px 11px; font-size:12px; font-weight:700; color:var(--muted);
  border-left:1px solid var(--line-2); transition:.15s;
}
.stepper button:hover{ background:var(--line-2); color:var(--text) }

select{
  width:100%; appearance:none; background:var(--panel-2);
  border:1px solid var(--line-2); border-radius:var(--r);
  padding:9px 30px 9px 10px; font-weight:600;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 18px, calc(100% - 11px) 18px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
select:focus{ outline:none; border-color:var(--line-2) }

#drop{
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  color:var(--accent-ink); font-weight:800; font-size:15px;
  padding:14px 0; border-radius:var(--r); width:100%;
  transition:transform .1s, filter .12s;
}
#drop:hover:not(:disabled){ filter:brightness(1.08) }
#drop:active:not(:disabled){ transform:translateY(1px) }
#drop:disabled{ opacity:.45; cursor:not-allowed }

.panel-note{
  margin-top:auto; font-size:11px; color:#6c6c6c; line-height:1.45;
  border-top:1px solid var(--line-2); padding-top:10px;
}

/* -- board -- */
.board{ position:relative; background:var(--board); min-height:min(560px, calc(100vh - 210px)) }
#cv{ display:block; width:100%; height:100%; position:absolute; inset:0; touch-action:manipulation }

.balance{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--panel); border:1px solid var(--line-2);
  border-radius:var(--r); padding:6px 12px;
  font-weight:800; font-variant-numeric:tabular-nums; font-size:13px;
  pointer-events:none;
}
.balance small{ display:block; font-size:10px; color:var(--muted); font-weight:700; letter-spacing:.6px }

.history{
  position:absolute; top:12px; right:12px; z-index:2;
  display:flex; flex-direction:column; gap:5px; align-items:flex-end; pointer-events:none;
}
.history span{
  min-width:52px; text-align:center; padding:4px 8px; border-radius:var(--r-sm);
  font-size:12px; font-weight:800; color:#2a0d00;
  font-variant-numeric:tabular-nums;
  animation:pop .3s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop{ from{ transform:translateY(-7px) scale(.85); opacity:0 } }

.boardbar{
  position:absolute; left:0; right:0; bottom:0; z-index:2; height:38px;
  display:flex; align-items:center; gap:14px; padding:0 12px;
  border-top:1px solid var(--line); background:var(--panel-2);
  font-size:12px; color:var(--muted);
}
.boardbar button{ color:var(--muted); font-weight:600; transition:.15s }
.boardbar button:hover{ color:var(--text) }
.boardbar .sp{ flex:1 }

/* toast shown when the demo balance runs out */
.toast{
  position:absolute; inset:0; z-index:3; display:none;
  place-items:center; background:rgba(13,13,13,.82); backdrop-filter:blur(3px);
  text-align:center; padding:20px;
}
.toast.on{ display:grid }
.toast h3{ font-size:19px; font-weight:800 }
.toast p{ color:var(--muted); margin:7px 0 15px; max-width:330px }

/* ============================ offer ============================ */
.offer{
  margin:26px 0 0; padding:24px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:
    radial-gradient(120% 150% at 90% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    var(--panel-2);
  display:grid; grid-template-columns:1fr auto; gap:22px; align-items:center;
}
.offer h2{ font-size:clamp(19px,2.6vw,26px); font-weight:850; letter-spacing:-.3px }
.offer p{ color:var(--muted); margin-top:7px; max-width:52ch }

.perks{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0 0 }
.perk{ border:1px solid var(--line); border-radius:var(--r); padding:14px; background:var(--panel-2) }
.perk b{ display:block; font-size:13px; margin-bottom:3px }
.perk span{ font-size:12px; color:var(--muted) }

/* ============================ footer =========================== */
footer{ margin-top:28px; border-top:1px solid var(--line); padding:18px 0 26px }
footer .wrap{ display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap }
.age{
  flex:none; width:34px; height:34px; border-radius:50%;
  border:2px solid var(--muted); color:var(--muted);
  display:grid; place-items:center; font-weight:800; font-size:12px;
}
footer p{ font-size:11.5px; color:#6c6c6c; line-height:1.55; max-width:80ch }

/* ------- sticky mobile CTA dock ------- */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:50; display:none;
  gap:12px; align-items:center; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(23,23,23,.95); backdrop-filter:blur(12px);
  border-top:1px solid var(--line-2);
}
.dock div{ flex:1; min-width:0 }
.dock b{ display:block; font-size:13px; font-weight:800 }
.dock span{ font-size:11px; color:var(--muted) }

/* ============================ modal ============================ */
dialog{
  border:1px solid var(--line-2); background:var(--panel); color:var(--text);
  border-radius:var(--r-lg); padding:22px; width:min(440px,92vw);
}
dialog::backdrop{ background:rgba(0,0,0,.7) }
dialog h3{ font-size:17px; font-weight:800; margin-bottom:9px }
dialog p{ color:var(--muted); font-size:13px; margin-bottom:9px }
dialog code{
  background:var(--panel-2); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:1px 5px; font-size:12px; color:var(--text);
}
dialog button.close{
  margin-top:8px; width:100%; padding:11px; border-radius:var(--r);
  background:var(--line-2); font-weight:700;
}

/* =========================== responsive ======================== */
@media (max-width:860px){
  .shell{ grid-template-columns:1fr }
  .board{ order:-1; min-height:min(58vh,430px) }
  .panel{ border-top:1px solid var(--line) }
  .panel-note{ display:none }
  .offer{ grid-template-columns:1fr; text-align:center }
  .offer .btn-cta{ width:100% }
  .perks{ grid-template-columns:1fr }
  .dock{ display:flex }
  body{ --dock-h:70px }
  .hero{ padding:18px 0 10px }
  .site-head .btn-cta{ display:none }
}
@media (prefers-reduced-motion:reduce){
  .history span{ animation:none }
}