/* =========================================================
   German in Context — Card V2 Clean Rebuild
   Namespace: .gic-card-v2 / .gic-v2-*
   No old layer-tab or adaptive-font class is used.
   ========================================================= */

.gic-card-v2.gic-study-card{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  height:clamp(560px,68dvh,720px) !important;
  min-height:560px !important;
  max-height:720px !important;
  overflow:hidden !important;
  border-radius:30px !important;
  background:#fffdf9 !important;
  box-sizing:border-box !important;
}

/* Keep the approved GiC hero, but lock its geometry so cards do not jump. */
.gic-card-v2 > .gic-hero-band{
  flex:0 0 190px !important;
  min-height:190px !important;
  max-height:190px !important;
  box-sizing:border-box !important;
}

/* White learning surface */
.gic-card-v2 .gic-v2-core{
  position:relative !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  background:#fffdf9 !important;
  overflow:hidden !important;
}

/* Front and Back occupy exactly the same shell. */
.gic-card-v2 .gic-v2-front,
.gic-card-v2 .gic-v2-back{
  position:absolute !important;
  inset:0 !important;
  box-sizing:border-box !important;
  padding:28px 30px 104px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
}

.gic-card-v2 .gic-v2-front[hidden],
.gic-card-v2 .gic-v2-back[hidden]{
  display:none !important;
}

/* Reveal transition only; card-to-card runtime is untouched. */
.gic-card-v2 .gic-v2-front{
  justify-content:center !important;
  transition:opacity .14s ease, transform .14s ease;
}
.gic-card-v2 .gic-v2-front.is-leaving{
  opacity:0;
  transform:translateY(-3px);
}
.gic-card-v2 .gic-v2-back.is-visible{
  opacity:1;
}

