body { margin: 0; background: #080a09; color: #e9dcc3; font-family: "Segoe UI", Arial, sans-serif; }
[hidden] { display: none !important; }

.rn-app { max-width: 1120px; margin: 0 auto; }

/* Кошелёк — тонкая строка над колодцем, чтобы кнопки гадания сразу были на экране телефона. */
.rn-purses { display: flex; justify-content: flex-end; align-items: center; gap: 6px; padding: 6px 12px 0; }
.rn-details-button { margin-right: auto; min-height: 44px; padding: 5px 12px; border: 1px solid #765a35; border-radius: 999px; background: #16130d; color: #e9dcc3; font: inherit; font-size: 13px; cursor: pointer; }
.rn-details-button:hover { border-color: #b58a4a; color: #f0c879; }
.rn-purse { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid rgba(153, 119, 67, .34); border-radius: 999px; background: #0e100f; font-size: 12px; color: #9e9585; }
.rn-purse b { color: #f0c879; font-weight: 600; }
.rn-coin { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f4f1ea, #9fb0b8 55%, #4e5a60); box-shadow: 0 0 6px rgba(170, 200, 215, .45); }

.rn-status { margin: 6px 12px 0; font-size: 13px; color: #9e9585; }
.rn-status.rn-error { color: #e59b8a; }
.rn-payment { margin: 10px 12px; padding: 10px; border: 1px solid #765a35; border-radius: 8px; display: flex; flex-wrap: wrap; gap: 8px 16px; min-width: 0; }
.rn-payment legend { padding: 0 6px; color: #f0c879; }
.rn-payment label { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.rn-payment input { accent-color: #d8ad64; width: 20px; height: 20px; }
.rn-payment p { flex-basis: 100%; margin: 0; font-size: 13px; line-height: 1.5; color: #c9bda6; }
.rn-payment input:focus-visible, .rn-btn:focus-visible { outline: 2px solid #f0c879; outline-offset: 4px; }
.rn-btn { min-height: 44px; }

.rn-app .dv { padding: 6px 12px 12px; }
.rn-app .dv-stage { height: calc(100svh - 96px); min-height: 440px; max-height: 760px; border-radius: 10px; }

.rn-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 14px; border: 1px solid #765a35; border-radius: 8px; background: #16130d; color: #e9dcc3; font: inherit; font-size: 14px; cursor: pointer; }
.rn-btn:hover:not(:disabled) { border-color: #b58a4a; }
.rn-btn:disabled { opacity: .45; cursor: default; }
.rn-btn-gold { background: linear-gradient(180deg, #4a3818, #2a2010); border-color: #b58a4a; }
.rn-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.rn-sheet { position: fixed; inset: 0; z-index: 50; display: grid; place-items: end center; background: rgba(0, 0, 0, .6); }
.rn-sheet[hidden] { display: none; }
.rn-sheet-card { position: relative; width: min(520px, 100%); padding: 18px 16px 22px; border: 1px solid #514432; border-radius: 14px 14px 0 0; background: #111514; }
.rn-sheet-card h2 { margin: 0 32px 8px 0; font-family: Georgia, "Times New Roman", serif; font-size: 20px; }
.rn-sheet-close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border: 0; background: none; color: #9e9585; font-size: 22px; cursor: pointer; }
.rn-exchange-need { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: #c9bda6; }
.rn-exchange-slider label { display: block; margin-bottom: 6px; font-size: 12px; color: #9e9585; }
.rn-exchange-slider input { width: 100%; accent-color: #b58a4a; }
.rn-exchange-quote { margin: 6px 0 0; font-size: 13px; color: #9e9585; }
.rn-exchange-quote b { color: #f0c879; }

.rn-details-card { display: flex; flex-direction: column; width: min(720px, 100%); max-height: 88svh; padding-bottom: 12px; }
.rn-details-tabs { display: flex; gap: 6px; margin: 4px 0 10px; }
.rn-details-tabs button { flex: 1; padding: 8px 10px; border: 1px solid rgba(153, 119, 67, .34); border-radius: 8px; background: #0d0f0e; color: #9e9585; font: inherit; font-size: 14px; cursor: pointer; }
.rn-details-tabs button[aria-selected="true"] { color: #f0c879; background: #1b1710; border-color: #765a35; }
.rn-details-body { overflow-y: auto; padding-right: 4px; font-size: 14px; line-height: 1.55; color: #c9bda6; }
.rn-details-body p { margin: 0 0 8px; }
.rn-details-body b { color: #f0c879; }
.rn-rule { margin-bottom: 12px; border: 1px solid #2c2820; border-radius: 10px; overflow: hidden; }
.rn-rule h3 { margin: 0 0 8px; padding: 7px 12px; font-size: 14px; font-weight: 600; color: #e9dcc3; background: #1a1813; }
.rn-rule p, .rn-rule .rn-list-kind { padding: 0 12px; }
.rn-rule-nav h3 { background: linear-gradient(90deg, rgba(211, 162, 83, .45), rgba(211, 162, 83, .12)); color: #ffe3a8; }
.rn-rule-witch h3 { background: linear-gradient(90deg, rgba(173, 130, 182, .45), rgba(173, 130, 182, .12)); color: #f0dcf6; }
.rn-rule-moon h3 { background: linear-gradient(90deg, rgba(139, 161, 161, .4), rgba(139, 161, 161, .1)); color: #e1eef2; }
.rn-list-kind h4 { margin: 0 0 4px; font-size: 13px; color: #e9dcc3; }
.rn-list-kind h4 small { font-weight: 400; color: #9e9585; }
.rn-list-kind p { padding: 0; font-size: 13px; color: #a99d86; }
.rn-note-small { font-size: 12px; color: #7d7466; }

@media (min-width: 761px) {
  .rn-sheet { place-items: center; }
  .rn-sheet-card { border-radius: 14px; }
}