/* ============================================================
   TABI NIKKI — 旅日記 — Travel Diary
   Japanese / Nintendo / Sketch Theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700;800;900&family=Zen+Maru+Gothic:wght@400;500;700&family=Yomogi&family=Nunito:wght@400;600;700;800&display=swap');

/* ===== CSS VARIABLES ===== */
:root {
  --cream:    #faf6ee;
  --paper:    #f5efe0;
  --paper2:   #ede4cc;
  --ink:      #1a1410;
  --ink2:     #3d3028;
  --muted:    #8a7a6a;
  --red:      #e63946;
  --red2:     #c1121f;
  --blue:     #2563eb;
  --blue2:    #1d4ed8;
  --yellow:   #fbbf24;
  --green:    #16a34a;
  --purple:   #7c3aed;
  --orange:   #ea580c;
  --pink:     #db2777;
  --sky:      #0ea5e9;

  --shadow-sm: 3px 3px 0px var(--ink2);
  --shadow-md: 5px 5px 0px var(--ink2);
  --shadow-lg: 8px 8px 0px var(--ink2);

  --border: 2.5px solid var(--ink);
  --border-thick: 4px solid var(--ink);

  --font-display: 'M PLUS Rounded 1c', sans-serif;
  --font-body:    'Zen Maru Gothic', sans-serif;
  --font-sketch:  'Yomogi', cursive;
  --font-ui:      'Nunito', sans-serif;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  cursor: none;
}

/* ===== PAPER TEXTURE BACKGROUND ===== */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.6;
}

body > * { position: relative; z-index: 1; }

/* ===== CUSTOM CURSOR ===== */
#cursor {
  width: 14px; height: 14px;
  background: var(--red);
  border-radius: 50%;
  position: fixed; pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: transform 0.08s, background 0.2s, width 0.2s, height 0.2s;
  box-shadow: 0 0 0 2px var(--cream);
}
#cursor-ring {
  width: 36px; height: 36px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  position: fixed; pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: all 0.12s ease;
}
body:hover #cursor-ring { opacity: 1; }

/* ===== SCROLL PROGRESS ===== */
#scroll-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 4px;
  background: var(--paper2); z-index: 1000;
  border-bottom: 1px solid var(--ink);
}
#scroll-fill {
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--red) 0px, var(--red) 8px, var(--yellow) 8px, var(--yellow) 16px);
  transform-origin: left; transform: scaleX(0);
  transition: transform 0.1s;
}

