/* Ranch-only composition. Home shell, approved images and shared tokens remain unchanged. */
.br-ranch .ranch-page { background:#142720; border-inline:2px solid #080f13; }
.br-ranch .ranch-board { position:relative; isolation:isolate; height:clamp(440px,calc(100svh - 290px),600px); border:1px solid #6a7953; overflow:hidden; background:#203a2c; }
.br-ranch .ranch-scene { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.br-ranch .ranch-board::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#08191166,transparent 28%,transparent 70%,#07191055); z-index:0; }
.br-ranch .ranch-progression { position:absolute; z-index:1; top:18px; left:20px; padding:10px 18px; border-left:3px solid #ceb763; background:linear-gradient(90deg,#0a211deb,#10271ac4 85%,#10271a00); max-width:calc(100% - 40px); text-shadow:0 2px 2px #000; }
.br-ranch .ranch-progression h1 { font-size:clamp(1.35rem,2.2vw,2rem); margin:0 0 3px; color:#ffe393; }
.br-ranch .ranch-level-label { font-size:.65em; }
.br-ranch .ranch-progression p { margin:0; font-size:.8rem; }
.br-ranch .ranch-progression strong { color:#ffe393; }
.br-ranch .ranch-progression .ranch-next { margin-top:3px; font-size:.7rem; color:#cbd6b6; }
.br-ranch .ranch-station { position:absolute; z-index:1; right:20px; bottom:20px; width:330px; padding:14px 16px 10px; background:linear-gradient(155deg,#344b35f7,#112a23f5 70%); border:1px solid #99a26b; border-radius:12px 12px 20px 20px; box-shadow:inset 0 3px 0 #d5dbaf33,inset 0 -4px 0 #05140f,0 5px 0 #07130f; }
.br-ranch .ranch-station h2 { font-size:1rem; color:#f0e3b1; margin:0 0 9px; }
.br-ranch .ranch-resource-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.br-ranch .ranch-ready { display:grid; }
.br-ranch .ranch-ready>span,.br-ranch .ranch-wallet span { color:#c6d0b7; font-size:.68rem; }
.br-ranch .ranch-ready>strong { font-size:1.8rem; line-height:1.1; color:#fff1bb; }
.br-ranch .ranch-ready small { font-size:.9rem; color:#c6d0b7; }
.br-ranch .ranch-wallet { display:flex; align-items:center; gap:4px; border-left:1px solid #91a37166; padding-left:8px; }
.br-ranch .ranch-wallet img { width:44px; height:44px; object-fit:contain; flex-shrink:0; }
.br-ranch .ranch-wallet>div { display:grid; }
.br-ranch .ranch-wallet strong { font-size:.9rem; }
.br-ranch .ranch-countdown { font-variant-numeric:tabular-nums; color:#d5dfbc; font-size:.78rem; margin:8px 0 10px; min-height:1.2em; }
.br-ranch .ranch-actions { display:grid; gap:8px; }
.br-ranch .ranch-actions>.br-btn-primary { width:100%; min-height:56px; font-size:1.4rem; border-radius:9px 9px 14px 14px; }
.br-ranch .ranch-actions>.br-btn-primary:not(:disabled) { background:linear-gradient(#ffe476,#ffcd3e 40%,#dca321); box-shadow:inset 0 3px 0 #fff4b2,inset 0 -5px 0 #9c691e,0 4px 0 #071012; }
.br-ranch .ranch-upgrade { font-size:.78rem; min-height:44px; padding:8px; --button-body:#376346; --button-ink:#eff3dc; }
.br-ranch .ranch-upgrade:disabled { border:1px solid #78877355; background:transparent; box-shadow:none; color:#c3cdb7; }
.br-ranch .ranch-rate { font-size:.64rem; line-height:1.5; color:#bfcbb0; margin:8px 0 0; }
.br-ranch .ranch-secondary { display:flex; align-items:center; gap:6px; padding:5px 12px; border-top:1px solid #748052; background:linear-gradient(#26392b,#152821); }
.br-ranch .ranch-secondary-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; font:inherit; font-weight:700; font-size:.76rem; min-height:44px; min-width:44px; padding:6px 12px; border:1px solid #80916b66; background:#11271d; color:#e4e7cd; border-radius:6px; text-decoration:none; }
.br-ranch .ranch-secondary-button:hover { background:#2b4933; }
.br-ranch .ranch-secondary-button:disabled { opacity:.6; }
.br-ranch .ranch-secondary [data-open-dialog="ranch-collections"] { margin-right:auto; }
.br-ranch .ranch-owned-count { color:#ffdf86; font-variant-numeric:tabular-nums; }
.br-ranch .ranch-open-label { color:#aabfa7; font-weight:400; }
.br-ranch .ranch-feedback-row { padding:0 12px; }
.br-ranch #ranch-feedback { margin:0; font-size:.75rem; line-height:1.5; }
.br-ranch .ranch-feedback-row:has(#ranch-feedback:not(:empty)) { padding-block:5px; }
.br-ranch [data-ranch-retry] { min-height:44px; font-size:.8rem; margin:5px 0; }
.br-ranch .ranch-welcome p { font-size:.8rem; line-height:1.5; }
.br-ranch .ranch-welcome .br-btn { display:flex; align-items:center; justify-content:center; text-decoration:none; min-height:52px; font-size:1rem; }
.br-ranch .ranch-page [hidden] { display:none!important; }
/* Native modal dialog supplies focus containment, Escape dismissal and inert background. */
.br-ranch .ranch-dialog { width:min(660px,calc(100vw - 24px)); max-height:calc(100svh - 32px); overflow-y:auto; overscroll-behavior:contain; color:var(--br-text); background:linear-gradient(#243a2e,#11261f); border:2px solid #9a9b65; border-radius:12px; padding:16px; box-shadow:0 16px 60px #000b; }
.br-ranch .ranch-dialog::backdrop { background:#030e0bd9; }
.br-ranch .ranch-dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; }
.br-ranch .ranch-dialog h2 { margin:0; color:#ffe393; font-size:1.15rem; }
.br-ranch .ranch-dialog-note { font-size:.78rem; color:#c1cfb8; margin-bottom:8px; }
.br-ranch .ranch-sheet { display:block; width:min(100%,480px); height:auto; margin:0 auto 8px; }
.br-ranch .ranch-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 6px; border-top:1px solid #77876d66; }
.br-ranch .ranch-item h3 { margin:0 0 4px; font-size:.85rem; }
.br-ranch .ranch-item p { margin:0 0 3px; font-size:.7rem; color:#c5d1b8; }
.br-ranch .ranch-item strong { font-size:.72rem; color:#f2df9a; }
.br-ranch .ranch-item-actions { display:flex; gap:5px; }
.br-ranch .ranch-item .br-btn { min-height:44px; padding:7px 10px; font-size:.8rem; }
.br-ranch .ranch-item[data-selected="true"] { border-left:3px solid #ffdd7d; }
.br-ranch .ranch-clear { margin-top:10px; }
.br-ranch .ranch-dialog-feedback { font-size:.8rem; margin:8px 0 0; }
.br-ranch .ranch-info p { font-size:.9rem; line-height:1.7; }
@media(max-width:767.98px) {
 /* Let this compact screen and its dock follow content, without a viewport-height spacer. */
 .br-ranch main.container { min-height:0; padding:4px 8px 12px !important; }
 .br-ranch .ranch-page { flex:0 0 auto; }
 .br-ranch main > .br-bottom-nav { position:static; margin-top:8px; }
 .br-ranch .ranch-board { height:auto; min-height:0; }
 .br-ranch .ranch-scene { height:236px; object-position:center; }
 .br-ranch .ranch-board::after { height:236px; bottom:auto; }
 .br-ranch .ranch-progression { top:9px; left:9px; padding:6px 9px; max-width:calc(100% - 18px); }
 .br-ranch .ranch-progression h1 { font-size:1.15rem; margin-bottom:2px; }
 .br-ranch .ranch-progression p { font-size:.66rem; }
 .br-ranch .ranch-progression .ranch-next { font-size:.6rem; margin-top:1px; }
 .br-ranch .ranch-station { position:relative; width:auto; right:auto; bottom:auto; margin:236px 0 0; border-radius:0; border-inline:0; border-bottom:0; padding:10px 12px; box-shadow:inset 0 2px 0 #b8c49422; }
 .br-ranch .ranch-station h2 { font-size:.85rem; margin-bottom:6px; }
 .br-ranch .ranch-resource-row { gap:8px; }
 .br-ranch .ranch-ready>strong { font-size:1.55rem; }
 .br-ranch .ranch-countdown { font-size:.73rem; margin:5px 0 8px; }
 .br-ranch .ranch-actions { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:7px; align-items:stretch; }
 .br-ranch .ranch-actions>.br-btn-primary { min-height:54px; font-size:1.05rem; padding:8px; }
 .br-ranch .ranch-upgrade { font-size:.7rem; }
 .br-ranch .ranch-secondary { padding:4px 6px; gap:4px; flex-wrap:wrap; }
 .br-ranch .ranch-secondary-button { font-size:.65rem; gap:4px; padding:5px 8px; }
 .br-ranch .ranch-open-label { display:none; }
 .br-ranch .ranch-rate { font-size:.59rem; margin-top:6px; }
 .br-ranch .ranch-dialog { padding:12px; }
 .br-ranch .ranch-dialog h2 { font-size:1rem; }
 .br-ranch .ranch-dialog .ranch-secondary-button { font-size:.75rem; }
}