/* =========================================================
   STYLES.CSS - DISPLAY / CORE ONLY
   الرئيسية + العرض + النوافذ + المؤثرات
========================================================= */


/* =========================================================
   1) FONTS
========================================================= */

@font-face{
  font-family:"HanakaDisplay";
  src:url("./assets/fonts/dima.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"HanakaText";
  src:url("./assets/fonts/zain.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"MolhimCustom";
  src:url("./assets/fonts/Molhim.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}


/* =========================================================
   2) ROOT / DISPLAY TOKENS
   LINKED TO PROJECT RESPONSIVE SYSTEM
========================================================= */

:root{

  /* =========================
     DISPLAY
  ========================= */

  --display-vw:var(--app-width);
  --display-vh:var(--app-height);
  --display-scale:1;


  /* =========================
     COLORS
  ========================= */

  --bg:#EAECF0;
  --surface:#FFFFFF;
  --soft:#F6F7F9;
  --line:#D5DADF;

  --primary:#FE7F2D;
  --secondary:#233D4D;
  --text:#151515;
  --muted:#8793A0;

  --btn-primary:#FE7F2D;
  --btn-nav:#0A7C6E;
  --btn-show:#233D4D;
  --btn-correct:#007F00;
  --btn-wrong:#7F0000;
  --btn-danger:#7F0000;
  --btn-double:#00007F;

  --btn-disabled:#D7DCE2;
  --btn-disabled-text:#7B8792;


  /* =========================
     RADII
  ========================= */

  --radius-xl:
    clamp(
      22px,
      calc(var(--screen-radius) * 1.45),
      34px
    );

  --radius-lg:
    clamp(
      18px,
      calc(var(--screen-radius) * 1.18),
      26px
    );

  --radius-md:
    clamp(
      15px,
      var(--screen-radius),
      20px
    );

  --radius-sm:
    clamp(
      11px,
      calc(var(--screen-radius) * .72),
      14px
    );


  /* =========================
     SHADOWS
  ========================= */

  --shadow-soft:
    0 18px 44px
    rgba(35,61,77,.10);

  --shadow-card:
    0 22px 56px
    rgba(35,61,77,.13);

  --shadow-strong:
    0 32px 88px
    rgba(35,61,77,.22);

  --ease:
    cubic-bezier(.16,1,.3,1);


  /* =========================
     PAGE
     FROM GLOBAL SYSTEM
  ========================= */

  --page-pad-top:
    calc(
      var(--screen-pad-top) +
      var(--safe-top)
    );

  --page-pad-right:
    calc(
      var(--screen-pad-x) +
      var(--safe-right)
    );

  --page-pad-bottom:
    calc(
      var(--screen-pad-bottom) +
      var(--safe-bottom)
    );

  --page-pad-left:
    calc(
      var(--screen-pad-x) +
      var(--safe-left)
    );


  /* =========================
     HOME
  ========================= */

  --home-max:
    min(
      1380px,
      calc(
        var(--app-width) -
        calc(var(--screen-pad-x) * 2)
      )
    );

  --home-gap:
    var(--screen-gap);

  --home-hero-gap:
    clamp(
      8px,
      1.2vmin,
      14px
    );

  --home-hero-title-w:
    clamp(
      210px,
      calc(var(--app-width) * .21),
      260px
    );


  /* =========================
     HOME TEAM
  ========================= */

  --home-team-card-w:
    clamp(
      300px,
      calc(var(--app-width) * .31),
      350px
    );

  --home-team-card-h:
    clamp(
      70px,
      calc(var(--app-height) * .105),
      82px
    );

  --home-team-score-size:
    clamp(
      62px,
      calc(var(--app-height) * .105),
      82px
    );

  --home-team-gap:
    clamp(
      8px,
      1.2vmin,
      15px
    );

  --home-team-radius:
    clamp(
      13px,
      1.6vmin,
      16px
    );


  /* =========================
     HOME SEGMENTS
  ========================= */

  --home-segment-h:
    clamp(
      88px,
      calc(var(--app-height) * .17),
      132px
    );

  --home-segment-gap:
    clamp(
      7px,
      1.25vmin,
      14px
    );


  /* =========================
     CONTROLS
  ========================= */

  --control-h:
    var(--screen-control-btn-h);

  --control-radius:
    clamp(
      14px,
      calc(var(--screen-radius) * .8),
      16px
    );

  --control-font:
    var(--screen-button-size);


  /* =========================
     NUMBERS
  ========================= */

  --number-size:
    clamp(
      58px,
      calc(var(--app-height) * .095),
      86px
    );

  --number-gap:
    var(--screen-gap);
}

/* =========================================================
   3) BASE
========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  width:100%;
  margin:0;
  padding:0;
}

html{
  height:100%;
}

body{
  height:var(--app-height,100dvh);
  min-height:0;
}

html{
  background:var(--bg);
  overflow:hidden;
}

body{
  direction:rtl;
  overflow:hidden;

  color:var(--text);
  background:var(--bg);

  font-family:"HanakaText",sans-serif;
}


/* =========================================================
   3.1) DISPLAY BACKGROUND
========================================================= */

body::before{
  content:"";

  position:fixed;
  inset:0;
  z-index:-2;

  background:
    radial-gradient(
      circle at 16% 18%,
      rgba(254,127,45,.13),
      transparent 32%
    ),
    radial-gradient(
      circle at 86% 14%,
      rgba(35,61,77,.10),
      transparent 34%
    ),
    radial-gradient(
      circle at 52% 92%,
      rgba(10,124,110,.10),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #EAECF0 0%,
      #F6F7F9 52%,
      #E2E6EA 100%
    );
}

body::after{
  content:"";

  position:fixed;
  inset:0;
  z-index:-1;

  opacity:.45;
  pointer-events:none;

  background-image:
    linear-gradient(
      rgba(35,61,77,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(35,61,77,.035) 1px,
      transparent 1px
    );

  background-size:42px 42px;
}


/* =========================================================
   3.2) ELEMENT DEFAULTS
========================================================= */

button,
input,
select,
textarea{
  font-family:"HanakaText",sans-serif;
}

button{
  border:0;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

button:disabled{
  cursor:not-allowed;
  opacity:.48;
}

img,
video{
  display:block;
  max-width:100%;
  max-height:100%;
}

h1,
h2,
h3,
.homeTeamName,
.homeTeamScore,
.homeSegmentItem span,
.winnerBtn,
#winnerOverlayName,
.finalWinnerName{
  font-family:"HanakaDisplay","HanakaText",sans-serif;
}

.hidden{
  display:none !important;
}


/* =========================================================
   4) SHARED DISPLAY BUTTONS
========================================================= */

.displayBtn,
.homeWinnerBtn,
.winnerBtn,
.segmentEndBtn,
.homeModelClassicControl,
#displayControlsEyeBtn,
#bigScreenModeBtn,
#fullScreenModeBtn,
#winnerOverlayClose,
#winnerOverlayEnd{
  min-height:var(--control-h);
  border-radius:var(--control-radius);

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0 22px;

  color:#fff;

  font-size:var(--control-font);
  line-height:1;
  font-weight:900;
  text-align:center;
  white-space:nowrap;

  transition:
    transform .18s var(--ease),
    filter .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
}

.displayBtn:hover,
.homeWinnerBtn:hover,
.winnerBtn:hover,
.segmentEndBtn:hover,
.homeModelClassicControl:hover,
#displayControlsEyeBtn:hover,
#bigScreenModeBtn:hover,
#fullScreenModeBtn:hover,
#winnerOverlayClose:hover,
#winnerOverlayEnd:hover{
  transform:translateY(-2px);
  filter:brightness(1.04);
}

.displayBtn:active,
.homeWinnerBtn:active,
.winnerBtn:active,
.segmentEndBtn:active,
.homeModelClassicControl:active,
#displayControlsEyeBtn:active,
#bigScreenModeBtn:active,
#fullScreenModeBtn:active,
#winnerOverlayClose:active,
#winnerOverlayEnd:active{
  transform:scale(.98);
}

.displayBtn.primary{
  background:var(--btn-primary);
}

.displayBtn.nav{
  background:var(--btn-nav);
}

.displayBtn.show{
  background:var(--btn-show);
}

.displayBtn.correct{
  background:var(--btn-correct);
}

.displayBtn.wrong,
.displayBtn.danger{
  background:var(--btn-danger);
}

.displayBtn.double{
  background:var(--btn-double);
}

.displayBtn.disabled,
.displayBtn:disabled{
  background:var(--btn-disabled);
  color:var(--btn-disabled-text);
}


/* =========================================================
   5) GENERAL FX
========================================================= */

.softEnter{
  animation:softEnter .28s var(--ease) both;
}

.softEnterFast{
  animation:softEnter .18s var(--ease) both;
}

.softExit{
  animation:softExit .12s ease both;
}

.score-bump{
  animation:scoreBump .3s var(--ease) both;
}

@keyframes softEnter{

  from{
    opacity:0;
    transform:translateY(10px) scale(.985);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }

}

@keyframes softExit{

  to{
    opacity:0;
    transform:translateY(8px) scale(.985);
  }

}

@keyframes scoreBump{

  0%,
  100%{
    transform:scale(1);
  }

  44%{
    transform:scale(1.14);
  }

}


/* =========================================================
   6) HOME PAGE
========================================================= */

.homeShowPage,
.homePageShell,
#homePage,
#homeScreen{
  position:relative;

  width:100%;
  height:var(--app-height);

  min-width:0;
  min-height:0;

  max-width:100%;
  max-height:var(--app-height);

  padding:
    var(--page-pad-top)
    var(--page-pad-right)
    var(--page-pad-bottom)
    var(--page-pad-left);

  display:grid;

  grid-template-rows:
    auto
    minmax(0,1fr)
    auto;

  gap:
    var(--home-gap);

  overflow:hidden;

  background:transparent;
}

.homeShowPage > *,
.homePageShell > *{
  position:relative;
  z-index:2;
}


/* =========================================================
   7) HOME HERO
========================================================= */

.homeHero{
  position:relative;
  z-index:20;

  width:min(
    100%,
    var(--home-max)
  );

  min-width:0;

  margin:0 auto;

  display:grid;

  grid-template-columns:
    minmax(
      0,
      var(--home-team-card-w)
    )
    var(--home-hero-title-w)
    minmax(
      0,
      var(--home-team-card-w)
    );

  align-items:center;
  justify-content:center;

  gap:
    var(--home-hero-gap);

  transform:
    translateY(
      clamp(
        24px,
        4vmin,
        50px
      )
    );

  margin-bottom:
    clamp(
      -32px,
      -3.2vmin,
      -18px
    );
}
/* =========================================================
   8) HOME TEAM CARDS
========================================================= */

.homeTeamCard{
  position:relative;

  width:100%;
  max-width:var(--home-team-card-w);

  min-width:0;

  height:var(--home-team-card-h);
  min-height:var(--home-team-card-h);
  max-height:var(--home-team-card-h);

  display:grid;
  align-items:stretch;

  gap:var(--home-team-gap);

  padding:0;

  background:transparent;

  border:0;
  border-radius:0;

  box-shadow:none;

  cursor:pointer;

  overflow:visible;

  isolation:isolate;

  transition:
    transform .2s var(--ease),
    filter .2s ease;
}


/* =========================================================
   8.1) TEAM NAME BOX
========================================================= */

.homeTeamText{
  position:relative;
  z-index:3;

  width:100%;
  min-width:0;

  height:var(--home-team-card-h);
  min-height:var(--home-team-card-h);
  max-height:var(--home-team-card-h);

  display:flex;
  align-items:center;
  justify-content:center;

  padding:
    var(--screen-gap)
    clamp(
      14px,
      2vmin,
      28px
    );

  background:
    linear-gradient(
      135deg,
      #FFFFFF 0%,
      #F8FAFB 55%,
      #EEF2F4 100%
    );

  border:
    2px solid
    var(--primary);

  border-radius:
    var(--home-team-radius);

  box-shadow:
    0 10px 24px
    rgba(35,61,77,.10),
    inset 0 1px 0
    rgba(255,255,255,.95);

  overflow:visible;
}

.homeTeamText::before{
  content:"";

  position:absolute;
  inset:
    clamp(
      4px,
      .55vmin,
      5px
    );

  border:
    1px solid
    rgba(254,127,45,.16);

  border-radius:
    clamp(
      8px,
      1vmin,
      10px
    );

  pointer-events:none;
}

.homeTeamText::after{
  content:"";

  position:absolute;

  top:0;
  bottom:0;

  width:
    clamp(
      24px,
      3vmin,
      32px
    );

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.55),
      transparent
    );

  opacity:.7;

  pointer-events:none;
}


