/* ================= مخطوطات النينجا — ورق وحبر ================= */
:root{
  --paper:#F4E7CE;
  --paper-2:#EBDCBE;
  --paper-3:#FBF3E1;
  --ink:#1B2233;
  --orange:#F2721F;
  --leaf:#3F7D4E;
  --sharingan:#C1272D;
  --chakra:#4FA8D8;
  --muted:#6B6A62;

  --hand-sm: 11px 5px 13px 6px / 6px 13px 5px 12px;
  --hand-md: 20px 8px 24px 9px / 9px 22px 8px 20px;
  --hand-lg: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Cairo',system-ui,-apple-system,'Segoe UI',sans-serif;
  background-color:var(--paper);
  color:var(--ink);
  min-height:100vh;
  padding-bottom:168px;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  line-height:1.6;
}

button{font-family:inherit;color:inherit;user-select:none;-webkit-user-select:none;cursor:pointer}
input{font-family:inherit}
h1,h2,h3,h4{margin:0;font-family:'Aref Ruqaa','Amiri',serif;font-weight:700;line-height:1.35}
p{margin:0}
.hidden{display:none !important}

/* ---------- طبقات الورق ---------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode:multiply;
  opacity:.20;
}
.ink-splatter{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='440' height='440' viewBox='0 0 440 440'><g fill='%231B2233'><circle cx='36' cy='58' r='7'/><circle cx='49' cy='72' r='3.2'/><circle cx='28' cy='74' r='2.4'/><path d='M300 44q16-11 29 3 11 14-5 23-20 11-29-5-9-14 5-21z'/><circle cx='186' cy='150' r='4.4'/><circle cx='205' cy='160' r='2.2'/><path d='M60 300q22-15 35 4 9 18-11 25-22 7-29-11-5-14 5-18z'/><circle cx='362' cy='246' r='5.6'/><circle cx='378' cy='258' r='2.6'/><path d='M120 400q14-9 25 2 9 12-4 20-17 9-25-4-8-12 4-18z'/><circle cx='270' cy='352' r='3.6'/><circle cx='70' cy='200' r='3'/><circle cx='392' cy='80' r='3.4'/></g></svg>");
  background-size:440px 440px;
}

/* ---------- الترويسة ---------- */
.site-header{
  position:relative; z-index:3;
  padding:20px 16px 14px;
  display:flex; justify-content:center;
}
.brand{
  display:flex; align-items:center; gap:14px;
  background:var(--paper-3);
  border:2px solid var(--ink);
  border-radius:var(--hand-md);
  box-shadow:4px 4px 0 var(--ink);
  padding:12px 18px 14px;
  max-width:560px; width:100%;
}
.brand-seal{
  flex:0 0 auto;
  width:52px;height:52px;
  display:grid;place-items:center;
  border:2px solid var(--sharingan);
  border-radius:50%;
  color:var(--sharingan);
  font-family:'Aref Ruqaa',serif;
  font-size:26px;
  line-height:1;
  transform:rotate(-6deg);
  background:rgba(193,39,45,.06);
}
.brand-text{min-width:0}
.brand h1{
  font-size:clamp(22px,6.4vw,30px);
  letter-spacing:0;
}
.brand p{
  font-size:12.5px;color:var(--muted);font-weight:600;
  margin-top:2px;
}

