:root{
  color-scheme:dark;
  --bg:#071615;
  --surface:#0f2524;
  --surface-2:#173432;
  --surface-3:#203f3a;
  --card:rgba(15,37,36,.94);
  --card-hover:#214842;
  --text:#f7fbf8;
  --text-secondary:#a9bbb6;
  --muted:#7f9690;
  --gold:#d8b56d;
  --gold-light:#f0d79b;
  --mint:#6fd6a4;
  --coral:#ff8f70;
  --danger:#ff9a9a;
  --border:rgba(216,181,109,.18);
  --shadow:0 18px 36px rgba(0,0,0,.28);
  --radius:8px;
  --tap:48px;
}

*{margin:0;padding:0;box-sizing:border-box}

html{
  min-height:100%;
  background:var(--bg);
  -webkit-text-size-adjust:100%;
}

body{
  min-height:100vh;
  min-height:100dvh;
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 20% -10%,rgba(111,214,164,.14),transparent 34rem),
    linear-gradient(180deg,#12302d 0%,var(--bg) 58%);
  color:var(--text);
  letter-spacing:0;
  overscroll-behavior-y:none;
}

body.theme-night-owned{
  --bg:#07111a;
  --surface:#101d2a;
  --surface-2:#16293a;
  --surface-3:#20364a;
  --gold:#9cc9ff;
  --gold-light:#d5ebff;
  --mint:#79b7ff;
  --border:rgba(156,201,255,.22);
  background:linear-gradient(180deg,#0d1b2a 0%,#07111a 70%);
}

body.theme-sakura-owned{
  --bg:#24151e;
  --surface:#32202b;
  --surface-2:#45293a;
  --surface-3:#563246;
  --gold:#f6afc8;
  --gold-light:#ffd9e8;
  --mint:#f6d08b;
  --border:rgba(246,175,200,.24);
  background:linear-gradient(180deg,#3a2031 0%,#24151e 70%);
}

.hidden{display:none!important}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}

.app{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

main{
  width:min(1120px,calc(100% - 32px));
  margin:0 auto;
  flex:1;
  padding:24px 0 max(88px,calc(32px + env(safe-area-inset-bottom)));
}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  padding-top:env(safe-area-inset-top);
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(7,22,21,.88);
  backdrop-filter:blur(18px);
}

.topbar-inner{
  width:min(1120px,calc(100% - 32px));
  min-height:68px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.brand-mark{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(216,181,109,.12);
  font-size:1.35rem;
}

.brand-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:2px;
}

.brand b{
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.brand small{
  color:var(--text-secondary);
  font-size:.76rem;
  font-weight:700;
}

.menu-toggle{display:none}

.nav{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
}

.nav-btn{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 14px;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:var(--text-secondary);
  font-size:.92rem;
  font-weight:800;
}

.nav-btn span{
  width:18px;
  display:inline-grid;
  place-items:center;
}

.nav-btn.active{
  border-color:var(--border);
  background:rgba(216,181,109,.14);
  color:var(--gold-light);
}

.is-auth .topbar .nav,
.is-auth .userbox{display:none}

.userbox{
  min-width:180px;
  display:flex;
  justify-content:flex-end;
}

.user-summary{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.9rem;
}

.user-summary>span{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--surface-2);
}

.user-lines{display:flex;flex-direction:column;gap:2px}
.user-lines small{color:var(--text-secondary)}

.view{width:100%}
.narrow{max-width:780px;margin:0 auto}

.timer-grid{
  display:grid;
  grid-template-columns:260px minmax(0,1fr) 260px;
  gap:16px;
  align-items:start;
}

.panel,.card,.focus-card,.stats-card,.auth-card,
.garden-card,.shop-card,.task-item,.rank-item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

button,.btn,.primary{
  min-height:var(--tap);
  border:none;
  border-radius:var(--radius);
  padding:0 18px;
  cursor:pointer;
  font-weight:850;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease,opacity .18s ease;
  -webkit-tap-highlight-color:transparent;
}

button:active{transform:scale(.98)}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{
  outline:3px solid rgba(111,214,164,.38);
  outline-offset:2px;
}

.primary{
  background:linear-gradient(180deg,var(--gold-light),var(--gold));
  color:#1a2118;
}

.secondary{
  background:rgba(111,214,164,.12);
  border:1px solid rgba(111,214,164,.22);
  color:#d8fff0;
}

.ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--gold-light);
}

button:disabled{
  opacity:.58;
  cursor:not-allowed;
}

input,select{
  width:100%;
  min-height:var(--tap);
  background:var(--surface-2);
  color:var(--text);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:0 13px;
  outline:none;
}

select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-secondary) 50%),linear-gradient(135deg,var(--text-secondary) 50%,transparent 50%);
  background-position:calc(100% - 18px) 21px,calc(100% - 12px) 21px;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:34px;
}

input::placeholder{color:var(--muted)}

.auth-card{
  max-width:960px;
  margin:30px auto 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:24px;
  align-items:stretch;
  padding:24px;
}

