/* =========================================================
   PROJECT RESPONSIVE
   GLOBAL SIZE + HEADER FOUNDATION
========================================================= */


/* =========================================================
   1) GLOBAL BOX MODEL
========================================================= */

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


/* =========================================================
   2) VIEWPORT VARIABLES
========================================================= */

:root{

  --ui-space-1:clamp(0.3125rem,.8vmin,0.75rem);
  --ui-space-2:clamp(0.5rem,1.35vmin,1.125rem);
  --ui-space-3:clamp(1rem,1.95vmin,1.5rem);
  --ui-radius-sm:0.8125rem;
  --ui-radius-md:1.0625rem;
  --ui-radius-lg:1.375rem;
  --ui-control-min:2.75rem;
  --ui-input-size:1rem;
  --ui-modal-gap:1rem;
  --visual-offset-top:0rem;
  --visual-offset-left:0rem;
  --app-width:100vw;
  --app-height:100dvh;

  --app-short-side:min(100vw,100dvh);
  --app-long-side:max(100vw,100dvh);


  /* SAFE AREA */

  --safe-top:
    env(safe-area-inset-top,0rem);

  --safe-right:
    env(safe-area-inset-right,0rem);

  --safe-bottom:
    env(safe-area-inset-bottom,0rem);

  --safe-left:
    env(safe-area-inset-left,0rem);


  /* GLOBAL SPACING */

  --screen-pad-x:
    clamp(
      0.375rem,
      1.15vmin,
      1.125rem
    );

  --screen-pad-top:var(--ui-space-3);

  --screen-pad-bottom:
    clamp(
      0.9375rem,
      1.8vmin,
      1.375rem
    );

  --screen-gap:var(--ui-space-1);

  --screen-content-gap:var(--ui-space-2);

  --screen-numbers-controls-gap:
    clamp(
      0.625rem,
      1.4vmin,
      1.125rem
    );

  --screen-radius:
    clamp(
      0.625rem,
      1.25vmin,
      1.375rem
    );


  /* =========================================================
     GLOBAL HEADER STRUCTURE
  ========================================================= */

  --screen-header-max-w:87.5rem;

  --screen-header-h:
    clamp(
      6.75rem,
      calc(var(--app-height) * .122),
      8.25rem
    );

  --screen-header-inner-h:
    calc(
      var(--screen-header-h) -
      calc(var(--screen-gap) * 2)
    );

  --screen-header-btn-w:
    clamp(
      4.75rem,
      calc(var(--app-width) * .066),
      6rem
    );

  --screen-header-btn-h:
    clamp(
      3.125rem,
      calc(var(--app-height) * .062),
      4rem
    );

  --screen-team-h:
    clamp(
      5.125rem,
      calc(var(--app-height) * .098),
      6.375rem
    );

  --screen-team-inner-h:
    clamp(
      4rem,
      calc(var(--app-height) * .075),
      4.875rem
    );

  --screen-header-content-gap:
    clamp(
      0.625rem,
      1.25vmin,
      1.125rem
    );

  --screen-header-row-h:
    calc(
      var(--screen-header-h) +
      var(--screen-header-content-gap)
    );


  /* =========================================================
     GLOBAL CONTENT STRUCTURE
  ========================================================= */

  --screen-question-h:
    clamp(
      6.875rem,
      calc(var(--app-height) * .20),
      11.875rem
    );

  --screen-controls-h:
    clamp(
      4rem,
      calc(var(--app-height) * .085),
      5.25rem
    );

  --screen-control-btn-h:
    clamp(
      3.125rem,
      calc(var(--app-height) * .065),
      3.75rem
    );

  --screen-card-head-h:
    clamp(
      3.625rem,
      calc(var(--app-height) * .11),
      6.875rem
    );

  --screen-timer-w:
    clamp(
      6.875rem,
      calc(var(--app-width) * .10),
      9.375rem
    );

  --screen-side-label-w:
    clamp(
      4.5rem,
      calc(var(--app-width) * .075),
      6.5625rem
    );

  --screen-score-w:
    clamp(
      3rem,
      calc(var(--app-width) * .045),
      3.875rem
    );

  --screen-power-size:
    clamp(
      2rem,
      4.2vmin,
      2.75rem
    );


  /* =========================================================
     GLOBAL TEAM HELP AREA
  ========================================================= */

  --screen-help-area-w:
    clamp(
      9.375rem,
      calc(var(--app-width) * .14),
      13.75rem
    );

  --screen-help-btn-size:
    var(--screen-power-size);

  --screen-help-gap:
    clamp(
      0.25rem,
      .5vmin,
      0.4375rem
    );

  --screen-help-pad:
    clamp(
      0.25rem,
      .5vmin,
      0.4375rem
    );

  --screen-help-radius:
    clamp(
      0.6875rem,
      1.15vmin,
      0.875rem
    );

  --screen-help-btn-radius:
    clamp(
      0.5rem,
      .9vmin,
      0.6875rem
    );


  /* =========================================================
     GLOBAL TYPOGRAPHY SCALE
  ========================================================= */

  --screen-title-size:
    clamp(
      1.2rem,
      calc(.75rem + 1.55vmin),
      2.2rem
    );

  --screen-team-size:
    clamp(
      1rem,
      calc(.68rem + 1.15vmin),
      1.68rem
    );

  --screen-question-size:
    clamp(
      .88rem,
      calc(.52rem + 1.65vmin),
      2rem
    );

  --screen-button-size:
    clamp(
      .875rem,
      calc(.48rem + .78vmin),
      1.04rem
    );

  --screen-small-size:
    clamp(
      .875rem,
      calc(.46rem + .6vmin),
      .94rem
    );

  --screen-help-text-size:
    clamp(
      .78rem,
      calc(.58rem + .45vmin),
      1.02rem
    );
}