/* ---------- شريط التبويبات الممزّق ---------- */
.tabs-wrap{
  position:sticky; top:0; z-index:20;
  padding:6px 14px 0;
  filter:
    drop-shadow(2px 0 0 var(--ink))
    drop-shadow(-2px 0 0 var(--ink))
    drop-shadow(0 2px 0 var(--ink))
    drop-shadow(0 -2px 0 var(--ink));
}
.tabs{
  display:flex; gap:6px;
  background:var(--paper-2);
  padding:10px 10px 14px;
  clip-path:polygon(0% 10%,4% 2%,9% 9%,15% 1%,21% 8%,28% 2%,35% 9%,42% 1%,49% 8%,56% 2%,63% 9%,70% 1%,77% 8%,84% 2%,91% 9%,97% 1%,100% 8%,100% 92%,96% 100%,89% 93%,82% 100%,75% 92%,68% 100%,61% 93%,54% 100%,47% 92%,40% 100%,33% 93%,26% 100%,19% 92%,12% 100%,5% 93%,0% 100%);
}
.tab{
  flex:1 1 0;
  min-height:46px;
  border:2px solid var(--ink);
  background:var(--paper-3);
  color:var(--ink);
  border-radius:var(--hand-sm);
  font-size:15px;font-weight:700;
  transition:transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.tab.is-active{
  background:var(--orange);
  color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transform:translate(-1px,-1px);
}
.tab:active{transform:translate(1px,1px)}
.tab:focus-visible,.chip:focus-visible,.btn:focus-visible,.card:focus-visible,
.slot-remove:focus-visible,.close-btn:focus-visible,.opt:focus-visible,.search-clear:focus-visible{
  outline:3px solid var(--chakra); outline-offset:2px;
}

/* ---------- الأقسام ---------- */
main{position:relative; z-index:3; padding:18px 14px 8px; max-width:900px; margin:0 auto;}
.panel{animation:paperIn .26s ease-out both}
@keyframes paperIn{
  from{opacity:0; transform:translateY(8px) rotate(-.35deg)}
  to{opacity:1; transform:none}
}

.panel-head{margin-bottom:14px}
.panel-title{font-size:26px}
.panel-sub{font-size:13.5px;color:var(--muted);font-weight:600;margin-top:4px}

/* ---------- شريط البحث والفلاتر ---------- */
.toolbar{margin-bottom:16px}
.search-field{
  position:relative;
  display:flex; align-items:center;
  background:var(--paper-3);
  border:2px solid var(--ink);
  border-radius:var(--hand-sm);
  box-shadow:3px 3px 0 var(--ink);
  padding:0 10px;
  margin-bottom:14px;
}
.search-ico{width:20px;height:20px;color:var(--ink);opacity:.6;flex:0 0 auto}
.search-field input{
  flex:1 1 auto;
  min-width:0;
  border:0; background:transparent; outline:none;
  padding:13px 10px;
  font-size:16px; color:var(--ink);
  appearance:none;
}
.search-field input::placeholder{color:#9A9284}
.search-field input::-webkit-search-cancel-button{display:none}
.search-clear{
  flex:0 0 auto;
  border:0;background:transparent;
  font-size:22px;line-height:1;
  color:var(--muted);
  padding:4px 6px;
  display:none;
}
.search-clear.show{display:block}

.filter-block{margin-bottom:12px}
.filter-label{
  display:block;
  font-size:12px;font-weight:700;letter-spacing:.4px;
  color:var(--muted);
  margin-bottom:7px;
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  min-height:38px;
  padding:6px 14px;
  border:2px solid var(--ink);
  border-radius:var(--hand-sm);
  background:var(--paper-3);
  color:var(--ink);
  font-size:13.5px;font-weight:700;
  transition:transform .14s ease, background-color .14s ease, box-shadow .14s ease, color .14s ease;
}
.chip .dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-inline-end:6px;vertical-align:middle;
  border:1.5px solid var(--ink);
}
.chip.is-on{
  background:var(--orange);
  box-shadow:2px 2px 0 var(--ink);
  transform:translate(-1px,-1px);
}
.chip:active{transform:translate(1px,1px)}

/* ---------- شبكة الشخصيات ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:14px;
}
.card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 10px 12px;
  background:var(--paper-3);
  border:2px solid var(--ink);
  border-radius:var(--hand-md);
  box-shadow:4px 4px 0 var(--ink);
  text-align:center;
  transition:transform .18s ease, box-shadow .18s ease;
  overflow:hidden;
}
.card::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(242,114,31,.10), transparent 62%);
  pointer-events:none;
}
.card-portrait{
  width:88px;height:88px;
  border-radius:50%;
  border:2px solid var(--ink);
  overflow:hidden;
  background:var(--paper-2);
  flex:0 0 auto;
}
.card-portrait svg{display:block;width:100%;height:100%}
.card-name{
  font-size:14px;font-weight:700;line-height:1.35;
  color:var(--ink);
}
.card-meta{
  display:flex;flex-wrap:wrap;gap:5px;justify-content:center;
}
.vbadge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10.5px;font-weight:700;
  border:1.5px solid var(--ink);
  border-radius:4px 3px 5px 3px;
  padding:2px 6px;
  background:#E7EDF2;
  color:var(--ink);
}
.vbadge svg{width:12px;height:12px;display:block}
.rankbadge{
  display:inline-block;
  font-size:10.5px;font-weight:700;
  border:1.5px solid var(--ink);
  border-radius:4px 3px 5px 3px;
  padding:2px 7px;
  background:var(--leaf);
  color:#FBF7EC;
}
.card-stamp{
  position:absolute;
  top:9px; inset-inline-start:9px;
  width:44px;height:44px;
  border:2.5px solid var(--sharingan);
  border-radius:50%;
  color:var(--sharingan);
  display:grid;place-items:center;
  font-size:9.5px;font-weight:900;line-height:1.1;
  transform:rotate(-14deg);
  background:rgba(251,243,225,.72);
  z-index:2;
  letter-spacing:-.2px;
  text-align:center;
  padding:2px;
}
@media (hover:hover){
  .card:hover{
    transform:rotate(-2.4deg) translateY(-3px);
    box-shadow:6px 6px 0 var(--ink);
  }
}
.card:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink)}

/* ---------- بطاقات الجتسو ---------- */
.grid-jutsu{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.jcard{
  display:flex;flex-direction:column;gap:8px;align-items:stretch;text-align:start;
  padding:14px;
  background:var(--paper-3);
  border:2px solid var(--ink);
  border-radius:var(--hand-md);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .18s ease, box-shadow .18s ease;
}
.jcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.jcard-name{font-family:'Aref Ruqaa',serif;font-size:18px;font-weight:700;line-height:1.3}
.nature-chip{
  flex:0 0 auto;
  font-size:11px;font-weight:800;
  padding:3px 9px;
  border-radius:20px;
  border:1.5px solid var(--ink);
  color:var(--ink);
}
.jcard-rows{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted);font-weight:600}
.jcard-rows b{color:var(--ink);font-weight:800}
.danger{
  display:inline-block;font-size:11px;font-weight:800;
  padding:1px 8px;border-radius:20px;
  border:1.5px solid currentColor;
}
.danger.d-high{color:var(--sharingan);background:rgba(193,39,45,.09)}
.danger.d-mid{color:#A9763F;background:rgba(169,118,63,.10)}
.danger.d-low{color:#5C6B7A;background:rgba(92,107,122,.10)}
@media (hover:hover){
  .jcard:hover{transform:rotate(-1.4deg) translateY(-3px); box-shadow:6px 6px 0 var(--ink)}
}
.jcard:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink)}

/* ---------- الحالة الفارغة ---------- */
.empty-state{
  margin:26px auto 10px;
  max-width:340px;
  text-align:center;
  color:var(--muted);
  font-weight:600;font-size:14px;
}
.empty-state svg{width:120px;height:90px;display:block;margin:0 auto 10px}

/* ---------- شريط فرقتي ---------- */
.team-bar{
  position:fixed; inset-inline:0; bottom:0; z-index:40;
  background:var(--paper-2);
  border-top:2px solid var(--ink);
  box-shadow:0 -4px 0 var(--ink);
  padding:10px 14px 12px;
  display:flex;flex-direction:column;gap:8px;
}
.team-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.team-title{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Aref Ruqaa',serif;font-size:18px;font-weight:700;
}
.team-title svg{width:17px;height:17px;color:var(--sharingan)}
.team-count{
  font-size:12px;font-weight:800;
  border:1.5px solid var(--ink);
  border-radius:20px;
  padding:1px 10px;
  background:var(--paper-3);
}
.team-body{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.team-slots{display:flex;align-items:center;gap:10px;min-height:48px;flex:1 1 auto}
.slot{position:relative;flex:0 0 auto}
.slot-portrait{
  width:46px;height:46px;border-radius:50%;
  border:2px solid var(--ink);overflow:hidden;background:var(--paper-3);
  display:block;
}
.slot-portrait svg{display:block;width:100%;height:100%}
.slot-remove{
  position:absolute; top:-6px; left:-6px;
  width:22px;height:22px;border-radius:50%;
  border:2px solid var(--ink);
  background:var(--sharingan);color:#FBF3E1;
  font-size:13px;line-height:1;font-weight:900;
  display:grid;place-items:center;
  padding:0;
}
.team-empty{
  display:flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:700;color:var(--muted);
}
.team-empty svg{width:44px;height:34px;flex:0 0 auto}
.team-stats{
  display:flex;flex-wrap:wrap;gap:6px 16px;
  font-size:12.5px;font-weight:700;
  border-top:1.5px dashed rgba(27,34,51,.35);
  padding-top:8px;
}
.team-stats span{color:var(--muted)}
.team-stats b{color:var(--ink);font-weight:900}

/* ---------- النوافذ ---------- */
.overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(27,34,51,.55);
  display:flex; align-items:flex-end; justify-content:center;
  padding:0;
  animation:fadeIn .18s ease-out both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet{
  position:relative;
  width:100%; max-width:560px;
  max-height:93vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--paper);
  border:2px solid var(--ink);
  border-bottom:0;
  border-radius:22px 8px 0 0 / 14px 10px 0 0;
  box-shadow:0 -6px 0 var(--ink);
  animation:sheetUp .26s cubic-bezier(.2,.9,.3,1.03) both;
}
@keyframes sheetUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.close-btn{
  position:absolute; top:10px; inset-inline-end:10px; z-index:5;
  width:40px;height:40px;
  border-radius:50%;
  border:2px solid var(--ink);
  background:var(--paper-3);
  font-size:22px;line-height:1;font-weight:700;
  display:grid;place-items:center;
  box-shadow:2px 2px 0 var(--ink);
}
.close-btn:active{transform:translate(2px,2px); box-shadow:0 0 0 var(--ink)}

/* -- رأس ملف الشخصية -- */
.char-hero{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:22px 16px 18px;
  border-bottom:2px solid var(--ink);
  overflow:hidden;
}
.char-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(27,34,51,.16) 1px, transparent 1.4px);
  background-size:12px 12px;
  opacity:.55;
  pointer-events:none;
}
.char-portrait{
  position:relative;
  width:min(220px,58vw); aspect-ratio:1/1;
  border-radius:50%;
  border:2.5px solid var(--ink);
  overflow:hidden;
  background:var(--paper-3);
  box-shadow:5px 5px 0 var(--ink);
}
.char-portrait svg{display:block;width:100%;height:100%}
.char-hero-info{position:relative;text-align:center}
.char-hero-info h2{font-size:clamp(22px,6.5vw,28px)}
.char-hero-badges{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.char-hero-badges .vbadge{font-size:12px;padding:3px 9px}
.char-hero-badges .vbadge svg{width:15px;height:15px}
.char-hero-badges .rankbadge{font-size:12px;padding:3px 10px}

.char-body{padding:18px 16px 24px; display:flex;flex-direction:column;gap:20px}
.bio{font-size:14.5px;line-height:1.85;color:#2A3142}

.block-title{
  font-family:'Aref Ruqaa',serif;
  font-size:19px;
  margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.block-title::before{
  content:"";
  width:16px;height:3px;background:var(--orange);
  border-radius:2px;flex:0 0 auto;
}

.stat-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.stat-name{font-size:13px;font-weight:700;width:66px;flex:0 0 auto}
.stat-track{
  flex:1 1 auto;
  height:16px;
  background:var(--paper-3);
  border:2px solid var(--ink);
  border-radius:5px 3px 6px 3px;
  overflow:hidden;
}
.stat-fill{
  height:100%;
  background:var(--chakra);
  border-inline-end:2px solid var(--ink);
  width:0;
  transition:width .55s cubic-bezier(.2,.8,.3,1);
}
.stat-num{
  font-size:13px;font-weight:900;width:32px;text-align:center;flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}

.jutsu-list{display:flex;flex-direction:column;gap:9px}
.jutsu-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;
  padding:11px 13px;
  background:var(--paper-3);
  border:2px solid var(--ink);
  border-radius:var(--hand-sm);
  box-shadow:3px 3px 0 var(--ink);
  text-align:start;
  transition:transform .14s ease, box-shadow .14s ease;
}
.jutsu-item .ji-name{font-size:14.5px;font-weight:800}
.jutsu-item .ji-sub{font-size:11.5px;font-weight:700;color:var(--muted);margin-top:2px}
.jutsu-item .ji-arrow{font-size:18px;font-weight:900;color:var(--orange);flex:0 0 auto}
.jutsu-item:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
@media (hover:hover){.jutsu-item:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink)}}

