html, body { width:100%; height:100%; margin:0; }
    body{
      background: url("./myPics/italy.jpg") center / cover no-repeat fixed;
      font-family: Arial, rubik-gemstones-regular,sans-serif;
      color: #fff;
      text-align:center;
      font-weight: 250;
  font-style: oblique;
    }
   .card {
    max-width: 560px;
    margin: 20px auto;
    padding: 30px;
    border-radius: 16px;
    /* background: rgba(0, 0, 0, 0.55); */
    backdrop-filter: blur(2px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .6);
}
    .hidden{display:none;}
   button {
    padding: 10px 16px;
    font-size: 16px;
    border-radius: 8px;
    margin: 6px;
    cursor: pointer;
}
    .primary{background:#0a84ff;color:#fff;}
    .secondary {
    background: #1541e0e3;
    color: #fff;
    font-weight: bold;
}
    .success{background:#22c55e;color:#000;}
    .danger{background:#dc2626;color:#fff;}

    .tinyBtn{
      padding:6px 10px;
      font-size:12px;
      border-radius:8px;
      margin:6px 0 0;
    }

    input{
      width:100%; padding:10px; border-radius:6px; border:none; margin:6px 0;
    }
    .option{
      background:#333; padding:14px; margin:10px auto; border-radius:10px;
      cursor:pointer; max-width:420px;
    }
    .option:hover{background:#0a84ff;}
    .timer{color:#fbbf24;font-weight:bold;}

    .quiz-image{margin:16px auto; max-width:100%;}
    .quiz-image img{
      width:100%; max-height:260px; object-fit:cover; border-radius:14px;
      box-shadow:0 12px 30px rgba(0,0,0,.6);
    }
    /* Force images visible even if sentenceQuiz.css overrides them */
    .quiz-image { display:block !important; }
    .quiz-image img { display:block !important; visibility:visible !important; opacity:1 !important; }

    /* ✅ UPDATED: keyboard styles now apply to quiz + written test */
    #keyboard, #testKeyboard{margin-top:15px; display:flex; flex-wrap:wrap; justify-content:center;}
    .key{
      padding:10px 14px; margin:4px; background:#333; color:#fff; border-radius:6px;
      cursor:pointer; user-select:none; font-size:16px;
    }
    .key:hover{background:#0a84ff;}
    .key.space{width:220px;}
    .key.back{background:#aa3333;}

    .block-bank,.block-answer{
      display:flex; flex-wrap:wrap; justify-content:center;
      gap:10px; margin-top:15px;
    }
    .word-block{
      background:#222; padding:10px 14px; border-radius:8px;
      cursor:grab; user-select:none; border:1px solid #555;
    }
    .word-block.dragging{opacity:0.4;}
    .block-answer{
      min-height:60px; border:2px dashed #0a84ff; border-radius:10px; padding:10px;
    }

    #editPreviewWrap{
      margin:10px 0 0;
      border-radius:12px;
      overflow:hidden;
      display:none;
      box-shadow:0 10px 24px rgba(0,0,0,.45);
    }
    #editPreviewWrap img{
      width:100%;
      max-height:160px;
      object-fit:cover;
      display:block;
    }

    /* ✅ ADDED: collapsible edit list wrapper */
    #editListWrap.isHidden{ display:none; }

    /* ===== History UI ===== */
    #historyList{
      margin-top:12px;
      text-align:left;
    }
    .historyItem{
      background: rgba(0,0,0,0.35);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 12px;
      padding: 12px;
      margin: 10px 0;
    }
    .historyMeta{
      font-size: 13px;
      opacity: 0.92;
      line-height: 1.35;
    }
    .historyTitle{
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .pill{
      display:inline-block;
      padding:2px 8px;
      border-radius:999px;
      font-size:12px;
      margin-left:8px;
      background: rgba(10,132,255,0.2);
      border: 1px solid rgba(10,132,255,0.35);
    }
    .pill.bad{ background: rgba(220,38,38,0.18); border-color: rgba(220,38,38,0.35); }
    .pill.ok{ background: rgba(34,197,94,0.18); border-color: rgba(34,197,94,0.35); }
    .pill.neutral{ background: rgba(251,191,36,0.18); border-color: rgba(251,191,36,0.35); }

    /* ===== Written Test UI ===== */
    .testRow{
      background: rgba(0,0,0,0.28);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 12px;
      padding: 10px;
      margin: 10px 0;
      text-align:left;
    }
    .testTop{
      display:flex;
      justify-content:space-between;
      gap:10px;
      align-items:flex-start;
      margin-bottom:8px;
    }
    .testNum{
      font-weight:800;
      font-size:14px;
      opacity:.95;
    }
    .testLang{
      font-size:12px;
      opacity:.92;
      white-space:nowrap;
    }
    .testPrompt{
      font-size:12px;
      opacity:.92;
      margin:6px 0 8px;
      line-height:1.35;
    }
    textarea.testInput{
      width:100%;
      min-height:56px;
      resize:vertical;
      padding:10px;
      border-radius:10px;
      border:none;
      outline:none;
      font-size:15px;
      background:#111;
      color:#fff;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
    }
    textarea.testInput.good{
      box-shadow: inset 0 0 0 2px rgba(34,197,94,0.9);
    }
    textarea.testInput.bad{
      box-shadow: inset 0 0 0 2px rgba(220,38,38,0.9);
    }

    .toggleList{
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
}

.toggleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  margin:10px 0;
  border-radius:14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  cursor:pointer;
  user-select:none;
}


.toggleRow span:first-child {
    font-size: 18px;
    font-weight: 1000;
    color: #0a0404;
}

.toggleRow input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.switch{
  width:52px;
  height:30px;
  border-radius:999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  position:relative;
  flex: 0 0 auto;
  transition: .18s ease;
}

.switch::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:24px;
  height:24px;
  border-radius:50%;
  background: rgba(255,255,255,0.9);
  transition: .18s ease;
}

.toggleRow input:checked + .switch {
    background: rgb(16 17 16 / 97%);
    border-color: rgba(34, 197, 94, 0.55);
}

.toggleRow input:checked + .switch::after{
  transform: translateX(22px);
  background: rgba(255,255,255,0.98);
}


.historyHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
#toggleHistoryBtn{ white-space:nowrap; }
/* Make cards shorter (less height) */
.card{
  padding: 14px 16px !important;   /* less inside space */
  margin: 10px auto !important;    /* less space above/below */
}

/* Tighten headings spacing */
h1{ margin: 12px 0 6px !important;
 
  font-family: "Rubik Gemstones", system-ui;
  font-weight: 250;
  font-style: oblique;

 }
h2{ margin: 6px 0 10px !important; }
h3{ margin: 6px 0 8px !important; }

/* Tighten language rows */
.toggleRow {
    padding: 8px 12px !important;
    margin: 6px 0 !important;
    background: #00000033;
}

/* Tighten history spacing */
.historyItem{
  padding: 8px 10px !important;
  margin: 6px 0 !important;
}

  /* ===============================
   FORCE SMALLER UI + RESPONSIVE
   (safe for PayPal iframes)
================================ */

/* DO NOT use transform:scale on parents (breaks PayPal) */
html, body { overflow-x:hidden; }

/* shrink overall typography a bit */
body{ font-size:14px; line-height:1.3; }

/* keep header/title from touching edges */
header{ padding: 10px 14px !important; }
.brand{ max-width: 100% !important; }

/* ✅ this is the big “CARLTONS LOGIC” text */
.title.block3d{
  font-size: clamp(26px, 4.2vw, 44px) !important;
  letter-spacing: 1px !important;
  margin: 8px auto 12px !important;
  padding: 6px 12px !important;
  max-width: 92vw !important;
  text-align:center !important;
}

/* ✅ make the main header section smaller */
.time-panel{
  max-width: 760px !important;
  width: min(92vw, 760px) !important;
}

/* ✅ make the 3 big oval buttons smaller */
.quick-actions-out{
  width: min(92vw, 760px) !important;
  display:flex !important;
  gap: 14px !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
}
.quick-actions-out .quick-btn{
  width: 220px !important;
  height: 110px !important;
  font-size: 16px !important;
  border-radius: 28px !important;
}

/* ✅ calendar smaller */
.mini-calendar{
  width: min(92vw, 760px) !important;
}

/* ✅ PayPal always visible + normal size */
#paypalInlineBox{
  width: min(92vw, 320px) !important;
  margin: 12px auto 0 !important;
}
#paypalButtonsInline{
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 auto !important;
}
#paypalInlineBox,
#paypalButtonsInline,
#paypalButtonsInline iframe{
  overflow: visible !important;
  max-width: 100% !important;
}