/* Display-only rem scale follows usable screen dimensions, never page transforms. */
:root:has(#homePage){font-size:clamp(16px,calc(var(--app-short-side) / 67.5),32px);}

/* =========================================================
   3) DOCUMENT
========================================================= */

html{
  width:100%;
  height:100%;

  margin:0;
  padding:0;

  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  width:100%;
  min-height:var(--app-height,100dvh);

  min-width:0;

  margin:0;
  padding:0;

  overflow-x:hidden;
}


/* =========================================================
   9) GENERIC FLEX / GRID SAFETY
========================================================= */

main,
section,
article,
header,
footer,
nav,
aside,
div{
  min-width:0;
}

.grid,
[class*="Grid"],
[class*="grid"]{
  min-width:0;
}

.grid > *,
[class*="Grid"] > *,
[class*="grid"] > *{
  min-width:0;
  min-height:0;
}


/* =========================================================
   10) MEDIA SAFETY
========================================================= */

img,
video,
canvas,
svg{
  max-width:100%;
}

img,
video{
  display:block;
}

img,
video,
canvas{
  object-position:center;
}

video{
  max-height:100%;
}


/* =========================================================
   11) TEXT SAFETY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
button,
input,
textarea,
select{
  max-width:100%;
}

button,
input,
textarea,
select{
  min-width:0;
}


/* =========================================================
   12) CONTROL FOUNDATION
========================================================= */

button{
  min-width:0;

  touch-action:manipulation;
}


/* =========================================================
   13) OVERFLOW SAFETY
========================================================= */

#app,
.app,
.page,
.screen{
  max-width:100%;

  min-width:0;
}


/* =========================================================
   14) GLOBAL SEGMENT HEADER
========================================================= */

.segmentUnifiedHeader{
  width:min(
    100%,
    var(--screen-header-max-w)
  );

  height:var(--screen-header-h);

  min-width:0;
  min-height:var(--screen-header-h);

  max-width:var(--screen-header-max-w);
  max-height:var(--screen-header-h);

  margin:0 auto;

  padding:var(--screen-gap);

  gap:var(--screen-gap);

  background:var(--surface);

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

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

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

  overflow:hidden;
}

/* =========================================================
   HEADER NAV BUTTONS
   BACK / END
========================================================= */

:root{
  --header-back-bg:#365F73;
  --header-end-bg:#7F1D1D;
}


/* =========================
   BACK
========================= */

.segmentUnifiedHeader button[onclick*="goHome"]:not(:disabled),

.top10Header > .top10DockBtn:first-child:not(:disabled),

.whoHeader > .whoDockBtn:first-child:not(:disabled),

.explainHeader > .explainDockBtn:first-child:not(:disabled),

.familyDidiHeader > .familyDidiDockBtn:first-child:not(:disabled),

.randomChallengeWrap
.randomChallengeHomeHeader > .dockBtn:first-child:not(:disabled),

.randomChallengeWrap
.randomChallengeBoxHeader > .dockBtn:first-child:not(:disabled){
  background:
    var(--header-back-bg) !important;

  color:#FFFFFF !important;

  border-color:
    transparent !important;

  box-shadow:
    none !important;
}


/* =========================
   END
========================= */

.segmentUnifiedHeader
#endRoundBtn:not(:disabled),

.segmentUnifiedHeader
.finalEndBtn:not(:disabled),

.top10Header > .top10DockBtn:last-child:not(:disabled),

.whoHeader > .whoDockBtn:last-child:not(:disabled),

.explainHeader > .explainDockBtn:last-child:not(:disabled),

.familyDidiHeader > .familyDidiDockBtn:last-child:not(:disabled),

.randomChallengeWrap
.randomChallengeHomeHeader > .dockBtn:last-child:not(:disabled),

.randomChallengeWrap
.randomChallengeBoxHeader > .dockBtn:last-child:not(:disabled),

.dockBtn.danger:not(:disabled){
  background:
    var(--header-end-bg) !important;

  color:#FFFFFF !important;

  border-color:
    transparent !important;

  box-shadow:
    none !important;
}


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

:is(
  .segmentUnifiedHeader button[onclick*="goHome"],
  .top10Header > .top10DockBtn:first-child,
  .whoHeader > .whoDockBtn:first-child,
  .explainHeader > .explainDockBtn:first-child,
  .familyDidiHeader > .familyDidiDockBtn:first-child,
  .randomChallengeHomeHeader > .dockBtn:first-child,
  .randomChallengeBoxHeader > .dockBtn:first-child,
  .segmentUnifiedHeader #endRoundBtn,
  .segmentUnifiedHeader .finalEndBtn,
  .top10Header > .top10DockBtn:last-child,
  .whoHeader > .whoDockBtn:last-child,
  .explainHeader > .explainDockBtn:last-child,
  .familyDidiHeader > .familyDidiDockBtn:last-child,
  .randomChallengeHomeHeader > .dockBtn:last-child,
  .randomChallengeBoxHeader > .dockBtn:last-child,
  .dockBtn.danger
):hover:not(:disabled){
  filter:
    brightness(1.08) !important;

  transform:
    translateY(-1px) !important;
}


/* =========================
   PRESS
========================= */

:is(
  .segmentUnifiedHeader button[onclick*="goHome"],
  .top10Header > .top10DockBtn:first-child,
  .whoHeader > .whoDockBtn:first-child,
  .explainHeader > .explainDockBtn:first-child,
  .familyDidiHeader > .familyDidiDockBtn:first-child,
  .randomChallengeHomeHeader > .dockBtn:first-child,
  .randomChallengeBoxHeader > .dockBtn:first-child,
  .segmentUnifiedHeader #endRoundBtn,
  .segmentUnifiedHeader .finalEndBtn,
  .top10Header > .top10DockBtn:last-child,
  .whoHeader > .whoDockBtn:last-child,
  .explainHeader > .explainDockBtn:last-child,
  .familyDidiHeader > .familyDidiDockBtn:last-child,
  .randomChallengeHomeHeader > .dockBtn:last-child,
  .randomChallengeBoxHeader > .dockBtn:last-child,
  .dockBtn.danger
):active:not(:disabled){
  transform:
    scale(.97) !important;
}


/* =========================
   END DISABLED
   KEEP GRAY
========================= */

:is(
  #endRoundBtn,
  .finalEndBtn,
  .top10Header > .top10DockBtn:last-child,
  .whoHeader > .whoDockBtn:last-child,
  .explainHeader > .explainDockBtn:last-child,
  .familyDidiHeader > .familyDidiDockBtn:last-child,
  .randomChallengeHomeHeader > .dockBtn:last-child,
  .randomChallengeBoxHeader > .dockBtn:last-child,
  .dockBtn.danger
):disabled,

.dockBtn.disabledEndBtn{
  background:
    #B9C3C9 !important;

  color:
    #FFFFFF !important;

  opacity:1 !important;

  box-shadow:
    none !important;

  filter:none !important;

  transform:none !important;
}


/* =========================================================
   15) SEGMENT TITLE
========================================================= */

.segmentUnifiedHeader
.segmentTitlePlain{
  min-width:0;
  min-height:0;

  display:flex;

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

  overflow:visible;
}

.segmentUnifiedHeader
.segmentTitlePlain h1{
  width:100%;

  min-width:0;

  margin:0;

  color:var(--secondary);

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

  font-size:
    var(--screen-title-size) !important;

  line-height:1.05;

  font-weight:400;

  text-align:center;

  white-space:normal;

  overflow:visible;

  text-overflow:clip;

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

  text-shadow:
    0 1px 0
    rgba(255,255,255,.8);
}


/* =========================================================
   16) TEAM NAME TYPOGRAPHY
========================================================= */

:is(
  .teamNameBlock,
  .top10TeamName,
  .whoTeamName,
  .explainTeamName,
  .familyDidiTeamName,
  .finalScoreTeamNameBox,
  .randomSpeedTeamName,
  .archiveSideTeamName
){
  min-width:0;

  color:var(--secondary);

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

  font-size:
    var(--screen-team-size) !important;

  line-height:1.15;
  white-space:normal;
  overflow-wrap:anywhere;

  font-weight:400;

  text-align:center;
}

:is(
  .teamNameBlock,
  .top10TeamName,
  .whoTeamName,
  .explainTeamName,
  .familyDidiTeamName,
  .finalScoreTeamNameBox,
  .randomSpeedTeamName,
  .archiveSideTeamName
) strong,

:is(
  .teamNameBlock,
  .top10TeamName,
  .whoTeamName,
  .explainTeamName,
  .familyDidiTeamName,
  .finalScoreTeamNameBox,
  .randomSpeedTeamName,
  .archiveSideTeamName
) > b{
  max-width:100%;

  color:inherit;

  font-family:inherit;

  font-size:inherit !important;
  max-height:100%;

  line-height:inherit;

  font-weight:400 !important;

  text-align:center;


  overflow:auto;

  text-overflow:clip;

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


/* =========================================================
   17) ACTIVE TEAM
========================================================= */

.segmentUnifiedHeader
[class*="TeamCurrent"],

.segmentUnifiedHeader
[class*="ActiveTeam"],

.segmentUnifiedHeader
.finalTurnActiveTeam{
  border-color:
    var(--primary) !important;

  box-shadow:
    0 0 0 3px
    rgba(254,127,45,.18),
    0 7px 18px
    rgba(35,61,77,.07) !important;
}


/* =========================================================
   18) ACTIVE TEAM NAME
========================================================= */

.segmentUnifiedHeader
:is(
  [class*="TeamCurrent"],
  [class*="ActiveTeam"],
  .finalTurnActiveTeam
)
:is(
  .teamNameBlock,
  .top10TeamName,
  .whoTeamName,
  .explainTeamName,
  .familyDidiTeamName,
  .finalScoreTeamNameBox,
  .randomSpeedTeamName
),

.segmentUnifiedHeader
:is(
  [class*="TeamCurrent"],
  [class*="ActiveTeam"],
  .finalTurnActiveTeam
)
:is(
  .teamNameBlock,
  .top10TeamName,
  .whoTeamName,
  .explainTeamName,
  .familyDidiTeamName,
  .finalScoreTeamNameBox,
  .randomSpeedTeamName
){
  border-color:
    rgba(254,127,45,.55) !important;

  background:
    #FFF7ED !important;
}


/* =========================================================
   19) GLOBAL TEAM HELP / POWER AREA
========================================================= */

:is(
  .warmupTeamPowerBar,
  .top10TeamPowerBar,
  .whoTeamPowerBar,
  .explainTeamPowerBar,

  .finalTeamPowerBar,
  .finalRound1TeamPowerBar,
  .finalRound2TeamPowerBar,
  .finalRound3TeamPowerBar,
  .finalRound4TeamPowerBar,

  .randomBox5TeamPowerBar
){
  width:
    var(--screen-help-area-w) !important;

  min-width:
    var(--screen-help-area-w) !important;

  max-width:
    var(--screen-help-area-w) !important;

  height:
    var(--screen-team-inner-h) !important;

  min-height:
    var(--screen-team-inner-h) !important;

  max-height:
    var(--screen-team-inner-h) !important;

  margin:0 !important;

  padding:
    var(--screen-help-pad) !important;

  display:grid !important;

  grid-template-columns:
    none !important;

  grid-auto-flow:
    column !important;

  grid-auto-columns:
    minmax(
      0,
      1fr
    ) !important;

  align-items:stretch !important;
  justify-content:stretch !important;

  gap:
    var(--screen-help-gap) !important;

  background:
    var(--soft) !important;

  border:
    1px solid
    var(--line) !important;

  border-radius:
    var(--screen-help-radius) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.72);

  overflow:hidden;
}


/* =========================================================
   20) GLOBAL TEAM HELP BUTTON
========================================================= */

:is(
  .warmupTeamPowerBtn,
  .top10TeamPowerBtn,
  .whoTeamPowerBtn,
  .explainTeamPowerBtn,

  .finalTeamPowerBtn,
  .finalRound1TeamPowerBtn,
  .finalRound2TeamPowerBtn,
  .finalRound3TeamPowerBtn,
  .finalRound4TeamPowerBtn,

  .randomBox5TeamPowerBtn
){
  width:100% !important;
  height:100% !important;

  min-width:0 !important;
  min-height:0 !important;

  max-width:none !important;
  max-height:none !important;

  margin:0 !important;

  padding:
    4px
    clamp(
      5px,
      .45vw,
      9px
    ) !important;

  position:relative;

  display:flex !important;

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

  gap:2px;

  background:
    var(--surface) !important;

  color:
    var(--secondary) !important;

  border:
    1px solid
    var(--line) !important;

  border-radius:
    var(--screen-help-btn-radius) !important;

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

  font-size:
    var(--screen-help-text-size) !important;

  line-height:
    1.08 !important;

  font-weight:
    400 !important;

  text-align:center;

  white-space:
    normal !important;

  word-break:normal;

  overflow-wrap:
    break-word;

  text-overflow:
    clip !important;

  opacity:
    1 !important;

  filter:none !important;

  cursor:pointer;

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

  overflow:hidden;

  -webkit-tap-highlight-color:
    transparent;

  touch-action:
    manipulation;

  transition:
    transform .15s ease,
    background .15s ease,
    color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    opacity .15s ease;
}


/* =========================================================
   21) HELP BUTTON TEXT
========================================================= */

:is(
  .warmupTeamPowerBtn,
  .top10TeamPowerBtn,
  .whoTeamPowerBtn,
  .explainTeamPowerBtn,

  .finalTeamPowerBtn,
  .finalRound1TeamPowerBtn,
  .finalRound2TeamPowerBtn,
  .finalRound3TeamPowerBtn,
  .finalRound4TeamPowerBtn,

  .randomBox5TeamPowerBtn
) > span{
  min-width:0;
  max-width:100%;

  margin:0;

  display:flex;

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

  color:inherit;

  font-family:inherit;

  font-size:inherit;

  line-height:1.08;

  font-weight:400;

  text-align:center;

  white-space:normal;

  overflow:visible;

  text-overflow:clip;

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


/* =========================================================
   22) HELP BUTTON - READY / UNUSED
========================================================= */

:is(
  .warmupTeamPowerBtn,
  .top10TeamPowerBtn,
  .whoTeamPowerBtn,
  .explainTeamPowerBtn,

  .finalTeamPowerBtn,
  .finalRound1TeamPowerBtn,
  .finalRound2TeamPowerBtn,
  .finalRound3TeamPowerBtn,
  .finalRound4TeamPowerBtn,

  .randomBox5TeamPowerBtn
)[class*="PowerReady"]{
  background:
    #FFF7ED !important;

  color:
    var(--secondary) !important;

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

  opacity:
    1 !important;

  filter:
    none !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(254,127,45,.14),
    0 2px 7px
    rgba(254,127,45,.08) !important;
}


/* =========================================================
   23) HELP BUTTON - ACTIVE
========================================================= */

:is(
  .warmupTeamPowerBtn,
  .top10TeamPowerBtn,
  .whoTeamPowerBtn,
  .explainTeamPowerBtn,

  .finalTeamPowerBtn,
  .finalRound1TeamPowerBtn,
  .finalRound2TeamPowerBtn,
  .finalRound3TeamPowerBtn,
  .finalRound4TeamPowerBtn,

  .randomBox5TeamPowerBtn
)[class*="PowerActive"]{
  background:
    var(--primary) !important;

  color:
    #FFFFFF !important;

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

  opacity:
    1 !important;

  filter:
    none !important;

  box-shadow:
    0 0 0 2px
    rgba(254,127,45,.18),
    0 5px 12px
    rgba(254,127,45,.16) !important;
}


/* =========================================================
   24) HELP BUTTON - USED
========================================================= */

:is(
  .warmupTeamPowerBtn,
  .top10TeamPowerBtn,
  .whoTeamPowerBtn,
  .explainTeamPowerBtn,

  .finalTeamPowerBtn,
  .finalRound1TeamPowerBtn,
  .finalRound2TeamPowerBtn,
  .finalRound3TeamPowerBtn,
  .finalRound4TeamPowerBtn,

  .randomBox5TeamPowerBtn
)[class*="PowerUsed"]{
  background:
    #E6EBEF !important;

  color:
    #6F7C86 !important;

  border-color:
    #CBD2D8 !important;

  opacity:
    1 !important;

  filter:
    none !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(35,61,77,.035) !important;

  cursor:
    not-allowed !important;

  transform:
    none !important;
}


/* =========================================================
   25) TOP 10 HELP COUNTER
========================================================= */

.top10TeamPowerBtn small{
  min-width:
    clamp(
      14px,
      1.55vmin,
      18px
    );

  height:
    clamp(
      14px,
      1.55vmin,
      18px
    );

  position:absolute;

  left:2px;
  bottom:2px;

  display:flex;

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

  padding:0 2px;

  background:
    var(--secondary);

  color:
    #FFFFFF;

  border-radius:
    999px;

  font-size:
    clamp(
      8px,
      .95vmin,
      10px
    );

  line-height:1;

  font-weight:400;
}

.top10TeamPowerBtn.top10PowerReady small{
  background:
    var(--primary);
}

.top10TeamPowerBtn.top10PowerUsed small{
  background:
    #7B8792;
}


/* =========================================================
   26) TOP 10 STATUS LAYOUT
========================================================= */

.top10TeamStatusBarA{
  grid-template-columns:
    minmax(0,1fr)
    clamp(
      84px,
      calc(var(--app-width) * .07),
      108px
    ) !important;
}

.top10TeamStatusBarB{
  grid-template-columns:
    clamp(
      84px,
      calc(var(--app-width) * .07),
      108px
    )
    minmax(0,1fr) !important;
}


/* =========================================================
   27) TOP 10 HELP AREA
========================================================= */

.top10TeamPowerBar{
  width:100% !important;

  min-width:0 !important;
  max-width:none !important;

  height:100% !important;

  min-height:0 !important;
  max-height:none !important;

  grid-template-columns:
    none !important;

  grid-auto-flow:
    column !important;

  grid-auto-columns:
    minmax(
      0,
      1fr
    ) !important;
}


/* =========================================================
   28) TOP 10 ERRORS
========================================================= */

.top10Errors{
  width:100%;

  min-width:0;

  height:100%;

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

  gap:
    clamp(
      3px,
      .35vmin,
      5px
    );

  padding:
    clamp(
      3px,
      .35vmin,
      5px
    );
}

.top10Errors .errorMark{
  width:100%;
  height:100%;

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

  display:flex;

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

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

  font-size:
    clamp(
      .82rem,
      calc(.62rem + .46vmin),
      1.02rem
    );

  line-height:1;

  font-weight:400;
}

/* =========================================================
   FAMILY DIDI ERRORS
   EXACT TOP 10 STYLE
========================================================= */

.familyDidiErrors{
  width:100% !important;
  height:100% !important;

  min-width:0 !important;
  min-height:0 !important;

  max-width:none !important;
  max-height:none !important;

  display:grid !important;

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

  align-items:stretch !important;

  gap:4px !important;
  padding:4px !important;

  background:var(--surface) !important;

  border:1px solid var(--line) !important;
  border-radius:11px !important;

  overflow:hidden;
}


/* =========================
   ERROR MARK
========================= */

.familyDidiErrorDot{
  min-width:0 !important;
  min-height:0 !important;

  display:flex !important;

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

  background:#E6EBEF !important;
  color:#9BA6AF !important;

  border-radius:8px !important;

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

  font-size:.9rem !important;

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


/* =========================
   ERROR X
========================= */

.familyDidiErrorDot::before{
  content:"×";

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

  font-size:1.25rem;

  line-height:1;

  font-weight:400;

  color:inherit;

  transform:translateY(-1px);
}


/* =========================
   ACTIVE ERROR
========================= */

.familyDidiErrorDot.isActive{
  background:var(--btn-wrong) !important;
  color:#FFFFFF !important;
}


/* =========================================================
   29) SCORE TYPOGRAPHY
========================================================= */

:is(
  .teamMini,
  .top10TeamMini,
  .whoTeamMini
) > b{
  font-family:
    "HanakaText",
    sans-serif;

  font-size:
    clamp(
      1.18rem,
      calc(.82rem + .85vmin),
      1.55rem
    ) !important;

  line-height:1;

  font-weight:400;
}


/* =========================================================
   30) GLOBAL CONTROL BUTTON SIZE
========================================================= */

.actionBar button,
.explainActionBar button,
.finalControlsBar button,
.top10ActionBar button,
.whoActionBar button,
.familyDidiActionBar button,
.randomChallengeWrap .randomControlsBar button{
  height:
    var(--screen-control-btn-h);

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

  max-height:
    var(--screen-control-btn-h);
}

/* =========================================================
   RANDOM CHALLENGE HEADER
   MATCH GLOBAL SEGMENT HEADER
========================================================= */

.randomChallengeWrap .megaHeader,
.randomChallengeWrap .randomChallengeDynamicHeader{
  width:min(
    100%,
    var(--screen-header-max-w)
  ) !important;

  height:var(--screen-header-h) !important;

  min-width:0;
  min-height:var(--screen-header-h) !important;

  max-width:var(--screen-header-max-w);
  max-height:var(--screen-header-h) !important;

  margin:0 auto !important;

  padding:var(--screen-gap) !important;

  align-items:center;

  gap:var(--screen-gap) !important;

  background:var(--surface) !important;

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

  border-radius:
    var(--screen-radius) !important;

  box-shadow:
    0 7px 20px
    rgba(35,61,77,.055) !important;

  overflow:hidden;
}


/* =========================================================
   RANDOM CHALLENGE HEADER LAYOUT
========================================================= */

.randomChallengeWrap .randomChallengeHomeHeader{
  grid-template-columns:
    var(--screen-header-btn-w)
    minmax(0,1fr)
    clamp(
      120px,
      calc(var(--app-width) * .11),
      150px
    )
    minmax(0,1fr)
    var(--screen-header-btn-w) !important;
}

.randomChallengeWrap .randomChallengeBoxHeader{
  grid-template-columns:
    var(--screen-header-btn-w)
    minmax(0,1fr)
    clamp(
      120px,
      calc(var(--app-width) * .11),
      150px
    )
    minmax(0,1fr)
    var(--screen-header-btn-w) !important;
}


/* =========================================================
   RANDOM CHALLENGE TITLE
========================================================= */

.randomChallengeWrap .segmentTitlePlain,
.randomChallengeWrap .randomChallengeHomeTitle{
  width:100%;

  height:var(--screen-team-inner-h) !important;

  min-width:0;
  min-height:var(--screen-team-inner-h) !important;

  max-height:var(--screen-team-inner-h) !important;

  padding:
    calc(var(--screen-gap) * .55)
    var(--screen-gap) !important;

  display:flex;

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

  background:var(--soft) !important;

  border:
    1px solid
    var(--line) !important;

  border-radius:14px !important;

  overflow:visible !important;
}

.randomChallengeWrap .segmentTitlePlain h1,
.randomChallengeWrap .randomChallengeHomeTitle h1{
  width:100%;

  min-width:0;

  margin:0;

  color:var(--secondary) !important;

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

  font-size:
    var(--screen-title-size) !important;

  line-height:1.05 !important;

  font-weight:400 !important;

  text-align:center;

  white-space:normal;

  overflow:visible !important;

  text-overflow:clip;

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


/* =========================================================
   RANDOM CHALLENGE TEAM CARDS
========================================================= */

.randomChallengeWrap .teamMini,
.randomChallengeWrap .randomChallengeHomeTeam{
  width:100%;

  height:var(--screen-team-h) !important;

  min-width:0;
  min-height:var(--screen-team-h) !important;

  max-height:var(--screen-team-h) !important;

  padding:
    calc(var(--screen-gap) * .75) !important;

  align-items:center;

  gap:var(--screen-gap) !important;

  background:var(--surface) !important;

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

  border-radius:19px !important;

  box-shadow:none;

  overflow:hidden;
}


/* =========================================================
   RANDOM CHALLENGE TEAM NAME
========================================================= */

.randomChallengeWrap .teamNameBlock,
.randomChallengeWrap .randomChallengeHomeTeam > strong{
  height:var(--screen-team-inner-h) !important;

  min-width:0;
  min-height:var(--screen-team-inner-h) !important;

  max-height:var(--screen-team-inner-h) !important;

  padding:
    calc(var(--screen-gap) * .45)
    calc(var(--screen-gap) * .8) !important;

  display:flex;

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

  background:var(--soft) !important;

  color:var(--secondary) !important;

  border:
    1px solid
    var(--line) !important;

  border-radius:14px !important;

  overflow:visible !important;
}

.randomChallengeWrap .teamNameBlock strong,
.randomChallengeWrap .randomChallengeHomeTeam > strong{
  width:100%;

  min-width:0;

  margin:0;

  color:var(--secondary) !important;

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

  font-size:
    var(--screen-team-size) !important;

  line-height:1.08 !important;

  font-weight:400 !important;

  text-align:center;

  white-space:normal;

  overflow:visible !important;

  text-overflow:clip;

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


/* =========================================================
   RANDOM CHALLENGE SCORE
========================================================= */

.randomChallengeWrap .teamMini > b,
.randomChallengeWrap .randomChallengeHomeTeam > b{
  width:var(--screen-score-w) !important;

  min-width:var(--screen-score-w) !important;
  max-width:var(--screen-score-w) !important;

  height:var(--screen-team-inner-h) !important;

  min-height:var(--screen-team-inner-h) !important;
  max-height:var(--screen-team-inner-h) !important;

  display:flex;

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

  background:var(--secondary) !important;

  color:#FFFFFF !important;

  border-radius:14px !important;

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

  font-size:
    clamp(
      1.18rem,
      calc(.82rem + .85vmin),
      1.55rem
    ) !important;

  line-height:1;

  font-weight:400;

  text-align:center;
}


/* =========================================================
   RANDOM CHALLENGE ACTIVE TEAM
========================================================= */

.randomChallengeWrap .teamMini.active,
.randomChallengeWrap .randomChallengeHomeTeam.active{
  background:var(--surface) !important;

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

  box-shadow:
    0 0 0 3px
    rgba(254,127,45,.18),
    0 7px 18px
    rgba(35,61,77,.07) !important;
}

.randomChallengeWrap
.teamMini.active
.teamNameBlock,

.randomChallengeWrap
.randomChallengeHomeTeam.active > strong{
  background:#FFF7ED !important;

  color:var(--secondary) !important;

  border-color:
    rgba(254,127,45,.55) !important;
}

.randomChallengeWrap .teamMini.active > b,
.randomChallengeWrap .randomChallengeHomeTeam.active > b{
  background:
    var(--primary) !important;

  color:#FFFFFF !important;
}


/* =========================================================
   RANDOM CHALLENGE HEADER BUTTONS
========================================================= */

.randomChallengeWrap .megaHeader .dockBtn,
.randomChallengeWrap .randomChallengeDynamicHeader .dockBtn{
  height:
    var(--screen-header-btn-h) !important;

  min-height:
    var(--screen-header-btn-h) !important;

  max-height:
    var(--screen-header-btn-h) !important;

  border-radius:16px;

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

  font-size:
    var(--screen-button-size) !important;

  line-height:1.05;

  font-weight:400;

  text-align:center;
}

/* =========================================================
   DISPLAY CONTROLS
   UNIFIED PROJECT SYSTEM
========================================================= */

:root{
  /* CONTROL COLORS - NO ORANGE */
  --control-correct:#007F00;
  --control-wrong:#7F0000;

  --control-start:#0A7C6E;
  --control-answer:#00007F;
  --control-undo:#24185E;

  --control-next:#233D4D;
  --control-prev:#365F73;

  --control-switch:#51458A;
  --control-special:#087C8C;

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

  /* CONTROL SIZE */
  --control-bar-max-w:860px;

  --control-radius:16px;

  --control-font-size:
    clamp(
      .76rem,
      calc(.56rem + .72vmin),
      1.08rem
    );
}

/* =========================================================
   DISPLAY CONTROLS
   BALANCED BUTTON LAYOUT
========================================================= */

/* =========================
   1) COMMON BOTTOM BARS
========================= */

:is(
  .actionBar,
  .top10ActionBar,
  .familyDidiActionBar,
  .whoActionBar,
  .explainActionBar,
  .finalControlsBar,
  #finalControlsBar,
  .randomControlsBar:not([hidden]),
  #randomControlsBar:not([hidden])
){
  display:grid !important;

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

  gap:var(--screen-gap) !important;

  padding:var(--screen-gap) !important;
}


/* =========================
   2) WARMUP
   3 BUTTONS
========================= */

.actionBar{
  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    ) !important;
}

/* =========================
   3) WHO
   3 BUTTONS
========================= */

.whoActionBar{
  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    ) !important;
}


/* =========================
   4) EXPLAIN
   4 BUTTONS
========================= */

.explainActionBar{
  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    ) !important;
}


/* =========================
   5) TOP 10
   4 BUTTONS
========================= */

.top10ActionBar{
  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    ) !important;
}


/* =========================
   6) FAMILY DIDI
   6 BUTTONS
========================= */

.familyDidiActionBar{
  grid-template-columns:
    repeat(
      6,
      minmax(0,1fr)
    ) !important;
}


/* =========================
   7) FINAL
   DISTRIBUTE ACTUAL BUTTONS
========================= */

.finalControlsBar,
#finalControlsBar{
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(0,1fr)
    ) !important;
}


