.main-hw-container{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	column-gap: 1%;
}
#system-message .e-moji{
	font-size: 2em;
}
.main-hw-container .kanji-main-panel{
	/*max-width: 260px;*/
}
.main-hw-container .kanji-list-panel{
	
}
.kanji-test-container {
    margin: 20px 0;
}

.handwrite .zen-font .kanji-test-sentence {
	line-height: 1.5em;
	font-family: "Zen Kurenaido", serif !important;
	font-weight: 400;
	font-style: normal;
    font-size: 2.7em;
    margin-bottom: 5px;
}

#kanji-canvas {
	margin: 2px 0;
    border: 1.5px solid #71797E;
  background-color: white;
  background-image: 
    /* Main grid lines */
    linear-gradient(to right, #C0C0C0 1.3px, transparent 1px),
    linear-gradient(to bottom, #C0C0C0 1.3px, transparent 1px),
    /* Sub grid lines */
    linear-gradient(to right, #E5E4E2 0.8px, transparent 1px),
    linear-gradient(to bottom, #E5E4E2 0.8px, transparent 1px),
    /* Sub-sub grid lines (dotted) */
    linear-gradient(to right, #8A9A5B 0.5px, transparent 0.5px),
    linear-gradient(to bottom, #8A9A5B 0.5px, transparent 0.5px);
  background-size: 
    128px 128px, /* main vertical grid */
    128px 128px, /* main horizontal grid */
    64px 64px, /* sub vertical grid */
    64px 64px, /* sub horizontal grid */
    32px 32px, /* sub-sub vertical grid */
    32px 32px;  /* sub-sub horizontal grid */
  background-position: 
    0 0, 0 0, /* align main grid */
    0 0, 0 0, /* align sub grid */
    0 0, 0 0; /* align sub-sub grid */
}

/*.kanji-options {
    margin-top: 10px;
}

.kanji-options button {
    margin: 5px;
    padding: 8px 12px;
    font-size: 16px;
}*/


/* Container for Kanji candidates 
.kanji-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}*/

/* Styling the Kanji option BUTTONS 
.kanji-option {
    display: inline-block;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}*/

/* Add hover effect for better user feedback 
.kanji-option:hover {
    background-color: #e6e6e6;
    transform: scale(1.1);
}*/

/*Add active state for clicks */
/*.kanji-option:active {
    background-color: #dcdcdc;
    transform: scale(1);
}*/



.answer-incorrect {
    color: red;
    font-weight: bold;
}

.test-summary {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
	position: relative; /* Ensure the div is positioned relative to its normal position FOR THE RELOAD GIF TO APPEAR ON TOP*/
	width: 100%;
	min-width: 150px;
	min-height: 150px;
}

.test-summary .proba{
	font-family: "Zen Kurenaido", serif !important;
	color: #73726F;
}

.test-summary .answer-correct{
	font-size: 1em;
	color: green;
}
.test-summary .answer-incorrect{
	font-size: 1em;
}

.test-summary h2 {
    font-size: 1.5em;
    margin-bottom: 15px;
	font-family: "Zen Kurenaido", serif !important;
	color: #99e07b;
}

.summary-item {
    margin-bottom: 25px;
	background-color: #fef9e7;
}

.summary-item p {
    margin: 5px 0;
	line-height: 1em;
	ruby-align: space-around;
}
.summary-item p ruby{
    line-height: 2.8em;
}
.summary-item p rt{
    margin-bottom: .33rem;
    font-size: 70%;
}

/*correct answer start*/

.answer-correct {
	font-size: 3.1em;
	font-weight: bold;
    position: relative;
    display: inline-block;
    font-size: 3rem; /* Adjust as needed */
    color: #54f4d2; /* Light green */
    transition: transform 0.2s ease-in-out;
    animation: pop 0.3s ease-in-out;
}

/* Confetti effect */
.confetti {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0;
    animation: sparkle 0.8s ease-out forwards;
}

/* Different colors for confetti */
.confetti:nth-child(1) { background-color: #f38587; } /* Pink */
.confetti:nth-child(2) { background-color: #fff28d; } /* Yellow */
.confetti:nth-child(3) { background-color: #bbffe6; } /* Mint */
.confetti:nth-child(4) { background-color: #54f4d2; } /* Turquoise */
.confetti:nth-child(5) { background-color: #99e07b; } /* Green */
.confetti:nth-child(6) { background-color: #fcd53f; } /* Gold */

/* Confetti animation */
@keyframes sparkle {
    0% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
    100% {
        opacity: 0;
        transform: scale(1.5) translate(var(--x), var(--y));
    }
}

/* Answer pop effect */
@keyframes pop {
    0% { transform: scale(0.9); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}



/*correct answer end*/


.answer-incorrect {
    color: red;
    font-weight: bold;
}


/*reload test after results*/
.reload-test-button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #fff28d;
    color: #99e07b;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: block;
}

.reload-test-button:hover {
    background-color: #bbffe6;
}

/*TEST RELOAD GIF*/
.test-summary img {
  position: absolute; /* Position the GIF absolutely within the relative div */
  top: 0;
  left: 0;
  width: 150px;/*100%;*/
  /*height: 100%;*/
}

/*GAME BUTTONS*/
.kanji-test-container button{
	margin: 5px;
}
.kanji-test-container button.game-button {
  font-size: 1em;
  font-weight: 200;
  letter-spacing: 1px;
  padding: 7px 12px 7px;
  outline: 0;
  border: 1px solid black;
  cursor: pointer;
  position: relative;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 2px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.kanji-test-container button.game-button:after {
  content: "";
  background-color: #ffe54c;
  width: 100%;
  z-index: -1;
  position: absolute;
  height: 100%;
  top: 7px;
  left: 7px;
  transition: 0.2s;
}

.kanji-test-container button.game-button:hover:after {
  top: 0px;
  left: 0px;
}







/* Kanji Candidates Button*/
.handwrite .zen-font .main-hw-container .kanji-list-panel{
	max-width: 25%;
	display:flex;
	flex-wrap: wrap;
	/*flex-direction: column;*/
}
.handwrite .zen-font .main-hw-container .kanji-list-panel button.kanji-option {
  align-self: center;
  background-color: #fff;
  background-image: none;
  background-position: 0 90%;
  background-repeat: repeat no-repeat;
  background-size: 4px 3px;
  border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
  border-style: solid;
  border-width: 2px;
  box-shadow: rgba(0, 0, 0, .2) 15px 28px 25px -18px;
  box-sizing: border-box;
  color: #41403e;
  cursor: pointer;
  margin: 0px;
  display: inline-block;
  font-family: "Zen Kurenaido", serif !important;
  font-size: 3rem;
  line-height: 1em;
  outline: none;
  padding: .75rem;
  text-decoration: none;
  transition: all 235ms ease-in-out;
  border: 1px solid #ccc;
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.handwrite .zen-font .main-hw-container button.kanji-option:hover {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
  transform: translate3d(0, 2px, 0);
}

.handwrite .zen-font .main-hw-container button.kanji-option:focus {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
}

/*select how many questions - buttons*/
.question-select {
  background-color: #fff000;
  border-radius: 12px;
  color: #000;
  cursor: pointer;
  font-weight: bold;
  padding: 10px 15px;
  text-align: center;
  transition: 200ms;
  width: 4em;
  box-sizing: border-box;
  border: 0;
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.question-select:not(:disabled):hover,
.question-select:not(:disabled):focus {
  outline: 0;
  background: #f4e603;
  box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);
}

.question-select:disabled {
  filter: saturate(0.2) opacity(0.5);
  -webkit-filter: saturate(0.2) opacity(0.5);
  cursor: not-allowed;
}


@media (min-width: 768px) {
	.kanji-test-container {
		max-width: 300px;
	}
  /*.kanji-test-container button.game-button {
    padding: 13px 50px 13px;
  }*/
}

/* Tablets */
@media (max-width: 768px) {
  .handwrite .zen-font .kanji-test-sentence {
	line-height: 1.3em;
    font-size: 2.2em;
	}
	.handwrite .zen-font .main-hw-container .kanji-list-panel button.kanji-option{
		padding: .65rem;
		font-size: 2.7rem;
	}
}

/* Mobile Phones */
@media (max-width: 480px) {
    .handwrite .zen-font .kanji-test-sentence {
	line-height: 1em;
    font-size: 2em;
	}
	#kanji-canvas{
		background-image: 
		/* Main grid lines */
		linear-gradient(to right, #C0C0C0 1px, transparent 1px),
		linear-gradient(to bottom, #C0C0C0 1px, transparent 1px),
		/* Sub grid lines */
		linear-gradient(to right, #E5E4E2 0.6px, transparent 1px),
		linear-gradient(to bottom, #E5E4E2 0.6px, transparent 1px),
		/* Sub-sub grid lines (dotted) */
		linear-gradient(to right, #8A9A5B 0.3px, transparent 0.5px),
		linear-gradient(to bottom, #8A9A5B 0.3px, transparent 0.5px);
	}
	.main-hw-container .kanji-list-panel{
		max-width: 57px;
	}
	.handwrite .zen-font .main-hw-container .kanji-list-panel button.kanji-option{
		padding: .55rem;
		font-size: 2.5rem;
	}
}