:root{
  --page:#f6f9fc;
  --surface:#ffffff;
  --surface-soft:#f8fbfe;
  --surface-muted:#eef4f8;
  --line:#dce5ed;
  --line-strong:#c8d6e2;
  --text:#16212c;
  --text-soft:#65768a;
  --text-faint:#93a0ad;
  --orange:#c69218;
  --orange-light:#f3cf67;
  --red:#16669b;
  --red-light:#2f9ed3;
  --green:#3fa56d;
  --violet:#7467bd;
  --blue:#2f9ed3;
  --shadow:0 12px 30px rgba(40,42,48,.09);
  --shadow-soft:0 5px 16px rgba(40,42,48,.07);
}
*{box-sizing:border-box}
html{min-width:320px;background:var(--page)}
body{
  min-width:320px;
  margin:0;
  background:var(--page);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
button:disabled{cursor:not-allowed;opacity:.58}
.app-shell{
  width:min(100%,760px);
  min-height:100vh;
  margin:0 auto;
  padding:0 16px calc(92px + env(safe-area-inset-bottom));
  background:var(--page);
}
.site-header{
  position:sticky;
  z-index:15;
  top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:68px;
  margin:0 -16px;
  padding:9px 16px;
  border-bottom:1px solid rgba(231,232,236,.9);
  background:rgba(251,249,253,.94);
  backdrop-filter:blur(16px);
}
.brand{
  display:flex;
  align-items:center;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--text);
}
.brand-logo,.auth-logo{
  display:none;
  width:auto;
  max-width:178px;
  height:48px;
  object-fit:contain;
  object-position:left center;
}
.brand-fallback{
  display:flex;
  align-items:baseline;
  gap:2px;
  color:var(--text);
  letter-spacing:.03em;
}
.brand-fallback b{
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  margin-right:7px;
  border:2px solid var(--orange);
  border-radius:50%;
  color:var(--orange);
  font-size:16px;
}
.brand-fallback strong{font-size:17px}
.brand-fallback em{color:var(--orange);font-size:11px;font-style:normal;font-weight:900}
.header-actions{display:flex;gap:8px}
.icon-button{
  display:grid;
  place-items:center;
  width:37px;
  height:37px;
  padding:0;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface);
  color:var(--text-soft);
  font-size:11px;
  font-weight:800;
  box-shadow:var(--shadow-soft);
}
.service-button{color:var(--orange);font-size:21px}
.page{display:none;padding:22px 0 12px}
.page.active{display:block;animation:page-in .2s ease}
@keyframes page-in{from{opacity:.2;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.eyebrow{
  display:block;
  color:var(--red);
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}
h1,h2,p{margin-top:0}
h1,h2{color:var(--text);letter-spacing:-.035em}
h1{font-size:clamp(30px,8vw,44px);line-height:1.04}
h2{font-size:20px;line-height:1.15}
.gold-button,.line-button{
  min-height:42px;
  padding:0 17px;
  border-radius:9px;
  font-size:13px;
  font-weight:850;
}
.gold-button{
  border:1px solid transparent;
  background:linear-gradient(105deg,var(--orange-light),var(--orange));
  color:#fff;
  box-shadow:0 7px 16px rgba(221,23,59,.18);
}
.line-button{
  border:1px solid #d6aa39;
  background:#ffffff;
  color:var(--orange);
}
.block{display:block;width:100%}

/* Home */
.hero-carousel{position:relative}
.hero-card{
  position:relative;
  min-height:264px;
  overflow:hidden;
  padding:30px;
  border-radius:17px;
  background:linear-gradient(112deg,#e8c76c 0%,#d7ab39 47%,#2f91c7 100%);
  color:#fff;
  box-shadow:0 13px 27px rgba(221,23,59,.18);
}
.hero-card-two{
  display:none;
  background:linear-gradient(112deg,#c69218 0%,#5aa6cf 50%,#16669b 100%);
}
.hero-card.active{display:block}
.hero-copy{position:relative;z-index:2;width:min(100%,390px)}
.hero-card .eyebrow{color:rgba(255,255,255,.88)}
.hero-card h1{max-width:350px;margin:8px 0 9px;color:#fff}
.hero-card h1 span{color:#fff7d5}
.hero-card p{max-width:330px;margin-bottom:0;color:rgba(255,255,255,.92);font-size:14px;line-height:1.55}
.hero-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:21px}
.hero-card .gold-button{
  background:#fff;
  color:var(--red);
  box-shadow:0 7px 15px rgba(126,34,0,.13);
}
.hero-card .line-button{
  border-color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.14);
  color:#fff;
}
.hero-art{display:none!important}
.carousel-dots{
  position:absolute;
  z-index:3;
  right:18px;
  bottom:14px;
  display:flex;
  gap:6px;
}
.carousel-dots button{
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:99px;
  background:rgba(255,255,255,.48);
}
.carousel-dots button.active{width:20px;background:#fff}
.notice-row{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:47px;
  margin:13px 0 26px;
  padding:0 12px;
  border:1px solid #d8e9f4;
  border-radius:10px;
  background:#ffffff;
}
.notice-icon{color:var(--orange);font-size:19px}
.notice-row p{
  flex:1;
  margin:0;
  color:var(--text-soft);
  font-size:12px;
  line-height:1.35;
}
.notice-row button{
  border:0;
  background:transparent;
  color:var(--orange);
  font-size:23px;
}
.section-block{margin-top:27px}
.section-heading,.game-panel-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:13px;
  margin-bottom:13px;
}
.section-heading h2,.game-panel-head h2{margin:4px 0 0}
.section-heading>button,.game-panel-head>button{
  padding:3px 0;
  border:0;
  background:transparent;
  color:var(--red);
  font-size:12px;
  font-weight:850;
}
.category-row{
  display:flex;
  gap:10px;
  overflow-x:auto;
  margin-right:-16px;
  padding:2px 16px 7px 0;
  scrollbar-width:none;
}
.category-row::-webkit-scrollbar{display:none}
.category-card{
  display:grid;
  flex:0 0 76px;
  place-items:center;
  gap:5px;
  min-height:76px;
  padding:9px 4px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  color:var(--text-soft);
  box-shadow:var(--shadow-soft);
}
.category-card i{
  color:var(--orange);
  font-size:22px;
  font-style:normal;
  line-height:1;
}
.category-card span{font-size:10px;font-weight:750}
.category-card.active{
  border-color:#a6cce6;
  background:#f1f8fc;
  color:var(--red);
}
.category-card.active i{color:var(--red)}
.game-panel{
  margin-top:25px;
  padding:17px 14px 15px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface);
  box-shadow:var(--shadow-soft);
}
.game-panel-head{margin-bottom:14px}
.game-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}
.game-grid>*{
  min-height:158px;
  overflow:hidden;
  padding:12px;
  border:1px solid #eceef1;
  border-radius:12px;
  background:var(--surface-muted);
  color:var(--text);
  text-align:left;
}
.game-grid button{cursor:pointer}
.game-grid>*>:first-child{display:block}
.game-grid>*>:last-child{display:block;margin-top:7px;font-size:12px;font-weight:800}
.game-grid .gold{background:linear-gradient(145deg,#fff6db,#ffe8b2)}
.game-grid .violet{background:linear-gradient(145deg,#f2edff,#ddd1ff)}
.game-grid .red{background:linear-gradient(145deg,#fff0ee,#ffd1cd)}
.game-grid .blue{background:linear-gradient(145deg,#eef8ff,#cfeaff)}
.game-grid .green{background:linear-gradient(145deg,#ecfff1,#c9f1d5)}
.game-grid .teal{background:linear-gradient(145deg,#e9fbf9,#c9eeea)}
.game-grid .orange{background:linear-gradient(145deg,#fff3e8,#ffdbbc)}
.game-grid .purple{background:linear-gradient(145deg,#f7efff,#e7d1ff)}
.winner-list{display:grid;gap:9px}
.winner-card{
  display:grid;
  grid-template-columns:26px 36px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  min-height:61px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface);
  box-shadow:var(--shadow-soft);
}
.rank{color:var(--text-faint);font-size:11px;font-weight:900}
.avatar{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#ffe5b8;
  color:var(--orange);
  font-size:13px;
  font-weight:900;
}
.avatar.violet{background:#e7ddff;color:var(--violet)}
.avatar.green{background:#d9f4df;color:var(--green)}
.winner-card b,.winner-card small{display:block}
.winner-card b{font-size:12px}
.winner-card small{margin-top:2px;color:var(--text-faint);font-size:10px}
.winner-card strong{color:var(--red);font-size:12px}
.responsible-note{
  display:flex;
  align-items:center;
  gap:9px;
  margin:27px 0 8px;
  padding:12px;
  border-radius:10px;
  background:#f1f2f4;
}
.responsible-note b{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:29px;
  height:29px;
  border-radius:50%;
  background:#dedfe3;
  color:#626a78;
  font-size:10px;
}
.responsible-note p{margin:0;color:#757d8b;font-size:11px;line-height:1.4}

/* Activity and promotion */
.page-intro{padding:3px 0 18px}
.page-intro h1{margin:7px 0 0}
.activity-balance{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.activity-balance article{
  min-height:124px;
  padding:15px;
  border-radius:13px;
  background:linear-gradient(145deg,#fffdf7,#fff);
  border:1px solid #e8d9aa;
  box-shadow:var(--shadow-soft);
}
.activity-balance article:nth-child(2){
  background:linear-gradient(145deg,#f2f9fe,#fff);
  border-color:#cfe3f2;
}
.activity-balance span{display:block;color:var(--text-soft);font-size:11px}
.activity-balance strong{display:block;margin:9px 0;color:var(--text);font-size:19px}
.activity-balance button{
  padding:0;
  border:0;
  background:transparent;
  color:var(--red);
  font-size:11px;
  font-weight:800;
}
.activity-tabs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  margin:22px -16px 21px 0;
  padding-right:16px;
  scrollbar-width:none;
}
.activity-tabs::-webkit-scrollbar{display:none}
.activity-tabs button{
  display:grid;
  place-items:center;
  flex:0 0 74px;
  gap:4px;
  min-height:66px;
  padding:6px 3px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface);
  color:var(--text-soft);
}
.activity-tabs i{color:var(--orange);font-size:18px;font-style:normal}
.activity-tabs span{font-size:10px;font-weight:750}
.activity-tabs button.active{
  border-color:#9fc8e4;
  background:#f1f8fc;
  color:var(--red);
}
.activity-tabs button.active i{color:var(--red)}
.activity-feature{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:11px;
  padding:14px;
  border:1px solid #e8d9aa;
  border-radius:13px;
  background:#ffffff;
}
.activity-feature.attendance{
  border-color:#f0d8ff;
  background:#fdf9ff;
}
.feature-mark{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:43px;
  height:43px;
  border-radius:12px;
  background:#f7e5ad;
  color:var(--orange);
  font-size:21px;
  font-weight:900;
}
.attendance .feature-mark{background:#eee3ff;color:var(--violet)}
.activity-feature>div:nth-child(2){min-width:0;flex:1}
.activity-feature h2{margin:0;font-size:14px}
.activity-feature p{margin:3px 0 0;color:var(--text-soft);font-size:11px;line-height:1.4}
.activity-feature button{
  flex:0 0 auto;
  min-height:31px;
  padding:0 10px;
  border:1px solid #ffb45e;
  border-radius:7px;
  background:#fff;
  color:var(--orange);
  font-size:11px;
  font-weight:850;
}
.promo-hero{
  min-height:172px;
  margin-bottom:15px;
  padding:25px;
  border-radius:15px;
  background:linear-gradient(120deg,#e8c76c,#ff6c2c 52%,#df2440);
  color:#fff;
  box-shadow:0 13px 27px rgba(221,23,59,.16);
}
.promo-hero span{font-size:10px;font-weight:900;letter-spacing:.12em}
.promo-hero h2{max-width:240px;margin:8px 0;color:#fff;font-size:28px}
.promo-hero p{max-width:260px;margin:0;color:rgba(255,255,255,.88);font-size:12px;line-height:1.5}
.promotion-feed{display:grid;gap:12px}
.promotion-feed>*{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-soft);
}
.promotion-feed>*:nth-child(3n+1){border-top:4px solid var(--orange)}
.promotion-feed>*:nth-child(3n+2){border-top:4px solid var(--red-light)}
.promotion-feed>*:nth-child(3n){border-top:4px solid var(--violet)}
.promotion-feed h2,.promotion-feed h3{margin:0;color:var(--text)}
.promotion-feed p{color:var(--text-soft);line-height:1.5}

/* Account */
.account-guest{
  padding:23px 3px 20px;
  text-align:center;
}
.account-logo{
  display:grid;
  place-items:center;
  width:65px;
  height:65px;
  margin:0 auto 14px;
  border:2px solid var(--orange);
  border-radius:50%;
  background:#f8f2df;
  color:var(--orange);
  font-size:27px;
  font-weight:950;
}
.account-guest h1{margin:6px 0 8px;font-size:29px}
.account-guest p{
  max-width:350px;
  margin:0 auto 20px;
  color:var(--text-soft);
  font-size:13px;
  line-height:1.55;
}
.account-guest .line-button{margin-top:10px}
.account-menu{display:grid;gap:9px;margin-top:7px}
.account-menu button{
  display:flex;
  align-items:center;
  min-height:56px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--shadow-soft);
  text-align:left;
  font-size:13px;
}
.account-menu span{width:28px;color:var(--orange);font-size:18px;text-align:center}
.account-menu i{margin-left:auto;color:var(--text-faint);font-size:23px;font-style:normal}

/* Login and register */
.auth-page{max-width:500px;margin:0 auto;padding-top:12px}
.back-button{
  padding:8px 0;
  border:0;
  background:transparent;
  color:var(--text-soft);
  font-size:13px;
}
.auth-brand{
  display:flex;
  justify-content:center;
  min-height:110px;
  margin:7px 0 15px;
}
.auth-logo{
  max-width:240px;
  height:105px;
  object-position:center;
}
.auth-brand .brand-fallback{align-self:center;transform:scale(1.18)}
.auth-heading{text-align:center}
.auth-heading h1{margin:7px 0 0;font-size:32px}
.auth-form{display:grid;gap:14px;margin-top:25px}
.auth-form label{
  display:grid;
  gap:7px;
  color:var(--text);
  font-size:12px;
  font-weight:780;
}
.auth-form input{
  width:100%;
  height:47px;
  padding:0 13px;
  border:1px solid var(--line-strong);
  border-radius:9px;
  background:var(--surface);
  color:var(--text);
  font-size:13px;
}
.auth-form input::placeholder{color:#adb3be}
.auth-form input:focus{border-color:var(--orange)}
.password-wrap{position:relative}
.password-wrap input{padding-right:58px}
.password-wrap button{
  position:absolute;
  top:0;
  right:0;
  height:47px;
  padding:0 13px;
  border:0;
  background:transparent;
  color:var(--red);
  font-size:11px;
  font-weight:850;
}
.auth-links{text-align:right}
.auth-links button,.auth-switch button{
  padding:0;
  border:0;
  background:transparent;
  color:var(--red);
  font-size:12px;
  font-weight:850;
}
.auth-switch{
  margin:19px 0 0;
  color:var(--text-soft);
  font-size:12px;
  text-align:center;
}
.optional{color:var(--text-faint);font-weight:500}
.auth-form label.consent{
  grid-template-columns:18px 1fr;
  align-items:start;
  gap:8px;
  color:var(--text-soft);
  font-size:11px;
  font-weight:500;
  line-height:1.5;
}
.consent input{
  width:16px;
  height:16px;
  margin:1px 0 0;
  accent-color:var(--red);
}

/* Navigation, modal and toast */
.bottom-nav{
  position:fixed;
  z-index:20;
  bottom:0;
  left:50%;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  width:min(100%,760px);
  min-height:74px;
  padding:7px 7px calc(7px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.96);
  box-shadow:0 -6px 20px rgba(40,42,48,.06);
  transform:translateX(-50%);
  backdrop-filter:blur(16px);
}
.bottom-nav button{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:0;
  background:transparent;
  color:var(--text-faint);
  font-size:9px;
}
.bottom-nav i{font-size:18px;font-style:normal;line-height:1}
.bottom-nav button.active{color:var(--red)}
.bottom-nav .reward-nav i{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  margin-top:-24px;
  border:3px solid var(--page);
  border-radius:50%;
  background:linear-gradient(135deg,var(--orange-light),var(--orange));
  color:#fff;
  box-shadow:0 7px 15px rgba(221,23,59,.22);
}
.modal-root{
  position:fixed;
  z-index:40;
  inset:0;
  pointer-events:none;
}
.modal-root.open{pointer-events:auto}
.modal-root .shade{
  position:absolute;
  inset:0;
  background:rgba(43,45,51,.35);
  backdrop-filter:blur(3px);
}
.modal{
  position:absolute;
  bottom:0;
  left:50%;
  width:min(100%,540px);
  max-height:85vh;
  overflow:auto;
  padding:23px 18px calc(24px + env(safe-area-inset-bottom));
  border-radius:18px 18px 0 0;
  background:var(--surface);
  box-shadow:0 -15px 42px rgba(40,42,48,.17);
  transform:translateX(-50%);
}
.toast-root{
  position:fixed;
  z-index:50;
  bottom:91px;
  left:50%;
  width:min(calc(100% - 32px),420px);
  transform:translateX(-50%);
  pointer-events:none;
}
.toast{
  padding:12px 14px;
  border:1px solid #cde1ef;
  border-radius:10px;
  background:#fff;
  color:var(--text);
  box-shadow:var(--shadow);
  font-size:12px;
  text-align:center;
}

@media(min-width:620px){
  .app-shell{padding-right:24px;padding-left:24px}
  .site-header{margin-right:-24px;margin-left:-24px;padding-right:24px;padding-left:24px}
  .hero-card{min-height:300px;padding:39px}
  .game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .category-row{margin-right:-24px}
  .activity-tabs{margin-right:-24px}
}
@media(max-width:380px){
  .app-shell{padding-right:12px;padding-left:12px}
  .site-header{margin-right:-12px;margin-left:-12px;padding-right:12px;padding-left:12px}
  .brand-logo{max-width:145px;height:42px}
  .hero-card{min-height:250px;padding:24px}
  .hero-card h1{font-size:31px}
  .category-card{flex-basis:71px}
  .winner-card{grid-template-columns:21px 34px minmax(0,1fr) auto;gap:6px;padding:9px}
  .winner-card strong{font-size:11px}
}

/* HORNBILLCASINO_AUTH_ROUTE_SEPARATION_V1 */
.auth-route-page .app-shell{
  min-height:100vh;
  padding-bottom:calc(26px + env(safe-area-inset-bottom));
}
.auth-route-page .auth-page{display:block}
.auth-route-page .back-button{
  display:inline-block;
  text-decoration:none;
}
.auth-route-page .auth-switch a{
  color:var(--red);
  font-weight:850;
  text-decoration:none;
}
.auth-route-page .auth-switch a:hover{text-decoration:underline}

/* HORNBILLCASINO_AUTH_LOGO_PLATE_V1 */
.auth-route-page .auth-brand{
  position:relative;
  align-items:center;
  min-height:154px;
  margin:3px 0 18px;
}
.auth-route-page .auth-brand::before{
  position:absolute;
  z-index:0;
  width:min(84vw,342px);
  height:118px;
  border:1px solid rgba(243,207,103,.82);
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 2%,rgba(47,158,211,.34),transparent 49%),
    linear-gradient(135deg,#10283b 0%,#16669b 58%,#0d2232 100%);
  box-shadow:
    0 14px 30px rgba(22,102,155,.24),
    inset 0 1px 0 rgba(255,255,255,.2);
  content:"";
}
.auth-route-page .auth-logo{
  position:relative;
  z-index:1;
  display:block;
  width:min(78vw,308px);
  max-width:none;
  height:136px;
  object-fit:contain;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.3));
}
.auth-route-page .auth-brand .brand-fallback{
  position:relative;
  z-index:1;
}