/* ===== TOPBAR ===== */
#topbar {
  position: fixed; top: 4px; left: 0; right: 0; z-index: 900;
  background: var(--cream);
  border-bottom: var(--border-thick);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 1.5rem;
}
.topbar-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--ink);
  display: flex; align-items: center; gap: 0.4rem;
  text-decoration: none;
  letter-spacing: -0.02em;
}
.logo-kanji {
  background: var(--red);
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
  border: 2px solid var(--ink);
  font-family: var(--font-sketch);
  box-shadow: var(--shadow-sm);
}
.topbar-nav {
  display: flex; align-items: center; gap: 0.25rem;
}
.nav-pill {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  padding: 0.3rem 0.75rem;
  border: var(--border);
  border-radius: 99px;
  background: transparent;
  color: var(--ink);
  cursor: none;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.nav-pill:hover, .nav-pill.active {
  background: var(--ink);
  color: var(--cream);
  box-shadow: var(--shadow-sm);
  transform: translate(-1px,-1px);
}
.nav-pill.active { background: var(--red); border-color: var(--red2); color: #fff; }
.topbar-actions { display: flex; gap: 0.4rem; }
.icon-pill {
  width: 34px; height: 34px;
  border: var(--border);
  border-radius: 50%;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: none; font-size: 0.9rem;
  transition: all 0.15s;
}
.icon-pill:hover { background: var(--ink); transform: translate(-1px,-1px); box-shadow: var(--shadow-sm); filter: invert(1); }

/* ===== PAGE WRAPPER ===== */
.page {
  min-height: 100vh;
  padding-top: 60px;
}

/* ===== SKETCH BORDER UTILITY ===== */
.sketch-box {
  border: var(--border);
  border-radius: 12px;
  background: var(--cream);
  box-shadow: var(--shadow-md);
  position: relative;
}
.sketch-box::before {
  content: '';
  position: absolute; inset: 3px;
  border: 1px dashed rgba(0,0,0,0.12);
  border-radius: 10px;
  pointer-events: none;
}

/* ===== STAMP BADGE ===== */
.stamp {
  display: inline-flex; flex-direction: column; align-items: center;
  border: 3px solid currentColor;
  border-radius: 6px;
  padding: 0.3rem 0.75rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  opacity: 0.85;
  position: relative;
}
.stamp::after {
  content: '';
  position: absolute; inset: -6px;
  border: 2px dashed currentColor;
  border-radius: 8px;
  opacity: 0.3;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.75rem 1.75rem;
  border: var(--border-thick);
  border-radius: 10px;
  cursor: none;
  transition: all 0.12s;
  position: relative;
  text-decoration: none;
}
.btn::after {
  content: '';
  position: absolute; bottom: -5px; right: -5px;
  width: 100%; height: 100%;
  border: var(--border-thick);
  border-radius: 10px;
  z-index: -1;
  transition: all 0.12s;
}
.btn:hover { transform: translate(-2px,-2px); }
.btn:hover::after { bottom: -7px; right: -7px; }
.btn:active { transform: translate(2px,2px); }
.btn:active::after { bottom: -2px; right: -2px; }

.btn-red    { background: var(--red);    color: #fff; }
.btn-red::after    { background: var(--red2);   }
.btn-blue   { background: var(--blue);   color: #fff; }
.btn-blue::after   { background: var(--blue2);  }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-yellow::after { background: #d97706; }
.btn-ghost  { background: transparent;  color: var(--ink); }
.btn-ghost::after  { background: var(--paper2); }

/* ===== SECTION HEADING ===== */
.section-kana {
  font-family: var(--font-sketch);
  font-size: 0.85rem;
  color: var(--muted);
  display: block;
  margin-bottom: 0.25rem;
}
.section-heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--ink);
  line-height: 1.1;
  position: relative;
}
.section-heading .underline-swash {
  position: relative; display: inline-block;
}
.section-heading .underline-swash::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 8px;
  background: var(--yellow);
  z-index: -1;
  border-radius: 2px;
}

/* ===== TAGS ===== */
.tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-display);
  font-size: 0.7rem; font-weight: 700;
  padding: 0.2rem 0.6rem;
  border: 2px solid currentColor;
  border-radius: 99px;
  transition: all 0.15s;
}
.tag:hover { transform: scale(1.05); }

/* ===== CARD ===== */
.card {
  background: #fff;
  border: var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-lg); }

/* ===== JOURNAL LINES ===== */
.journal-lines {
  background-image:
    linear-gradient(var(--paper2) 1px, transparent 1px);
  background-size: 100% 2rem;
  background-color: #fff;
}

/* ===== RED THREAD (notebook margin) ===== */
.notebook {
  padding-left: 3.5rem;
  position: relative;
}
.notebook::before {
  content: '';
  position: absolute; top: 0; left: 2.5rem; bottom: 0;
  width: 2px;
  background: rgba(230,57,70,0.4);
}
.notebook::after {
  content: '';
  position: absolute; top: 0; left: 2rem; bottom: 0;
  width: 1px;
  background: rgba(230,57,70,0.2);
}

