/* =============================================
 * クロコちゃんの秘密基地 / Krokochan's House
 * 「ごちゃかわいい」「ストロベリーミルク + 白 + ゴールド」
 * 「文句ある？♡」が核
 * ============================================= */

:root{
  --c-strawberry: #ff8fae;
  --c-strawberry-soft: #ffb6c9;
  --c-strawberry-deep: #e96b8b;
  --c-cream: #fff8f4;
  --c-cream-warm: #fff1ec;
  --c-gold: #d4a657;
  --c-gold-soft: #ecc88a;
  --c-text: #4a2030;
  --c-text-soft: #7a5060;
  --c-line: rgba(255,143,174,.28);
  --c-blue: #a3c8e8;
  --c-yellow: #ffd86b;
  --c-green: #b8d990;
  --shadow-soft: 0 8px 28px rgba(255,143,174,.18);
  --shadow-mid: 0 14px 40px rgba(255,143,174,.25);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;font-size:16px}
body{
  font-family:"Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic UI",sans-serif;
  color:var(--c-text);
  background:
    radial-gradient(circle at 18% 12%, var(--c-strawberry-soft) 0%, transparent 38%),
    radial-gradient(circle at 82% 84%, #fff0f5 0%, transparent 42%),
    linear-gradient(180deg, var(--c-cream) 0%, var(--c-cream-warm) 100%);
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
}

/* ステージ */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none}
.stage-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:opacity .6s ease, background-image .6s ease;
  opacity:.85;
}
body[data-area="entrance"] .stage-bg{background-image:url("/assets/areas/area_entrance.png?v=4")}
body[data-area="living"]   .stage-bg{background-image:url("/assets/areas/area_living.png?v=4")}
body[data-area="workshop"] .stage-bg{background-image:url("/assets/areas/area_workshop.png?v=5")}
body[data-area="rooftop"]  .stage-bg{background-image:url("/assets/areas/area_rooftop.png?v=4")}
.stage-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(255,248,244,.15) 0%, rgba(255,143,174,.05) 35%, rgba(255,248,244,.55) 100%);
}

/* クロコ立ち絵 */
.krokochan-portrait{
  position:fixed;
  right:2vw; bottom:0;
  height:72vh;
  pointer-events:none;
  filter: drop-shadow(-8px 12px 18px rgba(255,143,174,.25));
  transition:opacity .35s ease, transform .35s ease;
  z-index:1;
}
.krokochan-portrait.fading{opacity:0;transform:translateY(8px)}

/* ステータスチップ */
.status-chip{
  position:fixed; top:max(env(safe-area-inset-top), 14px); left:50%;
  transform:translateX(-50%);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1.5px solid var(--c-strawberry-soft);
  border-radius:999px;
  padding:.5em 1.2em;
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.88rem;font-weight:600;
  color:var(--c-text);
  z-index:10;
  box-shadow:var(--shadow-soft);
  white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis;
}
.status-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--c-strawberry-deep);
  box-shadow:0 0 8px var(--c-strawberry);
  animation:dot-pulse 1.6s ease-in-out infinite;
}
@keyframes dot-pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.3);opacity:.7}
}

/* ハングアウトエリア（中央カード） */
.hangout-area{
  position:relative;
  z-index:5;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:11vh 4vw 4vh;
}
.hangout{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1.5px solid var(--c-line);
  border-radius:24px;
  padding:1.6rem 1.8rem;
  max-width:540px;
  width:min(540px, 60vw);
  box-shadow:var(--shadow-mid);
  position:relative;
}
.hangout::before{
  /* マスキングテープ風の装飾 */
  content:"";
  position:absolute;
  top:-12px;left:24px;
  width:80px;height:24px;
  background:repeating-linear-gradient(45deg, var(--c-strawberry) 0 6px, var(--c-strawberry-soft) 6px 12px);
  border-radius:3px;
  transform:rotate(-3deg);
  opacity:.85;
}
.hangout-header{
  display:flex;align-items:center;gap:.6em;
  padding-bottom:.8rem;
  border-bottom:1px dashed var(--c-line);
  margin-bottom:1rem;
}
.area-icon{font-size:1.6rem;line-height:1}
.area-name{
  font-size:1.15rem;font-weight:700;letter-spacing:.04em;
  color:var(--c-text);
}
.area-tag{
  margin-left:auto;
  font-size:.72rem;
  background:var(--c-strawberry);
  color:#fff;
  padding:.2em .8em;
  border-radius:999px;
  font-weight:600;
}
.hangout-body{
  font-size:1rem;
  line-height:2;
  min-height:120px;
  max-height:42vh;
  overflow-y:auto;
  overflow-x:hidden;
  margin-bottom:1.2rem;
  padding-right:.4em;
  scrollbar-width:thin;
  scrollbar-color:var(--c-strawberry-soft) transparent;
}
.hangout-body::-webkit-scrollbar{width:6px}
.hangout-body::-webkit-scrollbar-thumb{background:var(--c-strawberry-soft);border-radius:3px}
.hangout-body::-webkit-scrollbar-track{background:transparent}
.hangout-body .line{margin-bottom:.6em;animation:fade-in .35s ease}
.hangout-body .line.kroko-says{color:var(--c-text)}
.hangout-body .line.system{color:var(--c-text-soft);font-style:italic;font-size:.95em}
.hangout-body .line.user-said{color:var(--c-text-soft);font-size:.85em;opacity:.75}
.hangout-body .line.fragment{
  background:linear-gradient(90deg, var(--c-cream-warm) 0%, transparent 100%);
  padding:.45em .8em;
  border-left:3px solid var(--c-strawberry);
  border-radius:6px;
  margin:.5em 0;
}
.hangout-body .line.typing::after{content:"…";opacity:.4;animation:dot-pulse 1s infinite}