/* =========================
   8) RANDOM CHALLENGE
   VARIABLE BUTTON COUNT
========================= */

/* 1 BUTTON */

.randomChallengeWrap
.randomControlsBar.randomChallengeActionsCount1{
  width:min(100%,420px) !important;
  max-width:420px !important;

  grid-template-columns:
    minmax(0,1fr) !important;
}


/* 2 BUTTONS */

.randomChallengeWrap
.randomControlsBar.randomChallengeActionsCount2{
  width:min(100%,680px) !important;
  max-width:680px !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    ) !important;
}


/* 3 BUTTONS */

.randomChallengeWrap
.randomControlsBar.randomChallengeActionsCount3{
  width:min(100%,900px) !important;
  max-width:900px !important;

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


/* 4 BUTTONS */

.randomChallengeWrap
.randomControlsBar.randomChallengeActionsCount4{
  width:min(100%,1160px) !important;
  max-width:1160px !important;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    ) !important;
}
/* =========================
   RANDOM CHALLENGE
   HIDDEN CONTROL BAR
========================= */

.randomChallengeWrap .randomControlsBar[hidden],
.randomChallengeWrap #randomControlsBar[hidden]{
  display:none !important;
}


/* =========================
   9) BUTTON ALIGNMENT
========================= */

:is(
  .actionBar,
  .top10ActionBar,
  .familyDidiActionBar,
  .whoActionBar,
  .explainActionBar,
  .finalControlsBar,
  #finalControlsBar,
  .randomControlsBar:not([hidden]),
  #randomControlsBar:not([hidden])
) > button{
  width:100% !important;

  min-width:0 !important;

  justify-self:stretch !important;
  align-self:center !important;
}


