:root{
  --bg:#0b0f14;
  --bg2:#111823;
  --fg:#e8eef6;
  --dim:#8b9bb0;
  --line:#22303f;
  --acc:#E8B73A;
  --acc-ink:#2a2005;
  --bad:#e2564c;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{
  margin:0;padding:0;height:100%;
  background:var(--bg);color:var(--fg);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  overscroll-behavior:none;touch-action:manipulation;
  -webkit-user-select:none;user-select:none;
}
body{position:fixed;inset:0;overflow:auto}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

#app{
  min-height:100%;
  display:flex;flex-direction:column;
  padding:calc(var(--safe-t) + 10px) 16px calc(var(--safe-b) + 20px);
  gap:14px;
  max-width:480px;margin:0 auto;
}

#bar{display:flex;align-items:center;gap:10px}
#bar h1{flex:1;text-align:center;font-size:1.15rem;margin:0;letter-spacing:.02em}
.icon{
  background:none;border:0;color:var(--fg);font-size:22px;line-height:1;
  padding:6px 10px;cursor:pointer;text-decoration:none;border-radius:8px;
}
.icon:active{background:var(--bg2)}

.lead{margin:0;color:var(--dim);font-size:.92rem}

#select-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.face-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:14px 4px;min-height:76px;
  background:var(--bg2);border:2px solid var(--line);border-radius:14px;
  color:var(--dim);cursor:pointer;transition:border-color .15s,color .15s,background .15s,opacity .15s;
}
.face-btn .pip{font-size:2rem;line-height:1}
.face-btn .num{font-size:.75rem;font-weight:600;letter-spacing:.04em}
.face-btn[aria-pressed="true"]{
  border-color:var(--acc);color:var(--acc);background:#1a1408;
}
.face-btn[aria-pressed="false"]{opacity:.4}
.face-btn:active{transform:scale(.96)}

#presets{display:flex;flex-wrap:wrap;gap:8px}
#presets button{
  flex:1 1 auto;background:var(--bg2);border:1px solid var(--line);color:var(--fg);
  font-size:.82rem;padding:8px 10px;border-radius:999px;cursor:pointer;white-space:nowrap;
}
#presets button:active{background:var(--line)}

#stage{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;min-height:150px;padding:10px 0;
}
#result-face{
  font-size:6.5rem;line-height:1;color:var(--fg);
  transition:transform .08s;
}
#result-face.rolling{color:var(--dim)}
.hint{margin:0;color:var(--dim);font-size:.9rem;min-height:1.2em}
.hint.bad{color:var(--bad)}

.roll-btn{
  display:block;width:100%;padding:16px;font-size:1.1rem;font-weight:700;
  letter-spacing:.02em;border:0;border-radius:14px;
  background:var(--acc);color:var(--acc-ink);cursor:pointer;
}
.roll-btn:active{filter:brightness(.95)}
.roll-btn:disabled{background:var(--line);color:var(--dim);cursor:not-allowed}

#history-wrap{display:flex;align-items:center;gap:10px}
.history-lab{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);flex:none}
#history{
  flex:1;display:flex;gap:6px;overflow-x:auto;padding:2px;
}
#history .chip{
  flex:none;width:34px;height:34px;border-radius:8px;background:var(--bg2);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;color:var(--dim);
}
#history .chip:first-child{color:var(--acc);border-color:var(--acc)}

@keyframes shake{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-6deg)}
  75%{transform:rotate(6deg)}
}
#result-face.rolling{animation:shake .12s linear infinite}