/* プレイ画面。**上下にも左右にもスクロールを出さない。**
   共通のページ用CSSは読まない（余白も背景もここで決める） */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%; overflow: hidden;            /* スクロールバーを出さない */
  background: #050a12; color: #e8eef6;
  font-family: 'Yu Gothic UI', 'Hiragino Sans', system-ui, sans-serif;
  overscroll-behavior: none;
  touch-action: manipulation;                /* 連打で拡大させない */
  -webkit-user-select: none; user-select: none;
}

/* 画面の実寸。dvh はアドレスバーの出入りで縮まない */
#stage {
  position: relative;
  width: 100vw; height: 100vh; height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#g { display: block; border-radius: .4em; box-shadow: 0 0 30px rgba(0,0,0,.7); }

.count {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 22vmin; font-weight: 800; color: #ffd640;
  text-shadow: 0 4px 24px rgba(0,0,0,.85); pointer-events: none;
}

.judge {
  position: absolute; left: 0; right: 0; top: 46%;
  text-align: center; font-size: 5.2vmin; font-weight: 800;
  text-shadow: 0 3px 14px rgba(0,0,0,.9); pointer-events: none; line-height: 1.35;
}
.judge .vs { display: block; font-size: .5em; font-weight: 400; color: #dbe6f2; }
.judge.p { color: #ffd640; } .judge.g { color: #6fd3ff; }
.judge.o { color: #9fe6a0; } .judge.m { color: #ff8a8a; }

#hud {
  position: absolute; top: .6em; left: 0; right: 0;
  display: flex; justify-content: space-between; padding: 0 1em;
  font-size: 3.1vmin; color: #9fb2c8; pointer-events: none;
}

.go {
  position: absolute; left: 50%; top: 62%; transform: translateX(-50%);
  font-family: inherit; font-size: 5vmin; font-weight: 800; color: #fff;
  background: #d94a58; border: none; border-radius: .5em;
  padding: .7em 2.2em; cursor: pointer;
  box-shadow: 0 6px 20px rgba(217,74,88,.45);
}
.go[hidden] { display: none; }

/* やめる。**右下**。プレイ中に誤って押しにくい大きさに留める */
#quit {
  position: absolute; right: .7em; bottom: .7em;
  font-size: 3.4vmin; color: #cfd8e3; text-decoration: none;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
  border-radius: .5em; padding: .5em 1em;
}