:root{
  --bg:#ffffff;
  --panel:#eef4ff;
  --line:#ccd7e6;
  --text:#17233b;
  --muted:#66758a;
  --primary:#2468d8;
  --primary-dark:#1853b2;
  --success:#138a4b;
  --danger:#c63d4f;
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  width:100%;
  min-width:0;
  min-height:100%;
  font-family:Inter,Arial,sans-serif;
  background:transparent;
  color:var(--text);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  overflow-x:hidden;
}

button{
  font:inherit;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}


/* =========================
   GAME SHELL
   ========================= */

.game-shell{
  width:100%;
  max-width:820px;
  min-width:0;
  margin:0 auto;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg);
  overflow:hidden;
  box-shadow:0 3px 14px rgba(31,49,79,.12);
}


/* =========================
   TOP BAR
   ========================= */

.topbar{
  min-height:66px;
  padding:10px clamp(11px,2.4vw,18px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.brand-dot{
  flex:0 0 auto;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 0 5px rgba(36,104,216,.12);
}

.eyebrow{
  font-size:clamp(8px,1.5vw,9px);
  font-weight:800;
  letter-spacing:1.5px;
  color:#55729a;
}

.topbar h1{
  font-size:clamp(17px,3.4vw,20px);
  line-height:1.1;
  margin:2px 0 0;
  white-space:nowrap;
}

.stats{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
  min-width:0;
  font-size:clamp(10px,1.8vw,11px);
}

.stats span{
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 9px;
  white-space:nowrap;
}


/* =========================
   PLAY AREA
   ========================= */

.play-area{
  position:relative;
  min-height:230px;
  padding:12px clamp(11px,2.4vw,18px) 10px;
  display:flex;
  flex-direction:column;
  gap:9px;
  background:#fff;
}

.game-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:26px;
}

.game-info p{
  margin:0;
  min-width:0;
  font-size:clamp(12px,2vw,13px);
  line-height:1.35;
  color:var(--muted);
}

.target-wrap{
  flex:0 0 auto;
  font-size:clamp(11px,1.8vw,12px);
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}

.target{
  display:inline-block;
  width:clamp(22px,4.5vw,24px);
  height:clamp(22px,4.5vw,24px);
  border-radius:50%;
  border:3px solid #fff;
  box-shadow:
    0 0 0 1px #8796aa,
    0 2px 7px rgba(0,0,0,.18);
}


/* =========================
   GRID
   ========================= */

.grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(6px,1.25vw,8px);
  min-height:78px;
}

.color-btn{
  width:100%;
  min-width:0;
  height:clamp(58px,10vw,78px);
  border:0;
  border-radius:clamp(8px,1.8vw,10px);
  cursor:pointer;
  box-shadow:
    inset 0 -5px 0 rgba(0,0,0,.14),
    0 2px 5px rgba(0,0,0,.08);
  transition:transform .08s,filter .08s;
}

@media (hover:hover) and (pointer:fine){

  .color-btn:hover{
    transform:translateY(-2px);
    filter:brightness(1.04);
  }

  .icon-btn:hover:not(:disabled){
    background:#eef4ff;
    border-color:#9eb5d8;
  }

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

.color-btn:active{
  transform:scale(.96);
}

.color-btn:disabled{
  cursor:not-allowed;
  filter:grayscale(.3);
  opacity:.72;
}


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

.controls{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}

.icon-btn{
  min-height:34px;
  border:1px solid var(--line);
  border-radius:7px;
  padding:7px 10px;
  background:#f8faff;
  color:var(--text);
  font-size:clamp(10px,1.8vw,11px);
  cursor:pointer;
}

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


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

.message{
  min-height:16px;
  font-size:clamp(10px,1.8vw,11px);
  line-height:1.35;
  font-weight:700;
  color:var(--primary);
}

.message.good{
  color:var(--success);
}

.message.bad{
  color:var(--danger);
}


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

.overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  background:rgba(255,255,255,.91);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

.overlay.hidden{
  display:none;
}

.overlay-panel{
  width:min(100%,390px);
  text-align:center;
}

.overlay-icon{
  font-size:clamp(27px,7vw,30px);
  line-height:1;
  color:var(--primary);
  text-shadow:
    20px 0 #ffb020,
    -20px 0 #28c76f;
}

.overlay h2{
  font-size:clamp(19px,4.5vw,21px);
  margin:10px 0 5px;
}

.overlay p{
  margin:0 0 12px;
  font-size:clamp(12px,2.5vw,13px);
  line-height:1.45;
  color:var(--muted);
}

.primary-btn{
  min-height:44px;
  border:0;
  border-radius:999px;
  padding:11px 24px;
  background:var(--primary);
  color:#fff;
  font-size:clamp(13px,2.6vw,14px);
  font-weight:800;
  cursor:pointer;
  box-shadow:0 7px 18px rgba(36,104,216,.25);
}


/* =====================================
   ADSENSE BANNER
   ===================================== */

.ad-section{
  position:relative;

  width:100%;
  max-width:100%;
  min-width:0;

  margin:0;

  padding:18px 10px 10px;

  min-height:112px;

  background:#f7f9fc;

  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);

  display:block;

  /*
   * Chỉ giới hạn container ngoài.
   * Không ép kích thước iframe Google.
   */
  overflow:hidden;
}


