/* Game Night instant bid: the quick picks are cream tiles that lift and
   show a token's colour along their foot under the pointer; the steppers
   are small tiles too. The sheet itself is dressed in skin/home.css. */
@import url("../../../components/instant_bid_modal.css");

.ibm-step { border-radius: 10px !important; border-color: var(--rule) !important; box-shadow: 0 3px 0 var(--rule); transition: transform .15s ease, box-shadow .15s ease; }
.ibm-step:hover { background: var(--btn-bg) !important; color: var(--btn-ink) !important; border-color: transparent !important; }
.ibm-step:active { transform: translateY(3px); box-shadow: none; }
.ibm-bid-input { font-family: var(--font-display) !important; font-weight: 800 !important; border-radius: 12px !important; font-variant-numeric: tabular-nums; }
.ibm-bid-input:focus { border-color: var(--gmn-wood) !important; box-shadow: 0 0 0 4px var(--gmn-yellow-soft); }
.ibm-pill { position: relative; border-radius: 11px !important; font-family: var(--font-display); font-size: .98rem; font-weight: 800; color: #2b1a10 !important; border: 0; background: linear-gradient(180deg, #fffdf3, #f0e2c2); box-shadow: inset 0 0 0 2px rgba(91, 58, 38, .2), 0 4px 0 #a68558; transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease; }
.ibm-pill:hover, .ibm-pill:focus-visible { box-shadow: inset 0 0 0 2px rgba(91, 58, 38, .2), inset 0 -5px 0 var(--gmn-red), 0 4px 0 #a68558; transform: translateY(-1px); }
.ibm-pill:active { transform: translateY(4px); box-shadow: inset 0 0 0 2px rgba(91, 58, 38, .2), inset 0 -5px 0 var(--gmn-red); }
.ibm-pill-max { background: var(--gmn-grain), #5b3a26; color: #fbf3df !important; box-shadow: 0 4px 0 #34200f; }
html.dark .ibm-pill-max { background: #f3e6c8; color: #2b1a10 !important; box-shadow: 0 4px 0 #a68558; }
.ibm-pill-min { background: transparent; border: 2px dashed var(--rule); color: var(--ink-2) !important; box-shadow: none; font-family: var(--font-ui); font-weight: 800; }
.ibm-full-link:hover { color: var(--ink); text-decoration: underline dotted; text-decoration-color: var(--gmn-red); text-decoration-thickness: 3px; text-underline-offset: 3px; }
/* the plain pills keep their light card face under the pointer; the shared
   hover's dark fill hid their dark figures */
html:not(.dark) .ibm-pill:not(.ibm-pill-max):hover { background: linear-gradient(180deg, #fffdf3, #f0e2c2); }