/* ✅ When screen is small, stack cleanly */
@media (max-width: 900px){
  .header-right, .time-wrap{
    display:flex !important;
    flex-direction: column !important;
    align-items:center !important;
    gap: 14px !important;
  }

  .quick-actions-out .quick-btn{
    width: min(92vw, 340px) !important;
    height: 88px !important;
    font-size: 15px !important;
  }

  /* PayPal stays visible instead of sliding off */
  #paypalInlineBox{ order: 99; }
}
/* ================= WRONG OVERLAY (BIG RED X) ================= */
#wrongOverlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.45);
  z-index:9999;
  pointer-events:none; /* overlay won't block clicks */
}

#wrongOverlay.show{
  display:flex;
}

#wrongOverlay .wrongX{
  font-size:min(92vw, 92vh);   /* covers most of the screen */
  line-height:1;
  font-weight:900;
  color:#ff1f1f;
  text-shadow:0 0 40px rgba(255,0,0,.55);
  transform:scale(.7) rotate(-8deg);
  opacity:0;
  animation:wrongPop .22s ease-out forwards;
}

@keyframes wrongPop{
  from{ transform:scale(.45) rotate(-12deg); opacity:0; }
  to  { transform:scale(1) rotate(-8deg); opacity:1; }
}
/* ================= WRONG OVERLAY (BIG RED X + BUZZER VISUAL) ================= */
.wrongOverlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  pointer-events: none;
}

