[hideprofile][html]
<style>
.boxbox-cast {
  --bb-bg: #e7e5df;
  --bb-paper: rgba(238, 236, 229, .92);
  --bb-paper-2: rgba(18, 18, 18, .88);
  --bb-dark: #171717;
  --bb-muted: #6f6b64;
  --bb-line: rgba(20,20,20,.18);
  --bb-red: #7b1f1f;
  --bb-red-2: #b44535;
  --bb-gold: #c5a15d;
  --bb-white: #f6f2ea;
  --bb-font: "Inter", Arial, sans-serif;
  --bb-title: "Bewlay", Georgia, serif;

  width: 780px;
  margin: 20px auto;
  padding: 22px;
  box-sizing: border-box;
  font-family: var(--bb-font);
  color: var(--bb-dark);

  background:
    linear-gradient(135deg, rgba(244,241,233,.9), rgba(196,190,178,.78)),
    repeating-linear-gradient(
      -45deg,
      rgba(0,0,0,.04) 0px,
      rgba(0,0,0,.04) 1px,
      transparent 1px,
      transparent 9px
    );
  border: 1px solid rgba(0,0,0,.16);
  box-shadow:
    0 18px 40px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.5);
  position: relative;
  overflow: hidden;
}

.boxbox-cast:before {
  content: "BOX BOX / FIRE & BLOOD / HOUSE OF THE DRAGON / CAST CALL / FIRE & BLOOD";
  position: absolute;
  top: 18px;
  left: -40px;
  width: 900px;
  font: 800 9px/1 var(--bb-font);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(0,0,0,.09);
  transform: rotate(-4deg);
  pointer-events: none;
}

.boxbox-cast:after {
  content: "";
  position: absolute;
  right: -120px;
  top: -90px;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(123,31,31,.26);
  border-radius: 50%;
  box-shadow:
    0 0 0 18px rgba(123,31,31,.045),
    0 0 0 36px rgba(197,161,93,.04);
  pointer-events: none;
}

/* ШАПКА */

.bb-cast-head {
  position: relative;
  z-index: 2;
  min-height: 185px;
  padding: 24px 26px;
  box-sizing: border-box;
  background:
    linear-gradient(90deg, rgba(10,8,7,.95), rgba(40,20,17,.75), rgba(123,31,31,.36)),
    url('https://upforme.ru/uploads/001c/b7/5d/3/t780337.png');
  background-size: cover;
  background-position: center right;
  border: 1px solid rgba(0,0,0,.35);
  overflow: hidden;
}

.bb-cast-head:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 22%, rgba(197,161,93,.18), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 40%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.055) 0px,
      rgba(255,255,255,.055) 1px,
      transparent 1px,
      transparent 16px
    );
  mix-blend-mode: screen;
  pointer-events: none;
}

.bb-cast-head:after {
  content: "FIRE AND BLOOD";
  position: absolute;
  right: 18px;
  bottom: 14px;
  font: 900 42px/1 var(--bb-font);
  letter-spacing: -2px;
  color: rgba(255,255,255,.045);
  pointer-events: none;
}

.bb-cast-kicker {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 6px 10px;
  margin-bottom: 14px;
  background: var(--bb-red);
  color: #fff;
  font: 800 9px/1 var(--bb-font);
  text-transform: uppercase;
  letter-spacing: 1.8px;
}

.bb-cast-title {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--bb-white);
  font: 800 42px/0.9 var(--bb-title);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.bb-cast-title span {
  color: var(--bb-gold);
}

.bb-cast-subtitle {
  position: relative;
  z-index: 2;
  width: 510px;
  margin-top: 14px;
  color: rgba(246,242,234,.8);
  font: 500 11px/1.65 var(--bb-font);
  text-transform: uppercase;
  letter-spacing: .8px;
}

.bb-cast-info {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  margin-top: 16px;
}

.bb-cast-box {
  padding: 16px;
  background: var(--bb-paper);
  border: 1px solid var(--bb-line);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}