/* =========================================================
   8.2) TEAM NAME
========================================================= */

.homeTeamName{
  position:relative;
  z-index:2;

  width:100%;
  min-width:0;

  color:var(--secondary);

  font-size:
    clamp(
      1.05rem,
      calc(.6rem + 1.35vmin),
      1.55rem
    );

  line-height:1.15;
  font-weight:400;

  text-align:center;

  white-space:normal;

  overflow:visible;
  text-overflow:clip;

  overflow-wrap:break-word;
  word-break:normal;

  text-shadow:
    0 1px 0
    rgba(255,255,255,.9),
    0 5px 12px
    rgba(35,61,77,.08);
}


/* =========================================================
   8.3) SCORE BOX
========================================================= */

.homeTeamScore{
  position:relative;
  z-index:3;

  width:var(--home-team-score-size);
  height:var(--home-team-score-size);

  min-width:var(--home-team-score-size);
  min-height:var(--home-team-score-size);

  max-width:var(--home-team-score-size);
  max-height:var(--home-team-score-size);

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(
      145deg,
      #294A5C 0%,
      #233D4D 55%,
      #182F3D 100%
    );

  border:
    2px solid
    var(--primary);

  border-radius:
    var(--home-team-radius);

  color:#FFFFFF;

  font-family:
    "HanakaDisplay",
    "HanakaText",
    sans-serif;

  font-size:
    clamp(
      1.25rem,
      calc(.7rem + 1.5vmin),
      1.65rem
    );

  line-height:1;
  font-weight:400;

  box-shadow:
    0 12px 26px
    rgba(35,61,77,.20),
    inset 0 1px 0
    rgba(255,255,255,.22),
    inset 0 -5px 12px
    rgba(0,0,0,.08);

  text-shadow:
    0 2px 4px
    rgba(0,0,0,.18);

  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.homeTeamScore::before{
  content:"";

  position:absolute;

  inset:
    clamp(
      4px,
      .55vmin,
      5px
    );

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:
    clamp(
      7px,
      .9vmin,
      9px
    );

  pointer-events:none;
}

.homeTeamScore.maxScore{
  background:
    linear-gradient(
      145deg,
      #FF9B51 0%,
      #FE7F2D 55%,
      #E9651A 100%
    );

  box-shadow:
    0 12px 28px
    rgba(254,127,45,.24),
    inset 0 1px 0
    rgba(255,255,255,.35);
}


/* =========================================================
   8.4) TEAM A
========================================================= */

.homeTeamA{
  justify-self:end;

  grid-template-columns:
    minmax(0,1fr)
    var(--home-team-score-size);
}

.homeTeamA .homeTeamText{
  grid-column:1;
  grid-row:1;
}

.homeTeamA .homeTeamScore{
  grid-column:2;
  grid-row:1;
}


/* =========================================================
   8.5) TEAM B
========================================================= */

.homeTeamB{
  justify-self:start;

  grid-template-columns:
    var(--home-team-score-size)
    minmax(0,1fr);
}

.homeTeamB .homeTeamScore{
  grid-column:1;
  grid-row:1;
}

.homeTeamB .homeTeamText{
  grid-column:2;
  grid-row:1;
}


/* =========================================================
   8.6) TEAM HOVER
========================================================= */

.homeTeamCard:hover{
  transform:
    translateY(
      clamp(
        -3px,
        -.35vmin,
        -2px
      )
    );

  filter:brightness(1.02);
}

.homeTeamCard:hover
.homeTeamText{
  border-color:
    rgba(254,127,45,.78);

  box-shadow:
    0 14px 30px
    rgba(35,61,77,.13),
    0 0 0 4px
    rgba(254,127,45,.06),
    inset 0 1px 0
    rgba(255,255,255,.95);
}

.homeTeamCard:hover
.homeTeamScore{
  box-shadow:
    0 16px 32px
    rgba(35,61,77,.24),
    0 0 0 4px
    rgba(254,127,45,.07),
    inset 0 1px 0
    rgba(255,255,255,.22);
}


/* =========================================================
   8.7) LEADING
========================================================= */

.homeTeamCard.leadingTeam
.homeTeamText{
  border-color:
    rgba(254,127,45,.88);

  box-shadow:
    0 12px 28px
    rgba(35,61,77,.13),
    0 0 0 4px
    rgba(254,127,45,.10),
    inset 0 1px 0
    rgba(255,255,255,.95);
}

.homeTeamCard.leadingTeam
.homeTeamScore{
  border-color:#FF8B42;
}


/* =========================================================
   8.8) TIE
========================================================= */

.homeTeamCard.tieTeam
.homeTeamText{
  border-color:
    rgba(35,61,77,.22);
}


/* =========================================================
   8.9) ACTIVE TEAM
========================================================= */

.homeTeamCard::after{
  content:"";

  position:absolute;
  z-index:4;

  bottom:
    clamp(
      -9px,
      -1vmin,
      -6px
    );

  width:
    clamp(
      34px,
      4.2vmin,
      42px
    );

  height:
    clamp(
      4px,
      .5vmin,
      5px
    );

  background:var(--primary);

  border-radius:999px;

  opacity:0;

  pointer-events:none;

  box-shadow:
    0 4px 12px
    rgba(254,127,45,.24);

  transition:
    width .2s ease,
    opacity .2s ease;
}

.homeTeamA::after{
  inset-inline-end:
    clamp(
      6px,
      .8vmin,
      8px
    );
}

.homeTeamB::after{
  inset-inline-start:
    clamp(
      6px,
      .8vmin,
      8px
    );
}

body[data-active-team="A"]
.homeTeamA::after,

body[data-active-team="B"]
.homeTeamB::after{
  width:
    clamp(
      44px,
      5.4vmin,
      54px
    );

  opacity:.82;
}


/* =========================================================
   9) HOME TITLE
========================================================= */

.homeTitleBox{
  position:relative;
  z-index:20;

  width:
    var(--home-hero-title-w);

  min-width:0;

  height:auto;

  min-height:
    calc(
      var(--home-team-card-h) +
      clamp(
        22px,
        3vmin,
        34px
      )
    );

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  overflow:visible;

  cursor:pointer;
}


/* =========================
   TITLE
========================= */

.homeTitleBox h1{
  position:relative;
  z-index:2;

  margin:0;

  color:var(--secondary);

  font-size:
    clamp(
      3.2rem,
      calc(1.3rem + 5.8vmin),
      6.6rem
    );

  line-height:1;
  font-weight:400;

  text-align:center;

  pointer-events:none;

  filter:
    drop-shadow(
      0 12px 24px
      rgba(35,61,77,.12)
    );

  animation:
    homeTitleFloat
    3.8s
    ease-in-out
    infinite;
}

.homeTitleBox h1::after{
  content:"";

  width:42%;

  height:
    clamp(
      5px,
      .7vmin,
      7px
    );

  margin:
    clamp(
      6px,
      1vmin,
      10px
    )
    auto
    0;

  display:block;

  background:var(--primary);

  border-radius:999px;

  box-shadow:
    0 0 0 6px
    rgba(254,127,45,.10);

  pointer-events:none;
}


/* =========================
   MODEL NAME / CLICK AREA
========================= */

.homeModelName,
#modelNameDisplay{
  position:relative;
  z-index:30;

  min-width:
    clamp(
      120px,
      calc(var(--app-width) * .13),
      150px
    );

  max-width:
    clamp(
      180px,
      calc(var(--app-width) * .23),
      260px
    );

  min-height:
    clamp(
      28px,
      calc(var(--app-height) * .04),
      32px
    );

  margin-top:
    clamp(
      3px,
      .45vmin,
      4px
    );

  padding:
    clamp(
      4px,
      .55vmin,
      5px
    )
    clamp(
      12px,
      1.5vmin,
      16px
    );

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--surface);

  border:
    2px solid
    var(--line);

  border-radius:999px;

  color:#000000;

  font-family:
    "HanakaText",
    sans-serif;

  font-size:
    clamp(
      .85rem,
      calc(.5rem + .8vmin),
      1.1rem
    );

  line-height:1;
  font-weight:400;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

  pointer-events:auto;

  cursor:pointer;
}


