* {
  box-sizing: border-box;
  touch-action: manipulation; /*タブレット連打時の拡大防止 */
}

html {
  margin: 0;
  height: 100%;
}

body {
  margin: 0;
  height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  margin: 0 auto;
  background: #ffffff;
  border: 2px solid #333;
  width: 100%;
  max-width: 1196px;
  height: 540px;
  display: flex;
  flex-direction: column;
}

.game-header {
  height: 50px;
  padding: 10px;
  background: #ffffff;
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.game-header.hide-score #scoreBox{display:none}

.info {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-weight: bold;
  flex-wrap: wrap;
  width: 100%;
}

.game-main {
  position: relative;
  flex: 1;
  overflow: hidden;
  width: 100%;
  min-height: 0;
  background: linear-gradient(175deg,#C8EEFF 0%,#8FD4F0 35%,#A8E6A0 72%,#7DC56A 100%);
  box-shadow: 0 2px 0 rgba(255,255,255,0.5) inset;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --sky1:#B8E4F9;--sky2:#7EC8E3;--grass:#7DC56A;--grass2:#5DAA48;
  --panel:rgba(255,255,255,0.95);
  --td:#1E2D6B;--tm:#5060A0;
  --acc:#FF5C5C;--acc2:#FFD84D;--acc3:#50D080;--acc4:#4E8FFF;
  --font:'Kosugi Maru',sans-serif;--fontB:'Nunito',sans-serif;
}
.cl{position:absolute;pointer-events:none;animation:cloudMove 28s linear infinite}
.cl span{display:block;background:rgba(255,255,255,0.88);border-radius:60px;position:relative}
.cl span::before,.cl span::after{content:'';position:absolute;background:rgba(255,255,255,0.88);border-radius:50%}
.c1{top:22px;left:-140px;animation-duration:32s}
.c1 span{width:130px;height:42px}
.c1 span::before{width:66px;height:58px;top:-30px;left:20px}
.c1 span::after{width:50px;height:46px;top:-24px;left:58px}
.c2{top:48px;left:-100px;animation-duration:24s;animation-delay:-10s}
.c2 span{width:95px;height:32px}
.c2 span::before{width:48px;height:44px;top:-24px;left:14px}
.c2 span::after{width:36px;height:34px;top:-18px;left:44px}
.c3{top:14px;left:-80px;animation-duration:38s;animation-delay:-20s}
.c3 span{width:78px;height:26px}
.c3 span::before{width:40px;height:36px;top:-18px;left:10px}
@keyframes cloudMove{from{transform:translateX(0)}to{transform:translateX(1400px)}}

.tree{position:absolute;bottom:0;pointer-events:none}
.tree svg{display:block}

.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center}
.screen.on{display:flex}

#sTitle{background:linear-gradient(160deg,rgba(180,230,255,0.94),rgba(130,200,240,0.97));z-index:20}
.t-board{
  background:var(--panel);border-radius:32px;padding:28px 52px 24px;text-align:center;
  box-shadow:0 10px 40px rgba(0,40,120,0.18),0 2px 0 rgba(255,255,255,0.8) inset;
  border:4px solid rgba(255,255,255,0.95);
  animation:popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes popIn{from{transform:scale(0.6);opacity:0}to{transform:scale(1);opacity:1}}
.t-icon{font-size:52px;display:block;margin-bottom:4px;animation:sway 3s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.t-title{font-size:30px;font-weight:700;color:var(--td);letter-spacing:.05em;line-height:1.4}
.btn-go{
  margin-top:20px;background:var(--acc);color:#fff;border:none;border-radius:60px;
  padding:13px 54px;font-family:var(--font);font-size:22px;font-weight:700;cursor:pointer;
  letter-spacing:.06em;box-shadow:0 5px 0 #B83030,0 8px 22px rgba(255,80,80,0.38);
  transition:transform .1s,box-shadow .1s;animation:pulse 2s ease-in-out infinite;animation-delay:0.8s
}
.btn-go:hover{transform:translateY(-3px);box-shadow:0 8px 0 #B83030,0 12px 28px rgba(255,80,80,0.44);animation:none}
.btn-go:active{transform:translateY(4px);box-shadow:0 1px 0 #B83030}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

#sGame{padding:10px 18px 8px;z-index:5;display:none;flex-direction:column}
#sGame,
#sResult{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
#sGame.on{display:flex}

#topBar{display:flex;align-items:center;gap:10px;height:32px;flex-shrink:0}
#scoreBox{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,0.9);border-radius:30px;padding:5px 16px;
  font-size:16px;font-weight:700;color:var(--td);box-shadow:0 2px 8px rgba(0,40,120,0.1);
  min-width:120px;text-align:center;white-space:nowrap;
  display:flex;align-items:center;gap:8px
}
#scoreUmbrellas{display:flex;align-items:center;gap:2px;min-width:30px}
.score-umbrella{font-size:21px;line-height:1;color:#2E86C1}
#timerWrap{
  flex:1;background:rgba(255,255,255,0.55);border-radius:30px;height:20px;
  overflow:hidden;position:relative
}
.btn-quit{
  background:rgba(255,255,255,0.88);border:2px solid rgba(80,96,160,0.28);border-radius:20px;
  padding:4px 16px;font-family:var(--font);font-size:14px;font-weight:700;color:var(--tm);
  cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px rgba(0,40,120,0.08)
}
.btn-quit:hover{background:#fff;transform:translateY(-1px)}
#timerBar{
  height:100%;border-radius:30px;
  background:#4DB6E8;
  transition:width 1s linear;width:100%
}
#timerWrap.urgent #timerBar{animation:timerUrgent .5s ease-in-out infinite}
@keyframes timerUrgent{0%,100%{opacity:1}50%{opacity:.5}}
#qRow{display:flex;align-items:stretch;gap:14px;flex-shrink:0;margin-top:2px;height:124px}
#charWrap{width:98px;flex-shrink:0;position:relative;display:flex;align-items:flex-end;justify-content:center}
.char-img{width:94px;height:116px;object-fit:contain}
#clueStack{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
#clue{
  flex:0 0 auto;background:rgba(255,255,255,0.95);border-radius:24px;padding:15px 22px;
  position:relative;box-shadow:0 3px 14px rgba(0,40,120,0.1);
  font-size:19px;color:var(--td);line-height:1.65;display:flex;align-items:center;
  white-space:nowrap;
  border:2px solid rgba(200,230,255,0.8)
}
#clue::before{
  content:'';position:absolute;left:-16px;top:50%;transform:translateY(-50%);
  border:9px solid transparent;border-right-color:rgba(255,255,255,0.95)
}
.kw{
  display:inline-block;font-weight:700;font-size:20px;
  padding:3px 8px;border-radius:9px;margin:0 2px;
  background:#FFF3CC;color:#6B4400
}

#grid{
  flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);
  gap:8px;padding:5px 0 2px;align-content:center
}
.ub{
  background:rgba(255,255,255,0.25);border:3px solid transparent;border-radius:14px;
  cursor:pointer;padding:3px 2px 5px;
  transition:transform .15s,border-color .15s,background .15s;
  display:flex;align-items:center;justify-content:center;position:relative
}
.ub:hover{transform:scale(1.1) translateY(-4px);background:rgba(255,255,255,0.55);border-color:rgba(255,255,255,0.7)}
.ub.ok{animation:okAnim .55s cubic-bezier(0.34,1.56,0.64,1) forwards}
.ub.ng{animation:ngAnim .4s ease-out forwards;border-color:#FF5C5C!important}
@keyframes okAnim{
  0%{transform:scale(1)}
  40%{transform:scale(1.28) translateY(-8px) rotate(-4deg);filter:brightness(1.25)}
  70%{transform:scale(1.18) translateY(-5px) rotate(3deg)}
  100%{transform:scale(1)}
}
@keyframes ngAnim{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px) rotate(-3deg)}
  40%{transform:translateX(7px) rotate(3deg)}
  60%{transform:translateX(-5px) rotate(-2deg)}
  80%{transform:translateX(5px) rotate(2deg)}
}

