* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation; /* タブレット連打時の拡大防止 */
}
html { margin: 0; height: 100%; }
body {
  margin: 0; height: 100vh;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Sans",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
  background: #f2f2f2;
  display: flex; justify-content: center; align-items: center;
}
.container {
  margin: 0 auto; background: #fff; border: 2px solid #333;
  width: 100%; max-width: 1196px; height: 540px;
  display: flex; flex-direction: column;
}
.game-header {
  height: 50px; padding: 10px; flex: 0 0 50px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #fff5d6 0%, #ffeaa0 40%, #ffe0b2 100%);
}
.info { color: #e65c00; font-size: 24px; font-weight: 900; letter-spacing: 3px; text-align: center; }
.game-main {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  background: linear-gradient(160deg, #fff5d6 0%, #ffeaa0 40%, #ffe0b2 100%);
}
.stars-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.star { position: absolute; border-radius: 50%; background: rgba(255,220,50,.35); animation: twinkle 2s ease-in-out infinite; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; }
.screen.active { display: flex; }
button { font-family: inherit; }
#title-screen { gap: 0; }
.title-deco { font-size: 58px; line-height: 1; margin-bottom: 2px; animation: bounce 1.2s ease-in-out infinite; }
.title-text {
  margin: 0 0 4px; font-size: 66px; font-weight: 900; letter-spacing: 6px;
  color: #e65c00;
}
.title-sub { margin: 0 0 14px; font-size: 24px; color: #f97316; font-weight: 700; letter-spacing: 3px; }
.hands-preview { display: flex; gap: 20px; margin-bottom: 18px; }
.hand-icon {
  width: 92px; height: 92px; display: flex; align-items: center; justify-content: center;
  font-size: 62px; background: #fff; border-radius: 50%; box-shadow: 0 4px 16px rgba(255,150,0,.2);
}
.hand-icon:nth-child(1) { animation: floatA 2s ease-in-out infinite; }
.hand-icon:nth-child(2) { animation: floatB 2.3s ease-in-out infinite; }
.hand-icon:nth-child(3) { animation: floatC 1.8s ease-in-out infinite; }
.btn-start {
  position: relative; overflow: hidden; padding: 15px 64px; border: 0; border-radius: 60px;
  color: #fff; background: linear-gradient(135deg, #ff6b35, #f7c51a);
  box-shadow: 0 6px 0 #c44d15, 0 10px 24px rgba(255,107,53,.35);
  font-size: 28px; font-weight: 900; letter-spacing: 6px; cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.btn-start::after {
  content: ''; position: absolute; top: 6px; left: 20px; right: 20px; height: 8px;
  border-radius: 10px; background: rgba(255,255,255,.3);
}
.btn-start:hover { transform: translateY(-3px); box-shadow: 0 9px 0 #c44d15, 0 14px 28px rgba(255,107,53,.4); }
.btn-start:active { transform: translateY(3px); box-shadow: 0 3px 0 #c44d15; }
#play-screen { padding: 8px 32px 12px; justify-content: flex-start; }
.play-header { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 2px; }
.score-board { display: flex; gap: 12px; align-items: center; }
.score-box { padding: 3px 16px; border-radius: 18px; background: #fff; box-shadow: 0 3px 10px rgba(255,150,0,.15); text-align: center; }
.score-label { font-size: 12px; font-weight: 700; color: #f97316; letter-spacing: 2px; }
.score-val { font-size: 28px; font-weight: 900; color: #e65c00; line-height: 1; }
.round-info {
  padding: 4px 20px; border-radius: 20px; background: #fff; box-shadow: 0 3px 10px rgba(124,58,237,.15);
  color: #7c3aed; font-size: 21px; font-weight: 900; letter-spacing: 2px;
}
.btn-quit {
  padding: 5px 18px; border: 2px solid #d1d5db; border-radius: 24px; color: #6b7280; background: #fff;
  font-size: 16px; font-weight: 800; letter-spacing: 1px; cursor: pointer; justify-self: end;
}
.btn-quit:hover { background: #f3f4f6; border-color: #9ca3af; color: #374151; }
.round-dots { display: flex; gap: 9px; }
.round-dot { width: 24px; height: 24px; border: 2px solid #d1d5db; border-radius: 50%; background: #e5e7eb; transition: all .3s; }
.round-dot.win-dot { background: #22c55e; border-color: #16a34a; }
.round-dot.lose-dot { background: #ef4444; border-color: #dc2626; }
.round-dot.draw-dot { background: #fbbf24; border-color: #d97706; }
.battle-area { width: 100%; min-height: 0; display: flex; flex: 1; align-items: center; justify-content: space-around; }
.fighter { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.fighter-label { font-size: 19px; font-weight: 900; letter-spacing: 2px; }
.fighter-label.you, .final-score-lbl.you { color: #2563eb; }
.fighter-label.cpu, .final-score-lbl.cpu { color: #dc2626; }
.hand-display {
  width: 128px; height: 128px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #fff; font-size: 72px;
}
.hand-display.you-hand { box-shadow: 0 6px 24px rgba(37,99,235,.25), 0 0 0 4px #93c5fd; }
.hand-display.cpu-hand { box-shadow: 0 6px 24px rgba(220,38,38,.25), 0 0 0 4px #fca5a5; }
.hand-display.shake { animation: shakeHand .45s ease-in-out; }
.center-area { min-width: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.vs-badge { color: #7c3aed; font-size: 46px; font-weight: 900; animation: pulseBig 1s ease-in-out infinite; }
.janken-call {
  opacity: 0; transform: scale(.6); color: #7c3aed; font-size: 40px; font-weight: 900; letter-spacing: 3px;
  text-align: center; white-space: nowrap;
  transition: opacity .18s ease-out, transform .18s ease-out;
}
.janken-call.pon { font-size: 54px; color: #dc2626; }
.janken-call.show { opacity: 1; transform: scale(1); }
.result-msg {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; opacity: 0; pointer-events: none;
  background: transparent;
  transition: opacity .3s, visibility 0s linear .3s;
}
.result-msg.visible { visibility: visible; opacity: 1; transition-delay: 0s; }
.result-bubble {
  width: min(90%, 520px); padding: 26px 56px;
  border: 4px solid #fff; border-radius: 28px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 8px 32px rgba(0,0,0,.18); text-align: center;
}
.result-msg.visible .result-bubble { animation: feedbackPop .35s cubic-bezier(.34,1.56,.64,1); }
.result-emoji { font-size: 56px; line-height: 1; }
.result-feedback-text { margin-top: 6px; font-size: 36px; font-weight: 900; letter-spacing: 2px; }
.result-feedback-text.win { color: #2e7d32; }
.result-feedback-text.lose { color: #c62828; }
.result-feedback-text.draw { color: #d97706; }
@keyframes feedbackPop {
  0% { transform: scale(.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.choose-prompt {
  opacity: 0; transform: translateY(4px); color: #7c3aed; font-size: 21px; font-weight: 900;
  letter-spacing: 4px; pointer-events: none; transition: opacity .25s, transform .25s;
}
.choose-prompt.visible { opacity: 1; transform: translateY(0); animation: promptPulse 1.2s ease-in-out infinite; }
.choices { display: flex; gap: 18px; margin-top: 1px; }
.btn-choice {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 25px 10px;
  border: 3px solid transparent; border-radius: 24px; background: #fff;
  color: #374151; font-size: 16px; font-weight: 800; letter-spacing: 2px; cursor: pointer;
  transition: transform .1s, box-shadow .1s, border-color .12s, background .12s;
}
.btn-choice .choice-emoji { font-size: 48px; line-height: 1; }
.btn-choice:hover:not(:disabled) { transform: translateY(-3px); }
.btn-choice:active:not(:disabled) { transform: translateY(3px); }
.btn-choice.selected { transform: translateY(-4px) scale(1.04); border-color: #7c3aed; background: #f5f3ff; box-shadow: 0 8px 0 #4c1d95, 0 12px 20px rgba(124,58,237,.25); }
.btn-choice.selected .choice-emoji { animation: selectedBounce .4s ease-out; }
.btn-choice:disabled { opacity: .4; cursor: default; }
.btn-choice.selected:disabled { opacity: 1; }
.btn-choice.guu { box-shadow: 0 5px 0 #93c5fd, 0 8px 16px rgba(37,99,235,.15); }
.btn-choice.choki { box-shadow: 0 5px 0 #86efac, 0 8px 16px rgba(22,163,74,.15); }
.btn-choice.paa { box-shadow: 0 5px 0 #fca5a5, 0 8px 16px rgba(220,38,38,.15); }
#result-screen { padding: 20px; }
.result-emoji-big { margin-bottom: 4px; font-size: 82px; animation: bounceIn .5s ease-out; }
.result-title { margin-bottom: 10px; font-size: 52px; font-weight: 900; letter-spacing: 6px; }
.result-title.win-title { color: #16a34a; }
.result-title.lose-title { color: #dc2626; }
.result-title.draw-title { color: #d97706; }
.final-scores { display: flex; gap: 28px; margin-bottom: 18px; }
.final-score-box { padding: 10px 36px; border-radius: 24px; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.08); text-align: center; }
.final-score-lbl { margin-bottom: 2px; font-size: 19px; font-weight: 800; letter-spacing: 2px; }
.final-score-num { color: #1f2937; font-size: 54px; font-weight: 900; line-height: 1; }
.result-btns { display: flex; gap: 20px; }
.btn-retry, .btn-home {
  padding: 13px 45px; border: 0; border-radius: 48px; color: #fff;
  font-size: 22px; font-weight: 900; letter-spacing: 4px; cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.btn-retry { background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 5px 0 #14532d, 0 8px 20px rgba(22,163,74,.3); }
.btn-home { background: linear-gradient(135deg, #f97316, #fbbf24); box-shadow: 0 5px 0 #c2410c, 0 8px 20px rgba(249,115,22,.3); }
.btn-retry:hover, .btn-home:hover { transform: translateY(-3px); }
.btn-retry:active, .btn-home:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.5); }
@keyframes twinkle { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:1;transform:scale(1.3)} }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes floatA { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-8px) rotate(5deg)} }
@keyframes floatB { 0%,100%{transform:translateY(-4px)} 50%{transform:translateY(4px)} }
@keyframes floatC { 0%,100%{transform:translateY(0) rotate(5deg)} 50%{transform:translateY(-8px) rotate(-5deg)} }
@keyframes shakeHand { 0%,100%{transform:rotate(0) translateY(0)} 20%{transform:rotate(-14deg) translateY(-6px)} 40%{transform:rotate(14deg) translateY(-6px)} 60%{transform:rotate(-10deg) translateY(-3px)} 80%{transform:rotate(10deg) translateY(-3px)} }
@keyframes pulseBig { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
@keyframes promptPulse { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes selectedBounce { 0%{transform:scale(1)} 40%{transform:scale(1.3)} 70%{transform:scale(.92)} 100%{transform:scale(1)} }
@keyframes bounceIn { 0%{transform:scale(0)} 60%{transform:scale(1.2)} 100%{transform:scale(1)} }

@media (max-width: 650px) {
  #play-screen { padding-inline: 12px; }
  .hand-display { width: 100px; height: 100px; font-size: 56px; }
  .center-area { min-width: 100px; }
  .janken-call { font-size: 30px; }
  .janken-call.pon { font-size: 42px; }
  .btn-choice { padding-inline: 16px; }
}