:root { color: #2f4733; background: #91cbe7; font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-width: 320px; min-height: 100svh; margin: 0; }
button, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible { outline: 4px solid #ffe064; outline-offset: 4px; }
.game-shell { isolation: isolate; position: relative; display: grid; min-height: 100svh; overflow: hidden; place-items: center; padding: clamp(18px, 4vw, 48px); background: linear-gradient(180deg, rgb(163 218 239 / 16%), rgb(245 212 133 / 18%)), url("./assets/background/garden-background.png") center / cover no-repeat, #91cbe7; }
.game-shell::before { position: absolute; z-index: -1; inset: 0; background: rgb(25 74 47 / 8%); content: ""; }
.panel { width: min(560px, 100%); border: 3px solid rgb(255 255 255 / 75%); border-radius: 32px; padding: clamp(28px, 6vw, 52px); text-align: center; background: rgb(255 253 239 / 91%); box-shadow: 0 20px 50px rgb(40 86 48 / 25%); }
.eyebrow { margin: 0 0 8px; color: #698c4b; font-size: .85rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 10px; color: #38633d; font-size: clamp(2.25rem, 8vw, 4.5rem); line-height: 1.05; }
.subtitle { margin-bottom: 30px; color: #5a6c54; font-size: clamp(1rem, 3vw, 1.25rem); line-height: 1.6; }
.library-picker { display: grid; gap: 8px; margin: 0 auto 14px; text-align: left; }
.library-picker span { color: #517347; font-size: .9rem; font-weight: 700; }
.library-picker select { width: 100%; border: 2px solid #bddc91; border-radius: 14px; padding: 13px 15px; color: #315033; background: #fffef7; }
.word-count { min-height: 1.5em; margin-bottom: 20px; color: #56724b; font-size: .95rem; }
.helper-text, .load-error { margin: 18px auto 0; color: #697762; font-size: .84rem; line-height: 1.55; }
.load-error { color: #a53c3c; font-weight: 700; }
.primary-button, .secondary-button, .replay-button { border: 0; border-radius: 999px; padding: 14px 27px; font-weight: 800; transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease; }
.primary-button { min-width: 190px; color: #fff; background: #ed8d3a; box-shadow: 0 6px 0 #bd6329, 0 10px 20px rgb(133 81 39 / 24%); }
.primary-button:hover:not(:disabled), .secondary-button:hover, .replay-button:hover { transform: translateY(-2px); filter: brightness(1.05); }
.primary-button:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #bd6329; }
.primary-button:disabled { cursor: wait; opacity: .55; }
.secondary-button { margin-left: 10px; color: #466744; background: #e2f0cb; box-shadow: 0 4px 0 #b6cf99; }
.play-screen { display: grid; width: min(1160px, 100%); min-height: min(720px, calc(100svh - 36px)); grid-template-rows: auto auto minmax(350px, 1fr); align-items: start; }
.game-header { display: grid; align-items: center; grid-template-columns: 120px 1fr 120px; gap: 16px; padding: 8px 4px; }
.text-button { justify-self: start; border: 0; border-radius: 999px; padding: 9px 14px; color: #315137; font-size: .94rem; font-weight: 800; background: rgb(255 255 247 / 88%); box-shadow: 0 3px 0 rgb(84 123 70 / 28%); }
.game-meta { display:grid; gap:4px; justify-self:end; text-align:right; }.garden-label { color: #315137; font-size: .9rem; font-weight: 800; text-shadow: 0 1px #fff; }.difficulty-badge { color:#42663d; font-size:.76rem; font-weight:800; text-shadow:0 1px #fff; }
.progress-wrap { display: grid; gap: 5px; justify-self: stretch; text-align: center; }
.progress-text { margin: 0; color: #315137; font-size: .92rem; font-weight: 900; }
.progress-track { overflow: hidden; height: 12px; border: 2px solid rgb(255 255 255 / 78%); border-radius: 999px; background: rgb(54 117 76 / 22%); }
.progress-bar { display: block; width: 0; height: 100%; border-radius: inherit; background: #f9be51; transition: width 300ms ease; }
.question-card { width: min(620px, 94%); margin: clamp(16px, 3vw, 34px) auto 0; border: 3px solid rgb(255 255 255 / 78%); border-radius: 28px; padding: 18px 22px; text-align: center; background: rgb(255 254 241 / 91%); box-shadow: 0 9px 22px rgb(43 85 49 / 16%); }
.question-hint { margin: 0 0 5px; color: #789064; font-size: clamp(.78rem, 2vw, .98rem); font-weight: 700; }
.question-card h2 { margin: 0; color: #34603c; font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.2; }
.mole-options { position: relative; display: grid; width: min(1080px, 100%); align-self: end; margin: 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 3vw, 54px); padding: 28px clamp(0px, 3vw, 30px) 0; }
.mole-option { position: relative; display: grid; min-width: 0; min-height: clamp(240px, 34vw, 350px); border: 0; padding: 0; place-items: end center; background: transparent; -webkit-tap-highlight-color: transparent; }
.mole-option::after { position: absolute; z-index: -1; bottom: 7%; left: 5%; width: 90%; height: 14%; border-radius: 50%; background: rgb(63 89 38 / 18%); content: ""; filter: blur(10px); }
.mole-option:disabled { cursor: default; }
.mole { position: absolute; z-index: 1; bottom: 12%; width: min(80%, 210px); max-height: 75%; object-fit: contain; object-position: bottom; transform: translateY(57%); transition: transform 300ms cubic-bezier(.17,.89,.41,1.24), filter 170ms ease, opacity 130ms ease; }
.mole-option.is-visible .mole { transform: translateY(0); }
.mole-option.is-wrong .mole { transform: translateY(26%) rotate(-3deg); filter: saturate(.68); transition-duration: 130ms; }
.mole-option.is-hidden .mole { transform: translateY(62%); opacity: 0; }
.hole { position: relative; z-index: 2; width: min(100%, 260px); object-fit: contain; }
.word-sign { position: absolute; z-index: 3; top: 1%; left: 50%; display: grid; width: min(100%, 270px); min-height: 84px; place-items: center; padding: 16px 24px 18px; color: #4e3825; font-size: clamp(.95rem, 2.2vw, 1.4rem); font-weight: 900; line-height: 1.14; overflow-wrap: anywhere; background: url("./assets/objects/word-sign-transparent.png") center / 100% 100% no-repeat; transform: translate(-50%, 12px) scale(.96); opacity: 0; transition: opacity 180ms ease 40ms, transform 260ms ease; }
.mole-option.is-visible .word-sign { transform: translate(-50%, 0) scale(1); opacity: 1; }
.mole-option.is-hidden .word-sign { transform: translate(-50%, 14px) scale(.96); opacity: 0; }
.mole-option.is-correct .mole { animation: happy-hop 520ms ease-in-out infinite alternate; filter: drop-shadow(0 0 12px #ffe56a); }
.mole-option.is-correct .word-sign { color: #fff; text-shadow: 0 2px 0 #8b5532; }
.mole-option.is-wrong .word-sign { text-decoration: line-through; opacity: .62; }
.feedback-card { position: absolute; z-index: 8; top: 50%; left: 50%; display: grid; width: min(390px, calc(100% - 34px)); border: 4px solid #fff5b8; border-radius: 28px; padding: 22px 30px; place-items: center; color: #355737; text-align: center; background: #fffef3; box-shadow: 0 14px 36px rgb(60 97 52 / 30%); transform: translate(-50%, -50%); }
.feedback-sparkle { color: #ed9d3c; font-size: 2rem; }
.feedback-label { margin: 0; color: #e28238; font-size: 1.05rem; font-weight: 900; }
.feedback-card strong { margin-top: 6px; font-size: clamp(2rem, 7vw, 3rem); }
.feedback-card > span:not(.feedback-sparkle) { margin: 2px 0 14px; font-size: 1.25rem; font-weight: 700; }
.replay-button { color: #46663d; background: #dff1c8; box-shadow: 0 4px 0 #b6d193; }
.result-screen { width: min(680px, 100%); }
.result-stats { display: grid; gap: 12px; margin: 28px 0; grid-template-columns: repeat(3, 1fr); }
.result-stats div { display: grid; gap: 4px; border-radius: 18px; padding: 18px 8px; background: #eef7dc; }
.result-stats strong { color: #df8538; font-size: clamp(1.7rem, 5vw, 2.7rem); }
.result-stats span { color: #597454; font-size: .85rem; font-weight: 700; }
.result-mistakes { margin: 0 0 26px; border: 2px solid #d6e7ba; border-radius: 18px; padding: 14px; text-align: left; background: rgb(255 255 247 / 72%); }
.result-mistakes h2 { margin: 0 0 9px; color: #466b43; font-size: 1rem; }
.result-mistakes p { margin: 0; color: #6c8169; font-size: .9rem; font-weight: 700; }
.result-mistakes ul { display: grid; max-height: 174px; margin: 0; padding: 0; overflow: auto; list-style: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.result-mistakes li { display: grid; gap: 2px; border-radius: 11px; padding: 8px 10px; background: #f4f9e9; }
.result-mistakes li strong { color: #486b3e; font-size: .92rem; overflow-wrap: anywhere; }
.result-mistakes li span { color: #7a7364; font-size: .8rem; }
.debug-panel { position: absolute; z-index: 10; right: 14px; bottom: 12px; max-width: calc(100% - 28px); margin: 0; border-radius: 8px; padding: 7px 10px; color: #fff; font: 12px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; background: rgb(34 34 34 / 76%); }
@keyframes happy-hop { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-14px) rotate(2deg); } }
@media (max-width: 650px) { .game-shell { padding: 12px; } .play-screen { min-height: calc(100svh - 24px); grid-template-rows: auto auto minmax(280px, 1fr); } .game-header { grid-template-columns: auto 1fr auto; gap: 8px; } .garden-label { font-size: 0; } .garden-label::after { font-size: 1.1rem; content: "🌿"; } .text-button { padding: 7px 11px; font-size: .82rem; } .mole-options { gap: 4px; padding-inline: 0; } .mole-option { min-height: 230px; } .word-sign { min-height: 68px; padding: 14px 19px 16px; font-size: .85rem; } .secondary-button { display: block; margin: 18px auto 0; } }
@media (max-height: 650px) and (orientation: landscape) { .game-shell { padding: 10px 24px; } .play-screen { min-height: calc(100svh - 20px); grid-template-rows: auto auto minmax(220px, 1fr); } .question-card { margin-top: 6px; padding: 10px 18px; } .question-card h2 { font-size: clamp(1.55rem, 5vw, 2.7rem); } .mole-option { min-height: 220px; } }

.setup-block { display: grid; gap: 10px; margin: 19px 0; text-align: left; color: #517347; font-size: .9rem; font-weight: 800; }
.setup-head { display: flex; justify-content: space-between; gap: 12px; }.setup-head a { color: #df8538; font-size: .82rem; }
.selection-actions { display:flex; gap:8px; }.selection-actions button { border:1px solid #bcd99e; border-radius:999px; padding:5px 10px; color:#4e774d; background:#f3fae9; font-size:.78rem; font-weight:800; }
.library-choices { display: grid; gap: 8px; }.library-choices label { display:flex; align-items:center; gap:10px; border:2px solid #d4e7bd; border-radius:13px; padding:9px 11px; background:#fffef7; cursor:pointer; }.library-choices input { width:18px; height:18px; accent-color:#6fa951; }.library-choices span { display:flex; justify-content:space-between; flex:1; gap:8px; }.library-choices small { color:#73826c; }
.round-choices { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }.round-choices button { border:2px solid #d2e4b9; border-radius:12px; padding:9px 4px; color:#517347; background:#fffef7; font-weight:900; }.round-choices button.active { border-color:#75ab58; color:#fff; background:#75ab58; }
.language-switch { display:flex; overflow:hidden; border:1px solid #bcd99e; border-radius:999px; background:#f3fae9; }.language-switch button { min-height:32px; border:0; padding:5px 10px; color:#4e774d; background:transparent; font-size:.76rem; font-weight:800; }.language-switch button.active { color:#fff; background:#75ab58; }.difficulty-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.difficulty-choices button { min-height:46px; border:2px solid #d2e4b9; border-radius:13px; padding:9px 6px; color:#517347; background:#fffef7; font-weight:900; transition:transform 150ms ease,filter 150ms ease,border-color 150ms ease,background 150ms ease; }.difficulty-choices button:hover { transform:translateY(-1px); filter:brightness(1.03); }.difficulty-choices button.active { border-color:#75ab58; color:#fff; background:#75ab58; box-shadow:0 3px 0 #5d914a; }.difficulty-help { min-height:1.4em; margin:0; color:#6c8169; font-size:.83rem; font-weight:700; }
.mole-grid { display:grid; width:min(1090px,100%); margin:12px auto 0; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(130px,1fr)); gap:clamp(4px,1.5vw,20px); padding:0 clamp(0px,3vw,28px) 10px; align-self:stretch; }
.mole-slot { position:relative; display:grid; min-width:0; min-height:clamp(132px,16vh,190px); border:0; padding:0; place-items:end center; background:transparent; -webkit-tap-highlight-color:transparent; }.mole-slot:focus-visible { outline:4px solid #ffe064; outline-offset:2px; }.mole-slot .mole { position:absolute; z-index:1; bottom:10%; width:min(76%,150px); max-height:79%; object-fit:contain; object-position:bottom; transform:translateY(57%); opacity:0; transition:transform 210ms cubic-bezier(.17,.89,.41,1.24),opacity 130ms ease,filter 150ms ease; }.mole-slot.is-active .mole { transform:translateY(0); opacity:1; }.mole-slot.is-hiding .mole,.mole-slot.is-hidden .mole { transform:translateY(62%); opacity:0; }.mole-slot.is-wrong .mole { transform:translateY(25%) rotate(-5deg); filter:saturate(.6); }.mole-slot.is-correct .mole { animation:happy-hop 360ms ease-in-out infinite alternate; filter:drop-shadow(0 0 10px #ffe56a); }.mole-slot .hole { position:relative; z-index:2; width:min(100%,190px); object-fit:contain; }.mole-slot .word-sign { position:absolute; z-index:3; top:1%; left:50%; display:grid; width:min(100%,195px); min-height:56px; place-items:center; padding:10px 18px 13px; color:#4e3825; font-size:clamp(.72rem,1.7vw,1.1rem); font-weight:900; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:url("./assets/objects/word-sign-transparent.png") center/100% 100% no-repeat; transform:translate(-50%,12px) scale(.95); opacity:0; transition:opacity 140ms ease,transform 200ms ease; }.mole-slot.is-active .word-sign { transform:translate(-50%,0) scale(1); opacity:1; }.mole-slot.is-hiding .word-sign,.mole-slot.is-hidden .word-sign { opacity:0; }.mole-slot.is-wrong .word-sign { text-decoration:line-through; opacity:.6; }
@media (max-width:650px) { .mole-grid { grid-template-rows:repeat(3,minmax(105px,1fr)); gap:2px; padding-inline:0; }.mole-slot { min-height:112px; }.mole-slot .hole { width:min(100%,135px); }.mole-slot .word-sign { min-height:45px; padding:8px 13px 10px; font-size:clamp(.58rem,2.8vw,.82rem); }.mole-slot .mole { width:min(76%,110px); } }

/* Each slot uses the real state stored in data-mole-state. The artwork carries the sign; the text overlay stays above it. */
.mole-slot { overflow:visible; cursor:default; }
.mole-slot[data-mole-state="idle"] { cursor:pointer; }
.mole-slot .mole-actor { position:absolute; z-index:2; bottom:14%; width:min(92%,190px); aspect-ratio:1; opacity:0; transform:translateY(78%); transform-origin:50% 72%; transition:transform 220ms cubic-bezier(.17,.89,.41,1.24), opacity 130ms ease, filter 150ms ease; }
.mole-slot .mole-actor .mole { position:absolute; inset:0; z-index:1; width:100%; height:100%; max-height:none; object-fit:contain; transform:none; opacity:1; transition:none; }
.mole-slot[data-mole-state="rising"] .mole-actor { opacity:1; transform:translateY(0); }
.mole-slot[data-mole-state="idle"] .mole-actor { opacity:1; transform:translateY(0); animation:mole-idle 1800ms ease-in-out infinite alternate; }
.mole-slot[data-mole-state="hiding"] .mole-actor,.mole-slot[data-mole-state="hidden"] .mole-actor { opacity:0; transform:translateY(12%); }
.mole-slot[data-mole-state="wrong"] .mole-actor { opacity:1; animation:mole-wrong 240ms ease-in-out both; filter:saturate(.65); }
.mole-slot[data-mole-state="wrong"] .mole-actor::after { position:absolute; z-index:5; top:19%; right:6%; width:26px; height:26px; border-radius:50%; color:#fff; font:bold 26px/23px sans-serif; background:#e35a46; content:"×"; box-shadow:0 2px 0 rgb(104 49 37 / 35%); }
.mole-slot[data-mole-state="hit"] .mole-actor { opacity:1; bottom:14%; animation:mole-hit 470ms ease-out both; filter:drop-shadow(0 0 10px #ffe56a); }
.mole-slot[data-mole-state="hit"] .mole { transform:scale(.85); transform-origin:bottom center; }
.mole-slot .hole { z-index:1; width:min(100%,190px); }
.mole-slot .word-sign { position:absolute; z-index:3; top:var(--sign-top,9%); left:50%; width:var(--sign-width,86%); height:var(--sign-height,24%); min-height:0; padding:2% 5%; color:#4e3825; font-size:clamp(.58rem,1.25vw,.95rem); font-weight:900; line-height:1.06; white-space:normal; overflow:hidden; text-overflow:clip; background:none; transform:translateX(-50%); opacity:1; transition:none; }
.mole-slot .word-sign.is-long { font-size:clamp(.5rem,1.05vw,.78rem); }
.mole-slot .word-sign.is-extra-long { font-size:clamp(.43rem,.9vw,.66rem); }
.hammer-cursor { position:fixed; z-index:100; top:var(--hammer-y,0); left:var(--hammer-x,0); width:132px; height:132px; pointer-events:none; user-select:none; transform:translate(-50%,-27%) rotate(-20deg); transform-origin:50% 27%; transition:transform 70ms ease-out; }
.hammer-cursor.is-striking { transform:translate(-50%,-27%) rotate(18deg) scale(.94); }
@keyframes mole-idle { from { transform:translateY(0) rotate(-.5deg); } to { transform:translateY(-3px) rotate(.5deg); } }
@keyframes mole-wrong { 0%,100% { transform:translateY(0); } 25% { transform:translateX(-6px) translateY(2px) rotate(-2deg); } 55% { transform:translateX(6px) translateY(2px) rotate(2deg); } 78% { transform:translateX(-4px) translateY(1px) rotate(-1deg); } }
@keyframes mole-hit { 0% { transform:translateY(0) rotate(0); } 28% { transform:translateY(11px) rotate(-.7deg); } 100% { transform:translateY(7px) rotate(0); } }
.success-particles { position:fixed; z-index:110; inset:0; pointer-events:none; overflow:hidden; }
.success-particle { position:fixed; top:var(--y); left:var(--x); color:#ffe268; font-size:clamp(18px,2.2vw,28px); line-height:1; opacity:0; text-shadow:0 2px 0 #d78b3c,0 0 9px rgb(255 255 255 / 88%); transform:translate(-50%,-50%) scale(.45); animation:success-particle 460ms cubic-bezier(.18,.7,.28,1) var(--delay) both; }
@keyframes success-particle { 0% { opacity:0; transform:translate(-50%,-50%) scale(.45); } 12% { opacity:1; } 42% { opacity:1; transform:translate(calc(-50% + var(--mid-dx)),calc(-50% + var(--mid-dy))) scale(1.08) rotate(14deg); } 100% { opacity:0; transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.72) rotate(28deg); } }
@media (prefers-reduced-motion:reduce) { .mole-slot[data-mole-state="hit"] .mole-actor { animation-duration:160ms; }.success-particle { animation-duration:220ms; } }
@media (max-width:650px) { .mole-slot .mole-actor { width:min(96%,132px); }.mole-slot .hole { width:min(100%,135px); }.mole-slot .word-sign { font-size:clamp(.45rem,2.1vw,.66rem); }.mole-slot .word-sign.is-long { font-size:clamp(.39rem,1.8vw,.56rem); }.mole-slot .word-sign.is-extra-long { font-size:clamp(.34rem,1.55vw,.48rem); } }
@media (hover:none), (pointer:coarse) { .hammer-cursor { display:none !important; } }