:root { --ink: #3a2a18; --parch: #fbf3e0; --parch2: #f1e2bf; --gold: #e0a83a; --gold2: #c7861f; --accent: #2f7fc0; --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #8fc6e8; font-family: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--ink); user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
#c { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; outline: none; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(47,127,192,.6); }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#ui > * { pointer-events: auto; }
.btn { display: inline-block; min-width: 140px; min-height: 48px; padding: 12px 22px; margin: 6px; border: 0; border-radius: 16px; background: linear-gradient(#f6c453, var(--gold2)); color: #3a2208; font-weight: 800; font-size: 18px; box-shadow: 0 4px 0 #8a5a12, 0 8px 18px rgba(0,0,0,.25); transition: transform .08s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a5a12, 0 4px 10px rgba(0,0,0,.25); }
.btn.alt { background: linear-gradient(#fffaf0, #e8dcc0); box-shadow: 0 4px 0 #a89a7a, 0 8px 18px rgba(0,0,0,.18); color: var(--ink); }
.btn.big { font-size: 22px; min-width: 220px; padding: 15px 28px; }
.btn.opt { display: block; width: 100%; margin: 8px 0; background: linear-gradient(#fffaf0, #efe2c4); box-shadow: 0 3px 0 #b5a27a; text-align: left; font-weight: 700; }
.btn.lock { filter: grayscale(.8) brightness(.9); }
.round { width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,250,236,.92); box-shadow: 0 3px 10px rgba(0,0,0,.25); font-weight: 900; font-size: 16px; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal)); overflow-y: auto; touch-action: pan-y; z-index: 20; }
.screen.pause, .screen.result { background: rgba(20,24,40,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: #fff; }
.screen h2 { font-size: 34px; margin: 8px 0 14px; text-shadow: 0 3px 8px rgba(0,0,0,.4); }
.title-screen { background: radial-gradient(ellipse at center 30%, rgba(255,245,220,0) 0%, rgba(30,20,10,.25) 100%); }
.title-screen h1 { font-size: clamp(40px, 9vw, 78px); margin: 0; color: #fff8e4; letter-spacing: 1px; text-shadow: 0 4px 0 #9a6a1e, 0 8px 24px rgba(0,0,0,.45); line-height: 1.05; font-family: Georgia, "Times New Roman", serif; font-weight: 900; }
.title-screen .sub { font-size: clamp(16px, 3.6vw, 22px); color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); margin: 8px 0 18px; font-weight: 700; }
.title-screen .stat { color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); font-weight: 700; margin: 6px; }
.row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 6px 0; }
.tog { min-height: 44px; padding: 10px 14px; border-radius: 14px; border: 0; background: rgba(255,250,236,.92); font-weight: 700; font-size: 15px; box-shadow: 0 2px 8px rgba(0,0,0,.2); color: var(--ink); }
.khelp { font-size: 13px; opacity: .85; margin: 10px; max-width: 520px; }
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15,20,35,.45); z-index: 30; padding: calc(12px + var(--sat)) 12px calc(12px + var(--sab)); animation: fin .2s ease-out; touch-action: pan-y; overflow-y: auto; }
.overlay.out { animation: fout .2s ease-in forwards; }
.card { background: linear-gradient(var(--parch), var(--parch2)); border-radius: 22px; padding: 22px 22px 14px; max-width: min(520px, 94vw); width: 100%; box-shadow: 0 16px 50px rgba(0,0,0,.4), inset 0 0 0 3px rgba(199,134,31,.35); text-align: center; animation: pop .28s cubic-bezier(.2,1.4,.4,1); max-height: 92vh; overflow-y: auto; }
.card .btns { margin-top: 12px; }
.vtitle { font-size: 22px; font-weight: 900; color: #7a4a10; margin-bottom: 8px; font-family: Georgia, serif; }
.verse { font-family: Georgia, "Times New Roman", serif; font-size: 20px; line-height: 1.45; font-style: italic; color: #3a2410; }
.verse.small { font-size: 16px; margin-top: 10px; }
.vref { margin-top: 10px; font-weight: 800; color: #9a6a1e; font-size: 15px; }
.q { font-size: 18px; line-height: 1.4; }
.ticon { font-size: 52px; line-height: 1; margin: 2px 0 6px; }
.dots { margin-top: 12px; } .dots i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #d8c49a; margin: 0 4px; } .dots i.on { background: var(--gold2); }
.hud { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: calc(8px + var(--sat)) calc(10px + var(--sar)) 0 calc(10px + var(--sal)); pointer-events: none; z-index: 6; }
.hud > * { pointer-events: auto; }
.hudL, .hudR { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; max-width: calc(50% - 30px); }
.hudR { justify-content: flex-end; margin-right: 56px; }
.pauseBtn { position: absolute; right: calc(10px + var(--sar)); top: calc(8px + var(--sat)); }
.chip { background: rgba(255,250,236,.93); border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: 15px; box-shadow: 0 2px 8px rgba(0,0,0,.2); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.chip.bump { animation: bump .35s; }
.goal { position: fixed; left: 50%; transform: translateX(-50%); top: calc(64px + var(--sat)); background: rgba(40,30,20,.72); color: #fff; padding: 8px 16px; border-radius: 14px; font-weight: 700; font-size: 15px; max-width: 92vw; text-align: center; z-index: 6; pointer-events: none !important; }
.toast { position: fixed; left: 50%; bottom: calc(110px + var(--sab)); transform: translateX(-50%); background: rgba(255,250,236,.96); padding: 10px 18px; border-radius: 16px; font-weight: 800; box-shadow: 0 6px 20px rgba(0,0,0,.3); z-index: 25; max-width: 90vw; text-align: center; pointer-events: none !important; }
.toast.pop { animation: pop .3s cubic-bezier(.2,1.4,.4,1); }
.bigmsg { position: fixed; left: 0; right: 0; top: 34%; text-align: center; font-size: clamp(34px, 8vw, 64px); font-weight: 900; color: #fff8e0; text-shadow: 0 4px 0 #9a6a1e, 0 8px 30px rgba(0,0,0,.5); z-index: 24; pointer-events: none !important; font-family: Georgia, serif; }
.bigmsg.go { animation: bigin 1.6s ease-out forwards; }
.floater { position: fixed; transform: translate(-50%, -50%); font-weight: 900; font-size: 22px; color: #fff; text-shadow: 0 2px 0 #7a4a10, 0 4px 10px rgba(0,0,0,.5); animation: floatup 1.2s ease-out forwards; z-index: 22; pointer-events: none !important; }
.dlg { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(14px + var(--sab)); width: min(620px, 94vw); background: linear-gradient(var(--parch), var(--parch2)); border-radius: 18px; padding: 12px 18px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 2px rgba(199,134,31,.35); z-index: 26; animation: slideup .25s ease-out; cursor: pointer; }
.dlg.out { animation: fout .2s forwards; }
.dlg .who { font-weight: 900; color: #9a5a10; font-size: 15px; } .dlg .txt { font-size: 18px; line-height: 1.4; margin-top: 4px; } .dlg .nx { position: absolute; right: 14px; bottom: 8px; font-size: 13px; color: #a07a40; animation: blink 1s infinite; }
.rcard { background: linear-gradient(var(--parch), var(--parch2)); color: var(--ink); border-radius: 24px; padding: 22px; width: min(480px, 94vw); box-shadow: 0 20px 60px rgba(0,0,0,.45); animation: pop .35s cubic-bezier(.2,1.4,.4,1); }
.rtitle { font-size: 30px; font-weight: 900; color: #7a4a10; font-family: Georgia, serif; }
.rbody { font-size: 17px; line-height: 1.45; margin: 10px 0; }
.stars { font-size: 52px; letter-spacing: 6px; } .stars span { color: #d6c8a8; display: inline-block; } .stars span.on { color: #f2b51e; text-shadow: 0 3px 0 #a8700a; animation: starin .5s both; }
.levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; width: min(760px, 94vw); margin: 10px auto; }
.lvlbtn { border: 0; border-radius: 16px; padding: 12px 10px; background: rgba(255,250,236,.95); box-shadow: 0 4px 0 #b5a27a, 0 8px 16px rgba(0,0,0,.2); text-align: center; min-height: 88px; }
.lvlbtn b { display: block; font-size: 16px; } .lvlbtn small { display: block; opacity: .75; margin-top: 2px; font-size: 13px; } .lvlbtn .st { color: #f2b51e; font-size: 18px; letter-spacing: 2px; }
.lvlbtn.locked { opacity: .55; filter: grayscale(.7); }
.ctrl { position: fixed; z-index: 7; bottom: calc(18px + var(--sab)); display: flex; gap: 12px; }
.cbtn { width: 74px; height: 74px; border-radius: 50%; border: 0; background: rgba(255,250,236,.85); box-shadow: 0 4px 0 rgba(120,100,70,.6), 0 6px 18px rgba(0,0,0,.25); font-size: 26px; font-weight: 900; }
.cbtn:active, .cbtn.on { transform: translateY(3px); background: #ffe7a8; }
.bar { width: 120px; height: 14px; background: rgba(0,0,0,.25); border-radius: 8px; overflow: hidden; display: inline-block; vertical-align: middle; } .bar > i { display: block; height: 100%; background: linear-gradient(90deg, #6cc04a, #b8e05a); border-radius: 8px; transition: width .3s; }
.loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; background: linear-gradient(#7ec3ea, #f6e2b8); z-index: 50; font-weight: 800; font-size: 20px; color: #5a3a10; }
.loading .sp { width: 46px; height: 46px; border: 5px solid rgba(154,106,30,.25); border-top-color: #9a6a1e; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fin { from { opacity: 0; } } @keyframes fout { to { opacity: 0; } }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
@keyframes slideup { from { transform: translate(-50%, 30px); opacity: 0; } }
@keyframes bump { 50% { transform: scale(1.18); } }
@keyframes blink { 50% { opacity: .3; } }
@keyframes starin { from { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.3); } }
@keyframes floatup { to { transform: translate(-50%, -120%); opacity: 0; } }
@keyframes bigin { 0% { transform: scale(.4); opacity: 0; } 15% { transform: scale(1.1); opacity: 1; } 25% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
body.rm *, body.rm *::before { animation-duration: .01s !important; transition: none !important; }
@media (max-height: 460px) { .title-screen h1 { font-size: 40px; } .title-screen .sub { margin: 4px 0 8px; } .btn.big { padding: 10px 22px; font-size: 19px; } .card { padding: 14px 16px 10px; } .verse { font-size: 17px; } .goal { top: calc(10px + var(--sat)); max-width: 50vw; font-size: 13px; } .cbtn { width: 62px; height: 62px; } }
@media (max-width: 560px) { .hudL { max-width: calc(100% - 76px); } .res .chip { min-width: 0 !important; } .goal { top: calc(58px + var(--sat)); font-size: 14px; } }