/* ============================================================
   The games — "Bigger?" (game.js) and "Fits Inside" (fits.js).
   Loaded by play.html only; the map page no longer needs these.
   ============================================================ */

.fits-tabs { display:flex; gap:var(--s-2); margin-bottom:var(--s-4); }
.fits-tab { flex:1; padding:8px 0; font-size:12.5px; font-weight:600; text-align:center;
            border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg);
            color:var(--text-muted); cursor:pointer; }
.fits-tab.on { background:var(--text); color:#fff; border-color:var(--text); }
.fits-pane { display:none; } .fits-pane.on { display:block; }
.fits-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-3); }
.fits-title { font-size:14px; font-weight:700; letter-spacing:-.3px; text-align:center; flex:1; }
.fits-cv { width:100%; height:200px; display:block; }
.fits-stat { margin-top:var(--s-3); font-size:12.5px; color:var(--text-2); min-height:34px; }
.fits-stat b { color:var(--text); }
.fits-stat.warn { color:#e0433a; font-weight:600; }
#fits-famous .btn { width:100%; margin-top:var(--s-3); }
.fits-select { width:100%; padding:9px var(--s-3); font:inherit; font-size:13.5px;
               border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg);
               margin-bottom:var(--s-3); }
.fits-draghint { text-align:center; font-size:11.5px; color:var(--text-ghost); margin:var(--s-2) 0 0; }
.fits-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--s-3); }
.chip { font-size:12px; font-weight:600; padding:6px 11px; border-radius:var(--r-pill);
        border:1px solid var(--line); background:var(--bg); color:var(--text-2); cursor:grab;
        touch-action:none; user-select:none; transition:opacity .15s var(--ease); }
.chip:hover { border-color:var(--text-muted); }
.chip.in { background:var(--text); color:#fff; border-color:var(--text); cursor:pointer; }
.chip.dragging { opacity:.35; }
.chip-ghost { position:fixed; z-index:50; pointer-events:none; transform:translate(-50%,-50%) scale(1.06);
              box-shadow:var(--shadow-float); cursor:grabbing; }
#fits-clear { width:100%; margin-top:var(--s-4); }

.fits-drop { position:relative; border-radius:var(--r-sm); transition:box-shadow .15s var(--ease); }
.fits-drop.drop-hover { box-shadow:0 0 0 2px var(--equal-earth) inset; }
@keyframes fitsDrop { 0% { box-shadow:0 0 0 3px var(--equal-earth) inset; } 100% { box-shadow:0 0 0 0 transparent inset; } }
.fits-drop.drop-pulse { animation:fitsDrop .5s var(--ease); }

.g-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-5); }
.g-score { font-size:12.5px; font-weight:700; color:var(--text-2); font-variant-numeric:tabular-nums;
           background:var(--surface-2); border-radius:var(--r-pill); padding:4px 11px; }
.g-q { text-align:center; margin-bottom:var(--s-2); }
.g-q em { color:var(--equal-earth); font-style:normal; }
.g-sub { text-align:center; font-size:14px; color:var(--text-muted); margin-bottom:var(--s-5); }
.g-pair { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
.g-opt { position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--s-3);
         padding:var(--s-5) var(--s-3); background:#fff; cursor:pointer; border:1px solid var(--line);
         border-radius:var(--r-md); transition:.15s var(--ease); font-weight:600; letter-spacing:-.3px; }
.g-opt:hover:not(:disabled){ border-color:var(--text); transform:translateY(-2px); }
.g-opt canvas { width:100%; height:170px; }
.g-opt.correct { border-color:var(--equal-earth); background:var(--equal-earth-sub); }
.g-opt.wrong { opacity:.5; }
.g-truth { font-size:12px; color:var(--text-muted); font-weight:500; font-variant-numeric:tabular-nums; }
.g-distort { min-height:34px; margin-top:var(--s-4); padding-top:var(--s-4); border-top:1px solid var(--line);
             font-size:12.5px; line-height:1.5; color:var(--text-2); text-align:center; }
.g-distort:empty { border-top-color:transparent; }
.g-distort b { color:var(--text); }

@media (max-width:900px) {
  .g-opt canvas { height:120px; }
}

/* ---------------- Shape ---------------- */
.shape-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-5); }
.shape-cv { width:100%; height:220px; display:block; margin:var(--s-4) 0 var(--s-4);
            background:#f2f4ef; border:1px solid var(--line); border-radius:var(--r-sm); }
.shape-form { display:flex; gap:var(--s-2); }
.shape-form input { flex:1; padding:9px var(--s-3); font:inherit; font-size:13.5px;
                     border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg); }
.shape-form input:focus { outline:0; border-color:var(--line-strong); }
.shape-msg { min-height:22px; margin-top:var(--s-3); font-size:12.5px; color:var(--text-2); text-align:center; }
.shape-msg .up { color:var(--equal-earth); font-weight:600; }
.shape-msg.warn { color:#e0433a; }
.shape-actions { display:flex; gap:var(--s-3); margin-top:var(--s-4); }
.shape-actions .btn { flex:1; }

@media (max-width:900px) {
  .shape-cv { height:170px; }
}