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

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

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

.ttt-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. */
.ttt-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) {
  .ttt-cap { height: 4.5em; padding: 0 8px; }
}
/* A note: in, one glow, out. 6s is NOTE_MS in tic-tac-toe.js. */
.ttt-cap.is-note { animation: ttt-note 6s ease-in-out both; }
/* A short word. 2.2s is FLASH_MS in tic-tac-toe.js. */
.ttt-cap.is-flash { animation: ttt-flash 2.2s ease-in-out both; }
@keyframes ttt-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 ttt-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; }
}

/* New game, in the middle under the caption, level with the speaker. */
.ttt-ctrl { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: center; min-height: 38px; margin-top: 4px; }
.ttt-ctrl .ttt-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);
}
.ttt-ctrl .ttt-pill:hover:not(:disabled) { background: #fff; }
.ttt-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);
}
.ttt-round:hover { background: #fff; }
.ttt-round .ttt-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. */
.ttt-audio { position: absolute; right: 12px; bottom: 10px; z-index: 3; display: flex; align-items: center; }
.ttt-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;
}
.ttt-audio:hover .ttt-more, .ttt-audio:focus-within .ttt-more, .ttt-audio.is-open .ttt-more { width: 30px; opacity: 1; }
@media (hover: none) { .ttt-more { width: 30px; opacity: .6; } }
.ttt-more .ttt-sicon { width: 22px; height: 22px; }
.ttt-ellipsis { stroke-width: 3.4; }
.ttt-menu {
  position: absolute; right: 0; bottom: 46px; min-width: 200px; padding: 6px; box-sizing: border-box;
  border: 1px solid rgba(31, 90, 60, .2); border-radius: 12px; background: rgba(253, 252, 246, .97);
  box-shadow: 0 6px 20px rgba(0, 30, 15, .25);
}
.ttt-menu[hidden] { display: none; }
.ttt-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;
}
.ttt-opt > * + * { margin-left: 16px; }
.ttt-opt:hover, .ttt-opt:focus-visible { background: rgba(31, 90, 60, .08); }
.ttt-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: rgba(31, 90, 60, .25); transition: background .15s ease; }
.ttt-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;
}
.ttt-opt[aria-checked="true"] .ttt-sw { background: #3fae73; }
.ttt-opt[aria-checked="true"] .ttt-sw::after { transform: translateX(14px); }
.ttt-sicon { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ttt-cone { fill: currentColor; stroke: none; }
.ttt-sound.off .ttt-waves { display: none; }
.ttt-sound:not(.off) .ttt-slash { display: none; }
.ttt-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 ---------------------------------------------------------- */
.ttt-win { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; }
.ttt-win:empty { pointer-events: none; }
.ttt-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: ttt-in .35s ease-out;
}
@keyframes ttt-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. */
.ttt-panel > * { flex: none; }
.ttt-panel > :first-child { margin-top: auto; margin-bottom: auto; }
.ttt-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);
}
.ttt-sheet > * + * { margin-top: 14px; }
.ttt-title { margin: 0; font-size: 1.6rem; font-weight: 700; color: #1f5a3c; }
/* Each letter's delay is set by tic-tac-toe.js. */
.ttt-word { white-space: nowrap; }
.ttt-ch { display: inline-block; animation: ttt-wave .5s ease-in-out both; }
@keyframes ttt-wave { 40% { transform: translateY(-.35em); } }
.ttt-view { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ttt-view p { margin: 0; }
.ttt-view p + p { margin-top: 4px; }
.ttt-view-line { color: #24402f; }
.ttt-view-small { font-size: .8rem; color: #7d8b82; }
.ttt-ask { display: flex; flex-direction: column; align-items: center; color: #3c5446; }
.ttt-ask > p { margin: 0; }
/* With the buttons' own 5px, 10px between the rows. */
.ttt-moods { display: flex; flex-wrap: wrap; justify-content: center; margin: 5px -5px 0; }
.ttt-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;
}
.ttt-mood > * + * { margin-left: 8px; }
.ttt-mood:hover { border-color: var(--c-primary); }
.ttt-mood.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.ttt-mood .ttt-icon { width: 22px; height: 22px; }
.ttt-ask .ttt-note { min-height: 1.3em; margin: 5px 0 0; font-size: .9rem; color: var(--c-text-soft); }
.ttt-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);
}
.ttt-choices { display: flex; flex-wrap: wrap; justify-content: center; }
.ttt-sheet > .ttt-choices { margin-top: 8px; }
.ttt-choices .btn { display: inline-flex; align-items: center; margin: 6px; }
.ttt-choices .btn > * + * { margin-left: 8px; }
.ttt-choices .ttt-icon { stroke-width: 2.2; }
/* Measured: this is what lets Play again and Try Master share a row on a 360px-wide phone. */
@media (max-width: 520px) {
  .ttt-panel { padding: 12px; }
  .ttt-sheet { padding: 22px 10px; }
  .ttt-choices .btn { margin: 4px; padding: 10px 14px; }
}

/* The rules before the first game: a sentence, a small chalkboard, the scene dots. The board is
   drawn at a fixed size (MINI in tic-tac-toe.js) and only scaled to fit. */
.ttt-sheet.ttt-intro { width: 460px; }
.ttt-sheet.ttt-intro > * + * { margin-top: 16px; }
.ttt-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;
}
.ttt-mini { position: relative; width: 100%; transition: opacity .22s ease; }
.ttt-mini.is-reset { opacity: 0; }
.ttt-mini-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; border-radius: 14px; background: linear-gradient(160deg, #34895d, #2b7550 55%, #235e40); box-shadow: 0 4px 10px rgba(0, 30, 15, .3); }
.ttt-mini-svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.ttt-mini-grid path { fill: none; stroke: #eef3ea; stroke-width: 3.5; stroke-linecap: round; opacity: .9; }
.ttt-mini-mark path { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ttt-mini-mark.is-me path { stroke: #ffe27a; }
.ttt-mini-mark.is-ai path { stroke: #ffadc0; }
.ttt-mini-mark.is-line path { stroke-width: 5.5; }
.ttt-mini-mark { transform-box: view-box; }
.ttt-mini-mark.is-pop { animation: ttt-mini-pop .38s ease-out; }
@keyframes ttt-mini-pop { 45% { transform: scale(1.2); } }
.ttt-mini-say {
  position: absolute; left: 50%; top: 50%; z-index: 90; transform: translate(-50%, -50%);
  padding: 4px 11px; border-radius: 999px; background: #f4f1de; color: #1f5a3c;
  font-size: 13px; font-weight: 800; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 30, 15, .35);
  animation: ttt-mini-say .4s cubic-bezier(.3, 1.6, .5, 1) both;
}
/* Over the bottom middle square, which the lesson's winning board leaves empty. */
.ttt-mini-say.is-low { top: 83%; }
@keyframes ttt-mini-say { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } }
/* The lesson's hand. tic-tac-toe.js places it with transform; left/top put the fingertip
   (34.4% 5.9% of the icon) on the point it is moved to. */
.ttt-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;
}
.ttt-hand svg { position: relative; display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.ttt-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;
}
.ttt-hand.is-down::before { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.ttt-mini.is-instant .ttt-hand { transition: none; }
.ttt-steps { display: flex; }
.ttt-steps i { display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(31, 90, 60, .22); transition: background .25s ease; }
.ttt-steps i + i { margin-left: 8px; }
.ttt-steps i.on { background: #3fae73; }

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