/* Standard game screen: 16:9 frame used by every game. */ .game-screen { width: 1200px; max-width: 90vw; /* Cap at 80vh but leave room for title + button row on short viewports. */ max-height: min(80vh, calc(100vh - 14rem)); aspect-ratio: 16 / 9; border: 1px solid black; border-radius: 8px; background: hsl(218, 40%, 98%); /* subtle cool */ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05); margin: 0 auto; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: box-shadow 0.2s ease; } .game-screen.dark { background: hsl(220, 25%, 6%); } /* When idle, the whole screen is the "play" affordance — click to demo. */ .app[data-state="idle"] .game-screen { cursor: pointer; } .app[data-state="idle"] .game-screen:hover { box-shadow: 0 6px 32px rgba(0, 0, 0, 0.10); } .game-screen > canvas { width: 100%; height: 100%; display: block; touch-action: none; } .game-screen > canvas.pixelated { image-rendering: pixelated; image-rendering: crisp-edges; } /* Idle content: static illustration shown while in idle state. */ .screen-idle { width: 100%; height: 100%; color: black; display: block; } /* Game mount inside the screen — fills the available frame so every game module can rely on width:100%/height:100% on its root. */ #game-mount { width: 100%; height: 100%; } .game-screen.dark .screen-idle { color: white; } /* State-driven content visibility inside the screen. */ .app[data-state="idle"] .screen-play { display: none !important; } .app[data-state="playing"] .screen-idle { display: none !important; } .game-screen .grid { margin-inline: auto; } .overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.7); color: white; font-size: 28px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; pointer-events: none; } .overlay.show { display: flex; } .demo-badge { position: absolute; bottom: 6px; right: 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; background: white; color: black; padding: 2px 7px; z-index: 5; } /* Optional HTML text overlay anchored at top-center of the screen (used for pong's score; canvas itself stays text-free). */ .screen-info { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace; font-size: clamp(18px, 3vh, 28px); font-weight: 700; letter-spacing: 0.18em; color: black; pointer-events: none; z-index: 3; } .game-screen.dark .screen-info { color: white; } /* Full-viewport win/lose/draw overlay. Mounted on by src/fx/result.js. Covers chrome + log drawer; sits below native top-layer. */ .fx-result { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; background: black; z-index: 200; overflow: hidden; animation: fx-result-slide-down 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards; transition: background 700ms ease; } /* Settle phase: overlay vanishes, particles fade, text shrinks toward the centre of .game-screen (via CSS variables set in JS). */ .fx-result-settling { background: transparent !important; } .fx-result-settling .fx-result-particles { opacity: 0; transition: opacity 700ms ease; } .fx-result-settling .fx-result-text { animation: fx-result-settle 700ms cubic-bezier(0.4, 0, 0.2, 1) forwards !important; } @keyframes fx-result-settle { to { transform: translate(var(--settle-dx, 0), var(--settle-dy, 0)) scale(var(--settle-scale, 0.3)); } } .fx-result-text { font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace; font-size: clamp(48px, 12vmin, 120px); font-weight: 900; letter-spacing: 0.25em; text-transform: uppercase; color: white; text-align: center; white-space: nowrap; z-index: 2; } .fx-result-particles { position: absolute; inset: 0; z-index: 1; } /* WIN: Slide from right + Rotate slightly */ .fx-result-win .fx-result-text { animation: fx-win-anim 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } /* LOSE: Fall from top with impact bounce */ .fx-result-lose .fx-result-text { animation: fx-lose-anim 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) forwards, fx-lose-impact 0.4s 0.6s ease-out forwards; } /* DRAW & INFO: simple fade */ .fx-result-draw .fx-result-text, .fx-result-info .fx-result-text { animation: fx-result-fade 0.5s ease forwards; } @keyframes fx-result-slide-down { from { transform: translateY(-100%); } to { transform: translateY(0); } } @keyframes fx-win-anim { 0% { transform: translateX(100%) rotate(10deg); opacity: 0; } 100% { transform: translateX(0) rotate(0deg); opacity: 1; } } @keyframes fx-lose-anim { 0% { transform: translateY(-200%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes fx-lose-impact { 0% { transform: translateY(0); } 25% { transform: translateY(-15px); } 50% { transform: translateY(0); } 75% { transform: translateY(-5px); } 100% { transform: translateY(0); } } @keyframes fx-result-fade { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .controls-hint { text-align: center; font-size: 11px; color: #666; margin-top: 10px; letter-spacing: 0.05em; } .controls-hint kbd { font-family: inherit; display: inline-block; border: 1px solid black; padding: 1px 5px; margin: 0 1px; font-size: 10px; background: white; color: black; } .controls-hint .sep { color: #aaa; margin: 0 6px; }