.bb-cast-box b {
  display: block;
  margin-bottom: 8px;
  font: 900 10px/1 var(--bb-font);
  text-transform: uppercase;
  letter-spacing: 1.7px;
  color: var(--bb-red);
}

.bb-cast-box p {
  margin: 0;
  color: #34312d;
  font: 500 12px/1.7 var(--bb-font);
  text-align: justify;
}

.bb-cast-rewards {
  padding: 16px;
  background:
    linear-gradient(rgba(18,18,18,.9), rgba(18,18,18,.9)),
    repeating-linear-gradient(
      -45deg,
      rgba(197,161,93,.07) 0px,
      rgba(197,161,93,.07) 1px,
      transparent 1px,
      transparent 8px
    );
  border: 1px solid rgba(0,0,0,.35);
  color: var(--bb-white);
  position: relative;
  overflow: hidden;
}

.bb-cast-rewards:before {
  content: "REWARD";
  position: absolute;
  right: -8px;
  bottom: 6px;
  font: 900 42px/1 var(--bb-font);
  letter-spacing: -3px;
  color: rgba(255,255,255,.045);
}

.bb-cast-rewards b {
  display: block;
  margin-bottom: 8px;
  font: 900 10px/1 var(--bb-font);
  text-transform: uppercase;
  letter-spacing: 1.7px;
  color: var(--bb-gold);
}

.bb-cast-rewards p {
  position: relative;
  z-index: 2;
  margin: 0;
  font: 500 12px/1.7 var(--bb-font);
  color: rgba(246,242,234,.84);
}

.bb-cast-rewards strong {
  color: #fff;
}

.bb-cast-month {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
}

.bb-cast-month:before,
.bb-cast-month:after {
  content: "";
  height: 1px;
  background: rgba(0,0,0,.18);
  flex: 1;
}

.bb-cast-month span {
  padding: 7px 12px;
  background: #151515;
  color: #f7f2ea;
  font: 900 10px/1 var(--bb-font);
  text-transform: uppercase;
  letter-spacing: 1.8px;
}

.bb-cast-month span em {
  font-style: normal;
  color: var(--bb-gold);
}

/* СЕТКА КАСТА */

.bb-cast-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.bb-cast-check {
  display: none;
}

.bb-cast-card {
  display: block;
  position: relative;
  background: rgba(245,243,238,.82);
  border: 1px solid rgba(0,0,0,.17);
  cursor: pointer;
  overflow: hidden;
  transition: .35s ease;
}

.bb-cast-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 22px rgba(0,0,0,.16);
}

.bb-cast-photo {
  position: relative;
  height: 195px;
  overflow: hidden;
  background: #111;
}

.bb-cast-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.04) contrast(1.06);
  transition: .45s ease;
}

.bb-cast-photo:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.62), transparent 58%),
    linear-gradient(135deg, rgba(123,31,31,.22), transparent 45%),
    radial-gradient(circle at 80% 12%, rgba(197,161,93,.12), transparent 28%);
  pointer-events: none;
}

.bb-cast-num {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 3;
  padding: 5px 7px;
  background: rgba(15,15,15,.82);
  color: #fff;
  font: 900 9px/1 var(--bb-font);
  letter-spacing: 1px;
}

