/* Snake on a cream checkerboard: the game's name and its button across the top, over the round's
   own area, which snake.js lays the board out in. The panel's size is game-layout.css's
   (data-ideal); the stage fills it. */

/* No `inset`, flex `gap`, `aspect-ratio`, `color-mix` or `translate:`/`scale:` in this file:
   iOS 14.4 has none of them. Spacing is margins. */
.game-root[data-game="snake"] {
  position: relative; display: block; padding: 0; overflow: hidden; text-align: left;
  background: #285e53; color: #f4f1de;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.snk-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* --- the top row: the game's name at the left, its button at the right ----------------------- */
.snk-top { position: absolute; top: 14px; left: 18px; right: 18px; z-index: 2; pointer-events: none; text-align: left; }
.snk-game { font-weight: 700; color: #f4f1de; }
.snk-tools { position: absolute; top: 12px; right: 14px; z-index: 4; display: flex; }
.snk-pill {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border: 1px solid rgba(244, 241, 222, .35); border-radius: 999px;
  background: rgba(8, 40, 32, .25); color: #f4f1de;
  font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap;
}
.snk-pill > * + * { margin-left: 6px; }
.snk-pill:hover:not(:disabled) { border-color: rgba(244, 241, 222, .8); background: rgba(8, 40, 32, .4); }
.snk-pill:disabled { opacity: .45; cursor: default; }
.snk-pill .snk-icon { width: 16px; height: 16px; }
/* The topic page's How to play button, moved into the tools row by snake.js. No `display`
   here: common.css hides it with .topic-howto[hidden], which this would outrank. */
.snk-tools .topic-howto {
  position: static; height: auto; margin: 0 8px 0 0; gap: 0;
  padding: 6px 14px; border: 1px solid rgba(244, 241, 222, .35); border-radius: 999px;
  background: rgba(8, 40, 32, .25); color: #f4f1de;
  font-size: .85rem; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.snk-tools .topic-howto:hover { border-color: rgba(244, 241, 222, .8); background: rgba(8, 40, 32, .4); color: #f4f1de; }
.snk-tools .topic-howto-text { margin-left: 5px; }

/* --- the round's own area --------------------------------------------------------------------
   The top padding clears the row above. Outside the board a vertical swipe still scrolls the
   page; on it (.snk-pad) a swipe steers. */
.snk {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center;
  padding: 50px 12px 10px; box-sizing: border-box; overflow: hidden; text-align: left;
  touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.snk-canvas {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block;
  user-select: none; -webkit-user-select: none;
}
/* Placed over the board by snake.js. */
.snk-pad { position: absolute; z-index: 1; touch-action: none; -webkit-tap-highlight-color: transparent; }

/* The mode, three equal choices; under it the three settings, each a button that steps
   through its own choices. */
.snk-opts { position: relative; z-index: 2; flex: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 0 2px; }
.snk-seg {
  display: flex; margin: 0 6px 8px; padding: 3px; border-radius: 999px;
  background: rgba(6, 34, 27, .3); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22);
}
.snk-seg-btn {
  min-width: 64px; padding: 6px 14px; border: 0; border-radius: 999px; background: none;
  color: rgba(244, 241, 222, .82); font: inherit; font-size: .88rem; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.snk-seg-btn + .snk-seg-btn { margin-left: 2px; }
.snk-seg-btn:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.snk-seg-btn[aria-pressed="true"] { background: #f4f1de; color: #1d5a4c; box-shadow: 0 1px 3px rgba(0, 0, 0, .28); }
.snk-sets { display: flex; margin: 0 6px 8px; }
.snk-set {
  display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid rgba(244, 241, 222, .3); border-radius: 999px;
  background: rgba(6, 34, 27, .22); color: #f4f1de; font: inherit; font-size: .84rem; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.snk-set + .snk-set { margin-left: 6px; }
.snk-set > * + * { margin-left: 6px; }
.snk-set:hover { border-color: rgba(244, 241, 222, .75); background: rgba(6, 34, 27, .38); }
.snk-set .snk-icon, .snk-set .snk-apple-icon { width: 16px; height: 16px; }
@media (max-width: 400px) {
  .snk-seg-btn { min-width: 0; padding: 6px 11px; font-size: .84rem; }
  .snk-set { padding: 5px 9px; font-size: .8rem; }
  .snk-set + .snk-set { margin-left: 4px; }
}

/* Above the canvas but letting every press through to it. */
.snk-hud, .snk-fit, .snk-cap { position: relative; pointer-events: none; }
.snk-hud {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 440px; min-height: 26px; font-size: .9rem; font-weight: 700;
}
.snk-count { display: flex; align-items: center; }
.snk-count > * + * { margin-left: 6px; }
.snk-apple-icon { display: block; flex: none; width: 20px; height: 20px; }
.snk-len { color: rgba(244, 241, 222, .6); font-size: .82rem; font-weight: 600; }

.snk-fit { flex: 1 1 0; min-height: 0; width: 100%; margin-top: 6px; }

/* Two lines tall whatever it says, empty included: the board is laid out in what this leaves,
   so a caption that changed height would move the board as a note comes and goes. */
.snk-cap {
  flex: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 3em; overflow: hidden; line-height: 1.5; margin: 6px 0 0; width: 100%; max-width: 560px; padding: 0 46px;
  color: #f4f1de; font-size: .86rem; font-weight: 600; text-align: center;
}
@media (max-width: 520px) {
  .snk-cap { padding: 0 8px; }
}
/* A note: in, one glow, out. 6s is NOTE_MS in snake.js. */
.snk-cap.is-note { animation: snk-note 6s ease-in-out both; }
/* A short word. 2.2s is FLASH_MS in snake.js. */
.snk-cap.is-flash { animation: snk-flash 2.2s ease-in-out both; }
/* A line that stays until the round moves on, breathing so it is noticed. */
.snk-cap.is-hold { animation: snk-hold 2.4s ease-in-out infinite; }
@keyframes snk-note {
  0% { opacity: 0; }
  6%, 92% { opacity: 1; }
  14%, 40% { transform: translateY(-3px); text-shadow: 0 0 10px rgba(255, 226, 122, .5); }
  52% { transform: translateY(0); text-shadow: none; }
  100% { opacity: 0; }
}
@keyframes snk-flash {
  0% { opacity: 0; transform: translateY(4px); }
  12% { opacity: 1; transform: translateY(-3px); text-shadow: 0 0 10px rgba(255, 226, 122, .5); }
  30%, 80% { opacity: 1; transform: translateY(0); text-shadow: none; }
  100% { opacity: 0; }
}
@keyframes snk-hold {
  0%, 100% { opacity: .78; }
  50% { opacity: 1; text-shadow: 0 0 10px rgba(255, 226, 122, .45); }
}

/* New game and Pause, in the middle under the caption, level with the speaker. */
.snk-ctrl { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: center; min-height: 38px; margin-top: 4px; }
.snk-ctrl .snk-pill {
  height: 38px; padding: 0 16px; box-sizing: border-box; border: 0;
  background: rgba(244, 241, 222, .9); color: #1d5a4c; font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.snk-ctrl .snk-pill + .snk-pill { margin-left: 8px; }
.snk-ctrl .snk-pill:hover:not(:disabled) { background: #fff; }
/* On a phone Pause is its icon alone, or the pair reaches the speaker in the corner. */
@media (max-width: 520px) {
  .snk-ctrl .snk-pause { width: 38px; padding: 0; justify-content: center; }
  .snk-ctrl .snk-pause .snk-pill-label { display: none; }
}
.snk-round {
  width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(244, 241, 222, .9); color: #1d5a4c; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.snk-round:hover { background: #fff; }
.snk-round .snk-sicon { width: 22px; height: 22px; }

/* The speaker, and the dots beside it that open the menu. The dots take no room until shown
   (hover, focus, or the menu open); a screen that cannot hover shows them always, dimmer. The
   menu opens upward. */
.snk-audio { position: absolute; right: 12px; bottom: 10px; z-index: 3; display: flex; align-items: center; }
.snk-more {
  display: grid; place-items: center; width: 0; height: 38px; padding: 0; overflow: hidden;
  border: 0; background: none; color: rgba(244, 241, 222, .75); cursor: pointer; opacity: 0;
  transition: opacity .15s ease;
}
.snk-audio:hover .snk-more, .snk-audio:focus-within .snk-more, .snk-audio.is-open .snk-more { width: 30px; opacity: 1; }
@media (hover: none) { .snk-more { width: 30px; opacity: .6; } }
.snk-more .snk-sicon { width: 22px; height: 22px; }
.snk-ellipsis { stroke-width: 3.4; }
.snk-menu {
  position: absolute; right: 0; bottom: 46px; min-width: 200px; padding: 6px; box-sizing: border-box;
  border: 1px solid rgba(29, 90, 76, .2); border-radius: 12px; background: rgba(253, 252, 246, .97);
  box-shadow: 0 6px 20px rgba(0, 30, 20, .25);
}
.snk-menu[hidden] { display: none; }
.snk-opt {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 10px;
  border: 0; border-radius: 8px; background: none; color: #24402f; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; text-align: left;
}
.snk-opt > * + * { margin-left: 16px; }
.snk-opt:hover, .snk-opt:focus-visible { background: rgba(29, 90, 76, .08); }
.snk-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: rgba(29, 90, 76, .25); transition: background .15s ease; }
.snk-sw::after {
  content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s ease;
}
.snk-opt[aria-checked="true"] .snk-sw { background: #3fae73; }
.snk-opt[aria-checked="true"] .snk-sw::after { transform: translateX(14px); }
.snk-sicon { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.snk-cone { fill: currentColor; stroke: none; }
.snk-sound.off .snk-waves { display: none; }
.snk-sound:not(.off) .snk-slash { display: none; }
.snk-icon { width: 18px; height: 18px; flex: none; }

/* --- over the stage: the panel dims it, unblurred so the last board still reads, and a sheet
   in its middle holds the card --------------------------------------------------------------- */
.snk-win { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; }
.snk-win:empty { pointer-events: none; }
.snk-panel {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 20px; text-align: center; overflow-y: auto;
  background: rgba(10, 40, 32, .38);
  animation: snk-in .35s ease-out;
}
@keyframes snk-in { from { opacity: 0; } }
/* Centred with auto margins rather than justify-content: a sheet taller than the stage scrolls
   from its top instead of losing it. */
.snk-panel > * { flex: none; }
.snk-panel > :first-child { margin-top: auto; margin-bottom: auto; }
.snk-sheet {
  position: relative; display: flex; flex-direction: column; align-items: center; width: 440px; max-width: 100%; box-sizing: border-box;
  padding: 26px 18px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 20px;
  background: rgba(250, 248, 238, .95); color: #24402f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 12px 32px rgba(0, 30, 20, .3);
}
.snk-sheet > * + * { margin-top: 14px; }
.snk-title { margin: 0; font-size: 1.6rem; font-weight: 700; color: #1d5a4c; }
/* Each letter's delay is set by snake.js. */
.snk-word { white-space: nowrap; }
.snk-ch { display: inline-block; animation: snk-wave .5s ease-in-out both; }
@keyframes snk-wave { 40% { transform: translateY(-.35em); } }
.snk-view { display: flex; flex-direction: column; align-items: center; text-align: center; }
.snk-view p { margin: 0; }
.snk-view p + p { margin-top: 4px; }
.snk-view-line { color: #24402f; font-weight: 600; }
.snk-view-small { font-size: .8rem; color: #7d8b82; }
.snk-ask { display: flex; flex-direction: column; align-items: center; color: #3c5446; }
.snk-ask > p { margin: 0; }
/* With the buttons' own 5px, 10px between the rows. */
.snk-moods { display: flex; flex-wrap: wrap; justify-content: center; margin: 5px -5px 0; }
.snk-mood {
  display: inline-flex; align-items: center; margin: 5px; padding: 8px 14px;
  border: 1px solid var(--c-border); border-radius: 999px; background: #fff; color: var(--c-text);
  font: inherit; cursor: pointer;
}
.snk-mood > * + * { margin-left: 8px; }
.snk-mood:hover { border-color: var(--c-primary); }
.snk-mood.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.snk-mood .snk-icon { width: 22px; height: 22px; }
.snk-ask .snk-note { min-height: 1.3em; margin: 5px 0 0; font-size: .9rem; color: var(--c-text-soft); }
.snk-key {
  display: inline-block; min-width: 1.6em; padding: 1px 6px; margin: 0 1px;
  border: 1px solid #c9ced8; border-bottom-width: 2px; border-radius: 5px; background: #fff;
  font: inherit; font-size: .85em; font-weight: 700; line-height: 1.4; text-align: center; color: var(--c-text);
}
.snk-choices { display: flex; flex-wrap: wrap; justify-content: center; }
.snk-sheet > .snk-choices { margin-top: 8px; }
.snk-choices .btn { display: inline-flex; align-items: center; margin: 6px; }
.snk-choices .btn > * + * { margin-left: 8px; }
.snk-choices .snk-icon { stroke-width: 2.2; }
@media (max-width: 520px) {
  .snk-panel { padding: 12px; }
  .snk-sheet { padding: 22px 10px; }
  .snk-choices .btn { margin: 4px; padding: 10px 14px; }
}

/* The rules before the first round: a sentence, a little board, the scene dots. The board is
   drawn at a fixed size (MINI_W x MINI_H in snake.js) and only scaled to fit. */
.snk-sheet.snk-intro { width: 460px; }
.snk-sheet.snk-intro > * + * { margin-top: 16px; }
.snk-intro-line {
  display: flex; align-items: center; justify-content: center; min-height: 4.5em; margin: 0;
  color: #24402f; font-weight: 700; line-height: 1.5; text-align: center;
}
.snk-mini { position: relative; width: 100%; }
.snk-mini-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.snk-mini-cv { position: absolute; left: 0; top: 0; display: block; }
/* The lesson's hand. snake.js places it with transform; left/top put the fingertip (34.4% 5.9%
   of the icon) on the point it is moved to. */
.snk-hand {
  position: absolute; left: -10.3px; top: -1.9px; z-index: 100; pointer-events: none;
  width: 30px; height: 31.9px; transform-origin: 34.4% 5.9%; opacity: 0;
  transition: transform .34s cubic-bezier(.2, .7, .3, 1), opacity .25s ease;
}
.snk-hand svg { position: relative; display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.snk-hand::before {
  content: ''; position: absolute; left: 34.4%; top: 5.9%; width: 21px; height: 21px;
  border-radius: 50%; background: rgba(255, 226, 122, .55); box-shadow: 0 0 0 2px rgba(255, 255, 255, .8);
  transform: translate(-50%, -50%) scale(0); opacity: 0; transition: transform .2s ease-out, opacity .2s ease-out;
}
.snk-hand.is-down::before { transform: translate(-50%, -50%) scale(1); opacity: 1; }
/* The arrow keys, as they sit on a keyboard. Hidden in the scenes that do not turn, but still
   taking their room, so the sheet keeps its height from scene to scene. */
.snk-keys { display: flex; flex-direction: column; align-items: center; }
.snk-keys.is-off { visibility: hidden; }
.snk-keys-row { display: flex; }
.snk-kbd {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 30px; margin: 2px;
  border: 1px solid #c9ced8; border-bottom-width: 3px; border-radius: 7px; background: #fff; color: #3c5446;
  transition: transform .08s ease, background .08s ease, border-bottom-width .08s ease;
}
.snk-kbd.is-down { transform: translateY(2px); border-bottom-width: 1px; background: #ffe27a; border-color: #d9b94a; }
.snk-kbd-arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.snk-steps { display: flex; }
.snk-steps i { display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(29, 90, 76, .22); transition: background .25s ease; }
.snk-steps i + i { margin-left: 8px; }
.snk-steps i.on { background: #3fae73; }

/* The review build's tools, under the game panel and outside it. */
.snk-review {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  margin: 10px auto 0; padding: 8px; font-size: .85rem; color: #4a5766;
}
.snk-review > * { margin: 4px; }
.snk-review button { font: inherit; padding: 4px 8px; border-radius: 8px; border: 1px solid #ccc; background: #fff; }

/* #game-root itself is the element that goes full screen; these same rules are the
   fixed-position fallback for a browser without the Fullscreen API. game-layout.css gives a
   [data-ideal] panel an explicit width and height, which would beat the fallback's offsets. */
#game-root.snk-fs {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200; margin: 0; padding: 0;
  width: auto; height: auto; max-width: none;
  border: 0; border-radius: 0; box-shadow: none; min-height: 0; overflow: hidden;
}
body.snk-locked { overflow: hidden; }