* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a1220; color: #fff;
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; touch-action: none; user-select: none; -webkit-user-select: none; }
#game { position: fixed; inset: 0; display: block; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }

.hub { position: fixed; left: max(10px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); z-index: 20;
  color: #fff; text-decoration: none; font-size: 13px; padding: 6px 10px; border-radius: 999px; background: rgba(20, 10, 25, .55); }
.demo-tag { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 10;
  font-size: 13px; letter-spacing: .12em; padding: 6px 14px; border-radius: 999px; background: rgba(20, 10, 25, .55); pointer-events: none;
  animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .45; } }

.pause { position: fixed; left: max(10px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); z-index: 20;
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: rgba(20,10,25,.55); font-size: 20px; }

.cam { position: fixed; right: max(10px, env(safe-area-inset-right)); top: max(64px, calc(env(safe-area-inset-top) + 54px)); z-index: 15;
  width: 26vw; max-width: 170px; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; border: 3px solid rgba(255,255,255,.85); background: #000; }
.cam video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.cam span { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 12px; font-weight: bold; padding: 2px 0;
  background: rgba(20,10,25,.6); }
.cam.got { border-color: #59e08a; }

.pad { position: fixed; left: 0; right: 0; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 12; display: flex; justify-content: center; pointer-events: none; }
.pad .row { display: flex; gap: 10px; pointer-events: auto; }
.pad button { width: 76px; height: 76px; border-radius: 18px; border: 3px solid #fff; background: rgba(40, 20, 50, .7); font-size: 30px; line-height: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pad button small { font-size: 11px; margin-top: 4px; }
.pad button:active, .pad button.on { background: #ff9a3c; }
.pad.cam-mode button { width: 58px; height: 58px; font-size: 22px; opacity: .7; border-width: 2px; }

.sheet { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30; width: min(92vw, 420px);
  padding: 18px 18px 14px; border-radius: 20px; background: rgba(30, 16, 36, .92); box-shadow: 0 10px 40px rgba(0,0,0,.5); text-align: center; }
.sheet.small { width: min(86vw, 360px); }
/* 結果はキャラクターの表情が見えるよう下に寄せる */
#result { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); }
.sheet .logo { width: 100%; max-width: 320px; display: block; margin: 0 auto 6px; }
.big { display: block; width: 100%; margin: 10px 0; padding: 14px 10px; border-radius: 14px; border: none; font-size: 19px; font-weight: bold;
  background: linear-gradient(#ffb347, #ff7b54); color: #3a1608; }
.big small { display: block; font-size: 12px; font-weight: normal; margin-top: 3px; }
.big.alt { background: #4a3a5c; color: #fff; }
.toggle { display: block; margin: 8px 0; font-size: 14px; }
.note { font-size: 12px; color: #c9bcd4; margin: 8px 0; line-height: 1.6; }
.hub-in { color: #c9bcd4; font-size: 13px; }
.result-text { font-size: 22px; font-weight: bold; margin: 6px 0 10px; }
.howto { position: fixed; left: 50%; top: max(150px, 18vh); transform: translateX(-50%); z-index: 14; width: min(92vw, 440px);
  padding: 10px 14px; border-radius: 14px; background: rgba(20,10,25,.7); font-size: 14px; line-height: 1.6; text-align: center; pointer-events: none; }

/* 試合中の大きな案内（じゃんけんの結果・自分の番）。オレンジ = 指さす、青 = よける */
.banner { position: fixed; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 16; width: min(92vw, 440px);
  padding: 14px 16px; border-radius: 18px; text-align: center; font-size: 24px; font-weight: bold; line-height: 1.45; pointer-events: none;
  background: rgba(30, 16, 36, .88); border: 4px solid #fff; box-shadow: 0 8px 30px rgba(0,0,0,.45); animation: bannerIn .18s ease-out; }
@keyframes bannerIn { from { transform: translate(-50%, -50%) scale(1.25); opacity: 0; } }
.banner small { display: block; font-size: 14px; font-weight: normal; margin-top: 4px; color: #e8dcf0; }
.banner b.atk, .banner.atk b { color: #ffb347; } .banner b.def, .banner.def b { color: #6cc8ff; }
.banner.atk { border-color: #ff9a3c; } .banner.def { border-color: #3cb4ff; } .banner.draw { border-color: #ffe27a; }
.banner .vs { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 14px; font-weight: normal; margin-bottom: 4px; }
.banner .vs span { display: flex; flex-direction: column; align-items: center; }
.banner .vs i { font-style: normal; font-size: 48px; line-height: 1.15; }
.banner .vs em { font-style: normal; font-weight: bold; font-size: 18px; color: #ffe27a; }
/* あっちむいてほいの間ずっと出す役割の札（仮想キーの上） */
.role { position: fixed; left: 50%; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 92px); transform: translateX(-50%); z-index: 13;
  padding: 6px 16px; border-radius: 999px; font-size: 18px; white-space: nowrap; pointer-events: none; background: rgba(30, 16, 36, .85); border: 3px solid #fff; }
.role.atk { border-color: #ff9a3c; } .role.atk b { color: #ffb347; }
.role.def { border-color: #3cb4ff; } .role.def b { color: #6cc8ff; }