/* =========================================================
   10) ARCHIVE
   KEEP SIDE CONTROL LAYOUT
========================================================= */

.archiveSidePanel .archiveControlButtons{
  width:100% !important;

  display:grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    ) !important;

  align-items:stretch !important;

  gap:
    var(--screen-gap) !important;

  padding:
    var(--screen-gap) !important;

  margin:0 !important;

  background:
    var(--surface) !important;

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

  border-radius:
    24px !important;

  box-shadow:none !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* =========================================================
   UNIFIED NUMBER CARDS
   SAFE VISUAL UNIFICATION
   بدون نقاط + صح صحلي + قصة + التركيز
   + اشرح الكلمة + فتبلة + من هو
========================================================= */

:root{
  --unified-number-font:
    clamp(
      1.25rem,
      calc(.78rem + 1.55vmin),
      2rem
    );

  --unified-number-radius:
    16px;

  --unified-number-active:
    #033c5f;

  --unified-number-used:
    #DCE2E8;

  --unified-number-locked:
    #E7EBEF;
}


/* =========================================================
   FINAL ROUND 2
   SAME UNIFIED NUMBER DESIGN
========================================================= */

.finalWrapNew .finalRound2Card{
  font-family:
    "HanakaText",
    sans-serif !important;

  font-size:
    var(--unified-number-font) !important;

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

  border-radius:
    var(--unified-number-radius) !important;

  box-shadow:none !important;
}


