/* App-wide overrides on top of the Claude Design export (injected by scripts/pwa-inject.sh). Sections, in order: the worlds' welcome screen and HUD · phones (pages with a 3D stage) · the character creator · the run toggle and top bar · the home and Games lobbies · the home-page look carried to the worlds, the games (cards, back pill, results, loading, HUD) and dialogs · fewer hints · the step counter · the way back · game screens in play (HUD type, countdown and banners, icon tool buttons, touch controls, results lists). */ /* GLB download / upload is turned off for players. */ [data-nav="glb"], label:has(> #glb-file) { display: none !important; } /* ---------- Heritage-world welcome screen ---------- */ #welcome .w-place{align-items:center} #welcome .w-brand{display:flex;align-items:center;gap:12px} #welcome .w-brand img{display:block;width:36px;height:36px;border-radius:9px;border:1px solid rgba(224,169,110,.4)} #welcome .w-back{align-self:flex-start;display:grid;place-items:center;margin:0 0 -8px -2px;padding:2px;color:rgba(247,241,231,.85);transition:color .2s,transform .2s} #welcome .w-back svg{width:24px;height:24px;stroke-width:1.5} #welcome .w-back:hover,#welcome .w-back:focus-visible{color:#e0a96e;transform:translateX(-4px);outline:0} /* One call to action (the guided tour stays in the top menu). The status line shows only while the square loads or if it fails; #enter-tour / #w-status stay in the DOM because the page script uses them. */ #welcome #enter-tour{display:none!important} #welcome .w-meta a,#welcome .w-meta label{display:none} body:has(#enter:not([disabled])) #welcome .w-meta{display:none} /* ---------- Heritage-world HUD (all sizes; body.jh is set by jatra-hud.js) ---------- */ /* --sand is darkened from the export's #8f7b6a (3.6:1 on paper) to 5.4:1, so the small labels it colours read. */ body.jh{--hud-r:6px;--ctl-r:4px;--brass:#b8892f;--sand:#735f4f} body.jh .panel{border-radius:var(--hud-r);background:rgba(247,241,231,.92);box-shadow:0 6px 22px rgba(35,26,20,.12)} body.jh .btn{border-radius:var(--ctl-r)} body.jh :is(.nav button,.jh-menu button,#jh-map,.jh-x,#jump-btn,.x,.dir-item,.mm-tools button):focus-visible{outline:2px solid var(--brass);outline-offset:2px} /* Top menu: icon buttons, tooltips below. Text stays in the DOM at font-size 0. */ body.jh .nav{gap:2px;padding:4px;overflow:visible;align-items:center} body.jh .nav .sep{align-self:stretch;margin:6px 3px} body.jh .jh-ib{appearance:none;border:0;background:none;cursor:pointer;position:relative;box-sizing:border-box;display:inline-grid;place-items:center;grid-auto-flow:column;gap:1px;min-width:36px;height:36px;padding:0 9px;border-radius:var(--ctl-r);font-size:0;color:var(--walnut)} body.jh .nav .jh-ib:hover,body.jh .jh-menu.open>.jh-ib{background:rgba(154,70,48,.09)} body.jh .nav .jh-ib[aria-pressed="true"],body.jh.touring [data-nav="tour"]{background:var(--walnut);color:var(--paper)} /* The page's own hide rules tie with .jh-ib on specificity, so restate them. */ body.jh[data-mode="walk"] [data-nav="walk"],body.jh.no3d :is([data-nav="walk"],[data-nav="tour"],[data-nav="overview"]){display:none} body.jh [data-tip]::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 8px);translate:-50% -2px;z-index:9;padding:5px 8px;border-radius:var(--ctl-r);background:var(--walnut);color:var(--paper);font:500 11.5px/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s,translate .12s} @media (hover:hover){body.jh [data-tip]:hover::after,body.jh [data-tip]:focus-visible::after{opacity:1;translate:-50% 0;transition-delay:.15s}} body.jh .jh-menu.open [data-tip]::after{display:none} /* Dropdowns / popovers (Games menu, view settings). */ body.jh .jh-menu{position:relative;display:flex} body.jh .jh-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:8;min-width:200px;padding:5px;display:flex;flex-direction:column;gap:1px;font-size:13px} body.jh .jh-pop[hidden]{display:none} body.jh .nav .jh-pop button{display:block;padding:9px 11px;border-radius:var(--ctl-r);font-size:13px;font-weight:500;text-align:left} body.jh .nav .jh-pop button:hover,body.jh .nav .jh-pop button:focus-visible{background:rgba(154,70,48,.09);outline-offset:-2px} body.jh .nav .jh-pop .l{display:inline} body.jh .nav .jh-pop .s{display:none} body.jh .nav .jh-pop .jh-all{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 var(--ctl-r) var(--ctl-r);color:var(--brick)} body.jh .jh-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:5px 5px 5px 9px;white-space:nowrap} body.jh .jh-row+.jh-row{border-top:1px solid var(--line)} body.jh .jh-row>span{font-weight:500;color:var(--ink)} body.jh .jh-row kbd{margin-left:4px;font:500 10px "IBM Plex Mono",monospace;color:var(--sand);border:1px solid var(--line);border-radius:3px;padding:0 4px} body.jh .jh-row button{all:unset;cursor:pointer;min-width:92px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--ctl-r);background:#fffaf2;font-size:12px;font-weight:500;text-align:center} body.jh .jh-row button:hover{border-color:var(--brick);color:var(--brick)} body.jh :is(#jh-keys,#jh-info)[aria-pressed="true"]{background:var(--walnut);border-color:var(--walnut);color:var(--paper)} body.jh.touch :is(.jh-kb,.jh-row kbd){display:none} /* Map toggle after the place name, top-left. Only shown in walk mode. */ #jh-map{all:unset;box-sizing:border-box;cursor:pointer;display:none;position:relative;place-items:center;width:30px;height:30px;margin:-7px -7px -7px 2px;align-self:center;border-radius:var(--ctl-r);color:var(--walnut)} body.entered[data-mode="walk"] #jh-map{display:grid} #jh-map:hover{background:rgba(154,70,48,.09)} #jh-map[aria-pressed="true"]{background:var(--walnut);color:var(--paper)} /* Minimap: top-left under the place name, toggled by #jh-map. */ html body.entered #minimap-wrap{left:16px;right:auto;top:72px;bottom:auto} html body.entered #dir.open ~ #minimap-wrap{left:332px} body.jh-map-off #minimap-wrap{display:none!important} body.jh #minimap-wrap .mm-cap{padding-top:5px} /* Keyboard hints: a full strip for a few seconds after entering walk mode, then only "Click to look around". */ body.jh #walk-hint{left:50%;right:auto;bottom:66px;translate:calc(-50% + var(--jh-dx,0px)) 0;gap:12px;padding:7px 12px;font-size:12px;transition:translate .45s cubic-bezier(.2,.7,.2,1)} body.jh.jh-keys-off #walk-hint>span{display:none} body.jh.jh-keys-off #walk-hint{padding:7px 12px} body.jh.jh-keys-off.locked #walk-hint{display:none!important} #grab-prompt{bottom:66px} body.jh:not(.jh-keys-off):not(.touch) #grab-prompt,body.jh.jh-keys-off:not(.locked):not(.touch) #grab-prompt{bottom:112px} body.jh #grab-prompt{translate:calc(-50% + var(--jh-dx,0px)) 8px} body.jh #grab-prompt.show{translate:calc(-50% + var(--jh-dx,0px)) 0} /* Keep the bottom HUD centred in the space the side panels leave. */ @media (min-width:761px){ body.jh:has(#card.open){--jh-dx:-203px} body.jh:has(#dir.open){--jh-dx:158px} body.jh:has(#card.open):has(#dir.open){--jh-dx:-22px} } /* Directory close button; the landmark card hugs its content. */ body.jh #dir .jh-x{all:unset;cursor:pointer;position:absolute;top:12px;right:12px;z-index:1;width:30px;height:30px;display:grid;place-items:center;border-radius:var(--ctl-r);color:var(--walnut)} body.jh #dir .jh-x:hover{background:rgba(154,70,48,.09)} body.jh .dir-head h3{padding-right:40px} body.jh .ph-empty{display:none} @media (min-width:761px){body.jh #card{bottom:auto;max-height:calc(100vh - 88px)}} /* Overview pins: the hovered / selected label sits above its neighbours. */ body.jh .pin:hover,body.jh .pin.hot,body.jh .pin.sel{z-index:2} /* Touch controls: same size as before (the joystick maths depends on it), readable on any ground. */ body.jh #joy,body.jh #jump-btn{z-index:3;background:rgba(28,17,11,.26);border:1.5px solid rgba(247,241,231,.85);box-shadow:0 4px 16px rgba(28,17,11,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} body.jh #joy i{background:var(--paper);box-shadow:0 0 0 1.5px rgba(184,137,47,.75),0 3px 10px rgba(28,17,11,.3)} body.jh #jump-btn{width:68px;height:68px;right:28px;bottom:54px;color:var(--paper);place-items:center} body.jh.touch #jump-btn{display:grid} body.jh #jump-btn:active{background:rgba(154,70,48,.55)} /* Fullscreen is an icon-only button. */ [data-nav="fs"]{display:inline-grid;place-items:center} /* ---------- Mobile only (phones, portrait or landscape) ---------- Scoped to the pages with a 3D stage (worlds and games), so the Leaderboard, Privacy and Contributors keep their own sizes. */ @media (max-width:760px), (pointer:coarse) and (max-height:540px){ /* No fullscreen on mobile. */ [data-nav="fs"]{display:none!important} /* -- Heritage worlds -- */ body:has(#welcome){font-size:12.5px} body:has(#stage) .bar{top:8px;left:8px;right:8px} body:has(#stage) .brand{padding:8px 11px} body:has(#stage) .brand b{font-size:16px} body:has(#stage) .nav button{font-size:11.5px;padding:6px 8px} body:has(#stage) .eyebrow{font-size:11px} body:has(#stage) #w-title{font-size:clamp(30px,7vw,44px)} body:has(#stage) #w-intro{font-size:12.5px} body:has(#stage) .w-inner{gap:12px;padding-bottom:20px} body:has(#stage) .w-actions .btn{padding:10px 14px;font-size:12.5px} body:has(#stage) .w-meta{font-size:11px;gap:12px} body:has(#stage) .w-place{font-size:11px} body:has(#stage) .dir-head h3{font-size:20px} body:has(#stage) .dir-group{font-size:11px} body:has(#stage) .dir-t{font-size:12px} body:has(#stage) .dir-s{font-size:11px} body:has(#stage) .dir-n{font-size:11px} body:has(#stage) #search{padding:7px 10px;font-size:12.5px} body:has(#stage) #card{padding:16px 16px 18px} html body:has(#stage) #card h2{font-size:22px;margin:6px 0 10px} body:has(#stage) .facts dt{font-size:11px} body:has(#stage) .facts dd{font-size:12px} body:has(#stage) .desc{font-size:12.5px} body:has(#stage) .btn{padding:9px 13px;font-size:12px} body:has(#stage) .plan-seg button,body:has(#stage) .plan-n{font-size:11.5px} body:has(#stage) .pin-n{width:20px;height:20px;font-size:10px} body:has(#stage) .pin-l{font-size:11px} body:has(#stage) #hover b{font-size:16px} body:has(#stage) #hover span{font-size:11px} body:has(#stage) #toast{font-size:12px;top:60px} body:has(#stage) #tour-label{font-size:12px} body:has(#stage) #tourbar .t{font-size:11.5px;padding:5px 7px} body:has(#stage) #grab-text{font-size:12px} body:has(#stage) #game-close{font-size:12px} /* Header on one row: the place name gives way to the icon menu. */ html body.jh .bar{flex-direction:row;align-items:center;gap:6px} body.jh .brand{min-width:0;flex:0 1 auto;padding:7px 10px} body.jh .brand b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:15px} body.jh .nav{flex:none;padding:3px;margin-left:auto} body.jh .jh-ib{min-width:32px;height:32px;padding:0 6px} body.jh .nav .sep{margin:5px 2px} body.jh #jh-map{width:28px;height:28px;margin:-6px -6px -6px 2px} /* Walk HUD on mobile: the minimap sits top-left under the header. */ html body.entered #minimap-wrap,html body.entered #dir.open ~ #minimap-wrap{left:8px;right:auto;top:100px;padding:5px} html body.touch #minimap{width:104px} body.jh #toast{top:100px;max-width:calc(100vw - 32px);text-align:center} body:has(#stage) #grab-prompt,body.jh #grab-prompt{bottom:24px} body.touch #grab-prompt,body.jh.touch #grab-prompt{bottom:136px} body.touch #joy{width:100px;height:100px;left:16px;bottom:20px} body.touch #joy i{width:44px;height:44px;margin:-22px 0 0 -22px} body.touch #jump-btn,body.jh.touch #jump-btn{width:64px;height:64px;right:20px;bottom:38px} /* Sheets cover the touch controls. */ body.jh:has(#dir.open) :is(#joy,#jump-btn),body.jh:has(#card.open) :is(#joy,#jump-btn){visibility:hidden} /* -- Games -- */ body:has(#lobby){font-size:12.5px} body:has(#stage) #lobby h1{font-size:30px} body:has(.lapbox) #lobby h1{font-size:32px} body:has(#stage) #lobby h1 small{font-size:18px} body:has(#stage) #lobby-title{font-size:30px!important} body:has(#stage) .lede,body:has(#stage) .how{font-size:12px} body:has(#stage) #mappanel h2{font-size:26px} body:has(#stage) #cp-list li,body:has(#stage) #cp-next{font-size:11.5px} body:has(#stage) #cp-n{font-size:13px} body:has(#stage) #flash{font-size:34px} body:has(#stage) #pos-of2{font-size:17px!important} body:has(#stage) .label{font-size:11px} body:has(#stage) #lobby .btn,body:has(#stage) #results .btn,body:has(#stage) .champ .btn{font-size:12px;padding:9px 13px} body:has(#stage) #lobby .btn.big,body:has(#stage) .btn.big{font-size:13.5px;padding:11px 14px} body:has(#stage) .seg button{font-size:11.5px;padding:6px 5px} body:has(#stage) .rules{font-size:11px} body:has(#stage) #room-code{font-size:20px} body:has(#stage) .lapbox b{font-size:34px} body:has(#stage) #pos-of{font-size:17px} body:has(.lapbox) #timer{font-size:22px;padding:6px 14px} body:has(.team) #timer{font-size:16px} body:has(#stage) #board li{font-size:11.5px;padding:3px 6px} body:has(#stage) #board .lp{font-size:12px} body:has(#stage) .spd{font-size:17px} body:has(#stage) #status{font-size:24px} body:has(#stage) #lapflash{font-size:40px} body:has(#stage) #count{font-size:clamp(80px,18vw,160px)} body:has(#stage) .champ h2{font-size:32px} body:has(#stage) #results h2{font-size:26px} body:has(#stage) #champ-time,body:has(#stage) #champ-laps{font-size:16px} body:has(#stage) .team h4{font-size:18px} body:has(#stage) .team li{font-size:11.5px} body:has(#stage) .ends b{font-size:17px} body:has(#stage) .core b,body:has(#stage) .fb{font-size:19px} body:has(#stage) .tools button{font-size:11.5px;padding:6px 9px} body:has(#stage) .hint{font-size:11px} body:has(#stage) .tag{font-size:11px} body:has(#stage) #touch button{font-size:12px} /* -- Sign-in / account overlay (jatra-auth.js) and public rooms -- */ html .ja-box h2{font-size:24px} html .ja-box p{font-size:12.5px} html .ja-box small{font-size:11px} html .ja-btn{font-size:12.5px;padding:8px 13px} html .ja-chip{font-size:11.5px} html .ja-acct,html .ja-msg{font-size:12px} html .ja-pts{font-size:12.5px} html .jr-who{font-size:12px} html .jr-code{font-size:12.5px} } /* ---------- Character creator (jatra-creator.js) ---------- */ #jc{position:fixed;inset:0;z-index:60;display:grid;grid-template-columns:1fr minmax(380px,460px);background:#1c110b;color:var(--ink,#231a14)} #jc[hidden]{display:none} #jc .jc-i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} #jc .jc-stage{position:relative;min-height:0;background:radial-gradient(ellipse at 50% 70%,#5a3a26 0%,#2a1a10 55%,#1c110b 100%)} #jc canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab} #jc canvas:active{cursor:grabbing} #jc .jc-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;background:rgba(28,17,11,.45);font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,241,231,.7);pointer-events:none;white-space:nowrap} #jc .jc-hint .jc-i{width:14px;height:14px} #jc .jc-panel{position:relative;overflow-y:auto;overscroll-behavior:contain;background:var(--paper,#f7f1e7);padding:24px 24px 0;display:flex;flex-direction:column;gap:16px} #jc .jc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} #jc .jc-head .eyebrow{margin-bottom:8px} #jc h2{margin:0;font-size:32px;line-height:1.05;color:var(--walnut,#3a2619)} #jc .jc-x{all:unset;cursor:pointer;display:grid;place-items:center;flex:none;width:34px;height:34px;margin:-6px -8px 0 0;border-radius:50%;color:var(--sand,#8f7b6a)} #jc .jc-x .jc-i{width:20px;height:20px} #jc .jc-x:hover{color:var(--brick,#9a4630);background:rgba(154,70,48,.08)} #jc .jc-x[hidden]{display:none} /* Opened outside the worlds (Home, Places, Games, Leaderboard: jatra-auth.js adds .jc-solo), the creator brings the base styles the worlds' pages give it. */ #jc.jc-solo{--ink:#231a14;--walnut:#3a2619;--brick:#9a4630;--paper:#f7f1e7;--sand:#8f7b6a;--gold:#c99a3c;--line:rgba(35,26,20,.14);z-index:2147483100;font:400 14px/1.5 "IBM Plex Sans",system-ui,sans-serif} #jc.jc-solo .serif{font-family:"Instrument Serif",Georgia,serif;font-weight:400} #jc.jc-solo .eyebrow{font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--brick)} #jc.jc-solo .btn{all:unset;box-sizing:border-box;cursor:pointer;padding:11px 16px;border:1px solid var(--walnut);border-radius:3px;font-weight:500;font-size:13.5px;text-align:center} #jc.jc-solo .btn:hover{background:rgba(58,38,25,.08)} #jc.jc-solo .btn.primary{background:var(--brick);border-color:var(--brick);color:#fff} #jc.jc-solo .btn.primary:hover{background:#86391f} /* The three characters: a portrait, the name and a one-line blurb. */ #jc .jc-types{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} #jc .jc-types button{all:unset;cursor:pointer;box-sizing:border-box;min-width:0;padding:8px 8px 10px;border:1px solid var(--line,rgba(35,26,20,.14));border-radius:8px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;background:#fffaf2;transition:border-color .15s,background .15s} #jc .jc-types button:hover{border-color:rgba(154,70,48,.45)} #jc .jc-face{display:grid;place-items:center;width:100%;aspect-ratio:1/.8;border-radius:5px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#f3e4cc,#e2cba8);color:var(--walnut,#3a2619)} #jc .jc-face img{width:100%;height:100%;object-fit:cover;display:block} #jc .jc-face .jc-i{width:40%;height:40%} #jc .jc-tt{display:flex;flex-direction:column;gap:2px;min-width:0} #jc .jc-types b{font-weight:600;font-size:14px;color:var(--walnut,#3a2619)} #jc .jc-tt span{font-size:10.5px;line-height:1.3;color:var(--sand,#8f7b6a)} #jc .jc-types button[aria-checked="true"]{border-color:var(--brick,#9a4630);box-shadow:inset 0 0 0 1px var(--brick,#9a4630);background:#fff} #jc .jc-types button[aria-checked="true"] .jc-face{background:radial-gradient(circle at 50% 40%,#f6d9a8,#e0a96e)} #jc .jc-types button:focus-visible,#jc .jc-chip:focus-visible,#jc .jc-x:focus-visible{outline:2px solid var(--gold,#c99a3c);outline-offset:2px} /* Clothing: one row per piece, with its icon (tinted by the chosen colour), name and swatches. */ #jc .jc-sub{display:flex;align-items:center;gap:8px;padding-top:14px;border-top:1px solid var(--line,rgba(35,26,20,.14));font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--sand,#8f7b6a)} #jc .jc-sub .jc-i{width:15px;height:15px} #jc .jc-fields{display:flex;flex-direction:column;gap:4px;margin-top:-6px} #jc .jc-f{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-areas:"ic l" "ic c";column-gap:12px;row-gap:7px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(35,26,20,.07)} #jc .jc-f:last-child{border-bottom:0} #jc .jc-ic{grid-area:ic;align-self:start;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#fffaf2;border:1px solid var(--line,rgba(35,26,20,.14));color:var(--walnut,#3a2619);position:relative} #jc .jc-ic::after{content:"";position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;background:var(--c);border:2px solid var(--paper,#f7f1e7)} #jc .jc-ic[style*="transparent"]::after{display:none} #jc .jc-l{grid-area:l;display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0} #jc .jc-l span{font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--brick,#9a4630)} #jc .jc-l b{font-weight:500;font-size:12.5px;color:var(--walnut,#3a2619);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #jc .jc-chips{grid-area:c;display:flex;flex-wrap:wrap;gap:7px} #jc .jc-chip{all:unset;cursor:pointer;box-sizing:border-box;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--c);border:1px solid rgba(35,26,20,.25);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);transition:transform .12s} #jc .jc-chip:hover{transform:scale(1.08)} #jc .jc-chip .jc-i{width:15px;height:15px;stroke-width:2.6;color:#fff;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.7));opacity:0} #jc .jc-chip[aria-pressed="true"] .jc-i{opacity:1} #jc .jc-chip.none{background:linear-gradient(135deg,transparent 46%,var(--sand,#8f7b6a) 47%,var(--sand,#8f7b6a) 53%,transparent 54%),#fffaf2} #jc .jc-chip.none .jc-i{color:var(--walnut,#3a2619);filter:none} #jc .jc-chip[aria-pressed="true"]{box-shadow:0 0 0 2px var(--paper,#f7f1e7),0 0 0 4px var(--walnut,#3a2619)} #jc .jc-actions{display:flex;gap:10px;margin-top:auto;position:sticky;bottom:0;background:var(--paper,#f7f1e7);padding:12px 0 18px;box-shadow:0 -10px 14px -8px var(--paper,#f7f1e7)} #jc .jc-actions .btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;font-size:13.5px;border-color:var(--walnut,#3a2619);color:var(--walnut,#3a2619)} #jc .jc-actions .btn.primary{flex:1;min-width:0;color:#fff;border-color:var(--brick,#9a4630)} #jc .jc-go{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #welcome .w-char{all:unset;cursor:pointer;align-self:flex-start;font-size:13px;color:rgba(247,241,231,.8);border-bottom:1px solid rgba(247,241,231,.35);padding-bottom:1px} #welcome .w-char[hidden]{display:none} #welcome .w-char:hover,#welcome .w-char:focus-visible{color:#e0a96e;border-color:#e0a96e} /* Narrow, tall screens: preview on top, options below. */ @media (max-width:760px) and (min-height:541px){ #jc{grid-template-columns:1fr;grid-template-rows:36vh 1fr} #jc .jc-panel{padding:16px 16px 0;gap:14px} #jc h2{font-size:24px} #jc .jc-tt span{display:none} #jc .jc-chip{width:32px;height:32px} } /* Short screens (phones in landscape): preview left, a compact panel right with the clothing in two columns. */ @media (max-height:540px){ #jc{grid-template-columns:minmax(200px,34%) 1fr} #jc .jc-hint{bottom:10px;font-size:9.5px;padding:5px 9px} #jc .jc-panel{padding:12px 16px 0;gap:10px} #jc .jc-head .eyebrow{display:none} #jc h2{font-size:21px} #jc .jc-x{width:30px;height:30px;margin:-4px -6px 0 0} #jc .jc-types button{flex-direction:row;padding:5px 8px 5px 5px;gap:8px;text-align:left;border-radius:7px} #jc .jc-face{width:38px;height:38px;flex:none;aspect-ratio:auto;border-radius:5px} #jc .jc-tt span{display:none} #jc .jc-types b{font-size:13px} #jc .jc-sub{display:none} #jc .jc-fields{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:0;margin-top:0;padding-top:4px;border-top:1px solid var(--line,rgba(35,26,20,.14))} #jc .jc-f{grid-template-columns:28px minmax(0,1fr);column-gap:9px;row-gap:5px;padding:7px 0} #jc .jc-ic{width:28px;height:28px;border-radius:7px} #jc .jc-ic .jc-i{width:16px;height:16px} #jc .jc-l span{font-size:9.5px;letter-spacing:.08em} #jc .jc-l b{font-size:11px} #jc .jc-chips{gap:6px} #jc .jc-chip{width:26px;height:26px} #jc .jc-chip .jc-i{width:13px;height:13px} #jc .jc-actions{padding:8px 0 10px} #jc .jc-actions .btn{padding:9px 12px;font-size:12.5px} } /* Run toggle (jatra-hud.js): a pill at the bottom right on desktop, a round button left of Jump on touch. */ body.jh #run-btn{all:unset;box-sizing:border-box;cursor:pointer;position:fixed;z-index:3;right:24px;bottom:24px;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 12px;border-radius:22px;background:rgba(28,17,11,.42);border:1.5px solid rgba(247,241,231,.85);color:var(--paper);font-weight:600;font-size:13px;box-shadow:0 4px 16px rgba(28,17,11,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .15s} body.jh #run-btn kbd{font:500 11px/1 "IBM Plex Mono",monospace;padding:3px 5px;border-radius:3px;border:1px solid rgba(247,241,231,.5);color:rgba(247,241,231,.85)} body.jh #run-btn:hover{background:rgba(28,17,11,.58)} body.jh #run-btn[aria-pressed="true"]{background:var(--brick);border-color:#e0a96e} body.jh #run-btn[aria-pressed="true"] .jh-i{animation:jh-run .5s ease-in-out infinite alternate} body.jh #run-btn:focus-visible{outline:2px solid var(--brass);outline-offset:2px} @keyframes jh-run{to{transform:translateY(-2px) rotate(-6deg)}} body.jh.touch #run-btn{width:60px;height:60px;padding:0;border-radius:50%;justify-content:center;right:110px;bottom:58px} body.jh.touch #run-btn :is(span,kbd){display:none} @media (max-width:760px){ body.jh.touch #run-btn{width:56px;height:56px;right:96px;bottom:42px} body.jh:has(#dir.open) #run-btn,body.jh:has(#card.open) #run-btn{visibility:hidden} } @media (prefers-reduced-motion:reduce){body.jh #run-btn .jh-i{animation:none}} /* Top bar (jatra-hud.js): Home in the left corner; Games and the gear menu in the right corner. */ body.jh .jh-home{pointer-events:auto;display:flex;padding:4px;flex:none} body.jh .jh-home .jh-ib:hover{background:rgba(154,70,48,.09)} body.jh .jh-home [data-tip]::after{left:0;translate:0 -2px} @media (hover:hover){body.jh .jh-home [data-tip]:hover::after,body.jh .jh-home [data-tip]:focus-visible::after{translate:0 0}} body.jh .jh-gear .jh-pop{min-width:224px} body.jh .nav .jh-gear .jh-pop .jh-ib{display:flex;align-items:center;justify-content:flex-start;gap:11px;width:100%;height:auto;min-width:0;padding:9px 11px;font-size:13px;font-weight:500;color:var(--walnut)} body.jh .nav .jh-gear .jh-pop .jh-ib .jh-i{flex:none;color:var(--brick)} body.jh .nav .jh-gear .jh-pop .jh-ib kbd{margin-left:auto;font:500 10.5px/1 "IBM Plex Mono",monospace;padding:3px 5px;border:1px solid var(--line);border-radius:3px;color:var(--sand)} body.jh .nav .jh-gear .jh-pop .jh-ib[aria-pressed="true"]{background:rgba(154,70,48,.12);color:var(--walnut)} body.jh .nav .jh-gear .jh-pop .jh-ib[aria-pressed="true"]::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:2px;background:var(--brick)} body.jh .jh-gear .jh-pop [data-tip]::after{display:none} body.jh .nav .jh-gear.open>.jh-ib .jh-i{transform:rotate(45deg)} body.jh .nav .jh-gear>.jh-ib .jh-i{transition:transform .2s} @media (max-width:760px){body.jh .jh-home{padding:3px}} /* The menu rows' display:flex outranks the page's hide rules, so restate them here. */ body.jh[data-mode="walk"] .nav .jh-gear .jh-pop [data-nav="walk"],body.jh.no3d .nav .jh-gear .jh-pop :is([data-nav="walk"],[data-nav="tour"],[data-nav="overview"]){display:none} /* Icon tiles: every icon button in the header (Home, map, Games, Menu) and Run on desktop is its own square paper tile with the same size, border, shadow and 20px icon. Pressed / open tiles turn walnut. */ body.jh .bar .nav,body.jh .jh-home{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0} body.jh .bar .nav{gap:8px} body.jh :is(.jh-home .jh-ib,.bar .nav>.jh-menu>.jh-ib,#jh-map){all:unset;box-sizing:border-box;cursor:pointer;position:relative;width:44px;height:44px;min-width:44px;margin:0;padding:0;display:grid;place-items:center;border-radius:var(--hud-r);background:rgba(247,241,231,.92);border:1px solid var(--line);box-shadow:0 6px 22px rgba(35,26,20,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--walnut);font-size:0;transition:background .15s,color .15s} /* The Home button keeps the page's own label text for screen readers via aria-label; take it out of the grid. */ body.jh .jh-home .jh-ib :is(.l,.s){display:none} body.jh #jh-map{pointer-events:auto;align-self:auto;display:none} body.jh.entered[data-mode="walk"] #jh-map{display:grid} body.jh :is(.jh-home .jh-ib,.bar .nav>.jh-menu>.jh-ib,#jh-map):hover,body.jh:not(.touch) #run-btn:hover{background:#fffaf2;color:var(--brick)} body.jh :is(.jh-home .jh-ib,.bar .nav>.jh-menu>.jh-ib,#jh-map):focus-visible{outline:2px solid var(--brass);outline-offset:2px} body.jh :is(.bar .nav>.jh-menu.open>.jh-ib,#jh-map[aria-pressed="true"]){background:var(--walnut);border-color:var(--walnut);color:var(--paper)} body.jh:not(.touch) #run-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;right:24px;bottom:24px;border-radius:var(--hud-r);background:rgba(247,241,231,.92);border:1px solid var(--line);box-shadow:0 6px 22px rgba(35,26,20,.12);color:var(--walnut)} body.jh:not(.touch) #run-btn[aria-pressed="true"]{background:var(--brick);border-color:var(--brick);color:#fff} body.jh #run-btn[data-tip]::after{top:auto;bottom:calc(100% + 8px);left:auto;right:0;translate:0 2px} @media (hover:hover){body.jh #run-btn[data-tip]:hover::after{translate:0 0}} body.jh #jh-map[data-tip]::after{translate:-50% -2px} @media (max-width:760px){ body.jh :is(.jh-home .jh-ib,.bar .nav>.jh-menu>.jh-ib,#jh-map){width:40px;height:40px;min-width:40px} body.jh .bar .nav{gap:6px} } /* Games dropdown: the four games, each with its glyph and where it is played. */ body.jh .jh-games .jh-pop{min-width:250px} body.jh .nav .jh-games .jh-pop .jh-game{display:flex;align-items:center;gap:11px;width:100%;box-sizing:border-box;padding:8px 11px} body.jh .jh-game .g{font-size:20px;line-height:1;width:24px;text-align:center} body.jh .jh-game .t{display:flex;flex-direction:column;gap:1px;min-width:0} body.jh .jh-game b{font-weight:600;font-size:13px;color:var(--walnut)} body.jh .jh-game small{font-size:11px;color:var(--sand)} /* Walk settings at the bottom of the gear menu. Their On/Off and view buttons keep their own look. */ body.jh .jh-walkset{margin-top:4px;border-top:1px solid var(--line);padding-top:4px} body.jh .jh-sec{padding:6px 11px 4px;font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--brick)} body.jh .nav .jh-pop .jh-row button{all:unset;cursor:pointer;min-width:92px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--ctl-r);background:#fffaf2;font-size:12px;font-weight:500;text-align:center;box-sizing:border-box} body.jh .nav .jh-pop .jh-row button:hover{border-color:var(--brick);color:var(--brick)} body.jh .nav .jh-pop .jh-row button:focus-visible{outline:2px solid var(--brass);outline-offset:2px} body.jh .nav .jh-pop :is(#jh-keys,#jh-info)[aria-pressed="true"]{background:var(--walnut);border-color:var(--walnut);color:var(--paper)} body.jh .jh-gear .jh-pop{min-width:260px} /* Compass under the Games / Menu tiles (the minimap stays in the top-left corner). */ #jh-compass{position:fixed;z-index:3;top:68px;right:16px;width:72px;height:72px;box-sizing:border-box;padding:0;border-radius:50%;display:none;pointer-events:none} body.jh.entered:not(.no3d) #jh-compass{display:block} body.jh #jh-compass{border-radius:50%} #jh-compass svg{display:block;width:100%;height:100%} #jh-compass .ring{fill:none;stroke:var(--line);stroke-width:1} #jh-compass line{stroke:var(--sand);stroke-width:1.2;stroke-linecap:round} #jh-compass line.b{stroke:var(--walnut);stroke-width:2} #jh-compass text{font:600 14px/1 "IBM Plex Sans",system-ui,sans-serif;fill:var(--walnut);text-anchor:middle;dominant-baseline:central} #jh-compass text.n{fill:var(--brick);font-weight:700} #jh-compass .needle-n{fill:var(--brick)} #jh-compass .needle-s{fill:var(--sand);opacity:.7} #jh-compass .lubber{fill:var(--walnut)} #jh-compass .jh-hd{position:absolute;left:50%;bottom:-17px;translate:-50% 0;padding:1px 6px;border-radius:var(--ctl-r);background:rgba(247,241,231,.92);border:1px solid var(--line);font:500 10px/1.3 "IBM Plex Mono",monospace;color:var(--walnut);white-space:nowrap} @media (min-width:761px){body.jh:has(#card.open) #jh-compass{visibility:hidden}} @media (max-width:760px), (pointer:coarse) and (max-height:540px){ #jh-compass{top:54px;right:8px;width:58px;height:58px} #jh-compass .jh-hd{bottom:-15px;font-size:9.5px} html body #minimap{width:110px} html body.entered.jh-loc-dup #minimap-wrap{top:56px} } /* Top-left: Home · Walk · Map tiles, the place name under them as plain text (no box). */ html body.jh .bar{align-items:flex-start} body.jh .jh-left{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0;pointer-events:none} body.jh .jh-home{display:flex;gap:8px;pointer-events:auto} body.jh .jh-left .brand{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0 2px;min-width:0;max-width:100%;pointer-events:none;text-shadow:0 0 2px rgba(247,241,231,1),0 0 6px rgba(247,241,231,.95),0 0 14px rgba(247,241,231,.85)} body.jh .jh-left .brand b{color:var(--walnut)} body.jh .jh-left .brand span{color:var(--walnut);opacity:.8} body.jh[data-mode="walk"] .jh-home [data-nav="walk"]{display:grid} body.jh.no3d .jh-home [data-nav="walk"]{display:none} body.jh :is(#jh-map,.jh-home [data-nav="walk"])[aria-pressed="true"]{background:var(--walnut);border-color:var(--walnut);color:var(--paper)} html body.entered #minimap-wrap{top:100px} @media (max-width:760px), (pointer:coarse) and (max-height:540px){ body.jh .jh-left{gap:5px} body.jh .jh-home{gap:6px} body.jh .jh-left .brand{padding:0 2px} body.jh .jh-left .brand span{display:none} html body.entered #minimap-wrap,html body.entered #dir.open ~ #minimap-wrap{top:112px} html body.entered.jh-loc-dup #minimap-wrap{top:80px} } /* No heading readout ("S 179°") under the compass: the rose already shows the direction. */ #jh-compass .jh-hd{display:none} /* Phones: smaller icon tiles and buttons so the HUD leaves more of the square visible. */ @media (max-width:760px), (pointer:coarse) and (max-height:540px){ html body.jh :is(.jh-home .jh-ib,.bar .nav>.jh-menu>.jh-ib,#jh-map){width:34px;height:34px;min-width:34px;border-radius:8px} html body.jh :is(.jh-home .jh-ib,.bar .nav>.jh-menu>.jh-ib,#jh-map) .jh-i{width:17px;height:17px} html body.jh .bar .nav,html body.jh .jh-home{gap:5px} html body.jh .jh-left{gap:4px} html body.jh .jh-left .brand b{font-size:13px} #jh-compass{top:48px;width:48px;height:48px} html body.jh:not(.touch) #run-btn{width:38px;height:38px;right:12px;bottom:12px;border-radius:8px} html body.jh #run-btn .jh-i{width:18px;height:18px} html body.jh.touch #run-btn{width:46px;height:46px;right:84px;bottom:34px} html body.touch #jump-btn,html body.jh.touch #jump-btn{width:54px;height:54px;right:18px;bottom:30px} html body.jh.touch #jump-btn svg{width:22px;height:22px} html body.touch #joy{width:88px;height:88px} html body.touch #joy i{width:38px;height:38px;margin:-19px 0 0 -19px} } /* ---------- Lobby (home page): painted storybook look ---------- Everything here targets the exported lobby markup (main.lb …) so it survives design re-exports. Fonts are self-hosted in /fonts and only download on pages that use them. */ @font-face{font-family:"Chewy";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/chewy-latin.woff2) format("woff2")} @font-face{font-family:"Caveat Brush";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/caveat-brush-latin.woff2) format("woff2")} main.lb{ --lb-pad:clamp(16px,3vw,56px);--lb-logo-x:clamp(8px,2.4vw,44px); --lb-cream:#fbecd0;--lb-gold:#f2b636;--lb-ink:#3a1b0d;--lb-red:#b8302a; --lb-brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath fill='%23b8302a' d='M1 17C60 10 150 5 250 4c50-.5 100 0 149 2l-3 5C320 9 250 9 180 11 110 13 55 17 6 23z'/%3E%3Cpath fill='%23b8302a' opacity='.55' d='M30 20c80-6 170-9 300-8l-40 3c-90 1-170 4-250 9z'/%3E%3C/svg%3E"); padding:30px var(--lb-pad) clamp(22px,4.4vh,44px); background:#1c110b url(/renders/lobby-bg.jpg) right center/cover no-repeat; } main.lb .lb-logo{left:max(var(--lb-logo-x),env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top))} main.lb .lb-logo img{content:url(/icons/lobby-pagoda.png);width:118px;height:88px;border:0;border-radius:0;object-fit:contain} main.lb .lb-eye{margin-left:calc(var(--lb-logo-x) + 118px - var(--lb-pad));padding-top:14px;font:400 clamp(15px,1.25vw,22px)/1 "Chewy",cursive;letter-spacing:.07em;color:#e9a341;text-shadow:0 2px 0 rgba(0,0,0,.35)} main.lb .lb-head h1{position:relative;width:fit-content;margin:clamp(10px,2.2vh,22px) 0 0 clamp(0px,1.6vw,30px); font:400 clamp(38px,min(5vw,9.6vh),96px)/1 "Chewy",cursive;letter-spacing:.01em;color:var(--lb-cream); transform:rotate(-1.6deg);transform-origin:left bottom; text-shadow:0 1px 0 #fff7e6,0 4px 0 #6b3218,0 6px 0 var(--lb-ink),0 12px 22px rgba(0,0,0,.5)} main.lb .lb-head h1::after{content:"";position:absolute;z-index:-1;left:-.15em;bottom:-.2em;width:52%;height:.24em;background:var(--lb-brush) center/100% 100% no-repeat} main.lb .lb-intro{margin:clamp(12px,2.4vh,24px) 0 0 calc(var(--lb-logo-x) + 118px - var(--lb-pad));max-width:36em; font:400 clamp(15px,1.22vw,22px)/1.45 "Caveat Brush",cursive;letter-spacing:.015em;color:#f6e8d0;text-shadow:0 2px 3px rgba(0,0,0,.55)} main.lb .lb-count{display:flex;align-items:center;gap:.55em;margin-bottom:6px;font:400 clamp(17px,1.4vw,25px)/1 "Chewy",cursive;letter-spacing:.06em;color:var(--lb-cream);text-shadow:0 2px 0 var(--lb-ink)} main.lb .lb-count::before,main.lb .lb-count::after{content:"";width:.95em;height:1.25em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30' fill='none' stroke='%23f2b636' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M20 6 9 2'/%3E%3Cpath d='M21 15H4'/%3E%3Cpath d='M20 24 9 28'/%3E%3C/svg%3E") center/contain no-repeat} main.lb .lb-count::after{transform:scaleX(-1)} main.lb .lb-cards{gap:clamp(12px,2vw,34px)} main.lb .lb-card{border-radius:18px;border:3px solid #f1dcb6;background:#4a2a19; box-shadow:0 0 0 1px rgba(58,27,13,.7),inset 0 0 0 1px rgba(58,27,13,.55),0 0 18px rgba(241,220,182,.12),0 22px 44px rgba(0,0,0,.5);transition:box-shadow .3s,transform .3s} main.lb .lb-card:hover,main.lb .lb-card:focus-visible{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(58,27,13,.7),0 0 0 4px rgba(242,182,54,.55),0 0 30px rgba(242,182,54,.25),0 26px 50px rgba(0,0,0,.55)} main.lb .lb-img{filter:saturate(1.3) contrast(1.08) brightness(1.3) sepia(.1)} main.lb .lb-shade{background: radial-gradient(120% 55% at 12% 100%,rgba(74,38,20,.85) 0%,rgba(74,38,20,.45) 45%,rgba(74,38,20,0) 75%), linear-gradient(0deg,rgba(40,20,10,.7) 0%,rgba(40,20,10,.18) 30%,rgba(40,20,10,0) 50%)} main.lb .lb-txt{padding:clamp(14px,2.4vw,34px);padding-right:clamp(70px,6vw,110px)} main.lb .lb-txt h2{position:relative;width:fit-content;padding-bottom:.35em; font:400 clamp(18px,min(2.15vw,4.2vh),40px)/1.12 "Chewy",cursive;letter-spacing:.01em;color:var(--lb-gold); text-shadow:0 2px 0 var(--lb-ink),0 3px 0 var(--lb-ink),0 6px 12px rgba(0,0,0,.6)} main.lb .lb-txt h2::first-line{font-size:1.72em;color:var(--lb-cream); text-shadow:-1px -1px 0 var(--lb-ink),1px -1px 0 var(--lb-ink),-1px 1px 0 var(--lb-ink),0 3px 0 var(--lb-ink),0 5px 0 var(--lb-ink),0 8px 16px rgba(0,0,0,.6)} main.lb .lb-txt h2::after{content:"";position:absolute;left:.4em;bottom:0;width:62%;height:.3em;transform:rotate(-4deg);background:var(--lb-brush) center/100% 100% no-repeat} main.lb .lb-go{right:clamp(14px,2vw,30px);bottom:clamp(14px,2.2vw,32px);width:clamp(44px,3.7vw,68px);height:clamp(44px,3.7vw,68px);border-radius:50%; border:2.5px solid #f1dcb6;background:rgba(28,14,8,.88);color:#fff6e6;box-shadow:0 4px 12px rgba(0,0,0,.45)} main.lb .lb-go svg{width:52%;height:52%;stroke-width:2.6} main.lb .lb-card:hover .lb-go,main.lb .lb-card:focus-visible .lb-go{color:var(--lb-gold);border-color:var(--lb-gold)} /* Top-right chip (built by jatra-auth.js): big round icon buttons on the lobby only. */ body:has(main.lb,#welcome) .ja-chip{gap:clamp(8px,1vw,16px);top:max(12px,env(safe-area-inset-top));right:max(clamp(12px,2vw,40px),env(safe-area-inset-right))} body:has(main.lb,#welcome) .ja-chip .ja-ic{width:clamp(42px,3vw,54px);height:clamp(42px,3vw,54px);border-radius:50%;border:2px solid #f1dcb6;background:rgba(28,14,8,.85);color:#fbecd0;box-shadow:0 4px 12px rgba(0,0,0,.4)} body:has(main.lb,#welcome) .ja-chip .ja-ic svg{width:48%;height:48%;stroke-width:2.1} body:has(main.lb,#welcome) .ja-chip .ja-ic:hover{border-color:var(--lb-gold,#f2b636);color:#f2b636} body:has(main.lb,#welcome) .ja-chip [data-ja=acct]{background:#f1dcb6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9a77a'%3E%3Ccircle cx='12' cy='9' r='4.3'/%3E%3Cpath d='M3.6 21.5c.9-4.6 4.3-7.1 8.4-7.1s7.5 2.5 8.4 7.1z'/%3E%3C/svg%3E") center 60%/74% no-repeat;border-color:#fbecd0} body:has(main.lb,#welcome) .ja-chip [data-ja=acct] svg{display:none} /* Short screens: drop the eyebrow indent pressure; phones: stack the header under the logo row. */ @media (max-width:640px){ main.lb{padding-top:22px} main.lb .lb-logo img{width:76px;height:56px} main.lb .lb-eye{margin:46px 0 0;padding-top:0;font-size:14px;line-height:1.2} main.lb .lb-intro{margin-left:0} main.lb .lb-head h1{margin-top:14px} body:has(main.lb,#welcome) .ja-chip .ja-ic{width:40px;height:40px} } /* Phones upright: Home, Places and Games each fit one screen, never a scroll. The page is exactly the screen's height (dvh, so it is the same whether the browser's address bar is showing or not) and the cards share what the header leaves. Places and Games drop their intro line to give the cards room; Places goes two by two (Home and Games lay out their own cards in jatra-home.css). */ @media (max-width:640px) and (orientation:portrait){ main.lb{height:100vh;height:100dvh;min-height:0;overflow:hidden;gap:14px;padding-bottom:max(16px,env(safe-area-inset-bottom));background-position:72% center} main.lb .lb-head{flex:none} main.lb .lb-head h1{font-size:36px} main.lb .lb-cards{flex:1;min-height:0} main.lb .lb-card{min-height:0;border-radius:14px} main.lb:not(.st) .lb-intro{display:none} main.lb .lb-go{top:8px;right:8px;width:34px;height:34px;border-width:2px} main.lb:not(.st):not(.gp) .lb-cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px} main.lb:not(.st):not(.gp) .lb-txt{padding:10px 12px 12px} main.lb:not(.st):not(.gp) .lb-head .lb-count{margin:0;font-size:16px} } /* ===================================================================================================== Home-page look everywhere (2026-11-06). The lobby's storybook style — Chewy headings, Caveat Brush copy, dark walnut cards with a cream border, round buttons — carried to the worlds, games and dialogs. ===================================================================================================== */ :root{--jt-cream:#fbecd0;--jt-edge:#f1dcb6;--jt-gold:#f2b636;--jt-ink:#3a1b0d;--jt-red:#b8302a;--jt-bg:#1c110b; --jt-card:rgba(38,20,11,.93);--jt-line:rgba(241,220,182,.22); --jt-h:"Chewy","Instrument Serif",cursive;--jt-hand:"Caveat Brush","IBM Plex Sans",cursive; --jt-shadow:0 0 0 1px rgba(58,27,13,.7),inset 0 0 0 1px rgba(58,27,13,.55),0 0 18px rgba(241,220,182,.12),0 22px 44px rgba(0,0,0,.5)} /* ---------- World HUD: round walnut tiles with a cream rim, like the lobby's chip ---------- */ html body.jh :is(.bar .nav>.jh-menu>.jh-ib,#jh-map),html body.jh:not(.touch) #run-btn{border-radius:50%;border:2px solid var(--jt-edge);background:rgba(28,14,8,.85);color:var(--jt-cream);box-shadow:0 4px 12px rgba(0,0,0,.4)} html body.jh :is(.bar .nav>.jh-menu>.jh-ib,#jh-map):hover,html body.jh:not(.touch) #run-btn:hover{background:rgba(28,14,8,.92);border-color:var(--jt-gold);color:var(--jt-gold)} html body.jh :is(.bar .nav>.jh-menu.open>.jh-ib,#jh-map[aria-pressed="true"],.jh-walk [data-nav="walk"][aria-pressed="true"]),html body.jh:not(.touch) #run-btn[aria-pressed="true"]{background:var(--jt-red);border-color:var(--jt-gold);color:#fff6e6} body.jh .jh-walk [data-nav="walk"]{display:grid!important} /* The page's own "Walk the square" / "Walk the town" text stays in the button but out of the layout, so the icon is centred. */ body.jh .jh-walk [data-nav="walk"]>span{display:none} body.jh.no3d .jh-walk{display:none} body.jh [data-tip]::after{background:var(--jt-ink);color:var(--jt-cream);font:400 13px/1 var(--jt-h);letter-spacing:.02em;border:1px solid var(--jt-edge)} /* Place name: plain Chewy text, no "Virtual heritage museum" tagline. */ body.jh .jh-left .brand span{display:none} body.jh .jh-left .brand{text-shadow:none} body.jh .jh-left .brand b{font:400 22px/1.1 var(--jt-h);letter-spacing:.01em;color:var(--jt-cream);text-shadow:-1px -1px 0 var(--jt-ink),1px -1px 0 var(--jt-ink),-1px 1px 0 var(--jt-ink),0 2px 0 var(--jt-ink),0 3px 0 var(--jt-ink),0 6px 12px rgba(0,0,0,.5)} /* The place chip jatra-hud.js builds (pin + "You are near …", zoom) stays hidden; the map takes its spot. */ #jh-bar{display:none!important} html body.entered #minimap-wrap{top:100px} @media (max-width:760px), (pointer:coarse) and (max-height:540px){ html body.jh .jh-left .brand b{font-size:16px} html body.entered #minimap-wrap,html body.entered #dir.open ~ #minimap-wrap,html body.entered.jh-loc-dup #minimap-wrap{top:76px} } /* Gear menu: a walnut card with a cream rim. Directory · Guided tour · View / Monument info toggles · Exit. */ body.jh .jh-gear .jh-pop{min-width:236px;padding:8px;border-radius:16px;border:2px solid var(--jt-edge);background:var(--jt-card);box-shadow:var(--jt-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} body.jh .nav .jh-gear .jh-pop .jh-ib{border-radius:10px;font:400 16px/1.1 var(--jt-h);letter-spacing:.02em;color:var(--jt-cream)} body.jh .nav .jh-gear .jh-pop .jh-ib .jh-i{color:var(--jt-gold)} body.jh .nav .jh-gear .jh-pop .jh-ib:hover,body.jh .nav .jh-gear .jh-pop .jh-ib:focus-visible{background:rgba(241,220,182,.1)} body.jh .nav .jh-gear .jh-pop .jh-ib[aria-pressed="true"]{background:rgba(242,182,54,.16);color:var(--jt-cream)} body.jh .nav .jh-gear .jh-pop .jh-ib[aria-pressed="true"]::before{background:var(--jt-gold)} body.jh .jh-walkset{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0 0;padding:8px 0 0;border-top:1px solid var(--jt-line)} body.jh .nav .jh-pop .jh-tog{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:66px;padding:8px 6px;border-radius:12px;border:2px solid var(--jt-line);background:rgba(28,14,8,.5);color:var(--jt-cream);font:400 13px/1.1 var(--jt-h);letter-spacing:.02em;text-align:center;transition:background .15s,border-color .15s,color .15s} body.jh .nav .jh-pop .jh-tog .jh-i{width:22px;height:22px;color:var(--jt-gold)} body.jh .nav .jh-pop .jh-tog:hover{border-color:var(--jt-gold)} body.jh .nav .jh-pop .jh-tog:focus-visible{outline:2px solid var(--jt-gold);outline-offset:2px} body.jh .nav .jh-pop .jh-tog[aria-checked="true"]{background:var(--jt-red);border-color:var(--jt-gold);color:#fff6e6} body.jh .nav .jh-pop .jh-tog[aria-checked="true"] .jh-i{color:#fff6e6} body.jh .nav .jh-pop #jh-info[aria-checked="false"] .jh-i{opacity:.55} body.jh:not([data-mode="walk"]) .jh-walkset #jh-view{opacity:.5} body.jh .nav .jh-gear .jh-pop .jh-exit{margin-top:6px;border-top:1px solid var(--jt-line);border-radius:0 0 10px 10px} body.jh .nav .jh-gear .jh-pop .jh-exit .jh-i{color:#f08a7a} /* North arrow: just the needle, no ring or letters. */ #jh-compass,html body #jh-compass{top:72px;right:22px;width:34px;height:34px;padding:0;background:none;border:0;box-shadow:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.55)) drop-shadow(0 0 3px rgba(251,236,208,.7))} #jh-compass .needle-n{fill:var(--jt-red);stroke:var(--jt-cream);stroke-width:3;paint-order:stroke} #jh-compass .needle-s{fill:var(--jt-cream);opacity:1;stroke:var(--jt-ink);stroke-width:3;paint-order:stroke} #jh-compass .hub{fill:var(--jt-cream);stroke:var(--jt-ink);stroke-width:3.5} @media (max-width:760px), (pointer:coarse) and (max-height:540px){#jh-compass,html body #jh-compass{top:50px;right:12px;width:28px;height:28px}} /* Walk controls: round walnut buttons with the solid run / jump signs. */ body.jh #joy,body.jh #jump-btn,body.jh.touch #run-btn{background:rgba(28,14,8,.6);border:2px solid var(--jt-edge);box-shadow:0 4px 12px rgba(0,0,0,.4)} body.jh #jump-btn,body.jh.touch #run-btn{color:var(--jt-cream)} body.jh #jump-btn:active,body.jh.touch #run-btn[aria-pressed="true"]{background:var(--jt-red);border-color:var(--jt-gold)} body.jh #run-btn[aria-pressed="true"] .jh-i{animation:none} html body.jh.touch #jump-btn svg{width:28px;height:28px} html body.jh.touch #run-btn .jh-i{width:24px;height:24px} /* Near a monument: its name at the bottom centre as plain text (no box), and one "Learn more ›" link. The centre "Tap / Click to learn more" label would repeat it, so it is off while walking. */ body[data-mode="walk"] #hover{display:none!important} html body #grab-prompt,html body.jh #grab-prompt{bottom:22px;flex-direction:column;align-items:center;gap:2px;padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;text-align:center} html body.touch #grab-prompt,html body.jh.touch #grab-prompt{bottom:18px} #grab-text{font:400 clamp(18px,2vw,26px)/1.1 var(--jt-h);letter-spacing:.01em;color:var(--jt-cream);white-space:normal;max-width:min(60vw,520px);text-shadow:-1px -1px 0 var(--jt-ink),1px -1px 0 var(--jt-ink),-1px 1px 0 var(--jt-ink),0 2px 0 var(--jt-ink),0 3px 0 var(--jt-ink),0 6px 14px rgba(0,0,0,.55)} #grab-text b{font-weight:400} #grab-text .gp-type{display:none} #grab-text kbd{display:none} #grab-btn,html body #grab-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:2px 4px;font:400 15px/1.1 var(--jt-hand);letter-spacing:.03em;color:var(--jt-gold);text-shadow:0 1px 0 var(--jt-ink),0 2px 4px rgba(0,0,0,.7)} #grab-btn kbd{display:none} #grab-btn::after{content:"";width:13px;height:13px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat} #grab-btn:hover,#grab-btn:focus-visible{color:var(--jt-cream);outline:0} @media (max-width:760px), (pointer:coarse) and (max-height:540px){#grab-text{font-size:17px;max-width:46vw}#grab-btn{font-size:14px}} /* ---------- Welcome screen of each place ---------- */ #welcome .w-place.jh-wp{align-items:flex-start;top:max(10px,env(safe-area-inset-top));left:clamp(10px,2.4vw,44px);right:clamp(12px,2vw,40px)} #welcome .jh-wh{display:block;line-height:0;transition:transform .2s} #welcome .jh-wh img{display:block;width:clamp(76px,7vw,118px);height:auto;aspect-ratio:118/88;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))} #welcome .jh-wh:hover,#welcome .jh-wh:focus-visible{transform:translateY(-2px) scale(1.03);outline:0} #welcome .w-char{display:none!important} #welcome .w-inner .eyebrow{display:none} #welcome #w-title{font:400 clamp(40px,6.4vw,96px)/1 var(--jt-h);letter-spacing:.01em;color:var(--jt-cream);transform:rotate(-1.2deg);transform-origin:left bottom;text-shadow:0 1px 0 #fff7e6,0 4px 0 #6b3218,0 6px 0 var(--jt-ink),0 12px 22px rgba(0,0,0,.5)} #welcome #w-intro{font:400 clamp(16px,1.3vw,21px)/1.4 var(--jt-hand);letter-spacing:.015em;color:#f6e8d0;text-shadow:0 2px 3px rgba(0,0,0,.6)} #welcome .w-actions .btn.primary,#welcome #enter{border-radius:999px;border:2.5px solid var(--jt-edge);background:var(--jt-red);color:#fff6e6;font:400 clamp(17px,1.4vw,22px)/1 var(--jt-h);letter-spacing:.03em;padding:14px 26px;box-shadow:0 6px 16px rgba(0,0,0,.45)} #welcome #enter:hover{border-color:var(--jt-gold);background:#c93a33} @media (max-width:760px), (pointer:coarse) and (max-height:540px){ #welcome #w-title{font-size:clamp(28px,6vw,40px)} #welcome #w-intro{font-size:14px} #welcome #enter{font-size:16px;padding:10px 20px} } /* ---------- Character creator: small colour dots, no colour names ---------- */ #jc h2{font:400 30px/1.05 var(--jt-h);letter-spacing:.01em;color:var(--jt-ink)} #jc .jc-l b{display:none} #jc .jc-chips{gap:6px} #jc .jc-chip,html #jc .jc-chip{width:22px;height:22px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)} #jc .jc-chip .jc-i,html #jc .jc-chip .jc-i{width:12px;height:12px} #jc .jc-chip[aria-pressed="true"]{box-shadow:0 0 0 2px var(--paper,#f7f1e7),0 0 0 3.5px var(--walnut,#3a2619)} #jc .jc-actions .btn{border-radius:999px;font:400 16px/1 var(--jt-h);letter-spacing:.02em} #jc .jc-actions .btn.primary{background:var(--jt-red);border:2px solid var(--jt-red)} @media (max-height:540px){#jc h2{font-size:22px}#jc .jc-chip,html #jc .jc-chip{width:20px;height:20px}} /* ---------- Game screens (jatra-gameui.js marks the panels .jt-card) ---------- */ /* The world page's floating "Back to the square" is replaced by the one inside the game's cards. */ #game #game-close{display:none!important} body.jt-game .jt-card{background:var(--jt-card)!important;border:3px solid var(--jt-edge)!important;border-radius:18px!important;box-shadow:var(--jt-shadow)!important;color:var(--jt-cream)} /* Biska's paper panels: swap its palette inside the cards so text reads on walnut. */ body.jt-light .jt-card{--ink:#fbecd0;--walnut:#fbecd0;--paper:#3a1b0d;--sand:rgba(251,236,208,.66);--line:rgba(241,220,182,.22);--brick:#b8302a;--beige:rgba(251,236,208,.08)} body.jt-light .jt-card :is(.lede,.rules,.sub){color:rgba(251,236,208,.82)!important} body.jt-light .jt-card kbd{background:rgba(28,14,8,.6);color:var(--jt-cream);border-color:var(--jt-line)} body.jt-light .jt-card #room-list li{background:rgba(28,14,8,.5)} body.jt-light .jt-card .lk[aria-pressed="true"]{background:rgba(242,182,54,.14);border-color:var(--jt-gold)} body.jt-light .jt-card a{color:var(--jt-gold)} /* Headings, labels, copy */ body.jt-game .jt-card :is(h1,h2,#lobby-title,.js-h){font-family:var(--jt-h)!important;font-weight:400;letter-spacing:.01em!important;color:var(--jt-cream);text-shadow:0 2px 0 var(--jt-ink),0 4px 0 var(--jt-ink),0 8px 16px rgba(0,0,0,.45)} body.jt-game .jt-card :is(h1,h2) small{font-family:var(--jt-hand)!important;color:var(--jt-gold)!important;text-shadow:0 2px 3px rgba(0,0,0,.5);letter-spacing:.02em} body.jt-game #lobby h1,body.jt-game #lobby-title{font-size:clamp(28px,2.8vw,40px)!important;line-height:1!important} body.jt-game .jt-card .js-h{font-size:24px} body.jt-game .jt-card .js-h small{font-family:var(--jt-h)!important;font-size:13px!important;text-transform:none!important;letter-spacing:.04em!important;color:var(--jt-gold);opacity:1!important;text-shadow:none} body.jt-game .jt-card .eyebrow{font:400 14px/1.15 var(--jt-h)!important;letter-spacing:.06em!important;text-transform:none!important;color:#e9a341!important} body.jt-game .jt-card .label{font:400 15px/1.1 var(--jt-h)!important;letter-spacing:.03em!important;text-transform:none!important;color:var(--jt-gold)!important} body.jt-game .jt-card :is(.lede,.how p,.rules){font-family:var(--jt-hand)!important;font-size:16px!important;line-height:1.4!important;letter-spacing:.015em;color:rgba(251,236,208,.85)} body.jt-game .jt-card .note{color:rgba(251,236,208,.7)} /* Step errors ("Pick a name first"): a light red that reads on walnut. */ body.jt-game .jt-card .js-err{color:#ff9d8c} /* Buttons: round pills with a cream rim; primary is the lobby red. */ body.jt-game .jt-card .btn{border-radius:999px!important;border:2px solid var(--jt-edge)!important;background:rgba(28,14,8,.55);color:var(--jt-cream)!important;font:400 16px/1.1 var(--jt-h)!important;letter-spacing:.03em} body.jt-game .jt-card .btn:hover{border-color:var(--jt-gold)!important;color:var(--jt-gold)!important;background:rgba(28,14,8,.75)} body.jt-game .jt-card .btn.primary{background:var(--jt-red)!important;color:#fff6e6!important} body.jt-game .jt-card .btn.primary:hover{background:#c93a33!important;color:#fff6e6!important} body.jt-game .jt-card .btn.big{font-size:20px!important} body.jt-game .jt-card .link{font:400 15px/1 var(--jt-h)!important;color:var(--jt-gold)!important} /* Segmented choices: pills; the chosen one is cream. */ body.jt-game .jt-card .seg{border-radius:999px!important;border:2px solid var(--jt-line)!important;background:rgba(28,14,8,.5)!important;padding:3px!important} body.jt-game .jt-card .seg button{border-radius:999px!important;font:400 15px/1.1 var(--jt-h)!important;letter-spacing:.03em;color:var(--jt-cream)} body.jt-game .jt-card .seg button[aria-pressed="true"]{background:var(--jt-cream)!important;color:var(--jt-ink)!important} body.jt-game .jt-card .seg.team button[data-t="thane"][aria-pressed="true"]{background:#2f4f7a!important;color:#fff!important} body.jt-game .jt-card .seg.team button[data-t="kone"][aria-pressed="true"]{background:var(--jt-red)!important;color:#fff!important} body.jt-game .jt-card .seg.team{border-radius:16px!important} body.jt-game .jt-card .seg.team button{border-radius:13px!important} body.jt-game .jt-card :is(.field,.name,#code){border-radius:12px!important;border:2px solid var(--jt-line)!important;background:rgba(28,14,8,.55)!important;color:var(--jt-cream)!important} body.jt-game .jt-card :is(.field,.name,#code):focus{border-color:var(--jt-gold)!important} body.jt-game .jt-card :is(.kv,.lk){border-radius:12px!important;border:2px solid var(--jt-line)!important} body.jt-game .jt-card :is(.kv,.lk) span{font:400 13px/1.1 var(--jt-h)!important;letter-spacing:.03em} body.jt-game .jt-card :is(.kv,.lk)[aria-pressed="true"]{border-color:var(--jt-gold)!important;background:rgba(242,182,54,.14)!important} body.jt-game .jt-card :is(.sect,.player,#room-box,.rules,.how){border-color:var(--jt-line)!important} /* Mode: big choice cards (jatra-gameui.js modeCards): icon, title, one line; the chosen one gold with a check. */ body.jt-game .jt-card #mode.jt-modes{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;padding:0!important;border:0!important;border-radius:0!important;background:none!important} body.jt-game .jt-card #mode.jt-modes .jt-mode{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:132px;margin:0;padding:16px 12px 14px; border-radius:16px!important;border:2px solid var(--jt-line)!important;background:rgba(28,14,8,.5)!important;color:var(--jt-cream)!important;text-align:center;cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.25);transition:transform .15s,border-color .15s,background .15s,box-shadow .15s} body.jt-game .jt-card #mode.jt-modes .jt-mode:hover{transform:translateY(-2px);border-color:rgba(241,220,182,.5)!important;background:rgba(28,14,8,.7)!important} body.jt-game .jt-card #mode.jt-modes .jt-mode:focus-visible{outline:2px solid var(--jt-gold);outline-offset:3px} body.jt-game .jt-card #mode.jt-modes .jt-mode[aria-pressed="true"]{border-color:var(--jt-gold)!important;background:rgba(242,182,54,.14)!important;color:var(--jt-cream)!important;box-shadow:0 0 0 1px var(--jt-gold),0 8px 20px rgba(0,0,0,.35)} body.jt-game .jt-card #mode.jt-modes .jt-mode[aria-pressed="true"]::after{content:"";position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%; background:var(--jt-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a170d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat} body.jt-game .jt-card #mode.jt-modes .jt-mi{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;border:2px solid var(--jt-edge);background:rgba(28,14,8,.85);color:var(--jt-cream);box-shadow:0 4px 10px rgba(0,0,0,.35);transition:color .15s,border-color .15s} body.jt-game .jt-card #mode.jt-modes .jt-mi svg{width:22px;height:22px} body.jt-game .jt-card #mode.jt-modes .jt-mode[aria-pressed="true"] .jt-mi{border-color:var(--jt-gold);color:var(--jt-gold)} body.jt-game .jt-card #mode.jt-modes .jt-mode b{font:400 19px/1.05 var(--jt-h);letter-spacing:.02em;color:var(--jt-cream)} body.jt-game .jt-card #mode.jt-modes .jt-mode small{font:400 15px/1.2 var(--jt-hand);letter-spacing:.015em;color:rgba(251,236,208,.75);text-wrap:balance} body.jt-game .jt-card #mode.jt-modes .jt-mode[aria-pressed="true"] small{color:rgba(251,236,208,.92)} @media (prefers-reduced-motion:reduce){body.jt-game .jt-card #mode.jt-modes .jt-mode{transition:none}body.jt-game .jt-card #mode.jt-modes .jt-mode:hover{transform:none}} /* Desktop (a slim card) and the bottom sheet: the cards become rows, icon on the left. Only phones in landscape (a wide, short card) lay them side by side. */ @media (min-height:541px){ body.jt-game .jt-card #mode.jt-modes{grid-template-columns:1fr;gap:8px} body.jt-game .jt-card #mode.jt-modes .jt-mode{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;justify-items:start;text-align:left;min-height:0;padding:10px 40px 10px 12px} body.jt-game .jt-card #mode.jt-modes .jt-mi{grid-row:1 / 3;width:40px;height:40px} body.jt-game .jt-card #mode.jt-modes .jt-mode[aria-pressed="true"]::after{top:50%;right:12px;translate:0 -50%} } /* Short screens (phones in landscape): the cards fill the free height of the step. */ @media (max-height:540px){ body.jt-game .jt-card #mode.jt-modes{flex:1 1 auto;min-height:0;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-rows:minmax(130px,1fr);gap:8px} body.jt-game .jt-card #mode.jt-modes .jt-mode{min-height:0;padding:12px 8px} body.jt-game .jt-card #mode.jt-modes .jt-mode b{font-size:17px} body.jt-game .jt-card #mode.jt-modes .jt-mode small{font-size:14px} body.jt-game .jt-card #mode.jt-modes .jt-mi{width:40px;height:40px} body.jt-game .jt-card #mode.jt-modes .jt-mode[aria-pressed="true"]::after{top:6px;right:6px;width:18px;height:18px;background-size:11px} } /* Step bar + Back/Next (jatra-steps.js) */ body.jt-game .jt-card .js-bar{color:var(--jt-cream)} body.jt-game .jt-card .js-bar button{font:400 15px/1.1 var(--jt-h)!important;letter-spacing:.04em!important;text-transform:none!important} body.jt-game .jt-card .js-bar .n{font:400 13px/1 var(--jt-h)} body.jt-game .jt-card .js-bar button.done .n{background:var(--jt-gold);border-color:var(--jt-gold);color:var(--jt-ink)} body.jt-game .jt-card .js-bar button[aria-current="step"] .n{background:var(--jt-red);border-color:var(--jt-edge);color:#fff6e6;box-shadow:0 0 0 3px rgba(184,48,42,.3)} body.jt-game .jt-card .js-bar li:has(> .done):not(:last-child)::after{background:var(--jt-gold)} body.jt-game .jt-card .js-sum{font:400 14px/1.15 var(--jt-hand);color:var(--jt-gold)} /* Back is a quiet outline, Next the red pill. */ body.jt-game .jt-card .js-nav .btn:not(.primary){background:transparent;border-color:var(--jt-line)!important} body.jt-game .jt-card .js-nav .btn:not(.primary):hover{border-color:var(--jt-gold)!important} body.jt-game .jt-card .js-nav .btn{padding:10px 20px} /* Card top row: ‹ Games (jatra-nav.js backPill), then the round icon buttons (jatra-gameui.js: How to play, Map preview, Settings, the festival guide) and the trophy (jatra-auth.js), all 34 px. The pill is 40 px tall here and the trophy sits 3 px down, level with the icons. */ body.jt-game .jt-top{display:flex;align-items:center;gap:8px;min-height:40px;padding-right:42px} body.jt-game #lobby .js-head:not(:has(.ja-in-ok)) .jt-top{padding-right:0} body.jt-game .jt-top.jt-empty{min-height:0} body.jt-game .jt-card .jt-top .jn-back{height:40px;font-size:17px} body.jt-game .jt-tools{display:flex;gap:8px;margin-left:auto} body.jt-game .jt-card .jt-ic,body.jt-game #lobby .js-head .ja-trophy{all:unset;box-sizing:border-box;cursor:pointer;flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--jt-edge);background:rgba(28,14,8,.85);color:var(--jt-cream)!important;box-shadow:0 4px 12px rgba(0,0,0,.4);transition:border-color .15s,color .15s} body.jt-game .jt-card .jt-ic svg,body.jt-game #lobby .js-head .ja-trophy svg{width:16px;height:16px} body.jt-game .jt-card .jt-ic:hover,body.jt-game .jt-card .jt-ic:focus-visible,body.jt-game #lobby .js-head .ja-trophy:hover,body.jt-game #lobby .js-head .ja-trophy:focus-visible{border-color:var(--jt-gold);color:var(--jt-gold)!important;outline:0} body.jt-game .jt-card .jn-back{color:var(--jt-cream)} body.jt-game .jt-card .jn-back:hover,body.jt-game .jt-card .jn-back:focus-visible{color:var(--jt-gold)} /* Results: Play again · Back to lobby on one row, the back pill under them. */ body.jt-game #results .row:has(.jn-back){flex-wrap:wrap} body.jt-game #results .row .btn{white-space:nowrap} body.jt-game #results .row .jn-back{flex:1 0 100%;justify-content:center} body.jt-game #lobby .js-head{position:relative} body.jt-game #lobby .js-head .ja-acct.ja-in-ok{top:3px;right:0} @media (max-width:760px){ body.jt-game .jt-top{min-height:36px;padding-right:38px} body.jt-game .jt-card .jt-top .jn-back{height:36px;font-size:15px} body.jt-game .jt-card .jt-ic,body.jt-game #lobby .js-head .ja-trophy{width:30px;height:30px} } body.jt-game .jt-card .lobby-top{justify-content:flex-start} /* The account line ("Sign in with Google to play") when signed out. */ body.jt-game .jt-card .ja-acct:not(.ja-in-ok){border-radius:12px;border:2px solid var(--jt-line);background:rgba(28,14,8,.5);color:var(--jt-cream);font:400 15px/1.2 var(--jt-hand)} /* Bots: one small switch (the game's own buttons and note are kept, hidden). */ body.jt-game #bots-box.jt-bots>:not(.jt-switch){display:none!important} body.jt-game #bots-box.jt-bots{padding-top:12px} .jt-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;align-self:flex-start;font:400 16px/1 var(--jt-h);letter-spacing:.03em;color:var(--jt-cream);-webkit-user-select:none;user-select:none} .jt-switch input{position:absolute;opacity:0;width:1px;height:1px} .jt-switch i{position:relative;flex:none;width:42px;height:24px;border-radius:999px;border:2px solid var(--jt-edge);background:rgba(28,14,8,.6);transition:background .15s} .jt-switch i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--jt-cream);transition:transform .18s} .jt-switch input:checked+i{background:var(--jt-red)} .jt-switch input:checked+i::after{transform:translateX(18px)} .jt-switch input:focus-visible+i{outline:2px solid var(--jt-gold);outline-offset:2px} .jt-switch:has(input:disabled){opacity:.55;cursor:default} /* Room step: Public / Private tabs (jatra-rooms.js) */ body.jt-game .jt-card .jr-tabs{border:2px solid var(--jt-line);background:rgba(28,14,8,.5)} body.jt-game .jt-card .jr-tabs button{font:400 15px/1.1 var(--jt-h);letter-spacing:.03em;color:var(--jt-cream)} body.jt-game .jt-card .jr-tabs button[aria-selected="true"]{background:var(--jt-cream);color:var(--jt-ink)} body.jt-game .jt-card .jr-list li{border-radius:12px;border:2px solid var(--jt-line);background:rgba(28,14,8,.45)} body.jt-game .jt-card .jr-code{color:var(--jt-gold)} body.jt-game .jt-card .jr-refresh{font:400 14px/1 var(--jt-h);color:var(--jt-gold)} /* Map preview list */ body.jt-game #mappanel #cp-list li{border-radius:10px;background:rgba(28,14,8,.5)} /* Keyboard keys on screens with a keyboard only. */ @media (pointer:coarse){body.jt-game .jt-card .keys{display:none}} /* Card head, the same in every game: the top row, the name with its tagline and a lede. The credits (OpenStreetMap, the monument plans) are at the end of each game's guide sheet. */ body.jt-game #lobby h1 small{display:block;margin-top:6px;font-size:.6em!important;line-height:1.1} #route-line{color:var(--jt-gold)} /* Role and character cards: their names in the card's heading font. */ body.jt-game .jt-card .role{border-radius:12px;border:2px solid var(--jt-line)} body.jt-game .jt-card .role b{font:400 18px/1.05 var(--jt-h);letter-spacing:.02em;color:var(--jt-cream)} body.jt-game .jt-card .role[aria-pressed="true"]{border-color:var(--jt-gold);background:rgba(242,182,54,.14)} /* Side sheets (How to play, the festival guides, Settings): one layout in every game, shown over the lobby only. */ body.jt-game .sheet{position:fixed;z-index:8;top:16px;right:16px;bottom:16px;width:min(440px,calc(100vw - 32px));padding:24px 22px;overflow:auto;display:flex;flex-direction:column;gap:16px} body.jt-game .sheet[hidden],body.jt-game:not([data-ui="lobby"]) .sheet{display:none} body.jt-game .sheet .x{all:unset;cursor:pointer;position:absolute;top:14px;right:16px;font-size:26px;line-height:1} body.jt-game .guide{display:flex;flex-direction:column;gap:14px} body.jt-game .guide section{padding-top:14px;border-top:1px solid var(--jt-line)} body.jt-game .guide h3{margin:0 0 6px} body.jt-game .guide p{margin:0;text-wrap:pretty} body.jt-game .guide p+p,body.jt-game .guide .keys+p{margin-top:8px} body.jt-game .jt-card .guide a{color:var(--jt-gold)} @media (max-width:860px){body.jt-game .sheet{top:8px;left:8px;right:8px;bottom:auto;width:auto;max-height:calc(100vh - 16px)}} body.jt-game .sheet.jt-card .x{color:var(--jt-cream);font-size:26px} body.jt-game .sheet.jt-card .x:hover,body.jt-game .sheet.jt-card .x:focus-visible{color:var(--jt-gold);outline:0} /* The guide (jatra-gameui.js guideSheet): How to play · Culture & history tabs. The games' old help sheets it was built from stay shut. */ html body.jt-game .sheet.jt-merged{display:none!important} /* Solid, so the lobby it covers on a phone doesn't show through the text. */ html body.jt-game .sheet.jt-guide{background:#26140b!important} body.jt-game .jt-guide .eyebrow{margin-bottom:4px} body.jt-game .jt-tabs{display:flex;flex:none;padding:3px;border-radius:999px;border:2px solid var(--jt-line);background:#24130a} /* The tabs stay in view while the long Culture tab scrolls. */ body.jt-game .jt-guide .jt-tabs{position:sticky;top:-10px;z-index:1;box-shadow:0 0 0 6px #26140b,0 8px 12px 4px rgba(38,20,11,.9)} @media (max-height:540px){ body.jt-game .sheet.jt-guide{gap:10px;padding:14px 16px} body.jt-game .jt-guide .eyebrow{display:none} body.jt-game .jt-guide h2{font-size:22px!important;margin:0;padding-right:28px} body.jt-game .jt-guide .x{top:8px!important} } body.jt-game .jt-tabs button{all:unset;box-sizing:border-box;flex:1;min-width:0;padding:8px 10px;border-radius:999px;text-align:center;cursor:pointer; font:400 15px/1.1 var(--jt-h);letter-spacing:.03em;color:var(--jt-cream);white-space:nowrap;transition:background .15s,color .15s} body.jt-game .jt-tabs button:hover{color:var(--jt-gold)} body.jt-game .jt-tabs button[aria-selected="true"]{background:var(--jt-cream);color:var(--jt-ink)} body.jt-game .jt-tabs button:focus-visible{outline:2px solid var(--jt-gold);outline-offset:2px} body.jt-game .jt-guide .guide[hidden]{display:none} body.jt-game .jt-guide .guide:focus-visible{outline:2px solid var(--jt-gold);outline-offset:4px;border-radius:6px} body.jt-game .jt-guide .guide > section:first-child{padding-top:0;border-top:0} body.jt-game .jt-guide .keys{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 6px;font:400 15px/1.5 var(--jt-hand);color:rgba(251,236,208,.85)} body.jt-game .jt-guide .keys span{white-space:nowrap} body.jt-game .jt-guide kbd{font:500 12px/1 "IBM Plex Mono",monospace;padding:2px 5px;border-radius:5px;border:1px solid var(--jt-line);background:rgba(28,14,8,.6);color:var(--jt-cream)} /* The game's Start button in the Back / Next row: one line ("Start the haul · two players"), the row's height. */ body.jt-game .jt-card .js-nav > #start{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:18px!important;padding:10px 18px} /* The Play step's small "How to play" link. */ body.jt-game .jt-card .jt-howlink{all:unset;box-sizing:border-box;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:-4px;cursor:pointer; font:400 15px/1.2 var(--jt-h);letter-spacing:.03em;color:var(--jt-gold);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px} body.jt-game .jt-card .jt-howlink svg{flex:none;width:15px;height:15px} body.jt-game .jt-card .jt-howlink:hover{color:#ffd36b} body.jt-game .jt-card .jt-howlink:focus-visible{outline:2px solid var(--jt-gold);outline-offset:3px;border-radius:4px} body.jt-game .jt-card .guide section{border-color:var(--jt-line)} body.jt-game .jt-card .guide h3{font:400 20px/1.1 var(--jt-h);letter-spacing:.02em;color:var(--jt-gold)} body.jt-game .jt-card .guide p{font:400 16px/1.4 var(--jt-hand);letter-spacing:.015em;color:rgba(251,236,208,.85)} body.jt-game .jt-card .guide p b{font-weight:400;color:var(--jt-cream)} /* Results: one card in every game, docked right so the winner stays in view; a bottom sheet on phones. */ html body.jt-game #results{left:auto;right:24px;top:50%;bottom:auto;width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;translate:0 -46%;gap:12px;padding:24px 22px 20px} html body.jt-game #results.show{translate:0 -50%} html body.jt-game #results h2{font-size:clamp(30px,3vw,40px)!important;line-height:1!important;margin:6px 0 0} html body.jt-game #results :is(#standings,.stats){margin:0;padding:10px 0;display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--jt-line);border-bottom:1px solid var(--jt-line)} html body.jt-game #results .stats:empty{display:none} html body.jt-game #results :is(#standings li,.stats div){border-radius:10px;padding:5px 8px} html body.jt-game #results .stats div{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:baseline} html body.jt-game #results .stats div:has(dd+dd){grid-template-columns:minmax(0,1fr) auto auto} html body.jt-game #results .stats div.me{background:rgba(242,182,54,.14)} html body.jt-game #results .stats dt{font:400 16px/1.2 var(--jt-h);letter-spacing:.02em;text-transform:none;color:var(--jt-cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body.jt-game #results .stats dd{margin:0;font:500 12px/1.3 "IBM Plex Mono",ui-monospace,monospace;color:rgba(251,236,208,.78);text-align:right} @media (max-width:760px) and (min-height:541px){ html body.jt-game #results{left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:72vh;translate:0 12px} html body.jt-game #results.show{translate:0 0} } @media (max-height:540px){ html body.jt-game #results{top:8px;bottom:8px;right:8px;width:min(380px,52vw);max-height:none;translate:12px 0} html body.jt-game #results.show{translate:0 0} } /* ---------- Loader (public/jatra-loader.js): Boucha and Maicha walk down a street while a game or a square loads ---------- One component in two states, loading and error (.jl-error: they stop and turn round). Sizes come from its own box (container units), so the same markup fits a full screen, a game iframe, the #game overlay or a phone. The walk is pre-rendered from models/boucha.glb + maicha.glb: renders/loader-walk.webp (16 frames, 1 s) and renders/loader-idle.webp; bump their ?v= when they are re-rendered. */ .jl{--jl-walk:url(/renders/loader-walk.webp?v=1);--jl-idle:url(/renders/loader-idle.webp?v=1); --jl-skyline:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20530%20100%27%3E%3Cg%20fill%3D%27%232a170d%27%3E%20%3Cpath%20d%3D%27M0%20100V66h22l8-8%208%208h18v34z%27/%3E%3Cpath%20d%3D%27M58%20100V74h20v26z%27/%3E%20%3Cpath%20d%3D%27M84%20100V80h52v20z%27/%3E%3Cpath%20d%3D%27M76%2080l34-14%2034%2014z%27/%3E%3Cpath%20d%3D%27M90%2066h40v-6H90z%27/%3E%3Cpath%20d%3D%27M82%2060l28-12%2028%2012z%27/%3E%3Cpath%20d%3D%27M95%2048h30v-5H95z%27/%3E%3Cpath%20d%3D%27M88%2043l22-10%2022%2010z%27/%3E%3Cpath%20d%3D%27M108%2033v-8h4v8z%27/%3E%20%3Cpath%20d%3D%27M146%20100V70h34v30z%27/%3E%3Cpath%20d%3D%27M142%2070l21-10%2021%2010z%27/%3E%3Cpath%20d%3D%27M186%20100V78h22v22z%27/%3E%20%3Cpath%20d%3D%27M214%20100V68l22-38%2022%2038v32z%27/%3E%3Cpath%20d%3D%27M234%2030v-10h4v10z%27/%3E%3Cpath%20d%3D%27M206%20100V86h60v14z%27/%3E%20%3Cpath%20d%3D%27M270%20100V62h26v38z%27/%3E%3Cpath%20d%3D%27M266%2062l17-9%2017%209z%27/%3E%3Cpath%20d%3D%27M300%20100V72h30v28z%27/%3E%3Cpath%20d%3D%27M334%20100V80h18v20z%27/%3E%20%3Cpath%20d%3D%27M362%20100V82h48v18z%27/%3E%3Cpath%20d%3D%27M354%2082l32-13%2032%2013z%27/%3E%3Cpath%20d%3D%27M367%2069h38v-6h-38z%27/%3E%3Cpath%20d%3D%27M360%2063l26-11%2026%2011z%27/%3E%3Cpath%20d%3D%27M384%2052v-8h4v8z%27/%3E%20%3Cpath%20d%3D%27M424%20100V70h30v30z%27/%3E%3Cpath%20d%3D%27M420%2070l19-9%2019%209z%27/%3E%3Cpath%20d%3D%27M458%20100V76h24v24z%27/%3E%3Cpath%20d%3D%27M486%20100V64h26v36z%27/%3E%3Cpath%20d%3D%27M482%2064l17-9%2017%209z%27/%3E%3Cpath%20d%3D%27M512%20100V66h18v34z%27/%3E%20%3C/g%3E%3Cg%20fill%3D%27%233d2414%27%3E%3Cpath%20d%3D%27M100%2072h4v6h-4zM116%2072h4v6h-4zM154%2078h5v7h-5zM280%2070h5v7h-5zM372%2086h5v6h-5zM394%2086h5v6h-5zM432%2078h5v7h-5zM494%2072h5v7h-5zM8%2074h5v7h-5z%27/%3E%3C/g%3E%3C/svg%3E"); --jl-cobble:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2040%2020%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20fill%3D%27%2345271a%27%3E%20%3Crect%20x%3D%271%27%20y%3D%272%27%20width%3D%2717%27%20height%3D%277%27%20rx%3D%272.5%27/%3E%3Crect%20x%3D%2721%27%20y%3D%272%27%20width%3D%2717%27%20height%3D%277%27%20rx%3D%272.5%27/%3E%20%3Crect%20x%3D%27-9%27%20y%3D%2711%27%20width%3D%2717%27%20height%3D%277%27%20rx%3D%272.5%27/%3E%3Crect%20x%3D%2711%27%20y%3D%2711%27%20width%3D%2717%27%20height%3D%277%27%20rx%3D%272.5%27/%3E%3Crect%20x%3D%2731%27%20y%3D%2711%27%20width%3D%2717%27%20height%3D%277%27%20rx%3D%272.5%27/%3E%3C/g%3E%3C/svg%3E")} .jl{--cream:#fbecd0;--gold:#f2b636;--red:#b8302a;--ink:#3a1b0d; position:absolute;inset:0;container-type:size;overflow:hidden;display:grid;place-items:center; background:radial-gradient(70% 55% at 50% 42%,#3a2215 0%,#1c110b 70%);color:var(--cream); font-family:"Caveat Brush",cursive;opacity:1;transition:opacity .45s ease;-webkit-font-smoothing:antialiased} .jl.jl-full{position:fixed;z-index:9999} .jl.jl-out{opacity:0;pointer-events:none} .jl *{box-sizing:border-box} /* Swirl clouds drifting across the sky. */ .jl-cloud{position:absolute;width:max(90px,min(16cqw,24cqh));opacity:.5;animation:jl-drift 38s linear infinite} .jl-cloud.c1{top:9cqh;left:-20cqw} .jl-cloud.c2{top:20cqh;left:-20cqw;width:max(60px,min(10cqw,15cqh));opacity:.32;animation-duration:54s;animation-delay:-30s} @keyframes jl-drift{to{transform:translateX(140cqw)}} .jl-col{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;width:min(92cqw,720px);gap:max(6px,min(1.6cqh,14px))} .jl-mark{font:600 max(18px,min(4.6cqw,4cqh))/1.2 "Noto Sans Devanagari",sans-serif;color:#e9a341;letter-spacing:.02em} /* The street: skyline and cobbles slide left while Boucha and Maicha walk in place. */ .jl-stage{--sh:max(120px,min(40cqh,60cqw,340px));--kh:calc(var(--sh)*.8);--kw:calc(var(--kh)*1.02); position:relative;width:100%;height:var(--sh); -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)} /* Every moving part is a transform on an inner strip (), so it keeps moving on the compositor while the page's main thread is busy building the 3D world. */ .jl-sky,.jl-road,.jl-kids{overflow:hidden} .jl-sky>i,.jl-road>i,.jl-kids>i{position:absolute;left:0;top:0;height:100%;will-change:transform} .jl-sky{position:absolute;left:0;right:0;bottom:15%;height:calc(var(--sh)*.5)} .jl-sky>i{width:calc(100% + var(--sh)*2.65);background:var(--jl-skyline) 0 100%/auto 100% repeat-x;animation:jl-pan 46s linear infinite} @keyframes jl-pan{to{transform:translateX(calc(var(--sh)*-2.65))}} .jl-road{position:absolute;left:0;right:0;bottom:3%;height:calc(var(--sh)*.13);border-radius:50%/40%;background:#2e180c} .jl-road>i{width:calc(100% + var(--sh)*.26);background:var(--jl-cobble) 0 50%/calc(var(--sh)*.26) 100% repeat-x;animation:jl-roll .42s linear infinite} @keyframes jl-roll{to{transform:translateX(calc(var(--sh)*-.26))}} .jl-shadow{position:absolute;left:calc(50% - var(--kw)*.36);bottom:6%;width:calc(var(--kw)*.72);height:calc(var(--sh)*.07);border-radius:50%; background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent)} .jl-kids{position:absolute;left:calc(50% - var(--kw)/2);bottom:6%;width:var(--kw);height:var(--kh)} .jl-kids>i{width:1600%;background:var(--jl-walk) 0 0/100% 100% no-repeat;animation:jl-walk 1s steps(16) infinite} @keyframes jl-walk{to{transform:translateX(-100%)}} .jl-title{margin:max(2px,1cqh) 0 0;font:400 max(30px,min(8cqw,7.4cqh))/1.02 Chewy,cursive;letter-spacing:.01em;color:var(--cream); transform:rotate(-1.6deg);text-wrap:balance;text-shadow:0 1px 0 #fff7e6,0 3px 0 #6b3218,0 5px 0 var(--ink),0 12px 22px rgba(0,0,0,.5)} .jl-line{margin:0;font-size:max(17px,min(3.8cqw,3.4cqh));line-height:1.2;color:#f6e8d0;text-shadow:0 2px 3px rgba(0,0,0,.55);min-height:1.2em} .jl-prog{--bw:min(calc(92cqw - 84px),460px);display:flex;align-items:center;gap:14px;margin-top:max(4px,1.2cqh)} .jl-bar{position:relative;width:var(--bw);height:max(12px,min(2.4cqh,16px))} .jl-bar svg{position:absolute;left:0;top:0;width:var(--bw);height:100%;display:block} .jl-fill{position:absolute;left:0;top:0;height:100%;width:0;overflow:hidden;transition:width .3s ease-out} .jl-pct{min-width:3.2em;text-align:left;font:400 max(18px,min(4cqw,3.6cqh))/1 Chewy,cursive;color:var(--gold);text-shadow:0 2px 0 var(--ink)} .jl-tip{position:absolute;left:0;right:0;bottom:max(14px,4cqh);padding:0 16px;text-align:center;font-size:max(15px,min(3cqw,2.6cqh));color:rgba(246,232,208,.82);transition:opacity .4s} .jl-tip b{font:400 1em Chewy,cursive;color:var(--gold);letter-spacing:.03em} /* Error: they stop, turn round and look at you. */ .jl-err{display:none;flex-direction:column;align-items:center;gap:max(8px,1.4cqh)} .jl-msg{margin:0;max-width:30em;font-size:max(17px,min(3.6cqw,3.2cqh));line-height:1.25;color:#f6e8d0} .jl-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:4px} .jl-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px; border:2.5px solid #f1dcb6;font:400 max(17px,min(3.4cqw,2.8cqh))/1 Chewy,cursive;letter-spacing:.03em;box-shadow:0 6px 16px rgba(0,0,0,.45);transition:background .15s,border-color .15s,color .15s} .jl-btn svg{width:1.1em;height:1.1em} .jl-retry{background:var(--red);color:#fff6e6} .jl-retry:hover{background:#c93a33;border-color:var(--gold)} .jl-back{background:rgba(28,14,8,.85);color:var(--cream)} .jl-back:hover{border-color:var(--gold);color:var(--gold)} .jl-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .jl-code{font:500 12px/1 "IBM Plex Mono",monospace;color:rgba(251,236,208,.62)} .jl-bubble{display:none;position:absolute;left:calc(50% + var(--kw)*.27);bottom:calc(6% + var(--kh)*.93);width:calc(var(--sh)*.2);height:calc(var(--sh)*.2); border-radius:50%;background:var(--cream);border:2.5px solid var(--ink);place-items:center;font:400 calc(var(--sh)*.14)/1 Chewy,cursive;color:var(--red); box-shadow:0 4px 10px rgba(0,0,0,.4);animation:jl-pop 2.4s ease-in-out infinite} .jl-bubble::after{content:"";position:absolute;left:12%;bottom:-14%;width:22%;height:22%;border-radius:50%;background:var(--cream);border:2px solid var(--ink)} @keyframes jl-pop{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-6%) rotate(6deg)}} .jl.jl-error .jl-kids{background:var(--jl-idle) 50% 100%/auto 100% no-repeat;animation:jl-breathe 3.2s ease-in-out infinite;transform-origin:50% 100%} .jl.jl-error .jl-kids>i{display:none} @keyframes jl-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012)}} .jl.jl-error :is(.jl-sky>i,.jl-road>i,.jl-cloud){animation-play-state:paused} .jl.jl-error :is(.jl-line,.jl-prog,.jl-tip){display:none} .jl.jl-error .jl-err{display:flex} .jl.jl-error .jl-bubble{display:grid} @container (max-height:470px){.jl-tip{display:none}.jl-mark{display:none}} @media (prefers-reduced-motion:reduce){.jl *{animation:none!important}} /* While a page loader is up: the account chip waits, and the old text labels it replaces stay hidden. */ html.jl-busy .ja-chip{visibility:hidden} #game{background:var(--jt-bg)!important} #game .jd-loading{display:none!important} /* Fallback if jatra-loader.js doesn't run: the games' plain #loading text, as before. */ html body:has(#stage) #loading{background:var(--jt-bg);color:rgba(251,236,208,.78);font:500 12px/1.5 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.02em;text-transform:none;text-align:center;padding:24px} /* In-game HUD panels: the same walnut card in every game; Biska's paper panels turn dark with its palette swapped. */ body.jt-game #hud :is(.glass,.panel){background:rgba(28,14,8,.8)!important;border:2px solid var(--jt-line)!important;border-radius:14px!important;box-shadow:0 6px 18px rgba(0,0,0,.35)!important;color:var(--jt-cream);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} body.jt-game #hud #timer{font-family:var(--jt-h)!important;font-weight:400!important;letter-spacing:.04em} body.jt-light #hud .panel{--ink:#fbecd0;--walnut:#fbecd0;--sand:rgba(251,236,208,.7);--line:rgba(241,220,182,.22);--beige:rgba(251,236,208,.14);--thane:#9cbcf0;--kone:#f29a80} body.jt-light #hud .tools button:hover{background:rgba(241,220,182,.12)} /* Phones (landscape): the map preview is a slim strip so the map stays visible. */ @media (max-height:540px){ html body.jt-game #mappanel{top:8px!important;bottom:8px!important;left:8px!important;right:auto!important;width:min(230px,32vw)!important;max-height:none!important;overflow:auto;padding:10px 12px!important;gap:8px!important} body.jt-game #mappanel h2{font-size:20px!important;margin:0!important} body.jt-game #mappanel .eyebrow{font-size:12px!important} body.jt-game #mappanel .note{font-size:11px} body.jt-game #mappanel .note:not(#map-len){display:none} body.jt-game #mappanel #cp-list{gap:3px} body.jt-game #mappanel #cp-list li{grid-template-columns:20px minmax(0,1fr) auto;gap:6px;padding:4px 6px;font-size:11px} body.jt-game #mappanel #cp-list b{width:18px;height:18px;font-size:10px} body.jt-game #mappanel .row .btn{padding:7px 10px!important;font-size:14px!important} body.jt-game #map-labels .ml{font-size:10px;padding:2px 7px 2px 2px} body.jt-game #map-labels .ml b{width:15px;height:15px;font-size:9px} html body.jt-game #lobby.js-steps{top:8px} /* The card head stays short so the step list and Back / Next fit: no route line here; smaller pill and icons. */ body.jt-game #lobby .js-head #route-line{display:none} body.jt-game .jt-top{min-height:34px;padding-right:36px;gap:6px} body.jt-game .jt-card .jt-top .jn-back{height:34px;font-size:15px;padding:0 12px 0 8px} body.jt-game .jt-tools{gap:6px} body.jt-game .jt-card .jt-ic,body.jt-game #lobby .js-head .ja-trophy{width:30px;height:30px} body.jt-game #lobby .js-head .ja-acct.ja-in-ok{top:2px;padding:0} body.jt-game #lobby h1,body.jt-game #lobby-title{font-size:24px!important} /* The round icons (How to play, trophy…) sit next to ‹ Games, not floating at the column's edge: the head is a wrapping row with the top row and the signed-in trophy on the first line, the title and the sign-in box below. (CSS only: jatra-steps.js keepAcct() puts .ja-acct back in the head if it is moved.) */ body.jt-game #lobby .js-head{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:6px} body.jt-game #lobby .js-head > *{flex:1 1 100%;order:2} body.jt-game #lobby .js-head > .jt-top{flex:0 1 auto;order:0;padding-right:0} body.jt-game #lobby .js-head > .jt-top.jt-empty{display:none} body.jt-game #lobby .js-head .jt-tools{margin-left:0} body.jt-game #lobby .js-head > .ja-acct.ja-in-ok{position:static;flex:none;order:1} body.jt-game #lobby .js-head > .ja-acct:not(.ja-in-ok){order:3} } /* ---------- Lobby cards: name gets the full width; the arrow is a badge in the top-right corner ---------- */ main.lb .lb-txt{padding:clamp(14px,2vw,30px)} main.lb .lb-go{top:clamp(10px,1.2vw,18px);right:clamp(10px,1.2vw,18px);bottom:auto;width:clamp(38px,3.2vw,56px);height:clamp(38px,3.2vw,56px)} main.lb .lb-card:hover .lb-go,main.lb .lb-card:focus-visible .lb-go{transform:translateX(3px)} main.lb .lb-shade{background: linear-gradient(180deg,rgba(28,14,8,.35) 0%,rgba(28,14,8,0) 22%), radial-gradient(120% 55% at 12% 100%,rgba(74,38,20,.85) 0%,rgba(74,38,20,.45) 45%,rgba(74,38,20,0) 75%), linear-gradient(0deg,rgba(40,20,10,.75) 0%,rgba(40,20,10,.2) 32%,rgba(40,20,10,0) 52%)} main.lb .lb-txt h2{max-width:100%} @media (max-height:540px),(max-width:900px){ main.lb .lb-txt{padding:12px 12px 14px} main.lb .lb-txt h2{font-size:clamp(14px,min(2.1vw,4.4vh),24px)} main.lb .lb-txt h2::first-line{font-size:1.6em} main.lb .lb-go svg{stroke-width:2.8} } /* ---------- Fewer on-screen hints (2026-11-06) ---------- Worlds: no "Click to look around" button in walk mode (clicking the scene still locks the mouse), and no empty hint strip once the keyboard hints have faded. Games: no KM/H speed readout, no WASD strip in the bottom bar, no WASD help panel while playing. */ body.jh #lock-hint{display:none!important} body.jh.jh-keys-off #walk-hint{display:none!important} .hud-bottom .spd,.hud-bottom .hint,.hud-bottom .spd+.vsep,.hud-bottom .vsep:has(+.hint){display:none!important} #help.panel{display:none!important} /* ---------- Step counter (jatra-pedometer.js): a pill left of the north arrow while walking ---------- Tapping it opens the Steps tab of the leaderboard (top 10 walkers). Above the header bar (z-index 5), which spans the top. */ #jh-steps{all:unset;box-sizing:border-box;cursor:pointer;position:fixed;z-index:6;top:72px;right:64px;display:flex;align-items:center;gap:6px;height:34px;padding:0 13px 0 10px;border-radius:999px;border:2px solid var(--jt-edge);background:rgba(28,14,8,.85);color:var(--jt-cream);box-shadow:0 4px 12px rgba(0,0,0,.4);font:400 16px/1 var(--jt-h);letter-spacing:.02em;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .15s} #jh-steps[hidden],body.touring #jh-steps,body.no3d #jh-steps{display:none} #jh-steps svg{flex:none;width:17px;height:17px;color:var(--jt-gold)} #jh-steps b{font-weight:400;font-variant-numeric:tabular-nums} #jh-steps span{font-size:13px;color:rgba(251,236,208,.72)} #jh-steps:hover{border-color:var(--jt-gold)} #jh-steps:focus-visible{outline:2px solid var(--jt-gold);outline-offset:2px} body.jh #jh-steps[data-tip]::after{left:auto;right:0;translate:0 -2px} @media (hover:hover){body.jh #jh-steps[data-tip]:hover::after{translate:0 0}} @media (min-width:761px){body.jh:has(#card.open) #jh-steps{visibility:hidden}} @media (max-width:760px), (pointer:coarse) and (max-height:540px){ #jh-steps{top:50px;right:46px;height:28px;padding:0 10px 0 8px;gap:5px;font-size:14px;border-width:1.5px} #jh-steps svg{width:14px;height:14px} #jh-steps span{display:none} } /* ---------- The way back (jatra-nav.js, 2026-11-06) ---------- One pill in the top-left corner of every page below Home, saying where it goes: ‹ Home on /places and /games, ‹ Places or ‹ Games in a world, the place's name in a game (‹ Bhaktapur; jatra-gameui.js) or ‹ Games when it was opened from the Games page, ‹ Back on the Leaderboard / Privacy / Contributors pages. The pagoda logo next to it is always Home. */ .jn-back{box-sizing:border-box;display:inline-flex;align-items:center;gap:7px;height:clamp(40px,3vw,50px);padding:0 18px 0 12px;border-radius:999px;border:2px solid var(--jt-edge);background:rgba(28,14,8,.85);color:var(--jt-cream);box-shadow:0 4px 12px rgba(0,0,0,.4);font:400 clamp(16px,1.25vw,21px)/1 var(--jt-h);letter-spacing:.03em;text-transform:none;text-decoration:none;white-space:nowrap;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:border-color .15s,color .15s,transform .15s} .jn-back svg{flex:none;width:1.15em;height:1.15em} .jn-back:hover,.jn-back:focus-visible{border-color:var(--jt-gold);color:var(--jt-gold);transform:translateX(-2px);outline:0} .jn-back:focus-visible{box-shadow:0 0 0 3px rgba(242,182,54,.45),0 4px 12px rgba(0,0,0,.4)} @media (prefers-reduced-motion:reduce){.jn-back:hover,.jn-back:focus-visible{transform:none}} /* /places and /games: in the eyebrow's slot, level with the middle of the pagoda. */ main.lb .lb-eye.jn-eye{display:flex;padding-top:0} /* Leaderboard, Privacy, Contributors: right of the pagoda (a.logo, 7vw wide), level with its middle. */ .jn-back.jn-corner{position:absolute;z-index:5;left:calc(max(clamp(8px,2.4vw,44px),env(safe-area-inset-left)) + clamp(76px,7vw,118px) + 8px);top:calc(max(8px,env(safe-area-inset-top)) + clamp(76px,7vw,118px)*.373 - clamp(40px,3vw,50px)/2)} /* Narrow phones: no room for pagoda + pill + the top-right chip, so the pill takes the pagoda's spot. */ @media (max-width:480px){ body>a.logo:has(+.jn-corner){display:none} .jn-back.jn-corner{left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top))} } /* World welcome screen: right of the pagoda. */ #welcome .w-place.jh-wp{justify-content:flex-start;align-items:center;gap:8px} /* World HUD: first in the top-left row (the Map tile follows it in walk mode), the height of the HUD tiles. */ body.jh .jh-home .jn-back{height:44px;font-size:18px} body.touring .jh-home .jn-back{display:none} @media (max-width:760px), (pointer:coarse) and (max-height:540px){ .jn-back{height:36px;padding:0 13px 0 9px;gap:5px;font-size:15px;border-width:1.5px} body.jh .jh-home .jn-back{height:34px;font-size:14px} } /* ---------- Game screens in play (2026-11-06): the storybook look on the HUD, countdown, banners, touch controls and results of all six games. jatra-gameui.js sets body.jt-game and body.jt-g- (pulukisi, khat, rally, narival, ngya, bisket), and data-off on the HUD's sound / music buttons. Presentation only. ---------- */ /* One gold and one red in every game (each export brought its own). Biska keeps its Thane blue and Kone rust. */ body.jt-game{--gold:var(--jt-gold);--jt-stroke:-1px -1px 0 var(--jt-ink),1px -1px 0 var(--jt-ink),-1px 1px 0 var(--jt-ink),1px 1px 0 var(--jt-ink),0 3px 0 var(--jt-ink),0 8px 18px rgba(0,0,0,.5)} body.jt-game:not(.jt-g-bisket){--brick:var(--jt-red)} body.jt-game:not(.jt-light){--sand:rgba(251,236,208,.72);--dim:rgba(251,236,208,.74);--mute:rgba(251,236,208,.58)} /* HUD labels ("Lap", "Checkpoint", "Round", "Stamina"…): the heading font in gold, no capitals or wide tracking. */ body.jt-game #hud :is(.lapbox small,.cpbox small,.legbox small,.chip small,.label,#me-box .k,#boost,.team h4 span,#dist,#counter,#cp-next,#gate-dist,#me-role:not(:empty)){font-family:var(--jt-h)!important;font-weight:400!important;font-size:14px!important;letter-spacing:.03em!important;text-transform:none!important;color:var(--jt-gold)} body.jt-game #hud :is(#cp-next,#gate-dist,#counter,#dist){color:rgba(251,236,208,.8)!important} /* HUD numbers and names: the heading font, figures that don't jump. */ body.jt-game #hud :is(.lapbox b,.chip b,#timer,#cp-n,#leg,.ends b,.team h4,#board .pos,#board .lp,#board li b,#grab-cd,#ab,#push,#me-side,#hidden-tag){font-family:var(--jt-h)!important;font-weight:400!important;letter-spacing:.02em;font-variant-numeric:tabular-nums} body.jt-g-ngya #hud #me-role{font-family:var(--jt-h)!important;font-size:22px!important;color:var(--jt-cream)} body.jt-game #hud .lapbox b{font-size:44px!important;line-height:.95!important} body.jt-game #hud .lapbox b span:not(#lap):not(#pos){font-family:var(--jt-h)!important;font-size:.5em!important;color:rgba(251,236,208,.6)!important} body.jt-game #hud .chip b{font-size:26px} body.jt-game #hud #timer.low{color:#ff8a70} body.jt-game #hud #board .nm,body.jt-game #hud .team li{font-family:var(--jt-h);letter-spacing:.02em;font-size:14px} body.jt-game #hud #board li{border-radius:8px} body.jt-game #hud #board li.me{background:rgba(242,182,54,.18)} body.jt-game #hud :is(.cpbar,#boost span,.bar){border-radius:999px} /* The event feed: small walnut tags with a coloured edge. */ body.jt-game #hud #feed div{border-radius:10px;background:rgba(28,14,8,.82);border:1.5px solid var(--jt-line);border-left-width:4px;font:400 14px/1.2 var(--jt-h);letter-spacing:.02em;color:var(--jt-cream)} /* Big words over the game: countdown, lap and gate flashes, banners, status. Cream with an ink outline. */ body.jt-game #count{font-family:var(--jt-h)!important;font-size:clamp(110px,20vw,240px)!important;color:var(--jt-cream)!important;text-shadow:-3px -3px 0 var(--jt-ink),3px -3px 0 var(--jt-ink),-3px 3px 0 var(--jt-ink),3px 3px 0 var(--jt-ink),0 8px 0 var(--jt-ink),0 18px 40px rgba(0,0,0,.55)!important} body.jt-game #count.go{color:var(--jt-gold)!important;font-size:clamp(90px,15vw,190px)!important} body.jt-game :is(#flash,#lapflash,#status,#banner>b,#tp-place){font-family:var(--jt-h)!important;font-weight:400!important;letter-spacing:.02em;color:var(--jt-cream);text-shadow:var(--jt-stroke)!important} body.jt-game :is(#flash,#lapflash){color:var(--jt-gold)} body.jt-game #banner>small{font:400 17px/1.2 var(--jt-hand)!important;letter-spacing:.02em!important;text-transform:none!important;color:var(--jt-gold)!important;text-shadow:0 2px 3px rgba(0,0,0,.6)} body.jt-game #hud #banner.panel{border-color:var(--jt-edge)!important;border-radius:18px!important} body.jt-game #hud #status.panel{font-family:var(--jt-h);font-weight:400;font-size:15px;letter-spacing:.02em;text-shadow:none!important} /* Warnings: a red pill (wrong way) and a walnut pill (off the route). */ body.jt-game :is(#wrong,#off){padding:9px 20px!important;border-radius:999px!important;border:2px solid var(--jt-edge);font:400 18px/1.15 var(--jt-h)!important;letter-spacing:.03em!important;color:#fff6e6;box-shadow:0 6px 18px rgba(0,0,0,.4)} body.jt-game #wrong{background:var(--jt-red)!important} body.jt-game #off{background:rgba(28,14,8,.88)!important} body.jt-game #off kbd{font:600 12px "IBM Plex Mono",monospace;padding:1px 5px;border-radius:5px;background:rgba(251,236,208,.14)} /* The HUD's sound / music / back-on-route / view / leave buttons: round icon buttons, words kept for screen readers and as the tooltip. */ body.jt-game #hud .tools{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0!important;gap:8px!important} body.jt-game #hud .tools button{all:unset;box-sizing:border-box;cursor:pointer;position:relative;width:42px;height:42px;border-radius:50%;border:2px solid var(--jt-edge);background:rgba(28,14,8,.85);color:var(--jt-cream);box-shadow:0 4px 12px rgba(0,0,0,.4);font-size:0;-webkit-tap-highlight-color:transparent;transition:border-color .15s,color .15s,transform .1s} body.jt-game #hud .tools button::before{content:"";position:absolute;inset:0;margin:auto;width:19px;height:19px;background:currentColor;-webkit-mask:var(--jt-i) center/contain no-repeat;mask:var(--jt-i) center/contain no-repeat} body.jt-game #hud .tools button:hover,body.jt-game #hud .tools button:focus-visible{border-color:var(--jt-gold);color:var(--jt-gold);background:rgba(28,14,8,.85);outline:0} body.jt-game #hud .tools button:active{transform:scale(.93)} body.jt-game #hud .tools #mute{--jt-i:var(--jt-i-snd)} body.jt-game #hud .tools #mute[data-off]{--jt-i:var(--jt-i-snd-off)} body.jt-game #hud .tools #music{--jt-i:var(--jt-i-mus)} body.jt-game #hud .tools #music[data-off]{--jt-i:var(--jt-i-mus-off)} body.jt-game #hud .tools :is(#mute,#music)[data-off]{color:rgba(251,236,208,.55)} body.jt-game #hud .tools #reset{--jt-i:var(--jt-i-reset)} body.jt-game #hud .tools #view{--jt-i:var(--jt-i-view)} body.jt-game #hud .tools #leave{--jt-i:var(--jt-i-leave);color:#ffb3a6} body.jt-game #hud .tools #leave:hover,body.jt-game #hud .tools #leave:focus-visible{border-color:var(--jt-red);background:var(--jt-red);color:#fff6e6} /* Touch controls: chunky walnut buttons with a cream rim; the go / main action is red; held = gold. */ body.jt-game #touch :is(button,.tb){box-sizing:border-box;background:rgba(28,14,8,.72)!important;border:2.5px solid var(--jt-edge)!important;color:var(--jt-cream)!important;font:400 15px/1 var(--jt-h)!important;letter-spacing:.03em!important;text-transform:none!important;box-shadow:0 5px 14px rgba(0,0,0,.4);transition:transform .08s,background .1s} body.jt-game #touch :is(button,.tb):active{transform:scale(.93)} body.jt-game #touch :is([data-touch="u:1"],#b-grab,#b-ab){background:var(--jt-red)!important;color:#fff6e6!important} body.jt-game #touch :is([data-touch="s:1"],[data-touch="s:-1"]){font-size:20px!important} body.jt-game #touch :is(button,.tb).on{background:var(--jt-gold)!important;border-color:var(--jt-cream)!important;color:var(--jt-ink)!important} body.jt-game #touch #joy{border:2.5px solid var(--jt-edge)!important;background:rgba(28,14,8,.42)!important;box-shadow:0 5px 14px rgba(0,0,0,.35)} body.jt-game #touch #joy i{background:var(--jt-cream)!important;box-shadow:0 0 0 3px var(--jt-ink),0 3px 8px rgba(0,0,0,.4)} /* Results: position numbers in the heading font; the winner's row in gold; your row tinted. */ body.jt-game #results :is(#champ-time,#champ-sub,.sub){font-family:var(--jt-hand)!important;font-size:17px!important;letter-spacing:.02em;color:rgba(251,236,208,.85)!important} body.jt-game #results #standings li{border-radius:10px;padding:6px 8px;font:400 15px/1.2 var(--jt-h);letter-spacing:.02em} body.jt-game #results #standings li:first-child{background:rgba(242,182,54,.16);color:var(--jt-gold)} body.jt-game #results #standings li.me{box-shadow:inset 0 0 0 2px rgba(242,182,54,.55)} body.jt-game #results #standings :is(.pos,b){font-family:var(--jt-h)!important;font-weight:400!important;font-size:15px!important;font-variant-numeric:tabular-nums} body.jt-game #results #standings em{font:400 12px var(--jt-hand)!important;text-transform:none!important} body.jt-game #results .stats div{border-radius:10px;padding:5px 8px;font:400 15px/1.2 var(--jt-h);letter-spacing:.02em} body.jt-game #results .stats div:first-child{background:rgba(242,182,54,.16);color:var(--jt-gold)} body.jt-game #results .stats dd{font-family:var(--jt-h)!important;font-size:14px!important;font-variant-numeric:tabular-nums} body.jt-game #results :is(#standings,.stats){border-color:var(--jt-line)!important} @media (prefers-reduced-motion:reduce){body.jt-game :is(#touch button,#touch .tb,#hud .tools button){transition:none}body.jt-game :is(#touch button,#touch .tb,#hud .tools button):active{transform:none}} /* Phones */ @media (max-width:760px),(max-height:540px){ body.jt-game #hud .tools button{width:36px;height:36px} body.jt-game #hud .tools button::before{width:16px;height:16px} body.jt-game #hud .tools{gap:6px!important} body.jt-game #hud .lapbox b{font-size:32px!important} body.jt-game #hud .chip b{font-size:20px} body.jt-game #hud :is(.lapbox small,.cpbox small,.legbox small,.chip small,.label,#me-box .k,#boost,#counter,#cp-next,#gate-dist,#dist){font-size:12.5px!important} body.jt-game #hud #feed div{font-size:12.5px} body.jt-game :is(#wrong,#off){font-size:15px!important;padding:7px 14px!important;white-space:nowrap} body.jt-game #touch :is(button,.tb){font-size:13px!important} /* Bhintuna: the three chips in one slim row (the icon buttons stay in their row under the touch controls). */ body.jt-g-rally #hud .chips{gap:4px;margin-top:6px} body.jt-g-rally #hud .chip{min-width:0;padding:4px 8px;flex-direction:row;align-items:baseline;gap:5px} body.jt-g-rally #hud .chip b{font-size:16px} body.jt-g-rally #hud .chip small{font-size:11px!important} } /* The HUD icons (lucide), as masks. */ body.jt-game{ --jt-i-snd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E"); --jt-i-snd-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='m22 9-6 6'/%3E%3Cpath d='m16 9 6 6'/%3E%3C/svg%3E"); --jt-i-mus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E"); --jt-i-mus-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3Cpath d='M2 2l20 20'/%3E%3C/svg%3E"); --jt-i-leave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E"); --jt-i-reset:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E"); --jt-i-view:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } /* An empty status line (between rounds, during the countdown) shows no empty pill. */ body.jt-game #hud #status:empty{display:none} /* Narival on a phone held sideways: the round chips stay centred (Sound / Leave are small icons now) and the scoreboard sits in the top-right corner, so the two no longer overlap. */ @media (max-height:540px){ body.jt-g-narival.touch #hud .hud-top{left:50%;right:auto;translate:-50% 0;align-items:center} body.jt-g-narival #hud #board-wrap{top:12px;bottom:auto} } /* Pulukisi and Bhintuna on a touch phone held sideways: the minimap moves up under the left-hand boxes and shrinks, clear of the steering buttons (it sat under them); no keyboard key in the Charge / Shove label. */ @media (pointer:coarse) and (max-height:540px){ body:is(.jt-g-rally,.jt-g-pulukisi) #hud #mmwrap{top:142px;bottom:auto;left:12px;width:96px;height:auto;padding:4px} body.jt-g-pulukisi #hud #mmwrap{top:184px} body:is(.jt-g-rally,.jt-g-pulukisi) #hud #mmwrap canvas{display:block;width:100%;height:auto} body.jt-game #hud #push kbd{display:none} } /* Lobby turntables (jatra-turntable.js): your khat (Sindur), your pulukisi (Pulukisi Rush) or your character (Ngyā Lākegu) in 3D above the picker; beside it on a phone held sideways. */ body.jt-game .pv-pick{display:flex;flex-direction:column;gap:10px} body.jt-game .pv-side{display:flex;flex-direction:column;gap:8px;min-width:0} body.jt-game .pv-side > *{margin-top:0;margin-bottom:0} body.jt-game .pv-3d{position:relative;height:210px;border-radius:14px;border:2px solid var(--jt-line);overflow:hidden; background:radial-gradient(75% 65% at 50% 38%,rgba(242,182,54,.2),rgba(28,14,8,.6) 75%)} body.jt-game .pv-3d canvas{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y} body.jt-game .pv-3d canvas:active{cursor:grabbing} body.jt-game .pv-3d b{position:absolute;left:12px;top:9px;right:12px;font:400 19px/1.1 var(--jt-h);letter-spacing:.02em;color:var(--jt-cream);text-shadow:0 2px 0 var(--jt-ink),0 4px 10px rgba(0,0,0,.5);pointer-events:none} body.jt-game .pv-3d small{position:absolute;left:0;right:0;bottom:6px;text-align:center;font:400 13px/1 var(--jt-hand);color:rgba(251,236,208,.62);pointer-events:none} @media (max-height:540px){ body.jt-game .pv-pick{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch;gap:10px;flex:1 1 auto} body.jt-game #lobby .js-step > :is(.sect,.opt):has(.pv-pick){flex:1 1 auto;display:flex;flex-direction:column} body.jt-game .pv-3d{height:auto;min-height:190px} body.jt-game .pv-pick :is(#khats,#chars){grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:6px} body.jt-game .pv-pick .kv{padding:4px 4px 5px} html body.jt-game #lobby.js-steps .pv-pick .kv :is(img,canvas){height:min(58px,15vh)} body.jt-game #lobby .js-step:has(.pv-pick) :is(.sect,.opt) > .note,body.jt-game .pv-side > .note:not(#role-blurb){display:none} /* Ngyā: the three role cards and the mask colours in the narrow column */ body.jt-game .pv-pick .role{padding:6px 4px 6px;gap:2px} body.jt-game .pv-pick .role canvas{width:min(40px,10vh);height:min(40px,10vh)} body.jt-game .pv-pick .role b{font-size:15px} body.jt-game .pv-pick .role small{font-size:9px;letter-spacing:.04em} body.jt-game .pv-pick #role-blurb{min-height:0;font-size:12px;line-height:1.3} body.jt-game .pv-pick .vars{flex-wrap:wrap;gap:6px} body.jt-game .pv-pick .sw{width:24px;height:24px} } /* Bhintuna touch controls: steering on the left; on the right a thumb cluster — Go big in the corner, Brake beside it, Horn (Cheer for walkers / riders) and Run (walkers) above them. Held low in the corners, clear of the role pill in the middle. (No music button: the M key still toggles it.) */ @media (pointer:coarse){ body.jt-g-rally #touch{left:var(--jt-l,12px);right:var(--jt-r,12px);bottom:calc(var(--jt-b,8px) + 6px);align-items:flex-end} body.jt-g-rally #touch > div:first-child{gap:12px} body.jt-g-rally #touch > div:first-child button{width:68px;height:68px} body.jt-g-rally #touch .pedals{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;gap:10px 12px;align-items:end;justify-items:center} body.jt-g-rally #touch .pedals [data-touch="u:1"]{grid-area:2/2;width:80px;height:80px;font-size:18px!important} body.jt-g-rally #touch .pedals [data-touch="u:-1"]{grid-area:2/1;width:62px;height:62px} body.jt-g-rally #touch .pedals #b-horn{grid-area:1/1;width:52px;height:52px;font-size:12.5px!important} body.jt-g-rally #touch .pedals [data-touch="b:1"]{grid-area:1/2;width:58px;height:58px} body.jt-g-rally:is([data-role="passenger"],[data-role="spectator"]) #touch .pedals #b-horn{grid-area:2/2;width:70px;height:70px;font-size:15px!important} } /* A narrow screen held upright: the corners can't clear the role pill, so the controls stay above it. */ @media (pointer:coarse) and (max-width:600px){body.jt-g-rally #touch{bottom:84px}} /* Phones: the "1 in the race · 6 vehicles · …" line is lobby information; the strip keeps leg, time and points. */ @media (max-width:860px),(max-height:540px){html body.jt-g-rally #hud #counter{display:none!important}} /* Biska's Heave pad: its word in the heading font, the key in small letters, a cream rim like the touch buttons. */ body.jt-game #pads .core{border:2.5px solid var(--jt-edge)} body.jt-game #pads .core b{font:400 24px/1 var(--jt-h)!important;letter-spacing:.03em} body.jt-game #pads .core small{font:400 12px/1 var(--jt-h)!important;letter-spacing:.04em!important;text-transform:none!important} body.jt-game #pads .who{font:400 14px/1.1 var(--jt-h);letter-spacing:.02em;color:var(--jt-cream);text-shadow:var(--jt-stroke)} @media (pointer:coarse){body.jt-game #pads .core small{display:none}} /* Ngyā's side tag ("Fish" / "Hunter") in the heading font, not capitals. */ body.jt-game #hud #me-side{font-size:13px!important;text-transform:none!important;letter-spacing:.03em!important} /* ---------- Phone HUD (2026-11-07): one layout for all six games on a phone ---------- Corners: top-left holds the minimap behind a map button (Ngyā, Pulukisi, Bhintuna) or the scoreboard (Narival, Sindur); top-right a gear (jatra-gameui.js) that drops down the sound / music / back-on-route / view / leave buttons. Top centre: the game's numbers in one slim strip. Bottom: only the controls, the slim power bar and event lines. Event lines fade after 2 s at every size. Desktop keeps its own layout. */ body.jt-game #hud #feed>div{transition:opacity .3s,translate .3s} body.jt-game #hud #feed>div.jt-out{opacity:0;translate:-8px 0} body.jt-game #hud :is(.jt-gear,.jt-mapbtn){display:none} @media (max-width:860px),(max-height:540px){ body.jt-game{--jt-t:max(8px,env(safe-area-inset-top));--jt-l:max(8px,env(safe-area-inset-left));--jt-r:max(8px,env(safe-area-inset-right));--jt-b:max(8px,env(safe-area-inset-bottom));--jt-strip:rgba(28,14,8,.78)} /* -- The corner buttons: gear (top-right) and map (top-left) -- */ html body.jt-game #hud :is(.jt-gear,.jt-mapbtn){all:unset;box-sizing:border-box;position:fixed;z-index:6;top:var(--jt-t);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:2px solid var(--jt-edge);background:rgba(28,14,8,.85);color:var(--jt-cream);box-shadow:0 4px 12px rgba(0,0,0,.4);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .15s,color .15s,background .15s} html body.jt-game #hud .jt-gear{right:var(--jt-r)} html body.jt-game #hud .jt-mapbtn{left:var(--jt-l)} html body.jt-game #hud :is(.jt-gear,.jt-mapbtn) svg{width:18px;height:18px;transition:rotate .25s} html body.jt-game #hud :is(.jt-gear,.jt-mapbtn):focus-visible,html body.jt-game.jt-menu-open #hud .jt-gear{border-color:var(--jt-gold);color:var(--jt-gold);outline:0} html body.jt-game.jt-menu-open #hud .jt-gear svg{rotate:60deg} html body.jt-game.jt-map-open #hud .jt-mapbtn{background:var(--jt-gold);border-color:var(--jt-cream);color:var(--jt-ink)} html body.jt-game:has(#results.show) #hud :is(.jt-gear,.tools,.jt-mapbtn,#mmwrap,#mm-wrap){display:none!important} /* The gear's menu: the tool buttons as rows (icon + the words the game writes in them: "Sound on", "Leave"…) */ html body.jt-game #hud .tools{position:fixed!important;z-index:6;top:calc(var(--jt-t) + 44px)!important;right:var(--jt-r)!important;left:auto!important;bottom:auto!important;display:flex;flex-direction:column;align-items:stretch;gap:2px!important;min-width:172px;padding:5px!important;background:rgba(28,14,8,.94)!important;border:2px solid var(--jt-edge)!important;border-radius:16px!important;box-shadow:0 10px 26px rgba(0,0,0,.5)!important;transition:opacity .15s,translate .15s,visibility .15s} html body.jt-game:not(.jt-menu-open) #hud .tools{opacity:0;visibility:hidden;translate:0 -6px;pointer-events:none} html body.jt-game #hud .tools button{width:auto;height:38px;display:flex;align-items:center;padding:0 14px 0 40px;border:0;border-radius:10px;background:none;box-shadow:none;font:400 15px/1 var(--jt-h);letter-spacing:.02em;white-space:nowrap;color:var(--jt-cream)} html body.jt-game #hud .tools button::before{inset:0 auto 0 12px;margin:auto 0;width:17px;height:17px} html body.jt-game #hud .tools button:is(:hover,:focus-visible){background:rgba(251,236,208,.1);border:0;color:var(--jt-gold)} html body.jt-game #hud .tools button:active{transform:none;background:rgba(251,236,208,.16)} html body.jt-game #hud .tools :is(#mute,#music)[data-off]{color:rgba(251,236,208,.6)} html body.jt-game #hud .tools #leave{margin-top:4px;color:#ffb3a6;box-shadow:0 -1px 0 var(--jt-line)} html body.jt-game #hud .tools #leave:is(:hover,:focus-visible){background:var(--jt-red);color:#fff6e6} /* The minimap: hidden until the map button is on, then just under it */ html body.jt-game:not(.jt-map-open) #hud :is(#mmwrap,#mm-wrap){display:none!important} html body.jt-game #hud :is(#mmwrap,#mm-wrap){display:block;position:fixed;z-index:5;top:calc(var(--jt-t) + 44px);left:var(--jt-l);right:auto;bottom:auto;height:auto;padding:4px;line-height:0;border-color:var(--jt-edge)!important;animation:jt-drop .15s ease-out} html body.jt-game #hud #mmwrap{width:124px} html body.jt-game #hud #mmwrap canvas{display:block;width:100%;height:auto} html body.jt-game #hud #mm{width:160px;height:116px} @keyframes jt-drop{from{opacity:0;translate:0 -6px}} /* -- Event lines: at most two, bottom-left above the joystick / steering buttons -- */ html body.jt-game #hud #feed{top:auto;right:auto;left:var(--jt-l);bottom:128px;translate:none;align-items:flex-start;max-width:220px;gap:3px} html body.jt-game #hud #feed>div{padding:4px 9px;font-size:12.5px} html body.jt-game #hud #feed>div:nth-child(n+3){display:none} html body.jt-g-rally #hud #feed{bottom:auto;top:calc(var(--jt-t) + 64px);left:50%;translate:-50% 0;align-items:center} /* -- The slim strip: chips lose their own boxes and sit in one pill, value and word on one line -- */ html body.jt-game #hud :is(.chips,.jt-strip){display:flex;align-items:center;gap:12px;padding:4px 14px;background:var(--jt-strip);border:2px solid var(--jt-line);border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.3)} html body.jt-game #hud :is(.chips,.jt-strip) .chip{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;min-width:0;padding:0;flex-direction:row;align-items:baseline;gap:4px} html body.jt-game #hud :is(.chips,.jt-strip) .chip :is(b,#timer){font-size:17px!important;line-height:1.2!important} html body.jt-game #hud :is(.chips,.jt-strip) .chip small{font-size:12px!important;color:rgba(251,236,208,.72)!important} html body.jt-game #hud :is(.chips,.jt-strip) .chip+.chip{position:relative} html body.jt-game #hud :is(.chips,.jt-strip) .chip+.chip::before{content:"";position:absolute;left:-7px;top:20%;bottom:20%;width:1.5px;background:var(--jt-line)} /* Centred boxes (left:50%) would only get half the screen before wrapping: size them to their content instead. */ html body:is(.jt-g-narival,.jt-g-ngya) #hud :is(.hud-top,#me-box){width:max-content;max-width:calc(100vw - 2 * var(--jt-l));white-space:nowrap} /* -- Narival -- */ /* Scoreboard top-left: the leaders and you, tight rows (tap still opens the full table) */ html body.jt-g-narival #hud #board-wrap{top:var(--jt-t);left:var(--jt-l);right:auto;bottom:auto;width:146px;padding:5px 8px 6px} html body.jt-g-narival #hud #board-wrap .label{margin:0 0 3px;font-size:12px!important} html body.jt-g-narival #hud #board li{grid-template-columns:12px 8px minmax(0,1fr) auto;gap:5px;padding:1px 3px;font-size:12px} html body.jt-g-narival #hud #board .nm{font-size:13px} html body.jt-g-narival #hud #board li i{width:8px;height:8px} html body.jt-g-narival:not(.board-open) #hud #board li:nth-child(n+4):not(.me){display:none} /* Top centre: the round / time / players strip, then the status line with the five Narival pips beside it. The sky above the chariot stays clear for watching the throws. */ html body.jt-g-narival #hud .hud-top{top:var(--jt-t);left:50%;right:auto;translate:-50% 0;display:grid;grid-template-columns:auto auto;justify-content:center;justify-items:center;align-items:center;gap:5px 6px} html body.jt-g-narival #hud .chips{grid-column:1/-1} html body.jt-g-narival #hud #status{padding:3px 11px;font-size:13px;white-space:nowrap;max-width:none;border-radius:999px!important} html body.jt-g-narival #hud #nuts{gap:4px;padding:4px 7px;background:var(--jt-strip)} html body.jt-g-narival #hud #nuts i{width:10px;height:10px;border-width:1.5px} /* Stamina and grab: one slim row at the bottom, between the joystick and the Jump button */ html body.jt-g-narival #hud #me-box{top:auto;bottom:var(--jt-b);left:50%;translate:-50% 0;gap:10px;padding:4px 12px;border-radius:999px!important} html body.jt-g-narival #hud #me-box>div{flex-direction:row!important;align-items:center;gap:7px!important} html body.jt-g-narival #hud #me-box .k{font-size:12px!important} html body.jt-g-narival #hud #me-box .bar{width:92px;height:5px} html body.jt-g-narival #hud #grab-cd{min-width:0;font-size:13px} html body.jt-g-narival #hud #banner{top:calc(var(--jt-t) + 70px)} /* -- Ngyā: hunters / clock / Ngyā left in one strip; your role, stamina and ability in one slim row under it -- */ html body.jt-g-ngya #hud .hud-top{top:var(--jt-t);align-items:center;gap:12px;padding:4px 14px;background:var(--jt-strip);border:2px solid var(--jt-line);border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.3)} html body.jt-g-ngya #hud .hud-top .chip{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;min-width:0!important;padding:0;flex-direction:row;align-items:baseline;gap:4px;position:relative} html body.jt-g-ngya #hud .hud-top .chip :is(b,#timer){font-size:17px!important;line-height:1.2} html body.jt-g-ngya #hud .hud-top .chip small{font-size:12px!important} html body.jt-g-ngya #hud .hud-top .chip+.chip::before{content:"";position:absolute;left:-7px;top:20%;bottom:20%;width:1.5px;background:var(--jt-line)} html body.jt-g-ngya #hud #me-box{top:calc(var(--jt-t) + 38px);bottom:auto;gap:10px;padding:3px 12px;border-radius:999px!important} html body.jt-g-ngya #hud #me-box>div:first-child{display:flex;align-items:baseline;gap:5px} html body.jt-g-ngya #hud #me-box>div[style]{flex-direction:row!important;align-items:center;gap:8px!important} html body.jt-g-ngya #hud #me-role{font-size:15px!important} html body.jt-g-ngya #hud #me-side{font-size:11.5px!important} html body.jt-g-ngya #hud #me-box .bar{width:84px;height:5px} html body.jt-g-ngya #hud #ab{min-width:0;font-size:13px} html body.jt-g-ngya #hud #banner{top:calc(var(--jt-t) + 72px)} /* -- Pulukisi, Sindur, Bhintuna: lap / timer / checkpoint side by side in one centred row -- */ html body:is(.jt-g-pulukisi,.jt-g-rally,.jt-g-khat) #hud .hud-top{top:var(--jt-t);left:calc(var(--jt-l) + 44px);right:calc(var(--jt-r) + 44px);display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:6px} html body:is(.jt-g-pulukisi,.jt-g-rally) #hud .hud-top>div:not([class]):not([id]){display:contents} html body:is(.jt-g-pulukisi,.jt-g-rally,.jt-g-khat) #hud :is(.lapbox,.legbox){order:1} html body:is(.jt-g-pulukisi,.jt-g-rally,.jt-g-khat) #hud :is(#timer,.mid){order:2} html body:is(.jt-g-pulukisi,.jt-g-rally) #hud :is(.cpbox,.chips){order:3} html body:is(.jt-g-pulukisi,.jt-g-rally) #hud #board{display:none} /* Lap and position on one line */ html body.jt-game #hud .lapbox{padding:4px 12px;gap:12px;align-items:center;border-radius:999px!important} html body.jt-game #hud .lapbox div{flex-direction:row;align-items:baseline;gap:5px} html body.jt-game #hud .lapbox b{font-size:19px!important;line-height:1.15!important} html body.jt-game #hud .lapbox small{font-size:12px!important} /* Timer: a small pill */ html body:is(.jt-g-pulukisi,.jt-g-rally,.jt-g-khat) #hud #timer{padding:4px 12px;font-size:18px!important;line-height:1.2;border-radius:999px!important;justify-self:auto} html body.jt-g-rally #hud .mid{gap:0} /* Checkpoint / leg: label and count on a line, a hairline bar, the next gate in small type */ html body.jt-game #hud :is(.cpbox,.legbox){width:auto;max-width:200px;margin:0;padding:4px 10px 5px;gap:3px;border-radius:12px!important} html body.jt-game #hud :is(.cpbox,.legbox) small{font-size:12px!important} html body.jt-game #hud #cp-n{font-size:12.5px} html body.jt-game #hud #leg{font-size:15px!important} html body.jt-game #hud .cpbar{height:3px} html body.jt-game #hud #cp-next{font-size:11.5px!important} html body.jt-g-rally #hud .chips{margin:0;padding:3px 12px} html body.jt-g-rally #hud .chips .chip b{font-size:15px!important} html body.jt-g-rally #hud .chips .chip small{font-size:11.5px!important} /* Sindur: the scoreboard top-left, leaders and you */ html body.jt-g-khat #hud #board{display:flex;position:fixed;top:var(--jt-t);left:var(--jt-l);width:146px;padding:4px;gap:0} html body.jt-g-khat #hud #board li{grid-template-columns:12px 9px minmax(0,1fr) 18px;gap:5px;padding:1px 5px} html body.jt-g-khat #hud #board li[data-rank]:not([data-rank="0"],[data-rank="1"],[data-rank="2"],.me){display:none} html body.jt-g-khat #hud #board .nm{font-size:13px} html body.jt-g-khat #hud .hud-top{left:calc(var(--jt-l) + 152px)} /* The power bar at the bottom: slimmer */ html body.jt-game #hud .hud-bottom{bottom:var(--jt-b);gap:10px;padding:4px 12px!important;border-radius:999px!important} html body.jt-game #hud #push{gap:6px;font-size:13px} html body.jt-game #hud #push-ring{width:22px;height:22px} html body.jt-game #hud #push-ring::after{width:14px;height:14px} html body.jt-game #hud #boost{width:110px;gap:3px;font-size:12px!important} html body.jt-game #hud #boost span{height:4px} html body:is(.jt-g-pulukisi,.jt-g-khat) #status{font-size:22px!important} /* -- Biska: the tug-of-war bar, slimmer and centred between the corners -- */ html body.jt-g-bisket #hud .top{top:var(--jt-t);left:50%;right:auto;translate:-50% 0;width:min(480px,calc(100vw - 2 * (var(--jt-r) + 46px)))} html body.jt-g-bisket #hud .center{padding:5px 14px 6px;gap:4px} html body.jt-g-bisket #hud .ends b{font-size:15px!important} html body.jt-g-bisket #hud #timer{font-size:15px!important} html body.jt-g-bisket #hud .track{height:6px} html body.jt-g-bisket #hud #mark{width:16px;height:16px;margin:-8px 0 0 -8px;border-width:2px} html body.jt-g-bisket #hud #dist{font-size:12px!important} } /* Phone held upright: no room beside the corners, so the strips go under them. */ @media (max-width:600px) and (orientation:portrait){ html body.jt-g-narival #hud .hud-top{top:calc(var(--jt-t) + 126px)} html body.jt-g-narival #hud #me-box{top:calc(var(--jt-t) + 194px);bottom:auto} html body.jt-g-narival #hud #banner{top:calc(var(--jt-t) + 234px)} html body.jt-g-ngya #hud .hud-top{top:calc(var(--jt-t) + 44px)} html body.jt-g-ngya #hud #me-box{top:calc(var(--jt-t) + 82px)} html body.jt-g-ngya #hud #banner{top:calc(var(--jt-t) + 120px)} html body.jt-g-ngya #hud #mm-wrap{top:calc(var(--jt-t) + 116px)} } /* ---------- Coins (jatra-coins.js): the pill, toasts, lock plaques, price tags, the inline unlock ---------- */ .jc-pill{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px 0 8px;border-radius:999px;border:2px solid var(--jt-edge);background:rgba(28,14,8,.85);color:var(--jt-cream);font:400 17px/1 var(--jt-h);letter-spacing:.02em;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,.4);white-space:nowrap;box-sizing:border-box;cursor:pointer;transition:border-color .15s,color .15s,transform .15s} a.jc-pill:hover,a.jc-pill:focus-visible{border-color:var(--jt-gold);color:#ffd877;transform:translateY(-1px)} .jc-pill:focus-visible{outline:2px solid var(--jt-gold);outline-offset:2px} .jc-pill .jc-coin{flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))} .jc-pill .jc-n{font:inherit;font-size:1.05em;color:var(--jt-cream);min-width:1ch;text-align:right;font-variant-numeric:tabular-nums} .jc-pill .jc-n.jc-count{color:var(--jt-gold)} .jc-pill .jc-w{font:400 15px/1 var(--jt-hand);color:rgba(251,236,208,.78)} .jc-pill.jc-out .jc-n{display:none} .jc-pill.jc-out .jc-w{font:400 17px/1 var(--jt-h);color:var(--jt-cream)} .jc-pill.jc-compact{height:34px;padding:0 11px 0 6px;font-size:15px;gap:5px} .jc-pill.jc-compact .jc-coin{width:18px;height:18px} .jc-pill.jc-compact .jc-w{display:none} .jc-pill.jc-compact.jc-out .jc-w{display:inline} /* In the top-right chip, beside the round buttons */ .ja-chip .jc-pill{height:44px} body:has(main.lb) .ja-chip .jc-pill{height:clamp(42px,3vw,54px);font-size:clamp(17px,1.4vw,22px)} @media (max-width:640px){.ja-chip .jc-pill{height:40px;font-size:16px}.ja-chip .jc-pill .jc-w{display:none}} @media (max-width:480px){.ja-chip{gap:6px}.ja-chip .jc-pill{height:38px;padding:0 10px 0 6px}} /* In a game's lobby card, beside the trophy */ body.jt-game #lobby .ja-acct.ja-in-ok{display:flex;gap:8px;align-items:center} body.jt-game #lobby .ja-acct .jc-pill{height:40px;font-size:16px} body.jt-game #lobby .js-head:has(.jc-pill) .jt-top{padding-right:150px} @media (max-width:760px),(pointer:coarse) and (max-height:540px){body.jt-game #lobby .ja-acct .jc-pill{height:30px;font-size:14px;padding:0 9px 0 5px}body.jt-game #lobby .ja-acct .jc-pill .jc-coin{width:16px;height:16px}body.jt-game #lobby .js-head:has(.jc-pill) .jt-top{padding-right:120px}} /* Toasts: one line at the bottom, above the touch pads in the worlds */ .jc-toasts{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:2147481000;display:flex;flex-direction:column;align-items:center;gap:6px;translate:-50% 0;pointer-events:none} body.jh.touch .jc-toasts,body.jt-game.touch .jc-toasts{bottom:104px} .jc-toast{display:inline-flex;align-items:center;gap:8px;max-width:min(92vw,520px);padding:9px 16px 9px 12px;border-radius:999px;border:2px solid var(--jt-edge);background:rgba(28,14,8,.92);color:var(--jt-cream);font:400 17px/1.2 var(--jt-h);letter-spacing:.02em;box-shadow:0 8px 24px rgba(0,0,0,.45);opacity:0;translate:0 12px;transition:opacity .26s,translate .26s;pointer-events:auto;text-decoration:none} .jc-toast.on{opacity:1;translate:0 0} .jc-toast.reward,.jc-toast.unlock{border-color:var(--jt-gold);background:linear-gradient(100deg,rgba(28,14,8,.94),rgba(58,27,13,.94));} .jc-toast.unlock{background-image:linear-gradient(100deg,rgba(28,14,8,.94) 30%,rgba(242,182,54,.28) 50%,rgba(28,14,8,.94) 70%),linear-gradient(rgba(28,14,8,.94),rgba(28,14,8,.94));background-size:260% 100%,100% 100%;animation:jc-shimmer 1.6s ease-in-out 1} @keyframes jc-shimmer{from{background-position:120% 0,0 0}to{background-position:-60% 0,0 0}} /* Lock plaque: a gold disc with a padlock and the price under it */ .jc-plaque{display:inline-flex;flex-direction:column;align-items:center;gap:6px;color:var(--jt-gold)} .jc-plaque .jc-lock{width:64px;height:64px;padding:14px;box-sizing:border-box;border-radius:50%;border:3px solid var(--jt-edge);background:radial-gradient(circle at 35% 30%,#ffe08a,#e59a1c 70%,#b7720f);color:#3a1b0d;box-shadow:0 6px 16px rgba(0,0,0,.45),inset 0 0 0 2px rgba(255,255,255,.25)} .jc-plaque .jc-lock .shackle{transform-origin:16px 11px;transition:transform .35s cubic-bezier(.5,1.6,.6,1)} .jc-plaque.sm .jc-lock{width:44px;height:44px;padding:9px;border-width:2px} .jc-plaque.xs{flex-direction:row;gap:5px} .jc-plaque.xs .jc-lock{width:20px;height:20px;padding:3px;border-width:1.5px} .jc-plaque.xs .jc-price{font-size:14px} .jc-price,.jc-tag{display:inline-flex;align-items:center;gap:4px;font:400 16px/1 var(--jt-h);color:var(--jt-gold);letter-spacing:.02em} .jc-price b,.jc-tag b{font:inherit;font-variant-numeric:tabular-nums} .jc-tag{padding:3px 8px 3px 5px;border-radius:999px;border:1.5px solid rgba(242,182,54,.6);background:rgba(28,14,8,.78);font-size:13px} .jc-tag.own{border-color:rgba(251,236,208,.5);color:var(--jt-cream);padding:3px 8px} .jc-tag.free{border-color:rgba(168,220,143,.55);color:#a8dc8f;padding:3px 8px} /* The inline confirm slides up from the bottom of its host (a card, a row); the host is position:relative */ .jc-asking{position:relative} .jc-confirm{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-top:2px solid var(--jt-gold);background:rgba(28,14,8,.96);color:var(--jt-cream);font:400 17px/1.3 var(--jt-hand);translate:0 100%;transition:translate .22s ease-out;border-radius:0 0 14px 14px} .jc-confirm.on{translate:0 0} .jc-confirm p{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px} .jc-confirm p b{font:400 19px/1 var(--jt-h);color:var(--jt-gold)} .jc-confirm .jc-row{display:flex;gap:8px;flex-wrap:wrap} .jc-confirm button{all:unset;cursor:pointer;height:36px;padding:0 16px;border-radius:999px;border:2px solid var(--jt-edge);font:400 17px/1 var(--jt-h);letter-spacing:.03em;box-sizing:border-box;display:inline-flex;align-items:center} .jc-confirm .jc-yes{background:var(--jt-red);color:#fff6e6} .jc-confirm .jc-yes:hover,.jc-confirm .jc-yes:focus-visible{background:#c93a33;border-color:var(--jt-gold)} .jc-confirm .jc-no{background:rgba(251,236,208,.08);color:var(--jt-cream)} .jc-confirm .jc-no:hover,.jc-confirm .jc-no:focus-visible{border-color:var(--jt-gold);color:var(--jt-gold)} .jc-confirm button:disabled{opacity:.6;cursor:default} .jc-confirm button:focus-visible{outline:2px solid var(--jt-gold);outline-offset:2px} .jc-confirm button[hidden]{display:none} /* Short of coins: the host shakes; bought: the shackle opens and a burst of gold fades out */ .jc-shake{animation:jc-shake .42s cubic-bezier(.36,.07,.19,.97)} @keyframes jc-shake{10%,90%{translate:-2px 0}20%,80%{translate:3px 0}30%,50%,70%{translate:-5px 0}40%,60%{translate:5px 0}} .jc-unlocking .jc-lock .shackle{transform:rotate(-38deg) translate(-2px,-3px)} .jc-burst{position:absolute;left:50%;top:50%;width:160px;height:160px;margin:-80px 0 0 -80px;border-radius:50%;background:radial-gradient(circle,rgba(255,224,138,.95) 0,rgba(242,182,54,.6) 35%,rgba(242,182,54,0) 70%);pointer-events:none;animation:jc-burst .9s ease-out forwards;z-index:6} @keyframes jc-burst{from{transform:scale(.4);opacity:.95}to{transform:scale(1.7);opacity:0}} .jc-owned .jc-plaque{opacity:0;transition:opacity .4s} /* Locked tiles in the games' pickers (khat designs, pulukisi skins, jeep models) */ body.jt-game .kv.locked{position:relative;opacity:.6;filter:saturate(.4)} body.jt-game .kv.locked:hover{opacity:.8} body.jt-game .kv .jc-tag{position:absolute;top:4px;right:4px;font-size:11px;padding:2px 6px 2px 4px} body.jt-game .kv .jc-tag .jc-coin{width:12px;height:12px} body.jt-game .kv.locked::after{content:"";position:absolute;left:6px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--jt-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3' fill='none' stroke='%231c110b' stroke-width='2.4' stroke-linecap='round'/%3E%3Crect x='5' y='11' width='14' height='10' rx='2.2' fill='%231c110b'/%3E%3C/svg%3E") center/10px no-repeat} body.jt-game .jt-card .sh-more{align-self:flex-start;font:400 15px/1 var(--jt-h);color:var(--jt-gold);text-decoration:none;letter-spacing:.02em} body.jt-game .jt-card .sh-more:hover,body.jt-game .jt-card .sh-more:focus-visible{color:var(--jt-cream)} @media (prefers-reduced-motion:reduce){.jc-toast{transition:opacity .2s;translate:0 0}.jc-toast.unlock{animation:none}.jc-confirm{transition:none;translate:0 0}.jc-shake{animation:none}.jc-burst{animation:none;opacity:0}.jc-plaque .jc-lock .shackle{transition:none}.jc-pill{transition:none}} /* ---------- Coins in the account box, on a world's welcome screen and in the results (jatra-auth.js) ---------- */ .ja-pf-stats{grid-area:stat;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px} .ja-pf-stats .ja-pf-stat{margin-top:0} .ja-pf-stat.ja-pf-coins{background:rgba(26,12,5,.55);border-color:var(--jt-gold);color:#f6c047;text-decoration:none;box-shadow:0 0 0 2px rgba(242,182,54,.2)} .ja-pf-stat.ja-pf-coins:hover,.ja-pf-stat.ja-pf-coins:focus-visible{background:rgba(242,182,54,.16);color:#ffd877} .ja-pf-stat.ja-pf-coins .jc-coin{width:24px;height:24px} @media (max-width:600px){.ja-pf-stats{margin-top:6px;gap:6px}} /* A locked square's welcome screen: the step-in buttons give way to the lock, the price and Unlock */ body.jw-locked #welcome :is(#enter,#enter-tour,.w-char){display:none!important} body.jw-locked .ja-wnote{display:none!important} .ja-wlock{position:relative;display:flex;align-items:center;gap:14px;align-self:flex-start;max-width:min(640px,100%);margin:2px 0 0;padding:12px 18px 12px 12px;border-radius:22px;border:2px solid rgba(242,182,54,.7);background:rgba(28,14,8,.78);color:#fbecd0;font:400 17px/1.3 "Caveat Brush",cursive;letter-spacing:.015em;overflow:hidden} .ja-wlock>span{flex:1;min-width:0} .ja-wlock b{font:400 19px/1.15 "Chewy",cursive;color:#f2b636;letter-spacing:.02em} .ja-wlock .ja-btn.pri{all:unset;cursor:pointer;flex:none;height:40px;padding:0 18px;border-radius:999px;border:2px solid #f1dcb6;background:#b8302a;color:#fff6e6;font:400 18px/1 "Chewy",cursive;letter-spacing:.03em;display:inline-flex;align-items:center;box-shadow:0 4px 12px rgba(0,0,0,.4)} .ja-wlock .ja-btn.pri:hover,.ja-wlock .ja-btn.pri:focus-visible{background:#c93a33;border-color:#f2b636} .ja-wlock .jc-confirm{border-radius:0 0 20px 20px} @media (max-width:640px){.ja-wlock{gap:10px;padding:10px 12px;font-size:15px}.ja-wlock .jc-plaque.sm .jc-lock{width:36px;height:36px;padding:7px}.ja-wlock .ja-btn.pri{height:36px;font-size:16px;padding:0 14px}} /* The results note: the coins won, counting up, and a one-line nudge when something has come within reach */ .ja-pts .ja-won{display:inline-flex;align-items:center;gap:4px;color:#f6c047} .ja-pts .ja-won .jc-coin{width:18px;height:18px;vertical-align:middle} .ja-pts .ja-won b{font-variant-numeric:tabular-nums} .ja-pts .ja-nudge{display:block;margin-top:6px;font:400 15px/1.2 var(--jt-h);color:var(--jt-gold);letter-spacing:.02em;text-decoration:none} .ja-pts .ja-nudge:hover,.ja-pts .ja-nudge:focus-visible{color:var(--jt-cream)} /* The coin pill under the step pill in walk mode (jatra-pedometer.js) */ #jh-coins{position:fixed;z-index:6;top:114px;right:64px;height:34px;font-size:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} #jh-coins[hidden],body.touring #jh-coins,body.no3d #jh-coins,body.gaming #jh-coins{display:none} @media (min-width:761px){body.jh:has(#card.open) #jh-coins{visibility:hidden}} @media (max-width:760px), (pointer:coarse) and (max-height:540px){#jh-coins{top:84px;right:46px;height:28px;padding:0 9px 0 6px;font-size:14px;border-width:1.5px}#jh-coins .jc-coin{width:16px;height:16px}#jh-coins .jc-w{display:none}} /* ---------- Places (places.html): the squares, Basantapur open to everyone, the others unlocked with coins ---------- */ main.lb.pl .lb-cards{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:1100px) and (min-width:641px) and (min-height:541px){main.lb.pl .lb-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} main.lb.pl .pl-side{display:flex;flex-direction:column;align-items:flex-end;gap:12px} main.lb.pl .pl-side .jc-pill{height:clamp(42px,3vw,54px);font-size:clamp(17px,1.4vw,22px)} main.lb.pl .pl-sub{margin:.2em 0 0;max-width:24em;font:400 clamp(14px,1.05vw,19px)/1.3 "Caveat Brush",cursive;letter-spacing:.015em;color:#f6e8d0;text-shadow:0 2px 3px rgba(0,0,0,.7)} @media (max-height:720px){main.lb.pl .pl-sub{display:none}} main.lb.pl .pl-ribbon{position:absolute;top:clamp(10px,1.2vw,18px);left:clamp(10px,1.2vw,18px);z-index:2;display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;border:2px solid #f1dcb6;background:#2f7a3e;color:#fff6e6;font:400 clamp(12px,.95vw,16px)/1 "Chewy",cursive;letter-spacing:.03em;box-shadow:0 3px 8px rgba(0,0,0,.4)} main.lb.pl .pl-ribbon::before{content:"";width:.6em;height:.6em;border-radius:50%;background:#a8dc8f;box-shadow:0 0 0 .3em rgba(168,220,143,.25)} main.lb.pl .pl-card.locked .lb-img{filter:saturate(.2) brightness(.5) sepia(.25);transition:filter .9s ease} main.lb.pl .pl-card.locked .lb-go{display:none} main.lb.pl .pl-card.locked .lb-txt h2{color:rgba(242,182,54,.8)} main.lb.pl .pl-card.locked .lb-txt h2::first-line{color:rgba(251,236,208,.82)} main.lb.pl .pl-state{position:absolute;left:50%;top:42%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;translate:-50% -50%;pointer-events:none;transition:opacity .4s} main.lb.pl .pl-card:not(.locked) .pl-state{opacity:0} main.lb.pl .pl-unlock{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;border:2.5px solid #f1dcb6;background:#b8302a;color:#fff6e6;font:400 18px/1 "Chewy",cursive;letter-spacing:.03em;box-shadow:0 6px 16px rgba(0,0,0,.45);white-space:nowrap} main.lb.pl .pl-card.locked:hover .pl-unlock,main.lb.pl .pl-card.locked:focus-visible .pl-unlock{background:#c93a33;border-color:#f2b636} main.lb.pl .pl-card.jc-unlocking .lb-img{filter:saturate(1.3) contrast(1.08) brightness(1.3) sepia(.1)} main.lb.pl .pl-card.jc-unlocking .pl-state,main.lb.pl .pl-card.jc-owned .pl-state{opacity:0} main.lb.pl .pl-card .jc-confirm{border-radius:0 0 15px 15px;font-size:16px} main.lb.pl .pl-card .jc-confirm p{color:#fbecd0} @media (max-height:540px){ main.lb.pl .pl-state{gap:6px} main.lb.pl .jc-plaque .jc-lock{width:40px;height:40px;padding:8px;border-width:2px} main.lb.pl .jc-price{font-size:13px} main.lb.pl .pl-unlock{height:30px;padding:0 12px;font-size:14px;border-width:2px} main.lb.pl .pl-ribbon{font-size:11px;padding:4px 9px;border-width:1.5px} main.lb.pl .pl-side{flex-direction:row;align-items:center;gap:10px} main.lb.pl .pl-card .jc-confirm{padding:8px 10px;gap:6px;font-size:14px} main.lb.pl .pl-card .jc-confirm button{height:30px;font-size:15px;padding:0 12px} } @media (max-width:640px) and (orientation:portrait){ main.lb.pl .pl-side{flex-direction:row;align-items:center;justify-content:space-between;width:100%;gap:10px} main.lb.pl .pl-side .jc-pill{height:40px;font-size:16px} main.lb.pl .pl-sub{display:none} main.lb.pl .jc-plaque .jc-lock{width:44px;height:44px;padding:9px;border-width:2px} main.lb.pl .pl-unlock{height:32px;padding:0 12px;font-size:15px} main.lb.pl .pl-ribbon{top:8px;left:8px;font-size:11px;padding:4px 8px} main.lb.pl .pl-card .jc-confirm{padding:8px 10px;gap:6px;font-size:14px} main.lb.pl .pl-card .jc-confirm button{height:30px;font-size:15px;padding:0 12px} } /* ---------- Shop (shop.html, jatra-shop-ui.js): a bazaar stall with the lobby turntable and the coins ---------- */ main.lb.sh{gap:clamp(10px,2vh,18px)} main.lb.sh .sh-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px} main.lb.sh .sh-side .jc-pill{height:clamp(42px,3vw,54px);font-size:clamp(17px,1.4vw,22px)} main.lb.sh .sh-tabs{flex:none;display:flex;gap:8px;flex-wrap:wrap;margin-left:calc(var(--lb-logo-x) + 118px - var(--lb-pad))} main.lb.sh .sh-tabs [role=tab]{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:clamp(38px,3vw,46px);padding:0 16px 0 12px;border-radius:999px;border:2px solid #f1dcb6;background:rgba(28,13,6,.78);color:#fbecd0;font:400 clamp(15px,1.15vw,19px)/1 "Chewy",cursive;letter-spacing:.03em;box-shadow:0 4px 12px rgba(0,0,0,.4);transition:background .15s,border-color .15s} main.lb.sh .sh-tabs [role=tab] .g{font-size:1.15em;line-height:1} main.lb.sh .sh-tabs [role=tab]:hover{border-color:#f2b636} main.lb.sh .sh-tabs [role=tab][aria-selected=true]{background:#b8302a;color:#fff6e6;border-color:#f1dcb6} main.lb.sh .sh-tabs [role=tab]:focus-visible{outline:2px solid #f2b636;outline-offset:3px} main.lb.sh .sh-stall{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;padding:30px 26px 26px;border-radius:14px;border:3px solid #a8692f;box-shadow:inset 0 0 0 2px rgba(242,182,54,.35),0 22px 44px rgba(0,0,0,.5); background:radial-gradient(120% 80% at 50% 0%,#5a2d14,#2d160a 60%,#1f0f07)} main.lb.sh .sh-roof{position:absolute;left:-26px;right:-26px;top:-24px;height:40px;pointer-events:none;z-index:3} main.lb.sh .sh-roof svg{display:block;width:100%;height:100%} main.lb.sh .sh-cloud{position:absolute;bottom:-26px;width:150px;height:84px;pointer-events:none;z-index:3;color:#f1dcb6} main.lb.sh .sh-cloud.l{left:-34px} main.lb.sh .sh-cloud.r{right:-34px;transform:scaleX(-1)} main.lb.sh .sh-stage{flex:1;min-height:0;display:flex;flex-direction:column} main.lb.sh .pv-pick{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:14px 22px} main.lb.sh .pv-3d{grid-column:1;grid-row:1;position:relative;min-height:160px;border-radius:14px;border:2px solid rgba(241,220,182,.3);overflow:hidden;background:radial-gradient(75% 65% at 50% 38%,rgba(242,182,54,.2),rgba(28,14,8,.6) 75%)} main.lb.sh .pv-3d canvas{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y} main.lb.sh .pv-3d canvas:active{cursor:grabbing} main.lb.sh .pv-3d b{position:absolute;left:14px;top:10px;right:14px;z-index:2;font:400 clamp(18px,1.6vw,24px)/1.1 "Chewy",cursive;letter-spacing:.02em;color:#fbecd0;text-shadow:0 2px 0 #3a1b0d,0 4px 10px rgba(0,0,0,.5);pointer-events:none} main.lb.sh .pv-3d small{position:absolute;left:0;right:0;bottom:6px;z-index:2;text-align:center;font:400 13px/1 "Caveat Brush",cursive;color:rgba(251,236,208,.62);pointer-events:none} main.lb.sh .pv-3d.sh-ismap canvas,main.lb.sh .pv-3d.sh-ismap small{visibility:hidden} main.lb.sh .sh-map{position:absolute;inset:0;z-index:1} main.lb.sh .sh-map .lb-img{filter:saturate(1.3) contrast(1.08) brightness(1.3) sepia(.1)} main.lb.sh .sh-map.locked .lb-img{filter:saturate(.25) brightness(.55) sepia(.2)} main.lb.sh .sh-map .lb-shade{background:linear-gradient(180deg,rgba(28,14,8,.5) 0%,rgba(28,14,8,0) 30%)} main.lb.sh .pv-side{grid-column:2;grid-row:1/3;min-height:0;display:flex;flex-direction:column} main.lb.sh .sh-list{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));align-content:start;gap:10px;margin:0;padding:4px;list-style:none;scrollbar-width:thin;scrollbar-color:rgba(242,182,54,.5) transparent} main.lb.sh .sh-item{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:8px 8px 10px;border-radius:12px;border:2px solid rgba(241,220,182,.22);background:rgba(28,14,8,.55);color:#fbecd0;text-align:center;transition:border-color .15s,background .15s,transform .15s} main.lb.sh .sh-item:hover{border-color:rgba(242,182,54,.6);transform:translateY(-2px)} main.lb.sh .sh-item.sel{border-color:#f2b636;background:rgba(242,182,54,.14);box-shadow:0 0 0 2px rgba(242,182,54,.25)} main.lb.sh .sh-item:focus-visible{outline:2px solid #f2b636;outline-offset:2px} main.lb.sh .sh-thumb{display:block;width:100%;aspect-ratio:1;border-radius:8px;background:rgba(0,0,0,.25) center/contain no-repeat} main.lb.sh [data-item^="map:"] .sh-thumb{aspect-ratio:5/3;background-size:cover;border:1px solid rgba(241,220,182,.2)} main.lb.sh .sh-item.locked .sh-thumb{filter:saturate(.3) brightness(.7)} main.lb.sh .sh-item .sh-n{font:400 16px/1.1 "Chewy",cursive;letter-spacing:.02em} main.lb.sh .sh-item .sh-st{font:400 12px/1 "Chewy",cursive;color:#f2b636;letter-spacing:.03em} main.lb.sh .sh-item .sh-st.own{color:rgba(251,236,208,.7)} main.lb.sh .sh-item .sh-st.on{color:#a8dc8f} main.lb.sh .sh-item .sh-st .jc-tag{font-size:12px;padding:2px 7px 2px 4px} main.lb.sh .sh-skel{height:140px;border-radius:12px;background:linear-gradient(90deg,rgba(251,236,208,.07),rgba(251,236,208,.16),rgba(251,236,208,.07));background-size:200% 100%;animation:sh-sh 1.2s linear infinite} @keyframes sh-sh{to{background-position:-200% 0}} main.lb.sh .sh-cap{grid-column:1;grid-row:2;position:relative;display:flex;flex-direction:column;gap:6px;min-height:0;overflow:hidden;border-radius:14px} main.lb.sh .sh-eye{font:400 14px/1 "Chewy",cursive;letter-spacing:.07em;color:#e9a341} main.lb.sh .sh-name{position:relative;width:fit-content;margin:0;padding-bottom:.25em;font:400 clamp(24px,2.2vw,34px)/1.05 "Chewy",cursive;letter-spacing:.01em;color:#fbecd0;text-shadow:0 2px 0 #3a1b0d,0 3px 0 #3a1b0d,0 6px 12px rgba(0,0,0,.6)} main.lb.sh .sh-name::after{content:"";position:absolute;left:.3em;bottom:0;width:62%;height:.26em;transform:rotate(-3deg);background:var(--lb-brush) center/100% 100% no-repeat} main.lb.sh .sh-desc{margin:0;max-width:40em;font:400 clamp(15px,1.15vw,19px)/1.35 "Caveat Brush",cursive;letter-spacing:.015em;color:#f6e8d0} main.lb.sh .sh-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px} main.lb.sh .sh-price{display:inline-flex;align-items:center;gap:5px;font:400 20px/1 "Chewy",cursive;color:#f2b636;letter-spacing:.02em} main.lb.sh .sh-price b{font:inherit;font-variant-numeric:tabular-nums} main.lb.sh .sh-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:999px;border:2.5px solid #f1dcb6;background:rgba(28,14,8,.85);color:#fbecd0;font:400 18px/1 "Chewy",cursive;letter-spacing:.03em;box-shadow:0 4px 12px rgba(0,0,0,.4);transition:background .15s,border-color .15s} main.lb.sh .sh-btn.pri{background:#b8302a;color:#fff6e6} main.lb.sh .sh-btn:hover,main.lb.sh .sh-btn:focus-visible{border-color:#f2b636} main.lb.sh .sh-btn.pri:hover{background:#c93a33} main.lb.sh .sh-btn:disabled{opacity:.7;cursor:default;border-color:#a8dc8f;color:#a8dc8f} main.lb.sh .sh-btn[hidden]{display:none} main.lb.sh .sh-btn:focus-visible{outline:2px solid #f2b636;outline-offset:3px} main.lb.sh .sh-msg{margin:0;min-height:1.2em;font:400 15px/1.2 "Caveat Brush",cursive;color:#a8dc8f} main.lb.sh .sh-msg:empty{display:none} main.lb.sh .sh-foot{flex:none;margin:0 0 0 calc(var(--lb-logo-x) + 118px - var(--lb-pad));font:400 clamp(14px,1.05vw,17px)/1.35 "Caveat Brush",cursive;color:rgba(251,236,208,.78);letter-spacing:.015em} main.lb.sh .sh-foot b{color:#fbecd0} @media (max-height:720px){main.lb.sh .sh-foot{display:none}} @media (max-width:1100px) and (min-width:641px){main.lb.sh .pv-pick{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}} /* Phones in landscape (the installed app's way round): everything compact, the stall fills the screen */ @media (max-height:540px){ main.lb.sh{gap:8px} main.lb.sh .sh-tabs{margin-left:0;gap:6px} main.lb.sh .sh-tabs [role=tab]{height:32px;padding:0 10px;font-size:14px;border-width:1.5px} main.lb.sh .sh-tabs [role=tab] .t{display:none} main.lb.sh .sh-stall{padding:16px 14px 12px;border-width:2px} main.lb.sh .sh-roof{left:-14px;right:-14px;top:-16px;height:28px} main.lb.sh .sh-cloud{display:none} main.lb.sh .pv-pick{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:8px 12px} main.lb.sh .pv-3d{min-height:0} main.lb.sh .pv-3d b{font-size:15px;left:10px;top:6px} main.lb.sh .pv-3d small{display:none} main.lb.sh .sh-list{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px} main.lb.sh .sh-item{padding:4px 4px 6px;gap:3px} main.lb.sh .sh-item .sh-n{font-size:12px} main.lb.sh .sh-item .sh-st{font-size:10px} main.lb.sh .sh-cap{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 10px} main.lb.sh .sh-eye,main.lb.sh .sh-desc{display:none} main.lb.sh .sh-name{font-size:19px;padding-bottom:.15em} main.lb.sh .sh-act{margin:0;gap:8px} main.lb.sh .sh-price{font-size:16px} main.lb.sh .sh-btn{height:32px;padding:0 12px;font-size:15px;border-width:2px} main.lb.sh .sh-msg{width:100%;font-size:13px} main.lb.sh .sh-side{flex-direction:row;align-items:center;gap:8px} main.lb.sh .sh-side .jc-pill{height:34px;font-size:15px} } /* Phones upright: the preview on top, the caption under it, the items in a row underneath */ @media (max-width:640px) and (orientation:portrait){ main.lb.sh{gap:10px} main.lb.sh .sh-side{flex-direction:row;align-items:center;justify-content:space-between;width:100%;gap:10px} main.lb.sh .sh-side .jc-pill{height:40px;font-size:16px} main.lb.sh .sh-side .lb-count{margin:0;font-size:14px;white-space:nowrap} main.lb.sh .sh-tabs{margin-left:0;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px} main.lb.sh .sh-tabs [role=tab]{height:36px;padding:0 12px;font-size:14px;white-space:nowrap} main.lb.sh .sh-stall{padding:18px 12px 12px;border-width:2px} main.lb.sh .sh-roof{left:-14px;right:-14px;top:-18px;height:30px} main.lb.sh .sh-cloud{display:none} main.lb.sh .pv-pick{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1.3fr) auto minmax(0,1fr);gap:8px} main.lb.sh .pv-3d{grid-column:1;grid-row:1;min-height:0} main.lb.sh .sh-cap{grid-column:1;grid-row:2;gap:3px} main.lb.sh .sh-eye{display:none} main.lb.sh .sh-desc{font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} main.lb.sh .sh-name{font-size:22px} main.lb.sh .sh-btn{height:36px;padding:0 14px;font-size:16px} main.lb.sh .pv-side{grid-column:1;grid-row:3} main.lb.sh .sh-list{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:104px;grid-template-rows:minmax(0,1fr);overflow-x:auto;overflow-y:hidden;gap:8px} main.lb.sh .sh-item{padding:5px 5px 7px;gap:4px;min-height:0} main.lb.sh .sh-thumb{max-height:64px} main.lb.sh .sh-item .sh-n{font-size:13px} main.lb.sh .sh-item .sh-st{font-size:10px} } @media (prefers-reduced-motion:reduce){main.lb.sh .sh-map .lb-img{animation:none}main.lb.sh .sh-skel{animation:none}main.lb.sh .sh-item,main.lb.sh .sh-item:hover{transition:none;transform:none}} /* ---------- The way into the shop from the lobby pages ---------- */ /* Home: a strip under the two cards — the coin, a line of copy, what the account owns, the balance */ main.lb.st .st-shop{position:relative;flex:none;display:flex;align-items:center;gap:16px;height:clamp(56px,7vh,78px);padding:0 18px 0 16px;border-radius:18px;border:3px solid #f1dcb6;background:rgba(38,20,11,.93);box-shadow:var(--jt-shadow);color:#fbecd0;text-decoration:none;transition:box-shadow .3s,transform .3s} main.lb.st .st-shop:hover,main.lb.st .st-shop:focus-visible{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(58,27,13,.7),0 0 0 4px rgba(242,182,54,.55),0 0 30px rgba(242,182,54,.25),0 26px 50px rgba(0,0,0,.55);outline:0} main.lb.st .st-shop-ic{display:grid;place-items:center;flex:none;width:clamp(36px,4vh,48px);height:clamp(36px,4vh,48px);animation:ja-yo-float 3.4s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(255,214,130,.45)) drop-shadow(0 4px 4px rgba(0,0,0,.45))} main.lb.st .st-shop-ic svg{width:100%;height:100%} main.lb.st .st-shop-t{display:flex;flex-direction:column;gap:2px;min-width:0} main.lb.st .st-shop-t b{font:400 clamp(20px,2vw,30px)/1 "Chewy",cursive;letter-spacing:.02em;color:#f2b636;text-shadow:0 2px 0 #3a1b0d,0 4px 10px rgba(0,0,0,.5)} main.lb.st .st-shop .st-d{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:none} main.lb.st .st-coll{margin-left:auto;flex:none;font:400 clamp(14px,1.1vw,18px)/1 "Chewy",cursive;letter-spacing:.03em;color:rgba(251,236,208,.8);white-space:nowrap} main.lb.st .st-shop .jc-pill{flex:none;height:clamp(36px,4vh,44px)} main.lb.st .st-shop .lb-go{position:static;flex:none;width:clamp(36px,4vh,44px);height:clamp(36px,4vh,44px)} main.lb.st .st-shop:hover .lb-go{transform:translateX(3px)} @media (max-height:540px){main.lb.st .st-shop{height:44px;gap:10px;padding:0 12px}main.lb.st .st-shop-t b{font-size:17px}main.lb.st .st-shop .st-d,main.lb.st .st-coll{display:none}main.lb.st .st-shop .jc-pill{height:30px;font-size:14px}main.lb.st .st-shop .lb-go{width:30px;height:30px}} @media (max-width:640px) and (orientation:portrait){main.lb.st .st-shop{height:46px;gap:10px;padding:0 12px;border-radius:14px}main.lb.st .st-shop-t b{font-size:18px}main.lb.st .st-shop .st-d,main.lb.st .st-coll{display:none}main.lb.st .st-shop .jc-pill{height:32px;font-size:15px;margin-left:auto}main.lb.st .st-shop .lb-go{width:32px;height:32px}} @media (prefers-reduced-motion:reduce){main.lb.st .st-shop-ic{animation:none}main.lb.st .st-shop:hover{transform:none}} /* Games page: the coin pill beside "Play with others" */ main.lb.gp .gp-side .jc-pill{height:clamp(38px,3vw,48px);font-size:clamp(15px,1.2vw,20px)} @media (max-height:540px){main.lb.gp .gp-side .jc-pill{height:34px;font-size:14px}} @media (max-width:640px) and (orientation:portrait){main.lb.gp .gp-side .jc-pill{height:36px;font-size:15px}main.lb.gp .gp-side .lb-count{display:none}}