* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: "Baloo 2", "Comic Sans MS", system-ui, sans-serif;
  background: #fdf6e9;
  color: #22384a;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- skip navigation (visually hidden until focused) ---------- */
.se-skipnav {
  position: absolute;
  left: 12px;
  top: -70px;
  z-index: 400;
  background: linear-gradient(180deg, #79c94e, #1e8a49);
  color: #ffffff;
  font-weight: 800;
  font-size: 17px;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(30, 138, 73, 0.35);
  transition: top 0.2s ease;
}
.se-skipnav:focus, .se-skipnav:focus-visible { top: 10px; }

/* ---------- header (ported from the coloring app / theme v104b) ---------- */
.se-siteheader { background: #fdf6e9; display: flex; flex-direction: column; width: 100%; }
.se-topbar {
  order: 1; display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 1400px; margin: 0 auto; box-sizing: border-box; padding: 4px 3%;
}
.se-topbar > * { min-width: 0; }
.se-brand { display: inline-flex; align-items: center; text-decoration: none; }
.se-brand img { height: 44px; max-height: 44px; width: auto; display: block; margin: 0 10px 0 0; }
.se-topactions { display: flex; align-items: center; gap: 4px; }
.se-iconbtn {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: transparent; border: 0; padding: 2px 6px; margin: 0;
  font: inherit; color: #0d2b26; text-decoration: none; cursor: pointer;
}
.se-iconbtn i { font-size: 32px; color: #0d2b26; line-height: 1; }
.se-iconlabel {
  font-family: "Nunito", sans-serif; font-weight: 800; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: #22384a; line-height: 1;
}
/* purple Back pill (same as the coloring app's #backBtn) */
a.se-backbtn {
  background: linear-gradient(180deg, #8a63d2, #5b2a86);
  box-shadow: 0 3px 0 #3d1c5c;
  color: #fff;
  min-height: 44px; min-width: 0;
  padding: 8px 14px; font-size: 16px; margin-right: 4px;
  white-space: nowrap; flex: 0 0 auto;
}
a.se-backbtn:hover { background: linear-gradient(180deg, #8a63d2, #5b2a86); filter: brightness(1.07); }
a.se-backbtn:active { transform: translateY(2px); box-shadow: none; }
@media only screen and (max-width: 480px) {
  .se-topbar { gap: 6px; }
  .se-brand { min-width: 0; flex: 0 1 auto; }
  .se-brand img { height: 38px; max-height: 38px; max-width: 36vw; object-fit: contain; object-position: left center; }
  .se-topactions { min-width: 0; flex: 0 0 auto; gap: 2px; }
  /* Games stays in the header, fully visible — never shrunk or overlapped */
  .se-iconbtn { padding: 2px 4px; flex: 0 0 auto; }
  .se-iconbtn i { font-size: 28px; }
  .se-iconlabel { font-size: 11px; }
  .se-topactions .btn-action { font-size: 14px; padding: 6px 10px; white-space: nowrap; }
  a.se-backbtn { padding: 6px 10px; font-size: 14px; min-height: 40px; margin-right: 2px; }
}

/* ---------- MORE menu overlay (ported from theme #nav-mobile) ---------- */
.side-nav {
  list-style: none; margin: 0; padding: 0 0 30px;
  position: fixed; top: 0; right: 0; left: 0; bottom: 0;
  width: 100%; height: 100%; overflow-y: auto;
  background: #e0e0f8; border: 0; z-index: 300;
}
.side-nav[hidden] { display: none; }
.side-nav li { display: block; width: 100%; }
.side-nav li > a {
  display: block; font-size: 34px; font-weight: 700; font-family: "Baloo 2", cursive;
  color: #2b3168; padding: 15px 20px; line-height: 1.35;
  text-decoration: none; background: transparent; text-align: center;
}
/* account items in the menu are buttons wired to the auth modal — styled
   exactly like the menu links */
.side-nav li > button.se-acctbtn {
  display: block; width: 100%; font-size: 34px; font-weight: 700; font-family: "Baloo 2", cursive;
  color: #2b3168; padding: 15px 20px; line-height: 1.35;
  text-decoration: none; background: transparent; text-align: center;
  border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.side-nav li > button.se-acctbtn[hidden] { display: none; }
.side-nav .account-email {
  display: block; text-align: center; padding: 10px 20px 0;
  font-family: "Baloo 2", cursive; font-size: 20px; font-weight: 700; color: #2b3168;
  overflow-wrap: anywhere;
}
.side-nav .account-email[hidden] { display: none; }
.side-nav .closemenu {
  background: #41528a; color: #fff; font-family: "Nunito", sans-serif;
  font-size: 22px; font-weight: 800; padding: 16px 18px; margin: 0 0 6px;
  cursor: pointer; text-transform: uppercase; text-align: right;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
.side-nav .closemenu i { font-size: 34px; line-height: 1; color: #fff; }
.side-nav li.se-menulogo { text-align: center; padding: 14px 0 0; }
.side-nav li.se-menulogo a { display: inline-block; padding: 0; }
.side-nav li.se-menulogo img { height: 104px; width: auto; }
.side-nav .se-soc-row { display: block; text-align: center; padding: 0 15px; }
.side-nav .se-soc {
  background: transparent; border: 2px solid #2b3168; border-radius: 50%;
  color: #2b3168; width: 46px; height: 46px; box-shadow: none; margin: 4px 3px;
}
.side-nav .se-soc i { font-size: 22px; color: #2b3168; }
.se-menusearch { display: flex; gap: 12px; width: 100%; box-sizing: border-box; margin: 0; padding: 18px 28px 26px; }
.se-menusearch input[type="text"] {
  flex: 1 1 auto; min-width: 0; height: 64px; font-size: 22px; padding: 16px 20px;
  border: 2px solid #41528a; border-radius: 10px; background: #ffffff; color: #0d2b26;
  box-sizing: border-box; outline: none; font-family: "Nunito", sans-serif;
}
.se-menusearch input[type="text"]::placeholder { color: #3d3d3d; opacity: 1; }
.se-menusearch input[type="submit"] {
  flex: 0 0 auto; height: 64px; font-size: 20px; font-weight: 800; padding: 16px 30px;
  border: 0; border-radius: 10px; background: #41528a; color: #ffffff;
  cursor: pointer; box-sizing: border-box; font-family: "Nunito", sans-serif;
}

/* ---------- game layout ---------- */
.game {
  width: 100%;
  max-width: 640px;
  padding: 8px 16px 24px;
  text-align: center;
  flex: 1;
}
.game-title {
  font-size: 40px;
  font-weight: 800;
  margin: 6px 0 4px;
  line-height: 1.1;
}
.hint {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 10px;
  color: #41528a;
}
.progress {
  font-size: 21px;
  font-weight: 700;
  margin: 6px 0 12px;
}

/* ---------- operation toggles + sound (controls cluster above the card) ---------- */
.ops-cluster {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}
.operations {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.op-btn {
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  border-radius: 999px;
  padding: 9px 20px;
  cursor: pointer;
  background: #ffffff;
  color: #1e8a49;
  border: 3px solid #1e8a49;
  -webkit-tap-highlight-color: transparent;
}
.op-btn.on {
  background: linear-gradient(180deg, #79c94e, #1e8a49);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(30, 138, 73, 0.35);
}
.op-btn:active { transform: scale(0.97); }

/* ---------- flash card ---------- */
.card-scene {
  width: 100%;
  max-width: 420px;
  height: 300px;
  margin: 0 auto;
  perspective: 1200px;
  touch-action: pan-y; /* vertical page scroll ok; horizontal swipes captured by JS */
}
.card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0.15, 0.3, 1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.card.flipped { transform: rotateY(180deg); }

.card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: 28px;
  box-shadow: 0 10px 28px rgba(34, 56, 74, 0.22);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 20px;
}
.card-front { background: #e9f5ec; border: 4px solid #79c94e; }
.card-back {
  background: #ffedb8;
  border: 4px solid #f2b234;
  transform: rotateY(180deg);
}
.problem, .answer {
  font-size: 64px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 1px;
}
.answer { color: #166534; }
.tap-hint {
  font-size: 18px;
  font-weight: 700;
  color: #41528a;
  opacity: 0.85;
}

/* ---------- buttons ---------- */
.controls {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.btn {
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(180deg, #79c94e, #1e8a49);
  border: none;
  border-radius: 999px;
  padding: 14px 34px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(30, 138, 73, 0.35);
  min-width: 140px;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: linear-gradient(180deg, #6cb843, #166534); }
.btn:active { transform: scale(0.97); }
.btn-shuffle { min-width: 240px; }
.btn-sound {
  font-size: 16px;
  padding: 9px 18px;
  min-width: 0;
  flex-shrink: 0;
}

/* ---------- auth modal ---------- */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(34, 56, 74, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 18px;
}
.auth-overlay[hidden] { display: none; }
.auth-card {
  position: relative;
  background: #fffdf7;
  border-radius: 24px;
  padding: 26px 22px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 18px 50px rgba(34, 56, 74, 0.35);
  max-height: 90vh;
  overflow-y: auto;
}
.auth-card h3 {
  margin: 8px 0 2px;
  font-size: 26px;
  font-weight: 800;
  color: #1e8a49;
}
.guardian-note {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: #41528a;
}
.auth-sub { margin: 0 0 8px; font-size: 16px; color: #444; }
.auth-label {
  display: block;
  text-align: left;
  font-weight: 800;
  color: #22384a;
  font-size: 16px;
  margin: 15px 0 5px;
}
.auth-label[hidden] { display: none; }
.auth-card input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  padding-right: 42px;
  margin: 0;
  border: 2px solid #79c94e;
  border-radius: 12px;
  font: inherit;
  background: #ffffff;
  color: #22384a;
}
.field-x { position: relative; display: block; }
.field-x[hidden] { display: none; }
.x-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: #e9f5ec;
  color: #1e8a49;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: none;
}
.x-clear.on { display: block; }
.auth-err { color: #c22626; font-weight: 700; margin: 10px 0 0; font-size: 16px; }
.auth-submit { width: 100%; min-width: 0; margin-top: 14px; }
.auth-alt {
  font-family: inherit;
  width: 100%;
  margin-top: 9px;
  font-size: 17px;
  font-weight: 800;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  background: #ffffff;
  color: #1e8a49;
  border: 3px solid #1e8a49;
  -webkit-tap-highlight-color: transparent;
}
.auth-alt:active { transform: scale(0.97); }
.modal-x {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #e9f5ec;
  color: #22384a;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}

/* ---------- footer (ported from the coloring app / theme v104b) ---------- */
.se-footer {
  /* The theme footer itself is transparent; on the site it sits over the body
     pattern below, so the footer carries that same pattern backdrop here. */
  background: #F0F1F3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcCOj9I2VekPd8ZeqVV1v72OvLtYcLtcBrMZmqRSZ7k3dlleHsBda-VFOwqb9jyHh5b1NQuAcfjrai1Ur57zbjMlpc9tKZ76J_Hw5j8v-7IsYOo2YcBSJ2z7UG86_OcRmVpOGA9juEjR0/s1600/pattern-stretchy.png');
  margin-top: 10px; padding: 6px 14px 26px;
  width: 100%;
}
.se-footer .se-container { max-width: 1100px; margin: 0 auto; }
/* Footer logo SOLID: full opacity on a clean white chip so it reads crisp
   over the footer's pattern backdrop. */
.se-footlogo { text-align: center; margin: 10px 0 2px; }
.se-footlogo img { height: 92px; width: auto; opacity: 1; filter: none; background: #fff; border-radius: 16px; padding: 6px 12px; box-shadow: 0 2px 8px rgba(20,60,30,.18); }
.se-footer .center { text-align: center; }
.se-footer .light { font-weight: 400; }
.se-soc-center { text-align: center; margin: 6px 0 20px; }
.se-soc-row { display: inline-block; }
.se-soc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 18px; margin: 0 3px;
  background: linear-gradient(160deg, #79c94e, #1e8a49);
  color: #fff !important; text-decoration: none !important; vertical-align: middle;
  box-shadow: 0 3px 8px rgba(20,60,30,.35);
}
.se-soc i { color: #fff !important; font-size: 26px; line-height: 1; }
.se-soc:hover { background: #4c8a50; }
.se-soc:focus { outline: 3px solid #b3001b; outline-offset: 2px; }
.se-footer .se-soc-row { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; }
.se-footer .se-soc { flex: 0 1 56px; margin: 0; }
.se-footer .se-soc:hover { background: inherit; filter: brightness(1.13); }
.se-footer .se-soc[href*="facebook.com"] { background: linear-gradient(160deg, #4e8ef7, #1663c7); }
.se-footer .se-soc[href*="instagram.com"] { background: linear-gradient(45deg, #f9a03f, #e1306c 55%, #833ab4); }
.se-footer .se-soc[href*="x.com"] { background: linear-gradient(160deg, #4a5568, #111827); }
.se-footer .se-soc[href*="tiktok.com"] { background: linear-gradient(160deg, #2dd4ee, #111827 48%, #fe2c55 135%); }
.se-footer .se-soc[href*="pinterest.com"] { background: linear-gradient(160deg, #f0524f, #bd081c); }
.se-footer .se-soc[href*="youtube.com"] { background: linear-gradient(160deg, #ff5a4e, #e62117); }
.se-footer .se-soc[href*="soundcloud.com"] { background: linear-gradient(160deg, #ffb03a, #ff5500); }
@media (max-width: 560px) {
  .se-footer .se-soc { width: 42px; height: 42px; border-radius: 13px; }
  .se-footer .se-soc i { font-size: 20px; }
}
.se-reswrap { max-width: 760px; margin: 26px auto 4px; text-align: left; }
.se-resbtn {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  background: none; border: 0; border-bottom: 2px solid #3b7741; color: #14532d;
  font-family: "Baloo 2", cursive; font-weight: 800; font-size: 24px;
  padding: 8px 2px; cursor: pointer;
}
.se-resplus { font-size: 28px; line-height: 1; transition: transform .25s; }
.se-resbtn[aria-expanded='true'] .se-resplus { transform: rotate(45deg); }
.se-reslist { display: none; list-style: none; margin: 10px 0 0; padding: 0; columns: 2; column-gap: 34px; }
.se-reslist.se-open { display: block; }
.se-reslist li { margin: 0 0 9px; break-inside: avoid; }
.se-reslist a { color: #14532d !important; font-weight: 700; font-size: 17px; text-decoration: underline; }
@media (min-width: 821px) {
  .se-resbtn { pointer-events: none; cursor: default; }
  .se-resplus { display: none; }
  .se-reslist { display: block; columns: 3; }
}
.se-footlinks, .se-footlinks a { color: #41503f !important; }
.se-footlinks a { font-weight: 700; text-decoration: underline; }
.se-acocredit { text-align: center; margin: 8px 0 2px; font-size: 16px; color: #41503f; }
.se-acocredit a { font-weight: 700; text-decoration: underline; }
.se-copyline { text-align: center; margin: 2px 0 5px; font-size: 16px; color: #41503f; }
.aco-logo { vertical-align: -4px; margin-right: 4px; }
/* Footer text: dark and easy to read */
.se-footer, .se-footer .se-footlinks, .se-footer .se-copyline, .se-footer .se-acocredit { color: #41503f; }
.se-footer a { color: #14532d !important; }
.se-footer .se-soc { color: #fff !important; }

/* ---------- back to top ---------- */
.se-totop {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 40;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(180deg, #79c94e, #1e8a49);
  border: none;
  border-radius: 999px;
  padding: 11px 18px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(30, 138, 73, 0.35);
  -webkit-tap-highlight-color: transparent;
}
.se-totop:hover { background: linear-gradient(180deg, #6cb843, #166534); }
.se-totop:active { transform: scale(0.97); }

/* ---------- small phones ---------- */
@media (max-width: 480px) {
  .game-title { font-size: 34px; }
  .card-scene { height: 270px; }
  .problem, .answer { font-size: 54px; }
  .btn { font-size: 20px; padding: 13px 26px; min-width: 126px; }
  .auth-submit { font-size: 22px; padding: 14px 34px; }
}

/* ---------- counting game (Nov 9, 2026) ---------- */
.count-card { background: #fff7e6; border: 4px solid #f5a623; border-radius: 22px; max-width: 420px; margin: 14px auto; padding: 34px 12px 20px; text-align: center; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: pan-y; box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.count-num { font-family: "Baloo 2", cursive; font-size: 110px; font-weight: 800; line-height: 1; color: #5b2a86; }
.count-card .tap-hint { margin-top: 12px; }

/* Games hub + number games (Desarae, Nov 10, 2026) — card and game
   styles carried over from the coloring app so the Games site matches. */
.designs-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 4px; }
.designs-title { margin: 0; color: #22384a; font-family: "Baloo 2", cursive; }
.pz-intro { font-size: 17px; margin: 6px 2px 10px; }
.pz-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.game-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 2px 18px; }
.game-card { border: 3px solid #d8cdea; background: #fff; border-radius: 18px; padding: 10px; cursor: pointer; font-family: "Baloo 2", cursive; color: #5b2a86; min-width: 0; box-shadow: 0 4px 12px rgba(91,42,134,.18); text-decoration: none; display: block; text-align: center; }
.game-card:active { transform: scale(.98); }
.game-name { display: block; font-weight: 800; font-size: 21px; }
.game-line { display: block; font-weight: 600; font-size: 14.5px; color: #7a5aa0; margin-top: 2px; line-height: 1.25; }
.game-emoji { display: block; font-size: 62px; line-height: 1.25; text-align: center; padding: 8px 0 2px; }
.ttt-seg { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px auto; }
.ttt-seg button { border: 2px solid #5b2a86; background: #fff; color: #4c2a9e; border-radius: 999px; padding: 8px 14px; font-weight: 700; cursor: pointer; min-height: 44px; }
.ttt-seg button.ttt-on { background: #5b2a86; color: #fff; }
.fc-progress { text-align: center; font-family: "Baloo 2", cursive; font-weight: 800; font-size: 18px; color: #7a5aa0; margin: 4px 0 10px; }
.btn-back { background: #5b2a86; color: #fff; }
.ng-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 430px; margin: 14px auto 18px; padding: 0 2px; }
.ng-choice { min-height: 64px; font-family: "Baloo 2", cursive; font-size: 25px; font-weight: 800; color: #5b2a86; background: #fff; border: 3px solid #5b2a86; border-radius: 16px; cursor: pointer; }
.ng-choice:active { transform: scale(.97); }
.ng-choice.good { background: #d9f7c4; border-color: #2f9e44; color: #1e6b2c; }
.ng-choice.try { background: #ffe3e3; border-color: #d64545; }
.ng-steps { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px auto 4px; max-width: 430px; padding: 0 2px; }
.ng-step { min-width: 52px; padding: 10px 8px; text-align: center; font-family: "Baloo 2", cursive; font-size: 24px; font-weight: 800; color: #5b2a86; background: #efe8fa; border: 3px solid #d8cdea; border-radius: 14px; }
.ng-step.ng-blank { background: #fff3b0; border-color: #e3a008; color: #8a6400; }
.ng-step.ng-found { background: #d9f7c4; border-color: #2f9e44; }
.ng-animal { font-size: 64px; text-align: center; line-height: 1.2; }
.ng-coins { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin: 16px auto 6px; max-width: 430px; padding: 0 2px; }
.ng-coin { border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px solid rgba(0,0,0,.28); box-shadow: inset 0 0 0 4px rgba(255,255,255,.35), 0 3px 8px rgba(0,0,0,.18); }
.ng-coin .coin-val { font-family: "Baloo 2", cursive; font-weight: 800; line-height: 1; }
.ng-coin .coin-name { font-size: 10px; font-weight: 700; line-height: 1.1; }
.coin-penny { width: 56px; height: 56px; background: #e09a52; color: #6b3410; }
.coin-penny .coin-val { font-size: 17px; }
.coin-nickel { width: 66px; height: 66px; background: #d9dee6; color: #45526b; }
.coin-nickel .coin-val { font-size: 19px; }
.coin-dime { width: 52px; height: 52px; background: #eef1f6; color: #45526b; }
.coin-dime .coin-val { font-size: 15px; }
.coin-quarter { width: 78px; height: 78px; background: #d9dee6; color: #45526b; }
.coin-quarter .coin-val { font-size: 22px; }
.ng-clockwrap { text-align: center; margin: 8px auto; }
.ng-clockwrap svg { width: min(78vw, 300px); height: auto; }
main.game section { max-width: 560px; margin: 0 auto; }