/* ============================== SHELL ============================== */
#root{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);
  opacity:0;transition:opacity 180ms var(--ease)}
#root.in{opacity:1}

.panel{width:420px;min-height:320px;display:flex;flex-direction:column;background:var(--base);
  border:1px solid var(--line-hard);border-radius:var(--r);opacity:0;transform:scale(.96);
  transition:opacity 180ms var(--ease),transform 180ms var(--ease),border-color 180ms var(--ease)}
#root.in .panel{opacity:1;transform:none}
.panel.win{border-color:var(--accent)}
.panel.lose{border-color:var(--danger);animation:shake 180ms var(--ease)}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

.head{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.head-icon{position:relative;width:26px;height:26px;display:grid;place-items:center;font-size:12px;font-weight:700;
  color:var(--micro);overflow:hidden}
.head-icon img{width:100%;height:100%;object-fit:contain}
.head-title{flex:1;min-width:0}
.head-title strong{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.head-title .round{font-size:11px;color:var(--micro)}
.head-cancel{font-size:11px;color:var(--micro);padding:3px 7px;border:1px solid var(--line);border-radius:4px;
  transition:color 120ms var(--ease),border-color 120ms var(--ease)}
.head-cancel:hover{color:var(--text);border-color:var(--line-hard)}

.countdown{height:2px;background:rgba(255,255,255,.06);overflow:hidden}
.countdown-fill{height:100%;width:100%;background:var(--accent);transform-origin:left center}
.countdown-fill.low{background:var(--danger)}

#stage{flex:1;display:flex;flex-direction:column;justify-content:center;padding:var(--s5) var(--s4);min-height:200px}
.hint{padding:var(--s3) var(--s4);border-top:1px solid var(--line);font-size:11px;color:var(--micro);text-align:center}

/* ===================== SHARED GAME PRIMITIVES =====================
   Games build from these instead of inventing their own bars and keys,
   which is what keeps ten games looking like one library. */
.bar{position:relative;height:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.bar-zone{position:absolute;top:0;bottom:0;background:var(--accent-dim);
  border-left:1px solid var(--accent-line);border-right:1px solid var(--accent-line)}
.bar-fill{position:absolute;top:0;bottom:0;left:0;background:var(--accent)}
.keycap{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 var(--s2);background:var(--panel);
  border:1px solid var(--line-hard);border-radius:var(--r-sm);font-size:13px;font-weight:600}
.keycap.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.keycap.bad{border-color:var(--danger);color:var(--danger)}
.pips{display:flex;gap:var(--s1);justify-content:center}
.pip{width:18px;height:3px;border-radius:3px;background:rgba(255,255,255,.1)}
.pip.on{background:var(--accent)}
.pip.bad{background:var(--danger)}
.wrap{display:flex;flex-direction:column;gap:var(--s5)}
.centre{display:flex;justify-content:center;align-items:center}
.label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--micro);text-align:center}


/* ============================== GALLERY ============================== */
#gallery-root{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55)}
#gallery{width:520px;max-height:70vh;display:flex;flex-direction:column;background:var(--base);
  border:1px solid var(--line-hard);border-radius:var(--r)}
.gallery-head{display:flex;align-items:center;justify-content:space-between;padding:var(--s4);border-bottom:1px solid var(--line)}
.gallery-list{overflow-y:auto}
.gallery-row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.gallery-row:last-child{border-bottom:0}
.gallery-row .meta{flex:1;min-width:0}
.gallery-row strong{display:block;font-size:13px;font-weight:600}
.gallery-row span{font-size:11px;color:var(--micro)}
.gallery-row select{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px;font-size:12px}
.btn{height:28px;padding:0 var(--s3);border-radius:var(--r-sm);background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:600}
.btn.ghost{background:transparent;color:var(--dim);border:1px solid var(--line-hard)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  #root,.panel{opacity:1!important;transform:none!important}
}