/* AVAILABLE */

.finalWrapNew
.finalRound2Card:not(.active):not(.used):not(.locked){
  background:
    var(--primary) !important;

  color:#FFFFFF !important;

  border-color:
    transparent !important;

  opacity:1 !important;
}


/* ACTIVE */

.finalWrapNew
.finalRound2Card.active{
  background:
    var(--unified-number-active) !important;

  color:#FFFFFF !important;

  border-color:
    var(--unified-number-active) !important;

  opacity:1 !important;

  box-shadow:
    inset 0 0 0 2px
    rgba(255,255,255,.16) !important;
}


/* USED */

.finalWrapNew
.finalRound2Card.used:not(.active){
  background:
    var(--unified-number-used) !important;

  color:
    var(--muted) !important;

  border-color:
    var(--line) !important;

  opacity:1 !important;

  box-shadow:none !important;
}


/* LOCKED */

.finalWrapNew
.finalRound2Card.locked{
  background:
    var(--unified-number-locked) !important;

  color:
    var(--muted) !important;

  border-color:
    var(--line) !important;

  opacity:.55 !important;

  box-shadow:none !important;
}


/* =========================================================
   SHARED NUMBER CARDS
   المقاس يبقى من كل فقرة
========================================================= */

:is(
  .whoBtn,
  .finalRound1Card,
  .finalStoryNumberCard,
  .finalTeamMediaNumberCard,
  .randomChallengeWrap .randomFatblaNumberCard,
  .explainWrap .finalRound3Card,
  .explainWrap .finalTeamMediaNumberCard
){
  position:relative;

  display:flex !important;

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

  margin:0;

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

  font-size:
    var(--unified-number-font) !important;

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

  text-align:center !important;

  border-radius:
    var(--unified-number-radius) !important;

  box-sizing:border-box !important;

  overflow:hidden !important;

  box-shadow:none !important;
}


