/* BangaWin micro · 05-en - rodeo / bull-ring poster + Trixino box */
:root {
  --dusk: #141210;
  --sheet: #1e1b18;
  --sheet-2: #282420;
  --frame: #c99a3c;
  --frame-dim: #6e5527;
  --bone: #f2e8d6;
  --dust: #b3a690;
  --blood: #d42c1c;
  --blood-hi: #ef4a2f;
  --blood-lo: #8a1a0f;
  --gilt: #ecb437;
  --lamp: #36d670;
  --vio: #a43bd9;
  --mag: #e03aa8;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: 26px 16px;
  background:
    repeating-conic-gradient(from 0deg at 50% -10%, rgba(212,44,28,.09) 0 6deg, transparent 6deg 18deg),
    var(--dusk);
  color: var(--bone); font: 400 15px/1.5 "Roboto Condensed", "Arial Narrow", sans-serif;
}
a { color: inherit; }

.poster { width: 100%; max-width: 420px; }
.poster-in {
  position: relative; padding: 22px 20px 20px; text-align: center; background: var(--sheet);
  border: 3px double var(--frame); outline: 1px solid var(--frame-dim); outline-offset: 5px;
  box-shadow: 0 30px 60px rgba(0,0,0,.6);
}
.poster-in::before, .poster-in::after { content: "✦"; position: absolute; top: 8px; color: var(--frame); font-size: 14px; }
.poster-in::before { left: 10px; }
.poster-in::after { right: 10px; }

.ribbon { display: flex; justify-content: center; }
.ribbon span {
  position: relative; padding: 5px 20px; background: var(--blood); color: #fff; font: 800 12px/1 "Roboto Condensed", sans-serif;
  letter-spacing: .2em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
}
.presents { margin-top: 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--dust); }
.presents a { color: var(--gilt); font-weight: 800; text-decoration: none; border-bottom: 1px dashed var(--gilt); }

.ring { position: relative; margin: 10px auto 0; max-width: 260px; }
.ring::before {
  content: ""; position: absolute; inset: 10% -10% 30%; z-index: 0;
  background: conic-gradient(from 90deg, transparent, rgba(239,74,47,.35), transparent 25%, transparent 50%, rgba(239,74,47,.35), transparent 75%);
  filter: blur(14px); border-radius: 50%;
}
.ring svg { position: relative; display: block; width: 100%; height: auto; }

.bill { font-weight: 400; margin-top: 4px; }
.bill-pre { display: block; font: 18px/1.2 Rye, Georgia, serif; color: var(--gilt); }
.bill-amt { display: block; margin-top: 4px; font: 70px/1 Rye, Georgia, serif; color: #fff; text-shadow: 3px 3px 0 var(--blood), 6px 6px 0 #000; }
.bill-fs { display: block; margin-top: 8px; font: italic 800 22px/1.1 "Roboto Condensed", sans-serif; text-transform: uppercase; letter-spacing: .04em; }

.acts { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 16px; border-top: 1px solid var(--frame-dim); border-bottom: 1px solid var(--frame-dim); }
.acts li { padding: 8px 2px; }
.acts li + li { border-left: 1px solid var(--frame-dim); }
.acts b { display: block; font: 18px/1.1 Rye, Georgia, serif; color: var(--gilt); }
.acts span { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--dust); }
.lamp { width: 6px; height: 6px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 6px var(--lamp); }

.blurb { margin-top: 14px; font-size: 14.5px; color: #dcd2c0; }

.lasso {
  display: block; margin-top: 18px; padding: 15px 14px; text-decoration: none; border-radius: 8px;
  font: 22px/1 Rye, Georgia, serif; color: #fff; letter-spacing: .03em;
  background: linear-gradient(180deg, var(--blood-hi), var(--blood));
  box-shadow: 0 6px 0 var(--blood-lo), 0 14px 26px rgba(212,44,28,.35);
  transition: transform .12s, box-shadow .12s;
}
.lasso:hover { transform: translateY(3px); box-shadow: 0 3px 0 var(--blood-lo), 0 8px 16px rgba(212,44,28,.35); }
.small { margin-top: 10px; font-size: 11.5px; color: var(--dust); }

.trx {
  display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 12px; text-align: left; border-radius: 10px;
  background: linear-gradient(120deg, rgba(164,59,217,.22), rgba(224,58,168,.16)); border: 1px solid rgba(196,90,230,.5);
}
.trx-badge { flex: none; padding: 6px 8px; border-radius: 6px; background: linear-gradient(135deg, var(--vio), var(--mag)); color: #fff; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; line-height: 1.1; text-align: center; width: 54px; }
.trx p { font-size: 13px; line-height: 1.4; color: #eadff2; }
.trx a { color: #f2a6ff; font-weight: 800; }

.poster-foot { margin-top: 20px; text-align: center; font-size: 11.5px; color: #8e846f; }
.poster-foot p + p { margin-top: 3px; }
.poster-foot a { color: #cbbfa8; }

@media (max-width: 370px) {
  .bill-amt { font-size: 56px; }
  .acts { grid-template-columns: repeat(2, 1fr); }
  .acts li:nth-child(3) { border-left: 0; }
  .acts li:nth-child(n+3) { border-top: 1px solid var(--frame-dim); }
}