/* Mobile-first rework: simplified visuals, bigger tap targets, smoother layout */

/* Mobile CSS variables kept consistent with main theme */
@media (max-width: 767px) {
  :root{
    --bg:#1A1A1E;
    --glass:rgba(255,255,255,0.06);
    --glass-strong:rgba(255,255,255,0.12);
    --text:#e6e9f0;
    --muted:#b9c1d6;
    --accent:#ffd166;
    --accent-2:#7bdff2;
    --shadow:0 14px 36px rgba(0,0,0,.5);
    --modal-controls-top-offset:50px;
    --modal-controls-right-offset:18px;
    --modal-controls-left-offset:auto;
    --modal-zoom-offset:62px;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:var(--bg);
  -webkit-tap-highlight-color:transparent;
}

/* Minimal background for performance */
.bg-glow{display:none}

.header{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:16px; border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(26,26,30,.7), rgba(26,26,30,.3));
}
.logo{font-weight:800; display:flex; align-items:center; gap:8px}
.logo-icon{width:26px; height:26px}
.header-buttons{display:flex; gap:10px}
.cta{
  color:#111; background:linear-gradient(135deg,var(--accent),#ffd98e);
  border:none; padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:800;
  display:flex; align-items:center; gap:6px;
}
.is-hidden{display:none !important;}
.cta-icon{width:18px; height:18px; object-fit:contain}

