.game{position:relative;isolation:isolate;overflow:hidden;height:clamp(420px,44vw,500px);
  border-radius:16px;border:1px solid var(--rule);
  background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 78%);
  box-shadow:0 22px 44px -30px rgba(40,25,10,.65)}
.game__intro{color:var(--ink-2);max-width:40rem;margin:.6rem 0 0}
.game__land{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;z-index:0;display:block}
.gb-flip{transform-box:fill-box;transform-origin:0 50%}
.game__book.is-got .gb-flip{animation:gb-flip 1.05s ease-in-out}
.game__book.is-got .gb-glow{animation:gb-glow 1.35s ease-out}
.gb-glow{fill:var(--accent);opacity:0}
@keyframes gb-flip{0%{rotate:0deg}60%,100%{rotate:-180deg}}
@keyframes gb-glow{0%{opacity:.75;scale:.4}100%{opacity:0;scale:1.5}}
.gb-glow{transform-box:fill-box;transform-origin:center}
.game__bar{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;
  gap:.5rem 1rem;flex-wrap:wrap;min-height:3.6rem;padding:.55rem 1.1rem;
  background:color-mix(in oklab,var(--card) 84%,transparent);
  border-bottom:1px solid color-mix(in oklab,var(--ink) 10%,transparent)}
.game:not(.is-on) .game__bar{visibility:hidden}
.game__task{margin:0;font-size:1rem;color:var(--ink-2)}
.game__task b{font:700 1.45rem/1 var(--serif);color:var(--ink);margin-left:.15em}
.game__meta{margin:0;display:flex;gap:1rem;font-weight:700;font-size:.9rem;color:var(--ink-2);white-space:nowrap}
.game__meta [data-score]{color:var(--eo)}
.game__field{position:absolute;inset:0;z-index:2;overflow:hidden;container-type:size}
:root[data-season="autumn"] .game{--g-move:g-fall}
:root[data-season="winter"] .game{--g-move:g-snow}
:root[data-season="spring"] .game{--g-move:g-drift}
:root[data-season="summer"] .game{--g-move:g-rise}
@keyframes g-fall{from{translate:calc(var(--x) * 1cqw) -18cqh}to{translate:calc(var(--x) * 1cqw + 20cqw) 104cqh}}
@keyframes g-snow{0%{translate:calc(var(--x) * 1cqw) -18cqh}50%{translate:calc(var(--x) * 1cqw + 5cqw) 42cqh}100%{translate:calc(var(--x) * 1cqw - 1cqw) 104cqh}}
@keyframes g-drift{0%{translate:-34cqw calc(var(--y) * 1cqh + 18cqh)}50%{translate:38cqw calc(var(--y) * 1cqh + 26cqh)}100%{translate:104cqw calc(var(--y) * 1cqh + 16cqh)}}
@keyframes g-rise{from{translate:calc(var(--x) * 1cqw) 104cqh}to{translate:calc(var(--x) * 1cqw + 18cqw) -20cqh}}
.tok{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .9rem .5rem .55rem;border-radius:999px;cursor:pointer;white-space:nowrap;
  border:1.5px solid color-mix(in oklab,var(--ink) 14%,transparent);
  background:color-mix(in oklab,var(--card) 95%,transparent);color:var(--ink);
  font:700 1.12rem/1 var(--sans);letter-spacing:.01em;
  box-shadow:0 8px 16px -10px rgba(40,25,10,.6);
  animation:var(--g-move) var(--dur) linear var(--del) both;
  transition:border-color .2s,opacity .5s,background-color .2s}
.tok:hover,.tok:focus-visible{animation-play-state:paused;border-color:var(--brand)}
.tok__i{width:22px;height:22px;flex:none;background:var(--ico);
  -webkit-mask:var(--pt-shape-2) center/contain no-repeat;mask:var(--pt-shape-2) center/contain no-repeat;
  animation:tok-sway 2.1s ease-in-out infinite alternate}
@keyframes tok-sway{from{rotate:-18deg}to{rotate:18deg}}
.tok__ru{font-weight:600;color:var(--ink-2)}
.tok--no{opacity:.6;border-style:dashed;cursor:default}
.tok--yes{border-color:var(--eo);background:color-mix(in oklab,var(--eo) 16%,var(--card))}
.tok--gone{opacity:0;pointer-events:none;transition:opacity .9s}
.game.is-paused .tok,.game.is-paused .tok__i{animation-play-state:paused}
.game.is-calm .game__field{display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:.8rem;
  padding:6rem 1rem 0}
.game.is-calm .tok{position:relative;animation:none;translate:none}
.game.is-calm .tok__i{animation:none}
.game__screen{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:1rem;overflow:auto}
.game__screen[hidden]{display:none}
.game__card{width:min(100%,36rem);margin:auto;padding:1.4rem 1.5rem;border-radius:14px;text-align:center;
  background:color-mix(in oklab,var(--card) 96%,transparent);border:1px solid var(--rule);
  box-shadow:0 20px 40px -26px rgba(40,25,10,.7)}
.game__lead{margin:0 0 1.1rem;color:var(--ink-2)}
.game__best{margin:.9rem 0 0;font-size:.88rem;color:var(--ink-3)}
.game__res{font:700 1.45rem/1.2 var(--serif);margin:0 0 .9rem}
.game__words{list-style:none;margin:0 0 1rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.3rem 1.2rem;text-align:left;font-size:.92rem;color:var(--ink-2)}
.game__words li{padding-left:1.2rem;position:relative}
.game__words li::before{position:absolute;left:0;font-weight:800}
.game__words li.is-ok::before{content:"✓";color:var(--eo)}
.game__words li.is-no::before{content:"·";color:var(--ink-3)}
.game__words b{color:var(--ink)}
.game__words i{font-style:normal;color:var(--ink-3);font-size:.85em}
.game__facts{margin:0 0 1.1rem;padding:.75rem .9rem;border-radius:8px;text-align:left;font-size:.92rem;
  background:color-mix(in oklab,var(--eo) 10%,var(--card));color:var(--ink-2)}
.game__act{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:0}
.game__nojs{margin:0 0 .6rem;font-size:.9rem;color:var(--ink-3)}
.game__list{margin:.4rem 0 0;text-align:left;font-size:.92rem;color:var(--ink-2);columns:2;column-gap:1.4rem}
.game__list dt{font-weight:700;color:var(--ink);display:inline}
.game__list dd{display:inline;margin:0}
.game__list dd::after{content:"";display:block;margin-bottom:.25rem}
@media (max-width:720px){
  .game{height:470px;border-radius:12px}
  .tok{font-size:1rem;padding:.45rem .75rem .45rem .5rem}
  .game__task b{font-size:1.25rem}
  .game__words{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.game__book .gb-flip,.game__book .gb-glow{animation:none!important}}