/* ficklestudio26 · Speed games (builds on /timer/timer.css) */
.g-bar { display:flex; justify-content:center; gap:clamp(16px,6vw,48px); margin:0 0 12px; }
.g-bar div { text-align:center; }
.g-bar b { display:block; font:800 clamp(30px,8vw,56px)/1 ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums; }
.g-bar span { font-size:12px; font-weight:700; color:#5b5b66; text-transform:uppercase; letter-spacing:.06em; }
.g-pad { display:block; width:100%; min-height:min(46vh,340px); border:3px dashed #e8590c; border-radius:20px; background:#fff4e6; color:#d9480f; font:800 clamp(28px,7vw,52px) system-ui,sans-serif; cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:manipulation; transition:background .05s; }
.g-pad:active, .g-pad.hit { background:#ffd8a8; }
.g-pad.is-done { background:#f1f3f5; color:#868e96; border-color:#ced4da; cursor:default; }
.g-react { border-style:solid; border-color:transparent; background:#e7f5ff; color:#1971c2; }
.g-react.is-wait { background:#fa5252; color:#fff; }
.g-react.is-go { background:#40c057; color:#fff; }
.g-react.is-early { background:#f08c00; color:#fff; }
.g-react.is-between { background:#e7f5ff; color:#1971c2; }
.g-list { min-height:1.4em; margin:10px 0 0; color:#5b5b66; font-weight:600; }
.g-result { margin:16px auto 6px; text-align:center; }
.g-label { display:block; font:700 clamp(16px,3vw,22px) system-ui,sans-serif; color:#5b5b66; }
.g-value { display:block; font:800 clamp(64px,19vw,150px)/1.02 system-ui,sans-serif; color:#d9480f; }
.g-value small { font-size:.3em; font-weight:800; margin-left:.15em; color:#5b5b66; }
.g-note { display:block; font:600 clamp(15px,2.6vw,20px) system-ui,sans-serif; color:#1d1d22; }
.g-best { display:block; margin-top:6px; font:700 15px system-ui,sans-serif; color:#2b8a3e; }
.g-result.pop { animation:pop .5s ease; }
@keyframes pop { 0% { transform:scale(.7); opacity:0; } 70% { transform:scale(1.06); } 100% { transform:scale(1); opacity:1; } }
.g-again { margin-top:10px; }
.g-text { text-align:left; font:500 clamp(18px,2.6vw,24px)/1.7 ui-monospace,Menlo,Consolas,monospace; background:#fff; border:1px solid #e8e8ec; border-radius:14px; padding:14px 16px; max-height:7.2em; overflow:hidden; scroll-behavior:smooth; color:#868e96; }
.g-text .ok { color:#1d1d22; }
.g-text .bad { color:#fff; background:#fa5252; border-radius:3px; }
.g-text .cur { background:#ffe066; color:#1d1d22; border-radius:3px; }
.g-input { width:100%; margin-top:10px; padding:12px 14px; font:500 20px system-ui,sans-serif; border:2px solid #e8590c; border-radius:12px; }
.g-grid { display:grid; grid-template-columns:repeat(var(--cols,4),1fr); gap:clamp(6px,2vw,12px); max-width:560px; margin:0 auto; }
.card { aspect-ratio:1; position:relative; border:0; padding:0; border-radius:14px; background:#e8590c; color:#fff; font-size:clamp(28px,8vw,54px); cursor:pointer; perspective:600px; }
.card .face, .card .back { position:absolute; inset:0; display:grid; place-items:center; border-radius:14px; transition:opacity .15s; }
.card .face { background:#fff; border:3px solid #e8590c; opacity:0; }
.card .back { font-weight:800; font-size:.7em; }
.card.up .face, .card.done .face { opacity:1; }
.card.up .back, .card.done .back { opacity:0; }
.card.done .face { background:#d3f9d8; border-color:#40c057; }
.g-field { position:relative; width:100%; height:min(56vh,420px); background:#1d1d22; border-radius:18px; overflow:hidden; cursor:crosshair; touch-action:manipulation; user-select:none; }
.g-field::before { content:attr(data-hint); position:absolute; inset:0; display:grid; place-items:center; color:#fff; font:800 clamp(22px,5vw,38px) system-ui,sans-serif; opacity:.9; pointer-events:none; }
.g-field.is-active::before, .g-field.has-target::before { display:none; }
.target { position:absolute; border-radius:50%; border:0; background:radial-gradient(circle,#fff 0 18%,#fa5252 19% 45%,#fff 46% 60%,#fa5252 61%); cursor:crosshair; padding:0; }
.g-field.is-done { opacity:.85; }
@media (prefers-reduced-motion:reduce) { .g-result.pop { animation:none; } }
.g-field.is-done::before { display:none; }
.g-streak { display:block; margin-top:6px; font:800 18px system-ui,sans-serif; color:#d9480f; }
.g-share { margin-top:12px; }