/* من هو يحتاج عرض حد ثابت
   بدون تغيير عرض أو ارتفاع الزر */

.whoBtn{
  border:
    2px solid
    transparent !important;
}


/* =========================
   AVAILABLE
========================= */

:is(
  .whoBtn,
  .finalRound1Card,
  .finalStoryNumberCard,
  .finalTeamMediaNumberCard,
  .randomChallengeWrap .randomFatblaNumberCard,
  .explainWrap .finalRound3Card,
  .explainWrap .finalTeamMediaNumberCard
):not(.active):not(.used):not(.locked):not(.segmentCompensationNumber){
  background:
    var(--primary) !important;

  color:#FFFFFF !important;

  border-color:
    transparent !important;

  opacity:1 !important;
}


/* =========================
   ACTIVE
   الرقم المختار
========================= */

:is(
  .whoBtn,
  .finalRound1Card,
  .finalStoryNumberCard,
  .finalTeamMediaNumberCard,
  .randomChallengeWrap .randomFatblaNumberCard,
  .explainWrap .finalRound3Card,
  .explainWrap .finalTeamMediaNumberCard
).active:not(.locked){
  background:
    var(--unified-number-active) !important;

  color:#FFFFFF !important;

  border-color:
    var(--unified-number-active) !important;

  opacity:1 !important;

  box-shadow:
    inset 0 0 0 2px
    rgba(255,255,255,.16) !important;

  transform:none !important;
  filter:none !important;
}


/* =========================
   USED
   الرقم المنتهي
========================= */

:is(
  .whoBtn,
  .finalRound1Card,
  .finalStoryNumberCard,
  .finalTeamMediaNumberCard,
  .randomChallengeWrap .randomFatblaNumberCard,
  .explainWrap .finalRound3Card,
  .explainWrap .finalTeamMediaNumberCard
).used:not(.active){
  background:
    var(--unified-number-used) !important;

  color:
    var(--muted) !important;

  border-color:
    var(--line) !important;

  opacity:1 !important;

  box-shadow:none !important;

  transform:none !important;
  filter:none !important;

  cursor:not-allowed !important;
}


/* =========================
   LOCKED
   المقفل أثناء السؤال
========================= */

:is(
  .whoBtn,
  .finalRound1Card,
  .finalStoryNumberCard,
  .finalTeamMediaNumberCard,
  .randomChallengeWrap .randomFatblaNumberCard,
  .explainWrap .finalRound3Card,
  .explainWrap .finalTeamMediaNumberCard
).locked{
  background:
    var(--unified-number-locked) !important;

  color:
    var(--muted) !important;

  border-color:
    var(--line) !important;

  opacity:.55 !important;

  box-shadow:none !important;

  transform:none !important;
  filter:none !important;

  cursor:not-allowed !important;
}

