/* Canhao — mesma cara dos outros jogos (copia do Combina 3 Plus: ceu azul, botoes brancos redondos, botao
   verde, vidro, degrades suaves e sombras macias). So o que e do Canhao vem no fim do arquivo. */
:root {
  --sky-top: #5bb8f5;
  --sky-bottom: #c9ecff;
  --ink: #213047;
  --ink-soft: #4d6079;
  --paper: #ffffff;
  --yellow: #ffd23f;
  --green: #3cc76a;
  --green-dark: #23a04f;
  --orange: #ff8a3d;
  --blue: #2f8fd8;
  --red: #ff5a5f;
  --shadow: 0 6px 0 rgba(33, 48, 71, .18), 0 10px 24px rgba(33, 48, 71, .16);
  --glass: rgba(255, 255, 255, .78);
  --radius: 22px;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --top-h: 60px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  font-family: var(--font); color: var(--ink); font-weight: 800;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
/* nuvens decorativas (as mesmas dos outros jogos) */
body::before, body::after { content: ""; position: fixed; z-index: 0; background: #fff; border-radius: 999px; opacity: .7; filter: blur(1px); pointer-events: none; }
body::before { width: 180px; height: 56px; top: 12%; left: -40px; box-shadow: 60px -24px 0 8px #fff; animation: drift 40s linear infinite; }
body::after { width: 140px; height: 44px; top: 30%; right: -30px; box-shadow: -50px -18px 0 6px #fff; animation: drift 55s linear infinite reverse; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(40vw); } }
button { appearance: none; -webkit-appearance: none; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
img { -webkit-user-drag: none; pointer-events: none; }
[hidden] { display: none !important; }

#stage { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; z-index: 1; }
#app { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#topbar { position: absolute; z-index: 3; left: calc(10px + var(--sal)); right: calc(10px + var(--sar)); top: calc(8px + var(--sat)); height: 52px; display: flex; gap: 10px; pointer-events: none; }
#topbar > button { pointer-events: auto; }
#topbar .spacer { flex: 1; }
.screen { position: absolute; inset: 0; padding: calc(8px + var(--sat) + var(--top-h)) calc(10px + var(--sar)) calc(8px + var(--sab)) calc(10px + var(--sal)); }
#end { padding-top: calc(8px + var(--sat)); z-index: 4; }
#start, #end { pointer-events: auto; }
#hud > *, #mystery-bar { pointer-events: auto; }

.round-btn {
  width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; font-size: 22px; line-height: 1; font-weight: 900;
  background: var(--paper); border-radius: 50%; box-shadow: var(--shadow); transition: transform .08s;
}
.round-btn:active { transform: translateY(3px) scale(.96); }
.round-btn svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.round-btn.small { width: 40px; height: 40px; font-size: 18px; box-shadow: 0 3px 0 rgba(33,48,71,.18); }
.home-icon .chimney { fill: #c4513a; stroke: var(--ink); stroke-width: 1.4; }
.home-icon .wall { fill: #ffe29a; stroke: var(--ink); stroke-width: 1.4; }
.home-icon .roof { fill: #ff5a5f; stroke: var(--ink); stroke-width: 1.4; }
.home-icon .door { fill: var(--orange); stroke: var(--ink); stroke-width: 1.2; }
.snd-icon .spk { fill: var(--ink); stroke-width: 2; }
.snd-icon .wave { stroke: var(--blue); }
.snd-icon .x { display: none; stroke: var(--red); stroke-width: 3; }
.muted .snd-icon .wave { display: none; }
.muted .snd-icon .x { display: inline; }
.muted .snd-icon .spk { opacity: .55; }
.fs-icon .fs-exit { display: none; }
.is-fs .fs-icon .fs-enter { display: none; }
.is-fs .fs-icon .fs-exit { display: inline; }

.big-btn {
  min-height: 76px; padding: 0 40px; font-size: clamp(26px, 5.4vmin, 36px); font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #55d985, var(--green)); border-radius: 999px;
  box-shadow: 0 7px 0 var(--green-dark), 0 12px 24px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.45);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; transition: transform .1s, box-shadow .1s;
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--green-dark), inset 0 2px 0 rgba(255,255,255,.45); }
.big-btn.secondary { background: linear-gradient(180deg, #5db0ee, var(--blue)); box-shadow: 0 7px 0 #1d6fae, 0 12px 24px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.4); }

/* ---------- tela inicial ---------- */
#start { display: grid; place-items: center; }
.start-page {
  position: relative; width: min(92vw, 540px); padding: clamp(18px, 4vmin, 32px) 22px clamp(20px, 4vmin, 32px); text-align: center;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 32px; box-shadow: var(--shadow), inset 0 2px 0 rgba(255,255,255,.8);
  animation: page-in .55s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes page-in { from { transform: translateY(40px) scale(.92); opacity: 0; } }
#start-stickers { display: flex; justify-content: center; height: clamp(74px, 17vmin, 120px); margin-bottom: 4px; }
#start-stickers img { height: 100%; aspect-ratio: 1; margin: 0 -8px; animation: bob 2.6s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(33,48,71,.25)); }
#start-stickers img:nth-child(2n) { animation-delay: -.9s; }
#start-stickers img:nth-child(3n) { animation-delay: -1.7s; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(4deg); } }
#t-title { margin: 0; font-size: clamp(40px, 10.5vmin, 72px); line-height: 1; font-weight: 900; color: #fff; text-shadow: 0 4px 0 rgba(33,48,71,.28), 0 8px 18px rgba(33,48,71,.2); }
#t-sub { margin: 8px 0 clamp(14px, 3vmin, 24px); font-size: clamp(18px, 3.8vmin, 24px); color: var(--ink-soft); }
.learn { margin-top: clamp(16px, 3.4vmin, 26px); font-size: 18px; color: var(--ink-soft); }
#langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
#langs button { width: 62px; height: 48px; padding: 5px; background: #eef3f9; border: 4px solid transparent; border-radius: 14px; opacity: .7; transition: transform .1s; }
#langs button img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; display: block; }
#langs button.on { border-color: var(--green); background: #e9fbef; opacity: 1; transform: scale(1.08); }

/* ---------- jogo ---------- */
#play { display: flex; flex-direction: column; gap: 6px; }
#hud { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "goals moves"; gap: 8px 10px; align-items: center; }
#goals { grid-area: goals; display: flex; gap: 8px; min-width: 0; }
@keyframes punch { 35% { transform: scale(1.12); } }
@keyframes talk { 30% { transform: scale(1.1) rotate(-2deg); } 60% { transform: scale(1.06) rotate(2deg); } }
#board-area { flex: 1 1 auto; min-height: 0; min-width: 0; }

#mystery-bar {
  position: absolute; left: 50%; bottom: calc(12px + var(--sab)); transform: translateX(-50%); width: max-content; max-width: 94vw;
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: clamp(17px, 4.2vw, 22px); font-weight: 900;
  background: linear-gradient(180deg, #ffe27a, var(--yellow)); border-radius: 999px; box-shadow: var(--shadow);
  animation: bar-in .35s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes bar-in { from { transform: translateX(-50%) translateY(80px); opacity: 0; } }

#praise { position: absolute; left: 50%; top: 46%; pointer-events: none; z-index: 2; }  /* o JS poe no centro do tabuleiro */
#praise span {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-size: clamp(50px, 14vmin, 112px); font-weight: 900; color: var(--yellow);
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); animation: praise 1.1s cubic-bezier(.2,1.5,.4,1) forwards;
}
@keyframes praise { 0% { transform: translate(-50%,-50%) scale(.2) rotate(-14deg); opacity: 0; } 25% { transform: translate(-50%,-50%) scale(1.1) rotate(-5deg); opacity: 1; } 70% { transform: translate(-50%,-56%) scale(1) rotate(-4deg); opacity: 1; } 100% { transform: translate(-50%,-90%) scale(.9) rotate(-2deg); opacity: 0; } }

#tip {
  position: absolute; left: 50%; top: calc(150px + var(--sat)); transform: translateX(-50%); width: max-content; max-width: 88vw; padding: 10px 18px; font-size: 20px; text-align: center; font-weight: 900;
  background: var(--paper); border-radius: 20px; box-shadow: var(--shadow); animation: tip 4.2s ease both; pointer-events: none;
}
@keyframes tip { 0% { opacity: 0; transform: translateX(-50%) translateY(-20px); } 8%, 88% { opacity: 1; transform: translateX(-50%); } 100% { opacity: 0; transform: translateX(-50%); } }

/* ---------- fim: pagina das figurinhas ---------- */
#end { display: grid; place-items: center; background: rgba(20,30,50,.45); animation: fade .3s both; overflow: auto; }
@keyframes fade { from { opacity: 0; } }
.album {
  width: min(94vw, 640px); padding: clamp(14px, 3vmin, 26px); text-align: center;
  background: var(--paper); border-radius: 30px; box-shadow: var(--shadow);
  animation: page-in .5s cubic-bezier(.2,1.3,.4,1) both;
}
.album h2 { margin: 0; font-size: clamp(32px, 7.5vmin, 52px); font-weight: 900; line-height: 1.05; color: var(--orange); text-shadow: 0 3px 0 rgba(33,48,71,.15); }
.album .sub { margin: 4px 0 0; font-size: 19px; color: var(--ink-soft); }
.stars { display: flex; justify-content: center; gap: 8px; margin: 6px 0 2px; height: clamp(46px, 10vmin, 64px); }
.stars svg { height: 100%; aspect-ratio: 1; fill: #e3e9f1; stroke: #c3ceda; stroke-width: 1.6; stroke-linejoin: round; }
.stars svg.on { fill: var(--yellow); stroke: #e0a800; animation: star-in .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes star-in { from { transform: scale(0) rotate(-90deg); } }
.slots { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 8px; margin: 10px 0 14px; }
.slot { min-width: 0; display: flex; flex-direction: column; align-items: center; font-size: clamp(15px, 3.6vw, 22px); font-weight: 900; }
.slot > * { flex: 0 0 auto; }
.slot .pic { width: 100%; aspect-ratio: 1; display: grid; place-items: center; background: #eef3f9; border-radius: 18px; }
.slot img { width: 112%; opacity: 0; }
.slot.in img { opacity: 1; animation: slap .32s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes slap { from { transform: scale(2.4) rotate(-18deg); opacity: 0; } }
.slot .w { position: relative; z-index: 1; margin-top: 8px; padding: 1px 7px 0; line-height: 1.35; white-space: nowrap; }
.pips { display: flex; gap: 4px; justify-content: center; margin-top: 5px; }
.pips i { width: 11px; height: 11px; border-radius: 50%; background: #d5dde8; }
.pips i.on { background: var(--yellow); box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
.album .btn-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.album .big-btn { min-height: 64px; font-size: clamp(22px, 4.6vmin, 30px); padding: 0 30px; }

#modal { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(20,30,50,.55); padding: 20px; }
.modal-box { max-width: 460px; padding: 24px; text-align: center; font-size: 18px; font-weight: 700; background: var(--paper); border-radius: 26px; box-shadow: var(--shadow); }
.modal-box h2 { margin: 0 0 8px; font-size: 26px; font-weight: 900; }
.modal-box .big-btn { margin-top: 14px; min-height: 60px; font-size: 24px; }

/* ---------- paisagem: metas e jogadas numa coluna a esquerda ---------- */
@media (orientation: landscape) {
  #play { flex-direction: row; gap: 10px; }
  #hud { width: clamp(170px, 24vw, 250px); flex: 0 0 auto; grid-template-columns: 1fr; grid-template-areas: "moves" "goals"; align-content: start; justify-items: center; gap: 10px; }
  #goals { flex-direction: column; width: 100%; }
  #tip { top: 40%; }
}
@media (orientation: landscape) and (max-height: 460px) {
  .round-btn { width: 44px; height: 44px; font-size: 20px; }
  #hud { gap: 6px; }
  #start-stickers { height: 60px; } #t-title { font-size: 40px; } .big-btn { min-height: 56px; font-size: 26px; }
  .learn { margin-top: 8px; } #t-sub { margin-bottom: 8px; }
  .album h2 { font-size: 28px; } .stars { height: 38px; } .slots { margin: 4px 0 8px; } .slot .pic { width: 70%; } .album .big-btn { min-height: 50px; font-size: 20px; }
}

/* idiomas (engrenagem) */
.gear-icon { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.lang-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.lang-opt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #eef3f9; border: 4px solid transparent; border-radius: 999px; padding: 10px 16px; font-weight: 800; font-size: 18px; }
.lang-opt.on { border-color: var(--green); background: #e9fbef; }
.lang-flag { width: 28px; height: 21px; border-radius: 3px; flex: none; display: block; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }

/* ---------- metas e jogadas (Combina 3 Plus, 11/11) ---------- */
.goal {
  --gc: #8fc74a; position: relative; flex: 1 1 0; min-width: 0; min-height: 76px; display: grid; align-items: center; text-align: left; overflow: hidden;
  grid-template-columns: auto 1fr auto; grid-template-areas: "pic word n" "pic bar n"; column-gap: 10px; row-gap: 5px; padding: 8px 12px 8px 8px;
  background: rgba(255,255,255,.94); border-radius: 24px; box-shadow: 0 6px 0 rgba(33,48,71,.14), 0 12px 22px rgba(33,48,71,.14), inset 0 2px 0 #fff;
  transition: background .25s, box-shadow .25s;
}
.g-pic { grid-area: pic; width: 58px; height: 58px; display: grid; place-items: center; font-size: 30px; font-weight: 900; color: var(--gc); background: color-mix(in srgb, var(--gc) 22%, #fff); border-radius: 18px; }
.g-pic img { width: 72px; height: 72px; margin: -8px; }
.goal.found .g-pic { background: color-mix(in srgb, var(--gc) 14%, #fff); }
.g-word { grid-area: word; font-size: clamp(15px, 4vw, 21px); font-weight: 900; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: end; }
.g-bar { grid-area: bar; height: 10px; border-radius: 999px; background: #e3e9f1; overflow: hidden; align-self: start; }
.g-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); min-width: 10px; border-radius: 999px; background: var(--gc); transition: width .35s cubic-bezier(.2,1.2,.4,1); }
.g-n { grid-area: n; min-width: 44px; height: 44px; padding: 0 6px; display: grid; place-items: center; font-size: 22px; font-weight: 900; line-height: 1; color: #fff; border-radius: 999px;
  background: linear-gradient(180deg, #ffa35c, var(--orange)); box-shadow: 0 3px 0 #d96a1d, inset 0 2px 0 rgba(255,255,255,.45); }
.goal.done { background: #eafaf0; }
.goal.done .g-n { background: linear-gradient(180deg, #55d985, var(--green)); box-shadow: 0 3px 0 var(--green-dark), inset 0 2px 0 rgba(255,255,255,.45); }
.goal.done .g-bar i { background: var(--green); }
.goal.punch { animation: punch .26s ease-out; }
.goal.talk { animation: talk .7s ease-in-out; box-shadow: 0 0 0 4px var(--gc), 0 10px 22px rgba(33,48,71,.2); }
#moves {
  grid-area: moves; width: 86px; height: 86px; display: grid; place-items: center; align-content: center; text-align: center; border-radius: 50%; color: var(--ink);
  background: radial-gradient(circle at 32% 24%, #fff6bf, var(--yellow) 58%, #ffb81f); border: 5px solid #fff;
  box-shadow: 0 6px 0 rgba(33,48,71,.16), 0 12px 22px rgba(33,48,71,.18);
}
#moves b { font-size: 38px; font-weight: 900; line-height: .9; }
#moves span { font-size: 12px; line-height: 1; font-weight: 800; opacity: .8; }
#moves.punch { animation: punch .22s ease-out; }
#moves.low { background: radial-gradient(circle at 32% 24%, #ffc1b8, var(--red) 62%, #e23c42); color: #fff; animation: lowpulse 1s ease-in-out infinite; }
@keyframes lowpulse { 50% { transform: scale(1.07); } }
/* retrato: 3 cards lado a lado, mais estreitos */
@media (orientation: portrait) {
  .goal { grid-template-columns: 1fr auto; grid-template-areas: "word word" "pic n" "bar bar"; row-gap: 4px; column-gap: 4px; padding: 7px 7px 8px; min-height: 0; justify-items: stretch; }
  .g-pic { justify-self: start; width: 34px; height: 34px; font-size: 20px; border-radius: 12px; } .g-pic img { width: 46px; height: 46px; margin: -6px; }
  .g-n { min-width: 34px; height: 34px; padding: 0 4px; font-size: 17px; }
  .g-word { font-size: clamp(13px, 3.8vw, 19px); align-self: center; }
  .g-bar { height: 8px; }
  #moves { width: 78px; height: 78px; } #moves b { font-size: 34px; }
}
@media (orientation: landscape) {
  .goal { min-height: 70px; flex: 0 0 auto; }
}
@media (orientation: landscape) and (max-height: 460px) {
  #moves { width: 64px; height: 64px; border-width: 4px; } #moves b { font-size: 28px; } #moves span { font-size: 10px; }
  .goal { min-height: 54px; padding: 5px 8px 5px 6px; column-gap: 8px; border-radius: 20px; } .g-pic { width: 42px; height: 42px; font-size: 24px; border-radius: 14px; } .g-pic img { width: 54px; height: 54px; margin: -6px; }
  .g-word { font-size: 16px; } .g-n { min-width: 34px; height: 34px; font-size: 17px; } .g-bar { height: 8px; }
}

/* ---------- Canhao ---------- */
/* balaozinho de fala que sai do canhao (bolha-surpresa e dicas dos especiais). O JS poe --ax/--ay
   na ponta do cano (Johnes, 11/11: a barra grande no meio do campo ficou feia; a dica tem de aparecer
   quando o item esta engatilhado). */
#mystery-bar, #tip {
  position: absolute; left: var(--ax, 50%); top: var(--ay, 70%); bottom: auto; right: auto;
  width: max-content; max-width: min(78vw, 340px); height: auto; transform: translate(-50%, -100%);
  display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px;
  font-size: clamp(14px, 3.6vmin, 18px); font-weight: 900; line-height: 1.2; text-align: left;
  background: rgba(255, 255, 255, .96); border: 3px solid var(--yellow); border-radius: 18px;
  box-shadow: 0 4px 0 rgba(33,48,71,.16), 0 8px 18px rgba(33,48,71,.18);
  animation: balloon-in .4s cubic-bezier(.2,1.6,.4,1) both;
}
#tip { padding: 8px 14px; pointer-events: none; animation: balloon-in .4s cubic-bezier(.2,1.6,.4,1) both, balloon-out .3s 3.9s ease-in forwards; }
#mystery-bar::after, #tip::after {
  content: ""; position: absolute; left: 50%; bottom: -11px; width: 16px; height: 16px; margin-left: -8px;
  background: #fff; border-right: 3px solid var(--yellow); border-bottom: 3px solid var(--yellow); transform: rotate(45deg); border-bottom-right-radius: 4px;
}
#mystery-bar .round-btn { width: 38px; height: 38px; box-shadow: 0 3px 0 rgba(33,48,71,.16); background: #fff6cc; }
#mystery-bar .round-btn svg { width: 22px; height: 22px; }
@keyframes balloon-in { from { transform: translate(-50%, -60%) scale(.3); opacity: 0; } }
@keyframes balloon-out { to { transform: translate(-50%, -100%) scale(.6); opacity: 0; } }
/* fim: pontos e recorde */
.score-row { display: flex; justify-content: center; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 6px 0 4px; }
.score-row .pts { font-size: clamp(34px, 8vmin, 54px); font-weight: 900; color: var(--ink); line-height: 1; }
.score-row .pts small { font-size: .45em; color: var(--ink-soft); margin-left: 6px; }
.score-row .best { font-size: 18px; color: var(--ink-soft); }
.new-best { display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 20px; color: #fff; background: linear-gradient(180deg, #ff8fb1, var(--red)); box-shadow: 0 4px 0 #c8323a; animation: best-in .6s cubic-bezier(.2,1.8,.4,1) both, wobble 1.4s .6s ease-in-out infinite; }
@keyframes best-in { from { transform: scale(0) rotate(-25deg); } }
@keyframes wobble { 50% { transform: rotate(-4deg) scale(1.06); } }

/* balao centralizado no campo, logo acima da linha pontilhada (Johnes, 11/11) */
#mystery-bar, #tip { max-width: min(var(--aw, 78vw), 520px); justify-content: center; text-align: center; padding: 8px 18px; }
#mystery-bar { padding-left: 8px; }
#mystery-bar span { text-align: center; }

/* paisagem: o campo usa a altura toda (o jogo desvia sozinho dos botoes do canto, ver layout() em game.js) */
@media (orientation: landscape) {
  #play { padding-top: calc(8px + var(--sat)); }
  #hud { padding-top: var(--top-h); }
}
/* telas grandes: HUD e botoes maiores */
@media (orientation: landscape) and (min-height: 760px) and (min-width: 1150px) {
  :root { --top-h: 76px; }
  #topbar { height: 66px; }
  .round-btn { width: 66px; height: 66px; }
  .round-btn svg, .gear-icon { width: 34px; height: 34px; }
  #hud { width: clamp(230px, 22vw, 330px); gap: 14px; }
  #moves { width: 112px; height: 112px; } #moves b { font-size: 48px; } #moves span { font-size: 16px; }
  .goal { min-height: 96px; padding: 8px 12px; }
  .g-pic { width: 70px; height: 70px; font-size: 36px; } .g-pic img { width: 86px; height: 86px; margin: -8px; }
  .g-word { font-size: 28px; }
  .g-n { min-width: 50px; height: 50px; font-size: 26px; }
  #mystery-bar, #tip { font-size: 22px; }
  #mystery-bar .round-btn { width: 46px; height: 46px; } #mystery-bar .round-btn svg { width: 26px; height: 26px; }
}