/* ARNAR SLOTS – styles. Own tokens, no external fonts or images. */
.slots {
  --s-bg: #080c1e; --s-panel: #0e1430; --s-amber: #ffb000; --s-amber-d: #784c00;
  --s-amber-m: #c88200; --s-ink: #ffe9b0; --s-red: #e1282d;
  max-width: 960px; margin: 0 auto; color: var(--s-ink);
  font-family: "Press Start 2P", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
}
.slots-stage { background: var(--s-bg); border: 2px solid var(--s-amber-m); padding: 6px; }
.slots-canvas { display: block; width: 100%; height: auto; aspect-ratio: 320 / 200; image-rendering: pixelated; image-rendering: crisp-edges; cursor: pointer; }
.slots-status { min-height: 1.4em; margin: 10px 0 6px; font-size: 12px; line-height: 1.5; color: var(--s-amber); }
.slots-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.slots-btn {
  font: inherit; font-size: 12px; line-height: 1; padding: 12px 14px; min-height: 44px;
  color: var(--s-amber); background: #000; border: 2px solid var(--s-amber-m); cursor: pointer;
}
.slots-btn:hover:not(:disabled) { background: #1c1400; border-color: var(--s-amber); }
.slots-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.slots-btn:disabled { opacity: .4; cursor: not-allowed; }
.slots-spin { background: var(--s-red); color: #fff; border-color: #ff8a8d; padding: 12px 28px; letter-spacing: 1px; }
.slots-spin:hover:not(:disabled) { background: #ff3b40; border-color: #fff; }
.slots-refill { background: var(--s-amber); color: #000; }
.slots-refill:hover:not(:disabled) { background: #ffc933; }
.slots-btn[hidden] { display: none; }
.slots-fact { margin: 8px 0 12px; padding: 14px 16px; background: #000; border: 2px solid var(--s-amber); border-left-width: 8px; }
.slots-fact[hidden] { display: none; }
.slots-fact-head { margin: 0 0 8px; font-size: 11px; line-height: 1.5; color: #fff; }
.slots-fact-text { margin: 0 0 10px; font-size: 13px; line-height: 1.7; color: var(--s-ink); font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; font-weight: 700; }
.slots-fact-src { margin: 0; font-size: 10px; line-height: 1.6; color: #78bebe; }
.slots-fact-src a { color: #78bebe; text-underline-offset: 3px; }
.slots-fact-src a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.slots-fact-in { animation: slots-in .5s steps(6) 1; }
@keyframes slots-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.slots-pay { margin: 8px 0; border: 2px solid var(--s-amber-d); background: #000; }
.slots-pay summary { padding: 12px 14px; font-size: 11px; color: var(--s-amber); cursor: pointer; min-height: 44px; box-sizing: border-box; }
.slots-pay summary:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.slots-paytable { padding: 0 14px 14px; font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; }
.slots-paytable table { width: 100%; border-collapse: collapse; }
.slots-paytable th { text-align: left; font-size: 11px; color: var(--s-amber-m); padding: 6px 4px; border-bottom: 1px solid var(--s-amber-d); }
.slots-paytable td { padding: 6px 4px; border-bottom: 1px solid #1c1c3a; vertical-align: middle; }
.slots-paytable td:last-child, .slots-paytable th:last-child { text-align: right; white-space: nowrap; }
.slots-paytable p { margin: 10px 0 0; color: #b9a56a; }
.slots-ico { display: inline-block; vertical-align: middle; margin-right: 4px; background: #fff4d6; padding: 2px; }
.slots-ico canvas { display: block; width: 24px; height: 24px; image-rendering: pixelated; image-rendering: crisp-edges; }
.slots-note { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: #b9a56a; font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; }
@media (max-width: 560px) {
  .slots-btn { font-size: 10px; padding: 12px 10px; flex: 1 1 auto; }
  .slots-spin { flex-basis: 100%; order: -1; font-size: 14px; }
  .slots-status { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .slots-fact-in { animation: none; } }