.wrongOverlay.show {
  display: flex;
  animation: wrongPop .35s ease-out;
}

@keyframes wrongPop {
  from { transform: scale(.98); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.wrongOverlay svg {
  width: min(92vw, 780px);
  height: min(92vh, 780px);
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.55));
}

/* ================= ZH CHARACTER PUZZLE (MCQ EXTRA) ================= */
.zhPuzzleWrap{
  margin: 14px 0 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  text-align: left;
}

.zhPuzzleTitle{
  font-weight: 900;
  margin-bottom: 8px;
  font-size: 14px;
  opacity: .95;
}

.zhPuzzleHint{
  font-size: 12px;
  opacity: .85;
  margin-top: 6px;
}

.zhPuzzleRow{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 720px){
  .zhPuzzleRow{ grid-template-columns: 320px 1fr; }
}

.zhBoard{
  width: 320px;
  max-width: 100%;
  aspect-ratio: 1/1;
  display: grid;
  gap: 6px;
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  position: relative;
  overflow: hidden;
}

.zhBoard::before{
  content: attr(data-char);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 170px;
  font-weight: 900;
  opacity: .12;
  filter: blur(.2px);
}

.zhCell{
  background: rgba(0,0,0,.20);
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 0;
}

.zhBank{
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
  min-height: 130px;
}