/* ===== WASHI TAPE ===== */
.washi {
  display: inline-block;
  padding: 0.15rem 1.5rem;
  font-family: var(--font-sketch);
  font-size: 0.8rem;
  transform: rotate(-1.5deg);
  border-top: 1px solid rgba(0,0,0,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.washi-red    { background: rgba(230,57,70,0.25);   color: var(--red2); }
.washi-blue   { background: rgba(37,99,235,0.2);    color: var(--blue); }
.washi-yellow { background: rgba(251,191,36,0.35);  color: #92400e; }
.washi-green  { background: rgba(22,163,74,0.2);    color: var(--green); }
.washi-purple { background: rgba(124,58,237,0.2);   color: var(--purple); }

/* ===== STICKY NOTE ===== */
.sticky {
  background: #fff9c4;
  border: 2px solid #f0d000;
  border-radius: 2px;
  padding: 1rem;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.12);
  font-family: var(--font-sketch);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink2);
  position: relative;
}
.sticky::before {
  content: '';
  position: absolute; top: -8px; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 10px;
  background: rgba(255,215,0,0.7);
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* ===== PIXEL / RETRO BORDER ===== */
.pixel-border {
  box-shadow:
    0 -3px 0 0 var(--ink),
    0  3px 0 0 var(--ink),
   -3px 0 0 0 var(--ink),
    3px 0 0 0 var(--ink);
}

/* ===== TORII DECORATIVE DIVIDER ===== */
.torii-divider {
  display: flex; align-items: center; gap: 1rem;
  margin: 2rem 0;
}
.torii-divider::before, .torii-divider::after {
  content: '';
  flex: 1; height: 2px;
  background: repeating-linear-gradient(90deg, var(--ink) 0, var(--ink) 4px, transparent 4px, transparent 8px);
}
.torii-divider span {
  font-family: var(--font-sketch);
  font-size: 1.2rem;
  color: var(--red);
  white-space: nowrap;
}

/* ===== BADGE / LEVEL ===== */
.level-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.7rem;
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
  letter-spacing: 0.1em;
}

/* ===== PROGRESS BAR ===== */
.progress-wrap { background: var(--paper2); border: var(--border); border-radius: 99px; overflow: hidden; height: 14px; }
.progress-fill {
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--red) 0, var(--red) 12px, var(--red2) 12px, var(--red2) 24px);
  border-radius: 99px;
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}

/* ===== ANIMATIONS ===== */
@keyframes fade-up   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes fade-in   { from{opacity:0} to{opacity:1} }
@keyframes pop-in    { 0%{transform:scale(0.7);opacity:0} 70%{transform:scale(1.05)} 100%{transform:scale(1);opacity:1} }
@keyframes slide-r   { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:none} }
@keyframes stamp-in  { 0%{transform:scale(2) rotate(-20deg);opacity:0} 60%{transform:scale(0.95) rotate(2deg)} 100%{transform:scale(1) rotate(-2deg);opacity:0.85} }
@keyframes wiggle    { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)} }
@keyframes float     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes blink     { 50%{opacity:0} }
@keyframes spin      { to{transform:rotate(360deg)} }
@keyframes bounce-x  { 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }
@keyframes draw-line { from{stroke-dashoffset:1000} to{stroke-dashoffset:0} }
@keyframes page-enter {
  from { opacity:0; transform: perspective(1000px) rotateY(-8deg) translateX(-30px); }
  to   { opacity:1; transform: perspective(1000px) rotateY(0) translateX(0); }
}
@keyframes ripple-out { to{ transform:scale(3); opacity:0; } }
@keyframes confetti-drop {
  0%{opacity:1;transform:translate(0,0) rotate(0deg)}
  100%{opacity:0;transform:translate(var(--cx),var(--cy)) rotate(var(--cr))}
}

.anim-fade-up  { animation: fade-up  0.6s ease both; }
.anim-pop      { animation: pop-in   0.5s cubic-bezier(.4,0,.2,1) both; }
.anim-slide    { animation: slide-r  0.5s ease both; }
.anim-float    { animation: float 4s ease-in-out infinite; }
.anim-wiggle   { animation: wiggle 2s ease-in-out infinite; }

/* ===== REVEAL ON SCROLL ===== */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.done { opacity:1; transform:none; }

/* ===== TOAST ===== */
#toast-wrap {
  position:fixed; top:4.5rem; right:1rem;
  display:flex; flex-direction:column; gap:0.4rem;
  z-index:950; pointer-events:none;
}
.toast {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  border: 2px solid var(--cream);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 0.5rem;
  transform: translateX(120%);
  opacity: 0;
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
  pointer-events: auto;
}
.toast.show { transform: none; opacity:1; }
.toast.red  { background: var(--red); }
.toast.blue { background: var(--blue); }
.toast.green{ background: var(--green); }

