/* Gomoku on a green table: the game's name and its button across the top, over the round's own
   area, which gomoku.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="gomoku"] {
  position: relative; display: block; padding: 0; overflow: hidden; text-align: left;
  background: #2b7550; color: #f4f1de;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.gmk-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 ----------------------- */
.gmk-top { position: absolute; top: 14px; left: 18px; right: 18px; z-index: 2; pointer-events: none; text-align: left; }
.gmk-game { font-weight: 700; color: #f4f1de; }
.gmk-tools { position: absolute; top: 12px; right: 14px; z-index: 4; display: flex; }
.gmk-pill {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border: 1px solid rgba(244, 241, 222, .35); border-radius: 999px;
  background: rgba(10, 45, 28, .25); color: #f4f1de;
  font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap;
}
.gmk-pill > * + * { margin-left: 6px; }
.gmk-pill:hover:not(:disabled) { border-color: rgba(244, 241, 222, .8); background: rgba(10, 45, 28, .4); }
.gmk-pill:disabled { opacity: .45; cursor: default; }
.gmk-pill .gmk-icon { width: 16px; height: 16px; }
/* The topic page's How to play button, moved into the tools row by gomoku.js. No `display`
   here: common.css hides it with .topic-howto[hidden], which this would outrank. */
.gmk-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(10, 45, 28, .25); color: #f4f1de;
  font-size: .85rem; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.gmk-tools .topic-howto:hover { border-color: rgba(244, 241, 222, .8); background: rgba(10, 45, 28, .4); color: #f4f1de; }
.gmk-tools .topic-howto-text { margin-left: 5px; }

/* --- the round's own area --------------------------------------------------------------------
   The top padding clears the row above. A vertical swipe still scrolls the page; a point acts
   on a tap. */
.gmk {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center;
  padding: 52px 12px 10px; box-sizing: border-box; overflow: hidden; text-align: left;
  touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.gmk-canvas {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block;
  user-select: none; -webkit-user-select: none;
}
.gmk-canvas.is-point { cursor: pointer; }

/* Which computer, and who starts: two rows of equal choices, side by side where they fit. */
.gmk-opts { position: relative; z-index: 2; flex: none; display: flex; flex-wrap: wrap; justify-content: center; margin: 0 0 2px; }
.gmk-seg {
  display: flex; margin: 0 6px 8px; padding: 3px; border-radius: 999px;
  background: rgba(8, 40, 24, .3); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22);
}
.gmk-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;
}
.gmk-seg-btn + .gmk-seg-btn { margin-left: 2px; }
.gmk-seg-btn:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.gmk-seg-btn[aria-pressed="true"] { background: #f4f1de; color: #1f5a3c; box-shadow: 0 1px 3px rgba(0, 0, 0, .28); }
@media (max-width: 380px) {
  .gmk-seg-btn { min-width: 0; padding: 6px 11px; font-size: .84rem; }
}
/* `gmk-up`, set by gomoku.js where the top row holds them: the switches on one line with the
   game's name and the buttons, and the sides and the board up into the room they leave. */
.gmk-up .gmk { padding-top: 84px; }
.gmk-up .gmk-opts { position: absolute; top: 18px; left: 0; right: 0; }
.gmk-up .gmk-top { top: 17px; }

/* Above the canvas but letting every press through to it. */
.gmk-hud, .gmk-fit, .gmk-cap { position: relative; pointer-events: none; }
.gmk-hud {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 480px; min-height: 28px; font-size: .9rem; font-weight: 700;
}
/* The two sides: whoever is to move is bright, the other faint. */
.gmk-side { flex: 1 1 0; display: flex; align-items: center; opacity: .5; transition: opacity .2s ease; white-space: nowrap; }
.gmk-them { justify-content: flex-end; }
.gmk-side.is-on { opacity: 1; }
.gmk-dot { flex: none; width: 20px; height: 20px; stroke-width: 1.5; }
.gmk-dot.is-black { fill: #17171a; stroke: #4a4a50; }
.gmk-dot.is-white { fill: #f7f5ef; stroke: #b9b3a3; }
.gmk-you .gmk-dot { margin-right: 7px; }
.gmk-them .gmk-dot { margin-left: 7px; }
.gmk-turn { flex: none; padding: 0 8px; color: #ffe27a; font-size: .86rem; text-align: center; }
.gmk-turn.is-ai { color: #f4f1de; }

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

/* 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. */
.gmk-cap {
  flex: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 3em; overflow: hidden; line-height: 1.5; margin: 4px 0 0; width: 100%; max-width: 560px; padding: 0 46px;
  color: #f4f1de; font-size: .86rem; font-weight: 600; text-align: center;
}
/* The notes run to three lines on a phone; two would cut them off. */
@media (max-width: 520px) {
  .gmk-cap { height: 4.5em; padding: 0 8px; }
}
/* A note: in, one glow, out. 6s is NOTE_MS in gomoku.js. */
.gmk-cap.is-note { animation: gmk-note 6s ease-in-out both; }
@keyframes gmk-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; }
}

/* New game, in the middle under the caption, level with the speaker. */
.gmk-ctrl { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: center; min-height: 38px; margin-top: 4px; }
.gmk-ctrl .gmk-pill {
  height: 38px; padding: 0 16px; box-sizing: border-box; border: 0;
  background: rgba(244, 241, 222, .9); color: #1f5a3c; font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.gmk-ctrl .gmk-pill:hover:not(:disabled) { background: #fff; }
.gmk-round {
  width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(244, 241, 222, .9); color: #1f5a3c; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.gmk-round:hover { background: #fff; }
.gmk-round .gmk-sicon { width: 22px; height: 22px; }

/* The speaker, which switches the sounds off and on. */
.gmk-audio { position: absolute; right: 12px; bottom: 10px; z-index: 3; display: flex; align-items: center; }
.gmk-sicon { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gmk-cone { fill: currentColor; stroke: none; }
.gmk-sound.off .gmk-waves { display: none; }
.gmk-sound:not(.off) .gmk-slash { display: none; }
.gmk-icon { width: 18px; height: 18px; flex: none; }

/* --- over the stage: the panel dims it, unblurred so the finished board still reads, and a
   sheet in its middle holds the card ---------------------------------------------------------- */
.gmk-win { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; }
.gmk-win:empty { pointer-events: none; }
.gmk-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(16, 52, 32, .38);
  animation: gmk-in .35s ease-out;
}
@keyframes gmk-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. */
.gmk-panel > * { flex: none; }
.gmk-panel > :first-child { margin-top: auto; margin-bottom: auto; }
.gmk-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, .94); color: #24402f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 12px 32px rgba(0, 30, 15, .3);
}
.gmk-sheet > * + * { margin-top: 14px; }
.gmk-title { margin: 0; font-size: 1.6rem; font-weight: 700; color: #1f5a3c; }
/* Each letter's delay is set by gomoku.js. */
.gmk-word { white-space: nowrap; }
.gmk-ch { display: inline-block; animation: gmk-wave .5s ease-in-out both; }
@keyframes gmk-wave { 40% { transform: translateY(-.35em); } }
.gmk-view { display: flex; flex-direction: column; align-items: center; text-align: center; }
.gmk-view p { margin: 0; }
.gmk-view p + p { margin-top: 4px; }
.gmk-view-line { color: #24402f; }
.gmk-view-small { font-size: .8rem; color: #7d8b82; }
.gmk-ask { display: flex; flex-direction: column; align-items: center; color: #3c5446; }
.gmk-ask > p { margin: 0; }
/* With the buttons' own 5px, 10px between the rows. */
.gmk-moods { display: flex; flex-wrap: wrap; justify-content: center; margin: 5px -5px 0; }
.gmk-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;
}
.gmk-mood > * + * { margin-left: 8px; }
.gmk-mood:hover { border-color: var(--c-primary); }
.gmk-mood.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.gmk-mood .gmk-icon { width: 22px; height: 22px; }
.gmk-ask .gmk-note { min-height: 1.3em; margin: 5px 0 0; font-size: .9rem; color: var(--c-text-soft); }
.gmk-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);
}
.gmk-choices { display: flex; flex-wrap: wrap; justify-content: center; }
.gmk-sheet > .gmk-choices { margin-top: 8px; }
.gmk-choices .btn { display: inline-flex; align-items: center; margin: 6px; }
.gmk-choices .btn > * + * { margin-left: 8px; }
.gmk-choices .gmk-icon { stroke-width: 2.2; }
/* Measured on Tic-Tac-Toe's identical card: this is what lets Play again and Try Master share a
   row on a 360px-wide phone. */
@media (max-width: 520px) {
  .gmk-panel { padding: 12px; }
  .gmk-sheet { padding: 22px 10px; }
  .gmk-choices .btn { margin: 4px; padding: 10px 14px; }
}

/* The rules before the first game: a sentence, a small board, the scene dots. The board is drawn
   at a fixed size (MINI in gomoku.js) and only scaled to fit. */
.gmk-sheet.gmk-intro { width: 460px; }
.gmk-sheet.gmk-intro > * + * { margin-top: 16px; }
.gmk-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;
}
.gmk-mini { position: relative; width: 100%; transition: opacity .22s ease; }
.gmk-mini.is-reset { opacity: 0; }
.gmk-mini-in {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; border-radius: 8px;
  background: linear-gradient(160deg, #e8c283, #ddb06b 50%, #d09d57);
  box-shadow: 0 4px 10px rgba(60, 35, 10, .3), inset 0 0 0 1px rgba(255, 240, 210, .45);
}
.gmk-mini-svg { position: absolute; left: 0; top: 0; display: block; }
.gmk-mini-svg path { fill: none; stroke: rgba(54, 32, 10, .85); stroke-width: 1; }
/* 19px across: the real board's stone to its line spacing (0.92) at the small board's 21px.
   Placed by left/top on its point; the transform keeps it centred there. */
.gmk-mini-stone {
  position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%;
  transform: translate(-50%, -50%); box-shadow: 1px 2px 2px rgba(50, 26, 4, .4);
}
.gmk-mini-stone.is-black { background: radial-gradient(circle at 32% 30%, #6c6c72, #2b2b30 35%, #0b0b0d); }
.gmk-mini-stone.is-white { background: radial-gradient(circle at 32% 30%, #fff, #f1eee6 55%, #cdc8bb); }
.gmk-mini-stone.is-drop { animation: gmk-mini-drop .26s cubic-bezier(.4, 0, .6, 1) both; }
@keyframes gmk-mini-drop { from { opacity: .3; transform: translate(-50%, -70%) scale(1.3); } }
.gmk-mini-stone.is-pop { animation: gmk-mini-pop .38s ease-out; }
@keyframes gmk-mini-pop { 45% { transform: translate(-50%, -50%) scale(1.25); } }
/* The five's line: from the first stone, turned and stretched along the row by gomoku.js. */
.gmk-mini-line {
  position: absolute; z-index: 60; height: 5px; margin-top: -2.5px; border-radius: 3px;
  background: rgba(255, 210, 80, .95); box-shadow: 0 0 6px rgba(255, 220, 120, .7);
  transform-origin: 0 50%; transition: transform .5s ease-out;
}
.gmk-mini-say {
  position: absolute; left: 50%; top: 88%; z-index: 90; transform: translate(-50%, -50%);
  padding: 4px 11px; border-radius: 999px; background: #1f5a3c; color: #fff;
  font-size: 13px; font-weight: 800; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 30, 15, .35);
  animation: gmk-mini-say .4s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes gmk-mini-say { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } }
/* The lesson's hand. gomoku.js places it with transform; left/top put the fingertip
   (34.4% 5.9% of the icon) on the point it is moved to. */
.gmk-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 .5s cubic-bezier(.2, .7, .3, 1), opacity .3s ease;
}
.gmk-hand svg { position: relative; display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.gmk-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 .25s ease-out, opacity .25s ease-out;
}
.gmk-hand.is-down::before { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.gmk-mini.is-instant .gmk-hand { transition: none; }
.gmk-steps { display: flex; }
.gmk-steps i { display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(31, 90, 60, .22); transition: background .25s ease; }
.gmk-steps i + i { margin-left: 8px; }
.gmk-steps i.on { background: #3fae73; }

/* The review build's tools, under the game panel and outside it. */
.gmk-review {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  margin: 10px auto 0; padding: 8px; font-size: .85rem; color: #4a5766;
}
.gmk-review > * { margin: 4px; }
.gmk-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.gmk-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.gmk-locked { overflow: hidden; }