/* Go on a green table: the game's name and its button across the top, over the round's own area,
   which go.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="go"] {
  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;
}
.wq-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 ----------------------- */
.wq-top { position: absolute; top: 14px; left: 18px; right: 18px; z-index: 2; pointer-events: none; text-align: left; }
.wq-game { font-weight: 700; color: #f4f1de; }
.wq-tools { position: absolute; top: 12px; right: 14px; z-index: 4; display: flex; }
.wq-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;
}
.wq-pill > * + * { margin-left: 6px; }
.wq-pill:hover:not(:disabled) { border-color: rgba(244, 241, 222, .8); background: rgba(10, 45, 28, .4); }
.wq-pill:disabled { opacity: .45; cursor: default; }
.wq-pill .wq-icon { width: 16px; height: 16px; }
/* The topic page's How to play button, moved into the tools row by go.js. No `display`
   here: common.css hides it with .topic-howto[hidden], which this would outrank. */
.wq-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;
}
.wq-tools .topic-howto:hover { border-color: rgba(244, 241, 222, .8); background: rgba(10, 45, 28, .4); color: #f4f1de; }
.wq-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. */
.wq {
  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;
}
.wq-canvas {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block;
  user-select: none; -webkit-user-select: none;
}
.wq-canvas.is-point { cursor: pointer; }

/* Which computer, and who starts: two rows of equal choices, side by side where they fit. */
.wq-opts { position: relative; z-index: 2; flex: none; display: flex; flex-wrap: wrap; justify-content: center; margin: 0 0 2px; }
.wq-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);
}
.wq-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;
}
.wq-seg-btn + .wq-seg-btn { margin-left: 2px; }
.wq-seg-btn:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.wq-seg-btn[aria-pressed="true"] { background: #f4f1de; color: #1f5a3c; box-shadow: 0 1px 3px rgba(0, 0, 0, .28); }
@media (max-width: 380px) {
  .wq-seg-btn { min-width: 0; padding: 6px 11px; font-size: .84rem; }
}
/* `wq-up`, set by go.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. */
.wq-up .wq { padding-top: 84px; }
.wq-up .wq-opts { position: absolute; top: 18px; left: 0; right: 0; }
.wq-up .wq-top { top: 17px; }

/* Above the canvas but letting every press through to it. */
.wq-hud, .wq-fit, .wq-cap { position: relative; pointer-events: none; }
.wq-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. */
.wq-side { flex: 1 1 0; display: flex; align-items: center; opacity: .5; transition: opacity .2s ease; white-space: nowrap; }
.wq-them { justify-content: flex-end; }
.wq-side.is-on { opacity: 1; }
.wq-dot { flex: none; width: 20px; height: 20px; stroke-width: 1.5; }
.wq-dot.is-black { fill: #17171a; stroke: #4a4a50; }
.wq-dot.is-white { fill: #f7f5ef; stroke: #b9b3a3; }
.wq-you .wq-dot { margin-right: 7px; }
.wq-them .wq-dot { margin-left: 7px; }
.wq-turn { flex: none; padding: 0 8px; color: #ffe27a; font-size: .86rem; text-align: center; }
.wq-turn.is-ai { color: #f4f1de; }
/* While the computer thinks, which can take a second or two. */
.wq-turn.is-thinking { animation: wq-think 1.2s ease-in-out infinite; }
@keyframes wq-think { 50% { opacity: .45; } }

.wq-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. */
.wq-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) {
  .wq-cap { height: 4.5em; padding: 0 8px; }
}
/* A note: in, one glow, out. 6s is NOTE_MS in go.js. */
.wq-cap.is-note { animation: wq-note 6s ease-in-out both; }
@keyframes wq-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; }
}

/* Pass and New game, in the middle under the caption, level with the speaker. */
.wq-ctrl { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: center; min-height: 38px; margin-top: 4px; }
.wq-ctrl .wq-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);
}
.wq-ctrl .wq-pill + .wq-pill { margin-left: 10px; }
.wq-ctrl .wq-pill:hover:not(:disabled) { background: #fff; }
/* Two pills are wider than the gap the speaker leaves on a phone: centre them in the room to the
   speaker's left (46px: its 38 + a little), a little tighter. */
@media (max-width: 520px) {
  .wq-ctrl { width: 100%; box-sizing: border-box; padding-right: 46px; }
  .wq-ctrl .wq-pill { padding: 0 12px; }
  .wq-ctrl .wq-pill + .wq-pill { margin-left: 8px; }
}
.wq-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);
}
.wq-round:hover { background: #fff; }
.wq-round .wq-sicon { width: 22px; height: 22px; }

/* The speaker, which switches the sounds off and on. */
.wq-audio { position: absolute; right: 12px; bottom: 10px; z-index: 3; display: flex; align-items: center; }
.wq-sicon { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wq-cone { fill: currentColor; stroke: none; }
.wq-sound.off .wq-waves { display: none; }
.wq-sound:not(.off) .wq-slash { display: none; }
.wq-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 ---------------------------------------------------------- */
.wq-win { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; }
.wq-win:empty { pointer-events: none; }
.wq-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: wq-in .35s ease-out;
}
@keyframes wq-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. */
.wq-panel > * { flex: none; }
.wq-panel > :first-child { margin-top: auto; margin-bottom: auto; }
.wq-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);
}
.wq-sheet > * + * { margin-top: 14px; }
.wq-title { margin: 0; font-size: 1.6rem; font-weight: 700; color: #1f5a3c; }
/* Each letter's delay is set by go.js. */
.wq-word { white-space: nowrap; }
.wq-ch { display: inline-block; animation: wq-wave .5s ease-in-out both; }
@keyframes wq-wave { 40% { transform: translateY(-.35em); } }
.wq-view { display: flex; flex-direction: column; align-items: center; text-align: center; }
.wq-view p { margin: 0; }
.wq-view p + p { margin-top: 4px; }
.wq-view-result { font-size: 1.05rem; font-weight: 800; color: #1f5a3c; }
.wq-view-line { color: #24402f; }
.wq-view-small { font-size: .8rem; color: #7d8b82; }
.wq-ask { display: flex; flex-direction: column; align-items: center; color: #3c5446; }
.wq-ask > p { margin: 0; }
/* With the buttons' own 5px, 10px between the rows. */
.wq-moods { display: flex; flex-wrap: wrap; justify-content: center; margin: 5px -5px 0; }
.wq-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;
}
.wq-mood > * + * { margin-left: 8px; }
.wq-mood:hover { border-color: var(--c-primary); }
.wq-mood.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.wq-mood .wq-icon { width: 22px; height: 22px; }
.wq-ask .wq-note { min-height: 1.3em; margin: 5px 0 0; font-size: .9rem; color: var(--c-text-soft); }
.wq-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);
}
.wq-choices { display: flex; flex-wrap: wrap; justify-content: center; }
.wq-sheet > .wq-choices { margin-top: 8px; }
.wq-choices .btn { display: inline-flex; align-items: center; margin: 6px; }
.wq-choices .btn > * + * { margin-left: 8px; }
.wq-choices .wq-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) {
  .wq-panel { padding: 12px; }
  .wq-sheet { padding: 22px 10px; }
  .wq-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 go.js) and only scaled to fit. */
.wq-sheet.wq-intro { width: 460px; }
.wq-sheet.wq-intro > * + * { margin-top: 16px; }
.wq-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;
}
.wq-mini { position: relative; width: 100%; transition: opacity .22s ease; }
.wq-mini.is-reset { opacity: 0; }
.wq-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);
}
.wq-mini-svg { position: absolute; left: 0; top: 0; display: block; }
.wq-mini-svg path { fill: none; stroke: rgba(54, 32, 10, .85); stroke-width: 1; }
/* 19px across on the small board's 21px spacing. Placed by left/top on its point; the transform
   keeps it centred there. */