.container{max-width:640px; margin:0 auto; padding:16px}
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px; box-shadow:var(--shadow); backdrop-filter:blur(14px);
}
.hero{padding:16px}
.adblock-overlay{position:fixed; inset:0; background:rgba(0,0,0,.8); backdrop-filter:blur(16px); display:flex; align-items:center; justify-content:center; padding:16px; z-index:9999}
.adblock-overlay.hidden{display:none}
.adblock-card{padding:20px; width:100%; max-width:420px; text-align:center; border-radius:18px; display:flex; flex-direction:column; gap:14px; box-shadow:0 16px 40px rgba(0,0,0,.5)}
.adblock-title{margin:0; font-size:20px; font-weight:800; color:var(--accent)}
.adblock-body{margin:0; font-size:14px; color:var(--text)}
.adblock-steps{margin:0; padding-left:22px; text-align:left; color:var(--muted); line-height:1.45; font-size:13px}
.adblock-button{border:none; background:linear-gradient(135deg,var(--accent),#ffd98e); color:#111; font-weight:700; border-radius:12px; padding:12px 16px; cursor:pointer; transition:.2s all}
.adblock-button:active{transform:scale(.98)}
.hero h1{
  margin:8px 0 6px; text-align:center; font-size:22px; line-height:1.25; font-weight:900; letter-spacing:-0.01em;
}
.hero h1::after{content:""; display:block; height:2px; width:160px; margin:10px auto 0; background:linear-gradient(90deg,var(--accent),#ffd98e); border-radius:9999px; opacity:.9}

.mode-selector{display:flex; gap:8px; padding:6px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); justify-content:center; margin:14px 0 10px}
.mode-btn{flex:1; padding:12px 10px; border:none; border-radius:10px; font-weight:800; font-size:13px; background:transparent; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; transition:all .3s ease; text-align:center; line-height:1.1}
.mode-btn:hover{background:rgba(255,255,255,.08); color:var(--text)}
.mode-btn.active{background:linear-gradient(135deg,var(--accent),#ffd98e); color:#111; box-shadow:0 4px 12px rgba(255,209,102,.32)}
.mode-btn.active:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(255,209,102,.4)}
.mode-icon{width:26px; height:26px; object-fit:contain; filter:brightness(0.8) contrast(1.1); transition:all .3s ease}
.mode-btn:hover .mode-icon{filter:brightness(1) contrast(1.1); transform:scale(1.05)}
.mode-btn.active .mode-icon{filter:brightness(1.1) contrast(1.2) saturate(1.2); transform:scale(1.08)}

/* Mode button text styling for proper line breaks */
.mode-btn{white-space:pre-line}

.dropzone{margin:14px 0; border:2px dashed rgba(255,255,255,.15); border-radius:14px; position:relative; min-height:120px; display:grid; place-items:center; background:rgba(255,255,255,.03); transition:.2s border-color, .2s transform, .2s background}
.dropzone:hover{border-color:var(--accent); background:rgba(255,209,102,.04)}
.dropzone.drag{border-color:var(--accent); transform:scale(1.01); background:rgba(255,209,102,.06)}
.dropzone input{position:absolute; inset:0; opacity:0}
.dz-content{display:grid; place-items:center; gap:4px; text-align:center}
.dz-icon{display:flex; align-items:center; justify-content:center; opacity:.95}
.upload-icon{filter:drop-shadow(0 3px 12px rgba(255,209,102,.3)); transition:all .3s cubic-bezier(0.25,0.46,0.45,0.94)}

/* Upload icon animations */
.upload-bg{animation:uploadPulse 3s ease-in-out infinite}
@keyframes uploadPulse{0%,100%{opacity:.6; transform:scale(1)} 50%{opacity:.9; transform:scale(1.05)}}

.upload-arrow{animation:uploadFloat 2.5s ease-in-out infinite}
@keyframes uploadFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}

.upload-base{animation:basePulse 2.2s ease-in-out infinite}
@keyframes basePulse{0%,100%{opacity:.7} 50%{opacity:.9}}

/* Hover and drag states */
.dropzone:hover .upload-icon{filter:drop-shadow(0 8px 24px rgba(255,209,102,.45))}
.dropzone.drag .upload-icon{filter:drop-shadow(0 12px 32px rgba(255,209,102,.6))}
.dropzone.drag .upload-bg{opacity:1}

.dz-title{font-weight:900; font-size:15px}
.dz-sub{color:var(--muted); font-size:13px}

.button-group{display:flex; gap:12px; margin-top:14px; justify-content:center}
.primary{min-width:140px; max-width:180px; border:none; border-radius:12px; padding:14px 20px; font-weight:900; background:linear-gradient(135deg,#ffe08f,var(--accent)); color:#111; cursor:pointer; transition:.2s all; text-align:center}
.primary:hover:not(:disabled){transform:translateY(-1px)}
.primary:disabled{opacity:.6; cursor:not-allowed}
.secondary{min-width:100px; max-width:140px; border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:14px 20px; font-weight:800; background:var(--glass); color:var(--text); cursor:pointer; backdrop-filter:blur(12px); transition:.2s all; text-align:center}
.secondary:hover:not(:disabled){background:var(--glass-strong); transform:translateY(-1px)}
.secondary:disabled{opacity:.5; cursor:not-allowed}

/* Preview grid */
.preview{margin:12px 0; display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.preview.hidden{display:none}
.preview-item{position:relative; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.2)}
.preview-item img{width:96px; height:96px; object-fit:cover; display:block; cursor:pointer; transition:all 0.2s ease}
.preview-item img:hover{transform:scale(1.05); box-shadow:0 4px 12px rgba(255,209,102,0.3)}
.preview-item .remove{position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.8); color:#fff; border:1px solid rgba(255,255,255,.3); font-size:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s all; z-index:3}
.preview-item .remove:hover{background:rgba(255,0,0,.8); transform:scale(1.1)}

/* Add more button styling */
.preview-item.add-more{border:2px dashed rgba(255,255,255,.28); background:rgba(255,255,255,.05); cursor:pointer; transition:.2s all}
.preview-item.add-more:hover{background:rgba(255,209,102,.1); border-color:var(--accent)}
.preview-item.add-more.drag-hover{background:rgba(255,209,102,.15); border-color:var(--accent)}
.add-more-content{width:96px; height:96px; display:flex; align-items:center; justify-content:center; gap:8px; flex-direction:column}

/* Beautiful replace icon with glow */
.simple-replace-icon{width:22px; height:22px; background:var(--accent); color:#111; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; box-shadow:0 2px 8px rgba(255,209,102,.4); transition:all 0.3s ease; line-height:1; opacity:0.9}
.preview-item.add-more:hover .simple-replace-icon{background:linear-gradient(135deg, var(--accent), #ffd98e); transform:scale(1.15) rotate(180deg); box-shadow:0 4px 12px rgba(255,209,102,.6), 0 0 20px rgba(255,209,102,.3); opacity:1}

/* Floating plus icon for multiple mode */
.floating-plus{width:22px; height:22px; background:var(--accent); color:#111; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; box-shadow:0 2px 8px rgba(255,209,102,.4); transition:all 0.3s ease; line-height:1}

/* Hover animations for floating plus */
.preview-item.add-more:hover .floating-plus{background:linear-gradient(135deg, var(--accent), #ffd98e); box-shadow:0 6px 20px rgba(255,209,102,.5), 0 0 30px rgba(255,209,102,.4); animation:plusBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55)}

@keyframes plusBounce{0%{transform:translateY(0) scale(1)} 50%{transform:translateY(-6px) scale(1.1)} 100%{transform:translateY(0) scale(1)}}

@keyframes float{0%, 100%{transform:translateY(0px) scale(1)} 50%{transform:translateY(-2px) scale(1.05)}}

@keyframes bounce{0%, 100%{transform:translateY(0px) scale(1.1)} 25%{transform:translateY(-3px) scale(1.15)} 75%{transform:translateY(-1px) scale(1.12)}}

.add-text-stack{display:flex; flex-direction:column; gap:2px; align-items:center}
.add-text-line{font-size:10px; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.5px; transition:all 0.3s ease}
.preview-item.add-more:hover .add-text-line{color:var(--accent)}

/* Loading overlay for upload previews */
.preview-item .overlay{position:absolute; inset:0; background:rgba(0,0,0,.7); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2; gap:4px; padding:8px; text-align:center}
.preview-item .overlay.error{background:rgba(139,0,0,.85)}
.preview-item .overlay.error .retry-btn, .preview-item .overlay.error .retry-btn:focus{margin-top:6px}

/* Spinner with timer container */
.spinner-container{position:relative; display:flex; align-items:center; justify-content:center}
.spinner{width:32px; height:32px; border:2px solid rgba(255,255,255,.2); border-top:2px solid var(--accent); border-radius:50%; animation:spin 1.5s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)}}

/* Timer inside spinner */
.spinner-timer{position:absolute; font-size:8px; font-weight:700; color:var(--accent); text-shadow:0 0 2px rgba(0,0,0,.8); pointer-events:none; z-index:3}
.processing-text{font-size:9px; color:var(--muted); font-weight:500; margin-top:2px}
.retry-btn{background:var(--accent); color:#111; border:none; padding:4px 8px; border-radius:6px; font-size:10px; cursor:pointer; margin-top:4px}
.retry-btn:hover{background:#ffd98e}

.status{margin-top:10px; color:var(--muted); font-size:13px}
.status.warning{color:var(--accent); font-weight:800}

/* Results */
.results{margin-top:16px; padding:14px}
.results-head{display:flex; align-items:center; justify-content:center; margin-bottom:10px; width:100%}
.results-head.single-mode{justify-content:center}
.single-match-header{display:flex; align-items:center; justify-content:center; text-align:center; max-width:100%}
.single-match-header h2{margin:0; font-size:16px; font-weight:900; color:var(--text); text-align:center; line-height:1.3}
.results h2{margin:0; font-size:18px}

.carousel{display:grid; grid-template-columns:1fr; gap:10px}
.nav{display:none}
.viewport{overflow:hidden; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.15); min-height:auto}
.track{display:flex; transition:transform .35s cubic-bezier(0.25,0.46,0.45,0.94); width:100%}
.card{min-width:100%; display:flex; flex-direction:column; padding:12px 12px 4px 12px; gap:6px; align-items:center; text-align:center}
.image-container{width:100%; position:relative}
.card img{width:100%; height:auto; max-height:260px; object-fit:contain; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.35); cursor:pointer; transition:all 0.3s ease}
.card img:hover{transform:scale(1.02); box-shadow:0 12px 32px rgba(0,0,0,0.4)}
.content{display:flex; flex-direction:column; gap:4px; align-items:center; padding:0 8px}
.treasure-text{font-size:18px; font-weight:normal !important; color:var(--accent); line-height:1.4}
#count{font-size:14px; font-weight:800; color:var(--muted)}

.hidden{display:none}

.footer{padding:24px 16px; text-align:center; color:var(--muted)}
.kofi-btn{display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,var(--accent),#ffd98e); color:#111; padding:10px 16px; border-radius:12px; text-decoration:none; font-weight:800; transition:.2s all; margin-bottom:16px}
.kofi-btn:hover{transform:translateY(-1px)}
.kofi-icon{width:22px; height:22px; object-fit:contain}
.disclaimer{font-size:11px; color:var(--muted); opacity:.7; margin:16px auto 12px; line-height:1.5; padding:0 8px}
.credits{margin-top:8px}

/* Modal simplified for mobile */
.image-modal{position:fixed; inset:0; background:rgba(0,0,0,.4); backdrop-filter:blur(14px); display:flex; align-items:center; justify-content:center; z-index:1000; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility 0s linear .2s}
.image-modal.active{opacity:1; visibility:visible; transition:opacity .2s ease, visibility 0s}
.modal-content{position:relative; max-width:96vw; max-height:90vh; width:auto; height:auto; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)); border:1px solid rgba(255,255,255,.16); overflow:hidden}
.modal-image-container{position:relative; width:100%; height:100%; overflow:hidden; cursor:grab; display:flex; align-items:center; justify-content:center}
.modal-image-container.dragging{cursor:grabbing}
.modal-image{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; transition:transform .15s ease-out; user-select:none; pointer-events:none; display:block}
.modal-controls{
  position:fixed;
  top:var(--modal-controls-top-offset,12px);
  right:var(--modal-controls-right-offset,12px);
  left:var(--modal-controls-left-offset,auto);
  display:flex;
  gap:8px;
  z-index:1001;
}
.modal-btn{width:40px; height:40px; border-radius:12px; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.6); backdrop-filter:blur(8px); color:#fff; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s ease; box-shadow:0 6px 16px rgba(0,0,0,0.4); outline:none}
.modal-btn:hover{background:rgba(255,255,255,0.15); transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,0.4)}
.modal-btn.close{background:linear-gradient(135deg, rgba(255,99,99,0.9), rgba(220,38,38,0.9)); border-color:rgba(255,255,255,0.3)}
.modal-btn.close:hover{background:linear-gradient(135deg, rgba(255,99,99,0.95), rgba(220,38,38,0.95))}
.modal-btn:focus-visible{outline:2px solid rgba(255,255,255,0.5); outline-offset:2px}
.modal-btn:focus{background:rgba(0,0,0,0.6); transform:none; box-shadow:0 6px 16px rgba(0,0,0,0.4)}
.modal-btn.close:focus{background:linear-gradient(135deg, rgba(255,99,99,0.9), rgba(220,38,38,0.9))}
.modal-btn:active{background:rgba(0,0,0,0.5); transform:scale(0.98)}
.modal-btn.close:active{background:linear-gradient(135deg, rgba(255,99,99,0.85), rgba(220,38,38,0.85))}
.zoom-controls{position:fixed; bottom:var(--modal-zoom-offset,12px); left:50%; transform:translateX(-50%); display:flex; gap:8px; background:rgba(0,0,0,.7); backdrop-filter:blur(8px); border-radius:14px; padding:10px 14px; border:1px solid rgba(255,255,255,.3); z-index:1001; box-shadow:0 6px 16px rgba(0,0,0,0.4)}
.zoom-btn{width:32px; height:32px; border-radius:8px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.1); color:#fff; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s ease; outline:none}
.zoom-btn:hover{background:rgba(255,255,255,0.2); transform:scale(1.05)}
.zoom-btn:focus-visible{outline:2px solid rgba(255,255,255,0.5); outline-offset:2px}
.zoom-btn:focus{background:rgba(255,255,255,0.1); transform:none}
.zoom-btn:active{background:rgba(255,255,255,0.15); transform:scale(0.98)}
.zoom-btn:disabled{opacity:0.4; cursor:not-allowed}
.zoom-level{display:flex; align-items:center; padding:0 8px; font-size:12px; color:var(--muted); font-weight:800; min-width:50px; justify-content:center}

/* Tablet tweaks */
@media (min-width: 480px){
  .hero h1{font-size:24px}
  .card img{max-height:300px}
}