/* =========================
   TITLE ANIMATION
========================= */

@keyframes homeTitleFloat{

  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:
      translateY(
        clamp(
          -4px,
          -.5vmin,
          -3px
        )
      );
  }
}



/* =========================================================
   10) MODEL POPUP
========================================================= */

.homeModelPopupArea,
#homeModelPopupArea{
  position:fixed;

  top:
    calc(
      var(--screen-pad-top) +
      var(--safe-top)
    );

  left:50%;

  z-index:999980;

  width:auto;

  max-width:
    calc(
      var(--app-width) -
      calc(var(--screen-pad-x) * 2)
    );

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;

  pointer-events:none;

  transform:
    translate(-50%,-14px)
    scale(.96);

  transition:
    opacity .18s ease,
    transform .18s var(--ease);
}

.homeModelPopupArea.hidden,
#homeModelPopupArea.hidden{
  display:none;
}

.homeModelPopupArea.show,
#homeModelPopupArea.show{
  opacity:1;
  pointer-events:auto;

  transform:
    translate(-50%,0)
    scale(1);
}

.homeModelClassicBox{
  min-height:
    clamp(
      54px,
      calc(var(--app-height) * .08),
      62px
    );

  display:flex;
  align-items:center;
  justify-content:center;

  gap:
    var(--screen-gap);

  padding:
    clamp(
      6px,
      .8vmin,
      7px
    );

  background:var(--surface);

  border:
    2px solid
    var(--line);

  border-radius:
    clamp(
      18px,
      2.2vmin,
      22px
    );

  box-shadow:
    var(--shadow-strong);
}

.homeModelClassicClose{
  width:
    clamp(
      38px,
      calc(var(--app-height) * .058),
      44px
    );

  height:
    clamp(
      38px,
      calc(var(--app-height) * .058),
      44px
    );

  min-width:
    clamp(
      38px,
      calc(var(--app-height) * .058),
      44px
    );

  border-radius:
    clamp(
      12px,
      1.5vmin,
      15px
    );

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--soft);
  color:var(--secondary);

  font-size:
    clamp(
      1.15rem,
      calc(.7rem + 1vmin),
      1.35rem
    );

  line-height:1;
  font-weight:400;
}

.homeModelClassicControl,
#displayControlsEyeBtn,
#bigScreenModeBtn,
#fullScreenModeBtn{
  min-width:
    clamp(
      108px,
      calc(var(--app-width) * .115),
      132px
    );

  height:
    var(--control-h);
}

.homeModelClassicControl.hideControlsMode,
#displayControlsEyeBtn.hideControlsMode{
  background:var(--btn-wrong);
}

.homeModelClassicControl.showControlsMode,
#displayControlsEyeBtn.showControlsMode{
  background:var(--btn-correct);
}

.fullScreenModeBtn,
#bigScreenModeBtn,
#fullScreenModeBtn{
  background:var(--secondary);
}

.fullScreenModeBtn.activeFullScreen,
#bigScreenModeBtn.activeFullScreen,
#fullScreenModeBtn.activeFullScreen{
  background:var(--primary);
}

.homeModelClassicBody{
  min-width:
    clamp(
      180px,
      calc(var(--app-width) * .19),
      210px
    );

  height:
    var(--control-h);

  border-radius:
    var(--control-radius);

  display:flex;
  align-items:center;
  justify-content:center;

  gap:
    var(--screen-gap);

  padding:
    0
    clamp(
      14px,
      1.8vmin,
      18px
    );

  background:var(--soft);
  color:var(--text);
}

