/* Learn Shina v1.5 — cross-device polish (Android / iPhone / PC) */

/* Prevent horizontal scroll glitches on mobile */
html, body { max-width: 100%; overflow-x: hidden; }
* { -webkit-tap-highlight-color: transparent; }
img, video, iframe, canvas, table { max-width: 100%; height: auto; }

/* Comfortable tap targets */
.chip, .btn, .play, .ls-tts, .ls-like, .ls-bookmark, .ls-verify, .ls-mic { min-height: 34px; }
a, button { touch-action: manipulation; }

/* iOS: inputs >=16px so Safari does not auto-zoom */
input[type="text"], input[type="search"], input[type="email"], input[type="url"], textarea, select {
	font-size: 16px;
}

/* Autocomplete dropdown scroll on small screens */
.ls-ac { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Voice mic button spacing so it never overlaps the search action */
.ls-mic { min-width: 34px; display: inline-flex; align-items: center; justify-content: center; }

/* Word-card footer chips wrap nicely */
.card-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Learn / offline / translator: controls stack cleanly */
#ls-learn-controls { flex-wrap: wrap; }
#ls-learn-progress { flex-wrap: wrap; }
#ls-tr-out, #ls-off-results .results { justify-content: center; }

/* Responsive result grids (in case theme grid is fixed) */
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

/* ---- Tablets ---- */
@media (max-width: 900px) {
	.single-wrap { padding: 22px 18px; }
	.hero h1 { font-size: clamp(28px, 7vw, 44px); line-height: 1.15; }
	.results { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

/* ---- Phones ---- */
@media (max-width: 600px) {
	.single-wrap { padding: 18px 14px; border-radius: 16px; }
	.hero { padding: 22px 4px 10px; }
	.hero h1 { font-size: clamp(26px, 8vw, 36px); }
	.hero p { font-size: 14px; }

	.results { grid-template-columns: 1fr; }
	.word-card { padding: 16px; }
	.shina-word { font-size: 30px; word-break: break-word; }

	/* Learn: quiz option buttons full width, nav buttons even */
	#ls-learn-controls .btn { flex: 1 1 auto; justify-content: center; }
	.lang-tabs { flex-wrap: wrap; }
	.lang-tabs button { flex: 1 1 auto; }

	/* Offline / translator controls */
	#ls-off-download, #ls-tr-go { width: 100%; }
	#ls-tr-out .word-card { min-width: 0; flex: 1 1 45%; }

	/* Action row on single word wraps */
	.post-foot { flex-wrap: wrap; gap: 12px; row-gap: 10px; }
	.post-foot .ls-report-toggle { margin-left: 0 !important; }

	/* Autocomplete full width */
	.ls-ac { left: 0; right: 0; }
	.ls-mic { right: 46px; }

	/* Comments area padding */
	.comments-area { padding: 16px !important; }
}

/* ---- Small phones ---- */
@media (max-width: 380px) {
	.shina-word { font-size: 26px; }
	.chip { font-size: 11.5px; padding: 5px 9px; }
	.hero h1 { font-size: 24px; }
}

/* PWA standalone (installed app) safe-area padding for iPhone notch */
@media (display-mode: standalone) {
	.site-header, header { padding-top: max(12px, env(safe-area-inset-top)); }
	footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* Comments list stays inside the card */
.comments-area, .commentlist, .comment-body { max-width: 100%; overflow-wrap: anywhere; }

/* Buttons never overflow their container */
.btn { max-width: 100%; white-space: normal; }