/* Padel Booker - stili dell'app. Modifica qui colori e aspetto. */

/* ===== Font (Barlow, ospitati in fonts/) ===== */
@font-face {
  font-family:"Barlow";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/barlow-latin-400-normal.woff2) format("woff2")
}

@font-face {
  font-family:"Barlow";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fonts/barlow-latin-500-normal.woff2) format("woff2")
}

@font-face {
  font-family:"Barlow";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(fonts/barlow-latin-600-normal.woff2) format("woff2")
}

@font-face {
  font-family:"Barlow Condensed";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")
}

@font-face {
  font-family:"Barlow Condensed";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")
}

@font-face {
  font-family:"Barlow Condensed";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url(fonts/barlow-condensed-latin-800-normal.woff2) format("woff2")
}

:root {
  --bg:#f3f6f2;
  --card:#fff;
  --tx:#1f3a33;
  --mut:#607a72;
  --pri:#2a8470;
  --pt:#2a8470;
  --acc:#d3e58a;
  --pri2:#25707a;
  --on:#1f3a33;
  --ink:#1e4a43;
  --bd:#dde7e1;
  --no:#c0453a;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px)
}

@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]):not([data-theme="classic"]) {
    --bg:#1d2d29;
    --card:#263a35;
    --tx:#e7f0ec;
    --mut:#a1bbb2;
    --bd:#38524a;
    --pt:#74cdb3;
    --acc:#b9ca78;
    color-scheme:dark
  }
}
:root[data-theme="dark"] {
  --bg:#1d2d29;
  --card:#263a35;
  --tx:#e7f0ec;
  --mut:#a1bbb2;
  --bd:#38524a;
  --pt:#74cdb3;
  --acc:#b9ca78;
  color-scheme:dark
}
:root[data-theme="light"] { color-scheme:light }

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font:16px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;
  padding-bottom:90px
}

header {
  background:var(--pri);
  color:#fff;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  position:sticky;
  top:0;
  z-index:5
}

header img {
  border-radius:8px
}

header b {
  font-size:19px
}

main {
  max-width:560px;
  margin:0 auto;
  padding:14px
}

.card {
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:16px;
  padding:14px;
  margin-bottom:12px
}

h2 {
  margin:6px 0 10px;
  font-size:20px
}

h3 {
  font-size:15px;
  margin:16px 0 8px;
  color:var(--mut)
}

.mut {
  color:var(--mut);
  font-size:14px
}

.row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px
}

.btn {
  width:100%;
  min-height:48px;
  border-radius:12px;
  border:2px solid var(--pt);
  background:transparent;
  color:var(--pt);
  font-size:16px;
  font-weight:600;
  margin-top:10px
}

.btn.on {
  background:var(--pri);
  color:#fff
}

.btn.no {
  border-color:var(--no);
  color:var(--no)
}

.btn.no.on {
  background:var(--no);
  color:#fff
}

.mini {
  min-height:44px;
  border-radius:10px;
  border:1px solid var(--bd);
  background:var(--bg);
  color:var(--tx);
  font-size:14px
}

.pill {
  background:var(--acc);
  color:var(--on);
  border-radius:20px;
  padding:3px 10px;
  font-size:13px;
  font-weight:700
}

.bar {
  height:8px;
  background:var(--bd);
  border-radius:6px;
  margin-top:8px;
  overflow:hidden
}

.bar i {
  display:block;
  height:100%;
  background:var(--pri)
}

.stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:8px
}

.stats div {
  background:var(--bg);
  border-radius:12px;
  padding:10px;
  text-align:center
}

.stats b {
  display:block;
  font-size:24px;
  color:var(--pt)
}

nav {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  background:var(--card);
  border-top:1px solid var(--bd);
  display:flex;
  padding-bottom:env(safe-area-inset-bottom,0px)
}

nav button {
  flex:1;
  border:0;
  background:none;
  color:var(--mut);
  padding:10px 4px;
  font-size:12px
}

nav button span {
  display:block;
  font-size:22px
}

nav button.a {
  color:var(--pt);
  font-weight:700
}

input,select,textarea {
  width:100%;
  padding:11px;
  border-radius:10px;
  border:1px solid var(--bd);
  background:var(--bg);
  color:var(--tx);
  font-size:16px;
  margin:4px 0 8px
}

label {
  font-size:13px;
  color:var(--mut)
}

.g2 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}

.sw {
  display:flex;
  align-items:center;
  gap:8px;
  margin:6px 0
}

.sw input {
  width:auto;
  margin:0
}

