/* Flappy Key (飞飞小方): a portrait board whose whole surface is the flap button. The pixel night is drawn on the
   canvas (render.mjs); the page adds only the start hint, the pause card and the result card over it. Solid fills,
   compact shadows, the 70/180/240ms tempos; reduced motion drops every entrance. */
.flappy-board{position:relative;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
.flappy-board:focus{outline:none}
.flappy-board:is([data-flow=ending],[data-flow=result]){cursor:default}
.flappy-canvas{display:block;width:100%;height:100%;border-radius:10px;background:#181818}

/* The start hint: one quiet chip above the ground, gone with the first flap. */
.flappy-hint{position:absolute;z-index:6;left:50%;bottom:19%;margin:0;padding:7px 14px;border-radius:999px;background:#202020;color:#c4c4c4;font-size:14px;line-height:20px;letter-spacing:.01em;white-space:nowrap;pointer-events:none;transform:translateX(-50%);box-shadow:0 1px 2px #00000080,inset 0 1px 0 #ffffff0a;animation:flappy-hint-in 240ms cubic-bezier(.22,1,.36,1) both}
.flappy-hint[hidden]{display:none}

/* Paused: the board stays visible under a scrim, so the next flap is not a surprise. */
.flappy-board .game-overlay{z-index:7;inset:0;padding:24px;gap:6px;border-radius:inherit;background:#161616c4;backdrop-filter:none;box-shadow:none;animation:flappy-scrim-in 180ms cubic-bezier(.2,.8,.2,1) both}
.flappy-board[data-flow=paused] .game-overlay h2{margin:0;font-size:28px;font-weight:350;letter-spacing:-.03em;color:#e4e4e4}
.flappy-board[data-flow=paused] .game-overlay p{margin:0 0 18px;font-size:14px;line-height:1.6;color:#b3b3b3}
.flappy-board[data-flow=paused] .game-overlay .solid-button{min-width:132px;justify-content:center;gap:12px}

/* Over: the score card settles in the middle of the sky, above the hero where it fell. */
.flappy-board[data-flow=result] .game-overlay{justify-content:flex-end;padding:12px;background:none;pointer-events:none;animation:none}
body[data-game=flappy] .flappy-board[data-flow=result] .game-overlay.game-result-panel{position:absolute;inset:50% 12px auto;translate:0 -58%;width:auto;max-width:380px;min-height:0;max-height:calc(100% - 24px);margin:0 auto;padding:20px;border:0;border-radius:15px;background:#262626;box-shadow:0 10px 24px #00000066,inset 0 1px 0 #ffffff0d;overflow:auto;animation:flappy-card-in 240ms cubic-bezier(.22,1,.36,1) both}
body[data-game=flappy] .game-result-panel .game-result-emblem{display:grid;place-items:center}
body[data-game=flappy] .game-result-panel .game-result-emblem svg{width:52px;height:52px}
body[data-game=flappy] .game-result-panel .game-result-emblem .flappy-rest{width:46px;height:46px}

@keyframes flappy-hint-in{from{opacity:0;transform:translate(-50%,4px)}}
@keyframes flappy-scrim-in{from{opacity:0}}
@keyframes flappy-card-in{from{opacity:0;transform:translateY(10px)}}

/* Desktop: the board is three quarters as wide as it is tall, beside the usual rail. */
@media (min-width:761px) and (min-height:501px),(min-width:1001px){
 .desktop-play-page .flappy-layout{--play-height:max(320px,min(var(--desktop-game-height),calc((100vw - var(--site-nav-offset,0px) - var(--game-aside-space,0px) - 232px) / .75)));--play-width:calc(var(--play-height) * .75)}
}
/* Phones: the board takes the height the screen has left, never wider than 0.82 of its height. */
@media (max-width:760px),(max-width:1000px) and (max-height:500px){
 .flappy-board{--board-h:clamp(300px,calc(100svh - 288px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),760px);width:min(100%,calc(var(--board-h) * .82));height:var(--board-h);margin:6px auto 0;padding:5px}
 .flappy-canvas{border-radius:8px}
 .flappy-hint{bottom:17%}
}
@media (max-width:1000px) and (max-height:500px) and (orientation:landscape){
 .flappy-board{--board-h:max(260px,calc(100svh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));margin:0}
}
@media (prefers-reduced-motion:reduce){
 .flappy-hint,.flappy-board .game-overlay,body[data-game=flappy] .flappy-board .game-overlay.game-result-panel{animation:none!important}
}
@media (forced-colors:active){
 .flappy-canvas{border:1px solid CanvasText}
 .flappy-hint{border:1px solid CanvasText}
}

/* Beside the frame's aside (game-frame.css, body.game-aside-beside): the aside names the game and says how to play, so
   the page's own title and 玩法 step out of sight (the site's "…" still presses 玩法, which opens as a card in the board's
   corner). The 3:4 board is as tall as the window allows below the frame's bar, centred in the stage. Board, numbers and
   key are one window: the score, the best, the words and the key along its top, inside it, and the board under them. */
body.game-aside-beside[data-game=flappy]>[data-game-stage]{margin:0;padding:0 0 0 24px}
body.game-aside-beside[data-game=flappy]>[data-game-stage]>main{padding:0 0 24px}
body.game-aside-beside .flappy-layout{
  --stage-w:calc(100vw - var(--site-nav-offset,0px) - var(--game-aside-space,0px) - 24px);
  --stage-h:calc(100dvh - var(--site-header-h,60px) - 24px);
  --hud-h:56px;--hud-gap:6px;
  --play-height:max(320px,min(calc(var(--stage-h) - var(--hud-h) - var(--hud-gap)),calc((var(--stage-w) - 12px) / .75)));
  --play-width:calc(var(--play-height) * .75);
  width:calc(var(--play-width) + 12px);height:auto;margin:0 auto}
body.game-aside-beside .flappy-layout .play-column{height:auto}
body.game-aside-beside .flappy-layout .game-panel{grid-template-columns:auto minmax(0,1fr);grid-template-rows:var(--hud-h) var(--play-height);gap:0 20px;height:auto;padding:0 6px var(--hud-gap);border-radius:22px;background:#1b1b1b;box-shadow:inset 0 2px 5px #00000050,inset 0 -1px 2px #ffffff04}
body.game-aside-beside .flappy-layout .board-container{grid-column:1 / -1;grid-row:2;box-shadow:none}
body.game-aside-beside .flappy-layout .stats-row{grid-column:1;grid-row:1;flex-direction:row;align-items:center;gap:20px;padding:0 0 0 14px}
body.game-aside-beside .flappy-layout .stats-row>div{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:8px}
body.game-aside-beside .flappy-layout .stat-label{font-size:14px;line-height:20px}
body.game-aside-beside .flappy-layout .stat-value{font-size:22px;line-height:28px}
body.game-aside-beside .flappy-layout .game-panel-bottom{grid-column:2;grid-row:1;flex-direction:row;align-items:center;justify-content:flex-end;align-self:center;gap:12px;width:auto;min-width:0;padding:0 4px 0 0}
body.game-aside-beside .flappy-layout .game-panel-bottom>.game-status{min-width:0;font-size:14px;line-height:20px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.game-aside-beside .flappy-layout .game-panel-bottom .solid-button{flex:none;width:auto;min-width:96px;min-height:40px;height:40px;gap:12px;font-size:14px;background:#2a2a2a;box-shadow:inset 0 -3px 0 #1f1f1f;color:#dcdcdc}
/* The page's own title and 玩法: out of sight, still in the page; opened by the site's "…", 玩法 is a card in the corner. */
body.game-aside-beside .flappy-layout .game-intro{top:calc(var(--hud-h) + 14px);right:20px;z-index:30;width:auto;max-width:calc(var(--play-width) - 28px)}
body.game-aside-beside .flappy-layout .game-intro>h1,
body.game-aside-beside .flappy-layout .game-help:not([open])>summary:not(:focus-visible){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.game-aside-beside .flappy-layout .game-help{margin:0}
body.game-aside-beside .flappy-layout .game-help:not([open])>summary:focus-visible{min-height:36px;padding:0 12px;border-radius:10px;background:#262626;color:#ededed}
body.game-aside-beside .flappy-layout .game-help[open]{position:static;width:min(340px,calc(var(--play-width) - 28px));max-height:calc(var(--play-height) - 28px);padding:12px 18px 14px;border-radius:14px;background:#262626;box-shadow:0 1px 2px #00000080,inset 0 1px 0 #ffffff0a}
body.game-aside-beside .flappy-layout .game-help[open] :is(summary,.rules-list li,.rules-list li span){font-size:14px}
@media (forced-colors:active){
 body.game-aside-beside .flappy-layout :is(.game-help[open],.game-help:not([open])>summary:focus-visible){border:1px solid CanvasText}
}
/* Phones: the game keeps the whole screen; the frame's cards begin below it. */
@media (max-width:760px),(max-width:1000px) and (max-height:500px){
 body.game-framed[data-game=flappy]>[data-game-stage]{min-height:100dvh}
}