.auth-hero{
  min-height:480px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:28px;
  border-radius:var(--radius);
  background:
    linear-gradient(180deg,rgba(7,22,21,.1),rgba(7,22,21,.86)),
    radial-gradient(circle at 50% 20%,rgba(216,181,109,.24),transparent 18rem),
    var(--surface-2);
}

.auth-hero h1{
  max-width:640px;
  margin:10px 0 14px;
  font-size:clamp(2.2rem,6vw,4.6rem);
  line-height:.98;
}

.auth-form{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
}

.auth-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.auth-tab{
  padding:0 10px;
  background:var(--surface-2);
  color:var(--text-secondary);
}

.auth-tab.active{
  background:rgba(216,181,109,.16);
  color:var(--gold-light);
  border:1px solid var(--border);
}

.small-note{font-size:.9rem}
.msg{min-height:22px;color:var(--danger)}

.focus-card{
  min-height:640px;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px;
  position:relative;
  overflow:hidden;
}

.focus-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 20%,rgba(111,214,164,.15),transparent 22rem);
}

.focus-card>*{position:relative}

.session-top{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) 132px;
  gap:10px;
  margin-bottom:18px;
}

.plant-area{
  height:118px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.plant-emoji{
  font-size:5rem;
  line-height:1;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.34));
}

.plant-emoji.grow{animation:growPulse 1.5s ease-in-out infinite}
.plant-emoji.wither{animation:witherShake .35s ease-in-out 2;filter:grayscale(.3) drop-shadow(0 10px 16px rgba(0,0,0,.34))}

.timer-ring{
  position:relative;
  width:min(100%,318px);
  aspect-ratio:1;
}

.timer-ring svg{
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}

.timer-ring circle{
  fill:none;
  stroke:rgba(255,255,255,.08);
  stroke-width:14;
}

.timer-ring #progress{
  stroke:var(--gold-light);
  stroke-linecap:round;
  transition:stroke-dashoffset .35s linear;
}

.timer-text{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
}

.timer-text strong{
  font-size:3.35rem;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.timer-text span,.plant-mood,.tip{color:var(--text-secondary)}

.plant-mood{
  margin:16px 0;
  min-height:24px;
  text-align:center;
  font-weight:800;
}

.sound-box{
  width:100%;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin:8px 0 18px;
}

.sound-btn,.sound-box .ghost{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 10px;
}

.sound-btn.active{
  border-color:rgba(111,214,164,.48);
  background:rgba(111,214,164,.2);
}

.controls{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.controls .big{font-size:1rem}

.tip{
  margin-top:16px;
  text-align:center;
  font-size:.9rem;
}

.profile-panel,.achievements-panel{padding:16px}

.profile{
  display:flex;
  gap:12px;
  align-items:center;
}

.avatar{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:50%;
  font-size:1.8rem;
}

.profile-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.profile-info b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.levelbar{
  height:9px;
  margin:16px 0;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  border-radius:999px;
}

.levelbar span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--mint),var(--gold-light));
  border-radius:inherit;
}

.mini-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  text-align:left;
}

.stat{
  min-height:78px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:var(--surface-2);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);
  padding:12px;
}

.stat small{
  display:block;
  color:var(--text-secondary);
  font-size:.78rem;
}

.stat b{
  font-size:1.45rem;
  font-variant-numeric:tabular-nums;
}

.achievement-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:14px;
}

.achievement{
  background:var(--surface-2);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);
  padding:12px;
  font-weight:800;
  font-size:.9rem;
}

.achievement.locked{opacity:.55}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.section-head h2{font-size:1.7rem}

.coin-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  background:rgba(216,181,109,.12);
  border:1px solid var(--border);
  border-radius:999px;
  font-weight:850;
  color:var(--gold-light);
  white-space:nowrap;
}

.garden-grid,.shop-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;
}

.garden-card,.shop-card,.task-item,.rank-item{padding:16px}

.garden-card,.shop-card{
  display:flex;
  flex-direction:column;
  min-height:250px;
}

.garden-card .emoji,.shop-card .emoji{
  width:100%;
  min-height:84px;
  display:grid;
  place-items:center;
  margin:12px 0;
  text-align:center;
  font-size:4.2rem;
  line-height:1;
}

.garden-card small{color:var(--muted);margin-top:auto}

.shop-card{
  text-align:center;
  align-items:center;
}

.shop-card .badge,.garden-card .badge{align-self:flex-start}
.shop-card .type-line,.shop-card .shop-desc{margin:6px 0}
.shop-card button{width:100%;margin-top:auto}

.item-equipped{
  border-color:rgba(111,214,164,.5);
  box-shadow:0 0 0 1px rgba(111,214,164,.1),var(--shadow);
}

.fountain-owned .garden-grid::after{
  content:"⛲";
  min-height:250px;
  display:grid;
  place-items:center;
  background:rgba(15,37,36,.62);
  border:1px dashed var(--border);
  border-radius:var(--radius);
  font-size:3.2rem;
}

.badge{
  display:inline-flex;
  min-height:28px;
  align-items:center;
  padding:0 9px;
  border-radius:999px;
  background:rgba(216,181,109,.12);
  color:var(--gold-light);
  font-size:.72rem;
  font-weight:850;
  text-transform:uppercase;
}

