/**
 * Matematik Hız Oyunları
 * Responsive Styles
 *
 * @package Matematik_Hiz_Oyunlari
 */

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

	.mho-app {
		margin: 22px auto;
	}

	.mho-game-tabs {
		grid-template-columns: 1fr;
	}

	.mho-game-tab {
		min-height: 92px !important;
	}

	.mho-score-rule-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mho-question-card {
		max-width: 100%;
	}

}


/* =========================================================
   SMALL TABLET / LARGE MOBILE
   ========================================================= */

@media (max-width: 680px) {

	.mho-app {
		margin: 14px auto;
	}

	.mho-shell {
		border-radius: 19px;
	}

	.mho-header {
		padding: 17px 18px;
	}

	.mho-brand-icon {
		width: 44px;
		height: 44px;
		flex-basis: 44px;

		border-radius: 12px;

		font-size: 23px;
	}

	.mho-title {
		font-size: 19px !important;
	}

	.mho-subtitle {
		font-size: 12px !important;
	}

	.mho-player-mini {
		padding: 7px 9px;
	}

	.mho-player-mini-label {
		display: none;
	}

	.mho-screen {
		padding: 25px 18px 28px;
	}

	.mho-screen-intro {
		min-height: 400px;
	}

	.mho-intro-card {
		padding: 31px 21px;
	}

	.mho-intro-icon {
		width: 70px;
		height: 70px;

		border-radius: 20px;

		font-size: 34px;
	}

	.mho-intro-card h3 {
		font-size: 25px !important;
	}

	.mho-input-group {
		flex-direction: column;
	}

	.mho-nickname-input {
		width: 100%;
	}

	.mho-primary-button {
		width: 100%;
	}

	.mho-section-heading h3 {
		font-size: 23px !important;
	}

	.mho-game-tab {
		min-height: 88px !important;

		padding: 14px !important;
	}

	.mho-game-tab-icon {
		width: 46px;
		height: 46px;
		flex-basis: 46px;

		font-size: 22px !important;
	}

	.mho-game-tab-title {
		font-size: 15px !important;
	}

	.mho-game-tab-description {
		font-size: 11px !important;
	}

	.mho-score-rule-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mho-game-topbar {
		align-items: flex-start;
	}

	.mho-live-stats {
		flex-shrink: 0;
	}

	.mho-stat {
		min-width: 65px;

		padding: 7px 8px;
	}

	.mho-stat-value {
		font-size: 15px;
	}

	.mho-timer-circle {
		width: 82px;
		height: 82px;
		flex-basis: 82px;
	}

	.mho-timer-number {
		font-size: 24px;
	}

	.mho-question-card {
		padding: 21px 17px;
	}

	.mho-question-text {
		font-size: 20px !important;
	}

	.mho-options-grid {
		grid-template-columns: 1fr;
	}

	.mho-option-button {
		min-height: 54px !important;

		font-size: 15px !important;
	}

	.mho-multi-options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mho-question-actions {
		flex-direction: column;
	}

	.mho-submit-button,
	.mho-next-button {
		width: 100% !important;
		min-width: 0 !important;
	}

	.mho-result-card {
		padding: 30px 20px;
	}

	.mho-result-title {
		font-size: 24px !important;
	}

	.mho-result-actions {
		flex-direction: column;
	}

	.mho-result-actions button {
		width: 100% !important;
	}

	.mho-powered-by {
		padding: 12px 16px 14px;

		font-size: 10px;
	}

	.mho-powered-by a {
		font-size: 10px !important;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

	.mho-app {
		margin: 8px auto;
	}

	.mho-shell {
		border-radius: 15px;
	}

	.mho-header {
		gap: 8px;

		padding: 14px;
	}

	.mho-brand {
		gap: 9px;
	}

	.mho-brand-icon {
		width: 39px;
		height: 39px;
		flex-basis: 39px;

		font-size: 20px;
	}

	.mho-title {
		font-size: 16px !important;
	}

	.mho-subtitle {
		display: none;
	}

	.mho-player-mini {
		max-width: 110px;
	}

	.mho-player-mini-name {
		overflow: hidden;

		font-size: 11px;

		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.mho-screen {
		padding: 20px 13px 24px;
	}

	.mho-intro-card {
		padding: 27px 16px;

		border-radius: 18px;
	}

	.mho-intro-card h3 {
		font-size: 22px !important;
	}

	.mho-intro-card > p {
		font-size: 13px !important;
	}

	.mho-nickname-input {
		height: 48px;
	}

	.mho-game-tab {
		min-height: 80px !important;
	}

	.mho-game-tab-description {
		line-height: 1.35 !important;
	}

	.mho-game-tab-arrow {
		font-size: 22px !important;
	}

	.mho-rules-box {
		padding: 14px;
	}

	.mho-score-rule {
		padding: 10px 5px;
	}

	.mho-score-rule strong,
	.mho-score-rule span {
		font-size: 10px;
	}

	.mho-game-topbar {
		flex-direction: column;
		gap: 11px;
	}

	.mho-live-stats {
		width: 100%;
	}

	.mho-stat {
		flex: 1;
	}

	.mho-timer-area {
		gap: 11px;

		justify-content: flex-start;
	}

	.mho-timer-circle {
		width: 74px;
		height: 74px;
		flex-basis: 74px;
	}

	.mho-timer-number {
		font-size: 21px;
	}

	.mho-live-score-badge {
		padding: 6px 9px;

		font-size: 10px;
	}

	.mho-timer-hint {
		font-size: 10px;
	}

	.mho-question-card {
		padding: 18px 13px;

		border-radius: 16px;
	}

	.mho-question-meta {
		margin-bottom: 12px;
	}

	.mho-question-text {
		font-size: 18px !important;
	}

	.mho-question-instruction {
		margin-bottom: 18px !important;

		font-size: 11px !important;
	}

	.mho-option-button {
		min-height: 50px !important;

		padding: 10px !important;

		font-size: 14px !important;
	}

	.mho-multi-options {
		gap: 8px;
	}

	.mho-check-option {
		min-height: 50px;

		font-size: 14px;
	}

	.mho-number-answer {
		height: 56px;

		font-size: 20px !important;
	}

	.mho-drag-source,
	.mho-drop-zone {
		padding: 12px;
	}

	.mho-drag-item {
		min-width: 46px;
		min-height: 42px;

		padding: 7px 10px;

		font-size: 14px;
	}

	.mho-answer-feedback {
		align-items: flex-start;

		padding: 12px;
	}

	.mho-feedback-icon {
		width: 33px;
		height: 33px;
		flex-basis: 33px;

		font-size: 16px;
	}

	.mho-feedback-score {
		font-size: 16px;
	}

	.mho-result-card {
		padding: 26px 15px;

		border-radius: 18px;
	}

	.mho-result-emoji {
		width: 70px;
		height: 70px;

		font-size: 34px;
	}

	.mho-result-title {
		font-size: 22px !important;
	}

	.mho-final-score-box strong {
		font-size: 36px;
	}

	.mho-result-stats {
		gap: 6px;
	}

	.mho-result-stat {
		padding: 10px 5px;
	}

	.mho-result-stat strong {
		font-size: 18px;
	}

	.mho-toast {
		right: 12px;
		bottom: 12px;
		left: 12px;

		max-width: none;
	}

}


/* =========================================================
   VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 360px) {

	.mho-brand-icon {
		display: none;
	}

	.mho-game-tab-icon {
		width: 40px;
		height: 40px;
		flex-basis: 40px;

		font-size: 19px !important;
	}

	.mho-score-rule-grid {
		grid-template-columns: 1fr 1fr;
	}

	.mho-timer-hint {
		display: none;
	}

	.mho-multi-options {
		grid-template-columns: 1fr 1fr;
	}

}