/* =========================================================
GAMIQ V2
FULL STYLESHEET
========================================================= */


/* =========================================================
RESET / BASE
========================================================= */

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  min-height:100%;
  background:#03060b;
  color:#ffffff;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body{
  overflow:hidden;
}

button{
  font:inherit;
}

button,
[role="button"]{
  -webkit-tap-highlight-color:transparent;
}

#郢夊ｺｫamiq-app{
  min-height:100vh;
}

#gamiq-app{
  min-height:100vh;
}


/* =========================================================
APP
========================================================= */

.gamiq-v2{
  position:relative;

  width:100%;
  height:100vh;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(39,86,126,.10),
      transparent 35%
    ),
    #03060b;
}


/* =========================================================
TOP HEADER
========================================================= */

.gamiq-live-header{
  position:relative;

  z-index:100;

  height:72px;

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

  padding:
    0 20px;

  border-bottom:
    1px solid
    rgba(255,255,255,.055);

  background:
    rgba(3,6,11,.92);

  backdrop-filter:
    blur(14px);
}


.gamiq-live-brand{
  display:flex;
  flex-direction:column;

  line-height:1;
}


.gamiq-live-brand strong{
  font-size:25px;
  font-weight:1000;

  letter-spacing:-.04em;
}


.gamiq-live-brand span{
  margin-top:4px;

  color:#737d8d;

  font-size:7px;
  font-weight:900;

  letter-spacing:.27em;
}


.gamiq-live-data{
  display:flex;
  align-items:center;

  gap:27px;
}


.gamiq-live-item{
  display:flex;
  flex-direction:column;

  align-items:center;

  min-width:54px;
}


.gamiq-live-item span{
  margin-bottom:3px;

  color:#626c7c;

  font-size:7px;
  font-weight:1000;

  letter-spacing:.18em;
}


.gamiq-live-item strong{
  color:#ffffff;

  font-size:19px;
  font-weight:1000;

  line-height:1;
}


.gamiq-results-button{
  min-height:40px;

  padding:
    0 17px;

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

  border-radius:12px;

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

  color:#ffffff;

  font-size:11px;
  font-weight:900;

  cursor:pointer;

  transition:
    background .15s ease,
    transform .15s ease;
}


.gamiq-results-button:hover{
  background:
    rgba(255,255,255,.08);
}


.gamiq-results-button:active{
  transform:scale(.97);
}


/* =========================================================
FEED
========================================================= */

.gamiq-feed{
  position:relative;

  width:100%;
  height:
    calc(100vh - 72px);

  overflow:hidden;

  touch-action:pan-y;
}


.gamiq-feed-card{
  position:absolute;

  inset:0;

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

  padding:
    2px 20px 18px;

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    opacity .35s ease;
}


.gamiq-feed-card.current{
  z-index:3;

  transform:
    translateY(0);

  opacity:1;
}


.gamiq-feed-card.next{
  z-index:2;

  transform:
    translateY(100%);

  opacity:.15;
}


.gamiq-feed-card.preview{
  pointer-events:none;
}


/* =========================================================
GAME CARD
========================================================= */

.gamiq-game-shell{
  position:relative;

  width:min(
    760px,
    100%
  );

  height:min(
    680px,
    calc(100vh - 108px)
  );

  min-height:500px;

  display:flex;
  flex-direction:column;

  overflow:hidden;

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

  border-radius:24px;

  background:
    linear-gradient(
      180deg,
      #111823,
      #090d14
    );

  box-shadow:
    0 25px 80px
    rgba(0,0,0,.35);
}


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

.gamiq-game-top{
  position:relative;

  z-index:10;

  min-height:78px;

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

  padding:
    20px 18px 12px;
}


.gamiq-game-top > div:first-child{
  min-width:0;
}


.gamiq-game-skill{
  display:block;

  margin-bottom:4px;

  color:#5fefff;

  font-size:9px;
  font-weight:1000;

  letter-spacing:.17em;
}


.gamiq-game-top h2{
  margin:0;

  color:#ffffff;

  font-size:
    clamp(
      24px,
      3vw,
      31px
    );

  font-weight:1000;

  letter-spacing:-.045em;

  line-height:1;
}


.gamiq-game-type{
  padding:
    6px 10px;

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

  border-radius:999px;

  color:#778294;

  font-size:8px;
  font-weight:1000;

  letter-spacing:.15em;

  text-transform:uppercase;
}


/* =========================================================
GAME HOST
========================================================= */

.gamiq-game-host{
  position:relative;

  flex:1 1 0;

  width:100%;

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

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

  padding:
    0 74px 18px;

  overflow:hidden;
}


.gamiq-game-host > *{
  width:100%;
  height:100%;

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


/* =========================================================
RULE OVERLAY
========================================================= */

.gamiq-rule-overlay{
  position:absolute;

  z-index:80;

  inset:78px 0 0;

  display:flex;
  flex-direction:column;

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

  padding:28px;

  background:
    rgba(4,8,14,.94);

  backdrop-filter:
    blur(8px);

  text-align:center;

  opacity:1;

  transition:
    opacity .22s ease,
    visibility .22s ease;
}


.gamiq-rule-overlay.hide{
  opacity:0;
  visibility:hidden;

  pointer-events:none;
}


.gamiq-rule-overlay span{
  margin-bottom:13px;

  color:#55eaff;

  font-size:10px;
  font-weight:1000;

  letter-spacing:.24em;
}


.gamiq-rule-overlay strong{
  max-width:520px;

  color:#ffffff;

  font-size:
    clamp(
      20px,
      3vw,
      32px
    );

  font-weight:1000;

  line-height:1.35;
}


/* =========================================================
COMPLETE
========================================================= */

.gamiq-card-complete{
  position:absolute;

  z-index:90;

  inset:0;

  display:flex;
  flex-direction:column;

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

  background:
    rgba(3,6,11,.94);

  backdrop-filter:
    blur(10px);

  opacity:0;
  visibility:hidden;

  pointer-events:none;

  transition:
    opacity .25s ease,
    visibility .25s ease;
}


.gamiq-card-complete.show{
  opacity:1;
  visibility:visible;
}


.gamiq-complete-label{
  margin-bottom:16px;

  color:#ff5573;

  font-size:10px;
  font-weight:1000;

  letter-spacing:.28em;
}


.gamiq-complete-score{
  color:#ffffff;

  font-size:
    clamp(
      70px,
      10vw,
      118px
    );

  font-weight:1000;

  line-height:.9;

  text-shadow:
    0 0 35px
    rgba(255,255,255,.11);
}


.gamiq-complete-skill{
  margin-top:18px;

  color:#808b9c;

  font-size:12px;
  font-weight:1000;

  letter-spacing:.2em;
}


.gamiq-swipe-next{
  position:absolute;

  bottom:34px;

  color:
    rgba(255,255,255,.68);

  font-size:10px;
  font-weight:1000;

  letter-spacing:.16em;
}


.gamiq-card-complete.error
.gamiq-complete-score{
  color:#ff526e;
}


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

.gamiq-game-error{
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;

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

  gap:8px;

  color:#ffffff;
}


.gamiq-game-error strong{
  color:#ff526e;

  font-size:16px;
}


.gamiq-game-error span{
  color:#7d8798;

  font-size:11px;
}


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

.gamiq-start-screen{
  position:absolute;

  z-index:200;

  inset:0;

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

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(54,130,175,.16),
      transparent 30%
    ),
    #04070c;

  transition:
    opacity .3s ease,
    visibility .3s ease;
}


.gamiq-start-screen.hidden{
  opacity:0;
  visibility:hidden;

  pointer-events:none;
}


.gamiq-start-inner{
  width:min(
    560px,
    calc(100% - 40px)
  );

  text-align:center;
}


.gamiq-start-logo{
  color:#ffffff;

  font-size:
    clamp(
      50px,
      8vw,
      80px
    );

  font-weight:1000;

  letter-spacing:-.07em;
}


.gamiq-start-sub{
  margin-top:3px;

  color:#5fefff;

  font-size:10px;
  font-weight:1000;

  letter-spacing:.28em;
}


.gamiq-start-inner h1{
  margin:
    32px 0 17px;

  color:#ffffff;

  font-size:
    clamp(
      29px,
      5vw,
      47px
    );

  line-height:1.25;

  letter-spacing:-.04em;
}


.gamiq-start-inner p{
  margin:0;

  color:#919cac;

  font-size:14px;

  line-height:1.9;
}


.gamiq-start-button{
  display:block;

  min-width:200px;
  min-height:58px;

  margin:
    28px auto 16px;

  border:0;

  border-radius:16px;

  background:
    linear-gradient(
      180deg,
      #b7f9ff,
      #5bdff1
    );

  color:#031014;

  font-size:16px;
  font-weight:1000;

  letter-spacing:.08em;

  cursor:pointer;

  box-shadow:
    0 0 35px
    rgba(65,220,245,.16);
}


.gamiq-start-button:active{
  transform:scale(.97);
}


.gamiq-start-inner small{
  color:#616c7d;

  font-size:10px;
}


/* =========================================================
GENERIC GAME UI
========================================================= */

.three-stage,
.reflex-stage,
.memory-wrap,
.puzzle-wrap{
  width:100%;
  height:100%;

  min-height:0;
}


.three-stage{
  position:relative;

  overflow:hidden;

  border-radius:20px;

  background:#050910;
}


.three-hud{
  position:absolute;

  z-index:10;

  left:12px;
  top:12px;

  padding:
    7px 11px;

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

  border-radius:10px;

  background:
    rgba(0,0,0,.46);

  color:#ffffff;
}


.three-hud span{
  display:block;

  color:#778294;

  font-size:7px;
  font-weight:1000;

  letter-spacing:.15em;
}


.three-hud strong{
  font-size:17px;
}


/* =========================================================
MEMORY
========================================================= */

.memory-wrap{
  display:flex;
  flex-direction:column;

  gap:10px;
}


.memory-head,
.memory-status{
  min-height:40px;

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

  padding:
    0 14px;

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

  border-radius:12px;

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

  color:#ffffff;
}


.memory-head span,
.memory-status span{
  color:#788496;

  font-size:8px;
  font-weight:1000;

  letter-spacing:.16em;
}


.memory-head strong,
.memory-status strong{
  font-size:18px;
  font-weight:1000;
}


.memory-grid{
  flex:1;

  width:100%;
  height:100%;

  min-height:0;

  display:grid;

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

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

  gap:10px;

  padding:12px;

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

  border-radius:20px;

  background:
    rgba(2,7,11,.7);

  aspect-ratio:auto;
}


.memory-cell,
.memory-number,
.memory-tile{
  min-width:0;
  min-height:0;

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

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

  border-radius:16px;

  background:
    linear-gradient(
      180deg,
      #182130,
      #0c1119
    );

  color:#ffffff;

  font-size:
    clamp(
      22px,
      4vw,
      38px
    );

  font-weight:1000;

  cursor:pointer;

  transition:
    transform .12s ease,
    background .15s ease,
    box-shadow .15s ease;
}


.memory-cell.active,
.memory-number.active,
.memory-tile.active{
  background:
    linear-gradient(
      180deg,
      #8affb0,
      #44df7e
    );

  color:#03120a;

  box-shadow:
    0 0 25px
    rgba(80,255,140,.24);
}


.memory-cell.correct,
.memory-number.correct,
.memory-tile.correct{
  background:#2bdc78;

  color:#03120a;

  transform:scale(.96);
}


.memory-cell.wrong,
.memory-number.wrong,
.memory-tile.wrong{
  background:#ff496a;

  animation:
    gamiq-shake
    .18s ease;
}


/* =========================================================
PUZZLE
========================================================= */

.puzzle-wrap{
  display:flex;
  flex-direction:column;

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

  gap:10px;
}


.puzzle-hud{
  width:100%;

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

  padding:
    9px 13px;

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

  border-radius:12px;

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

  color:#ffffff;
}


.block-board,
.pipe-grid,
.laser-puzzle{
  position:relative;

  width:min(
    100%,
    520px
  );

  max-width:520px;

  aspect-ratio:1/1;

  margin:
    0 auto;

  overflow:hidden;

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

  border-radius:20px;

  background:
    linear-gradient(
      180deg,
      #101722,
      #060a10
    );
}


.block-tile{
  position:absolute;

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

  border-radius:10px;

  background:
    linear-gradient(
      180deg,
      #526073,
      #2c3541
    );

  cursor:grab;

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


.block-tile.target{
  background:
    linear-gradient(
      180deg,
      #ff6b78,
      #e73758
    );

  box-shadow:
    0 0 18px
    rgba(255,55,90,.25);
}


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

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

  background:#101722;

  color:#55eaff;

  cursor:pointer;
}


.laser-puzzle{
  display:flex;
  align-items:center;
  justify-content:center;
}


/* =========================================================
REFLEX - SHARED
========================================================= */

.reflex-game{
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;

  gap:10px;
}


.reflex-game-hud{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:
    9px 13px;

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

  border-radius:12px;

  background:
    rgba(255,255,255,.025);
}


.reflex-game-hud span{
  color:#7b8798;

  font-size:8px;
  font-weight:1000;

  letter-spacing:.14em;
}


.reflex-game-hud strong{
  font-size:19px;
}


.reflex-screen-hit{
  animation:
    reflex-hit-flash
    .18s ease;
}


.reflex-screen-fail{
  animation:
    gamiq-shake
    .2s ease;
}


@keyframes reflex-hit-flash{

  0%{
    filter:brightness(1);
  }

  40%{
    filter:brightness(1.75);
  }

  100%{
    filter:brightness(1);
  }

}


/* =========================================================
NINJA COUNTER
========================================================= */

.ninja-arena{
  position:relative;

  flex:1;

  min-height:0;

  overflow:hidden;

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

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

  border-radius:20px;

  background:
    radial-gradient(
      circle at 50% 55%,
      rgba(55,255,130,.12),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #07120d,
      #030704
    );
}


.ninja-player{
  position:relative;

  z-index:5;

  font-size:
    clamp(
      86px,
      17vw,
      150px
    );

  transition:
    transform .12s ease;

  filter:
    drop-shadow(
      0 15px 24px
      rgba(0,0,0,.45)
    );
}


.ninja-player.slash-left{
  transform:
    translateX(-35px)
    rotate(-12deg)
    scale(1.08);
}


.ninja-player.slash-right{
  transform:
    translateX(35px)
    rotate(12deg)
    scale(1.08);
}


.ninja-player.slash-up{
  transform:
    translateY(-28px)
    scale(1.08);
}


.ninja-danger{
  position:absolute;

  z-index:4;

  width:72px;
  height:72px;

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

  border-radius:50%;

  background:
    rgba(255,70,95,.16);

  color:#ff5873;

  font-size:40px;
  font-weight:1000;

  opacity:0;

  transform:scale(.4);

  box-shadow:
    0 0 30px
    rgba(255,70,95,.3);

  transition:
    opacity .08s ease,
    transform .08s ease;
}


.ninja-danger.show{
  opacity:1;
}


.ninja-danger-top{
  top:10%;
  left:50%;

  transform:
    translateX(-50%)
    scale(.4);
}


.ninja-danger-top.show{
  transform:
    translateX(-50%)
    scale(1);
}


.ninja-danger-left{
  left:8%;
  top:50%;

  transform:
    translateY(-50%)
    scale(.4);
}


.ninja-danger-left.show{
  transform:
    translateY(-50%)
    scale(1);
}


.ninja-danger-right{
  right:8%;
  top:50%;

  transform:
    translateY(-50%)
    scale(.4);
}


.ninja-danger-right.show{
  transform:
    translateY(-50%)
    scale(1);
}


.ninja-controls{
  display:grid;

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

  gap:8px;
}


.ninja-controls button{
  min-height:58px;

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

  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      #17221d,
      #08100b
    );

  color:#8effaf;

  font-size:27px;
  font-weight:1000;

  cursor:pointer;
}


.reflex-impact{
  position:absolute;

  z-index:20;

  left:50%;
  top:22%;

  transform:
    translate(-50%,-50%)
    scale(.6);

  font-size:
    clamp(
      27px,
      5vw,
      44px
    );

  font-weight:1000;

  opacity:0;

  pointer-events:none;
}


.reflex-impact.show{
  animation:
    reflex-impact-pop
    .3s ease;
}


.reflex-impact.success{
  color:#71ffa0;
}


.reflex-impact.fail{
  color:#ff5873;
}


@keyframes reflex-impact-pop{

  0%{
    opacity:0;

    transform:
      translate(-50%,-50%)
      scale(.5);
  }

  45%{
    opacity:1;

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

  100%{
    opacity:0;

    transform:
      translate(-50%,-70%)
      scale(.95);
  }

}


/* =========================================================
QUICK DRAW
========================================================= */

.duel-game{
  width:100%;
  height:100%;
}


.duel-arena{
  position:relative;

  flex:1;

  min-height:0;

  overflow:hidden;

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

  border-radius:20px;

  background:
    linear-gradient(
      180deg,
      #f48b46 0%,
      #70371f 42%,
      #18100c 43%,
      #070605 100%
    );
}


.duel-sun{
  position:absolute;

  top:11%;

  width:115px;
  height:115px;

  border-radius:50%;

  background:
    rgba(255,225,145,.8);
}


.duel-opponent{
  position:relative;

  z-index:4;

  margin-top:50px;

  font-size:
    clamp(
      95px,
      18vw,
      165px
    );

  transition:
    transform .13s ease;
}


.duel-opponent.duel-fake{
  transform:
    rotate(-4deg)
    translateY(-5px);
}


.duel-opponent.duel-hit{
  transform:
    rotate(22deg)
    translateX(35px);
}


.duel-message{
  position:absolute;

  z-index:10;

  bottom:11%;

  padding:
    9px 17px;

  border-radius:999px;

  background:
    rgba(0,0,0,.55);

  color:#ffffff;

  font-size:13px;
  font-weight:1000;

  letter-spacing:.15em;
}


.duel-draw
.duel-message{
  color:#ffdd79;

  box-shadow:
    0 0 25px
    rgba(255,220,120,.25);
}


.duel-shoot{
  min-height:58px;

  border:0;

  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      #ffe18a,
      #ff9d43
    );

  color:#241204;

  font-size:16px;
  font-weight:1000;

  letter-spacing:.15em;

  cursor:pointer;
}


/* =========================================================
LANE PANIC
========================================================= */

.lane-panic-game{
  width:100%;
  height:100%;
}


.lane-panic-arena{
  flex:1;

  min-height:0;

  overflow:hidden;

  border-radius:20px;

  background:#080b10;
}


.lane-panic-road{
  position:relative;

  width:100%;
  height:100%;

  min-height:280px;

  background:
    linear-gradient(
      90deg,
      transparent 32.5%,
      rgba(255,255,255,.11) 33%,
      transparent 33.5%,
      transparent 66%,
      rgba(255,255,255,.11) 66.5%,
      transparent 67%
    ),
    linear-gradient(
      180deg,
      #101722,
      #05070a
    );
}


.lane-warning{
  position:absolute;

  top:8%;

  transform:
    translateX(-50%);

  font-size:54px;

  opacity:0;
}


.lane-warning.show{
  animation:
    lane-warning-drop
    .7s linear;
}


@keyframes lane-warning-drop{

  0%{
    top:5%;
    opacity:0;
  }

  15%{
    opacity:1;
  }

  100%{
    top:75%;
    opacity:1;
  }

}


.lane-player{
  position:absolute;

  left:50%;
  bottom:8%;

  transform:
    translateX(-50%);

  color:#5feaff;

  font-size:50px;

  transition:
    left .13s ease,
    transform .12s ease;
}


.lane-panic-controls{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:8px;
}


.lane-panic-controls button{
  min-height:58px;

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

  border-radius:14px;

  background:#121a25;

  color:#ffffff;

  font-size:27px;

  cursor:pointer;
}


/* =========================================================
FRIEND OR FOE
========================================================= */

.friend-foe-game{
  width:100%;
  height:100%;
}


.friend-foe-arena{
  flex:1;

  min-height:0;

  display:grid;

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

  align-items:center;

  gap:10px;

  padding:20px;

  border-radius:20px;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(80,220,255,.08),
      transparent 30%
    ),
    #050913;
}


.foe-target{
  min-width:0;

  aspect-ratio:1/1;

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

  border-radius:17px;

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

  font-size:
    clamp(
      48px,
      8vw,
      84px
    );

  cursor:pointer;
}


.foe-target.foe-hit{
  background:
    rgba(60,235,130,.22);

  transform:scale(1.08);
}


.foe-target.foe-wrong{
  background:
    rgba(255,70,100,.22);

  animation:
    gamiq-shake
    .18s ease;
}


.foe-status{
  min-height:32px;

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

  color:#828d9d;

  font-size:10px;
  font-weight:1000;

  letter-spacing:.14em;
}


/* =========================================================
THREE.JS GENERIC
========================================================= */

.three-stage canvas,
.zombie-3d-world canvas,
.space-blaster-world canvas,
.race-3d-world canvas,
.factory-3d-world canvas{
  display:block;

  width:100% !important;
  height:100% !important;
}


/* =========================================================
ZOMBIE SLASH
========================================================= */

.zombie-slash-wrap{
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;

  gap:9px;
}


.zombie-slash-hud{
  display:grid;

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

  gap:7px;
}


.zombie-hud-item{
  padding:
    8px 10px;

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

  border-radius:11px;

  background:
    rgba(5,12,8,.76);

  text-align:center;
}


.zombie-hud-item span{
  display:block;

  margin-bottom:2px;

  color:
    rgba(255,255,255,.46);

  font-size:7px;
  font-weight:1000;

  letter-spacing:.15em;
}


.zombie-hud-item strong{
  color:#ffffff;

  font-size:16px;
  font-weight:1000;
}


.zombie-combo-item strong{
  color:#74ffa0;
}


.zombie-life-item strong{
  color:#ff5270;
}


.zombie-slash-stage{
  position:relative;

  flex:1;

  min-height:0;

  overflow:hidden;

  border-radius:19px;

  background:#030706;

  touch-action:none;
}


.zombie-3d-world{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;
}


.zombie-slash-canvas{
  position:absolute;

  z-index:20;

  inset:0;

  width:100%;
  height:100%;

  cursor:crosshair;

  touch-action:none;
}


.zombie-slash-hint{
  position:absolute;

  z-index:12;

  left:50%;
  bottom:13px;

  transform:
    translateX(-50%);

  padding:
    6px 11px;

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

  border-radius:999px;

  background:
    rgba(0,0,0,.42);

  color:
    rgba(255,255,255,.62);

  font-size:8px;
  font-weight:1000;

  letter-spacing:.15em;

  pointer-events:none;

  animation:
    zombie-hint-fade
    2.4s ease forwards;
}


@keyframes zombie-hint-fade{

  0%{
    opacity:0;
  }

  15%,
  65%{
    opacity:1;
  }

  100%{
    opacity:0;
  }

}


.zombie-slash-message{
  position:absolute;

  z-index:30;

  left:50%;
  top:32%;

  transform:
    translate(-50%,-50%)
    scale(.55);

  color:#ffffff;

  font-size:
    clamp(
      29px,
      6vw,
      52px
    );

  font-weight:1000;

  font-style:italic;

  opacity:0;

  pointer-events:none;

  text-shadow:
    0 0 18px
    rgba(100,255,150,.8);
}


.zombie-slash-message.show{
  animation:
    zombie-message-pop
    .4s ease;
}


@keyframes zombie-message-pop{

  0%{
    opacity:0;

    transform:
      translate(-50%,-50%)
      scale(.5);
  }

  35%{
    opacity:1;

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

  100%{
    opacity:0;

    transform:
      translate(-50%,-75%)
      scale(.95);
  }

}


.zombie-slash-combo-pop{
  position:absolute;

  z-index:31;

  right:8%;
  top:16%;

  color:#77ffa0;

  font-size:
    clamp(
      25px,
      5vw,
      43px
    );

  font-weight:1000;

  opacity:0;

  pointer-events:none;
}


.zombie-slash-combo-pop.show{
  animation:
    gamiq-combo-pop
    .36s ease;
}


.zombie-stage-hit{
  animation:
    zombie-hit-screen
    .14s ease;
}


@keyframes zombie-hit-screen{

  0%{
    filter:brightness(1);
  }

  45%{
    filter:
      brightness(1.55)
      saturate(1.4);
  }

  100%{
    filter:brightness(1);
  }

}


.zombie-stage-damage{
  animation:
    gamiq-shake
    .26s ease;

  box-shadow:
    inset 0 0 70px
    rgba(255,40,70,.35);
}


/* =========================================================
SPACE BLASTER
========================================================= */

.space-blaster-wrap{
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;

  gap:9px;
}


.space-blaster-hud{
  display:grid;

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

  gap:7px;
}


.space-hud-item{
  padding:
    8px 9px;

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

  border-radius:11px;

  background:
    rgba(4,8,18,.82);

  text-align:center;
}


.space-hud-item span{
  display:block;

  margin-bottom:2px;

  color:
    rgba(255,255,255,.46);

  font-size:7px;
  font-weight:1000;

  letter-spacing:.14em;
}


.space-hud-item strong{
  color:#ffffff;

  font-size:15px;
  font-weight:1000;
}


.space-hud-item:nth-child(2)
strong{
  color:#61efff;
}


.space-blaster-stage{
  position:relative;

  flex:1;

  min-height:0;

  overflow:hidden;

  border-radius:19px;

  background:#01040b;

  cursor:none;

  touch-action:none;
}


.space-blaster-world{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;
}


.space-crosshair{
  position:absolute;

  z-index:30;

  width:42px;
  height:42px;

  transform:
    translate(-50%,-50%);

  border:
    2px solid
    rgba(98,239,255,.95);

  border-radius:50%;

  pointer-events:none;

  box-shadow:
    0 0 18px
    rgba(90,235,255,.7),

    inset 0 0 10px
    rgba(90,235,255,.25);
}


.space-crosshair::before,
.space-crosshair::after{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  background:#ffffff;

  transform:
    translate(-50%,-50%);
}


.space-crosshair::before{
  width:56px;
  height:2px;
}


.space-crosshair::after{
  width:2px;
  height:56px;
}


.space-crosshair span{
  position:absolute;

  left:50%;
  top:50%;

  width:5px;
  height:5px;

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  background:#ffffff;

  box-shadow:
    0 0 12px
    #61efff;
}


.space-blaster-message{
  position:absolute;

  z-index:40;

  left:50%;
  top:25%;

  transform:
    translate(-50%,-50%)
    scale(.6);

  color:#ffffff;

  font-size:
    clamp(
      28px,
      6vw,
      52px
    );

  font-weight:1000;

  font-style:italic;

  opacity:0;

  pointer-events:none;

  text-shadow:
    0 0 20px
    rgba(90,235,255,.8);
}


.space-blaster-message.show{
  animation:
    space-message-pop
    .42s ease;
}


@keyframes space-message-pop{

  0%{
    opacity:0;

    transform:
      translate(-50%,-50%)
      scale(.5);
  }

  35%{
    opacity:1;

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

  100%{
    opacity:0;

    transform:
      translate(-50%,-72%)
      scale(.95);
  }

}


.space-blaster-combo{
  position:absolute;

  z-index:40;

  right:7%;
  top:13%;

  color:#61efff;

  font-size:
    clamp(
      27px,
      5vw,
      46px
    );

  font-weight:1000;

  opacity:0;

  pointer-events:none;
}


.space-blaster-combo.show{
  animation:
    gamiq-combo-pop
    .36s ease;
}


.space-blaster-hint{
  position:absolute;

  z-index:15;

  left:50%;
  top:13px;

  transform:
    translateX(-50%);

  padding:
    6px 11px;

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

  border-radius:999px;

  background:
    rgba(0,0,0,.4);

  color:
    rgba(255,255,255,.63);

  font-size:8px;
  font-weight:1000;

  letter-spacing:.15em;

  pointer-events:none;

  animation:
    space-hint-fade
    2.6s ease forwards;
}


@keyframes space-hint-fade{

  0%{
    opacity:0;
  }

  15%,
  65%{
    opacity:1;
  }

  100%{
    opacity:0;
  }

}


/* =========================================================
SPACE MOBILE CONTROLS
========================================================= */

.space-mobile-controls{
  display:none;

  position:absolute;

  z-index:50;

  left:0;
  right:0;
  bottom:15px;

  padding:
    0 18px;

  align-items:flex-end;
  justify-content:space-between;

  pointer-events:none;
}


.space-joystick{
  position:relative;

  width:112px;
  height:112px;

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

  border-radius:50%;

  background:
    rgba(4,10,20,.46);

  backdrop-filter:
    blur(5px);

  box-shadow:
    inset 0 0 30px
    rgba(80,220,255,.08),

    0 0 20px
    rgba(0,0,0,.25);

  pointer-events:auto;

  touch-action:none;
}


.space-joystick::before,
.space-joystick::after{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

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

  transform:
    translate(-50%,-50%);
}


.space-joystick::before{
  width:68%;
  height:1px;
}


.space-joystick::after{
  width:1px;
  height:68%;
}


.space-joystick-knob{
  position:absolute;

  left:50%;
  top:50%;

  width:48px;
  height:48px;

  transform:
    translate(-50%,-50%);

  border:
    2px solid
    rgba(110,240,255,.7);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(130,245,255,.75),
      rgba(50,150,190,.5)
    );

  box-shadow:
    0 0 18px
    rgba(80,225,255,.5);

  pointer-events:none;
}


.space-mobile-fire{
  width:92px;
  height:92px;

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

  border:
    3px solid
    rgba(255,255,255,.65);

  border-radius:50%;

  background:
    radial-gradient(
      circle at 40% 35%,
      #9af7ff,
      #25badc 55%,
      #096e91
    );

  color:#001219;

  cursor:pointer;

  box-shadow:
    0 0 30px
    rgba(60,220,255,.45),

    inset 0 0 15px
    rgba(255,255,255,.32);

  pointer-events:auto;

  touch-action:none;

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


.space-mobile-fire span{
  font-size:42px;
  font-weight:1000;
}


.space-mobile-fire:active{
  transform:scale(.9);
}


.space-mobile-fire.shoot-kick{
  animation:
    space-mobile-shot
    .13s ease;
}


@keyframes space-mobile-shot{

  0%{
    transform:scale(1);
  }

  45%{
    transform:scale(.83);
  }

  100%{
    transform:scale(1);
  }

}


.space-blaster-bottom{
  display:flex;

  justify-content:center;
}


.space-life{
  min-width:180px;

  padding:
    7px 14px;

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

  border-radius:11px;

  background:
    rgba(4,8,18,.82);

  text-align:center;

  color:
    rgba(255,255,255,.42);

  font-size:8px;
  font-weight:1000;

  letter-spacing:.14em;
}


.space-life strong{
  margin-left:8px;

  color:#ff536f;

  font-size:14px;
}


.space-stage-kill{
  animation:
    space-kill-flash
    .22s ease;
}


@keyframes space-kill-flash{

  0%{
    filter:brightness(1);
  }

  35%{
    filter:
      brightness(1.9)
      saturate(1.6);
  }

  100%{
    filter:brightness(1);
  }

}


.space-stage-miss{
  animation:
    gamiq-shake
    .18s ease;
}


/* =========================================================
HIGHWAY / RACE
========================================================= */

.race-3d-wrap{
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;

  gap:9px;
}


.race-3d-hud{
  display:flex;
  justify-content:space-between;

  padding:
    8px 12px;

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

  border-radius:11px;

  background:
    rgba(5,8,14,.82);
}


.race-3d-world{
  position:relative;

  flex:1;

  min-height:0;

  overflow:hidden;

  border-radius:19px;

  background:#05070c;
}


.race-3d-controls{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:8px;
}


.race-3d-controls button{
  min-height:55px;

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

  border-radius:14px;

  background:#131b27;

  color:#ffffff;

  font-size:25px;
}


/* =========================================================
FACTORY - LEGACY SUPPORT
========================================================= */

.factory-3d-wrap{
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;

  gap:9px;
}


.factory-3d-world{
  position:relative;

  flex:1;

  min-height:0;

  overflow:hidden;

  border-radius:19px;

  background:#08100d;
}


.factory-3d-action{
  min-height:55px;

  border:0;

  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      #8cffac,
      #39d979
    );

  color:#04130a;

  font-weight:1000;
}


/* =========================================================
RESULTS OVERLAY - BROAD SUPPORT
========================================================= */

.gamiq-results-overlay,
.results-overlay{
  position:fixed;

  z-index:1000;

  inset:0;

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

  padding:20px;

  background:
    rgba(2,5,10,.86);

  backdrop-filter:
    blur(15px);
}


.gamiq-results-overlay.hidden,
.results-overlay.hidden{
  display:none;
}


.gamiq-results-panel,
.results-panel{
  width:min(
    520px,
    100%
  );

  max-height:
    calc(100vh - 40px);

  overflow:auto;

  padding:24px;

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

  border-radius:22px;

  background:
    linear-gradient(
      180deg,
      #121923,
      #080c12
    );

  box-shadow:
    0 30px 100px
    rgba(0,0,0,.5);
}


.gamiq-results-title,
.results-title{
  color:#778294;

  font-size:9px;
  font-weight:1000;

  letter-spacing:.18em;
}


.gamiq-results-score,
.results-score{
  margin:
    10px 0;

  font-size:
    clamp(
      58px,
      10vw,
      90px
    );

  font-weight:1000;

  line-height:1;
}


.gamiq-results-confidence,
.results-confidence{
  margin-top:16px;
}


.gamiq-results-bar,
.results-bar{
  height:7px;

  overflow:hidden;

  border-radius:999px;

  background:
    rgba(255,255,255,.08);
}


.gamiq-results-bar > *,
.results-bar > *{
  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #4bdfff,
      #72ffb0
    );
}


.gamiq-results-skills,
.results-skills{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:8px;

  margin-top:20px;
}


.gamiq-results-skill,
.results-skill{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:
    11px 12px;

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

  border-radius:11px;

  background:
    rgba(255,255,255,.025);
}


.gamiq-results-skill span,
.results-skill span{
  color:#778294;

  font-size:9px;
  font-weight:1000;
}


.gamiq-results-skill strong,
.results-skill strong{
  font-size:17px;
}


.gamiq-results-continue,
.results-continue{
  width:100%;

  min-height:52px;

  margin-top:20px;

  border:0;

  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      #b7f9ff,
      #5bdff1
    );

  color:#031014;

  font-weight:1000;

  cursor:pointer;
}


/* =========================================================
COMMON FX
========================================================= */

@keyframes gamiq-shake{

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

  25%{
    transform:
      translateX(-6px);
  }

  50%{
    transform:
      translateX(6px);
  }

  75%{
    transform:
      translateX(-3px);
  }

}


