:root {
  --ink: #3b3127; --paper: #fbf5ea; --pink: #f07f97; --pink-d: #d9607b; --teal: #2f8f8c; --sand: #e9dcc6;
  --shadow: 0 6px 22px rgba(70, 50, 30, .22);
  font-family: 'Baloo 2', 'Noto Sans TC', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #ddd8cf; color: var(--ink); user-select: none; -webkit-user-select: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }

#loading { position: fixed; inset: 0; display: grid; place-items: center; background: var(--sand); z-index: 50; }
.spin { width: 46px; height: 46px; border-radius: 50%; border: 6px solid #fff; border-top-color: var(--pink); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.card { background: rgba(251, 245, 234, .9); border-radius: 18px; box-shadow: var(--shadow); padding: 10px 14px; backdrop-filter: blur(4px); }
.tl { position: absolute; left: max(14px, env(safe-area-inset-left)); top: max(14px, env(safe-area-inset-top)); min-width: 190px; }
.tl .day { font-weight: 800; font-size: 15px; color: var(--teal); letter-spacing: .5px; }
.row { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.row b { margin-left: auto; font-size: 20px; font-weight: 800; }
.ico { font-size: 18px; }
.bar { height: 9px; background: #eadfcb; border-radius: 9px; overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), #ffb3c1); border-radius: 9px; transition: width .4s; }
.tc { position: absolute; left: 50%; transform: translateX(-50%); top: max(14px, env(safe-area-inset-top)); min-width: 260px; }
.tide { display: flex; align-items: center; gap: 8px; font-size: 12px; opacity: .9; }
.tide .bar { flex: 1; margin: 0; }
.bar.wave i { background: linear-gradient(90deg, #8fd3c8, #2f8f8c); transition: none; }
#timeLbl.warn { color: #d24f3c; animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }
.tr { position: absolute; right: max(14px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top)); display: flex; gap: 8px; pointer-events: auto; }
.round { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--paper); box-shadow: var(--shadow); font-weight: 800; font-size: 16px; }
.keys { position: absolute; left: 14px; bottom: 14px; font-size: 13px; line-height: 1.9; padding: 8px 14px; opacity: .92; }
kbd { display: inline-block; min-width: 22px; padding: 0 6px; margin-right: 2px; border-radius: 6px; background: #fff; border: 1px solid #d8c9b0; border-bottom-width: 3px; font: 700 12px/18px 'Baloo 2', sans-serif; text-align: center; }

#toast { position: fixed; left: 50%; top: 22%; transform: translate(-50%, -10px); background: var(--ink); color: #fff; padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: 17px;
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; z-index: 20; max-width: 88vw; text-align: center; box-shadow: var(--shadow); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.pop { position: fixed; left: 0; top: 0; font: 800 30px 'Baloo 2', sans-serif; color: #fff; -webkit-text-stroke: 2px var(--pink-d); paint-order: stroke; pointer-events: none; z-index: 15; text-shadow: 0 3px 0 rgba(0,0,0,.12); }
.pop.gold { -webkit-text-stroke-color: #c08a1a; font-size: 38px; }

/* touch controls */
#joy, #tbtns { display: none; }
body.touch .keys { display: none; }
body.touch #joy { display: block; position: absolute; left: max(26px, env(safe-area-inset-left)); bottom: max(30px, env(safe-area-inset-bottom)); width: 150px; height: 150px; border-radius: 50%;
  background: rgba(251, 245, 234, .35); border: 3px solid rgba(255, 255, 255, .7); pointer-events: auto; touch-action: none; }
#knob { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow); }
body.touch #tbtns { display: grid; position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom)); grid-template-columns: 72px 72px; gap: 12px; pointer-events: auto; }
.tb { width: 72px; height: 72px; border-radius: 50%; border: 0; background: rgba(251, 245, 234, .92); box-shadow: var(--shadow); display: grid; place-items: center; align-content: center; touch-action: none; }
.tb span { font-size: 24px; line-height: 1; }
.tb small { font-size: 11px; font-weight: 700; }
.tb.big { grid-column: span 2; justify-self: end; width: 86px; height: 86px; background: var(--pink); color: #fff; }
.tb.down { transform: scale(.92); filter: brightness(.95); }

/* panels */
.panel-screen, #help { position: fixed; inset: 0; display: grid; place-items: center; z-index: 30; padding: 16px; }
#pause, #result, #help { background: rgba(60, 45, 30, .28); }
.title-card { background: var(--paper); border-radius: 28px; box-shadow: 0 18px 60px rgba(60, 40, 20, .3); padding: 28px 30px 24px; width: min(460px, 100%); text-align: center; }
.title-card.small { width: min(380px, 100%); }
#title { align-items: end; padding-bottom: max(5vh, 16px); }
#title .title-card { background: rgba(251, 245, 234, .93); }
.logo { display: flex; flex-direction: column; align-items: center; margin-bottom: 4px; }
.logo-zh { font: 900 54px/1 'Noto Sans TC', sans-serif; color: var(--pink); -webkit-text-stroke: 3px #fff; paint-order: stroke; text-shadow: 0 5px 0 var(--pink-d), 0 10px 24px rgba(200, 80, 100, .3); letter-spacing: 4px; }
.logo-en { font: 800 22px 'Baloo 2', sans-serif; color: var(--teal); letter-spacing: 3px; margin-top: 6px; }
.tag { font-size: 15px; line-height: 1.6; margin: 10px 0 16px; opacity: .85; }
.btn { display: block; width: 100%; border: 0; border-radius: 16px; padding: 12px 16px; font-weight: 800; font-size: 18px; margin-top: 10px; }
.btn.primary { background: var(--pink); color: #fff; box-shadow: 0 5px 0 var(--pink-d); }
.btn.primary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--pink-d); }
.btn.primary:disabled { opacity: .45; cursor: default; }
.btn.ghost { background: #efe4d1; font-size: 15px; padding: 9px; }
.row-btns { display: flex; gap: 8px; }
.sub { margin-top: 16px; font-size: 13px; font-weight: 700; opacity: .7; }
#days { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.chip { border: 0; background: #fff; border-radius: 12px; padding: 4px 10px; box-shadow: 0 2px 0 #e2d5bf; display: flex; flex-direction: column; align-items: center; min-width: 54px; }
.chip b { font-size: 18px; line-height: 1.2; }
.chip span { font-size: 11px; color: #e3a52c; letter-spacing: 1px; }
.chip:disabled { opacity: .35; }
h2 { margin: 0 0 8px; font: 900 28px 'Noto Sans TC', sans-serif; color: var(--teal); }
.stars { font-size: 52px; letter-spacing: 6px; color: #e5dccb; margin: 4px 0; }
.stars span { display: inline-block; }
.stars span.on { color: #f2b632; animation: starIn .5s both; text-shadow: 0 4px 0 #cf8f12; }
@keyframes starIn { from { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.3); } to { transform: scale(1); } }
#help ul { text-align: left; padding-left: 4px; list-style: none; line-height: 2; font-size: 14px; }

@media (max-width: 640px) {
  .logo-zh { font-size: 42px; }
  .tc { min-width: 0; width: 46vw; top: max(70px, calc(env(safe-area-inset-top) + 64px)); left: auto; right: max(14px, env(safe-area-inset-right)); transform: none; padding: 8px 10px; }
  .tl { min-width: 0; width: 44vw; padding: 8px 10px; }
  .row b { font-size: 17px; }
  .tide span { display: none; }
}