/* Four in a Row and Brick Breaker. Original artwork drawn with CSS and canvas. */
.fourrow-app{display:flex;flex-direction:column;min-height:100%;font:12px Tahoma,Arial,sans-serif;background:var(--chrome);color:#111}
.fourrow-app .app-menubar{flex-shrink:0}.fourrow-app select{font:12px Tahoma,Arial,sans-serif;max-width:100%}
.fourrow-play{container-type:inline-size;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 10px 4px}
.fourrow-turn{display:flex;align-items:center;gap:8px;font:bold 13px Tahoma,Arial,sans-serif;min-height:24px}
.fourrow-disc{display:inline-block;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 -3px #0004,0 1px #0006}
.fourrow-disc.p1,.fourrow-cell.p1::after{background:radial-gradient(circle at 38% 34%,#ff8a7a 0 18%,#d8352a 42%,#9e1f18 100%)}
.fourrow-disc.p2,.fourrow-cell.p2::after{background:radial-gradient(circle at 38% 34%,#fff2a8 0 18%,#f0bf26 42%,#b17f08 100%)}
.fourrow-board{--hole:min(52px,calc((100cqw - 40px) / 7));display:grid;grid-template-columns:repeat(7,var(--hole));gap:0;padding:6px;background:linear-gradient(#3367c8,#1f4597);border:3px solid #13306e;border-radius:10px;box-shadow:inset 0 2px #ffffff40,2px 4px #0005;overflow:hidden;position:relative;max-width:100%;box-sizing:border-box}
.fourrow-col{display:flex;flex-direction:column;padding:0;margin:0;border:0;background:transparent;cursor:pointer;border-radius:6px;min-width:0;outline:none;font:inherit}
.fourrow-col.cursor{background:#ffffff1f}.fourrow-col:focus-visible{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #13306e}
.fourrow-col[aria-disabled=true]{cursor:default}
.fourrow-cell{position:relative;display:block;width:var(--hole);height:var(--hole);flex:none}
.fourrow-cell::before{content:"";position:absolute;inset:12%;border-radius:50%;background:#e9eef7;box-shadow:inset 0 3px 3px #0d265d99}
.fourrow-cell::after{content:"";position:absolute;inset:12%;border-radius:50%;display:none;box-shadow:inset 0 -3px #0003,inset 0 0 0 2px #0002}
.fourrow-cell.p1::after,.fourrow-cell.p2::after{display:block}
.fourrow-cell.drop::after{animation:fourrow-fall calc(.07s * var(--fall) + .14s) cubic-bezier(.5,0,1,1)}
@keyframes fourrow-fall{from{transform:translateY(calc(var(--fall) * -100% - 30%))}to{transform:none}}
.fourrow-cell.win::after{box-shadow:0 0 0 3px #fff,0 0 0 5px #13306e;animation:fourrow-glow 1s ease-in-out infinite alternate}
.fourrow-cell.win.drop::after{animation:fourrow-fall calc(.07s * var(--fall) + .14s) cubic-bezier(.5,0,1,1),fourrow-glow 1s ease-in-out calc(.07s * var(--fall) + .14s) infinite alternate}
@keyframes fourrow-glow{to{filter:brightness(1.25)}}
.fourrow-tally{margin:0;font-size:11px;color:#333}
.fourrow-status{margin:0;padding:6px 12px 10px;line-height:1.5;min-height:3em}
@media(prefers-reduced-motion:reduce){.fourrow-cell.drop::after,.fourrow-cell.win::after,.fourrow-cell.win.drop::after{animation:none}}

.bricks-app{display:flex;flex-direction:column;min-height:100%;font:12px Tahoma,Arial,sans-serif;background:var(--chrome);color:#111;outline:none}
.bricks-app .app-menubar{flex-shrink:0}
.bricks-device{margin:10px auto 4px;padding:12px 12px 10px;width:calc(100% - 20px);max-width:340px;box-sizing:border-box;background:linear-gradient(160deg,#5d6676,#2f3541 60%,#252a33);border-radius:18px;box-shadow:inset 0 2px #fff3,inset 0 -2px #0006,2px 4px #0006;display:flex;flex-direction:column;gap:8px}
.bricks-hud{display:flex;justify-content:space-between;gap:6px;color:#bfe7ff;font:bold 12px/1.3 "Courier New",monospace;background:#0b1530;border:2px solid #111722;border-bottom:0;border-radius:6px 6px 0 0;padding:3px 7px;margin-bottom:-8px}
.bricks-hud span{white-space:nowrap}
#bricks-canvas{display:block;width:100%;height:auto;aspect-ratio:3/4;background:#0b1530;border:2px solid #111722;border-top:0;border-radius:0 0 6px 6px;touch-action:none;cursor:none;box-sizing:border-box}
.bricks-app.is-paused #bricks-canvas,.bricks-app.is-idle #bricks-canvas{cursor:pointer}
.bricks-pad{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:8px}
.bricks-pad button{min-height:40px;font-size:15px;border-radius:9px;background:#d8dde6;color:#222;padding:0;touch-action:none;user-select:none;-webkit-user-select:none}
.bricks-brand{color:#aeb7c6;font:bold 9px/1 Verdana,Arial,sans-serif;letter-spacing:.2em;text-align:center}
.bricks-status{margin:0;padding:6px 12px 10px;line-height:1.5;min-height:3em}
@media(max-width:600px){.bricks-device{margin:6px auto 2px;padding:9px 9px 8px}}