:root{
  --bg:#fffafc;
  --card:#ffe6eb;
  --accent:#CF4A59;
  --button:#CF4A59;
  --button-hover:#ff85a2;
}

*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  font-family:"Poppins",system-ui,Arial, sans-serif;
}

.card{
  width:360px;
  padding:28px 28px 22px;
  border-radius:20px;
  background:var(--card);
  border:4px solid #CF4A59;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  text-align:center;
  color:var(--accent);
}

h1{
  margin:0 0 10px;
  font-size:1.25rem;
  color:#CF4A59;
  letter-spacing:0.2px;
}

.mascot{
  font-size:4.2rem;
  margin-bottom:10px;
}

#time {
  font-size:3.6rem;
  font-weight:700;
  margin:6px 0 16px;
  color:var(--accent);
  line-height:1;
}

.buttons{
  display:flex;
  justify-content:center;
  gap:16px;
}

.btn {
  width:56px;
  height:56px;
  border-radius:50%;
  border:none;
  background:var(--button);
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  cursor:pointer;
  transition: transform .14s ease, background .14s ease, box-shadow .14s;
  box-shadow:0 6px 12px rgba(0,0,0,0.08);
}

.btn:hover{ transform:translateY(-4px); background:var(--button-hover); box-shadow:0 10px 20px rgba(0,0,0,0.12); }

.smalltext{
  margin-top:12px;
  font-size:0.85rem;
  color:#ff8aa8;
}