html, body { width:100%; height:100%; margin:0; }
body{
background: url("./almafi.jpg") center / cover no-repeat fixed;
font-family: Arial,rubik-gemstones-regular, sans-serif;
color: azure;
text-align:center;
font-weight: 250;
font-style: oblique;
}
.card{
max-width:560px; margin:20px auto; padding:30px; border-radius:16px;
}
.hidden{display:none;}
button{
padding:10px 16px; font-size:16px; border-radius:8px; border:none;
margin:6px; cursor:pointer;
}
.primary{background:#0a84ff;color:#fff;}
.secondary {
background: #b9050569;
color: #fff;
}
.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; }
/* 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;
}
/* 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);
}
/* ===== Toggles ===== */
.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(17, 17, 17, 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:600;
}
.toggleRow input{
position:absolute;
opacity:0;
pointer-events:none;
}
.switch{
width:52px;
height:30px;
border-radius:999px;
background: black;
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: #dc2626;
border-color: #dc2626;
}
.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;
margin: 10px auto !important;
}
/* Tighten headings spacing */
h1{ margin: 12px 0 6px !important;color: #1313b4bd; }
h2{ margin: 6px 0 10px !important;color: #1313b4bd; }
h3{ margin: 6px 0 8px !important; }
/* Tighten language rows */
.toggleRow{
padding: 8px 12px !important;
margin: 6px 0 !important;
background: black;;
}
/* Tighten history spacing */
.historyItem{
padding: 8px 10px !important;
margin: 6px 0 !important;
}
/* ✅ NEW: inline row helper */
.inlineRow{
display:flex;
align-items:center;
gap:10px;
justify-content:flex-start;
text-align:left;
}
.inlineRow input[type="checkbox"]{
width:auto;
margin:0;
}
/* ================= 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; }
}
/* ===== Categories UI ===== */
select {
width: 100%;
padding: 10px;
border-radius: 6px;
border: none;
margin: 6px 0;
background: #1111112b;
color: black;
}
.catBar{
display:flex;
gap:12px;
align-items:flex-end;
margin-top:8px;
flex-wrap:wrap;
}
.catLabel{ flex: 1 1 180px; text-align:left; }
.catAdd{ flex: 2 1 280px; text-align:left; }
.catSmall{
font-size:12px;
opacity:.9;
margin-bottom:6px;
}
.catAddRow{
display:flex;
gap:10px;
align-items:center;
}
.catAddRow input{
flex:1;
margin:0;
}
.catPill{
display:inline-block;
font-size:12px;
padding:2px 8px;
border-radius:999px;
margin-left:8px;
background: rgba(10,132,255,0.18);
border: 1px solid rgba(10,132,255,0.30);
opacity:.95;
}
/* ===== Generator (Edit Page) ===== */
.genPanel{
text-align:left;
background: rgba(0,0,0,0.22);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 14px;
padding: 12px;
}
.genHeader{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
}
.genToggle{
display:flex;
align-items:center;
gap:10px;
user-select:none;
cursor:pointer;
}
.genToggle input{
position:absolute;
opacity:0;
pointer-events:none;
}
/* ===== EDIT PAGE ACTION BAR (STACKED CARD STYLE) ===== */
.editActionBar{
display:flex;
gap:14px;
justify-content:center;
flex-wrap:wrap;
margin:16px 0 20px;
}
/* Individual card */
.actionCard{
background: linear-gradient(135deg, #6d28d9, #7c3aed);
border-radius:18px;
padding:14px 16px;
min-width:260px;
box-shadow:
0 20px 40px rgba(0,0,0,.35),
inset 0 0 0 1px rgba(255,255,255,.15);
position:relative;
transition:transform .2s ease, box-shadow .2s ease;
}
/* Hover lift */
.actionCard:hover{
transform:translateY(-3px);
box-shadow:
0 28px 55px rgba(0,0,0,.45),
inset 0 0 0 1px rgba(255,255,255,.2);
}
/* Title + subtitle */
.actionTitle{
font-weight:900;
font-size:16px;
margin-bottom:6px;
}
.actionSub{
font-size:13px;
opacity:.95;
}
/* Make generator header align nicely */
.actionCard .genHeader{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
}
.editTabs{
display:flex;
gap:8px;
flex-wrap:wrap;
margin:12px 0;
}
.tabBtn {
background: #b9050569;
color: #fff;
border-radius: 999px;
padding: 8px 14px;
font-size: 14px;
border: 1px solid rgba(255, 255, 255, .2);
}
.hidden { display:none !important; }
.tabBtn.active{
background:#0a84ff;
}
.tabPanel{
margin-top:14px;
}
.tabPanel.show{
display:block;
}
.tabPanel.hidden{
display:none;
}
.actionCard {
position: relative;
z-index: 2;
background: transparent;
}
.genPanel * {
position: relative;
z-index: 2;
}
/* ================= TAB LOCK ================= */
.tabPanel {
display: none !important;
}
.tabPanel.show {
display: block !important;
}
/* ===== Hard Test (Blocks / Fill) ===== */
.testTypePill{
font-size:12px;
padding:3px 8px;
border-radius:999px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.15);
margin-left:auto;
opacity:.95;
}
.blockArea{
margin-top:10px;
padding:10px;
border-radius:14px;
border:1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.04);
}
.blockBank{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:10px;
}
.blockAnswer{
min-height:44px;
padding:10px;
border-radius:12px;
border:1px dashed rgba(255,255,255,.22);
background: rgba(0,0,0,.12);
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
}
.wordTile{
border:none;
cursor:pointer;
padding:8px 10px;
border-radius:10px;
background: rgba(255,255,255,.10);
color: inherit;
font-size:14px;
line-height:1;
}
.wordTile:hover{ filter: brightness(1.08); }
.wordTile:disabled{
opacity:.35;
cursor:not-allowed;
}
.wordTile.chosen{
background: rgba(34,197,94,.18);
border:1px solid rgba(34,197,94,.35);
}
.blockTools{
display:flex;
gap:8px;
margin-top:10px;
}
/* ================= EDIT TAB CARDS (STATIC STACK) ================= */
.editTabs{ display:none; } /* keep the original tab buttons in HTML, but hide them */
.editCardSlider{
position: relative;
width: 300px;
height: 260px;
margin: 18px auto 10px auto;
cursor: pointer;
user-select: none;
}
.editCardSlider .item{
position: absolute;
width: 300px;
height: 200px;
border-radius: 18px;
overflow: hidden;
background: transparent;
transition: top .28s ease, left .28s ease, transform .28s ease;
box-shadow: 0 15px 40px rgba(0,0,0,.40);
}
.editCardSlider .editCardBg{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: brightness(1.05) contrast(1.05);
}
.editCardSlider .sliderBtn{
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
width: 76%;
border: 0;
padding: 12px 14px;
border-radius: 999px;
font-size: 16px;
font-weight: 800;
letter-spacing: .2px;
color: #fff;
background: rgba(0,0,0,.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
cursor: pointer;
}
.editCardSlider .sliderBtn:hover{
background: rgba(0,0,0,.70);
}
.editCardSlider .sliderBtn:active{
transform: translateX(-50%) scale(.98);
}
/* Stack offsets (same look as your example) */
.editCardSlider .item:nth-child(5){ left: 0; top: 0; z-index: 1; }
.editCardSlider .item:nth-child(4){ left: 20px; top: -20px; z-index: 2; }
.editCardSlider .item:nth-child(3){ left: 40px; top: -40px; z-index: 3; }
.editCardSlider .item:nth-child(2){ left: 60px; top: -60px; z-index: 4; }
.editCardSlider .item:nth-child(1){ left: 80px; top: -80px; z-index: 5; }
/* Mobile: keep it centered and smaller */
@media (max-width: 420px){
.editCardSlider{ width: 260px; height: 240px; }
.editCardSlider .item{ width: 260px; height: 180px; }
.editCardSlider .item:nth-child(5){ left: 0; top: 0; }
.editCardSlider .item:nth-child(4){ left: 16px; top: -16px; }
.editCardSlider .item:nth-child(3){ left: 32px; top: -32px; }
.editCardSlider .item:nth-child(2){ left: 48px; top: -48px; }
.editCardSlider .item:nth-child(1){ left: 64px; top: -64px; }
.editCardSlider .sliderBtn{ width: 82%; font-size: 15px; }
}
/* ================= GLASS CREDIT CARD LOOK (added) ================= */
/* Real credit card ratio: 3.375in x 2.125in => ~1.586 */
:root{
--cc-w: 360px; /* change this if you want bigger/smaller cards */
--cc-ratio: 1.586;
--cc-h: calc(var(--cc-w) / var(--cc-ratio));
--cc-radius: 22px;
--cc-glow: rgba(186, 104, 255, .75);
--cc-glow-2: rgba(0, 255, 209, .45);
}
.editCardSlider{
width: var(--cc-w) !important;
height: calc(var(--cc-h) + 60px) !important; /* room for stacked depth */
margin: 22px auto 14px auto !important;
}
.editCardSlider .item{
width: var(--cc-w) !important;
height: var(--cc-h) !important;
border-radius: var(--cc-radius) !important;
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.18) !important;
backdrop-filter: blur(18px) saturate(1.3);
-webkit-backdrop-filter: blur(18px) saturate(1.3);
box-shadow:
0 18px 55px rgba(0,0,0,.55),
0 0 0 1px rgba(255,255,255,.10) inset !important;
overflow: hidden;
}
/* Edge glow ring */
.editCardSlider .item::before{
content:"";
position:absolute;
inset:-2px;
border-radius: calc(var(--cc-radius) + 2px);
background: conic-gradient(
from 180deg,
rgba(255,255,255,.0),
var(--cc-glow),
rgba(255,255,255,.0),
var(--cc-glow-2),
rgba(255,255,255,.0)
);
filter: blur(10px);
opacity: .70;
pointer-events:none;
}
/* Inner glass sheen */
.editCardSlider .item::after{
content:"";
position:absolute;
inset:0;
border-radius: var(--cc-radius);
background:
radial-gradient(120% 70% at 20% 15%, rgba(255,255,255,.20), rgba(255,255,255,0) 55%),
radial-gradient(90% 70% at 85% 85%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0));
pointer-events:none;
mix-blend-mode: screen;
}
/* Make the background image a subtle texture instead of a huge poster */
.editCardSlider .editCardBg{
opacity: .22 !important;
filter: saturate(1.1) contrast(1.05) blur(2px) !important;
transform: scale(1.08);
}
/* Button on card looks like a premium chip label */
.editCardSlider .sliderBtn{
width: 82% !important;
padding: 12px 16px !important;
border-radius: 999px !important;
background: rgba(10,10,14,.35) !important;
border: 1px solid rgba(255,255,255,.22) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow:
0 10px 24px rgba(0,0,0,.35),
0 0 0 1px rgba(255,255,255,.10) inset;
}
.editCardSlider .sliderBtn:hover{
transform: translateX(-50%) translateY(-1px);
}
/* ================= CARDS-ONLY MODE (Edit view) ================= */
body.cardsOnly{
background: radial-gradient(1200px 700px at 30% 10%, rgba(186,104,255,.20), rgba(0,0,0,0) 60%),
radial-gradient(900px 600px at 80% 90%, rgba(0,255,209,.10), rgba(0,0,0,0) 60%),
#05060a;
min-height: 100vh;
}
/* Hide everything on the page… */
body.cardsOnly > *{
display:none !important;
}
/* …except logout link and edit area */
body.cardsOnly a[href*="logout"]{
display:inline-flex !important;
position: fixed !important;
top: 14px !important;
right: 14px !important;
z-index: 999999 !important;
padding: 10px 14px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.18) !important;
color: #fff !important;
text-decoration:none !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
body.cardsOnly #edit{
display:block !important;
padding-top: 70px;
}
/* Inside edit: hide everything except the cards + back button */
body.cardsOnly #edit > *{
display:none !important;
}
body.cardsOnly #editCardSlider{
display:block !important;
}
body.cardsOnly #backBtn{
display:inline-flex !important;
position: fixed !important;
left: 14px !important;
top: 14px !important;
z-index: 999999 !important;
padding: 10px 14px !important;
border-radius: 999px !important;
}
/* Center the cards nicely */
body.cardsOnly #editCardSlider{
margin-top: 40px !important;
}