@keyframes gamiq-combo-pop{

  0%{
    opacity:0;

    transform:
      scale(.5);
  }

  45%{
    opacity:1;

    transform:
      scale(1.28);
  }

  100%{
    opacity:0;

    transform:
      scale(1);
  }

}


/* =========================================================
UNIFIED GAME SIZE
========================================================= */

.reflex-stage,
.reflex-scene,
.memory-wrap,
.puzzle-wrap,
.zombie-slash-wrap,
.space-blaster-wrap,
.race-3d-wrap,
.factory-3d-wrap,
.three-stage{
  max-width:none;
}


.reflex-scene{
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;

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


/* =========================================================
MOBILE
========================================================= */

@media(
  max-width:700px
){

  body{
    overflow:hidden;
  }


  .gamiq-live-header{
    height:60px;

    padding:
      0 11px;
  }


  .gamiq-live-brand strong{
    font-size:20px;
  }


  .gamiq-live-brand span{
    font-size:6px;
  }


  .gamiq-live-data{
    gap:10px;
  }


  .gamiq-live-item{
    min-width:42px;
  }


  .gamiq-live-item span{
    font-size:6px;
  }


  .gamiq-live-item strong{
    font-size:15px;
  }


  .gamiq-results-button{
    min-height:34px;

    padding:
      0 10px;

    border-radius:10px;

    font-size:9px;
  }


  .gamiq-feed{
    height:
      calc(100vh - 60px);
  }


  .gamiq-feed-card{
    padding:
      0;
  }


  .gamiq-game-shell{
    width:100%;
    height:100%;

    min-height:0;

    border-radius:0;

    border-left:0;
    border-right:0;
    border-bottom:0;
  }


  .gamiq-game-top{
    min-height:67px;

    padding:
      14px 13px 9px;
  }


  .gamiq-game-skill{
    font-size:8px;
  }


  .gamiq-game-top h2{
    font-size:
      clamp(
        22px,
        7vw,
        29px
      );
  }


  .gamiq-game-type{
    padding:
      5px 8px;

    font-size:7px;
  }


  .gamiq-game-host{
    padding:
      0 10px 10px;
  }


  .gamiq-rule-overlay{
    inset:
      67px 0 0;
  }


  .gamiq-rule-overlay strong{
    font-size:
      clamp(
        20px,
        7vw,
        27px
      );
  }


  .memory-grid{
    gap:7px;

    padding:8px;
  }


  .memory-cell,
  .memory-number,
  .memory-tile{
    border-radius:12px;
  }


  .friend-foe-arena{
    gap:7px;

    padding:9px;
  }


  .foe-target{
    border-radius:12px;
  }


  .zombie-slash-hud,
  .space-blaster-hud{
    gap:4px;
  }


  .zombie-hud-item,
  .space-hud-item{
    padding:
      6px 4px;
  }


  .zombie-hud-item strong,
  .space-hud-item strong{
    font-size:13px;
  }


  .zombie-slash-stage,
  .space-blaster-stage,
  .race-3d-world,
  .factory-3d-world{
    border-radius:14px;
  }


  .space-mobile-controls{
    display:flex;
  }


  .space-crosshair{
    width:35px;
    height:35px;
  }


  .space-crosshair::before{
    width:46px;
  }


  .space-crosshair::after{
    height:46px;
  }


  .gamiq-results-skills,
  .results-skills{
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
COARSE POINTER
========================================================= */

@media(
  pointer:coarse
){

  .space-mobile-controls{
    display:flex;
  }


  .space-blaster-stage{
    cursor:default;
  }


  .zombie-slash-canvas{
    cursor:default;
  }

}


/* =========================================================
VERY SMALL MOBILE
========================================================= */

@media(
  max-width:390px
){

  .gamiq-live-data{
    gap:6px;
  }


  .gamiq-results-button{
    padding:
      0 7px;

    font-size:8px;
  }


  .space-joystick{
    width:96px;
    height:96px;
  }


  .space-joystick-knob{
    width:42px;
    height:42px;
  }


  .space-mobile-fire{
    width:80px;
    height:80px;
  }


  .space-mobile-fire span{
    font-size:36px;
  }


  .space-mobile-controls{
    bottom:12px;

    padding:
      0 13px;
  }

}


/* =========================================================
GAMIQ V2 - CURRENT JS COMPATIBILITY FIX
Exact selectors for current puzzle.js / memory.js / results.js
========================================================= */


/* =========================================================
PUZZLE - CURRENT puzzle.js
========================================================= */

.puzzle-wrap{
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:12px;
}

.puzzle-top{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#ffffff;
}

.puzzle-top span{
  color:rgba(255,255,255,.62);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}

.puzzle-top strong{
  color:#ffffff;
  font-size:18px;
  font-weight:1000;
}

.puzzle-message{
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.86);
  font-size:14px;
  font-weight:700;
  text-align:center;
}


/* BLOCK ESCAPE */

.block-board{
  position:relative;
  flex:1;
  width:min(100%, 560px);
  min-height:0;
  margin:0 auto;
  aspect-ratio:1/1;
  display:grid;
  grid-template-columns:repeat(var(--grid-size, 6), minmax(0,1fr));
  grid-template-rows:repeat(var(--grid-size, 6), minmax(0,1fr));
  gap:6px;
  padding:8px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(180deg,#111923,#070b11);
  background-size:
    calc(100% / 6) calc(100% / 6),
    calc(100% / 6) calc(100% / 6),
    auto;
}

.block-board::after{
  content:"EXIT";
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  padding:5px 7px;
  border-radius:7px;
  background:rgba(255,80,105,.14);
  color:#ff657d;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.12em;
  pointer-events:none;
}

.puzzle-block{
  position:relative;
  z-index:3;
  min-width:0;
  min-height:0;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:linear-gradient(180deg,#596779,#303a47);
  color:#ffffff;
  font-size:10px;
  font-weight:1000;
  cursor:grab;
  touch-action:none;
  box-shadow:
    inset 0 1px rgba(255,255,255,.10),
    0 5px 14px rgba(0,0,0,.18);
  transition:transform .1s ease, filter .1s ease;
}

.puzzle-block:active{
  cursor:grabbing;
  transform:scale(.97);
  filter:brightness(1.12);
}

.puzzle-block.target{
  background:linear-gradient(180deg,#ff7885,#ec3f60);
  box-shadow:
    inset 0 1px rgba(255,255,255,.24),
    0 0 24px rgba(255,63,96,.28);
}


/* PIPE CONNECT */

.pipe-grid{
  flex:1;
  width:min(100%, 520px);
  min-height:0;
  margin:0 auto;
  aspect-ratio:1/1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  background:linear-gradient(180deg,#101822,#060a10);
}

.pipe-tile{
  min-width:0;
  min-height:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:linear-gradient(180deg,#182433,#0d141e);
  color:#5feaff;
  font-size:clamp(32px,7vw,64px);
  font-weight:800;
  line-height:1;
  cursor:pointer;
  box-shadow:inset 0 1px rgba(255,255,255,.05);
  transition:filter .12s ease;
}

.pipe-tile:active{
  filter:brightness(1.3);
}


/* LASER MIRROR */

.laser-puzzle{
  position:relative;
  flex:1;
  width:min(100%, 560px);
  min-height:0;
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  background:
    radial-gradient(circle at 20% 50%,rgba(255,216,77,.05),transparent 18%),
    radial-gradient(circle at 80% 50%,rgba(90,235,255,.05),transparent 18%),
    linear-gradient(180deg,#101822,#060a10);
}

.laser-source,
.laser-target{
  position:absolute;
  z-index:5;
  top:50%;
  transform:translateY(-50%);
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:28px;
  pointer-events:none;
}

.laser-source{
  left:9%;
  background:rgba(255,210,70,.10);
  box-shadow:0 0 25px rgba(255,210,70,.12);
}

.laser-target{
  right:9%;
  border:2px solid rgba(90,235,255,.5);
  color:#69efff;
  background:rgba(90,235,255,.06);
  box-shadow:0 0 25px rgba(90,235,255,.12);
}

.laser-mirror{
  position:absolute;
  z-index:10;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:78px;
  height:78px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  background:linear-gradient(180deg,#202d3b,#0e151e);
  color:#ffffff;
  font-size:46px;
  font-weight:300;
  cursor:pointer;
  box-shadow:0 0 26px rgba(255,255,255,.06);
}

.laser-mirror:active{
  transform:translate(-50%,-50%) scale(.95);
}

.laser-beam{
  position:absolute;
  z-index:4;
  left:17%;
  top:50%;
  width:33%;
  height:3px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,#ffd54c,#fff6be);
  box-shadow:0 0 14px rgba(255,215,76,.75);
  pointer-events:none;
}

.laser-beam::after{
  content:"";
  position:absolute;
  left:100%;
  top:0;
  width:0;
  height:3px;
  background:linear-gradient(90deg,#fff6be,#61efff);
  box-shadow:0 0 14px rgba(97,239,255,.75);
  transition:width .22s ease;
}

.laser-beam.success::after{
  width:100%;
}


/* =========================================================
MEMORY - CURRENT memory.js
========================================================= */

.memory-wrap{
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:10px;
}

.memory-top{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4px;
  color:#ffffff;
}

.memory-top span{
  color:rgba(255,255,255,.72);
  font-size:14px;
  font-weight:800;
}

.memory-top strong{
  color:#ffffff;
  font-size:18px;
  font-weight:1000;
}

.memory-grid{
  flex:1;
  width:100%;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(4,minmax(0,1fr));
  gap:10px;
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:#050a0f;
}

.memory-cell{
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:15px;
  background:linear-gradient(180deg,#182231,#0d141e);
  color:#06120b;
  font-size:clamp(24px,5vw,44px);
  font-weight:1000;
  cursor:pointer;
  transition:
    transform .10s ease,
    background .12s ease,
    box-shadow .12s ease,
    color .12s ease;
}

.memory-cell:active{
  transform:scale(.96);
}

.memory-flash,
.memory-target,
.memory-number-visible{
  background:linear-gradient(180deg,#98ffba,#49e77f) !important;
  color:#06120b !important;
  box-shadow:
    0 0 26px rgba(81,255,145,.35),
    inset 0 1px rgba(255,255,255,.35) !important;
  transform:scale(.97);
}

.memory-correct{
  background:linear-gradient(180deg,#8effb4,#36da75) !important;
  color:#06120b !important;
  box-shadow:0 0 24px rgba(70,240,125,.25) !important;
}

.memory-wrong{
  background:linear-gradient(180deg,#ff7187,#e63c5d) !important;
  color:#ffffff !important;
  animation:gamiq-shake .18s ease;
}

.memory-message{
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.82);
  font-size:13px;
  font-weight:900;
  letter-spacing:.06em;
  text-align:center;
}


/* =========================================================
RESULTS - CURRENT results.js
========================================================= */

.gamiq-results-overlay{
  position:fixed;
  z-index:1000;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(2,5,10,.88);
  backdrop-filter:blur(15px);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .20s ease,
    visibility .20s ease;
}

.gamiq-results-overlay.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.gamiq-results-card{
  width:min(520px,100%);
  max-height:calc(100vh - 40px);
  overflow:auto;
  padding:26px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:linear-gradient(180deg,#121a24,#080c12);
  box-shadow:0 30px 100px rgba(0,0,0,.5);
}

.gamiq-results-label{
  color:#7c8798;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.16em;
}

.gamiq-results-score{
  margin:8px 0 18px;
  color:#ffffff;
  font-size:clamp(68px,11vw,104px);
  font-weight:1000;
  line-height:.9;
  letter-spacing:-.05em;
}

.gamiq-results-confidence{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
  color:rgba(255,255,255,.72);
  font-size:12px;
}

.gamiq-results-confidence strong{
  color:#ffffff;
  font-size:15px;
}

.gamiq-results-confidence-track{
  width:100%;
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}

.gamiq-results-confidence-fill{
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#58dff3,#79f6ab);
  transition:width .35s ease;
}

.gamiq-results-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:20px;
}

.gamiq-result-item{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:11px;
  background:rgba(255,255,255,.025);
}

.gamiq-result-item span{
  color:#7c8798;
  font-size:9px;
  font-weight:1000;
}

.gamiq-result-item strong{
  color:#ffffff;
  font-size:17px;
  font-weight:1000;
}

.gamiq-results-played{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
  padding:11px 12px;
  border-top:1px solid rgba(255,255,255,.07);
}

.gamiq-results-played span{
  color:#7c8798;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.12em;
}

.gamiq-results-played strong{
  color:#ffffff;
  font-size:17px;
}

.gamiq-results-next{
  min-height:22px;
  margin-top:7px;
  color:#9aa5b5;
  font-size:12px;
  line-height:1.5;
}

.gamiq-results-continue{
  width:100%;
  min-height:52px;
  margin-top:18px;
  border:0;
  border-radius:14px;
  background:linear-gradient(180deg,#b5f8ff,#59dced);
  color:#031014;
  font-size:14px;
  font-weight:1000;
  cursor:pointer;
}

.gamiq-results-continue:hover{
  filter:brightness(1.05);
}

.gamiq-results-continue:active{
  transform:scale(.98);
}


/* =========================================================
MOBILE COMPATIBILITY
========================================================= */

@media(max-width:700px){

  .puzzle-top,
  .memory-top{
    min-height:36px;
  }

  .block-board,
  .pipe-grid,
  .laser-puzzle{
    width:100%;
  }

  .puzzle-block{
    border-radius:8px;
  }

  .memory-grid{
    gap:7px;
    padding:8px;
  }

  .memory-cell{
    border-radius:12px;
  }

  .gamiq-results-card{
    padding:20px 16px;
  }

  .gamiq-results-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:390px){

  .gamiq-results-grid{
    grid-template-columns:1fr;
  }
}





/* =========================================================
HIGHWAY DODGE V2
========================================================= */

.highway-dodge-wrap{
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;

  gap:9px;
}


/* =============================
HUD
============================= */

.highway-dodge-hud{
  display:grid;

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

  gap:7px;
}


.highway-hud-item{
  padding:
    8px 9px;

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

  border-radius:11px;

  background:
    rgba(5,9,16,.82);

  text-align:center;
}


.highway-hud-item span{
  display:block;

  margin-bottom:2px;

  color:
    rgba(255,255,255,.46);

  font-size:7px;
  font-weight:1000;

  letter-spacing:.14em;
}


.highway-hud-item strong{
  color:#fff;

  font-size:15px;
  font-weight:1000;
}


.highway-hud-item:nth-child(2)
strong{
  color:#67efff;
}


/* =============================
STAGE
============================= */

.highway-dodge-stage{
  position:relative;

  flex:1;

  min-height:0;

  overflow:hidden;

  border-radius:19px;

  background:#03060a;

  touch-action:none;
}


.highway-dodge-world{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;
}


.highway-dodge-world canvas{
  display:block;

  width:100% !important;
  height:100% !important;
}


/* =============================
LIFE
============================= */

.highway-life-panel{
  position:absolute;

  z-index:20;

  left:14px;
  top:14px;

  display:flex;
  flex-direction:column;

  gap:3px;

  padding:
    7px 10px;

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

  border-radius:10px;

  background:
    rgba(0,0,0,.4);

  backdrop-filter:
    blur(5px);
}


.highway-life-panel span{
  color:
    rgba(255,255,255,.45);

  font-size:7px;
  font-weight:1000;

  letter-spacing:.15em;
}


.highway-life-panel strong{
  color:#ff5773;

  font-size:14px;

  letter-spacing:.1em;
}


/* =============================
MESSAGE
============================= */

.highway-message{
  position:absolute;

  z-index:30;

  left:50%;
  top:28%;

  transform:
    translate(-50%,-50%)
    scale(.55);

  color:#fff;

  font-size:
    clamp(
      29px,
      6vw,
      52px
    );

  font-weight:1000;

  font-style:italic;

  opacity:0;

  pointer-events:none;

  text-shadow:
    0 0 22px
    rgba(70,220,255,.75);
}


.highway-message.show{
  animation:
    highway-message-pop
    .42s ease;
}


@keyframes highway-message-pop{

  0%{
    opacity:0;

    transform:
      translate(-50%,-50%)
      scale(.5);
  }

  35%{
    opacity:1;

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

  100%{
    opacity:0;

    transform:
      translate(-50%,-75%)
      scale(.95);
  }

}


/* =============================
COMBO
============================= */

.highway-combo-pop{
  position:absolute;

  z-index:30;

  right:8%;
  top:16%;

  color:#69efff;

  font-size:
    clamp(
      26px,
      5vw,
      44px
    );

  font-weight:1000;

  opacity:0;

  pointer-events:none;

  text-shadow:
    0 0 20px
    rgba(70,225,255,.7);
}


.highway-combo-pop.show{
  animation:
    highway-combo-pop
    .35s ease;
}


@keyframes highway-combo-pop{

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

  45%{
    opacity:1;
    transform:scale(1.3);
  }

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

}


/* =============================
HINT
============================= */

.highway-hint{
  position:absolute;

  z-index:15;

  left:50%;
  bottom:13px;

  transform:
    translateX(-50%);

  padding:
    6px 11px;

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

  border-radius:999px;

  background:
    rgba(0,0,0,.4);

  color:
    rgba(255,255,255,.65);

  font-size:8px;
  font-weight:1000;

  letter-spacing:.16em;

  pointer-events:none;

  animation:
    highway-hint-fade
    2.4s ease forwards;
}


@keyframes highway-hint-fade{

  0%{
    opacity:0;
  }

  15%,
  65%{
    opacity:1;
  }

  100%{
    opacity:0;
  }

}


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

.highway-controls{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:10px;
}


.highway-control-button{
  min-height:58px;

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

  border-radius:15px;

  background:
    linear-gradient(
      180deg,
      #172230,
      #0b111a
    );

  color:#fff;

  font-size:29px;
  font-weight:1000;

  cursor:pointer;

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


.highway-control-button:active{
  transform:
    scale(.96);

  background:
    linear-gradient(
      180deg,
      #203247,
      #0d1723
    );
}


/* =============================
FX
============================= */

.highway-crash{
  animation:
    highway-crash-screen
    .34s ease;
}


@keyframes highway-crash-screen{

  0%,
  100%{
    transform:
      translateX(0);

    filter:
      brightness(1);
  }

  20%{
    transform:
      translateX(-9px);

    filter:
      brightness(1.8)
      saturate(1.5);
  }

  40%{
    transform:
      translateX(9px);
  }

  60%{
    transform:
      translateX(-5px);
  }

  80%{
    transform:
      translateX(4px);
  }

}


.highway-near-miss{
  animation:
    highway-near-miss
    .2s ease;
}


@keyframes highway-near-miss{

  0%{
    filter:
      brightness(1);
  }

  40%{
    filter:
      brightness(1.45)
      saturate(1.4);
  }

  100%{
    filter:
      brightness(1);
  }

}


.highway-lane-shift{
  animation:
    highway-lane-shift
    .14s ease;
}


@keyframes highway-lane-shift{

  0%{
    filter:
      brightness(1);
  }

  50%{
    filter:
      brightness(1.12);
  }

  100%{
    filter:
      brightness(1);
  }

}


/* =============================
MOBILE
============================= */

@media(max-width:700px){

  .highway-dodge-hud{
    gap:4px;
  }


  .highway-hud-item{
    padding:
      6px 4px;
  }


  .highway-hud-item strong{
    font-size:13px;
  }


  .highway-dodge-stage{
    border-radius:14px;
  }


  .highway-control-button{
    min-height:62px;

    font-size:31px;
  }

}



/* =========================================================
NINJA COUNTER V2
========================================================= */

.ninja-counter-wrap{
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;

  gap:9px;
}


/* =============================
HUD
============================= */

.ninja-counter-hud{
  display:grid;

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

  gap:7px;
}


.ninja-counter-hud-item{
  padding:8px 9px;

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

  border-radius:11px;

  background:
    rgba(4,10,7,.84);

  text-align:center;
}


.ninja-counter-hud-item span{
  display:block;

  margin-bottom:2px;

  color:
    rgba(255,255,255,.45);

  font-size:7px;
  font-weight:1000;

  letter-spacing:.14em;
}


.ninja-counter-hud-item strong{
  color:#fff;

  font-size:15px;
  font-weight:1000;
}


.ninja-counter-hud-item:nth-child(2)
strong{
  color:#75ffa5;
}


.ninja-life-value{
  color:#ff5672 !important;

  letter-spacing:.08em;
}


/* =============================
STAGE
============================= */

.ninja-counter-stage{
  position:relative;

  flex:1;

  min-height:0;

  overflow:hidden;

  border-radius:19px;

  background:
    radial-gradient(
      circle at 50% 55%,
      rgba(42,150,70,.13),
      transparent 27%
    ),
    linear-gradient(
      180deg,
      #07100c,
      #020403
    );

  touch-action:none;
}


.ninja-dojo-bg{
  position:absolute;

  inset:0;

  overflow:hidden;
}


.ninja-dojo-bg::before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:33%;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.025) 0 1px,
      transparent 1px 70px
    ),
    linear-gradient(
      180deg,
      #080d09,
      #020302
    );

  transform:
    perspective(280px)
    rotateX(60deg);

  transform-origin:
    bottom;
}


.ninja-moon{
  position:absolute;

  left:50%;
  top:14%;

  width:130px;
  height:130px;

  transform:
    translateX(-50%);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      #e6f4dc,
      #9ab68e 65%,
      #566b51
    );

  opacity:.16;

  box-shadow:
    0 0 70px
    rgba(180,255,190,.12);
}


.ninja-floor-line{
  position:absolute;

  left:0;
  right:0;
  bottom:24%;

  height:1px;

  background:
    rgba(125,255,160,.09);
}


/* =============================
PLAYER
============================= */

.ninja-player-v2{
  position:absolute;

  z-index:10;

  left:50%;
  bottom:16%;

  width:82px;
  height:128px;

  transform:
    translateX(-50%);

  transform-origin:
    50% 80%;

  transition:
    transform .08s ease;
}


.ninja-player-head{
  position:absolute;

  left:50%;
  top:2px;

  width:42px;
  height:38px;

  transform:
    translateX(-50%);

  border-radius:
    45% 45% 38% 38%;

  background:#111b15;

  border:
    2px solid
    rgba(110,255,150,.22);
}


.ninja-player-head::after{
  content:"";

  position:absolute;

  left:5px;
  right:5px;
  top:16px;

  height:7px;

  border-radius:4px;

  background:#060a07;
}


.ninja-player-head i{
  position:absolute;

  z-index:2;

  left:11px;
  top:18px;

  width:5px;
  height:2px;

  background:#84ffab;

  box-shadow:
    15px 0
    #84ffab;
}


.ninja-player-body{
  position:absolute;

  left:50%;
  top:35px;

  width:58px;
  height:72px;

  transform:
    translateX(-50%);

  border-radius:
    18px 18px 10px 10px;

  background:
    linear-gradient(
      180deg,
      #18281d,
      #09110c
    );

  border:
    1px solid
    rgba(110,255,150,.15);
}


.ninja-player-arm{
  position:absolute;

  left:47px;
  top:55px;

  width:43px;
  height:13px;

  border-radius:10px;

  background:#101d15;

  transform:
    rotate(-18deg);

  transform-origin:left center;
}


.ninja-player-sword{
  position:absolute;

  left:66px;
  top:31px;

  width:5px;
  height:91px;

  border-radius:4px;

  background:
    linear-gradient(
      90deg,
      #9db5ad,
      #ffffff,
      #6e837c
    );

  transform:
    rotate(30deg);

  transform-origin:
    50% 85%;

  box-shadow:
    0 0 9px
    rgba(180,255,220,.32);
}


.ninja-player-sword::after{
  content:"";

  position:absolute;

  left:-7px;
  bottom:13px;

  width:19px;
  height:5px;

  border-radius:3px;

  background:#896d31;
}


/* =============================
ENEMY
============================= */

.ninja-enemy{
  position:absolute;

  z-index:8;

  width:66px;
  height:100px;

  opacity:0;

  pointer-events:none;
}


.ninja-enemy-head{
  position:absolute;

  left:50%;
  top:0;

  width:35px;
  height:34px;

  transform:
    translateX(-50%);

  border-radius:
    45% 45% 38% 38%;

  background:#211317;

  border:
    1px solid
    rgba(255,80,110,.34);
}


.ninja-enemy-head::after{
  content:"";

  position:absolute;

  left:5px;
  right:5px;
  top:15px;

  height:6px;

  border-radius:3px;

  background:#080506;
}


.ninja-enemy-head i{
  position:absolute;

  z-index:2;

  left:9px;
  top:17px;

  width:4px;
  height:2px;

  background:#ff536d;

  box-shadow:
    13px 0
    #ff536d;
}


.ninja-enemy-body{
  position:absolute;

  left:50%;
  top:30px;

  width:48px;
  height:60px;

  transform:
    translateX(-50%);

  border-radius:
    13px 13px 8px 8px;

  background:
    linear-gradient(
      180deg,
      #331921,
      #10080b
    );

  border:
    1px solid
    rgba(255,75,105,.22);
}


.ninja-enemy-sword{
  position:absolute;

  left:47px;
  top:13px;

  width:4px;
  height:72px;

  background:
    linear-gradient(
      90deg,
      #8d9298,
      #ffffff,
      #6d747b
    );

  transform:
    rotate(35deg);

  transform-origin:
    bottom center;
}


.ninja-enemy-left{
  left:-85px;
  bottom:26%;
}


.ninja-enemy-right{
  right:-85px;
  bottom:26%;
}


.ninja-enemy-up{
  left:50%;
  top:-115px;

  transform:
    translateX(-50%)
    rotate(180deg);
}


/* =============================
ATTACK ANIMATION
============================= */

.ninja-enemy-left.attack{
  animation:
    ninja-left-attack
    .7s cubic-bezier(.15,.75,.35,1)
    forwards;
}


@keyframes ninja-left-attack{

  0%{
    left:-85px;
    opacity:0;
  }

  18%{
    opacity:1;
  }

  100%{
    left:calc(50% - 95px);
    opacity:1;
  }

}


.ninja-enemy-right.attack{
  animation:
    ninja-right-attack
    .7s cubic-bezier(.15,.75,.35,1)
    forwards;
}


@keyframes ninja-right-attack{

  0%{
    right:-85px;
    opacity:0;
  }

  18%{
    opacity:1;
  }

  100%{
    right:calc(50% - 95px);
    opacity:1;
  }

}


.ninja-enemy-up.attack{
  animation:
    ninja-up-attack
    .7s cubic-bezier(.15,.75,.35,1)
    forwards;
}


@keyframes ninja-up-attack{

  0%{
    top:-115px;
    opacity:0;
  }

  18%{
    opacity:1;
  }

  100%{
    top:16%;
    opacity:1;
  }

}


/* =============================
FAKE
============================= */

.ninja-enemy-left.fake{
  animation:
    ninja-left-fake
    .28s ease
    forwards;
}


@keyframes ninja-left-fake{

  0%{
    left:-85px;
    opacity:0;
  }

  60%{
    left:4%;
    opacity:1;
  }

  100%{
    left:-85px;
    opacity:0;
  }

}


.ninja-enemy-right.fake{
  animation:
    ninja-right-fake
    .28s ease
    forwards;
}


@keyframes ninja-right-fake{

  0%{
    right:-85px;
    opacity:0;
  }

  60%{
    right:4%;
    opacity:1;
  }

  100%{
    right:-85px;
    opacity:0;
  }

}


.ninja-enemy-up.fake{
  animation:
    ninja-up-fake
    .28s ease
    forwards;
}


@keyframes ninja-up-fake{

  0%{
    top:-115px;
    opacity:0;
  }

  60%{
    top:-15px;
    opacity:1;
  }

  100%{
    top:-115px;
    opacity:0;
  }

}


/* =============================
COUNTER MOVEMENT
============================= */

.ninja-player-v2.counter-left{
  transform:
    translateX(-75%)
    rotate(-11deg)
    scale(1.08);
}


.ninja-player-v2.counter-right{
  transform:
    translateX(-25%)
    rotate(11deg)
    scale(1.08);
}


.ninja-player-v2.counter-up{
  transform:
    translate(-50%,-20px)
    scale(1.08);
}


.ninja-player-v2.counter-left
.ninja-player-sword{
  transform:
    rotate(-75deg);
}


.ninja-player-v2.counter-right
.ninja-player-sword{
  transform:
    rotate(78deg);
}


.ninja-player-v2.counter-up
.ninja-player-sword{
  transform:
    rotate(0deg);
}


/* =============================
ENEMY HIT
============================= */

.ninja-enemy.hit{
  filter:
    brightness(2)
    saturate(.2);
}


.ninja-enemy-left.retreat{
  transform:
    translate(-70px,-30px)
    rotate(-30deg);

  opacity:0;

  transition:
    transform .18s ease,
    opacity .18s ease;
}


.ninja-enemy-right.retreat{
  transform:
    translate(70px,-30px)
    rotate(30deg);

  opacity:0;

  transition:
    transform .18s ease,
    opacity .18s ease;
}


.ninja-enemy-up.retreat{
  opacity:0;

  transition:
    opacity .18s ease;
}


/* =============================
SLASH
============================= */

.ninja-slash-trail{
  position:absolute;

  z-index:20;

  left:50%;
  top:52%;

  width:5px;
  height:180px;

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      transparent,
      #ffffff 30%,
      #87ffae 60%,
      transparent
    );

  opacity:0;

  pointer-events:none;

  box-shadow:
    0 0 16px
    rgba(110,255,160,.85);
}


.ninja-slash-trail.show{
  animation:
    ninja-slash-trail
    .22s ease;
}


.ninja-slash-trail.slash-left{
  transform:
    translate(-50%,-50%)
    rotate(-58deg);
}


.ninja-slash-trail.slash-right{
  transform:
    translate(-50%,-50%)
    rotate(58deg);
}


.ninja-slash-trail.slash-up{
  transform:
    translate(-50%,-60%)
    rotate(0deg);
}


@keyframes ninja-slash-trail{

  0%{
    opacity:0;
    scale:.5;
  }

  25%{
    opacity:1;
    scale:1.15;
  }

  100%{
    opacity:0;
    scale:1;
  }

}


/* =============================
SPARKS
============================= */

.ninja-impact-sparks{
  position:absolute;

  z-index:21;

  left:50%;
  top:49%;

  width:1px;
  height:1px;

  pointer-events:none;
}


.ninja-impact-sparks i{
  position:absolute;

  width:4px;
  height:15px;

  border-radius:4px;

  background:
    linear-gradient(
      #ffffff,
      #8cffad
    );

  opacity:0;
}


.ninja-impact-sparks.show i{
  animation:
    ninja-spark
    .28s ease-out
    forwards;
}


@keyframes ninja-spark{

  0%{
    opacity:1;

    transform:
      translate(0,0)
      scale(1);
  }

  100%{
    opacity:0;

    transform:
      translate(
        var(--spark-x),
        var(--spark-y)
      )
      scale(.3);
  }

}


/* =============================
MESSAGE
============================= */

.ninja-counter-message{
  position:absolute;

  z-index:30;

  left:50%;
  top:27%;

  transform:
    translate(-50%,-50%)
    scale(.55);

  color:#7dffa8;

  font-size:
    clamp(
      28px,
      6vw,
      50px
    );

  font-weight:1000;

  font-style:italic;

  opacity:0;

  pointer-events:none;

  text-shadow:
    0 0 22px
    rgba(90,255,140,.7);
}


.ninja-counter-message.fail{
  color:#ff5874;

  text-shadow:
    0 0 22px
    rgba(255,70,105,.55);
}


.ninja-counter-message.show{
  animation:
    ninja-message-pop
    .4s ease;
}


@keyframes ninja-message-pop{

  0%{
    opacity:0;

    transform:
      translate(-50%,-50%)
      scale(.5);
  }

  35%{
    opacity:1;

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

  100%{
    opacity:0;

    transform:
      translate(-50%,-72%)
      scale(.95);
  }

}


/* =============================
COMBO POP
============================= */

.ninja-counter-combo-pop{
  position:absolute;

  z-index:30;

  right:8%;
  top:14%;

  color:#83ffab;

  font-size:
    clamp(
      25px,
      5vw,
      43px
    );

  font-weight:1000;

  opacity:0;

  pointer-events:none;
}


.ninja-counter-combo-pop.show{
  animation:
    ninja-combo-pop
    .34s ease;
}


@keyframes ninja-combo-pop{

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

  45%{
    opacity:1;
    transform:scale(1.3);
  }

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

}


/* =============================
HIT STOP
============================= */

.ninja-hit-stop{
  animation:
    ninja-hit-stop
    .15s ease;
}


@keyframes ninja-hit-stop{

  0%{
    filter:
      brightness(1);
  }

  35%{
    filter:
      brightness(2.15)
      saturate(.6);
  }

  100%{
    filter:
      brightness(1);
  }

}


/* =============================
DAMAGE
============================= */

.ninja-damage{
  animation:
    ninja-damage
    .28s ease;
}


@keyframes ninja-damage{

  0%,
  100%{
    transform:
      translateX(0);

    box-shadow:
      inset 0 0 0
      rgba(255,30,60,0);
  }

  20%{
    transform:
      translateX(-8px);

    box-shadow:
      inset 0 0 80px
      rgba(255,30,60,.28);
  }

  40%{
    transform:
      translateX(8px);
  }

  60%{
    transform:
      translateX(-5px);
  }

  80%{
    transform:
      translateX(4px);
  }

}


/* =============================
HINT
============================= */

.ninja-counter-hint{
  position:absolute;

  z-index:15;

  left:50%;
  bottom:12px;

  transform:
    translateX(-50%);

  padding:
    6px 11px;

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

  border-radius:999px;

  background:
    rgba(0,0,0,.4);

  color:
    rgba(255,255,255,.6);

  font-size:8px;
  font-weight:900;

  letter-spacing:.12em;

  pointer-events:none;

  animation:
    ninja-hint-fade
    2.6s ease
    forwards;
}


@keyframes ninja-hint-fade{

  0%{
    opacity:0;
  }

  15%,
  65%{
    opacity:1;
  }

  100%{
    opacity:0;
  }

}


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

.ninja-counter-controls{
  display:grid;

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

  gap:8px;
}


.ninja-counter-controls button{
  min-height:58px;

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

  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      #17231b,
      #09110c
    );

  color:#8cffad;

  font-size:28px;
  font-weight:1000;

  cursor:pointer;

  touch-action:none;
}


.ninja-counter-controls button:active{
  transform:
    scale(.95);

  background:
    linear-gradient(
      180deg,
      #24412d,
      #0d1b12
    );
}


/* =============================
MOBILE
============================= */

@media(max-width:700px){

  .ninja-counter-hud{
    gap:4px;
  }


  .ninja-counter-hud-item{
    padding:
      6px 4px;
  }


  .ninja-counter-hud-item strong{
    font-size:13px;
  }


  .ninja-counter-stage{
    border-radius:14px;
  }


  .ninja-player-v2{
    transform:
      translateX(-50%)
      scale(.90);

    transform-origin:
      bottom center;
  }


  .ninja-counter-controls button{
    min-height:62px;

    font-size:30px;
  }

}


/* =========================================================
NINJA COUNTER - SWIPE VERSION
========================================================= */

.ninja-swipe-game{
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;

  gap:9px;
}


/* =============================
HUD
============================= */

.ninja-swipe-hud{
  display:grid;

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

  gap:7px;
}


.ninja-swipe-hud-item{
  padding:8px 9px;

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

  border-radius:11px;

  background:
    rgba(4,10,7,.82);

  text-align:center;
}


.ninja-swipe-hud-item span{
  display:block;

  margin-bottom:2px;

  color:
    rgba(255,255,255,.45);

  font-size:7px;
  font-weight:1000;

  letter-spacing:.14em;
}


.ninja-swipe-hud-item strong{
  color:#ffffff;

  font-size:15px;
  font-weight:1000;
}


.ninja-swipe-hud-item:nth-child(2)
strong{
  color:#7dffa6;
}


.ninja-swipe-life{
  color:#ff5873 !important;

  letter-spacing:.08em;
}


/* =============================
STAGE
============================= */

.ninja-swipe-stage{
  position:relative;

  flex:1;

  min-height:0;

  overflow:hidden;

  border-radius:19px;

  background:
    radial-gradient(
      circle at 50% 52%,
      rgba(67,180,95,.10),
      transparent 27%
    ),
    linear-gradient(
      180deg,
      #08110c,
      #020403
    );

  touch-action:none;

  user-select:none;
}


.ninja-swipe-background{
  position:absolute;

  inset:0;

  overflow:hidden;

  pointer-events:none;
}


.ninja-swipe-moon{
  position:absolute;

  left:50%;
  top:12%;

  width:125px;
  height:125px;

  transform:
    translateX(-50%);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      #dcebd7,
      #8ba083
    );

  opacity:.12;

  box-shadow:
    0 0 80px
    rgba(150,255,170,.13);
}


.ninja-swipe-ground{
  position:absolute;

  left:-15%;
  right:-15%;
  bottom:-14%;

  height:43%;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.025)
      0 1px,

      transparent
      1px 72px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.02)
      0 1px,

      transparent
      1px 60px
    ),
    #050805;

  transform:
    perspective(320px)
    rotateX(57deg);

  transform-origin:
    bottom;
}


/* =============================
PLAYER
============================= */

.ninja-swipe-player{
  position:absolute;

  z-index:10;

  left:50%;
  bottom:14%;

  width:88px;
  height:132px;

  transform:
    translateX(-50%);

  /*
   * 譛ｬ菴楢�菴薙�蛯ｾ縺代↑縺�
   */
}


.ninja-swipe-player-head{
  position:absolute;

  left:50%;
  top:0;

  width:43px;
  height:39px;

  transform:
    translateX(-50%);

  border-radius:
    46% 46% 38% 38%;

  background:#111c15;

  border:
    2px solid
    rgba(110,255,150,.17);
}


.ninja-swipe-player-head::after{
  content:"";

  position:absolute;

  left:5px;
  right:5px;
  top:16px;

  height:8px;

  border-radius:4px;

  background:#050806;
}


.ninja-swipe-player-head i{
  position:absolute;

  z-index:2;

  left:10px;
  top:19px;

  width:5px;
  height:2px;

  background:#8cffaf;

  box-shadow:
    17px 0
    #8cffaf;
}


.ninja-swipe-player-body{
  position:absolute;

  left:50%;
  top:35px;

  width:59px;
  height:78px;

  transform:
    translateX(-50%);

  border-radius:
    18px 18px 10px 10px;

  background:
    linear-gradient(
      180deg,
      #1a2c20,
      #09110d
    );

  border:
    1px solid
    rgba(100,255,145,.13);
}


/* =============================
ARM
============================= */

.ninja-swipe-player-arm{
  position:absolute;

  z-index:3;

  left:50px;
  top:58px;

  width:42px;
  height:13px;

  border-radius:10px;

  background:#14231a;

  transform:
    rotate(-18deg);

  transform-origin:
    left center;

  transition:
    transform .07s ease;
}


/* =============================
PLAYER SWORD
============================= */

.ninja-swipe-player-sword{
  position:absolute;

  z-index:4;

  left:72px;
  top:27px;

  width:5px;
  height:94px;

  border-radius:5px;

  background:
    linear-gradient(
      90deg,
      #8c9c96,
      #ffffff 48%,
      #6b7c75
    );

  transform:
    rotate(31deg);

  transform-origin:
    50% 88%;

  transition:
    transform .07s ease;

  box-shadow:
    0 0 8px
    rgba(210,255,230,.25);
}


.ninja-swipe-player-sword::after{
  content:"";

  position:absolute;

  left:-7px;
  bottom:12px;

  width:19px;
  height:5px;

  border-radius:3px;

  background:#876b31;
}


/* =============================
PLAYER ATTACK
Body remains upright
============================= */

.ninja-swipe-player.strike-left{
  transform:
    translateX(-50%)
    translateY(-3px);
}


.ninja-swipe-player.strike-left
.ninja-swipe-player-arm{
  transform:
    rotate(-95deg)
    translateX(2px);
}


.ninja-swipe-player.strike-left
.ninja-swipe-player-sword{
  transform:
    rotate(-66deg);
}


.ninja-swipe-player.strike-right{
  transform:
    translateX(-50%)
    translateY(-3px);
}


.ninja-swipe-player.strike-right
.ninja-swipe-player-arm{
  transform:
    rotate(20deg)
    translateX(3px);
}


.ninja-swipe-player.strike-right
.ninja-swipe-player-sword{
  transform:
    rotate(79deg);
}


.ninja-swipe-player.strike-up{
  transform:
    translateX(-50%)
    translateY(-5px);
}


.ninja-swipe-player.strike-up
.ninja-swipe-player-arm{
  transform:
    rotate(-64deg)
    translateX(2px);
}


.ninja-swipe-player.strike-up
.ninja-swipe-player-sword{
  transform:
    rotate(2deg);
}


/* =============================
ENEMIES
============================= */

.ninja-swipe-enemy{
  position:absolute;

  z-index:8;

  width:68px;
  height:103px;

  opacity:0;

  pointer-events:none;
}


.ninja-swipe-enemy-head{
  position:absolute;

  left:50%;
  top:0;

  width:36px;
  height:35px;

  transform:
    translateX(-50%);

  border-radius:
    46% 46% 38% 38%;

  background:#261419;

  border:
    1px solid
    rgba(255,80,110,.3);
}


.ninja-swipe-enemy-head::after{
  content:"";

  position:absolute;

  left:5px;
  right:5px;
  top:15px;

  height:7px;

  background:#070405;

  border-radius:3px;
}


.ninja-swipe-enemy-head i{
  position:absolute;

  z-index:2;

  left:9px;
  top:18px;

  width:4px;
  height:2px;

  background:#ff516d;

  box-shadow:
    14px 0
    #ff516d;
}


.ninja-swipe-enemy-body{
  position:absolute;

  left:50%;
  top:31px;

  width:49px;
  height:62px;

  transform:
    translateX(-50%);

  border-radius:
    14px 14px 8px 8px;

  background:
    linear-gradient(
      180deg,
      #371a23,
      #10080b
    );

  border:
    1px solid
    rgba(255,70,105,.2);
}


.ninja-swipe-enemy-arm{
  position:absolute;

  left:43px;
  top:46px;

  width:37px;
  height:11px;

  border-radius:10px;

  background:#271218;

  transform:
    rotate(-24deg);
}


.ninja-swipe-enemy-sword{
  position:absolute;

  left:59px;
  top:11px;

  width:4px;
  height:78px;

  background:
    linear-gradient(
      90deg,
      #81898c,
      #ffffff,
      #63696c
    );

  transform:
    rotate(32deg);

  transform-origin:
    bottom center;
}


/* =============================
POSITIONS
============================= */

.ninja-swipe-enemy-left{
  left:-90px;
  bottom:25%;
}


.ninja-swipe-enemy-right{
  right:-90px;
  bottom:25%;
}


.ninja-swipe-enemy-up{
  left:50%;
  top:-120px;

  transform:
    translateX(-50%);
}


/* =============================
REAL ATTACK
============================= */

.ninja-swipe-enemy-left.attack{
  animation:
    ninja-swipe-left-attack
    .68s
    cubic-bezier(.17,.75,.3,1)
    forwards;
}


@keyframes ninja-swipe-left-attack{

  0%{
    left:-90px;
    opacity:0;
  }

  16%{
    opacity:1;
  }

  100%{
    left:
      calc(
        50% - 108px
      );

    opacity:1;
  }

}


.ninja-swipe-enemy-right.attack{
  animation:
    ninja-swipe-right-attack
    .68s
    cubic-bezier(.17,.75,.3,1)
    forwards;
}


@keyframes ninja-swipe-right-attack{

  0%{
    right:-90px;
    opacity:0;
  }

  16%{
    opacity:1;
  }

  100%{
    right:
      calc(
        50% - 108px
      );

    opacity:1;
  }

}


.ninja-swipe-enemy-up.attack{
  animation:
    ninja-swipe-up-attack
    .68s
    cubic-bezier(.17,.75,.3,1)
    forwards;
}


@keyframes ninja-swipe-up-attack{

  0%{
    top:-120px;
    opacity:0;
  }

  16%{
    opacity:1;
  }

  100%{
    top:17%;
    opacity:1;
  }

}


/* =============================
FAKE ATTACK
============================= */

.ninja-swipe-enemy-left.fake{
  animation:
    ninja-swipe-left-fake
    .3s ease
    forwards;
}


@keyframes ninja-swipe-left-fake{

  0%{
    left:-90px;
    opacity:0;
  }

  55%{
    left:5%;
    opacity:.85;
  }

  100%{
    left:-90px;
    opacity:0;
  }

}


.ninja-swipe-enemy-right.fake{
  animation:
    ninja-swipe-right-fake
    .3s ease
    forwards;
}


@keyframes ninja-swipe-right-fake{

  0%{
    right:-90px;
    opacity:0;
  }

  55%{
    right:5%;
    opacity:.85;
  }

  100%{
    right:-90px;
    opacity:0;
  }

}


.ninja-swipe-enemy-up.fake{
  animation:
    ninja-swipe-up-fake
    .3s ease
    forwards;
}


@keyframes ninja-swipe-up-fake{

  0%{
    top:-120px;
    opacity:0;
  }

  55%{
    top:-25px;
    opacity:.85;
  }

  100%{
    top:-120px;
    opacity:0;
  }

}


/* =============================
COUNTERED
============================= */

.ninja-swipe-enemy.countered{
  filter:
    brightness(2.4)
    saturate(.25);
}


.ninja-swipe-enemy-left.retreat{
  transform:
    translate(-75px,-25px)
    rotate(-20deg);

  opacity:0;

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


.ninja-swipe-enemy-right.retreat{
  transform:
    translate(75px,-25px)
    rotate(20deg);

  opacity:0;

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


.ninja-swipe-enemy-up.retreat{
  transform:
    translate(-50%,-70px);

  opacity:0;

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


/* =============================
SWIPE CANVAS
============================= */

.ninja-swipe-canvas{
  position:absolute;

  z-index:24;

  inset:0;

  width:100%;
  height:100%;

  cursor:crosshair;

  touch-action:none;
}


/* =============================
SPARKS
============================= */

.ninja-swipe-sparks{
  position:absolute;

  z-index:26;

  left:50%;
  top:49%;

  width:1px;
  height:1px;

  pointer-events:none;
}


.ninja-swipe-sparks i{
  position:absolute;

  width:4px;
  height:14px;

  border-radius:5px;

  background:
    linear-gradient(
      #ffffff,
      #8cffad
    );

  opacity:0;

  box-shadow:
    0 0 8px
    rgba(120,255,165,.7);
}


.ninja-swipe-sparks.show i{
  animation:
    ninja-swipe-spark
    .28s ease-out
    forwards;
}


@keyframes ninja-swipe-spark{

  0%{
    opacity:1;

    transform:
      translate(0,0)
      scale(1);
  }

  100%{
    opacity:0;

    transform:
      translate(
        var(--x),
        var(--y)
      )
      scale(.2);
  }

}


/* =============================
MESSAGE
============================= */

.ninja-swipe-message{
  position:absolute;

  z-index:35;

  left:50%;
  top:26%;

  transform:
    translate(-50%,-50%)
    scale(.55);

  color:#81ffaa;

  font-size:
    clamp(
      28px,
      6vw,
      50px
    );

  font-weight:1000;

  font-style:italic;

  opacity:0;

  pointer-events:none;

  text-shadow:
    0 0 20px
    rgba(90,255,140,.65);
}


.ninja-swipe-message.fail{
  color:#ff5874;

  text-shadow:
    0 0 20px
    rgba(255,60,95,.55);
}


.ninja-swipe-message.show{
  animation:
    ninja-swipe-message
    .4s ease;
}


@keyframes ninja-swipe-message{

  0%{
    opacity:0;

    transform:
      translate(-50%,-50%)
      scale(.5);
  }

  35%{
    opacity:1;

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

  100%{
    opacity:0;

    transform:
      translate(-50%,-72%)
      scale(.95);
  }

}


/* =============================
COMBO
============================= */

.ninja-swipe-combo-pop{
  position:absolute;

  z-index:35;

  right:8%;
  top:13%;

  color:#83ffad;

  font-size:
    clamp(
      25px,
      5vw,
      43px
    );

  font-weight:1000;

  opacity:0;

  pointer-events:none;
}


.ninja-swipe-combo-pop.show{
  animation:
    ninja-swipe-combo
    .34s ease;
}


@keyframes ninja-swipe-combo{

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

  45%{
    opacity:1;
    transform:scale(1.3);
  }

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

}


/* =============================
SUCCESS FLASH
============================= */

.ninja-swipe-hit{
  animation:
    ninja-swipe-hit
    .15s ease;
}


@keyframes ninja-swipe-hit{

  0%{
    filter:
      brightness(1);
  }

  38%{
    filter:
      brightness(2.1)
      saturate(.65);
  }

  100%{
    filter:
      brightness(1);
  }

}


/* =============================
DAMAGE
============================= */

.ninja-swipe-damage{
  animation:
    ninja-swipe-damage
    .28s ease;
}


@keyframes ninja-swipe-damage{

  0%,
  100%{
    transform:
      translateX(0);

    box-shadow:
      inset 0 0 0
      rgba(255,35,65,0);
  }

  20%{
    transform:
      translateX(-8px);

    box-shadow:
      inset 0 0 70px
      rgba(255,35,65,.28);
  }

  40%{
    transform:
      translateX(8px);
  }

  60%{
    transform:
      translateX(-5px);
  }

  80%{
    transform:
      translateX(4px);
  }

}


/* =============================
HINT
============================= */

.ninja-swipe-hint{
  position:absolute;

  z-index:18;

  left:50%;
  bottom:13px;

  transform:
    translateX(-50%);

  padding:
    6px 11px;

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

  border-radius:999px;

  background:
    rgba(0,0,0,.4);

  color:
    rgba(255,255,255,.62);

  font-size:8px;
  font-weight:1000;

  letter-spacing:.14em;

  pointer-events:none;

  animation:
    ninja-swipe-hint
    2.5s ease forwards;
}


@keyframes ninja-swipe-hint{

  0%{
    opacity:0;
  }

  15%,
  65%{
    opacity:1;
  }

  100%{
    opacity:0;
  }

}


/* =============================
MOBILE
============================= */

@media(max-width:700px){

  .ninja-swipe-hud{
    gap:4px;
  }


  .ninja-swipe-hud-item{
    padding:
      6px 4px;
  }


  .ninja-swipe-hud-item strong{
    font-size:13px;
  }


  .ninja-swipe-stage{
    border-radius:14px;
  }


  .ninja-swipe-player{
    bottom:12%;
  }

}

/* =========================================================
RUSH RUN 窶� 60 SECOND RUNNER
========================================================= */
.rush-run { width:100%; height:100%; min-height:0; display:flex; flex-direction:column; gap:8px; }
.rush-hud { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.rush-hud>div { padding:8px 6px; border-radius:11px; text-align:center; background:#09111a; border:1px solid rgba(255,255,255,.09); }
.rush-hud span { display:block; color:#738395; font-size:8px; letter-spacing:.12em; font-weight:900; margin-bottom:2px; }
.rush-hud strong { font-size:17px; line-height:1.2; font-weight:1000; color:#f2f7ff; }
.rush-hud>div:nth-child(2) strong { color:#77efff; }
.rush-hud>div:nth-child(3) strong { color:#ffe376; }
.rush-stage { position:relative; flex:1; min-height:0; overflow:hidden; border-radius:18px; background:#0c1420; touch-action:none; user-select:none; }
.rush-world { position:absolute; inset:0; }
.rush-world canvas { display:block; width:100%!important; height:100%!important; }
.rush-instruction { position:absolute; z-index:8; top:12px; left:50%; transform:translateX(-50%); white-space:nowrap; pointer-events:none; font-size:9px; letter-spacing:.12em; font-weight:1000; color:rgba(255,255,255,.8); padding:7px 12px; background:rgba(4,9,15,.6); border-radius:20px; animation:rush-instruction-fade 3.8s forwards; }
@keyframes rush-instruction-fade { 0%,70%{opacity:1} 100%{opacity:0} }
.rush-bottom { display:flex; flex-direction:column; gap:6px; }
.rush-progress { display:flex; justify-content:space-around; align-items:center; gap:5px; border:1px solid rgba(255,255,255,.08); background:#090f16; border-radius:10px; padding:6px 4px; }
.rush-progress span { color:#889bad; font-size:9px; font-weight:900; letter-spacing:.07em; }
.rush-progress b { color:#f6ffff; font-size:12px; margin-left:3px; }
.rush-controls { display:grid; grid-template-columns:1fr 1.1fr 1fr; gap:9px; }
.rush-controls button { height:57px; border:1px solid rgba(255,255,255,.16); border-radius:13px; background:linear-gradient(#202e3b,#0d1824); color:#ecfbff; font-size:28px; font-weight:1000; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.rush-controls button:active { transform:scale(.94); background:#2c4458; }
.rush-controls .rush-jump-button { display:flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(#ffd65d,#f59a33); color:#271805; border-color:#ffdf8c; }
.rush-controls .rush-jump-button small { font-size:11px; letter-spacing:.08em; font-weight:1000; }
.rush-flash { position:absolute; inset:0; z-index:11; opacity:0; pointer-events:none; }
.rush-flash.good { background:radial-gradient(circle,rgba(80,225,255,.15),transparent 67%); }
.rush-flash.boost { background:radial-gradient(circle,rgba(255,216,65,.27),transparent 74%); }
.rush-flash.bad { background:radial-gradient(circle,transparent 30%,rgba(255,46,86,.3)); }
.rush-flash.show { animation:rush-fx .45s ease-out; }
@keyframes rush-fx { 0%{opacity:0} 25%{opacity:1} 100%{opacity:0} }
.rush-message { position:absolute; z-index:12; top:27%; left:50%; transform:translate(-50%,-50%); pointer-events:none; opacity:0; font-weight:1000; font-size:clamp(26px,5vw,45px); font-style:italic; white-space:nowrap; text-shadow:0 3px 15px #08111a; color:#90f3ff; }
.rush-message.bad { color:#ff667e; }
.rush-message.boost { color:#ffe16c; }
.rush-message.show { animation:rush-pop .46s ease-out; }
@keyframes rush-pop { 0%{opacity:0;transform:translate(-50%,-45%) scale(.6)} 40%{opacity:1;transform:translate(-50%,-50%) scale(1.13)} 100%{opacity:0;transform:translate(-50%,-75%) scale(1)} }
.rush-stage.boosting { box-shadow:inset 0 0 35px rgba(255,222,72,.15); }
@media(max-width:700px) { .rush-run{gap:6px} .rush-hud{gap:4px} .rush-hud>div{padding:6px 3px} .rush-hud strong{font-size:14px} .rush-stage{border-radius:14px} .rush-progress span{font-size:8px} .rush-controls{gap:6px} .rush-controls button{height:62px;font-size:30px} .rush-instruction{font-size:8px} }

/* =========================================================
ARMY GROW 窶� GATES / CROWD
========================================================= */
.army-grow { display:flex; flex-direction:column; width:100%; height:100%; min-height:0; gap:8px; color:#f6ffff; }
.army-hud { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.army-hud>div { background:#0c1825; border:1px solid rgba(119,226,255,.16); border-radius:10px; text-align:center; padding:8px 3px; }
.army-hud span { display:block; color:#8ca3b2; font-size:9px; font-weight:850; letter-spacing:.09em; margin-bottom:4px; }
.army-hud strong { color:white; font-size:21px; line-height:1.1; }
.army-hud>div:first-child strong { color:#64e3ff; }
.army-hud>div:last-child strong { color:#70ffbb; }
.army-stage { position:relative; flex:1; min-height:0; overflow:hidden; border-radius:14px; touch-action:none; background:#0a1823; user-select:none; }
.army-world,.army-world canvas { position:absolute; width:100%!important; height:100%!important; inset:0; display:block; }
.army-instruction { position:absolute; z-index:3; top:12px; left:50%; transform:translateX(-50%); background:rgba(2,14,25,.74); border:1px solid rgba(255,255,255,.18); border-radius:30px; color:#f6fcff; font-weight:900; font-size:10px; letter-spacing:.1em; padding:7px 11px; white-space:nowrap; pointer-events:none; animation:army-hint-fade 4.2s forwards; }
@keyframes army-hint-fade { 0%,70%{opacity:1} 100%{opacity:0} }
.army-pop { position:absolute; z-index:9; top:30%; left:50%; transform:translate(-50%,-50%); text-align:center; font-size:clamp(22px,5vw,38px); font-weight:1000; font-style:italic; white-space:nowrap; text-shadow:0 4px 18px #00101a; color:#66ffb8; opacity:0; pointer-events:none; }
.army-pop.bad { color:#ff6979; }
.army-pop.battle { color:#ffe87a; }
.army-pop.show { animation:army-pop .74s ease-out; }
@keyframes army-pop { 0%{opacity:0;transform:translate(-50%,-30%) scale(.7)} 23%{opacity:1;transform:translate(-50%,-50%) scale(1.1)} 74%{opacity:1} 100%{opacity:0;transform:translate(-50%,-75%) scale(1)} }
.army-controls { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.army-controls button { min-height:60px; border-radius:12px; border:1px solid rgba(255,255,255,.19); background:linear-gradient(180deg,#243c4d,#101b29); color:#eaf9ff; cursor:pointer; font-size:18px; font-weight:950; letter-spacing:.08em; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.army-controls button.active { border-color:#55e5ff; color:#72e9ff; box-shadow:inset 0 0 18px rgba(48,206,255,.12); }
.army-controls button:active { transform:scale(.97); background:#284d60; }
@media(max-width:700px) { .army-grow{gap:6px} .army-hud>div{padding:6px 3px} .army-hud span{font-size:8px} .army-hud strong{font-size:17px} .army-controls button{min-height:60px;font-size:15px} .army-instruction{font-size:9px} }

/* =========================================================
ARMY GROW 窶� CINEMATIC BATTLE
========================================================= */
.army-battle-hud { position:absolute; z-index:8; top:54px; left:12px; right:12px; display:none; padding:11px 12px; border-radius:12px; background:rgba(4,13,22,.85); border:1px solid rgba(255,255,255,.18); box-shadow:0 8px 25px rgba(0,0,0,.28); pointer-events:none; }
.army-battle-hud.active { display:block; animation:army-battle-enter .35s ease-out; }
@keyframes army-battle-enter { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
.army-battle-numbers { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.army-battle-numbers strong { font-size:16px; font-weight:1000; letter-spacing:.04em; }
.army-battle-numbers span { font-size:11px; font-weight:1000; color:#fff; }
.army-blue-number { color:#62ddff; }
.army-red-number { color:#ff637b; }
.army-battle-bars { display:flex; width:100%; height:13px; overflow:hidden; border-radius:30px; background:#1e2934; border:1px solid rgba(255,255,255,.13); }
.army-blue-bar { height:100%; width:50%; background:linear-gradient(90deg,#078fea,#68eaff); transition:width .12s linear; }
.army-red-bar { height:100%; width:50%; background:linear-gradient(90deg,#ff8790,#f52b53); transition:width .12s linear; }
.army-impact-flash { position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 55%,rgba(255,242,170,.21),transparent 56%); }
.army-impact-flash.hit { animation:army-battle-impact .14s ease-out; }
@keyframes army-battle-impact { 0%{opacity:0} 40%{opacity:1} 100%{opacity:0} }
.army-pop.battle { color:#ffe678; text-shadow:0 0 22px rgba(255,197,30,.65),0 3px 12px #000; }
.army-battle-hud.victory { border-color:rgba(67,255,176,.65); box-shadow:0 0 25px rgba(35,255,142,.15); }
.army-battle-hud.defeat { border-color:rgba(255,78,111,.65); box-shadow:0 0 25px rgba(255,53,78,.15); }
@media(max-width:700px) { .army-battle-hud{top:44px;left:8px;right:8px;padding:9px 10px} .army-battle-numbers strong{font-size:13px} .army-battle-numbers span{font-size:10px} .army-battle-bars{height:11px} }



/* ==========================================
BLOCK ESCAPE — PC CLICK CONTROLS
========================================== */

/* Selected block */

.block-escape-game .puzzle-block.selected {
  z-index: 5;
  outline: 3px solid #76edff;
  outline-offset: -3px;

  box-shadow:
    0 0 0 2px rgba(45,207,255,.28),
    0 0 22px rgba(45,207,255,.36);

  filter: brightness(1.1);
  cursor: pointer;
}

/* Movement arrows */

.block-escape-game .puzzle-direction {
  position: relative;
  z-index: 9;

  display: grid;
  place-items: center;

  width: 24px;
  height: 24px;
  min-width: 0;
  min-height: 0;

  padding: 0;
  margin: 0 4px;

  border: 2px solid rgba(255,255,255,.85);
  border-radius: 11px;

  background: #0d2633;
  color: #e8faff;

  font-size: 21px;
  font-weight: 900;
  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 4px 12px rgba(0,0,0,.32);

  touch-action: manipulation;
}

.block-escape-game .puzzle-direction:hover {
  background: #147c9d;
  border-color: #92f0ff;
}

.block-escape-game .puzzle-direction:active {
  transform: scale(.92);
}

/* Place arrows inside selected block */

.block-escape-game .puzzle-direction.left {
  justify-self: start;
  align-self: center;
}

.block-escape-game .puzzle-direction.right {
  justify-self: end;
  align-self: center;
}

.block-escape-game .puzzle-direction.up {
  justify-self: center;
  align-self: start;
  margin: 4px 0;
}

.block-escape-game .puzzle-direction.down {
  justify-self: center;
  align-self: end;
  margin: 4px 0;
}

@media (hover: hover) and (pointer: fine) {
  .block-escape-game .puzzle-block {
    cursor: pointer;
  }
}



/* ==========================================
MOBILE VIEWPORT FIX (Step 4-5)
Use the visible screen height (dvh) so
Safari's toolbar does not cover game buttons.
========================================== */

@supports (height: 100dvh) {
  #gamiq-app {
    min-height: 100dvh;
  }

  .gamiq-v2 {
    height: 100dvh;
  }

  .gamiq-feed {
    height: calc(100dvh - 72px);
  }
}

@media (min-width: 701px) {
  @supports (height: 100dvh) {
    .gamiq-game-shell {
      height: min(680px, calc(100dvh - 108px));
    }
  }
}

@media (max-width: 700px) {
  @supports (height: 100dvh) {
    .gamiq-feed {
      height: calc(100dvh - 60px);
    }
  }

  .gamiq-game-host {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}


/* ==========================================
RESULTS BUTTON LOCK (Step 7)
Dim the button while a game is being played.
========================================== */

.gamiq-results-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.gamiq-results-button:disabled:hover {
  background: rgba(255, 255, 255, 0.045);
}


/* ==========================================
RESULTS STATS (Step 9)
========================================== */

.gamiq-results-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

@supports (height: 100dvh) {
  .gamiq-results-card {
    max-height: calc(100dvh - 40px);
  }
}

@media (max-width: 390px) {
  .gamiq-results-stats {
    grid-template-columns: 1fr;
  }
}



/* ==========================================
LANE PANIC V2 (Step 10-1)
========================================== */

.lane-panic-round {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #9aa5b5;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.lane-player.lane-safe {
  color: #79f6ab;
  transform: translateX(-50%) scale(1.18);
  text-shadow: 0 0 18px rgba(121, 246, 171, 0.8);
}

.lane-player.lane-crash {
  color: #ff4c67;
  animation: lane-crash-shake 0.3s ease;
}

@keyframes lane-crash-shake {
  0%, 100% { transform: translateX(-50%); }
  25% { transform: translateX(calc(-50% - 8px)); }
  75% { transform: translateX(calc(-50% + 8px)); }
}



/* ==========================================
PIPE CONNECT V2 (Step 10-2)
========================================== */

.pipe2-game {
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.pipe2-hud {
  width: min(100%, 420px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pipe2-hud > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
}

.pipe2-hud span {
  color: #7c8798;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.pipe2-hud strong {
  color: #ffffff;
  font-size: 17px;
  font-weight: 1000;
}

.pipe2-hud strong.danger {
  color: #ff5a73;
}

.pipe2-board {
  width: min(100%, 420px);
  max-height: 100%;
  display: grid;
  grid-template-columns: 30px repeat(4, minmax(0, 1fr)) 34px;
  gap: 5px;
  align-items: center;
}

.pipe2-edge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.06em;
  color: transparent;
}

.pipe2-edge.in,
.pipe2-edge.out {
  border-radius: 8px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0;
}

.pipe2-edge.in {
  background: rgba(88, 223, 243, 0.18);
  color: #7beeff;
  box-shadow: inset 0 0 0 1px rgba(88, 223, 243, 0.45);
}

.pipe2-edge.out {
  background: rgba(255, 255, 255, 0.05);
  color: #9aa5b5;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: background 0.2s ease, color 0.2s ease;
}

.pipe2-edge.out.flow {
  background: rgba(121, 246, 171, 0.22);
  color: #79f6ab;
  box-shadow: inset 0 0 0 1px rgba(121, 246, 171, 0.6);
}

.pipe2-tile {
  aspect-ratio: 1 / 1;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: #0d141d;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.pipe2-tile:active {
  background: #142030;
}

.pipe2-tile svg {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.16s ease;
}

.pipe2-shell {
  fill: none;
  stroke: #2b3a4b;
  stroke-width: 30;
}

.pipe2-water {
  fill: none;
  stroke: #3f566e;
  stroke-width: 12;
  transition: stroke 0.15s ease;
}

.pipe2-tile.flow .pipe2-water {
  stroke: #58dff3;
}

.pipe2-tile.flow .pipe2-shell {
  stroke: #1f4f60;
}

.pipe2-board.solved .pipe2-tile.flow .pipe2-water {
  stroke: #79f6ab;
}

.pipe2-board.failed {
  opacity: 0.6;
}

@media (max-width: 700px) {
  .pipe2-board {
    grid-template-columns: 24px repeat(4, minmax(0, 1fr)) 28px;
    gap: 4px;
  }
}



/* ==========================================
FRIEND OR FOE V2 (Step 10-3)
========================================== */

.foe2-game {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.foe2-hud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.foe2-hud > div {
  padding: 7px 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}

.foe2-hud span {
  display: block;
  color: #7c8798;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.foe2-hud strong {
  color: #ffffff;
  font-size: 16px;
  font-weight: 1000;
}

.foe2-arena {
  position: relative;
  flex: 1;
  min-height: 260px;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 40%, rgba(80, 110, 190, 0.18), transparent 60%),
    #060a14;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.foe2-arena.foe2-damage {
  animation: foe2-damage 0.35s ease;
}

@keyframes foe2-damage {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
  30% { box-shadow: inset 0 0 0 4px rgba(255, 70, 100, 0.85); }
}

.foe2-target {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  will-change: transform;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

.foe2-target svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.foe2-target.leaving svg {
  animation: foe2-blink 0.15s steps(2) infinite;
}

@keyframes foe2-blink {
  50% { opacity: 0.35; }
}

.foe2-target.hit svg {
  transform: scale(1.5);
  opacity: 0;
}

.foe2-target.gone svg {
  transform: scale(0.3);
  opacity: 0;
}

.foe2-target.hit,
.foe2-target.gone {
  pointer-events: none;
}

.foe2-shot {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  pointer-events: none;
  animation: foe2-shot 0.32s ease-out forwards;
}

.foe2-shot.hit {
  border: 3px solid #ffe36b;
}

.foe2-shot.miss {
  border: 2px solid rgba(255, 255, 255, 0.45);
}

@keyframes foe2-shot {
  from { transform: scale(0.4); opacity: 1; }
  to { transform: scale(1.6); opacity: 0; }
}

.foe2-message {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  color: #79f6ab;
  font-size: 20px;
  font-weight: 1000;
  letter-spacing: 0.06em;
  opacity: 0;
  pointer-events: none;
}

.foe2-message.bad {
  color: #ff5a73;
}

.foe2-message.show {
  animation: foe2-message 0.45s ease forwards;
}

@keyframes foe2-message {
  0% { opacity: 0; transform: translate(-50%, 6px); }
  20% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}


/* ==========================================
COLOR SWITCH (Step 10-4)
========================================== */

.cs-game {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-hud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.cs-hud > div {
  padding: 7px 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}

.cs-hud span {
  display: block;
  color: #7c8798;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.cs-hud strong {
  color: #ffffff;
  font-size: 17px;
  font-weight: 1000;
}

.cs-hud strong.danger {
  color: #ff5a73;
}

.cs-stage {
  position: relative;
  flex: 1;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-radius: 18px;
  background: #070b12;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.cs-mode {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-align: center;
}

.cs-mode.color {
  background: linear-gradient(90deg, #ff4d6a, #ffd43b, #3ee089, #3fa9ff);
  color: #05070b;
}

.cs-mode.word {
  background: #ffffff;
  color: #05070b;
}

.cs-stage.cs-switch {
  animation: cs-switch 0.45s ease;
}

@keyframes cs-switch {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
  30% { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.85); }
}

.cs-word {
  font-size: clamp(44px, 12vw, 76px);
  font-weight: 1000;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
}

.cs-word.pop {
  animation: cs-pop 0.16s ease;
}

@keyframes cs-pop {
  from { transform: scale(0.85); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}

.cs-feedback {
  position: absolute;
  right: 16px;
  top: 12px;
  font-size: 26px;
  font-weight: 1000;
  opacity: 0;
}

.cs-feedback.good { color: #79f6ab; }
.cs-feedback.bad { color: #ff5a73; }

.cs-feedback.show {
  animation: cs-feedback 0.35s ease forwards;
}

@keyframes cs-feedback {
  0% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(1); }
}

.cs-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.cs-button {
  height: 72px;
  border: 0;
  border-radius: 16px;
  background: var(--cs-color);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, opacity 0.15s ease;
}

.cs-button:active {
  transform: scale(0.94);
}

.cs-locked .cs-button,
.cs-done .cs-button {
  opacity: 0.4;
}

@media (max-width: 700px) {
  .cs-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cs-button {
    height: 64px;
  }
}



/* =========================================================
NINJA COUNTER - WHACK STYLE (restored in Step 10-5)
========================================================= */

.ninja-whack-game{
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;

  gap:9px;
}


/* =============================
HUD
============================= */

.ninja-whack-hud{
  display:grid;

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

  gap:7px;
}


.ninja-whack-hud-item{
  padding:8px 9px;

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

  border-radius:11px;

  background:
    rgba(5,10,7,.82);

  text-align:center;
}


.ninja-whack-hud-item span{
  display:block;

  margin-bottom:2px;

  color:
    rgba(255,255,255,.45);

  font-size:7px;
  font-weight:1000;

  letter-spacing:.14em;
}


.ninja-whack-hud-item strong{
  color:#fff;

  font-size:15px;
  font-weight:1000;
}


.ninja-whack-hud-item:nth-child(2)
strong{
  color:#7dffa6;
}


.ninja-whack-life{
  color:#ff5873 !important;
}


/* =============================
STAGE
============================= */

.ninja-whack-stage{
  position:relative;

  flex:1;

  min-height:0;

  overflow:hidden;

  border-radius:19px;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(60,170,85,.1),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #08110c,
      #020403
    );

  touch-action:none;
}


.ninja-whack-bg{
  position:absolute;

  inset:0;

  pointer-events:none;
}


.ninja-whack-moon{
  position:absolute;

  left:50%;
  top:10%;

  width:120px;
  height:120px;

  transform:
    translateX(-50%);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      #e1eddc,
      #87977e
    );

  opacity:.12;
}


.ninja-whack-roof{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:34%;

  background:
    linear-gradient(
      180deg,
      #0a0e0b,
      #030403
    );

  clip-path:
    polygon(
      0 40%,
      20% 22%,
      35% 35%,
      50% 12%,
      67% 34%,
      82% 20%,
      100% 40%,
      100% 100%,
      0 100%
    );
}


/* =============================
HOLES
============================= */

.ninja-whack-hole{
  position:absolute;

  z-index:8;

  width:86px;
  height:86px;

  padding:0;

  border:0;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      #050806 0 45%,
      #111912 46% 57%,
      #050806 58%
    );

  overflow:hidden;

  cursor:pointer;

  touch-action:manipulation;

  box-shadow:
    inset 0 5px 18px
    rgba(0,0,0,.8),

    0 0 0 1px
    rgba(255,255,255,.04);
}


.ninja-whack-hole-1{
  left:10%;
  top:19%;
}


.ninja-whack-hole-2{
  left:50%;
  top:12%;

  transform:
    translateX(-50%);
}


.ninja-whack-hole-3{
  right:10%;
  top:19%;
}


.ninja-whack-hole-4{
  left:22%;
  top:50%;
}


.ninja-whack-hole-5{
  right:22%;
  top:50%;
}


/* =============================
CHARACTER
============================= */

.ninja-whack-character{
  position:absolute;

  left:50%;
  bottom:-70%;

  width:58px;
  height:78px;

  transform:
    translateX(-50%);

  transition:
    bottom .12s ease;
}


.ninja-whack-hole.show
.ninja-whack-character{
  bottom:0;
}


.ninja-whack-character-head{
  position:absolute;

  left:50%;
  top:0;

  width:34px;
  height:32px;

  transform:
    translateX(-50%);

  border-radius:
    45% 45% 38% 38%;
}


.ninja-whack-character-head::after{
  content:"";

  position:absolute;

  left:4px;
  right:4px;
  top:14px;

  height:6px;

  border-radius:3px;

  background:#050505;
}


.ninja-whack-character-head i{
  position:absolute;

  z-index:2;

  left:8px;
  top:17px;

  width:4px;
  height:2px;
}


.ninja-whack-character-body{
  position:absolute;

  left:50%;
  top:28px;

  width:46px;
  height:48px;

  transform:
    translateX(-50%);

  border-radius:
    13px 13px 7px 7px;
}


/* =============================
ENEMY
============================= */

.ninja-whack-character-enemy
.ninja-whack-character-head{
  background:#2a141b;

  border:
    1px solid
    rgba(255,70,105,.35);
}


.ninja-whack-character-enemy
.ninja-whack-character-head i{
  background:#ff506b;

  box-shadow:
    13px 0
    #ff506b;
}


.ninja-whack-character-enemy
.ninja-whack-character-body{
  background:
    linear-gradient(
      180deg,
      #3c1c25,
      #12090c
    );
}


.ninja-whack-character-sword{
  position:absolute;

  left:43px;
  top:8px;

  width:4px;
  height:57px;

  background:
    linear-gradient(
      90deg,
      #8b9398,
      #ffffff,
      #687076
    );

  transform:
    rotate(34deg);
}


/* =============================
FRIEND
============================= */

.ninja-whack-character-friend
.ninja-whack-character-head{
  background:#12233a;

  border:
    1px solid
    rgba(80,170,255,.35);
}


.ninja-whack-character-friend
.ninja-whack-character-head i{
  background:#61c8ff;

  box-shadow:
    13px 0
    #61c8ff;
}


.ninja-whack-character-friend
.ninja-whack-character-body{
  background:
    linear-gradient(
      180deg,
      #19395d,
      #0a1524
    );
}


/* =============================
FAKE
============================= */

.ninja-whack-hole.fake{
  filter:
    saturate(.5);
}


/* =============================
PLAYER
============================= */

.ninja-whack-player{
  position:absolute;

  z-index:12;

  left:50%;
  bottom:7%;

  width:70px;
  height:100px;

  transform:
    translateX(-50%);

  pointer-events:none;
}


.ninja-whack-player-head{
  position:absolute;

  left:50%;
  top:0;

  width:36px;
  height:34px;

  transform:
    translateX(-50%);

  border-radius:
    45% 45% 38% 38%;

  background:#101b14;

  border:
    1px solid
    rgba(100,255,145,.2);
}


.ninja-whack-player-head::after{
  content:"";

  position:absolute;

  left:5px;
  right:5px;
  top:14px;

  height:7px;

  background:#050806;
}


.ninja-whack-player-head i{
  position:absolute;

  z-index:2;

  left:8px;
  top:17px;

  width:4px;
  height:2px;

  background:#83ffab;

  box-shadow:
    14px 0
    #83ffab;
}


.ninja-whack-player-body{
  position:absolute;

  left:50%;
  top:29px;

  width:49px;
  height:61px;

  transform:
    translateX(-50%);

  border-radius:
    14px 14px 8px 8px;

  background:
    linear-gradient(
      180deg,
      #1c2d21,
      #09110d
    );
}


.ninja-whack-player-sword{
  position:absolute;

  left:51px;
  top:17px;

  width:4px;
  height:70px;

  background:
    linear-gradient(
      90deg,
      #8d9c97,
      #ffffff,
      #697871
    );

  transform:
    rotate(31deg);
}


/* =============================
PLAYER DASH
============================= */

.ninja-whack-player.dash{
  animation:
    ninja-whack-dash
    .32s cubic-bezier(.18,.8,.3,1);
}


@keyframes ninja-whack-dash{

  0%{
    transform:
      translateX(-50%);
  }

  42%{
    transform:
      translate(
        calc(-50% + var(--dash-x)),
        var(--dash-y)
      )
      scale(1.08);
  }

  58%{
    transform:
      translate(
        calc(-50% + var(--dash-x)),
        var(--dash-y)
      )
      scale(1.08);
  }

  100%{
    transform:
      translateX(-50%);
  }

}


/* =============================
SLASH
============================= */

.ninja-whack-slash{
  position:absolute;

  z-index:22;

  width:5px;
  height:82px;

  border-radius:999px;

  transform:
    translate(-50%,-50%)
    rotate(52deg);

  background:
    linear-gradient(
      180deg,
      transparent,
      #ffffff 28%,
      #86ffae 62%,
      transparent
    );

  opacity:0;

  pointer-events:none;

  box-shadow:
    0 0 16px
    rgba(100,255,150,.8);
}


.ninja-whack-slash.show{
  animation:
    ninja-whack-slash
    .22s ease;
}


@keyframes ninja-whack-slash{

  0%{
    opacity:0;
    scale:.5;
  }

  35%{
    opacity:1;
    scale:1.1;
  }

  100%{
    opacity:0;
    scale:.9;
  }

}


/* =============================
SPARKS
============================= */

.ninja-whack-sparks{
  position:absolute;

  z-index:24;

  width:1px;
  height:1px;

  pointer-events:none;
}


.ninja-whack-sparks i{
  position:absolute;

  width:4px;
  height:13px;

  border-radius:4px;

  background:
    linear-gradient(
      #ffffff,
      #7effa7
    );

  opacity:0;
}


.ninja-whack-sparks.show i{
  animation:
    ninja-whack-spark
    .28s ease-out
    forwards;
}


@keyframes ninja-whack-spark{

  0%{
    opacity:1;

    transform:
      translate(0,0)
      scale(1);
  }

  100%{
    opacity:0;

    transform:
      translate(
        var(--x),
        var(--y)
      )
      scale(.2);
  }

}


/* =============================
MESSAGE
============================= */

.ninja-whack-message{
  position:absolute;

  z-index:30;

  left:50%;
  top:26%;

  transform:
    translate(-50%,-50%)
    scale(.55);

  color:#80ffaa;

  font-size:
    clamp(
      28px,
      6vw,
      48px
    );

  font-weight:1000;

  font-style:italic;

  opacity:0;

  pointer-events:none;
}


.ninja-whack-message.fail{
  color:#ff5874;
}


.ninja-whack-message.show{
  animation:
    ninja-whack-message
    .4s ease;
}


@keyframes ninja-whack-message{

  0%{
    opacity:0;

    transform:
      translate(-50%,-50%)
      scale(.5);
  }

  35%{
    opacity:1;

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

  100%{
    opacity:0;

    transform:
      translate(-50%,-70%)
      scale(.95);
  }

}


/* =============================
COMBO
============================= */

.ninja-whack-combo-pop{
  position:absolute;

  z-index:30;

  right:8%;
  top:12%;

  color:#82ffab;

  font-size:
    clamp(
      25px,
      5vw,
      42px
    );

  font-weight:1000;

  opacity:0;
}


.ninja-whack-combo-pop.show{
  animation:
    ninja-whack-combo
    .34s ease;
}


@keyframes ninja-whack-combo{

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

  45%{
    opacity:1;
    transform:scale(1.25);
  }

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

}


/* =============================
HIT / DAMAGE
============================= */

.ninja-whack-hit{
  animation:
    ninja-whack-hit
    .15s ease;
}


@keyframes ninja-whack-hit{

  0%{
    filter:brightness(1);
  }

  38%{
    filter:
      brightness(1.9)
      saturate(.7);
  }

  100%{
    filter:brightness(1);
  }

}


.ninja-whack-damage{
  animation:
    ninja-whack-damage
    .28s ease;
}


@keyframes ninja-whack-damage{

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

  20%{
    transform:translateX(-8px);
  }

  40%{
    transform:translateX(8px);
  }

  60%{
    transform:translateX(-5px);
  }

  80%{
    transform:translateX(4px);
  }

}


/* =============================
HINT
============================= */

.ninja-whack-hint{
  position:absolute;

  z-index:18;

  left:50%;
  bottom:10px;

  transform:
    translateX(-50%);

  padding:
    6px 11px;

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

  border-radius:999px;

  background:
    rgba(0,0,0,.4);

  color:
    rgba(255,255,255,.6);

  font-size:8px;
  font-weight:1000;

  letter-spacing:.14em;

  pointer-events:none;

  animation:
    ninja-whack-hint
    2.4s ease forwards;
}


@keyframes ninja-whack-hint{

  0%{
    opacity:0;
  }

  15%,
  65%{
    opacity:1;
  }

  100%{
    opacity:0;
  }

}


/* =============================
MOBILE
============================= */

@media(max-width:700px){

  .ninja-whack-hud{
    gap:4px;
  }


  .ninja-whack-hud-item{
    padding:
      6px 4px;
  }


  .ninja-whack-hole{
    width:72px;
    height:72px;
  }


  .ninja-whack-player{
    bottom:5%;
  }

}



/* ==========================================
BULLSEYE (Step 10-6)
========================================== */

.be-game {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.be-hud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.be-hud > div {
  padding: 7px 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}

.be-hud span {
  display: block;
  color: #7c8798;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.be-hud strong {
  color: #ffffff;
  font-size: 16px;
  font-weight: 1000;
}

.be-range {
  position: relative;
  flex: 1;
  min-height: 260px;
  overflow: hidden;
  border-radius: 18px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 40px),
    #0a0f16;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.be-target {
  position: absolute;
  border-radius: 50%;
  transform-origin: center;
  will-change: transform;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
  pointer-events: none;
  animation: be-appear 0.12s ease-out;
}

.be-target svg {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s ease;
}

@keyframes be-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

.be-target.hit svg {
  opacity: 0;
}

.be-target.vanish svg {
  opacity: 0;
}

.be-shot {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #ffe36b;
  box-shadow: 0 0 0 3px rgba(255, 227, 107, 0.35);
  pointer-events: none;
  animation: be-shot 0.4s ease-out forwards;
}

@keyframes be-shot {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(2.2); opacity: 0; }
}

.be-message {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-size: 20px;
  font-weight: 1000;
  letter-spacing: 0.05em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.be-message.perfect { color: #ffe36b; }
.be-message.great { color: #79f6ab; }
.be-message.good { color: #58dff3; }
.be-message.edge { color: #c3ccd8; }
.be-message.bad { color: #ff5a73; }

.be-message.show {
  animation: be-message 0.5s ease forwards;
}

@keyframes be-message {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.9); }
  20% { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -6px) scale(1); }
}


/* ==========================================
TIME LIMITS (Step 13)
========================================== */

.memory-message.memory-time-danger {
  color: #ff5a73;
}

.puzzle-top .puzzle-top-gap {
  margin-left: 14px;
}

.puzzle-top strong.danger {
  color: #ff5a73;
}



/* ==========================================
START SCREEN LINKS (Step 14)
========================================== */

.gamiq-start-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
}

.gamiq-start-links a {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.gamiq-start-links a:hover {
  color: #61eaff;
}


/* ==========================================
SHORT SCREENS (Step 16)
For small windows such as 800 x 450
(CrazyGames minimum frame, small laptop windows,
phones held sideways).
========================================== */

@media (max-height: 620px) {

  .gamiq-live-header {
    height: 46px;
  }

  .gamiq-live-brand span {
    display: none;
  }

  .gamiq-results-button {
    min-height: 32px;
  }

  .gamiq-feed {
    height: calc(100vh - 46px);
  }

  .gamiq-feed-card {
    padding: 4px 12px 6px;
  }

  .gamiq-game-shell {
    height: 100%;
    min-height: 0;
    border-radius: 16px;
  }

  .gamiq-game-top {
    min-height: 0;
    padding: 8px 14px 6px;
  }

  .gamiq-game-skill {
    margin-bottom: 2px;
  }

  .gamiq-game-top h2 {
    font-size: 20px;
  }

  .gamiq-game-host {
    padding: 0 12px 8px;
  }

  .gamiq-rule-overlay {
    inset: 48px 0 0;
  }

  /* Game areas may shrink instead of pushing buttons off screen */
  .lane-panic-road,
  .foe2-arena,
  .be-range,
  .cs-stage {
    min-height: 0;
  }

  .cs-stage {
    gap: 8px;
  }

  .cs-word {
    font-size: 40px;
  }

  .cs-button {
    height: 46px;
  }

  .rush-controls button,
  .lane-panic-controls button {
    height: 44px;
    min-height: 44px;
  }

  .pipe2-game {
    gap: 6px;
  }

  .pipe2-board {
    width: min(100%, 420px, calc((100vh - 220px) * 1.15));
  }

  .pipe2-message {
    min-height: 20px;
  }
}

@supports (height: 100dvh) {
  @media (max-height: 620px) {
    .gamiq-feed {
      height: calc(100dvh - 46px);
    }
  }
}



/* ==========================================
BLOCK ESCAPE - WOOD STYLE
========================================== */

.block-escape-game .block-board {
  border: 2px solid #2a170b;
  background:
    linear-gradient(rgba(0, 0, 0, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18) 1px, transparent 1px),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 0 3px,
      rgba(0, 0, 0, 0.05) 3px 9px
    ),
    linear-gradient(180deg, #4a2e1a, #2f1c0f);
  background-size:
    calc(100% / 6) calc(100% / 6),
    calc(100% / 6) calc(100% / 6),
    auto,
    auto;
  box-shadow:
    inset 0 4px 14px rgba(0, 0, 0, 0.55),
    0 10px 24px rgba(0, 0, 0, 0.35);
}

.block-escape-game .block-board::after {
  background: #1d1008;
  color: #ffb26b;
  box-shadow: inset 0 0 0 1px rgba(255, 178, 107, 0.35);
}

.block-escape-game .puzzle-block {
  border: 1px solid #6b4423;
  border-radius: 7px;
  color: #fff7ea;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  box-shadow:
    inset 0 2px 0 rgba(255, 236, 200, 0.35),
    inset 0 -3px 0 rgba(70, 38, 14, 0.45),
    0 5px 10px rgba(0, 0, 0, 0.4);
}

/* Light pine wood */
.block-escape-game .puzzle-block.wood-h {
  background:
    radial-gradient(ellipse 14% 30% at 28% 55%, rgba(110, 62, 25, 0.45) 0 40%, transparent 70%),
    repeating-linear-gradient(
      0deg,
      rgba(120, 70, 30, 0.22) 0 1px,
      transparent 1px 5px,
      rgba(120, 70, 30, 0.12) 5px 6px,
      transparent 6px 11px
    ),
    linear-gradient(180deg, #e2b07a, #c48a50 55%, #b07a43);
}

.block-escape-game .puzzle-block.wood-v {
  background:
    radial-gradient(ellipse 30% 14% at 55% 30%, rgba(110, 62, 25, 0.45) 0 40%, transparent 70%),
    repeating-linear-gradient(
      90deg,
      rgba(120, 70, 30, 0.22) 0 1px,
      transparent 1px 5px,
      rgba(120, 70, 30, 0.12) 5px 6px,
      transparent 6px 11px
    ),
    linear-gradient(90deg, #e2b07a, #c48a50 55%, #b07a43);
}

/* Red painted wood (the block you must get out) */
.block-escape-game .puzzle-block.target.wood-h,
.block-escape-game .puzzle-block.target.wood-v {
  border-color: #7a1d1b;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(90, 10, 10, 0.25) 0 1px,
      transparent 1px 5px,
      rgba(90, 10, 10, 0.14) 5px 6px,
      transparent 6px 11px
    ),
    linear-gradient(180deg, #ef5f55, #c9302f 60%, #a82424);
  box-shadow:
    inset 0 2px 0 rgba(255, 210, 200, 0.35),
    inset 0 -3px 0 rgba(80, 10, 10, 0.45),
    0 0 18px rgba(255, 80, 70, 0.35),
    0 5px 10px rgba(0, 0, 0, 0.4);
}

.block-escape-game .puzzle-block.selected {
  outline-color: #ffe08a;
  box-shadow:
    0 0 0 2px rgba(255, 224, 138, 0.35),
    0 0 20px rgba(255, 224, 138, 0.45);
}
/* ==========================================
PIPE CONNECT - FLOWING WATER
========================================== */

/* Moving water inside connected pipes */
.pipe2-stream {
  fill: none;
  stroke: #d9fbff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 7 11;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.pipe2-tile.flow .pipe2-stream {
  opacity: 0.85;
  animation: pipe2-stream 0.55s linear infinite;
}

.pipe2-tile.flow.rev .pipe2-stream {
  animation-direction: reverse;
}

@keyframes pipe2-stream {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -18; }
}

/* Final water sweep from IN to OUT when solved */
.pipe2-fill {
  fill: none;
  stroke: #79f6ab;
  stroke-width: 16;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
}

.pipe2-tile.rev .pipe2-fill {
  stroke-dashoffset: -100;
}

.pipe2-tile.filled .pipe2-fill {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.14s linear;
}

.pipe2-tile.filled {
  box-shadow: inset 0 0 14px rgba(121, 246, 171, 0.35);
}

.pipe2-edge.out.splash {
  animation: pipe2-splash 0.5s ease;
}

@keyframes pipe2-splash {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); box-shadow: 0 0 22px rgba(121, 246, 171, 0.9); }
  100% { transform: scale(1); }
}


/* ==========================================
NINJA COUNTER - BAMBOO GROVE (Step 18)
Round holes -> gaps in a bamboo thicket.
Ninjas rise up from the grass between two bamboo stalks.
========================================== */

/* Night bamboo forest background */
.ninja-whack-stage{
  background:
    radial-gradient(
      ellipse at 50% 18%,
      rgba(190,230,170,.16),
      transparent 45%
    ),
    linear-gradient(
      180deg,
      #0c1a10,
      #050b07
    );
}

/* Far bamboo (thin, dark) */
.ninja-whack-bg::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 26px,
      rgba(40,80,45,.55) 26px 33px,
      transparent 33px 61px,
      rgba(30,62,36,.5) 61px 66px,
      transparent 66px 97px
    );

  opacity:.8;
}

/* Near bamboo (thicker, with joints) */
.ninja-whack-bg::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 52px,
      rgba(0,0,0,.45) 52px 55px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 70px,
      #1f4a26 70px 74px,
      #3d7a3f 74px 80px,
      #24522a 80px 86px,
      transparent 86px 151px
    );

  -webkit-mask:
    repeating-linear-gradient(
      90deg,
      transparent 0 70px,
      #000 70px 86px,
      transparent 86px 151px
    );
  mask:
    repeating-linear-gradient(
      90deg,
      transparent 0 70px,
      #000 70px 86px,
      transparent 86px 151px
    );

  opacity:.55;
}

.ninja-whack-moon{
  top:6%;
  opacity:.18;
}

/* The old roof becomes low grass / undergrowth */
.ninja-whack-roof{
  height:22%;

  background:
    linear-gradient(
      180deg,
      #10301a,
      #050d07
    );

  clip-path:
    polygon(
      0 30%, 4% 10%, 8% 32%, 13% 6%, 18% 30%,
      24% 12%, 30% 34%, 36% 8%, 42% 30%,
      48% 14%, 54% 32%, 60% 6%, 66% 30%,
      72% 12%, 78% 34%, 84% 8%, 90% 30%,
      95% 12%, 100% 28%, 100% 100%, 0 100%
    );
}


/* ---------- GAP BETWEEN BAMBOO ---------- */

.ninja-whack-hole{
  width:92px;
  height:118px;

  border-radius:6px;

  /* misty moonlit gap, so the dark ninja stands out */
  background:
    radial-gradient(
      ellipse at 50% 30%,
      rgba(215,235,205,.55),
      rgba(120,160,120,.28) 55%,
      rgba(30,60,35,.6)
    );

  box-shadow:none;

  overflow:hidden;
}

/* Two bamboo stalks: left and right side of the gap.
   They sit IN FRONT of the ninja. */
.ninja-whack-hole::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;

  pointer-events:none;

  background:
    /* joints */
    linear-gradient(180deg, transparent 0 30%, rgba(0,0,0,.55) 30% 33%, transparent 33% 68%, rgba(0,0,0,.55) 68% 71%, transparent 71%) left / 18px 100% no-repeat,
    linear-gradient(180deg, transparent 0 18%, rgba(0,0,0,.55) 18% 21%, transparent 21% 58%, rgba(0,0,0,.55) 58% 61%, transparent 61%) right / 18px 100% no-repeat,
    /* stalks */
    linear-gradient(90deg, #1d4a24, #5fa556 40%, #8cc874 55%, #2e6a32) left / 18px 100% no-repeat,
    linear-gradient(90deg, #2e6a32, #8cc874 45%, #5fa556 60%, #1d4a24) right / 18px 100% no-repeat;
}

/* Grass tuft in front, at the bottom of the gap */
.ninja-whack-hole::after{
  content:"";
  position:absolute;
  left:-4px;
  right:-4px;
  bottom:0;
  z-index:4;

  height:26px;

  pointer-events:none;

  background:
    linear-gradient(180deg, #2f7a36, #123a19);

  clip-path:
    polygon(
      0 100%, 0 40%, 8% 0, 14% 50%, 22% 10%,
      30% 55%, 38% 5%, 46% 50%, 54% 0, 62% 48%,
      70% 8%, 78% 52%, 86% 4%, 92% 45%, 100% 20%, 100% 100%
    );
}

/* Ninja stays between the stalks, behind the grass */
.ninja-whack-character{
  z-index:2;

  bottom:-80%;
}

.ninja-whack-hole.show
.ninja-whack-character{
  bottom:8px;
}

/* Bamboo shake when someone pops out */
.ninja-whack-hole.show::before{
  animation:ninja-bamboo-shake .28s ease-out;
}

@keyframes ninja-bamboo-shake{
  0%   { transform:translateX(0); }
  30%  { transform:translateX(-2px); }
  60%  { transform:translateX(2px); }
  100% { transform:translateX(0); }
}

@media(max-width:700px){
  .ninja-whack-hole{
    width:78px;
    height:104px;
  }
}

@media(max-height:620px){
  .ninja-whack-hole{
    width:76px;
    height:96px;
  }
}


/* ==========================================
NINJA COUNTER - BAMBOO DEPTH (Step 18-2)
- Moon -> small crescent in the top right (was the round thing in the middle)
- Bamboo stalks now run from the top of the screen down to the grass
- Back row smaller and darker, front row bigger = depth
- Bamboo sways when a ninja pops out
- FEINT: another gap rustles but nobody comes out
========================================== */

/* Small crescent moon, out of the way */
.ninja-whack-moon{
  left:auto;
  right:7%;
  top:5%;

  width:44px;
  height:44px;

  transform:none;

  background:none;

  box-shadow:
    inset -9px 5px 0 0 #e9f2dc;

  opacity:.55;
}

/* Gap: no box. Stalks may grow upward, bottom stays clipped. */
.ninja-whack-hole{
  overflow:visible;

  clip-path:
    inset(-600px -14px 0 -14px);

  border-radius:0;

  /* soft mist between the stalks, fades out at the top */
  background:
    radial-gradient(
      ellipse 62% 70% at 50% 68%,
      rgba(215,235,205,.5),
      rgba(130,170,130,.2) 58%,
      transparent 76%
    );
}

/* Tall bamboo stalks on both sides */
.ninja-whack-hole::before{
  top:-600px;

  background:
    /* joints */
    repeating-linear-gradient(
      180deg,
      transparent 0 74px,
      rgba(0,0,0,.55) 74px 77px,
      rgba(255,255,255,.18) 77px 78px
    ) left / 18px 100% no-repeat,
    repeating-linear-gradient(
      180deg,
      transparent 0 52px,
      rgba(0,0,0,.55) 52px 55px,
      rgba(255,255,255,.18) 55px 56px
    ) right / 18px 100% no-repeat,
    /* round stalk shading */
    linear-gradient(90deg, #163b1c, #4f9448 35%, #9bd27f 52%, #3b7a3a 75%, #163b1c) left / 18px 100% no-repeat,
    linear-gradient(90deg, #163b1c, #3b7a3a 25%, #9bd27f 48%, #4f9448 65%, #163b1c) right / 18px 100% no-repeat;

  filter:
    drop-shadow(0 0 6px rgba(0,0,0,.55));

  transform-origin:
    50% 100%;
}

/* Back row (top 3): farther away */
.ninja-whack-hole-1,
.ninja-whack-hole-2,
.ninja-whack-hole-3{
  scale:.82;

  filter:
    brightness(.84)
    saturate(.85);
}

/* Front row (bottom 2): closer */
.ninja-whack-hole-4,
.ninja-whack-hole-5{
  z-index:9;

  scale:1.08;
}

/* Sway when a ninja pops out */
.ninja-whack-hole.show::before{
  animation:
    ninja-bamboo-sway .42s ease-out;
}

/* FEINT: rustle with nobody inside */
.ninja-whack-hole.rustle-decoy::before{
  animation:
    ninja-bamboo-sway .42s ease-out;
}

@keyframes ninja-bamboo-sway{
  0%   { transform:rotate(0deg); }
  20%  { transform:rotate(-1.6deg); }
  45%  { transform:rotate(1.2deg); }
  70%  { transform:rotate(-.6deg); }
  100% { transform:rotate(0deg); }
}

/* Grass also shakes a little */
.ninja-whack-hole.show::after,
.ninja-whack-hole.rustle-decoy::after{
  animation:
    ninja-grass-shake .3s ease-out;
}

@keyframes ninja-grass-shake{
  0%   { transform:translateX(0); }
  30%  { transform:translateX(-3px); }
  65%  { transform:translateX(2px); }
  100% { transform:translateX(0); }
}


/* ==========================================
QUICK DRAW - WESTERN DUEL 3D LOOK (Step 18-3)
Street with perspective, a drawn gunslinger,
gun recoil / muzzle flash / tracer / impact / hat flying.
========================================== */

.qd-arena{
  display:block;

  background:#1a0f12;

  isolation:isolate;
}

/* ---------- SKY ---------- */

.qd-sky{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      #2a1736 0%,
      #7a2f3d 26%,
      #d2603d 42%,
      #f4a95c 52%,
      #f4a95c 53%
    );
}

.qd-sun{
  position:absolute;

  left:50%;
  top:28%;

  width:86px;
  height:86px;

  transform:translateX(-50%);

  border-radius:50%;

  background:
    radial-gradient(circle, #fff1c2 0 45%, #ffc773 70%, rgba(255,180,90,0) 72%);

  box-shadow:
    0 0 60px 24px rgba(255,170,90,.45);
}

.qd-mesa{
  position:absolute;

  left:0;
  right:0;
  top:38%;

  height:15%;

  background:
    linear-gradient(180deg, #6b2c30, #3d1a22);

  clip-path:
    polygon(
      0 70%, 8% 30%, 18% 30%, 22% 60%, 34% 62%,
      38% 20%, 52% 20%, 56% 64%, 70% 64%, 74% 40%,
      86% 40%, 90% 70%, 100% 60%, 100% 100%, 0 100%
    );
}

/* ---------- STREET (perspective) ---------- */

.qd-street{
  position:absolute;
  inset:0;
}

/* ground with lines that meet at the vanishing point */
.qd-ground{
  position:absolute;

  left:0;
  right:0;
  top:52%;
  bottom:0;

  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><g stroke='%23000' stroke-opacity='.16' stroke-width='.35' fill='none'><path d='M50 0 L-60 100 M50 0 L-25 100 M50 0 L5 100 M50 0 L30 100 M50 0 L50 100 M50 0 L70 100 M50 0 L95 100 M50 0 L125 100 M50 0 L160 100'/><path d='M0 4 H100 M0 10 H100 M0 19 H100 M0 32 H100 M0 50 H100 M0 74 H100'/></g></svg>")
      center / 100% 100% no-repeat,
    linear-gradient(
      180deg,
      #b77443 0%,
      #9a5a33 40%,
      #6b3b22 100%
    );
}

/* building walls on both sides, narrowing to the center */
.qd-town{
  position:absolute;
  inset:0;

  z-index:1;
}

.qd-town i{
  display:none;
}

.qd-town-left{
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,.28) 0 2px,
      transparent 2px 22px
    ),
    linear-gradient(
      90deg,
      #6e4128 0%,
      #4c2c1d 60%,
      #2f1b13 100%
    );

  clip-path:
    polygon(0 4%, 36% 42%, 36% 53.5%, 0 92%);
}

.qd-town-right{
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 20px,
      rgba(0,0,0,.28) 20px 22px
    ),
    linear-gradient(
      270deg,
      #6e4128 0%,
      #4c2c1d 60%,
      #2f1b13 100%
    );

  clip-path:
    polygon(100% 4%, 64% 42%, 64% 53.5%, 100% 92%);
}

/* porch roofs / signs on the walls */
.qd-town::after{
  content:"";
  position:absolute;
  inset:0;
}

.qd-town-left::after{
  background:
    linear-gradient(180deg, transparent 0 30%, rgba(20,10,6,.7) 30% 34%, transparent 34% 62%, rgba(255,200,120,.25) 62% 66%, transparent 66%);
  clip-path:
    polygon(0 4%, 36% 42%, 36% 53.5%, 0 92%);
}

.qd-town-right::after{
  background:
    linear-gradient(180deg, transparent 0 34%, rgba(20,10,6,.7) 34% 38%, transparent 38% 58%, rgba(255,200,120,.25) 58% 62%, transparent 62%);
  clip-path:
    polygon(100% 4%, 64% 42%, 64% 53.5%, 100% 92%);
}

/* tumbleweed rolling across */
.qd-tumbleweed{
  position:absolute;

  z-index:2;

  left:-40px;
  top:62%;

  width:26px;
  height:26px;

  border-radius:50%;

  border:3px dotted #7a5532;

  box-shadow:
    inset 0 0 0 4px rgba(122,85,50,.55);

  animation:
    qd-tumble 9s linear infinite;

  opacity:.8;
}

@keyframes qd-tumble{
  0%   { transform:translateX(0) rotate(0deg); }
  100% { transform:translateX(1400px) rotate(1440deg); }
}

/* ---------- OPPONENT ---------- */

.qd-opponent{
  position:absolute;

  z-index:4;

  left:50%;
  bottom:36%;

  height:38%;
  aspect-ratio:120 / 200;

  transform:translateX(-50%);
}

.qd-shadow{
  position:absolute;

  left:10%;
  right:10%;
  bottom:-4%;

  height:8%;

  border-radius:50%;

  background:rgba(0,0,0,.45);

  filter:blur(2px);
}

.qd-body{
  position:absolute;
  inset:0;

  transform-origin:50% 100%;

  transition:
    transform .45s cubic-bezier(.3,1.4,.5,1),
    filter .2s ease;
}

.qd-body > svg{
  width:100%;
  height:100%;

  display:block;

  filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));
}

/* gun arm: hangs by the holster, swings up on DRAW */
.qd-arm{
  position:absolute;

  left:66%;
  top:36%;

  width:33%;
  height:40%;

  transform-origin:50% 6%;

  transform:rotate(-8deg);

  transition:transform .09s ease-out;
}

.qd-arm svg{
  width:100%;
  height:100%;
  display:block;
}

.duel-fake .qd-arm{
  transform:rotate(16deg);
}

.qd-draw .qd-arm{
  transform:rotate(58deg) scaleY(.78);
}

/* enemy muzzle flash (when you are too slow) */
.qd-enemy-flash{
  position:absolute;

  left:50%;
  bottom:-14%;

  width:150%;
  aspect-ratio:1;

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

  background:
    radial-gradient(circle, #ffffff 0 18%, #ffe27a 34%, rgba(255,140,40,.8) 52%, transparent 70%);

  clip-path:
    polygon(50% 0, 60% 35%, 100% 50%, 60% 65%, 50% 100%, 40% 65%, 0 50%, 40% 35%);

  pointer-events:none;
}

.qd-shoot .qd-enemy-flash{
  animation:qd-flash .22s ease-out;
}

/* hit: stagger back (flash), then fall backwards */
.qd-hit .qd-body{
  animation:
    qd-fall .75s cubic-bezier(.4,0,.6,1) forwards;
}

@keyframes qd-fall{
  0%   { transform:none; filter:brightness(2.2); }
  12%  { transform:rotate(-7deg) translateX(4%); filter:brightness(1.6); }
  35%  { transform:rotate(-10deg) translateX(6%); filter:brightness(1); }
  100% { transform:perspective(420px) rotateX(74deg) translateY(4%); filter:brightness(.85); }
}

.qd-hit .qd-arm{
  transform:rotate(130deg);
}

/* impact burst on the chest */
.qd-impact{
  position:absolute;

  left:50%;
  top:46%;

  width:70%;
  aspect-ratio:1;

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

  border-radius:50%;

  background:
    radial-gradient(circle, #ffffff 0 14%, #fff2a6 26%, rgba(255,170,60,.85) 40%, rgba(255,120,40,0) 66%);

  box-shadow:
    0 0 30px 10px rgba(255,200,110,.6);

  pointer-events:none;
}

.qd-hit .qd-impact{
  animation:qd-impact .32s ease-out;
}

@keyframes qd-impact{
  0%   { transform:translate(-50%,-50%) scale(.2); opacity:1; }
  60%  { transform:translate(-50%,-50%) scale(1.25); opacity:1; }
  100% { transform:translate(-50%,-50%) scale(1.6); opacity:0; }
}

/* hat */
.qd-hat{
  position:absolute;

  z-index:2;

  left:50%;
  top:3%;

  width:66%;

  transform:translateX(-50%);
}

.qd-hat svg{
  width:100%;
  display:block;
}

.qd-hit .qd-hat{
  animation:qd-hat-fly .8s cubic-bezier(.2,.7,.4,1) forwards;
}

@keyframes qd-hat-fly{
  0%   { transform:translateX(-50%) translateY(0) rotate(0deg); opacity:1; }
  100% { transform:translateX(-120%) translateY(-170%) rotate(-320deg); opacity:0; }
}

/* ---------- PLAYER GUN ---------- */

.qd-gun{
  position:absolute;

  z-index:6;

  right:-3%;
  bottom:-5%;

  width:min(44%, 250px);
  aspect-ratio:160 / 120;

  pointer-events:none;
}

.qd-gun svg{
  width:100%;
  height:100%;
  display:block;

  transform-origin:80% 85%;

  filter:drop-shadow(-6px 8px 10px rgba(0,0,0,.55));
}

.qd-gun.qd-fire svg{
  animation:qd-recoil .28s cubic-bezier(.2,.9,.3,1);
}

@keyframes qd-recoil{
  0%   { transform:rotate(0deg) translate(0,0); }
  18%  { transform:rotate(14deg) translate(8%,4%); }
  100% { transform:rotate(0deg) translate(0,0); }
}

.qd-muzzle{
  position:absolute;

  left:-8%;
  top:12%;

  width:42%;
  aspect-ratio:1;

  transform:scale(0);

  background:
    radial-gradient(circle, #ffffff 0 16%, #fff0a0 30%, rgba(255,150,40,.9) 48%, transparent 68%);

  clip-path:
    polygon(50% 0, 58% 36%, 100% 50%, 58% 64%, 50% 100%, 42% 64%, 0 50%, 42% 36%);

  filter:drop-shadow(0 0 12px #ffcf6b);
}

.qd-gun.qd-fire .qd-muzzle{
  animation:qd-flash .16s ease-out;
}

@keyframes qd-flash{
  0%   { transform:translate(-50%,0) scale(.3) rotate(0deg); opacity:1; }
  40%  { transform:translate(-50%,0) scale(1.15) rotate(20deg); opacity:1; }
  100% { transform:translate(-50%,0) scale(1.3) rotate(30deg); opacity:0; }
}

.qd-gun .qd-muzzle{
  /* the flash keyframes use translate(-50%), undo it for the gun */
  margin-left:21%;
}

.qd-smoke{
  position:absolute;

  left:2%;
  top:20%;

  width:22%;
  aspect-ratio:1;

  border-radius:50%;

  background:
    radial-gradient(circle, rgba(230,225,215,.7), rgba(230,225,215,0) 70%);

  opacity:0;
}

.qd-gun.qd-fire .qd-smoke{
  animation:qd-smoke .6s ease-out .05s;
}

@keyframes qd-smoke{
  0%   { transform:translate(0,0) scale(.4); opacity:.9; }
  100% { transform:translate(-30%,-120%) scale(2.2); opacity:0; }
}

/* bullet line */
.qd-tracer{
  position:absolute;

  z-index:5;

  height:3px;

  transform-origin:0 50%;

  border-radius:3px;

  background:
    linear-gradient(90deg, rgba(255,240,180,0), #fff3c4 55%, #ffffff);

  box-shadow:
    0 0 8px 2px rgba(255,220,140,.7);

  opacity:0;

  pointer-events:none;
}

.qd-tracer.show{
  animation:qd-tracer .24s ease-out;
}

@keyframes qd-tracer{
  0%   { opacity:1; clip-path:inset(0 100% 0 0); }
  30%  { opacity:1; clip-path:inset(0 0 0 0); }
  100% { opacity:0; clip-path:inset(0 0 0 60%); }
}

/* bullet hitting the ground (TOO EARLY) */
.qd-ground-dust{
  position:absolute;

  z-index:5;

  width:60px;
  height:34px;

  margin:-17px 0 0 -30px;

  border-radius:50%;

  background:
    radial-gradient(ellipse, rgba(214,170,120,.9), rgba(214,170,120,0) 70%);

  opacity:0;

  pointer-events:none;
}

.qd-ground-dust.show{
  animation:qd-dust .5s ease-out;
}

@keyframes qd-dust{
  0%   { transform:scale(.2); opacity:1; }
  100% { transform:scale(1.8) translateY(-14px); opacity:0; }
}

/* you got shot (TOO SLOW) */
.qd-hurt{
  position:absolute;
  inset:0;

  z-index:8;

  opacity:0;

  pointer-events:none;

  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><g stroke='%23fff' stroke-opacity='.75' stroke-width='.5' fill='none'><path d='M62 40 L48 22 L44 6 M62 40 L80 30 L96 26 M62 40 L74 58 L88 80 M62 40 L46 52 L22 60 L4 66 M62 40 L60 64 L52 96'/><circle cx='62' cy='40' r='2.5'/></g></svg>")
      center / 100% 100% no-repeat,
    radial-gradient(ellipse at center, transparent 40%, rgba(200,0,30,.55) 100%);
}

.qd-hurt-on .qd-hurt{
  animation:qd-hurt .65s ease-out;
}

@keyframes qd-hurt{
  0%   { opacity:1; }
  70%  { opacity:.8; }
  100% { opacity:0; }
}

/* ---------- ROUND CHAMBERS ---------- */

.qd-chambers{
  position:absolute;

  z-index:9;

  left:50%;
  top:10px;

  display:flex;
  gap:6px;

  transform:translateX(-50%);
}

.qd-chambers i{
  width:26px;
  height:26px;

  display:grid;
  place-items:center;

  border-radius:50%;

  border:2px solid rgba(255,230,180,.45);

  background:rgba(0,0,0,.35);

  color:#1b0e06;

  font-style:normal;
  font-size:8px;
  font-weight:1000;
}

.qd-chambers i.hit{
  background:#ffd27a;
  border-color:#ffd27a;
}

.qd-chambers i.fast{
  background:#fff1b5;
  border-color:#ffffff;
  box-shadow:0 0 10px rgba(255,230,150,.9);
}

.qd-chambers i.slow{
  background:#ff4d6a;
  border-color:#ff4d6a;
  color:#ffffff;
  font-size:11px;
}

/* ---------- MESSAGE ---------- */

.qd-message{
  left:50%;
  bottom:5%;

  transform:translateX(-50%);

  white-space:nowrap;
}

.duel-draw .qd-message{
  animation:qd-draw-pop .25s ease-out;

  font-size:20px;
}

@keyframes qd-draw-pop{
  0%   { transform:translateX(-50%) scale(1.8); }
  100% { transform:translateX(-50%) scale(1); }
}



/* ==========================================
LEVEL SYSTEM (Step 19)
Header LV, level-up banner, results level + history
========================================== */

/* Header: LV */
.gamiq-live-level strong{
  color:#ffd76a;
}

@media(max-width:700px){
  .gamiq-live-level{
    min-width:28px;
  }
}

/* Level-up banner on the COMPLETE screen */
.gamiq-levelup{
  display:flex;
  flex-direction:column;
  align-items:center;

  gap:6px;

  margin-top:22px;
  padding:14px 22px;

  border:1px solid rgba(255,215,106,.45);
  border-radius:16px;

  background:
    linear-gradient(
      180deg,
      rgba(255,215,106,.16),
      rgba(255,215,106,.04)
    );

  box-shadow:
    0 0 40px rgba(255,215,106,.18);

  text-align:center;

  animation:
    gamiq-levelup-pop .5s cubic-bezier(.2,1.5,.4,1);
}

.gamiq-levelup[hidden]{
  display:none;
}

.gamiq-levelup-title{
  color:#ffd76a;

  font-size:16px;
  font-weight:1000;

  letter-spacing:.14em;
}

.gamiq-levelup-gamiq{
  color:#ffffff;

  font-size:26px;
  font-weight:1000;

  letter-spacing:.02em;
}

.gamiq-levelup-next{
  color:#c9d1dc;

  font-size:11px;
  font-weight:900;

  letter-spacing:.06em;
}

@keyframes gamiq-levelup-pop{
  0%   { transform:scale(.6); opacity:0; }
  100% { transform:scale(1); opacity:1; }
}

/* Smaller score when the banner is shown, so everything fits */
.gamiq-card-complete.has-levelup
.gamiq-complete-score{
  font-size:clamp(54px, 8vw, 84px);
}

@media(max-height:620px){
  .gamiq-levelup{
    margin-top:10px;
    padding:8px 16px;
    gap:3px;
  }

  .gamiq-levelup-gamiq{
    font-size:20px;
  }
}

/* Results: level */
.gamiq-results-level{
  display:flex;
  align-items:baseline;

  gap:8px;

  margin-bottom:12px;
}

.gamiq-results-level span{
  color:#7c8798;

  font-size:10px;
  font-weight:1000;

  letter-spacing:.16em;
}

.gamiq-results-level strong{
  color:#ffd76a;

  font-size:28px;
  font-weight:1000;

  line-height:1;
}

.gamiq-results-level em{
  color:#5f6a7a;

  font-size:12px;
  font-style:normal;
  font-weight:900;
}

/* Results: today's levels */
.gamiq-results-history{
  margin-top:12px;
  padding:12px;

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

  background:rgba(255,255,255,.02);
}

.gamiq-results-history[hidden]{
  display:none;
}

.gamiq-results-history-title{
  margin-bottom:8px;

  color:#7c8798;

  font-size:9px;
  font-weight:1000;

  letter-spacing:.14em;
}

.gamiq-results-history ol{
  margin:0;
  padding:0;

  list-style:none;
}

.gamiq-results-history li{
  display:flex;
  justify-content:space-between;

  padding:5px 0;

  border-top:1px solid rgba(255,255,255,.05);

  font-size:13px;
}

.gamiq-results-history li:first-child{
  border-top:0;
}

.gamiq-results-history li span{
  color:#ffd76a;
  font-weight:1000;
}

.gamiq-results-history li strong{
  color:#ffffff;
}

.gamiq-results-reset{
  margin-top:10px;

  color:#5f6a7a;

  font-size:10px;
  line-height:1.5;
}

/* ==========================================
NICKNAME (Step 20)
========================================== */

.gamiq-nickname{
  display:flex;
  flex-direction:column;
  align-items:center;

  gap:7px;

  width:min(300px, 100%);

  margin:24px auto 0;
}

.gamiq-nickname label{
  color:#7c8798;

  font-size:10px;
  font-weight:1000;

  letter-spacing:.18em;
}

.gamiq-nickname input{
  width:100%;
  min-height:48px;

  padding:0 16px;

  border:1px solid rgba(95,239,255,.28);
  border-radius:14px;

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

  color:#ffffff;

  font:inherit;
  font-size:17px;     /* 16px+ stops iPhone from zooming in */
  font-weight:900;

  text-align:center;

  outline:none;

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

.gamiq-nickname input::placeholder{
  color:#4f5a6a;
  font-weight:700;
}

.gamiq-nickname input:focus{
  border-color:#5fefff;

  box-shadow:0 0 0 3px rgba(95,239,255,.15);
}

.gamiq-nickname.invalid input{
  border-color:#ff5573;

  box-shadow:0 0 0 3px rgba(255,85,115,.15);
}

.gamiq-nickname-error{
  min-height:14px;

  color:#ff7a90;

  font-size:11px;
  font-weight:800;
}

/* PLAY sits closer to the name box */
.gamiq-nickname + .gamiq-start-button{
  margin-top:10px;
}

/* Results: player name */
.gamiq-results-player{
  margin-bottom:8px;

  color:#5fefff;

  font-size:11px;
  font-weight:1000;

  letter-spacing:.12em;

  white-space:pre;
}

.gamiq-results-player[hidden]{
  display:none;
}

/* Short screens (e.g. 800x450, phones in landscape) */
@media(max-height:620px){
  .gamiq-start-inner h1{
    margin:12px 0 8px;
    font-size:24px;
  }

  .gamiq-start-inner p{
    font-size:12px;
    line-height:1.6;
  }

  .gamiq-start-logo{
    font-size:40px;
  }

  .gamiq-nickname{
    margin-top:10px;
    gap:4px;
  }

  .gamiq-nickname input{
    min-height:40px;
  }

  .gamiq-nickname + .gamiq-start-button{
    min-height:46px;
    margin-top:4px;
    margin-bottom:8px;
  }
}


/* ==========================================
RANKING (Step 22)
========================================== */

.gamiq-ranking-overlay{
  position:fixed;
  z-index:1100;
  inset:0;

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

  padding:16px;

  background:rgba(2,5,10,.88);
  backdrop-filter:blur(15px);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

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

.gamiq-ranking-overlay.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.gamiq-ranking-card{
  width:min(520px, 100%);
  max-height:calc(100dvh - 32px);

  display:flex;
  flex-direction:column;

  padding:20px;

  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;

  background:linear-gradient(180deg, #121a24, #080c12);

  box-shadow:0 30px 100px rgba(0,0,0,.5);
}

.gamiq-ranking-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:12px;
}

.gamiq-ranking-head strong{
  color:#ffd76a;

  font-size:18px;
  font-weight:1000;

  letter-spacing:.12em;
}

.gamiq-ranking-close{
  width:36px;
  height:36px;

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

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

  color:#ffffff;

  font-size:22px;
  line-height:1;

  cursor:pointer;
}

.gamiq-ranking-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:6px;

  padding:4px;

  border-radius:12px;

  background:rgba(255,255,255,.04);
}

.gamiq-ranking-tabs button{
  min-height:38px;

  border:0;
  border-radius:9px;

  background:transparent;

  color:#8c97a8;

  font:inherit;
  font-size:12px;
  font-weight:1000;

  letter-spacing:.1em;

  cursor:pointer;
}

.gamiq-ranking-tabs button.active{
  background:#ffd76a;

  color:#1d1504;
}

.gamiq-ranking-note{
  margin:10px 2px 6px;

  color:#7c8798;

  font-size:11px;
  line-height:1.5;
}

.gamiq-ranking-status{
  padding:26px 0;

  color:#9aa5b5;

  font-size:13px;

  text-align:center;
}

.gamiq-ranking-status[hidden]{
  display:none;
}

.gamiq-ranking-list{
  flex:1;
  min-height:0;

  overflow-y:auto;

  margin:0;
  padding:0;

  list-style:none;
}

.gamiq-ranking-row{
  display:grid;
  grid-template-columns:44px 1fr auto 64px;
  align-items:center;

  gap:8px;

  padding:9px 10px;

  border-top:1px solid rgba(255,255,255,.05);

  font-size:14px;
}

.gamiq-ranking-row:first-child{
  border-top:0;
}

.gamiq-ranking-rank{
  color:#7c8798;

  font-weight:1000;
}

.gamiq-ranking-name{
  overflow:hidden;

  color:#ffffff;

  font-weight:800;

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

.gamiq-ranking-level{
  color:#ffd76a;

  font-size:11px;
  font-weight:1000;
}

.gamiq-ranking-score{
  color:#ffffff;

  font-size:16px;
  font-weight:1000;

  text-align:right;
}

.gamiq-ranking-row.top1 .gamiq-ranking-rank{ color:#ffd76a; }
.gamiq-ranking-row.top2 .gamiq-ranking-rank{ color:#d6dee8; }
.gamiq-ranking-row.top3 .gamiq-ranking-rank{ color:#e0a066; }

.gamiq-ranking-row.me{
  border-radius:10px;

  background:rgba(95,239,255,.10);

  box-shadow:inset 0 0 0 1px rgba(95,239,255,.35);
}

.gamiq-ranking-me{
  margin-top:10px;
  padding-top:10px;

  border-top:1px solid rgba(255,255,255,.08);

  color:#9aa5b5;

  font-size:12px;
}

.gamiq-ranking-me[hidden]{
  display:none;
}

.gamiq-ranking-me > span{
  display:block;

  margin-bottom:4px;

  color:#5fefff;

  font-size:10px;
  font-weight:1000;

  letter-spacing:.14em;
}

.gamiq-ranking-me .gamiq-ranking-row{
  list-style:none;
}

.gamiq-ranking-formula{
  margin-top:10px;

  color:#5f6a7a;

  font-size:10px;

  text-align:center;
}

/* Buttons that open the ranking */
.gamiq-start-ranking{
  display:block;

  margin:0 auto 14px;
  padding:10px 22px;

  border:1px solid rgba(255,215,106,.4);
  border-radius:12px;

  background:rgba(255,215,106,.08);

  color:#ffd76a;

  font:inherit;
  font-size:13px;
  font-weight:1000;

  letter-spacing:.08em;

  cursor:pointer;
}

.gamiq-results-ranking{
  width:100%;
  min-height:46px;

  margin-top:14px;

  border:1px solid rgba(255,215,106,.4);
  border-radius:14px;

  background:rgba(255,215,106,.08);

  color:#ffd76a;

  font:inherit;
  font-size:14px;
  font-weight:1000;

  cursor:pointer;
}

.gamiq-results-ranking + .gamiq-results-continue{
  margin-top:10px;
}

@media(max-height:620px){
  .gamiq-start-ranking{
    margin-bottom:6px;
    padding:6px 18px;
    font-size:12px;
  }

  .gamiq-ranking-card{
    padding:14px;
  }

  .gamiq-ranking-row{
    padding:6px 10px;
  }
}




/* ==========================================
COLOR SWITCH - button shuffle flash (Step 23-2)
========================================== */

.cs-buttons.cs-shuffled .cs-button{
  animation:cs-shuffle-pop .22s ease-out;
}

@keyframes cs-shuffle-pop{
  0%   { transform:scale(.86); opacity:.6; }
  100% { transform:scale(1); opacity:1; }
}


/* ==========================================
BLOCK ESCAPE - EXIT marker follows the exit row (Step 23-4)
(the exit row is now random: rows 2-5)
========================================== */

.block-board::after{
  top:calc(8px + (100% - 16px) * (var(--exit-row, 2.5) + .5) / 6);

  /* always visible, even over a block (taps go through) */
  z-index:20;
  pointer-events:none;
}



/* ==========================================
LANE PANIC - FALLING SPIKES & CAT (Step 24)
========================================== */

/* Spiked iron ball */
.lane-spike{
  width:clamp(48px, 15vw, 66px);
  aspect-ratio:1;

  font-size:0;
  line-height:0;

  filter:drop-shadow(0 6px 6px rgba(0,0,0,.55));
}

.lane-spike svg{
  width:100%;
  height:100%;
  display:block;
}

/* Falls faster and faster (like gravity) and spins.
   It reaches the cat's height exactly when the round ends. */
.lane-spike.show{
  animation:lane-spike-fall .7s cubic-bezier(.55,0,1,.45) forwards;
}

@keyframes lane-spike-fall{
  0%{
    top:-18%;
    opacity:1;
    transform:translateX(-50%) rotate(0deg);
  }
  100%{
    top:calc(92% - clamp(48px, 15vw, 66px));
    opacity:1;
    transform:translateX(-50%) rotate(200deg);
  }
}

/* Hits the ground: small bounce, then fades */
.lane-spike.landed{
  animation:lane-spike-land .32s ease-out forwards;
  top:calc(92% - clamp(48px, 15vw, 66px));
}

@keyframes lane-spike-land{
  0%  { transform:translateX(-50%) rotate(200deg) scale(1.1, .85); opacity:1; }
  60% { transform:translateX(-50%) rotate(205deg) scale(1); opacity:1; }
  100%{ transform:translateX(-50%) rotate(205deg) scale(.9); opacity:0; }
}

/* Shadow on the ground: shows where the spike will land */
.lane-shadow{
  position:absolute;

  bottom:6%;

  width:clamp(48px, 15vw, 66px);
  height:14px;

  transform:translateX(-50%) scale(.3);

  border-radius:50%;

  background:radial-gradient(ellipse, rgba(255,70,100,.55), rgba(255,70,100,0) 70%);

  opacity:0;
}

.lane-shadow.show{
  animation:lane-shadow-grow .7s ease-in forwards;
}

@keyframes lane-shadow-grow{
  0%   { transform:translateX(-50%) scale(.3); opacity:.25; }
  100% { transform:translateX(-50%) scale(1.15); opacity:.9; }
}

/* The cat */
.lane-cat{
  width:clamp(52px, 16vw, 70px);
  aspect-ratio:1;

  font-size:0;
  line-height:0;

  filter:drop-shadow(0 6px 8px rgba(0,0,0,.5));
}

.lane-cat svg{
  width:100%;
  height:100%;
  display:block;
}

.lane-cat .cat-eyes-hurt{
  display:none;
}

/* Safe: happy little hop */
.lane-cat.lane-safe{
  transform:translateX(-50%) translateY(-10px) scale(1.12);
  text-shadow:none;
  filter:
    drop-shadow(0 0 14px rgba(121,246,171,.75))
    drop-shadow(0 6px 8px rgba(0,0,0,.5));
}

/* Hit: X eyes, red glow, shake */
.lane-cat.lane-crash{
  filter:
    drop-shadow(0 0 16px rgba(255,60,90,.9))
    drop-shadow(0 6px 8px rgba(0,0,0,.5));
}

.lane-cat.lane-crash .cat-eyes-open{
  display:none;
}

.lane-cat.lane-crash .cat-eyes-hurt{
  display:inline;
}


/* ==========================================
GHOST GRID - GRAVEYARD & GHOSTS (Step 24)
========================================== */

/* Night graveyard */
.ghost-grid .memory-grid{
  background:
    radial-gradient(circle at 82% 10%, rgba(255,246,210,.22), transparent 18%),
    linear-gradient(180deg, #1b1430 0%, #120d22 55%, #0b0a14 100%);

  border-color:rgba(190,170,255,.14);
}

/* Each tile = a spot with a gravestone */
.ghost-grid .memory-cell.gg-grave{
  position:relative;

  overflow:hidden;

  border:1px solid rgba(190,170,255,.10);

  background:
    linear-gradient(180deg, rgba(40,30,70,.35), rgba(20,16,34,.6));
}

/* Gravestone (in front of a hiding ghost) */
.ghost-grid .memory-cell.gg-grave::before{
  content:"";
  position:absolute;
  z-index:2;

  left:50%;
  bottom:12%;

  width:52%;
  height:52%;

  transform:translateX(-50%);

  border-radius:45% 45% 8% 8% / 38% 38% 8% 8%;

  background:
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 40%),
    linear-gradient(180deg, #8d8aa3, #5c5973);

  box-shadow:
    inset 0 -6px 0 rgba(0,0,0,.18),
    0 4px 6px rgba(0,0,0,.4);

  pointer-events:none;
}

/* Little dirt mound */
.ghost-grid .memory-cell.gg-grave::after{
  content:"";
  position:absolute;
  z-index:3;

  left:18%;
  right:18%;
  bottom:6%;

  height:12%;

  border-radius:50% 50% 30% 30%;

  background:linear-gradient(180deg, #3d3350, #241d33);

  pointer-events:none;
}

/* The ghost */
.gg-ghost{
  position:absolute;
  z-index:1; /* behind the gravestone while hiding */

  left:50%;
  top:0;

  /* sized by height so it fits wide-and-short tiles (PC) too */
  height:64%;
  width:auto;
  aspect-ratio:1;

  transform:translateX(-50%);

  pointer-events:none;

  filter:drop-shadow(0 0 10px rgba(200,190,255,.6));
}

.gg-ghost svg{
  width:100%;
  height:100%;
  display:block;
}

/* Peeks out from behind the stone, bobbing */
.gg-ghost.gg-peek{
  animation:
    gg-rise .28s ease-out forwards,
    gg-bob 1s ease-in-out .28s infinite;
}

@keyframes gg-rise{
  0%   { transform:translateX(-50%) translateY(55%); opacity:0; }
  100% { transform:translateX(-50%) translateY(-6%); opacity:1; }
}

@keyframes gg-bob{
  0%, 100% { transform:translateX(-50%) translateY(-6%); }
  50%      { transform:translateX(-50%) translateY(-12%); }
}

/* Hides again */
.gg-ghost.gg-sink{
  animation:gg-sink .25s ease-in forwards;
}

@keyframes gg-sink{
  0%   { transform:translateX(-50%) translateY(0); opacity:1; }
  100% { transform:translateX(-50%) translateY(60%); opacity:0; }
}

/* Found! Pops out in front of the stone */
.gg-ghost.gg-caught{
  z-index:4;

  top:2%;

  height:76%;
  width:auto;

  animation:gg-pop .35s cubic-bezier(.2,1.6,.4,1) forwards;

  filter:drop-shadow(0 0 14px rgba(150,255,190,.85));
}

@keyframes gg-pop{
  0%   { transform:translateX(-50%) translateY(40%) scale(.4); opacity:0; }
  100% { transform:translateX(-50%) translateY(0) scale(1); opacity:1; }
}

.ghost-grid .memory-cell.gg-found{
  box-shadow:inset 0 0 0 2px rgba(120,255,170,.55), 0 0 18px rgba(120,255,170,.25);
}

/* Nobody here */
.ghost-grid .memory-cell.gg-empty{
  box-shadow:inset 0 0 0 2px rgba(255,80,110,.6);
  animation:gamiq-shake .18s ease;
}

.ghost-grid .memory-cell.gg-empty::before{
  filter:sepia(1) hue-rotate(-40deg) saturate(2.5) brightness(.8);
}




/* ==========================================
SOUND BUTTON (Step 26)
========================================== */

.gamiq-sound-button{
  width:38px;
  height:38px;

  flex:0 0 auto;

  display:grid;
  place-items:center;

  padding:0;

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

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

  font-size:17px;
  line-height:1;

  cursor:pointer;
}

.gamiq-sound-button.off{
  opacity:.55;
}

@media(max-width:700px){
  .gamiq-sound-button{
    width:32px;
    height:32px;
    font-size:14px;
    border-radius:10px;
  }
}



/* ==========================================
TITLE / TOP x% / SHARE (Step 27)
========================================== */

.gamiq-results-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;

  margin:-6px 0 16px;
}

.gamiq-results-title,
.gamiq-results-rank{
  padding:6px 12px;

  border-radius:999px;

  font-size:12px;
  font-weight:1000;

  letter-spacing:.1em;
}

.gamiq-results-title{
  --title-color:#5fefff;

  border:1px solid var(--title-color);

  background:color-mix(in srgb, var(--title-color) 14%, transparent);

  color:var(--title-color);
}

.gamiq-results-rank{
  border:1px solid rgba(255,215,106,.45);

  background:rgba(255,215,106,.10);

  color:#ffd76a;
}

.gamiq-results-title[hidden],
.gamiq-results-rank[hidden]{
  display:none;
}

/* SHARE + RANKING side by side */
.gamiq-results-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;

  margin-top:14px;
}

.gamiq-results-actions .gamiq-results-ranking{
  margin-top:0;
}

.gamiq-results-share{
  width:100%;
  min-height:46px;

  border:1px solid rgba(95,239,255,.45);
  border-radius:14px;

  background:rgba(95,239,255,.10);

  color:#5fefff;

  font:inherit;
  font-size:14px;
  font-weight:1000;

  cursor:pointer;
}

.gamiq-results-share:disabled{
  opacity:.5;
}

.gamiq-results-share-note{
  min-height:0;

  margin-top:6px;

  color:#9aa5b5;

  font-size:11px;

  text-align:center;
}

.gamiq-results-share-note:empty{
  display:none;
}

.gamiq-results-actions + .gamiq-results-share-note + .gamiq-results-continue,
.gamiq-results-actions + .gamiq-results-continue{
  margin-top:10px;
}

/* Title on the level-up banner */
.gamiq-levelup-rankname{
  font-size:14px;
  font-weight:1000;

  letter-spacing:.14em;
}



/* ==========================================
DRUM DUO - RHYTHM GAME (Step 28)
========================================== */

.rh-game{
  width:100%;
  height:100%;
  min-height:0;

  display:flex;
  flex-direction:column;

  gap:10px;
}

.rh-hud{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px;
}

.rh-hud > div{
  padding:8px 4px;

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

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

  text-align:center;
}

.rh-hud span{
  display:block;

  margin-bottom:3px;

  color:#7c8798;

  font-size:9px;
  font-weight:1000;

  letter-spacing:.14em;
}

.rh-hud strong{
  color:#ffffff;

  font-size:18px;
}

/* Stage: a little concert stage */
.rh-stage{
  --beat:600ms;

  position:relative;

  flex:1;
  min-height:0;

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

  padding:12px 12px 14px;

  overflow:hidden;

  border-radius:20px;

  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,200,110,.22), transparent 55%),
    linear-gradient(180deg, #2a1838 0%, #170f24 60%, #0d0915 100%);

  touch-action:manipulation;

  user-select:none;
  -webkit-user-select:none;
}

/* Every beat the stage "breathes" a little */
.rh-stage.pulse{
  animation:rh-pulse var(--beat) ease-out;
}

@keyframes rh-pulse{
  0%   { box-shadow:inset 0 0 0 2px rgba(255,215,106,.35); }
  100% { box-shadow:inset 0 0 0 0 rgba(255,215,106,0); }
}

/* Beat lamps 1-2-3-4 */
.rh-lights{
  display:flex;
  gap:10px;
}

.rh-lights i{
  width:16px;
  height:16px;

  border-radius:50%;

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

  transition:background .06s ease, box-shadow .06s ease;
}

.rh-lights i:first-child{
  width:20px;
  height:20px;
  margin-top:-2px;
}

.rh-lights i.on{
  background:#ffd76a;

  box-shadow:0 0 16px rgba(255,215,106,.9);
}

/* LISTEN / YOUR TURN */
.rh-call{
  min-height:30px;

  color:#c9d1dc;

  font-size:20px;
  font-weight:1000;

  letter-spacing:.08em;

  text-align:center;
}

.rh-call.listen{ color:#7fb2ff; }
.rh-call.yours { color:#ffb15c; }

.rh-call.count{
  color:#ffffff;

  font-size:30px;
}

/* The two drummers */
.rh-duo{
  width:100%;

  flex:1;
  min-height:0;

  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:end;

  gap:8px;
}

.rh-player{
  position:relative;

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

  min-height:0;

  opacity:.55;

  transition:opacity .2s ease;
}

.rh-player.active{
  opacity:1;
}

.rh-figure{
  width:min(120px, 70%);
  aspect-ratio:120 / 140;

  margin-bottom:-14%;

  transform-origin:50% 100%;

  animation:rh-bob var(--beat) ease-in-out infinite;
}

.rh-figure svg,
.rh-drum svg{
  width:100%;
  height:100%;
  display:block;
}

@keyframes rh-bob{
  0%, 100% { transform:translateY(0) scaleY(1); }
  50%      { transform:translateY(3%) scaleY(.97); }
}

.rh-drum{
  position:relative;
  z-index:2;

  width:min(130px, 78%);
  aspect-ratio:120 / 70;

  transform-origin:50% 30%;
}

.rh-arm{
  transform-box:fill-box;
  transform-origin:20% 90%;
}

/* Hit! drum squash + arm swing + DON! */
.rh-player.hit .rh-drum{
  animation:rh-drum-hit .16s ease-out;
}

.rh-player.hit .rh-arm{
  animation:rh-arm-hit .16s ease-out;
}

@keyframes rh-drum-hit{
  0%   { transform:scale(1.08, .86); }
  100% { transform:scale(1); }
}

@keyframes rh-arm-hit{
  0%   { transform:rotate(38deg); }
  100% { transform:rotate(0deg); }
}

.rh-don{
  position:absolute;
  z-index:3;

  top:8%;
  right:4%;

  color:#ffffff;

  font-size:18px;
  font-weight:1000;

  opacity:0;

  pointer-events:none;
}

.rh-master .rh-don{ color:#9fc4ff; }
.rh-you .rh-don   { color:#ffc27a; }

.rh-player.hit .rh-don{
  animation:rh-don .35s ease-out;
}

@keyframes rh-don{
  0%   { transform:translateY(6px) scale(.7); opacity:1; }
  100% { transform:translateY(-14px) scale(1.15); opacity:0; }
}

.rh-name{
  margin-top:6px;

  color:#7c8798;

  font-size:10px;
  font-weight:1000;

  letter-spacing:.16em;
}

.rh-player.active .rh-name{
  color:#ffffff;
}

/* Rhythm bar */
.rh-bar{
  width:100%;

  margin-top:12px;
  padding:0 14px;
}

.rh-track{
  position:relative;

  height:34px;

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

  background:rgba(0,0,0,.3);
}

.rh-track.yours{
  border-color:rgba(255,177,92,.45);
}

.rh-beat-mark{
  position:absolute;

  top:6px;
  bottom:6px;

  width:2px;

  margin-left:-1px;

  background:rgba(255,255,255,.14);
}

.rh-playhead{
  position:absolute;

  top:-5px;
  bottom:-5px;

  width:3px;

  margin-left:-1.5px;

  border-radius:2px;

  background:#ffffff;

  box-shadow:0 0 10px rgba(255,255,255,.8);
}

/* Notes on the bar */
.rh-note{
  position:absolute;

  top:50%;

  width:20px;
  height:20px;

  margin:-10px 0 0 -10px;

  border-radius:50%;
}

.rh-note.call{
  background:#7fb2ff;
  opacity:.5;
}

.rh-note.call.played{
  opacity:1;

  box-shadow:0 0 12px rgba(127,178,255,.9);
}

.rh-note.target{
  border:3px solid #ffb15c;

  background:transparent;
}

.rh-note.target.perfect{
  border-color:#7cf7a8;
  background:#7cf7a8;
  box-shadow:0 0 12px rgba(124,247,168,.9);
}

.rh-note.target.good{
  border-color:#ffd76a;
  background:#ffd76a;
}

.rh-note.target.miss{
  border-color:#ff4d6a;
  opacity:.6;
}

/* PERFECT / GOOD / MISS */
.rh-judge{
  position:absolute;

  left:50%;
  top:34%;

  transform:translateX(-50%);

  font-size:26px;
  font-weight:1000;

  letter-spacing:.06em;

  opacity:0;

  pointer-events:none;
}

.rh-judge.perfect{ color:#7cf7a8; }
.rh-judge.good   { color:#ffd76a; }
.rh-judge.miss   { color:#ff6b84; }

.rh-judge.show{
  animation:rh-judge .45s ease-out;
}

@keyframes rh-judge{
  0%   { transform:translateX(-50%) scale(1.4); opacity:1; }
  100% { transform:translateX(-50%) translateY(-12px) scale(1); opacity:0; }
}

/* Big tap button */
.rh-tap{
  min-height:64px;

  border:0;
  border-radius:16px;

  background:linear-gradient(180deg, #ffcb82, #ff8f3d);

  color:#2a1404;

  font:inherit;
  font-size:17px;
  font-weight:1000;

  letter-spacing:.08em;

  cursor:pointer;

  touch-action:manipulation;
}

.rh-tap:active{
  transform:scale(.98);
}

@media(max-height:620px){
  .rh-hud > div{ padding:4px; }
  .rh-hud strong{ font-size:15px; }
  .rh-call{ font-size:16px; min-height:22px; }
  .rh-figure{ width:min(80px, 55%); }
  .rh-drum{ width:min(90px, 60%); }
  .rh-tap{ min-height:46px; }
  .rh-bar{ margin-top:6px; }
  .rh-track{ height:28px; }
}

/* ==========================================
SPOT IT! - SPOT THE DIFFERENCE (Step 29)
========================================== */

.spot-game{
  width:100%;
  height:100%;
  min-height:0;

  display:flex;
  flex-direction:column;

  gap:8px;
}

.spot-hud{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.spot-hud > div{
  padding:7px 4px;

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

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

  text-align:center;
}

.spot-hud span{
  display:block;

  margin-bottom:2px;

  color:#7c8798;

  font-size:9px;
  font-weight:1000;

  letter-spacing:.14em;
}

.spot-hud strong{
  color:#ffffff;

  font-size:18px;
}

.spot-hud strong.danger{
  color:#ff5573;
}

/* Two pictures: side by side (wide) or top / bottom (phone) */
.spot-pictures{
  flex:1;
  min-height:0;

  display:grid;
  gap:8px;
}

.spot-pictures.side{
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr;
}

.spot-pictures.stacked{
  grid-template-columns:1fr;
  grid-template-rows:1fr 1fr;
}

.spot-picture{
  min-width:0;
  min-height:0;

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

  cursor:crosshair;

  touch-action:manipulation;
}

.spot-picture svg{
  width:100%;
  height:100%;

  display:block;

  border-radius:12px;

  overflow:hidden;
}

/* Found: a red marker-pen circle */
.spot-circle{
  fill:none;

  stroke:#ff3b5c;
  stroke-width:1.1;

  filter:drop-shadow(0 0 1px rgba(255,255,255,.9));

  animation:spot-circle .3s ease-out;

  transform-box:fill-box;
  transform-origin:center;
}

@keyframes spot-circle{
  0%   { transform:scale(1.6); opacity:0; }
  100% { transform:scale(1); opacity:1; }
}

/* Not found in time: dashed yellow circle */
.spot-circle.missed{
  stroke:#ffd76a;
  stroke-dasharray:2 1.4;
}

.spot-wrong{
  animation:spot-wrong .6s ease-out forwards;
}

@keyframes spot-wrong{
  0%   { opacity:1; }
  100% { opacity:0; }
}

.spot-message{
  min-height:22px;

  color:#c9d1dc;

  font-size:12px;
  font-weight:900;

  text-align:center;
}

.spot-message.bad{
  color:#ff6b84;

  animation:gamiq-shake .2s ease;
}



/* ==========================================
CUP SHUFFLE (Step 30-1)
========================================== */

.cup-game{
  width:100%;
  height:100%;
  min-height:0;

  display:flex;
  flex-direction:column;

  gap:10px;
}

.cup-hud{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.cup-hud > div{
  padding:7px 4px;

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

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

  text-align:center;
}

.cup-hud span{
  display:block;

  margin-bottom:2px;

  color:#7c8798;

  font-size:9px;
  font-weight:1000;

  letter-spacing:.14em;
}

.cup-hud strong{
  color:#ffffff;

  font-size:18px;
}

.cup-stage{
  position:relative;

  flex:1;
  min-height:0;

  display:flex;
  flex-direction:column;

  overflow:hidden;

  border-radius:20px;

  background:
    radial-gradient(ellipse at 50% 20%, rgba(255,220,150,.22), transparent 60%),
    linear-gradient(180deg, #2a1d14 0%, #1a120c 100%);
}

.cup-message{
  padding:16px 10px 0;

  color:#f3e3c3;

  font-size:20px;
  font-weight:1000;

  letter-spacing:.06em;

  text-align:center;
}

.cup-message.ask   { color:#ffd76a; }
.cup-message.right { color:#7cf7a8; }
.cup-message.wrong { color:#ff6b84; }

/* Green table cloth */
.cup-table{
  position:relative;

  flex:1;
  min-height:0;

  margin:14px 12px 14px;

  border-radius:50% / 22%;

  background:
    radial-gradient(ellipse at 50% 40%, #2f8f5b, #1d5f3a 70%, #164a2d);

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

.cup-row{
  --swap:400ms;
  --cups:3;

  position:absolute;

  left:2%;
  right:2%;
  top:50%;

  height:0;
}

/* One cup (moves left/right when shuffled) */
.cup{
  position:absolute;

  top:0;

  width:min(120px, calc(96% / var(--cups)));
  aspect-ratio:100 / 140;

  padding:0;

  border:0;

  background:none;

  transform:translate(-50%, -62%);

  transition:left var(--swap) ease-in-out;

  cursor:pointer;

  touch-action:manipulation;
}

/* Passing in front / behind while swapping */
.cup.arc-front{
  z-index:3;
  animation:cup-front var(--swap) ease-in-out;
}

.cup.arc-back{
  z-index:1;
  animation:cup-back var(--swap) ease-in-out;
}

@keyframes cup-front{
  0%, 100% { transform:translate(-50%, -62%) scale(1); }
  50%      { transform:translate(-50%, -48%) scale(1.08); }
}

@keyframes cup-back{
  0%, 100% { transform:translate(-50%, -62%) scale(1); }
  50%      { transform:translate(-50%, -76%) scale(.92); }
}

.cup-body{
  position:absolute;
  z-index:2;

  left:0;
  right:0;
  bottom:0;

  aspect-ratio:100 / 110;

  transition:transform .28s cubic-bezier(.3,1.4,.5,1);

  filter:drop-shadow(0 8px 6px rgba(0,0,0,.45));
}

.cup-body svg{
  width:100%;
  height:100%;
  display:block;
}

/* The ball stays on the table; the cup lifts up */
.cup-ball{
  position:absolute;
  z-index:1;

  left:50%;
  bottom:4%;

  width:34%;
  aspect-ratio:1;

  transform:translateX(-50%);

  border-radius:50%;

  background:radial-gradient(circle at 35% 30%, #fff6c2, #ffd23f 45%, #d99a00);

  box-shadow:0 4px 6px rgba(0,0,0,.4);

  opacity:0;
}

.cup.has-ball .cup-ball{
  opacity:1;
}

.cup.lift .cup-body{
  transform:translateY(-52%);
}

/* Result glow */
.cup.right .cup-ball{
  box-shadow:0 0 18px rgba(255,215,106,.95);
}

.cup.chosen.wrong .cup-body{
  filter:drop-shadow(0 0 10px rgba(255,80,110,.9));
}

.cup.chosen.right .cup-body{
  filter:drop-shadow(0 0 12px rgba(124,247,168,.9));
}

@media(max-height:620px){
  .cup-message{ padding-top:8px; font-size:16px; }
  .cup-table{ margin:8px 10px; }
  .cup{ width:min(80px, calc(84% / var(--cups))); }
}



/* ==========================================
TOWER STACK (Step 30-2)
========================================== */

.tw-game{
  width:100%;
  height:100%;
  min-height:0;

  display:flex;
  flex-direction:column;

  gap:10px;
}

.tw-hud{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.tw-hud > div{
  padding:7px 4px;

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

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

  text-align:center;
}

.tw-hud span{
  display:block;

  margin-bottom:2px;

  color:#7c8798;

  font-size:9px;
  font-weight:1000;

  letter-spacing:.14em;
}

.tw-hud strong{
  color:#ffffff;

  font-size:18px;
}

.tw-stage{
  position:relative;

  flex:1;
  min-height:0;

  overflow:hidden;

  border-radius:20px;

  cursor:pointer;

  touch-action:manipulation;

  user-select:none;
  -webkit-user-select:none;
}

/* Sky: changes from day blue to sunset purple as the tower grows */
.tw-sky{
  --height:0;

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, #1b2a6b calc(var(--height) * 100%), #6fc3ff),
      color-mix(in srgb, #ff8a5c calc(var(--height) * 100%), #d8f1ff)
    );

  transition:background .6s ease;
}

.tw-stage.shake{
  animation:gamiq-shake .3s ease;
}

/* The world moves down so the top of the tower stays in view */
.tw-world{
  position:absolute;

  left:8%;
  right:8%;
  bottom:0;
  top:0;

  transition:transform .35s ease;
}

.tw-ground{
  position:absolute;

  left:-20%;
  right:-20%;
  bottom:-60px;

  height:60px;

  background:linear-gradient(180deg, #4c9a4a, #2f6b30);
}

.tw-block{
  --c:#6fc3ff;

  position:absolute;

  box-sizing:border-box;

  border-radius:4px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.35), transparent 45%),
    var(--c);

  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,.18),
    0 2px 4px rgba(0,0,0,.25);
}

.tw-block.base{
  --c:#8a94a6;
}

.tw-block.moving{
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,.18),
    0 0 14px rgba(255,255,255,.7);
}

.tw-block.landed{
  animation:tw-land .18s ease-out;
}

@keyframes tw-land{
  0%   { transform:scaleY(.8) translateY(4px); }
  100% { transform:scaleY(1) translateY(0); }
}

/* Cut-off piece falls and spins away */
.tw-block.falling.right{
  animation:tw-fall-right .9s ease-in forwards;
}

.tw-block.falling.left{
  animation:tw-fall-left .9s ease-in forwards;
}

@keyframes tw-fall-right{
  0%   { transform:translate(0, 0) rotate(0deg); opacity:1; }
  100% { transform:translate(30px, 320px) rotate(40deg); opacity:0; }
}

@keyframes tw-fall-left{
  0%   { transform:translate(0, 0) rotate(0deg); opacity:1; }
  100% { transform:translate(-30px, 320px) rotate(-40deg); opacity:0; }
}

/* PERFECT! / GREAT */
.tw-pop{
  position:absolute;
  z-index:5;

  left:50%;
  top:18%;

  transform:translateX(-50%);

  font-size:26px;
  font-weight:1000;

  letter-spacing:.06em;

  white-space:nowrap;

  opacity:0;

  pointer-events:none;

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

.tw-pop.perfect{ color:#fff59a; }
.tw-pop.good   { color:#ffffff; }
.tw-pop.bad    { color:#ff4d6a; }

.tw-pop.show{
  animation:tw-pop .6s ease-out;
}

@keyframes tw-pop{
  0%   { transform:translateX(-50%) scale(1.4); opacity:1; }
  70%  { opacity:1; }
  100% { transform:translateX(-50%) translateY(-14px) scale(1); opacity:0; }
}

.tw-hint{
  position:absolute;
  z-index:4;

  left:0;
  right:0;
  top:10px;

  color:rgba(255,255,255,.85);

  font-size:11px;
  font-weight:900;

  text-align:center;

  text-shadow:0 1px 3px rgba(0,0,0,.4);

  pointer-events:none;
}




/* ==========================================
STEP 30-3: ODD ONE OUT
========================================== */

.odd-game{
  width:100%;
  height:100%;
  min-height:0;

  display:flex;
  flex-direction:column;

  gap:10px;
}

.odd-hud{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.odd-hud > div{
  padding:7px 4px;

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

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

  text-align:center;
}

.odd-hud span{
  display:block;
  margin-bottom:2px;

  color:#7c8798;

  font-size:9px;
  font-weight:1000;
  letter-spacing:.14em;
}

.odd-hud strong{
  color:#ffffff;
  font-size:18px;
}

.odd-hud strong.danger{
  color:#ff5a5f;
}

.odd-stage{
  flex:1;
  min-height:0;

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

.odd-grid{
  display:grid;
  grid-template-columns:repeat(var(--n, 3), 1fr);
  grid-template-rows:repeat(var(--n, 3), 1fr);

  gap:clamp(3px, 1vmin, 8px);

  padding:clamp(4px, 1vmin, 10px);

  border-radius:16px;

  background:linear-gradient(160deg, #fff8e8, #f3e6c8);

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

.odd-grid.odd-new{
  animation:oddIn .22s ease-out;
}

@keyframes oddIn{
  from{ transform:scale(.94); opacity:.4; }
  to{ transform:scale(1); opacity:1; }
}

.odd-cell{
  min-width:0;
  min-height:0;

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

  padding:8%;
  border:0;
  border-radius:10px;

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

  cursor:pointer;

  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.odd-cell svg{
  width:100%;
  height:100%;

  pointer-events:none;
}

.odd-letter{
  font-size:calc(var(--cell, 60px) * .58);
  font-weight:1000;
  line-height:1;

  font-family:"Arial Black", system-ui, sans-serif;

  pointer-events:none;
}

.odd-cell.right{
  background:#3fb950;
  box-shadow:0 0 0 3px #ffffff inset;
}

.odd-cell.reveal{
  box-shadow:0 0 0 4px #ff5a5f inset;
  animation:oddPulse .5s ease-in-out infinite alternate;
}

@keyframes oddPulse{
  to{ transform:scale(1.08); }
}

.odd-cell.wrong{
  background:#ffb3b3;
  animation:oddShake .3s;
}

@keyframes oddShake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-5px); }
  75%{ transform:translateX(5px); }
}

.odd-message{
  min-height:20px;

  color:#cfd6e2;

  font-size:13px;
  font-weight:900;

  text-align:center;
}

.odd-message.good{ color:#3fb950; }
.odd-message.bad{ color:#ff5a5f; }




/* ==========================================
STEP 31-2: DAILY CHALLENGE
========================================== */

/* Start screen button */
.gamiq-start-daily{
  display:block;

  margin:0 auto 10px;
  padding:10px 22px;

  border:1px solid rgba(124,255,178,.45);
  border-radius:12px;

  background:rgba(124,255,178,.08);

  color:#7cffb2;

  font:inherit;
  font-size:13px;
  font-weight:1000;

  letter-spacing:.06em;

  cursor:pointer;
}

.gamiq-start-daily.done{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  color:#cfd6e2;
}

@media(max-height:620px){
  .gamiq-start-daily{
    margin-bottom:6px;
    padding:6px 18px;
    font-size:12px;
  }
}

/* Overlay */
.dl-overlay{
  position:fixed;
  inset:0;
  z-index:500;

  display:none;
  flex-direction:column;

  background:#05080e;
}

.dl-overlay.show{
  display:flex;
}

.dl-bar{
  flex:0 0 auto;

  height:56px;

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

  padding:0 14px;

  border-bottom:1px solid rgba(255,255,255,.08);
}

.dl-bar > strong{
  color:#7cffb2;

  font-size:14px;
  font-weight:1000;
  letter-spacing:.06em;

  white-space:nowrap;
}

.dl-dots{
  display:flex;
  gap:6px;
}

.dl-dots span{
  width:12px;
  height:12px;

  border-radius:50%;

  background:rgba(255,255,255,.14);
}

.dl-dots span.now{ background:#ffffff; box-shadow:0 0 0 3px rgba(255,255,255,.2); }
.dl-dots span.g{ background:#3fb950; }
.dl-dots span.y{ background:#e3b341; }
.dl-dots span.r{ background:#f85149; }

.dl-close{
  min-width:40px;
  height:36px;

  padding:0 10px;

  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;

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

  color:#ffffff;

  font:inherit;
  font-size:14px;
  font-weight:1000;

  cursor:pointer;
}

.dl-close.confirm{
  border-color:#f85149;
  background:rgba(248,81,73,.15);
  color:#ff9b95;
  font-size:12px;
}

.dl-stage{
  position:relative;

  flex:1 1 auto;
  min-height:0;

  overflow:hidden;
}

/* Game card inside the daily (same look as the feed) */
.dl-card .gamiq-game-shell{
  height:min(680px, calc(100vh - 80px));
}


/* The result card in the daily has a button, so it must take taps. */
.dl-card .gamiq-card-complete.show{
  pointer-events:auto;
}

.dl-next{
  position:absolute;
  bottom:30px;

  min-width:200px;
  min-height:50px;

  border:0;
  border-radius:14px;

  background:linear-gradient(180deg, #b6ffd4, #4fe08f);

  color:#03140a;

  font:inherit;
  font-size:15px;
  font-weight:1000;
  letter-spacing:.06em;

  cursor:pointer;
}

.dl-next:disabled{
  opacity:.4;
  cursor:default;
}

/* Intro / final panel */
.dl-panel{
  width:min(520px, 100%);
  height:100%;

  margin:0 auto;
  padding:22px 18px 28px;

  overflow-y:auto;

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

  text-align:center;

  color:#e6edf3;
}

.dl-kicker{
  color:#7cffb2;

  font-size:11px;
  font-weight:1000;
  letter-spacing:.2em;
}

.dl-panel h2{
  margin:8px 0 10px;

  color:#ffffff;

  font-size:34px;
  font-weight:1000;
}

.dl-panel p{
  margin:0 0 18px;

  color:#b7c0cc;

  font-size:14px;
  line-height:1.6;
}

.dl-genres{
  display:flex;
  justify-content:center;
  gap:8px;

  margin-bottom:18px;
}

.dl-genres span{
  width:58px;

  padding:10px 0 8px;

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

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

  font-size:24px;
}

.dl-genres small{
  display:block;

  margin-top:4px;

  color:#7c8798;

  font-size:8px;
  font-weight:1000;
  letter-spacing:.08em;
}

.dl-rules{
  margin:0 0 22px;
  padding:0;

  list-style:none;

  color:#cfd6e2;

  font-size:13px;
  line-height:1.9;
}

.dl-rules li::before{
  content:"・";
  color:#7cffb2;
}

.dl-go{
  min-width:220px;
  min-height:54px;

  margin-bottom:12px;

  border:0;
  border-radius:16px;

  background:linear-gradient(180deg, #b6ffd4, #4fe08f);

  color:#03140a;

  font:inherit;
  font-size:16px;
  font-weight:1000;
  letter-spacing:.06em;

  cursor:pointer;
}

.dl-back{
  min-width:160px;
  min-height:42px;

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

  background:transparent;

  color:#cfd6e2;

  font:inherit;
  font-size:13px;
  font-weight:1000;

  cursor:pointer;
}

.dl-total{
  margin:10px 0 14px;
}

.dl-total span{
  display:block;

  color:#7c8798;

  font-size:10px;
  font-weight:1000;
  letter-spacing:.18em;
}

.dl-total strong{
  color:#ffffff;

  font-size:52px;
  font-weight:1000;
  line-height:1.1;
}

.dl-total small{
  color:#7c8798;
  font-size:18px;
}

.dl-rows{
  width:100%;

  display:flex;
  flex-direction:column;
  gap:6px;

  margin-bottom:14px;
}

.dl-row{
  display:grid;
  grid-template-columns:28px minmax(0, 1fr) 80px 34px;
  align-items:center;
  gap:8px;

  padding:8px 10px;

  border-radius:10px;

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

  text-align:left;
}

.dl-row-icon{ font-size:18px; }

.dl-row-name{
  overflow:hidden;

  color:#e6edf3;

  font-size:12px;
  font-weight:900;

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

.dl-row-bar{
  height:8px;

  border-radius:99px;

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

  overflow:hidden;
}

.dl-row-bar i{
  display:block;
  height:100%;
  border-radius:99px;
}

.dl-row-bar i.g{ background:#3fb950; }
.dl-row-bar i.y{ background:#e3b341; }
.dl-row-bar i.r{ background:#f85149; }

.dl-row strong{
  color:#ffffff;
  font-size:15px;
  text-align:right;
}

.dl-share-preview{
  width:100%;

  margin:0 0 14px;
  padding:12px;

  border:1px dashed rgba(255,255,255,.16);
  border-radius:12px;

  color:#cfd6e2;

  font-family:inherit;
  font-size:13px;
  line-height:1.6;

  white-space:pre-wrap;
  word-break:break-all;
}

.dl-countdown{
  margin-bottom:14px;

  color:#7c8798;

  font-size:12px;
  font-weight:900;

  font-variant-numeric:tabular-nums;
}

@media(max-height:620px){
  .dl-panel h2{ font-size:26px; margin:4px 0 6px; }
  .dl-panel p{ margin-bottom:10px; }
  .dl-genres{ margin-bottom:10px; }
  .dl-rules{ margin-bottom:12px; line-height:1.6; }
  .dl-total strong{ font-size:40px; }
}


/* ==========================================
STEP 35: DAILY CHALLENGE RANKING
========================================== */

.dl-rank{
  margin:-4px 0 14px;

  color:#7c8798;

  font-size:13px;
  font-weight:900;
}

.dl-rank.ok{
  color:#ffd76a;
  font-size:16px;
}

.dl-rank-button{
  min-width:220px;
  min-height:44px;

  margin-bottom:14px;

  border:1px solid rgba(255,215,106,.4);
  border-radius:12px;

  background:rgba(255,215,106,.08);

  color:#ffd76a;

  font:inherit;
  font-size:14px;
  font-weight:1000;

  cursor:pointer;
}

/* Three ranking tabs: keep them on one line on phones */
.gamiq-ranking-tabs button{
  min-width:0;
  white-space:nowrap;
}

.gamiq-ranking-tabs{
  grid-template-columns:repeat(3, 1fr);
}


/* ==========================================
STEP 37: DAILY — SWIPE TO THE NEXT GAME
========================================== */

/* The "swipe for next" text is a button here (it can also be tapped). */
.dl-swipe{
  padding:10px 18px;

  border:0;
  background:transparent;

  font:inherit;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.16em;

  color:rgba(255,255,255,.75);

  cursor:pointer;

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

@keyframes dlSwipeHint{
  0%,100%{ transform:translateY(0); opacity:.75; }
  50%{ transform:translateY(-6px); opacity:1; }
}

/* Finished card slides up and away */
.dl-card{
  transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}

.dl-card.dl-leaving{
  transform:translateY(-100%);
  opacity:0;
}

/* Swipes on a daily game card should not scroll the page
   (the result screen can still scroll normally). */
.dl-card{
  touch-action:none;
}

.dl-overlay{
  overscroll-behavior:contain;
}




/* ==========================================
STEP 38: SHARE BUTTONS (LINE / X / COPY)
========================================== */

.gamiq-share-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;

  width:100%;
  margin:10px 0 4px;
}

.gamiq-share-btn{
  flex:1 1 0;
  min-width:72px;
  max-width:130px;
  min-height:44px;

  padding:0 10px;

  border:1px solid transparent;
  border-radius:12px;

  font:inherit;
  font-size:14px;
  font-weight:1000;

  cursor:pointer;
}

.gamiq-share-btn.line{
  background:#06c755;
  color:#ffffff;
}

.gamiq-share-btn.x{
  background:#000000;
  border-color:rgba(255,255,255,.35);
  color:#ffffff;
  font-size:18px;
}

.gamiq-share-btn.copy,
.gamiq-share-btn.other{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  color:#e6edf3;
  font-size:13px;
}

.dl-share-label{
  margin-top:2px;

  color:#7c8798;

  font-size:11px;
  font-weight:1000;
  letter-spacing:.14em;
}

.dl-final .gamiq-share-row{
  margin-bottom:14px;
}


/* ==========================================
STEP 39: INSTAGRAM SHARE BUTTON
========================================== */

.gamiq-share-btn.insta{
  background:linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7);
  color:#ffffff;
  font-size:13px;
}



/* ==========================================
STEP 41: iPHONE SAFARI FIXES (daily screen)
========================================== */

/* The daily game card fits the space that is really visible.
   (Before: "100vh" is taller than the screen on iPhone Safari,
   so the title and the bottom button were cut off.) */
.dl-card .gamiq-game-shell{
  height:min(680px, 100%);
  min-height:0;
}

/* Keep clear of the iPhone home bar / Safari toolbar */
.dl-bar{
  padding-top:env(safe-area-inset-top);
  height:calc(56px + env(safe-area-inset-top));
}

.dl-stage{
  padding-bottom:env(safe-area-inset-bottom);
}

.dl-panel{
  padding-bottom:calc(40px + env(safe-area-inset-bottom));
}

/* Normal game screen on phones: same safety space at the bottom */
@media (max-width: 820px){
  .gamiq-feed-card{
    padding-bottom:max(6px, env(safe-area-inset-bottom));
  }
}



/* ==========================================
STEP 42: CRAZYGAMES BUILD
========================================== */

/* No share button there: the ranking button takes the full width */
.platform-crazygames .gamiq-results-actions{
  grid-template-columns:1fr;
}

/* CrazyGames asks for this: no text selection / magnifier on mobile */
.platform-crazygames body{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

.platform-crazygames input{
  -webkit-user-select:text;
  user-select:text;
}




/* ==========================================
STEP 44: GAME FEEL (tap ring, score celebration)
========================================== */

/* Tap ring (inside every game) */
.jx-ring{
  position:absolute;
  z-index:70;

  width:16px;
  height:16px;
  margin:-8px 0 0 -8px;

  border:3px solid rgba(255,255,255,.85);
  border-radius:50%;

  pointer-events:none;

  animation:jxRing .42s ease-out forwards;
}

@keyframes jxRing{
  from{ transform:scale(.4); opacity:.95; }
  to{ transform:scale(4); opacity:0; border-width:1px; }
}

/* Score pop at the end of the count-up */
.jx-pop{
  animation:jxPop .38s cubic-bezier(.2,1.6,.4,1);
}

@keyframes jxPop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.18); }
  100%{ transform:scale(1); }
}

/* Rating word */
.jx-rating{
  margin-top:10px;

  font-size:clamp(20px, 3.4vw, 30px);
  font-weight:1000;
  letter-spacing:.12em;

  animation:jxWord .5s .55s both cubic-bezier(.2,1.5,.4,1);
}

.jx-rating.perfect{ color:#ffd76a; text-shadow:0 0 22px rgba(255,215,106,.6); }
.jx-rating.great{ color:#5fefff; text-shadow:0 0 22px rgba(95,239,255,.5); }
.jx-rating.good{ color:#7cffb2; }
.jx-rating.ok{ color:#cfd6e2; }
.jx-rating.miss{ color:#ff7b8a; }

@keyframes jxWord{
  from{ transform:scale(.3) translateY(10px); opacity:0; }
  to{ transform:scale(1) translateY(0); opacity:1; }
}

/* Score color follows the rating */
.gamiq-card-complete[data-tone="perfect"] .gamiq-complete-score{
  color:#ffe9a6;
  text-shadow:0 0 40px rgba(255,215,106,.45);
}

.gamiq-card-complete[data-tone="great"] .gamiq-complete-score{
  text-shadow:0 0 40px rgba(95,239,255,.35);
}

/* Particle burst */
.jx-burst{
  position:absolute;
  inset:0;

  overflow:hidden;
  pointer-events:none;
}

.jx-burst i{
  position:absolute;

  border-radius:2px;
  box-shadow:0 0 8px currentColor;

  animation:jxBurst 1.1s cubic-bezier(.1,.7,.3,1) forwards;
}

@keyframes jxBurst{
  0%{ transform:translate(-50%,-50%) rotate(0); opacity:1; }
  70%{ opacity:1; }
  100%{
    transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 60px)) rotate(var(--rot));
    opacity:0;
  }
}

@media (prefers-reduced-motion: reduce){
  .jx-pop, .jx-rating{ animation:none; }
}


/* ==========================================
STEP 45: ONE LOOK FOR ALL GAMES
- Each genre has its own color (frame line + genre label).
- The plain dark game areas get a real "place"
  like the illustrated games (saloon, bamboo forest...).
========================================== */

/* ---------- Genre colors ---------- */
.gamiq-feed-card[data-skill="REFLEX"]{ --genre:#ffd76a; }
.gamiq-feed-card[data-skill="SPEED"]{ --genre:#ff7eb6; }
.gamiq-feed-card[data-skill="AIM"]{ --genre:#ff6b6b; }
.gamiq-feed-card[data-skill="LOGIC"]{ --genre:#7cffb2; }
.gamiq-feed-card[data-skill="MEMORY"]{ --genre:#b69cff; }

.gamiq-feed-card[data-skill] .gamiq-game-skill{
  color:var(--genre);
}

/* thin colored light along the top of the card */
.gamiq-feed-card[data-skill] .gamiq-game-shell::before{
  content:"";
  position:absolute;
  z-index:5;
  left:10%;
  right:10%;
  top:0;
  height:2px;

  border-radius:2px;

  background:linear-gradient(90deg, transparent, var(--genre), transparent);
  box-shadow:0 0 18px var(--genre);

  opacity:.8;
  pointer-events:none;
}

/* ---------- BULLSEYE: archery range at dusk ---------- */
.be-range{
  background:
    radial-gradient(60% 40% at 50% 64%, rgba(255,190,120,.35), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 46px) 0 74% / 100% 26% no-repeat,
    linear-gradient(180deg,
      #24345f 0%,
      #4a4f86 38%,
      #c9785f 62%,
      #6b4128 62.4%,
      #4a2c1a 74%,
      #2f6b3a 74.3%,
      #1f4a28 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 -40px 60px rgba(0,0,0,.35);
}

/* ---------- FRIEND OR FOE: deep space ---------- */
.foe2-arena{
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 72%, #cfe 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 28%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 62%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 14%, #ffd 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 88%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 90%, #cdf 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 50%, #fff 50%, transparent 51%),
    radial-gradient(55% 45% at 30% 35%, rgba(120,80,220,.35), transparent 70%),
    radial-gradient(50% 40% at 75% 70%, rgba(40,160,220,.28), transparent 70%),
    linear-gradient(180deg, #0a0820, #050713);
}

/* ---------- LANE PANIC: neon rooftop at night ---------- */
.lane-panic-road{
  background:
    linear-gradient(90deg,
      transparent 32.6%, rgba(95,239,255,.55) 33%, transparent 33.4%,
      transparent 66.2%, rgba(95,239,255,.55) 66.6%, transparent 67%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 2px, transparent 2px 44px),
    radial-gradient(70% 30% at 50% 100%, rgba(255,126,182,.25), transparent 70%),
    linear-gradient(180deg, #160f2e 0%, #1b1440 55%, #241a4d 100%);
}

/* ---------- COLOR SWITCH: arcade stage ---------- */
.cs-stage{
  background:
    radial-gradient(45% 45% at 0% 0%, rgba(255,90,120,.28), transparent 70%),
    radial-gradient(45% 45% at 100% 0%, rgba(70,150,255,.28), transparent 70%),
    radial-gradient(45% 45% at 0% 100%, rgba(80,230,140,.24), transparent 70%),
    radial-gradient(45% 45% at 100% 100%, rgba(255,210,70,.24), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 28px),
    #0b0a1a;
}

/* ---------- FLASH ORDER / NUMBER TRACE: glowing console ---------- */
.memory-wrap:not(.ghost-grid) .memory-grid{
  background:
    repeating-linear-gradient(180deg, rgba(182,156,255,.05) 0 1px, transparent 1px 4px),
    radial-gradient(70% 60% at 50% 40%, rgba(120,90,230,.30), transparent 75%),
    linear-gradient(180deg, #141033, #0a0a1d);
  border-color:rgba(182,156,255,.25);
  box-shadow:
    inset 0 0 40px rgba(120,90,230,.25),
    0 0 30px rgba(120,90,230,.12);
}

.memory-wrap:not(.ghost-grid) .memory-cell{
  border-color:rgba(182,156,255,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 45%),
    linear-gradient(180deg, #221a4a, #120f2c);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 4px 10px rgba(0,0,0,.35);
}

/* ---------- PIPE CONNECT: blueprint ---------- */
.pipe2-board{
  padding:10px;

  border-radius:18px;

  background:
    repeating-linear-gradient(0deg, rgba(150,200,255,.10) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, rgba(150,200,255,.10) 0 1px, transparent 1px 20px),
    linear-gradient(180deg, #0f2a4a, #0a1d36);
  box-shadow:
    inset 0 0 0 1px rgba(150,200,255,.22),
    inset 0 0 40px rgba(0,0,0,.35);
}


/* ==========================================
STEP 46: HIT / MISS EFFECTS (all games)
========================================== */

.jx-hit{
  z-index:75;
}

.jx-glow{
  position:absolute;

  width:90px;
  height:90px;
  margin:-45px 0 0 -45px;

  border-radius:50%;

  background:radial-gradient(circle, rgba(255,255,255,.75), rgba(95,239,255,.25) 40%, transparent 70%);

  pointer-events:none;

  animation:jxGlow .35s ease-out forwards;
}

.jx-glow.big{
  width:160px;
  height:160px;
  margin:-80px 0 0 -80px;

  background:radial-gradient(circle, rgba(255,255,255,.9), rgba(255,215,106,.35) 40%, transparent 70%);
}

@keyframes jxGlow{
  from{ transform:scale(.3); opacity:1; }
  to{ transform:scale(1.3); opacity:0; }
}

.jx-hurt{
  position:absolute;
  inset:0;
  z-index:76;

  border-radius:inherit;

  background:radial-gradient(ellipse at center, transparent 45%, rgba(255,40,60,.55) 100%);

  pointer-events:none;

  animation:jxHurt .4s ease-out forwards;
}

@keyframes jxHurt{
  from{ opacity:1; }
  to{ opacity:0; }
}

.jx-shake{
  animation:jxShake .32s ease;
}

@keyframes jxShake{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-7px,2px); }
  40%{ transform:translate(6px,-2px); }
  60%{ transform:translate(-4px,1px); }
  80%{ transform:translate(3px,0); }
}

@media (prefers-reduced-motion: reduce){
  .jx-shake{ animation:none; }
}


/* ==========================================
STEP 47: RULE TIMER + "GO!"
========================================== */

/* Genre label + rule text slide in */
.gamiq-rule-overlay span{
  color:var(--genre, #55eaff);
}

.gamiq-rule-overlay.jx-rule-in span{
  animation:jxRuleIn .35s ease-out both;
}

.gamiq-rule-overlay.jx-rule-in strong{
  animation:jxRuleIn .45s .08s cubic-bezier(.2,1.4,.4,1) both;
}

@keyframes jxRuleIn{
  from{ opacity:0; transform:translateY(14px) scale(.96); }
  to{ opacity:1; transform:none; }
}

/* Bar that fills up until the game starts */
.jx-rule-bar{
  position:relative;
  display:block;

  width:min(220px, 60%);
  height:4px;
  margin-top:22px;

  border-radius:999px;

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

  overflow:hidden;
}

.jx-rule-bar::after{
  content:"";

  position:absolute;
  inset:0;

  border-radius:inherit;

  background:var(--genre, #55eaff);
  box-shadow:0 0 12px var(--genre, #55eaff);

  transform-origin:left center;

  animation:jxRuleBar var(--ms, 1800ms) linear forwards;
}

@keyframes jxRuleBar{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}

/* GO! */
.jx-go{
  position:absolute;
  inset:0;
  z-index:78;

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

  pointer-events:none;
}

.jx-go b{
  color:#fff;

  font-size:clamp(54px, 14vw, 96px);
  font-weight:1000;
  font-style:italic;
  letter-spacing:.02em;

  text-shadow:
    0 0 18px var(--genre, #55eaff),
    0 0 42px var(--genre, #55eaff),
    0 4px 0 rgba(0,0,0,.35);

  animation:jxGo .75s cubic-bezier(.2,1.3,.4,1) forwards;
}

.jx-go.big b{
  font-size:clamp(70px, 20vw, 130px);
}

@keyframes jxGo{
  0%{ opacity:0; transform:scale(2.2); }
  25%{ opacity:1; transform:scale(.92); }
  40%{ transform:scale(1.04); }
  70%{ opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.25); }
}

@media (prefers-reduced-motion: reduce){
  .jx-go b,
  .gamiq-rule-overlay.jx-rule-in span,
  .gamiq-rule-overlay.jx-rule-in strong{
    animation-duration:.01s;
  }
}



/* ==========================================
STEP 48: AD BOXES
- Results screen: one box at the very bottom.
- Wide PC screens: one box left and right of the game.
- Not shown at all until AdSense is set up (ads.js).
========================================== */

.gq-ad{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.gq-ad-label{
  color:rgba(255,255,255,.35);

  font-size:9px;
  font-weight:800;
  letter-spacing:.18em;
}

.gq-ad-body{
  width:100%;
}

.gq-ad-test{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  height:100%;
  min-height:90px;

  border:1px dashed rgba(255,255,255,.3);
  border-radius:8px;

  color:rgba(255,255,255,.45);

  font-size:11px;
  font-weight:800;
  line-height:1.5;
  text-align:center;
}

/* Results: well below the buttons, so it is not tapped by mistake */
.gq-ad-results{
  width:100%;
  margin-top:30px;
  padding-top:14px;

  border-top:1px solid rgba(255,255,255,.08);
}

.gq-ad-results .gq-ad-body{
  min-height:100px;
}

/* PC rails: hidden unless the screen is wide and tall enough */
.gq-ad-rail{
  position:fixed;
  z-index:5;

  top:calc(50% + 36px);

  display:none;

  transform:translateY(-50%);
}

.gq-ad-rail .gq-ad-body{
  width:160px;
  height:600px;
}

/* Centered in the space beside the 760px game */
.gq-ad-rail-left{
  left:calc((100vw - 760px) / 4 - 80px);
}

.gq-ad-rail-right{
  right:calc((100vw - 760px) / 4 - 80px);
}

@media (min-width:1240px) and (min-height:760px){
  .gq-ad-rail{
    display:flex;
  }
}

@media (min-width:1600px) and (min-height:760px){
  .gq-ad-rail .gq-ad-body{
    width:300px;
  }

  .gq-ad-rail-left{
    left:calc((100vw - 760px) / 4 - 150px);
  }

  .gq-ad-rail-right{
    right:calc((100vw - 760px) / 4 - 150px);
  }
}



/* ==========================================
STEP 48-2: PC ad boxes also on shorter screens
(MacBook etc.: the browser area is only ~750px tall)
========================================== */

@media (min-width:1240px) and (min-height:700px){
  .gq-ad-rail{
    display:flex;
  }
}

@media (min-width:1600px) and (min-height:700px){
  .gq-ad-rail .gq-ad-body{
    width:300px;
  }

  .gq-ad-rail-left{
    left:calc((100vw - 760px) / 4 - 150px);
  }

  .gq-ad-rail-right{
    right:calc((100vw - 760px) / 4 - 150px);
  }
}



/* ==========================================
STEP 50: NEW GAME - BLIND STOP (stopwatch)
========================================== */

.sw-game{
  width:100%;
  height:100%;
  min-height:0;

  display:flex;
  flex-direction:column;
  gap:10px;
}

.sw-hud{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.sw-hud > div{
  padding:7px 4px;

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

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

  text-align:center;
}

.sw-hud span{
  display:block;
  margin-bottom:2px;

  color:#7c8798;

  font-size:9px;
  font-weight:1000;
  letter-spacing:.14em;
}

.sw-hud strong{
  color:#fff;
  font-size:18px;
}

/* Lab console */
.sw-stage{
  position:relative;
  flex:1;
  min-height:0;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(10px, 3vh, 22px);

  border-radius:18px;
  overflow:hidden;

  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 26px),
    radial-gradient(circle at 50% 45%, #18324a 0%, #0b1622 60%, #060b12 100%);

  box-shadow:inset 0 0 0 1px rgba(95,239,255,.12);

  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

.sw-target{
  text-align:center;
}

.sw-target span{
  display:block;

  color:var(--genre, #ffd76a);

  font-size:10px;
  font-weight:1000;
  letter-spacing:.28em;
}

.sw-target strong{
  color:#fff;

  font-size:clamp(26px, 7vw, 40px);
  font-weight:1000;
  font-variant-numeric:tabular-nums;
}

.sw-target strong::after{
  content:"s";
  margin-left:2px;

  color:rgba(255,255,255,.5);
  font-size:.55em;
}

/* The watch face */
.sw-face{
  position:relative;

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

  width:min(78%, 360px);
  aspect-ratio:2.2 / 1;

  border:2px solid rgba(95,239,255,.35);
  border-radius:22px;

  background:linear-gradient(180deg, #02070c, #061420);

  box-shadow:
    0 0 0 6px rgba(255,255,255,.03),
    0 0 30px rgba(95,239,255,.15),
    inset 0 0 24px rgba(95,239,255,.12);

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

.sw-digits,
.sw-blind{
  color:#5fefff;

  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:clamp(48px, 15vw, 92px);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;

  text-shadow:0 0 18px rgba(95,239,255,.6);

  transition:opacity .25s, filter .25s;
}

.sw-blind{
  position:absolute;

  color:rgba(255,255,255,.22);
  text-shadow:none;

  opacity:0;
}

/* Numbers vanish */
.sw-face.hidden .sw-digits{
  opacity:0;
  filter:blur(10px);
}

.sw-face.hidden .sw-blind{
  opacity:1;
  animation:swBlink 1.2s ease-in-out infinite;
}

@keyframes swBlink{
  50%{ opacity:.45; }
}

.sw-face.hidden{
  border-color:rgba(255,255,255,.15);
  box-shadow:0 0 0 6px rgba(255,255,255,.03), inset 0 0 24px rgba(0,0,0,.6);
}

/* After stopping */
.sw-face.stopped{ animation:swStop .3s ease-out; }

@keyframes swStop{
  0%{ transform:scale(1.06); }
  100%{ transform:scale(1); }
}

.sw-face.perfect{ border-color:#ffd76a; box-shadow:0 0 36px rgba(255,215,106,.55), inset 0 0 24px rgba(255,215,106,.2); }
.sw-face.perfect .sw-digits{ color:#ffd76a; text-shadow:0 0 22px rgba(255,215,106,.8); }
.sw-face.great{ border-color:#7cffb2; }
.sw-face.great .sw-digits{ color:#7cffb2; text-shadow:0 0 18px rgba(124,255,178,.6); }
.sw-face.good .sw-digits{ color:#ffffff; text-shadow:none; }
.sw-face.miss{ border-color:#ff5a5f; }
.sw-face.miss .sw-digits{ color:#ff5a5f; text-shadow:0 0 18px rgba(255,90,95,.5); }

.sw-result{
  min-height:44px;

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

  color:#fff;
}

.sw-result b{
  font-size:clamp(20px, 5vw, 28px);
  font-weight:1000;
  font-style:italic;
  letter-spacing:.04em;

  animation:swPop .35s cubic-bezier(.2,1.5,.4,1);
}

.sw-result span{
  color:rgba(255,255,255,.7);

  font-size:14px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

.sw-result.perfect b{ color:#ffd76a; }
.sw-result.great b{ color:#7cffb2; }
.sw-result.good b{ color:#5fefff; }
.sw-result.miss b{ color:#ff5a5f; }

@keyframes swPop{
  from{ transform:scale(1.6); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}

.sw-dots{
  display:flex;
  gap:8px;
}

.sw-dots i{
  width:10px;
  height:10px;

  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
}

.sw-dots i.perfect{ background:#ffd76a; border-color:#ffd76a; }
.sw-dots i.great{ background:#7cffb2; border-color:#7cffb2; }
.sw-dots i.good{ background:#5fefff; border-color:#5fefff; }
.sw-dots i.miss{ background:#ff5a5f; border-color:#ff5a5f; }

/* Big STOP button */
.sw-button{
  min-height:64px;

  border:0;
  border-radius:16px;

  background:linear-gradient(180deg, #ff6b6b, #e23c4a);
  box-shadow:0 6px 0 #9e1f2c, 0 10px 24px rgba(226,60,74,.35);

  color:#fff;

  font-size:22px;
  font-weight:1000;
  letter-spacing:.2em;

  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;

  transition:transform .06s, box-shadow .06s, filter .2s;
}

.sw-button:active:not(:disabled){
  transform:translateY(5px);
  box-shadow:0 1px 0 #9e1f2c, 0 4px 12px rgba(226,60,74,.35);
}

.sw-button:disabled{
  filter:grayscale(.85) brightness(.6);
  cursor:default;

  font-size:16px;
  letter-spacing:.12em;
}

/* Short screens (phone sideways): make everything fit */
@media (max-height:520px){
  .sw-stage{ gap:4px; }
  .sw-target span{ font-size:8px; }
  .sw-target strong{ font-size:20px; }
  .sw-face{ aspect-ratio:auto; padding:2px 28px; border-radius:14px; }
  .sw-digits, .sw-blind{ font-size:44px; }
  .sw-result{ min-height:34px; }
  .sw-result b{ font-size:17px; }
  .sw-result span{ font-size:11px; }
  .sw-dots{ display:none; }
  .sw-button{ min-height:46px; font-size:18px; }
}




/* ==========================================
STEP 51: NEW GAME - EGG SMASH
========================================== */

.egg-game{
  width:100%;
  height:100%;
  min-height:0;

  display:flex;
  flex-direction:column;
  gap:10px;
}

.egg-hud{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.egg-hud > div{
  padding:7px 4px;

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

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

  text-align:center;
}

.egg-hud span{
  display:block;
  margin-bottom:2px;

  color:#7c8798;

  font-size:9px;
  font-weight:1000;
  letter-spacing:.14em;
}

.egg-hud strong{
  color:#fff;
  font-size:18px;
}

.egg-hud strong.danger{ color:#ff5a5f; }

/* Kitchen: tiles on the wall, wooden counter */
.egg-stage{
  position:relative;
  flex:1;
  min-height:0;

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

  border-radius:18px;
  overflow:hidden;

  background:
    linear-gradient(180deg, transparent 0 68%, #8a5a34 68%, #6f4426 74%, #5a361d 100%),
    linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(0deg, rgba(0,0,0,.06) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(180deg, #fff3e2, #f6dfc2);

  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

.egg-hint{
  position:absolute;
  top:12%;
  z-index:2;

  padding:6px 14px;

  border-radius:999px;

  background:rgba(60,30,10,.75);

  color:#fff;

  font-size:14px;
  font-weight:1000;
  letter-spacing:.08em;

  animation:eggHint .6s ease-in-out infinite alternate;

  transition:opacity .2s;
}

.egg-hint.hide{ opacity:0; }
.egg-hint.end{ animation:none; }

@keyframes eggHint{
  to{ transform:scale(1.08); }
}

.egg-holder{
  position:relative;
  z-index:1;

  width:min(46%, 210px);
  max-height:62%;
  aspect-ratio:100 / 120;

  margin-top:6%;
}

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

  transform-origin:50% 90%;

  animation:eggIn .22s cubic-bezier(.2,1.5,.4,1);
}

.egg svg{
  width:100%;
  height:100%;

  overflow:visible;
  pointer-events:none;
}

.egg.golden svg{
  filter:drop-shadow(0 0 16px rgba(255,200,40,.75));
}

@keyframes eggIn{
  from{ transform:translateY(-40px) scale(.6); opacity:0; }
  to{ transform:none; opacity:1; }
}

.egg.hit{ animation:eggHit .12s ease; }

@keyframes eggHit{
  0%{ transform:scale(.92, 1.06) rotate(-4deg); }
  60%{ transform:scale(1.04, .96) rotate(3deg); }
  100%{ transform:none; }
}

.egg.done{ filter:grayscale(.6) brightness(.8); }

.egg-crack{
  fill:none;
  stroke:#5a3a1e;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;

  opacity:0;
}

.egg-crack.show{ opacity:.85; }

/* Progress of the current egg */
.egg-bar{
  position:absolute;
  bottom:9%;
  z-index:2;

  width:min(56%, 240px);
  height:8px;

  border-radius:999px;

  background:rgba(0,0,0,.35);

  overflow:hidden;
}

.egg-bar i{
  display:block;
  height:100%;

  border-radius:inherit;

  background:linear-gradient(90deg, #ffd76a, #ff9f43);

  transform-origin:left center;
  transform:scaleX(0);

  transition:transform .08s linear;
}

/* Smashed! */
.egg-splat{
  position:absolute;
  left:50%;
  top:58%;
  z-index:3;

  pointer-events:none;
}

.egg-half{
  position:absolute;

  width:56px;
  height:40px;
  margin:-20px 0 0 -28px;

  border-radius:50% 50% 12px 12px / 70% 70% 12px 12px;

  background:radial-gradient(circle at 40% 30%, #fffaf0, #e8c9a4);
  clip-path:polygon(0 0, 100% 0, 100% 70%, 80% 100%, 60% 72%, 40% 100%, 20% 72%, 0 100%);
}

.egg-splat.golden .egg-half{
  background:radial-gradient(circle at 40% 30%, #fff6c4, #e3a525);
}

.egg-half.left{ animation:eggFlyL .6s ease-out forwards; }
.egg-half.right{ animation:eggFlyR .6s ease-out forwards; }

@keyframes eggFlyL{
  to{ transform:translate(-90px, -70px) rotate(-120deg); opacity:0; }
}

@keyframes eggFlyR{
  to{ transform:translate(90px, -60px) rotate(130deg); opacity:0; }
}

.egg-yolk{
  position:absolute;

  width:60px;
  height:60px;
  margin:-30px 0 0 -30px;

  border-radius:50%;

  background:radial-gradient(circle at 40% 35%, #ffe27a, #ffad1f 60%, #f08c00);
  box-shadow:0 0 0 14px rgba(255,255,255,.85);

  animation:eggYolk .6s ease-out forwards;
}

@keyframes eggYolk{
  0%{ transform:scale(.2); opacity:1; }
  40%{ transform:scale(1.1, .8); opacity:1; }
  100%{ transform:scale(1.3, .6) translateY(30px); opacity:0; }
}

.egg-splat em{
  position:absolute;

  margin:-90px 0 0 -20px;

  color:#ff7a00;

  font-size:30px;
  font-weight:1000;
  font-style:normal;

  text-shadow:0 2px 0 #fff, 0 0 10px rgba(255,255,255,.8);

  animation:eggPlus .7s ease-out forwards;
}

.egg-splat.golden em{ color:#e3a000; font-size:38px; }

@keyframes eggPlus{
  0%{ transform:scale(.5); opacity:0; }
  25%{ transform:scale(1.2); opacity:1; }
  100%{ transform:translateY(-30px); opacity:0; }
}

/* Short screens (phone sideways) */
@media (max-height:520px){
  .egg-holder{ width:auto; height:58%; margin-top:2%; }
  .egg-hint{ top:6%; font-size:12px; }
  .egg-bar{ bottom:6%; }
}

/* Bigger, clearer break; the next egg drops in just after */
.egg{ animation:eggIn .25s .14s cubic-bezier(.2,1.5,.4,1) backwards; }
.egg.hit{ animation:eggHit .12s ease; }
.egg-half{ width:84px; height:58px; margin:-29px 0 0 -42px; }
.egg-yolk{ width:92px; height:92px; margin:-46px 0 0 -46px; }
.egg-splat em{ margin:-120px 0 0 -22px; font-size:36px; }



/* ==========================================
STEP 52: NEW GAME - CARD MATCH (神経衰弱)
========================================== */

.cm-game{
  width:100%;
  height:100%;
  min-height:0;

  display:flex;
  flex-direction:column;
  gap:10px;
}

.cm-hud{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}

.cm-hud > div{
  padding:7px 4px;

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

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

  text-align:center;
}

.cm-hud span{
  display:block;
  margin-bottom:2px;

  color:#7c8798;

  font-size:9px;
  font-weight:1000;
  letter-spacing:.14em;
}

.cm-hud strong{
  color:#fff;
  font-size:18px;
}

.cm-hud strong.danger{ color:#ff5a5f; }

/* Card table: green felt */
.cm-stage{
  position:relative;
  flex:1;
  min-height:0;

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

  padding:10px;

  border-radius:18px;

  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.08), transparent 60%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #1f6a4a, #134a33);

  box-shadow:inset 0 0 0 6px #6b3f22, inset 0 0 0 8px #3e2412, inset 0 0 40px rgba(0,0,0,.5);
}

.cm-grid{
  display:grid;
  grid-template-columns:repeat(var(--cols, 4), var(--card-w, 60px));
  gap:8px;
}

.cm-card{
  width:var(--card-w, 60px);
  height:calc(var(--card-w, 60px) * 1.25);

  padding:0;
  border:0;

  background:none;

  perspective:600px;

  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.cm-inner{
  position:relative;

  display:block;
  width:100%;
  height:100%;

  transform-style:preserve-3d;
  transition:transform .28s ease;
}

.cm-card.up .cm-inner{
  transform:rotateY(180deg);
}

.cm-back,
.cm-front{
  position:absolute;
  inset:0;

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

  border-radius:10px;

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;

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

/* Back: purple MEMORY pattern with the G mark */
.cm-back{
  border:3px solid #fff;

  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 4px, transparent 4px 9px),
    linear-gradient(160deg, #8a6cff, #4b2fb3);
}

.cm-back b{
  color:rgba(255,255,255,.9);

  font-size:calc(var(--card-w, 60px) * .42);
  font-weight:1000;

  text-shadow:0 2px 0 rgba(0,0,0,.25);
}

.cm-front{
  background:linear-gradient(180deg, #ffffff, #f1ece2);

  font-size:calc(var(--card-w, 60px) * .55);
  line-height:1;

  transform:rotateY(180deg);
}

.cm-card.wrong .cm-front{
  box-shadow:0 0 0 3px #ff5a5f, 0 4px 10px rgba(0,0,0,.35);
  animation:cmShake .3s ease;
}

@keyframes cmShake{
  25%{ transform:rotateY(180deg) translateX(-4px); }
  75%{ transform:rotateY(180deg) translateX(4px); }
}

.cm-card.done .cm-front{
  box-shadow:0 0 0 3px #7cffb2, 0 0 18px rgba(124,255,178,.6);
}

.cm-card.done .cm-inner{
  animation:cmDone .45s ease forwards;
}

@keyframes cmDone{
  0%{ transform:rotateY(180deg) scale(1); }
  40%{ transform:rotateY(180deg) scale(1.12); }
  100%{ transform:rotateY(180deg) scale(.94); opacity:.55; }
}

.cm-message{
  color:#fff;

  font-size:14px;
  font-weight:1000;
  letter-spacing:.08em;

  text-shadow:0 2px 6px rgba(0,0,0,.5);
}

.cm-message.good{ color:#7cffb2; }

/* Found pairs: fade the whole card (fading inside the 3D flip
   would show the back of the card mirrored) */
.cm-card.done .cm-inner{ animation:none; }

.cm-card.done{
  opacity:.55;
  animation:cmDone2 .45s ease;
  transition:opacity .45s ease;
}

@keyframes cmDone2{
  40%{ transform:scale(1.12); opacity:1; }
}


/* ==========================================
STEP 53: NEW GAME - PERFECT CIRCLE
========================================== */

.pc-game{
  width:100%;
  height:100%;
  min-height:0;

  display:flex;
  flex-direction:column;
  gap:10px;
}

.pc-hud{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}

.pc-hud > div{
  padding:7px 4px;

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

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

  text-align:center;
}

.pc-hud span{
  display:block;
  margin-bottom:2px;

  color:#7c8798;

  font-size:9px;
  font-weight:1000;
  letter-spacing:.14em;
}

.pc-hud strong{
  color:#fff;
  font-size:18px;
}

.pc-hud strong.danger{ color:#ff5a5f; }

/* Drawing board: dark sketch paper */
.pc-stage{
  position:relative;
  flex:1;
  min-height:0;

  border-radius:18px;
  overflow:hidden;

  background:
    radial-gradient(circle at 50% 50%, transparent 0 20%, rgba(255,107,107,.05) 20% 20.4%, transparent 20.4% 36%, rgba(255,107,107,.05) 36% 36.4%, transparent 36.4%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(circle at 50% 40%, #232a3a, #121621 70%);

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

  /* Drawing must not scroll the page */
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;

  cursor:crosshair;
}

.pc-canvas{
  position:absolute;
  inset:0;

  pointer-events:none;
}

.pc-dot{
  position:absolute;
  left:50%;
  top:50%;

  width:12px;
  height:12px;
  margin:-6px 0 0 -6px;

  border-radius:50%;

  background:var(--genre, #ff6b6b);
  box-shadow:0 0 0 5px rgba(255,107,107,.18), 0 0 16px var(--genre, #ff6b6b);

  pointer-events:none;
}

.pc-score{
  position:absolute;
  left:0;
  right:0;
  top:50%;

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

  transform:translateY(-50%);

  pointer-events:none;
}

.pc-score b{
  color:#fff;

  font-size:clamp(40px, 12vw, 64px);
  font-weight:1000;
  font-variant-numeric:tabular-nums;

  text-shadow:0 0 20px rgba(0,0,0,.8), 0 3px 0 rgba(0,0,0,.4);

  animation:pcPop .4s cubic-bezier(.2,1.5,.4,1);
}

.pc-score b small{
  margin-left:2px;
  font-size:.45em;
}

.pc-score span{
  margin-top:2px;
  padding:3px 12px;

  border-radius:999px;

  background:rgba(0,0,0,.55);

  color:#fff;

  font-size:13px;
  font-weight:1000;
  letter-spacing:.06em;
}

.pc-score.perfect b{ color:#ffd76a; }
.pc-score.great b{ color:#7cffb2; }
.pc-score.good b{ color:#5fefff; }
.pc-score.bad b{ color:#ff6b6b; }

@keyframes pcPop{
  from{ transform:scale(1.7); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}

.pc-hint{
  position:absolute;
  left:0;
  right:0;
  bottom:16px;

  color:rgba(255,255,255,.6);

  font-size:13px;
  font-weight:900;
  letter-spacing:.06em;
  text-align:center;

  pointer-events:none;

  transition:opacity .2s;
}

.pc-hint.hide{ opacity:0; }


/* ==========================================
STEP 54: NEW GAME - PK KEEPER
========================================== */

.pk-game{
  width:100%;
  height:100%;
  min-height:0;

  display:flex;
  flex-direction:column;
  gap:10px;
}

.pk-hud{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.pk-hud > div{
  padding:7px 4px;

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

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

  text-align:center;
}

.pk-hud span{
  display:block;
  margin-bottom:2px;

  color:#7c8798;

  font-size:9px;
  font-weight:1000;
  letter-spacing:.14em;
}

.pk-hud strong{
  color:#fff;
  font-size:18px;
}

/* Night stadium, seen from the goal */
.pk-stage{
  position:relative;
  flex:1;
  min-height:0;

  border-radius:18px;
  overflow:hidden;

  background:#0b1a2c;

  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

.pk-crowd{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:42%;

  background:
    radial-gradient(circle at 15% 8%, rgba(255,255,230,.9) 0 3px, rgba(255,255,200,.25) 4px 30px, transparent 60px),
    radial-gradient(circle at 85% 8%, rgba(255,255,230,.9) 0 3px, rgba(255,255,200,.25) 4px 30px, transparent 60px),
    radial-gradient(circle, rgba(255,255,255,.18) 1.2px, transparent 1.6px) 0 0 / 9px 9px,
    linear-gradient(180deg, #0d1b2e 0%, #1c2c45 70%, #26354f 100%);
}

.pk-crowd::after{
  content:"";

  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:10px;

  background:linear-gradient(90deg, #ffd76a, #ff6b6b, #5fefff, #7cffb2, #ffd76a);
  opacity:.75;
}

.pk-field{
  position:absolute;
  left:0;
  right:0;
  top:42%;
  bottom:0;

  background:
    repeating-linear-gradient(180deg, #2f8f46 0 9%, #2a8040 9% 18%),
    #2f8f46;
}

.pk-field::before{
  /* Penalty box line */
  content:"";

  position:absolute;
  left:12%;
  right:12%;
  top:6%;
  height:0;

  border-top:3px solid rgba(255,255,255,.75);
}

.pk-spot{
  position:absolute;
  left:50%;
  top:54%;

  width:10px;
  height:5px;
  margin:-2px 0 0 -5px;

  border-radius:50%;

  background:#fff;
}

/* Kicker */
.pk-kicker{
  position:absolute;
  left:50%;
  top:30%;

  width:12%;
  max-width:62px;
  aspect-ratio:60 / 110;

  transform:translateX(-90%) scale(.8);
  transform-origin:50% 100%;
}

.pk-kicker svg{
  width:100%;
  height:100%;
  overflow:visible;
}

.pk-kicker.run{
  animation:pkRun .9s ease-in forwards;
}

@keyframes pkRun{
  0%{ transform:translateX(-160%) translateY(-6%) scale(.75); }
  100%{ transform:translateX(-70%) translateY(4%) scale(.9); }
}

.pk-leg-r{
  transform-origin:36px 68px;
  transition:transform .12s ease;
}

.pk-kicker.fake .pk-leg-r{ transform:rotate(-50deg); }
.pk-kicker.kick .pk-leg-r{ transform:rotate(-70deg); }

.pk-kicker.run .pk-leg-l{ animation:pkStep .22s ease-in-out infinite alternate; transform-origin:24px 68px; }

@keyframes pkStep{
  from{ transform:rotate(16deg); }
  to{ transform:rotate(-16deg); }
}

.pk-kicker.kick .pk-leg-l,
.pk-kicker.fake .pk-leg-l{ animation:none; }

/* Ball */
.pk-ball{
  position:absolute;
  left:50%;
  top:52%;
  z-index:3;

  font-size:16px;
  line-height:1;

  translate:-50% -50%;

  filter:drop-shadow(0 4px 4px rgba(0,0,0,.4));

  pointer-events:none;
}

.pk-ball.away{
  transition:all .45s ease-out !important;
  top:20% !important;
  opacity:0;
}

/* Goal frame around you */
.pk-post{
  position:absolute;
  top:0;
  bottom:0;
  z-index:4;

  width:5%;
  min-width:14px;

  background:linear-gradient(90deg, #d9d9d9, #ffffff 40%, #c9c9c9);
  box-shadow:0 0 18px rgba(0,0,0,.4);
}

.pk-post.left{ left:0; }
.pk-post.right{ right:0; }

.pk-bar{
  position:absolute;
  left:0;
  right:0;
  top:0;
  z-index:4;

  height:3.5%;
  min-height:12px;

  background:linear-gradient(180deg, #ffffff, #cfcfcf);
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}

/* Your gloves */
.pk-gloves{
  position:absolute;
  left:50%;
  bottom:4%;
  z-index:5;

  display:flex;
  gap:min(16vw, 90px);

  font-size:clamp(46px, 13vw, 80px);
  line-height:1;

  transform:translateX(-50%);

  transition:transform .16s cubic-bezier(.2,1.2,.4,1);

  filter:drop-shadow(0 8px 10px rgba(0,0,0,.5));

  pointer-events:none;
}

.pk-gloves span:first-child{ transform:scaleX(-1); display:inline-block; }

.pk-gloves.dive-l{ transform:translate(-150%, -32%) rotate(-28deg); }
.pk-gloves.dive-r{ transform:translate(50%, -32%) rotate(28deg); }

.pk-stage.saved .pk-gloves{ filter:drop-shadow(0 0 18px rgba(124,255,178,.9)); }

/* Goal: the whole screen flashes */
.pk-stage.goal::after{
  content:"";

  position:absolute;
  inset:0;
  z-index:6;

  background:rgba(255,60,70,.25);

  animation:pkGoal .5s ease-out forwards;

  pointer-events:none;
}

@keyframes pkGoal{
  from{ opacity:1; }
  to{ opacity:0; }
}

.pk-call{
  position:absolute;
  left:0;
  right:0;
  top:16%;
  z-index:7;

  color:#fff;

  font-size:clamp(30px, 9vw, 52px);
  font-weight:1000;
  font-style:italic;
  text-align:center;

  text-shadow:0 4px 0 rgba(0,0,0,.35), 0 0 20px rgba(0,0,0,.6);

  opacity:0;

  pointer-events:none;
}

.pk-call.show{ animation:pkCall .9s ease-out forwards; }
.pk-call.good{ color:#7cffb2; }
.pk-call.bad{ color:#ff6b6b; }

@keyframes pkCall{
  0%{ opacity:0; transform:scale(1.8); }
  20%{ opacity:1; transform:scale(1); }
  80%{ opacity:1; }
  100%{ opacity:0; }
}

/* Left / right hints */
.pk-tap{
  position:absolute;
  bottom:30%;
  z-index:5;

  color:rgba(255,255,255,.35);

  font-size:20px;

  pointer-events:none;
}

.pk-tap.left{ left:9%; }
.pk-tap.right{ right:9%; }

/* Fixes after the first test */
.pk-kicker{
  top:auto;
  bottom:46%;

  width:17%;
  max-width:84px;
}

@keyframes pkRun{
  0%{ transform:translateX(-160%) translateY(-14%) scale(.8); }
  100%{ transform:translateX(-78%) translateY(0) scale(1); }
}

.pk-gloves{
  bottom:3%;

  gap:min(14vw, 80px);

  font-size:clamp(34px, min(12vw, 10vh), 76px);

  transform:translateX(-50%);
  transition:left .16s cubic-bezier(.2,1.2,.4,1), bottom .16s cubic-bezier(.2,1.2,.4,1), transform .16s ease;
}

/* Dive: the gloves fly up to where the ball goes */
.pk-gloves.dive-l{
  left:24%;
  bottom:24%;
  transform:translateX(-50%) rotate(-24deg);
}

.pk-gloves.dive-r{
  left:76%;
  bottom:24%;
  transform:translateX(-50%) rotate(24deg);
}

.pk-kicker{
  width:auto;
  max-width:none;
  height:28%;
}

/* When diving, both gloves come together */
.pk-gloves.dive-l,
.pk-gloves.dive-r{
  gap:0;
}

/* The glove emoji is already a pair: show it once, bigger */
.pk-gloves{
  font-size:clamp(56px, min(19vw, 15vh), 110px);
}

.pk-gloves span:first-child{ transform:none; }


/* ==========================================
STEP 55: NEW GAME - RED LIGHT (だるまさんがころんだ)
========================================== */

.dr-game{
  width:100%;
  height:100%;
  min-height:0;

  display:flex;
  flex-direction:column;
  gap:10px;
}

.dr-hud{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}

.dr-hud > div{
  padding:7px 4px;

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

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

  text-align:center;
}

.dr-hud span{
  display:block;
  margin-bottom:2px;

  color:#7c8798;

  font-size:9px;
  font-weight:1000;
  letter-spacing:.14em;
}

.dr-hud strong{
  color:#fff;
  font-size:18px;
}

.dr-hud strong[data-dr-lives]{ color:#ff6b8a; letter-spacing:.1em; }
.dr-hud strong.danger{ color:#ff5a5f; }

/* Evening park */
.dr-stage{
  position:relative;
  flex:1;
  min-height:0;

  border-radius:18px;
  overflow:hidden;

  cursor:pointer;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

.dr-sky{
  position:absolute;
  inset:0;

  background:
    radial-gradient(circle at 78% 30%, #ffe9a8 0 18px, rgba(255,200,120,.35) 19px 60px, transparent 120px),
    linear-gradient(180deg, #3b2a6b 0%, #c65c7a 45%, #ffad6b 70%, #ffd08a 100%);
}

.dr-ground{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:30%;

  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 30px),
    linear-gradient(180deg, #c9a26b, #a5804f);

  box-shadow:0 -6px 0 #6b8f3a;
}

.dr-tree{
  position:absolute;
  right:4%;
  bottom:26%;

  width:16%;
  height:58%;

  background:linear-gradient(90deg, #4a2e1a, #6b4426 50%, #4a2e1a);
  border-radius:8px 8px 0 0;
}

.dr-tree::before{
  content:"";

  position:absolute;
  left:-90%;
  right:-90%;
  top:-40%;
  height:70%;

  border-radius:50%;

  background:radial-gradient(circle at 40% 40%, #3f7a35, #24502a 70%);
  box-shadow:-30px 20px 0 -6px #2f6630, 30px 24px 0 -8px #2f6630;
}

/* Oni */
.dr-oni{
  position:absolute;
  right:22%;
  bottom:24%;
  z-index:2;

  height:34%;
  aspect-ratio:60 / 100;
}

.dr-oni svg{
  width:100%;
  height:100%;
  overflow:visible;
}

.dr-oni-face{ display:none; }

.dr-oni.look .dr-oni-face{ display:inline; }
.dr-oni.look .dr-oni-back{ display:none; }

.dr-oni.turning{ animation:drTurn .18s ease-out; }

@keyframes drTurn{
  0%{ transform:scaleX(.2); }
  100%{ transform:scaleX(1); }
}

/* Fake glance: a little twitch */
.dr-oni.glance{ animation:drGlance .26s ease; }

@keyframes drGlance{
  40%{ transform:rotate(-8deg) translateX(-4px); }
}

.dr-eye{
  position:absolute;
  left:50%;
  top:-34%;

  color:#ff3b4f;

  font-size:clamp(26px, 7vw, 40px);
  font-weight:1000;

  transform:translateX(-50%) scale(0);

  text-shadow:0 2px 0 #fff;
}

.dr-oni.look .dr-eye{ animation:drEye .25s cubic-bezier(.2,1.6,.4,1) forwards; }

@keyframes drEye{
  to{ transform:translateX(-50%) scale(1); }
}

.dr-oni.tagged{ animation:drTagged .5s ease; }

@keyframes drTagged{
  30%{ transform:translateX(8px) rotate(6deg); }
}

/* Chant bubble */
.dr-bubble{
  position:absolute;
  right:6%;
  top:8%;
  z-index:3;

  max-width:70%;
  min-height:1.4em;
  padding:8px 14px;

  border-radius:14px;

  background:rgba(255,255,255,.94);
  box-shadow:0 6px 16px rgba(0,0,0,.25);

  color:#2b1a0f;

  font-size:clamp(18px, 5.5vw, 28px);
  font-weight:1000;
  letter-spacing:.04em;
  white-space:nowrap;

  opacity:0;
  transition:opacity .15s;
}

.dr-bubble.show{ opacity:1; }

.dr-oni.look ~ .dr-bubble,
.dr-stage:has(.dr-oni.look) .dr-bubble{
  color:#e23c4a;
}

/* Player */
.dr-player{
  position:absolute;
  bottom:24%;
  z-index:2;

  height:28%;
  aspect-ratio:50 / 90;

  transition:left .06s linear;
}

.dr-player svg{
  width:100%;
  height:100%;
  overflow:visible;
}

.dr-leg-a,
.dr-leg-b,
.dr-arm{
  transform-box:fill-box;
  transform-origin:50% 0;
}

.dr-player.walk .dr-leg-a{ animation:drLeg .28s ease-in-out infinite alternate; }
.dr-player.walk .dr-leg-b{ animation:drLeg .28s ease-in-out infinite alternate-reverse; }
.dr-player.walk .dr-arm{ animation:drLeg .28s ease-in-out infinite alternate-reverse; }
.dr-player.walk svg{ animation:drBob .28s ease-in-out infinite alternate; }

@keyframes drLeg{
  from{ transform:rotate(24deg); }
  to{ transform:rotate(-24deg); }
}

@keyframes drBob{
  to{ transform:translateY(-3%); }
}

.dr-player.caught{
  transition:left .5s cubic-bezier(.3,1.3,.5,1);
  filter:drop-shadow(0 0 10px rgba(255,60,80,.9));
}

.dr-player.win svg{ animation:drWin .5s ease infinite alternate; }

@keyframes drWin{
  to{ transform:translateY(-12%); }
}

.dr-call{
  position:absolute;
  left:0;
  right:0;
  top:34%;
  z-index:5;

  color:#fff;

  font-size:clamp(24px, 7vw, 40px);
  font-weight:1000;
  font-style:italic;
  text-align:center;

  text-shadow:0 3px 0 rgba(0,0,0,.35), 0 0 16px rgba(0,0,0,.5);

  opacity:0;

  pointer-events:none;
}

.dr-call.show{ animation:drCall 1s ease-out forwards; }
.dr-call.good{ color:#7cffb2; }
.dr-call.bad{ color:#ff6b6b; }

@keyframes drCall{
  0%{ opacity:0; transform:scale(1.7); }
  20%{ opacity:1; transform:scale(1); }
  80%{ opacity:1; }
  100%{ opacity:0; }
}

.dr-hint{
  position:absolute;
  left:0;
  right:0;
  bottom:8%;
  z-index:4;

  color:#fff;

  font-size:14px;
  font-weight:1000;
  letter-spacing:.06em;
  text-align:center;

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

  animation:eggHint .6s ease-in-out infinite alternate;

  transition:opacity .2s;

  pointer-events:none;
}

.dr-hint.hide{ opacity:0; }

/* Narrow screens: smaller people so there is room to walk */
.dr-oni{ height:min(34%, 30vw); }
.dr-player{ height:min(28%, 25vw); }


/* ==========================================
STEP 56: NEW GAME - SORT RUSH (factory conveyor)
========================================== */

.sr-game{
  width:100%;
  height:100%;
  min-height:0;

  display:flex;
  flex-direction:column;
  gap:10px;
}

.sr-hud{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}

.sr-hud > div{
  padding:7px 4px;

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

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

  text-align:center;
}

.sr-hud span{
  display:block;
  margin-bottom:2px;

  color:#7c8798;

  font-size:9px;
  font-weight:1000;
  letter-spacing:.14em;
}

.sr-hud strong{
  color:#fff;
  font-size:18px;
}

.sr-hud strong.danger{ color:#ff5a5f; }

/* Factory floor */
.sr-stage{
  position:relative;
  flex:1;
  min-height:0;

  border-radius:18px;
  overflow:hidden;

  background:
    radial-gradient(circle at 50% 0%, rgba(255,220,150,.18), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 12px),
    linear-gradient(180deg, #2b3038, #1b1f26);

  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

/* The belt */
.sr-belt{
  position:absolute;
  left:50%;
  top:0;
  bottom:30%;

  width:min(34%, 130px);

  transform:translateX(-50%);

  border-left:6px solid #8a939e;
  border-right:6px solid #8a939e;

  background:#15181d;

  box-shadow:0 0 0 2px #0b0d10, 0 10px 30px rgba(0,0,0,.5);

  overflow:hidden;
}

.sr-belt i{
  position:absolute;
  inset:-40px 0 0;

  background:repeating-linear-gradient(180deg, #2a2f36 0 18px, #1d2127 18px 40px);

  animation:srBelt var(--belt-speed, .6s) linear infinite;
}

.sr-belt.stop i{ animation-play-state:paused; }

@keyframes srBelt{
  from{ transform:translateY(0); }
  to{ transform:translateY(40px); }
}

/* End of the belt: hazard stripes */
.sr-gate{
  position:absolute;
  left:50%;
  bottom:30%;

  width:min(40%, 150px);
  height:12px;

  transform:translate(-50%, 50%);

  border-radius:3px;

  background:repeating-linear-gradient(45deg, #ffd23f 0 10px, #1b1b1b 10px 20px);

  box-shadow:0 0 12px rgba(255,210,63,.4);
}

/* Items (cardboard boxes) */
.sr-item{
  position:absolute;
  left:50%;
  top:0;
  z-index:2;

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

  width:var(--size, 64px);
  height:var(--size, 64px);

  border-radius:10px;

  background:linear-gradient(160deg, #e2b77c, #c48f4e);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.12), 0 6px 10px rgba(0,0,0,.4);

  font-size:calc(var(--size, 64px) * .58);
  line-height:1;

  pointer-events:none;
  will-change:transform;
}

.sr-item.num{
  color:#2b1a0f;

  font-size:calc(var(--size, 64px) * .5);
  font-weight:1000;
}

.sr-item.fly-ok,
.sr-item.fly-bad,
.sr-item.drop{
  transition:transform .4s ease-in, opacity .4s ease-in;
  opacity:0;
}

.sr-item.fly-ok.to-left,
.sr-item.fly-bad.to-left{ transform:translate(calc(-50% - 38vw), 120%) rotate(-40deg) scale(.6) !important; }

.sr-item.fly-ok.to-right,
.sr-item.fly-bad.to-right{ transform:translate(calc(-50% + 38vw), 120%) rotate(40deg) scale(.6) !important; }

.sr-item.drop{
  transform:translate(-50%, 900px) rotate(25deg) !important;
  filter:grayscale(1);
}

/* Boxes on each side */
.sr-bin{
  position:absolute;
  bottom:4%;

  width:40%;
  height:22%;

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

  border:3px solid rgba(255,255,255,.18);
  border-radius:14px;

  background:linear-gradient(180deg, #3a414c, #262b33);

  box-shadow:inset 0 -8px 0 rgba(0,0,0,.25);

  pointer-events:none;
}

.sr-bin.left{ left:4%; }
.sr-bin.right{ right:4%; }

.sr-bin b{
  font-size:clamp(26px, 7vw, 40px);
  line-height:1;
}

.sr-bin b.num{
  color:#ffd23f;
  font-weight:1000;
}

.sr-bin span{
  color:#fff;

  font-size:clamp(12px, 3.4vw, 16px);
  font-weight:1000;
  letter-spacing:.06em;
}

.sr-bin.hit{ animation:srHit .25s ease; border-color:#7cffb2; }
.sr-bin.bad{ animation:srBad .3s ease; border-color:#ff5a5f; }

@keyframes srHit{
  40%{ transform:scale(1.06); box-shadow:0 0 22px rgba(124,255,178,.6); }
}

@keyframes srBad{
  25%{ transform:translateX(-6px); }
  75%{ transform:translateX(6px); }
}

.sr-arrow{
  position:absolute;
  top:40%;

  color:rgba(255,255,255,.18);

  font-size:28px;

  pointer-events:none;
}

.sr-arrow.left{ left:8%; }
.sr-arrow.right{ right:8%; }

.sr-pop{
  position:absolute;
  left:0;
  right:0;
  top:30%;
  z-index:4;

  color:#fff;

  font-size:clamp(22px, 6vw, 34px);
  font-weight:1000;
  font-style:italic;
  text-align:center;

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

  opacity:0;

  pointer-events:none;
}

.sr-pop.show{ animation:drCall .8s ease-out forwards; }
.sr-pop.good{ color:#ffd76a; }
.sr-pop.bad{ color:#ff5a5f; }

/* Phone sideways: smaller boxes */
@media (max-height:520px){
  .sr-belt{ bottom:24%; }
  .sr-gate{ bottom:24%; }
  .sr-bin{ height:20%; width:30%; flex-direction:row; gap:8px; }
}

/* Bin color only flashes, then goes back */
.sr-bin.hit,
.sr-bin.bad{ border-color:rgba(255,255,255,.18); }

@keyframes srHit{
  40%{ transform:scale(1.06); border-color:#7cffb2; box-shadow:0 0 22px rgba(124,255,178,.6); }
}

@keyframes srBad{
  25%{ transform:translateX(-6px); border-color:#ff5a5f; }
  75%{ transform:translateX(6px); border-color:#ff5a5f; }
}


/* ==========================================
STEP 57: NEW GAME - HOOP SHOT (basketball)
========================================== */

.hs-game{
  width:100%;
  height:100%;
  min-height:0;

  display:flex;
  flex-direction:column;
  gap:10px;
}

.hs-hud{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}

.hs-hud > div{
  padding:7px 4px;

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

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

  text-align:center;
}

.hs-hud span{
  display:block;
  margin-bottom:2px;

  color:#7c8798;

  font-size:9px;
  font-weight:1000;
  letter-spacing:.14em;
}

.hs-hud strong{
  color:#fff;
  font-size:18px;
}

.hs-hud strong.danger{ color:#ff5a5f; }

/* Indoor court at night */
.hs-stage{
  position:relative;
  flex:1;
  min-height:0;

  border-radius:18px;
  overflow:hidden;

  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,240,200,.22), transparent 55%),
    linear-gradient(180deg, transparent 0 78%, #b5743a 78%, #9a5f2c 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 2px, transparent 2px 60px),
    linear-gradient(180deg, #1b2440, #2a2f52 60%, #3a3157 78%);

  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;

  cursor:grab;
}

.hs-stage:active{ cursor:grabbing; }

.hs-canvas{
  position:absolute;
  inset:0;

  pointer-events:none;
}

.hs-call{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  z-index:3;

  color:#fff;

  font-size:clamp(26px, 8vw, 44px);
  font-weight:1000;
  font-style:italic;
  text-align:center;

  text-shadow:0 3px 0 rgba(0,0,0,.4), 0 0 16px rgba(0,0,0,.5);

  opacity:0;

  pointer-events:none;
}

.hs-call.show{ animation:drCall .9s ease-out forwards; }
.hs-call.perfect{ color:#ffd76a; }
.hs-call.good{ color:#7cffb2; }
.hs-call.bad{ color:#ff6b6b; }

.hs-hint{
  position:absolute;
  left:0;
  right:0;
  bottom:20%;
  z-index:3;

  color:#fff;

  font-size:14px;
  font-weight:1000;
  letter-spacing:.06em;
  text-align:center;

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

  animation:eggHint .6s ease-in-out infinite alternate;
  transition:opacity .2s;

  pointer-events:none;
}

.hs-hint.hide{ opacity:0; }




  /* ==========================================
STEP 58: NEW GAME - COLOR MIX (color memory)
========================================== */

.cx-game{
  width:100%;
  height:100%;
  min-height:0;

  display:flex;
  flex-direction:column;
  gap:10px;
}

.cx-hud{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}

.cx-hud > div{
  padding:7px 4px;

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

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

  text-align:center;
}

.cx-hud span{
  display:block;
  margin-bottom:2px;

  color:#7c8798;

  font-size:9px;
  font-weight:1000;
  letter-spacing:.14em;
}

.cx-hud strong{
  color:#fff;
  font-size:18px;
}

.cx-hud strong.danger{ color:#ff5a5f; }

/* Atelier: warm canvas + wooden table */
.cx-stage{
  position:relative;
  flex:1;
  min-height:0;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-evenly;
  gap:8px;

  padding:12px;

  border-radius:18px;

  background:
    linear-gradient(180deg, transparent 0 62%, #8c5a33 62%, #6e4426 100%),
    radial-gradient(circle at 50% 30%, #fbf3e4, #ead9bd 70%);
}

.cx-swatches{
  display:flex;
  gap:clamp(14px, 6vw, 40px);
}

.cx-swatch{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.cx-swatch span{
  color:#5a3d22;

  font-size:12px;
  font-weight:1000;
  letter-spacing:.08em;
}

.cx-target,
.cx-mine{
  width:clamp(90px, 28vw, 150px);
  aspect-ratio:1;

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

  border:6px solid #fff;
  border-radius:50%;

  background:var(--color, #ddd);

  box-shadow:0 8px 18px rgba(80,50,20,.3), inset 0 -10px 18px rgba(0,0,0,.12);

  transition:background .25s ease;
}

.cx-target.hidden{
  background:repeating-linear-gradient(45deg, #d9ccb6 0 8px, #cdbfa6 8px 16px);
}

.cx-target b{
  color:#8c6f4d;

  font-size:clamp(34px, 10vw, 54px);
  font-weight:1000;
}

.cx-target.show{ animation:cxPop .3s ease-out; }

@keyframes cxPop{
  from{ transform:scale(.85); }
  to{ transform:scale(1); }
}

.cx-mine.empty{
  background:repeating-linear-gradient(-45deg, #f5efe4 0 8px, #ece3d3 8px 16px);
}

.cx-mine.drip{ animation:cxDrip .25s ease; }

@keyframes cxDrip{
  40%{ transform:scale(1.07); }
}

.cx-message{
  min-height:22px;

  color:#5a3d22;

  font-size:14px;
  font-weight:1000;
  text-align:center;
}

.cx-message.result b{ font-size:22px; margin-right:4px; }
.cx-message.perfect b{ color:#d18a00; }
.cx-message.good b{ color:#1f9a57; }
.cx-message.bad b{ color:#d63a46; }

.cx-bar{
  width:min(60%, 260px);
  height:6px;

  border-radius:999px;

  background:rgba(90,61,34,.2);

  overflow:hidden;
}

.cx-bar i{
  display:block;
  height:100%;

  background:#d18a00;

  transform-origin:left center;
  transform:scaleX(0);
}

/* Paint tubes */
.cx-paints{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:8px;

  width:100%;
  max-width:460px;
}

.cx-paint{
  position:relative;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;

  padding:8px 2px 6px;

  border:0;
  border-radius:12px;

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

  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;

  transition:transform .08s;
}

.cx-paint:active:not(:disabled){ transform:scale(.92); }
.cx-paint:disabled{ opacity:.45; cursor:default; }

.cx-paint i{
  width:clamp(34px, 10vw, 50px);
  aspect-ratio:1;

  border:3px solid rgba(255,255,255,.85);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;

  background:var(--paint);

  box-shadow:0 4px 8px rgba(0,0,0,.3), inset -4px -6px 8px rgba(0,0,0,.15);
}

.cx-paint span{
  color:#fff;

  font-size:11px;
  font-weight:1000;

  text-shadow:0 1px 2px rgba(0,0,0,.5);
}

.cx-paint b{
  position:absolute;
  top:2px;
  right:6px;

  min-width:18px;

  border-radius:999px;

  background:#fff;

  color:#2b1a0f;

  font-size:11px;
  font-weight:1000;
}

.cx-paint b:empty{ display:none; }

.cx-actions{
  display:flex;
  gap:10px;

  width:100%;
  max-width:460px;
}

.cx-actions button{
  flex:1;
  min-height:46px;

  border:0;
  border-radius:12px;

  font-size:15px;
  font-weight:1000;

  cursor:pointer;
  touch-action:manipulation;
}

.cx-actions button:disabled{ opacity:.45; cursor:default; }

.cx-reset{
  background:rgba(255,255,255,.85);
  color:#5a3d22;
}

.cx-done{
  background:linear-gradient(180deg, #ffd76a, #f0a92b);
  color:#3a2306;
  box-shadow:0 4px 0 #b97a12;
}

/* Phone sideways: put the colors next to the paints */
@media (max-height:520px){
  .cx-stage{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto auto auto;
    align-content:center;
    column-gap:16px;
    row-gap:6px;
  }

  .cx-swatches{ grid-row:1 / 5; align-self:center; }
  .cx-target, .cx-mine{ width:min(22vh, 110px); border-width:4px; }
  .cx-paint i{ width:min(8vh, 40px); }
  .cx-actions button{ min-height:38px; }
}

@media (max-height:520px){
  .cx-swatch span{ color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); }
}



/* ==========================================
STEP 59: NEW GAME - BEAT SWIPE (rhythm)
========================================== */

.bs-game{
  width:100%;
  height:100%;
  min-height:0;

  display:flex;
  flex-direction:column;
  gap:10px;
}

.bs-hud{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}

.bs-hud > div{
  padding:7px 4px;

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

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

  text-align:center;
}

.bs-hud span{
  display:block;
  margin-bottom:2px;

  color:#7c8798;

  font-size:9px;
  font-weight:1000;
  letter-spacing:.14em;
}

.bs-hud strong{
  color:#fff;
  font-size:18px;
}

/* Night club */
.bs-stage{
  position:relative;
  flex:1;
  min-height:0;

  display:flex;
  justify-content:center;

  border-radius:18px;
  overflow:hidden;

  background:
    radial-gradient(circle at 20% 10%, rgba(255,126,182,.35), transparent 40%),
    radial-gradient(circle at 80% 15%, rgba(95,239,255,.3), transparent 40%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 40px),
    linear-gradient(180deg, #170a2b, #0b0716);

  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;

  cursor:pointer;
}

.bs-lane{
  position:relative;

  width:min(46%, 190px);
  height:100%;

  border-left:2px solid rgba(255,126,182,.35);
  border-right:2px solid rgba(255,126,182,.35);

  background:linear-gradient(180deg, transparent, rgba(255,126,182,.08));
}

.bs-lane.pulse{ animation:bsPulse .2s ease-out; }

@keyframes bsPulse{
  0%{ background-color:rgba(255,126,182,.12); }
  100%{ background-color:transparent; }
}

.bs-ring{
  position:absolute;
  left:50%;
  top:82%;

  width:min(78%, 120px);
  aspect-ratio:1;

  border:4px solid rgba(255,255,255,.8);
  border-radius:50%;

  transform:translate(-50%, -50%);

  box-shadow:0 0 18px rgba(255,126,182,.55), inset 0 0 18px rgba(255,126,182,.35);
}

.bs-ring.flash{ animation:bsFlash .25s ease-out; }

@keyframes bsFlash{
  0%{ transform:translate(-50%, -50%) scale(1.18); border-color:#ffd76a; box-shadow:0 0 30px rgba(255,215,106,.9); }
  100%{ transform:translate(-50%, -50%) scale(1); }
}

/* Notes */
.bs-note{
  position:absolute;
  left:50%;
  top:0;
  z-index:2;

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

  width:min(64%, 96px);
  aspect-ratio:1;

  border-radius:50%;

  will-change:transform;
  pointer-events:none;
}

.bs-note.tap{
  background:radial-gradient(circle at 35% 30%, #fff, #ff7eb6 45%, #c2357a);
  box-shadow:0 0 16px rgba(255,126,182,.8);
}

.bs-note.tap i{
  width:30%;
  aspect-ratio:1;
  border-radius:50%;
  background:#fff;
}

.bs-note.arrow{
  border-radius:22%;

  background:linear-gradient(160deg, #5fefff, #2a8bd6);
  box-shadow:0 0 16px rgba(95,239,255,.75);
}

.bs-note.arrow b{
  color:#fff;

  font-size:clamp(34px, 10vw, 58px);
  font-weight:1000;
  line-height:1;

  text-shadow:0 2px 0 rgba(0,0,0,.25);
}

.bs-note.hit{
  animation:bsHit .25s ease-out forwards;
}

@keyframes bsHit{
  to{ opacity:0; filter:brightness(2); scale:1.5; }
}

.bs-note.missed{
  opacity:.25;
  filter:grayscale(1);
  transition:opacity .2s;
}

/* Judge text */
.bs-judge{
  position:absolute;
  left:0;
  right:0;
  top:38%;
  z-index:4;

  color:#fff;

  font-size:clamp(26px, 8vw, 44px);
  font-weight:1000;
  font-style:italic;
  text-align:center;

  text-shadow:0 3px 0 rgba(0,0,0,.4), 0 0 16px rgba(0,0,0,.5);

  opacity:0;
  pointer-events:none;
}

.bs-judge.show{ animation:bsJudge .5s ease-out forwards; }
.bs-judge.perfect{ color:#ffd76a; }
.bs-judge.great{ color:#7cffb2; }
.bs-judge.good{ color:#5fefff; }
.bs-judge.miss,
.bs-judge.wrong{ color:#ff6b6b; }
.bs-judge.count{ font-size:clamp(46px, 14vw, 80px); font-style:normal; }
.bs-judge.end{ animation:none; opacity:1; font-size:clamp(20px, 6vw, 30px); }

@keyframes bsJudge{
  0%{ opacity:0; transform:scale(1.5); }
  25%{ opacity:1; transform:scale(1); }
  75%{ opacity:1; }
  100%{ opacity:0; }
}

.bs-hint{
  position:absolute;
  left:0;
  right:0;
  bottom:3%;
  z-index:4;

  color:rgba(255,255,255,.75);

  font-size:13px;
  font-weight:1000;
  letter-spacing:.06em;
  text-align:center;

  transition:opacity .3s;
  pointer-events:none;
}

.bs-hint.hide{ opacity:0; }

/* Phone sideways: smaller notes */
@media (max-height:520px){
  .bs-note{ width:min(64%, 62px); }
  .bs-note.arrow b{ font-size:34px; }
  .bs-ring{ width:min(78%, 78px); }
}

/* Notes a bit smaller so fast songs do not pile up */
.bs-note{ width:min(50%, 74px); }
.bs-note.arrow b{ font-size:clamp(30px, 8vw, 46px); }


/* ==========================================
STEP 61: PK KEEPER - NEW TV VIEW (pk2-)
(the old .pk- styles are no longer used)
========================================== */

.pk2-game{
  width:100%;
  height:100%;
  min-height:0;

  display:flex;
  flex-direction:column;
  gap:10px;
}

.pk2-hud{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.pk2-hud > div{
  padding:7px 4px;

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

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

  text-align:center;
}

.pk2-hud span{
  display:block;
  margin-bottom:2px;

  color:#7c8798;

  font-size:9px;
  font-weight:1000;
  letter-spacing:.14em;
}

.pk2-hud strong{
  color:#fff;
  font-size:18px;
}

.pk2-stage{
  position:relative;
  flex:1;
  min-height:0;

  border-radius:18px;
  overflow:hidden;

  container-type:size;

  background:#0d1b2e;

  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

/* Stand with crowd and lights */
.pk2-crowd{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:36%;

  background:
    radial-gradient(circle at 12% 6%, rgba(255,255,230,.95) 0 3px, rgba(255,255,200,.25) 4px 28px, transparent 56px),
    radial-gradient(circle at 88% 6%, rgba(255,255,230,.95) 0 3px, rgba(255,255,200,.25) 4px 28px, transparent 56px),
    radial-gradient(circle, rgba(255,255,255,.2) 1.2px, transparent 1.6px) 0 0 / 8px 8px,
    linear-gradient(180deg, #0d1b2e 0%, #1c2c45 70%, #2a3a57 100%);
}

.pk2-crowd::after{
  content:"";

  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:8px;

  background:linear-gradient(90deg, #ffd76a, #ff6b6b, #5fefff, #7cffb2, #ffd76a);
  opacity:.8;
}

/* Pitch with stripes, getting wider toward you */
.pk2-pitch{
  position:absolute;
  left:0;
  right:0;
  top:36%;
  bottom:0;

  background:
    repeating-linear-gradient(180deg, #2f8f46 0 10%, #2a8040 10% 20%);
}

.pk2-pitch::before{
  /* Penalty box */
  content:"";

  position:absolute;
  left:-10%;
  right:-10%;
  top:20%;
  bottom:-10%;

  border:3px solid rgba(255,255,255,.75);
  border-bottom:0;

  clip-path:polygon(18% 0, 82% 0, 100% 100%, 0 100%);
}

.pk2-spot{
  position:absolute;
  left:50%;
  top:82%;

  width:10px;
  height:5px;
  margin:-2px 0 0 -5px;

  border-radius:50%;

  background:#fff;
}

/* Goal */
.pk2-goal{
  position:absolute;
  z-index:1;

  border:6px solid #fff;
  border-bottom:0;
  border-radius:3px 3px 0 0;

  box-shadow:0 0 14px rgba(0,0,0,.35);
}

.pk2-net{
  position:absolute;
  inset:0;

  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.22) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.22) 0 1px, transparent 1px 9px),
    rgba(10,20,30,.35);
}

.pk2-stage.goal .pk2-net{ animation:pk2Net .5s ease; }

@keyframes pk2Net{
  30%{ transform:scale(1.03, 1.05); filter:brightness(1.6); }
}

/* 6 spots (only seen as a flash) */
.pk2-zones{
  position:absolute;
  inset:0;

  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(2, 1fr);
}

.pk2-zones i{
  border:1px dashed rgba(255,255,255,.12);
}

.pk2-zones i.chosen{ background:rgba(95,239,255,.18); }
.pk2-zones i.shot{ background:rgba(255,90,95,.22); }
.pk2-stage.saved .pk2-zones i.shot{ background:rgba(124,255,178,.28); }

/* Goalkeeper */
.pk2-keeper{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;

  height:22%;
  aspect-ratio:80 / 100;

  transform:translate(-50%, -100%);
  transform-origin:50% 80%;

  transition:transform .2s cubic-bezier(.2,1.1,.4,1);

  animation:pk2Ready .5s ease-in-out infinite alternate;
}

.pk2-keeper svg{
  width:100%;
  height:100%;
  overflow:visible;
}

@keyframes pk2Ready{
  to{ translate:0 -2%; }
}

.pk2-keeper.dive{ animation:none; }
.pk2-keeper.crouch svg{ transform:scaleY(.8) translateY(12%); }

.pk2-stage.saved .pk2-keeper svg{ filter:drop-shadow(0 0 10px rgba(124,255,178,.9)); }

/* Kicker (seen from behind) */
.pk2-kicker{
  position:absolute;
  left:50%;
  top:100%;
  z-index:4;

  height:30%;
  aspect-ratio:70 / 120;

  transform:translate(-160%, -86%) scale(1.1);
  transform-origin:50% 100%;
}

.pk2-kicker svg{
  width:100%;
  height:100%;
  overflow:visible;
}

.pk2-kicker.run{
  animation:pk2Run var(--run, 900ms) ease-in forwards;
}

@keyframes pk2Run{
  from{ transform:translate(-200%, -70%) scale(1.15); }
  to{ transform:translate(-95%, -86%) scale(1); }
}

.pk2-kicker.pause{ animation-play-state:paused; }

.pk2-leg-l,
.pk2-leg-r,
.pk2-k-arm-l,
.pk2-k-arm-r,
.pk2-body{
  transform-box:fill-box;
  transform-origin:50% 0;
}

.pk2-body{ transform-origin:50% 100%; transition:transform .2s ease; }

.pk2-kicker.run .pk2-leg-l{ animation:pk2Step .24s ease-in-out infinite alternate; }
.pk2-kicker.run .pk2-leg-r{ animation:pk2Step .24s ease-in-out infinite alternate-reverse; }
.pk2-kicker.run .pk2-k-arm-l{ animation:pk2Step .24s ease-in-out infinite alternate-reverse; }
.pk2-kicker.run .pk2-k-arm-r{ animation:pk2Step .24s ease-in-out infinite alternate; }

.pk2-kicker.pause .pk2-leg-l,
.pk2-kicker.pause .pk2-leg-r,
.pk2-kicker.pause .pk2-k-arm-l,
.pk2-kicker.pause .pk2-k-arm-r{ animation-play-state:paused; }

@keyframes pk2Step{
  from{ transform:rotate(18deg); }
  to{ transform:rotate(-18deg); }
}

/* Lean before the kick (a hint... or a trick) */
.pk2-kicker.lean-l .pk2-body{ transform:rotate(-12deg); }
.pk2-kicker.lean-r .pk2-body{ transform:rotate(12deg); }
.pk2-kicker.lean-c .pk2-body{ transform:rotate(0deg) scaleY(.96); }

.pk2-kicker.kick .pk2-leg-l,
.pk2-kicker.kick .pk2-leg-r,
.pk2-kicker.kick .pk2-k-arm-l,
.pk2-kicker.kick .pk2-k-arm-r,
.pk2-kicker.fake .pk2-leg-l,
.pk2-kicker.fake .pk2-leg-r{ animation:none; }

.pk2-kicker.kick .pk2-leg-r,
.pk2-kicker.fake .pk2-leg-r{ transform:rotate(-55deg); transition:transform .1s ease; }
.pk2-kicker.kick .pk2-k-arm-l{ transform:rotate(60deg); }

/* Ball */
.pk2-ball{
  position:absolute;
  left:50%;
  top:82%;
  z-index:3;

  width:clamp(22px, 7cqw, 38px);
  aspect-ratio:1;

  border-radius:50%;

  background:
    radial-gradient(circle at 50% 50%, #1d1d1d 0 18%, transparent 19%),
    radial-gradient(circle at 18% 30%, #1d1d1d 0 12%, transparent 13%),
    radial-gradient(circle at 82% 30%, #1d1d1d 0 12%, transparent 13%),
    radial-gradient(circle at 30% 85%, #1d1d1d 0 12%, transparent 13%),
    radial-gradient(circle at 70% 85%, #1d1d1d 0 12%, transparent 13%),
    radial-gradient(circle at 35% 30%, #ffffff, #d9d9d9);

  box-shadow:0 4px 6px rgba(0,0,0,.4);

  transform:translate(-50%, -50%);

  pointer-events:none;
}

.pk2-ball.away{ opacity:0; transition:opacity .45s ease .1s; }

/* Messages */
.pk2-stage.goal::after{
  content:"";

  position:absolute;
  inset:0;
  z-index:6;

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

  animation:pkGoal .5s ease-out forwards;

  pointer-events:none;
}

.pk2-call{
  position:absolute;
  left:0;
  right:0;
  top:8%;
  z-index:7;

  color:#fff;

  font-size:clamp(30px, 9vw, 52px);
  font-weight:1000;
  font-style:italic;
  text-align:center;

  text-shadow:0 4px 0 rgba(0,0,0,.35), 0 0 20px rgba(0,0,0,.6);

  opacity:0;
  pointer-events:none;
}

.pk2-call.show{ animation:pkCall .9s ease-out forwards; }
.pk2-call.good{ color:#7cffb2; }
.pk2-call.bad{ color:#ff6b6b; }

.pk2-hint{
  position:absolute;
  left:0;
  right:0;
  top:53%;
  z-index:5;

  color:#fff;

  font-size:13px;
  font-weight:1000;
  letter-spacing:.05em;
  text-align:center;

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

  transition:opacity .2s;
  pointer-events:none;
}

.pk2-hint.hide{ opacity:0; }