#toast {
  position:fixed;
  left:16px;
  right:16px;
  bottom:100px;
  background:#1f3a33;
  color:#fff;
  padding:12px 14px;
  border-radius:12px;
  display:none;
  z-index:9;
  text-align:center
}

/* ===== Tipografia sportiva ===== */
:root {
  --fb:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fd:"Barlow Condensed","Barlow",system-ui,sans-serif
}
body { font-family:var(--fb); font-size:16px }
button, input, select, textarea { font-family:inherit }
h2 { font-family:var(--fd); font-weight:800; font-size:27px; line-height:1.1; text-transform:uppercase; letter-spacing:.02em }
h3 { font-family:var(--fd); font-weight:700; font-size:16px; text-transform:uppercase; letter-spacing:.07em }
header b { font-family:var(--fd); font-weight:800; font-size:23px; text-transform:uppercase; letter-spacing:.08em }
.card b { font-family:var(--fd); font-weight:600; font-size:1.2em; letter-spacing:.01em }
.btn { font-family:var(--fd); font-weight:700; font-size:18px; text-transform:uppercase; letter-spacing:.06em }
.mini { font-family:var(--fd); font-weight:600; font-size:15px; text-transform:uppercase; letter-spacing:.05em }
.pill { font-family:var(--fd); font-weight:800; font-size:15px; letter-spacing:.04em }
label { font-family:var(--fd); font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.06em }
label.sw { text-transform:none; font-family:var(--fb); font-weight:500; letter-spacing:0 }
nav button { font-family:var(--fd); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.07em }
.stats b { font-family:var(--fd); font-weight:800; font-size:36px; line-height:1.1 }
.stats { font-family:var(--fd); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:13px }
.bigtxt { font-family:var(--fd); font-weight:800; font-size:44px; line-height:1.05; text-transform:uppercase; letter-spacing:.01em }
.score { font-family:var(--fd); font-weight:800; font-size:76px; line-height:1.05; color:var(--pt); letter-spacing:.02em }
.bigic .ic { width:1em; height:1em }
.mut { font-weight:500 }

