/* ============================================================
   לוח הסבב — שחזור מדויק של קונספט העיצוב.
   הרקע, עמודת הסטטיסטיקה והסרגל התחתון מגיעים מהקבצים הקיימים
   (screen-stage.css / screen-hud.css); כאן רק רשת ארבעת הכרטיסים.
   ============================================================ */

.view-concept{
  display:flex; flex-direction:column;
  gap:clamp(8px,1.2vh,20px);
}

/* אותה מעטפת של מסך השאלה: עמודה בימין, תוכן בשמאל, סרגל מתחת */
.view-concept .q-stage{
  flex:1 1 auto; min-height:0;
  display:grid;
  grid-template-columns:clamp(150px,17vw,340px) minmax(0,1fr);
  gap:clamp(10px,1.1vw,24px);
}
.view-concept .q-stats,
.view-concept .q-main{ min-height:0; min-width:0; }

.view-concept .q-main{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:clamp(8px,1.4vh,22px);
}

.view-concept .q-bar{ flex:0 0 auto; height:clamp(92px,13.5vh,175px); }

/* ============================================================
   רשת ארבעת השאלות — 2×2, גובה זהה לכל הכרטיסים
   ============================================================ */

.c-grid{
  min-height:0; min-width:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.7vw,34px);
  padding-block-start:clamp(10px,1.5vh,26px);   /* מקום לעיגולים החורגים */
}

/* ============================================================
   כרטיס שאלה
   ============================================================ */

.c-card{
  position:relative;
  min-width:0; min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;   /* טקסט בימין, מדליון בשמאל */
  grid-template-rows:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(8px,1vw,20px);
  padding:clamp(12px,1.5vw,28px);
  border-radius:clamp(20px,1.6vw,30px);
  border:3px solid var(--card-edge);
  background:linear-gradient(152deg, var(--card-from) 0%, var(--card-to) 62%, var(--card-deep) 100%);
  box-shadow:
    0 0 clamp(22px,2.4vw,50px) rgb(var(--card-glow) / .5),
    0 0 0 1px rgb(var(--card-glow) / .34),
    0 20px 48px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.3);
}
/* ברק עליון */
.c-card::before{
  content:""; position:absolute; z-index:0;
  inset:2px 2px auto 2px; height:44%;
  border-radius:clamp(18px,1.4vw,27px) clamp(18px,1.4vw,27px) 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.04) 70%, transparent);
  pointer-events:none;
}
/* קו שיער פנימי */
.c-card::after{
  content:""; position:absolute; z-index:0;
  inset:7px;
  border-radius:clamp(14px,1.2vw,23px);
  border:1px solid rgb(var(--card-glow) / .3);
  pointer-events:none;
}
.c-card > *{ position:relative; z-index:1; }

/* --- ערכות הצבע של ארבעת הכרטיסים, בדיוק לפי הקונספט --- */
.c-card[data-theme="blue"]{
  --card-edge:#5EC8FF; --card-glow:76 201 255;
  --card-from:#14418F; --card-to:#0E2E6E; --card-deep:#0A1F4C;
  --card-accent:#8FDCFF;
}
.c-card[data-theme="pink"]{
  --card-edge:#FF3D9A; --card-glow:255 61 154;
  --card-from:#A5156E; --card-to:#6C0C46; --card-deep:#42052B;
  --card-accent:#FF9ACB;
}
.c-card[data-theme="cyan"]{
  --card-edge:#4FE3E0; --card-glow:79 227 224;
  --card-from:#0F6E74; --card-to:#0A4750; --card-deep:#062E36;
  --card-accent:#9BF6F2;
}
.c-card[data-theme="gold"]{
  --card-edge:#FFC53D; --card-glow:255 197 61;
  --card-from:#8A6410; --card-to:#5C420A; --card-deep:#3A2A06;
  --card-accent:#FFE09A;
}