.homeModelClassicCodeLabel{
  color:#000000;

  font-size:
    clamp(
      .72rem,
      calc(.45rem + .55vmin),
      .78rem
    );

  line-height:1;
  font-weight:400;

  white-space:nowrap;
}

.homeModelClassicCode{
  direction:ltr;

  color:#040404;

  font-family:
    "HanakaDisplay",
    "HanakaText",
    sans-serif;

  font-size:
    clamp(
      1.3rem,
      calc(.75rem + 1.5vmin),
      1.65rem
    );

  line-height:1;
  font-weight:400;

  letter-spacing:
    clamp(
      1px,
      .2vmin,
      2px
    );
}
/* =========================================================
   11) SEGMENTS GRID - HOME
========================================================= */

.homeSegmentsShowcase{
  position:relative;
  z-index:5;

  width:min(
    100%,
    var(--home-max)
  );

  height:100%;

  min-width:0;
  min-height:0;

  margin:0 auto;

  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  grid-auto-rows:
    minmax(
      0,
      var(--home-segment-h)
    );

  gap:
    var(--home-segment-gap);

  align-content:center;
  justify-content:center;

  overflow:visible;
}

.homeSegmentsShowcase.segmentsMoreThan6{
  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );
}


/* =========================================================
   11.2) SEGMENT CARD
   CLEAN PROJECT STYLE
========================================================= */

.homeSegmentItem{
  position:relative;

  width:100%;
  height:var(--home-segment-h);

  min-width:0;
  min-height:0;

  max-height:var(--home-segment-h);

  display:flex;
  align-items:center;
  justify-content:center;

  padding:
    clamp(
      8px,
      1.1vmin,
      12px
    );

  background:
    linear-gradient(
      145deg,
      #FE7F2D 0%,
      #F47A2A 52%,
      #E86F20 100%
    );

  border:
    2px solid
    rgba(255,255,255,.92);

  border-radius:
    var(--radius-xl);

  box-shadow:
    0 14px 30px rgba(35,61,77,.13),
    0 4px 10px rgba(254,127,45,.16);

  cursor:pointer;

  overflow:hidden;
  isolation:isolate;

  transition:
    transform .18s var(--ease),
    box-shadow .18s ease,
    filter .18s ease,
    border-color .18s ease;
}


/* =========================
   INNER FRAME
========================= */

.homeSegmentItem::before{
  content:"";

  position:absolute;

  inset:
    clamp(
      7px,
      .9vmin,
      10px
    );

  z-index:1;

  border:
    2px solid
    rgba(35,61,77,.48);

  border-radius:
    calc(
      var(--radius-xl) -
      clamp(
        6px,
        .8vmin,
        8px
      )
    );

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,0)
    );

  pointer-events:none;
}


/* =========================
   DECORATIVE LINE
========================= */

.homeSegmentItem::after{
  content:"";

  position:absolute;

  left:50%;

  bottom:
    clamp(
      11px,
      1.4vmin,
      16px
    );

  z-index:2;

  width:
    clamp(
      44px,
      5.5vmin,
      62px
    );

  height:
    clamp(
      4px,
      .55vmin,
      6px
    );

  transform:
    translateX(-50%);

  background:
    var(--secondary);

  border-radius:999px;

  opacity:.82;

  pointer-events:none;

  box-shadow:
    0 2px 7px rgba(35,61,77,.18);

  animation:
    homeSegmentAccent
    3s
    ease-in-out
    infinite;
}


/* =========================
   CONTENT
========================= */

.homeSegmentContent{
  position:relative;
  z-index:3;

  width:100%;
  height:100%;

  min-width:0;
  min-height:0;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:
    var(--screen-gap);

  padding:
    clamp(
      8px,
      1vmin,
      12px
    );

  text-align:center;

  overflow:hidden;
}

.homeSegmentContent::before{
  content:"";

  position:absolute;

  top:
    clamp(
      8px,
      1vmin,
      12px
    );

  left:50%;

  width:
    clamp(
      18px,
      2.4vmin,
      26px
    );

  height:
    clamp(
      3px,
      .4vmin,
      4px
    );

  transform:
    translateX(-50%);

  background:
    rgba(255,255,255,.72);

  border-radius:999px;

  pointer-events:none;
}


/* =========================
   SEGMENT TITLE
========================= */

.homeSegmentItem span:not(.homeSegmentDoneRibbon){
  width:100%;
  min-width:0;

  min-height:
    clamp(
      48px,
      calc(var(--home-segment-h) * .48),
      66px
    );

  display:flex;
  align-items:center;
  justify-content:center;

  padding:
    clamp(
      5px,
      .7vmin,
      8px
    )
    clamp(
      10px,
      1.3vmin,
      14px
    );

  color:#FFFFFF;

  font-family:
    "HanakaDisplay",
    "HanakaText",
    sans-serif;

  font-size:
    clamp(
      1.45rem,
      calc(.72rem + 1.9vmin),
      2.45rem
    );

  line-height:1.06;
  font-weight:400;

  text-align:center;

  white-space:normal;

  overflow:hidden;
  text-overflow:clip;

  word-break:normal;
  overflow-wrap:break-word;

  text-shadow:
    0 2px 0 rgba(35,61,77,.14),
    0 6px 14px rgba(35,61,77,.18);
}


/* =========================
   WINNER
========================= */

.homeSegmentWinner{
  max-width:92%;

  min-height:
    clamp(
      28px,
      calc(var(--app-height) * .045),
      34px
    );

  display:flex;
  align-items:center;
  justify-content:center;

  padding:
    clamp(
      4px,
      .55vmin,
      6px
    )
    clamp(
      12px,
      1.5vmin,
      16px
    );

  background:
    rgba(255,255,255,.92);

  border:
    1px solid
    rgba(255,255,255,.95);

  border-radius:999px;

  color:var(--secondary);

  font-family:
    "HanakaText",
    sans-serif;

  font-size:
    clamp(
      .78rem,
      calc(.5rem + .55vmin),
      .9rem
    );

  line-height:1.15;
  font-weight:400;

  white-space:normal;

  overflow:hidden;
  text-overflow:clip;
  overflow-wrap:break-word;

  box-shadow:
    0 6px 14px rgba(35,61,77,.10);
}

.homeSegmentWinner:empty{
  display:none;
}


/* =========================
   HOVER
========================= */

.homeSegmentItem:hover{
  transform:
    translateY(
      clamp(
        -4px,
        -.55vmin,
        -2px
      )
    )
    scale(1.012);

  border-color:#FFFFFF;

  filter:
    brightness(1.025);

  box-shadow:
    0 20px 38px rgba(35,61,77,.17),
    0 6px 16px rgba(254,127,45,.22);
}

.homeSegmentItem:hover::before{
  border-color:
    rgba(35,61,77,.68);
}

.homeSegmentItem:active{
  transform:
    scale(.985);
}


/* =========================
   ACCENT ANIMATION
========================= */

@keyframes homeSegmentAccent{

  0%,
  100%{
    width:
      clamp(
        44px,
        5.5vmin,
        62px
      );

    opacity:.72;
  }

  50%{
    width:
      clamp(
        62px,
        7.5vmin,
        84px
      );

    opacity:1;
  }
}


/* =========================================================
   11.3) LOCKED / DONE SEGMENTS
   ORDERED FINISHED CARD
========================================================= */

.homeSegmentItem.segmentLocked,
.homeSegmentItem.segmentDone,
.homeSegmentItem.hasWinner{
  pointer-events:none;
  cursor:not-allowed;

  background:
    linear-gradient(
      145deg,
      #5F6D74 0%,
      #536168 52%,
      #46545B 100%
    );

  border-color:
    rgba(255,255,255,.86);

  transform:none;
  filter:none;

  box-shadow:
    0 14px 30px rgba(35,61,77,.14),
    0 4px 10px rgba(35,61,77,.10);
}

.homeSegmentItem.segmentLocked::before,
.homeSegmentItem.segmentDone::before,
.homeSegmentItem.hasWinner::before{
  border-color:
    rgba(255,255,255,.28);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,0)
    );
}