/* ===== Icone (duotone: linea teal + forma lime, tutte uguali) ===== */
:root { --ic1:#1d5a4c; --ic2:var(--acc) }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]):not([data-theme="classic"]) { --ic1:#d3e58a; --ic2:#56693a } }
:root[data-theme="dark"] { --ic1:#d3e58a; --ic2:#56693a }
.ic { width:1.25em; height:1.25em; vertical-align:-.25em; flex:none; overflow:visible }
.ic .ia { fill:var(--ic2); stroke:var(--ic1); stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round }
.ic .ib { fill:var(--card); stroke:var(--ic1); stroke-width:1.7; stroke-linejoin:round }
.ic .is { fill:none; stroke:var(--ic1); stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round }
.ic.neg { --ic1:var(--no); --ic2:#f6cdc8 }
.btn.on .ic, .hero .ic { --ic1:#fff; --ic2:rgba(255,255,255,.28) }
nav button .ic { display:block; width:27px; height:27px; margin:0 auto 3px; opacity:.55 }
nav button.a .ic { opacity:1 }

/* ===== Etichette di stato e chip ===== */
.tag { display:inline-flex; align-items:center; gap:4px; font-family:var(--fd); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 10px; border-radius:20px; border:1px solid var(--bd); background:var(--bg) }
.tag .ic { width:1.1em; height:1.1em; vertical-align:-.2em }
.tag.ok { background:color-mix(in srgb, var(--acc) 40%, transparent); border-color:color-mix(in srgb, var(--pri) 40%, transparent) }
.tag.wait { background:rgba(255,184,0,.18); border-color:rgba(200,140,0,.4) }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px }
.chipx { border:0; background:none; color:inherit; font-size:18px; line-height:1; padding:0 0 0 4px; min-width:24px; min-height:24px }

/* ===== Caricamento: pallina da tennis che gira ===== */
#loader { display:none; position:fixed; inset:0; z-index:60; flex-direction:column; align-items:center; justify-content:center; gap:14px }
#loader.on { display:flex }
#loader.full { background:var(--bg) }
#loader.light { background:rgba(40,60,54,.25); gap:0 }
#loader .lb { display:flex; align-items:center; justify-content:center }
#loader.light .lb { background:var(--card); border-radius:22px; padding:16px; box-shadow:0 8px 30px rgba(0,0,0,.18) }
#loader .lt { font-family:var(--fd); font-weight:800; font-size:20px; letter-spacing:.14em; text-transform:uppercase; color:var(--pt) }
#loader.light .lt { display:none }
.ball { width:72px; height:72px; animation:ball-spin .9s linear infinite }
.ball .b1 { fill:var(--ic2); stroke:var(--ic1); stroke-width:4 }
.ball .b2 { fill:none; stroke:var(--ic1); stroke-width:3.2; stroke-linecap:round }
@keyframes ball-spin { to { transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce) { .ball { animation-duration:3s } }

/* ===== Versione e novità ===== */
.vers { display:flex; align-items:center; justify-content:center; gap:6px; margin:18px auto 0; border:0; background:none; color:var(--mut); font-family:var(--fd); font-weight:600; font-size:15px; letter-spacing:.07em; text-transform:uppercase; min-height:44px }
.vers .ic { width:20px; height:20px }
.sheet-bg { position:fixed; inset:0; z-index:50; background:rgba(40,60,54,.4); display:flex; align-items:flex-end; justify-content:center }
.sheet { background:var(--card); color:var(--tx); width:100%; max-width:560px; max-height:85vh; overflow:auto; border-radius:22px 22px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px)) }
.rel h4 { font-family:var(--fd); font-weight:800; font-size:22px; text-transform:uppercase; letter-spacing:.02em; margin:0 }
.rel ul { margin:8px 0 14px; padding-left:20px }
.rel li { margin:5px 0 }
details.rel { border-top:1px solid var(--bd); padding:8px 0 }
details.rel summary { font-family:var(--fd); font-weight:700; font-size:17px; text-transform:uppercase; letter-spacing:.04em; cursor:pointer; min-height:36px; display:flex; align-items:center }

/* ===== Meteo ===== */
.wx { position:relative; display:inline-block; vertical-align:middle; margin-left:4px }
.wxb { border:0; background:none; padding:0; line-height:1; font-size:1.3em; min-width:30px; min-height:30px }
.wxtip { position:absolute; left:0; top:112%; z-index:6; background:var(--tx); color:var(--bg); padding:8px 12px; border-radius:10px; font-size:14px; font-weight:500; white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.2) }
.wxtip[hidden] { display:none }
.wxbox { margin:2px 0 8px; font-size:15px }
.credits { text-align:center; font-size:12px; margin-top:4px }
.credits a { color:inherit }

/* ===== Icone meteo: a colori e più grandi ===== */
.wxb .ic { width:36px; height:36px; vertical-align:middle }
.wxbox .ic { width:40px; height:40px }
.wxbox .tag .ic { width:1.3em; height:1.3em }

/* ===== Etichetta "In corso" ===== */
.tag.live { background:rgba(224,60,49,.12); border-color:rgba(224,60,49,.55); color:#c0392b }
.tag.live::before { content:""; width:8px; height:8px; border-radius:50%; background:#e03c31; animation:live-pulse 1.4s ease-in-out infinite }
@keyframes live-pulse { 0%,100% { opacity:1 } 50% { opacity:.25 } }
@media (prefers-reduced-motion:reduce) { .tag.live::before { animation:none } }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]):not([data-theme="classic"]) .tag.live { color:#ff8a80 } }
:root[data-theme="dark"] .tag.live { color:#ff8a80 }

/* ===== Icona del profilo in alto a destra ===== */
.hbtn { margin-left:auto; display:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.18) }
.hbtn .ic { --ic1:#fff; --ic2:rgba(255,255,255,.28); width:26px; height:26px; margin:0; vertical-align:0 }
.hbtn.a { background:rgba(255,255,255,.4) }

/* ===== Testo piccolo nei pulsanti ===== */
.btn small { font-size:.7em; font-weight:500; letter-spacing:.03em; text-transform:none; opacity:.92 }

/* ===== Foto profilo ===== */
.hbtn { padding:0; overflow:hidden }
.hav { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block }
.hbtn.a { box-shadow:0 0 0 3px rgba(255,255,255,.7) }
.avrow { display:flex; align-items:center; gap:14px }
.avbig { width:84px; height:84px; border-radius:50%; background:var(--pri); display:flex; align-items:center; justify-content:center; overflow:hidden; flex:none }
.avbig img { width:100%; height:100%; object-fit:cover }
.avbig .ic { --ic1:#fff; --ic2:rgba(255,255,255,.28); width:48px; height:48px; margin:0; vertical-align:0 }

/* ===== Membri del gruppo ===== */
.mem summary { font-family:var(--fd); font-weight:700; font-size:16px; text-transform:uppercase; letter-spacing:.06em; cursor:pointer; min-height:40px; display:flex; align-items:center; color:var(--pt) }
.mlist { display:grid; gap:10px; margin-top:6px }
.mcard { display:flex; gap:12px; align-items:flex-start; background:var(--bg); border:1px solid var(--bd); border-radius:14px; padding:10px }
.avsm { width:52px; height:52px; border-radius:50%; background:var(--pri); display:flex; align-items:center; justify-content:center; overflow:hidden; flex:none }
.avsm img { width:100%; height:100%; object-fit:cover }
.avsm .ic { --ic1:#fff; --ic2:rgba(255,255,255,.28); width:30px; height:30px; margin:0; vertical-align:0 }
.mbody { flex:1; min-width:0 }
.mname { font-family:var(--fd); font-weight:700; font-size:19px; line-height:1.2 }
.stats.sm { margin-top:6px }
.stats.sm div { padding:6px 4px; background:var(--card) }
.stats.sm b { font-size:22px }

/* ===== Indicatore inviti sul menu ===== */
nav button { position:relative }
.bdg { position:absolute; top:3px; left:calc(50% + 6px); background:#e03c31; color:#fff; font-style:normal; font-family:var(--fd); font-weight:700; font-size:12px; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 5px }

/* ===== Gioco nascosto ===== */
.hlogo { cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none }
@keyframes wob { 0% { transform:rotate(0) } 30% { transform:rotate(-14deg) scale(1.08) } 60% { transform:rotate(10deg) } 100% { transform:rotate(0) } }
.wob { animation:wob .28s ease }
#game { position:fixed; inset:0; z-index:80; background:var(--pri2); touch-action:none; color:#fff; font-family:var(--fb) }
#game canvas { position:absolute; inset:0; touch-action:none }
.g-top { position:absolute; top:0; left:0; right:0; min-height:56px; display:flex; align-items:center; justify-content:space-between; padding:env(safe-area-inset-top,0px) 14px 0; z-index:2; font-family:var(--fd); font-weight:700; text-transform:uppercase; letter-spacing:.06em; background:linear-gradient(rgba(0,0,0,.25),transparent) }
.g-top b { font-size:30px; margin-left:8px }
.g-lbl { opacity:.8; font-size:14px }
#g-x { border:0; background:rgba(255,255,255,.2); color:#fff; font-size:28px; line-height:1; width:44px; height:44px; border-radius:50% }
#g-msg { position:absolute; left:24px; right:24px; top:50%; transform:translateY(-50%); max-width:420px; margin:0 auto; background:var(--card); color:var(--tx); border-radius:22px; padding:22px; text-align:center; z-index:2; box-shadow:0 10px 40px rgba(0,0,0,.3) }
#g-msg h2 { margin:0 0 6px }

/* ===== Pulsante "Preparati a giocare!" e punteggio del gioco ===== */
.prep { border-radius:6px; margin:0 0 12px; min-height:58px; font-size:23px }
.g-mid { font-family:var(--fd); font-weight:700; font-size:18px; text-transform:uppercase; letter-spacing:.06em }

/* ---------- Sondaggi ---------- */
.snopt { border:1px solid var(--bd); border-radius:12px; padding:10px 12px; margin-top:8px; cursor:pointer }
.snopt.ro { cursor:default }
.snopt.on { border-color:var(--pt); background:color-mix(in srgb, var(--pri) 10%, transparent) }
.snopt .row { gap:10px; justify-content:flex-start }
.snopt .row .pill { margin-left:auto }
.snlbl { flex:1; min-width:0; word-break:break-word }
.snlbl::first-letter { text-transform:uppercase }
.snbox { width:22px; height:22px; border:2px solid var(--bd); border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center }
.snbox.sq { border-radius:6px }
.snopt.on .snbox { border-color:var(--pt); background:var(--pri); --ic1:#fff }
.snbox .ic { width:15px; height:15px; margin:0; vertical-align:0 }
.snwhos { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:8px }
.snwho { display:inline-flex; align-items:center; gap:6px; font-size:14px }
.snwho .avsm { width:22px; height:22px }
.snwho .avsm .ic { width:13px; height:13px }
.snnot { padding:8px 0; border-top:1px solid var(--bd) }
.snnot:first-of-type { border-top:0 }

/* ---------- Più leggero: ombre morbide e meno movimento ---------- */
.card { box-shadow:0 1px 2px rgba(40,60,54,.06) }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important } }

/* Link nel testo */
main a { color:var(--pt) }

/* ---------- Elementi selezionabili: stato attivo ben visibile ---------- */
.btn.tg { background:var(--card) }
.btn.tg.on { background:var(--pri); color:#fff; box-shadow:inset 0 -6px 0 var(--acc) }
.btn.no.tg.on { background:var(--no); color:#fff }
.snopt { border-width:2px; background:var(--card) }
.snopt.on { background:var(--pri); border-color:var(--pri); color:#fff; font-weight:600 }
.snopt.on .bar { background:rgba(255,255,255,.3) }
.snopt.on .bar i { background:var(--acc) }
.snopt.on .mut, .snopt.on .snwho { color:#fff }
.snopt.on .pill { background:var(--acc); color:var(--on) }
.snopt .snbox { border-color:var(--mut) }
.snopt.on .snbox { background:#fff; border-color:#fff; --ic1:var(--pri); --ic2:transparent }
.snopt.on .snbox .ic { width:17px; height:17px }
input[type=checkbox], input[type=radio] { accent-color:var(--pri); width:22px !important; height:22px; flex:none }
label.sw { padding:8px 10px; border:2px solid var(--bd); border-radius:12px; margin:6px 0 }
label.sw:has(input:checked) { border-color:var(--pri); background:color-mix(in srgb, var(--pri) 14%, transparent); font-weight:600 }
nav button.a { background:color-mix(in srgb, var(--pri) 16%, transparent); border-radius:14px; box-shadow:inset 0 3px 0 var(--pri) }
nav button.a .ic { opacity:1 }

.snvoter { padding:10px 0; border-top:1px solid var(--bd) }
.snvoter .g2 { margin-top:6px }

.snday { padding:8px 0 12px; border-top:1px solid var(--bd) }

/* ---------- Colore secondario (sfumatura) ---------- */
header { background:linear-gradient(90deg, var(--pri), var(--pri2)) }
.bar i { background:linear-gradient(90deg, var(--pri), var(--pri2)) }
.snopt.on .bar i { background:var(--acc) }

/* ---------- Tema Classic: blu padel e giallo fosforescente ---------- */
:root[data-theme="classic"] {
  --bg:#f1f5fc;
  --card:#fff;
  --tx:#14224d;
  --mut:#586a92;
  --pri:#234396;
  --pt:#234396;
  --pri2:#1b6cb5;
  --acc:#dff21a;
  --bd:#d3deef;
  --on:#14224d;
  --ink:#14224d;
  --ic1:#234396;
  --ic2:var(--acc);
  color-scheme:light
}

/* ---------- Traguardi (badge) ---------- */
.bdg-t { font-family:var(--fd); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--mut); margin:12px 0 6px }
.bdgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px }
.bdc { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:2px solid transparent; border-radius:14px; padding:4px 2px 5px; cursor:pointer; color:var(--tx); font:inherit }
.bdc img { width:100%; max-width:64px; aspect-ratio:1; display:block; filter:grayscale(1); opacity:.35; transition:transform .15s }
.bdc.on img { filter:none; opacity:1 }
.bdc:active img { transform:scale(.94) }
.bdn { font-size:11px; font-weight:600; line-height:1.15; text-align:center; color:var(--mut) }
.bdc.on .bdn { color:var(--tx) }
.bdp { width:80%; height:4px; border-radius:3px; background:var(--bd); overflow:hidden }
.bdp i { display:block; height:100%; background:var(--pri) }
.bdov { position:fixed; inset:0; z-index:90; background:rgba(10,20,40,.55); display:flex; align-items:center; justify-content:center; padding:20px; animation:bdfade .2s }
.bdbox { background:var(--card); color:var(--tx); border-radius:20px; padding:22px 20px 18px; width:100%; max-width:340px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.35); animation:bdpop .25s }
.bdbox h3 { margin:10px 0 4px; font-size:22px; color:var(--tx) }
.bdd { color:var(--mut); font-weight:500; margin-bottom:6px }
.bdnew { font-family:var(--fd); font-weight:800; font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--pt) }
.bdbox .btn { margin-top:12px; width:100% }
.bdp.wide { width:100%; height:6px; margin:10px 0 0 }
.bdcoin { perspective:700px; margin:0 auto }
.bdcoin.big { width:150px }
.bdcoin img { width:100%; display:block; filter:grayscale(1); opacity:.4 }
.bdcoin.on img { filter:none; opacity:1 }
.bdcoin.spin img { animation:bdspin 1.4s cubic-bezier(.2,.7,.2,1) }
@keyframes bdfade { from { opacity:0 } to { opacity:1 } }
@keyframes bdpop { from { transform:scale(.92); opacity:0 } to { transform:none; opacity:1 } }
@keyframes bdspin { from { transform:rotateY(0) scale(.6) } to { transform:rotateY(1440deg) scale(1) } }
.bdst { margin-top:8px; font-size:13px; font-weight:600; color:var(--mut) }
.bdst.ok { color:var(--pt) }
@media (prefers-reduced-motion:reduce) { .bdcoin.spin img, .bdbox, .bdov { animation:none } }

textarea { resize:vertical; min-height:96px; line-height:1.4 }