.zhPiece{
  width: 86px;
  height: 86px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.zhPiece:active{ cursor: grabbing; }
.zhPiece.selected{ outline: 3px solid rgba(34,197,94,.75); }

.zhPuzzleActions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.zhPuzzleMsg{
  margin-top: 8px;
  font-size: 13px;
  opacity: .92;
}

.option.locked{
  opacity: .45;
  pointer-events: none;
}
/* Make the board a circle + DO NOT block drops */
.zhBoard{
  border-radius: 50%;
  position: relative;
  z-index: 0;
}

/* This watermark MUST NOT intercept mouse/drag events */
.zhBoard::before{
  pointer-events: none;
  z-index: 0;
}

/* Ensure cells sit ABOVE the watermark and accept drops */
.zhCell{
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
/* ================= EDIT PAGE: COLLAPSIBLE SECTIONS (split by <hr>) ================= */
.editSection {
  margin: 10px 0;
}

.editSectionBtn {
  width: 100%;
  text-align: left;
  font-weight: 800;
  padding: 12px 14px;
  border-radius: 14px;
}

.editSectionBody {
  display: none;
  margin-top: 10px;
}

.editSection.open .editSectionBody {
  display: block;
}

/* hide the old HRs (we will rebuild layout) */
#edit hr {
  display: none;
}


/* ================= EDIT PAGE: BUTTON-ONLY SECTIONS (MENU) ================= */
/* ================= EDIT MENU (Buttons/Sections) ================= */
.editMenu{
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:stretch;
  max-width: 760px;
  margin: 12px auto 18px;
}
.editMenuBtn{
  width: 100%;
  padding: 20px 18px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
  border-radius: 18px;
  margin: 0; /* override global button margin */
  background: rgb(224 17 17 / 26%);
  border: 2px solid rgba(0,0,0,0.55);
  color: black;
  text-align: center;
  box-shadow: 0 10px 26px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(255,255,255,0.14);
}
.editMenuBtn:hover{
  filter: brightness(1.08);
}
.editMenuBtn.active{
  outline: 2px solid rgba(10,132,255,0.65);
  outline-offset: 2px;
}
.editMenuSection{
  display:none;
}
.editMenuSection.show{
  display:block;
}
/* ================= END EDIT MENU ================= */
/* ================= SAVED CARDS (Edit Page) ================= */
.savePickRow{
  display:flex;
  align-items:center;
  gap:8px;
  margin: 0 0 8px;
  font-size: 12px;
  opacity: .95;
}
.savePickRow input{
  width: 18px;
  height: 18px;
  margin: 0; /* keep checkbox tight */
}
.savedWrap{
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
}
.savedToolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.savedCardItem{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  padding: 10px;
  margin: 8px 0;
}
.savedCardTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.savedCardMini{
  font-size: 12px;
  opacity: .92;
  line-height: 1.35;
  margin-top: 6px;
}
.savedThumb{
  width: 90px;
  height: 60px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}


/* ================= IMAGE LIBRARY MODAL ================= */
.modalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.modalCard{
  width: min(980px, 96vw);
  max-height: 92vh;
  overflow: auto;
  background: rgba(2,6,23,.96);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  padding: 14px;
}
.modalTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.modalTools{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.modalSearch{
  flex: 1;
  min-width: 220px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.28);
  color: var(--text, #e5e7eb);
}
.modalCount{
  font-size: 12px;
  opacity: .82;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(0,0,0,.18);
}
.modalHint{
  margin-top: 10px;
  font-size: 12px;
  opacity: .9;
  line-height: 1.3;
}
.imgGrid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.imgTile{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  border-radius: 14px;
  padding: 8px;
  cursor: pointer;
  transition: transform .08s ease, border-color .08s ease;
}
.imgTile:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.28); }
.imgTile.selected{ outline: 2px solid rgba(34,197,94,.9); border-color: rgba(34,197,94,.55); }
.imgTile img{
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.imgTileName{
  margin-top: 8px;
  font-size: 12px;
  opacity: .92;
  word-break: break-word;
}
.modalBottom{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.14);
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.modalSelected{
  font-size: 13px;
  opacity: .9;
  max-width: 520px;
}