/* ============================================================
   SUPREME PRO — Tool & Game specific styles
   ============================================================ */

/* Crop */
.crop-wrap{position:relative;max-width:100%;overflow:hidden;border-radius:14px;background:#00000010;touch-action:none;}
.crop-wrap img{width:100%;display:block;user-select:none;-webkit-user-drag:none;}
.crop-box{position:absolute;border:2px solid var(--accent);box-shadow:0 0 0 4000px rgba(0,0,0,0.35);cursor:move;}
.crop-handle{position:absolute;width:14px;height:14px;background:#fff;border:2px solid var(--accent);border-radius:50%;}
.crop-handle.br{right:-7px;bottom:-7px;cursor:nwse-resize;}

/* Filters preview */
.filter-canvas-wrap{text-align:center;}
.filter-canvas-wrap canvas{max-width:100%;border-radius:14px;box-shadow:var(--shadow-soft);}

/* JSON formatter */
.code-area{
  width:100%;min-height:220px;font-family:'SFMono-Regular',Menlo,Consolas,monospace;font-size:.85rem;
  padding:16px;border-radius:14px;border:1px solid var(--surface-border);background:var(--surface-solid);color:var(--text);
  resize:vertical;outline:none;
}
.code-area:focus{border-color:var(--accent);}

/* Color picker */
.big-swatch{width:100%;height:110px;border-radius:16px;box-shadow:var(--shadow-soft);border:1px solid var(--surface-border);}
.recent-swatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}

/* QR */
.qr-preview{display:flex;justify-content:center;padding:20px;background:#fff;border-radius:14px;margin-top:16px;}

/* Password strength meter */
.strength-meter{height:8px;border-radius:99px;background:var(--bg-alt);overflow:hidden;margin-top:10px;}
.strength-fill{height:100%;border-radius:99px;transition:width .2s ease,background .2s ease;}

/* Video */
video{width:100%;border-radius:14px;background:#000;}
.video-controls{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap;}

/* ---------- Games page ---------- */
.games-hero{padding:60px 0 30px;text-align:center;}
.games-hero h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:12px;}
.filter-bar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:26px 0 34px;}
.game-search{max-width:420px;margin:0 auto 20px;display:flex;align-items:center;gap:10px;padding:12px 18px;}
.game-search input{flex:1;border:none;background:none;outline:none;font-size:.95rem;color:var(--text);font-family:var(--font-body);}
.game-modal{position:fixed;inset:0;background:rgba(10,11,16,0.7);display:none;align-items:center;justify-content:center;z-index:260;padding:16px;}
.game-modal.open{display:flex;}
.game-modal-box{width:min(560px,100%);padding:22px;position:relative;}
.high-score-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:rgba(16,185,129,0.14);color:#0d9668;font-size:.78rem;font-weight:700;}

@media(max-width:600px){
  .games-hero{padding:36px 0 20px;}
}