/* Taarala Thota (Garden of Stars) © 2026 Rukmini Gandepalli (@rdg-git). All rights reserved. */
@font-face{font-family:'Caveat';src:url('fonts/caveat.woff?v=a49450ff') format('woff');font-weight:500 700;font-style:normal;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces.woff?v=451247d5') format('woff');font-weight:400 600;font-style:normal;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-italic.woff?v=ade54699') format('woff');font-weight:400 400;font-style:italic;font-display:swap;}
/* ============ Taarala Thota — picture-backed screens ============ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; }
html, body { height:100%; overflow:hidden; overscroll-behavior:none; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; background:#05060f; color:#2D2D2D; touch-action:manipulation; }

.scr { position:fixed; inset:0; display:none; overflow:hidden; background:#05060f; }
.scr.active { display:block; }
.scr .bg { position:absolute; inset:-6%; background-size:cover; background-position:center; filter:blur(14px) brightness(.9) saturate(1.1); }
.art { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); overflow:hidden; --u:1px; }
.art > img.pic { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.hotbox { position:absolute; pointer-events:none; }
.hotbox > .hot { pointer-events:auto; }
.hot { position:absolute; background:transparent; border:0; padding:0; cursor:pointer; z-index:5; }
body.debug .hot { outline:2px dashed #3f3; background:rgba(60,255,60,.18); }
.hot:focus-visible { outline:2px solid #ffd27a; }

/* live text drawn by the app over the pictures */
.live { position:absolute; display:flex; align-items:center; justify-content:center; text-align:center; pointer-events:none; line-height:1.05; white-space:nowrap; z-index:4; }
.lantern-digits { font-family:'Fraunces',Georgia,serif; font-weight:700; color:#fff4cf; text-shadow:0 0 calc(var(--u)*10) #ffb347, 0 1px 2px #000a; background:radial-gradient(ellipse at center,rgba(120,60,10,.85),rgba(70,30,5,.78)); border-radius:calc(var(--u)*14); box-shadow:0 0 calc(var(--u)*14) rgba(255,170,60,.55) inset; letter-spacing:.5px; }
.lantern-digits.star { color:#fff1b0; }
.turn-text { font-family:'Fraunces',Georgia,serif; font-weight:600; color:#fff1d0; text-shadow:0 1px 3px #000c; }
.turn-sub { font-family:'Fraunces',Georgia,serif; color:#ffd88a; font-style:italic; text-shadow:0 1px 2px #000c; }
.resume-sub { font-family:'Fraunces',Georgia,serif; color:#6a4a1f; font-weight:600; }
.plaque { font-family:'Fraunces',Georgia,serif; color:#ffe9b8; font-weight:700; text-shadow:0 1px 3px #000a; }
.stat-num { font-family:'Fraunces',Georgia,serif; font-weight:700; color:#fff1d0; text-shadow:0 1px 3px #000b; }
.stat-row { justify-content:space-between; font-family:'Fraunces',Georgia,serif; color:#f3e3bd; padding:0 calc(var(--u)*10); }
.stat-row .r-won, .stat-row .r-lost, .stat-row .r-forfeited, .stat-row .r-draw { color:#ffe9b0; }
.stat-row .sr-r { opacity:.75; }
.loved-title { font-family:'Caveat',cursive; font-weight:700; color:#fff1d0; text-shadow:0 0 calc(var(--u)*24) rgba(255,210,150,.55); }
.lbl-patch { background:linear-gradient(#5b2f15,#4a2410); color:#f1d9a0; font-family:'Fraunces',Georgia,serif; border-radius:calc(var(--u)*6); z-index:3; }

/* carved wood signs */
.plank { position:absolute; z-index:5; display:flex; align-items:center; justify-content:center; gap:.35em; cursor:pointer; color:#ffe7b3; font-family:'Fraunces',Georgia,serif; font-weight:600; letter-spacing:.3px;
  border:calc(var(--u)*3) solid #d7a65a; border-radius:calc(var(--u)*12); background:linear-gradient(180deg,#8a5a2b,#4d2d13); box-shadow:0 calc(var(--u)*4) calc(var(--u)*10) rgba(0,0,0,.55), inset 0 calc(var(--u)*2) 0 rgba(255,225,160,.35); text-shadow:0 1px 2px #000a; }
.plank:active { transform:scale(.96); }
.plank svg { width:1.1em; height:1.1em; }
.music-state { position:absolute; inset:0; display:none; pointer-events:none; }
.music-state.off { display:block; } .music-state svg { width:100%; height:100%; }
.sign-cover { position:absolute; display:flex; align-items:center; justify-content:center; z-index:3; pointer-events:none;
  background:linear-gradient(180deg,#6a4220 0%,#4a2b12 55%,#5a3719 100%); border:calc(var(--u)*5) solid #c99a4c; border-radius:calc(var(--u)*18);
  box-shadow:0 calc(var(--u)*6) calc(var(--u)*14) rgba(0,0,0,.6), inset 0 0 calc(var(--u)*22) rgba(0,0,0,.45); }
.sign-cover span { font-family:'Fraunces',Georgia,serif; font-weight:800; letter-spacing:.06em; color:#f0cf8c; text-shadow:0 calc(var(--u)*2) 0 #2a1507, 0 0 calc(var(--u)*10) rgba(255,200,110,.45); }

/* panels (cards drawn by the app) */
.panel-ov { position:absolute; inset:0; z-index:80; background:rgba(5,6,18,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:18px; animation:fadein .25s ease; }
@keyframes fadein { from{opacity:0} to{opacity:1} }
.panel-card { width:min(380px,100%); background:linear-gradient(180deg,#fff7e2,#f5e3b8); border:3px solid #c99a4c; border-radius:22px; padding:22px 20px 18px; text-align:center; box-shadow:0 14px 40px rgba(0,0,0,.6); color:#3a2410; font-family:'Fraunces',Georgia,serif; }
.panel-icon { font-size:40px; margin-bottom:6px; }
.panel-title { font-size:26px; font-weight:700; color:#6b3f12; margin-bottom:6px; }
.panel-text { font-size:16px; line-height:1.35; color:#5a4220; margin-bottom:12px; }
.panel-extra { margin:8px 0 12px; }
.panel-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.panel-btn { flex:1 1 130px; padding:13px 16px; font-size:17px; font-weight:700; font-family:inherit; color:#fff4d6; background:linear-gradient(180deg,#9a6430,#5e3716); border:2px solid #d7a65a; border-radius:14px; cursor:pointer; box-shadow:0 3px 0 #2e1a09; }
.panel-btn.secondary { color:#5e3716; background:linear-gradient(180deg,#fff4d6,#ead3a0); box-shadow:0 3px 0 #b08a45; }
.panel-btn:active { transform:translateY(2px); box-shadow:none; }
.toast { position:absolute; left:50%; bottom:11%; transform:translateX(-50%); z-index:90; background:rgba(40,24,10,.92); color:#ffe9c0; padding:10px 18px; border-radius:20px; font-size:15px; border:1px solid #c99a4c; transition:opacity .4s; white-space:nowrap; }
.toast.out { opacity:0; }
.art.dim::after { content:''; position:absolute; inset:0; background:rgba(5,6,18,.55); z-index:40; pointer-events:none; }

/* Loved Ones */
.night { background:radial-gradient(ellipse at 50% 0%,#1d2a5e 0%,#0b1030 55%,#05060f 100%); }
.night-stars { position:absolute; inset:0; opacity:.9; background-image:
  radial-gradient(1.5px 1.5px at 12% 8%,#fff,transparent),radial-gradient(1px 1px at 30% 22%,#fff,transparent),radial-gradient(2px 2px at 70% 12%,#ffe9b0,transparent),
  radial-gradient(1px 1px at 85% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 50% 40%,#cfe0ff,transparent),radial-gradient(1px 1px at 20% 55%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 78% 62%,#fff,transparent),radial-gradient(1px 1px at 40% 78%,#ffe9b0,transparent),radial-gradient(1px 1px at 90% 88%,#fff,transparent),radial-gradient(1.5px 1.5px at 8% 92%,#fff,transparent);
  background-size:100% 100%; }
.loved-scroll { position:absolute; overflow-y:auto; z-index:4; -webkit-overflow-scrolling:touch; }
.loved-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:calc(var(--u)*50) calc(var(--u)*20); padding:calc(var(--u)*20); justify-items:center; }
.medallion { background:none; border:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:calc(var(--u)*14); color:#fff1d0; }
.med-ring { width:calc(var(--u)*270); height:calc(var(--u)*270); border-radius:50%; background-size:cover; background-position:center; border:calc(var(--u)*8) solid #e3b866; box-shadow:0 0 calc(var(--u)*34) rgba(255,200,110,.5), 0 0 0 calc(var(--u)*5) #5e3716; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',Georgia,serif; font-size:calc(var(--u)*110); font-weight:700; color:#fff7e2; }
.med-name { font-family:'Caveat',cursive; font-size:calc(var(--u)*66); font-weight:700; text-shadow:0 2px 6px #000a; }
.loved-empty { color:#ffe9c0; text-align:center; font-family:'Caveat',cursive; font-size:calc(var(--u)*58); line-height:1.3; padding-top:calc(var(--u)*220); }

/* Bubble Pop */
.blayer { position:absolute; overflow:visible; pointer-events:none; z-index:3; }
.bub { position:absolute; left:0; top:0; border-radius:50%; pointer-events:auto; cursor:pointer; will-change:transform;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 8%,rgba(255,255,255,.25) 22%,transparent 40%), radial-gradient(circle at 60% 70%,var(--bc) 0%,rgba(255,255,255,.12) 62%,rgba(255,255,255,.04) 100%);
  border:calc(var(--u)*3) solid rgba(255,255,255,.65); box-shadow:0 0 calc(var(--u)*18) var(--bc), inset 0 0 calc(var(--u)*16) rgba(255,255,255,.35); }
.bub::before { content:''; position:absolute; inset:-22%; border-radius:50%; }
.bub.pop { animation:bpop .22s ease-out forwards; }
@keyframes bpop { to { opacity:0; filter:brightness(2); } }

/* Minesweeper */
.msboard { position:absolute; display:grid; gap:calc(var(--u)*5); z-index:4; padding:calc(var(--u)*6); }
.mscell { border:0; border-radius:20%; cursor:pointer; background:linear-gradient(145deg,#cdbd98,#a8966b); box-shadow:inset 0 calc(var(--u)*3) 0 rgba(255,255,255,.4), 0 calc(var(--u)*3) 0 #6b5a36; font-family:'Fraunces',Georgia,serif; font-weight:800; display:flex; align-items:center; justify-content:center; color:#333; padding:0; touch-action:manipulation; }
.mscell.open { background:linear-gradient(145deg,#efe3c4,#e0d0a6); box-shadow:inset 0 calc(var(--u)*2) calc(var(--u)*5) rgba(90,70,30,.3); cursor:default; }
.mscell.hit { outline:calc(var(--u)*5) solid #c9792c; outline-offset:calc(var(--u)*-3); }
.mscell.bounce { animation:bnc .5s; }
@keyframes bnc { 30%{transform:translateY(-12%) scale(1.08)} 60%{transform:translateY(4%)} }

/* Chess & Checkers boards */
.cboard { position:absolute; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); z-index:4; }
.ccell { position:relative; background:none; border:0; padding:6%; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ccell svg { width:100%; height:100%; pointer-events:none; filter:drop-shadow(0 calc(var(--u)*2) calc(var(--u)*2) rgba(0,0,0,.45)); }
.ccell.sel, .kcell.sel { box-shadow:inset 0 0 0 calc(var(--u)*5) #ffc24d; }
.ccell.last, .kcell.last { box-shadow:inset 0 0 0 calc(var(--u)*3) rgba(255,230,160,.8); }
.ccell.chk { box-shadow:inset 0 0 0 calc(var(--u)*5) #d9822b; }
.ccell.dest::after { content:''; position:absolute; width:26%; height:26%; border-radius:50%; background:rgba(255,194,77,.85); box-shadow:0 0 calc(var(--u)*8) #ffc24d; }
.ccell.destcap { box-shadow:inset 0 0 0 calc(var(--u)*5) rgba(255,194,77,.95); }
.pc { --f:#f6ead0; --s:#3b2a17; } .pc.b { --f:#34343f; --s:#e3cf9a; }
.pc * { fill:var(--f); stroke:var(--s); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.pc .eye { fill:var(--s); stroke:none; }
.pc path[fill="none"] { fill:none; }
.kboard { position:absolute; display:grid; grid-template-columns:repeat(10,1fr); grid-template-rows:repeat(10,1fr); z-index:4; }
.kcell { position:relative; background:none; border:0; padding:7%; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.kcell svg { width:100%; height:100%; pointer-events:none; }
.kcell.dest { box-shadow:inset 0 0 0 calc(var(--u)*3.5) rgba(255,194,77,.95); }
.kcell.dest.must { box-shadow:inset 0 0 0 calc(var(--u)*6) #ffb21a; background:rgba(255,194,77,.22); }
.capture-row { position:absolute; display:flex; flex-wrap:wrap; align-content:center; gap:0; z-index:4; pointer-events:none; }
.capture-row .cap { width:calc(var(--u)*50); height:calc(var(--u)*50); margin-right:calc(var(--u)*-8); }
.capture-row.k .cap { width:calc(var(--u)*38); height:calc(var(--u)*38); margin-right:calc(var(--u)*-4); }
.cap svg { width:100%; height:100%; }
.promo-row { display:flex; gap:10px; justify-content:center; }
.promo-btn { width:64px; height:64px; padding:6px; background:linear-gradient(180deg,#e8cf9a,#b88b4a); border:2px solid #7a4a1a; border-radius:12px; cursor:pointer; }
.promo-btn svg { width:100%; height:100%; }
.promo-btn svg.pc.b { background:#9a7a4a; border-radius:8px; }

/* music button: carved-wood medallion */
.music-btn { position:absolute; z-index:6; background:none; border:0; padding:0; cursor:pointer; filter:drop-shadow(0 calc(var(--u)*3) calc(var(--u)*5) rgba(0,0,0,.6)); }
.music-btn svg { width:100%; height:100%; display:block; }
.music-btn .slash { display:none; }
.music-btn.off .slash { display:inline; }
.music-btn.off .note { opacity:.6; }
.music-btn:not(.off) { filter:drop-shadow(0 0 calc(var(--u)*7) rgba(255,200,110,.6)) drop-shadow(0 calc(var(--u)*3) calc(var(--u)*5) rgba(0,0,0,.6)); }
.music-btn:active { transform:scale(.94); }

/* small carved-wood icon buttons + banner */
.wbtn { position:absolute; z-index:6; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#ffe3a3; padding:0;
  font-size:calc(var(--u)*34); border:calc(var(--u)*3) solid #d9a95a; border-radius:calc(var(--u)*14); background:linear-gradient(180deg,#8a5a2b,#4b2c12);
  box-shadow:0 calc(var(--u)*3) calc(var(--u)*6) rgba(0,0,0,.6), inset 0 calc(var(--u)*2) 0 rgba(255,225,160,.3); }
.wbtn svg { width:62%; height:62%; display:block; }
.wbtn:active { transform:scale(.94); }
.wbtn.undo { border-radius:calc(var(--u)*16); }
.wbtn.undo.off { filter:saturate(.35) brightness(.75); }
.banner { position:absolute; left:0; right:0; top:46%; z-index:70; display:flex; justify-content:center; pointer-events:auto; cursor:pointer; animation:bannerin .35s cubic-bezier(.2,1.3,.4,1) both; transition:opacity .45s; }
.banner.out { opacity:0; }
.banner span { padding:calc(var(--u)*20) calc(var(--u)*70); font-family:'Fraunces',Georgia,serif; font-weight:800; font-size:calc(var(--u)*44); letter-spacing:.02em; color:#ffe9b8; text-shadow:0 calc(var(--u)*2) 0 #2a1507;
  background:linear-gradient(180deg,#8a5a2b,#4b2c12); border-top:calc(var(--u)*4) solid #e3b866; border-bottom:calc(var(--u)*4) solid #e3b866; width:100%; text-align:center;
  box-shadow:0 calc(var(--u)*8) calc(var(--u)*24) rgba(0,0,0,.65), 0 0 calc(var(--u)*40) rgba(255,200,110,.35); }
@keyframes bannerin { from { transform:translateX(-12%) scaleY(.4); opacity:0 } to { transform:none; opacity:1 } }
.turn-text.bold { font-weight:800; font-size:calc(var(--u)*38); letter-spacing:.03em; color:#ffeec4; text-shadow:0 calc(var(--u)*2) 0 #2a1507, 0 0 calc(var(--u)*14) rgba(255,200,110,.5); }

.banner small { display:block; margin-top:calc(var(--u)*6); font-size:calc(var(--u)*22); font-weight:600; font-style:italic; color:#f0cf8c; letter-spacing:.04em; }
.banner span { display:flex; flex-direction:column; align-items:center; gap:calc(var(--u)*6); }
.banner small { font-size:calc(var(--u)*24); font-weight:600; font-style:italic; color:#f1d49a; letter-spacing:.04em; }
.turn-text.bold { width:auto; }
.wbtn:disabled { cursor:default; pointer-events:none; }
.game-title { font-family:'Fraunces',Georgia,serif; font-weight:600; color:#f6e7c4; letter-spacing:.01em; text-shadow:0 calc(var(--u)*2) calc(var(--u)*8) rgba(0,0,10,.85), 0 0 calc(var(--u)*18) rgba(255,220,150,.25); }

/* Loved Ones inside the stone frame */
.loved-title { text-shadow:0 calc(var(--u)*3) calc(var(--u)*10) rgba(0,0,10,.9), 0 0 calc(var(--u)*28) rgba(255,210,150,.55) !important; }
.loved-scroll { scrollbar-width:none; }
.loved-scroll::-webkit-scrollbar { display:none; }
.loved-scroll .loved-grid { --d:270; min-height:100%; box-sizing:border-box; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:space-evenly; justify-items:center; align-items:center; gap:calc(var(--u)*24) calc(var(--u)*10); padding:calc(var(--u)*20) calc(var(--u)*10) calc(var(--u)*70); }
.loved-scroll .loved-grid[data-n="1"] { grid-template-columns:minmax(0,1fr); }
.loved-scroll .med-ring { width:calc(var(--u)*var(--d)); height:calc(var(--u)*var(--d)); border:calc(var(--u)*7) solid #e3b866; font-family:'Fraunces',Georgia,serif; font-size:calc(var(--u)*var(--d)*.5); font-weight:700; color:#fff4d6; display:flex; align-items:center; justify-content:center; box-shadow:0 0 calc(var(--u)*30) rgba(255,200,110,.65), 0 0 0 calc(var(--u)*4) #4b2c12; }
.loved-scroll .medallion { width:100%; min-width:0; }
.loved-scroll .med-name { box-sizing:border-box; width:calc(var(--u)*var(--d)*1.3); max-width:100%; height:calc(var(--u)*var(--d)*.4); display:flex; align-items:center; justify-content:center; font-size:calc(var(--u)*var(--d)*.16); line-height:1.05; padding:calc(var(--u)*4) calc(var(--u)*8); background:linear-gradient(180deg,#8a5a2b,#4b2c12); border:calc(var(--u)*3) solid #d9a95a; border-radius:calc(var(--u)*12); box-shadow:0 calc(var(--u)*3) calc(var(--u)*6) rgba(0,0,0,.6); overflow-wrap:anywhere; white-space:normal; text-align:center; }
.loved-scroll .loved-empty { font-size:calc(var(--u)*40); padding-top:calc(var(--u)*140); }

.game-label { font-family:'Fraunces',Georgia,serif; font-weight:700; color:#3b2210; text-shadow:0 1px 0 rgba(255,235,190,.6); }

.kboard { background:conic-gradient(#8a5a33 0 25%, #f0d3a2 0 50%, #8a5a33 0 75%, #f0d3a2 0) 0 0/20% 20%; box-shadow:0 0 0 calc(var(--u)*3) #3a1c0b, inset 0 0 calc(var(--u)*14) rgba(0,0,0,.35); }
.kb-lbl { color:#f1d9a0; font-family:'Fraunces',Georgia,serif; font-weight:700; text-align:center; z-index:3; }
.cboard { background:conic-gradient(#8a5a33 0 25%, #f0d3a2 0 50%, #8a5a33 0 75%, #f0d3a2 0) 0 0/25% 25%; box-shadow:0 0 0 calc(var(--u)*3) #3a1c0b, inset 0 0 calc(var(--u)*14) rgba(0,0,0,.35); }

.stat-title { font-family:'Fraunces',Georgia,serif; font-weight:700; color:#fff1d0; text-shadow:0 1px 3px #000b; display:flex; align-items:center; justify-content:center; text-align:center; }
.stat-lab, .stat-rl, .stat-sub, .stat-badge, .stat-num { display:flex; align-items:center; justify-content:center; text-align:center; font-family:'Fraunces',Georgia,serif; font-weight:700; text-shadow:0 1px 3px #000b; }
.stat-lab, .stat-rl { color:#fff1d0; } .stat-sub { color:#f1d9a0; } .stat-badge { color:#f1d9a0; }
.stat-num { color:#fff4cf; text-shadow:0 0 calc(var(--u)*10) rgba(255,179,71,.7), 0 1px 3px #000b; }
.stat-num.best { justify-content:flex-start; padding-left:calc(var(--u)*14); }
.stat-row { display:flex; align-items:center; font-weight:700; color:#ffecc0; text-shadow:0 0 calc(var(--u)*8) rgba(255,179,71,.45), 0 1px 2px #000a; }

.stone-lab { display:flex; align-items:center; justify-content:center; text-align:center; font-family:'Fraunces',Georgia,serif; font-weight:700; color:#5a3f22; text-shadow:0 1px 0 #fff8, 0 -1px 0 #0003; pointer-events:none; }

/* ============ Step 2: Settings gear, Privacy link, Settings & Privacy sheets ============ */
.gear-btn { position:absolute; z-index:7; background:none; border:0; padding:0; cursor:pointer; filter:drop-shadow(0 0 calc(var(--u)*8) rgba(255,200,110,.55)) drop-shadow(0 calc(var(--u)*3) calc(var(--u)*5) rgba(0,0,0,.6)); }
.gear-btn svg { width:100%; height:100%; display:block; }
.gear-btn:active { transform:scale(.94); }
.privacy-link { position:absolute; z-index:6; border:1px solid rgba(227,184,102,.7); border-radius:999px; background:rgba(10,8,20,.62); color:#ffe9b8; font-family:'Fraunces',Georgia,serif; font-weight:600; cursor:pointer; padding:0; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.privacy-link:active { transform:scale(.97); }
.sheet { position:absolute; z-index:6; overflow-y:auto; -webkit-overflow-scrolling:touch; box-sizing:border-box; padding:18px 16px 26px; border-radius:18px;
  background:rgba(8,10,28,.74); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(227,184,102,.55);
  color:#fff1d0; font-family:'Fraunces',Georgia,serif; font-size:17px; line-height:1.42; }
.sheet h3 { font-size:22px; margin:2px 0 10px; color:#ffe3a3; font-weight:600; }
.sheet p { margin:0 0 12px; }
.sheet .swarn { color:#ffd9a0; font-style:italic; }
.sheet .shint { font-size:15px; color:#e8d6ae; margin-top:-6px; }
.sheet .serr { color:#ffb4a2; font-weight:600; min-height:1em; }
.sheet .snote { font-size:14.5px; line-height:1.4; color:#d8c7a2; border-top:1px solid rgba(227,184,102,.35); margin-top:16px; padding-top:12px; }
.sfield { display:block; margin:0 0 12px; }
.slabel { display:block; font-weight:600; color:#ffe3a3; font-size:17px; margin:4px 0 4px; }
.sinput { display:block; width:100%; box-sizing:border-box; min-height:52px; font-size:18px; padding:12px 14px; border-radius:12px; border:2px solid #c99a4c; background:#fff8e7; color:#2d1a08; font-family:inherit; }
.sinput:focus { outline:3px solid #ffd27a; outline-offset:1px; }
.sinput:disabled { opacity:.55; }
.scheck { display:flex; align-items:center; gap:10px; min-height:44px; font-size:16px; margin:-4px 0 6px; }
.scheck input { width:24px; height:24px; accent-color:#c99a4c; }
.sbtn { display:block; width:100%; min-height:54px; margin:10px 0 0; padding:12px 16px; font-size:18px; font-weight:700; font-family:inherit; color:#fff4d6; cursor:pointer;
  background:linear-gradient(180deg,#9a6430,#5e3716); border:2px solid #d7a65a; border-radius:14px; box-shadow:0 3px 0 #2e1a09; }
.sbtn.secondary { color:#5e3716; background:linear-gradient(180deg,#fff4d6,#ead3a0); box-shadow:0 3px 0 #b08a45; }
.sbtn.danger { background:linear-gradient(180deg,#a8402e,#6e2216); border-color:#e59a7d; }
.sbtn.small { min-height:48px; font-size:16px; margin:0; }
.sbtn:active { transform:translateY(2px); box-shadow:none; }
.sbtn:disabled { opacity:.5; cursor:default; }
.sbtn.slink { background:none; border:0; box-shadow:none; color:#ffd27a; text-decoration:underline; font-weight:600; font-size:17px; min-height:48px; }
.sbtn.slink.danger-link { color:#ffb4a2; }
.crow { display:flex; align-items:center; gap:12px; width:100%; min-height:68px; margin:0 0 8px; padding:8px 10px; box-sizing:border-box; text-align:left; cursor:pointer;
  background:rgba(255,240,210,.08); border:1px solid rgba(227,184,102,.35); border-radius:14px; color:#fff1d0; font-family:inherit; }
.cdot, .pprev { flex:0 0 auto; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:24px; color:#fff7e2;
  background-size:cover; background-position:center; border:3px solid #e3b866; box-sizing:border-box; }
.pprev { width:84px; height:84px; font-size:38px; }
.ctext { flex:1 1 auto; display:flex; flex-direction:column; min-width:0; }
.cname { font-size:18px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cnum { font-size:15px; color:#d8c7a2; }
.carrow { font-size:28px; color:#e3b866; }
.prow { display:flex; align-items:center; gap:14px; margin:0 0 12px; }
.pbtns { flex:1 1 auto; display:flex; flex-direction:column; gap:8px; }
.swatches { display:flex; flex-wrap:wrap; gap:10px; margin:2px 0 8px; }
.swatch { width:44px; height:44px; border-radius:50%; border:3px solid rgba(255,255,255,.35); cursor:pointer; padding:0; }
.swatch.on { border-color:#fff4d6; box-shadow:0 0 0 3px #c99a4c; }
.plist { margin:0; padding-left:26px; }
.slist { margin:-4px 0 12px; padding-left:24px; }
.sheet h3.sgap { margin-top:22px; padding-top:14px; border-top:1px solid rgba(227,184,102,.35); }
.slist li { margin:0 0 4px; }
.plist li { margin:0 0 12px; padding-left:4px; }
.plist li::marker { color:#ffd27a; font-weight:700; }
.fade-note { position:absolute; left:50%; top:max(14px, env(safe-area-inset-top)); transform:translateX(-50%); z-index:95; width:min(92%,420px); padding:14px 18px; border-radius:16px; cursor:pointer;
  background:rgba(40,24,10,.94); color:#ffe9c0; border:1px solid #c99a4c; font-family:'Fraunces',Georgia,serif; font-size:16px; line-height:1.35; text-align:center; transition:opacity .5s; animation:fadein .4s ease; }
.fade-note.out { opacity:0; }

/* ============ Step 4: Hidden Comets words (added by the app, never painted) ============ */
.carved-sign { font-family:'Fraunces',Georgia,serif; font-weight:700; letter-spacing:.04em; color:#f3d595; text-shadow:0 calc(var(--u)*3) 0 #2a1507, 0 0 calc(var(--u)*12) rgba(255,200,110,.45); }
.lantern-lab { font-family:'Fraunces',Georgia,serif; font-weight:700; color:#4a2a0e; text-shadow:0 1px 0 rgba(255,240,200,.7); }
.mscell.comet { background:radial-gradient(circle at 60% 40%, #2a3f86 0%, #101a44 70%, #0a1030 100%) !important; box-shadow:inset 0 0 calc(var(--u)*6) rgba(140,180,255,.55); }
.hot.navhot::before { content:''; position:absolute; inset:-8px -4px; }   /* painted Home/Back signs: easier to tap */

/* ============ Steady screen: stray touches never drag, zoom, bounce, select or open menus ============ */
* { -webkit-touch-callout:none; }
.scr { touch-action:none; }                                   /* no dragging or pinching on any screen */
.sheet, .loved-scroll { touch-action:pan-y; }                  /* except scrolling the Settings / Privacy panels and Loved Ones */
body.zoomable .scr.active, body.zoomable .scr.active .sheet { touch-action:pan-x pan-y pinch-zoom; }   /* Settings / Privacy: two-finger zoom */
input, textarea { user-select:text; -webkit-user-select:text; -webkit-touch-callout:default; touch-action:manipulation; }
.plink { color:#ffd27a; text-decoration:underline; }

/* ============ "Turn your phone upright" card (phones turned sideways), in the garden's own style ============ */
.upright-card { position:fixed; inset:0; z-index:500; display:none; align-items:center; justify-content:center; padding:16px; overflow:hidden; background:#05060f; }
.upright-card.show { display:flex; }
.upright-bg { position:absolute; inset:-4%; background-size:cover; background-position:center 62%; filter:blur(2.5px) brightness(.82) saturate(1.15); }
.upright-card::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%, rgba(5,6,18,.05) 0%, rgba(5,6,18,.55) 100%); pointer-events:none; }
.upright-panel { position:relative; z-index:1; display:flex; align-items:center; gap:22px; max-width:560px; padding:18px 26px; border-radius:22px;
  background:rgba(8,10,28,.58); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(227,184,102,.6);
  box-shadow:0 0 40px rgba(255,190,100,.22), 0 14px 40px rgba(0,0,0,.55); text-align:left; }
.upright-phone { width:84px; height:84px; flex:0 0 auto; filter:drop-shadow(0 0 12px rgba(255,200,110,.55)); }
.upright-turn { transform-origin:32px 30px; animation:tt-rotate 2.6s ease-in-out infinite; }
.upright-title { font-family:'Caveat',cursive; font-weight:700; font-size:40px; line-height:1.05; color:#fff1d0; text-shadow:0 0 22px rgba(255,210,150,.6); }
.upright-sub { font-family:'Fraunces',Georgia,serif; font-size:16px; line-height:1.45; color:#ecdcb6; }
.upright-words { display:flex; flex-direction:column; gap:6px; }
@keyframes tt-rotate { 0%, 22% { transform:rotate(-90deg); } 58%, 100% { transform:rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .upright-turn { animation:none; } }

/* ---- Maker's mark (Home corner seal + Privacy page signature) ---- */
.maker-seal { position:absolute; z-index:5; opacity:.55; pointer-events:none; filter:drop-shadow(0 0 calc(var(--u)*6) rgba(255,200,110,.5)); }
.maker-seal svg, .maker-big svg, .maker-trail svg { width:100%; height:100%; display:block; }
.maker { display:flex; align-items:center; justify-content:center; gap:16px; margin:22px 0 4px; padding-top:18px; border-top:1px solid rgba(227,184,102,.35); }
.maker-big { width:92px; height:92px; flex:none; filter:drop-shadow(0 0 8px rgba(255,200,110,.45)); }
.maker-sig { color:#ffe3a3; line-height:1.05; }
.maker-by { font-family:'Caveat',cursive; font-size:22px; }
.maker-rdg { font-family:'Caveat',cursive; font-size:34px; font-weight:700; }
.maker-trail { width:96px; height:24px; margin-top:-4px; }
.maker-copy { font-size:13px; color:#e8d6ae; margin-top:6px; }

/* ---- "Best on your phone" welcome card (laptops and desktop computers only), same style as the upright card ---- */
.desk-card { position:fixed; inset:0; z-index:490; display:flex; align-items:center; justify-content:center; padding:24px; overflow:hidden; background:#05060f; }
.desk-card::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%, rgba(5,6,18,.05) 0%, rgba(5,6,18,.6) 100%); pointer-events:none; }
.desk-panel { position:relative; z-index:1; display:flex; align-items:center; gap:30px; max-width:680px; padding:28px 32px; border-radius:24px;
  background:rgba(8,10,28,.62); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(227,184,102,.6);
  box-shadow:0 0 40px rgba(255,190,100,.22), 0 14px 40px rgba(0,0,0,.55); text-align:left; }
.desk-qr { width:190px; height:190px; flex:0 0 auto; padding:6px; border-radius:16px; background:#fff6e0; box-shadow:0 0 0 2px #d9a95a, 0 0 26px rgba(255,200,110,.45); }
.desk-qr svg { width:100%; height:100%; display:block; border-radius:10px; }
.desk-words { display:flex; flex-direction:column; gap:10px; }
.desk-addr { font-family:'Fraunces',Georgia,serif; font-size:14px; color:#d8c7a2; }
.desk-btn { align-self:flex-start; margin-top:6px; padding:10px 20px; border-radius:999px; cursor:pointer; font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:16px;
  color:#ffe9b8; background:rgba(10,8,20,.55); border:1px solid rgba(227,184,102,.75); }
.desk-btn:hover, .desk-btn:focus-visible { background:rgba(60,40,15,.7); outline:none; box-shadow:0 0 0 2px rgba(255,210,140,.6); }
@media (max-width: 620px) { .desk-panel { flex-direction:column; text-align:center; } .desk-btn { align-self:center; } }

/* ---- Bubble Pop: gold star on a completed level's plaque ---- */
.bub-star { position:absolute; z-index:6; pointer-events:none; opacity:0; transform:scale(.6); transition:opacity .3s, transform .3s; filter:drop-shadow(0 0 calc(var(--u)*10) rgba(255,210,90,.85)); }
.bub-star.on { opacity:1; transform:scale(1); }
.bub-star svg { width:100%; height:100%; display:block; }

/* ---- "What's new" list inside the update card ---- */
.wn-box { text-align:left; margin:2px 0 10px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.55); border:1px solid rgba(201,154,76,.55);
  max-height:40vh; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; }   /* a long list scrolls by finger inside the card */
.wn-title { font-weight:700; font-size:14px; color:#3a2410; margin-bottom:4px; }
.wn-date { font-weight:700; font-size:13px; color:#7a5220; margin:8px 0 2px; }
.wn-list { margin:0; padding-left:20px; font-size:14px; line-height:1.38; color:#4a3218; }
.wn-list li { margin:0 0 5px; }

/* ---- "App update", compact, at the top of every Settings page ---- */
.supd { margin:0 0 14px; padding:10px 12px; border-radius:14px; background:rgba(255,240,210,.06); border:1px solid rgba(227,184,102,.35); }
.supd-ok { text-align:center; font-size:15px; color:#cdbb92; }
.supd.ready { border-color:rgba(255,210,120,.8); box-shadow:0 0 14px rgba(255,200,110,.25); }
.supd-title { font-weight:700; font-size:17px; color:#ffe3a3; margin:0 0 2px; }
.supd .sbtn.small { margin-top:8px; }
.supd-row { display:flex; gap:8px; }
.supd-row .sbtn { flex:1 1 0; }
.supd .wn-box { margin:10px 0 0; background:rgba(255,240,210,.08); border-color:rgba(227,184,102,.45); max-height:none; overflow:visible; }
.supd .wn-title { color:#ffe3a3; }
.supd .wn-date { color:#e8c27a; }
.supd .wn-list { color:#f3e3bd; }

.supd-line { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:15px; color:#ffe3a3; }
.supd-line .sbtn.small { width:auto; margin:0; padding:6px 16px; min-height:40px; }
/* ---- "Update" pill below the top-right corner button (while a new version waits) ---- */
.upd-badge { position:absolute; z-index:8; padding:4px 0; border:0; background:none; cursor:pointer; min-height:44px; display:flex; align-items:center; }
.upd-badge[hidden] { display:none; }
.upd-badge span { display:flex; align-items:center; gap:3px; padding:4px 10px 4px 6px; border-radius:999px; font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:13px; color:#3a2208;
  background:radial-gradient(circle at 30% 25%,#fff3c4,#f2c14e 60%,#d29a2a); border:1.5px solid #fff1c8; box-shadow:0 0 10px rgba(255,200,90,.9), 0 2px 4px rgba(0,0,0,.6);
  animation:upd-glow 2.4s ease-in-out infinite; }
.upd-badge svg { width:15px; height:15px; display:block; }
@keyframes upd-glow { 0%,100% { box-shadow:0 0 6px rgba(255,200,90,.6), 0 2px 4px rgba(0,0,0,.6); } 50% { box-shadow:0 0 16px rgba(255,210,110,1), 0 2px 4px rgba(0,0,0,.6); } }
@media (prefers-reduced-motion: reduce) { .upd-badge span { animation:none; } }