/* ============================================================
   style.css  — loaded AFTER bootstrap.min.css and katex.min.css
   Shared by the landing and every note page.
   ============================================================ */

:root{
  --cream:#fbf7f2; --ink:#2e2a2b; --muted:#8d8487;
  --sakura:#f7c8d3; --lav:#cdc2f0; --berry:#ff6a8b; --teal:#7fc6d0;
  --codebg:#fdf3f5; --soft:0 6px 24px rgba(0,0,0,.06);

  /* retheme Bootstrap */
  --bs-body-bg:var(--cream);
  --bs-body-color:var(--ink);
  --bs-body-font-family:"Quicksand",system-ui,sans-serif;
  --bs-border-color:#efe6e2;
  --bs-secondary-color:var(--muted);
  --bs-link-color:var(--berry);
  --bs-link-hover-color:#e0567a;
  --bs-box-shadow-sm:0 6px 24px rgba(0,0,0,.06);
  --bs-border-radius:12px; --bs-border-radius-lg:14px; --bs-border-radius-xl:18px;
}

body{
  background-image:radial-gradient(var(--sakura) .8px, transparent .8px);
  background-size:26px 26px; background-attachment:fixed; -webkit-font-smoothing:antialiased;
}

.ico, img.ico{width:22px; height:22px; flex:0 0 22px; display:block;}

.badge-stack{position:relative; width:64px; height:64px; margin-inline:auto;}

/* sakura fills the badge, sits behind */
.badge-stack .badge-bg{
  position:absolute; inset:0; width:97%; height:97%;
  object-fit:contain; z-index:1;
}

/* E501 smaller, centered, in front */
.badge-stack .badge-fg{
  position:absolute; top:50%; left:50%;
  width:40px; height:auto;            /* ~half the badge */
  transform:translate(-50%,-50%);
  object-fit:contain; z-index:2;
  image-rendering:pixelated;          /* keep the pixels crisp */
}

/* shared */
.kick{font-family:"Pixelify Sans",monospace; font-size:.7rem; color:var(--berry); letter-spacing:.02em;}
.rail-sticky{position:sticky; top:1.5rem;}
@media (max-width:991.98px){ .rail-sticky{position:static;} }

/* profile */
.avatar{width:70px; height:70px; border-radius:50%; background:var(--sakura);
  border:3px solid #fff; box-shadow:0 0 0 3px var(--sakura);
  display:flex; align-items:center; justify-content:center; font-size:28px;}
.interests .ico{width:22px; text-align:center;}
.lang-name{width:74px; flex:0 0 74px;}
.progress{height:8px; background:var(--cream); box-shadow:inset 0 0 0 1px var(--bs-border-color);}
.progress-bar{background:linear-gradient(90deg,var(--sakura),var(--berry));}

/* nav + TOC (same look; .active set by Bootstrap on nav, by site.js on TOC) */
.page-nav .nav-link, .page-nav a{display:block; color:var(--muted); text-decoration:none;
  border-left:3px solid transparent; border-radius:9px; padding:.3rem .6rem; font-size:.86rem;}
.page-nav .nav-link:hover, .page-nav a:hover{color:var(--ink); background:var(--cream);}
.page-nav .nav-link.active, .page-nav a.active{color:var(--ink); font-weight:600; background:#fff7f9; border-left-color:var(--berry);}
.page-nav a.sub{padding-left:1.4rem; font-size:.8rem;}

/* landing hero + cards */
.mark{background:linear-gradient(transparent 62%, var(--sakura) 62%); padding:0 .1em;}
.proj{color:inherit; transition:transform .15s ease, box-shadow .15s ease;}
.proj:hover{transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.09)!important;}
.ico-badge{width:42px; height:42px; border-radius:12px; background:var(--cream);
  display:flex; align-items:center; justify-content:center; font-size:22px;}