.task-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  margin-bottom:14px;
}

.task-list,.ranking-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.task-item,.rank-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.task-item span{min-width:0;overflow-wrap:anywhere}
.task-actions{display:flex;gap:8px;flex:0 0 auto}
.task-actions button{padding:0 12px}
.task-item.done span{color:var(--text-secondary);text-decoration:line-through}

.rank-left{
  display:flex;
  align-items:center;
  min-width:0;
  gap:12px;
}

.rank-left>div:last-child{min-width:0}
.rank-left b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.rank-pos{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:50%;
  background:rgba(216,181,109,.14);
  color:var(--gold-light);
  font-weight:850;
}

.rank-meta{font-size:.88rem}
.rank-streak{white-space:nowrap}

.toast{
  position:fixed;
  right:16px;
  bottom:max(16px,calc(16px + env(safe-area-inset-bottom)));
  z-index:50;
  max-width:min(360px,calc(100% - 32px));
  padding:14px 16px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

h1,h2,h3{font-weight:850;letter-spacing:0}
.muted{color:var(--text-secondary);line-height:1.62}

.eyebrow{
  color:var(--mint);
  font-size:.76rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:0 16px;
  font-weight:800;
  color:var(--gold-light);
}

.site-footer{
  margin-top:24px;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(7,22,21,.52);
}

.footer-inner{
  width:min(1120px,calc(100% - 32px));
  margin:0 auto;
  padding:18px 0 max(18px,env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:var(--text-secondary);
  font-size:.9rem;
}

.footer-links{
  display:flex;
  align-items:center;
  gap:18px;
  font-weight:800;
}

.footer-links a{color:var(--gold-light)}

.privacy-page{padding-top:36px;padding-bottom:48px}
.privacy-hero{max-width:760px;margin-bottom:20px}
.privacy-hero h1{font-size:clamp(2rem,6vw,4rem);line-height:1;margin:8px 0 14px}
.privacy-content{max-width:880px;padding:28px}
.privacy-content h2{margin-top:26px;margin-bottom:10px;color:var(--gold-light);font-size:1.18rem}
.privacy-content h2:first-child{margin-top:0}
.privacy-content p{color:var(--text-secondary);line-height:1.7}

@keyframes growPulse{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-4px) scale(1.04)}
}

@keyframes witherShake{
  0%,100%{transform:translateX(0)}
  30%{transform:translateX(-5px)}
  70%{transform:translateX(5px)}
}

@media (max-width:980px){
  .timer-grid{grid-template-columns:1fr}
  .profile-panel{order:2}
  .focus-card{order:1}
  .achievements-panel{order:3}
}

@media (max-width:720px){
  main{
    width:min(100% - 24px,1120px);
    padding-top:16px;
  }

  .topbar-inner{
    width:min(100% - 24px,1120px);
    min-height:62px;
  }

  .brand-mark{width:38px;height:38px;border-radius:10px}
  .brand small{display:none}
  .userbox{display:none}
  .menu-toggle{display:none}

  .is-logged .nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:40;
    height:calc(66px + env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:repeat(5,1fr);
    align-items:start;
    gap:0;
    margin:0;
    padding:7px 8px max(7px,env(safe-area-inset-bottom));
    border-top:1px solid rgba(255,255,255,.08);
    background:rgba(7,22,21,.94);
    backdrop-filter:blur(18px);
  }

  .is-auth .nav{display:none}

  .nav-btn{
    min-height:52px;
    flex-direction:column;
    gap:3px;
    border-radius:8px;
    padding:0 4px;
    font-size:.72rem;
  }

  .nav-btn span{font-size:1rem}

  .auth-card{
    grid-template-columns:1fr;
    gap:16px;
    padding:0;
    background:transparent;
    border:0;
    box-shadow:none;
  }

  .auth-hero{
    min-height:270px;
    padding:20px;
  }

  .auth-form{
    padding:18px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
  }

  .focus-card{
    min-height:auto;
    padding:16px;
  }

  .session-top,.task-form{grid-template-columns:1fr}
  .sound-box{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sound-box .ghost{grid-column:1 / -1}
  .controls{grid-template-columns:1fr}
  .timer-ring{width:min(100%,292px)}
  .timer-text strong{font-size:3rem}

  .profile-panel,.achievements-panel{display:none}

  .section-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .garden-grid,.shop-grid{grid-template-columns:1fr 1fr}
  .garden-card,.shop-card{min-height:220px;padding:14px}
  .garden-card .emoji,.shop-card .emoji{font-size:3.3rem;min-height:70px}

  .task-item,.rank-item{
    align-items:flex-start;
    flex-direction:column;
  }

  .task-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .site-footer{display:none}
  .privacy-page{padding-bottom:32px}
  .privacy-content{padding:20px}
}

@media (max-width:390px){
  .garden-grid,.shop-grid{grid-template-columns:1fr}
  .brand b{max-width:190px}
  .sound-label{font-size:.86rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}

::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:20px}