.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;
  padding:12px 20px;
  border:2px solid var(--ink);
  border-radius:var(--hand-sm);
  background:var(--orange);
  color:var(--ink);
  font-size:16px;font-weight:800;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .14s ease, box-shadow .14s ease, background-color .14s ease;
  width:100%;
}
.btn:active{transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink)}
.btn.is-ghost{background:var(--paper-3)}
.btn.is-on{background:var(--leaf);color:#FBF7EC}
.btn:disabled{opacity:.55; cursor:not-allowed; box-shadow:2px 2px 0 var(--ink)}

/* -- نافذة الجتسو -- */
.jutsu-sheet-head{
  padding:20px 16px 16px;
  border-bottom:2px solid var(--ink);
  display:flex;flex-direction:column;gap:8px;
}
.jutsu-sheet-head h2{font-size:24px}
.jutsu-body{padding:18px 16px 26px;display:flex;flex-direction:column;gap:16px}
.kv-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
}
.kv{
  border:2px solid var(--ink);
  border-radius:var(--hand-sm);
  background:var(--paper-3);
  padding:9px 11px;
}
.kv dt{font-size:11px;font-weight:800;color:var(--muted);margin-bottom:2px}
.kv dd{margin:0;font-size:15px;font-weight:900}
.users-list{display:flex;flex-wrap:wrap;gap:8px}
.user-pill{
  display:inline-flex;align-items:center;gap:7px;
  border:2px solid var(--ink);
  border-radius:20px;
  background:var(--paper-3);
  padding:4px 12px 4px 5px;
  font-size:13px;font-weight:700;
}
.user-pill .up-portrait{
  width:26px;height:26px;border-radius:50%;overflow:hidden;
  border:1.5px solid var(--ink);flex:0 0 auto;background:var(--paper-2);
}
.user-pill .up-portrait svg{display:block;width:100%;height:100%}

