* { box-sizing: border-box; }
:root { font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif; color: #44382e; background: #fff8e9; font-synthesis: none; }
body { margin: 0; min-width: 0; }
main { min-height: 100svh; display: grid; place-items: center; padding: 24px 20px; }
section { width: min(100%, 400px); text-align: center; }
[hidden] { display: none !important; }
.decoration { color: #d5831b; font-size: 30px; margin: 0 0 8px; }
h1 { font-size: clamp(28px, 8vw, 38px); line-height: 1.4; margin: 0; letter-spacing: .05em; }
.instruction { font-size: clamp(16px, 4.3vw, 19px); line-height: 1.8; margin: 16px 0 24px; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
button { font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
.card { aspect-ratio: 1.15; min-height: 104px; border: 4px solid white; border-radius: 23px; background: #9bd8cd; color: #275f57; box-shadow: 0 5px 0 #69aea2; display: grid; place-items: center; }
.card span { display: grid; place-items: center; width: 65px; height: 65px; border: 2px dashed #36766b; border-radius: 50%; font-size: 34px; }
.card:active { transform: translateY(3px); box-shadow: 0 2px 0 #69aea2; }
button:focus-visible { outline: 4px solid #333e83; outline-offset: 5px; }
.hint { margin: 24px 0 0; font-size: 15px; color: #6d6257; }
.result-icon { font-size: 92px; margin-bottom: 16px; }
.result h1 { font-size: clamp(40px, 12vw, 56px); }
.result[data-outcome="win"] h1 { color: #a7580a; }
.result[data-outcome="lose"] h1 { color: #326a60; }
#retry { min-height: 64px; width: 100%; margin-top: 16px; padding: 16px; border: 0; border-radius: 22px; background: #f7ce65; color: #493618; font-size: 23px; font-weight: 700; box-shadow: 0 5px 0 #d9a741; }
#retry:active { transform: translateY(3px); box-shadow: 0 2px 0 #d9a741; }
@media (max-height: 600px) { main { padding-block: 16px; } .decoration { display: none; } .instruction { margin: 12px 0 16px; } .hint { margin-top: 16px; } }