.homeSegmentItem.segmentLocked::after,
.homeSegmentItem.segmentDone::after,
.homeSegmentItem.hasWinner::after{
  content:none;
  display:none;
}


/* =========================
   DONE CORNER TAG
========================= */

.homeSegmentDoneRibbon{
  position:absolute;

  top:0;
  left:0;

  z-index:20;

  width:auto;
  max-width:none;

  min-width:
    clamp(
      78px,
      calc(var(--home-segment-h) * .70),
      102px
    );

  height:
    clamp(
      28px,
      calc(var(--home-segment-h) * .245),
      36px
    );

  min-height:0;

  margin:0;

  padding:
    0
    clamp(
      13px,
      1.5vmin,
      18px
    );

  display:none;

  align-items:center;
  justify-content:center;

  background:
    linear-gradient(
      145deg,
      #7F0000 0%,
      #720000 52%,
      #650000 100%
    );

  border:
    1px solid
    rgba(255,255,255,.88);

  border-top:0;
  border-left:0;

  border-radius:
    calc(var(--radius-xl) - 2px)
    0
    clamp(16px,2vmin,21px)
    0;

  color:#FFFFFF;

  font-family:
    "HanakaText",
    sans-serif;

  font-size:
    clamp(
      .98rem,
      calc(var(--home-segment-h) * .062),
      .92rem
    );

  line-height:1;
  font-weight:400;

  text-align:center;
  white-space:nowrap;

  overflow:visible;

  box-shadow:
    4px 5px 12px
    rgba(35,61,77,.18);

  transform:none;

  pointer-events:none;
}


/* =========================
   CORNER DETAIL
========================= */

.homeSegmentDoneRibbon::before{
  content:"";

  position:absolute;

  right:-1px;
  bottom:-1px;

  width:
    clamp(
      15px,
      1.8vmin,
      20px
    );

  height:
    clamp(
      15px,
      1.8vmin,
      20px
    );

  border-right:
    2px solid
    rgba(255,255,255,.24);

  border-bottom:
    2px solid
    rgba(255,255,255,.24);

  border-radius:
    0
    0
    14px
    0;

  pointer-events:none;
}

.homeSegmentDoneRibbon::after{
  content:"";

  position:absolute;

  left:
    clamp(
      12px,
      1.4vmin,
      16px
    );

  right:
    clamp(
      12px,
      1.4vmin,
      16px
    );

  bottom:3px;

  height:1px;

  background:
    rgba(255,255,255,.22);

  pointer-events:none;
}


/* =========================
   SHOW DONE TAG
========================= */

.homeSegmentItem.segmentLocked .homeSegmentDoneRibbon,
.homeSegmentItem.segmentDone .homeSegmentDoneRibbon,
.homeSegmentItem.hasWinner .homeSegmentDoneRibbon{
  display:flex;
}


/* =========================
   FINISHED CONTENT
========================= */

.homeSegmentItem.segmentLocked .homeSegmentContent,
.homeSegmentItem.segmentDone .homeSegmentContent,
.homeSegmentItem.hasWinner .homeSegmentContent{
  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:
    clamp(
      12px,
      1.8vmin,
      20px
    );

  padding:
    clamp(
      14px,
      calc(var(--home-segment-h) * .12),
      18px
    )
    clamp(
      16px,
      calc(var(--home-segment-h) * .14),
      22px
    )
    clamp(
      12px,
      calc(var(--home-segment-h) * .10),
      16px
    );

  text-align:center;

  overflow:hidden;
}

.homeSegmentItem.segmentLocked .homeSegmentContent::before,
.homeSegmentItem.segmentDone .homeSegmentContent::before,
.homeSegmentItem.hasWinner .homeSegmentContent::before{
  content:none;
  display:none;
}


/* =========================
   FINISHED TITLE
========================= */

.homeSegmentItem.segmentLocked .homeSegmentContent > span:not(.homeSegmentDoneRibbon),
.homeSegmentItem.segmentDone .homeSegmentContent > span:not(.homeSegmentDoneRibbon),
.homeSegmentItem.hasWinner .homeSegmentContent > span:not(.homeSegmentDoneRibbon){
  width:100%;
  max-width:92%;

  min-width:0;

  min-height:
    clamp(
      42px,
      calc(var(--home-segment-h) * .30),
      54px
    );

  height:auto;

  margin:0;

  padding:
    clamp(
      3px,
      .4vmin,
      5px
    )
    0
    clamp(
      5px,
      .6vmin,
      7px
    );

  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 1 auto;

  color:#FFFFFF;

  font-family:
    "HanakaDisplay",
    "HanakaText",
    sans-serif;

  font-size:
    clamp(
      1.5rem,
      calc(var(--home-segment-h) * .21),
      2.45rem
    );

  line-height:1.18;
  font-weight:400;

  text-align:center;

  white-space:normal;

  overflow:visible;
  text-overflow:clip;

  word-break:normal;
  overflow-wrap:break-word;

  opacity:1;

  text-shadow:
    0 2px 2px rgba(0,0,0,.22),
    0 6px 14px rgba(20,30,36,.28);
}


/* =========================
   FINISHED WINNER
========================= */

.homeSegmentItem.segmentLocked .homeSegmentWinner,
.homeSegmentItem.segmentDone .homeSegmentWinner,
.homeSegmentItem.hasWinner .homeSegmentWinner{
  position:relative;

  left:auto;
  right:auto;
  bottom:auto;

  transform:none;

  width:auto;
  max-width:88%;

  min-width:
    clamp(
      105px,
      calc(var(--home-segment-h) * .92),
      145px
    );

  min-height:
    clamp(
      34px,
      calc(var(--home-segment-h) * .27),
      42px
    );

  margin:0;

  padding:
    clamp(
      4px,
      .5vmin,
      6px
    )
    clamp(
      15px,
      1.8vmin,
      21px
    )
    clamp(
      5px,
      .6vmin,
      7px
    );

  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;

  background:
    rgba(255,255,255,.96);

  border:
    1px solid
    rgba(255,255,255,.90);

  border-radius:999px;

  color:var(--secondary);

  font-family:
    "HanakaText",
    sans-serif;

  font-size:
    clamp(
      .9rem,
      calc(var(--home-segment-h) * .086),
      1.08rem
    );

  line-height:1.2;
  font-weight:400;

  text-align:center;

  white-space:nowrap;

  overflow:hidden;
  text-overflow:ellipsis;

  box-shadow:
    0 5px 12px rgba(20,30,36,.14);

  opacity:1;
  filter:none;

  pointer-events:none;
}

.homeSegmentItem.segmentLocked .homeSegmentWinner:empty,
.homeSegmentItem.segmentDone .homeSegmentWinner:empty,
.homeSegmentItem.hasWinner .homeSegmentWinner:empty{
  display:none;
}


/* =========================
   FINISHED HOVER
========================= */

.homeSegmentItem.segmentLocked:hover,
.homeSegmentItem.segmentDone:hover,
.homeSegmentItem.hasWinner:hover{
  transform:none;
  filter:none;

  box-shadow:
    0 14px 30px rgba(35,61,77,.14),
    0 4px 10px rgba(35,61,77,.10);
}
/* =========================================================
   12) WINNER BUTTON
========================================================= */

.homeWinnerArea{
  width:min(
    100%,
    var(--home-max)
  );

  min-width:0;

  margin:0 auto;

  display:flex;
  align-items:center;
  justify-content:center;
}

.homeWinnerBtn,
.winnerBtn{
  min-width:
    clamp(
      180px,
      calc(var(--app-width) * .20),
      220px
    );

  min-height:
    var(--control-h);

  background:
    var(--primary);

  font-family:
    "HanakaDisplay",
    "HanakaText",
    sans-serif;

  font-size:
    clamp(
      1.05rem,
      calc(.62rem + 1.1vmin),
      1.28rem
    );

  line-height:1;
  font-weight:400;

  box-shadow:
    0 16px 34px
    rgba(254,127,45,.20),
    0 0 0 5px
    rgba(254,127,45,.10);
}

