:root {
      --gold: #c9a84c;
      --gold-light: #f0d080;
      --gold-dark: #8b6914;
      --text-light: #e8d5a0;
      --text-dim: #7a6535;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      min-height: 100%;
      background: #080604;
      color: var(--text-light);
      font-family: 'Georgia', 'Times New Roman', serif;
    }
    body {
      background-image:
        radial-gradient(ellipse at 20% 50%, rgba(139,25,25,0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(91,75,181,0.06) 0%, transparent 60%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c9a84c' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
    }
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #080604; }
    ::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 3px; }

    #app { min-height: 100vh; display: flex; flex-direction: column; }
    .screen { display: none; flex-direction: column; flex: 1; }
    .screen.active { display: flex; }

    .panel {
      background: linear-gradient(135deg, #1a1408 0%, #12100a 50%, #1a1408 100%);
      border: 1px solid var(--gold-dark);
      box-shadow: 0 0 0 1px rgba(201,168,76,0.07), inset 0 1px 0 rgba(201,168,76,0.07), 0 8px 32px rgba(0,0,0,0.9);
    }

    /* Header */
    .page-header { text-align: center; padding: 28px 16px 12px; }
    .hdr-rule { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
    .hdr-line  { height:1px; width:80px; background: linear-gradient(90deg,transparent,#8b6914); }
    .hdr-line.r{ background: linear-gradient(90deg,#8b6914,transparent); }
    .hdr-lbl { color:var(--gold); font-size:10px; letter-spacing:.25em; }
    .main-title {
      font-size: clamp(1.8rem,5vw,2.8rem); font-weight:900; letter-spacing:.08em; line-height:1.15;
      background: linear-gradient(180deg,#f0d080 0%,#c9a84c 50%,#8b6914 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      animation: glow 3s ease-in-out infinite;
    }
    .hdr-gems { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:6px; }
    .hdr-gem-l { height:1px; width:40px; background:linear-gradient(90deg,transparent,#8b6914); }
    .hdr-gem-r { height:1px; width:40px; background:linear-gradient(90deg,#8b6914,transparent); }

    /* Divider */
    .divider { height:1px; background:linear-gradient(90deg,transparent,#8b6914,#c9a84c,#8b6914,transparent); margin:16px 0; position:relative; }
    .divider::before { content:'✦'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#12100a; color:var(--gold); padding:0 8px; font-size:10px; }

    /* Gem */
    .gem { width:8px; height:8px; background:var(--gold); transform:rotate(45deg); display:inline-block; box-shadow:0 0 6px var(--gold); flex-shrink:0; }
    .gem.sm { width:5px; height:5px; }
    .gem.green  { background:#2ecc71; box-shadow:0 0 6px #2ecc71; }
    .gem.orange { background:#e67e22; box-shadow:0 0 6px #e67e22; }

    .sec-lbl { font-size:.68rem; letter-spacing:.18em; color:var(--gold); text-transform:uppercase; }

    /* Buttons */
    .btn {
      font-family:'Georgia',serif; background:linear-gradient(180deg,#2a1f0a,#1a1408);
      border:1px solid var(--gold-dark); color:var(--text-light); cursor:pointer;
      transition:all .2s; letter-spacing:.06em; font-size:.85rem;
    }
    .btn:hover { border-color:var(--gold); color:var(--gold-light); box-shadow:0 0 14px rgba(201,168,76,.3); }
    .btn:active { transform:scale(.98); }
    .btn-gold { background:linear-gradient(180deg,#3a2a0e,#1a1408); border-color:var(--gold); color:var(--gold-light); font-weight:700; letter-spacing:.12em; }
    .btn-gold:hover { background:linear-gradient(180deg,#4a3518,#2a1f0a); box-shadow:0 0 22px rgba(201,168,76,.5); }
    .btn-gold:disabled { opacity:.3; cursor:not-allowed; border-color:var(--gold-dark); }
    .btn-red { border-color:#8b1a1a; color:#e09090; }
    .btn-red:hover { border-color:#c0392b; box-shadow:0 0 12px rgba(192,57,43,.4); }

    input[type="text"] {
      background:#0d0b07; border:1px solid var(--gold-dark); color:var(--text-light);
      font-family:'Georgia',serif; outline:none; transition:border-color .2s, box-shadow .2s; font-size:1rem;
    }
    input[type="text"]:focus { border-color:var(--gold); box-shadow:0 0 12px rgba(201,168,76,.2); }
    input[type="text"]::placeholder { color:var(--text-dim); }

    /* Progress */
    .prog-bar { display:flex; gap:4px; margin-bottom:8px; }
    .prog-seg { height:4px; flex:1; background:#1a1408; border:1px solid #2a1f0a; border-radius:1px; transition:all .3s; }
    .prog-seg.done { background:var(--gold-dark); border-color:var(--gold); }
    .prog-seg.cur  { background:linear-gradient(90deg,var(--gold-dark),var(--gold)); border-color:var(--gold-light); box-shadow:0 0 8px var(--gold); }

    /* Options */
    .opt-card {
      background:linear-gradient(135deg,#1a1408,#12100a); border:1px solid var(--gold-dark);
      color:var(--text-light); cursor:pointer; text-align:left; width:100%;
      padding:12px 16px 12px 20px; font-family:'Georgia',serif; font-size:.88rem;
      line-height:1.65; letter-spacing:.02em; transition:all .2s; position:relative; overflow:hidden;
      border-radius:1px; margin-bottom:8px;
    }
    .opt-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold-dark); transition:all .2s; }
    .opt-card:hover { border-color:var(--gold); color:var(--gold-light); box-shadow:0 0 16px rgba(201,168,76,.2); background:#221a08; }
    .opt-card:hover::before { background:var(--gold); box-shadow:0 0 8px var(--gold); }
    .opt-card:active { transform:scale(.99); }
    .opt-ltr { color:var(--gold); font-size:.72rem; margin-right:10px; }

    /* Select cards */
    .sel-card { background:#0d0b07; border:1px solid #2a1f0a; cursor:pointer; padding:10px 14px; width:100%; text-align:left; font-family:'Georgia',serif; transition:all .2s; border-radius:1px; margin-bottom:6px; }
    .sel-card:hover { border-color:var(--gold-dark); background:#14110a; }
    .sel-card.sel-skill { background:rgba(46,204,113,.08); border-color:#2ecc71; box-shadow:0 0 10px rgba(46,204,113,.15); }
    .sel-card.sel-gear  { background:rgba(230,126,34,.08); border-color:#e67e22; box-shadow:0 0 10px rgba(230,126,34,.15); }
    .sel-name { font-size:.83rem; color:var(--text-light); transition:color .2s; }
    .sel-card.sel-skill .sel-name { color:#7de8a7; font-weight:700; }
    .sel-card.sel-gear  .sel-name { color:#f0a060; font-weight:700; }
    .sel-desc { font-size:.7rem; color:var(--text-dim); margin-top:2px; }

    /* Badges */
    .badge { display:inline-block; font-size:.68rem; padding:2px 8px; border-radius:1px; margin:2px; }
    .b-skill { background:rgba(46,204,113,.12); border:1px solid #1a6b3a; color:#7de8a7; }
    .b-gear  { background:rgba(230,126,34,.12); border:1px solid #8b4a10; color:#f0a060; }

    /* Rank badge */
    .rank-badge {
      display:inline-block; background:linear-gradient(135deg,#3a2a0e,#1a1408);
      border:1px solid var(--gold); color:var(--gold-light);
      padding:6px 22px; font-size:1.4rem; letter-spacing:.08em; font-weight:700;
      box-shadow:0 0 20px rgba(201,168,76,.25), inset 0 1px 0 rgba(201,168,76,.15);
      animation:bglow 3s ease-in-out infinite; border-radius:1px; margin-bottom:6px;
    }

    /* Result grid */
    .res-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }

    /* Roadmap */
    .road-row { display:flex; align-items:stretch; gap:0; }
    .road-node { flex:1; border:1px solid #2a1f0a; background:#0d0b07; padding:10px; opacity:.4; border-radius:1px; }
    .road-node.past    { border-color:#1a6b3a; background:rgba(26,107,58,.1); opacity:.7; }
    .road-node.current { border-color:var(--gold); background:rgba(201,168,76,.08); opacity:1; box-shadow:0 0 18px rgba(201,168,76,.25); }
    .road-arrow { color:#2a1f0a; font-size:1.2rem; padding:0 2px; align-self:center; }
    .road-arrow.lit { color:var(--gold); }
    .road-tag { font-size:.6rem; background:rgba(201,168,76,.08); border:1px solid #2a1f0a; color:var(--text-dim); padding:1px 5px; display:inline-block; margin:1px; border-radius:1px; }

    /* Modal */
    .modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); backdrop-filter:blur(4px); z-index:50; align-items:center; justify-content:center; padding:16px; }
    .modal-bg.open { display:flex; }
    .modal-box { width:100%; max-width:380px; border-radius:1px; overflow:hidden; }

    /* Footer */
    .footer { border-top:1px solid var(--gold-dark); background:linear-gradient(0deg,#0d0b07,transparent); text-align:center; padding:24px 16px; margin-top:28px; }
    .footer-orn { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:12px; }
    .ft-ll { height:1px; width:60px; background:linear-gradient(90deg,transparent,var(--gold-dark)); }
    .ft-lr { height:1px; width:60px; background:linear-gradient(90deg,var(--gold-dark),transparent); }
    .ft-name { color:var(--gold); font-size:1rem; font-weight:700; letter-spacing:.12em; margin-bottom:6px; }
    .ft-tags { color:var(--text-dim); font-size:.72rem; letter-spacing:.05em; line-height:1.9; }
    .ft-link { color:#8b6914; font-size:.7rem; letter-spacing:.08em; text-decoration:none; transition:color .2s; }
    .ft-link:hover { color:var(--gold); }

    /* Animations */
    @keyframes glow  { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.2) drop-shadow(0 0 8px rgba(240,208,128,.4))} }
    @keyframes bglow { 0%,100%{box-shadow:0 0 10px rgba(201,168,76,.2)} 50%{box-shadow:0 0 28px rgba(201,168,76,.5),0 0 50px rgba(201,168,76,.15)} }
    @keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
    .fadein { animation:fadeUp .4s ease forwards; }

    .content { max-width:920px; margin:0 auto; padding:0 16px 16px; flex:1; }
    .wrap-gap { display:flex; flex-wrap:wrap; gap:4px; }
    .flex-c { display:flex; align-items:center; }
    .gap8 { gap:8px; }

    @media (max-width:600px) {
      .road-row { flex-direction:column; }
      .road-arrow { display:none; }
    }