/* =========================
   COMPENSATION
   SHARED PROJECT DESIGN
========================= */

.segmentCompensationNumber{
  position:relative !important;

  background:#FFF7ED !important;
  color:var(--primary) !important;

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

  opacity:1 !important;

  box-shadow:none !important;

  overflow:hidden !important;

  cursor:pointer !important;

  touch-action:none;
}


/* =========================
   COMPENSATION LABEL
========================= */

.segmentCompensationNumber::after{
  content:"تعويض";

  position:absolute;

  left:5px;
  right:5px;
  bottom:3px;

  height:15px;

  display:flex;

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

  background:
    var(--primary);

  color:#FFFFFF;

  border-radius:999px;

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

  font-size:8px;

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

  pointer-events:none;
}


/* =========================
   COMPENSATION LOCKED
========================= */

.segmentCompensationNumber.finalCompensationLocked,
.segmentCompensationNumber.finalCompensationLocked:disabled{
  background:#F6F7F9 !important;

  color:
    var(--muted) !important;

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

  opacity:1 !important;

  box-shadow:none !important;

  cursor:not-allowed !important;

  transform:none !important;
  filter:none !important;
}


.segmentCompensationNumber.finalCompensationLocked::after{
  background:
    var(--btn-disabled) !important;

  color:
    var(--btn-disabled-text) !important;
}


/* =========================
   COMPENSATION PRESS
========================= */

.segmentCompensationNumber.segmentCompensationPressing{
  transform:
    scale(.95) !important;

  background:
    #ECFDF5 !important;

  color:
    #0A7C6E !important;

  border-color:
    #0A7C6E !important;

  box-shadow:none !important;
}


.segmentCompensationNumber.segmentCompensationPressing::after{
  background:
    #0A7C6E !important;

  color:#FFFFFF !important;
}
/* =========================
   ARCHIVE BUTTON SIZE
========================= */

.archiveSidePanel
.archiveControlButtons
.archiveCtrlBtn{
  width:100% !important;

  height:
    var(--screen-control-btn-h) !important;

  min-width:0 !important;

  min-height:
    var(--screen-control-btn-h) !important;

  max-height:
    var(--screen-control-btn-h) !important;

  margin:0 !important;

  padding:
    0
    clamp(
      8px,
      1.05vmin,
      16px
    ) !important;

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

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

  font-size:
    var(--control-font-size) !important;

  line-height:1.05 !important;

  font-weight:400 !important;

  text-align:center !important;
}



/* =========================================================
   1) CONTROL BARS
========================================================= */

:is(
  .actionBar,
  .warmupActionBar,
  .top10ActionBar,
  .familyDidiActionBar,
  .whoActionBar,
  .explainActionBar,
  .finalControlsBar,
  #finalControlsBar,
  .randomControlsBar,
  #randomControlsBar,
  .randomChallengeActionBar,
  .randomBoxActionBar
){
  width:min(
    100%,
    var(--control-bar-max-w)
  ) !important;

  height:var(--screen-controls-h) !important;

  min-width:0 !important;
  min-height:var(--screen-controls-h) !important;

  max-width:var(--control-bar-max-w) !important;
  max-height:var(--screen-controls-h) !important;

  margin-left:auto !important;
  margin-right:auto !important;

  padding:var(--screen-gap) !important;

  align-items:center !important;

  gap:var(--screen-gap) !important;

  background:var(--surface) !important;

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

  border-radius:24px !important;

  box-shadow:none !important;

  overflow:hidden;
}


/* =========================================================
   2) ALL STANDARD CONTROL BUTTONS
========================================================= */

:is(
  .actionBtn:not(.randomStartBtn),
  .top10ActionBtn,
  .familyDidiActionBtn,
  .whoActionBtn,
  .explainActionBtn,
  .randomChallengeActionBtn:not(.randomStartBtn),
  .archiveCtrlBtn,
  .finalTeamMediaCtrlBtn
){
  width:100% !important;

  height:var(--screen-control-btn-h) !important;

  min-width:0 !important;
  min-height:var(--screen-control-btn-h) !important;

  max-height:var(--screen-control-btn-h) !important;

  margin:0 !important;

  padding:
    0
    clamp(
      8px,
      1.05vmin,
      16px
    ) !important;

  display:flex !important;

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

  border:0 !important;

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

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

  font-size:
    var(--control-font-size) !important;

  line-height:1.05 !important;

  font-weight:400 !important;

  text-align:center !important;

  white-space:normal !important;

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

  text-overflow:clip !important;

  color:#FFFFFF;

  box-shadow:none !important;

  cursor:pointer;

  transition:
    transform .16s ease,
    filter .16s ease,
    background-color .16s ease !important;

  -webkit-tap-highlight-color:transparent;
}

/* =========================================================
   3) HOVER / PRESS
========================================================= */

:is(
  .actionBtn:not(.randomStartBtn),
  .top10ActionBtn,
  .familyDidiActionBtn,
  .whoActionBtn,
  .explainActionBtn,
  .randomChallengeActionBtn:not(.randomStartBtn),
  .archiveCtrlBtn,
  .finalTeamMediaCtrlBtn
):hover:not(:disabled){
  filter:brightness(1.06) !important;
}


:is(
  .actionBtn:not(.randomStartBtn),
  .top10ActionBtn,
  .familyDidiActionBtn,
  .whoActionBtn,
  .explainActionBtn,
  .randomChallengeActionBtn:not(.randomStartBtn),
  .archiveCtrlBtn,
  .finalTeamMediaCtrlBtn
):active:not(:disabled){
  transform:scale(.97) !important;
}

/* =========================================================
   4) CORRECT
========================================================= */

:is(
  .btnCorrect,
  .top10AnswerBtn,
  .familyDidiShowAnswersBtn,
  .whoCorrectBtn,
  .explainCorrectBtn,
  .randomChallengeCorrectBtn,
  .finalControlsBar .btnCorrect,
  #finalControlsBar .btnCorrect
):not(:disabled){
  background:
    var(--control-correct) !important;

  color:#FFFFFF !important;
}


/* =========================================================
   5) WRONG
========================================================= */

:is(
  .btnWrong,
  .top10WrongBtn,
  .familyDidiWrongBtn,
  .whoWrongBtn,
  .explainWrongBtn,
  .randomChallengeWrongBtn,
  .archiveErrorBtn,
  .finalControlsBar .btnWrong,
  #finalControlsBar .btnWrong
):not(:disabled){
  background:
    var(--control-wrong) !important;

  color:#FFFFFF !important;
}


/* =========================================================
   6) START / TIMER
========================================================= */

:is(
  .explainStartBtn,
  .archiveTimerBtn,
  .finalControlsBar .btnStart,
  #finalControlsBar .btnStart
):not(:disabled){
  background:
    var(--control-start) !important;

  color:#FFFFFF !important;
}
/* =========================================================
   7) SHOW ANSWER
========================================================= */

:is(
  .archiveAnswerBtn,
  .finalControlsBar .btnAnswer,
  #finalControlsBar .btnAnswer
):not(:disabled){
  background:
    var(--control-answer) !important;

  color:#FFFFFF !important;
}


