:root{
  --w:min(100vw, calc(100dvh * 9 / 16));
  --h:min(100dvh, calc(100vw * 16 / 9));
  --gold:#ffd85b;
  --orange:#ff9d22;
  --red:#ff3d47;
  --black:#09050d;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050207;color:#fff;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif}
button,textarea,input{font:inherit}
.phone{
  position:relative;
  width:var(--w);
  height:var(--h);
  max-width:480px;
  max-height:100dvh;
  margin:0 auto;
  overflow:hidden;
  background:#000;
  box-shadow:0 0 40px rgba(0,0,0,.8);
  touch-action:manipulation;
}
.screen{position:absolute;inset:0;display:none;overflow:hidden;background:#000}
.screen.active{display:block}
.screen-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;pointer-events:none}
.hotspot{position:absolute;border:0;background:rgba(255,255,255,0);cursor:pointer}
.hotspot:active{background:rgba(255,255,255,.08)}
.start-hotspot{left:15%;right:15%;bottom:7.2%;height:8.5%;border-radius:999px}
.drink-hotspot{left:6%;right:6%;bottom:5.9%;height:12.5%;border-radius:999px}
.top-left-hotspot{left:2.5%;top:1%;width:16%;height:8%;border-radius:18px}
.top-right-hotspot{right:2.5%;top:1%;width:16%;height:8%;border-radius:18px}
.again-hotspot{left:5%;bottom:12.7%;width:43%;height:9.2%;border-radius:18px}
.penalty-hotspot{right:5%;bottom:12.7%;width:43%;height:9.2%;border-radius:18px}
.share-hotspot{left:7%;bottom:5.2%;width:40%;height:6.2%;border-radius:12px}

.sheet{
  position:absolute;
  left:4%;
  right:4%;
  bottom:3%;
  z-index:10;
  padding:16px;
  border-radius:24px;
  background:rgba(11,5,16,.86);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 45px rgba(0,0,0,.55);
  backdrop-filter:blur(14px);
  transform:translateY(120%);
  transition:.25s ease;
}
.sheet.show{transform:translateY(0)}
.sheet-handle{width:46px;height:5px;background:rgba(255,255,255,.35);border-radius:99px;margin:0 auto 10px}
.sheet h1{font-size:22px;line-height:1.1;margin:0 0 6px;font-weight:1000;color:#ffe188}
.sheet p{font-size:12px;line-height:1.45;color:#e6d8ec;margin:0 0 10px}
textarea{
  width:100%;
  resize:none;
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  background:rgba(255,255,255,.08);
  color:#fff;
  padding:12px;
  outline:none;
}
.setting-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.setting-grid label{font-size:12px;font-weight:900;color:#ffe6a0}
.setting-grid input{
  display:block;width:100%;margin-top:6px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;background:rgba(255,255,255,.08);
  color:#fff;padding:10px;outline:none;
}
.sheet-actions{display:grid;grid-template-columns:.8fr 1.2fr;gap:10px}
.gold-btn,.sub-btn{
  border:none;border-radius:16px;padding:13px 10px;font-weight:1000;color:#fff;
}
.gold-btn{background:linear-gradient(180deg,#fff4a9 0,#ffd33d 48%,#ff951e 100%);color:#331900;box-shadow:0 8px 20px rgba(255,160,34,.34)}
.sub-btn{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14)}
.sub-btn.wide{width:100%;margin-top:10px}
.close-sheet{width:100%;margin-top:8px;border:0;background:transparent;color:#d9c9e1;font-weight:800;padding:7px}

/* Dynamic UI overlays */
.dyn{
  position:absolute;
  z-index:3;
  color:#fff;
  font-weight:1000;
  text-align:center;
  pointer-events:none;
  text-shadow:
    -2px -2px 0 #111,
     2px -2px 0 #111,
    -2px  2px 0 #111,
     2px  2px 0 #111,
     0 5px 12px rgba(0,0,0,.6);
}
.turn-name{
  top:14.2%;
  left:25.5%;
  right:25.5%;
  height:5.1%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(18px, 5.8vw, 32px);
  color:#ffe65d;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.screen.danger-mode .turn-name{
  top:10.7%;
  left:22.5%;
  right:22.5%;
  height:6.2%;
}
.cups-text{
  top:18.1%;
  left:4.4%;
  width:12%;
  font-size:clamp(44px, 15vw, 68px);
  color:#fff;
  line-height:1;
}
.danger-text{
  top:18.4%;
  right:3.6%;
  width:22%;
  font-size:clamp(38px, 12.5vw, 60px);
  color:#ff564c;
  line-height:1;
}
.danger-fill{
  position:absolute;
  z-index:4;
  display:none;
  top:31.15%;
  left:62.5%;
  width:0%;
  max-width:28%;
  height:1.75%;
  border-radius:99px;
  background:linear-gradient(90deg,#ffd74d,#ff7830,#ff203d);
  box-shadow:0 0 14px rgba(255,61,71,.7);
  transition:.25s ease;
  pointer-events:none;
}
.screen.danger-mode .cups-text{
  top:17.9%;
  left:18.3%;
  width:13%;
}
.screen.danger-mode .danger-text{
  top:18.6%;
  right:12.3%;
  width:22%;
}
.screen.danger-mode .danger-fill{
  display:block;
  top:26.4%;
  left:49.4%;
  max-width:35.5%;
  height:1.55%;
}
.players-bar{
  position:absolute;
  z-index:4;
  left:5.5%;
  right:5.5%;
  bottom:18.9%;
  height:10.3%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.8%;
  pointer-events:none;
}
.player-label{
  position:relative;
  border-radius:12px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:6% 10% 0;
  color:#fff;
  font-size:clamp(13px, 3.7vw, 18px);
  font-weight:1000;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:-2px -2px 0 #111,2px -2px 0 #111,-2px 2px 0 #111,2px 2px 0 #111;
}
.player-label.active::after{
  content:"今ココ!";
  position:absolute;
  left:10%;
  right:10%;
  bottom:-18%;
  padding:3px 4px;
  border-radius:999px;
  background:#ff4fa3;
  color:#fff;
  font-size:clamp(9px, 2.9vw, 12px);
  box-shadow:0 4px 10px rgba(0,0,0,.35);
}
.toast{
  position:absolute;
  z-index:8;
  left:8%;
  right:8%;
  top:44%;
  padding:14px 16px;
  border-radius:20px;
  background:rgba(0,0,0,.72);
  border:2px solid rgba(255,216,91,.9);
  color:#ffe76f;
  font-size:clamp(18px, 5.5vw, 28px);
  font-weight:1000;
  text-align:center;
  box-shadow:0 14px 30px rgba(0,0,0,.45);
  animation:toast .7s ease;
}
.hidden{display:none!important}
.drink-flash{
  position:absolute;
  z-index:7;
  left:50%;
  top:58%;
  transform:translate(-50%,-50%);
  font-size:clamp(50px, 18vw, 90px);
  filter:drop-shadow(0 8px 20px rgba(255,216,91,.9));
  animation:shot .65s ease;
}
.double-zone{
  position:absolute;
  z-index:6;
  left:4.5%;
  right:4.5%;
  bottom:7.7%;
  height:10.4%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4%;
}
.double-zone button{
  border:0;
  border-radius:18px;
  color:#fff;
  font-size:clamp(18px, 5.5vw, 27px);
  font-weight:1000;
  text-shadow:-2px -2px 0 #111,2px -2px 0 #111,-2px 2px 0 #111,2px 2px 0 #111;
  box-shadow:0 10px 20px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.35);
}
#singleBtn{background:linear-gradient(180deg,#ffdd64,#ff3b22)}
#doubleBtn{background:linear-gradient(180deg,#af5cff,#6e22e8)}

.result-loser{
  top:21.8%;
  left:10%;
  right:10%;
  height:7.8%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(24px, 7.4vw, 46px);
  color:#d68bff;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.result-sub{
  top:29.8%;
  left:12%;
  right:12%;
  font-size:clamp(16px, 5vw, 27px);
}
.result-cups{
  top:41.0%;
  left:8.4%;
  width:31%;
  height:9.5%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(42px, 13.5vw, 66px);
  color:#a62418;
  text-shadow:none;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
}
.penalty-sheet{z-index:20}
.penalty-text{
  min-height:82px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  font-size:clamp(20px, 6vw, 30px);
  font-weight:1000;
  line-height:1.35;
  color:#ffe76f;
  margin:12px 0;
}
@keyframes toast{
  0%{opacity:0;transform:translateY(10px) scale(.95)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes shot{
  0%{opacity:0;transform:translate(-50%,20%) scale(.3) rotate(-20deg)}
  35%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(10deg)}
  100%{opacity:0;transform:translate(-50%,-130%) scale(.8) rotate(20deg)}
}
@media (max-height:650px){
  .sheet{padding:12px}
  .sheet h1{font-size:18px}
  .sheet p{display:none}
  textarea{padding:9px;rows:3}
  .setting-grid{margin:8px 0}
  .gold-btn,.sub-btn{padding:10px}
}