:root{
    --coral:#ff5f5f;
    --coral-2:#ff8a65;
    --coral-dark:#e14b4b;
    --coral-soft:#ffe4de;
    --yin-1:#ffd9c9;
    --yin-2:#ffb199;
    --gold:#ffb703;
    --gold-soft:#fff3d6;
    --purple:#8b7cf6;
    --purple-soft:#ece4ff;
    --green:#2fae60;
    --blue:#3b6ea5;
    --blue-bg:#eaf4ff;
    --blue-border:#cfe6ff;
    --ink:#3a2e2e;
    --ink-dim:#a9998e;
    --card-bg:#ffffff;
    --nest-bg:#fff8f3;
    --nest-border:#ffe1d0;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;}
  body{
    margin:0;
    min-height:100vh;
    min-height:100dvh;
    background:
      radial-gradient(ellipse 900px 500px at 50% -8%, #ffd9c2 0%, transparent 60%),
      radial-gradient(ellipse 700px 500px at 90% 90%, #ffe9d6 0%, transparent 55%),
      linear-gradient(180deg, #fff1e2 0%, #fff8ef 45%, #fffdf9 100%);
    color:var(--ink);
    font-family:'M PLUS Rounded 1c','Hiragino Maru Gothic ProN', sans-serif;
    display:flex;
    justify-content:center;
    overflow-x:hidden;
  }
  #root{
    width:100%;
    max-width:520px;
    min-height:100vh;
    min-height:100dvh;
    padding: max(22px, env(safe-area-inset-top)) 18px max(30px, env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .top-tags{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:700;
    color:#5b9bdb;
    margin-bottom:10px;
  }
  .top-tags .sep{ color:#e2b8ce; font-weight:400; }
  .header{
    text-align:center;
    margin-bottom:14px;
  }
  .header h1{
    font-family:'M PLUS Rounded 1c', sans-serif;
    font-weight:900;
    font-size:26px;
    letter-spacing:0.02em;
    white-space:nowrap;
    margin:0 0 6px;
    background: linear-gradient(135deg, #ff8a65 0%, #ff5f5f 55%, #ff3d7a 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter: drop-shadow(0 3px 0 rgba(255,95,91,0.16));
  }
  .header .sub{
    margin:0;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.24em;
    color:#c99a7e;
  }
  .header .desc{
    margin:8px 0 0;
    font-size:12.5px;
    color:var(--ink-dim);
    line-height:1.7;
  }
  .badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background: linear-gradient(135deg, #35c07a, var(--green));
    color:#fff;
    font-weight:800;
    font-size:12.5px;
    padding:9px 20px;
    border-radius:999px;
    box-shadow:0 8px 18px rgba(47,174,96,0.32);
    margin: 14px 0 18px;
  }
  .main-card{
    width:100%;
    background:var(--card-bg);
    border-radius:28px;
    padding:24px 20px 22px;
    box-shadow:0 20px 45px rgba(255,111,94,0.16), 0 2px 6px rgba(255,111,94,0.08);
    position:relative;
  }
  .section-header{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:16px;
  }
  .section-header .dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background: var(--coral);
    flex-shrink:0;
    box-shadow:0 0 0 4px var(--coral-soft);
  }
  .section-header .label{
    font-weight:800;
    font-size:14px;
    color:var(--ink);
    white-space:nowrap;
  }
  .section-header .rule{
    flex:1;
    height:2px;
    border-radius:2px;
    background: repeating-linear-gradient(90deg, #ffcdb8 0 6px, transparent 6px 11px);
  }
  .gua-status{
    font-size:13px;
    font-weight:700;
    color:var(--ink-dim);
    margin-bottom:16px;
    min-height:16px;
    text-align:center;
  }
  .gua-status .count{
    color:var(--coral);
    font-weight:800;
  }
  .lines-well{
    width:100%;
    display:flex;
    flex-direction:column-reverse;
    gap:10px;
    margin-bottom:22px;
  }
  .yao-slot{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:26px;
  }
  .yao-slot .yao-index{
    flex:0 0 36px;
    font-size:11px;
    font-weight:800;
    color:var(--ink-dim);
    text-align:right;
  }
  .yao-empty{
    flex:1;
    height:18px;
    border-radius:10px;
    border:2px dashed #ffd9c9;
    background:#fff9f4;
  }
  .yao-bar{
    flex:1;
    display:flex;
    height:22px;
    gap:8%;
    min-width:0;
  }
  .yao-bar .seg{
    border-radius:11px;
    background: linear-gradient(135deg, var(--coral-2), var(--coral));
    box-shadow:0 4px 10px rgba(255,95,91,0.35), inset 0 1px 0 rgba(255,255,255,0.45);
  }
  .yao-bar.yang .seg{ width:100%; }
  .yao-bar.yin .seg{
    width:46%;
    background: linear-gradient(135deg, var(--yin-1), var(--yin-2));
    box-shadow:0 4px 10px rgba(255,177,153,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
  }
  .yao-bar.appear{
    animation: riseIn 0.5s cubic-bezier(.2,.8,.3,1.3) both;
  }
  @keyframes riseIn{
    0%{ opacity:0; transform: translateY(16px) scale(0.8); }
    60%{ opacity:1; }
    100%{ opacity:1; transform: translateY(0) scale(1); }
  }
  .yao-bar.special .seg{
    background: linear-gradient(135deg, #ffe08a, var(--gold));
    box-shadow:0 4px 12px rgba(255,183,3,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
  }
  .yao-bar.flipped-future .seg{
    background: linear-gradient(135deg, #c9b8ff, var(--purple));
    box-shadow:0 4px 12px rgba(139,124,246,0.45), inset 0 1px 0 rgba(255,255,255,0.5);
  }
  .special-tag{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:3px;
    background: var(--gold-soft);
    color:#a97400;
    font-size:10px;
    font-weight:800;
    padding:4px 9px;
    border-radius:999px;
    white-space:nowrap;
    opacity:0;
    animation: fadeInTag 0.5s ease 0.25s forwards;
  }
  @keyframes fadeInTag{ to{ opacity:1; } }

  .tap-button{
    width:100%;
    padding:18px 10px;
    border-radius:999px;
    border:none;
    background: linear-gradient(135deg, var(--coral-2), var(--coral));
    color:#fff;
    font-family:'M PLUS Rounded 1c', sans-serif;
    font-weight:800;
    font-size:17px;
    letter-spacing:0.04em;
    cursor:pointer;
    box-shadow:0 12px 26px rgba(255,95,91,0.4), inset 0 1px 0 rgba(255,255,255,0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }
  .tap-button:active{
    transform: scale(0.96);
    box-shadow:0 6px 14px rgba(255,95,91,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
  }
  .settling{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding:14px 0 4px;
    animation: fadeInTag 0.4s ease both;
  }
  .coin{
    font-size:44px;
    animation: bounceCoin 0.9s ease-in-out infinite;
    filter: drop-shadow(0 6px 10px rgba(255,183,3,0.35));
  }
  @keyframes bounceCoin{
    0%,100%{ transform: translateY(0) rotate(-8deg); }
    50%{ transform: translateY(-14px) rotate(8deg); }
  }
  .settling p{
    font-size:13px;
    font-weight:700;
    letter-spacing:0.08em;
    color:var(--ink-dim);
  }

  .result{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:14px;
    opacity:0;
    animation: fadeUp 0.8s ease forwards;
  }
  @keyframes fadeUp{
    0%{ opacity:0; transform:translateY(12px); }
    100%{ opacity:1; transform:translateY(0); }
  }
  .card{
    background:var(--nest-bg);
    border:1px solid var(--nest-border);
    border-radius:20px;
    padding:18px 16px 16px;
  }
  .card-label{
    display:inline-block;
    font-size:11px;
    font-weight:800;
    letter-spacing:0.04em;
    padding:5px 12px;
    border-radius:999px;
    margin-bottom:12px;
  }
  .card-label.now{ background:var(--coral-soft); color:var(--coral-dark); }
  .card-label.future{ background:var(--purple-soft); color:#6a56e0; }
  .card-desc{
    font-size:11.5px;
    color:var(--ink-dim);
    line-height:1.7;
    margin:0 0 13px;
  }
  .gua-title-row{
    display:flex;
    align-items:baseline;
    gap:10px;
    margin-bottom:14px;
    flex-wrap:wrap;
  }
  .gua-number{
    font-size:11.5px;
    font-weight:700;
    color:var(--coral);
    background:#fff;
    border:1.5px solid #ffd9c9;
    border-radius:999px;
    padding:3px 10px;
  }
  .gua-name{
    font-family:'M PLUS Rounded 1c', sans-serif;
    font-size:23px;
    font-weight:800;
    color:var(--ink);
  }
  .gua-body{
    display:flex;
    gap:16px;
    align-items:center;
  }
  .mini-lines{
    display:flex;
    flex-direction:column-reverse;
    gap:6px;
    width:112px;
    flex-shrink:0;
  }
  .mini-yao{
    height:9px;
    display:flex;
    gap:9%;
  }
  .mini-yao .seg{
    border-radius:5px;
    background: linear-gradient(135deg, var(--coral-2), var(--coral));
  }
  .mini-yao.yang .seg{ width:100%; }
  .mini-yao.yin .seg{
    width:46%;
    background: linear-gradient(135deg, var(--yin-1), var(--yin-2));
  }
  .mini-yao.special .seg{ background: linear-gradient(135deg, #ffe08a, var(--gold)); }
  .mini-yao.flip .seg{ background: linear-gradient(135deg, #c9b8ff, var(--purple)); }
  .trigram-note{
    font-size:12.5px;
    color:#8a7268;
    line-height:2;
  }
  .trigram-note b{
    color:var(--ink);
    font-weight:800;
  }
  .your-yao{
    text-align:center;
    background: linear-gradient(135deg, #fff1e0, var(--coral-soft));
    border:1px solid #ffd2c4;
    border-radius:20px;
    padding:20px 16px;
  }
  .your-yao .card-label{ background:rgba(255,255,255,0.7); color:var(--coral-dark); }
  .your-yao .big{
    font-family:'M PLUS Rounded 1c', sans-serif;
    font-size:32px;
    font-weight:900;
    color:var(--coral-dark);
  }
  .your-yao .sub{
    font-size:12px;
    font-weight:700;
    color:#a97a63;
    margin-top:6px;
  }
  .change-arrow{
    text-align:center;
    font-size:22px;
    color:var(--gold);
    margin: -4px 0;
  }
  .reset-button{
    width:100%;
    padding:16px 10px;
    border-radius:999px;
    border:2.5px solid var(--coral-2);
    background:#fff;
    color:var(--coral-dark);
    font-family:'M PLUS Rounded 1c', sans-serif;
    font-weight:800;
    font-size:14.5px;
    letter-spacing:0.04em;
    cursor:pointer;
    box-shadow:0 6px 14px rgba(255,138,101,0.18);
  }
  .reset-button:active{
    background:#fff1ea;
    transform:scale(0.98);
  }
  .guide-box{
    background:var(--blue-bg);
    border:1px solid var(--blue-border);
    border-radius:16px;
    padding:14px 16px;
    color:var(--blue);
  }
  .guide-box summary{
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    list-style:none;
  }
  .guide-box summary::-webkit-details-marker{ display:none; }
  .guide-box summary::before{ content:"▸ "; }
  .guide-box[open] summary::before{ content:"▾ "; }
  .guide-box p{
    font-size:12px;
    line-height:1.85;
    margin:10px 0 0;
  }
  .guide-box b{ color:var(--ink); }
  .yao-note{
    margin-top:10px;
    padding-top:10px;
    border-top:1px dashed #ffcdb8;
    color:var(--coral-dark) !important;
  }
  .trend-box{
    background: linear-gradient(135deg, #fff8e5, var(--gold-soft));
    border:1px solid #ffe1a0;
    border-radius:16px;
    padding:14px 16px;
  }
  .trend-head{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:13px;
    font-weight:800;
    color:#a97400;
  }
  .trend-icon{ font-size:16px; }
  .trend-box p{
    font-size:12px;
    line-height:1.8;
    color:#7a5a2e;
    margin:8px 0 0;
  }
  .footer-note{
    font-size:11.5px;
    color:var(--blue);
    background:var(--blue-bg);
    border:1px solid var(--blue-border);
    border-radius:14px;
    padding:12px 14px;
    line-height:1.8;
    text-align:left;
  }

  .cta-box{
    display:block;
    background: linear-gradient(135deg, #fff1e0, var(--purple-soft));
    border:1.5px solid #d8cbff;
    border-radius:18px;
    padding:16px 16px 14px;
    text-decoration:none;
    color:inherit;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    box-shadow:0 8px 18px rgba(139,124,246,0.14);
  }
  .cta-box:active{
    transform:scale(0.98);
  }
  .cta-label{
    font-size:13px;
    font-weight:800;
    color:#6a56e0;
    margin-bottom:6px;
  }
  .cta-box p{
    font-size:12px;
    line-height:1.75;
    color:#6b5f8a;
    margin:0 0 12px;
  }
  .cta-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    font-weight:800;
    color:#fff;
    background: linear-gradient(135deg, var(--purple), #6a56e0);
    padding:9px 18px;
    border-radius:999px;
    box-shadow:0 6px 14px rgba(139,124,246,0.35);
  }
  .cta-arrow{
    transition: transform 0.15s ease;
  }
  .cta-box:hover .cta-arrow{
    transform:translateX(3px);
  }

  .scroll-top-button{
    position:fixed;
    right:20px;
    bottom:max(20px, env(safe-area-inset-bottom));
    width:48px;
    height:48px;
    border-radius:50%;
    border:none;
    background: linear-gradient(135deg, var(--coral-2), var(--coral));
    color:#fff;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 22px rgba(255,95,91,0.4);
    cursor:pointer;
    z-index:20;
    opacity:0;
    transform:translateY(12px) scale(0.85);
    pointer-events:none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .scroll-top-button.visible{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }
  .scroll-top-button:active{
    transform:scale(0.92);
  }

  .genre-select-wrap{
    width:100%;
    margin-bottom:18px;
  }
  .genre-select{
    width:100%;
    appearance:none;
    -webkit-appearance:none;
    font-family:'M PLUS Rounded 1c', sans-serif;
    font-weight:800;
    font-size:16px;
    color:var(--ink);
    background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ff5f5f" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 18px center;
    background-size:18px;
    border:2.5px solid #ffd9c9;
    border-radius:18px;
    padding:16px 44px 16px 18px;
    box-shadow:0 6px 16px rgba(255,150,120,0.12);
  }
  .genre-select:focus{
    outline:none;
    border-color:var(--coral);
  }
  .genre-hint{
    font-size:12px;
    color:var(--ink-dim);
    text-align:center;
    margin: 10px 0 18px;
    line-height:1.7;
  }
  .genre-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--purple-soft);
    color:#6a56e0;
    font-weight:800;
    font-size:12px;
    padding:7px 16px;
    border-radius:999px;
    margin: -6px auto 16px;
  }
  .genre-chip-wrap{
    width:100%;
    text-align:center;
  }
  .fortune-badge{
    font-size:11px;
    font-weight:800;
    padding:3px 11px;
    border-radius:999px;
  }
  .fortune-badge.level-5{ background:#e3f9ea; color:#1f9d55; }
  .fortune-badge.level-4{ background:#eaf7ee; color:#2fae60; }
  .fortune-badge.level-3{ background:#fff6e0; color:#b8860b; }
  .fortune-badge.level-2{ background:#ffe9df; color:#e0703a; }
  .fortune-badge.level-1{ background:#ffe1e1; color:#e14b4b; }
  .advice-box{
    margin-top:14px;
    padding:13px 14px;
    border-radius:14px;
    background:#fff;
    border:1.5px dashed var(--coral-2);
    font-size:12.5px;
    line-height:1.85;
    color:#6b4a3a;
  }
  .advice-box.future{
    border-color: var(--purple);
    color:#584a8a;
  }
  .advice-box b{
    color:var(--ink);
  }