/* --- עיגול המספר, חורג מהפינה השמאלית העליונה --- */
.c-num{
  position:absolute; z-index:3;
  top:clamp(-30px,-2.6vh,-16px);
  left:clamp(10px,1.4vw,28px);
  display:grid; place-items:center;
  width:clamp(42px,3.9vw,80px); aspect-ratio:1;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.92);
  background:radial-gradient(circle at 34% 26%,
    color-mix(in srgb, var(--card-edge) 46%, #fff) 0%,
    var(--card-edge) 48%,
    color-mix(in srgb, var(--card-edge) 55%, #000) 100%);
  color:#fff; font-weight:900; line-height:1;
  font-size:clamp(1.3rem,2.3vw,2.6rem);
  text-shadow:0 3px 5px rgba(0,0,0,.6);
  box-shadow:
    0 0 26px rgb(var(--card-glow) / .8),
    0 10px 22px rgba(0,0,0,.6),
    inset 0 -5px 14px rgba(0,0,0,.3);
}

/* --- מדליון האיור --- */
.c-med{
  grid-column:2; grid-row:1;
  flex:none;
  display:grid; place-items:center;
  width:clamp(68px,8vw,158px); aspect-ratio:1;
  border-radius:50%;
  border:2px solid rgb(var(--card-glow) / .55);
  padding:clamp(4px,.5vw,9px);
  background:radial-gradient(circle at 42% 32%, rgba(255,255,255,.14), rgba(0,0,0,.4) 74%);
  box-shadow:
    0 0 26px rgb(var(--card-glow) / .5),
    inset 0 0 0 3px var(--card-edge),
    inset 0 6px 18px rgba(0,0,0,.45);
}
.c-ico-art{ display:block; width:86%; aspect-ratio:1; }
.c-ico-art svg{ width:100%; height:100%; display:block; }

/* --- טקסט --- */
.c-body{ grid-column:1; grid-row:1; min-width:0; text-align:start; }
.c-title{
  margin:0 0 .18em;
  color:#fff; font-weight:900;
  font-size:clamp(1.5rem,2.85vw,3.5rem);
  line-height:1.02;
  text-shadow:0 2px 0 rgba(0,0,0,.45), 0 5px 20px rgba(0,0,0,.7);
}
.c-q{
  margin:0;
  color:#EAF1FF; font-weight:700;
  font-size:clamp(.92rem,1.32vw,1.75rem);
  line-height:1.28;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}

/* --- שורת התוצאה בתחתית הכרטיס --- */
.c-foot{
  grid-column:1 / -1; grid-row:2;
  display:flex; align-items:center;
  gap:clamp(8px,1vw,20px);
  padding:clamp(5px,.7vh,11px) clamp(9px,1vw,18px);
  border-radius:999px;
  background:rgba(0,0,0,.4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.c-res{
  flex:none;
  display:flex; align-items:center; gap:.4em;
  color:#fff; font-weight:800;
  font-size:clamp(.82rem,1.15vw,1.5rem);
  white-space:nowrap;
}
.c-check{
  display:grid; place-items:center;
  width:1.35em; height:1.35em;
  border-radius:50%;
  border:2px solid #43E97B;
  color:#43E97B; font-size:.8em; font-weight:900;
}
.c-pct{ color:var(--card-accent); font-weight:900; }
.c-clock{ color:#FFC53D; font-size:1.25em; line-height:1; }
.c-wait{ color:#FFD98A; }

.c-track{
  position:relative;
  flex:1 1 auto; min-width:0;
  height:clamp(10px,1.05vh,18px);
  border-radius:999px;
  background:rgba(0,0,0,.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  overflow:hidden;
}
.c-track > i{
  display:block; height:100%; width:0;
  border-radius:999px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--card-edge) 55%, #000) 0%,
    var(--card-edge) 100%);
  box-shadow:0 0 14px rgb(var(--card-glow) / .8), inset 0 1px 0 rgba(255,255,255,.5);
  transition:width 1.1s var(--ease);
}
/* פס "ממתינים לתשובות" — נצנוץ שנע לרוחב */
.c-track.is-indeterminate{
  background:linear-gradient(90deg, rgba(255,197,61,.14), rgba(255,197,61,.06));
}
.c-sweep{
  position:absolute; inset-block:0; width:38%;
  background:linear-gradient(90deg, transparent, rgba(255,197,61,.85), transparent);
  animation:c-sweep 2.1s linear infinite;
}
@keyframes c-sweep{
  from{ transform:translateX(-120%); }
  to  { transform:translateX(320%); }
}

/* ============================================================
   מסכים נמוכים / צרים
   ============================================================ */

@media (max-height:800px){
  .c-med{ width:clamp(56px,7vw,110px); }
  .c-q{ -webkit-line-clamp:2; }
}

@media (prefers-reduced-motion: reduce){
  .c-sweep{ animation:none; }
  .c-track > i{ transition:none; }
}

/* ============================================================
   כיול סופי מול הקונספט: בתמונה הכותרת תופסת כ-45% מרוחב המסך.
   ב-screen.css היא מוגבלת ל-5.8rem, מה שהשאיר אותה בכ-27%.
   ‎הכיול תחום ללוח הסבב בלבד — במסך השאלה הכותרת חייבת להישאר
   בגודל המקורי שלה, אחרת היא דוחקת את התשובות.
   ============================================================ */
.view-concept .brand-title,
.view-roundboard .brand-title{
  font-size:clamp(2.2rem,6.6vw,8.4rem);
}
.view-concept .brand-ribbon,
.view-roundboard .brand-ribbon{
  font-size:clamp(1rem,1.72vw,2.05rem);
  padding-inline:1.9em;
}