/* ========================================================================== Slime Games – game pages Layered on css/style.css (sky, sand column, headings, buttons). Each page sets --sport on to its button-frame colour. ========================================================================== */ /* No splash above the column on a game page: start it at the top, and skip the front page's reveal (no splash.js here to trigger it). */ .js .page--game .sand, .page--game .sand { opacity: 1; transition: none; margin-top: 0; padding-top: clamp(1rem, 3vw, 2rem); /* 44px + 6px canvas border = 50px of sand each side of the 900px court. */ padding-left: clamp(1.5rem, 4.4%, 44px); padding-right: clamp(1.5rem, 4.4%, 44px); gap: clamp(1.5rem, 4vw, 2.5rem); } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .game-header { text-align: center; } .game-header__home { display: inline-block; width: min(260px, 52vw); margin-bottom: clamp(.5rem, 2vw, 1rem); border-radius: 1rem; transition: transform .18s ease-out; } .game-header__home img { display: block; width: 100%; height: auto; } .game-header__home:hover { transform: scale(1.03); } .game-header__home:focus-visible { outline: 4px solid var(--focus); outline-offset: 6px; } .game-title { margin-bottom: .5rem; } .game-title::before, .game-title::after { background: var(--sport); } .games__heading--small { font-size: clamp(1.5rem, 4.5vw, 2.25rem); margin-bottom: clamp(.75rem, 2vw, 1.25rem); } .game-subtitle { margin: 0; color: var(--ink); font-size: clamp(1rem, 2.2vw, 1.15rem); } /* -------------------------------------------------------------------------- The game -------------------------------------------------------------------------- */ .game-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .75rem; } .game-canvas { /* The stylesheet owns the display size; engine/coordinates.js sizes the backing store to match. 2:1 is what the physics assumes. */ box-sizing: content-box; /* 900px of court; the frame is extra */ width: 900px; max-width: calc(100% - 12px); aspect-ratio: 2 / 1; height: auto; display: block; /* A chunky frame in the game's own colour, sitting on the sand like the buttons do. */ border: 6px solid var(--ink); border-radius: 18px; box-shadow: 0 0 0 8px var(--sport), 0 0 0 10px var(--ink), 0 10px 0 10px rgba(122, 74, 18, .25); background: #000; image-rendering: pixelated; touch-action: manipulation; user-select: none; cursor: pointer; } .game-canvas:focus-visible { outline: 4px solid var(--focus); outline-offset: 14px; } .game-caption { margin-top: .75rem; color: var(--ink); font-size: .95rem; } /* -------------------------------------------------------------------------- Controls -------------------------------------------------------------------------- */ .controls { text-align: center; } .controls-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; justify-items: center; } .control-set { display: flex; flex-direction: column; align-items: center; gap: .75rem; } .control-player { margin: 0; font-family: "Lilita One", "Arial Black", sans-serif; font-weight: 400; font-size: 1.25rem; color: var(--ink); } .keycap-cluster { display: grid; grid-template-columns: repeat(3, 2.75rem); grid-template-rows: repeat(2, 2.75rem); gap: .35rem; } .keycap { display: grid; place-items: center; font-family: "Lilita One", "Arial Black", sans-serif; font-size: 1.1rem; color: var(--ink); background: #fff6cf; border: 3px solid var(--ink); border-radius: .6rem; box-shadow: 0 3px 0 var(--ink); } .keycap-jump { grid-column: 2; grid-row: 1; } .keycap-left { grid-column: 1; grid-row: 2; } .keycap-right { grid-column: 3; grid-row: 2; } .control-legend { display: grid; grid-template-columns: auto 1fr; gap: .3rem .75rem; margin: 0; text-align: left; font-size: .95rem; color: var(--ink); } .control-legend dt { font-family: "Lilita One", "Arial Black", sans-serif; font-weight: 400; white-space: nowrap; } .control-legend dd { margin: 0; } .control-legend-shared { width: max-content; max-width: 100%; margin: 1.5rem auto 0; padding-top: 1rem; border-top: 3px dashed rgba(122, 74, 18, .3); } /* -------------------------------------------------------------------------- Debug panel — kept, but quiet. -------------------------------------------------------------------------- */ .debug { display: flex; flex-direction: column; align-items: center; gap: .75rem; } .debug-toggle-label { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--ink); opacity: .7; cursor: pointer; } .debug-toggle { accent-color: var(--focus); } .debug-panel { width: 100%; padding: .75rem 1rem; white-space: pre-wrap; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .75rem; line-height: 1.6; color: var(--ink); background: rgba(255, 255, 255, .45); border: 2px solid rgba(122, 74, 18, .3); border-radius: .75rem; overflow-x: auto; } .debug-panel[hidden] { display: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- More games -------------------------------------------------------------------------- */ .more-games { text-align: center; } .more-games__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; } @media (max-width: 767px) { .more-games__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 479px) { .more-games__grid { grid-template-columns: repeat(2, 1fr); } } .foot__home { color: var(--ink); font-weight: 600; } .foot p + p { margin-top: .5rem; }