/* ============================================================
   ant-smash.css — Pro Ant Smasher
   Mode select / Start / Game / GameOver = alag alag normal divs
   Sirf #gameArea canvas ka height viewport se calculate hoga
   tools.dotiam.com
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }

:root {
    --green:  #16a34a;
    --green2: #064e3b;
    --yellow: #fbbf24;
    --red:    #dc2626;
    --purple: #7c3aed;
    --orange: #ea580c;
}

/* ═══════ TOOL HEADER ═══════ */
.tool-header {
    background: linear-gradient(135deg, #064e3b 0%, #16a34a 100%);
    color: #fff; padding: 44px 20px;
    text-align: center; position: relative; overflow: hidden;
}
.tool-header::before {
    content:'🐜🕷️🪳🐞'; position:absolute;
    font-size:140px; opacity:.06; top:-20px; right:-20px; line-height:1;
}
.tool-header-content { max-width:760px; margin:0 auto; position:relative; z-index:1; }
.tool-icon-large { font-size:60px; margin-bottom:12px; display:inline-block; animation:iconBounce 1.5s ease-in-out infinite; }
@keyframes iconBounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
.tool-header h1 { font-size:36px; font-weight:900; margin-bottom:8px; }
.tool-subtitle  { font-size:16px; opacity:.9; margin-bottom:14px; }
.tool-meta { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; font-size:13px; }
.meta-separator { opacity:.4; }

.breadcrumb { padding:12px 0; font-size:13px; color:#888; }
.breadcrumb a { color:#888; text-decoration:none; }
.breadcrumb a:hover { color:var(--green); }
.breadcrumb .separator { margin:0 8px; color:#ccc; }
.breadcrumb .current { color:#333; font-weight:600; }

/* ═══════ TOOL CONTENT ═══════ */
.tool-content { background:#f0fdf4; padding:20px 0 30px; }

/* ═══════ WRAP ═══════ */
.antgame-wrap { max-width:900px; margin:0 auto; padding:0 14px; }

/* ═══════ ALL SECTIONS — normal div flow ═══════ */
.ant-section {
    background:#1a3a1a;
    border-radius:16px;
    margin-bottom:14px;
    overflow:hidden;
}

/* ═══════ MODE SELECT SCREEN — normal height, no scroll issue ═══════ */
#modeScreen { padding:24px 16px 20px; }

.mode-header { text-align:center; margin-bottom:16px; }
.mode-emoji  { font-size:50px; animation:iconBounce 1.5s ease-in-out infinite; }
.mode-title  { font-size:1.8rem; font-weight:900; color:#fff; margin:6px 0 2px; }
.mode-sub    { font-size:.82rem; color:rgba(255,255,255,.55); margin-bottom:12px; }

.fs-btn-outside {
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.25);
    border-radius:20px; color:#fff;
    font-size:.78rem; font-weight:700;
    padding:6px 18px; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.fs-btn-outside:hover { background:rgba(255,255,255,.22); }

.mode-cards { display:flex; flex-direction:column; gap:8px; max-width:420px; margin:0 auto 12px; }

.mode-card {
    background:rgba(255,255,255,.08);
    border:2px solid rgba(255,255,255,.14);
    border-radius:12px; padding:14px 16px;
    cursor:pointer; transition:all .15s;
    display:flex; align-items:center; gap:12px;
    -webkit-tap-highlight-color:transparent;
}
.mode-card:hover, .mode-card:active {
    background:rgba(255,255,255,.16);
    border-color:var(--yellow);
    transform:scale(1.01);
}
.mode-card-icon  { font-size:2rem; flex-shrink:0; }
.mode-card-info  { flex:1; }
.mode-card-name  { font-size:.95rem; font-weight:800; color:#fff; }
.mode-card-desc  { font-size:.72rem; color:rgba(255,255,255,.55); margin-top:2px; }
.mode-card-badge {
    font-size:.65rem; font-weight:800;
    padding:4px 10px; border-radius:10px; white-space:nowrap; flex-shrink:0;
}
.badge-classic { background:rgba(22,163,74,.3); color:#6ee7b7; }
.badge-time    { background:rgba(234,88,12,.3);  color:#fdba74; }
.badge-target  { background:rgba(124,58,237,.3); color:#c4b5fd; }

.bug-preview {
    text-align:center; font-size:1.6rem;
    letter-spacing:6px; padding-top:8px;
    opacity:.7;
}

/* ═══════ START SCREEN ═══════ */
#startScreen { padding:0; }
.start-inner {
    display:flex; flex-direction:column;
    align-items:center; padding:24px 16px 20px;
    text-align:center;
}
.start-mode-badge {
    font-size:.78rem; font-weight:800;
    padding:4px 16px; border-radius:14px;
    margin-bottom:10px; display:inline-block;
}
.start-title { font-size:1.5rem; font-weight:900; color:#fff; margin-bottom:4px; }
.start-desc  { font-size:.8rem; color:rgba(255,255,255,.6); margin-bottom:18px; max-width:300px; }

.bug-legend {
    display:flex; gap:6px; flex-wrap:wrap;
    justify-content:center; margin-bottom:18px; max-width:340px;
}
.bug-legend-item {
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:8px; padding:6px 10px;
    font-size:.7rem; text-align:center; min-width:54px;
}
.bug-emoji { font-size:1.3rem; display:block; margin-bottom:2px; }
.bug-pts   { font-weight:800; color:#fbbf24; font-size:.74rem; }
.bug-name  { color:rgba(255,255,255,.45); font-size:.58rem; }

#startBtn {
    background:linear-gradient(135deg, #16a34a, #15803d);
    color:#fff; border:none; border-radius:50px;
    padding:14px 44px; font-size:1.1rem; font-weight:900;
    cursor:pointer; box-shadow:0 5px 20px rgba(22,163,74,.45);
    -webkit-tap-highlight-color:transparent;
    animation:pulseCTA 2s ease-in-out infinite;
}
@keyframes pulseCTA {
    0%,100%{box-shadow:0 5px 20px rgba(22,163,74,.4)}
    50%{box-shadow:0 8px 30px rgba(22,163,74,.7)}
}
.back-btn {
    margin-top:12px; background:transparent; border:none;
    color:rgba(255,255,255,.4); font-size:.76rem;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.back-btn:hover { color:rgba(255,255,255,.7); }

/* ═══════ GAME CONTAINER — HUD + CANVAS ═══════ */
#gameContainer { padding:0; display:flex; flex-direction:column; }

/* HUD */
#gameHUD {
    display:flex; align-items:center;
    justify-content:space-between; gap:6px;
    padding:8px 12px;
    background:linear-gradient(135deg, #052e16, #064e3b);
    flex-shrink:0; flex-wrap:nowrap;
}
.hud-item { display:flex; flex-direction:column; align-items:center; gap:0; }
.hud-label {
    font-size:.52rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em;
    color:rgba(255,255,255,.45); line-height:1;
}
.hud-value { font-size:1rem; font-weight:900; color:#fff; line-height:1.2; font-variant-numeric:tabular-nums; }
#hudScore { color:#fbbf24; font-size:1.2rem; }
#hudLives { font-size:.8rem; }
#hudTimer { color:#6ee7b7; font-size:1rem; }

#pauseBtn, #fsBtn {
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.2);
    border-radius:6px; color:#fff;
    font-size:.8rem; font-weight:700;
    padding:5px 9px; cursor:pointer;
    -webkit-tap-highlight-color:transparent; flex-shrink:0;
}
#pauseBtn:hover, #fsBtn:hover { background:rgba(255,255,255,.25); }

/* ═══════ GAME AREA — canvas only, height set by JS ═══════ */
#gameArea {
    position:relative;
    width:100%;
    overflow:hidden;
    cursor:crosshair;
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;
}

#antCanvas {
    display:block;
    width:100%;
    touch-action:none;
    /* height set by JS directly on canvas attribute */
}

/* Shake */
#gameArea.shake { animation:screenShake .3s ease; }
@keyframes screenShake {
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-6px)}
    75%{transform:translateX(6px)}
}

/* Level banner */
#levelBanner {
    position:absolute; top:22%; left:50%;
    transform:translateX(-50%) scale(0);
    background:linear-gradient(135deg, #fbbf24, #f59e0b);
    color:#1a0a00; font-size:1.4rem; font-weight:900;
    padding:10px 28px; border-radius:40px;
    box-shadow:0 6px 24px rgba(251,191,36,.5);
    opacity:0; pointer-events:none; z-index:50; white-space:nowrap;
    transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
#levelBanner.show { opacity:1; transform:translateX(-50%) scale(1); }

/* ═══════ GAME OVER ═══════ */
#gameOverScreen { padding:0; }
.go-inner {
    display:flex; flex-direction:column;
    align-items:center; padding:28px 20px 24px;
    text-align:center;
}
.go-emoji { font-size:52px; margin-bottom:6px; }
.go-title { font-size:1.8rem; font-weight:900; color:#fff; margin-bottom:4px; }
.go-result { font-size:.85rem; color:rgba(255,255,255,.55); margin-bottom:14px; }
.go-stats {
    display:grid; grid-template-columns:1fr 1fr;
    gap:8px; margin-bottom:16px; width:100%; max-width:300px;
}
.go-stat {
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px; padding:10px;
}
.go-stat-val   { font-size:1.5rem; font-weight:900; color:#fbbf24; }
.go-stat-label { font-size:.6rem; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }
.go-btns { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }

#restartBtn {
    background:linear-gradient(135deg, #fbbf24, #f59e0b);
    color:#1a0a00; border:none; border-radius:50px;
    padding:12px 28px; font-size:1rem; font-weight:900;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
}
#changeModeBtn {
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.2);
    color:#fff; border-radius:50px;
    padding:12px 18px; font-size:.82rem; font-weight:700;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
}

/* ═══════ FLOATING TEXT ═══════ */
.ant-float-text {
    position:fixed; font-size:1rem; font-weight:900;
    pointer-events:none; z-index:9999;
    text-shadow:0 1px 4px rgba(0,0,0,.5);
    animation:floatUp .9s ease-out forwards;
}
.ant-combo-text {
    position:fixed; font-size:.95rem; font-weight:900;
    color:#fbbf24; pointer-events:none; z-index:9999;
    text-shadow:0 2px 6px rgba(0,0,0,.5);
    white-space:nowrap; animation:floatUp 1s ease-out forwards;
}
@keyframes floatUp {
    0%  { opacity:1; transform:translateY(0) scale(1.2); }
    60% { opacity:1; transform:translateY(-28px) scale(1); }
    100%{ opacity:0; transform:translateY(-48px) scale(.8); }
}

/* ═══════ FULLSCREEN ═══════ */
:fullscreen #gameContainer,
:-webkit-full-screen #gameContainer,
:-moz-full-screen #gameContainer {
    width:100vw; height:100vh; border-radius:0;
}

/* ═══════ HOW TO PLAY ═══════ */
.how-to-play { background:#fff; border-radius:14px; padding:18px; border:1.5px solid #d1fae5; }
.how-to-play h3 { font-size:.95rem; font-weight:800; color:#1a2e1a; margin-bottom:12px; }
.htp-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:8px; }
.htp-item { display:flex; align-items:flex-start; gap:8px; background:#f0fdf4; border-radius:8px; padding:8px 10px; }
.htp-icon { font-size:1.2rem; flex-shrink:0; }
.htp-text { font-size:.7rem; color:#555; line-height:1.4; }
.htp-text strong { color:#1a2e1a; display:block; margin-bottom:1px; }

/* ═══════ SEO ═══════ */
.seo-content { padding:40px 20px; background:#fff; }
.content-article { max-width:860px; margin:0 auto; line-height:1.8; }
.content-article h2 { font-size:22px; font-weight:800; margin:28px 0 10px; color:#222; }
.content-article h2:first-child { margin-top:0; }
.content-article p  { margin-bottom:12px; color:#555; font-size:14px; }

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 599px) {
    .tool-header h1  { font-size:24px; }
    .tool-icon-large { font-size:48px; }
    .antgame-wrap    { padding:0 8px; }
    .mode-card       { padding:11px 12px; gap:10px; }
    .mode-card-icon  { font-size:1.7rem; }
    .mode-card-name  { font-size:.88rem; }
    .mode-card-desc  { font-size:.66rem; }
    .ant-section     { border-radius:10px; }
    .htp-grid        { grid-template-columns:1fr 1fr; }
}
@media (min-width:600px) and (max-width:1023px) {
    .antgame-wrap { padding:0 16px; }
}

/* ═══════ MODE SETTING ROW (time/target select) ═══════ */
.mode-setting-row {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    width: 100%;
    max-width: 340px;
}
.mode-setting-label {
    font-size: .76rem;
    font-weight: 700;
    color: rgba(255,255,255,.7);
}
.mode-setting-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.setting-btn {
    background: rgba(255,255,255,.08);
    border: 1.5px solid rgba(255,255,255,.18);
    border-radius: 20px;
    color: rgba(255,255,255,.7);
    font-size: .75rem;
    font-weight: 700;
    padding: 5px 14px;
    cursor: pointer;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}
.setting-btn:hover  { border-color: var(--yellow); color: var(--yellow); }
.setting-btn.active {
    background: var(--yellow);
    border-color: var(--yellow);
    color: #1a0a00;
}

/* ═══════ LEADERBOARD (start screen) ═══════ */
.start-lb {
    width: 100%;
    max-width: 300px;
    margin-bottom: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    padding: 10px 12px;
}
.start-lb-title {
    font-size: .72rem;
    font-weight: 700;
    color: var(--yellow);
    margin-bottom: 8px;
    text-align: center;
}
.lb-list { display: flex; flex-direction: column; gap: 5px; }
.lb-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
}
.lb-rank  { font-size: .9rem; flex-shrink: 0; }
.lb-score { font-weight: 800; color: #fff; flex: 1; }
.lb-date  { color: rgba(255,255,255,.4); font-size: .64rem; }
.lb-empty { font-size: .7rem; color: rgba(255,255,255,.35); text-align: center; padding: 6px 0; }

/* ═══════ LEADERBOARD (game over) ═══════ */
.go-leaderboard {
    width: 100%;
    max-width: 300px;
    margin-bottom: 14px;
}
.go-lb-title {
    font-size: .76rem;
    font-weight: 700;
    color: var(--yellow);
    margin-bottom: 6px;
    text-align: center;
}
.go-lb-row {
    display: flex;
    gap: 10px;
    font-size: .72rem;
    color: rgba(255,255,255,.8);
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.go-lb-row span:first-child { flex-shrink: 0; }
.go-lb-row span:nth-child(2) { flex: 1; font-weight: 700; color: #fff; }
.go-lb-row span:last-child   { color: rgba(255,255,255,.4); font-size: .64rem; }

/* ═══════ HUD restart/home buttons ═══════ */
#restartHudBtn, #homeHudBtn {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 6px; color: #fff;
    font-size: .85rem;
    padding: 5px 8px; cursor: pointer;
    -webkit-tap-highlight-color: transparent; flex-shrink: 0;
    transition: background .15s;
}
#restartHudBtn:hover, #homeHudBtn:hover { background: rgba(255,255,255,.25); }

/* ═══════ GO buttons 3 item ═══════ */
#homeBtn {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff; border-radius: 50px;
    padding: 12px 18px; font-size: .82rem; font-weight: 700;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}