*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#8fb6d9;
  color:#fff;
  /* stronger shadow for readability */
  text-shadow:
    0 2px 6px rgba(0,0,0,.55),
    0 1px 2px rgba(0,0,0,.65);
}
.wrap{max-width:560px;margin:0 auto;padding:22px 18px 40px;text-align:center;position:relative;}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;}
.concept{font-size:.85rem;opacity:.9;}
.menu-btn{border:none;background:rgba(255,255,255,.16);color:#fff;border-radius:12px;padding:10px 12px;font-size:.92rem;}
#titleText{font-size:1.6rem;font-weight:650;margin:10px 0 22px;line-height:1.25;}
.timer{font-size:3.3rem;letter-spacing:.02em;margin:8px 0 22px;}
.controls{display:flex;gap:12px;justify-content:center;margin-bottom:14px;}
.controls button{flex:1;min-width:0;padding:14px 0;border:none;border-radius:14px;background:rgba(255,255,255,.20);color:#fff;font-size:1rem;}
.controls button:disabled{opacity:.45}
.message{min-height:1.4em;font-size:1rem;opacity:.95;margin:10px 0 0;}
.bottom{margin-top:24px;display:flex;gap:14px;justify-content:space-between;}
.stat{flex:1;background:rgba(255,255,255,.14);border-radius:16px;padding:12px 8px;}
.label{font-size:.82rem;opacity:.95}
.value{margin-top:6px;font-size:1.05rem}

.level{margin-top:18px}
.level-title{font-size:.9rem;opacity:.95}
.level-value{margin-top:4px;font-size:1rem}

.adjust{margin-top:14px}
.linkbtn{border:none;background:transparent;color:rgba(255,255,255,.95);font-size:.9rem;padding:10px 8px;border-radius:10px;}
.linkbtn:active{background:rgba(255,255,255,.12)}

.add-panel{margin-top:8px;background:rgba(255,255,255,.12);border-radius:14px;padding:12px 12px 10px;}
.add-row{display:flex;gap:10px;justify-content:center}
.add-row2{display:flex;gap:10px;justify-content:center;margin-top:10px}
.add-input{
  width:160px;padding:12px 12px;border-radius:12px;border:none;outline:none;
  background:rgba(255,255,255,.22);color:#fff;font-size:1rem;
}
.add-input::placeholder{color:rgba(255,255,255,.85)}
.add-btn{
  flex:1;max-width:140px;
  padding:12px 16px;border:none;border-radius:12px;
  background:rgba(255,255,255,.22);color:#fff;font-size:1rem;
}
.add-note{margin-top:8px;font-size:.78rem;opacity:.9}

.fineprint{margin-top:18px;font-size:.78rem;opacity:.9}

.card{background:rgba(255,255,255,.14);border-radius:18px;padding:18px 16px;text-align:left;}
.card h2{margin:2px 0 10px;font-size:1.15rem}
.card h3{margin:16px 0 6px;font-size:1rem}
.p{margin:10px 0;line-height:1.65}
.subtle{opacity:.95}
.list{margin:8px 0 0 18px;line-height:1.75}

.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.28);backdrop-filter:blur(2px);z-index:20;}
.menu{
  position:fixed;top:14px;right:14px;
  width:min(320px, calc(100vw - 28px));
  background:rgba(255,255,255,.16);
  border-radius:18px;padding:14px;z-index:30;text-align:left;
}
.menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.menu-title{font-weight:650}
.menu-close{border:none;background:rgba(255,255,255,.20);color:#fff;border-radius:12px;width:40px;height:40px;font-size:1.2rem;}
.menu-items{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.menu-item{border:none;background:rgba(255,255,255,.18);color:#fff;border-radius:14px;padding:12px 12px;font-size:1rem;text-align:left;}
.menu-foot{margin-top:12px}

.danger{margin-top:20px;text-align:center}
.danger-btn{
  background:rgba(0,0,0,.35);
  color:#fff;
  border:none;
  border-radius:14px;
  padding:14px 18px;
  font-size:1rem;
}
.danger-btn:active{background:rgba(0,0,0,.5)}
.danger-note{margin-top:8px;font-size:.78rem;opacity:.9}

.lang-toggle{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:40;
  border:none;
  border-radius:999px;
  padding:10px 12px;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:.9rem;
  letter-spacing:.02em;
}
.lang-toggle:active{background:rgba(255,255,255,.24)}