/* ---------- الاختبار ---------- */
.quiz-card{
  background:var(--paper-3);
  border:2px solid var(--ink);
  border-radius:var(--hand-md);
  box-shadow:5px 5px 0 var(--ink);
  padding:20px 16px;
}
.quiz-intro h2{font-size:26px;margin-bottom:8px}
.quiz-intro p{font-size:14.5px;line-height:1.85;color:#2A3142;margin-bottom:18px}
.quiz-progress{
  display:flex;align-items:center;gap:10px;margin-bottom:16px;
}
.qp-track{
  flex:1 1 auto;height:12px;background:var(--paper-2);
  border:2px solid var(--ink);border-radius:6px;overflow:hidden;
}
.qp-fill{height:100%;background:var(--orange);width:0;transition:width .3s ease}
.qp-label{font-size:12px;font-weight:800;color:var(--muted);flex:0 0 auto}
.q-text{font-size:18px;font-weight:800;line-height:1.6;margin-bottom:16px;font-family:'Aref Ruqaa',serif}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{
  display:flex;align-items:center;gap:12px;
  width:100%;text-align:start;
  padding:13px 14px;
  min-height:54px;
  background:var(--paper-3);
  border:2px solid var(--ink);
  border-radius:var(--hand-sm);
  box-shadow:3px 3px 0 var(--ink);
  font-size:14.5px;font-weight:700;
  line-height:1.5;
  transition:transform .13s ease, box-shadow .13s ease, background-color .13s ease;
}
.opt .opt-key{
  flex:0 0 auto;
  width:26px;height:26px;border-radius:50%;
  border:2px solid var(--ink);
  display:grid;place-items:center;
  font-size:12.5px;font-weight:900;
  background:var(--paper-2);
}
.opt:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
@media (hover:hover){.opt:hover{background:#FFF9EC; transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink)}}

.result-hero{
  border:2px solid var(--ink);
  border-radius:var(--hand-md);
  box-shadow:5px 5px 0 var(--ink);
  padding:22px 16px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.result-hero .res-label{font-size:12.5px;font-weight:800;letter-spacing:.5px;opacity:.75}
.result-hero h2{font-size:clamp(30px,9vw,42px);margin:6px 0 4px}
.result-hero .res-trait{
  display:inline-block;font-size:12px;font-weight:800;
  border:1.5px solid var(--ink);
  border-radius:20px;padding:2px 12px;
  background:rgba(255,255,255,.55);
}
.result-desc{
  font-size:14.5px;line-height:1.9;color:#2A3142;
  margin:18px 0;
}
.result-jutsu-title{font-family:'Aref Ruqaa',serif;font-size:19px;margin-bottom:10px}
.quiz-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}

/* ---------- شاشات أعرض ---------- */
@media (min-width:720px){
  body{padding-bottom:150px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:18px}
  .card-portrait{width:96px;height:96px}
  main{padding:26px 24px 12px}
  .overlay{align-items:center; padding:24px}
  .sheet{border-bottom:2px solid var(--ink); border-radius:var(--hand-md); max-height:88vh; box-shadow:6px 6px 0 var(--ink)}
  .char-hero{flex-direction:row;align-items:center;gap:20px;padding:26px}
  .char-hero-info{text-align:start}
  .char-hero-badges{justify-content:flex-start}
  .team-bar{flex-direction:row;align-items:center;gap:18px}
  .team-head{flex:0 0 auto}
  .team-slots{flex:1 1 auto}
  .team-stats{border-top:0;padding-top:0;flex:0 0 auto}
  .quiz-actions{flex-direction:row}
  .quiz-actions .btn{width:auto;flex:1 1 0}
}

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