:root{
  --bg: #ffffff;
  --ink: #24242a;
  --sub: #8a8a94;
  --line: #ececef;
  --panel: #faf9f7;
  --accent: #ff5a4e;
  --accent-deep: #e2402f;
  --gold: #e8ac3c;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Zen Kaku Gothic New','Zen Maru Gothic',sans-serif;
  min-height:100%;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
.hidden{display:none !important;}

/* ---------- header ---------- */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 22px 6px;
}
.title{
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:900;
  font-size:20px;
  letter-spacing:0.02em;
  color:var(--ink);
}
.iconbtn{
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--sub);
  width:40px;height:40px;border-radius:12px;
  font-size:18px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  text-decoration:none;
}
.iconbtn:active{transform:scale(0.94);}

/* ---------- draw screen ---------- */
#screen-draw{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 24px 60px;
  min-height:calc(100vh - 64px);
  text-align:center;
}
.lede{
  color:var(--sub);
  font-size:14px;
  margin-bottom:24px;
}

/* ---- stage: count select ---- */
#stage-select{ width:100%; max-width:320px; }
.count-display{
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:900;
  font-size:52px;
  color:var(--ink);
  min-height:64px;
  margin-bottom:8px;
  letter-spacing:0.04em;
}
.count-display .unit{
  font-size:16px;
  color:var(--sub);
  font-weight:500;
  margin-left:4px;
}
.count-display.placeholder{ color:var(--line); }
.keypad{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin:18px 0 22px;
}
.key-btn{
  aspect-ratio:1/1;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:700;
  font-size:22px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.key-btn:active{ transform:scale(0.95); background:var(--panel); }
.key-btn.key-clear{ font-size:16px; color:var(--accent-deep); }
.key-btn.key-confirm{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  font-size:16px;
}
.key-btn.key-confirm:disabled{ opacity:0.4; pointer-events:none; }
.count-unit{
  color:var(--sub);
  font-size:12px;
  margin-bottom:28px;
}

/* ---- stage: single round ---- */
#stage-round{ width:100%; max-width:360px; display:flex; flex-direction:column; align-items:center; }
.round-progress{
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--sub);
  margin-bottom:22px;
}
.dial-wrap{
  position:relative;
  width:200px;height:200px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;
}
.dial-ring{
  position:absolute;inset:0;
  border-radius:50%;
  border:4px solid var(--line);
  pointer-events:none;
  opacity:0;
}
.dial-ring.loading{
  opacity:1;
  border-top-color:var(--accent);
  border-right-color:var(--accent);
  animation:rotate 0.5s linear infinite;
}
@keyframes rotate{ to{ transform:rotate(360deg); } }

.round-start-btn{
  width:170px;height:170px;
  border-radius:50%;
  border:none;
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:900;
  font-size:19px;
  letter-spacing:0.06em;
  color:#fff;
  background:linear-gradient(160deg, var(--accent), var(--accent-deep));
  box-shadow:0 14px 30px rgba(255,90,78,0.35);
  cursor:pointer;
  transition:transform 0.15s, box-shadow 0.15s, opacity 0.2s;
}
.round-start-btn:active{transform:scale(0.96); box-shadow:0 8px 18px rgba(255,90,78,0.3);}
.round-start-btn:disabled{opacity:0;pointer-events:none;}

.round-result{
  position:absolute;
  opacity:0;
  transform:translateY(10px) scale(0.98);
  transition:opacity 0.5s ease, transform 0.5s ease;
  text-align:center;
  pointer-events:none;
}
.round-result.show{ opacity:1; transform:translateY(0) scale(1); }
.round-rank{
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:900;
  font-size:30px;
  color:var(--accent-deep);
}
.round-name{
  font-size:14px;
  color:var(--ink);
  margin-top:2px;
  max-width:180px;
}

.round-next-btn{
  width:100%;
  padding:18px 0;
  border-radius:999px;
  border:none;
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:900;
  font-size:16px;
  color:#fff;
  background:linear-gradient(160deg, var(--accent), var(--accent-deep));
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s;
}
.round-next-btn.show{ opacity:1; pointer-events:auto; }

/* ---- stage: result list ---- */
#stage-result{ width:100%; max-width:420px; }
.result-title{
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:900;
  font-size:22px;
  margin-bottom:4px;
}
.result-count{
  color:var(--sub);
  font-size:13px;
  margin-bottom:22px;
}
.result-list{
  display:flex;flex-direction:column;gap:10px;
  margin-bottom:28px;
  max-height:50vh;
  overflow-y:auto;
  padding:2px;
}
.result-item{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 16px;
  text-align:left;
}
.result-item.is-participation{ background:#fff; border-style:dashed; }
.result-item .rank-badge{
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:900;
  font-size:14px;
  color:#fff;
  background:var(--accent-deep);
  border-radius:999px;
  padding:5px 12px;
  margin-right:12px;
  white-space:nowrap;
}
.result-item.is-participation .rank-badge{ background:var(--sub); }
.result-item .name{ flex:1; font-size:15px; }
.result-item .qty{
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--ink);
  margin-left:10px;
}
.again-btn{
  width:100%;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--ink);
  padding:16px 0;
  border-radius:999px;
  font-size:16px;
  font-weight:700;
  font-family:'Zen Maru Gothic',sans-serif;
  cursor:pointer;
}

.footnote{
  margin-top:36px;
  font-size:12px;
  color:var(--sub);
}

/* confetti (appended to body, position fixed) */
.confetti-piece{
  position:fixed;
  top:-16px;
  width:8px;height:14px;
  opacity:0.95;
  pointer-events:none;
  z-index:80;
  animation:confetti-fall linear forwards;
}
@keyframes confetti-fall{
  to{ transform:translateY(110vh) rotate(540deg); opacity:0.3; }
}

