/* Shared look for every Lower Level Learners game. */

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body {
	margin:0; height:100%;
	font-family:'Comic Sans MS','Chalkboard SE','Segoe UI',sans-serif;
	overflow:hidden;
	user-select:none;
}
body { background:linear-gradient(180deg,#aee7ff 0%,#d8f6ff 55%,#c2f0c2 100%); }

/* ---------------------------------------------------- scenery ----------- */
.sun {
	position:fixed; top:-60px; right:-60px; width:180px; height:180px;
	border-radius:50%; background:radial-gradient(circle,#ffe45c 60%,#ffd21f 100%);
	box-shadow:0 0 80px 30px rgba(255,220,60,.55);
}
.cloud {
	position:fixed; background:#fff; border-radius:50px; opacity:.85;
	animation:drift 60s linear infinite;
}
.cloud, .cloud:before, .cloud:after { box-shadow:0 6px 14px rgba(120,170,200,.25); }
.cloud:before, .cloud:after { content:''; position:absolute; background:#fff; border-radius:50%; }
.cloud.c1 { width:130px; height:44px; top:9%; left:-140px; }
.cloud.c1:before { width:60px; height:60px; top:-28px; left:22px; }
.cloud.c1:after  { width:44px; height:44px; top:-18px; left:66px; }
.cloud.c2 { width:100px; height:36px; top:22%; left:-120px; animation-delay:-28s; }
.cloud.c2:before { width:48px; height:48px; top:-22px; left:16px; }
.cloud.c2:after  { width:36px; height:36px; top:-14px; left:52px; }
@keyframes drift { from { transform:translateX(0); } to { transform:translateX(calc(100vw + 300px)); } }

/* ---------------------------------------------------- screens ----------- */
.screen {
	position:fixed; inset:0; display:none;
	flex-direction:column; align-items:center; justify-content:center;
	gap:4vh; padding:20px; text-align:center;
}
.screen.show { display:flex; }

h1.title {
	margin:0; font-size:min(11vw,64px); color:#2b6cb0;
	text-shadow:2px 3px 0 #fff;
	animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
.subtitle { font-size:min(4.5vw,22px); color:#4a6785; margin:-2vh 0 0; }

.mode_btn {
	display:flex; align-items:center; gap:16px;
	font-family:inherit; font-size:min(6.5vw,32px); font-weight:bold; color:#fff;
	border:none; border-radius:26px; padding:20px 42px; cursor:pointer;
	box-shadow:0 8px 0 rgba(0,0,0,.18);
	transition:transform .12s;
}
.mode_btn:active { transform:translateY(5px); box-shadow:0 3px 0 rgba(0,0,0,.18); }
.mode_btn .em { font-size:1.3em; }
.mode_b   { background:#ff8f4d; }
.mode_e   { background:#7c5cff; }
.mode_mix { background:#12b981; }
.mode_alt { background:#2b9fe0; }

/* ---------------------------------------------------- game chrome ------- */
#game_screen { justify-content:flex-start; padding-top:3vh; gap:3vh; }
.topbar {
	display:flex; align-items:center; gap:14px; width:min(94vw,760px);
	justify-content:space-between;
}
.stars { display:flex; gap:4px; font-size:min(6vw,30px); filter:drop-shadow(0 2px 1px rgba(0,0,0,.15)); }
.stars span { opacity:.25; transition:opacity .3s, transform .3s; }
.stars span.won { opacity:1; animation:starpop .5s; }
@keyframes starpop { 0%{ transform:scale(0);} 70%{ transform:scale(1.6);} 100%{ transform:scale(1);} }
.round_btn {
	border:none; border-radius:50%; width:min(15vw,74px); height:min(15vw,74px);
	font-size:min(7vw,36px); cursor:pointer; color:#fff;
	box-shadow:0 5px 0 rgba(0,0,0,.18);
}
.round_btn:active { transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.18); }
#speaker_btn { background:#2b9fe0; }
#speaker_btn.talking { animation:pulse .7s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.12);} }
#home_btn { background:#b8c4d0; font-size:min(5.5vw,28px); }

.listen_label { font-size:min(5vw,26px); color:#2b6cb0; min-height:1.4em; margin:0; }

.board {
	display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
	gap:min(4vw,28px); width:100%; flex:1; align-content:center;
}

/* word cards (printed words) */
.word_card {
	font-family:inherit;
	font-size:min(13vw,72px); font-weight:bold; letter-spacing:2px;
	background:#fff; border:6px solid; border-radius:28px;
	padding:min(5vw,34px) min(7vw,48px);
	cursor:pointer; color:#334;
	box-shadow:0 9px 0 rgba(0,0,0,.15);
	transition:transform .15s;
}

/* picture cards (image, no text) */
.pic_card {
	background:#fff; border:6px solid; border-radius:28px;
	padding:min(3vw,20px);
	cursor:pointer;
	box-shadow:0 9px 0 rgba(0,0,0,.15);
	transition:transform .15s;
	line-height:0;
}
.pic_card img {
	width:min(24vw,190px); height:min(24vw,190px); object-fit:contain;
	pointer-events:none;
}
.pic_card .pic_label {
	line-height:1.3; font-size:min(5vw,26px); font-weight:bold; color:#334;
	text-align:center; padding-top:6px;
}

.word_card:nth-child(3n+1), .pic_card:nth-child(3n+1) { border-color:#ff8f4d; }
.word_card:nth-child(3n+2), .pic_card:nth-child(3n+2) { border-color:#2b9fe0; }
.word_card:nth-child(3n+3), .pic_card:nth-child(3n+3) { border-color:#12b981; }

.word_card:not(.dead):hover, .pic_card:not(.dead):hover { transform:scale(1.05); }
.word_card:not(.dead):active, .pic_card:not(.dead):active { transform:scale(.96); }
.dead { opacity:.35; cursor:default !important; }
.wrong { animation:shake .45s; }
@keyframes shake {
	0%,100%{ transform:translateX(0);} 20%{ transform:translateX(-14px);}
	40%{ transform:translateX(12px);} 60%{ transform:translateX(-8px);} 80%{ transform:translateX(6px);}
}
.right { animation:rightpop .6s; border-color:#f7b500 !important; background:#fffbe6; }
@keyframes rightpop { 0%{ transform:scale(1);} 40%{ transform:scale(1.18);} 70%{ transform:scale(1.05);} 100%{ transform:scale(1.1);} }

/* letter tiles (missing letter, sorting buckets, touch board) */
.letter_tile {
	font-family:inherit; font-weight:bold; color:#334;
	font-size:min(12vw,64px);
	background:#fff; border:5px solid #2b9fe0; border-radius:20px;
	width:min(20vw,104px); height:min(22vw,116px);
	display:inline-flex; align-items:center; justify-content:center;
	cursor:pointer; box-shadow:0 7px 0 rgba(0,0,0,.15);
	transition:transform .15s;
}
.letter_tile:not(.dead):hover { transform:scale(1.06); }
.letter_tile.hot { color:#ff4d6d; border-color:#ff4d6d; }
.letter_tile.blank { border-style:dashed; color:#b8c4d0; background:rgba(255,255,255,.6); cursor:default; }
.letter_tile.speaking { animation:pulse .5s ease-in-out infinite; border-color:#f7b500; }

/* ---------------------------------------------------- reveal ------------ */
#reveal {
	position:fixed; inset:0; display:none; align-items:center; justify-content:center;
	background:rgba(70,150,220,.35); backdrop-filter:blur(3px); z-index:40;
}
#reveal.show { display:flex; }
.reveal_card {
	background:#fff; border-radius:34px; padding:26px 34px 20px;
	display:flex; flex-direction:column; align-items:center; gap:10px;
	box-shadow:0 20px 60px rgba(0,40,90,.35);
	cursor:pointer; max-width:92vw;
	animation:reveal_in .45s cubic-bezier(.2,1.4,.4,1);
}
@keyframes reveal_in { from{ transform:scale(.3); opacity:0;} to{ transform:scale(1); opacity:1;} }
.reveal_card img { max-width:min(70vw,420px); max-height:46vh; object-fit:contain; }
.reveal_card video { max-width:min(80vw,560px); max-height:56vh; border-radius:14px; }
.reveal_word { font-size:min(14vw,80px); font-weight:bold; color:#334; letter-spacing:3px; }
.reveal_word .hot { color:#ff4d6d; text-decoration:underline; }
.tap_hint { font-size:min(4.5vw,22px); color:#8a97a8; animation:bob 1.6s ease-in-out infinite; }

/* ---------------------------------------------------- finish ------------ */
.big_stars { font-size:min(12vw,64px); letter-spacing:6px; }
.finish_msg { font-size:min(8vw,44px); color:#2b6cb0; margin:0; text-shadow:2px 2px 0 #fff; }

#confetti_canvas { position:fixed; inset:0; pointer-events:none; z-index:60; }

/* drag ghost (sound sort) */
.drag_ghost {
	position:fixed; pointer-events:none; z-index:80; opacity:.9;
	transform:translate(-50%,-50%) scale(.9);
}
.bucket {
	background:rgba(255,255,255,.75); border:5px dashed #2b9fe0; border-radius:26px;
	min-width:min(38vw,300px); min-height:min(30vw,220px);
	display:flex; flex-direction:column; align-items:center; gap:8px;
	padding:12px; transition:background .2s, border-color .2s;
}
.bucket.over { background:#fffbe6; border-color:#f7b500; }
.bucket .bucket_letter { font-size:min(12vw,58px); font-weight:bold; color:#2b6cb0; line-height:1; }
.bucket .bucket_items { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.bucket .bucket_items img { width:min(12vw,66px); height:min(12vw,66px); object-fit:contain; }