@property --wofAng { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

  :root {
    --gold: #d4af37; --gold2: #f5d76e; --dark: #0b0e14; --dark2: #131826; --dark3: #1c2333;
    --text: #e9eef5; --mut: #93a1b5; --green: #26de81; --red: #ff4757; --blue: #4aa3ff;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: var(--dark); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; }
  button { font-family: inherit; }

  /* ---------- landing ---------- */
  #page { max-width: 880px; margin: 0 auto; padding: 40px 20px 80px; }
  .demo-badge { display:inline-block; background: var(--gold); color:#000; font-weight:700; font-size:12px; padding:4px 12px; border-radius:20px; letter-spacing:1px; margin-bottom:16px; }
  #page h1 { font-size: 30px; color: var(--gold); margin-bottom: 8px; }
  #page p.sub { color: var(--mut); margin-bottom: 28px; }
  .wp-mock { background: var(--dark2); border: 1px solid var(--dark3); border-radius: 14px; padding: 28px; }
  .wp-mock h2 { font-size: 20px; margin-bottom: 10px; }
  .wp-mock p { color: var(--mut); font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
  .embed-card {
    background: radial-gradient(120% 160% at 20% 0%, #1b2740 0%, #10182b 45%, #1f1a0c 100%);
    border: 1px solid var(--gold); border-radius: 14px; padding: 36px; text-align: center;
    box-shadow: 0 18px 50px rgba(0,0,0,.5), inset 0 0 60px rgba(212,175,55,.06);
  }
  .embed-card .logo { font-size: 28px; font-weight: 800; letter-spacing: 3px; color: var(--gold); text-shadow: 0 0 22px rgba(212,175,55,.5); }
  .embed-card .tag { color:#9fb0c8; font-size: 13.5px; margin: 12px 0 24px; }
  .gold-btn {
    background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #1a1408; border: none;
    font-size: 16px; font-weight: 700; padding: 14px 40px; border-radius: 12px; cursor: pointer;
    box-shadow: 0 6px 22px rgba(212,175,55,.4); transition: transform .15s, box-shadow .15s;
  }
  .gold-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 30px rgba(212,175,55,.55); }
  .notes { margin-top: 28px; font-size: 13px; color: var(--mut); line-height: 1.75; }
  .notes b { color: var(--gold); }

  /* ---------- game window ---------- */
  #wofWrap { position: fixed; inset: 0; z-index: 1000; display: none; flex-direction: column; background: #05070c; }
  #wofWrap.open { display: flex; }
  #gameBar {
    height: 50px; flex: 0 0 50px; display: flex; align-items: center; gap: 8px;
    background: linear-gradient(180deg, rgba(28,35,51,.95), rgba(14,18,28,.95));
    border-bottom: 1px solid #2b3550; padding: 0 12px; user-select: none;
  }
  #gameBar .title { font-weight: 800; letter-spacing: 2px; color: var(--gold); font-size: 14px; margin-right: 8px; white-space: nowrap; text-shadow: 0 0 14px rgba(212,175,55,.5); }
  .hudchip { background: rgba(11,14,20,.9); border: 1px solid #2b3550; border-radius: 10px; padding: 5px 12px; font-size: 13px; white-space: nowrap; }
  .hudchip b { color: var(--gold); }
  .hudchip.pulse { animation: chipPulse .45s ease; }
  @keyframes chipPulse { 40% { transform: scale(1.14); border-color: var(--gold); } }
  #gameBar .spacer { flex: 1; }
  .bar-btn {
    background: rgba(40,50,75,.7); color: #d5deee; border: 1px solid #3a4763; border-radius: 10px;
    padding: 7px 12px; font-size: 12.5px; cursor: pointer; white-space: nowrap; transition: all .15s;
  }
  .bar-btn:hover { background: #344160; color: #fff; border-color: var(--gold); transform: translateY(-1px); }
  .bar-btn.gold { background: linear-gradient(180deg, var(--gold2), var(--gold)); color:#1a1408; font-weight: 700; border-color: var(--gold); }
  #gameView { position: relative; flex: 1; overflow: hidden; }
  #game { position: absolute; inset: 0; width: 100%; height: 100%; }
  #vignette { position:absolute; inset:0; pointer-events:none; box-shadow: inset 0 0 220px rgba(2,4,10,.66); }

  /* HUD */
  #hud { position: absolute; top: 14px; left: 44px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; z-index: 5; }
  .hud-card {
    background: rgba(11,15,24,.72); border: 1px solid rgba(82,100,140,.45); border-radius: 14px;
    padding: 10px 14px; min-width: 210px; backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
  }
  .hud-name { font-size: 13.5px; font-weight: 700; }
  .hud-row { display:flex; justify-content: space-between; font-size: 12px; color: var(--mut); margin-top: 4px; }
  .hud-row b { color: var(--gold); font-size: 13px; }
  .hud-row b.up { color: var(--green); } .hud-row b.down { color: var(--red); }
  .xpbar { height: 7px; background: #1b2234; border-radius: 5px; margin-top: 7px; overflow: hidden; position: relative; }
  .xpbar > div { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold2)); width: 10%; transition: width .5s cubic-bezier(.2,.8,.3,1); border-radius: 5px; box-shadow: 0 0 10px rgba(212,175,55,.6); }
  #questHud { position: absolute; top: 14px; right: 14px; max-width: 280px; pointer-events: none; z-index: 5; }
  #questHud .hud-card { border-color: rgba(212,175,55,.55); }
  #questHud .q-title { color: var(--gold); font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px; }
  #questHud .q-text { font-size: 12.5px; margin-top: 5px; line-height: 1.5; }
  #hint { position:absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: rgba(11,15,24,.78); border:1px solid rgba(82,100,140,.45); padding: 8px 18px; border-radius: 22px; font-size: 12.5px; color: var(--mut); pointer-events:none; backdrop-filter: blur(6px); z-index: 5; white-space: nowrap; }
  #hint b { color: var(--text); }

  /* dialogue */
  #dialog {
    position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%);
    width: min(660px, 92%); background: rgba(13,18,29,.94); border: 1.5px solid var(--gold);
    border-radius: 16px; padding: 18px 20px; display: none; z-index: 15;
    box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(212,175,55,.12); backdrop-filter: blur(10px);
  }
  #dialog.open { display: block; animation: dlgIn .25s ease; }
  @keyframes dlgIn { from { opacity: 0; transform: translateX(-50%) translateY(12px); } }
  #dialog .speaker { color: var(--gold); font-weight: 700; font-size: 13px; letter-spacing: 1px; margin-bottom: 7px; }
  #dialog .next { text-align: right; color: var(--mut); font-size: 12px; margin-top: 10px; }

  /* ---- conversation: the same gold dopamine treatment as the quiz lesson ----
     a circulating gold ring around the box, gold type that arrives letter by
     letter with a caret, and a highlight sweep that rides the newest words. */
  #dialog { position: absolute; }
  #dialog.open::before {
    content: ''; position: absolute; inset: -1.5px; border-radius: 16px; padding: 2px;
    background: conic-gradient(from var(--wofAng), #8a6d1d, #d4af37, #fff2b8, #ffd97a, #d4af37, #8a6d1d);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: wofGoldSpin 3.4s linear infinite; pointer-events: none; z-index: 0;
  }
  #dialog .speaker, #dialog .text, #dialog .next, #dialog .dlg-choice { position: relative; z-index: 1; }
  #dialog .text {
    font-size: 15.5px; line-height: 1.62; color: #ffe08a;
    text-shadow: 0 0 14px rgba(212,175,55,.22);
  }
  #dialog .text b, #dialog .text strong { color: #fff2b8; }
  .wof-type { color: #ffe08a; }
  /* the freshly typed tail glows a touch brighter, so the eye follows the words in */
  .wof-type .wof-fresh {
    color: #fff6cf; text-shadow: 0 0 10px rgba(255,226,140,.65), 0 0 22px rgba(212,175,55,.35);
  }
  .wof-type::after { content: '\258D'; color: #ffd97a; margin-left: 1px; animation: bCaret .8s steps(1) infinite; }
  .wof-type.done::after { content: ''; }
  @media (prefers-reduced-motion: reduce) {
    #dialog.open::before { animation: none; }
    .wof-type::after { animation: none; }
  }

  /* battle */
  #battle {
    position: absolute; inset: 0; display: none; z-index: 20;
    background: #0a0e18;
    flex-direction: column; align-items: center; justify-content: center; padding: 16px;
    /* A fight never scrolls sideways, and when it is taller than the screen the
       CARD scrolls rather than the overlay - so the browser's scrollbars never
       appear over the artwork. */
    overflow: hidden;
  }
  #battle > .battle-stage {
    max-height: calc(100% - 8px);
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;              /* Firefox */
  }
  #battle > .battle-stage::-webkit-scrollbar { width: 0; height: 0; }
  /* the world the creature comes from, painted behind the fight.  The veil
     over it keeps the question card readable without flattening the scene. */
  #bScene { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; }
  #bVeil {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(6,10,18,.10) 0%, rgba(6,10,18,.30) 46%, rgba(6,10,18,.62) 100%);
  }
  #battle > .battle-stage { position: relative; z-index: 3; }
  #bFlash { z-index: 4; }
  #battle.open { display: flex; animation: bIn .35s ease; }
  @keyframes bIn { from { opacity: 0; } }
  .battle-stage { width: min(740px, 97%); }
  .b-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 6px; gap: 10px; }
  .b-side { background: rgba(13,18,29,.82); border: 1px solid #34405e; border-radius: 12px; padding: 9px 15px; min-width: 195px; backdrop-filter: blur(8px); }
  .b-side .nm { font-weight: 700; font-size: 14px; }
  .b-side.enemy .nm { color: #ff8b85; }
  .b-side.me .nm { color: #7fc1ff; }
  .hpbar { height: 9px; background: #1b2234; border-radius: 5px; margin-top: 7px; overflow: hidden; }
  .hpbar > div { height: 100%; border-radius: 5px; transition: width .45s cubic-bezier(.2,.8,.3,1); }
  .hpbar.mine > div { background: linear-gradient(90deg, #1faf63, var(--green)); box-shadow: 0 0 8px rgba(38,222,129,.7); }
  .hpbar.theirs > div { background: linear-gradient(90deg, #d63a47, var(--red)); box-shadow: 0 0 8px rgba(255,71,87,.7); }
  #enemyWrap { width: 230px; margin: 2px auto 6px; position: relative; animation: portraitFloat 2.6s ease-in-out infinite; }
  @keyframes portraitFloat { 50% { transform: translateY(-7px); } }
  #enemyCanvas { display: block; filter: drop-shadow(0 14px 22px rgba(0,0,0,.65)); transition: filter .35s; }
  #enemyCanvas.hit { animation: enemyHit .5s ease; }
  @keyframes enemyHit {
    0% { transform: none; } 15% { transform: translate(-16px, 5px) rotate(-5deg) scale(.96); }
    35% { transform: translate(13px, -6px) rotate(4deg) scale(.97); }
    55% { transform: translate(-8px, 3px) rotate(-2deg); } 75% { transform: translate(5px, -2px); }
    100% { transform: none; }
  }
  #enemyCanvas.lunge { animation: enemyLunge .55s cubic-bezier(.2,.9,.3,1); }
  @keyframes enemyLunge {
    0% { transform: scale(1); } 30% { transform: scale(1.35) translateY(22px); }
    55% { transform: scale(1.3) translateY(16px) rotate(2deg); } 100% { transform: scale(1); }
  }
  #bFlash { position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: 0; }
  #bFlash.red { animation: flashRed .5s ease; }
  @keyframes flashRed { 0% { background: rgba(255,45,65,.42); box-shadow: inset 0 0 120px rgba(255,45,65,.8); } 100% { background: transparent; } }
  #bFlash.gold { animation: flashGold .4s ease; }
  @keyframes flashGold { 0% { background: rgba(255,220,120,.30); } 100% { background: transparent; } }
  .battle-stage.shake { animation: stageShake .5s ease; }
  @keyframes stageShake {
    0% { transform: none; } 20% { transform: translate(-12px, 6px); } 40% { transform: translate(10px, -7px); }
    60% { transform: translate(-7px, 4px); } 80% { transform: translate(4px, -2px); } 100% { transform: none; }
  }
  .dmg-float { position: absolute; font-weight: 900; font-size: 26px; pointer-events: none; z-index: 8;
    text-shadow: 0 2px 8px rgba(0,0,0,.8); animation: dmgUp 1s ease forwards; }
  @keyframes dmgUp { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 20% { opacity: 1; transform: translateY(0) scale(1.25); } 100% { opacity: 0; transform: translateY(-46px) scale(1); } }
  .slash { position: absolute; left: 50%; top: 40%; width: 130px; height: 6px; margin-left: -65px; z-index: 7;
    background: linear-gradient(90deg, transparent, #fff6cf, #ffd166, transparent); border-radius: 4px;
    pointer-events: none; animation: slashCut .35s ease forwards; }
  @keyframes slashCut { 0% { opacity: 0; transform: rotate(-40deg) scaleX(.2); } 35% { opacity: 1; transform: rotate(-32deg) scaleX(1.15); } 100% { opacity: 0; transform: rotate(-25deg) scaleX(1.3); } }
  .b-taunt { text-align: center; font-style: italic; color: #ff9a93; font-size: 13.5px; min-height: 18px; margin-bottom: 10px; }
  .combo { text-align:center; font-weight: 800; color: var(--gold); font-size: 14px; min-height: 18px; margin-bottom: 6px; letter-spacing: 1px; text-shadow: 0 0 12px rgba(212,175,55,.7); }
  .b-card { background: rgba(13,18,29,.92); border: 1.5px solid #34405e; border-radius: 16px; padding: 18px; backdrop-filter: blur(10px); box-shadow: 0 16px 50px rgba(0,0,0,.5); }
  .b-q { font-size: 16px; font-weight: 600; line-height: 1.5; margin-bottom: 14px; }
  .b-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .b-opt {
    background: linear-gradient(180deg, #222c44, #1a2236); border: 1px solid #38456a; color: var(--text);
    border-radius: 12px; padding: 13px 15px; font-size: 14px; cursor: pointer; text-align: left; transition: all .14s;
  }
  .b-opt:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.35); }
  .b-opt.correct { background: linear-gradient(180deg, #194b30, #123823); border-color: var(--green); box-shadow: 0 0 18px rgba(38,222,129,.35); }
  .b-opt.wrong { background: linear-gradient(180deg, #4b1d22, #361418); border-color: var(--red); animation: shake .35s; }
  @keyframes shake { 25% { transform: translateX(-5px);} 50% { transform: translateX(5px);} 75% { transform: translateX(-3px);} }
  .b-expl { margin-top: 12px; font-size: 13.5px; color: #a9b6ca; line-height: 1.55; display: none; }
  .b-expl.show {
    display: block; position: relative; color: #ffe08a; background: #05060a;
    border-radius: 12px; padding: 13px 15px; border: 2px solid transparent;
    box-shadow: 0 0 20px rgba(212,175,55,.32), inset 0 0 22px rgba(212,175,55,.06);
    animation: bExplPop .28s ease;
  }
  /* dopamine gold: a circulating gold ring that pulls the eye to the lesson.
     Rotating the gradient ANGLE (not the element) keeps the ring perfectly aligned. */
  .b-expl.show::before {
    content: ''; position: absolute; inset: -2px; border-radius: 12px; padding: 2px;
    background: conic-gradient(from var(--wofAng), #8a6d1d, #d4af37, #fff2b8, #ffd97a, #d4af37, #8a6d1d);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: wofGoldSpin 2.6s linear infinite; pointer-events: none;
  }
  .b-expl.show b { color: #fff2b8; }
  .b-expl-type { color: #ffe08a; }
  .b-expl-type::after { content: '▍'; color: #ffd97a; animation: bCaret .8s steps(1) infinite; }
  .b-expl-type.done::after { content: ''; }
  @keyframes wofGoldSpin { to { --wofAng: 360deg; } }
  @keyframes bExplPop { from { transform: scale(.97); opacity: .2; } to { transform: scale(1); opacity: 1; } }
  @keyframes bCaret { 50% { opacity: 0; } }
  .b-continue { margin-top: 14px; text-align: center; display: none; }
  .b-continue.show { display: block; }
  @media (max-width: 580px) { .b-opts { grid-template-columns: 1fr; } }

  /* modal */
  #modal { position: absolute; inset: 0; display: none; z-index: 30; background: rgba(4,6,12,.8); align-items: center; justify-content: center; padding: 14px; }
  #modal.open { display: flex; animation: bIn .2s ease; }
  .modal-card {
    width: min(880px, 97%); max-height: 92%; overflow: auto;
    background: linear-gradient(180deg, #141b2c, #0f1422); border: 1px solid rgba(212,175,55,.7);
    border-radius: 18px; padding: 20px 24px; scrollbar-color: var(--gold) var(--dark3);
    box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 50px rgba(212,175,55,.08);
  }
  .modal-card h3 { color: var(--gold); letter-spacing: 1px; margin-bottom: 4px; }
  .modal-card .preview-tag { font-size: 11.5px; color: var(--mut); margin-bottom: 14px; }
  .m-close { position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; min-width: 0; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; z-index: 5; }
  .m-close:hover { background: var(--red); border-color: var(--red); color: #fff; }
  .modal-card { position: relative; }

  /* skill tree */
  .skill-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  @media (max-width: 680px) { .skill-cols { grid-template-columns: 1fr; } }
  .skill-col h4 { font-size: 12.5px; letter-spacing: 1.5px; color: var(--mut); margin-bottom: 9px; text-transform: uppercase; }
  .snode { background: linear-gradient(180deg, #1d2640, #171e32); border: 1px solid #36436a; border-radius: 12px; padding: 10px 12px; margin-bottom: 9px; font-size: 13px; position: relative; transition: all .15s; }
  .snode.unlocked { border-color: var(--green); }
  .snode.unlocked::after { content: "✓"; color: var(--green); position: absolute; right: 11px; top: 9px; }
  .snode.locked { opacity: .5; }
  .snode.locked::after { content: "🔒"; position: absolute; right: 9px; top: 8px; font-size: 11px; }
  .snode.can { border-color: var(--gold); cursor: pointer; box-shadow: 0 0 14px rgba(212,175,55,.18); }
  .snode.can:hover { transform: translateY(-2px); background: #243052; }
  .snode .sd { display:block; color: var(--mut); font-size: 11.5px; margin-top: 3px; }
  .sp-left { margin: 10px 0 14px; font-size: 13px; }
  .sp-left b { color: var(--gold); }

  /* market */
  .mkt-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
  .mtab { background: #1b2336; border: 1px solid #36436a; color: #cdd8ea; padding: 7px 16px; border-radius: 10px; font-size: 13px; cursor: pointer; }
  .mtab.on { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #1a1408; font-weight: 700; border-color: var(--gold); }
  .tf-tabs { display: flex; gap: 6px; }
  .tf { background: #1b2336; border: 1px solid #36436a; color: #cdd8ea; padding: 4px 12px; border-radius: 8px; font-size: 12px; cursor: pointer; }
  .tf.on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }
  .chart-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
  .chart-head .sym { font-size: 17px; font-weight: 800; }
  .chart-head .px { font-size: 17px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
  .chart-head .chg { font-size: 13px; font-weight: 700; }
  .chg.up { color: var(--green); } .chg.down { color: var(--red); }
  #chartC { width: 100%; height: 300px; background: #0b0f1a; border: 1px solid #28324d; border-radius: 12px; display: block; }
  .trade-row { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
  .size-in { background: #0e1422; border: 1px solid #36436a; color: var(--text); border-radius: 10px; padding: 9px 12px; width: 110px; font-size: 14px; }
  .chip { background: #1b2336; border: 1px solid #36436a; color: #cdd8ea; padding: 5px 10px; border-radius: 8px; font-size: 12px; cursor: pointer; }
  .long-btn { background: linear-gradient(180deg, #2fe590, #1faf63); color: #04130a; border: none; font-weight: 800; padding: 11px 22px; border-radius: 10px; cursor: pointer; font-size: 14px; box-shadow: 0 5px 16px rgba(38,222,129,.3); }
  .short-btn { background: linear-gradient(180deg, #ff6b76, #e03445); color: #1c0507; border: none; font-weight: 800; padding: 11px 22px; border-radius: 10px; cursor: pointer; font-size: 14px; box-shadow: 0 5px 16px rgba(255,71,87,.3); }
  .long-btn:hover, .short-btn:hover { transform: translateY(-2px); }
  table.pos { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 14px; }
  table.pos td, table.pos th { padding: 8px 9px; border-bottom: 1px solid #232c44; text-align: left; font-variant-numeric: tabular-nums; }
  table.pos th { color: var(--mut); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
  .pnl.up { color: var(--green); font-weight: 700; } .pnl.down { color: var(--red); font-weight: 700; }
  .side-tag { font-size: 11px; font-weight: 800; border-radius: 6px; padding: 2px 8px; }
  .side-tag.L { background: rgba(38,222,129,.16); color: var(--green); }
  .side-tag.S { background: rgba(255,71,87,.16); color: var(--red); }
  .x-btn { background: #2a3350; border: 1px solid #3c4970; color: #dde6f5; border-radius: 8px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
  .x-btn:hover { border-color: var(--gold); }

  /* bots */
  .bot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 700px) { .bot-grid { grid-template-columns: 1fr; } }
  .bot-card { background: linear-gradient(180deg, #1d2640, #161d30); border: 1px solid #36436a; border-radius: 14px; padding: 14px 16px; transition: border-color .15s; }
  .bot-card:hover { border-color: rgba(212,175,55,.55); }
  .bot-card h5 { font-size: 14.5px; margin-bottom: 5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .bot-card p { font-size: 12.5px; color: var(--mut); line-height: 1.55; }
  .bot-card .stats { display: flex; gap: 14px; margin-top: 9px; font-size: 12px; color: var(--mut); flex-wrap: wrap; }
  .bot-card .stats b { color: var(--text); }
  .lock-tag { display: inline-block; font-size: 10px; background: rgba(212,175,55,.12); color: var(--gold); border: 1px solid rgba(212,175,55,.6); border-radius: 6px; padding: 1px 8px; }
  .risk-tag { display: inline-block; font-size: 10px; background: rgba(255,71,87,.12); color: var(--red); border: 1px solid rgba(255,71,87,.6); border-radius: 6px; padding: 1px 8px; }
  .live-tag { display: inline-block; font-size: 10px; background: rgba(38,222,129,.12); color: var(--green); border: 1px solid rgba(38,222,129,.6); border-radius: 6px; padding: 1px 8px; animation: blink 1.4s infinite; }
  @keyframes blink { 50% { opacity: .45; } }
  .bot-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

  /* leaderboard */
  table.lb { width: 100%; border-collapse: collapse; font-size: 14px; }
  table.lb td, table.lb th { padding: 9px 11px; border-bottom: 1px solid #232c44; text-align: left; }
  table.lb th { color: var(--mut); font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; }
  table.lb tr.me td { color: var(--gold); font-weight: 700; }

  /* toasts + floaters */
  #toasts { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 95; pointer-events: none; align-items: center; }
  .toast { background: rgba(13,18,29,.95); border: 1px solid var(--gold); color: var(--text); border-radius: 12px; padding: 10px 20px; font-size: 13.5px; animation: tin .3s ease; box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 24px rgba(212,175,55,.12); }
  .toast b { color: var(--gold); }
  @keyframes tin { from { opacity: 0; transform: translateY(-10px) scale(.95); } }

  /* touch */
  #dpad { position: absolute; bottom: 20px; right: 20px; left: auto; display: none; z-index: 25; }
  #dpad .drow { display: flex; }
  .dbtn { width: 54px; height: 54px; margin: 3px; background: rgba(20,27,44,.8); border: 1px solid #3a4763; border-radius: 14px; color: #d5deee; font-size: 20px; backdrop-filter: blur(4px); }
  #actBtn { position: absolute; bottom: 38px; right: 24px; display: none; z-index: 25; width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(180deg, var(--gold2), var(--gold)); border: none; color: #1a1408; font-weight: 800; font-size: 16px; box-shadow: 0 8px 24px rgba(212,175,55,.4); }
  body.touch #dpad, body.touch #actBtn { display: block; }
  @media (pointer: coarse) { #dpad, #actBtn { display: block; } }

/* ---------- plugin embed card (shortcode) ---------- */
.wof-embed-card {
  background: radial-gradient(120% 160% at 20% 0%, #1b2740 0%, #10182b 45%, #1f1a0c 100%);
  border: 1px solid #d4af37; border-radius: 14px; padding: 34px; text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.5); color: #e9eef5; font-family: 'Segoe UI', system-ui, sans-serif;
}
.wof-embed-logo { display:flex; align-items:center; justify-content:center; gap:12px; font-size: 26px; font-weight: 800; letter-spacing: 3px; color: #d4af37; text-shadow: 0 0 22px rgba(212,175,55,.5); }
.wof-embed-logo img { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 18px rgba(212,175,55,.5); }
.wof-embed-tag { color:#9fb0c8; font-size: 13.5px; margin: 12px 0 22px; }
.wof-gold-btn {
  display:inline-block; background: linear-gradient(180deg, #f5d76e, #d4af37); color: #1a1408 !important; border: none;
  font-size: 16px; font-weight: 700; padding: 14px 38px; border-radius: 12px; cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 22px rgba(212,175,55,.4); transition: transform .15s;
}
.wof-gold-btn:hover { transform: translateY(-2px); }
#wofWrap { position: fixed; inset: 0; z-index: 99999; display: none; flex-direction: column; background: #05070c; color: #e9eef5; font-family: 'Segoe UI', system-ui, sans-serif; }
#wofWrap.open { display: flex; }
#wofWrap *, #wofWrap *::before, #wofWrap *::after { box-sizing: border-box; }

/* The overlay covers the whole viewport, so the page beneath it must stop
   scrolling - otherwise the browser's own bars sit over the game, which is what
   FJ saw down the right and along the bottom during a fight. */
body.wof-open { overflow: hidden !important; }
#wofWrap { overflow: hidden; }
#wofWrap button { font-family: inherit; }
#wofWrap img.wof-bar-logo { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 12px rgba(212,175,55,.55); }

/* ---------- chat (bottom-left) ---------- */
#wofChat { position: absolute; left: 44px; bottom: 14px; width: 300px; z-index: 18; font-size: 12.5px; }
#wofChat .chat-box { background: rgba(11,15,24,.82); border: 1px solid rgba(82,100,140,.45); border-radius: 12px; backdrop-filter: blur(8px); overflow: hidden; }
#wofChat .chat-log { max-height: 150px; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; }
#wofChat .chat-log .nm { color: #ffd97a; font-weight: 700; }
#wofChat .chat-log .npc .nm { color: #8fd3ff; }
#wofChat .chat-row { display: flex; border-top: 1px solid #232c44; }
#wofChat input { flex: 1; background: transparent; border: none; color: #e9eef5; padding: 8px 10px; font-size: 12.5px; outline: none; }
#wofChat .chat-send { background: #232b3b; border: none; color: #d4af37; padding: 0 14px; cursor: pointer; font-weight: 700; }
#wofChat .chat-head { display:flex; justify-content: space-between; align-items:center; padding: 5px 10px; background: rgba(20,27,44,.9); cursor: pointer; font-weight: 700; letter-spacing: 1px; font-size: 11px; color: #93a1b5; }
#wofChat.closed .chat-log, #wofChat.closed .chat-row { display: none; }

/* ---------- character creator / generic forms ---------- */
.wof-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .wof-form-grid { grid-template-columns: 1fr; } }
.wof-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #93a1b5; }
.wof-field input, .wof-field select, .wof-field textarea { background: #0e1422; border: 1px solid #36436a; color: #e9eef5; border-radius: 10px; padding: 9px 12px; font-size: 14px; }
.wof-field textarea { width: 100%; resize: vertical; font-family: inherit; line-height: 1.55; }
.wof-field select[size] { padding: 4px; }
.wof-field select option { padding: 5px 7px; }
.race-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
@media (max-width: 600px) { .race-grid { grid-template-columns: 1fr 1fr; } }
.race-card { background: linear-gradient(180deg, #1d2640, #161d30); border: 2px solid #36436a; border-radius: 14px; padding: 12px; text-align: center; cursor: pointer; transition: all .15s; }
.race-card:hover { transform: translateY(-2px); }
.race-card.sel { border-color: #d4af37; box-shadow: 0 0 18px rgba(212,175,55,.3); }
.race-card canvas { display: block; margin: 0 auto 6px; }
.race-card .rn { font-weight: 700; font-size: 13.5px; }
.race-card .rp { font-size: 11px; color: #93a1b5; margin-top: 3px; line-height: 1.4; }
.wof-color-row { display: flex; gap: 8px; align-items: center; }
.wof-color-row input[type=color] { width: 38px; height: 30px; border: none; background: none; padding: 0; cursor: pointer; }

/* ---------- duel + world travel ---------- */
.duel-vs { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 800; }
.duel-vs .sc { font-size: 26px; color: #d4af37; font-variant-numeric: tabular-nums; }
.world-card { display:flex; justify-content: space-between; align-items: center; background: linear-gradient(180deg, #1d2640, #161d30); border: 1px solid #36436a; border-radius: 12px; padding: 12px 14px; margin-bottom: 9px; }
.world-card.cur { border-color: #26de81; }
.world-card .wn { font-weight: 700; }
.world-card .wd { font-size: 12px; color: #93a1b5; margin-top: 2px; }
.player-row { display:flex; justify-content: space-between; align-items:center; padding: 8px 4px; border-bottom: 1px solid #232c44; font-size: 13.5px; }

/* v1.0.1: the client renders inside #wofRoot; it must fill the fixed wrapper */
#wofRoot { display: flex; flex-direction: column; height: 100%; }

/* v1.1.1: WoW-style quest tracker */
#questHud .quest-track { min-width: 250px; max-width: 300px; max-height: 46vh; overflow-y: auto; scrollbar-width: thin; }
#questHud .q-entry { margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(212,175,55,.18);
  display: flex; align-items: flex-start; gap: 8px; }
#questHud .q-entry:first-of-type { border-top: none; }
/* the creature the quest is about, beside the line that names it (FJ) */
#questHud .q-body { flex: 1 1 auto; min-width: 0; }
#questHud .q-pic { flex: 0 0 auto; width: 30px; height: 30px; margin-top: 1px;
  border-radius: 7px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(212,175,55,.22); image-rendering: pixelated; }
#questHud .q-pic-none { background: none; border-color: rgba(212,175,55,.10); }
#questHud .q-name { color: #ffd97a; font-weight: 800; font-size: 13px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
#questHud .q-obj { font-size: 12px; color: #cfd8e6; line-height: 1.45; margin-top: 3px; }
#questHud .q-obj b { color: #d4af37; }
#questHud .q-obj.done { color: #26de81; }
#questHud .q-obj.done b { color: #26de81; }
#questHud .q-giver { font-size: 10.5px; color: #8b96ab; margin-top: 2px; font-style: italic; }
/* interactive quest log (v1.20.0): re-open details, abandon */
#questHud .q-title { pointer-events: auto; cursor: pointer; }
#questHud .q-entry { pointer-events: auto; cursor: pointer; transition: background .14s; border-radius: 8px; }
#questHud .q-entry:hover { background: rgba(212,175,55,.10); }
#questHud .q-more { pointer-events: auto; cursor: pointer; }
#questHud .q-more:hover { color: #ffd97a; }
.qo-debrief { color: #9fe6b8 !important; font-style: italic; }
.qlog-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.qlog-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left;
  background: linear-gradient(180deg, #161d30, #111728); border: 1px solid #2c3550; border-radius: 12px;
  padding: 12px 14px; cursor: pointer; transition: transform .14s, border-color .14s; }
.qlog-row:hover { transform: translateY(-2px); border-color: rgba(212,175,55,.6); }
.qlog-row .ql-name { color: #ffe2a0; font-weight: 700; font-size: 14px; }
.qlog-row .ql-prog { color: #d4af37; font-weight: 800; font-size: 13px; white-space: nowrap; }
.qlog-row .ql-prog.done { color: #26de81; }
/* "Show all quests" button + full-height scrollable quest log (v1.20.1) */
#questHud .q-showall { pointer-events: auto; cursor: pointer; display: block; width: 100%; margin-top: 10px;
  background: linear-gradient(180deg, #f5d76e, #d4af37); color: #1a1408; border: none; border-radius: 10px;
  padding: 9px 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .4px; transition: transform .14s; }
#questHud .q-showall:hover { transform: translateY(-1px); }
.modal-card.qlog-tall { min-height: 82vh; display: flex; flex-direction: column; }
.modal-card.qlog-tall .qlog-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; margin-top: 6px;
  scrollbar-width: thin; scrollbar-color: var(--gold) var(--dark3); padding-right: 4px; }
/* quest-log tabs: In Progress / Completed (v1.21.0) */
.qlog-tabs { display: flex; gap: 8px; margin-top: 10px; }
.qlog-tabs .qlt { flex: 1; cursor: pointer; border: 1px solid #2c3550; border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #141b2c, #0f1422); color: #aeb9cc; font-weight: 800; font-size: 13px;
  padding: 9px 8px; transition: background .14s, color .14s; }
.qlog-tabs .qlt.on { background: linear-gradient(180deg, rgba(212,175,55,.22), rgba(212,175,55,.05));
  color: #ffd97a; border-color: rgba(212,175,55,.6); }
.mkt-name { color: #ffd97a; font-weight: 800; font-size: 14px; letter-spacing: .4px; padding: 6px 4px; }
/* whole-world atlas map (v1.24.0): all lands stacked, scrollable */
.wmap-atlas { max-height: 70vh; overflow-y: auto; display: flex; justify-content: center; padding: 6px;
  margin: 4px 0 10px; scrollbar-width: thin; scrollbar-color: var(--gold) var(--dark3);
  background: #0b0f1a; border: 1px solid #2c3550; border-radius: 12px; }
.wmap-atlas canvas { image-rendering: pixelated; }
/* world map fog-of-war overlay (v1.22.0) */
.wmap-wrap { display: flex; justify-content: center; margin: 4px 0 10px; }
.wmap-wrap canvas { width: 100%; max-width: 560px; image-rendering: pixelated; border: 1px solid #2c3550;
  border-radius: 12px; background: #0b0f1a; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.wmap-key { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; font-size: 12px; color: #aeb9cc; }
.wmap-key span { display: inline-flex; align-items: center; gap: 6px; }
.wmap-key i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* v1.2.0 */
#questHud .quest-track { max-height: none; overflow: visible; }
#questHud .q-more { margin-top: 8px; font-size: 11.5px; color: #93a1b5; font-style: italic; }

/* ================= v1.4.0 ================= */
/* duel challenge popup on the main screen */
#duelAsk { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 65; display: flex; flex-direction: column; gap: 8px; width: min(480px, 94%); }
.duel-pop { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: rgba(13,18,29,.97); border: 2px solid #d4af37; border-radius: 14px; padding: 12px 16px; font-size: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.6), 0 0 30px rgba(212,175,55,.2); animation: tin .3s ease; }

/* quest log slide tab (always available) */
#qlogTab { position: absolute; top: 14px; right: 0; z-index: 6; background: rgba(13,18,29,.9); border: 1px solid rgba(212,175,55,.6); border-right: none; color: #ffd97a; border-radius: 10px 0 0 10px; padding: 8px 10px; cursor: pointer; font-size: 16px; display: none; }

/* hide on-screen controls while a quiz/battle screen is open */
body.wof-battle #dpad, body.wof-battle #actBtn { display: none !important; }
/* while a dialog / Yes-No is open, hide the on-screen move pad so it never covers the box (mobile) */
body.wof-dlg #dpad, body.wof-dlg #actBtn { display: none !important; }
#dialog { cursor: pointer; }
#dialog .d-choice button { cursor: pointer; }

@media (max-width: 860px) {
  /* burger menu */
  #burger { display: inline-block !important; }
  #barBtns { display: none; position: absolute; top: 52px; right: 6px; z-index: 80;
    flex-direction: column; gap: 6px; background: rgba(13,18,29,.97);
    border: 1px solid rgba(212,175,55,.6); border-radius: 14px; padding: 10px;
    box-shadow: 0 16px 50px rgba(0,0,0,.6); }
  #barBtns.open { display: flex; }
  #barBtns .bar-btn { width: 100%; text-align: left; font-size: 14px; padding: 10px 14px; }
  #gameBar .title { font-size: 0; }                 /* logo only */
  #gameBar .hudchip { padding: 4px 8px; font-size: 12px; }
  /* the top bar has to leave room for the burger menu, which matters more than
     any of the chips: the level word shrinks to a letter, and the donor chip
     keeps only its cup and the name (FJ) */
  #gameBar .lv-long { display: none; }
  #gameBar .lv-short { display: inline; }
  /* phone keeps only the cup and the name - the label and the amount both go, so
     the burger menu has the room it needs. Desktop shows the amount as "$10"
     rather than "10 USD" (FJ). */
  #gameBar #topDonateChip .td-lab,
  #gameBar #topDonateChip .td-amt { display: none; }
  #gameBar #topDonateChip { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* compact profile card */
  #hud .hud-card { min-width: 150px; padding: 7px 10px; }
  #hud .hud-row { font-size: 11px; }
  #hud .hud-name { font-size: 12px; }

  /* quest log slides in from the right via the tab */
  #questHud { transform: translateX(110%); transition: transform .25s ease; top: 56px; max-width: 240px; }
  #questHud.open { transform: translateX(0); }
  #qlogTab { display: block; top: 16px; }
  /* on mobile the slide-in #qlogTab IS the quest toggle; the bubble version
     only toggles .wof-collapsed on an off-screen panel (dead), so hide it to
     avoid TWO quest scroll icons stacked top-right (FJ). */
  #questBubble { display: none; }

  /* arrows bottom-right, chat stays bottom-left and smaller */
  #dpad { left: auto; right: 12px; bottom: 24px; }
  #wofChat { width: min(230px, 60vw); }
  #wofChat .chat-log { max-height: 90px; }
  #hint { display: none; }
}

/* ================= v1.5.0 ================= */
/* one unified control pad: SPACE above the left arrow, E above the right */
#dpad .drow { justify-content: center; }
.dbtn { display: flex; align-items: center; justify-content: center; }
.dbtn.key { font-size: 9.5px; font-weight: 800; letter-spacing: .4px; color: #9fd8ff; }
.dbtn.act { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #1a1408;
  border-color: rgba(212,175,55,.85); font-size: 15px; font-weight: 800;
  box-shadow: 0 6px 18px rgba(212,175,55,.35); }

/* ---- v1.7.3 Wild Pet Index ---- */
/* ---- a Pet Index slot you can point at ---- */
.wpi-slot[data-pick] { cursor: pointer; transition: transform .13s, border-color .13s, box-shadow .13s; }
.wpi-slot[data-pick]:hover, .wpi-slot[data-pick]:focus-visible {
  transform: translateY(-3px); border-color: rgba(212,175,55,.75);
  box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 16px rgba(212,175,55,.28); outline: none; z-index: 2;
}
.wpi-slot.is-pet { border-color: #4bd08a; box-shadow: 0 0 14px rgba(75,208,138,.35); }
.wpi-slot.is-hunt { border-color: #ff9d5c; box-shadow: 0 0 14px rgba(255,157,92,.35); }
.wpi-slot-badge {
  position: absolute; top: -6px; left: -6px; z-index: 3; font-size: 11px; line-height: 1;
  padding: 3px 4px; border-radius: 50%; background: #101725; border: 1px solid rgba(255,255,255,.18);
}
.wpi-pickhint { font-size: 11px; color: #6d788c; letter-spacing: .02em; }

/* ---- the preview that follows the cursor ---- */
.wpi-peek {
  position: fixed; z-index: 4000; pointer-events: none;
  opacity: 0; transform: scale(.94); transition: opacity .12s, transform .12s;
  padding: 10px 10px 8px; border-radius: 14px;
  border: 1px solid rgba(212,175,55,.35);
  background: linear-gradient(180deg, #151b2a, #0d1119);
  box-shadow: 0 18px 44px rgba(0,0,0,.62);
}
.wpi-peek.on { opacity: 1; transform: scale(1); }
.wpi-peek canvas { display: block; width: 180px; height: 200px; }
.wpi-peek-txt { text-align: center; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.07); margin-top: 4px; }
.wpi-peek-txt b { display: block; font-size: 13.5px; color: #f0dca4; }
.wpi-peek-txt em { display: block; font-style: normal; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: #8d99ad; margin-top: 3px; }
.wpi-peek-txt i { display: block; font-style: normal; font-variant-numeric: tabular-nums; font-size: 12px; color: #ffd97a; margin-top: 3px; }

/* ---- what would you like to do with this one ---- */
.wpi-menu-back {
  position: fixed; inset: 0; z-index: 4100; display: flex; align-items: center; justify-content: center;
  background: rgba(4,7,12,.62); backdrop-filter: blur(2px); padding: 18px;
  animation: wpiFade .14s ease-out;
}
@keyframes wpiFade { from { opacity: 0; } }
.wpi-menu {
  width: min(340px, 100%); border-radius: 16px; padding: 16px;
  border: 1px solid rgba(212,175,55,.34);
  background: linear-gradient(180deg, #151b2a, #0d1119);
  box-shadow: 0 24px 60px rgba(0,0,0,.66);
  animation: wpiRise .18s cubic-bezier(.2,.9,.3,1);
}
@keyframes wpiRise { from { transform: translateY(8px) scale(.97); opacity: 0; } }
.wpi-menu-head { display: flex; align-items: center; gap: 14px; }
.wpi-menu-head canvas { width: 120px; height: 132px; flex: none; }
.wpi-menu-head b { display: block; font-size: 15px; color: #f0dca4; line-height: 1.3; }
.wpi-menu-head em { display: block; font-style: normal; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: #8d99ad; margin-top: 5px; }
.wpi-menu-head i { display: block; font-style: normal; font-variant-numeric: tabular-nums; font-size: 15px; color: #ffd97a; margin-top: 6px; }
.wpi-menu-acts { display: flex; flex-direction: column; gap: 7px; margin-top: 15px; }
.wpi-menu-acts > button { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .wpi-peek, .wpi-slot[data-pick] { transition: none; }
  .wpi-menu, .wpi-menu-back { animation: none; }
}

/* ================= THE CONFIRMATION CODE PANEL =================
   The code is the only thing on this screen that matters, so it gets the
   whole stage: six lit cells in a sunken well, gold on near black, and
   everything else pulled back to a whisper. */
.otp-plate {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(212,175,55,.30);
  background: linear-gradient(180deg, #141926 0%, #0d111b 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 16px 40px rgba(0,0,0,.5);
  padding: 20px 22px 18px;
}
.otp-plate::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(212,175,55,0), rgba(240,210,120,.9) 24%, rgba(240,210,120,.9) 76%, rgba(212,175,55,0));
}
.otp-plate.bad { animation: otpShake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes otpShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
.otp-head { display: flex; align-items: flex-start; gap: 13px; }
.otp-seal {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: #1a1206;
  background: linear-gradient(150deg, #f6e08c, #d4af37 52%, #9a7a1e);
  box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 0 1px rgba(255,235,170,.35) inset;
}
.otp-headtxt { min-width: 0; }
.otp-headtxt h3 { margin: 1px 0 4px; font-size: 17px; color: #f0dca4; letter-spacing: .01em; }
.otp-headtxt p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #8d99ad; word-break: break-word; }
.otp-headtxt p b { color: #ffd97a; font-weight: 600; }
.otp-ctx {
  margin: 12px 0 0; padding: 8px 11px; border-radius: 9px;
  border-left: 2px solid rgba(212,175,55,.55); background: rgba(212,175,55,.06);
  font-size: 12px; line-height: 1.5; color: #d8c894;
}
.otp-wellwrap { margin-top: 17px; }
.otp-caption {
  display: block; font-size: 9.5px; letter-spacing: .19em; text-transform: uppercase;
  color: #6d788c; margin-bottom: 9px; text-align: center;
}
.otp-well {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 15px 12px; border-radius: 13px; cursor: text;
  background: #070a11; border: 1px solid rgba(212,175,55,.20);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.85);
}
.otp-well > input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; background: transparent; cursor: text;
  font-size: 16px; /* keeps mobile from zooming the page on focus */
}
.otp-cell {
  width: 38px; height: 50px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font: 700 26px/1 'Courier New', Courier, monospace;
  color: #ffe9ae; background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.09);
  transition: border-color .16s, background .16s, box-shadow .16s, transform .16s;
}
.otp-cell.filled {
  border-color: rgba(212,175,55,.6); background: rgba(212,175,55,.10);
  box-shadow: 0 0 12px rgba(212,175,55,.20);
}
.otp-cell.active {
  border-color: #f0d478; box-shadow: 0 0 0 1px rgba(240,212,120,.4), 0 0 16px rgba(212,175,55,.35);
  transform: translateY(-1px);
}
.otp-cell.active::after {
  content: ''; width: 2px; height: 24px; border-radius: 2px; background: #f0d478;
  animation: otpCaret 1.05s steps(1) infinite;
}
@keyframes otpCaret { 50% { opacity: 0; } }
.otp-gap { width: 9px; flex: none; height: 1px; background: rgba(255,255,255,.16); }
.otp-err { min-height: 17px; margin-top: 11px; text-align: center; font-size: 12.5px; color: #ff9d9d; opacity: 0; transition: opacity .18s; }
.otp-err.on { opacity: 1; }
.otp-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-top: 13px; }
.otp-go { flex: 1 1 auto; min-width: 150px; opacity: .55; transition: opacity .2s, box-shadow .2s; }
.otp-go.ready { opacity: 1; box-shadow: 0 0 22px rgba(212,175,55,.42); }
.otp-x { margin-left: auto; }
@media (max-width: 460px) {
  .otp-cell { width: 32px; height: 44px; font-size: 22px; }
  .otp-well { gap: 5px; padding: 12px 8px; }
  .otp-plate { padding: 16px 14px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .otp-plate.bad { animation: none; }
  .otp-cell.active::after { animation: none; }
}

/* ================= PET INDEX BANNER =================
   The panel sits over a living map, so nothing here glows: a dark plate, a
   gold rule, and light used only on the bars themselves.  The bars are the
   point - they should make you want to fill them - so the fill carries a
   moving sheen, a bright leading edge, and a lit cap when it reaches 100%. */
.wpi-hero {
  position: relative; margin: 0 0 16px; padding: 15px 18px 14px;
  border-radius: 16px; border: 1px solid rgba(212,175,55,.26);
  background: linear-gradient(180deg, #131829 0%, #0e1320 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 30px rgba(0,0,0,.46);
  overflow: hidden;
}
.wpi-hero::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(212,175,55,0), rgba(232,196,106,.85) 22%, rgba(232,196,106,.85) 78%, rgba(212,175,55,0));
}
.wpi-hero-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.wpi-hero-head h3 { margin: 0; font-size: 18px; letter-spacing: .01em; color: #edd79a; }
.wpi-hero-hint { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: #6d788c; }

.wpi-meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wpi-meter { position: relative; }
.wpi-meter-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.wpi-meter-label { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: #8d99ad; white-space: nowrap; }
.wpi-meter-val { font-variant-numeric: tabular-nums; font-size: 13px; color: #cdd6e4; white-space: nowrap; }
.wpi-meter-val b { font-size: 17px; color: #ffd97a; font-weight: 800; }
.wpi-meter-of { color: #5f6b7e; font-size: 11.5px; }

.wpi-meter-track {
  position: relative; height: 9px; border-radius: 99px; overflow: hidden;
  background: #070b13; box-shadow: inset 0 1px 3px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.04);
}
/* the milestone notches: quarters of the way there */
.wpi-meter-track::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 calc(25% - 1px), rgba(255,255,255,.13) calc(25% - 1px) 25%);
}
.wpi-meter-track > i {
  position: absolute; left: 0; top: 0; bottom: 0; display: block; border-radius: 99px;
  background: linear-gradient(90deg, #7a5c14 0%, #d4af37 58%, #ffe79a 100%);
  box-shadow: 0 0 12px rgba(212,175,55,.55);
  transition: width 1.1s cubic-bezier(.16,.85,.24,1);
  overflow: hidden;
}
/* the sheen that keeps travelling along the filled part */
.wpi-meter-track > i > u {
  position: absolute; inset: 0; display: block; text-decoration: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 62%);
  transform: translateX(-100%);
  animation: wpiSheen 2.6s cubic-bezier(.4,0,.5,1) infinite;
}
@keyframes wpiSheen { 0% { transform: translateX(-110%); } 55%, 100% { transform: translateX(210%); } }
/* the bright head of the bar, so the eye knows where the edge is */
.wpi-meter-track > s {
  position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -2px; z-index: 3;
  background: #fff6d6; border-radius: 99px; text-decoration: none;
  box-shadow: 0 0 9px 2px rgba(255,226,140,.85);
  transition: left 1.1s cubic-bezier(.16,.85,.24,1);
  animation: wpiHead 1.6s ease-in-out infinite;
}
@keyframes wpiHead { 50% { opacity: .45; } }
.wpi-meter-pct {
  position: absolute; right: 0; top: -1px;
  font-variant-numeric: tabular-nums; font-size: 10px; letter-spacing: .06em;
  color: #6d788c; opacity: 0; transition: opacity .2s;
}
.wpi-meter:hover .wpi-meter-pct { opacity: 1; }
.wpi-meter.is-slots .wpi-meter-track > i { background: linear-gradient(90deg, #14524c 0%, #47b9a8 58%, #b6ffe8 100%); box-shadow: 0 0 12px rgba(71,185,168,.5); }
.wpi-meter.is-sets  .wpi-meter-track > i { background: linear-gradient(90deg, #3d2266, #9a6ede 58%, #e6d2ff 100%); box-shadow: 0 0 12px rgba(154,110,222,.5); }
/* a bar that has actually reached the end earns a glow of its own */
.wpi-meter.done .wpi-meter-track { box-shadow: inset 0 1px 3px rgba(0,0,0,.8), 0 0 14px rgba(255,214,120,.42); }
.wpi-meter.done .wpi-meter-label { color: #ffd97a; }
.wpi-meter.done .wpi-meter-track > s { display: none; }

/* ---- the six slot badges: the set you are filling, laid out in one row ---- */
.wpi-slotbadges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-top: 14px; }
.wpi-slotbadge {
  position: relative; display: flex; align-items: center; gap: 6px;
  padding: 6px 9px 8px; border-radius: 11px;
  border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.028);
  overflow: hidden; min-width: 0;
}
.wpi-slotbadge > i { font-style: normal; font-size: 14px; line-height: 1; flex: none; }
.wpi-slotbadge > em {
  font-style: normal; display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #aab6c8; line-height: 1.25;
}
.wpi-slotbadge > em > u {
  text-decoration: none; font-size: 8.5px; letter-spacing: .1em; color: #6d788c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wpi-slotbadge > b { font-variant-numeric: tabular-nums; font-size: 15px; color: #e8edf6; flex: none; }
.wpi-sb-track { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(0,0,0,.5); }
.wpi-sb-track > span { display: block; height: 100%; transition: width 1.1s cubic-bezier(.16,.85,.24,1); }
.wpi-slotbadge.t1 { border-color: rgba(190,205,225,.16); }
.wpi-slotbadge.t1 .wpi-sb-track > span { background: linear-gradient(90deg, #5f7590, #cfe0f5); }
.wpi-slotbadge.t2 { border-color: rgba(212,175,55,.30); }
.wpi-slotbadge.t2 > b { color: #ffd97a; }
.wpi-slotbadge.t2 .wpi-sb-track > span { background: linear-gradient(90deg, #7a5c14, #ffe79a); }
.wpi-slotbadge.t3 { border-color: rgba(154,110,222,.34); }
.wpi-slotbadge.t3 > b { color: #cbaaff; }
.wpi-slotbadge.t3 .wpi-sb-track > span { background: linear-gradient(90deg, #3d2266, #e6d2ff); }
.wpi-slotbadge.sp { background: rgba(255,150,220,.045); border-color: rgba(255,150,220,.30); }
.wpi-slotbadge.sp > b { color: #ffb4e6; }
.wpi-slotbadge.sp .wpi-sb-track > span { background: linear-gradient(90deg, #8a2e6a, #ffb4e6); }
.wpi-slotbadge.zero { opacity: .42; }

/* the companion control sits on the starter card, not on a line above it */
.wpi-petrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

@media (max-width: 860px) { .wpi-slotbadges { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
  .wpi-meters { grid-template-columns: 1fr; gap: 12px; }
  .wpi-slotbadges { grid-template-columns: repeat(2, 1fr); }
  .wpi-hero { padding: 13px 13px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .wpi-meter-track > i, .wpi-meter-track > s, .wpi-sb-track > span { transition: none; }
  .wpi-meter-track > i > u, .wpi-meter-track > s { animation: none; }
}

.wpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .wpi-grid { grid-template-columns: 1fr; } }
.wpi-card { display: flex; gap: 12px; align-items: center; background: linear-gradient(180deg, #1d2640, #161d30); border: 1px solid #36436a; border-radius: 14px; padding: 12px 14px; transition: border-color .15s, transform .15s; }
.wpi-card:hover { border-color: rgba(212,175,55,.55); transform: translateY(-2px); }
.wpi-card.shiny { border-color: #d4af37; box-shadow: 0 0 18px rgba(212,175,55,.28); }
.wpi-card h5 { font-size: 14px; margin-bottom: 4px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.wpi-card p { font-size: 12px; color: var(--mut); line-height: 1.5; }
.wpi-meta { flex: 1; min-width: 0; }
.wpi-port { position: relative; width: 80px; height: 96px; flex: 0 0 80px; }
.wpi-port canvas { width: 80px; height: 96px; border-radius: 10px; background: radial-gradient(circle at 50% 38%, #20305a 0%, #0d1426 82%); display: block; }
.wpi-sil { filter: brightness(0) saturate(0); opacity: .5; }
.wpi-q { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; color: #4a5878; }
.wpi-bloom { animation: wpiBloom .9s ease both; }

/* ---- Pet Index: six slots per creature -----------------------------------
   Level 1, 2 and 3, each in its classic coat and in its Special coat.  The
   card is one creature; the grid inside it is the six ways you can own it. */
.wpi-card.wide { display: block; }
.wpi-card.wide .wpi-meta { width: 100%; }
.wpi-slots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 8px 0 6px; }
@media (max-width: 700px) { .wpi-slots { grid-template-columns: repeat(3, 1fr); } }
.wpi-slot { position: relative; border-radius: 10px; border: 1px solid #2c3856; background: radial-gradient(circle at 50% 36%, #1b2848 0%, #0c1222 84%); padding: 3px 3px 15px; transition: border-color .15s, transform .15s; }
.wpi-slot:hover { border-color: rgba(212,175,55,.6); transform: translateY(-2px); }
.wpi-slot.sp { border-color: #1d5566; }
.wpi-slot.sp:hover { border-color: #57e8c8; }
.wpi-slot.locked { opacity: .55; }
.wpi-slot canvas { width: 100%; height: auto; display: block; border-radius: 8px; }
.wpi-slot .wpi-q { font-size: 20px; bottom: 14px; }
.wpi-slot-tag { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-size: 9.5px; letter-spacing: .3px; color: #8ea0bb; }
.wpi-slot.sp .wpi-slot-tag { color: #6fd8c4; }
.wpi-slot-x { position: absolute; top: 3px; right: 4px; font-size: 9.5px; font-weight: 700; color: #ffd97a; background: rgba(8,12,22,.78); border-radius: 6px; padding: 0 3px; }
.wpi-need { display: inline-block; font-size: 11px; color: #93a1b5; background: rgba(20,28,44,.7); border: 1px solid #2c3856; border-radius: 8px; padding: 3px 8px; }

@keyframes wpiBloom { 0% { filter: brightness(0) saturate(0); opacity: .2; transform: scale(.9); } 55% { filter: brightness(1.3) saturate(1.2); } 100% { filter: none; opacity: 1; transform: scale(1); } }
.wpi-reveal { position: absolute; inset: 0; border-radius: 10px; pointer-events: none; background: linear-gradient(120deg, transparent 32%, rgba(255,255,255,.55) 50%, transparent 68%); background-size: 240% 100%; animation: wpiSweep .9s ease both; }
@keyframes wpiSweep { 0% { background-position: 130% 0; opacity: 0; } 30% { opacity: 1; } 100% { background-position: -130% 0; opacity: 0; } }

/* ================= v1.10.0: WoW-style quest offer panel ================= */
#questOffer { position: absolute; inset: 0; display: none; z-index: 32; background: rgba(4,6,12,.82); align-items: center; justify-content: center; padding: 16px; }
#questOffer.open { display: flex; animation: bIn .2s ease; }
.qo-card { width: min(560px, 96%); max-height: 92%; overflow: auto; border: 2px solid var(--gold); border-radius: 18px;
  background: linear-gradient(180deg, #1a1305 0%, #12131f 40%, #0c1019 100%);
  box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 50px rgba(212,175,55,.16); scrollbar-width: thin; }
.qo-banner { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px;
  background: linear-gradient(180deg, rgba(212,175,55,.22), rgba(212,175,55,0)); border-bottom: 1px solid rgba(212,175,55,.35); }
.qo-giver { color: #ffe9a8; font-weight: 800; letter-spacing: .4px; font-size: 14px; }
.qo-tag { color: #1a1408; background: linear-gradient(180deg, #f5d76e, #d4af37); font-weight: 800; font-size: 10.5px;
  letter-spacing: 2px; padding: 3px 11px; border-radius: 20px; }
.qo-title { font-family: Georgia, 'Times New Roman', serif; color: #ffd166; font-size: 21px; font-weight: 700; padding: 15px 20px 2px; line-height: 1.25;
  /* a quest title is a sentence, not a fixed-width field - it wraps, it never clips */
  overflow-wrap: anywhere; word-break: normal; hyphens: none; text-wrap: balance; }
.qo-story { padding: 6px 20px 4px; color: #d8c8a6; font-size: 14.5px; line-height: 1.6; font-style: italic; }
.qo-story p { margin: 0 0 9px; }
.qo-sec { padding: 8px 20px; }
.qo-h { color: #caa24a; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 5px; }
.qo-obj { color: #e7eef7; font-size: 14px; line-height: 1.5; }
.qo-obj b { color: var(--gold); }
.qo-rew { display: flex; flex-wrap: wrap; gap: 8px; }
.qo-rew .qo-r { background: linear-gradient(180deg, #222c44, #1a2236); border: 1px solid #38456a; border-radius: 10px;
  padding: 7px 12px; font-size: 13px; font-weight: 700; color: #ffe2a0; }
/* The creature the quest is about, dropped into the empty space beside the
   rewards. No frame and no caption: the art IS the label, and the box is taken
   out of the flow (absolute) so it can never make the card taller. */
.qo-foot { position: relative; padding: 0 20px 0 0; }
.qo-foot-main { min-width: 0; }
.qo-mon { position: absolute; right: 20px; bottom: 6px; pointer-events: none; }
.qo-mon canvas { display: block; width: 58px; height: 66px; }
.qo-btns { display: flex; gap: 12px; padding: 14px 20px 20px; }
.qo-btns button { flex: 1; border: none; border-radius: 12px; padding: 13px; font-size: 15px; font-weight: 800; cursor: pointer; transition: transform .14s; }
.qo-btns button:hover { transform: translateY(-2px); }
.qo-accept { background: linear-gradient(180deg, #f5d76e, #d4af37); color: #1a1408; box-shadow: 0 6px 20px rgba(212,175,55,.4); }
.qo-decline { background: linear-gradient(180deg, #2a3147, #1d2336); color: #c7d2e2; border: 1px solid #39425c; }
@media (max-width: 520px) { .qo-title { font-size: 18px; } .qo-story { font-size: 13.5px; }
  .qo-mon { right: 16px; } .qo-mon canvas { width: 48px; height: 55px; } }

/* ================= v1.11.0: badges panel + celebration ================= */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 6px; }
.badge-cell { border-radius: 14px; padding: 14px 12px; text-align: center; border: 1px solid #2c3550;
  background: linear-gradient(180deg, #161d30, #111728); transition: transform .14s; }
.badge-cell:hover { transform: translateY(-2px); }
.badge-cell.locked { opacity: .5; filter: grayscale(0.7); }
.badge-cell.got.tier-bronze { border-color: #b87333; box-shadow: 0 0 16px rgba(184,115,51,.2); }
.badge-cell.got.tier-silver { border-color: #c7ccd6; box-shadow: 0 0 16px rgba(199,204,214,.22); }
.badge-cell.got.tier-gold { border-color: var(--gold); box-shadow: 0 0 18px rgba(212,175,55,.3); }
.badge-ic { font-size: 34px; line-height: 1.1; margin-bottom: 6px; }
.badge-nm { font-weight: 800; font-size: 13.5px; color: #ffe9a8; }
.badge-cell.locked .badge-nm { color: #8b96ab; }
.badge-ds { font-size: 11.5px; color: #aab6c8; margin-top: 4px; line-height: 1.4; }

#badgePop { position: absolute; inset: 0; display: none; z-index: 60; align-items: center; justify-content: center; pointer-events: none; }
#badgePop.show { display: flex; }
#badgePop .bp-card { position: relative; width: min(320px, 84%); text-align: center; padding: 22px 20px 20px;
  border-radius: 20px; background: linear-gradient(180deg, #1b2236, #0e1322); border: 2px solid var(--gold);
  box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 60px rgba(212,175,55,.3); animation: bpIn .5s cubic-bezier(.2,1.3,.4,1); }
#badgePop.tier-silver .bp-card { border-color: #c7ccd6; box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 60px rgba(199,204,214,.3); }
#badgePop.tier-bronze .bp-card { border-color: #b87333; box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 60px rgba(184,115,51,.3); }
@keyframes bpIn { from { opacity: 0; transform: scale(.7) translateY(20px); } }
#badgePop .bp-ic { font-size: 60px; line-height: 1; animation: bpPulse 1.2s ease-in-out infinite; }
@keyframes bpPulse { 50% { transform: scale(1.12); } }
#badgePop .bp-tag { color: var(--gold); font-size: 11.5px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; margin-top: 8px; }
#badgePop .bp-nm { font-size: 21px; font-weight: 800; color: #ffe9a8; margin-top: 4px; }
#badgePop .bp-ds { font-size: 13px; color: #c7d2e2; margin-top: 6px; line-height: 1.45; }
#badgePop .bp-burst { position: absolute; inset: -2px; border-radius: 20px; pointer-events: none;
  background: radial-gradient(circle at 50% 30%, rgba(255,209,102,.25), transparent 60%); animation: bpGlow 1.4s ease-in-out infinite; }
@keyframes bpGlow { 50% { opacity: .55; } }

/* ===================== Academy / lessons / books (v1.32.0) ===================== */
.acad-sec { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #d4af37; margin: 14px 0 6px; }
.acad-list { display: flex; flex-direction: column; gap: 7px; }
.acad-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 13px; border-radius: 11px;
  background: linear-gradient(180deg, rgba(38,48,68,.55), rgba(24,31,46,.55)); border: 1px solid rgba(120,140,180,.18); color: #e7ecf5; cursor: pointer; transition: .15s; }
.acad-row:hover { border-color: rgba(212,175,55,.6); transform: translateY(-1px); }
.acad-row.done { opacity: .82; }
.acad-row.tool { background: linear-gradient(180deg, rgba(20,60,55,.5), rgba(18,40,40,.5)); }
.acad-ic { font-size: 17px; width: 22px; text-align: center; }
.acad-tt { flex: 1; font-weight: 700; font-size: 14px; }
.acad-go { font-size: 11px; color: #93a1b5; background: rgba(0,0,0,.25); padding: 3px 9px; border-radius: 20px; }
.lesson-gfx { background: radial-gradient(circle at 50% 40%, rgba(40,52,74,.5), rgba(14,19,30,.5)); border: 1px solid rgba(120,140,180,.18);
  border-radius: 12px; padding: 8px; margin: 6px 0 12px; }
.lesson-gfx svg { display: block; width: 100%; height: auto; max-height: 190px; }
.lesson-body p { font-size: 14px; line-height: 1.55; color: #dbe2ee; margin: 0 0 9px; }
.lesson-pts { margin: 4px 0 8px; padding-left: 20px; }
.lesson-pts li { font-size: 13px; color: #9fd9b6; margin: 3px 0; }
.lesson-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.lq-prog { font-size: 12px; color: #93a1b5; margin-bottom: 6px; }
.lq-q { font-size: 16px; font-weight: 700; color: #fff; margin: 4px 0 12px; }
.lq-opts { display: flex; flex-direction: column; gap: 8px; }
.lq-opt { text-align: left; padding: 11px 13px; border-radius: 10px; background: rgba(30,40,58,.7); border: 1px solid rgba(120,140,180,.22); color: #e7ecf5; font-size: 14px; cursor: pointer; }
.lq-opt:hover:not(:disabled) { border-color: rgba(212,175,55,.6); }
.lq-opt.right { background: rgba(38,222,129,.22); border-color: #26de81; }
.lq-opt.wrong { background: rgba(255,91,91,.2); border-color: #ff5b5b; }
.lq-why { font-size: 13px; color: #cdd6e6; background: rgba(0,0,0,.25); border-left: 3px solid #d4af37; padding: 9px 12px; border-radius: 6px; margin: 12px 0 0; }
.lesson-result { font-size: 15px; font-weight: 800; padding: 12px; border-radius: 10px; text-align: center; margin: 8px 0; }
.lesson-result.pass { background: rgba(38,222,129,.18); color: #6ff0a8; }
.lesson-result.fail { background: rgba(255,91,91,.16); color: #ff8a8a; }

/* lesson modal header (v1.33.0): clean title row + small round close, not stuck */
.lesson-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 2px 0 12px; margin-bottom: 14px; border-bottom: 1px solid rgba(212,175,55,.28); }
.lesson-head h3 { margin: 0; font-size: 21px; line-height: 1.2; }
.lesson-x { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(120,140,180,.3);
  background: rgba(30,40,58,.7); color: #cdd6e6; font-size: 16px; line-height: 1; padding: 0; cursor: pointer; transition: .15s;
  display: inline-flex; align-items: center; justify-content: center; }
.lesson-x:hover { background: rgba(255,91,91,.2); border-color: #ff5b5b; color: #fff; }

/* ---------------- daily / weekly challenges ---------------- */
#dailyBtn { position: relative; }
.ch-dot {
  display: inline-block; min-width: 16px; height: 16px; line-height: 16px;
  padding: 0 4px; margin-left: 5px; border-radius: 9px;
  background: #ff5b5b; color: #fff; font-size: 10px; font-weight: 800; text-align: center;
  box-shadow: 0 0 0 2px rgba(255,91,91,0.35);
}
.ch-sub { font-size: 12px; color: #93a1b5; margin: 2px 0 12px; }
.ch-sec {
  font-size: 12px; font-weight: 800; color: #d4af37; letter-spacing: .4px;
  margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid rgba(212,175,55,0.18);
}
.ch-list { display: flex; flex-direction: column; gap: 8px; }
.ch-row {
  display: flex; align-items: center; gap: 10px;
  background: #141c2b; border: 1px solid #20293c; border-radius: 12px; padding: 10px 12px;
}
.ch-row.ready { border-color: #d4af37; box-shadow: 0 0 12px rgba(212,175,55,0.22); }
.ch-row.claimed { opacity: .55; }
.ch-ic { font-size: 22px; width: 28px; text-align: center; flex: 0 0 auto; }
.ch-mid { flex: 1 1 auto; min-width: 0; }
.ch-tt { font-size: 13px; font-weight: 700; color: #e6ecf6; margin-bottom: 6px; }
.ch-bar { height: 8px; background: #0e1521; border-radius: 5px; overflow: hidden; }
.ch-bar.big { height: 11px; }
.ch-fill { height: 100%; background: linear-gradient(90deg,#26de81,#1fa968); border-radius: 5px; transition: width .35s ease; }
.ch-fill.gold { background: linear-gradient(90deg,#ffd97a,#d4af37); }
.ch-meta { font-size: 11px; color: #8da0bb; margin-top: 5px; }
.ch-act { flex: 0 0 auto; display: flex; align-items: center; }
.ch-pct { font-size: 12px; font-weight: 700; color: #93a1b5; }
.ch-ok { font-size: 12px; color: #26de81; font-weight: 700; }
.ch-claim { padding: 6px 12px !important; font-size: 12px !important; }
.ch-streaknow { font-size: 13px; color: #cdd6e6; margin-bottom: 10px; }
.ch-streaknow b { color: #ff9f43; font-size: 16px; }
.ch-tiers { display: flex; gap: 8px; flex-wrap: wrap; }
.ch-tier {
  flex: 1 1 0; min-width: 78px; text-align: center;
  background: #141c2b; border: 1px solid #20293c; border-radius: 12px; padding: 10px 6px;
}
.ch-tier.ready { border-color: #d4af37; box-shadow: 0 0 12px rgba(212,175,55,0.22); }
.ch-tier.locked { opacity: .5; }
.ch-tier.claimed { opacity: .55; }
.ch-tier-d { font-size: 20px; font-weight: 800; color: #ff9f43; line-height: 1; }
.ch-tier-d span { display: block; font-size: 9px; font-weight: 600; color: #8da0bb; margin-top: 2px; }
.ch-tier-r { font-size: 11px; color: #cdd6e6; margin: 8px 0; line-height: 1.35; }
.ch-tier-b { font-size: 14px; }
.ch-tier-b.ch-claim { width: 100%; padding: 5px 0 !important; font-size: 11px !important; }
.ch-week { background: #141c2b; border: 1px solid #20293c; border-radius: 12px; padding: 12px; }
.ch-chest { font-size: 12px; color: #cdd6e6; margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ch-race { display: flex; flex-direction: column; gap: 5px; }
.ch-rrow {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  background: #141c2b; border: 1px solid #20293c; border-radius: 9px; font-size: 13px;
}
.ch-rrow.me { border-color: #d4af37; background: #1a2233; }
.ch-rk { font-weight: 800; color: #d4af37; width: 22px; text-align: center; flex: 0 0 auto; }
.ch-rn { flex: 1 1 auto; color: #e6ecf6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-rp { flex: 0 0 auto; color: #26de81; font-weight: 700; }

/* ---------------- market: TradingView-style + Binance dark-gold ---------------- */
.modal-card.mkt-wide { width: min(1040px, 98%); }
.tf-tabs.ctype { margin-left: 4px; }
.tf-tabs.ctype .tf { padding: 4px 9px; font-size: 13px; }
.tf.on { background: var(--gold); border-color: var(--gold); color: #15110a; }
.mkt-legend {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  font-size: 12px; color: #9fb0c8; font-variant-numeric: tabular-nums;
  padding: 4px 2px 8px; min-height: 20px;
}
.mkt-legend b { color: #e6ecf6; font-weight: 700; }
.mkt-legend .up { color: var(--green); font-weight: 700; }
.mkt-legend .down { color: var(--red); font-weight: 700; }
.mkt-legend .ma { color: #5aa0ff; font-weight: 700; }
.mkt-canvas {
  width: 100%; height: 372px; display: block;
  background: #0a0f1a; border: 1px solid #28324d; border-radius: 12px;
  cursor: crosshair;
}
.mkt-trade {
  display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;
  margin-top: 14px; padding: 14px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(212,175,55,0.06), rgba(212,175,55,0.01));
  border: 1px solid rgba(212,175,55,0.22);
}
.mkt-amt { flex: 1 1 280px; min-width: 240px; }
.mkt-amt > label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--mut); margin-bottom: 6px; }
.mkt-amt .size-in { width: 100%; box-sizing: border-box; }
.mkt-chips { display: flex; gap: 6px; margin-top: 8px; }
.mkt-chips .chip { flex: 1; text-align: center; }
.mkt-chips .chip[data-sz="max"] { color: var(--gold); border-color: rgba(212,175,55,0.5); font-weight: 800; }
.mkt-total { margin-top: 8px; font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; }
.mkt-total b { color: var(--gold); font-size: 14px; }
.mkt-btns { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; min-width: 200px; }
.mkt-btns .long-btn, .mkt-btns .short-btn { width: 100%; box-sizing: border-box; }
.side-tag.BOT { background: rgba(212,175,55,.16); color: var(--gold); }
table.pos tr.bot-row td { background: rgba(212,175,55,0.04); }
.x-btn.edit { padding: 4px 9px; }
@media (max-width: 720px) {
  .mkt-trade { flex-direction: column; align-items: stretch; }
  .mkt-btns { min-width: 0; }
  .mkt-canvas { height: 300px; }
}

/* ---------------- market v2: 80% chart + Bybit ticket (TP/SL) ---------------- */
.modal-card.mkt-full { width: min(1280px, 98vw); }
.mkt-layout { display: flex; gap: 16px; align-items: flex-start; }
.mkt-chartcol { flex: 1 1 0%; min-width: 0; }
.mkt-side { flex: 0 0 312px; max-width: 330px; display: flex; flex-direction: column; gap: 12px; }
.mkt-canvas { width: 100%; height: clamp(320px, 70vh, 900px); display: block; background: #0a0f1a; border: 1px solid #28324d; border-radius: 12px; cursor: crosshair; }
.mkt-droghint { font-size: 11px; color: #7d8aa3; margin: 6px 2px 0; }
.mkt-ticket { background: linear-gradient(180deg, rgba(212,175,55,0.06), rgba(212,175,55,0.01)); border: 1px solid rgba(212,175,55,0.22); border-radius: 14px; padding: 14px; }
.tk-avail { font-size: 12px; color: var(--mut); margin-bottom: 10px; }
.tk-avail b { color: var(--gold); }
.tk-field { margin-bottom: 10px; }
.tk-field > label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--mut); margin-bottom: 5px; }
.tk-field .size-in { width: 100%; box-sizing: border-box; }
.tk-slider { width: 100%; accent-color: var(--gold); margin: 2px 0 8px; }
.tk-pcts { display: flex; gap: 6px; margin-bottom: 12px; }
.tk-pcts button { flex: 1; background: #1b2336; border: 1px solid #36436a; color: #cdd8ea; padding: 5px 0; border-radius: 8px; font-size: 12px; cursor: pointer; }
.tk-pcts button:hover { border-color: var(--gold); color: var(--gold); }
.tk-total { font-size: 12px; color: var(--mut); margin: 4px 0 12px; }
.tk-total b { color: var(--gold); font-size: 15px; }
.tk-btns { display: flex; flex-direction: column; gap: 8px; }
.tk-btns .long-btn, .tk-btns .short-btn { width: 100%; box-sizing: border-box; }
.tp-mini { color: var(--green); font-size: 10px; }
.sl-mini { color: var(--red); font-size: 10px; }
.side-tag.BOT { background: rgba(212,175,55,.16); color: var(--gold); }
table.pos tr.bot-row td { background: rgba(212,175,55,0.04); }
.x-btn.edit { padding: 4px 9px; }
@media (max-width: 760px) {
  .mkt-layout { flex-direction: column; }
  .mkt-side { flex: 1 1 100%; max-width: none; }
  .mkt-canvas { height: 54vh; }
}

/* ---------------- market v2.1 polish: dark fields, circle close, juicy side-by-side buttons, orders below ---------------- */
#wofWrap input.size-in, #wofWrap .size-in {
  background: #0e1422 !important; color: #e9eef5 !important; -webkit-text-fill-color: #e9eef5 !important;
  border: 1px solid #36436a !important;
}
#wofWrap input.size-in::placeholder { color: #5d6f92 !important; }
.mkt-ticket .tk-btns { flex-direction: row; gap: 10px; }
.mkt-ticket .tk-btns .long-btn, .mkt-ticket .tk-btns .short-btn {
  flex: 1; font-size: 15px; font-weight: 900; letter-spacing: .3px; padding: 15px 0; border-radius: 13px;
  text-shadow: 0 1px 0 rgba(255,255,255,.25); transition: transform .12s ease, filter .12s ease;
}
.mkt-ticket .tk-btns .long-btn { animation: tkpulseG 1.8s ease-in-out infinite; }
.mkt-ticket .tk-btns .short-btn { animation: tkpulseR 1.8s ease-in-out infinite; }
.mkt-ticket .tk-btns .long-btn:hover, .mkt-ticket .tk-btns .short-btn:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.1); }
.mkt-ticket .tk-btns .long-btn:active, .mkt-ticket .tk-btns .short-btn:active { transform: translateY(0) scale(.98); }
@keyframes tkpulseG { 0%, 100% { box-shadow: 0 5px 16px rgba(38,222,129,.35); } 50% { box-shadow: 0 9px 32px rgba(38,222,129,.75); } }
@keyframes tkpulseR { 0%, 100% { box-shadow: 0 5px 16px rgba(255,71,87,.35); } 50% { box-shadow: 0 9px 32px rgba(255,71,87,.75); } }
table.pos.mkt-positions { width: 100%; margin-top: 18px; clear: both; }

/* ---------------- market v2.3: editable TP/SL columns ---------------- */
.tpsl-cell { cursor: pointer; white-space: nowrap; }
.tpsl-cell .v { font-weight: 700; }
.tpsl-cell.tp .v { color: var(--green); }
.tpsl-cell.sl .v { color: var(--red); }
.tpsl-cell .set { color: #5d6f92; font-size: 11px; }
.tpsl-cell:hover .set { color: var(--gold); }
.tpsl-clear { background: transparent; border: none; color: #5d6f92; cursor: pointer; font-size: 10px; padding: 0 2px; }
.tpsl-clear:hover { color: var(--red); }
input.tpsl-in { width: 74px !important; padding: 3px 6px !important; font-size: 12px !important; }
table.pos td.muted { color: #5d6f92; }

/* ---------------- market v2.4: edit icon + close-order text ---------------- */
.tpsl-edit { background: transparent; border: none; color: #5d6f92; cursor: pointer; font-size: 12px; padding: 0 2px; }
.tpsl-edit:hover { color: var(--gold); }
.tpsl-set { background: transparent; border: 1px dashed #36436a; color: #5d6f92; border-radius: 6px; font-size: 11px; padding: 2px 8px; cursor: pointer; }
.tpsl-set:hover { color: var(--gold); border-color: var(--gold); }
.x-btn.close-order { color: #ff9aa2; border-color: #5a2a30; font-weight: 700; white-space: nowrap; }
.x-btn.close-order:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------------- market v2.5: open/history tabs ---------------- */
.mkt-tabs { display: flex; gap: 8px; margin: 16px 0 8px; }
.mkt-tabs .mt { background: #1b2336; border: 1px solid #36436a; color: #cdd8ea; padding: 6px 16px; border-radius: 9px; font-size: 13px; cursor: pointer; }
.mkt-tabs .mt.on { background: var(--gold); border-color: var(--gold); color: #15110a; font-weight: 700; }
.mkt-hist { width: 100%; }

/* ---------------- market v2.5b: candle countdown ---------------- */
.mkt-cd { font-size: 12px; color: #7d8aa3; font-variant-numeric: tabular-nums; margin-left: 6px; }

/* ---------------- first-run intro (why + how) ---------------- */
.wof-intro {
  position: fixed; inset: 0; z-index: 2147483600;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; overflow: hidden;
  background: radial-gradient(circle at 50% 28%, #14213b 0%, #070b14 72%);
  --wi-accent: #d4af37;
  animation: wiIn .4s ease;
}
.wof-intro.wi-out { animation: wiOut .36s ease forwards; }
@keyframes wiIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wiOut { to { opacity: 0; transform: scale(1.04); } }
.wof-intro .wi-aurora {
  position: absolute; inset: -30%; pointer-events: none;
  background:
    radial-gradient(closest-side, var(--wi-accent), transparent 60%) 20% 25% / 55% 55% no-repeat,
    radial-gradient(closest-side, rgba(58,210,159,.35), transparent 60%) 80% 72% / 60% 60% no-repeat,
    radial-gradient(closest-side, rgba(127,193,255,.32), transparent 60%) 62% 18% / 50% 50% no-repeat;
  filter: blur(42px); opacity: .5; animation: wiAur 14s linear infinite;
}
@keyframes wiAur { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.15); } 100% { transform: rotate(360deg) scale(1); } }
.wof-intro .wi-stage { position: relative; max-width: 560px; z-index: 2; }
.wof-intro .wi-icon { font-size: 84px; line-height: 1; filter: drop-shadow(0 6px 18px rgba(0,0,0,.6)); }
.wof-intro .wi-title { color: #fff; font-size: 30px; margin: 14px 0 8px; font-weight: 800; letter-spacing: .3px; }
.wof-intro .wi-body { color: #c7d4e8; font-size: 17px; line-height: 1.55; margin: 0 auto; max-width: 520px; }
.wof-intro .wi-anim .wi-icon { animation: wiPop .6s cubic-bezier(.2,1.4,.4,1); }
.wof-intro .wi-anim .wi-title { animation: wiUp .5s ease both; }
.wof-intro .wi-anim .wi-body { animation: wiUp .6s .12s ease both; }
@keyframes wiPop { 0% { transform: scale(.3) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.15) rotate(4deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes wiUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.wof-intro .wi-dots { display: flex; gap: 9px; margin: 28px 0 18px; z-index: 2; }
.wof-intro .wi-dot { width: 9px; height: 9px; border-radius: 50%; background: #2a3650; transition: .3s; }
.wof-intro .wi-dot.on { background: var(--wi-accent); transform: scale(1.3); box-shadow: 0 0 12px var(--wi-accent); }
.wof-intro .wi-next {
  z-index: 2; border: 0; cursor: pointer; font-weight: 700; font-size: 16px;
  padding: 13px 34px; border-radius: 30px; color: #0a0f1a;
  background: linear-gradient(135deg, #ffe89a, #d4af37);
  box-shadow: 0 6px 22px rgba(212,175,55,.4); transition: transform .15s, box-shadow .15s;
}
.wof-intro .wi-next:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 30px rgba(212,175,55,.53); }
.wof-intro .wi-next.wi-cta { animation: wiPulse 1.4s ease-in-out infinite; font-size: 18px; padding: 15px 40px; }
@keyframes wiPulse { 0%, 100% { box-shadow: 0 6px 22px rgba(212,175,55,.4); } 50% { box-shadow: 0 10px 34px rgba(255,232,154,.67); } }
.wof-intro .wi-skip {
  position: absolute; top: 16px; right: 18px; z-index: 3;
  background: rgba(255,255,255,.08); color: #cdd8ec;
  border: 1px solid rgba(255,255,255,.13); border-radius: 20px;
  padding: 7px 14px; font-size: 13px; cursor: pointer;
}
.wof-intro .wi-skip:hover { background: rgba(255,255,255,.15); }
.wof-intro .wi-confetti { position: absolute; top: 42%; left: 50%; z-index: 2; pointer-events: none; }
.wof-intro .wi-confetti i { position: absolute; width: 9px; height: 14px; border-radius: 2px; opacity: 0; animation: wiConf 1.15s ease-out forwards; }
@keyframes wiConf { 0% { opacity: 1; transform: translate(0,0) rotate(0); } 100% { opacity: 0; transform: translate(var(--cx), var(--cy)) rotate(var(--cr)); } }
@media (max-width: 560px) {
  .wof-intro .wi-icon { font-size: 64px; }
  .wof-intro .wi-title { font-size: 24px; }
  .wof-intro .wi-body { font-size: 15px; }
  .wof-intro .wi-next { font-size: 15px; padding: 12px 28px; }
}

/* ---------------- intro: FJU logo + language picker ---------------- */
.wof-intro .wi-logo { height: 92px; width: auto; display: block; margin: 0 auto; filter: drop-shadow(0 0 22px rgba(212,175,55,.55)); }
.wof-intro .wi-logo-big { height: 112px; margin-bottom: 4px; }
.wof-intro .wi-anim .wi-logo { animation: wiPop .6s cubic-bezier(.2,1.4,.4,1); }
.wof-intro .wi-langs { display: flex; gap: 14px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.wof-intro .wi-anim .wi-langs { animation: wiUp .6s .12s ease both; }
.wof-intro .wi-lang {
  cursor: pointer; font-weight: 700; font-size: 17px; color: #fff;
  padding: 14px 26px; border-radius: 16px;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(212,175,55,.5);
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
.wof-intro .wi-lang:hover { transform: translateY(-2px) scale(1.04); background: rgba(212,175,55,.16); border-color: #d4af37; box-shadow: 0 8px 26px rgba(212,175,55,.4); }
@media (max-width: 560px) { .wof-intro .wi-logo { height: 74px; } .wof-intro .wi-logo-big { height: 90px; } .wof-intro .wi-lang { font-size: 15px; padding: 12px 20px; } }


/* ==================== FJU BARBER salon panels ==================== */
.salon-sheet{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(560px,94%);max-height:60%;z-index:66;
  background:linear-gradient(160deg,rgba(22,18,12,.97),rgba(10,10,16,.98));border:1.5px solid rgba(212,175,55,.7);
  border-bottom:none;border-radius:18px 18px 0 0;box-shadow:0 -14px 40px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden;
  animation:salonUp .22s ease}
@keyframes salonUp{from{transform:translate(-50%,40px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.salon-sheet .ss-head{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;border-bottom:1px solid rgba(212,175,55,.25)}
.salon-sheet .ss-head span{font-weight:800;color:#ffe6a3;font-size:14.5px;flex:1}
.salon-sheet .ss-head #ssPrev{width:34px;height:42px;background:rgba(255,255,255,.05);border:1px solid rgba(212,175,55,.4);border-radius:8px;margin-right:9px}
.ss-x{background:linear-gradient(180deg,#f4d67a,#d4af37);color:#241c05;border:none;font-weight:800;padding:7px 14px;border-radius:9px;cursor:pointer;font-size:12.5px}
.ss-body{padding:12px 15px;overflow-y:auto}
.ss-sec{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#9fb0c8;margin:12px 0 7px}
.ss-sec:first-child{margin-top:0}
.ss-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.ss-cell{cursor:pointer;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.10);border-radius:11px;padding:5px 2px 3px;display:flex;flex-direction:column;align-items:center}
.ss-cell.sel{border-color:#d4af37;background:rgba(212,175,55,.16)}
.ss-cell canvas{width:52px;height:60px}
.ss-l{font-size:9.5px;color:#cdd5e4;margin-top:2px;text-align:center;line-height:1.05}
.ss-sw{display:flex;flex-wrap:wrap;gap:7px}
.ss-sw .sw{width:27px;height:27px;border-radius:8px;border:2px solid rgba(255,255,255,.12);cursor:pointer;padding:0}
.ss-sw .sw.sel{border-color:#ffe6a3;box-shadow:0 0 0 2px rgba(212,175,55,.45)}
.ss-row{display:flex;gap:8px}
.ss-chip{cursor:pointer;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#dfe6f2;border-radius:9px;padding:8px 16px;font-size:13px;font-weight:700}
.ss-chip.sel{border-color:#d4af37;background:rgba(212,175,55,.18);color:#ffe6a3}
.salon-exit{position:absolute;inset:0;z-index:68;display:flex;align-items:center;justify-content:center;background:rgba(4,6,10,.55);backdrop-filter:blur(3px)}
.se-card{background:linear-gradient(160deg,rgba(22,18,12,.98),rgba(10,10,16,.98));border:1.5px solid rgba(212,175,55,.7);border-radius:16px;padding:20px 22px;width:min(420px,92vw);text-align:center;box-shadow:0 16px 44px rgba(0,0,0,.6)}
.se-t{font-weight:800;color:#ffe6a3;font-size:16px;margin-bottom:8px}
.se-fee{color:#cdd5e4;font-size:13px;margin-bottom:16px}.se-fee b{color:#ffd97a;font-size:15px}
.se-btns{display:flex;flex-direction:column;gap:8px}
.se-btns .gold{background:linear-gradient(180deg,#f4d67a,#d4af37);color:#241c05;border:none;font-weight:800;padding:11px;border-radius:10px;cursor:pointer;font-size:14px}
.se-btns .ghost{background:transparent;border:1px solid rgba(255,255,255,.22);color:#dfe6f2;padding:9px;border-radius:10px;cursor:pointer}
.se-btns .ghost2{background:transparent;border:none;color:#8ea0b8;padding:4px;cursor:pointer;font-size:12.5px}


/* FJU BARBER studio: full-view two-column layout (preview left, options right) */
.salon-sheet{position:absolute;inset:14px;transform:none;width:auto;max-height:none;z-index:66;
  display:flex;flex-direction:column;overflow:hidden}
.salon-sheet .ss-main{display:flex;flex:1;min-height:0}
.salon-sheet .ss-preview{width:36%;min-width:200px;max-width:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 32%,rgba(30,26,18,.55),rgba(6,7,12,.55));border-right:1px solid rgba(212,175,55,.3);padding:10px}
.salon-sheet .ss-preview canvas{width:100%;max-width:230px;height:auto}
.salon-sheet .ss-rot{display:flex;gap:8px;margin-top:6px}
.salon-sheet .ss-body{flex:1;overflow-y:auto;padding:14px 16px;min-width:0}
.salon-sheet .ss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.salon-sheet .mini-btn{cursor:pointer;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#dfe6f2;border-radius:9px;padding:7px 12px;font-size:12.5px;font-weight:700}
.salon-sheet .mini-btn.sel{border-color:#d4af37;background:rgba(212,175,55,.18);color:#ffe6a3}
@media(max-width:640px){.salon-sheet .ss-main{flex-direction:column}.salon-sheet .ss-preview{width:auto;min-width:0;max-width:none;height:180px;border-right:none;border-bottom:1px solid rgba(212,175,55,.3)}}

/* skills: knowledge-driven */
.sp-hint{font-size:11.5px;color:#93a1b5;margin:2px 0 12px;line-height:1.4}
.snode .sn-name{display:block;font-weight:700}
.snode .sreq{display:block;margin-top:5px;font-size:10.5px;color:#8ea0b8}
.snode .sreq.done{color:#2ee08a;font-weight:700}
.snode.locked{opacity:.72}
.snode.unlocked{border-color:rgba(46,224,138,.5)}

/* weather + server time row in the player card */
#hud .hud-wx{display:block;margin-top:3px;font-size:11px;color:#c3d4e8;letter-spacing:.2px;white-space:nowrap}
#hud .hud-ev{display:block;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:#c3d4e8;letter-spacing:.2px;white-space:nowrap}


/* Per-panel edge bubbles (mobile-style side tabs) to hide/show each panel */
.wof-bubble { position: absolute; z-index: 20; pointer-events: auto; background: rgba(13,18,29,.92);
  border: 1px solid rgba(212,175,55,.6); color: #ffd97a; cursor: pointer; font-size: 15px; line-height: 1;
  padding: 7px 9px; box-shadow: 0 4px 14px rgba(0,0,0,.4); transition: background .15s ease, transform .15s ease; }
.wof-bubble:hover { background: #243049; transform: translateY(-1px); }
.wof-bubble.bub-l  { top: 16px; left: 0; border-left: none; border-radius: 0 12px 12px 0; }
.wof-bubble.bub-r  { top: 16px; right: 0; border-right: none; border-radius: 12px 0 0 12px; }
.wof-bubble.bub-bl { bottom: 16px; left: 0; border-left: none; border-radius: 0 12px 12px 0; }
.wof-collapsed { display: none !important; }

/* Gold "dopamine" contest banner on top of the leaderboard */
.wof-ctB { position: relative; margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(180deg, #12100a, #0a0906); border: 2px solid transparent;
  box-shadow: 0 0 22px rgba(212,175,55,.30), inset 0 0 24px rgba(212,175,55,.06); }
.wof-ctB::before { content: ''; position: absolute; inset: -2px; border-radius: 12px; padding: 2px;
  background: conic-gradient(from var(--wofAng,0deg), #8a6d1d, #d4af37, #fff2b8, #ffd97a, #d4af37, #8a6d1d);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; animation: wofGoldSpin 3s linear infinite; pointer-events: none; }
.wof-ctB-head { font-weight: 900; letter-spacing: .06em; color: #ffe08a; font-size: 13.5px;
  text-shadow: 0 0 10px rgba(212,175,55,.5); }
.wof-ctB-prize { margin-top: 6px; color: #fff2b8; font-size: 14px; font-weight: 700; }
.wof-ctB-row { margin-top: 4px; color: #d6c185; font-size: 12px; }

/* blue [NPC] chip in the leaderboard */
.lb-npc { display:inline-block; background:linear-gradient(180deg,#3f8bff,#2f6fed); color:#fff; font-size:9px; font-weight:800; padding:1px 5px 2px; border-radius:6px; margin-left:6px; vertical-align:middle; letter-spacing:.6px; box-shadow:0 1px 3px rgba(47,111,237,.5); }
.lb-ai { display:inline-block; background:linear-gradient(180deg,#ffb347,#f7931a); color:#fff; font-size:9px; font-weight:800; padding:1px 5px 2px; border-radius:6px; margin-left:6px; vertical-align:middle; letter-spacing:.6px; box-shadow:0 1px 3px rgba(247,147,26,.55); }
/* ---- AI Control (local MCP) launcher + panel ---- */
.wof-bubble.bub-r2 { top: 62px; right: 0; border-right: none; border-radius: 12px 0 0 12px; font-size: 15px; }
.mcp-panel { position:absolute; right:14px; top:108px; width:250px; max-width:280px; max-height:56vh; overflow:auto; z-index:41; background:rgba(11,15,24,.72); border:1px solid rgba(212,175,55,.55); border-radius:14px; color:#dfe4ee; box-shadow:0 8px 24px rgba(0,0,0,.35); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); pointer-events:auto; font-size:12.5px; }
.mcp-panel.hidden { display:none; }
.mcp-head { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid rgba(212,175,55,.3); color:#ffd97a; font-weight:800; font-size:12px; letter-spacing:.5px; }
.mcp-x { background:none; border:none; color:#9aa6bd; font-size:14px; cursor:pointer; }
.mcp-body { padding:10px 12px; display:flex; flex-direction:column; gap:9px; }
.mcp-status { display:flex; align-items:center; gap:8px; font-weight:700; }
.mcp-dot { width:10px; height:10px; border-radius:50%; background:#6b7280; }
.mcp-portrow { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mcp-portrow input { width:88px; background:#0b0f1a; border:1px solid rgba(255,255,255,.15); color:#fff; border-radius:8px; padding:5px 8px; font-size:12.5px; }
.mcp-btns button { width:100%; border-radius:9px; font-weight:800; padding:8px; cursor:pointer; border:1px solid rgba(247,147,26,.6); }
.mcp-connect { display:block; width:100%; background:linear-gradient(180deg,#f5d76e,#d4af37); color:#1a1408; border:none; border-radius:10px; padding:9px 10px; font-weight:800; letter-spacing:.4px; cursor:pointer; transition:transform .14s; }
.mcp-connect:hover { transform:translateY(-1px); }
.mcp-actprice { text-align:center; font-size:12px; color:#cdd5e4; margin-top:4px; }
.mcp-actprice b { color:#ffd97a; font-weight:800; }
.mcp-cap { display:flex; flex-direction:column; gap:5px; margin-top:2px; padding-top:8px; border-top:1px solid rgba(212,175,55,.18); }
.mcp-caprow { display:flex; align-items:center; gap:6px; }
.mcp-caprow > span { color:#ffd97a; font-weight:800; }
.mcp-caprow input { flex:1 1 auto; min-width:0; background:#0b0f1a; border:1px solid rgba(247,147,26,.4); color:#ffd9a3; border-radius:8px; padding:6px 8px; font-size:12px; }
.mcp-capsave { flex:0 0 auto; background:linear-gradient(180deg,#ffd97a,#e0a92f); color:#1a1206; border:none; border-radius:8px; padding:6px 10px; font-weight:800; cursor:pointer; }
.mcp-capinfo { font-size:10.5px; color:#8b96ab; line-height:1.4; }
.mcp-price-box { background:rgba(212,175,55,.10); border:1px solid rgba(212,175,55,.35); border-radius:10px; padding:10px 12px; font-size:14px; color:#ffe6a3; margin-top:10px; }
.mcp-price-box b { color:#ffd97a; font-size:16px; }
.mcp-price-sub { font-size:11.5px; color:#9aa6bd; margin-top:3px; }
.mcp-disconnect { background:rgba(20,26,40,.9); color:#ffb0b0; border-color:rgba(255,120,120,.5); }
.mcp-perms { display:flex; flex-direction:column; gap:5px; }
.mcp-perm-h { font-size:11px; color:#8b96ab; text-transform:uppercase; letter-spacing:.6px; }
.mcp-perms label { display:flex; align-items:center; gap:7px; cursor:pointer; }
.mcp-ai-ind { background:rgba(247,147,26,.16); color:#ffb347; border:1px solid rgba(247,147,26,.5); border-radius:8px; padding:6px 8px; font-weight:800; text-align:center; }
.mcp-note { font-size:10.5px; color:#7d8aa3; line-height:1.4; }
.mcp-urlwrap { display:flex; gap:6px; align-items:center; }
.mcp-urlwrap input { flex:1 1 auto; min-width:0; background:#0b0f1a; border:1px solid rgba(247,147,26,.4); color:#ffd9a3; border-radius:8px; padding:6px 8px; font-size:11px; }
.mcp-copy { flex:0 0 auto; background:linear-gradient(180deg,#ffd97a,#e0a92f); color:#1a1206; border:none; border-radius:8px; padding:6px 10px; font-weight:800; cursor:pointer; }
.mcp-revoke { width:100%; margin-top:7px; background:rgba(20,26,40,.9); color:#9aa6bd; border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:6px; font-size:11.5px; cursor:pointer; }
.mcp-revoke:hover { color:#ffb0b0; border-color:rgba(255,120,120,.4); }
@media (pointer:coarse) { .mcp-panel { top:auto; bottom:150px; } }
/* on-screen AI activity feed (watch the AI play as a player) */
.mcp-log { position:absolute; left:14px; bottom:64px; width:250px; max-width:70vw; z-index:41; background:rgba(11,15,24,.72); border:1px solid rgba(247,147,26,.5); border-radius:12px; color:#dfe4ee; box-shadow:0 8px 24px rgba(0,0,0,.35); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); pointer-events:none; font-size:12px; overflow:hidden; }
.mcp-log.hidden { display:none; }
.mcp-log-h { padding:7px 12px; border-bottom:1px solid rgba(247,147,26,.3); color:#ffb347; font-weight:800; font-size:11px; letter-spacing:.5px; }
.mcp-log-list { padding:6px 12px 10px; display:flex; flex-direction:column; gap:3px; }
.mcp-log-row { color:#cdd5e4; line-height:1.35; }
.mcp-log-row:first-child { color:#ffe6a3; font-weight:700; }
@media (pointer:coarse) { .mcp-log { bottom:auto; top:70px; left:8px; width:200px; } }
/* AI hunt cinematic (reuses the battle overlay so the human watches the real fight) */
#duelAsk .mcp-fx { text-align:center; font-size:20px; font-weight:900; color:#ffe08a; padding:14px 10px; letter-spacing:.3px; }
#duelAsk .mcp-fx.win { color:#26de81; text-shadow:0 0 16px rgba(38,222,129,.5); }
#duelAsk .mcp-fx.lose { color:#ff8a8a; }
#duelAsk .mcp-fx-rew { text-align:center; font-size:17px; font-weight:800; color:#ffd97a; margin-top:4px; }

/* ============================================================
   WORLD OF FJU - logged-out landing (dopamine sales + login)
   ============================================================ */
.wof-land { --gold:#d4af37; --gold2:#ffe08a; color:#e9eef5;
  font-family:'Segoe UI',system-ui,sans-serif; max-width:1080px; margin:0 auto; padding:8px 16px 48px; }
.wof-land * { box-sizing:border-box; }
.wof-land-hero { position:relative; text-align:center; padding:44px 20px 40px; border-radius:22px;
  background:radial-gradient(120% 140% at 50% -10%, rgba(212,175,55,.16), rgba(6,8,14,0) 60%), linear-gradient(180deg,#0c0f17,#070910);
  border:1px solid rgba(212,175,55,.28); box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 0 60px rgba(212,175,55,.05); overflow:hidden; }
.wof-land-hero::before { content:''; position:absolute; inset:-2px; border-radius:22px; padding:2px; pointer-events:none;
  background:conic-gradient(from var(--wofAng,0deg), rgba(212,175,55,.0), var(--gold), rgba(255,224,138,.9), var(--gold), rgba(212,175,55,0));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:wofGoldSpin 6s linear infinite; opacity:.7; }
.wof-land-logo { display:inline-flex; align-items:center; gap:12px; margin-bottom:18px; }
.wof-land-logo img { width:44px; height:44px; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(212,175,55,.5)); }
.wof-land-logo span { font-weight:900; letter-spacing:3px; font-size:18px;
  background:linear-gradient(180deg,#fff2c4,var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.wof-land-h1 { font-size:clamp(28px,5vw,46px); line-height:1.08; margin:6px auto 14px; max-width:16ch; font-weight:800; }
.wof-land-h1 em { font-style:normal; color:var(--gold2);
  background:linear-gradient(180deg,#fff2c4,var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.wof-land-sub { color:#b9c4d6; font-size:clamp(14px,2vw,17px); line-height:1.6; max-width:60ch; margin:0 auto 26px; }
.wof-land-cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; align-items:center; }
.wof-land-cta2 { margin-top:26px; }
.wof-gold-btn.wof-land-play { font-size:17px; padding:15px 30px; border-radius:14px;
  background:linear-gradient(180deg,#ffe08a,#d4af37); color:#1a1408; font-weight:800; border:none; cursor:pointer;
  box-shadow:0 10px 26px rgba(212,175,55,.45); text-decoration:none; display:inline-flex; align-items:center; transition:transform .12s ease, box-shadow .3s ease; }
.wof-gold-btn.wof-land-play:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(212,175,55,.7); color:#1a1408; }
.wof-land-ghost { font-size:15px; padding:14px 22px; border-radius:14px; cursor:pointer;
  background:rgba(19,24,37,.7); color:#ffd97a; border:1px solid rgba(212,175,55,.5); font-weight:700; transition:background .15s ease,transform .12s ease; }
.wof-land-ghost:hover { background:#243049; transform:translateY(-1px); }
.wof-land-invite { margin:20px auto 0; max-width:460px; }
.wof-land-invite-row { display:flex; gap:8px; }
.wof-land-invite input { flex:1; padding:13px 15px; border-radius:12px; border:1px solid rgba(212,175,55,.45);
  background:#0a0d14; color:#fff; font-size:15px; letter-spacing:1px; }
.wof-land-invite input:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.18); }
.wof-land-invite .wof-gold-btn { padding:13px 22px; border-radius:12px; background:linear-gradient(180deg,#ffe08a,#d4af37);
  color:#1a1408; font-weight:800; border:none; cursor:pointer; }
.wof-land-note { color:#93a1b5; font-size:12.5px; margin-top:9px; line-height:1.5; }
.wof-land-feats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; }
.wof-land-card { background:linear-gradient(180deg,#0d1119,#090b12); border:1px solid rgba(82,100,140,.28);
  border-radius:16px; padding:22px 20px; transition:transform .15s ease, border-color .2s ease, box-shadow .3s ease; }
.wof-land-card:hover { transform:translateY(-3px); border-color:rgba(212,175,55,.55); box-shadow:0 16px 34px rgba(0,0,0,.4); }
.wof-land-ico { font-size:30px; margin-bottom:10px; }
.wof-land-card h3 { font-size:17px; margin:0 0 7px; color:#ffe08a; }
.wof-land-card p { font-size:13.5px; color:#aab6c8; line-height:1.55; margin:0; }
.wof-land-steps { margin-top:40px; text-align:center; }
.wof-land-h2 { font-size:clamp(22px,3.4vw,30px); margin:0 0 22px; font-weight:800;
  background:linear-gradient(180deg,#fff2c4,var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.wof-land-steprow { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.wof-land-step { background:rgba(13,17,25,.7); border:1px solid rgba(82,100,140,.25); border-radius:16px; padding:24px 20px; text-align:left; }
.wof-land-step b { display:block; font-size:16px; color:#ffe08a; margin:12px 0 6px; }
.wof-land-step p { font-size:13.5px; color:#aab6c8; line-height:1.55; margin:0; }
.wof-land-num { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  background:linear-gradient(180deg,#ffe08a,#d4af37); color:#1a1408; font-weight:900; font-size:18px; box-shadow:0 6px 16px rgba(212,175,55,.4); }
@media (max-width:820px){ .wof-land-feats,.wof-land-steprow{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .wof-land-feats,.wof-land-steprow{ grid-template-columns:1fr; } .wof-land-invite-row{ flex-direction:column; } }

/* My Clan (MLM) panel */
.clan-invite { background:rgba(212,175,55,.08); border:1px solid rgba(212,175,55,.4); border-radius:12px; padding:12px 14px; margin:6px 0 12px; }
.clan-lbl { font-size:12px; color:#93a1b5; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.clan-linkrow { display:flex; gap:8px; }
.clan-linkrow input { flex:1; background:#0a0d14; border:1px solid rgba(212,175,55,.35); color:#ffe08a; border-radius:9px; padding:9px 11px; font-size:12.5px; }
.clan-linkrow .wof-gold-btn { padding:9px 16px; border-radius:9px; background:linear-gradient(180deg,#ffe08a,#d4af37); color:#1a1408; font-weight:800; border:none; cursor:pointer; }
.clan-code { margin-top:8px; font-size:12.5px; color:#cdd5e4; } .clan-code b { color:#ffe08a; letter-spacing:1px; }
.clan-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.clan-stat { background:#0d1119; border:1px solid rgba(82,100,140,.3); border-radius:10px; padding:10px; text-align:center; }
.clan-stat span { display:block; font-size:16px; font-weight:800; color:#ffe08a; }
.clan-stat label { font-size:11px; color:#93a1b5; }
.clan-gate { background:#0d1119; border:1px solid rgba(82,100,140,.3); border-radius:10px; padding:12px; }
.clan-gate-top { display:flex; justify-content:space-between; font-size:12.5px; color:#cdd5e4; margin-bottom:7px; }
.clan-bar { position:relative; height:10px; background:#0a0d14; border-radius:6px; overflow:hidden; }
.clan-bar-fill { height:100%; border-radius:6px; transition:width .3s ease; }
.clan-bar-gate { position:absolute; top:-3px; width:2px; height:16px; background:#fff; opacity:.7; }
.clan-gate-note { font-size:12px; color:#aab6c8; margin-top:8px; line-height:1.5; }
.clan-list { display:flex; flex-direction:column; gap:5px; margin-top:6px; max-height:240px; overflow:auto; }
.clan-row { display:flex; align-items:center; gap:9px; background:#0d1119; border:1px solid rgba(82,100,140,.25); border-radius:9px; padding:8px 11px; font-size:13px; }
.clan-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.clan-nm { color:#e9eef5; font-weight:600; } .clan-lv { color:#93a1b5; font-size:12px; }
.clan-sub { color:#7a8aa3; font-size:11.5px; } .clan-act { margin-left:auto; font-size:12px; font-weight:700; }

/* My Clan tree - top-down pyramid (org-chart), root at the top */
.clan-tree { margin-top:10px; max-height:420px; overflow:auto; padding:8px 4px 4px; }
.clan-tree ul { display:flex; justify-content:center; padding-top:20px; position:relative; margin:0; list-style:none; }
.clan-tree > ul.clan-root { padding-top:0; }
.clan-tree li { list-style:none; position:relative; padding:20px 8px 0; text-align:center; }
/* connectors */
.clan-tree li::before, .clan-tree li::after {
  content:''; position:absolute; top:0; right:50%; width:50%; height:20px;
  border-top:2px solid rgba(212,175,55,.4);
}
.clan-tree li::after { right:auto; left:50%; border-left:2px solid rgba(212,175,55,.4); }
.clan-tree li:only-child::before, .clan-tree li:only-child::after { display:none; }
.clan-tree li:only-child { padding-top:20px; }
.clan-tree li:first-child::before, .clan-tree li:last-child::after { border:0 none; }
.clan-tree li:last-child::before { border-right:2px solid rgba(212,175,55,.4); border-radius:0 6px 0 0; }
.clan-tree li:first-child::after { border-radius:6px 0 0 0; }
.clan-tree ul ul::before {
  content:''; position:absolute; top:0; left:50%; width:0; height:20px;
  border-left:2px solid rgba(212,175,55,.4);
}
.clan-tree > ul.clan-root::before { display:none; }
.clan-card { display:inline-block; width:210px; text-align:left; vertical-align:top;
  background:linear-gradient(180deg,#0e1320,#0a0d15); border:1px solid rgba(82,100,140,.35); border-radius:11px; padding:9px 12px; }
.clan-card.me { border-color:rgba(212,175,55,.65); box-shadow:0 0 16px rgba(212,175,55,.22); }
.clan-card-top { display:flex; align-items:center; gap:7px; }
.clan-card-top b { color:#e9eef5; font-size:13px; }
.clan-you { font-size:10px; background:rgba(212,175,55,.2); color:#ffe08a; border-radius:6px; padding:1px 6px; }
.clan-net { margin-left:auto; color:#ffe08a; font-weight:800; font-size:12px; }
.clan-card-row { font-size:11px; color:#aab6c8; margin-top:3px; }
.clan-card-inv { font-size:10.5px; color:#7f8ba1; margin-top:4px; }
.clan-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; display:inline-block; }
.clan-more-hint { font-size:11px; color:#93a1b5; margin-top:6px; }

/* My Clan v2: wide modal, one-line name, per-leg counts, dopamine invite frame */
.modal-card.wof-clan-wide { width: 96vw; max-width: 1600px; }
.modal-card.wof-lb-wide { width: 80vw; max-width: 1500px; }
.lb-scroll { overflow-x: auto; }
.lb-full { width: 100%; border-collapse: collapse; }
.lb-full th, .lb-full td { padding: 8px 10px; text-align: left; white-space: nowrap; font-size: 12.5px; }
.lb-full thead th { color: #9fb0c8; border-bottom: 1px solid rgba(120,140,170,.25); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.lb-full tbody tr:nth-child(even) { background: rgba(120,140,170,.06); }
.lb-full tr.me { background: rgba(212,175,55,.14); }

/* ================= THE LEADERBOARD: gold at the top, dark at the bottom =====
   Flat. No plates, no raised rows, no borders boxing each line in - the table
   stays a table. The only thing that changes down the list is LIGHT: every row
   carries --g (1 at rank 1, easing to 0 at the bottom) and that one number
   drives a faint warm tint and how bright the text burns. The top of the board
   glows and the bottom falls into the dark, without a single edge drawn. */
.lb-gold { border-collapse: collapse; }
.lb-gold thead th {
  color: #8d7a4a; border-bottom: 1px solid rgba(212,175,55,.3);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  padding-bottom: 9px; background: none;
}
.lb-gold tbody tr { background: none; }              /* kill the old zebra */
.lb-gold tbody tr.lb-r > td {
  padding: 9px 10px; font-size: 12.5px; border: none;
  color: rgb(calc(140 + 80 * var(--g, 0)) calc(150 + 62 * var(--g, 0)) calc(170 + 10 * var(--g, 0)));
  background: rgba(226,186,80, calc(.10 * var(--g, 0)));
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.045);
  transition: background .15s;
}
.lb-gold tbody tr.lb-r:hover > td { background: rgba(226,186,80, calc(.06 + .12 * var(--g, 0))); }
.lb-c-rank { width: 44px; }
.lb-rank {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 12.5px;
  color: #8f99a8;
  color: rgb(calc(140 + 115 * var(--g, 0)) calc(150 + 74 * var(--g, 0)) calc(166 - 6 * var(--g, 0)));
}
.lb-c-nm { font-weight: 600;
  color: #c3ccdb;
  color: rgb(calc(186 + 69 * var(--g, 0)) calc(194 + 51 * var(--g, 0)) calc(212 - 22 * var(--g, 0))); }
.lb-c-net {
  font-variant-numeric: tabular-nums; font-weight: 800;
  color: #cdd6e4;
  color: rgb(calc(172 + 83 * var(--g, 0)) calc(180 + 50 * var(--g, 0)) calc(200 - 60 * var(--g, 0)));
  text-shadow: 0 0 calc(16px * var(--g, 0)) rgba(255,214,110, calc(.55 * var(--g, 0)));
}
/* the top three are only WRITTEN louder - same flat row, more light in it */
.lb-gold tbody tr.p1 > td { background: rgba(240,205,120,.145); }
.lb-gold tbody tr.p1 .lb-c-nm { color: #fff3cf; font-weight: 800; }
.lb-gold tbody tr.p1 .lb-rank, .lb-gold tbody tr.p1 .lb-c-net { color: #ffe6ad; }
.lb-gold tbody tr.p2 .lb-rank { color: #e6ebf3; }
.lb-gold tbody tr.p3 .lb-rank { color: #e8b98c; }
/* your own row, wherever it lands */
.lb-gold tbody tr.me > td { background: rgba(226,186,80,.2); }
.lb-gold tbody tr.me .lb-c-nm::after {
  content: 'YOU'; margin-left: 7px; font-size: 8.5px; font-weight: 800; letter-spacing: .14em;
  color: #1a1408; background: linear-gradient(180deg,#f5d76e,#d4af37);
  padding: 2px 6px; border-radius: 20px; vertical-align: middle;
}

/* the two in-game moments that stop the world: a badge unlocking and a catch
   worth keeping. Both give exactly two ways out and neither closes itself while
   the player is still reading. */
.bp-acts { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.bp-btn {
  border: 1px solid #39425c; border-radius: 11px; padding: 9px 20px;
  font-size: 13.5px; font-weight: 800; cursor: pointer;
  background: linear-gradient(180deg, #2a3147, #1d2336); color: #c7d2e2;
  transition: transform .14s, filter .14s;
}
.bp-btn:hover { transform: translateY(-2px); }
.bp-gold { background: linear-gradient(180deg, #f5d76e, #d4af37); color: #1a1408; border-color: transparent; box-shadow: 0 6px 18px rgba(212,175,55,.35); }

.wof-catch {
  position: absolute; inset: 0; z-index: 2147482500;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(3,5,9,.88); backdrop-filter: blur(6px); animation: bIn .2s ease;
}
.wof-catch-card {
  width: min(360px, 92%); padding: 22px 22px 20px; text-align: center;
  border-radius: 18px; border: 2px solid var(--gold);
  background: linear-gradient(180deg, #1a1305 0%, #12131f 42%, #0c1019 100%);
  box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 50px rgba(212,175,55,.2);
}
.wof-catch-card.sp { border-color: #57e8c8; box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 54px rgba(87,232,200,.32); }
.wof-catch-art { display: block; margin: 0 auto 6px; width: 200px; height: 230px; }
.wof-catch-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase;
  color: #caa24a; margin-bottom: 8px;
}
.wof-catch-card.sp .wof-catch-tag { color: #57e8c8; }
.wof-catch-nm { font-family: Georgia, 'Times New Roman', serif; font-size: 24px; font-weight: 700; color: #ffd166; }
.wof-catch-ds { margin-top: 4px; font-size: 12.5px; color: #93a1b5; }
@media (max-width: 520px) {
  .wof-catch-art { width: 160px; height: 184px; }
  .wof-catch-nm { font-size: 21px; }
}

/* a quest log row and its share button, side by side */
.qlog-line { display: flex; align-items: stretch; gap: 6px; }
.qlog-line .qlog-row { flex: 1 1 auto; min-width: 0; }
.qlog-line .wof-share-btn { flex: 0 0 auto; align-self: center; }
.qo-share { padding: 4px 20px 0; text-align: right; }

/* the little share glyph tucked under an earned honor */
.badge-share { margin-top: 8px; }
.badge-cell.locked .badge-share { display: none; }
/* keep the market history column from stretching the table */
.mkt-share-cell { width: 40px; text-align: right; }

/* the language control at the top of the character creator: the first thing on
   the screen, because someone who cannot read the rest needs it first */
.wof-lang-first { display: block; max-width: 320px; margin: 0 auto 14px; }
.wof-lang-first select { width: 100%; }
.wof-field optgroup { background: #0b1120; color: #8d99ad; font-style: normal; font-weight: 700;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.wof-field optgroup option { color: #e9eef5; font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 400; }

/* ================= THE SHARE BUTTON AND ITS POPUP =================
   The button is deliberately small and quiet: it sits beside an achievement,
   it does not compete with it. It only warms up on hover, so a panel full of
   them still reads as a panel and not as a row of adverts. */
.wof-share-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  vertical-align: middle; padding: 5px 7px; margin: 0 0 0 6px;
  background: rgba(212,175,55,.09); border: 1px solid rgba(212,175,55,.3);
  border-radius: 9px; color: #cfa94a; cursor: pointer;
  line-height: 0; transition: background .14s, border-color .14s, color .14s, transform .14s;
}
.wof-share-btn span { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; line-height: 1; }
.wof-share-btn:hover, .wof-share-btn:focus-visible {
  background: rgba(212,175,55,.2); border-color: rgba(240,208,128,.7); color: #ffe2a0;
  transform: translateY(-1px); outline: none;
}
.wof-share-btn.ghost { background: none; border-color: transparent; color: #6f7c92; }
.wof-share-btn.ghost:hover { background: rgba(212,175,55,.14); border-color: rgba(212,175,55,.34); color: #ffe2a0; }

.wof-share {
  position: absolute; inset: 0; z-index: 2147482000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(3,5,9,.9); backdrop-filter: blur(7px);
  animation: bIn .18s ease;
}
.wof-share-card { display: flex; flex-direction: column; align-items: center; gap: 14px; max-height: 100%; }
.wof-share-frame {
  border-radius: 16px; overflow: hidden; background: #07080C;
  border: 1px solid rgba(212,175,55,.35);
  box-shadow: 0 30px 90px rgba(0,0,0,.75), 0 0 60px rgba(212,175,55,.13);
  min-width: 200px; min-height: 120px; display: flex; align-items: center; justify-content: center;
}
/* 9:16 - tall, so height is what constrains it on a desktop and width on a phone */
.wof-share-img { display: block; width: auto; height: auto; max-width: min(80vw, 340px); max-height: 70vh; }
.wof-share-wait { color: #6f7c92; font-size: 22px; padding: 40px; }
.wof-share-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.wof-share-acts button {
  border: none; border-radius: 11px; padding: 11px 22px; font-size: 14px; font-weight: 800;
  cursor: pointer; transition: transform .14s, filter .14s;
}
.wof-share-acts button:hover:not(:disabled) { transform: translateY(-2px); }
.wof-share-acts button:disabled { opacity: .5; cursor: default; }
.wof-share-save, .wof-share-send { background: linear-gradient(180deg, #f5d76e, #d4af37); color: #1a1408; box-shadow: 0 6px 20px rgba(212,175,55,.36); }
.wof-share-close { background: linear-gradient(180deg, #2a3147, #1d2336); color: #c7d2e2; border: 1px solid #39425c !important; }
.wof-share-fine { margin: 0; max-width: 380px; text-align: center; font-size: 11.5px; line-height: 1.5; color: #8d99ad; }
@media (max-width: 520px) {
  .wof-share-img { max-width: 74vw; max-height: 62vh; }
  .wof-share-acts button { padding: 10px 16px; font-size: 13px; }
}

/* ================= the door: what a banned player sees =================
   Deliberately plain. No gold, no game furniture - this is not part of the
   world any more, and dressing it up would read as taunting. */
.wof-ban {
  position: absolute; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(4,6,11,.97); backdrop-filter: blur(6px);
  font-family: Georgia, 'Times New Roman', serif;
}
.wof-ban-card {
  max-width: 480px; width: 100%; padding: 30px 30px 26px;
  background: #141824; border: 1px solid #3a3521; border-top: 2px solid #c0392b;
  border-radius: 16px; box-shadow: 0 30px 90px rgba(0,0,0,.7);
}
.wof-ban-tag { font-size: 11px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: #c0392b; margin-bottom: 16px; }
.wof-ban-lead { margin: 0 0 16px; font-size: 16px; line-height: 1.65; color: #f2e7c8; }
.wof-ban-clock {
  margin: 0 0 18px; padding: 14px 16px; text-align: center;
  background: #0d1017; border: 1px solid #2b2a20; border-radius: 12px;
  font-size: 15px; font-weight: 700; color: #f7e6a8;
}
.wof-ban-keep { margin: 0 0 14px; font-size: 14px; line-height: 1.65; color: #8b8570; }
.wof-ban-note { margin: 0; padding-top: 14px; border-top: 1px solid #262b38; font-size: 13px; line-height: 1.6; color: #6f6a5a; }
@media (max-width: 520px) { .wof-ban-card { padding: 24px 20px 22px; } .wof-ban-lead { font-size: 15px; } }

/* ---- where YOU stand: the line under the table ----
   Shown even when the player is on the board, because the rank is the number
   they came to see. Outside the top it also names the gap to the trader one
   place above - the next step is climbable, the summit is not. */
.lb-you {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 14px; padding: 14px 18px; border-radius: 14px;
  border: 1px solid rgba(212,175,55,.4);
  background: linear-gradient(100deg, #171326 0%, #10131f 46%, #0b0d15 100%);
  box-shadow: 0 12px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.35) inset;
}
.lb-you.here { border-color: rgba(232,196,106,.72); box-shadow: 0 12px 34px rgba(0,0,0,.5), 0 0 26px rgba(212,175,55,.2); }
.lb-you-rank { display: flex; align-items: baseline; gap: 2px; color: #ffd97a; }
.lb-you-rank i { font-style: normal; font-size: 15px; opacity: .55; }
.lb-you-rank b { font-size: 34px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff3cf, #e8c46a 58%, #c39a2e);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.lb-you-mid { flex: 1 1 150px; min-width: 0; }
.lb-you-nm { color: #edf1f8; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-you-sub { color: #7f8ba0; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; margin-top: 3px; }
.lb-you-net { text-align: right; }
.lb-you-net i { display: block; font-style: normal; font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: #7f8ba0; }
.lb-you-net b { display: block; margin-top: 2px; font-size: 19px; font-weight: 800; color: #ffe2a0; font-variant-numeric: tabular-nums; }
.lb-you-gap {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: #ffd97a;
  padding: 7px 12px; border-radius: 20px;
  border: 1px solid rgba(212,175,55,.35); background: rgba(212,175,55,.1);
}
@media (max-width: 520px) {
  .lb-you { gap: 12px; padding: 12px 14px; }
  .lb-you-rank b { font-size: 28px; }
  .lb-you-net { text-align: left; }
  .lb-you-gap { flex: 1 1 100%; text-align: center; }
}

.wof-hookwrap { position: relative; display: block; }
.wof-hookwrap input { width: 100%; padding-right: 38px; box-sizing: border-box; }
.wof-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: transparent; border: none; cursor: pointer; font-size: 15px; opacity: .7; padding: 4px 6px; }
.wof-eye:hover { opacity: 1; }
.clan-card { width: 240px; }
.clan-card-top { flex-wrap: nowrap; }
.clan-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 118px; }
.clan-net { white-space: nowrap; flex: 0 0 auto; }
.clan-you, .clan-spon { flex: 0 0 auto; }
.clan-spon { font-size: 10px; background: rgba(90,160,255,.2); color: #9ec5ff; border-radius: 6px; padding: 1px 6px; }
.clan-card.spon { border-color: rgba(90,160,255,.5); }
.clan-tree { padding: 8px 0; overflow: auto; }
.clan-tree-inner { width: max-content; min-width: 100%; margin: 0 auto; padding: 8px 34px; box-sizing: border-box; }
.clan-legs { background: #0d1119; border: 1px solid rgba(82,100,140,.3); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.clan-leg { display: flex; align-items: center; gap: 7px; font-size: 11.5px; }
.clan-leg b { color: #ffe08a; width: 20px; } .clan-leg .lp { color: #ffd97a; font-weight: 800; width: 34px; }
.clan-leg .la { color: #26de81; } .clan-leg .ln { color: #ff8a8a; margin-left: auto; }
.clan-invite { position: relative; }
.clan-invite.has, .clan-invite.none { border-color: transparent; }
.clan-invite.has::before, .clan-invite.none::before { content: ''; position: absolute; inset: -2px; border-radius: 12px; padding: 2px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: wofGoldSpin 4s linear infinite; pointer-events: none; }
.clan-invite.has::before { background: conic-gradient(from var(--wofAng,0deg), #0b8a3a, #7CFC00, #26de81, #7CFC00, #0b8a3a); }
.clan-invite.none::before { background: conic-gradient(from var(--wofAng,0deg), #7a1f1f, #ff5b5b, #ff9f43, #ff5b5b, #7a1f1f); }

/* My Clan: tabs + referral monitor table */
.clan-tabs { display: flex; gap: 8px; margin: 14px 0 10px; }
.clan-tabs button { background: #0d1119; border: 1px solid rgba(82,100,140,.35); color: #cdd5e4; border-radius: 10px; padding: 9px 14px; cursor: pointer; font-weight: 700; font-size: 13px; }
.clan-tabs button.on { background: linear-gradient(180deg,#1a2135,#12182a); border-color: rgba(212,175,55,.6); color: #ffe08a; }
.clan-mon-wrap { }
.clan-mon-filter { width: 100%; box-sizing: border-box; padding: 10px 12px; margin-bottom: 8px; border-radius: 10px; border: 1px solid rgba(82,100,140,.4); background: #0a0d14; color: #fff; font-size: 13px; }
.clan-mon-filter:focus { outline: none; border-color: #d4af37; }
.clan-mon { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.clan-mon thead th { text-align: right; padding: 9px 10px; color: #93a1b5; border-bottom: 1px solid rgba(82,100,140,.35); cursor: pointer; user-select: none; white-space: nowrap; }
.clan-mon thead th:first-child { text-align: left; }
.clan-mon thead th:hover { color: #ffe08a; }
.clan-mon tbody td { text-align: right; padding: 8px 10px; border-bottom: 1px solid rgba(82,100,140,.16); color: #dbe3ef; }
.clan-mon tbody td.src { text-align: left; color: #9ec5ff; word-break: break-all; }
.clan-mon tbody tr:hover td { background: rgba(212,175,55,.05); }

/* clan retention dot: pulsing orange near expiry + days-inactive text */
.clan-dot-pulse { box-shadow: 0 0 0 0 rgba(255,159,67,.7); animation: clanPulse 1.1s ease-out infinite; }
@keyframes clanPulse { 0% { box-shadow: 0 0 0 0 rgba(255,159,67,.75); } 70% { box-shadow: 0 0 0 7px rgba(255,159,67,0); } 100% { box-shadow: 0 0 0 0 rgba(255,159,67,0); } }
.clan-idle { color: #ff9f43; font-size: 10.5px; }
.clan-idle.ok { color: #6f7d95; }

/* logged-in launcher: full-bleed dark-gold section (no black bars beside it in the theme) */
/* FULL-BLEED WITHOUT THE SIDE SCROLL.

   This breaks the launcher out of the theme's content column with the usual
   calc(50% - 50vw) trick. The catch, and the cause of the horizontal scrollbar
   on the landing page: 100vw is the width of the VIEWPORT INCLUDING the
   vertical scrollbar, while 100% is the width of the content area without it.
   So on any page tall enough to scroll - which is every page - this element
   overhangs the right edge by exactly the scrollbar's width, and the browser
   adds a horizontal scrollbar to reach the ~15px of nothing.

   --wof-sbw is measured in JS and subtracted, which fixes it precisely; the
   overflow-x: clip below is the belt to that pair of braces, for the moment
   before the script runs and for anyone with JS off. 'clip' rather than
   'hidden' because hidden would turn the page into a scroll container and
   break position: sticky elsewhere in the theme. */
html { overflow-x: clip; }
@supports not (overflow-x: clip) { html { overflow-x: hidden; } }

.wof-launcher { margin-left: calc(50% - 50vw + (var(--wof-sbw, 0px) / 2)); margin-right: calc(50% - 50vw + (var(--wof-sbw, 0px) / 2)); max-width: none; padding: 42px 20px 54px;
  background: radial-gradient(130% 80% at 50% -6%, rgba(212,175,55,.14), rgba(6,8,14,0) 58%), linear-gradient(180deg,#0a0d15,#05070c); }
.wof-launcher .wof-land-hero, .wof-launcher .wof-land-feats { max-width: 1120px; margin-left: auto; margin-right: auto; }
.wof-launcher .wof-land-hero { background: transparent; border: 0; box-shadow: none; }
.wof-launcher .wof-land-hero::before { display: none; }
.wof-launcher .wof-land-feats { margin-top: 26px; }

/* Plugin game-page top nav (mirrors the WP menu, styled for the dark window) */
.wof-topnav { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 16px;
  padding: 10px 20px; background: linear-gradient(180deg, rgba(9,12,19,.96), rgba(9,12,19,.86)); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(212,175,55,.35); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.wof-topnav-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; flex: 0 0 auto; }
.wof-topnav-brand img { width: 30px; height: 30px; }
.wof-topnav-brand span { font-weight: 900; letter-spacing: 2px; font-size: 14px;
  background: linear-gradient(180deg,#fff2c4,#d4af37); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wof-topnav-nav { margin-left: auto; }
.wof-nav-menu { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.wof-nav-menu li { position: relative; }
.wof-nav-menu a { display: block; color: #cdd5e4; text-decoration: none; font-weight: 600; font-size: 13.5px; padding: 9px 12px; border-radius: 9px; white-space: nowrap; transition: background .15s, color .15s; }
.wof-nav-menu a:hover { color: #ffe08a; background: rgba(212,175,55,.12); }
.wof-nav-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 210px; list-style: none; margin: 0; padding: 8px;
  background: #0c1019; border: 1px solid rgba(212,175,55,.4); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 8; }
/* transparent bridge so moving the cursor from the item into the dropdown keeps it open */
.wof-nav-menu > li.menu-item-has-children::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.wof-nav-menu li:hover > .sub-menu, .wof-nav-menu .sub-menu:hover { opacity: 1; visibility: visible; }
.wof-nav-menu .sub-menu a { font-weight: 500; }
.wof-topnav-burger { display: none; background: transparent; border: 1px solid rgba(212,175,55,.5); color: #ffd97a; border-radius: 9px; font-size: 18px; padding: 6px 11px; cursor: pointer; margin-left: auto; }
@media (max-width: 860px) {
  .wof-topnav-burger { display: block; }
  .wof-topnav-nav { display: none; position: absolute; top: 56px; left: 0; right: 0; background: #0c1019; border-bottom: 1px solid rgba(212,175,55,.35); padding: 8px; }
  .wof-topnav-nav.open { display: block; }
  .wof-nav-menu { flex-direction: column; align-items: stretch; }
  .wof-nav-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; margin: 2px 0 2px 12px; background: transparent; }
}

/* ---------------- Clan community (Public Group) ---------------- */
.grp-clanbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.grp-clan { display: inline-flex; align-items: center; gap: 6px; background: #0e1420; border: 1px solid rgba(212,175,55,.28); color: #cfe0f5; border-radius: 999px; padding: 6px 13px; font: 700 12.5px/1 "Segoe UI",system-ui,sans-serif; cursor: pointer; transition: .15s; }
.grp-clan:hover { border-color: rgba(212,175,55,.6); }
.grp-clan.on { background: linear-gradient(135deg,#1c1305,#241a06); border-color: #d4af37; color: #ffe9a8; box-shadow: 0 0 14px rgba(212,175,55,.35); }
.grp-clan-ic { font-size: 14px; }
.grp-wrap { display: grid; grid-template-columns: 210px 1fr; gap: 12px; height: 460px; }
.grp-side { background: #0a0e17; border: 1px solid rgba(120,140,170,.16); border-radius: 12px; padding: 10px 8px; overflow-y: auto; }
.grp-cat { color: #7d8aa0; font: 800 10.5px/1 "Segoe UI",system-ui,sans-serif; letter-spacing: 1.2px; text-transform: uppercase; margin: 12px 8px 6px; }
.grp-cat:first-child { margin-top: 4px; }
.grp-room { display: block; width: 100%; text-align: left; background: transparent; border: none; color: #aeb9cc; border-radius: 8px; padding: 7px 10px; font: 600 13px/1.1 "Segoe UI",system-ui,sans-serif; cursor: pointer; transition: .12s; }
.grp-room:hover { background: rgba(120,140,170,.12); color: #eaf1fb; }
.grp-room.on { background: rgba(212,175,55,.16); color: #ffe9a8; }
.clan-remote { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .3px; padding: 1px 6px; border-radius: 7px; background: rgba(130,80,223,.2); color: #c9b3ff; border: 1px solid rgba(130,80,223,.5); }
.clan-card-remote { border-color: rgba(130,80,223,.5) !important; }
.clan-card-give { font-size: 11px; font-weight: 700; color: #3ff08a; margin: 2px 0 1px; }
.clan-stat-give span { color: #3ff08a !important; text-shadow: 0 0 10px rgba(63,240,138,.4); }
.clan-change-btn { margin-left: auto; background: rgba(120,130,150,.16); border: 1px solid rgba(150,165,190,.3); color: #b9c4d6; border-radius: 9px; padding: 7px 12px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.clan-change-btn:hover { background: rgba(140,150,175,.28); color: #eaf1fb; }
.sp-wrap { max-width: 560px; margin: 6px auto; }
.sp-h { color: #ffe9a8; margin: 6px 0 8px; }
.sp-lead { color: #cdd5e4; line-height: 1.5; font-size: 13px; }
.sp-recs { margin: 8px 0; }
.sp-rec { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 11px; background: #0e1420; border: 1px solid rgba(120,140,170,.18); border-radius: 9px; margin-bottom: 6px; }
.sp-rec-nm { color: #eaf1fb; font-size: 13px; }
.sp-lv { color: #9ab0d0; font-size: 11px; }
.sp-site { color: #c9b3ff; font-size: 11px; }
.sp-inact { color: #ff9f43; font-size: 11px; }
.sp-amt { color: #ffe08a; white-space: nowrap; }
.sp-warn { color: #ff8a8a; background: rgba(255,90,90,.1); border: 1px solid rgba(255,90,90,.3); border-radius: 9px; padding: 8px 11px; font-size: 12.5px; margin: 6px 0; }
.sp-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }
.sp-fine { color: #7f8ba1; font-size: 11px; margin-top: 10px; line-height: 1.4; }
.sp-search { width: 100%; background: #0e1420; border: 1px solid rgba(120,140,170,.28); color: #eaf1fb; border-radius: 10px; padding: 9px 12px; font-size: 13px; margin: 8px 0; }
.sp-cands { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.sp-cand { text-align: left; background: #0e1420; border: 1px solid rgba(120,140,170,.2); color: #cdd7e6; border-radius: 9px; padding: 9px 12px; font-size: 13px; cursor: pointer; }
.sp-cand:hover { border-color: rgba(212,175,55,.5); color: #fff; }
.sp-cand.on { background: rgba(212,175,55,.16); border-color: #d4af37; color: #ffe9a8; }
.sm-lead { color: #cdd5e4; line-height: 1.5; font-size: 13px; }
.sm-disc { background: rgba(255,90,90,.08); border: 1px solid rgba(255,120,90,.35); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.sm-disc b { color: #ffd0c0; }
.sm-disc ul { margin: 6px 0 8px 0; padding-left: 18px; }
.sm-disc li { color: #e4d3cc; font-size: 12px; line-height: 1.45; margin-bottom: 4px; }
.sm-accept { display: flex; gap: 8px; align-items: flex-start; color: #ffe9a8; font-weight: 700; font-size: 12.5px; }
.sm-wallet { margin: 10px 0; color: #cdd5e4; font-size: 12.5px; }
.sm-addr { font-family: monospace; font-size: 13px; color: #7ee0a0; word-break: break-all; background: #0b0f1a; border: 1px solid rgba(120,140,170,.3); border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.clan-tree { position: relative; }
.clan-tree-zoom { transform-origin: top center; transition: transform .12s ease; }
.clan-zoom { position: sticky; bottom: 8px; float: right; display: flex; gap: 6px; margin: 6px 8px 0 0; z-index: 6; }
.clan-zoom button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(150,170,200,.3); background: rgba(20,28,42,.8); color: #cdd7e6; font-size: 18px; font-weight: 800; line-height: 1; cursor: pointer; }
.clan-zoom button:hover { background: rgba(40,52,74,.95); color: #fff; }
.wof-ctB-results { border-color: rgba(46,224,138,.55) !important; box-shadow: 0 0 22px rgba(46,224,138,.22) !important; }
.grp-main { display: flex; flex-direction: column; height: 440px; margin-top: 10px; background: #0a0e17; border: 1px solid rgba(120,140,170,.16); border-radius: 12px; overflow: hidden; }
.grp-head { padding: 12px 16px; border-bottom: 1px solid rgba(120,140,170,.16); color: #eaf1fb; font: 800 15px/1 "Segoe UI",system-ui,sans-serif; }
.grp-hash { color: #7d8aa0; }
.grp-msgs { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.grp-dim { color: #7d8aa0; text-align: center; margin: auto; }
.grp-msg { display: flex; gap: 10px; align-items: flex-start; }
.grp-msg-ava { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#1c2536,#2b3852); color: #ffe9a8; display: flex; align-items: center; justify-content: center; font: 800 15px/1 "Segoe UI",system-ui,sans-serif; }
.grp-msg.mine .grp-msg-ava { background: linear-gradient(135deg,#1c1305,#3a2a08); }
.grp-msg-body { flex: 1; min-width: 0; }
.grp-msg-top { display: flex; align-items: baseline; gap: 8px; }
.grp-msg-top b { color: #eaf1fb; font-size: 13px; }
.grp-msg-ts { color: #6b7688; font-size: 11px; }
.grp-msg-ttl { color: #5a6472; font-size: 10px; margin-left: auto; white-space: nowrap; }
.grp-msg-text { color: #c6d1e2; font-size: 13.5px; line-height: 1.45; word-wrap: break-word; }
.grp-compose { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(120,140,170,.16); }
.grp-compose input { flex: 1; background: #0e1420; border: 1px solid rgba(120,140,170,.28); color: #eaf1fb; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.grp-compose input:focus { outline: none; border-color: #d4af37; }
.grp-soon { text-align: center; padding: 40px 24px; }
.grp-soon-ic { font-size: 40px; margin-bottom: 10px; }
.grp-soon h4 { color: #ffe9a8; font-size: 18px; margin: 0 0 8px; }
.grp-soon p { color: #aeb9cc; max-width: 460px; margin: 0 auto 14px; line-height: 1.5; }
.grp-soon-tag { display: inline-block; background: rgba(212,175,55,.14); border: 1px solid rgba(212,175,55,.4); color: #ffd97a; border-radius: 999px; padding: 6px 14px; font: 700 12px/1 "Segoe UI",system-ui,sans-serif; }
@media (max-width: 720px) {
  .grp-wrap { grid-template-columns: 1fr; height: auto; }
  .grp-side { max-height: 150px; }
  .grp-main { height: 400px; }
}

/* ---- Satoshi Market: QR + red error juice (v2.9.91) ---- */
.sm-disc-row{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
.sm-disc-col{flex:1 1 320px;min-width:280px}
.sm-qr-col{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:150px}
.sm-qr{background:#fff;border-radius:14px;padding:12px 12px 8px;box-shadow:0 6px 20px rgba(0,0,0,.35);text-align:center}
.sm-qr svg{display:block;width:150px;height:150px}
.sm-qr-cap{margin-top:6px;font-size:12px;font-weight:800;color:#20242a;line-height:1.25}
.sm-qr-cap span{display:block;font-size:10.5px;font-weight:600;color:#5a6472}
.sm-err{margin-top:12px;padding:12px 14px;border-radius:12px;color:#fff;
  background:linear-gradient(135deg,#e11d48,#b30f3a);border:1px solid #ff5c7a;
  box-shadow:0 6px 22px rgba(225,29,72,.45);font-size:13px}
.sm-err b{display:block;margin-bottom:4px;font-size:13.5px}
.sm-err ul{margin:4px 0 0;padding-left:18px}
.sm-err li{margin:2px 0}
.sm-shake{animation:smShake .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes smShake{
  10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
.sm-cancel{padding:3px 10px !important;font-size:12px !important}

/* ---- Backpack: draggable sortable action buttons ---- */
.bp-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.bp-row{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center}
.bp-item{cursor:grab;touch-action:none;user-select:none;transition:transform .12s ease,box-shadow .12s ease}
.bp-item.bp-drag{cursor:grabbing;transform:scale(1.06);box-shadow:0 6px 18px rgba(0,0,0,.4);opacity:.92}

/* ---- Backpack drag handle (v2.9.92) ---- */
.bp-grip{display:inline-block;margin-right:6px;color:#7c88a0;font-weight:900;letter-spacing:-1px;cursor:grab;vertical-align:middle}
.bp-item.bp-drag .bp-grip{color:#ffd97a}
/* ---- Auction house cards ---- */
.sp-card{background:rgba(255,255,255,.03);border:1px solid #28324d;border-radius:12px;padding:12px 14px}
.sp-card h4{margin:0 0 8px;font-size:14px;color:#ffe6a3}

/* ---- Auction House (WoW-AH style rows, v2.9.93) ---- */
.auc-head{display:grid;grid-template-columns:2.4fr .6fr 1fr 1.1fr 1fr;gap:8px;padding:6px 10px;font-size:11px;font-weight:800;color:#9ec5ff;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid #28324d}
.auc-head-sat{grid-template-columns:1fr 1fr 1fr 1fr 1fr}
.auc-row{display:grid;grid-template-columns:2.4fr .6fr 1fr 1.1fr 1fr;gap:8px;align-items:center;padding:6px 10px;border-bottom:1px solid rgba(40,50,77,.5)}
.auc-row-sat{grid-template-columns:1fr 1fr 1fr 1fr 1fr}
.auc-row:hover{background:rgba(255,255,255,.03)}
.auc-item{display:flex;align-items:center;gap:8px;min-width:0}
.auc-item b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auc-ico{width:36px;height:42px;flex:0 0 auto;background:radial-gradient(circle at 50% 35%,rgba(240,180,41,.16),transparent 70%);border:1px solid #2b3550;border-radius:8px}
.auc-c{font-size:12.5px}
.auc-price{color:#ffd97a;font-weight:800}
.auc-sel{color:#93a1b5;font-size:11.5px}
.auc-buy,.aucCommit{padding:4px 12px !important;font-size:12px !important}

/* ---- logged-out shortcode: full-bleed dark section (keeps the theme top nav) v2.9.99 ---- */
.wof-land-cover{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;
  min-height:88vh;box-sizing:border-box;padding:8px 0 40px;
  background:radial-gradient(1200px 700px at 50% -10%,#141a2b 0%,#0a0d16 60%,#05070c 100%);}
.wof-land-cover .wof-land{max-width:1180px;margin:0 auto;box-sizing:border-box;}

/* ---- Support FJUNIVERSE donate modal (v2.9.101) ---- */
.don-wrap{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.don-left{flex:1 1 320px;min-width:280px;display:flex;gap:10px;align-items:flex-start;
  background:linear-gradient(135deg,rgba(240,180,41,.10),rgba(124,58,237,.08));
  border:1px solid #2b3550;border-radius:14px;padding:14px}
.don-grem{flex:0 0 auto;width:150px;height:180px;background:transparent;border:0}
.don-story{flex:1 1 auto;min-width:0}
.don-story p{margin:0 0 8px;font-size:13px;line-height:1.5;color:#d7dee8}
.don-story .don-lead{font-size:15px;font-weight:700;color:#ffe6a3;font-style:italic}
.don-list{list-style:none;margin:6px 0 8px;padding:0}
.don-list li{margin:5px 0;font-size:12.5px;line-height:1.45;color:#cdd6e2}
.don-list li b{color:#ffd97a}
.don-story .don-thanks{font-size:13px;color:#eecf8a}
.don-right{flex:0 0 260px;max-width:100%;display:flex;flex-direction:column;gap:10px}
.don-card{background:rgba(255,255,255,.03);border:1px solid #2b3550;border-radius:12px;padding:10px;text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.35)}
.don-lbl{font-size:11px;font-weight:800;color:#9ec5ff;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.don-card input[type=number]{width:100%;box-sizing:border-box;background:#0b0f1a;border:1px solid #2b3550;color:#eef2f7;border-radius:8px;padding:6px;text-align:center;font-size:14px;font-weight:700}
.don-btn{width:100%;margin-top:8px;font-size:14px;padding:8px 12px !important}
.don-qr{display:flex;justify-content:center;margin:0 0 8px}
.don-qr .sm-qr{margin:0;padding:8px 8px 6px}
.don-qr .sm-qr svg{width:104px !important;height:104px !important}
.don-copy{width:100%;margin-top:6px;padding:5px 10px !important;font-size:12px !important}
.don-card .sm-addr{font-size:10.5px;word-break:break-all;background:#0b0f1a;border:1px solid #2b3550;border-radius:8px;padding:6px;color:#9ec5ff}

/* ---- Donate Hall of Fame (v2.9.105) ---- */
.don-hof{margin-top:12px}
.hof-head{font-size:14px;font-weight:800;color:#ffd97a;margin:0 2px 8px}
.hof-wrap{display:flex;gap:14px;flex-wrap:wrap}
.hof-col{flex:1 1 300px;min-width:260px;background:rgba(255,255,255,.03);border:1px solid #2b3550;border-radius:12px;padding:10px}
.hof-title{font-size:12px;font-weight:800;color:#9ec5ff;text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
.hof-empty{font-size:12px;color:#93a1b5;font-style:italic;padding:6px 2px}
.hof-row{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;margin-bottom:4px}
.hof-rank{text-align:center;font-weight:800;color:#93a1b5}
.hof-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.hof-amt{font-weight:800;color:#ffd97a;font-size:12.5px}
/* podium: 1st the most dopamine, fading down to plain by 5th */
.hof-r1{background:linear-gradient(135deg,rgba(240,180,41,.30),rgba(240,180,41,.08));border:1px solid rgba(240,180,41,.6);box-shadow:0 6px 18px rgba(240,180,41,.28)}
.hof-r1 .hof-name{color:#fff2c4;font-size:15px}.hof-r1 .hof-rank{color:#ffd54a;font-size:16px}
.hof-r2{background:linear-gradient(135deg,rgba(200,205,220,.20),rgba(200,205,220,.05));border:1px solid rgba(200,205,220,.4)}
.hof-r2 .hof-name{color:#eef2f7}
.hof-r3{background:linear-gradient(135deg,rgba(205,127,50,.18),rgba(205,127,50,.05));border:1px solid rgba(205,127,50,.4)}
.hof-r4{background:rgba(255,255,255,.03)}
.hof-r5{background:transparent}
.hof-r4 .hof-name,.hof-r5 .hof-name{color:#c7d2e0;font-weight:600}

/* ---- Top-donate HUD chip + modal banner (v2.9.105) ---- */
.hud-topdon{background:linear-gradient(135deg,rgba(240,180,41,.28),rgba(240,180,41,.08))!important;border:1px solid rgba(240,180,41,.55)!important;color:#ffe6a3!important}
.hud-topdon b{color:#fff2c4}
.lv-short{display:none}
.don-top{margin:8px 0 4px;padding:8px 12px;border-radius:12px;font-weight:800;color:#20242a;text-align:center;
  background:linear-gradient(135deg,#ffe08a,#e6a51e);box-shadow:0 6px 18px rgba(240,180,41,.4)}
.don-top b{color:#3a2c08}

/* ---- Record-transaction monitor (v2.9.106) ---- */
.don-btnrow{display:flex;gap:6px;margin-top:8px}
.don-btnrow .don-copy{flex:1;margin-top:0}
#donMonQr .sm-qr svg{width:120px !important;height:120px !important}
.don-wait{text-align:center;padding:34px 16px 40px}
.don-spin{width:54px;height:54px;margin:0 auto;border-radius:50%;border:5px solid rgba(240,180,41,.25);border-top-color:#f0b429;animation:donSpin 1s linear infinite}
@keyframes donSpin{to{transform:rotate(360deg)}}

/* ---- donate monitor centering + chain label (v2.9.107) ---- */
.don-mon-left{align-items:center;justify-content:center}
.don-mon-left #donMonQr{display:flex;justify-content:center;margin:4px 0}
.don-chain{margin-top:6px;font-size:11.5px;font-weight:700;color:#9ec5ff}

/* ---- Auction Browse: WoW-style left categories + On sale / Wanted tables (v2.9.108) ---- */
.auc-browse{display:flex;gap:12px;align-items:flex-start}
.auc-side{flex:0 0 170px;display:flex;flex-direction:column;gap:6px}
.auc-cat{background:#111726;border:1px solid #2b3550;color:#c7d2e0;border-radius:10px;padding:10px 12px;text-align:left;font-weight:700;cursor:pointer}
.auc-cat:hover{background:#1a2236}
.auc-cat.on{background:linear-gradient(180deg,#e6a51e,#c98a12);color:#20242a;border-color:#c98a12}
.auc-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:12px}
.auc-sec{background:rgba(255,255,255,.02);border:1px solid #28324d;border-radius:12px;overflow:hidden}
.auc-sec-h{padding:8px 12px;font-weight:800;color:#ffe6a3;background:rgba(240,180,41,.06);border-bottom:1px solid #28324d}
.auc-sec>div:last-child{max-height:230px;overflow:auto}
@media(max-width:720px){.auc-browse{flex-direction:column}.auc-side{flex-direction:row;flex-wrap:wrap;flex:1 1 auto}}

/* ---- Delete account (red dopamine warning) v2.9.108 ---- */
.del-warn{background:linear-gradient(135deg,rgba(225,29,72,.22),rgba(179,15,58,.10));border:1px solid #ff5c7a;border-radius:14px;padding:14px 16px;color:#ffdfe6;box-shadow:0 8px 26px rgba(225,29,72,.35)}
.del-warn h3{color:#ff8aa0;margin:0 0 8px}
.del-warn ul{margin:6px 0 0;padding-left:18px}.del-warn li{margin:4px 0}
.del-btn{background:linear-gradient(180deg,#ff4d6a,#c0122f)!important;border:none!important;color:#fff!important;font-weight:800!important}
.bp-del{background:#5e1622!important;border:1px solid #7a1f2f!important;color:#f0b6c0!important}
.bp-del:hover{background:#73202f!important;color:#fff!important}

/* ---- Auction Browse v2.9.109: On sale | Wanted | Deals as 3 columns, disclaimer on top ---- */
.auc-cols{display:flex;gap:12px;align-items:flex-start}
.auc-cols .auc-sec{flex:1 1 0;min-width:0}
.auc-cols .auc-sec>div:last-child{max-height:300px;overflow:auto}
.auc-deal{padding:7px 10px;border-bottom:1px solid rgba(40,50,77,.5)}
.auc-deal-w{font-size:12px;color:#e7edf5}
.auc-deal-m{font-size:10.5px;color:#93a1b5;margin-top:2px}
#aucDisc .sm-disc{margin:0 0 10px}
/* MOBILE: stacking a row-flex into a column keeps flex:1 1 0 which collapses the
   sections to zero height (auction looked blank on phones). Size them to content. */
@media(max-width:900px){
  .auc-cols{flex-direction:column}
  .auc-cols .auc-sec{flex:0 0 auto;width:100%}
  .auc-cols .auc-sec>div:last-child{max-height:none}
}
@media(max-width:720px){
  .modal-card.wof-auc-wide{width:96vw!important;max-width:96vw!important;min-height:0!important;max-height:92vh!important}
  .auc-side .auc-cat{flex:1 1 auto}
  .auc-sec>div:last-child{max-height:none}
}
/* full-width, centered delete-account button */
.bp-del{display:block;width:100%;text-align:center}
/* modern (non-pastel) delete-account warning */
.del-warn{background:linear-gradient(160deg,#2a0e14,#160a0e)!important;border:1px solid #e11d48!important;border-radius:14px;padding:16px 18px;color:#efd3d8!important;box-shadow:0 14px 36px rgba(225,29,72,.30)}
.del-warn h3{color:#ff5c7a!important;letter-spacing:.2px}
.del-warn li{color:#e7c9cf}
.del-warn li b{color:#fff}
.del-btn{background:linear-gradient(180deg,#ef2d55,#a10f31)!important;border:1px solid #ff5c7a!important;color:#fff!important;font-weight:800!important;box-shadow:0 8px 22px rgba(225,29,72,.4)!important}

/* ---- Auction: 90% wide window + Deals tab pushed right (v2.9.110) ---- */
.modal-card.wof-auc-wide{width:90vw!important;max-width:90vw!important;min-height:82vh!important;max-height:90vh!important}
.auc-tabs{display:flex;flex-wrap:wrap;align-items:center}
.auc-tabs .auc-deals-tab{margin-left:auto}

/* ---- Auction: make sortable column headers obvious (v2.9.112) ---- */
.auc-head span[data-sort]{cursor:pointer;user-select:none;transition:color .12s}
.auc-head span[data-sort]:hover{color:#ffd97a;text-decoration:underline}
.auc-head span[data-sort]:hover::after{content:' ↕';opacity:.65;font-size:10px}

/* ---- MOBILE: donate/monitor QR + button panel consistency (v2.9.113) ---- */
@media (max-width: 600px) {
  .don-wrap { flex-direction: column; }
  .don-right { flex: 1 1 100%; max-width: 100%; }
  /* stack copy-address / record-transaction so unequal label lengths don't look ragged */
  .don-btnrow { flex-direction: column; }
  .don-btnrow .don-copy { flex: 1 1 auto; width: 100%; margin-top: 0; }
  /* one consistent QR size across get-tokens, donate card and record screens */
  .don-qr .sm-qr svg, #donMonQr .sm-qr svg, .sm-qr svg { width: 150px !important; height: 150px !important; }
}

/* ---- Onboarding guided tour (v2.9.121) ---- */
#tourSkip{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:120;background:rgba(13,18,29,.92);border:1px solid rgba(212,175,55,.7);color:#ffd97a;border-radius:12px;padding:8px 16px;font-weight:800;cursor:pointer}
#tourSkip:hover{background:#243049}
.tour-fin{text-align:center}
.tour-fin canvas{background:#0b0f1a;border:1px solid #28324d;border-radius:10px;margin:8px auto;display:block;max-width:100%}
.tour-fin-pnl{font-size:22px;font-weight:900;color:#26de81}
.tour-fin-lead{color:#cdd5e4;margin:8px 0}

/* ---- In-game NPC Yes/No choice (bottom dialog) v2.9.124 ---- */
#dialog .d-choice{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
#dialog .d-choice button{min-width:92px;padding:8px 18px;border-radius:10px;font-weight:800;font-size:14px;cursor:pointer;border:1px solid rgba(212,175,55,.6)}
#dialog .d-choice .d-yes{background:linear-gradient(180deg,#ffd97a,#e0a92f);color:#1a1206}
#dialog .d-choice .d-no{background:rgba(20,26,40,.9);color:#cdd5e4}
#dialog .d-choice .d-yes:hover{filter:brightness(1.08)}
#dialog .d-choice .d-no:hover{background:#243049}

/* ---- Tour preview above the dialog + tab highlight (v2.9.126) ---- */
/* preview position is set by JS relative to the dialog box (small=beside, big=above) (FJ) */
/* The preview is a companion to the dialog box, so it wears the same clothes:
   same 1.5px gold border, same 16px radius, same plate, same blur and shadow.
   It read as a different component because it had a thinner, dimmer border and
   a smaller radius. */
.tour-preview{position:fixed;z-index:90;box-sizing:border-box;
  background:rgba(13,18,29,.94);
  border:1.5px solid var(--gold); border-radius:16px;
  padding:12px 14px 10px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(212,175,55,.12);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:104px; max-width:min(300px, 88vw)}
/* beside the text on a wide screen: matched height, so the two read as one unit */
.tour-preview.tp-beside{padding:12px 14px}
.tour-preview.tp-big{display:block}
/* during the tour the NPC dialog + preview stay ABOVE the world-map overlay, and the map is semi-transparent so the world + text remain visible (FJ) */
body.wof-tour #dialog{z-index:100000!important}
body.wof-tour #tourSkip,body.wof-tour #tourPreview{z-index:100001!important}
body.wof-tourmap #modal{background:rgba(4,6,12,.4)!important}
body.wof-tourmap .modal-card{opacity:.88}
.tour-preview canvas{display:block;margin:0 auto}
.tour-preview .tp-emoji{font-size:52px;line-height:1;padding:2px 10px}
/* phones: the icon sits ABOVE the words, never over them */
@media (max-width:760px){
  .tour-preview{padding:9px 11px 8px;max-width:min(240px,80vw)}
  .tour-preview canvas{max-width:74px;height:auto}
  .tour-preview .tp-emoji{font-size:40px}
  .tour-preview .tp-cap{font-size:11px}
}
.tour-preview .tp-cap{color:var(--gold);font-weight:800;font-size:12px;letter-spacing:.02em;margin-top:6px;line-height:1.25}
.tour-preview.tp-big{padding:8px}
.tp-gui{width:230px;text-align:left}
.tp-gui-h{color:#c9a2ff;font-weight:800;font-size:12px;margin-bottom:6px}
.tp-gui-row{display:flex;align-items:center;gap:8px;font-size:11px;color:#e7edf5;padding:4px 6px;border-top:1px solid #28324d}
.tp-gui-row span{flex:1}.tp-gui-row b{color:#ffe6a3}.tp-gui-row em{background:#e0a92f;color:#1a1206;border-radius:6px;padding:1px 7px;font-style:normal;font-weight:800}
.tp-trade-btns{display:flex;gap:6px;margin-top:6px}
.tp-trade-btns span{flex:1;text-align:center;border-radius:8px;padding:5px 0;font-weight:800;font-size:12px}
.tp-trade-btns .tp-long{background:#12351f;color:#26de81;border:1px solid #26de81}
.tp-trade-btns .tp-short{background:#3a1414;color:#ff5b5b;border:1px solid #ff5b5b}
.tour-hi{position:relative;z-index:130!important;border-radius:10px;animation:tourpulse 1s ease-in-out infinite}
@keyframes tourpulse{0%,100%{box-shadow:0 0 0 3px #ffd24a,0 0 12px 2px rgba(255,210,74,.55)}50%{box-shadow:0 0 0 4px #ffd24a,0 0 26px 8px rgba(255,210,74,.95)}}
/* balance-resync spinner in the "Syncing..." HUD chip (FJ) - display is toggled inline by tickSatDisplay */
.wof-spin{display:inline-block;width:11px;height:11px;border:2px solid rgba(154,164,184,.35);border-top-color:#aab4c6;border-radius:50%;animation:wofspin .7s linear infinite}
@keyframes wofspin{to{transform:rotate(360deg)}}
/* Elite Gate Keepers panel (FJ) */
.gk-row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:6px 0 4px;width:100%}
.gk-cell{width:auto;min-width:0;background:#0b1220;border:1px solid #24324c;border-radius:12px;padding:11px 6px;text-align:center}
@media(max-width:600px){.gk-row{grid-template-columns:repeat(3,1fr)}}
.gk-cell.done{border-color:#d4af37;box-shadow:inset 0 0 0 1px rgba(212,175,55,.22)}
.gk-badge{width:64px;height:64px;display:inline-block}
.gk-nm{font-size:11.5px;font-weight:700;letter-spacing:.4px;color:#ffe9a0;margin-top:4px;line-height:1.1}
.gk-sub{font-size:10px;font-style:italic;color:#c9b483;margin-top:1px;line-height:1.1}
.gk-st{font-size:10px;color:#9fb0c8;margin-top:3px;line-height:1.15}
.gk-cell.done .gk-st{color:#39d98a}

/* ---- "Under Development..." : a crypto feature the admin has switched off.
   The option stays on screen on purpose, so the player sees it is coming back
   rather than wondering whether the game lost it.
   A flex COLUMN, not a block relying on text-align and margin:auto. That way the
   badge, the title and the explaining line always stack and always centre, whatever
   the surrounding panel does to its children. ---- */
.sp-card.wof-dev{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; text-align:center; margin-top:12px;
  border:1px dashed rgba(255,214,122,.38);
  background:linear-gradient(180deg,rgba(255,214,122,.07),rgba(255,214,122,.02));
  border-radius:12px; padding:16px 16px 15px;
}
.sp-card.wof-dev > *{ margin:0; float:none; max-width:56ch; }
.wof-dev-tag{
  display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#0f1420; background:#ffd97a;
  border-radius:99px; padding:4px 12px;
}
.sp-card.wof-dev h4{ color:#ffe6a3; font-size:14.5px; line-height:1.35; }
.sp-card.wof-dev p{ color:#8d99ad; font-size:13px; line-height:1.55; }

/* ---- Trade offer popup: the whole deal, both sides, three answers ----
   It used to be one line reading "gives 0 wants 0", which says nothing as soon
   as a creature is in the deal. Now each side is listed and named. ---- */
.trade-pop{align-items:flex-start;gap:16px;flex-wrap:wrap}
.trade-pop .tp-body{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1 1 260px}
.trade-pop .tp-who{color:#ffd97a;font-size:13.5px;line-height:1.2}
.trade-pop .tp-row{display:flex;gap:9px;align-items:baseline;font-size:12.5px;
  color:#e7edf5;line-height:1.4;flex-wrap:wrap}
.trade-pop .tp-row i{flex:0 0 74px;font-style:normal;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:#8d99ad}
.trade-pop .tp-none{color:#6f7a8c;font-style:italic}
.trade-pop .tp-acts{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.trade-pop .tp-acts .wof-gold-btn{padding:8px 18px;font-size:13px}
.trade-pop .tp-acts .tp-alt{padding:8px 13px;font-size:12.5px;white-space:nowrap;
  border-color:rgba(212,175,55,.55);color:#ffd97a}
.trade-pop .tp-acts .tp-alt:hover{border-color:#d4af37;background:rgba(212,175,55,.12)}
@media (max-width:620px){
  .trade-pop{flex-direction:column;align-items:stretch}
  .trade-pop .tp-acts{justify-content:flex-end}
  .trade-pop .tp-row i{flex-basis:100%}
}

/* ---- The 90 day rule, in the Backpack ---- */
.life-card h4{color:#ffe6a3;font-size:14px;margin:0 0 6px}
.life-card .sp-fine{color:#8d99ad;font-size:11.5px;line-height:1.55}
.life-card .sp-fine b{color:#ffd97a}
.life-check{display:flex;align-items:center;gap:9px;margin-top:9px;
  font-size:12.5px;color:#e7edf5;cursor:pointer;line-height:1.4}
.life-check input{width:16px;height:16px;accent-color:#d4af37;flex:none;cursor:pointer}

/* ---- a duel that also stakes a monster ---- */
.duel-mon{display:inline-block;margin-top:4px;font-size:12px;color:#c9a2ff}
.duel-mon b{color:#e2ccff}


/* ---- quest log rows: thumbnail, title, giver, progress ------------------- */
.qlog-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; }
.qlog-row .ql-pic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 8px;
  background: rgba(255,255,255,.04); image-rendering: auto; }
.qlog-row .ql-pic-none { background: transparent; }
.qlog-row .ql-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.qlog-row .ql-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the giver is what tells two identically-titled quests apart */
.qlog-row .ql-giver { font-size: 11px; font-weight: 600; color: #8fa0bb; letter-spacing: .2px; }
.qlog-row .ql-prog { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* ---- quest panel: Back, only when there is a list to go back to ---------- */
.qo-btns .qo-back { background: rgba(255,255,255,.06); border: 1px solid rgba(120,140,180,.35);
  color: #cdd6e6; border-radius: 12px; padding: 12px 18px; font-weight: 700; cursor: pointer; }
.qo-btns .qo-back:hover { background: rgba(255,255,255,.12); }

/* the waiting screen keeps the payment details beside the spinner, so nobody is
   stranded watching a wheel with no address to send to (FJ) */
.don-wait2 { display: flex; gap: 18px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.don-wait2 > .don-wait { flex: 1 1 340px; min-width: 280px; }
.don-waitside { flex: 0 0 260px; max-width: 300px; text-align: center; }
.don-waitside .don-qr { margin: 0 auto 8px; }
.don-waitside .sm-addr { word-break: break-all; font-size: 11px; }
.don-amt { margin-top: 8px; font-size: 13px; color: #cfd8e6; }
.don-amt b { color: #ffd97a; }
@media (max-width: 700px) { .don-wait2 { flex-direction: column; align-items: stretch; }
  .don-waitside { flex: 1 1 auto; max-width: none; } }

.sm-exch { display:flex; align-items:center; gap:8px; margin:8px 2px 0; font-size:12.5px; color:#cfd8e6; cursor:pointer; }
.sm-exch input { width:16px; height:16px; }