/* GAMPEONS im Portal (wallet.js): Wallet, Pakete, Preise an Items. Farben aus portal.css, Akzent bleibt Imperial Red. */
.coins { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.coins svg.i { width:15px; height:15px; color:var(--accent); }

/* Preis an Karten und Item-Seite */
.card .meta .price { margin-left:auto; display:inline-flex; align-items:center; gap:3px; font-weight:800; font-size:.78rem; color:var(--fg); }
.card .meta .price svg.i { color:var(--accent); width:14px; height:14px; margin:0; }
.pill.coin { background:rgba(18,19,29,.78); color:var(--fg); box-shadow:inset 0 0 0 1px rgba(239,35,60,.55); backdrop-filter:blur(4px); display:inline-flex; align-items:center; gap:5px; }
.pill.coin svg.i { width:13px; height:13px; color:var(--accent); }
.pill.test { background:rgba(141,153,174,.18); color:var(--muted); font-size:.62rem; }
button.link { background:none; border:0; padding:0; font:inherit; color:var(--fg); cursor:pointer; display:inline-flex; align-items:center; }
button.link:hover { color:var(--accent); }

/* Saldo in der Topbar */
.coin-chip { display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 14px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-weight:800; font-size:.85rem; }
.coin-chip svg.i { color:var(--accent); }
.coin-chip:hover { border-color:rgba(239,35,60,.6); color:var(--fg); }

/* Hinweis Testmodus */
.notice.test { border-color:var(--manatee); background:repeating-linear-gradient(135deg, var(--surface) 0 14px, rgba(43,45,66,.55) 14px 28px); margin-top:16px; }
.page-head + .notice { margin-top:16px; }

/* Aufbau: Inhalt links, Regeln rechts */
.wallet-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,340px); gap:28px; align-items:start; }
.wallet-layout > aside { position:sticky; top:96px; margin-top:20px; }
.wallet-layout .sec:first-of-type { margin-top:8px; }

/* Pakete */
.packs { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.pack { position:relative; display:grid; gap:4px; padding:18px 16px; border-radius:var(--radius); background:var(--card); border:1px solid var(--line); text-transform:none; letter-spacing:0; color:var(--fg); font-weight:400; cursor:default; }
label.pack { cursor:pointer; transition:border-color .15s, box-shadow .15s; }
label.pack:hover { border-color:var(--manatee); }
.pack input { position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.pack:has(input:checked) { border-color:var(--accent); box-shadow:var(--glow); }
.pack:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.pack-c { display:flex; align-items:center; gap:6px; }
.pack-c b { font:400 2.1rem/1 var(--display); letter-spacing:.02em; }
.pack-c svg.i { width:22px; height:22px; color:var(--accent); }
.pack-p { font-weight:800; font-size:1rem; }
.pack-x { font-size:.72rem; color:#7be0aa; font-weight:700; }
.pack-x.muted { color:var(--muted); font-weight:400; }
form.buy { display:grid; gap:14px; }
form.buy .form-msg:empty, #buy-item .form-msg:empty, #price-form .form-msg:empty { display:none; }
form.buy .check { max-width:720px; }
.check.terms { background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:12px 14px; font-size:.85rem; line-height:1.45; }

/* Buchungen */
.chg { display:inline-flex; align-items:baseline; gap:4px; margin-right:10px; font-weight:800; white-space:nowrap; }
.chg small { font-weight:400; color:var(--muted); font-size:.72rem; }
.chg.up { color:#7be0aa; }
.chg.down { color:var(--fg); }

/* Regeln */
.coin-rules .ticks { margin:0; padding:0; list-style:none; display:grid; gap:10px; font-size:.86rem; color:var(--muted); }
.coin-rules .ticks li { position:relative; padding-left:18px; }
.coin-rules .ticks li::before { content:""; position:absolute; left:2px; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
main > .coin-rules { margin-top:28px; max-width:720px; }

#price-form, #buy-item { max-width:none; gap:10px; }

@media (max-width:980px) {
  .wallet-layout { grid-template-columns:minmax(0,1fr); }
  .wallet-layout > aside { position:static; margin-top:0; }
}
@media (max-width:560px) {
  .coin-chip { height:36px; padding:0 10px; font-size:.78rem; }
  .packs { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.wallet-layout .box > p, .wallet-layout .box form > p { margin:0; }
.wallet-layout .box > p + p { margin-top:10px; }