.tag{font-family:"Pixelify Sans",monospace; font-size:.6rem; color:var(--berry);
  background:#fff7f9; border:1px solid var(--sakura);}

/* ---------- note body (your Markdown lands here) ---------- */
.note-body h2{font-size:1.3rem; font-weight:700; margin:1.6rem 0 .3rem; display:flex; align-items:center; gap:.45rem;}
.note-body h2::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--sakura);}
.note-body h3{font-size:1.08rem; font-weight:700; margin:1.2rem 0 .3rem;}
.note-body p{margin:.6rem 0;}
.note-body a{font-weight:600;}

.boxed{position:relative; background:#fff; border:1.6px solid var(--sakura); border-radius:14px;
  box-shadow:var(--soft); padding:1.1rem 1.2rem .9rem; margin:1.2rem 0; text-align:center;}
.boxed .tag{position:absolute; top:-.7rem; left:1rem; background:#fff; font-family:"Pixelify Sans",monospace;
  font-size:.62rem; color:var(--berry); padding:0 .4rem; border:0;}
.keyidea{background:#f3effc; border-left:4px solid var(--lav); border-radius:10px; padding:.8rem 1rem; margin:1rem 0;}

/* images + the *italic line* right after acts as a caption */
.note-body img{max-width:100%; border-radius:14px; box-shadow:var(--soft); margin:1.2rem 0 .3rem; display:block;}
.note-body img + em{display:block; text-align:center; color:var(--muted); font-size:.85rem; margin-bottom:1rem;}

/* code */
.note-body pre{background:var(--codebg); border:1px solid var(--bs-border-color); border-radius:12px;
  padding:.9rem 1rem; overflow:auto; font-family:"DM Mono",ui-monospace,monospace; font-size:.82rem; color:#5a4a50;}
.note-body code{font-family:"DM Mono",ui-monospace,monospace; font-size:.86em; color:#b3456b;}
.note-body pre code{color:inherit;}

.katex-display{margin:.4rem 0 !important;}
.footer-pix{font-family:"Pixelify Sans",monospace; font-size:.66rem; color:var(--muted);}

/* ============================================================
   Tōkaidō map page (/tokaido/)
   ============================================================ */
.map{width:100%; height:auto; border-radius:14px; border:1px solid var(--bs-border-color);
  background:linear-gradient(180deg,#fdfbf8,#fbf7f2);}
.sea{fill:#e2e9f5; opacity:.7;}
.coast{fill:none; stroke:#cdd7ea; stroke-width:1.2; opacity:.7;}
.fuji{fill:var(--lav); opacity:.35;} .snow{fill:#fff; opacity:.85;}
.seg{stroke-linecap:round; fill:none; transition:opacity .3s ease; animation:fadein .6s ease both;}
@keyframes fadein{from{opacity:0;}}
.stn{fill:#fff; stroke:var(--berry); stroke-width:2; animation:pop .5s ease forwards;}
.stn.minor{stroke:var(--muted); stroke-width:1.4; animation-name:popm;}
@keyframes pop{from{r:0;} to{r:4.5;}} @keyframes popm{from{r:0;} to{r:3;}}
.slab{font-family:"Quicksand",sans-serif; font-size:11px; fill:var(--ink); font-weight:600;}
.compass{font-family:"Pixelify Sans",monospace; font-size:11px; fill:var(--muted);}
.rline{fill:none; stroke-linecap:round; stroke-linejoin:round; pointer-events:none;}
.rline.hidden{display:none;}
.rline.draw{stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1s ease forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}

.odo .num{font-family:"Pixelify Sans",monospace; font-weight:600; font-size:2rem;
  background:linear-gradient(var(--lav),#fff); padding:.05rem .45rem; border-radius:10px; box-shadow:inset 0 0 0 2px var(--sakura);}
.odo .unit{font-family:"Pixelify Sans",monospace; color:var(--muted); font-size:.85rem;}

.chip{font-family:"Quicksand",sans-serif; font-weight:600; font-size:.76rem; cursor:pointer;
  border:1px solid var(--bs-border-color); background:var(--cream); border-radius:999px; padding:.32rem .8rem;
  display:flex; align-items:center; gap:.4rem; transition:transform .12s ease;}
.chip:hover{transform:translateY(-1px);}
.chip.active{background:#fff; box-shadow:var(--soft); border-color:transparent;}
.chip .dot, .trip .dot{width:9px; height:9px; border-radius:50%; display:inline-block;}

.trip{border-top:1px solid var(--bs-border-color); font-size:.9rem;}
.trip .date{font-family:"Pixelify Sans",monospace; font-size:.78rem; color:var(--muted); min-width:96px;}
.trip .km{font-family:"Pixelify Sans",monospace; font-size:.82rem;}

/* ============================================================
   E501 pixel scene (home page)  — appended
   ============================================================ */
.escene{position:relative; width:100%; max-width:680px; margin-inline:auto; height:210px; overflow:hidden;
  border-radius:14px; border:1px solid var(--bs-border-color);
  background:linear-gradient(180deg,#bfe3f2 0 66%,#cfe6c2 67%,#bcd9a8 100%);}
.escene>*{position:absolute;}
.escene canvas, .escene .car{image-rendering:pixelated;}
.escene .platform{left:150px; width:470px; height:9px; bottom:42px; background:#d8c08e;
  border:2px solid var(--ink); border-bottom:0; z-index:2;}
.escene .platform::after{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:#f0c040;}
.escene .car{width:140px; height:auto; transform-origin:center bottom; z-index:3;}
.escene .cloud{left:0; z-index:0; animation:drift linear infinite;}
@keyframes drift{from{transform:translateX(760px);} to{transform:translateX(-200px);}}
.escene .tree{z-index:1; transform-origin:bottom center; animation:sway ease-in-out infinite;}
@keyframes sway{0%,100%{transform:rotate(-1.6deg);} 50%{transform:rotate(1.6deg);}}
.escene .petal{top:-20px; z-index:6; background:var(--sakura); border-radius:1px; animation:petalfall linear infinite;}
@keyframes petalfall{0%{transform:translate(0,-20px) rotate(0); opacity:0;} 8%{opacity:.95;}
  100%{transform:translate(-120px,240px) rotate(380deg); opacity:.5;}}
.escene .ekimei{left:572px; bottom:51px; z-index:4;}
.escene .board{background:#fff; border:1.5px solid #141414; border-radius:2px; padding:1px 5px; text-align:center;}
.escene .board .kana{font-size:7px; font-weight:700; letter-spacing:1px; color:#111;}
.escene .legs{display:flex; justify-content:space-between; padding:0 6px;}
.escene .pole{width:2px; height:22px; background:#cfd3d7; border:1px solid #141414;}
.escene .pixel-bubble{position:absolute; left:50%; top:6px; transform:translateX(-50%); z-index:5;
  font-family:"Pixelify Sans",monospace; font-size:15px; line-height:1.3; text-align:center; color:var(--ink);
  background:#fff; border:2px solid var(--ink); padding:4px 8px; box-shadow:3px 3px 0 rgba(46,42,43,.25);}
.escene .pixel-bubble::after{content:""; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--ink);}
.escene .pixel-bubble[hidden]{display:none;}

/* ============================================================
   mini Tōkaidō tracker (home page)  — appended
   ============================================================ */
.trackermini .tm-head{cursor:pointer;}
.trackermini .tm-chev{color:var(--berry); font-size:1rem;}
.trackermini .tm-detail{max-height:0; overflow:hidden; transition:max-height .4s ease;}
.trackermini .tm-detail.is-open{max-height:1200px;}

/* === pigeon === */
#pigeon{position:fixed; left:0; top:0; width:54px; z-index:60;
  image-rendering:pixelated; pointer-events:none; will-change:transform;}
.coo{position:fixed; z-index:61; pointer-events:none;
  font-family:"Pixelify Sans",monospace; font-size:.8rem; color:var(--ink);
  background:#fff; border:2px solid var(--ink); border-radius:8px; padding:.1rem .45rem;
  box-shadow:3px 3px 0 rgba(46,42,43,.18); animation:coo 1.6s ease forwards;}
@keyframes coo{0%{opacity:0; transform:translateY(4px) scale(.9);}
  15%{opacity:1; transform:translateY(0) scale(1);} 75%{opacity:1;} 100%{opacity:0; transform:translateY(-10px);}}