.gic-card-v2 .gic-v2-eyebrow{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  color:#aa7e32;
  font-size:11px;
  font-weight:950;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.gic-card-v2 .gic-v2-eyebrow i{
  display:block;
  width:42px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#e5c477,#55b8aa);
}

.gic-card-v2 .gic-v2-front-text{
  margin-top:26px;
  max-width:92%;
  color:#123f39;
  font-size:clamp(28px,6vw,44px);
  font-weight:820;
  line-height:1.12;
  letter-spacing:-.035em;
  text-wrap:balance;
}

.gic-card-v2 .gic-v2-reveal-button{
  margin-top:30px;
  min-height:50px;
  padding:0 25px;
  border:1px solid rgba(18,82,73,.16);
  border-radius:17px;
  background:linear-gradient(145deg,#176b5f,#0f564d);
  color:#fff;
  font:inherit;
  font-size:12px;
  font-weight:900;
  box-shadow:0 10px 25px rgba(16,77,69,.18);
  cursor:pointer;
}
.gic-card-v2 .gic-v2-front-hint{
  margin-top:12px;
  color:#8b9994;
  font-size:10px;
}

/* German answer: server-chosen tiers. No JS resize loop. */
.gic-card-v2 .gic-v2-german{
  width:100%;
  max-width:100%;
  margin:24px auto 0;
  color:#0c4943;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-weight:790;
  line-height:1.08;
  letter-spacing:-.035em;
  text-align:center;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  box-sizing:border-box;
}
.gic-card-v2 .gic-v2-de-xl{
  font-size:clamp(38px,8vw,54px);
  white-space:nowrap;
}
.gic-card-v2 .gic-v2-de-lg{
  font-size:clamp(33px,7.2vw,48px);
  white-space:nowrap;
}
.gic-card-v2 .gic-v2-de-md-single{
  font-size:clamp(27px,6.2vw,41px);
  white-space:nowrap;
}
.gic-card-v2 .gic-v2-de-md{
  font-size:clamp(27px,5.8vw,39px);
  white-space:normal;
  text-wrap:balance;
}
.gic-card-v2 .gic-v2-de-long{
  font-size:clamp(22px,4.8vw,33px);
  white-space:normal;
  text-wrap:balance;
  line-height:1.12;
}

.gic-card-v2 .gic-v2-translation{
  margin-top:13px;
  color:#8a928e;
  font-size:clamp(15px,3.5vw,20px);
  font-weight:420;
  font-style:italic;
  line-height:1.28;
  text-wrap:balance;
}

/* The original Listen / Speak components stay intact.
   Only their V2 placement is defined here. */
.gic-card-v2 .gic-main-actions{
  margin-top:22px !important;
  margin-bottom:0 !important;
  flex:0 0 auto !important;
}

/* ---------- Fixed bonus tabs ---------- */
.gic-card-v2 .gic-v2-tabs{
  position:absolute !important;
  left:18px !important;
  right:18px !important;
  bottom:12px !important;
  top:auto !important;

  height:72px !important;
  min-height:72px !important;
  max-height:72px !important;

  margin:0 !important;
  padding:7px !important;
  box-sizing:border-box !important;

  border:1px solid rgba(24,47,42,.13) !important;
  border-radius:23px !important;
  background:linear-gradient(180deg,#f8f4eb 0%,#f1ece2 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 8px 22px rgba(17,51,45,.06) !important;

  z-index:20 !important;
  overflow-y:hidden !important;
}

.gic-card-v2 .gic-v2-tabs[hidden]{
  display:none !important;
}

.gic-card-v2 .gic-v2-tabs:not(.gic-v2-tabs-scroll){
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:0 !important;
  overflow-x:hidden !important;
}

.gic-card-v2 .gic-v2-tabs.gic-v2-tabs-scroll{
  display:flex !important;
  align-items:stretch !important;
  gap:6px !important;
  overflow-x:auto !important;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.gic-card-v2 .gic-v2-tabs.gic-v2-tabs-scroll::-webkit-scrollbar{display:none}
.gic-card-v2 .gic-v2-tabs.gic-v2-tabs-scroll > button{
  flex:0 0 122px !important;
  width:122px !important;
  min-width:122px !important;
  scroll-snap-align:center;
}

.gic-card-v2 .gic-v2-tabs > button{
  position:relative !important;
  min-width:0 !important;
  height:58px !important;
  min-height:58px !important;
  max-height:58px !important;

  margin:0 !important;
  padding:0 6px !important;
  border:0 !important;
  border-radius:17px !important;
  background:transparent !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;

  color:#65726d !important;
  opacity:1 !important;
  font-size:11.6px !important;
  font-weight:820 !important;
  line-height:1 !important;
  letter-spacing:-.015em !important;
  white-space:nowrap !important;
  box-shadow:none !important;
  transform:none !important;
  z-index:2 !important;
}

.gic-card-v2 .gic-v2-tabs > button + button::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:1px;
  background:rgba(72,82,78,.14);
}
.gic-card-v2 .gic-v2-tabs > button.active{
  background:linear-gradient(180deg,#eaf4ef,#e1eee8) !important;
  color:#135b51 !important;
  font-weight:900 !important;
  box-shadow:inset 0 0 0 1px rgba(18,85,74,.05),0 4px 12px rgba(18,73,64,.06) !important;
}
.gic-card-v2 .gic-v2-tabs > button:disabled,
.gic-card-v2 .gic-v2-tabs > button[aria-disabled="true"]{
  color:#aeb8b4 !important;
  opacity:.50 !important;
  cursor:default !important;
  pointer-events:none !important;
}
.gic-card-v2 .gic-v2-tabs > button svg{
  width:17px !important;
  height:17px !important;
  min-width:17px !important;
  flex:0 0 17px !important;
}
.gic-card-v2 .gic-v2-tab-indicator{
  display:none !important;
}

/* ---------- Floating bonus content ---------- */
.gic-card-v2 .gic-v2-drawer{
  display:none;
  position:absolute;
  left:18px;
  right:18px;
  bottom:92px;
  z-index:25;
  max-height:238px;
  border:1px solid rgba(24,63,56,.11);
  border-radius:22px;
  background:rgba(255,254,250,.98);
  box-shadow:0 18px 44px rgba(17,54,48,.16);
  overflow:hidden;
}
.gic-card-v2 .gic-v2-drawer.is-open{
  display:block;
}
.gic-card-v2 .gic-v2-drawer[aria-hidden="true"]{
  display:none !important;
}
.gic-card-v2 .gic-v2-drawer-inner{
  max-height:238px;
  overflow:hidden;
}
.gic-card-v2 .gic-v2-drawer-handle{
  width:44px;
  height:4px;
  margin:8px auto 2px;
  border-radius:999px;
  background:#d4ddda;
}
.gic-card-v2 .gic-v2-panel{
  max-height:224px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:12px 14px 16px;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.gic-card-v2 .gic-v2-panel[hidden]{
  display:none !important;
}
.gic-card-v2 .gic-v2-panel .gic-layer-head{
  position:sticky;
  top:-12px;
  z-index:3;
  padding-top:10px;
  background:#fffefa;
}

/* ---------- Rating bar ---------- */
.gic-v2-rating-bar{
  position:fixed !important;
  left:50% !important;
  bottom:calc(env(safe-area-inset-bottom,0px) + 8px) !important;
  transform:translateX(-50%) !important;
  z-index:90 !important;

  width:min(calc(100vw - 16px),760px) !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:8px !important;

  margin:0 !important;
  padding:9px !important;
  box-sizing:border-box !important;

  border:1px solid rgba(20,30,28,.10) !important;
  border-radius:22px !important;
  background:rgba(255,253,249,.96) !important;
  box-shadow:0 12px 30px rgba(20,30,28,.12) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.gic-v2-rating-bar[hidden]{display:none !important}

.gic-v2-rating-bar > button{
  min-height:68px !important;
  border:0 !important;
  border-radius:18px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  font:inherit !important;
  cursor:pointer !important;
}
.gic-v2-rating-bar > button[data-gic-rating="again"]{
  background:#fbefef !important;
  color:#aa4654 !important;
}
.gic-v2-rating-bar > button[data-gic-rating="hard"]{
  background:#fcf4df !important;
  color:#8b6725 !important;
}
.gic-v2-rating-bar > button[data-gic-rating="good"]{
  background:#e8f4ef !important;
  color:#22725d !important;
}
.gic-v2-rating-bar > button[data-gic-rating="easy"]{
  background:linear-gradient(150deg,#19877a,#0c665e) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(13,102,94,.20) !important;
}
.gic-v2-rating-bar .gic-v2-rating-time{
  font-size:11px !important;
  font-weight:950 !important;
  line-height:1 !important;
  opacity:.80 !important;
}
.gic-v2-rating-bar strong{
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1 !important;
}

/* Hide time labels injected by older experimental rating patches. */
.gic-v2-rating-bar .gic-rating-time,
.gic-v2-rating-bar .gic-rating-preview{
  display:none !important;
}

/* ---------- Mobile ---------- */
@media(max-width:640px){
  .gic-card-v2.gic-study-card{
    height:clamp(540px,67dvh,660px) !important;
    min-height:540px !important;
    max-height:660px !important;
    border-radius:28px !important;
  }
  .gic-card-v2 > .gic-hero-band{
    flex-basis:180px !important;
    min-height:180px !important;
    max-height:180px !important;
  }
  .gic-card-v2 .gic-v2-front,
  .gic-card-v2 .gic-v2-back{
    padding:24px 22px 98px !important;
  }
  .gic-card-v2 .gic-v2-de-xl{font-size:clamp(36px,10.2vw,48px)}
  .gic-card-v2 .gic-v2-de-lg{font-size:clamp(31px,8.8vw,42px)}
  .gic-card-v2 .gic-v2-de-md-single{font-size:clamp(25px,7.2vw,35px)}
  .gic-card-v2 .gic-v2-de-md{font-size:clamp(25px,6.7vw,34px)}
  .gic-card-v2 .gic-v2-de-long{font-size:clamp(21px,5.7vw,29px)}
  .gic-card-v2 .gic-v2-translation{
    font-size:clamp(14px,4vw,18px);
    margin-top:10px;
  }
  .gic-card-v2 .gic-main-actions{
    margin-top:18px !important;
  }
  .gic-card-v2 .gic-v2-tabs{
    left:14px !important;
    right:14px !important;
    bottom:9px !important;
    height:68px !important;
    min-height:68px !important;
    max-height:68px !important;
    padding:6px !important;
    border-radius:21px !important;
  }
  .gic-card-v2 .gic-v2-tabs > button{
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
    padding:0 4px !important;
    gap:4px !important;
    font-size:10.4px !important;
  }
  .gic-card-v2 .gic-v2-tabs > button svg{
    width:15px !important;
    height:15px !important;
    min-width:15px !important;
    flex-basis:15px !important;
  }
  .gic-card-v2 .gic-v2-drawer{
    left:14px;
    right:14px;
    bottom:84px;
    max-height:220px;
  }
  .gic-card-v2 .gic-v2-drawer-inner{max-height:220px}
  .gic-card-v2 .gic-v2-panel{max-height:205px}
  .gic-v2-rating-bar{
    width:calc(100vw - 14px) !important;
    gap:7px !important;
    padding:8px !important;
    border-radius:21px !important;
  }
  .gic-v2-rating-bar > button{
    min-height:64px !important;
    border-radius:17px !important;
  }
}

/* Very narrow phones: preserve the 3 full standard labels. */
@media(max-width:390px){
  .gic-card-v2 .gic-v2-tabs > button{
    font-size:9.5px !important;
    gap:3px !important;
    padding:0 2px !important;
  }
  .gic-card-v2 .gic-v2-tabs > button svg{
    width:13px !important;
    height:13px !important;
    min-width:13px !important;
    flex-basis:13px !important;
  }
}