/* Ehalakasa community UI — game + submissions. Brand palette, theme-independent. */

.eh-game,
.eh-submit {
	--eh-ink: #1c1836;
	--eh-ivory: #f4ecd8;
	--eh-gold: #e0a53f;
	--eh-gold-bright: #ecb658;
	--eh-flame: #cf5040;
	--eh-smoke: #524a54;
	font-family: "Inter", -apple-system, sans-serif;
}

/* ——— Kasa Scramble ——— */

.eh-game {
	background: var(--eh-ink);
	color: var(--eh-ivory);
	padding: 2.5rem;
	max-width: 40rem;
	margin-inline: auto;
}
.eh-game__kicker {
	margin: 0;
	font-size: 0.7rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--eh-gold-bright);
}
.eh-game__title {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.8rem;
	margin: 0.5rem 0 1.25rem;
	color: var(--eh-ivory);
}
.eh-game__hint { color: rgba(246, 241, 231, 0.75); min-height: 2.5em; margin: 0 0 0.5rem; }
.eh-game__word {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.8rem, 5vw, 2.8rem);
	letter-spacing: 0.15em;
	color: var(--eh-gold-bright);
	margin: 0 0 1.25rem;
	word-break: break-word;
}
.eh-game__form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.eh-game__form input {
	flex: 1;
	min-width: 12rem;
	background: transparent;
	border: 1px solid rgba(246, 241, 231, 0.4);
	color: var(--eh-ivory);
	padding: 0.9rem 1rem;
	font-size: 1rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.eh-game__form input:focus { outline: 2px solid var(--eh-gold-bright); }
.eh-game__form button,
.eh-submit__btn {
	background: var(--eh-gold-bright);
	color: var(--eh-ink);
	border: 0;
	padding: 0.9rem 1.6rem;
	font-size: 0.8rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: background-color 0.2s ease;
}
.eh-game__form button:hover,
.eh-submit__btn:hover { background: var(--eh-ivory); color: var(--eh-ink); }
.eh-game__feedback { min-height: 1.6em; margin: 1rem 0 0.5rem; font-style: italic; }
.eh-game__meta {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(246, 241, 231, 0.15);
	font-size: 0.85rem;
	color: rgba(246, 241, 231, 0.75);
}
.eh-game__skip {
	margin-left: auto;
	background: none;
	border: 0;
	color: var(--eh-gold-bright);
	cursor: pointer;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ——— Poem submission ——— */

.eh-submit { max-width: 40rem; }
.eh-submit label {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--eh-smoke);
	margin-bottom: 0.4rem;
}
.eh-submit input[type="text"],
.eh-submit input[type="url"],
.eh-submit textarea {
	width: 100%;
	border: 1px solid rgba(13, 12, 9, 0.3);
	background: #fffdf8;
	padding: 0.85rem 1rem;
	font-size: 1rem;
	font-family: inherit;
}
.eh-submit textarea { font-family: "Playfair Display", Georgia, serif; font-size: 1.1rem; line-height: 1.8; }
.eh-submit input:focus,
.eh-submit textarea:focus { outline: 2px solid var(--eh-gold); }
.eh-submit__note { font-size: 0.85rem; color: var(--eh-smoke); }
.eh-submit__ok { font-family: "Playfair Display", Georgia, serif; font-size: 1.4rem; font-style: italic; color: #6fbf8f; }
.eh-submit__error { color: #a33; }
.eh-submit--gate { background: var(--eh-ivory); border: 1px solid rgba(13,12,9,0.15); padding: 2rem; }

/* ——— Slam School educational game ——— */
.eh-slam {
	--eh-ink: #1a1712; --eh-ivory: #f4ecd8; --eh-gold: #e0a53f; --eh-gold-bright: #ecb658; --eh-flame: #e8735f;
	background: linear-gradient(158deg, #2b2619, #221e17);
	border: 1px solid rgba(224,165,63,0.2); border-radius: 8px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 60px rgba(0,0,0,0.5);
	padding: 2.5rem; max-width: 44rem; margin-inline: auto;
	font-family: "Inter", -apple-system, sans-serif; color: var(--eh-ivory);
}
.eh-slam__kicker { margin: 0 0 .4rem; font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--eh-gold-bright); }
.eh-slam__title { font-family: "Fraunces","Playfair Display",serif; font-size: 1.7rem; margin: 0 0 1.2rem; color: var(--eh-ivory); }
.eh-slam__title span { display: block; font-size: .95rem; font-style: italic; color: rgba(244,236,216,0.7); font-family: "Fraunces",serif; }
.eh-slam__bar { height: 4px; background: rgba(244,236,216,0.12); border-radius: 3px; overflow: hidden; margin-bottom: 1.6rem; }
.eh-slam__fill { display: block; height: 100%; background: var(--eh-gold); transition: width .4s ease; }
.eh-slam__q { font-family: "Fraunces","Playfair Display",serif; font-size: clamp(1.3rem,3.5vw,1.7rem); line-height: 1.35; margin: 0 0 1.4rem; color: var(--eh-ivory); }
.eh-slam__opts { display: grid; gap: .7rem; }
.eh-slam__opt {
	text-align: left; padding: 1rem 1.2rem; min-height: 48px; cursor: pointer;
	background: rgba(244,236,216,0.04); border: 1px solid rgba(244,236,216,0.18);
	color: var(--eh-ivory); font-size: 1rem; font-family: inherit; border-radius: 5px;
	transition: background-color .18s ease, border-color .18s ease, transform .1s ease;
}
.eh-slam__opt:hover:not(:disabled) { background: rgba(224,165,63,0.12); border-color: var(--eh-gold); }
.eh-slam__opt:active:not(:disabled) { transform: translateY(1px); }
.eh-slam__opt.is-correct { background: rgba(111,191,143,0.18); border-color: #6fbf8f; color: #d8f3e2; }
.eh-slam__opt.is-wrong { background: rgba(232,115,95,0.16); border-color: var(--eh-flame); }
.eh-slam__fb { margin-top: 1.2rem; font-size: .95rem; line-height: 1.6; color: rgba(244,236,216,0.85); }
.eh-slam__fb:empty { margin: 0; }
.eh-slam__ok { color: #6fbf8f; font-weight: 600; }
.eh-slam__no { color: var(--eh-flame); font-weight: 600; }
.eh-slam__meta { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(244,236,216,0.12); font-size: .85rem; color: rgba(244,236,216,0.72); }
.eh-slam__meta strong { color: var(--eh-gold-bright); }
.eh-slam__next, .eh-slam__cta {
	display: inline-block; margin-top: 1.2rem; padding: .8rem 1.6rem; min-height: 44px;
	background: var(--eh-gold-bright); color: var(--eh-ink); border: 0; cursor: pointer;
	font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; border-radius: 3px;
	font-family: "Inter",sans-serif; font-weight: 600;
}
.eh-slam__cta { background: transparent; color: var(--eh-gold-bright); border: 1px solid var(--eh-gold-bright); margin-left: .6rem; }
.eh-slam__next:hover { background: var(--eh-ivory); }
.eh-slam__interlude, .eh-slam__end { text-align: center; padding: 1.5rem 0; }
.eh-slam__rank { font-family: "Fraunces","Playfair Display",serif; font-size: clamp(1.8rem,5vw,2.6rem); color: var(--eh-gold-bright); margin: .3rem 0; }
.eh-slam__score { font-size: 1.05rem; color: var(--eh-ivory); }
@media (max-width:480px){ .eh-slam{ padding:1.6rem; } .eh-slam__cta{ display:block; margin:1rem 0 0; } }

/* ——— Daily Kasa — the once-a-day ritual ——— */
.eh-daily {
	--eh-ink:#1a1712; --eh-ivory:#f4ecd8; --eh-gold:#e0a53f; --eh-gold-bright:#ecb658; --eh-flame:#e8735f;
	background: linear-gradient(158deg,#2b2619,#221e17);
	border:1px solid rgba(224,165,63,0.28); border-radius:8px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 60px rgba(0,0,0,0.5);
	padding:2.4rem; max-width:40rem; margin-inline:auto; text-align:center;
	font-family:"Inter",-apple-system,sans-serif; color:var(--eh-ivory);
}
.eh-daily__kicker { margin:0 0 .5rem; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--eh-gold-bright); }
.eh-daily__title { font-family:"Fraunces","Playfair Display",serif; font-size:1.7rem; color:var(--eh-ivory); margin:0 0 .6rem; }
.eh-daily__hint { color:rgba(244,236,216,0.78); margin:0 0 1.2rem; min-height:1.4em; }
.eh-daily__word { font-family:"Fraunces","Playfair Display",serif; font-size:clamp(2rem,7vw,3rem); letter-spacing:.18em; color:var(--eh-gold-bright); margin:0 0 1.3rem; word-break:break-word; }
.eh-daily__form { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.eh-daily__form input {
	flex:1; min-width:12rem; max-width:20rem; background:transparent; border:1px solid rgba(244,236,216,0.4);
	color:var(--eh-ivory); padding:.9rem 1rem; font-size:1rem; letter-spacing:.1em; text-transform:uppercase; text-align:center;
}
.eh-daily__form input:focus { outline:2px solid var(--eh-gold-bright); }
.eh-daily__form button, .eh-daily__share {
	background:var(--eh-gold-bright); color:var(--eh-ink); border:0; padding:.9rem 1.5rem; cursor:pointer;
	font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; font-weight:600; border-radius:3px; font-family:"Inter",sans-serif;
}
.eh-daily__form button:hover, .eh-daily__share:hover { background:var(--eh-ivory); }
.eh-daily__tries { margin:1rem 0 0; font-size:.85rem; color:rgba(244,236,216,0.7); }
.eh-daily__msg { min-height:1.4em; margin:.8rem 0 0; font-style:italic; color:var(--eh-gold-bright); }
.eh-daily__result { font-family:"Fraunces",serif; font-size:1.3rem; color:var(--eh-ivory); margin:.4rem 0; }
.eh-daily__streak { color:var(--eh-flame); font-size:.95rem; margin:.2rem 0 1.2rem; }
.eh-daily__actions { display:flex; gap:1rem; justify-content:center; align-items:center; flex-wrap:wrap; }
.eh-daily__more { color:var(--eh-gold-bright); text-decoration:none; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; }
.eh-daily__more:hover { color:var(--eh-flame); }
@media (max-width:480px){ .eh-daily{ padding:1.6rem; } }

/* Daily Kasa — share row (one-tap to WhatsApp / X / Facebook) */
.eh-daily__sharelabel { margin:1.1rem 0 .5rem; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(244,236,216,0.6); }
.eh-daily__share-row { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; }
.eh-daily__sh {
	display:inline-flex; align-items:center; gap:.4rem; padding:.6rem 1rem; min-height:42px;
	border:1px solid rgba(224,165,63,0.5); border-radius:4px; background:transparent;
	color:var(--eh-ivory); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
	text-decoration:none; cursor:pointer; font-family:"Inter",sans-serif; transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.eh-daily__sh:hover { background:var(--eh-gold-bright); color:var(--eh-ink); border-color:var(--eh-gold-bright); }
.eh-daily__sh--wa:hover { background:#25d366; border-color:#25d366; color:#08210f; }
.eh-daily__sh--x:hover { background:#111; border-color:#111; color:#fff; }
.eh-daily__sh--fb:hover { background:#1877f2; border-color:#1877f2; color:#fff; }
.eh-daily__more { display:inline-block; margin-top:1.1rem; }