#fb{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.4);
  background:rgba(255,255,255,0.97);border-radius:22px;padding:16px 36px;
  font-size:28px;font-weight:700;pointer-events:none;z-index:30;
  opacity:0;transition:transform .22s cubic-bezier(0.34,1.56,0.64,1),opacity .18s;
  text-align:center;white-space:nowrap
}
#fb.ok{opacity:1;transform:translate(-50%,-50%) scale(1);color:#1A7030;border:4px solid #50D080}
#fb.ng{opacity:1;transform:translate(-50%,-50%) scale(1);color:#B02020;border:4px solid #FF5C5C}

.cf{
  position:absolute;pointer-events:none;z-index:25;
  width:9px;height:9px;border-radius:2px;
  animation:cfFall linear forwards
}
@keyframes cfFall{
  0%{transform:translateY(0) rotate(0deg);opacity:1}
  100%{transform:translateY(460px) rotate(720deg);opacity:0}
}

#sResult{background:linear-gradient(160deg,rgba(168,224,255,0.96),rgba(130,200,120,0.97));z-index:20;display:none}
#sResult.on{display:flex;flex-direction:column;align-items:center;justify-content:center}
.r-board{
  background:var(--panel);border-radius:32px;padding:24px 52px 22px;text-align:center;
  box-shadow:0 10px 40px rgba(0,40,120,0.18);border:4px solid rgba(255,255,255,0.95);
  animation:popIn .5s cubic-bezier(0.34,1.56,0.64,1) both;min-width:360px
}
.r-title{font-size:18px;color:var(--tm);margin-bottom:10px}
.r-num{
  font-family:var(--fontB);font-size:80px;font-weight:900;color:var(--acc);
  line-height:1;text-shadow:0 4px 0 #B83030
}
.r-unit{font-size:16px;color:var(--tm);margin-top:2px}
.r-stars{font-size:38px;letter-spacing:6px;margin:10px 0 4px;animation:starPop .4s cubic-bezier(0.34,1.56,0.64,1) both;animation-delay:.3s}
@keyframes starPop{from{transform:scale(0.3);opacity:0}to{transform:scale(1);opacity:1}}
.r-msg{font-size:17px;color:var(--td);margin-top:2px;font-weight:700}
.r-detail{font-size:13px;color:var(--tm);margin-top:6px}
.btn-retry{
  margin-top:18px;background:var(--acc4);color:#fff;border:none;border-radius:60px;
  padding:12px 44px;font-family:var(--font);font-size:18px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 0 #2050B0,0 6px 18px rgba(78,143,255,0.38);transition:transform .1s,box-shadow .1s
}
.btn-retry:hover{transform:translateY(-2px);box-shadow:0 6px 0 #2050B0}
.btn-retry:active{transform:translateY(3px);box-shadow:0 1px 0 #2050B0}