/* =========================================================
   13) SEGMENT AREA
========================================================= */

#segmentArea{
  display:none;

  width:100%;
  height:var(--app-height);

  min-width:0;
  min-height:0;

  max-width:100%;
  max-height:var(--app-height);

  overflow:hidden;

  background:transparent;
}

.segmentMode #segmentArea{
  display:block;
}

.segmentMode .homeShowPage,
.segmentMode #homePage{
  display:none;
}

.segmentContentWrap{
  width:100%;
  height:100%;

  min-width:0;
  min-height:0;

  max-width:100%;
  max-height:100%;

  margin:0;
  padding:0;

  overflow:hidden;
}

#segmentScreen{
  width:100%;
  height:100%;

  min-width:0;
  min-height:0;

  max-width:100%;
  max-height:100%;

  overflow:hidden;

  background:transparent;
}

/* =========================================================
   14) TOAST
========================================================= */

.gameToast{
  position:fixed;

  top:calc(14px + var(--safe-top));
  left:50%;

  z-index:1000000;

  width:auto;
  min-width:260px;
  max-width:min(92vw,500px);
  min-height:54px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  padding:10px 16px;

  background:var(--secondary);
  border:2px solid rgba(255,255,255,.42);
  border-radius:18px;

  color:#fff;

  box-shadow:
    0 18px 44px rgba(35,61,77,.24),
    0 0 0 5px rgba(254,127,45,.10);

  opacity:0;
  pointer-events:none;

  transform:
    translateX(-50%)
    translateY(-18px)
    scale(.96);

  transition:
    opacity .22s ease,
    transform .22s var(--ease);
}

.gameToast.hidden{
  display:none;
}

.gameToast.show{
  opacity:1;
  pointer-events:auto;

  transform:
    translateX(-50%)
    translateY(0)
    scale(1);
}

.gameToastIcon{
  width:30px;
  min-width:30px;
  height:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--primary);
  border-radius:11px;

  color:#fff;

  font-family:Arial,sans-serif;
  font-size:.95rem;
  line-height:1;
  font-weight:900;
}

.gameToastText{
  min-width:0;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;

  font-size:.92rem;
  line-height:1.25;
  font-weight:900;

  text-align:center;
  overflow:hidden;
}


/* =========================================================
   15) DISPLAY PRO OVERLAY
========================================================= */

.displayProLayer{
  position:fixed;
  inset:0;

  z-index:999999;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:22px;

  background:rgba(21,21,21,.32);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  pointer-events:none;
}

.displayProLayer.hidden{
  display:none;
}

.displayProCard{
  min-width:min(620px,86vw);
  max-width:min(860px,90vw);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:14px;

  padding:34px 42px;

  background:var(--surface);
  border:2px solid var(--line);
  border-radius:32px;

  box-shadow:var(--shadow-strong);

  text-align:center;

  animation:
    displayProPop
    .3s
    var(--ease)
    both;
}

.displayProEyebrow{
  color:var(--muted);

  font-size:1rem;
  line-height:1;
  font-weight:900;
}

.displayProTitle{
  color:var(--secondary);

  font-family:"HanakaDisplay","HanakaText",sans-serif;
  font-size:4.4rem;
  line-height:1;
  font-weight:400;
}

.displayProSubtitle{
  color:var(--text);

  font-size:1.15rem;
  line-height:1.2;
  font-weight:900;
}

.displayProLayer.correct .displayProTitle{
  color:var(--btn-correct);
}

.displayProLayer.wrong .displayProTitle{
  color:var(--btn-wrong);
}

.displayProLayer.winner .displayProTitle,
.displayProLayer.segment .displayProTitle{
  color:var(--primary);
}

.displayProLayerHide{
  animation:
    displayProFadeOut
    .22s
    ease
    forwards;
}

@keyframes displayProPop{

  from{
    opacity:0;
    transform:translateY(20px) scale(.92);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }

}

@keyframes displayProFadeOut{

  to{
    opacity:0;
  }

}


/* =========================================================
   16) FLOATING BADGES
========================================================= */

.displayCurrentTurnBadge,
.displayLastScoreUpdate{
  position:fixed;

  left:50%;
  z-index:999998;

  min-width:280px;
  max-width:80vw;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:12px;

  padding:12px 20px;

  background:var(--surface);
  border:2px solid var(--line);
  border-radius:999px;

  box-shadow:var(--shadow-card);

  transform:translateX(-50%);
}

.displayCurrentTurnBadge{
  top:calc(14px + var(--safe-top));

  animation:
    displayBadgeInTop
    .22s
    var(--ease)
    both;
}

.displayLastScoreUpdate{
  bottom:calc(18px + var(--safe-bottom));

  animation:
    displayBadgeInBottom
    .22s
    var(--ease)
    both;
}

.displayCurrentTurnBadge::before{
  content:"";

  width:12px;
  height:12px;
  min-width:12px;

  border-radius:50%;

  background:var(--primary);

  box-shadow:
    0 0 0 5px rgba(254,127,45,.14);
}

.displayLastScoreUpdate::before{
  content:"+";

  width:30px;
  height:30px;
  min-width:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--btn-correct);
  border-radius:50%;

  color:#fff;

  font-size:1rem;
  font-weight:900;
}

.displayCurrentTurnBadge span,
.displayLastScoreUpdate span{
  color:var(--muted);

  font-size:.85rem;
  line-height:1;
  font-weight:900;
}

.displayCurrentTurnBadge strong{
  color:var(--secondary);

  font-size:1.1rem;
  line-height:1;
  font-weight:900;
}

.displayLastScoreUpdate strong{
  color:var(--btn-correct);

  font-size:1.1rem;
  line-height:1;
  font-weight:900;
}

.displayCurrentTurnBadge.hide{
  animation:
    displayBadgeOutTop
    .2s
    ease
    forwards;
}

.displayLastScoreUpdate.hide{
  animation:
    displayBadgeOutBottom
    .2s
    ease
    forwards;
}

@keyframes displayBadgeInTop{

  from{
    opacity:0;

    transform:
      translateX(-50%)
      translateY(-14px)
      scale(.96);
  }

  to{
    opacity:1;

    transform:
      translateX(-50%)
      translateY(0)
      scale(1);
  }

}

@keyframes displayBadgeOutTop{

  to{
    opacity:0;

    transform:
      translateX(-50%)
      translateY(-14px)
      scale(.96);
  }

}

@keyframes displayBadgeInBottom{

  from{
    opacity:0;

    transform:
      translateX(-50%)
      translateY(14px)
      scale(.96);
  }

  to{
    opacity:1;

    transform:
      translateX(-50%)
      translateY(0)
      scale(1);
  }

}

@keyframes displayBadgeOutBottom{

  to{
    opacity:0;

    transform:
      translateX(-50%)
      translateY(14px)
      scale(.96);
  }

}


/* =========================================================
   17) WINNER OVERLAY
========================================================= */

#winnerOverlay{
  position:fixed;
  inset:0;

  z-index:999997;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:22px;

  background:rgba(21,21,21,.36);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

#winnerOverlay.hidden{
  display:none;
}

#winnerOverlayCard{
  width:min(100%,560px);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:34px 28px 24px;

  background:var(--surface);
  border:2px solid var(--line);
  border-radius:34px;

  box-shadow:var(--shadow-strong);

  text-align:center;

  animation:
    winnerOverlayIn
    .36s
    var(--ease)
    both;
}

#winnerOverlayTitle{
  min-height:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0 22px;

  background:var(--soft);
  border:2px solid var(--line);
  border-radius:999px;

  color:var(--muted);

  font-size:.92rem;
  line-height:1;
  font-weight:900;
}

#winnerOverlayName{
  margin:18px 0 0;

  color:var(--secondary);

  font-size:clamp(3.2rem,6vw,5.4rem);
  line-height:1;
  font-weight:400;

  animation:
    winnerNamePulse
    1.4s
    ease-in-out
    infinite;
}

#winnerOverlayBurst{
  margin:16px 0 22px;

  color:var(--primary);

  font-size:1.4rem;
  letter-spacing:8px;
}

.winnerOverlayActions{
  width:100%;

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:12px;
}