/* chữ ADVERTISEMENT */

.ad-label{
  position:absolute;

  top:4px;
  left:0;
  right:0;

  width:100%;

  text-align:center;

  font-size:8px;
  letter-spacing:1.2px;

  color:#8995a5;

  pointer-events:none;
}


/* vùng chứa quảng cáo */

.ad-container{
  position:relative;

  width:100%;
  max-width:100%;
  min-width:0;

  min-height:90px;

  margin:0 auto;
  padding:0;

  background:transparent;

  text-align:center;

  overflow:hidden;
}


/*
 * Thẻ INS của AdSense
 *
 * Không dùng width:100%!important
 * để tránh thay đổi kích thước mà Google
 * đã tính cho quảng cáo.
 */

.ad-unit,
.ad-container .adsbygoogle{
  display:block;

  max-width:100%;

  min-width:0;

  margin-left:auto;
  margin-right:auto;
}


/*
 * QUAN TRỌNG:
 *
 * Không đặt:
 *
 * width:100%
 * max-width:100%
 *
 * cho iframe của Google.
 *
 * Google sẽ tự tính kích thước iframe.
 */

.ad-container iframe{
  display:block;
  margin-left:auto !important;
  margin-right:auto !important;
}


/* =========================
   AD PLACEHOLDER
   ========================= */

.ad-placeholder{
  position:absolute;
  inset:0;
  z-index:1;

  display:flex;
  flex-direction:column;

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

  text-align:center;

  color:#7a8798;

  font-size:11px;

  gap:4px;

  padding:8px;

  pointer-events:none;
}

.ad-placeholder strong{
  font-size:13px;
  color:#536277;
}


/* =====================================
   TABLET
   ===================================== */

@media(max-width:740px){

  .game-shell{
    width:100%;
    max-width:100%;
    border-radius:0;
  }

  .ad-section{
    width:100%;
    max-width:100%;

    padding-left:0;
    padding-right:0;
  }

  .ad-container{
    width:100%;
    max-width:100%;
  }

  .topbar{
    align-items:flex-start;
  }

  .stats{
    max-width:52%;
  }

  .play-area{
    min-height:270px;
  }

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

  .color-btn{
    height:clamp(58px,18vw,76px);
  }
}


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

@media(max-width:520px){

  .ad-section{
    min-height:70px;

    padding-top:16px;
    padding-bottom:6px;

    padding-left:0;
    padding-right:0;
  }

  .ad-container{
    min-height:50px;
  }

  .topbar{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  .brand{
    justify-content:center;
  }

  .stats{
    max-width:none;
    justify-content:center;
  }

  .stats span{
    flex:1 1 85px;
    text-align:center;
  }

  .game-info{
    align-items:flex-start;
  }

  .controls{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .icon-btn{
    width:100%;
    padding:8px 6px;
  }
}


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

@media(max-width:380px){

  .topbar,
  .play-area{
    padding-left:8px;
    padding-right:8px;
  }

  .brand-dot{
    display:none;
  }

  .stats{
    gap:4px;
  }

  .stats span{
    padding:5px 6px;
  }

  .game-info{
    gap:7px;
  }

  .target-wrap{
    gap:5px;
  }

  .controls{
    gap:5px;
  }
}


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

@media(orientation:landscape) and (max-height:520px){

  .topbar{
    min-height:54px;
    padding-top:7px;
    padding-bottom:7px;
  }

  .play-area{
    min-height:205px;
    padding-top:8px;
    padding-bottom:7px;
    gap:6px;
  }

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

  .color-btn{
    height:clamp(48px,13vh,62px);
  }

  .ad-section{
    min-height:90px;
    padding-top:13px;
  }

  .ad-container{
    min-height:70px;
  }
}


/* =====================================
   REDUCED MOTION
   ===================================== */

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

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}