.wq-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);
}
.wq-mini-stone.is-black { background: radial-gradient(circle at 32% 30%, #6c6c72, #2b2b30 35%, #0b0b0d); }
.wq-mini-stone.is-white { background: radial-gradient(circle at 32% 30%, #fff, #f1eee6 55%, #cdc8bb); }
.wq-mini-stone.is-drop { animation: wq-mini-drop .26s cubic-bezier(.4, 0, .6, 1) both; }
@keyframes wq-mini-drop { from { opacity: .3; transform: translate(-50%, -70%) scale(1.3); } }
/* A captured stone lifting off. */
.wq-mini-stone.is-gone { animation: wq-mini-gone .3s ease-in forwards; }
@keyframes wq-mini-gone { to { opacity: 0; transform: translate(-50%, -110%) scale(1.25); } }
/* The count: a small square of its owner's colour on a point. */
.wq-mini-mark {
  position: absolute; left: 0; top: 0; width: 7px; height: 7px; transform: translate(-50%, -50%);
  animation: wq-mini-mark .16s ease-out both;
}
.wq-mini-mark.is-black { background: #1d1d21; }
.wq-mini-mark.is-white { background: #f6f4ee; box-shadow: 0 0 0 1px rgba(60, 50, 30, .45); }
@keyframes wq-mini-mark { from { opacity: 0; transform: translate(-50%, -50%) scale(.5); } }
.wq-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: wq-mini-say .4s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes wq-mini-say { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } }
/* The lesson's hand. go.js places it with transform; left/top put the fingertip (34.4% 5.9% of
   the icon) on the point it is moved to. */
.wq-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;
}
.wq-hand svg { position: relative; display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.wq-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;
}
.wq-hand.is-down::before { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.wq-mini.is-instant .wq-hand { transition: none; }
.wq-steps { display: flex; }
.wq-steps i { display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(31, 90, 60, .22); transition: background .25s ease; }
.wq-steps i + i { margin-left: 8px; }
.wq-steps i.on { background: #3fae73; }

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