#winnerOverlayClose{
  background:var(--btn-nav);
}

#winnerOverlayEnd{
  background:var(--btn-danger);
}

@keyframes winnerOverlayIn{

  from{
    opacity:0;
    transform:translateY(22px) scale(.92);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }

}

@keyframes winnerNamePulse{

  0%,
  100%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.06);
  }

}


/* =========================================================
   18) LOADING
========================================================= */

.displayLoadingLayer{
  position:fixed;
  inset:0;

  z-index:999995;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(21,21,21,.22);

  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);

  pointer-events:none;
}

.displayLoadingLayer.hidden{
  display:none;
}


/* =========================================================
   19) SCREEN FLASH
========================================================= */

.screenFlashLayer{
  position:fixed;
  inset:0;

  z-index:1000005;

  width:100vw;
  height:var(--app-height,100dvh);

  opacity:0;
  pointer-events:none;
}

.screenFlashLayer.flashCorrect,
.screenFlashLayer.flashCorrectPro{
  background:rgba(0,127,0,.72);

  animation:
    screenFlashPulse
    .78s
    ease-out
    forwards;
}

.screenFlashLayer.flashWrong,
.screenFlashLayer.flashWrongStrong,
.screenFlashLayer.flashWrongPro{
  background:rgba(127,0,0,.78);

  animation:
    screenFlashPulse
    .78s
    ease-out
    forwards;
}

.screenFlashLayer.flashTimeoutPro{
  background:rgba(254,127,45,.76);

  animation:
    screenFlashPulse
    .82s
    ease-out
    forwards;
}

@keyframes screenFlashPulse{

  0%{
    opacity:0;
    transform:scale(.98);
  }

  12%{
    opacity:1;
    transform:scale(1.02);
  }

  36%{
    opacity:.35;
    transform:scale(.995);
  }

  58%{
    opacity:.75;
    transform:scale(1.015);
  }

  100%{
    opacity:0;
    transform:scale(1.04);
  }

}


/* =========================================================
   20) WRONG COUNT SCREEN FX
========================================================= */

.screenWrongCountFx{
  position:fixed;
  inset:0;

  z-index:999999;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:clamp(14px,2.2vw,30px);

  pointer-events:none;

  opacity:0;
  visibility:hidden;
}

.screenWrongCountFx span{
  width:clamp(110px,15vw,220px);
  height:clamp(110px,15vw,220px);

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:32px;

  background:rgba(127,0,0,.94);
  color:#FFFFFF;

  border:5px solid rgba(255,255,255,.92);

  box-shadow:
    0 18px 60px rgba(127,0,0,.42),
    0 0 0 10px rgba(127,0,0,.14);

  font-family:"HanakaDisplay","HanakaText",sans-serif;
  font-size:clamp(6rem,12vw,12rem);
  font-weight:400;
  line-height:1;
}

.screenWrongCountFx.isVisible{
  visibility:visible;

  animation:
    screenWrongCountShow
    .9s
    ease
    both;
}

.screenWrongCountFx.isVisible span{
  animation:
    screenWrongCountMark
    .55s
    cubic-bezier(.2,.9,.25,1.2)
    both;
}

.screenWrongCountFx.isVisible span:nth-child(2){
  animation-delay:.06s;
}

.screenWrongCountFx.isVisible span:nth-child(3){
  animation-delay:.12s;
}

@keyframes screenWrongCountShow{

  0%{
    opacity:0;
  }

  15%{
    opacity:1;
  }

  72%{
    opacity:1;
  }

  100%{
    opacity:0;
  }

}

@keyframes screenWrongCountMark{

  0%{
    opacity:0;
    transform:scale(.35) rotate(-12deg);
  }

  65%{
    opacity:1;
    transform:scale(1.1) rotate(3deg);
  }

  100%{
    opacity:1;
    transform:scale(1) rotate(0);
  }

}


/* =========================================================
   21) TIMER FX
========================================================= */

.timerDanger{
  animation:
    timerDangerPulse
    .55s
    ease-in-out
    infinite;

  color:var(--btn-wrong) !important;
}

.timerTimeoutFx{
  animation:
    timerTimeoutShake
    .65s
    ease
    both;

  color:var(--primary) !important;
}

@keyframes timerDangerPulse{

  0%,
  100%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.08);
  }

}

@keyframes timerTimeoutShake{

  0%,
  100%{
    transform:translateX(0) scale(1);
  }

  20%{
    transform:translateX(-10px) scale(1.08);
  }

  40%{
    transform:translateX(10px) scale(1.08);
  }

  60%{
    transform:translateX(-6px) scale(1.04);
  }

  80%{
    transform:translateX(6px) scale(1.04);
  }

}


/* =========================================================
   22) MEDIA + ZOOM
========================================================= */

img,
video,
.displayUnifiedMedia,
.displayImagePro{
  max-width:100%;
  max-height:100%;

  object-fit:contain;
}

.displayImagePreparing{
  opacity:.55;
  filter:blur(4px);
}

.displayMediaLoaded,
.displayMediaRevealFx{
  animation:
    displayMediaLoaded
    .28s
    ease
    both;
}

.displayUnifiedMediaFrame{
  overflow:hidden;
}

@keyframes displayMediaLoaded{

  from{
    opacity:0;
    filter:blur(8px);
    transform:scale(1.015);
  }

  to{
    opacity:1;
    filter:blur(0);
    transform:scale(1);
  }

}

.displayImageZoomOverlay{
  position:fixed;
  inset:0;

  z-index:999995;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:22px;

  background:rgba(21,21,21,.68);

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  cursor:zoom-out;
}

.displayImageZoomInner{
  width:min(1180px,100%);
  max-height:92vh;

  display:flex;
  align-items:center;
  justify-content:center;
}

.displayImageZoomImg{
  max-width:100%;
  max-height:90vh;

  object-fit:contain;

  background:#fff;
  border-radius:24px;

  box-shadow:var(--shadow-strong);
}

.displayMediaErrorBox{
  width:100%;
  height:100%;
  min-height:220px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--soft);
  border:2px solid var(--line);
  border-radius:inherit;

  overflow:hidden;
}

.displayMediaFallback{
  width:100%;
  min-height:220px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:12px;

  padding:22px;

  color:var(--secondary);
  text-align:center;
}

.displayMediaFallbackIcon{
  width:64px;
  height:64px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--btn-wrong);
  border-radius:20px;

  color:#fff;

  font-size:1.8rem;
  font-weight:900;
}

.displayMediaFallbackTitle{
  font-size:1.25rem;
  font-weight:900;
}

.displayMediaFallbackText{
  color:var(--muted);

  font-size:.92rem;
  font-weight:900;
}


/* =========================================================
   23) WINNER CONFETTI
========================================================= */

.winnerConfettiLayer{
  position:fixed;
  inset:0;

  z-index:1000002;

  pointer-events:none;
  overflow:hidden;
}

.winnerConfettiPiece{
  position:absolute;
  display:block;

  opacity:.95;

  animation:
    winnerConfettiFall
    linear
    forwards;
}

@keyframes winnerConfettiFall{

  0%{
    opacity:0;

    transform:
      translate3d(0,-20px,0)
      rotate(0deg);
  }

  12%{
    opacity:1;
  }

  100%{
    opacity:0;

    transform:
      translate3d(
        var(--confetti-drift,0px),
        calc(var(--app-height) + 90px),
        0
      )
      rotate(var(--confetti-rotate,540deg));
  }

}

.winnerAnnounceFx{
  animation:
    winnerAnnouncePulse
    .78s
    ease
    both;
}

.winnerFlash{
  animation:
    winnerHomeFlash
    .8s
    ease
    both;
}

.winnerOverlayFx{
  animation:
    winnerOverlayFlash
    .68s
    ease
    both;
}

.winnerNameFx{
  animation:
    winnerNamePop
    .8s
    var(--ease)
    both;
}

@keyframes winnerAnnouncePulse{

  0%,
  100%{
    transform:scale(1);
  }

  45%{
    transform:scale(1.06);
  }

}

@keyframes winnerHomeFlash{

  0%,
  100%{
    filter:brightness(1);
  }

  45%{
    filter:brightness(1.05);
  }

}

