: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 .rg{font-size:11px; color:var(--teal); font-weight:700;}
.today-chip.on .rg{color:#9AAA95; text-decoration:line-through;}
/* 終わったものは、取り消し線＋薄くして一目で分かるようにする */
.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; z-index:2; 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{position:relative;}
/* 全身の絵から顔のあたり（横49%・縦31%）を円の中心に。顔が収まる大きさに拡大 */
.plan-item .ava img{position:absolute; left:50%; top:50%; height:165%; width:auto; transform:translate(-49%,-30%);}
.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;}

/* ---------- キャラクター召喚 ---------- */
.summon{
  position:absolute; inset:0; overflow-y:auto; padding:66px 16px 24px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.2));
}
.sm-step{display:flex; flex-direction:column; gap:12px;}
.sm-step[hidden]{display:none;}
.sm-lead{
  margin:0; text-align:center; font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:15px; background:rgba(255,255,255,.92); border-radius:14px; padding:10px 12px;
}
.sm-animals{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:7px;}
.sm-animal{
  background:rgba(255,255,255,.94); border:2px solid transparent; border-radius:14px;
  padding:8px 4px 6px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px;
  box-shadow:0 2px 6px rgba(20,60,90,.12); color:var(--ink);
}
.sm-animal .em{font-size:26px; line-height:1.2;}
.sm-animal .nm{font-size:12px; font-weight:700; font-family:"Zen Maru Gothic",sans-serif;}
.sm-animal.on{border-color:var(--accent); background:#FFF4F8;}

.sm-circle{position:relative; width:170px; height:170px; margin:60px auto 10px;}
.sm-circle span{
  position:absolute; inset:0; border-radius:50%;
  border:3px dashed rgba(255,255,255,.95); animation:sm-spin 3s linear infinite;
}
.sm-circle span:nth-child(2){inset:22px; border-color:rgba(255,214,110,.95); animation-duration:2.2s; animation-direction:reverse;}
.sm-circle span:nth-child(3){inset:48px; border-style:solid; border-color:rgba(224,101,140,.8); animation:sm-pulse 1.4s ease-in-out infinite;}
@keyframes sm-spin{to{transform:rotate(360deg);}}
@keyframes sm-pulse{0%,100%{transform:scale(.85); opacity:.6;}50%{transform:scale(1.05); opacity:1;}}
.sm-wait-msg{
  text-align:center; margin:0; font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:16px;
  color:#fff; text-shadow:0 2px 6px rgba(20,60,90,.4);
}

.sm-appear{
  text-align:center; margin:0; font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:22px;
  color:#fff; text-shadow:0 2px 8px rgba(224,101,140,.7);
}
.sm-stage{
  background:radial-gradient(circle at 50% 60%,#FFFDF4 0%,#FFF1CF 55%,rgba(255,241,207,0) 72%);
  border-radius:20px; display:flex; justify-content:center; padding:10px;
}
.sm-stage img{height:300px; width:auto; max-width:100%; object-fit:contain;
  filter:drop-shadow(0 8px 8px rgba(40,60,40,.25)); animation:sm-pop .6s cubic-bezier(.3,1.5,.5,1);}
.sm-stage.small img{height:170px;}
@keyframes sm-pop{from{transform:scale(.3); opacity:0;}to{transform:scale(1); opacity:1;}}
.sm-job{
  margin:0; text-align:center; font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:16px;
  background:rgba(255,255,255,.94); border-radius:100px; padding:6px 14px; align-self:center;
}
.sm-row{display:flex; gap:8px;}
.sm-row .bigbtn{font-size:14px; padding:11px 6px;}
.sm-label{text-align:center; font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:16px;
  color:#fff; text-shadow:0 2px 6px rgba(20,60,90,.4);}
.sm-input{
  width:100%; text-align:center; font-size:22px; padding:10px; border-radius:14px;
  border:2px solid var(--line); font-family:"Zen Maru Gothic",sans-serif; color:var(--ink);
}
.sm-input:focus{outline:none; border-color:var(--accent);}

.summon-chips{
  position:absolute; left:12px; right:12px; top:62px; z-index:44;
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
}
.summon-chips:empty{display:none;}
.summon-chip{
  border:none; border-radius:100px; padding:6px 12px; cursor:pointer;
  background:rgba(255,255,255,.95); color:var(--accent-dark); font-weight:700; font-size:12.5px;
  font-family:"Zen Maru Gothic",sans-serif; box-shadow:0 2px 6px rgba(20,50,30,.2);
}

.resummon{
  display:block; margin:12px auto 0; border:none; background:none; cursor:pointer;
  font-size:12px; color:var(--muted); text-decoration:underline;
}
.resummon[hidden]{display:none;}

/* ---------- 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;}
}

/* ---------- 休憩島の猫（マップ） ---------- */
/* 島の中央を行ったり来たり。歩く→止まる→向きを変えて戻る→止まる */
.rest-cat{
  position:absolute; left:50%; top:41%; width:15%;
  pointer-events:none; animation:cat-walk 14s ease-in-out infinite;
}
.rest-cat .flip{display:block; animation:cat-turn 14s step-end infinite;}
.rest-cat img{display:block; width:100%; transform-origin:50% 100%;
  animation:cat-bob .45s ease-in-out infinite alternate;}
@keyframes cat-walk{
  0%{transform:translate(-110%,-50%);}
  32%{transform:translate(10%,-50%);}
  50%{transform:translate(10%,-50%);}
  82%{transform:translate(-110%,-50%);}
  100%{transform:translate(-110%,-50%);}
}
@keyframes cat-turn{0%{transform:scaleX(1);} 50%{transform:scaleX(-1);}}
@keyframes cat-bob{from{transform:translateY(0) rotate(-1.5deg);} to{transform:translateY(-4%) rotate(1.5deg);}}

/* ---------- 休憩の画面 ---------- */
.rest-screen{
  position:absolute; inset:0; background:#EEF6F2; overflow-y:auto; padding:66px 16px 40px;
}
.break-clock{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:16px; text-align:center; margin-bottom:22px; box-shadow:0 2px 8px rgba(20,50,30,.08);
}
.break-clock .lbl{display:block; font-size:12px; color:var(--muted);}
.break-clock .t{display:block; font-family:"Zen Maru Gothic",sans-serif; font-size:44px;
  line-height:1.2; color:var(--teal); font-variant-numeric:tabular-nums;}
.break-clock .msg{display:none; font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  color:var(--accent-dark); margin-top:4px;}
.break-clock.over{background:#FFF0F4; border-color:#F2B7C8;}
.break-clock.over .t{color:var(--accent);}
.break-clock.over .msg{display:block;}
.break-pill .t{font-variant-numeric:tabular-nums; color:var(--teal);}
.break-pill.over{background:#FFE3EB; border-color:#F2B7C8;}
.break-pill.over .t{color:var(--accent-dark);}

.game-list{display:grid; gap:10px;}
.game-card{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 16px;
  box-shadow:0 2px 0 var(--line); color:var(--ink);
}
.game-card:active{transform:translateY(2px); box-shadow:none;}
.game-card .ic{font-size:30px;}
.game-card b{display:block; font-family:"Zen Maru Gothic",sans-serif; font-size:17px;}
.game-card .txt span{font-size:12px; color:var(--muted);}

/* ---------- ひとふでがき ---------- */
.game-screen{
  position:absolute; inset:0; background:#EEF6F2; padding:66px 16px 24px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.gm-lead{margin:0; font-size:12.5px; color:var(--muted); text-align:center;}
.gm-board{
  position:relative; display:grid; gap:4px; width:100%; max-width:420px;
  touch-action:none; background:#D5E5D2; padding:6px; border-radius:16px;
}
.gm-cell{aspect-ratio:1; border-radius:9px; background:#fff; position:relative;
  display:flex; align-items:center; justify-content:center;
  font-size:min(5vw,22px); color:var(--gold); transition:background .08s;}
.gm-cell.wall{background:#9CB897; box-shadow:inset 0 2px 4px rgba(30,60,30,.25);}
.gm-cell.on{background:#FFD7E3;}
.gm-cell.head{background:var(--accent); color:#fff;}
.gm-board svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
.gm-board.clear .gm-cell.on,.gm-board.clear .gm-cell.head{background:#FFE9A8; color:#B07A10;}
.gm-clear{margin:0; font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:26px; color:var(--accent);}
.gm-row{display:flex; gap:8px; width:100%; max-width:420px; margin-top:auto;}

/* ---------- 管理画面 ---------- */
.admin-entry{position:absolute; right:14px; bottom:18px; z-index:60; opacity:.85;}
.ad-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px;
  display:grid; gap:10px; margin-bottom:22px;}
.ad-card label{font-weight:700; text-align:center;}
.ad-card .sm-input{font-size:17px;}
.ad-card[hidden]{display:none;}
.ad-card.danger{border-color:#F2B7C8;}
.ad-note{margin:0; font-size:12px; color:var(--muted);}

/* ---------- 範囲ごとのチェック／予定枠をたたむ ---------- */
button.today-head{width:100%; border:none; background:none; padding:0; cursor:pointer; text-align:left;}
.today-head i{font-style:normal; color:var(--muted); font-weight:500; margin-left:8px;}
.today.folded .today-chips{display:none;}
.today.folded .today-head{margin-bottom:0;}
.today-chip.multi{flex-wrap:wrap; cursor:default; padding:5px 7px 5px 11px;}
.range-chip{
  display:flex; align-items:center; gap:4px; cursor:pointer;
  border:1.5px solid #CFE3DF; background:#fff; border-radius:100px;
  padding:2px 9px 2px 4px; font-size:11.5px; font-weight:700; color:#2C6F69;
}
.range-chip .tick{
  width:14px; height:14px; border-radius:50%; border:1.5px solid #C6D6C2; background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:9px; color:#fff;
}
.range-chip.on{color:#9AAA95; text-decoration:line-through; border-color:#DCE5D8;}
.range-chip.on .tick{background:var(--green); border-color:var(--green);}
.sh-ranges{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:-4px 0 12px;}
.sh-ranges[hidden]{display:none;}
.sh-ranges .lbl{width:100%; font-size:11.5px; color:var(--muted);}
.sh-ranges .range-chip{font-size:13px; padding:4px 11px 4px 5px;}

/* ---------- 海の箱 ---------- */
#diorama, .diorama{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none;}
#mapScreen{background:#8CC7E4;}
#mapScreen .logo{filter:drop-shadow(0 1px 2px rgba(20,60,90,.55)) drop-shadow(0 0 8px rgba(40,110,160,.45));}
#isleSea{z-index:0;}