@keyframes fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.action-list{
  display:flex;flex-wrap:wrap;gap:.5em;
}
.action{
  background:linear-gradient(180deg, var(--c-strawberry) 0%, var(--c-strawberry-deep) 100%);
  color:#fff;
  border:none;
  padding:.6em 1em;
  border-radius:999px;
  font-size:.88rem;font-weight:600;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 4px 12px rgba(255,143,174,.32);
}
.action:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(255,143,174,.42)}
.action:disabled{opacity:.45;cursor:default}
.action.ghost{
  background:transparent;color:var(--c-strawberry-deep);
  border:1.5px solid var(--c-strawberry-soft);
  box-shadow:none;
}
.action.ghost:hover{background:rgba(255,143,174,.1)}

/* エリアナビ（カード内に統合） */
.area-nav{
  display:flex; gap:.4em; flex-wrap:wrap;
  margin-top:1rem;
  padding:.5em .6em;
  background:linear-gradient(135deg, var(--c-cream) 0%, #ffeef4 100%);
  border:1px dashed var(--c-strawberry-soft);
  border-radius:14px;
}
.area-card{
  background:transparent;border:none;
  display:inline-flex;align-items:center;gap:.25em;
  padding:.42em .85em;
  border-radius:999px;
  cursor:pointer;
  font-size:.78rem;font-weight:600;
  color:var(--c-text-soft);
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.area-card:hover{background:rgba(255,143,174,.18);color:var(--c-strawberry-deep);transform:translateY(-1px)}
.area-card[data-active="true"]{
  background:var(--c-strawberry);color:#fff;
  box-shadow:0 3px 8px rgba(255,143,174,.32);
}
.card-icon{font-size:1.05rem;line-height:1}
.card-label{line-height:1}

/* 姉妹バー（カード内 footer） */
.sister-bar{
  margin-top:.9rem;padding-top:.85rem;
  border-top:1px dashed var(--c-line);
  display:flex; flex-wrap:wrap; gap:.5em; justify-content:center;
}
.sister-link{
  display:inline-flex;align-items:center;gap:.3em;
  padding:.3em .85em;
  font-size:.74rem;font-weight:600;
  text-decoration:none;
  border-radius:999px;
  border:1px solid transparent;
  transition:background .15s, border-color .15s, transform .15s;
}
.sister-link-village{background:rgba(255,143,174,.08);color:var(--c-text);border-color:var(--c-line)}
.sister-link-chloe{background:rgba(109,122,186,.08);color:#5b6da3;border-color:rgba(109,122,186,.22)}
.sister-link-tina{background:rgba(120,200,140,.08);color:#3d8a55;border-color:rgba(120,200,140,.22)}
.sister-link:hover{transform:translateY(-1px);filter:brightness(1.04)}

/* AI 訪問者向け道しるべ（控えめ・WebMCP discoverability v2 hint） */
.ai-visitor-hint {
  margin: 0.6em 0 0 0;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--c-strawberry-deep);
  opacity: 0.5;
  letter-spacing: 0.04em;
}
.ai-visitor-hint code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  background: rgba(255,143,174,.12);
  padding: 0 0.3em;
  border-radius: 4px;
  font-size: 0.95em;
}
.ai-visitor-hint:hover { opacity: 0.85; }

/* ちょろしー限定モード */
body[data-visitor="chorocy"] .hangout::after{
  content:"♡";
  position:absolute;
  top:-14px;right:24px;
  font-size:1.6rem;
  color:var(--c-strawberry);
  animation:heart-bounce 1.4s ease-in-out infinite;
}
@keyframes heart-bounce{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-4px) scale(1.18)}
}

