/* Completion designs taken from V14; scoped to each easy question. */
.easy-clear-1{display: none; margin-top: 21px; background: linear-gradient(120deg, rgb(23, 52, 46), rgb(41, 72, 59)); border: 1px solid rgb(210, 169, 117); border-radius: 5px; color: rgb(246, 236, 217); padding: 24px 32px; box-shadow: 0 10px 30px rgba(20,40,35,.2); position: relative; overflow: hidden;}
.easy-clear-1.show{display: flex; align-items: center; justify-content: space-between; gap: 30px; animation: slideIn .5s ease-out;}
.easy-clear-1::before{content: ""; position: absolute; inset: 8px; border: 1px solid rgba(207, 165, 106, 0.4); pointer-events: none;}
.easy-clear-1 .result-copy{position: relative; z-index: 1;}
.easy-clear-1 .small{font-family: Georgia, "Yu Gothic", sans-serif; font-size: 12px; letter-spacing: 0.2em; color: rgb(230, 186, 128); font-weight: 700;}
.easy-clear-1 h2{font-size: 27px; margin: 8px 0px 7px; line-height: 1.35;}
.easy-clear-1 p{font-size: 13px; color: rgb(231, 216, 189); margin: 0px 0px 12px;}
.easy-clear-1 .answer-reveal{font-size: 26px; letter-spacing: 0.28em; font-weight: 700; color: rgb(255, 242, 216);}
.easy-clear-1 .clockface{position: relative; flex: 0 0 144px; width: 144px; height: 144px; background: radial-gradient(circle, rgb(249, 238, 217) 0 62%, rgb(218, 196, 160) 63% 65%, rgb(109, 76, 43) 66% 73%, rgb(201, 164, 109) 74% 80%, rgb(86, 63, 45) 81%); border-radius: 50%; box-shadow: inset 0 0 0 3px #ddbf8c,0 6px 22px rgba(0,0,0,.25);}
.easy-clear-1 .clockface .tick{position: absolute; width: 3px; height: 10px; background: rgb(93, 73, 52); left: calc(50% - 1.5px); top: 12px; transform-origin: 1.5px 60px;}
.easy-clear-1 .clockface .hour,.easy-clear-1 .clockface .minute{position: absolute; left: 50%; bottom: 50%; background: rgb(74, 55, 37); border-radius: 6px; transform-origin: 50% 100%; transform: translateX(-50%) rotate(0deg);}
.easy-clear-1 .clockface .hour{width: 5px; height: 36px; transform: translateX(-50%) rotate(45deg);}
.easy-clear-1 .clockface .minute{width: 3px; height: 50px; transform: translateX(-50%) rotate(250deg);}
.easy-clear-1 .clockface.running .minute{animation: sweep 10s linear infinite;}
.easy-clear-1 .clockface .center{position: absolute; width: 12px; height: 12px; left: calc(50% - 6px); top: calc(50% - 6px); border-radius: 50%; background: rgb(154, 108, 63); border: 2px solid rgb(74, 55, 37);}
.easy-clear-1 .clockface .mark12{position: absolute; top: 22px; left: 0px; right: 0px; text-align: center; font: 600 17px Georgia, serif; color: rgb(81, 62, 45);}
.easy-clear-1 .clockface .mark6{position: absolute; bottom: 19px; left: 0px; right: 0px; text-align: center; font: 600 17px Georgia, serif; color: rgb(81, 62, 45);}
@keyframes slideIn { 0% { opacity: 0; transform: translateY(9px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes sweep { 0% { transform: translateX(-50%) rotate(250deg); } 100% { transform: translateX(-50%) rotate(610deg); } }
@media (max-width:640px){.easy-clear-1.show{flex-direction: column-reverse; gap: 14px; align-items: flex-start; padding: 19px;}
.easy-clear-1 h2{font-size: 23px;}
.easy-clear-1 .clockface{align-self: center; transform: scale(.85); margin: -4px;}
}
.easy-clear-2{margin-top: 20px; background: rgb(255, 249, 232); border: 2px solid rgb(225, 199, 119); border-radius: 12px; padding: 15px 18px;}
.easy-clear-2 h3{margin: 0px 0px 8px; color: rgb(131, 86, 46);}
.easy-clear-2 p{margin: 7px 0px;}
.easy-clear-2{position: relative; margin-top: 24px; padding: 26px 30px; background: linear-gradient(120deg, rgb(23, 52, 46), rgb(41, 72, 59)); border: 1px solid rgb(210, 169, 117); border-radius: 5px; color: rgb(246, 236, 217); box-shadow: 0 10px 30px #14282333; overflow: hidden;}
.easy-clear-2::before{content: ""; position: absolute; inset: 8px; border: 1px solid rgba(207, 165, 106, 0.4); pointer-events: none;}
.easy-clear-2 .win-layout{position: relative; display: grid; grid-template-columns: minmax(0,1fr) 120px; align-items: center; gap: 24px;}
.easy-clear-2 .win-copy{min-width: 0px;}
.easy-clear-2 .win-kicker{font-size: 12px; font-weight: 800; letter-spacing: 0.15em; color: rgb(230, 186, 128);}
.easy-clear-2 h3{font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(23px, 3vw, 29px); line-height: 1.45; color: rgb(255, 242, 216); margin: 9px 0px 8px;}
.easy-clear-2 .win-answer{font-size: 27px; font-weight: 850; letter-spacing: 0.16em; color: rgb(255, 242, 216); margin: 0px 0px 16px;}
.easy-clear-2 .win-answer span{font-size: 16px; letter-spacing: 0.04em; white-space: nowrap;}
.easy-clear-2 p{font-size: 14px; line-height: 1.85; color: rgb(231, 216, 189); margin: 0px 0px 13px;}
.easy-clear-2 .win-epilogue{padding-top: 12px; border-top: 1px solid rgba(210, 169, 117, 0.267);}
.easy-clear-2 .win-ornament{color: rgb(216, 186, 124); opacity: 0.85;}
.easy-clear-2 .win-ornament svg{display: block; width: 100%; height: auto; max-height: 190px;}
@media (max-width:560px){.easy-clear-2{padding: 22px 19px;}
.easy-clear-2 .win-layout{display: flex; flex-direction: column-reverse; gap: 12px; align-items: stretch;}
.easy-clear-2 .win-ornament{align-self: center; width: 86px;}
.easy-clear-2 .win-ornament svg{height: 115px;}
.easy-clear-2 .win-kicker{font-size: 11px; letter-spacing: 0.1em;}
.easy-clear-2 p{font-size: 13px;}
}
.easy-clear-3{margin-top: 22px; padding: 22px; border: 2px solid rgb(161, 132, 81); border-radius: 12px; background: linear-gradient(160deg, rgb(255, 251, 238), rgb(230, 232, 220)); box-shadow: var(--shadow);}
.easy-clear-3 h2{font-family: serif; color: rgb(39, 81, 75); margin: 0px 0px 12px;}
.easy-clear-3 .reveal{display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin: 16px 0px;}
.easy-clear-3 .reveal .reveal-item{background: rgb(255, 255, 255); border: 2px solid rgb(181, 154, 108); border-radius: 7px; text-align: center; padding: 12px 3px;}
.easy-clear-3 .reveal span{display: block; color: rgb(129, 108, 77); font-size: 0.78rem;}
.easy-clear-3 .reveal strong{font-size: 2rem; font-family: serif; color: rgb(36, 79, 72);}
@media (max-width:430px){.easy-clear-3 .reveal{gap: 5px;}
}
.easy-clear-3{position: relative; margin-top: 24px; padding: 26px 30px; background: linear-gradient(120deg, rgb(23, 52, 46), rgb(41, 72, 59)); border: 1px solid rgb(210, 169, 117); border-radius: 5px; color: rgb(246, 236, 217); box-shadow: 0 10px 30px #14282333; overflow: hidden;}
.easy-clear-3::before{content: ""; position: absolute; inset: 8px; border: 1px solid rgba(207, 165, 106, 0.4); pointer-events: none;}
.easy-clear-3>*{position: relative;}
.easy-clear-3 .clear-kicker{font-size: 12px; font-weight: 800; letter-spacing: 0.15em; color: rgb(230, 186, 128);}
.easy-clear-3 .clear-title-row{display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0px 12px;}
.easy-clear-3 h2{font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(23px, 3vw, 29px); line-height: 1.45; margin: 0px; color: rgb(255, 242, 216);}
.easy-clear-3 .clear-seal{flex: 0 0 auto; display: grid; place-items: center; width: 62px; height: 62px; border: 3px double rgb(216, 186, 124); color: rgb(226, 201, 147); border-radius: 50%; font-family: serif; line-height: 1.35; letter-spacing: 0.12em; transform: rotate(-10deg); font-size: 14px;}
.easy-clear-3 p{font-size: 14px; line-height: 1.85; color: rgb(231, 216, 189); margin: 0px 0px 13px;}
.easy-clear-3 .reveal{max-width: 640px; margin: 18px auto 12px; gap: 9px;}
.easy-clear-3 .reveal-item{background: rgb(255, 247, 230); border: 1px solid rgb(216, 186, 124); box-shadow: 0 3px 10px #0002; border-radius: 4px;}
.easy-clear-3 .reveal span{color: rgb(128, 102, 71);}
.easy-clear-3 .reveal strong{color: rgb(36, 79, 72);}
.easy-clear-3 .word{font-size: clamp(32px, 6vw, 48px); color: rgb(255, 242, 216); margin: 12px 0px 20px; letter-spacing: 0.18em; line-height: 1.5;}
.easy-clear-3 .word-kanji{display: block; font-family: inherit; font-size: 17px; letter-spacing: 0.12em; color: rgb(230, 186, 128); margin-top: 2px;}
.easy-clear-3 .clear-epilogue{padding-top: 12px; border-top: 1px solid rgba(210, 169, 117, 0.267);}
@media (max-width:560px){.easy-clear-3{padding: 22px 19px;}
.easy-clear-3 .clear-kicker{font-size: 11px; letter-spacing: 0.1em;}
.easy-clear-3 .clear-seal{width: 50px; height: 50px; font-size: 12px;}
.easy-clear-3 p{font-size: 13px;}
.easy-clear-3 .reveal{gap: 5px;}
.easy-clear-3 .reveal span{font-size: 10px; line-height: 1.55; overflow-wrap: anywhere;}
.easy-clear-3 .reveal-item{padding: 10px 2px;}
.easy-clear-3 .reveal strong{font-size: 27px;}
}
.easy-clear-4{margin: 26px 0px; padding: 20px; background: rgb(245, 247, 236); border: 2px solid rgb(157, 167, 115); border-radius: 10px;}
.easy-clear-4 h2{border: 0px; margin: 0px 0px 12px; color: rgb(49, 90, 64);}
.easy-clear-4{position: relative; margin: 26px 0px; padding: 26px 30px; background: linear-gradient(120deg, rgb(23, 52, 46), rgb(41, 72, 59)); border: 1px solid rgb(210, 169, 117); border-radius: 5px; color: rgb(246, 236, 217); box-shadow: 0 10px 30px #14282333; overflow: hidden;}
.easy-clear-4::before{content: ""; position: absolute; inset: 8px; border: 1px solid rgba(207, 165, 106, 0.4); pointer-events: none;}
.easy-clear-4>*{position: relative;}
.easy-clear-4 .clear-kicker{font-size: 12px; font-weight: 800; letter-spacing: 0.15em; color: rgb(230, 186, 128);}
.easy-clear-4 .clear-title-row{display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0px 10px;}
.easy-clear-4 h2{font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(23px, 3vw, 29px); line-height: 1.45; margin: 0px; color: rgb(255, 242, 216); padding: 0px; border: 0px;}
.easy-clear-4 .clear-note{font-family: Georgia, serif; color: rgb(216, 186, 124); font-size: 52px; line-height: 1; transform: rotate(-10deg);}
.easy-clear-4 .clear-answer{text-align: center; font-family: "Yu Mincho", serif; font-size: clamp(32px, 6vw, 48px); font-weight: 900; letter-spacing: 0.18em; color: rgb(255, 242, 216); line-height: 1.5; margin: 13px 0px 20px;}
.easy-clear-4 .clear-answer span{display: block; font-size: 17px; letter-spacing: 0.12em; color: rgb(230, 186, 128); margin-top: 2px;}
.easy-clear-4 p{font-size: 14px; color: rgb(231, 216, 189); line-height: 1.85; margin: 0px 0px 13px;}
.easy-clear-4 strong{color: rgb(255, 242, 216);}
.easy-clear-4 h3{font-family: inherit; font-size: 16px; line-height: 1.6; color: rgb(230, 186, 128); margin: 0px 0px 8px;}
.easy-clear-4 .clear-solution{padding: 15px 17px 3px; margin: 18px 0px; border: 1px solid rgba(210, 169, 117, 0.333); border-radius: 6px; background: rgba(255, 255, 255, 0.03);}
.easy-clear-4 .history{border-top: 1px solid rgba(210, 169, 117, 0.4); padding-top: 17px; margin-top: 18px; background: transparent; color: inherit;}
@media (max-width:560px){.easy-clear-4{padding: 22px 19px;}
.easy-clear-4 .clear-kicker{font-size: 11px; letter-spacing: 0.1em;}
.easy-clear-4 p{font-size: 13px;}
.easy-clear-4 .clear-solution{padding: 12px 13px 1px;}
}

/* V3: integrated chapter completion button */
.story-continue{display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:13px 21px;margin-top:17px;border:1px solid #c6a570;border-radius:8px;background:#e2c68a;color:#263e39;font-size:clamp(14px,2vw,16px);font-weight:850;line-height:1.5;cursor:pointer;min-height:47px;box-shadow:0 3px 0 #9f804f;max-width:100%;font-family:inherit}
.story-continue:hover{background:#f2dca8}
.story-continue:focus-visible{outline:3px solid #d9933a;outline-offset:3px}
@media(max-width:560px){.story-continue{width:100%}}

.easy-clear{animation:none;line-height:1.85}.easy-clear h2,.easy-clear h3{border:0;padding:0}.easy-clear .word-kanji{font-size:17px;letter-spacing:.04em}.easy-clear .story-continue{position:relative}.easy-clear .reveal-item strong{font-size:2rem}.easy-clear-1 .result-copy{min-width:0}.easy-clear-1 h2{color:#fff2d8}.easy-clear-1 .clockface{box-sizing:content-box}.easy-clear-4 strong{color:#fff2d8}
@media(max-width:600px){.easy-clear-3 .word{font-size:32px;letter-spacing:.1em}.easy-clear-3 .word-kanji{display:block}.easy-clear-1{padding:19px!important}.easy-clear-1.show{display:flex;flex-direction:column-reverse;gap:14px}.easy-clear-1 .clockface{flex-basis:144px}.easy-clear .clear-title-row{min-width:0}.easy-clear-3 .reveal-item strong{font-size:27px}}