/* ======================================================================
   Heart Coins: Chip oben, Sheet (Verlauf / Casino)
   ====================================================================== */

/* ---------- Münze ---------- */
.coin{display:inline-block;flex-shrink:0;width:18px;height:18px;border-radius:50%;position:relative;vertical-align:-3px;
  background:radial-gradient(circle at 32% 28%,#fff6c9 0 18%,#ffd45c 40%,#f0a92a 78%,#c97c12 100%);
  box-shadow:inset 0 0 0 1.5px rgba(160,90,0,.35),0 1px 3px rgba(150,80,0,.35)}
.coin::after{content:'♥';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;line-height:1;color:#e0457b;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.coin.big{width:46px;height:46px}
.coin.big::after{font-size:26px}

/* ---------- Chip oben ---------- */
.coin-chip{position:relative;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 8px;
  border:1px solid var(--glass-border);border-radius:17px;background:var(--glass-strong);cursor:pointer;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 4px 14px rgba(var(--shadow),.18);
  font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.coin-chip:active{transform:scale(.94)}
.coin-chip:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}
.coin-chip.bump{animation:coinBump .7s ease}
.coin-chip.bump .coin{animation:coinSpin .7s ease}
.coin-chip.down{animation:coinDown .4s ease}
@keyframes coinBump{0%{transform:scale(1)}30%{transform:scale(1.18);box-shadow:0 0 0 4px rgba(255,212,92,.45),0 4px 18px rgba(240,169,42,.5)}100%{transform:scale(1)}}
@keyframes coinSpin{to{transform:rotateY(360deg)}}
@keyframes coinDown{50%{transform:scale(.92)}}
.coin-float{position:fixed;z-index:70;pointer-events:none;transform:translate(-50%,0);font-size:15px;font-weight:700;
  animation:coinFloat 1.3s ease-out forwards;text-shadow:0 1px 6px rgba(255,255,255,.8)}
.coin-float.plus{color:#d98a00}
.coin-float.minus{color:var(--ink-soft)}
@keyframes coinFloat{0%{opacity:0;transform:translate(-50%,-6px) scale(.7)}20%{opacity:1;transform:translate(-50%,4px) scale(1.15)}100%{opacity:0;transform:translate(-50%,28px) scale(1)}}

.coin-toast{position:fixed;left:50%;top:calc(var(--top-h) + 6px);z-index:65;transform:translate(-50%,-30px);opacity:0;pointer-events:none;
  padding:10px 16px;border-radius:20px;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;transition:transform .4s,opacity .4s}
.coin-toast.show{transform:translate(-50%,0);opacity:1}

/* ---------- Sheet ---------- */
.coin-sheet{min-height:62vh}
.coin-head{display:flex;align-items:center;justify-content:center;gap:12px;margin:2px 0 2px}
.coin-head b{display:block;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.coin-head small{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--ink-soft);text-transform:uppercase}
.coin-sheet .segmented{margin-bottom:2px}
.coin-pane{display:flex;flex-direction:column;gap:12px}
.coin-sub{font-size:14px;font-weight:700;color:var(--ink-soft);letter-spacing:.5px;text-transform:uppercase;margin:6px 0 2px}
.coin-empty{font-size:14px;font-weight:600;color:var(--ink-soft);text-align:center;padding:10px}
.coin-intro{font-size:14px;font-weight:600;color:var(--ink-soft);text-align:center;line-height:1.4}

/* Heute */
.coin-today{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ct-head{grid-column:1/-1;font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--ink-soft)}
.ct-item{display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 4px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-border)}
.ct-item span{font-size:18px}
.ct-item b{font-size:17px;font-variant-numeric:tabular-nums}
.ct-item small{font-size:11px;font-weight:700;color:var(--ink-soft);text-align:center}

.coin-how{border-radius:16px;background:var(--glass);border:1px solid var(--glass-border);padding:10px 14px}
.coin-how summary{font-size:14px;font-weight:700;cursor:pointer;color:var(--ink)}
.coin-how ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:10px}
.coin-how li{display:grid;grid-template-columns:24px 1fr;gap:2px 8px;font-size:14px;font-weight:600}
.coin-how li b{grid-column:2;font-size:12px;color:var(--ink-soft)}

.coin-ledger{display:flex;flex-direction:column}
.ledger-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--glass-border)}
.ledger-row:last-child{border-bottom:none}
.lr-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.lr-text span{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr-text small{font-size:12px;font-weight:600;color:var(--ink-soft)}
.lr-amt{font-size:16px;font-variant-numeric:tabular-nums}
.lr-amt.plus{color:#d98a00}
html[data-theme="gluehwein"] .lr-amt.plus,html[data-theme="mondnacht"] .lr-amt.plus{color:#ffd45c}
.lr-amt.minus{color:var(--ink-soft)}

/* ---------- Casino-Bereich im Sheet ---------- */
.casino-game{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:22px;cursor:pointer;text-align:left;color:var(--ink)}
.casino-game:active{transform:scale(.97)}
.cg-ico{width:52px;height:52px;flex-shrink:0;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:30px;
  background:linear-gradient(135deg,var(--accent2),var(--accent));box-shadow:0 6px 16px rgba(var(--shadow),.3)}
.cg-text{flex:1;display:flex;flex-direction:column;gap:2px}
.cg-text b{font-size:17px}
.cg-text small{font-size:13px;font-weight:600;color:var(--ink-soft)}
.casino-game .gc-play{pointer-events:none}

@media (max-width:360px){
  .coin-chip{padding:0 9px 0 6px;font-size:13px}
}