/* brettisgay.com: shared shell for the game pages (a Win98 window that fills the phone screen) */
html,body{height:100%}
body.gp{margin:0;padding:0;overflow:hidden;overscroll-behavior:none}
.gp-wrap{
  height:100vh;height:100dvh;display:flex;justify-content:center;align-items:stretch;
  padding:calc(env(safe-area-inset-top) + 6px) calc(env(safe-area-inset-right) + 6px) calc(env(safe-area-inset-bottom) + 6px) calc(env(safe-area-inset-left) + 6px);
}
.gwin{display:flex;flex-direction:column;width:100%;max-width:640px;height:100%;min-height:0}
@media (min-width:700px) and (min-height:620px){
  .gp-wrap{padding:24px;align-items:center}
  .gwin{max-height:920px}
}
.gwin .win__bar{min-height:50px;gap:6px;padding:3px}
.gwin .win__bar .btn98{min-height:44px;font-size:14px;padding:6px 10px;flex:none}
.gwin .win__bar .btn98:active{padding:7px 9px 5px 11px}
.gwin .win__title{font-size:13px}
.gwin__x{width:44px;padding:0 !important;font:700 22px/1 var(--verdana) !important}
.gwin__body{flex:1;min-height:0;position:relative;overflow:hidden;margin:3px 0;
  box-shadow:inset 1px 1px 0 var(--lo),inset -1px -1px 0 #fff,inset 2px 2px 0 #000}
.gwin .win__status{flex:none}
.gwin .win__status span:last-child{flex:0 1 auto;white-space:nowrap}

/* ---------- Win98 dialog (results / game over) ---------- */
.dlg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(0,0,0,.55);z-index:30}
.dlg[hidden]{display:none}
.dlg__win{width:min(340px,100%);background:var(--silver);color:#000;padding:3px;
  box-shadow:inset -1px -1px 0 #000,inset 1px 1px 0 #dfdfdf,inset -2px -2px 0 var(--lo),inset 2px 2px 0 #fff,4px 4px 0 rgba(0,0,0,.5)}
.dlg__bar{display:flex;align-items:center;gap:6px;padding:5px 8px;background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font:700 14px var(--verdana)}
.dlg__body{padding:14px 12px 16px;text-align:center;font:15px/1.4 var(--verdana)}
.dlg__body p{margin:.4em 0}
.dlg__big{font:700 clamp(2rem,10vw,2.8rem)/1.1 var(--mono);margin:.2em 0 !important}
.dlg__new{display:inline-block;font:900 12px/1 var(--verdana);color:#ff0;background:#c00;padding:4px 6px;border:1px solid #ff0;transform:rotate(-4deg)}
.dlg .btn98{margin-top:10px;min-width:120px}

/* ---------- F1 Reaction ---------- */
.f1{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18px 10px 22px;
  background:#111827;color:#fff;text-align:center;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
.f1__h{margin:0;font:italic 900 clamp(1.6rem,8vw,2.6rem)/1.1 Impact,"Arial Black",var(--verdana);letter-spacing:.04em;text-transform:uppercase;color:#e5e7eb}
.f1__sub{margin:.3em 0 0;color:#9ca3af;font:1rem var(--verdana)}
.f1__rig{display:flex;gap:6px;padding:10px;background:#0b0f19;border:2px solid #374151;border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,.6)}
.f1__col{display:flex;flex-direction:column;gap:6px;padding:5px;background:#1f2937;border:2px solid #374151;border-radius:8px}
.light{width:min(12vw,54px);height:min(12vw,54px);border-radius:50%;background:#4b1113;box-shadow:inset 0 0 10px rgba(0,0,0,.5);transition:background-color .05s,box-shadow .05s}
.light.on{background:#f00;box-shadow:0 0 30px #f00,inset 0 0 10px rgba(255,255,255,.5)}
.f1__status{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 8px}
.f1__go{margin:0;font:700 clamp(1.4rem,6.5vw,2.2rem)/1.2 var(--comic);color:#fff;animation:pulse 1.6s ease-in-out infinite}
.f1__go[hidden]{display:none}
.f1__hint{margin:.6em 0 0;color:#9ca3af;font-size:.85rem}
@keyframes pulse{50%{opacity:.45}}
.c-red{color:#c00}.c-yellow{color:#8a6d00}.c-green{color:#006400}.c-blue{color:#00008b}.c-dark{color:#000}.c-gray{color:#444}

/* ---------- Breakout ---------- */
.bo{height:100%;background:#000;position:relative;font-family:var(--mono);color:#fff;
  box-shadow:inset 0 0 0 3px #00ffff,inset 0 0 18px #ff00ff}
.bo canvas{display:block;width:100%;height:100%;touch-action:none;cursor:pointer}
.bo__hud{position:absolute;top:8px;left:10px;right:10px;display:flex;gap:8px;justify-content:space-between;pointer-events:none;
  font:700 clamp(11px,3.2vw,15px)/1 var(--mono);text-shadow:2px 2px 3px #ff00ff}
.bo__modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(86%,360px);padding:22px 16px;text-align:center;z-index:10;
  background:rgba(0,0,0,.88);border:4px solid #00ffff;border-radius:8px;box-shadow:0 0 18px #ff00ff}
.bo__modal h2{margin:0 0 10px;font:900 clamp(1.3rem,6.5vw,1.9rem)/1.15 Impact,"Arial Black",var(--verdana);color:#ff0;letter-spacing:.03em}
.bo__modal p{margin:0 0 16px;font:700 clamp(.85rem,3.6vw,1rem)/1.35 var(--mono);color:#0ff}
.bo__modal .btn98{font-size:15px;min-width:170px}
.bo__help{margin:10px 0 0 !important;font-size:.75rem !important;color:#c8c8c8 !important;font-weight:400 !important}

/* ---------- Connect Four ---------- */
.c4{height:100%;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px 10px;background:#008080;color:#fff}
.c4__h{margin:0;font:900 clamp(1.4rem,7vw,2.1rem)/1.1 Impact,"Arial Black",var(--verdana);color:#fff;text-shadow:2px 2px 0 #000;letter-spacing:.02em}
.c4__status{display:flex;align-items:center;gap:8px;min-height:36px;padding:6px 12px;background:#fff;color:#000;font:700 15px var(--verdana);box-shadow:inset 1px 1px 0 var(--lo),inset -1px -1px 0 #fff,inset 2px 2px 0 #000}
.c4__dot{width:16px;height:16px;border-radius:50%;flex:none;border:1px solid #000;background:#ef4444}
.c4__dot.is-ai{background:#facc15}
.c4__board{position:relative;width:min(100%,520px);width:min(100%,520px,calc((100dvh - 290px) * 7 / 6));aspect-ratio:7/6;flex:none}
.board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);gap:6px;padding:6px;background:#2457d6;border-radius:10px;box-shadow:0 6px 0 #10307a,0 10px 18px rgba(0,0,0,.35)}
.cell{background:#008080;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 2px 2px 3px rgba(0,0,0,.5)}
.cell .piece{width:90%;height:90%;border-radius:50%;transform:scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.cell .piece.player1{background:#ef4444;box-shadow:inset 0 0 10px rgba(0,0,0,.4);transform:scale(1)}
.cell .piece.player2{background:#facc15;box-shadow:inset 0 0 10px rgba(0,0,0,.3);transform:scale(1)}
.winning-cell .piece{animation:bounce .8s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:scale(1.05)}50%{transform:scale(.85)}}
.cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);z-index:5}
.column{border:0;padding:0;margin:0;background:transparent;cursor:pointer;border-radius:8px;min-width:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.column:hover,.column:focus-visible{background:rgba(255,255,255,.2);outline:none}
.column:disabled{cursor:not-allowed}

/* ---------- Matrix Mode ---------- */
.mx{height:100%;background:#000;position:relative}
.mx canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}
.mx__ctl{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:5;width:min(92%,380px);display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:12px 16px;background:rgba(0,20,0,.85);border:1px solid #0f0;box-shadow:0 0 15px rgba(0,255,0,.25);color:#0f0;font-family:var(--mono);transition:opacity .3s,transform .3s}
.mx__ctl.hidden-ui{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-20px)}
.mx__ctl label,.mx__small{font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.15em;opacity:.9}
.mx__ctl input[type=text]{width:100%;background:transparent;color:#0f0;border:0;border-bottom:2px solid #0f0;font:1.25rem var(--mono);text-align:center;outline:none;padding:8px 6px;min-height:44px}
.mx__ctl input[type=text]:focus{box-shadow:0 8px 10px -5px rgba(0,255,0,.5)}
.mx__ctl input[type=text]::placeholder{color:rgba(0,255,0,.45)}
.mx__btn{min-height:44px;padding:8px 14px;background:transparent;color:#0f0;border:1px solid #0f0;font:700 .85rem var(--mono);text-transform:uppercase;cursor:pointer;touch-action:manipulation}
.mx__btn:hover,.mx__btn:focus-visible{background:rgba(0,255,0,.2);outline:none}
.mx__speed{display:flex;align-items:center;gap:10px;width:100%;min-height:44px}
.mx__speed input{flex:1;accent-color:#0f0;min-height:44px;cursor:pointer}
.mx__small{font-weight:400;font-size:11px;opacity:.75;text-transform:none;letter-spacing:.05em}

@media (prefers-reduced-motion:reduce){
  .f1__go{animation:none}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.gwin__home{color:#000080 !important}
.gwin{gap:0}
@media (hover:none){.column:hover{background:transparent}}