/* Additions on top of the original style.css / custom-style.css */
.app-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: #fff; border-bottom: 1px solid #eee; }
.app-topbar .menu_toggle { background: none; border: 0; padding: 8px; color: #000; }
.wallet-pill { color: #1c0e25; font-weight: 600; }
.menu-wrapper { max-width: 480px; }
.menu-wrapper.show { transform: none !important; }
.menu-link.active { background: #f3f3fb; }
.overlay-bg { display: none; }
.overlay-bg.show { display: block; opacity: .5; }
.float-chat { position: fixed; right: 20px; z-index: 999; }
.float-chat img { width: 60px; height: 60px; object-fit: contain; }
.btn-brand { background: #1c0e25; color: #fff; }
.btn-brand:hover { background: #2d1a3a; color: #fff; }
.btn-brand2 { background: #272b8c; color: #fff; }
.btn-brand2:hover { background: #343ab3; color: #fff; }
.game-tile { position: relative; display: block; }
.game-tile img { width: 100%; height: auto; border-radius: .5rem; }
.game-tile .soon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; font-weight: 700; border-radius: .5rem; letter-spacing: 1px; }
.game-tile .tile-name { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; padding: 2px 8px; border-radius: 6px; font-size: .8rem; }
.rules_content.show, .sheet.show { transform: none !important; visibility: visible !important; }
.sheet { max-width: 480px; }
.room-code { font-size: 2.2rem; letter-spacing: 4px; font-weight: 800; }
.kv { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed #ddd; }
.metric { background: #f7f7fb; border-radius: 10px; padding: 14px; text-align: center; }
.metric b { display: block; font-size: 1.25rem; }
.preset { min-width: 70px; }
.reason-pill { cursor: pointer; }
.reason-pill.active { background: #198754 !important; }
.otp-input { width: 46px; height: 52px; text-align: center; font-size: 1.4rem; }
.txn-row { border-bottom: 1px solid #eee; padding: 10px 0; }
.txn-amt.credit { color: #198754; }
.txn-amt.debit { color: #dc3545; }
.page-content img { max-width: 100%; }
@media (min-width: 992px) {
  .menu-wrapper { width: 480px !important; }
}