html { color-scheme: light; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; background: #F2E6CC; color: #7A4E2C; font-family: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", system-ui, sans-serif; }
[hidden] { display: none !important; }
main, .fallback { width: 100%; max-width: 480px; margin: 0 auto; padding: 32px 16px 24px; text-align: center; }
.logo { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto 24px; }
h1 { margin: 0 0 24px; font-size: clamp(24px, 6vw, 30px); line-height: 1.4; overflow-wrap: anywhere; }
.wood-sign { background: #fff9eb; border: 8px solid #D2A06A; border-radius: 24px; padding: 25px 8px; box-shadow: inset 0 3px 0 #ffffff, 0 7px 12px #7a4e2c22; }
#code { display: block; font-size: clamp(30px, 9vw, 46px); font-weight: 800; letter-spacing: 0.12em; padding-left: 0.12em; color: #7A4E2C; }
#hint { margin: 20px 0; font-size: 17px; line-height: 1.5; }
.open-button { display: block; background: #1C7C8C; color: #fff9eb; border: 5px solid #D2A06A; border-radius: 22px; padding: 15px 12px; font-weight: 700; line-height: 1.5; text-decoration: none; box-shadow: inset 0 2px 0 #ffffff33, 0 5px 10px #7a4e2c22; }
a:focus-visible { outline: 3px solid #7A4E2C; outline-offset: 4px; }
.stores { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; line-height: 1.5; }
.stores a { color: #1C7C8C; padding: 12px 18px; border: 3px solid #D2A06A; border-radius: 18px; background: #fff9eb; }
.intro { margin: 28px 0 0; font-size: 14px; line-height: 1.6; }
.fallback p { line-height: 1.6; }