:root{
  --ink:#2F4232; --muted:#6B8370;
  --panel:#FFFFFF; --panel-2:#F2F7F1; --line:#D9E6D8;
  --accent:#E0658C; --accent-dark:#B54E70;
  --green:#5C8A4E; --green-dark:#48713C;
  --gold:#F0B63C; --teal:#3F9E96;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:#3E9FC9; color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Sans",system-ui,sans-serif;
  line-height:1.7; overflow:hidden;
  -webkit-tap-highlight-color:transparent; user-select:none;
}

/* ---------- 画面の枠 ---------- */
/* 背景の絵にタイトルが入っているので、全面に敷く */
#app{
  position:relative; width:100%; height:100%;
  max-width:520px; margin:0 auto; overflow:hidden;
  background:#4FAEDA url("assets/bg/sea.jpg") center/cover no-repeat;
}
.screen{
  position:absolute; inset:0; display:none;
}
.screen.on{display:block;}

/* ---------- 共通のUI部品 ---------- */
.topbar{
  position:absolute; left:0; right:0; top:0; z-index:60;
  display:flex; align-items:center; gap:9px; padding:12px 12px 0;
}
.iconbtn{
  width:38px; height:38px; border-radius:50%; flex:none;
  border:1px solid rgba(47,66,50,.12); background:rgba(255,255,255,.95);
  font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(20,50,30,.2); color:var(--ink);
}
.iconbtn:active{transform:scale(.94);}
.pill{
  background:rgba(255,255,255,.95); border:1px solid rgba(47,66,50,.12);
  border-radius:100px; padding:6px 14px; box-shadow:0 2px 6px rgba(20,50,30,.2);
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:14px;
}
.spacer{margin-left:auto;}
.orb-pill{
  display:flex; align-items:center; gap:6px;
  background:#FFEFB8; border:1px solid #F0C95E; border-radius:100px;
  padding:6px 13px 6px 10px; box-shadow:0 2px 6px rgba(20,50,30,.18);
  font-weight:700; font-size:13.5px; color:#6A4B12; font-variant-numeric:tabular-nums;
}
.orb-dot{
  width:12px; height:12px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 30% 30%,#FFF6D0,var(--gold));
}

