/* ================================================
   くーねるランド 共通スタイル
   テーマ: キジトラに合う、やさしく落ち着いた自然色
   ================================================ */
:root{
  --bg:#faf6ee;
  --bg2:#f3ecdd;
  --card:#fffdf8;
  --ink:#4a3c2e;
  --ink-soft:#7a6a55;
  --line:#e5dbc8;
  --acc:#a4b06a;        /* 抹茶グリーン */
  --acc-deep:#7d8a4c;
  --terra:#c8794a;      /* テラコッタ */
  --terra-soft:#e8b48f;
  --kuu:#5a6472;        /* くーカラー(青みグレー) */
  --neru:#b58a5a;       /* ねるカラー(茶) */
  --shadow:0 6px 20px rgba(74,60,46,.10);
  --r:18px;
}
[data-theme="dark"]{
  --bg:#23201a;
  --bg2:#2b271f;
  --card:#2f2a22;
  --ink:#e8e0d2;
  --ink-soft:#b3a789;
  --line:#453e32;
  --acc:#8a9a5b;
  --acc-deep:#a4b06a;
  --terra:#d98d5f;
  --terra-soft:#8a5f3f;
  --kuu:#8fa0b8;
  --neru:#d0a674;
  --shadow:0 6px 20px rgba(0,0,0,.35);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","BIZ UDPGothic","Yu Gothic UI",sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.7;
  transition:background .3s,color .3s;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hwrap{max-width:1100px;margin:auto;display:flex;align-items:center;gap:10px;padding:10px 16px}
.logo{font-weight:700;font-size:1.25rem;display:flex;align-items:center;gap:8px;white-space:nowrap}
.logo .paw{font-size:1.3rem;transform:rotate(-15deg);display:inline-block}
.gnav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.gnav a{
  padding:8px 12px;border-radius:99px;font-size:.92rem;font-weight:700;color:var(--ink-soft);
  transition:.2s;
}
.gnav a:hover,.gnav a.cur{background:var(--acc);color:#fff}
.menu-btn{display:none;margin-left:auto;font-size:1.6rem;padding:4px 10px}
.theme-btn{font-size:1.2rem;padding:6px 10px;border-radius:99px;transition:.2s}
.theme-btn:hover{background:var(--bg2)}
@media(max-width:760px){
  .menu-btn{display:block}
  .gnav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--card);
    flex-direction:column;padding:10px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .gnav.open{display:flex}
  .gnav a{padding:13px 16px;font-size:1.05rem}
}

/* ---------- layout ---------- */
.wrap{max-width:1100px;margin:auto;padding:24px 16px 80px}
.page-title{font-size:1.7rem;font-weight:700;margin:14px 0 4px;display:flex;align-items:center;gap:10px}
.page-sub{color:var(--ink-soft);margin-bottom:22px;font-size:.95rem}
.sec-title{font-size:1.3rem;font-weight:700;margin:38px 0 14px;display:flex;align-items:center;gap:8px}
.sec-title::after{content:"";flex:1;height:2px;background:var(--line);border-radius:2px}

/* ---------- cards & buttons ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--acc);color:#fff;font-weight:700;
  padding:12px 26px;border-radius:99px;font-size:1rem;
  transition:.15s;box-shadow:0 3px 0 var(--acc-deep);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--acc-deep)}
.btn.terra{background:var(--terra);box-shadow:0 3px 0 #9c5c36}
.btn.big{font-size:1.25rem;padding:18px 44px}
.btn.ghost{background:var(--card);color:var(--ink);border:2px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--acc)}
.chip{
  display:inline-flex;align-items:center;gap:5px;padding:7px 15px;border-radius:99px;
  background:var(--card);border:1.5px solid var(--line);font-size:.9rem;font-weight:700;
  color:var(--ink-soft);transition:.15s;cursor:pointer;
}
.chip:hover{border-color:var(--acc)}
.chip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.chip.kuu.on{background:var(--kuu);border-color:var(--kuu)}
.chip.neru.on{background:var(--neru);border-color:var(--neru)}
.chip.terra.on{background:var(--terra);border-color:var(--terra)}

/* ---------- photo grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
@media(max-width:500px){.grid{grid-template-columns:repeat(2,1fr);gap:8px}}
.ph{
  position:relative;border-radius:14px;overflow:hidden;cursor:pointer;
  background:var(--bg2);aspect-ratio:1;border:1px solid var(--line);
}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.ph:hover img{transform:scale(1.07)}
.ph .cap{
  position:absolute;inset:auto 0 0 0;padding:22px 10px 8px;font-size:.75rem;color:#fff;
  background:linear-gradient(transparent,rgba(30,20,10,.75));
  opacity:0;transition:.25s;
}
.ph:hover .cap{opacity:1}
.ph .badge{
  position:absolute;top:8px;left:8px;font-size:.7rem;font-weight:700;color:#fff;
  padding:2px 9px;border-radius:99px;background:rgba(30,20,10,.55);
}
.badge.kuu{background:var(--kuu)}.badge.neru{background:var(--neru)}
.badge.both{background:var(--terra)}
.ph .star{position:absolute;top:8px;right:8px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:300;background:rgba(20,15,8,.92);
  display:none;align-items:center;justify-content:center;flex-direction:column;padding:16px;
}
.lb.open{display:flex}
.lb img{max-width:min(96vw,1100px);max-height:74vh;object-fit:contain;border-radius:12px}
.lb .lb-cap{color:#f3ecdd;text-align:center;margin-top:12px;max-width:700px}
.lb .lb-cap .d{font-size:.8rem;opacity:.7}
.lb .lb-tags{margin-top:4px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.lb .lb-tags span{font-size:.72rem;background:rgba(255,255,255,.15);color:#fff;padding:2px 10px;border-radius:99px}
.lb button{color:#fff;font-size:1.5rem;position:absolute;padding:14px;opacity:.8}
.lb button:hover{opacity:1}
.lb .x{top:8px;right:8px;font-size:1.9rem}
.lb .prev{left:4px;top:50%;transform:translateY(-50%);font-size:2.2rem}
.lb .next{right:4px;top:50%;transform:translateY(-50%);font-size:2.2rem}
.lb .play{bottom:12px;right:12px;font-size:1.3rem}

/* ---------- sound widget ---------- */
.sound-ui{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:99px;padding:6px 14px;width:fit-content}
.sound-ui input[type=range]{width:110px;accent-color:var(--acc)}
.sound-ui .mute{font-size:1.15rem;padding:2px 6px;border-radius:99px}
.sound-ui .mute:hover{background:var(--bg2)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--bg2);margin-top:40px}
.fwrap{max-width:1100px;margin:auto;padding:30px 16px;text-align:center;color:var(--ink-soft);font-size:.9rem}
.fwrap a{color:var(--terra);font-weight:700}
.paw-divider{text-align:center;font-size:1.2rem;letter-spacing:18px;color:var(--terra-soft);margin:36px 0 8px;user-select:none}

