:root{
  --w: 360px;
}

body{
  margin:0;
  background:#000;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#wrap{
  width:var(--w);
  margin:auto;
  background:linear-gradient(#bfe9ff, #dff6ff);
  position:relative;
  overflow:hidden;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* FEVER背景（wrap全体） */
#wrap.feverBg{
  background:linear-gradient(#ffd7f2, #fff1c7);
  animation:wrapPop 0.6s infinite;
}
@keyframes wrapPop{
  0%{filter:hue-rotate(0deg)}
  100%{filter:hue-rotate(60deg)}
}

/* HEADER */
#header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 8px 6px;
}
.panel{
  background:#fff;
  min-width:108px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:900;
  border-radius:14px;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  border:2px solid rgba(0,0,0,.05);
}

/* TIMER */
#timerBox{
  width:64px;
  height:64px;
  position:relative;
  background:#fff;
  border-radius:18px;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  border:2px solid rgba(0,0,0,.05);
  display:flex;
  align-items:center;
  justify-content:center;
}
#timerCanvas{display:block}
#timerText{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:900;
}

/* HIPS */
#hipsRow{
  display:flex;
  justify-content:space-around;
  padding:6px 0 2px;
  z-index:300;
  position:relative;
}
.hipBtn{
  width:46px;
  cursor:pointer;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.18));
  transition: transform .08s;
}
.hipBtn:active{ transform: scale(.95); }

.shake{animation:shake .25s}
@keyframes shake{
  0%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  50%{transform:translateX(4px)}
  75%{transform:translateX(-4px)}
  100%{transform:translateX(0)}
}

/* FIELD（白い箇所 → bk.png） */
#field{
  height:250px;
  background:
    url("images/bk.png") center/cover no-repeat;
  border-radius:16px;
  margin:6px 8px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.06);
  position:relative;
}

/* FEVER中は fever_bk.png に差し替え */
#wrap.feverBg #field{
  background:
    url("images/fever_bk.png") center/cover no-repeat;
}

/* POOP */
.poop{
  position:absolute;
  width:32px;
  z-index:600;
  pointer-events:none;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.25));
}
.prin{animation:prin .25s ease-out}
@keyframes prin{
  0%{transform:scale(1,1)}
  40%{transform:scale(1.2,.7)}
  70%{transform:scale(.9,1.1)}
  100%{transform:scale(1,1)}
}

/* TOILET */
#toilets{
  display:flex;
  justify-content:space-around;
  padding:4px 6px 2px;
  position:relative;
  z-index:200;
}
.toiletWrap{width:54px;position:relative}
.toiletImg{
  width:54px;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.18));
}

/* SPLASH */
.splash{
  position:absolute;
  width:42px;
  left:50%;
  transform:translateX(-50%);
  z-index:9999; /* 最前面 */
  animation:splash .5s forwards;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.18));
}
@keyframes splash{
  from{opacity:1;transform:translate(-50%,0) scale(.4)}
  to{opacity:0;transform:translate(-50%,-40px) scale(1.4)}
}

/* BAR */
#barOuter{
  height:18px;
  background:#fff;
  margin:10px 12px 14px;
  border-radius:999px;
  overflow:hidden;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.06), 0 6px 14px rgba(0,0,0,.12);
}
#barInner{
  height:100%;
  width:0%;
  background:#8b4513;
  border-radius:999px;
}
.barFever{animation:rainbowBG .6s infinite;box-shadow:0 0 12px #fff}
@keyframes rainbowBG{
  0%{background:red}14%{background:orange}
  28%{background:yellow}42%{background:green}
  57%{background:cyan}71%{background:blue}
  85%{background:purple}100%{background:red}
}

/* FEVER（テキストはうんちより後ろ：z-index 100） */
#feverCenter{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  z-index:100;
  pointer-events:none;
}
#feverText,#feverCount{
  font-weight:900;
  animation:rainbow 0.6s infinite;
  text-shadow: 0 6px 14px rgba(0,0,0,.18);
}
#feverText{font-size:42px}
#feverCount{font-size:64px}
@keyframes rainbow{
  0%{color:red}14%{color:orange}
  28%{color:yellow}42%{color:green}
  57%{color:cyan}71%{color:blue}
  85%{color:purple}100%{color:red}
}

/* FEVER文字画像（ランダム表示レイヤー：うんちより後ろに置く） */
#feverFx{
  position:absolute;
  inset:0;
  z-index:150; /* うんち(600)より後ろ、FEVERテキスト(100)より前 */
  pointer-events:none;
}
.fvPop{
  position:absolute;
  width:140px;
  opacity:0;
  animation:fvPop 0.9s ease-out forwards;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.25));
}
@keyframes fvPop{
  0%{opacity:0; transform:translateY(10px) scale(.6) rotate(-6deg)}
  20%{opacity:1; transform:translateY(0) scale(1) rotate(0deg)}
  100%{opacity:0; transform:translateY(-22px) scale(1.05) rotate(6deg)}
}

/* OVERLAY */
#overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
}
#overlay .box{
  background:#fff;
  padding:18px 16px;
  border-radius:16px;
  text-align:center;
  width:82%;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
#overlay button{
  border:0;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(0,0,0,.15);
  cursor:pointer;
}
.resultButtons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 14px;
}

#countdown{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:96px;
  font-weight:900;
  color:#ff4fd8;
  text-shadow:
    0 0 10px #fff,
    0 0 20px #ffb3e6,
    0 0 30px #ff4fd8;
  z-index:9999;
  pointer-events:none;
  animation: pop .4s ease-out;
}

@keyframes pop{
  0%{transform:translate(-50%,-50%) scale(.3); opacity:0}
  70%{transform:translate(-50%,-50%) scale(1.2)}
  100%{transform:translate(-50%,-50%) scale(1); opacity:1}
}

/* ===== ベストスコア演出 ===== */
.bestScoreText{
  font-size:28px;
  font-weight:900;
  text-align:center;
  margin-bottom:8px;
  background:linear-gradient(
    90deg,
    red, orange, yellow, green, cyan, blue, violet
  );
  background-size:400% 400%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: rainbowGlow 1.2s linear infinite;
  text-shadow:
    0 0 10px rgba(255,255,255,.9),
    0 0 20px rgba(255,0,255,.8);
}

@keyframes rainbowGlow{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}

/* ===== アイテムバー ===== */
#itemBar{
  display:flex;
  justify-content:space-around;
  padding:4px 6px 12px;
}

.itemIcon{
  position:relative;
  width:52px;
  cursor:pointer;
}

/* ===== アイテムバー ===== */
#itemBar{
  display:flex;
  justify-content:space-around;
  padding:4px 6px 10px;
}

.itemIcon{
  position:relative;
  width:44px;              /* 少し小さく */
  cursor:pointer;
}

.itemIcon img{
  width:44px;              /* 小さく */
  height:44px;
  border-radius:12px;      /* 角丸 */
  object-fit:cover;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  transition:transform .1s ease;
}

/* 押したとき少し縮む */
.itemIcon:active img{
  transform:scale(.92);
}

.itemCount{
  position:absolute;
  right:-6px;
  bottom:-6px;
  background:#ff4fd8;
  color:#fff;
  font-size:11px;
  font-weight:900;
  border-radius:50%;
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}