.reaction-card{max-width:760px;margin:0 auto;padding:1.25rem;background:#111827;color:#f8fafc;border-radius:22px;box-shadow:0 18px 50px rgba(15,23,42,.18)}.reaction-header,.reaction-stats{display:flex;justify-content:space-between;align-items:center;gap:1rem}.reaction-kicker{font-size:.72rem;letter-spacing:.12em;color:#a5b4fc;font-weight:800}.reaction-card h1{margin:.25rem 0 0;font-size:clamp(1.45rem,4vw,2.2rem)}.reaction-level{color:#cbd5e1;font-size:.75rem}.reaction-level strong{display:block;color:#fff;font-size:1.8rem}.reaction-stats{margin:1.5rem 0 .55rem;color:#cbd5e1;font-size:.9rem}.reaction-progress{height:12px;background:#334155;border-radius:99px;overflow:hidden}.reaction-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22c55e,#a3e635);transition:width .15s ease}.reaction-status{text-align:center;min-height:1.4em;color:#cbd5e1}.reaction-buttons{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.2rem}.reaction-buttons button{min-height:180px;border:2px solid #475569;border-radius:18px;background:#1e293b;color:#e2e8f0;font-size:clamp(1.1rem,3vw,1.7rem);font-weight:900;cursor:pointer;touch-action:manipulation}.reaction-buttons button.is-active{background:#2563eb;border-color:#93c5fd;box-shadow:0 0 0 5px rgba(96,165,250,.2),0 0 35px rgba(59,130,246,.8);transform:scale(1.015)}.reaction-result{display:grid;gap:.5rem;text-align:center;margin-top:1.2rem;padding:1rem;border-radius:14px;background:#1e293b;color:#cbd5e1}.reaction-result strong{color:#fff;font-size:1.5rem}.reaction-result button{margin:.5rem auto 0;padding:.7rem 1rem;border:0;border-radius:10px;background:#22c55e;color:#052e16;font-weight:800}@media(max-width:600px){.reaction-card{border-radius:16px;padding:.9rem}.reaction-buttons button{min-height:145px}.reaction-header{align-items:flex-start}}
main.container{max-width:none!important;width:100%!important;padding-left:0!important;padding-right:0!important}
.gh-game-container{width:min(1280px,calc(100% - 48px));margin-inline:auto;padding:.5rem 0 3.5rem}
@media(max-width:760px){.gh-game-container{width:calc(100% - 14px)}}
.breadcrumb-container,.gh-breadcrumbs{padding:0!important;margin-top:0!important;margin-bottom:20px!important;font-size:.85rem;text-align:left;width:100%}
.reaction-card,.reaction-card *{box-sizing:border-box}.reaction-card{background:#111827!important;color:#f8fafc!important}.reaction-header{background:#111827!important;color:#f8fafc!important}.reaction-card h1,.reaction-card .reaction-level,.reaction-card .reaction-stats,.reaction-card .reaction-status{color:#f8fafc!important}.reaction-play-area{display:flex;align-items:stretch;gap:.75rem;margin-top:.5rem}.reaction-buttons{flex:1;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:0}.reaction-buttons button{min-height:112px;font-size:clamp(.85rem,2.2vw,1.15rem)}.reaction-progress{width:16px;height:auto;min-height:112px;display:flex;align-items:flex-end;background:#334155;border-radius:99px;overflow:hidden}.reaction-progress i{width:100%;height:0;background:linear-gradient(180deg,#fde047,#eab308);transition:height .15s ease}.reaction-buttons button.is-active{background:#eab308;border-color:#fef08a;color:#422006;animation:reaction-yellow-pulse .65s ease-in-out infinite alternate}@keyframes reaction-yellow-pulse{from{box-shadow:0 0 8px rgba(250,204,21,.65)}to{box-shadow:0 0 28px rgba(250,204,21,1)}}
@media(max-width:600px){.reaction-buttons button{min-height:92px}.reaction-progress{min-height:92px;width:14px}}
/* Physical button treatment: depth, hover and press feedback. */
.reaction-buttons button{background:linear-gradient(180deg,#334155 0%,#1e293b 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 5px 0 #0f172a,0 8px 16px rgba(2,6,23,.28);transition:transform .08s ease,box-shadow .08s ease,background .12s ease}
.reaction-buttons button:hover{background:linear-gradient(180deg,#475569 0%,#263449 100%)}
.reaction-buttons button:active{transform:translateY(4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 0 #0f172a,0 3px 8px rgba(2,6,23,.25)}
.reaction-buttons button.is-active{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 5px 0 #a16207,0 0 28px rgba(250,204,21,.9)}
.reaction-buttons button{min-height:82px;font-size:clamp(.8rem,2vw,1.05rem)}.reaction-progress{min-height:328px}
@media(max-width:600px){.reaction-buttons button{min-height:68px}.reaction-progress{min-height:272px}}
.reaction-buttons button{min-height:48px;font-size:.78rem;border-radius:10px}.reaction-progress{width:48px;min-width:48px}
@media(max-width:600px){.reaction-buttons button{min-height:42px;font-size:.7rem}.reaction-progress{width:42px;min-width:42px}}
.reaction-buttons{align-items:start}.reaction-buttons button{height:48px;min-height:48px;align-self:start;padding:.25rem .5rem}.reaction-buttons button.is-active{transform:none}@media(max-width:600px){.reaction-buttons button{height:42px;min-height:42px}}
.reaction-buttons{flex:0 0 auto;grid-template-columns:140px 140px;justify-content:center;gap:.7rem}.reaction-buttons button{width:140px;border:2px solid #64748b;border-bottom:5px solid #0f172a;background:linear-gradient(145deg,#475569 0%,#334155 45%,#1e293b 100%);box-shadow:inset 0 2px 1px rgba(255,255,255,.2),inset 0 -3px 4px rgba(0,0,0,.25),0 5px 0 #020617,0 9px 15px rgba(2,6,23,.35)}.reaction-buttons button:hover{transform:translateY(-1px);filter:brightness(1.12)}.reaction-buttons button:active{transform:translateY(4px);border-bottom-width:2px;box-shadow:inset 0 2px 2px rgba(0,0,0,.25),0 1px 0 #020617,0 3px 7px rgba(2,6,23,.3)}.reaction-buttons button.is-active{background:linear-gradient(145deg,#fde047 0%,#facc15 45%,#ca8a04 100%);border-color:#fef08a;border-bottom-color:#854d0e;color:#422006}@media(max-width:600px){.reaction-buttons{grid-template-columns:105px 105px}.reaction-buttons button{width:105px}}
.reaction-buttons{align-self:flex-end}
.reaction-buttons button.is-active{animation-duration:.25s}
.reaction-play-area{justify-content:center}
.reaction-card{background:radial-gradient(circle at 50% -20%,#1e293b 0%,#0f172a 48%,#090f1d 100%)!important;border:1px solid #26354f;box-shadow:0 20px 45px rgba(2,6,23,.35)}.reaction-kicker,.reaction-level{color:#a5b4fc!important}.reaction-header{border-bottom:1px solid #334155;padding-bottom:1rem!important}.reaction-stats{padding:.55rem .75rem;background:#111b2e;border:1px solid #1e3150;border-radius:12px;color:#dbeafe!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}#rs-lives{font-size:1.1rem;letter-spacing:.08em}#rs-score{color:#fde68a!important;font-variant-numeric:tabular-nums}.reaction-status{font-weight:700;color:#cbd5e1!important}.reaction-progress{background:#17243a;border:1px solid #334155;box-shadow:inset 0 2px 5px rgba(0,0,0,.3)}.reaction-progress i{background:linear-gradient(180deg,#67e8f9 0%,#facc15 52%,#f97316 78%,#ec4899 100%);box-shadow:0 0 14px rgba(250,204,21,.55)}.reaction-result{border:1px solid #334155;background:linear-gradient(180deg,#1e293b,#172033);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.reaction-buttons{align-self:flex-end;flex:0 0 auto;grid-template-columns:140px 140px!important;justify-content:center;gap:.7rem}.reaction-buttons button{width:140px!important;height:48px!important;min-height:48px!important;padding:.25rem .5rem;background:linear-gradient(145deg,#475569,#1e293b)!important;border:2px solid #64748b;border-bottom:5px solid #0f172a;box-shadow:inset 0 2px 1px rgba(255,255,255,.2),0 5px 0 #020617,0 9px 15px rgba(2,6,23,.35);transform:none}.reaction-buttons button.is-active{background:linear-gradient(145deg,#fde047,#ca8a04)!important;border-color:#fef08a;color:#422006}.reaction-progress{width:48px!important;min-width:48px!important;min-height:328px!important}.reaction-play-area{justify-content:center}
@media(max-width:600px){.reaction-buttons{grid-template-columns:105px 105px!important}.reaction-buttons button{width:105px!important;height:42px!important;min-height:42px!important}.reaction-progress{width:42px!important;min-width:42px!important;min-height:272px!important}}
.reaction-card.reaction-level-up .reaction-progress i{filter:brightness(1.45);box-shadow:0 0 24px rgba(163,230,53,.95)}.reaction-level-pop{animation:reaction-level-pop .42s ease-out}@keyframes reaction-level-pop{0%{transform:scale(1)}45%{transform:scale(1.22);color:#fde047!important;text-shadow:0 0 18px rgba(250,204,21,.9)}100%{transform:scale(1)}}

/* Isolated arcade-button experiment. Activate only with ?button_test=arcade. */
.reaction-arcade-test .reaction-buttons button {
  width: 220px !important;
  height: 110px !important;
  min-height: 110px !important;
  border-radius: 55px !important;
  border: 5px solid #3b4b64;
  background: radial-gradient(circle at 50% 25%, #475569 0%, #263449 45%, #111827 100%) !important;
  box-shadow: 0 10px 0 #060b14, 0 16px 22px rgba(0,0,0,.45), inset 0 5px 8px rgba(255,255,255,.18);
  transition: transform 70ms ease, box-shadow 70ms ease, background 120ms ease;
}
.reaction-arcade-test .reaction-buttons button.is-active {
  border-color: #ffd84a;
  background: radial-gradient(circle at 50% 25%, #fff36a 0%, #ffd52e 45%, #e9a800 100%) !important;
  box-shadow: 0 10px 0 #9b6800, 0 16px 22px rgba(0,0,0,.45), 0 0 30px rgba(255,210,30,.8), inset 0 5px 8px rgba(255,255,255,.45);
}
.reaction-arcade-test .reaction-buttons button:active {
  transform: translateY(7px) !important;
  box-shadow: 0 3px 0 #9b6800, 0 8px 14px rgba(0,0,0,.4), 0 0 38px rgba(255,220,40,1), inset 0 3px 7px rgba(255,255,255,.4);
}
@media (max-width: 600px) {
  .reaction-arcade-test .reaction-buttons { grid-template-columns: 1fr 1fr !important; gap: .5rem; width: 100%; }
  .reaction-arcade-test .reaction-buttons button { width: 100% !important; height: 82px !important; min-height: 82px !important; border-radius: 41px !important; font-size: .72rem; }
}

/* Quick Button Tap: keep the progress rail on the far right and enlarge touch targets. */
#reaction-survival-app .reaction-play-area { justify-content: space-between; }
#reaction-survival-app .reaction-buttons { order: 1; grid-template-columns: 152px 152px !important; gap: calc(.7rem + 10px); margin-left: auto; margin-right: auto; }
#reaction-survival-app .reaction-buttons button { width: 152px !important; height: 96px !important; min-height: 96px !important; }
#reaction-survival-app .reaction-progress { order: 2; margin-left: 0; }
#reaction-survival-app .reaction-combo-pop { animation: reaction-combo-pop .7s ease-out; }
@keyframes reaction-combo-pop { 0%{transform:scale(1);color:#f8fafc} 45%{transform:scale(1.18);color:#fde047;text-shadow:0 0 14px rgba(250,204,21,.8)} 100%{transform:scale(1);color:#f8fafc} }
@media (max-width: 600px) {
  #reaction-survival-app .reaction-buttons { grid-template-columns: 120px 120px !important; gap: calc(.6rem + 10px); }
  #reaction-survival-app .reaction-buttons button { width: 120px !important; height: 92px !important; min-height: 92px !important; }
}