/* ---------- misc ---------- */
.fade-in{animation:fadeIn .5s both}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pop{animation:pop .35s both}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.wobble{animation:wobble .5s}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hidden{display:none!important}
.center{text-align:center}
.note{font-size:.85rem;color:var(--ink-soft)}

/* ---------- コイン獲得トースト ---------- */
.coinfx{
  position:fixed;top:70px;right:16px;z-index:9999;pointer-events:none;
  background:var(--card);border:2px solid #d4a017;color:var(--ink);
  font-weight:700;padding:10px 18px;border-radius:99px;box-shadow:var(--shadow);
  animation:coinpop 2.2s ease-out forwards;
}
@keyframes coinpop{
  0%{transform:translateY(-16px) scale(.7);opacity:0}
  15%{transform:none;opacity:1}
  80%{transform:none;opacity:1}
  100%{transform:translateY(-10px);opacity:0}
}

/* ---------- ライトボックス内ハート ---------- */
.lb-hearts{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px}
.lb-hearts button{
  font-size:1.5rem;padding:8px 16px;border-radius:99px;background:rgba(255,255,255,.14);
  transition:.12s;position:static;
}
.lb-hearts button:active{transform:scale(1.35)}
.lb-hearts .lbh-count{color:#ffb3c1;font-weight:700;font-size:1.05rem;min-width:3em;text-align:center}
.lb-hearts .lbh-left{color:#f3ecdd;opacity:.65;font-size:.72rem}
.heartfx{position:fixed;z-index:9999;pointer-events:none;font-size:1.5rem;
  transform:translate(-50%,-50%);animation:heartup 1s ease-out forwards}
@keyframes heartup{30%{transform:translate(-50%,-90%) scale(1.4)}100%{transform:translate(-50%,-220%) scale(.8);opacity:0}}

/* ---------- 肉球カーソル＆足あとエフェクト ---------- */
@media(hover:hover) and (pointer:fine){
  body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='%23c8794a'%3E%3Cellipse cx='14' cy='18' rx='6.5' ry='5.5'/%3E%3Ccircle cx='6' cy='11' r='2.6'/%3E%3Ccircle cx='11' cy='7.5' r='2.6'/%3E%3Ccircle cx='17' cy='7.5' r='2.6'/%3E%3Ccircle cx='22' cy='11' r='2.6'/%3E%3C/g%3E%3C/svg%3E") 14 14, auto}
  a,button,.ph,.chip,[onclick]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 28 28'%3E%3Cg fill='%237d8a4c'%3E%3Cellipse cx='14' cy='18' rx='6.5' ry='5.5'/%3E%3Ccircle cx='6' cy='11' r='2.6'/%3E%3Ccircle cx='11' cy='7.5' r='2.6'/%3E%3Ccircle cx='17' cy='7.5' r='2.6'/%3E%3Ccircle cx='22' cy='11' r='2.6'/%3E%3C/g%3E%3C/svg%3E") 15 15, pointer}
}
.pawfx{
  position:fixed;z-index:9999;pointer-events:none;font-size:1.35rem;
  transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(.5);opacity:.9;
  animation:pawpop .8s ease-out forwards;
}
@keyframes pawpop{
  30%{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1.15);opacity:.95}
  100%{transform:translate(-50%,-62%) rotate(var(--rot,0deg)) scale(1);opacity:0}
}
/* ページ表示をふわっと */
.wrap{animation:fadeIn .45s both}