/* Room for raised answer keys and a separate navigation toolbar. */
body[data-game="basic"]{--answer-light:#ffe078;--answer-glow:rgba(255,205,60,.75);--answer-tint:rgba(255,205,60,.24);}
body[data-game="advanced"]{--answer-light:#83dcff;--answer-glow:rgba(49,165,255,.75);--answer-tint:rgba(49,165,255,.24);}
body[data-game="world"]{--answer-light:#88efaa;--answer-glow:rgba(50,218,116,.75);--answer-tint:rgba(50,218,116,.24);}
html body > .stage.sg-game-viewport{
  display:flex;flex-direction:column;gap:10px;
  padding-left:calc(18px + var(--safeL));
  padding-right:calc(18px + var(--safeR));
  padding-bottom:calc(24px + var(--safeB));
}
.stage > .gameFrame{flex:1;min-height:0;height:auto;}
.gameNav{display:flex;align-items:center;gap:8px;flex:0 0 44px;min-width:0;}
.gameNav > a,.gameNav > button{
  position:static;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;
  height:44px;min-height:44px;margin:0;padding:5px 10px;
  transform:none;border:1px solid rgba(255,224,120,.75);border-radius:10px;
  background:rgba(15,35,78,.55);color:#ffe9a6;box-shadow:none;
  font:700 13px system-ui,sans-serif;line-height:1.2;text-decoration:none;
  cursor:pointer;touch-action:manipulation;
}
.gameNav :is(.mapReturn,.challengeReturn){flex:0 0 88px;width:88px;min-width:88px;height:40px;min-height:40px;border:0;background:none;padding:0;}
.gameNav :is(.mapReturn,.challengeReturn) img{display:block;width:88px;height:40px;object-fit:contain;}
.gameNav :is(.mapReturn,.challengeReturn) img.map-return--en{display:none;}
html[lang="en"] .gameNav :is(.mapReturn,.challengeReturn) img.map-return--ja{display:none;}
html[lang="en"] .gameNav :is(.mapReturn,.challengeReturn) img.map-return--en{display:block;}
.gameNav .restartAction{margin-left:auto;flex:0 0 auto;height:40px;min-height:40px;}
.gameNav svg{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.gameNav :is(a,button):focus-visible{outline:2px solid #ffe9a6;outline-offset:3px;}
.gameNav :is(a,button):active{transform:translateY(1px);}
@media(hover:hover) and (pointer:fine){
 .gameNav :is(a,button):hover{filter:drop-shadow(0 0 6px rgba(255,204,58,.65));}
 .keyboard .key:not(:disabled):not(:active):hover{
   box-shadow:inset 0 0 0 2px var(--answer-light),
              inset 0 0 26px var(--answer-tint),
              0 6px 0 rgba(160,170,185,.95),
              0 0 12px var(--answer-glow),
              0 10px 18px rgba(0,0,0,.24);
 }
}
/* Reserve space inside clipped keyboard layouts for the key edges and shadows. */
.stage .keyboard{padding:4px 6px 16px;}
@media(max-width:480px){
 .gameNav{gap:6px;}
 .gameNav > a,.gameNav > button{font-size:12px;padding:5px 7px;}
 .gameNav .restartAction{gap:4px;}
 .gameNav svg{width:16px;height:16px;flex-basis:16px;}
 html body > .stage.sg-game-viewport{padding-left:calc(12px + var(--safeL));padding-right:calc(12px + var(--safeR));}
}
@media(max-height:520px) and (orientation:landscape){
 html body > .stage.sg-game-viewport{gap:6px;padding-bottom:calc(20px + var(--safeB));}
 html body:is([data-game="basic"],[data-game="advanced"]) .keyboard{
   display:grid;
   grid-template-columns:repeat(8,minmax(0,1fr));
   grid-template-rows:repeat(3,minmax(0,1fr));
   justify-content:stretch;
 }
 html body:is([data-game="basic"],[data-game="advanced"]) .keyboard .keyRow{display:contents;}
}

/* Use QUEST's signal proportions and vector digital countdown. */
.overlayInner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  width: 220px;
  height: 260px;
  padding-top: 18px;
  gap: 12px;
  background: linear-gradient(180deg, #0b120b, #070a07);
  border-radius: 0;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.06),
    inset 0 -10px 18px rgba(0,0,0,.55),
    0 18px 40px rgba(0,0,0,.6);
}
.countSignal{
  width:110px;
  height:110px;
  border-radius:50%;
  background:#ff2b2b;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.18),
    0 0 8px rgba(255,43,43,.70),
    0 0 20px rgba(255,43,43,.45);
  transition: transform 80ms ease-out;
}
.countSignal.go{
  background:#19c37d;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.18),
    0 0 8px rgba(25,195,125,.70),
    0 0 20px rgba(25,195,125,.45);
}
.countSignal.pulse{ transform: scale(1.03); }

.count{
  margin-top: auto;
  margin-bottom: 18px;
  font-size:64px;
  font-weight:1000;
  color:#ff0000;
  font-family: "DSEG7 Classic",
               ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", monospace;
  letter-spacing: .04em;
  line-height: 1;
  text-shadow: none;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  transform: translateZ(0);
  width: 196px;
  max-width:calc(100% - 20px);
  text-align: center;
  align-self: center;
  transition: transform 80ms ease-out;
}
.count svg{display:block;width:100%;height:auto;overflow:visible;}
.count.pulse{ transform: scale(1.04); }
.count.go{
  text-align: center;
  padding-left: 0;
  letter-spacing: .02em;
}

/* Review this game's mistakes without crowding the result actions. */
.result{padding:12px;grid-template-rows:minmax(0,1fr);}
.resultBox{min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;}
.mistakeReview{margin-top:16px;padding-top:12px;border-top:1px solid rgba(210,245,255,.25);text-align:left;}
.mistakeReview h2{margin:0 0 8px;font-size:18px;line-height:1.4;}
.mistakeReviewPerfect{font-size:15px;line-height:1.5;color:#a7f3d0;}
.mistakeReviewList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;}
.mistakeReviewList li{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;background:rgba(255,255,255,.08);font-size:15px;line-height:1.4;overflow-wrap:anywhere;}
.mistakeReviewList img{flex:0 0 44px;object-fit:contain;background:white;border-radius:6px;}
@media(max-width:520px){.mistakeReviewList{grid-template-columns:minmax(0,1fr);}}