@import url('https://fonts.googleapis.com/css2?family=Lalezar&family=Tajawal:wght@400;500;700;800&display=swap');

:root{
    --bg:#F5EFE0;
    --bg-alt:#EBE1C8;
    --panel:#FFFDF6;
    --panel-2:#FBF6E9;
    --ink:#20263A;
    --ink-dim:#5B6478;
    --line:#D8CCA9;
    --gold:#B4791C;
    --gold-soft:#F1DBA8;
    --coral:#C94E36;
    --coral-soft:#F3D2C7;
    --sage:#2F7A5C;
    --sage-soft:#CFE6D9;
    --locked:#B9AF8D;
    direction:rtl;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#121A2C; --bg-alt:#182338; --panel:#1B2740; --panel-2:#20304C;
      --ink:#F1EEDF; --ink-dim:#AEB6C9; --line:#33405C;
      --gold:#E8B04B; --gold-soft:#3A3220;
      --coral:#E8836A; --coral-soft:#3A2620;
      --sage:#7FC7A4; --sage-soft:#1E3830;
      --locked:#42506B;
    }
  }
  :root[data-theme="dark"]{
    --bg:#121A2C; --bg-alt:#182338; --panel:#1B2740; --panel-2:#20304C;
    --ink:#F1EEDF; --ink-dim:#AEB6C9; --line:#33405C;
    --gold:#E8B04B; --gold-soft:#3A3220;
    --coral:#E8836A; --coral-soft:#3A2620;
    --sage:#7FC7A4; --sage-soft:#1E3830;
    --locked:#42506B;
  }

  *{box-sizing:border-box;}
  body{background:var(--bg);color:var(--ink);font-family:'Tajawal',-apple-system,'Segoe UI',Tahoma,sans-serif;line-height:1.7;}
  .app{direction:rtl;padding-bottom:60px;}
  button{font-family:inherit;cursor:pointer;}
  .wrap{max-width:1000px;margin-inline:auto;padding-inline:18px;}
  h1,h2,h3{font-family:'Tajawal',sans-serif;font-weight:800;text-wrap:balance;margin:0;}
  .display{font-family:'Lalezar',cursive;font-weight:400;}
  .dim{color:var(--ink-dim);}
  .tabular{font-variant-numeric:tabular-nums;}

  /* ---- top bar ---- */
  .topbar{background:var(--panel);border-bottom:1px solid var(--line);padding-block:14px;position:sticky;top:0;z-index:5;}
  .brand{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
  .brand .name{font-family:'Lalezar',cursive;font-size:1.4rem;}
  .brand .sub{font-size:.78rem;color:var(--ink-dim);}
  .fam-switch{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
  .fam-btn{flex:none;background:var(--bg-alt);border:1px solid var(--line);border-radius:100px;padding:6px 14px;font-weight:700;font-size:.84rem;color:var(--ink-dim);}
  .fam-btn.active{background:var(--ink);color:var(--bg);border-color:var(--ink);}
  .tabbar{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;}
  .tab{flex:none;display:flex;align-items:center;gap:8px;background:var(--bg-alt);border:1px solid var(--line);border-radius:100px;padding:7px 14px 7px 8px;font-weight:700;font-size:.9rem;color:var(--ink-dim);}
  .tab .av{width:26px;height:26px;border-radius:50%;background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:1rem;flex:none;}
  .tab.active{background:var(--sage);border-color:var(--sage);color:#fff;}
  .tab.active .av{background:rgba(255,255,255,.25);}
  .tab.util{background:var(--panel-2);}
  .tab.util.active{background:var(--gold);border-color:var(--gold);}

  .view{padding-block:26px;}
  .section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap;}
  .section-title h2{font-size:1.2rem;}

  .panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 20px;}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  @media (max-width:680px){.grid2{grid-template-columns:1fr;}}

  .stat-card{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(135deg,var(--panel) 60%, var(--sage-soft));border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:22px;}
  .avatar-big{width:66px;height:66px;border-radius:20px;background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:2rem;flex:none;}
  .stat-main{flex:1 1 220px;min-width:180px;}
  .stat-main .lvl{font-size:.85rem;color:var(--gold);font-weight:800;}
  .stat-main h2{font-size:1.35rem;margin:2px 0 8px;}
  .xpbar-track{background:var(--bg-alt);border-radius:8px;height:12px;overflow:hidden;}
  .xpbar-fill{height:100%;background:var(--gold);border-radius:8px;transition:width .5s ease;}
  .xp-caption{font-size:.78rem;color:var(--ink-dim);margin-top:5px;}
  .badges{display:flex;gap:6px;flex:none;flex-wrap:wrap;max-width:150px;}
  .badge{width:34px;height:34px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1rem;}
  .coin-pill{font-size:.78rem;font-weight:800;color:var(--gold);background:var(--gold-soft);padding:4px 10px;border-radius:100px;margin-top:6px;display:inline-block;}

  .zone-row{display:flex;gap:0;overflow-x:auto;padding:10px 4px 18px;margin-bottom:6px;}
  .zone{flex:none;width:96px;text-align:center;position:relative;padding-top:8px;}
  .zone .line{position:absolute;top:32px;right:0;left:0;height:2px;background:var(--line);}
  .zone:first-child .line{right:50%;}
  .zone:last-child .line{left:50%;}
  .zone .circ{position:relative;z-index:1;width:52px;height:52px;border-radius:50%;margin-inline:auto;display:flex;align-items:center;justify-content:center;font-size:1.35rem;background:var(--panel);border:2px solid var(--line);}
  .zone.unlocked .circ{border-color:var(--sage);background:var(--sage-soft);}
  .zone.current .circ{border-color:var(--gold);background:var(--gold-soft);box-shadow:0 0 0 4px var(--gold-soft);}
  .zone.locked .circ{color:var(--locked);filter:grayscale(1);opacity:.6;}
  .zone .zlabel{display:block;font-size:.72rem;color:var(--ink-dim);margin-top:8px;font-weight:700;}

  .play-window-note{font-size:.8rem;color:var(--ink-dim);margin-bottom:14px;}

  .quest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;}
  .quest-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;transition:box-shadow .2s;}
  .quest-card:hover{box-shadow:0 4px 18px -6px rgba(0,0,0,.18);}
  .quest-icon{font-size:1.4rem;display:block;margin-bottom:8px;}
  .quest-card h3{font-size:1rem;margin-bottom:6px;}
  .quest-story{font-size:.86rem;color:var(--ink-dim);margin:0 0 10px;max-height:0;overflow:hidden;transition:max-height .25s ease;}
  .quest-card.open .quest-story{max-height:200px;}
  .quest-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
  .tag{font-size:.74rem;font-weight:700;padding:3px 9px;border-radius:100px;}
  .tag.track{color:var(--sage);background:var(--sage-soft);}
  .tag.doc{color:var(--coral);background:var(--coral-soft);}
  .tag.xp{color:var(--gold);background:var(--gold-soft);}
  .quest-actions{display:flex;gap:8px;flex-wrap:wrap;}
  .btn{border:none;border-radius:10px;padding:8px 14px;font-weight:700;font-size:.86rem;}
  .btn-ghost{background:var(--bg-alt);color:var(--ink);}
  .btn-primary{background:var(--sage);color:#fff;}
  .btn-primary:active{transform:scale(.97);}
  .btn:disabled{opacity:.5;cursor:not-allowed;}

  .pending-note{display:flex;align-items:center;gap:8px;background:var(--gold-soft);color:var(--gold);border-radius:12px;padding:10px 14px;font-size:.86rem;font-weight:700;}

  .secret-card{background:linear-gradient(135deg,var(--coral-soft),var(--panel));border:1px dashed var(--coral);border-radius:16px;padding:18px;margin-top:22px;}
  .secret-card h3{color:var(--coral);font-size:1rem;margin-bottom:6px;}
  .secret-text{font-size:.92rem;margin:10px 0;}
  .secret-claimed{color:var(--sage);font-weight:800;font-size:.9rem;}

  .insight-box{background:var(--sage-soft);border-radius:14px;padding:14px 16px;font-size:.87rem;color:var(--ink);margin-top:22px;}
  .insight-box .k{font-weight:800;color:var(--sage);display:block;margin-bottom:5px;}

  .history-list{margin-top:10px;font-size:.87rem;}
  .history-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);}
  .history-row:last-child{border-bottom:none;}

  .habit-mini{margin-top:22px;}
  .habit-mini .title{font-weight:700;font-size:.95rem;margin-bottom:8px;}
  .steps{display:flex;gap:4px;}
  .steps .st{flex:1;height:8px;border-radius:6px;background:var(--bg-alt);}
  .steps .st.on{background:var(--sage);}
  .habit-caption{font-size:.78rem;color:var(--ink-dim);margin-top:6px;}

  .pending-row{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);}
  .pending-row:last-child{border-bottom:none;}
  .pending-row .pav{width:40px;height:40px;border-radius:50%;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;font-size:1.2rem;}
  .pending-row .ptitle{font-weight:700;font-size:.92rem;}
  .pending-row .pmeta{font-size:.76rem;color:var(--ink-dim);}
  .pending-actions{display:flex;gap:6px;}
  .icon-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);display:flex;align-items:center;justify-content:center;font-size:1rem;}
  .empty{color:var(--ink-dim);font-size:.9rem;padding:14px 0;text-align:center;}

  .child-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);}
  .child-row:last-child{border-bottom:none;}
  .child-row .cav{width:38px;height:38px;border-radius:50%;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex:none;}
  .child-row .cbody{flex:1;min-width:0;}
  .child-row .cname{font-weight:700;font-size:.9rem;display:flex;justify-content:space-between;gap:6px;}
  .mini-track{background:var(--bg-alt);border-radius:6px;height:7px;overflow:hidden;margin-top:5px;}
  .mini-fill{height:100%;background:var(--sage);}

  .add-form{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;}
  .add-form select,.add-form input{background:var(--bg-alt);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:8px 10px;font-family:inherit;font-size:.86rem;}
  .add-form input[type=text]{flex:1 1 200px;}
  .add-form input[type=number]{width:80px;}
  .field{width:100%;}
  .field input,.field select{width:100%;}
  .field-label{font-size:.78rem;font-weight:700;color:var(--ink-dim);margin-bottom:5px;}
  .avatar-chip{font-size:1.25rem;line-height:1;padding:8px 12px;}

  .chat-panel{max-height:440px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;}
  .chat-row{display:flex;}
  .chat-row.me{justify-content:flex-start;}
  .chat-row.ai{justify-content:flex-end;}
  .chat-bubble{max-width:78%;padding:10px 14px;border-radius:16px;font-size:.9rem;line-height:1.6;}
  .chat-row.me .chat-bubble{background:var(--sage);color:#fff;border-bottom-right-radius:4px;}
  .chat-row.ai .chat-bubble{background:var(--bg-alt);color:var(--ink);border-bottom-left-radius:4px;}

  .settings-panel{margin-top:16px;}
  .settings-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap;}
  .settings-row:last-child{border-bottom:none;}
  .settings-row>span{font-size:.9rem;font-weight:600;}
  .switch{position:relative;width:44px;height:24px;background:var(--bg-alt);border-radius:100px;border:1px solid var(--line);flex:none;}
  .switch.on{background:var(--sage);border-color:var(--sage);}
  .switch .knob{position:absolute;top:1px;inset-inline-start:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:inset-inline-start .2s;}
  .switch.on .knob{inset-inline-start:22px;}
  .chip-row{display:flex;gap:6px;flex-wrap:wrap;}
  .chip{background:var(--bg-alt);border:1px solid var(--line);border-radius:100px;padding:5px 12px;font-size:.8rem;font-weight:700;color:var(--ink-dim);}
  .chip.active{background:var(--gold);border-color:var(--gold);color:#fff;}

  .board{margin-top:4px;}
  .bar-row{display:grid;grid-template-columns:70px 1fr 90px;align-items:center;gap:12px;margin-block:10px;}
  .bar-row .name{font-weight:700;font-size:.92rem;}
  .bar-track{background:var(--bg-alt);border-radius:8px;height:16px;overflow:hidden;}
  .bar-fill{height:100%;border-radius:8px;background:var(--sage);transition:width .5s;}
  .bar-row.lead .bar-fill{background:var(--gold);}
  .bar-row .val{font-size:.88rem;text-align:end;color:var(--ink-dim);}
  .bar-row.lead .val{color:var(--gold);font-weight:800;}

  .meter-track{background:var(--bg-alt);border-radius:10px;height:22px;overflow:hidden;border:1px solid var(--line);}
  .meter-fill{height:100%;background:linear-gradient(90deg,var(--sage),var(--gold));border-radius:10px 0 0 10px;transition:width .4s;}
  .meter-caption{font-size:.86rem;color:var(--ink-dim);margin-top:8px;}

  .habit-table-row{display:grid;grid-template-columns:1fr 90px 1fr;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:.88rem;}
  .habit-table-row:last-child{border-bottom:none;}
  .pill{display:inline-block;font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:100px;background:var(--sage-soft);color:var(--sage);}

  .activity-feed{margin-top:4px;max-height:320px;overflow-y:auto;}
  .activity-row{padding:9px 0;border-bottom:1px dashed var(--line);font-size:.86rem;}
  .activity-row:last-child{border-bottom:none;}

  .coin-list{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
  .coin-chip{background:var(--gold-soft);color:var(--gold);border-radius:100px;padding:6px 12px;font-size:.82rem;font-weight:700;}
  .store-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;}
  .store-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;text-align:center;}
  .store-card .icon{font-size:1.8rem;display:block;margin-bottom:8px;}
  .store-card .cost{color:var(--gold);font-weight:800;margin-top:8px;font-size:.9rem;}
  .redeem-form{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;}

  .event-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;}
  .trivia-box{margin-top:22px;}
  .trivia-members{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
  .trivia-q{font-weight:700;margin-bottom:10px;font-size:1rem;}
  .trivia-options{display:flex;gap:8px;flex-wrap:wrap;}
  .trivia-opt{background:var(--bg-alt);border:1px solid var(--line);border-radius:10px;padding:9px 16px;font-weight:700;font-size:.88rem;}
  .trivia-opt.correct{background:var(--sage-soft);border-color:var(--sage);color:var(--sage);}
  .trivia-opt.wrong{background:var(--coral-soft);border-color:var(--coral);color:var(--coral);}
  .trivia-feedback{margin-top:10px;font-size:.88rem;font-weight:700;}

  .toast-stack{position:fixed;bottom:18px;inset-inline-end:18px;z-index:50;display:flex;flex-direction:column;gap:8px;max-width:88vw;}
  .toast{background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:12px;font-size:.86rem;font-weight:700;box-shadow:0 6px 20px -6px rgba(0,0,0,.35);animation:toastin .25s ease;}
  @keyframes toastin{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

  .dots-row{display:flex;gap:10px;justify-content:center;margin-bottom:14px;}
  .dots-row .dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);background:transparent;}
  .dots-row .dot.filled{background:var(--sage);border-color:var(--sage);}
  .keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:220px;margin-inline:auto;}
  .keypad .key{background:var(--bg-alt);border:1px solid var(--line);border-radius:10px;padding:14px 0;font-size:1.1rem;font-weight:800;color:var(--ink);}
  .keypad .key:active{background:var(--sage);color:#fff;}

  @media (max-width:520px){
    .pending-row{grid-template-columns:34px 1fr;}
    .pending-actions{grid-column:1/-1;justify-content:flex-end;}
    .bar-row{grid-template-columns:54px 1fr 64px;}
  }