.bb-cast-status {
  position: absolute;
  right: 9px;
  top: 9px;
  z-index: 3;
  padding: 5px 7px;
  background: rgba(246,242,234,.9);
  color: #111;
  font: 900 8px/1 var(--bb-font);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.bb-cast-status:before {
  content: "open";
}

.bb-cast-name {
  min-height: 46px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font: 900 13px/1.15 var(--bb-font);
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #181818;
}

.bb-cast-check:checked + .bb-cast-card {
  opacity: .86;
}

.bb-cast-check:checked + .bb-cast-card .bb-cast-photo img {
  filter: grayscale(1) contrast(1.15) brightness(.78);
  transform: scale(1.04);
}

.bb-cast-check:checked + .bb-cast-card .bb-cast-status {
  background: var(--bb-red);
  color: #fff;
}

.bb-cast-check:checked + .bb-cast-card .bb-cast-status:before {
  content: "on grid";
}

.bb-cast-footer {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  padding: 16px 18px;
  background: rgba(255,255,255,.42);
  border: 1px dashed rgba(0,0,0,.22);
  color: #34312d;
  font: 500 11px/1.7 var(--bb-font);
  text-align: justify;
}

.bb-cast-footer b {
  color: var(--bb-red);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bb-cast-links {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 15px;
}

.bb-cast-links a {
  padding: 8px 12px;
  background: #151515;
  color: #f7f2ea !important;
  text-decoration: none !important;
  font: 900 9px/1 var(--bb-font);
  text-transform: uppercase;
  letter-spacing: 1.3px;
  transition: .25s ease;
}

.bb-cast-links a:hover {
  background: var(--bb-red);
}
</style>

<div class="boxbox-cast">

  <div class="bb-cast-head">
    <div class="bb-cast-kicker">fire & blood cast call</div>

    <h2 class="bb-cast-title">
      House of <span>the Dragon</span>
    </h2>

    <div class="bb-cast-subtitle">
     "дом дракона" стартовал с третьим сезоном, поэтому каст этого месяца не заставил себя ждать!
    </div>
  </div>

  <div class="bb-cast-info">
    <div class="bb-cast-box">
      <b>как участвовать</b>
      <p>
        выбери свободную внешность из драконьей подборки, проверь список занятых лиц, напиши анкету и приходи в игру. персонаж не обязан быть связан с сериалом: это может быть пилот, наследник команды, менеджер, журналист, pr-специалист, родственник гонщика, спонсор или персонаж, который принесет в паддок свою мааааленькую гражданскую войну.
      </p>
    </div>

    <div class="bb-cast-rewards">
      <b>награда за персонажа</b>
      <p>
        за принятого персонажа из кастовой акции игрок получает <strong>300 миль</strong> и <strong>уникальное оформление профиля</strong>. дополнительные бонусы могут выдаваться за активный старт игры!
      </p>
    </div>
  </div>

  <div class="bb-cast-month">
    <span>каст месяца: <em>fire & blood</em></span>
  </div>

<div class="bb-cast-grid">

  <input type="checkbox" id="cast-01" class="bb-cast-check">
  <label for="cast-01" class="bb-cast-card">
    <div class="bb-cast-photo">
      <span class="bb-cast-num">01</span>
      <span class="bb-cast-status"></span>
      <img src="https://media.tenor.com/_Hjou26ClEEAAAAM/emma-darcy-obcrack-emma.gif">
    </div>
    <div class="bb-cast-name">emma d'arcy</div>
  </label>

  <input type="checkbox" id="cast-02" class="bb-cast-check">
  <label for="cast-02" class="bb-cast-card">
    <div class="bb-cast-photo">
      <span class="bb-cast-num">02</span>
      <span class="bb-cast-status"></span>
      <img src="https://64.media.tumblr.com/2dc153aa55087c7a55582bfade2ee778/975998fd0faeefc3-69/s400x600/8d39474d4500887ec0becae4a4454e5e05f490dd.gif">
    </div>
    <div class="bb-cast-name">olivia cooke</div>
  </label>

  <input type="checkbox" id="cast-03" class="bb-cast-check">
  <label for="cast-03" class="bb-cast-card">
    <div class="bb-cast-photo">
      <span class="bb-cast-num">03</span>
      <span class="bb-cast-status"></span>
      <img src="https://64.media.tumblr.com/3b9326bd9c265d74583ec832d9427016/e47110f7e106c719-01/s400x600/6238b2ebdefce43b68df8692d8d890b97f952df4.gif">
    </div>
    <div class="bb-cast-name">matt smith</div>
  </label>

  <input type="checkbox" id="cast-04" class="bb-cast-check">
  <label for="cast-04" class="bb-cast-card">
    <div class="bb-cast-photo">
      <span class="bb-cast-num">04</span>
      <span class="bb-cast-status"></span>
      <img src="https://media.tenor.com/EOqI3fOHLpQAAAAd/umfp-ewan-mitchell.gif">
    </div>
    <div class="bb-cast-name">ewan mitchell</div>
  </label>

  <input type="checkbox" id="cast-05" class="bb-cast-check">
  <label for="cast-05" class="bb-cast-card">
    <div class="bb-cast-photo">
      <span class="bb-cast-num">05</span>
      <span class="bb-cast-status"></span>
      <img src="https://images.payhip.com/o_1gnso5vp61fhfik18s110qba41u.gif">
    </div>
    <div class="bb-cast-name">tom glynn-carney</div>
  </label>

  <input type="checkbox" id="cast-06" class="bb-cast-check">
  <label for="cast-06" class="bb-cast-card">
    <div class="bb-cast-photo">
      <span class="bb-cast-num">06</span>
      <span class="bb-cast-status"></span>
      <img src="https://64.media.tumblr.com/1a05fa853676038a1321efb73dac2a63/9aa09324219c8416-bb/s400x600/0d72544124f58eca13d57fcbe6af62f470ed1ca1.gifv">
    </div>
    <div class="bb-cast-name">fabien frankel</div>
  </label>

  <input type="checkbox" id="cast-07" class="bb-cast-check">
  <label for="cast-07" class="bb-cast-card">
    <div class="bb-cast-photo">
      <span class="bb-cast-num">07</span>
      <span class="bb-cast-status"></span>
      <img src="https://64.media.tumblr.com/fd595496ee9e40e7a58db3211f080f05/6a959a4955891152-a1/s400x600/1986372e1d4d5622d0a90d0998fe52978e34a1ae.gifv">
    </div>
    <div class="bb-cast-name">harry collett</div>
  </label>

  <input type="checkbox" id="cast-08" class="bb-cast-check">
  <label for="cast-08" class="bb-cast-card">
    <div class="bb-cast-photo">
      <span class="bb-cast-num">08</span>
      <span class="bb-cast-status"></span>
      <img src="https://64.media.tumblr.com/40e0fc92167b51b6afd95bc99b8bb377/da49a64807e39962-8e/s400x600/45a5c7c583318110a852b734fa51efe987deeda2.gif">
    </div>
    <div class="bb-cast-name">bethany antonia</div>
  </label>

  <input type="checkbox" id="cast-09" class="bb-cast-check">
  <label for="cast-09" class="bb-cast-card">
    <div class="bb-cast-photo">
      <span class="bb-cast-num">09</span>
      <span class="bb-cast-status"></span>
      <img src="https://i.pinimg.com/originals/c1/f4/47/c1f4472bef697b079d87ba78e3ce7f53.gif">
    </div>
    <div class="bb-cast-name">phia saban</div>
  </label>

  <input type="checkbox" id="cast-10" class="bb-cast-check">
  <label for="cast-10" class="bb-cast-card">
    <div class="bb-cast-photo">
      <span class="bb-cast-num">10</span>
      <span class="bb-cast-status"></span>
      <img src="https://64.media.tumblr.com/2769066d63afbb508ec6fdc2fbe7d20b/bd7cfe650e6a6e1b-b1/s400x600/1349993e3a990646c0e9940cb3b74d9b2c0cdd6b.gifv">
    </div>
    <div class="bb-cast-name">steve toussaint</div>
  </label>

  <input type="checkbox" id="cast-11" class="bb-cast-check">
  <label for="cast-11" class="bb-cast-card">
    <div class="bb-cast-photo">
      <span class="bb-cast-num">11</span>
      <span class="bb-cast-status"></span>
      <img src="https://64.media.tumblr.com/edd100e786bdc4963447209d41edb3a2/c128ea6e04c0ed6f-78/s250x400/5764b441bbde10815eb921573cbc744d7f684737.gif">
    </div>
    <div class="bb-cast-name">sonoya mizuno</div>
  </label>

  <input type="checkbox" id="cast-12" class="bb-cast-check">
  <label for="cast-12" class="bb-cast-card">
    <div class="bb-cast-photo">
      <span class="bb-cast-num">12</span>
      <span class="bb-cast-status"></span>
      <img src="https://64.media.tumblr.com/bbaf8f691df7be30e49296bb08c7adb8/6d8fc54642c796e5-35/s540x810/b92995cd5444595a6a62f3a53f2e1b8547379b73.gif">
    </div>
    <div class="bb-cast-name">eve best</div>
  </label>

  <input type="checkbox" id="cast-13" class="bb-cast-check">
  <label for="cast-13" class="bb-cast-card">
    <div class="bb-cast-photo">
      <span class="bb-cast-num">13</span>
      <span class="bb-cast-status"></span>
      <img src="https://64.media.tumblr.com/9ed6dd25cb49d91c93e8ff140ab689d8/45e44f75aaf39722-5b/s540x810/9862c38de0dd5992f359eab547ab61ce4dfd046e.gifv">
    </div>
    <div class="bb-cast-name">rhys ifans</div>
  </label>

  <input type="checkbox" id="cast-14" class="bb-cast-check"  checked>
  <label for="cast-14" class="bb-cast-card">
    <div class="bb-cast-photo">
      <span class="bb-cast-num">14</span>
      <span class="bb-cast-status"></span>
      <img src="https://64.media.tumblr.com/b53bf1749b1e5472abfc6bd6454bbc96/c3da3904bdced7b6-2b/s400x600/306e41fc719a4206208d8726aac0a3b33e69b057.gif">
    </div>
    <div class="bb-cast-name">milly alcock</div>
  </label>

  <input type="checkbox" id="cast-15" class="bb-cast-check">
  <label for="cast-15" class="bb-cast-card">
    <div class="bb-cast-photo">
      <span class="bb-cast-num">15</span>
      <span class="bb-cast-status"></span>
      <img src="https://64.media.tumblr.com/7c49613790da2fe456a4fa23b982d92a/75101137d718d6c7-a0/s400x600/369af0a6c37aea076a5471c342d3678c402071fb.gifv">
    </div>
    <div class="bb-cast-name">freddie fox</div>
  </label>

  <input type="checkbox" id="cast-16" class="bb-cast-check">
  <label for="cast-16" class="bb-cast-card">
    <div class="bb-cast-photo">
      <span class="bb-cast-num">16</span>
      <span class="bb-cast-status"></span>
      <img src="https://33.media.tumblr.com/5439e4b044ec1adcbfcc14572e1b9c4e/tumblr_nsogc4Egja1urrgojo4_r1_500.gif">
    </div>
    <div class="bb-cast-name">james norton</div>
  </label>

</div>

  <div class="bb-cast-footer">
    <b>важно:</b> это тематическая акция на внешности, а не заявка на каноничных персонажей house of the dragon. внешности из акции не бронируются навсегда без анкеты: забрал лицо, принес персонажа в игру и вышел на стартовую решетку.
  </div>

  <div class="bb-cast-links">
    <a href="https://boxbox.rusff.me/viewtopic.php?id=4">правила</a>
    <a href="https://boxbox.rusff.me/viewtopic.php?id=52#p2418">внешности и имена</a>
    <a href="https://boxbox.rusff.me/viewtopic.php?id=1">забрать слот</a>
    <a href="https://boxbox.rusff.me/viewtopic.php?id=42#p1336">другие акции</a>
    <a href="https://boxbox.rusff.me/viewtopic.php?id=5">нужные</a>
  </div>

</div>
[/html]

Подпись автора

мы друг для друга давно стали как зеркала

видеть тебя и все чаще себя узнавать