/* pipandpippa.com's look: cream, teal, gold, ink; pen-drawn frames are 9-slice border-images of the site's SVGs */
:root { --cream: #F5F0E6; --teal: #2EC4C4; --teal-ink: #0E7577; --gold: #E8C27A; --ink: #0F1316; --brown: #3A2E1F;
  --head: "Marhey", "IBM Plex Sans Arabic", sans-serif; --body: "IBM Plex Sans Arabic", "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--cream); color: var(--ink); font: 500 15px/1.5 var(--body); }
body { -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }

/* diorama feel: the sky end of the view melts into haze (no blur pass: phones) */
.tilt { position: fixed; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(245, 240, 230, .75), rgba(245, 240, 230, 0) 22%, rgba(245, 240, 230, 0) 84%, rgba(245, 240, 230, .45)); }
body.night .tilt { background: linear-gradient(to bottom, rgba(22, 33, 42, .8), rgba(22, 33, 42, 0) 24%, rgba(22, 33, 42, 0) 84%, rgba(22, 33, 42, .5)); }

/* frames */
.ghost, .plate, .find, .sheet { position: relative; isolation: isolate; }
.plate::before, .find::before, .sheet::before { content: ""; position: absolute; inset: 0; z-index: -1;
  border: 22px solid transparent; border-image: url("../assets/ui/ghost-1.svg") 25 fill; }
.sheet::before { border-image-source: url("../assets/ui/chip-1.svg"); border-image-slice: 16 fill; border-width: 16px; }
.find:focus-within::before { border-image-source: url("../assets/ui/ghost-2.svg"); }
.gold { position: relative; isolation: isolate; padding: 12px 22px; font: 700 15px/1.3 var(--body); color: var(--brown); }
.gold::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 22px solid transparent; border-image: url("../assets/ui/gold-1.svg") 27 fill; }
.gold:hover::before, .gold:active::before { border-image-source: url("../assets/ui/gold-2.svg"); }
.chip { position: relative; isolation: isolate; padding: 7px 14px; font: 600 14px/1.3 var(--body); color: var(--brown); }
.chip::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 14px solid transparent; border-image: url("../assets/ui/chip-1.svg") 16 fill; }
.chip:hover::before, .chip.on::before { border-image-source: url("../assets/ui/chip-2.svg"); }
.chip.on { color: var(--teal-ink); }