@keyframes winnerOverlayFlash{

  0%,
  100%{
    filter:brightness(1);
  }

  45%{
    filter:brightness(1.08);
  }

}

@keyframes winnerNamePop{

  0%{
    transform:scale(.94);
  }

  45%{
    transform:scale(1.08);
  }

  100%{
    transform:scale(1);
  }

}


/* =========================================================
   24) FULL SCREEN MODE
========================================================= */

html.tvFullScreenMode,
body.tvFullScreenMode{
  width:100vw;
  height:var(--app-height);
  min-height:var(--app-height);

  overflow:hidden;
}

body.tvFullScreenMode::before,
body.tvFullScreenMode::after{
  position:fixed;
}

body.tvFullScreenMode .homeShowPage,
body.tvFullScreenMode #homePage,
body.tvFullScreenMode #segmentArea,
body.tvFullScreenMode #segmentScreen,
body.tvFullScreenMode .segmentContentWrap{
  width:100vw;

  height:var(--app-height);
  min-height:var(--app-height);
  max-height:var(--app-height);

  overflow:hidden;
}

body.tvFullScreenMode .homeShowPage{
  padding:
    var(--page-pad-top)
    var(--page-pad-right)
    var(--page-pad-bottom)
    var(--page-pad-left);
}


/* =========================================================
   25) SEGMENT START LOTTERY
========================================================= */

.segmentStartLotteryOverlay{
  position:fixed;
  inset:0;

  z-index:9997;

  width:100vw;
  height:var(--app-height,100dvh);

  padding:24px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(15,23,42,.58);

  animation:
    segmentStartLotteryOverlayIn
    .22s
    ease
    both;
}

.segmentStartLotteryCard{
  width:min(92vw,780px);
  min-height:460px;

  padding:28px;

  border-radius:28px;
  border:2px solid #D5DADF;

  background:#FFFFFF;
  color:#151515;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:18px;

  text-align:center;

  box-shadow:
    0 26px 80px rgba(15,23,42,.22);

  animation:
    segmentStartLotteryCardIn
    .32s
    ease
    both;
}

.segmentStartLotteryTop{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:10px;
  flex-wrap:wrap;
}

.segmentStartLotteryTop span,
.segmentStartLotteryTop b{
  min-height:34px;

  padding:7px 16px;

  border-radius:999px;
  border:1px solid #D5DADF;

  background:#F6F7F9;
  color:#233D4D;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size:16px;
  line-height:1;
  font-weight:400;
}

.segmentStartLotteryTop span{
  background:#FE7F2D;
  border-color:#FE7F2D;
  color:#FFFFFF;
}

.segmentStartLotteryTimer{
  width:92px;
  height:92px;

  border-radius:26px;
  border:2px solid #D5DADF;

  background:#F6F7F9;
  color:#233D4D;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:44px;
  line-height:1;
  font-weight:700;
}

.segmentStartLotteryTeams{
  width:100%;

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:14px;
}

.segmentStartLotteryTeam{
  min-height:132px;

  padding:20px;

  border-radius:24px;
  border:2px solid #D5DADF;

  background:#F6F7F9;
  color:#151515;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  transform:scale(1);

  transition:
    transform .14s ease,
    border-color .14s ease,
    background .14s ease;
}

.segmentStartLotteryTeam strong{
  max-width:100%;

  font-size:42px;
  line-height:1.15;
  color:#151515;
  font-weight:400;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.segmentStartLotteryTeam.active{
  transform:scale(1.035);

  border-color:#FE7F2D;
  background:#FFF7ED;
}

.segmentStartLotteryTeam.selected{
  transform:scale(1.04);

  border-color:#0A7C6E;
  background:#ECFDF5;
}

.segmentStartLotteryResult{
  min-height:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:22px;
  line-height:1.3;
  color:#233D4D;
  font-weight:400;
}

.segmentStartLotteryActions{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:12px;
  flex-wrap:wrap;
}

.segmentStartLotteryBtn{
  min-width:150px;
  min-height:54px;

  padding:12px 18px;

  border:0;
  border-radius:18px;

  background:#233D4D;
  color:#FFFFFF;

  font-family:"HanakaText",sans-serif;
  font-size:18px;
  line-height:1;
  font-weight:400;

  cursor:pointer;
}

.segmentStartLotteryBtn.primary{
  background:#FE7F2D;
}

.segmentStartLotteryBtn.start{
  background:#0A7C6E;
}

@keyframes segmentStartLotteryOverlayIn{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }

}

@keyframes segmentStartLotteryCardIn{

  from{
    opacity:0;
    transform:translateY(18px) scale(.96);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }

}


/* =========================================================
   26) SEGMENT END OVERLAY
========================================================= */

.segmentEndOverlay{
  position:fixed;
  inset:0;

  z-index:9998;

  width:100vw;
  height:var(--app-height,100dvh);

  display:flex;
  align-items:center;
  justify-content:center;

  padding:24px;

  background:rgba(15,23,42,.58);

  animation:
    segmentEndOverlayIn
    .22s
    ease
    both;
}

.segmentEndCard{
  width:min(92vw,760px);
  min-height:430px;

  padding:28px;

  border-radius:28px;
  border:2px solid #D5DADF;

  background:#FFFFFF;
  color:#151515;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:18px;

  text-align:center;
  overflow:hidden;

  box-shadow:
    0 26px 80px rgba(15,23,42,.22);

  animation:
    segmentEndCardIn
    .32s
    ease
    both;
}

.segmentEndHeader{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:10px;
}

.segmentEndBadge,
.segmentEndMiniTitle{
  min-height:34px;

  padding:7px 16px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  border:1px solid #D5DADF;

  background:#F6F7F9;
  color:#233D4D;

  font-size:16px;
  line-height:1;
  font-weight:400;
}

.segmentEndBadge{
  background:#FE7F2D;
  border-color:#FE7F2D;
  color:#FFFFFF;
}

.segmentEndSegmentName{
  width:100%;

  font-size:42px;
  line-height:1.15;
  font-weight:400;

  color:#233D4D;
}

.segmentEndWinnerBox{
  width:min(100%,520px);
  min-height:104px;

  padding:16px 20px;

  border-radius:24px;
  border:2px solid #FE7F2D;

  background:#FFF7ED;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:8px;
}

.segmentEndWinnerBox span{
  font-size:18px;
  line-height:1;
  color:#8793A0;
  font-weight:400;
}

.segmentEndWinnerBox strong{
  max-width:100%;

  font-size:34px;
  line-height:1.15;
  color:#151515;
  font-weight:400;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.segmentEndTie .segmentEndWinnerBox{
  border-color:#233D4D;
  background:#F6F7F9;
}

.segmentEndScoreBoard{
  width:100%;

  display:grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items:stretch;

  gap:14px;
}

.segmentEndTeamScore{
  min-height:96px;

  padding:16px;

  border-radius:22px;
  border:2px solid #D5DADF;

  background:#F6F7F9;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:14px;
}

.segmentEndTeamScore span{
  min-width:0;

  font-size:22px;
  line-height:1.2;
  color:#233D4D;
  font-weight:400;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.segmentEndTeamScore b{
  width:62px;
  height:62px;

  border-radius:18px;

  background:#FFFFFF;
  color:#151515;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:34px;
  line-height:1;
  font-weight:700;

  border:1px solid #D5DADF;
}

.segmentEndTeamScore.teamA{
  border-color:#FE7F2D;
}

.segmentEndTeamScore.teamB{
  border-color:#233D4D;
}

.segmentEndVs{
  width:62px;
  min-height:96px;

  border-radius:20px;

  background:#233D4D;
  color:#FFFFFF;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:20px;
  line-height:1;
  font-weight:400;
}

.segmentEndHint{
  font-size:17px;
  line-height:1.4;
  color:#8793A0;
  font-weight:400;
}

@keyframes segmentEndOverlayIn{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }

}

@keyframes segmentEndCardIn{

  from{
    opacity:0;
    transform:translateY(18px) scale(.96);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }

}


/* =========================================================
   27) REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }

}