:root{
    --paper: #F7F1E3;
    --paper-deep: #EFE6CF;
    --indigo: #263A5C;
    --indigo-deep: #182642;
    --vermillion: #C1432E;
    --vermillion-deep: #9C3423;
    --gold: #C9A227;
    --mint: #4E9E8E;
    --ink: #2A2620;
    --ink-soft: #6B6455;
    --line: #D8CBA8;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
  html,body{margin:0;padding:0;}
  body{
    font-family: 'Zen Maru Gothic', sans-serif;
    background:
      radial-gradient(circle at 15% 8%, rgba(193,67,46,0.06), transparent 40%),
      radial-gradient(circle at 85% 92%, rgba(38,58,92,0.07), transparent 45%),
      var(--paper);
    color: var(--ink);
    min-height: 100vh;
    display:flex;
    justify-content:center;
    padding: 18px 12px 40px;
  }
  .app{ width:100%; max-width: 440px; }

  .brand{ text-align:center; margin-bottom: 14px; }
  .logo-wrap{ display:flex; justify-content:center; align-items:center; gap:10px; margin-bottom:4px;cursor: pointer;
text-decoration: none;
color: inherit;}
  .logo-mark{ width:34px; height:34px; flex-shrink:0; }
  .logo-text{
    font-family:'Shippori Mincho', serif;
    font-size: 30px; font-weight:700; color: var(--indigo-deep);
    letter-spacing: 0.03em; display:flex; align-items:baseline;
  }
  .logo-text .ora{ color: var(--indigo-deep); }
  .logo-text .machi{ color: var(--vermillion); margin-left:2px; }
  .brand p.tagline{ margin:0; font-size: 12.5px; color: var(--ink-soft); letter-spacing:0.02em; }
  .x-follow{
    display:inline-flex; align-items:center; gap:4px; margin-top:8px;
    font-size: 11px; color: var(--ink-soft); text-decoration:none;
    border: 1px solid var(--line); border-radius: 20px; padding: 4px 10px;
  }
  .x-follow:hover{ color: var(--indigo-deep); border-color: var(--indigo); }
  .brand .eyebrow{ font-size: 10.5px; letter-spacing: 0.3em; color: var(--mint); font-weight: 700; margin-bottom:2px; }

  .card{
    position:relative; background: #FFFDF6; border: 1px solid var(--line);
    border-radius: 22px; padding: 22px 20px 18px;
    box-shadow: 0 10px 30px rgba(38,58,92,0.10), 0 2px 6px rgba(38,58,92,0.06);
    overflow:hidden; min-height: 320px;
  }
  .card::before{
    content:""; position:absolute; inset:0;
    background-image: repeating-linear-gradient(135deg, rgba(38,58,92,0.02) 0 2px, transparent 2px 14px);
    pointer-events:none;
  }

  .stamps{ display:flex; gap:5px; justify-content:center; margin-bottom:14px; flex-wrap:wrap; }
  .stamp{
    width:18px; height:18px; border-radius:50%; border: 1.6px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:9px; color: transparent;
    transition: all .3s ease;
  }
  .stamp.filled{
    border-color: var(--vermillion); color: var(--vermillion);
    background: rgba(193,67,46,0.08); transform: scale(1.05) rotate(-8deg);
  }

  .stage{ text-align:center; }

  .mascot-wrap{ display:flex; justify-content:center; margin: 4px 0 10px; }
  .mascot{ width:132px; height:132px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(38,58,92,0.18)); }
  .bob{ animation: bob 3.2s ease-in-out infinite; }
  @keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
  .shake{ animation: shake .5s ease; }
  @keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
  .pop{ animation: pop .5s cubic-bezier(.34,1.56,.64,1); }
  @keyframes pop{ 0%{transform:scale(.7); opacity:0} 100%{transform:scale(1); opacity:1} }
  .blink{ animation: blink 4.5s ease-in-out infinite; transform-origin: center; }
  @keyframes blink{ 0%,92%,100%{transform:scaleY(1)} 96%{transform:scaleY(0.1)} }

  @media (prefers-reduced-motion: reduce){
    .bob, .shake, .pop, *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  }

  .bubble{
    position:relative; background: var(--indigo-deep); color: #FBF6E8;
    border-radius: 18px; padding: 14px 18px; font-size: 15.5px; line-height:1.55;
    min-height: 52px; display:flex; align-items:center; justify-content:center; margin-bottom: 18px;
  }
  .bubble::after{
    content:""; position:absolute; left:50%; bottom:-9px; transform:translateX(-50%);
    border-width: 10px 9px 0 9px; border-style: solid;
    border-color: var(--indigo-deep) transparent transparent transparent;
  }
  .bubble .icon{ font-size:18px; margin-right:8px; }
  .count-line{ font-size:12px; color: var(--ink-soft); margin-bottom: 14px; }
  .count-line b{ color:var(--vermillion-deep); font-weight:700; }

  .choices{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
  .btn{
    font-family:'Zen Maru Gothic', sans-serif; font-weight:700; font-size:16px;
    padding: 14px 10px; border-radius: 14px; border: none; cursor:pointer;
    transition: transform .12s ease, box-shadow .12s ease; letter-spacing: 0.02em;
  }
  .btn:active{ transform: scale(0.96); }
  .btn-yes{ background: var(--indigo); color:#FBF6E8; box-shadow: 0 4px 0 var(--indigo-deep); }
  .btn-yes:active{ box-shadow: 0 1px 0 var(--indigo-deep); }
  .btn-no{ background: var(--vermillion); color:#FFF7EE; box-shadow: 0 4px 0 var(--vermillion-deep); }
  .btn-no:active{ box-shadow: 0 1px 0 var(--vermillion-deep); }
  .btn-maybe-yes{
    background: #D9E6F2; color: var(--indigo-deep); font-size: 13px; padding: 11px 8px;
    box-shadow: 0 3px 0 #B7CBE0;
  }
  .btn-maybe-yes:active{ box-shadow: 0 1px 0 #B7CBE0; }
  .btn-maybe-no{
    background: #F5DEDA; color: var(--vermillion-deep); font-size: 13px; padding: 11px 8px;
    box-shadow: 0 3px 0 #E3BEB6;
  }
  .btn-maybe-no:active{ box-shadow: 0 1px 0 #E3BEB6; }
  .btn-unknown{
    grid-column: span 2; background: transparent; color: var(--ink-soft);
    border: 1.5px dashed var(--line); font-weight:500; font-size:13.5px; padding:10px;
  }

  .btn-back{
    display:block; width:100%; margin-top: 10px; padding: 10px;
    background: transparent; color: var(--ink-soft);
    border: none; font-family:'Zen Maru Gothic', sans-serif;
    font-weight:700; font-size: 12.5px; cursor:pointer;
    text-decoration: underline; text-underline-offset: 3px;
  }
  .btn-back:active{ opacity: 0.6; }

  .result-name{ font-family:'Shippori Mincho', serif; font-size: 30px; color: var(--indigo-deep); margin: 6px 0 0; }
  .result-pref{ font-size:13px; color: var(--ink-soft); margin-bottom:10px; }
  .hanko{
    display:inline-block; border: 2.5px solid var(--vermillion); color: var(--vermillion);
    border-radius: 8px; padding: 3px 10px; font-size: 12px; font-weight: 700;
    letter-spacing: 0.15em; transform: rotate(-6deg); margin-bottom: 10px;
  }
  .fact{
    background: var(--paper-deep); border-radius: 12px; padding: 12px 14px;
    font-size: 13px; color: var(--ink); text-align:left; line-height:1.6; margin-bottom: 12px;
  }
  .info-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; margin-bottom: 16px; }
  .info-chip{ background: #FFFDF6; border:1px solid var(--line); border-radius: 12px; padding: 8px 6px; text-align:center; }
  .info-chip .label{ font-size:9.5px; color: var(--mint); font-weight:700; letter-spacing:0.05em; }
  .info-chip .value{ font-size:11.5px; color: var(--ink); margin-top:3px; line-height:1.35; word-break: break-word; }

  .share-card{
    position:relative; text-align:center;
    border: 2px solid var(--indigo); border-radius: 18px;
    padding: 16px 16px 14px; margin-bottom: 14px;
    background: linear-gradient(180deg, rgba(38,58,92,0.04), transparent 45%), #FFFDF6;
  }
  .share-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 2px; }
  .share-eyebrow{ font-size:10.5px; letter-spacing:0.25em; color: var(--mint); font-weight:700; }
  .share-mascot{ width:56px; height:56px; }
  .share-mascot .mascot{ width:56px; height:56px; }
  .share-card .hanko{ margin-top: -4px; }
  .result-line{ font-size: 13.5px; color: var(--ink); margin-bottom: 10px; }
  .result-line b{ color: var(--vermillion-deep); font-weight:700; }

  .stars-block{
    background: var(--paper-deep); border-radius: 12px;
    padding: 10px 14px; margin-bottom: 12px; text-align:left;
  }
  .star-row{ display:flex; align-items:center; justify-content:space-between; font-size:13px; padding: 3px 0; }
  .star-label{ color: var(--ink-soft); font-weight:500; }
  .star-value{ color: var(--gold); letter-spacing: 2px; font-size:14px; }

  .share-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding: 13px; border-radius: 14px; border:none;
    background:#0F1419; color:#fff;
    font-family:'Zen Maru Gothic', sans-serif; font-weight:700; font-size:14.5px;
    cursor:pointer; margin-bottom: 10px;
  }
  .share-btn:active{ transform: scale(0.98); }
  .x-icon{ flex-shrink:0; }

  /* ---- 地元バレポイント ---- */
  .barepoints-block{
    text-align:left; background: rgba(193,67,46,0.07); border: 1.5px solid rgba(193,67,46,0.25);
    border-radius: 12px; padding: 12px 14px; margin-top: 10px;
  }
  .barepoints-title{ font-size: 12.5px; font-weight:700; color: var(--vermillion-deep); margin-bottom: 6px; }
  .barepoints-list{ margin:0; padding-left: 18px; font-size: 13px; color: var(--ink); line-height:1.7; }

  /* ---- 結果画面: 制覇帳ライン・アクション整理 ---- */
  .conquest-line{
    text-align:center; font-size: 13px; font-weight:700; color: var(--indigo-deep);
    background: var(--paper-deep); border-radius: 10px; padding: 8px 10px; margin: 10px 0;
  }
  .result-actions-primary{ margin-top: 6px; }
  .share-btn-image{ background: var(--vermillion); }
  .result-actions-secondary{
    display:flex; flex-direction:column; gap:6px; margin-top: 12px;
  }
  .share-btn-text{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding: 10px; border-radius: 12px; border:1.5px solid var(--line);
    background:#fff; color: var(--ink);
    font-family:'Zen Maru Gothic', sans-serif; font-weight:700; font-size:13px; cursor:pointer;
  }
  .link-btn{
    width:100%; padding: 9px; border-radius: 10px; border:none; background:transparent;
    color: var(--indigo); font-family:'Zen Maru Gothic', sans-serif; font-weight:700; font-size:13px;
    cursor:pointer; text-decoration: underline;
  }
  .link-btn-subtle{
    width:100%; padding: 6px; border-radius: 10px; border:none; background:transparent;
    color: var(--ink-soft); font-family:'Zen Maru Gothic', sans-serif; font-size:11.5px;
    cursor:pointer; text-decoration: underline;
  }
  .share-image-status{ text-align:center; font-size: 11.5px; color: var(--ink-soft); min-height: 14px; margin-top: 6px; }

  /* ---- トップ画面: 制覇帳への入口 ---- */
  .conquest-entry-btn{
    display:block; width:100%; margin: 14px 0 4px; padding: 11px; border-radius: 12px;
    border: 1.5px solid var(--line); background: #fff; color: var(--indigo-deep);
    font-family:'Zen Maru Gothic', sans-serif; font-weight:700; font-size:13.5px; cursor:pointer;
  }
  .conquest-entry-btn:active{ transform: scale(0.98); }

  /* ---- 全国制覇帳 画面 ---- */
  .conquest-summary{ background: var(--paper-deep); border-radius: 12px; padding: 12px 14px; margin: 10px 0 6px; text-align:center; }
  .conquest-summary-main{ font-size: 16px; font-weight:700; color: var(--indigo-deep); }
  .conquest-hint{ font-size: 10.5px; color: var(--ink-soft); margin-top: 4px; line-height:1.5; }
  .conquest-section-title{ font-size: 12.5px; font-weight:700; color: var(--ink); margin: 14px 0 6px; text-align:left; }
  .conquest-special-block{ text-align:left; background: rgba(38,58,92,0.06); border-radius: 12px; padding: 10px 12px; margin: 0 0 8px; }
  .conquest-special-block .conquest-section-title{ margin-top: 0; }
  .conquest-special-row{ font-size: 13px; font-weight:700; color: var(--indigo-deep); }
  .conquest-muted{ color: var(--ink-soft); font-weight:400; }
  .conquest-region-list{ text-align:left; }
  .conquest-region-row{ margin-bottom: 8px; }
  .conquest-region-head{ display:flex; justify-content:space-between; font-size: 12.5px; color: var(--ink); margin-bottom:3px; }
  .conquest-region-bar{ height: 8px; background: var(--paper-deep); border-radius: 6px; overflow:hidden; }
  .conquest-region-bar-fill{ height:100%; background: var(--mint); border-radius: 6px; }
  .conquest-details{ text-align:left; margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background:#fff; }
  .conquest-details summary{ font-size: 12.5px; font-weight:700; color: var(--indigo); cursor:pointer; }
  .conquest-pref-list, .conquest-city-list{ margin-top: 8px; max-height: 260px; overflow:auto; }
  .conquest-pref-row{ display:flex; justify-content:space-between; font-size: 12px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
  .conquest-city-row{ font-size: 12px; padding: 4px 0; border-bottom: 1px dashed var(--line); }

  /* ---- 設定欄 ---- */
  .settings-block{ text-align:left; margin-top: 8px; }
  .settings-toggle-row{ display:flex; align-items:center; gap:8px; font-size: 13px; color: var(--ink); }
  .settings-hint{ font-size: 10.5px; color: var(--ink-soft); line-height:1.6; margin: 6px 0 10px; }
  .settings-hint a{ color: var(--indigo); }
  .danger-btn{
    display:block; width:100%; padding: 9px; border-radius: 10px; border: 1.5px solid var(--vermillion);
    background: transparent; color: var(--vermillion-deep);
    font-family:'Zen Maru Gothic', sans-serif; font-weight:700; font-size:12.5px; cursor:pointer;
  }

  .correction-form{
    text-align:left; background: var(--paper-deep); border-radius: 14px;
    padding: 14px 14px 12px; margin-bottom: 12px;
  }
  .correction-label{ font-size: 13.5px; font-weight:700; color: var(--ink); margin-bottom: 10px; }
  .correction-select, .correction-input{
    display:block; width:100%; box-sizing:border-box;
    font-family:'Zen Maru Gothic', sans-serif; font-size: 14px; color: var(--ink);
    background:#FFFDF6; border: 1.5px solid var(--line); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 8px;
  }
  .correction-select:focus, .correction-input:focus{
    outline:none; border-color: var(--indigo);
  }
  .correction-error{ font-size: 12px; color: var(--vermillion-deep); min-height: 16px; margin-bottom: 4px; }
  .btn-teach{
    display:block; width:100%; padding: 12px; border-radius: 12px; border:none;
    background: var(--indigo); color:#FBF6E8;
    font-family:'Zen Maru Gothic', sans-serif; font-weight:700; font-size:14.5px;
    cursor:pointer; box-shadow: 0 4px 0 var(--indigo-deep);
  }
  .btn-teach:active{ transform: scale(0.98); box-shadow: 0 1px 0 var(--indigo-deep); }

  .again{
    display:block; width:100%; margin-top: 10px; padding: 13px; border-radius: 14px;
    border: 1.5px solid var(--indigo); background: transparent; color: var(--indigo-deep);
    font-family:'Zen Maru Gothic', sans-serif; font-weight:700; font-size: 14.5px; cursor:pointer;
  }
  .again:active{ transform: scale(0.98); }

  .foot{ text-align:center; font-size: 10.5px; color: var(--ink-soft); margin-top: 16px; opacity: 0.8; }

  .app{ position: relative; display:flex; flex-direction:column; }
  .install-btn{
    align-self: flex-end;
    display:flex; align-items:center; gap:5px;
    background: transparent; color: var(--indigo);
    border: 1.5px solid var(--indigo); border-radius: 10px;
    padding: 6px 11px;
    font-family:'Zen Maru Gothic', sans-serif; font-weight:700; font-size: 12.5px;
    cursor:pointer;
    margin-bottom: 10px;
  }
  .install-btn:active{ transform: scale(0.97); background: rgba(38,58,92,0.06); }
  .install-btn .install-icon{ font-size: 14px; line-height:1; }

  .install-tip{
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
    max-width: 320px; width: calc(100% - 40px);
    background: var(--indigo-deep); color:#FBF6E8;
    border-radius: 14px; padding: 14px 16px;
    font-size: 12.5px; line-height:1.6;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    z-index: 20;
  }
  .install-tip .tip-icon{ margin: 0 2px; }
  .install-tip button{
    display:block; margin: 10px auto 0; background: transparent;
    border: 1.5px solid rgba(251,246,232,0.5); color:#FBF6E8;
    border-radius: 10px; padding: 6px 14px; font-size: 12px;
    font-family:'Zen Maru Gothic', sans-serif; font-weight:700; cursor:pointer;
  }

  .site-footer{
    text-align:center; margin-top: 22px; padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 11px; color: var(--ink-soft);
  }
  .site-footer a{ color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
  .site-footer a:hover{ color: var(--indigo-deep); }
  .site-footer .dot{ margin: 0 6px; opacity: 0.6; }

  .page-article{ text-align:left; }
  .page-article h2{
    font-family:'Shippori Mincho', serif;
    font-size: 15.5px; color: var(--indigo-deep);
    margin: 20px 0 8px;
  }
  .page-article h2:first-child{ margin-top: 4px; }
  .page-article p{
    font-size: 13px; line-height: 1.8; color: var(--ink); margin: 0 0 4px;
  }
  .page-article ul{
    margin: 0 0 8px; padding-left: 20px; font-size: 13px; line-height: 1.8; color: var(--ink);
  }
  .page-article li{ margin-bottom: 2px; }
  .page-article code{
    background: var(--paper-deep); border-radius: 4px; padding: 1px 5px; font-size: 12px;
  }
  .page-article .back-link{
    display: inline-block; margin-top: 22px;
    font-size: 13px; font-weight: 700; color: var(--indigo-deep);
    text-decoration: none; border-bottom: 1.5px solid var(--indigo-deep);
  }
  .page-article .x-link{
    color: var(--vermillion-deep); font-weight: 700;
    text-decoration: underline; text-underline-offset: 2px;
  }
  .loading-text{ font-size: 13px; color: var(--ink-soft); margin-top: 14px; }
  .error-text{ font-size: 13px; color: var(--vermillion-deep); padding: 20px 6px; line-height:1.7; }

  @media (max-width: 360px){
    .logo-text{ font-size: 26px; }
    .mascot{ width:108px; height:108px; }
    .bubble{ font-size: 14px; padding: 12px 14px; }
    .btn{ font-size: 14.5px; padding: 12px 8px; }
    .result-name{ font-size: 26px; }
    .card{ padding: 18px 14px 16px; }
    .info-chip .value{ font-size:10.5px; }
    .share-mascot, .share-mascot .mascot{ width:44px; height:44px; }
    .star-row{ font-size:12px; }
  }
  @media (min-width: 700px){
    body{ padding-top: 48px; }
    .app{ max-width: 480px; }
    .card{ padding: 30px 30px 24px; border-radius: 26px; }
    .mascot{ width:154px; height:154px; }
    .bubble{ font-size: 17px; padding: 16px 20px; }
    .btn{ font-size: 17px; padding: 16px 12px; }
  }
  @media (hover:hover){
    .btn:hover{ filter: brightness(1.06); }
    .again:hover{ background: rgba(38,58,92,0.06); }
    .share-btn:hover{ background:#000; filter: brightness(1.3); }
    .btn-teach:hover{ filter: brightness(1.08); }
  }
.mode-select{
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.mode-btn{
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 15px 14px;
  background: #FFFDF6;
  color: var(--ink);
  font-family: 'Zen Maru Gothic', sans-serif;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(38,58,92,0.12);
}

.mode-btn:active{
  transform: scale(0.98);
  box-shadow: 0 1px 0 rgba(38,58,92,0.12);
}

.mode-niigata{
  border-color: var(--vermillion);
  background:
    radial-gradient(circle at top right, rgba(193,67,46,0.10), transparent 45%),
    #FFFDF6;
}

.mode-tokyo{
  border-color: var(--mint);
  background:
    radial-gradient(circle at top right, rgba(78,158,142,0.12), transparent 45%),
    #FFFDF6;
}

.mode-title{
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: var(--indigo-deep);
  margin-bottom: 4px;
}

.mode-niigata .mode-title{
  color: var(--vermillion);
}

.mode-tokyo .mode-title{
  color: var(--mint);
}

.mode-desc{
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.mode-note{
  display: block;
  font-size: 10px;
  color: var(--ink-soft);
  opacity: 0.75;
  line-height: 1.5;
  margin-top: 4px;
}

.mode-count{
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--mint);
}

/* ---- 地方版 ---- */
.mode-sub-head{
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 900;
  color: var(--indigo-deep);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mode-sub-head::before,
.mode-sub-head::after{
  content: "";
  flex: 1;
  height: 1.5px;
  background: var(--line);
  border-radius: 2px;
}

.mode-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mode-btn-small{
  padding: 11px 12px;
  border-radius: 13px;
}

.mode-btn-small .mode-title{
  font-size: 14.5px;
  margin-bottom: 2px;
}

.mode-btn-small .mode-count{
  margin-top: 2px;
  font-size: 10px;
  color: var(--ink-soft);
}

.stats-block-top{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  text-align: center;
}
.count-stats{
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.count-stats b{ color: var(--vermillion-deep); font-weight: 700; }
.recent-line{
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}