/* Stellenportal and its hidden Tetris; intro, trigger, panel and status come from minesweeper.css */
.tt-wrap{display:flex;flex-direction:column;align-items:center;gap:.9rem}

/* the hammer after the page heading */
.nf-hammer{display:inline-block;width:.78em;height:.78em;margin-left:.12em;vertical-align:-.04em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* The game is drawn in text, like the 1984 original, straight on the page: the board in characters
   (<! walls !>, " ." empty, [] blocks), counters and the next piece to its left. The type size
   follows the viewport height so the whole well (22 lines) fits. */
.tt-screen{--tt-ink:var(--color-text-primary);--tt-dim:#b3aea2;--tt-font:clamp(.78rem,calc((100svh - 16rem) / 22 / 1.18),1.3rem);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:clamp(1rem,3vw,2.5rem);width:100%;color:var(--tt-ink);
  font:400 var(--tt-font)/1.18 ui-monospace,'Cascadia Mono',Consolas,'Courier New',monospace;letter-spacing:.06em}
.tt-side{display:flex;flex-direction:column;align-items:flex-end;gap:2.5em;min-width:0}
.tt-score,.tt-next{max-width:none;margin:0;font:inherit;white-space:pre}
.tt-grid{white-space:pre;outline:0;touch-action:manipulation}
/* keyboard focus shows as bold walls rather than a frame around the board */
.tt-grid:focus-visible .tt-wall{font-weight:700}
.tt-row{display:block;height:1.18em}
.tt-wall{color:var(--tt-ink)}
.tt-cell{color:var(--tt-dim)}
.tt-cell.is-block{color:var(--tt-ink)}
/* where the piece will land, and the lane on its way down */
.tt-cell.is-ghost{color:var(--tt-ink);opacity:.32}
.tt-cell.is-lane{color:var(--color-text-secondary)}

/* animations (tetris.js adds and removes the classes): a landing flash, a streak down the column
   after a hard drop, full rows blinking inverted before they are wiped, the counters pulsing */
.tt-cell.is-landed{animation:tt-land .24s ease-out}
.tt-cell.is-trail{animation:tt-trail .3s ease-out}
.tt-cell.is-clearing{animation:tt-blink .11s steps(1,end) 3}
.tt-score.is-bump{animation:tt-bump .4s ease-out}
@keyframes tt-land{from{font-weight:700;text-shadow:0 0 .45em currentColor}}
@keyframes tt-trail{from{color:var(--tt-ink);font-weight:700}}
@keyframes tt-blink{0%{background:var(--tt-ink);color:var(--color-bg)}50%{background:transparent;color:var(--tt-ink)}}
@keyframes tt-bump{30%{font-weight:700;transform:scale(1.06)}}
.tt-score{transform-origin:right center}
@media(prefers-reduced-motion:reduce){.tt-cell,.tt-score{animation:none!important}}

@media(max-width:40rem){
  .tt-screen{grid-template-columns:auto;justify-content:center;justify-items:center;gap:1rem;--tt-font:clamp(.7rem,4vw,1rem)}
  .tt-side{flex-direction:row;align-items:flex-start;gap:1.5em}
  .tt-grid{order:3}
}

/* on-screen controls, styled like the easter-egg trigger */
.tt-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.tt-controls button{display:grid;width:2.75rem;height:2.75rem;padding:0;place-items:center;border:.0625rem solid var(--color-border);border-radius:50%;background:var(--color-bg);color:var(--color-text-primary);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background var(--ease),border-color var(--ease)}
.tt-controls button:hover,.tt-controls button:focus-visible{border-color:var(--color-accent-primary);background:var(--color-paper)}
.tt-controls svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.tt-hint{max-width:none;margin:0;text-align:center;font:var(--text-small)/1.5 'Open Sans',Arial,sans-serif;color:var(--color-text-secondary)}

@media(prefers-reduced-motion:reduce){.tt-controls button{transition:none}}