/* ===== PAGE TRANSITION ===== */
#page-transition {
  position:fixed; inset:0; z-index:9000;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  pointer-events:none;
}
#pt-text {
  position: fixed; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family: var(--font-sketch);
  font-size: 2rem; color: var(--cream);
  z-index: 9001; opacity: 0;
  pointer-events: none;
}

/* ===== XP BAR (topbar) ===== */
.xp-row {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.65rem; font-weight: 700;
}
.xp-track {
  width: 80px; height: 8px;
  background: var(--paper2);
  border: 1.5px solid var(--ink);
  border-radius: 99px; overflow:hidden;
}
.xp-fill {
  height:100%;
  background: linear-gradient(90deg, var(--red), var(--yellow));
  border-radius:99px;
  transition: width 0.8s cubic-bezier(.4,0,.2,1);
}

/* ===== ACHIEVEMENT STRIP ===== */
#ach-strip {
  position:fixed; bottom:0; left:0; right:0; z-index:800;
  background: var(--ink);
  border-top: var(--border-thick);
  padding: 0.4rem 1rem;
  display:flex; align-items:center; gap:0.75rem;
  overflow-x:auto;
}
.ach-badge {
  display:flex; align-items:center; gap:0.3rem;
  font-family:var(--font-display); font-weight:700; font-size:0.65rem;
  color: rgba(255,255,255,0.25);
  white-space:nowrap;
  transition:all 0.4s;
  filter: grayscale(1);
}
.ach-badge.lit {
  color: var(--yellow);
  filter: grayscale(0);
  text-shadow: 0 0 8px rgba(251,191,36,0.6);
  animation: pop-in 0.5s ease;
}
.ach-badge .ach-icon {
  font-size:1.1rem;
  width:28px; height:28px;
  background:rgba(255,255,255,0.05);
  border:1.5px solid currentColor;
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
}
#ach-strip .ach-label {
  font-family:var(--font-sketch); font-size:0.75rem;
  color:rgba(255,255,255,0.3);
}

/* ===== SAKURA PETALS ===== */
.petal {
  position:fixed; pointer-events:none; z-index:5;
  font-size:1.2rem; opacity:0;
  animation: petal-fall var(--dur,6s) var(--delay,0s) ease-in forwards;
}
@keyframes petal-fall {
  0%  { opacity:1; transform:translate(0,0) rotate(0deg); }
  100%{ opacity:0; transform:translate(var(--px,20px), 100vh) rotate(var(--pr,360deg)); }
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .topbar-nav { display:none; }
  .section-heading { font-size:1.8rem; }
  #ach-strip { padding:0.3rem 0.75rem; gap:0.4rem; }
}
@media(max-width:480px){
  #topbar { padding:0.5rem 1rem; }
  .topbar-logo span:last-child { display:none; }
}



/* Masonry Gallery Grid */
.photo-grid-masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: var(--border-thick);
  background: var(--paper);
  cursor: none;
  transition: all 0.2s ease;
  aspect-ratio: 1 / 1;
}

.gallery-item:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-lg);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item .gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 0.5rem;
  font-family: var(--font-sketch);
  font-size: 0.7rem;
  transform: translateY(100%);
  transition: transform 0.2s;
  text-align: center;
}

.gallery-item:hover .gallery-overlay {
  transform: translateY(0);
}

/* Lightbox Gallery (for full view) */
.lightbox-gallery {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: 2rem;
}

.lightbox-gallery.active {
  display: flex;
}

.lightbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  color: white;
  position: sticky;
  top: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10001;
}

.lightbox-close {
  background: var(--red);
  border: none;
  color: white;
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: none;
}

.lightbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 1rem;
}

.lightbox-item {
  border-radius: 8px;
  overflow: hidden;
  cursor: none;
  transition: transform 0.2s;
}

.lightbox-item:hover {
  transform: scale(1.02);
}

.lightbox-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

@media (max-width: 640px) {
  .photo-grid-masonry {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
  }

  .lightbox-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
  }
}