/* 手勢遊戲系列的共同門面：封面（2026-09-29 Roy：「全新的系列，大膽採用豪邁的風格！讓人想抓！」）
   每款只給三個變數：--acc 主色、--acc-ink 主色上的字色、--bg 背景 RGB（逗號分隔）。
   系列固定的：朱砂筆刷、「手勢」印章、思源宋體 Black、壓得下去的厚按鈕。 */
.gk-cover { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 30px; font-family: "Noto Serif TC", serif; color: #fff8ec;
  background: radial-gradient(ellipse at 50% 42%, rgba(var(--bg), .5) 0%, rgba(var(--bg), .9) 55%, rgb(var(--bg)) 100%); }

/* 標題：斜壓在一道朱砂筆刷上，右下蓋章 */
.gk-cover h1 { position: relative; margin: 0 0 .3em; font-weight: 900; font-size: clamp(84px, 11vw, 190px); line-height: 1.1;
  letter-spacing: .02em; text-shadow: 0 .05em 0 #000, 0 .12em .2em rgba(0,0,0,.5);
  transform: rotate(-3deg); animation: gk-slam .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.gk-cover h1::before { content: ''; position: absolute; z-index: -1; inset: 30% -14% -4% -12%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-5%25' y='-20%25' width='110%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .6' numOctaves='3' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='18'/%3E%3C/filter%3E%3Cpath filter='url(%23r)' fill='%23b8261a' d='M14 60 C70 18 190 12 310 20 S394 28 390 46 C384 66 310 78 210 84 S46 96 14 60Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: gk-brush .35s .15s ease-out both; transform-origin: left center; }
.gk-seal { position: absolute; right: -.42em; bottom: -.18em; writing-mode: vertical-rl; font-size: .2em; line-height: 1.05;
  padding: .28em .16em; background: #b8261a; color: #fff3e0; border-radius: 6px; text-shadow: none;
  box-shadow: inset 0 0 0 .07em #b8261a, inset 0 0 0 .13em #fff3e0; transform: rotate(9deg);
  animation: gk-stamp .3s .55s cubic-bezier(.3, 1.6, .5, 1) both; }

.gk-tag { margin: 0; font-weight: 900; font-size: clamp(22px, 2.2vw, 36px); color: rgba(255,248,236,.78);
  animation: gk-rise .4s .7s ease-out both; }

/* 按鈕：厚實、可以壓下去——「想抓」 */
.gk-row { display: flex; gap: 22px; animation: gk-rise .4s .8s ease-out both; }
.gk-cover button { font: 900 clamp(26px, 2.4vw, 40px) "Noto Serif TC", serif; min-width: 5.2em; padding: .4em 1em;
  border: 0; border-radius: 12px; background: var(--acc); color: var(--acc-ink); cursor: pointer;
  box-shadow: 0 .2em 0 rgba(0,0,0,.6), 0 .35em .6em rgba(0,0,0,.35); transition: transform .08s, box-shadow .08s; }
.gk-cover button:hover { transform: translateY(-3px) scale(1.05); }
.gk-cover button:active { transform: translateY(.16em); box-shadow: 0 .04em 0 rgba(0,0,0,.6); }
.gk-cover button.alt { background: rgba(255,248,236,.07); color: #fff8ec;
  box-shadow: inset 0 0 0 3px rgba(255,248,236,.55), 0 .2em 0 rgba(0,0,0,.6); }
.gk-cover button:focus-visible { outline: 3px solid #fff8ec; outline-offset: 4px; }

.gk-cover .err { font: 16px -apple-system, "Segoe UI", "Microsoft JhengHei", sans-serif; color: #ff8a80;
  min-height: 1em; max-width: 80vw; text-align: center; }

@keyframes gk-slam { from { transform: rotate(-3deg) scale(1.7); opacity: 0; } 70% { transform: rotate(-3deg) scale(.96); opacity: 1; } }
@keyframes gk-brush { from { transform: scaleX(0); } }
@keyframes gk-stamp { from { transform: rotate(9deg) scale(2.6); opacity: 0; } }
@keyframes gk-rise { from { transform: translateY(18px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gk-cover *, .gk-cover *::before { animation: none !important; } }
/* 手機：三顆按鈕排不下就換行，不跑出畫面 */
@media (max-width: 700px) { .gk-row { flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 92vw; }
  .gk-cover button { min-width: 4em; } }