/* The SECRET GARDEN walk-through invitation (theme secret-garden, 2/10; views/secret-garden.ejs, public/js/secret-garden.js).
   The static demo's styles (secret-garden/site/index.html) + the wedding hall's app-port additions and Samsung layer, in sage. */
:root{--sage:#6f7d5c;--sage-d:#4d5a3e;--blush:#e8c9c1;--cream:#f7f3ea;--ink:#3c4430}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#eef0e6;overflow:hidden;color:var(--ink);font-family:'Cormorant Garamond',Georgia,serif}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.fx{position:fixed;inset:0;pointer-events:none}
#vig{background:radial-gradient(ellipse at 50% 46%,transparent 58%,rgba(40,50,25,.28) 100%)}
#top{position:fixed;top:0;left:0;right:0;padding:max(14px,env(safe-area-inset-top)) 16px 34px;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;background:linear-gradient(rgba(247,243,234,.85),rgba(247,243,234,0));transition:opacity .6s}
#names{font-family:var(--gs,'Great Vibes'),cursive;font-style:var(--gst,normal);font-size:calc(34px*var(--gk,1));color:var(--sage-d);line-height:1;text-align:center}
#names small{display:block;font-family:var(--gc,'Cinzel'),serif;font-style:normal;font-size:calc(16px*var(--gck,1));font-weight:var(--gcw,600);letter-spacing:.1em;color:var(--sage);margin-top:8px;text-transform:var(--gct,none)}
.pill{pointer-events:auto;border:1px solid rgba(111,125,92,.55);background:rgba(247,243,234,.8);color:var(--sage-d);font:500 14px 'Cormorant Garamond',serif;letter-spacing:.06em;padding:8px 14px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer}
#bottom{position:fixed;left:0;right:0;bottom:0;padding:40px 16px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;transition:opacity .6s;background:linear-gradient(rgba(247,243,234,0),rgba(247,243,234,.5))}
#hint{font-size:16px;letter-spacing:.06em;color:#f7f3ea;background:rgba(30,38,24,.55);padding:7px 16px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .6s;text-align:center}
#walk{pointer-events:auto;width:54px;height:54px;border-radius:50%;border:1px solid rgba(111,125,92,.6);background:rgba(247,243,234,.85);color:var(--sage-d);display:flex;align-items:center;justify-content:center;cursor:pointer;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
#bar{width:min(220px,60vw);height:2px;background:rgba(111,125,92,.22);border-radius:2px;overflow:hidden}
#bar i{display:block;height:100%;width:0;background:var(--sage)}
#focus{position:fixed;left:0;right:0;bottom:0;padding:40px 16px max(22px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;pointer-events:none;transition:opacity .5s;background:linear-gradient(rgba(247,243,234,0),rgba(247,243,234,.7))}
#focus.on{opacity:1}
#focus.on .pill{pointer-events:auto}
#cap{font-style:italic;font-size:22px;color:#f7f3ea;background:rgba(30,38,24,.55);padding:5px 16px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#load{position:fixed;inset:0;background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity 1.2s;z-index:5}
#load h1{margin:0;font:var(--gst,normal) 400 calc(56px*var(--gk,1)) var(--gs,'Great Vibes'),cursive;color:var(--sage-d)}
#load .dear{font:var(--gcw,500) calc(15px*var(--gck,1)) var(--gc,'Cinzel'),serif;letter-spacing:.12em;color:var(--sage);text-align:center;padding:0 20px;text-transform:var(--gct,none)}
#load p{margin:0;letter-spacing:.3em;font-size:13px;color:var(--sage)}
.fonts-pending #load h1,.fonts-pending #load .dear,.fonts-pending #names{visibility:hidden}
#room{position:fixed;inset:0;z-index:3;opacity:0;pointer-events:none;transition:opacity .35s;background:#1f2618}
#room.on{opacity:1;pointer-events:auto}
#room video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#roomScroll{position:absolute;left:0;right:0;bottom:0;top:9vh;z-index:5;overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateY(105%);transition:transform .55s cubic-bezier(.2,.8,.2,1);border-radius:22px 22px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.35)}
#roomScroll.on{transform:none}
#roomScroll .sheet{min-height:100%;border-radius:22px 22px 0 0;padding-top:0}
#roomScroll .block{display:none;border-top:0;margin-top:0;padding-top:8px}
#roomScroll .block.show{display:block}
#pClose{order:99;position:sticky;right:0;flex:none;z-index:3;width:34px;height:34px;margin-left:6px;box-shadow:-10px 0 10px rgba(247,243,234,.95);border-radius:50%;border:1px solid rgba(111,125,92,.5);background:#fdfcf7;color:#3c4430;font-size:24px;line-height:1;cursor:pointer}
#cue{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);z-index:4;width:min(320px,84vw);color:#fff8ee;text-align:center;font-size:18px;letter-spacing:.06em;line-height:1.5;padding:22px 26px 20px;border-radius:22px;background:rgba(40,26,12,.38);border:1px solid rgba(255,236,200,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 40px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .9s,transform .9s}
#cue.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#cue b{display:block;font:var(--gst,normal) 400 calc(34px*var(--gk,1)) var(--gs,'Great Vibes'),cursive;letter-spacing:0;color:#ffe9c4;margin-bottom:4px}
#table{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;transition:opacity 1.4s;overflow:hidden;background:#1f2618}
#table.on{opacity:1;pointer-events:auto}
#tblScene{position:absolute;inset:0;transform:scale(1.08);transition:transform 6s ease-out}
#table.on #tblScene{transform:scale(1)}
#tblImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#tblHead{position:absolute;top:calc(max(16px,env(safe-area-inset-top)) + 7vh);left:0;right:0;text-align:center;color:#fff3df;text-shadow:0 2px 14px rgba(0,0,0,.6);pointer-events:none}
#tblHead .tn{font:var(--gst,normal) 400 calc(44px*var(--gk,1)) var(--gs,'Great Vibes'),cursive;line-height:1.1}
#tblHead .td{font:var(--gcw,600) calc(13px*var(--gck,1)) var(--gc,'Cinzel'),serif;letter-spacing:.14em;margin-top:4px;text-transform:var(--gct,none)}
#hots{position:absolute;inset:0}
.hot{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;opacity:0;transition:opacity .8s}
#table.on .hot{opacity:1}
.hot .tag{display:none}
.hot{width:64px;height:64px;justify-content:center}
.hot .ring{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,243,214,.9);background:rgba(236,244,220,.22);box-shadow:0 0 0 0 rgba(236,244,220,.7);animation:pulse 2.2s ease-out infinite}
.hot .tag{font:var(--gcu,600) calc(11px*var(--gck,1)) var(--gc,'Cinzel'),serif;letter-spacing:.1em;color:#2f3826;background:rgba(255,250,240,.92);padding:4px 9px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.hot.seen .ring{animation:none;background:rgba(150,165,128,.55)}
.hot.big .ring{width:38px;height:38px;border:2.5px solid #eef4df;background:rgba(226,238,206,.35);animation:pulseBig 1.8s ease-out infinite}
@keyframes pulseBig{0%{box-shadow:0 0 0 0 rgba(220,236,200,.9),0 0 18px 4px rgba(220,236,200,.55)}70%{box-shadow:0 0 0 24px rgba(220,236,200,0),0 0 18px 4px rgba(220,236,200,.55)}100%{box-shadow:0 0 0 0 rgba(220,236,200,0),0 0 18px 4px rgba(220,236,200,.55)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(236,244,220,.7)}70%{box-shadow:0 0 0 16px rgba(236,244,220,0)}100%{box-shadow:0 0 0 0 rgba(236,244,220,0)}}
#tblHint{position:absolute;left:50%;bottom:max(26px,env(safe-area-inset-bottom));transform:translateX(-50%);color:#fff6e6;font-size:17px;letter-spacing:.06em;background:rgba(30,20,10,.45);padding:7px 16px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .8s;white-space:nowrap}
#room:not(.film) #skip{opacity:0;pointer-events:none}
#pull{position:absolute;left:50%;top:10px;transform:translate(-50%,-60px);font:var(--gcu,600) calc(12px*var(--gck,1)) var(--gc,'Cinzel'),serif;letter-spacing:.1em;color:#2f3826;background:rgba(255,250,240,.95);padding:8px 14px;border-radius:999px;transition:transform .2s,opacity .2s;opacity:0;pointer-events:none;z-index:4}
#toast{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font:var(--gcu,600) calc(13px*var(--gck,1)) var(--gc,'Cinzel'),serif;letter-spacing:.1em;color:#2f3826;background:rgba(255,250,240,.95);padding:9px 16px;border-radius:999px;opacity:0;transition:opacity .4s;pointer-events:none}
#toast.on{opacity:1}
#roomScroll.on{opacity:1}
#room .spacer{height:100vh;display:flex;align-items:center;justify-content:center;padding:0 24px}
#room .cue{color:#fff8ee;text-align:center;font-size:18px;letter-spacing:.06em;line-height:1.5;padding:22px 26px 16px;border-radius:22px;background:rgba(40,26,12,.38);border:1px solid rgba(255,236,200,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 40px rgba(0,0,0,.25)}
#room .cue b{display:block;font:var(--gst,normal) 400 calc(34px*var(--gk,1)) var(--gs,'Great Vibes'),cursive;letter-spacing:0;color:#ffe9c4;margin-bottom:4px}
#room .cue svg{animation:bob 2.4s ease-in-out infinite;margin-top:6px}
#room .sheet{background:rgba(247,243,234,.95);color:var(--card-ink);border-radius:22px 22px 0 0;padding:30px 22px max(40px,env(safe-area-inset-bottom));text-align:center;min-height:100vh;box-shadow:0 -10px 40px rgba(0,0,0,.3)}
#room .sc{font:var(--gst,normal) 400 calc(48px*var(--gk,1)) var(--gs,'Great Vibes'),cursive;color:#6f7d5c;line-height:1.15;margin:6px 0}
#room .sm{letter-spacing:.2em;font-size:12px;text-transform:uppercase;color:#5d6a4c}
#room .big{font:var(--gcw,600) calc(19px*var(--gck,1)) var(--gc,'Cinzel'),serif;margin:16px 0 6px;color:#3c4430;text-transform:var(--gct,none)}
#room .block{margin:30px auto 0;max-width:420px;border-top:1px solid rgba(150,165,128,.5);padding-top:24px}
#room h3{font:var(--gst,normal) 400 calc(34px*var(--gk,1)) var(--gs,'Great Vibes'),cursive;color:#6f7d5c;margin:0 0 10px}
#room p b{color:#3c4430}
#room p{font-size:18px;line-height:1.5;margin:0 0 12px;color:#2f3826}
#room p.soft{font-style:italic;color:#5d6a4c}
#room .tl{list-style:none;padding:0;margin:0;font-size:18px;color:#2f3826}
#room .tl li{display:flex;justify-content:space-between;padding:7px 4px;border-bottom:1px dotted rgba(111,125,92,.35)}
#room .tl b{font:var(--gcw,600) calc(15px*var(--gck,1)) var(--gc,'Cinzel'),serif;color:#4d5a3e;text-transform:var(--gct,none)}
#room .btn{display:inline-block;font:500 16px 'Cormorant Garamond',serif;letter-spacing:.06em;padding:11px 20px;border-radius:999px;border:1px solid #96a580;background:transparent;color:#3c4430;cursor:pointer;text-decoration:none;margin:4px}
#room .btn.primary{background:#6f7d5c;color:#fff8ea;border-color:#6f7d5c}
#room form input:not([type=radio]){display:block;width:100%;margin:8px 0;padding:12px 14px;border:1px solid rgba(111,125,92,.5);border-radius:12px;background:#fdfcf7;font:18px 'Cormorant Garamond',serif;color:#3b2f1c}
#room .choice{display:flex;gap:16px;justify-content:center;margin:10px 0;font-size:18px}
#room .err{color:#a23a2a;font-size:15px;min-height:18px}
#room .thanks{font-size:19px;font-style:italic;color:#3c4430;padding:10px}
#room .count{display:flex;gap:8px;justify-content:center;margin:16px 0 16px}
#room .count .u{min-width:62px;padding:10px 4px 8px;border-radius:12px;background:#fdfcf7;box-shadow:inset 0 0 0 1px rgba(111,125,92,.4),0 3px 10px rgba(90,60,20,.08)}
#room .count .n{display:block;font:var(--gcw,600) calc(26px*var(--gck,1)) var(--gc,'Cinzel'),serif;color:#4d5a3e;line-height:1}
#room .count .l{display:block;font:var(--gcw,600) calc(9px*var(--gck,1)) var(--gc,'Cinzel'),serif;letter-spacing:.14em;color:#6f7d5c;margin-top:5px;text-transform:var(--gct,none)}
#room .count.done{font:var(--gst,normal) 400 calc(34px*var(--gk,1)) var(--gs,'Great Vibes'),cursive;color:#6f7d5c}
#room .map{border-radius:14px;overflow:hidden;border:1px solid rgba(111,125,92,.4);margin:6px 0 12px;height:220px}
#room .map iframe{width:100%;height:100%;border:0}
#room .lbl{display:block;text-align:left;font-size:16px;color:#5d6a4c;margin:10px 0 0}
#room select,#room textarea{display:block;width:100%;margin:6px 0 8px;padding:12px 14px;border:1px solid rgba(111,125,92,.5);border-radius:12px;background:#fdfcf7;font:18px 'Cormorant Garamond',serif;color:#3b2f1c}
#room details{text-align:left;border-bottom:1px dotted rgba(111,125,92,.35);padding:10px 4px}
#room summary{font-size:19px;color:#2f3826;cursor:pointer}
#room details p{margin:8px 0 0;font-size:17px}
#room .seal{width:74px;height:74px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:var(--gst,normal) 400 calc(30px*var(--gk,1)) var(--gs,'Great Vibes'),cursive;color:#6f7d5c;background:radial-gradient(circle at 35% 30%,#fffaf0,#efe3cf 70%);box-shadow:inset 0 0 0 3px #f7efe2,inset 0 0 0 4px rgba(111,125,92,.35),0 4px 12px rgba(90,60,20,.18)}
#room .seal span{font-size:20px;margin:0 1px}
#room .seal.small{width:56px;height:56px;font-size:22px;margin-top:40px}
#room .snav{position:sticky;top:0;z-index:2;display:flex;gap:6px;overflow-x:auto;justify-content:flex-start;padding:10px 4px;margin:0 -22px 18px;background:rgba(247,243,234,.97);border-bottom:1px solid rgba(150,165,128,.35);scrollbar-width:none}
#room .snav::-webkit-scrollbar{display:none}
#room .snav a{flex:none;font:var(--gcu,600) calc(12px*var(--gck,1)) var(--gc,'Cinzel'),serif;letter-spacing:.1em;text-transform:uppercase;color:#3c4430;text-decoration:none;padding:7px 12px;border:1px solid rgba(150,165,128,.5);border-radius:999px}
#room .snav{padding-left:14px;padding-right:14px}
#room .snav a:first-child{margin-left:auto}
#room .snav a:last-child{margin-right:auto}
#room .snav a.on{background:#6f7d5c;color:#fff8ea;border-color:#6f7d5c}
#room h3.h2{font:var(--gst,normal) 400 calc(44px*var(--gk,1)) var(--gs,'Great Vibes'),cursive;margin:0}
#room .flour{width:180px;height:14px;margin:4px auto 14px;background:linear-gradient(#96a580,#96a580) left 50%/70px 1px no-repeat,linear-gradient(#96a580,#96a580) right 50%/70px 1px no-repeat,radial-gradient(circle,#96a580 3px,transparent 3.5px) center/14px 14px no-repeat}
#room h4{font:var(--gst,normal) 400 calc(28px*var(--gk,1)) var(--gs,'Great Vibes'),cursive;color:#4d5a3e;margin:18px 0 6px}
#room .oval{width:230px;height:170px;margin:16px auto 4px;border-radius:50%;padding:7px;background:#fdfcf7;box-shadow:0 0 0 1px rgba(111,125,92,.4),0 6px 18px rgba(90,60,20,.15)}
#room .oval img{width:100%;height:100%;object-fit:cover;border-radius:50%}
#room .miles{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 14px;margin:0 -22px;padding-left:22px;scroll-snap-type:x mandatory}
#room .mile{flex:none;width:132px;scroll-snap-align:start;color:#4d5a3e}
#room .mile .ic{height:34px}
#room .mile .md{font:var(--gcw,600) calc(11px*var(--gck,1)) var(--gc,'Cinzel'),serif;letter-spacing:.1em;text-transform:uppercase}
#room .mile .mt{font-style:italic;font-size:17px;color:#2f3826;margin-bottom:6px}
#room .mile img{width:132px;height:100px;object-fit:cover;border-radius:6px}
#room .mile .mc{font-size:14px;color:#4d5a3e;margin-top:4px;line-height:1.3}
#room .card{margin:18px 0 0;padding:16px 14px 18px;border:1px solid rgba(150,165,128,.45);border-radius:14px;background:#fdfcf7;box-shadow:0 4px 14px rgba(90,60,20,.08)}
#room .card .fr{padding:7px;border-radius:10px;background:#f7f3ea;box-shadow:inset 0 0 0 1px rgba(111,125,92,.35);margin-bottom:12px}
#room .card .fr img{display:block;width:100%;height:180px;object-fit:cover;border-radius:6px}
#room .cap{font:var(--gcw,600) calc(13px*var(--gck,1)) var(--gc,'Cinzel'),serif;letter-spacing:.14em;color:#3c4430}
#room .card h4{margin:6px 0 2px}
#room .addr{font-style:italic;color:#5d6a4c;margin-bottom:8px}
#room .swatch{display:flex;gap:10px;justify-content:center;margin-top:8px}
#room .swatch i{width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 1px rgba(90,60,20,.2)}
#room .row{margin-top:34px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
#room .sheet{background:rgba(247,243,234,.97);color:#3c4430;padding:0 22px max(40px,env(safe-area-inset-bottom));text-align:center}
#room .sm{letter-spacing:.2em;font-size:12px;text-transform:uppercase;color:#5d6a4c}
#room .big{font:var(--gcw,600) calc(19px*var(--gck,1)) var(--gc,'Cinzel'),serif;margin:10px 0 6px;color:#3c4430;text-transform:var(--gct,none)}
#room .block{margin:0 auto;max-width:440px;padding-top:8px}
#room h3{font:var(--gst,normal) 400 calc(34px*var(--gk,1)) var(--gs,'Great Vibes'),cursive;color:#6f7d5c;margin:0 0 10px}
#room p{font-size:18px;line-height:1.5;margin:0 0 12px;color:#2f3826}
#room p.soft{font-style:italic;color:#5d6a4c}
#room .tl{list-style:none;padding:0;margin:14px 0 0;font-size:18px;color:#2f3826}
#room .tl li{display:flex;justify-content:space-between;gap:12px;padding:7px 4px;border-bottom:1px dotted rgba(111,125,92,.35);text-align:right}
#room .tl b{font:var(--gcw,600) calc(15px*var(--gck,1)) var(--gc,'Cinzel'),serif;color:#4d5a3e;text-align:left;text-transform:var(--gct,none)}
#room .btn{display:inline-block;font:500 16px 'Cormorant Garamond',serif;letter-spacing:.06em;padding:11px 20px;border-radius:999px;border:1px solid #96a580;background:transparent;color:#3c4430;cursor:pointer;text-decoration:none;margin:4px}
#room .btn.primary{background:#6f7d5c;color:#f7f3ea;border-color:#6f7d5c}
#room form input:not([type=radio]){display:block;width:100%;margin:8px 0;padding:12px 14px;border:1px solid rgba(111,125,92,.5);border-radius:12px;background:#fdfcf7;font:18px 'Cormorant Garamond',serif;color:#2f3826}
#room .choice{display:flex;gap:16px;justify-content:center;margin:10px 0;font-size:18px}
#room .err{color:#a23a2a;font-size:15px;min-height:18px}
#room .thanks{font-size:19px;font-style:italic;color:#3c4430;padding:10px}
#room .row{margin-top:24px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
#tblHead{left:50%!important;right:auto!important;transform:translateX(-50%);width:max-content;max-width:92vw;padding:10px 22px 12px;border-radius:20px;background:rgba(247,243,234,.78);border:1px solid rgba(150,165,128,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 24px rgba(30,40,20,.18)}
#tblHead .tn,#tblHead .td{color:#2f3826!important;text-shadow:none!important}
#tblHead .tn{font-size:calc(40px*var(--gk,1))!important}
#tblHead .td{font-size:calc(12px*var(--gck,1))!important;color:#4d5a3e!important;text-transform:var(--gct,none)}
#room .oval img{object-position:50% 18%}
#room .mile img{object-position:50% 25%}
#heartTxt{position:absolute;transform:translate(-50%,-50%);text-align:center;pointer-events:none;color:#6f7d5c}
#heartTxt .hn{display:block;font-family:var(--gs,'Great Vibes'),cursive;font-style:var(--gst,normal);line-height:1.02}
#heartTxt .hd{display:block;font-family:var(--gc,'Cinzel'),serif;font-weight:var(--gcw,600);letter-spacing:.08em;margin-top:.2em}
#tMusic{position:absolute;right:14px;top:max(14px,env(safe-area-inset-top));z-index:3;font:var(--gcu,600) calc(12px*var(--gck,1)) var(--gc,'Cinzel'),serif;letter-spacing:.08em;color:#f7f3ea;background:rgba(30,38,24,.45);border:1px solid rgba(230,240,215,.4);padding:8px 13px;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#tMusic.off{opacity:.6;text-decoration:line-through}
#fadeW{position:fixed;inset:0;background:#fff8ec;opacity:0;pointer-events:none;transition:opacity .7s;z-index:4}
.hide{opacity:0!important;pointer-events:none!important}
.hide *{pointer-events:none!important}

/* ---- app port (2/10, as public/css/wedding-hall.css) ---- */
#mute{position:fixed;right:16px;top:calc(max(14px,env(safe-area-inset-top)) + 2px);padding:8px 11px;z-index:2}
#mute.off{opacity:.75}
#top{justify-content:flex-start;padding-top:max(34px,calc(env(safe-area-inset-top) + 22px))}
#names{text-align:left}
#gardenSkip{pointer-events:auto;border:0;font:500 15px 'Cormorant Garamond',serif;letter-spacing:.06em;color:#f7f3ea;background:rgba(30,38,24,.45);padding:5px 14px;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#bar2{width:180px;height:1px;background:rgba(111,125,92,.2)}
#bar2 i{display:block;height:100%;width:0;background:#6f7d5c;transition:width .3s}
#cap[hidden]{display:none}
#focus:not(.on) .pill{pointer-events:none}   /* the hidden "Back to the garden" pill sat over "Skip to the gazebo" (a dead button) */
#nogl{position:fixed;inset:0;z-index:1;background:#eef0e6}
#nogl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#nogl .ng{position:absolute;left:0;right:0;bottom:max(40px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px;text-shadow:0 0 12px #f7f3ea}
#nogl .tn{font:var(--gst,normal) 400 calc(46px*var(--gk,1)) var(--gs,'Great Vibes'),cursive;color:#4d5a3e}
#nogl .td{font:var(--gcw,600) calc(15px*var(--gck,1)) var(--gc,'Cinzel'),serif;letter-spacing:.12em;color:#4d5a3e}
#nogl .pill{font-size:18px;padding:10px 22px}
#room .tl li span{text-align:right;padding-left:12px}
#room .was{font-size:17px;color:#3c4430;background:#fdfcf7;border:1px solid rgba(111,125,92,.35);border-radius:12px;padding:10px 12px}
#room .made{margin-top:26px;font:var(--gcu,600) calc(10px*var(--gck,1)) var(--gc,'Cinzel'),serif;letter-spacing:.16em;color:#8a957a;text-transform:uppercase}
#room button[disabled]{opacity:.6}
#tblHead .tw{font:var(--gcw,600) calc(12px*var(--gck,1)) var(--gc,'Cinzel'),serif;letter-spacing:.14em;color:#4d5a3e;text-transform:uppercase;margin-bottom:2px}
.fonts-pending #tblHead .tn,.fonts-pending #heartTxt{visibility:hidden}
#names{max-width:calc(100vw - 120px);white-space:nowrap}
#load h1,#tblHead .tn,#nogl .tn{max-width:calc(100vw - 32px);margin-left:auto;margin-right:auto;white-space:nowrap}
#tblHead .tn{max-width:calc(92vw - 44px);overflow:hidden}
#heartTxt .hn{white-space:nowrap}
#tMusic{z-index:4}

/* =====================================================================================
   SAMSUNG INTERNET'S DARK MODE (Gary 2/10: "make sure the Samsung browser fixes are in")
   Same method as scroll.css (measured on Gary's phone 21/9): Samsung flips every colour a page DRAWS (light
   backgrounds go dark, dark writing goes light) but keeps pictures' colours. So on Android (html[data-ss], set
   from routes/guest.js samsungSafeFor) the light surfaces are real pictures (themes/secret-garden/assets/ss-*.jpg,
   scripts/make-samsung-safe.js), writing is filled with ink pictures, and lines/rings are pictures shaped by masks.
   The garden itself is WebGL and the table is a picture, so they are untouched. Typing boxes flip to dark
   with light writing (still readable), as on the other light designs.
   ===================================================================================== */
[data-ss] .ssbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none;border-radius:inherit}
[data-ss] #load{background:transparent;isolation:isolate}
[data-ss] #room .sheet{position:relative;isolation:isolate;background:transparent}
[data-ss] #room .snav{background:transparent;isolation:isolate;border-bottom-color:transparent}
/* the garden's light fades top and bottom: the page picture, faded by a mask */
[data-ss] #top,[data-ss] #bottom,[data-ss] #focus{background:none;isolation:isolate}
[data-ss] #top::before,[data-ss] #bottom::before,[data-ss] #focus::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ss-page) center/cover;pointer-events:none}
[data-ss] #top::before{-webkit-mask-image:linear-gradient(#000 35%,transparent);mask-image:linear-gradient(#000 35%,transparent);opacity:.95}
[data-ss] #bottom::before,[data-ss] #focus::before{-webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%);opacity:.75}
/* writing: ink pictures */
[data-ss] :is(#names,#names small,#load h1,#load .dear,#load p,#nogl .tn,#nogl .td,
  #room .sc,#room h3,#room h4,#room .big,#room .cap,#room .count .n,#room .count .l,#room .count.done,#room .mile .md,#room .mile .mt,#room .tl b,#room .seal,
  #room p,#room .tl li span,#room .addr,#room .mile .mc,#room summary,#room .lbl,#room .choice label,#room .was,#room .thanks,#room .made,#room .snav a:not(.on),#room .btn:not(.primary)){
  background-size:cover;background-position:center;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
[data-ss] :is(#names,#names small,#load h1,#load .dear,#load p,#nogl .tn,#nogl .td,#room .sc,#room h3,#room h4,#room .big,#room .cap,#room .count .n,#room .count .l,#room .count.done,#room .mile .md,#room .mile .mt,#room .tl b,#room .seal,#room .snav a:not(.on),#room .btn:not(.primary)){background-image:var(--ss-ink-accent)}
[data-ss] :is(#room p,#room .tl li span,#room .mile .mc,#room summary,#room .choice label,#room .was,#room .thanks){background-image:var(--ss-ink-text)}
[data-ss] :is(#room p.soft,#room .addr,#room .lbl,#room .made){background-image:var(--ss-ink-muted)}
/* script lettering reaches outside its box: room round it so the ink covers every flourish */
[data-ss] :is(#load h1,#room h3,#room h4,#nogl .tn){padding:.15em .35em;margin-left:-.35em;margin-right:-.35em}
/* the garden's hint, caption and skip are light words on dark pills: Samsung's dark mode leaves those as they are */
/* lines, rings and frames: pictures shaped by masks */
[data-ss] :is(#room .card,#room .count .u,#room .btn:not(.primary),#room .snav a,.pill,#walk,#pClose,#room .map,#room .oval,#room .card .fr){position:relative;isolation:isolate;border-color:transparent;background:transparent;box-shadow:none}
[data-ss] #mute{position:fixed}
[data-ss] :is(#room .card,#room .count .u,#room .btn:not(.primary),#room .snav a:not(.on),.pill,#walk,#pClose,#room .map,#room .oval,#room .card .fr)::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:var(--ss-line) center/cover;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
[data-ss] :is(#room .btn:not(.primary),.pill,#walk,#pClose)::before{background-image:var(--ss-ink-accent)}
html[data-ss] #room #pClose.x, html[data-ss] #room #pClose{position:sticky;-webkit-text-fill-color:transparent;background:var(--ss-ink-accent) center/cover;-webkit-background-clip:text;background-clip:text}
[data-ss] :is(.pill,#walk,#pClose)::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--ss-white) center/cover;opacity:.85}
[data-ss] #room .snav a.on{background:var(--ss-button) center/cover;-webkit-text-fill-color:#fff8ea;text-shadow:none}
[data-ss] #room .seal{background:none;box-shadow:none}
[data-ss] #room .flour{background:var(--ss-button) center/cover;
  -webkit-mask:linear-gradient(#000,#000) left 50%/70px 1px no-repeat,linear-gradient(#000,#000) right 50%/70px 1px no-repeat,radial-gradient(circle,#000 3px,transparent 3.5px) center/14px 14px no-repeat;
  mask:linear-gradient(#000,#000) left 50%/70px 1px no-repeat,linear-gradient(#000,#000) right 50%/70px 1px no-repeat,radial-gradient(circle,#000 3px,transparent 3.5px) center/14px 14px no-repeat}
[data-ss] #room .tl li,[data-ss] #room details{border-bottom-color:transparent;background:var(--ss-line) left bottom/100% 1px no-repeat}
[data-ss] #bar,[data-ss] #bar2{background:transparent}
[data-ss] #bar i,[data-ss] #bar2 i{background:var(--ss-button) center/cover}
/* the sage buttons: a real picture of the metal inside, the words in the ink picture (public/js/secret-garden.js) */
[data-ss] :is(#room .btn.primary,#nglGo){position:relative;isolation:isolate;background:transparent;border-color:transparent;overflow:hidden}
[data-ss] .ss-fill{position:absolute;left:-1px;top:-1px;width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;z-index:-1;pointer-events:none;border-radius:inherit}
[data-ss] .ss-ink{background:var(--ss-ink-button) center/cover;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* icons on the light pills: the ink picture shaped like the icon */
[data-ss] :is(#walk,#mute) svg{visibility:hidden}
[data-ss] :is(#walk,#mute) > i.ic{position:absolute;inset:0;background:var(--ss-ink-accent) center/cover;-webkit-mask:var(--ic) center/22px 22px no-repeat;mask:var(--ic) center/22px 22px no-repeat;pointer-events:none}
[data-ss] #walk > i.ic{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E")}
[data-ss] #mute > i.ic{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M16 9a4 4 0 0 1 0 6'/%3E%3Cpath d='M18.5 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E")}
[data-ss] #mute.off > i.ic{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M16 9l5 6M21 9l-5 6'/%3E%3C/svg%3E")}
/* the table's pulsing rings: near-white pictures shaped as rings (a drawn white ring could turn dark) */
[data-ss] .hot .ring{border:0;background:var(--ss-white) center/cover;box-shadow:none;animation:ssPulse 2.2s ease-in-out infinite;
  -webkit-mask:radial-gradient(circle,rgba(0,0,0,.3) 0 58%,#000 62% 70%,transparent 72%);mask:radial-gradient(circle,rgba(0,0,0,.3) 0 58%,#000 62% 70%,transparent 72%)}
[data-ss] .hot.big .ring{animation:ssPulse 1.8s ease-in-out infinite}
[data-ss] .hot.seen .ring{animation:none;background:var(--ss-button) center/cover}
@keyframes ssPulse{50%{transform:scale(1.25);opacity:.75}}
html[data-ss] #room #pClose::after{display:none}   /* its own clipped x would sit under the disc */
html[data-ss] #room #pClose{background-image:var(--ss-ink-accent),var(--ss-page);background-size:cover,cover;-webkit-background-clip:text,padding-box;background-clip:text,padding-box}

[data-ss] :is(#tblHead .tn,#tblHead .td,#tblHead .tw,#heartTxt .hn,#heartTxt .hd){background:var(--ss-ink-accent) center/cover;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
[data-ss] #tblHead{background:transparent;isolation:isolate;border-color:transparent}
[data-ss] #tblHead::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--ss-page) center/cover;opacity:.85}
[data-ss] #heartTxt .hn{padding:.15em .3em}

/* Samsung Internet's dark mode dims every picture (measured 21/9: a real picture to about 71%): give them back their light */
@media (prefers-color-scheme: dark){
  html.samsung #c,html.samsung #tblImg,html.samsung #nogl img,html.samsung #room .card img,html.samsung #room .oval img,html.samsung #room .mile img{filter:brightness(1.3)}
}