:root{
  --pink-bg:#fdecef;
  --red:#b7283d;
  --dark:#3b2025;
  --sachiko:#f7a7c4;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--pink-bg)}
body{
  display:flex;
  justify-content:center;
  color:var(--dark);
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
}
.app{
  position:relative;
  width:min(100vw,512px);
  aspect-ratio:2/3;
  overflow:hidden;
  background:var(--pink-bg);
  box-shadow:0 0 18px rgba(83,27,39,.10);
}
.base{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  user-select:none;-webkit-user-drag:none;
}
.tube{
  position:absolute;left:36.8%;top:20.2%;width:26.4%;height:auto;
  transform-origin:50% 76%;
  filter:drop-shadow(0 3px 4px rgba(75,35,25,.08));
  pointer-events:auto;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  will-change:transform;
}
.tube.shake{animation:tubeShake 2.08s ease-in-out}
@keyframes tubeShake{
  0%{transform:translateY(0) rotate(0)}
  10%{transform:translateY(-2px) rotate(-4.4deg)}
  20%{transform:translateY(0) rotate(4deg)}
  30%{transform:translateY(-2px) rotate(-4.2deg)}
  40%{transform:translateY(0) rotate(3.8deg)}
  50%{transform:translateY(-2px) rotate(-3.6deg)}
  60%{transform:translateY(0) rotate(3.2deg)}
  70%{transform:translateY(0) rotate(-2.4deg)}
  80%{transform:translateY(0) rotate(1.6deg)}
  90%{transform:translateY(0) rotate(-.6deg)}
  100%{transform:translateY(0) rotate(0)}
}
.stick{
  position:absolute;left:49.15%;top:25.4%;width:2.7%;height:18.5%;
  z-index:3;pointer-events:none;opacity:0;transform:translateY(145%);
  border:1px solid rgba(91,53,20,.88);border-radius:10px 10px 5px 5px;
  background:linear-gradient(90deg,#8f5f2a,#b98445 12%,#e6c47f 35%,#f4dda5 50%,#d0a35f 68%,#9e6b30 88%,#76471f);
  box-shadow:inset 2px 0 2px rgba(255,255,255,.28),inset -2px 0 2px rgba(74,38,11,.22),0 5px 9px rgba(70,35,12,.24);
}
.stick.pop{animation:stickPop 1.25s cubic-bezier(.22,.8,.2,1) forwards}
@keyframes stickPop{from{opacity:0;transform:translateY(145%)}to{opacity:1;transform:translateY(0)}}
.tap{
  position:absolute;left:19%;top:61.2%;width:62%;height:8.8%;
  border:0;background:transparent;border-radius:26px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.tap:disabled{cursor:default}
.fx{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0}
.fx.gold{background:radial-gradient(circle,#fff8ae 0 7%,rgba(255,213,71,.65) 23%,transparent 58%);animation:goldGlow 2.4s ease forwards}
.fx.gray{background:linear-gradient(rgba(105,105,105,.48),rgba(170,170,170,.2));animation:grayWash 1.35s ease forwards}
.fx.dark{background:#000;animation:darkFlash .825s ease forwards}
.fx.white{background:#fff;animation:whiteWash 3.15s ease forwards}
@keyframes goldGlow{0%{opacity:0}30%{opacity:.95}100%{opacity:0}}
@keyframes grayWash{0%{opacity:0}35%{opacity:.75}100%{opacity:0}}
@keyframes darkFlash{0%{opacity:0}35%{opacity:.82}100%{opacity:0}}
@keyframes whiteWash{0%{opacity:0}40%{opacity:.96}72%{opacity:.72}100%{opacity:0}}
.confetti{position:absolute;inset:0;z-index:5;overflow:hidden;pointer-events:none}
.piece{position:absolute;top:-30px;opacity:.95;animation:fall linear forwards}
.piece.gold{background:#d6a63c;width:8px;height:14px}
.piece.sakura{width:10px;height:10px;background:#f3a7b9;border-radius:70% 30% 70% 30%;box-shadow:0 0 4px rgba(255,255,255,.65)}
@keyframes fall{to{transform:translateY(165vh) rotate(720deg);opacity:.2}}
.result{
  display:none;position:absolute;left:7%;right:7%;bottom:3.4%;z-index:7;
  padding:18px 17px 16px;text-align:center;border:2px solid #c63349;border-radius:16px;
  background:rgba(255,250,246,.985);box-shadow:0 14px 30px rgba(66,24,31,.24);
}
.result.show{display:block;animation:resultIn .9s cubic-bezier(.2,.9,.2,1)}
@keyframes resultIn{
  0%{opacity:0;transform:translateY(24px) scale(.92)}
  55%{opacity:1;transform:translateY(-3px) scale(1.025)}
  100%{opacity:1;transform:none}
}
.rank{margin:0 0 8px;color:#a61d2c;font-size:clamp(30px,8vw,48px);letter-spacing:.12em}
.message{margin:0;font-size:clamp(13px,3.25vw,18px);line-height:1.85}
.message .sachiko{
  display:inline-block;position:relative;margin-bottom:10px;padding:10px 16px 11px;
  border-radius:16px;background:var(--sachiko);color:#fff;font-size:1.15em;font-weight:700;line-height:1.2;
  box-shadow:0 4px 10px rgba(132,45,78,.15);
}
.message .sachiko::after{
  content:"";position:absolute;left:16px;bottom:-7px;
  border-top:8px solid var(--sachiko);border-right:8px solid transparent;
}
.close{
  margin-top:13px;padding:9px 22px;border:0;border-radius:999px;
  background:var(--red);color:#fff;font:inherit;cursor:pointer;
}
body.hakushi .result{border-color:#9d8767;background:rgba(255,255,252,.995)}
body.hakushi .rank{color:#665744}