/* Fun Tools games */
.km-game{
  max-width:32rem;
  width:100%;
  min-width:0;
  margin:0 auto;
  display:grid;
  gap:.7rem;
  padding:0 16px;
  box-sizing:border-box;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
.km-game-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem .75rem;
  min-width:0;
  padding:0;
}
.km-game-stat{margin:0;font:700 .95rem/1.2 var(--head);letter-spacing:.04em;text-transform:uppercase;color:#F5F3EE}
.km-game-stat span{color:var(--amber)}
.km-game-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-left:auto}
.km-game-actions .btn{
  min-height:44px;
  padding:.45rem .75rem;
  touch-action:manipulation;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.km-game-stage{
  position:relative;width:100%;max-width:100%;
  aspect-ratio:3/4;max-height:min(70vh,640px);
  background:#08080D;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
.km-game-stage canvas{
  display:block;width:100%;height:100%;
  touch-action:none;cursor:pointer;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
.km-game-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.7rem;padding:1.1rem 1.15rem;text-align:center;
  background:rgba(7,7,10,.82);color:#F5F3EE;
  -webkit-user-select:none;user-select:none;
}
.km-game-overlay[hidden]{display:none!important}
.km-game-overlay h2{margin:0;font:700 clamp(1.4rem,6vw,2rem)/1.1 var(--head);letter-spacing:.04em;text-transform:uppercase}
.km-game-overlay p{margin:0;max-width:22rem;color:#DCD9D2;font-size:.92rem;line-height:1.45}
.km-game-overlay .btn{min-height:48px;min-width:8.5rem;touch-action:manipulation}
.km-diff{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.km-diff button{min-height:44px;touch-action:manipulation}
.km-diff button.is-on{border-color:rgba(255,180,0,.55);background:rgba(255,180,0,.12);color:var(--amber)}
.km-game-help{margin:0;color:var(--muted);font-size:.85rem;line-height:1.45}

.km-game-touch{
  display:none;
  grid-template-columns:repeat(3,minmax(44px,1fr));
  grid-template-areas:"left rot right" "soft soft hard";
  gap:.45rem;
  padding:.1rem 0 .15rem;
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
.km-game-touch.is-on{display:grid}
.km-game-touch .btn{
  min-height:48px;
  min-width:44px;
  padding:.35rem .4rem;
  font:700 .8rem/1 var(--head);
  letter-spacing:.05em;
  text-transform:uppercase;
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.km-game-touch .btn.is-held{
  border-color:rgba(255,180,0,.65);
  background:rgba(255,180,0,.16);
  color:var(--amber);
}
.km-pad-left{grid-area:left}
.km-pad-rot{grid-area:rot}
.km-pad-right{grid-area:right}
.km-pad-soft{grid-area:soft}
.km-pad-hard{grid-area:hard}

html.km-playing,html.km-playing body{
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
}
html.km-playing .tool-hero,
html.km-playing .tool-disclaimer,
html.km-playing .cta-band,
html.km-playing .footer,
html.km-playing .skip,
html.km-playing .km-game-help{display:none!important}
html.km-playing .nav{display:none!important}
html.km-playing .km-game{
  padding-top:12px;
  padding-bottom:12px;
  gap:.55rem;
}
html.km-playing .km-game-stage{max-height:calc(100dvh - 7.25rem)}
html.km-playing.has-touch-pad .km-game-stage{max-height:calc(100dvh - 14.75rem)}

.tools-games{margin:0 0 1.75rem}
.tools-games .ut-index-lead{margin:0 0 1rem}
.tools-cat__sub{margin:0 0 .4rem;font:700 1.15rem/1.2 var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--amber)}
.tools-jokes{margin-top:1.75rem}

@media (max-width:700px){
  .km-game-stage{max-height:min(62vh,520px);border-radius:14px}
  .km-game-actions{width:100%;margin-left:0}
  .km-game-actions .btn{flex:1 1 calc(33% - .4rem)}
  .km-game-touch.is-on{display:grid}
  html.km-playing .km-game-stage{max-height:calc(100dvh - 7.25rem)}
  html.km-playing.has-touch-pad .km-game-stage{max-height:calc(100dvh - 14.75rem)}
}
@media (max-height:700px){
  .km-game-touch .btn{min-height:46px}
}