:root{
  --fg:#fff; --muted:#e7e1d9;
  --brown1:#2b1d12; --brown2:#3a2a1c; --canvasGreen:#213a2d;
  --sunset:#ff7a1a; --sunsetGlow: 0 0 18px rgba(255,122,26,.55), 0 0 34px rgba(255,122,26,.35);
}
*,*::before,*::after{ box-sizing: border-box; }
.usaw-br-wrap{display:flex;justify-content:center;width:100%}
.usaw-br-portrait{ width: 98vw; max-width: 540px; margin: 12px auto; position: relative; display: block; min-height: 620px; }
@media (min-width: 1000px){ .usaw-br-portrait{ width:min(70vw, 880px); max-width: 880px; min-height: 0; } }
.usaw-br#blunt-roller{ position: relative; display:flex; flex-direction:column; gap:12px;
  background: linear-gradient(180deg, var(--brown1), var(--brown2));
  border:3px solid var(--sunset); border-radius:18px; box-shadow: var(--sunsetGlow);
  color:var(--fg); padding:14px 14px 18px; overflow: visible; }
.usaw-br .hero{ position:relative; width:100%; min-height: var(--hero-min-h-mobile, 360px); border-radius:12px; overflow:hidden;
  border:2px solid var(--sunset); box-shadow: var(--sunsetGlow);
  background: linear-gradient(180deg, rgba(255,122,26,.06), rgba(33,58,45,.06)); }
@media (min-width: 768px){ .usaw-br .hero{ min-height: var(--hero-min-h-desktop, 520px); } }
.usaw-br .hero-badge{ position:absolute; left:12px; bottom:10px; padding:6px 10px; font-weight:900; font-size:12px;
  border-radius:999px; color:#2b1d12; background:#fff; border:1px solid rgba(255,255,255,.8); }
.usaw-br .hero-img{
  display:block; width:100%; height:100%; object-position:center;
  background:#0f0f0f;
}
.usaw-br .hero-fit-contain .hero-img{ object-fit: contain; }
.usaw-br .hero-fit-cover   .hero-img{ object-fit: cover; }

.usaw-br .gamecard{ flex:1 1 auto; display:flex; flex-direction:column; gap:12px; background: transparent;
  border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:12px; box-shadow: inset 0 0 0 1px rgba(255,122,26,.15); min-height: 340px; }
.usaw-br .topbar{display:flex; justify-content:space-between; align-items:center; font-weight:800}
.usaw-br .pill{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); padding:6px 10px; border-radius:999px; font-size:12px; color:var(--fg); }
.usaw-br .phase-title{font-size:14px; display:flex; justify-content:space-between}
.usaw-br .bar{ position:relative; height:46px; background: rgba(27,45,36,.55);
  border:1px solid rgba(255,122,26,.38); border-radius:12px; overflow:hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.usaw-br .zone{
  position:absolute; top:0; bottom:0;
  border-left:1px dashed rgba(120, 255, 170, .75);
  border-right:1px dashed rgba(120, 255, 170, .75);
  background: linear-gradient(90deg, rgba(68, 214, 132, .15), rgba(68, 214, 132, .22), rgba(68, 214, 132, .15));
  box-shadow: inset 0 0 12px rgba(68, 214, 132, .25), 0 0 10px rgba(68, 214, 132, .15);
}
.usaw-br .cursor{ position:absolute; top:2px; bottom:2px; width:26px;
  background: var(--usaw_br_cursor_url, linear-gradient(180deg,#fff,#ddd)) center/contain no-repeat;
  transform: translateX(-50%); z-index:2; pointer-events:none; border-radius:6px; box-shadow: 0 0 6px rgba(0,0,0,.25); }
.usaw-br .msg{text-align:center; color:var(--muted); min-height:22px; font-size:13px}
.usaw-br .progress{height:10px; background:rgba(20,35,27,.35); border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,.12)}
.usaw-br .progress > i{display:block; height:100%; width:0; background:linear-gradient(90deg, #ffb26a, #fff, #a0d7ae)}
.usaw-br .controls{display:flex; gap:10px; flex-wrap: wrap}
.usaw-br .btn{ flex:1 1 48%; min-width: 140px; display:inline-flex; justify-content:center; align-items:center; height:58px;
  border-radius:12px; border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(180deg,#274536,#1c3428); color:#fff; font-weight:900; letter-spacing:.3px; cursor:pointer; user-select:none; transition:.12s transform, .12s box-shadow;
  box-shadow: 0 0 0 1px rgba(255,122,26,.24); }
.usaw-br .btn:active{transform:translateY(1px)}
.usaw-br .btn.secondary{background:linear-gradient(180deg,#1f382b,#162a20); color:#f0f7f4}
.usaw-br .footer{display:flex; justify-content:space-between; font-size:12px; color:#f6f3ee}
.usaw-br .overlay{ position:absolute; inset:0; background:rgba(43,29,18,.50); backdrop-filter:saturate(110%) blur(1.5px);
  display:none; align-items:center; justify-content:center; border-radius:16px; z-index: 40; }
.usaw-br .overlay.show{ display:flex; }
.usaw-br .card{background:rgba(30,51,39,.95); border:2px solid var(--sunset); border-radius:16px; width:min(92%, 560px); padding:12px; box-shadow: var(--sunsetGlow)}
.usaw-br .card h3{margin:6px 0 10px; font-size:18px; color:#fff}
.usaw-br .reward{display:flex; flex-direction:column; gap:10px; align-items:center}
.usaw-br .reward img{max-width:100%; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:#15251d}
.usaw-br .reward p{margin:0; font-weight:700; text-align:center}
.usaw-br .hidden{display:none}
.usaw-br #intro-overlay{ position:absolute; inset:0; background:rgba(43,29,18,.55); backdrop-filter:saturate(110%) blur(1.5px);
  display:none; align-items:center; justify-content:center; border-radius:16px; z-index: 50; }
.usaw-br #intro-overlay.show{ display:flex; }
.usaw-br #intro-close{ position:absolute; top:8px; right:10px; width:32px; height:32px; line-height:28px; text-align:center; font-size:20px;
  font-weight:900; color:#2b1d12; background:#fff; border:1px solid rgba(255,255,255,.9); border-radius:999px; cursor:pointer; z-index:60; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.usaw-br #intro-close:active{ transform: translateY(1px); }