button{font-family:inherit;}
.bigbtn{
  width:100%; font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:16px;
  padding:14px; border-radius:14px; border:none; cursor:pointer;
  background:var(--green); color:#fff; box-shadow:0 3px 0 var(--green-dark);
}
.bigbtn:active{transform:translateY(2px); box-shadow:0 1px 0 var(--green-dark);}
.bigbtn.pink{background:var(--accent); box-shadow:0 3px 0 var(--accent-dark);}
.bigbtn.pink:active{box-shadow:0 1px 0 var(--accent-dark);}
.bigbtn.ghost{
  background:var(--panel-2); color:var(--muted); box-shadow:none; border:1px solid var(--line);
}
.bigbtn:disabled{background:#E3EADF; color:#A2B09E; box-shadow:none; cursor:default; transform:none;}

/* ---------- マップ ---------- */
.island{
  position:absolute; transform:translate(-50%,-50%);
  cursor:pointer; border:none; background:transparent; padding:0;
}
.island img{display:block; width:100%; height:auto;}
.isle-art{position:relative; width:100%; transform-origin:50% 80%;}
/* 大木の島は、島画像の上に木と花のcanvasを重ねる。
   島の箱は他の島と同じままなので、格子の計算がずれない */
/* bottom は木の根元の位置。島画像の中心（＝島の中央）に合わせている */
.tree-on-isle{
  position:absolute; left:50%; bottom:50%; width:74%;
  aspect-ratio:900/846; transform:translateX(-50%); pointer-events:none;
}

@keyframes sway-s{0%,100%{transform:rotate(-.9deg) translateY(0);}50%{transform:rotate(.9deg) translateY(-2px);}}
@keyframes sway-m{0%,100%{transform:rotate(-1.8deg) translateY(0);}50%{transform:rotate(1.8deg) translateY(-4px);}}
@keyframes sway-l{0%,100%{transform:rotate(-2.8deg) translateY(0);}50%{transform:rotate(2.8deg) translateY(-6px);}}
.isle-art.sway-s{animation:sway-s 2.6s ease-in-out infinite;}
.isle-art.sway-m{animation:sway-m 2.1s ease-in-out infinite;}
.isle-art.sway-l{animation:sway-l 1.7s ease-in-out infinite;}

#tagLayer{position:absolute; inset:0; z-index:40; pointer-events:none;}
.isle-tag{
  position:absolute; transform:translate(-50%,-100%);
  background:#FFF; border:2px solid var(--green); border-radius:100px;
  padding:3px 10px; display:flex; align-items:center; gap:7px; white-space:nowrap;
  box-shadow:0 2px 6px rgba(20,50,30,.26);
}
.isle-tag .nm{font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:11.5px; color:#31512A;}
.isle-tag .orb{
  display:flex; align-items:center; gap:3px; font-size:11px; font-weight:700; color:#6A4B12;
  background:#FFEFB8; border-radius:100px; padding:0 6px 0 4px; font-variant-numeric:tabular-nums;
}
.isle-tag .orb i{width:7px; height:7px; border-radius:50%; display:block;
  background:radial-gradient(circle at 30% 30%,#FFF6D0,var(--gold));}
.isle-tag::after{
  content:""; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:8px solid var(--green);
}
.isle-tag.rest{border-color:var(--teal);}
.isle-tag.rest::after{border-top-color:var(--teal);}
.isle-tag.rest .nm{color:#2C6F69;}

/* 背景から切り出したロゴ。位置を自由に決められるよう独立させている */
.logo{
  position:absolute; left:3%; top:2%; width:46%; z-index:45;
  pointer-events:none; filter:drop-shadow(0 2px 4px rgba(20,60,90,.25));
}

.hud{
  position:absolute; left:12px; top:60px; z-index:50;
  background:rgba(255,255,255,.95); border:1px solid rgba(47,66,50,.12);
  border-radius:14px; padding:9px 14px; box-shadow:0 3px 10px rgba(20,50,30,.18);
  pointer-events:none;
}
.hud .ttl{font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:11px;
  color:var(--accent); letter-spacing:.06em;}
.hud .val{font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:16px;
  font-variant-numeric:tabular-nums;}
.hud .sub{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums;}
/* マップではロゴが左上にあるので、こちらは右上へ逃がす */
.map-hud{left:auto; right:12px; top:62px; text-align:right;}

/* ---------- きょうの予定（トップ画面） ---------- */
.today{
  position:absolute; left:12px; right:12px; bottom:76px; z-index:46;
  background:rgba(255,255,255,.95); border:1px solid rgba(47,66,50,.12);
  border-radius:16px; padding:10px 12px 11px;
  box-shadow:0 4px 14px rgba(20,50,30,.2);
  max-height:30%; overflow-y:auto;
}
.today-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:12.5px;
  color:var(--ink); margin-bottom:8px;
}
.today-head span{font-size:11px; color:var(--accent); font-weight:700;}
.today-empty{margin:2px 0; font-size:12.5px; color:var(--muted); text-align:center;}
.today-chips{display:flex; flex-wrap:wrap; gap:6px;}
.today-chip{
  display:flex; align-items:center; gap:5px;
  border:1.5px solid var(--line); background:var(--panel-2); color:var(--ink);
  border-radius:100px; padding:5px 11px 5px 7px; cursor:pointer; font-size:12.5px;
}
.today-chip .tick{
  width:16px; height:16px; flex:none; border-radius:50%; border:1.5px solid #C6D6C2;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color:#fff; background:#fff;
}
.today-chip .nm{font-family:"Zen Maru Gothic",sans-serif; font-weight:700;}
.today-chip .mn{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums;}
/* 終わったものは、取り消し線＋薄くして一目で分かるようにする */
.today-chip.on{background:#EEF2EC; border-color:#B9C9B3; opacity:.8;}
.today-chip.on .tick{background:var(--green); border-color:var(--green); font-size:11px;}
.today-chip.on .nm{
  color:#7B8C77; text-decoration:line-through;
  text-decoration-thickness:2px; text-decoration-color:var(--green);
}
.today-chip.on .mn{color:#9AAA95;}

.plan-cta{
  position:absolute; left:14px; right:14px; bottom:16px; z-index:50;
}

/* ---------- 島の中 ---------- */
.isle-stage{position:absolute; left:50%; top:47%; transform:translate(-50%,-50%); width:98%;}
.isle-stage img.ground{display:block; width:100%; height:auto;}
.chars{position:absolute; inset:0;}
.ch{
  position:absolute; transform:translate(-50%,-100%);
  cursor:pointer; border:none; background:transparent; padding:0;
  transition:filter .25s ease, opacity .25s ease;
}
.ch img{display:block; height:100%; width:auto; filter:drop-shadow(0 5px 4px rgba(40,60,40,.3));}
.ch .inner{display:block; height:100%;}
.ch.idle{opacity:.55; filter:grayscale(.55);}

@keyframes waddle{
  0%{transform:rotate(-3.2deg) translateY(0);}
  25%{transform:rotate(0) translateY(-2.5%);}
  50%{transform:rotate(3.2deg) translateY(0);}
  75%{transform:rotate(0) translateY(-2.5%);}
  100%{transform:rotate(-3.2deg) translateY(0);}
}
@keyframes breathe{
  0%,100%{transform:rotate(-1.1deg) translateY(0);}
  50%{transform:rotate(1.1deg) translateY(-1.2%);}
}
.ch.todo .inner{animation:waddle 1.15s ease-in-out infinite;}
.ch.done .inner{animation:breathe 3.6s ease-in-out infinite;}
.ch.idle .inner{animation:breathe 5s ease-in-out infinite;}

.badge{
  position:absolute; left:50%; top:-4px; transform:translate(-50%,-100%);
  white-space:nowrap; font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:9.5px; padding:1px 7px; border-radius:100px;
  box-shadow:0 1px 4px rgba(20,50,30,.22); border:1.5px solid var(--green);
  background:#FFF; color:#31512A;
}
.badge.todo{border-color:var(--accent); color:var(--accent);}
.badge.idle{border-color:#A9BBA4; color:#7B8C77;}
.badge i{font-style:normal; margin-right:3px;}

.empty-note{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  z-index:30; text-align:center; background:rgba(255,255,255,.94);
  border:1px solid rgba(47,66,50,.12); border-radius:16px; padding:16px 20px;
  box-shadow:0 4px 14px rgba(20,50,30,.2); max-width:78%;
}
.empty-note b{font-family:"Zen Maru Gothic",sans-serif; display:block; margin-bottom:4px;}
.empty-note span{font-size:12.5px; color:var(--muted);}

.flowerbar{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:45;
  background:rgba(255,255,255,.96); border:1px solid rgba(47,66,50,.12);
  border-radius:16px; padding:11px 14px; box-shadow:0 4px 14px rgba(20,50,30,.2);
}
.flowerbar .top{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted);}
.flowerbar .top b{font-family:"Zen Maru Gothic",sans-serif; color:var(--ink); font-size:13.5px;}
.flowerbar .track{display:flex; gap:5px; margin-top:8px;}
.flowerbar .track i{flex:1; height:9px; border-radius:5px; background:#E8EEE5; display:block;}
.flowerbar .track i.on{background:radial-gradient(circle at 30% 30%,#FFF6D0,var(--gold));}
.flowerbar .bigbtn{margin-top:10px; padding:11px; font-size:14.5px;}

/* ---------- ボトムシート ---------- */
.sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:70;
  background:var(--panel); border-radius:20px 20px 0 0; padding:16px 18px 20px;
  box-shadow:0 -6px 24px rgba(20,50,30,.24);
  transform:translateY(102%); transition:transform .28s cubic-bezier(.3,1,.5,1);
}
.sheet.open{transform:translateY(0);}
.sheet .grab{width:40px; height:4px; border-radius:3px; background:#DCE6DA; margin:0 auto 12px;}
.sheet h3{font-family:"Zen Maru Gothic",sans-serif; font-size:17px; margin:0 0 2px;}
.sheet .sub{font-size:12.5px; color:var(--muted); margin:0 0 12px;}
.minute-read{
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:28px;
  font-variant-numeric:tabular-nums; text-align:center; margin:2px 0 12px;
}
.minute-read small{font-size:13px; color:var(--muted); font-weight:500; margin-left:4px;}
.sh-already{
  text-align:center; font-size:12px; color:var(--muted);
  margin:-8px 0 12px; font-variant-numeric:tabular-nums;
}
.row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;}
.chip{
  flex:1; min-width:70px; font-size:14px; font-weight:700; padding:11px 8px; border-radius:100px;
  border:1px solid var(--line); background:var(--panel-2); color:var(--ink); cursor:pointer;
  font-variant-numeric:tabular-nums;
}
.chip:active{background:var(--accent); border-color:var(--accent); color:#fff;}

/* ---------- 予定をつくる ---------- */
.plan-screen{
  position:absolute; inset:0; background:#EEF6F2; overflow-y:auto;
  padding:64px 16px 96px; z-index:5;
}
.plan-group{margin-bottom:18px;}
.plan-group h4{
  font-family:"Zen Maru Gothic",sans-serif; font-size:13.5px; margin:0 0 8px;
  color:var(--muted); display:flex; align-items:center; gap:7px;
}
.plan-group h4 .dot{width:9px; height:9px; border-radius:3px; background:var(--green);}
.plan-item{
  width:100%; display:flex; align-items:center; gap:11px; text-align:left;
  background:var(--panel); border:2px solid var(--line); border-radius:14px;
  padding:9px 12px; margin-bottom:7px; cursor:pointer;
}
.plan-item.on{border-color:var(--accent); background:#FFF4F8;}
.plan-item .ava{
  width:40px; height:40px; flex:none; border-radius:50%; background:#EAF2E7;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.plan-item .ava img{height:150%; width:auto; margin-top:22%;}
.plan-item .txt{flex:1; min-width:0;}
.plan-item .txt b{font-family:"Zen Maru Gothic",sans-serif; font-size:14.5px; display:block;}
.plan-item .txt span{font-size:11.5px; color:var(--muted);}
.plan-item .mark{
  width:24px; height:24px; flex:none; border-radius:50%; border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:13px; color:#fff;
}
.plan-item.on .mark{background:var(--accent); border-color:var(--accent);}
.plan-foot{
  position:absolute; left:0; right:0; bottom:0; z-index:10;
  padding:12px 16px 16px; background:linear-gradient(180deg,rgba(238,246,242,0),#EEF6F2 32%);
}

.plan-row{margin-bottom:7px;}
.plan-row .plan-item{margin-bottom:0;}
.plan-note{
  display:block; width:100%; margin-top:5px;
  font-family:inherit; font-size:13.5px; color:var(--ink);
  border:2px solid #F3D9E3; border-radius:11px; padding:9px 12px;
  background:#FFF; -webkit-appearance:none;
}
.plan-note::placeholder{color:#BCC9B8;}
.plan-note:focus{outline:none; border-color:var(--accent);}

.sh-note{
  font-size:13.5px; margin:0 0 12px; padding:9px 12px;
  background:#FFF4F8; border:1px solid #F3D9E3; border-radius:11px;
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; color:#A34468;
}

/* ---------- 大木 ---------- */
/* 空と海はマップと同じ配色にして、同じ世界の中にいるように見せる */
.tree-stage{position:absolute; inset:0;
  background:linear-gradient(180deg,#9FDCF5 0%,#8FD8EE 34%,#63BEE2 52%,#3E9FC9 100%);}
.tree-stage canvas{position:absolute; inset:0; width:100%; height:100%; z-index:3;}
.goalbar{
  width:150px; height:6px; border-radius:4px; background:#E3EADF;
  overflow:hidden; margin:6px 0 3px;
}
.goalbar i{display:block; height:100%; background:var(--accent); border-radius:4px;
  transition:width .4s ease;}

/* ---------- きろく ---------- */
.stats-screen{
  position:absolute; inset:0; background:#EEF6F2; overflow-y:auto;
  padding:66px 16px 40px; z-index:5;
}
.st-cards{display:flex; gap:8px; margin-bottom:22px;}
.st-card{
  flex:1; background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:11px 10px; text-align:center;
}
.st-card span{display:block; font-size:10.5px; color:var(--muted); line-height:1.5;}
.st-card b{
  display:block; font-family:"Zen Maru Gothic",sans-serif; font-size:16px;
  font-variant-numeric:tabular-nums; margin-top:2px;
}
.st-h{
  font-family:"Zen Maru Gothic",sans-serif; font-size:13.5px; color:var(--muted);
  margin:0 0 10px; display:flex; align-items:center; gap:7px;
}
.st-h::before{content:""; width:9px; height:9px; border-radius:3px; background:var(--accent);}

.st-bars{
  display:flex; gap:6px; align-items:flex-end; height:132px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:12px 10px 8px; margin-bottom:22px;
}
.st-bars .bar{flex:1; display:flex; flex-direction:column; align-items:center; height:100%;}
.st-bars .bar .v{font-size:9.5px; color:var(--muted); font-variant-numeric:tabular-nums; height:14px;}
.st-bars .bar i{
  width:100%; max-width:26px; margin-top:auto; border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,var(--accent),#EE93B0); min-height:3px;
}
.st-bars .bar .l{font-size:11px; color:var(--muted); margin-top:5px;}

.hbar{display:flex; align-items:center; gap:9px; margin-bottom:8px;}
.hbar .nm{width:76px; flex:none; font-size:12.5px;}
.hbar .track{flex:1; height:12px; border-radius:6px; background:#E3EADF; overflow:hidden;}
.hbar .track i{display:block; height:100%; border-radius:6px;
  background:linear-gradient(90deg,var(--green),#7FB26C); min-width:2px;}
.hbar .v{width:64px; flex:none; text-align:right; font-size:11.5px; color:var(--muted);
  font-variant-numeric:tabular-nums;}

.srow{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:11px;
  padding:9px 13px; margin-bottom:6px; font-size:13px;
}
.srow b{font-family:"Zen Maru Gothic",sans-serif; font-variant-numeric:tabular-nums;}
.none{font-size:13px; color:var(--muted); text-align:center; padding:18px 0;}

/* ---------- PIN ---------- */
.login{
  position:absolute; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(40,120,170,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.login.on{display:flex;}
.login-card{
  width:100%; max-width:340px; background:rgba(255,255,255,.97);
  border-radius:22px; padding:22px 22px 20px; text-align:center;
  box-shadow:0 12px 40px rgba(20,60,90,.3);
}
.login-logo{width:70%; margin:0 auto 10px; display:block;
  filter:drop-shadow(0 2px 3px rgba(20,60,90,.35)) brightness(.85) saturate(1.4);}
.login-card label{display:block; font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:14px; margin-bottom:10px;}
.login-card input{
  width:100%; text-align:center; letter-spacing:.5em; font-size:26px;
  padding:10px 0 10px .5em; border:2px solid var(--line); border-radius:14px;
  font-family:inherit; background:#fff; color:var(--ink);
}
.login-card input:focus{outline:none; border-color:var(--accent);}
.login-msg{min-height:20px; margin:8px 0 10px; font-size:12.5px; color:var(--accent-dark);}

/* ---------- 演出 ---------- */
.fly{position:absolute; z-index:80; pointer-events:none; width:42px; transform:translate(-50%,-50%);}
.fly img{width:100%; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));}
.toast{
  position:absolute; left:50%; top:22%; transform:translate(-50%,-50%) scale(.85);
  z-index:90; background:rgba(47,66,50,.93); color:#fff;
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:15px;
  padding:10px 20px; border-radius:100px; opacity:0; transition:all .3s ease; pointer-events:none;
  white-space:nowrap;
}
.toast.show{opacity:1; transform:translate(-50%,-50%) scale(1);}

@media (prefers-reduced-motion:reduce){
  .isle-art, .ch .inner{animation:none !important;}
}