/* ---------- settings / admin screen ---------- */
#screen-settings{
  padding:18px 20px 60px;
  max-width:760px;
  margin:0 auto;
}
.settings-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;
}
.settings-head h2{
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:900;
  font-size:19px;
  color:var(--ink);
  margin:0;
}
.head-actions{ display:flex; gap:8px; align-items:center; }
.backbtn{
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  padding:10px 18px;border-radius:999px;font-size:14px;cursor:pointer;
  text-decoration:none;display:inline-block;
}
.prize-table{width:100%;border-collapse:collapse;}
.prize-table th{
  font-size:11px;color:var(--sub);text-align:left;
  padding:6px 6px;font-weight:500;
}
.prize-table td{padding:5px 6px;}
.prize-table input{
  width:100%;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--ink);
  border-radius:8px;
  padding:9px 8px;
  font-size:14px;
  font-family:inherit;
}
.prize-table input.num{text-align:center;}
.pct-cell{
  display:inline-block;
  width:100%;
  text-align:center;
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:700;
  font-size:14px;
  color:var(--gold);
  padding:9px 4px;
}
.pct-cell.zero{ color:var(--sub); font-weight:500; }
.prize-table tr.is-participation td{background:#fff7ed;}
.tag-participation{
  display:inline-block;
  margin-left:6px;
  font-size:10px;
  color:var(--gold);
  border:1px solid var(--gold);
  border-radius:999px;
  padding:1px 7px;
  vertical-align:middle;
}
.rowdel{
  background:none;border:none;color:var(--accent-deep);
  font-size:20px;cursor:pointer;padding:6px;
}
.addrow{
  margin:12px 0 10px;
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px dashed var(--line);
  background:transparent;
  color:var(--sub);
  font-size:14px;
  cursor:pointer;
}
.restore-default{
  margin:0 0 22px;
  width:100%;
  padding:10px;
  border-radius:12px;
  border:none;
  background:transparent;
  color:var(--sub);
  font-size:12px;
  text-decoration:underline;
  cursor:pointer;
}
.prob-summary{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
  font-size:13px;
  margin-bottom:20px;
  line-height:2;
}
.prob-summary .row{display:flex;justify-content:space-between;}
.prob-summary .warn{color:var(--accent-deep);}
.prob-summary .ok{color:var(--gold);}
.prob-summary .headline{font-weight:700;color:var(--ink);font-size:14px;margin-bottom:2px;}
.btn-row{display:flex;gap:10px;}
.btn-primary, .btn-secondary{
  flex:1;
  padding:15px 0;
  border-radius:14px;
  border:none;
  font-size:15px;
  font-weight:700;
  font-family:'Zen Maru Gothic',sans-serif;
  cursor:pointer;
}
.btn-primary{background:var(--accent);color:#fff;}
.btn-secondary{background:var(--panel);color:var(--accent-deep);border:1px solid var(--line);}
.shared-note{
  font-size:12px;color:var(--sub);line-height:1.7;
  margin:18px 0 4px;padding:12px 14px;
  background:var(--panel);border-radius:12px;border:1px solid var(--line);
}
.save-toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:10px 22px;border-radius:999px;
  font-size:14px;font-weight:700;opacity:0;transition:opacity 0.25s;pointer-events:none;
  z-index:90;
}
.save-toast.show{opacity:1;}

/* ---------- login gate (admin) ---------- */
#screen-login{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.login-card{
  width:100%;max-width:340px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:30px 26px;
  box-shadow:0 20px 50px rgba(0,0,0,0.06);
  text-align:center;
}
.login-card h1{
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:900;font-size:20px;margin:0 0 6px;
}
.login-card .sub{color:var(--sub);font-size:13px;margin-bottom:22px;}
.login-card input{
  width:100%;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:12px;padding:14px;font-size:16px;font-family:inherit;
  margin-bottom:12px;
}
.login-card button{
  width:100%;padding:15px 0;border-radius:12px;border:none;
  background:var(--accent);color:#fff;font-size:15px;font-weight:700;
  font-family:'Zen Maru Gothic',sans-serif;cursor:pointer;
}
.login-error{color:var(--accent-deep);font-size:13px;min-height:18px;margin-bottom:8px;}

/* ---------- history section (admin) ---------- */
.history-section{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);}
.history-section h3{
  font-family:'Zen Maru Gothic',sans-serif;font-weight:900;font-size:16px;
  margin:0 0 4px;
}
.history-total{color:var(--sub);font-size:13px;margin-bottom:16px;}
.history-summary{
  display:flex;flex-direction:column;gap:6px;margin-bottom:18px;
}
.history-summary .row{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;font-size:13px;
}
.history-summary .row .cnt{
  font-family:'Zen Maru Gothic',sans-serif;font-weight:700;color:var(--accent-deep);
}
.history-toggle{
  background:none;border:none;color:var(--sub);text-decoration:underline;
  font-size:13px;cursor:pointer;padding:4px 0;
}
.history-list{
  margin-top:10px;max-height:40vh;overflow-y:auto;
  border:1px solid var(--line);border-radius:10px;
}
.history-list .row{
  display:flex;justify-content:space-between;gap:10px;
  padding:8px 12px;font-size:12px;border-bottom:1px solid var(--line);
}
.history-list .row:last-child{border-bottom:none;}
.history-list .row.is-empty{color:var(--sub);}
.history-list .when{color:var(--sub);white-space:nowrap;}
.history-empty{color:var(--sub);font-size:13px;padding:8px 0;}