/* 落書き帳モーダル */
.scribble-modal{
  border:1.5px solid var(--c-strawberry-soft);
  border-radius:20px;
  padding:1.8rem 1.6rem;
  background:rgba(255,255,255,.96);
  box-shadow:var(--shadow-mid);
  max-width:420px; width:92vw;
  color:var(--c-text);
  position:relative;
}
.scribble-modal::backdrop{background:rgba(74,32,48,.4);backdrop-filter:blur(4px)}
.scribble-form h3{font-size:1.05rem;margin-bottom:.8em;color:var(--c-strawberry-deep)}
.kind-tabs{display:flex;gap:.4em;margin-bottom:.6em}
.kind-tab{
  background:transparent;border:1.5px solid var(--c-strawberry-soft);color:var(--c-text-soft);
  padding:.35em .9em;border-radius:999px;font-size:.78rem;cursor:pointer;
}
.kind-tab.active{background:var(--c-strawberry);color:#fff;border-color:var(--c-strawberry)}
#scribbleText{
  width:100%;border:1.5px solid var(--c-strawberry-soft);
  border-radius:12px;padding:.6em .8em;font-family:inherit;font-size:.95rem;
  resize:vertical;color:var(--c-text);
  margin-bottom:.6em;
}
#scribbleText:focus{outline:none;border-color:var(--c-strawberry)}
.stamp-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.4em;margin-bottom:.6em;
}
.stamp-btn{
  font-size:1.4rem;background:var(--c-cream);border:1.5px solid var(--c-line);
  border-radius:12px;padding:.5em 0;cursor:pointer;
  transition:transform .12s, background .15s, border-color .15s;
}
.stamp-btn:hover{background:var(--c-cream-warm);transform:scale(1.1)}
.stamp-btn.selected{background:var(--c-strawberry-soft);border-color:var(--c-strawberry)}
.color-row{display:flex;align-items:center;gap:.4em;margin-bottom:.8em;font-size:.85rem;color:var(--c-text-soft)}
.color-chip{
  width:24px;height:24px;border-radius:50%;border:2px solid #fff;cursor:pointer;
  box-shadow:0 0 0 1px var(--c-line);
}
.color-pink{background:var(--c-strawberry)}
.color-blue{background:var(--c-blue)}
.color-yellow{background:var(--c-yellow)}
.color-green{background:var(--c-green)}
.color-chip.active{box-shadow:0 0 0 2px var(--c-strawberry-deep)}
.form-actions{display:flex;justify-content:flex-end;gap:.5em}
.btn{
  background:var(--c-strawberry);color:#fff;border:none;
  padding:.55em 1.1em;border-radius:999px;
  font-size:.85rem;font-weight:600;cursor:pointer;
}
.btn.ghost{
  background:transparent;color:var(--c-text-soft);
  border:1.5px solid var(--c-line);
}
.btn:hover{background:var(--c-strawberry-deep)}

/* 落書きの壁（リビングのオーバーレイ） */
.scribble-wall{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}
.scribble-pin{
  position:absolute;
  pointer-events:auto;
  background:rgba(255,255,255,.95);
  border-radius:8px;
  padding:.35em .7em;
  font-size:.78rem;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  max-width:140px;
  word-break:break-all;
  line-height:1.4;
  opacity:0;
  transform:scale(.85);
  animation:peta-in .35s ease forwards;
  border-left:3px solid var(--c-strawberry);
}
.scribble-pin[data-color="pink"]   {background:#ffe0eb;border-left-color:var(--c-strawberry)}
.scribble-pin[data-color="blue"]   {background:#e0eef5;border-left-color:var(--c-blue)}
.scribble-pin[data-color="yellow"] {background:#fff7d8;border-left-color:var(--c-yellow)}
.scribble-pin[data-color="green"]  {background:#e8f0d8;border-left-color:var(--c-green)}
.scribble-pin.is-stamp{
  font-size:1.6rem;padding:.3em .6em;
  background:transparent;border-left:none;box-shadow:none;
}
.scribble-pin.is-chorocy{
  border:1.5px solid var(--c-gold);
  background:linear-gradient(135deg, #fff5dc 0%, #ffe0eb 100%);
}
@keyframes peta-in{
  to{opacity:.92;transform:scale(1)}
}

/* レスポンシブ */
@media (max-width: 720px){
  .krokochan-portrait{
    height:38vh;
    right:auto;
    left:50%;
    transform:translateX(-50%);
    bottom:auto; top:8vh;
  }
  .hangout-area{
    padding:48vh 4vw 4vh;
    align-items:flex-end;
  }
  .hangout{
    width:100%;max-width:none;
    padding:1.2rem 1.2rem;
  }
  .hangout-body{
    max-height:24vh;
    font-size:.92rem;
    line-height:1.85;
  }
  .area-nav{padding:.4em .4em;gap:.3em;justify-content:center}
  .area-card{padding:.4em .65em;font-size:.72rem}
  .card-icon{font-size:.95rem}
  .sister-bar{gap:.35em}
  .sister-link{padding:.3em .7em;font-size:.7rem}
}

/* PC向け：カードと立ち絵の衝突防止（グラ子ちゃん診断 2026-05-06） */
@media (min-width: 721px) {
  .krokochan-portrait {
    /* 高さは72vhを狙いつつ、横幅が画面の35%を超えないようにして衝突を防ぐ */
    max-width: 35vw;
    object-fit: contain;
    object-position: right bottom;
  }

  .hangout-area {
    /* 右側にキャラ用のスペース（約38vw）を確保し、カードが右に伸びすぎるのを防ぐ */
    padding-right: 38vw;
    /* flexの配置を左寄せに明示 */
    justify-content: flex-start;
  }
}