/* top: title plate + search */
.hud { position: fixed; top: max(10px, env(safe-area-inset-top)); inset-inline: 10px; display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; pointer-events: none; }
.hud > * { pointer-events: auto; }
.plate { padding: 8px 18px 9px; text-align: center; }
.plate h1 { margin: 0; font: 700 21px/1.2 var(--head); color: var(--teal-ink); }
.count { margin: 2px 0 0; font-size: 13px; color: var(--brown); }
/* the next adhan (world/mosque.js), a tap flies to the mosque */
.adhan { margin: 3px 0 0; font: 400 13px/1.35 var(--head); color: var(--teal-ink); cursor: pointer; }
.adhan:empty { display: none; }
.find { display: flex; align-items: center; padding: 4px 8px; min-width: 0; flex: 1 1 110px; max-width: 300px; }
.find input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 15px/1.4 var(--body); color: var(--ink); padding: 8px 4px; }
.find input::placeholder { color: #6B6155; font-size: 14px; }
.find .go { font-size: 20px; line-height: 1; padding: 2px 3px; color: var(--teal-ink); }
.mode { flex: none; font-size: 18px; padding: 9px 12px; margin-top: 4px; }

/* bottom: the call to comment, the phrase sheet and the shop card share the same spot */
.cta { position: fixed; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(92vw, 460px); font-size: 15px; }
.sheet { position: fixed; bottom: max(78px, calc(env(safe-area-inset-bottom) + 70px)); left: 50%; transform: translateX(-50%);
  width: min(94vw, 460px); padding: 16px 20px 18px; text-align: center; animation: up .22s ease-out; }
@keyframes up { from { transform: translate(-50%, 14px); opacity: 0; } }
.sheet h2 { margin: 2px 0 4px; font: 700 20px/1.3 var(--head); color: var(--teal-ink); }
.sheet .x { position: absolute; top: 6px; left: 10px; font-size: 24px; line-height: 1; padding: 6px 8px; color: var(--brown); }
.hint { margin: 0 0 10px; font-size: 13px; color: #5A5045; }
.menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 14px; }
.card .kind { margin: 0; font: 700 14px/1.3 var(--head); color: var(--teal-ink); }
.card h2 { color: var(--ink); font-family: var(--body); overflow-wrap: anywhere; }
.said { margin: 4px 0; font-size: 15px; }
.when { margin: 0 0 12px; font-size: 12px; color: #6B6155; }

.toast { position: fixed; bottom: calc(96px + env(safe-area-inset-bottom)); left: 50%;   /* under the HUD it covered the title plate and the chips */ transform: translate(-50%, -8px); max-width: 90vw; padding: 9px 16px; border-radius: 14px;
  background: var(--ink); color: var(--cream); font-size: 14px; opacity: 0; transition: .25s; pointer-events: none; text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.loading { position: fixed; inset: 0; display: grid; place-items: center; font: 700 20px var(--head); color: var(--teal-ink); background: var(--cream); }

@media (min-width: 760px) {
  .hud { inset-inline: 18px auto; }
  .plate h1 { font-size: 26px; }
  .sheet { bottom: auto; top: 50%; left: auto; right: 22px; transform: translateY(-50%); width: 380px; }
  @keyframes up { from { transform: translate(14px, -50%); opacity: 0; } }
}

/* level line + progress bar in the card, and the top-ten sheet */
.lvl { margin: 0 0 12px; }
.lvl p { margin: 0 0 6px; font: 600 13px/1.4 var(--body); color: var(--brown); }
.lvl .bar { height: 10px; border-radius: 6px; background: #EFE3C8; border: 1.5px solid var(--brown); overflow: hidden; }
.lvl .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), #F2B934); transition: width .5s; }
.top { max-height: 70vh; overflow: auto; }
.toplist { margin: 6px 0 0; padding: 0 22px 0 0; text-align: start; }
.toplist li { margin: 2px 0; }
.toplist li::marker { font: 700 15px var(--head); color: var(--teal-ink); }
.toplist button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 6px 8px; border-radius: 10px; text-align: start; }
.toplist button:hover, .toplist button:focus-visible { background: rgba(232, 194, 122, .25); }
.toplist b { font: 700 15px var(--body); }
.toplist span { font-size: 12px; color: #6B6155; }

/* «🚶 تمشّى» (core/walk.js): the map's bits step aside, a thumb stick, the door prompt, a shop's card inside */
body.walking .hud, body.walking .cta, body.walking #card, body.walking #build, body.walking #top, body.walking #wxcard { display: none !important; }
.walkhud { position: fixed; inset: 0; pointer-events: none; }
.walkhud > * { pointer-events: auto; }
.walkhud .stick { position: fixed; left: 0; top: 0; width: 112px; height: 112px; border-radius: 50%; pointer-events: none !important;
  background: rgba(245, 240, 230, .3); border: 2px solid rgba(58, 46, 31, .4); opacity: 0; transition: opacity .15s; }
.walkhud .stick.on { opacity: 1; }
.walkhud .stick i { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px; border-radius: 50%;
  background: rgba(245, 240, 230, .9); border: 2px solid var(--brown); pointer-events: none; }
.walkexit { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; }
.walkswap { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 128px; font-size: 18px; padding: 7px 12px; }
.walkdoor { position: fixed; bottom: max(170px, calc(env(safe-area-inset-bottom) + 160px)); left: 50%; transform: translateX(-50%); white-space: nowrap; }
.walkhint { position: fixed; bottom: 6px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 12px; color: var(--brown); opacity: .75;
  pointer-events: none !important; white-space: nowrap; text-shadow: 0 0 4px var(--cream); }
.roomcard { position: fixed; top: auto; bottom: max(26px, env(safe-area-inset-bottom)); left: auto; right: 12px; transform: none; width: min(56vw, 360px); padding: 12px 14px; text-align: center; }
.roomcard .kind { margin: 0; font: 700 14px/1.3 var(--head); color: var(--teal-ink); }
.roomcard h2 { margin: 2px 0 8px; font: 700 20px/1.3 var(--body); overflow-wrap: anywhere; }
.roomcard .acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.walkfade { position: fixed; inset: 0; background: var(--cream); opacity: 0; pointer-events: none; transition: opacity .3s; }
.walkfade.on { opacity: 1; }
@media (pointer: fine) and (min-width: 760px) { .walkhud .stick { display: none; } }
/* the walking map (ui/minimap.js) and the craft buttons */
.minimap { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 12px; width: 124px; height: 124px; padding: 0; border-radius: 50%;
  overflow: hidden; border: 3px solid var(--cream); box-shadow: 0 0 0 2px var(--brown), 0 4px 10px rgba(0, 0, 0, .25); background: #E9DFC9; }
.minimap canvas { display: block; }
.bigmap { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 18px; border: 3px solid var(--cream);
  box-shadow: 0 0 0 2px var(--brown), 0 10px 30px rgba(0, 0, 0, .35); cursor: pointer; }
.walkboards { position: fixed; bottom: max(170px, calc(env(safe-area-inset-bottom) + 160px)); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; white-space: nowrap; }
@media (pointer: fine) and (min-width: 760px) { .walkdoor, .walkboards { bottom: 48px; } }
.walkview { position: fixed; top: max(146px, calc(env(safe-area-inset-top) + 134px)); left: 12px; }   /* under the map: the top right is busy */

.walkhud .chip, .walkhud .gold { min-height: 44px; min-width: 44px; }
/* «⚡ تنقّل» (ui/travel.js): the button under the view switch and its sheet of places */
.walktravel { position: fixed; top: max(200px, calc(env(safe-area-inset-top) + 188px)); left: 12px; }
.travel { z-index: 5; max-height: 70vh; overflow: auto; }
.travel .menu { margin-bottom: 10px; }
.travel .find { margin: 0 0 8px; }
.travel .hint { margin: 4px 0; }

/* weather chip + card, lightning flash */
.wxchip { flex: none; margin-top: 4px; font: 600 13px/1.3 var(--head); white-space: nowrap; }
.wxcard dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 8px 0 0; text-align: start; font: 500 15px/1.4 var(--body); color: var(--ink); }
.wxcard dt { color: var(--teal-ink); font-family: var(--head); font-weight: 600; }
.wxcard dd { margin: 0; }
.flash { position: fixed; inset: 0; background: #F4F6FF; opacity: 0; pointer-events: none; z-index: 5; }
/* core/interact.js: the «اضغط للتفاعل» prompt above the door button, the bag in hand, a short speech bubble */
.walkact { position: fixed; bottom: max(222px, calc(env(safe-area-inset-bottom) + 212px)); left: 50%; transform: translateX(-50%); white-space: nowrap;
  min-height: 48px; display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.15; }
.walkact small { font-size: 11px; opacity: .8; }
.handbag { position: fixed; right: 18px; bottom: max(96px, calc(env(safe-area-inset-bottom) + 86px)); font-size: 54px; transform: rotate(-8deg);
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); pointer-events: none; }
.handbag.pop { animation: bagpop .45s ease-out; }
@keyframes bagpop { from { transform: translateY(60px) rotate(10deg); opacity: 0; } to { transform: rotate(-8deg); opacity: 1; } }
.walkbubble { position: fixed; top: 34%; left: 50%; transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 16px;
  background: rgba(255,250,240,.94); color: #3a3026; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.18); pointer-events: none; }
@media (pointer: fine) and (min-width: 760px) { .walkact { bottom: 100px; } }
.walkdeck { bottom: max(222px, calc(env(safe-area-inset-bottom) + 212px)); }   /* the ferry: walk the deck / back to the helm, over «انزل» */
@media (pointer: fine) and (min-width: 760px) { .walkdeck { bottom: 100px; } }
/* the top 10's medals (ui/crowns.js draws the same colours over their roofs) */
.toplist li.gold::marker { color: #B8892E; }
.toplist li.silver::marker { color: #7D8794; }
.toplist li.bronze::marker { color: #A0643A; }
.toplist li.gold b::after { content: ' 👑'; }

/* a talk with Pip & Pippa (js/ui/talk.js): the lines over the choices, above the walk controls */
.talk { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(200px, calc(env(safe-area-inset-bottom) + 190px)); width: min(440px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 8px; z-index: 30; direction: rtl; pointer-events: auto; }
.talklines { display: flex; flex-direction: column; gap: 6px; }
.talkline { margin: 0; padding: 8px 12px; border-radius: 16px; background: #FFF8EAEE; color: #2B2F38; box-shadow: 0 4px 12px #0003; font-size: 15px; line-height: 1.45; }
.talkline b { margin-inline-end: 6px; color: #0E7577; }
.talkline.pippa b { color: #2E8C8A; }
.talkline:not(.pip):not(.pippa):not(.abood) { background: #FFFFFFD9; font-size: 14px; }
.talkbtns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.talkbtn { font-size: 15px; padding: 9px 14px; }
body[data-talking] .walkact { display: none !important; }
@media (pointer: fine) and (min-width: 760px) { .talk { bottom: 90px; } }
body[data-talking] .livecard, body[data-talking] .onboard, body[data-talking] .walktip { display: none !important; }   /* a talk keeps the screen to itself */

/* the long «شو فيك تبني؟» sheet scrolls inside the screen, its title and ✕ always reachable (audit 2026-11-08) */
#build { max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain; }
/* in a talk nothing else asks for a tap: the house door, the map's labels */
body[data-talking] .walkdoor, body[data-talking] .maplabels { display: none !important; }
.talkx { position: absolute; top: -12px; inset-inline-start: -6px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: #2B2F38; color: #fff; font-size: 15px; box-shadow: 0 2px 6px #0004; }