   
                         
                                   
                                                     
                                               
                                                                       
                                               
                                    
   

:root{
  --hero-titlebar-bg:#080d0b;
  --hero-titlebar-text:#f5fff1;
  --hero-titlebar-border:#66ef23;
  --hero-stage-bg:#050907;
  --hero-stage-text:#edf6ee;
  --hero-stage-muted:#9cae9f;
  --hero-stage-border:#24402c;
  --hero-stage-radius:30px;
  --hero-stage-shadow:0 28px 70px rgba(0,0,0,.46);
  --hero-accent-bg:#67ee20;
  --hero-accent-text:#071006;
  --hero-panel-bg:#0b120e;
  --hero-panel-border:#2b4933;
  --hero-card-bg:#101a13;
  --hero-card-text:#f0f7f1;
  --hero-card-muted:#9fb0a2;
  --hero-card-radius:14px;
  --hero-card-shadow:0 14px 32px rgba(0,0,0,.28);
  --hero-grid-gap:clamp(14px,2vw,24px);
  --hero-grid-gap-mobile:12px;
  --hero-action-gap:10px;
  --hero-guide-bg:linear-gradient(90deg,rgba(103,238,32,.1),rgba(255,255,255,.025));
  --hero-guide-text:#dce9df;
  --hero-guide-border:#31513a;
  --hero-guide-radius:14px 4px 14px 4px;
  --hero-primary-button-height:62px;
  --hero-primary-button-height-mobile:56px;
  --hero-primary-button-border:#a0ff72;
  --hero-primary-button-radius:16px 4px 16px 4px;
  --hero-primary-button-bg:linear-gradient(135deg,#8dff4e 0%,#5ee51b 52%,#39b90b 100%);
  --hero-primary-button-bg-hover:linear-gradient(135deg,#a4ff72 0%,#71f12d 52%,#46c713 100%);
  --hero-primary-button-shadow:0 16px 34px rgba(63,210,16,.24),inset 0 1px 0 rgba(255,255,255,.5);
  --hero-ios-bg:linear-gradient(135deg,#f6f8f7 0%,#cbd3cf 100%);
  --hero-ios-text:#101713;
  --hero-ios-border:#eef3f0;
  --hero-ios-shadow:0 14px 30px rgba(0,0,0,.24);
  --hero-bonus-text:#eaffdf;
  --hero-bonus-border:#375441;
  --hero-bonus-shadow:0 14px 30px rgba(0,0,0,.28);
  --hero-secondary-button-height:62px;
  --hero-secondary-button-height-mobile:54px;
  --hero-secondary-button-radius:4px 16px 4px 16px;
}

.page-template-page-home .title-ruler--home{position:relative;margin:0 0 14px}
.page-template-page-home .title-ruler--home .entry-title{
  position:relative;
  width:100%;
  max-width:none;
  margin:0;
  padding:clamp(16px,2vw,22px) clamp(20px,3vw,38px);
  border:1px solid var(--hero-titlebar-border);
  border-right-width:7px;
  border-radius:24px 4px 24px 4px;
  background:linear-gradient(110deg,rgba(103,238,32,.14),transparent 34%),var(--hero-titlebar-bg);
  color:var(--hero-titlebar-text);
  box-shadow:0 14px 34px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.04);
  font-size:clamp(1.7rem,3vw,2.76rem);
  line-height:1.08;
  text-align:left;
  text-wrap:balance;
  overflow:hidden;
}
.page-template-page-home .title-ruler--home .entry-title::after{
  content:"Y333";
  position:absolute;
  right:28px;
  top:50%;
  translate:0 -50%;
  color:rgba(103,238,32,.12);
  font-size:clamp(2.8rem,7vw,6rem);
  font-weight:950;
  letter-spacing:-.08em;
  pointer-events:none;
}

.hero--y333{padding:0;margin-bottom:clamp(20px,2.8vw,34px)}
.y333-hero-shell{
  position:relative;
  display:grid;
  gap:var(--hero-grid-gap);
  padding:clamp(16px,2.3vw,28px);
  border:1px solid var(--hero-stage-border);
  border-radius:var(--hero-stage-radius) 8px var(--hero-stage-radius) 8px;
  background:
    radial-gradient(circle at 84% 12%,rgba(77,234,23,.2),transparent 24%),
    radial-gradient(circle at 12% 90%,rgba(191,203,196,.08),transparent 26%),
    linear-gradient(145deg,#030604 0%,var(--hero-stage-bg) 48%,#0c1510 100%);
  box-shadow:var(--hero-stage-shadow);
  overflow:hidden;
}
.y333-hero-shell::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:linear-gradient(180deg,#b9ff97,#64ec21 50%,#278e09);
  box-shadow:0 0 28px rgba(103,238,32,.55);
}
.y333-hero-shell::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-110px;
  bottom:-140px;
  border:1px solid rgba(103,238,32,.22);
  border-radius:50%;
  box-shadow:0 0 0 34px rgba(103,238,32,.025),0 0 0 68px rgba(103,238,32,.018);
  pointer-events:none;
}
.y333-hero-shell>*{position:relative;z-index:1}

.y333-hero-console{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  grid-template-areas:"stats badge";
  min-width:0;
  border:1px solid var(--hero-panel-border);
  border-radius:20px 4px 20px 4px;
  background:rgba(6,11,8,.82);
  box-shadow:var(--hero-card-shadow);
  overflow:hidden;
}
.y333-hero-badge{
  grid-area:badge;
  position:relative;
  min-width:0;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:14px;
  padding:clamp(20px,2.7vw,34px);
  border-left:1px solid var(--hero-panel-border);
  background:linear-gradient(160deg,rgba(103,238,32,.14),rgba(5,10,7,.3) 48%),#080e0a;
  overflow:hidden;
}
.y333-badge-index{
  position:absolute;
  inset:auto -12px -38px auto;
  color:rgba(103,238,32,.07);
  font-size:clamp(7rem,13vw,12rem);
  font-weight:950;
  line-height:1;
  letter-spacing:-.1em;
  pointer-events:none;
}
.y333-logo-card{
  position:relative;
  width:min(100%,270px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  padding:7px;
  border:1px solid rgba(158,255,112,.58);
  border-radius:26%;
  background:#020503;
  box-shadow:0 0 0 6px rgba(103,238,32,.04),0 24px 52px rgba(0,0,0,.44),0 0 34px rgba(75,222,24,.18);
  overflow:hidden;
}
.y333-logo-card::after{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(226,234,229,.13);
  border-radius:24%;
  pointer-events:none;
}
.y333-logo-card .hero-logo{width:100%;height:100%;object-fit:cover;border-radius:24%}
.y333-brand-caption{text-align:center}
.y333-brand-caption strong{display:block;color:#f3fff0;font-size:clamp(1.38rem,2.2vw,1.84rem);line-height:1.08;letter-spacing:.04em}

.y333-hero-stats{grid-area:stats;min-width:0;display:grid;grid-template-rows:auto 1fr;background:var(--hero-panel-bg)}
.y333-stats-head{
  display:flex;
  align-items:center;
  min-height:58px;
  padding:15px 20px;
  border-bottom:1px solid var(--hero-panel-border);
  background:linear-gradient(90deg,#122019,#0a110d);
}
.y333-stats-head__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#c5d2c8;
  font-size:.73rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.y333-stats-head__eyebrow::before{content:"";width:28px;height:3px;border-radius:99px;background:var(--hero-accent-bg);box-shadow:0 0 14px rgba(103,238,32,.55)}
.hero-specs{height:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(88px,1fr);gap:1px;margin:0;background:var(--hero-panel-border)}
.hero-spec{
  min-width:0;
  min-height:92px;
  display:grid;
  align-content:center;
  gap:7px;
  padding:15px 17px;
  background:var(--hero-card-bg);
}
.hero-spec:nth-child(3n+1){background:linear-gradient(135deg,rgba(103,238,32,.09),transparent 62%),var(--hero-card-bg)}
.hero-spec dt,.hero-spec dd{margin:0;display:flex;align-items:center}
.hero-spec dt{gap:8px;color:#aebdb1;font-size:.72rem;font-weight:900;letter-spacing:.055em;text-transform:uppercase}
.hero-spec dd{color:var(--hero-card-text);font-size:1rem;font-weight:900;line-height:1.3;overflow-wrap:anywhere}
.hero-ico{width:19px;height:19px;display:inline-grid;place-items:center;color:var(--hero-accent-bg);flex:0 0 19px;line-height:0}
.hero-ico svg{width:100%;height:100%;fill:currentColor;display:block;overflow:visible}

.y333-hero-guide{
  margin:0;
  padding:13px 16px;
  border:1px solid var(--hero-guide-border);
  border-left:4px solid var(--hero-accent-bg);
  border-radius:var(--hero-guide-radius);
  background:var(--hero-guide-bg);
  color:var(--hero-guide-text);
  font-size:clamp(.92rem,1.15vw,1.02rem);
  font-weight:650;
  line-height:1.65;
  text-align:center;
}
.y333-hero-primary{display:grid;grid-template-columns:1fr;align-items:stretch;gap:var(--hero-action-gap)}
.y333-hero-primary.has-ios,.y333-hero-primary.has-bonus{grid-template-columns:repeat(2,minmax(0,1fr))}
.y333-hero-primary.has-ios.has-bonus{grid-template-columns:repeat(3,minmax(0,1fr))}
.y333-primary-download{
  position:relative;
  width:100%;
  min-height:var(--hero-primary-button-height);
  padding:12px 62px 12px 20px;
  border:1px solid var(--hero-primary-button-border);
  border-radius:var(--hero-primary-button-radius);
  background:var(--hero-primary-button-bg);
  color:var(--hero-accent-text);
  box-shadow:var(--hero-primary-button-shadow);
  font-size:clamp(1rem,1.5vw,1.16rem);
  overflow:hidden;
}
.y333-primary-download:hover{background:var(--hero-primary-button-bg-hover)}
.y333-primary-download__label{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;font-weight:950;text-align:center}
.y333-primary-download__arrow{position:absolute;inset:0 0 0 auto;width:52px;display:grid;place-items:center;border-left:1px solid rgba(4,17,3,.2);background:rgba(6,22,4,.08);font-size:1.72rem;font-weight:950}
.y333-hero-primary .y333-ios-play,.y333-hero-primary .y333-bonus-play{display:flex;align-items:center;justify-content:center;gap:10px;min-height:var(--hero-secondary-button-height);padding:12px 18px;border-radius:var(--hero-secondary-button-radius);font-size:.94rem;font-weight:900;text-align:center}
.y333-hero-primary .y333-ios-play{background:var(--hero-ios-bg);color:var(--hero-ios-text);border-color:var(--hero-ios-border);box-shadow:var(--hero-ios-shadow)}
.y333-hero-primary .y333-bonus-play{background:linear-gradient(135deg,#17241b 0%,#0b130e 100%);color:var(--hero-bonus-text);border-color:var(--hero-bonus-border);box-shadow:var(--hero-bonus-shadow)}

@media(max-width:980px){
  .y333-hero-console{grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr)}
  .hero-spec{min-height:88px;padding:14px}
  .y333-logo-card{width:min(100%,238px)}
}
@media(max-width:820px){
  .y333-hero-console{grid-template-columns:1fr;grid-template-areas:"badge" "stats"}
  .y333-hero-badge{border-left:0;border-bottom:1px solid var(--hero-panel-border)}
  .y333-logo-card{width:min(100%,245px)}
  .y333-hero-primary.has-ios,.y333-hero-primary.has-bonus,.y333-hero-primary.has-ios.has-bonus{grid-template-columns:1fr 1fr}
}
@media(max-width:767px){
  .page-template-page-home .title-ruler--home .entry-title{padding:15px 70px 15px 20px;border-right-width:5px;border-radius:18px 3px 18px 3px;font-size:var(--theme-h1-size-mobile)}
  .page-template-page-home .title-ruler--home .entry-title::after{right:16px;font-size:2.2rem}
  .y333-hero-shell{gap:var(--hero-grid-gap-mobile);padding:13px;border-radius:24px 5px 24px 5px}
  .y333-hero-badge{padding:18px 14px}
  .hero-specs{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(88px,auto)}
  .hero-spec{min-height:88px;padding:11px 8px;text-align:center;justify-items:center}
  .hero-spec dt,.hero-spec dd{justify-content:center;text-align:center}
  .hero-spec dt{gap:5px;font-size:.64rem;letter-spacing:.02em}
  .hero-spec dd{font-size:.84rem}
  .hero-ico{width:17px;height:17px;flex-basis:17px}
  .y333-hero-guide{padding:11px 12px;font-size:.9rem;line-height:1.55}
  .y333-primary-download{min-height:var(--hero-primary-button-height-mobile);padding-left:14px;padding-right:52px}
  .y333-hero-primary.has-ios,.y333-hero-primary.has-bonus,.y333-hero-primary.has-ios.has-bonus{grid-template-columns:1fr}
  .y333-hero-primary .y333-ios-play,.y333-hero-primary .y333-bonus-play{min-height:var(--hero-secondary-button-height-mobile)}
}
@media(max-width:430px){
  .page-template-page-home .title-ruler--home .entry-title::after{display:none}
  .page-template-page-home .title-ruler--home .entry-title{padding-right:18px}
  .y333-logo-card{width:min(100%,214px)}
  .hero-spec{min-height:84px;padding-inline:6px}
  .hero-spec dt{display:grid;justify-items:center}
  .hero-spec dd{font-size:.78rem}
}