/* =========================================================
   8) FAMILY DIDI - SHOW ANSWERS
========================================================= */

.familyDidiShowAnswersBtn:not(:disabled){
  background:
    var(--control-answer) !important;

  color:#FFFFFF !important;
}


/* =========================================================
   9) UNDO
========================================================= */

:is(
  .top10UndoBtn,
  .familyDidiUndoBtn,
  .archiveUndoBtn,
  #archiveUndoBtn,
  .undoBtn,
  .finalUndoBtn
):not(:disabled){
  background:
    var(--control-undo) !important;

  color:#FFFFFF !important;
}


/* =========================================================
   10) NEXT
========================================================= */

:is(
  .top10NextBtn,
  .familyDidiNextBtn,
  .archiveNextBtn,
  .roundNavBtn
):not(:disabled){
  background:
    var(--control-next) !important;

  color:#FFFFFF !important;
}


/* =========================================================
   11) PREVIOUS
========================================================= */

.archivePrevBtn:not(:disabled){
  background:
    var(--control-prev) !important;

  color:#FFFFFF !important;
}


/* =========================================================
   12) SWITCH TEAM / TURN
========================================================= */

.familyDidiSwitchBtn:not(:disabled){
  background:
    var(--control-switch) !important;

  color:#FFFFFF !important;
}


/* =========================================================
   13) FAMILY DIDI - AWARD
========================================================= */

.familyDidiAwardBtn:not(:disabled){
  background:
    var(--control-special) !important;

  color:#FFFFFF !important;
}


/* =========================================================
   14) RANDOM CHALLENGE CONTROLS
   PROJECT STANDARD
========================================================= */

/* =========================
   DEFAULT / SPECIAL
========================= */

.randomChallengeWrap
.randomChallengeActionBtn:not(
  .randomStartBtn
):not(
  .randomChallengeCorrectBtn
):not(
  .randomChallengeWrongBtn
):not(:disabled){
  background:
    var(--control-special) !important;

  color:#FFFFFF !important;
}


/* =========================
   START
========================= */

.randomChallengeWrap
#randomBox2StartButton:not(:disabled),

.randomChallengeWrap
#randomBox4StartButton:not(:disabled),

.randomChallengeWrap
#randomBox4SecondTeamButton:not(:disabled){
  background:
    var(--control-start) !important;

  color:#FFFFFF !important;
}


/* =========================
   NEXT
========================= */

.randomChallengeWrap
#randomBox4NextButton:not(:disabled){
  background:
    var(--control-next) !important;

  color:#FFFFFF !important;
}


/* =========================
   FINISH
========================= */

.randomChallengeWrap
.randomChallengeFinishBtn:not(:disabled){
  background:
    var(--control-next) !important;

  color:#FFFFFF !important;
}


/* =========================
   PASS / SECONDARY
========================= */

.randomChallengeWrap
.randomChallengeSecondaryBtn:not(:disabled){
  background:
    var(--control-switch) !important;

  color:#FFFFFF !important;
}


/* =========================
   VIDEO
========================= */

.randomChallengeWrap
.randomChallengeBox5VideoBtn:not(:disabled){
  background:
    var(--control-next) !important;

  color:#FFFFFF !important;
}


/* =========================
   CORRECT
========================= */

.randomChallengeWrap
.randomChallengeCorrectBtn:not(:disabled){
  background:
    var(--control-correct) !important;

  color:#FFFFFF !important;
}


/* =========================
   WRONG
========================= */

.randomChallengeWrap
.randomChallengeWrongBtn:not(:disabled){
  background:
    var(--control-wrong) !important;

  color:#FFFFFF !important;
}
/* =========================================================
   15) FINAL DEFAULT ACTION
========================================================= */

.finalControlsBar
.actionBtn:not(
  .btnCorrect
):not(
  .btnWrong
):not(
  .btnStart
):not(
  .btnAnswer
):not(
  .undoBtn
):not(
  .finalUndoBtn
):not(
  .roundNavBtn
):not(:disabled),

#finalControlsBar
.actionBtn:not(
  .btnCorrect
):not(
  .btnWrong
):not(
  .btnStart
):not(
  .btnAnswer
):not(
  .undoBtn
):not(
  .finalUndoBtn
):not(
  .roundNavBtn
):not(:disabled){
  background:
    var(--control-special) !important;

  color:#FFFFFF !important;
}


/* =========================================================
   16) ARCHIVE
   REMOVE OLD GRADIENTS / SHADOWS
========================================================= */

.archiveSidePanel
:is(
  .archiveTimerBtn,
  .archiveErrorBtn,
  .archiveAnswerBtn,
  .archiveUndoBtn,
  .archivePrevBtn,
  .archiveNextBtn
){
  border:0 !important;

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

  box-shadow:none !important;

  background-image:none !important;

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

  font-size:
    var(--control-font-size) !important;

  line-height:1.05 !important;

  font-weight:400 !important;
}


.archiveSidePanel
.archiveTimerBtn:not(:disabled){
  background:
    var(--control-start) !important;
}


.archiveSidePanel
.archiveErrorBtn:not(:disabled){
  background:
    var(--control-wrong) !important;
}


.archiveSidePanel
.archiveAnswerBtn:not(:disabled){
  background:
    var(--control-answer) !important;
}


.archiveSidePanel
.archiveUndoBtn:not(:disabled),
.archiveSidePanel
#archiveUndoBtn:not(:disabled){
  background:
    var(--control-undo) !important;
}


.archiveSidePanel
.archivePrevBtn:not(:disabled){
  background:
    var(--control-prev) !important;
}


.archiveSidePanel
.archiveNextBtn:not(:disabled){
  background:
    var(--control-next) !important;
}


/* =========================================================
   17) DISABLED
   MUST STAY LAST
========================================================= */

:is(
  .actionBtn:not(.randomStartBtn),
  .top10ActionBtn,
  .familyDidiActionBtn,
  .whoActionBtn,
  .explainActionBtn,
  .randomChallengeActionBtn:not(.randomStartBtn),
  .archiveCtrlBtn,
  .finalTeamMediaCtrlBtn
):disabled,

.top10AnswerBtn.top10AnswerLocked,

.whoScoreBtnLocked{
  background:
    var(--control-disabled) !important;

  background-image:none !important;

  color:
    var(--control-disabled-text) !important;

  border-color:
    var(--line) !important;

  opacity:1 !important;

  box-shadow:none !important;

  cursor:not-allowed !important;

  pointer-events:none !important;

  transform:none !important;

  filter:none !important;
}

/* =========================================================
   31) REDUCED MOTION
========================================================= */

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

  :is(
    .warmupTeamPowerBtn,
    .top10TeamPowerBtn,
    .whoTeamPowerBtn,
    .explainTeamPowerBtn,

    .finalTeamPowerBtn,
    .finalRound1TeamPowerBtn,
    .finalRound2TeamPowerBtn,
    .finalRound3TeamPowerBtn,
    .finalRound4TeamPowerBtn,

    .randomBox5TeamPowerBtn
  ){
    transition:none !important;
    animation:none !important;
  }
}


/* =========================================================
   END
========================================================= */