[hidden] { display: none !important; }
:root { --panel: #f6eedb; --edge: #6b4f2a; --ink: #2b2118; --soft: #7a6a50; --go: #5aa83c; --heart: #ef7d1a; --paper: #fffaf0;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; font: 14px/1.35 Tahoma, Verdana, system-ui, sans-serif; color: var(--ink); background: #9fd3f0; overscroll-behavior: none; }
#map, #play { position: fixed; inset: 0; width: 100%; height: 100%; }
#play { touch-action: none; opacity: 0; pointer-events: none; transition: opacity .6s; }
body.playing #play { opacity: 1; pointer-events: auto; }
body.playing #map { visibility: hidden; }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.panel { background: var(--panel); border: 3px solid var(--edge); border-radius: 6px; box-shadow: 3px 3px 0 #0005; }
button { font: inherit; color: var(--ink); background: #e2d3ad; border: 2px outset #f3e8cc; padding: 6px 12px; cursor: pointer; border-radius: 4px; }
button:active { border-style: inset; }
button.go { background: #8fd06a; }
button.heart { background: #fbd3a4; }
input, select, textarea { font: inherit; border: 2px inset #cbb98f; padding: 6px 8px; background: var(--paper); border-radius: 3px; max-width: 100%; }
a { color: #1b5e9a; }

/* intro */
#intro { position: fixed; inset: 0; z-index: 30; display: grid; place-content: center; text-align: center; pointer-events: none;
  background: radial-gradient(circle, #0000 30%, #0006); transition: opacity .8s; }
#intro.gone { opacity: 0; }
#intro .logo { margin-top: .9em; font: 900 clamp(36px, 10.5vw, 96px)/.9 Georgia, serif; color: #fff4c9; text-shadow: 4px 4px 0 var(--edge), 0 0 30px #0008; letter-spacing: 1px; }
#intro .logo .ins { position: relative; white-space: nowrap; display: inline-block; } #intro .logo .caret { position: relative; display: inline-block; width: .3em; color: var(--heart); }
#intro .logo .caret em { position: absolute; bottom: 2.05em; left: 50%; transform: translateX(-50%) rotate(-6deg); font: italic 700 .44em/1 Georgia, serif; letter-spacing: 2px; white-space: nowrap; text-shadow: 3px 3px 0 var(--edge), 0 0 16px #000a; }
#intro .logo .caret svg { position: absolute; left: 50%; bottom: .3em; width: .32em; height: .58em; transform: translateX(-50%); overflow: visible; filter: drop-shadow(2px 2px 0 var(--edge)) drop-shadow(0 0 6px #000a); } /* Simulation, written in between the words */
#intro .logo small { display: block; margin-top: .12em; font: italic 700 .46em/1 Georgia, serif; color: var(--heart); letter-spacing: 3px; transform: rotate(-4deg); text-shadow: 3px 3px 0 var(--edge), 0 0 20px #0008; } /* "Simulation", stylized under the name */
#intro .tag { margin-top: 14px; color: #fff; font-size: 18px; text-shadow: 0 2px 6px #000; }
#gate { position: fixed; inset: 0; z-index: 31; display: grid; place-items: end center; padding-bottom: 16vh; } #gate[hidden] { display: none; } /* 18+, before anything starts */
#gate .gatebox { display: grid; gap: 12px; justify-items: center; color: #fff; font-size: 18px; text-shadow: 0 2px 6px #000; padding: 0 16px; text-align: center; }
#gate .go { font-size: 20px; padding: 11px 28px; text-shadow: none; }
#gate .gatelink { background: none; border: 0; color: #fff; text-decoration: underline; text-shadow: 0 1px 4px #000; font-size: 14px; box-shadow: none; }
#gateKeyBox { display: grid; gap: 8px; justify-items: center; } #gateKeyBox[hidden] { display: none; } #gateKey { width: min(320px, 80vw); text-align: center; }

/* hud */
#hud { position: fixed; top: calc(8px + var(--safe-t)); left: 8px; right: 8px; z-index: 10; display: flex; gap: 6px; align-items: flex-start; pointer-events: none; }
#hud > * { pointer-events: auto; }
#gatePin { letter-spacing: 6px; text-align: center; } #gateMsg { color: #ffd23f; font-size: 14px; min-height: 0; } #gateMsg:empty { display: none; }
.pinform input { width: 92px; letter-spacing: 4px; text-align: center; }
#hud .right { display: flex; gap: 6px; flex: none; position: relative; }
#shareMenu { position: absolute; top: calc(100% + 6px); right: 0; width: 230px; display: flex; flex-direction: column; gap: 4px; padding: 4px; background: var(--paper); border: 2px solid var(--edge); border-radius: 6px; box-shadow: 2px 2px 0 #0004; z-index: 12; }
#shareMenu[hidden] { display: none; }
#shareMenu button { text-align: left; padding: 8px 10px; border: 0; border-radius: 4px; background: none; box-shadow: none; font-weight: bold; }
#shareMenu button:hover { background: #fff4c9; } #shareMenu small { display: block; font-weight: normal; color: var(--soft); }
.chip { background: var(--panel); border: 2px solid var(--edge); border-radius: 20px; padding: 5px 11px; box-shadow: 2px 2px 0 #0004; white-space: nowrap; }
/* your name, the place, the buttons: one row that shrinks with an ellipsis, never overlapping */
#vis, #cash { flex: 0 0 auto; } #vis.private { background: #3d3a36; color: #fff; }
#bar .meface { font-weight: normal; line-height: 1; } #bar .meface img { width: 22px; height: 22px; }
#bar #meName { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#place { flex: 0 1 auto; min-width: 0; margin: 0 auto; max-width: 44vw; overflow: hidden; text-overflow: ellipsis; }
#here { color: var(--soft); }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid #0006; vertical-align: -1px; margin-right: 4px; }

#quests { position: fixed; z-index: 9; top: calc(52px + var(--safe-t)); right: 8px; width: 230px; padding: 8px 10px; font-size: 13px; }
#quests h4 { margin: 0 0 4px; font-size: 13px; }
#quests div { padding: 2px 0; }
#quests .done { color: var(--soft); text-decoration: line-through; }
#quests .now { font-weight: bold; }

#worldbar { position: fixed; z-index: 11; left: 50%; transform: translateX(-50%); top: calc(56px + var(--safe-t)); padding: 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; width: min(560px, calc(100% - 16px)); max-height: calc(100% - 140px - var(--safe-t) - var(--safe-b)); overflow: auto; }
body:not(.playing) #toast { top: auto; bottom: calc(80px + var(--safe-b)); } /* on the world map the search is at the top: messages wait below */
#picks[hidden] { display: none; }
#picks .shuffle { background: #fff4c9; font-weight: bold; }
#place { cursor: pointer; }
#picks { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } @media (min-width: 600px) { #picks { grid-template-columns: repeat(4, 1fr); } }
#picks button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; font-size: 13px; } #picks button b { font-size: 22px; line-height: 1; }
#worldbar input { flex: 1; min-width: 160px; }
.searchwrap { position: relative; flex: 1; min-width: 160px; display: flex; } .searchwrap input { width: 100%; }
#searchList, .droplist { position: absolute; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--paper); border: 2px solid var(--edge); border-radius: 6px; box-shadow: 2px 2px 0 #0004; max-height: 46vh; overflow: auto; z-index: 5; }
#searchList li { padding: 8px 10px; border-radius: 4px; cursor: pointer; } #searchList li:hover, #searchList li.on { background: #fff4c9; } #searchList small { display: block; color: var(--soft); }
@keyframes savepulse { 0%, 100% { box-shadow: 0 0 0 0 #5aa83c99; transform: scale(1); } 50% { box-shadow: 0 0 0 9px #5aa83c00; transform: scale(1.06); } }
#psavekey.pulse { animation: savepulse 1.1s ease-in-out infinite; }
#worldbar small { width: 100%; color: var(--soft); }

/* bottom bar */
#bar { position: fixed; z-index: 11; left: 50%; transform: translateX(-50%); bottom: calc(8px + var(--safe-b)); display: flex; gap: 6px; }
#bar button { display: grid; place-items: center; font-size: 20px; line-height: 1; padding: 6px 10px 5px; min-width: 64px; position: relative; background: var(--panel); border: 3px solid var(--edge); box-shadow: 2px 2px 0 #0005; }
#bar button span { font-size: 11px; margin-top: 3px; }
#bar button.on { background: #fff4c9; }
#bar i { position: absolute; top: -6px; right: -6px; background: var(--heart); color: #fff; font: bold 11px/18px sans-serif; min-width: 18px; border-radius: 9px; padding: 0 4px; font-style: normal; }
#bar i:empty { display: none; }

/* sheet (bottom drawer) */
#sheet { position: fixed; z-index: 12; left: 8px; bottom: calc(78px + var(--safe-b)); width: min(400px, calc(100% - 16px)); max-height: min(62vh, 560px); overflow: auto; padding: 10px 12px; }
#sheet h3 { margin: 0 0 8px; font-size: 16px; }
.x { position: sticky; top: 0; float: right; padding: 2px 8px; z-index: 1; }
.about h4 { margin: 12px 0 2px; } .about p { margin: 4px 0; line-height: 1.45; }
.lookrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 7px 0; } .lookrow > span { width: 50px; font-size: 13px; color: var(--soft); }
.sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #6b4f2a; padding: 0; } .sw.on { box-shadow: 0 0 0 3px #ef7d1a; }
.chipbtn { padding: 3px 10px; border-radius: 14px; font-size: 13px; } .chipbtn.on { background: #fff4c9; font-weight: bold; }
/* Run Ads */
.adform { display: grid; gap: 6px; margin-top: 8px; } .adform input:not([type=file]) { width: 100%; box-sizing: border-box; }
.adprev { display: flex; gap: 6px; flex-wrap: wrap; } .adprev img { height: 54px; border-radius: 4px; border: 1px solid #cdb98e; }
.myad { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed #cdb98e; } .myad img { width: 64px; height: 40px; object-fit: cover; border-radius: 4px; }
.myad .grow small { display: block; }
/* Me: a grid of boxes that open when tapped */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 10px 0 4px; }
.tile { background: var(--paper); border: 2px solid #cdb98e; border-radius: 8px; box-shadow: 1px 2px 0 #0002; min-width: 0; }
.tile.hot { border-color: var(--heart); background: #fff1e0; }
.tile.open { grid-column: 1 / -1; }
.tile .thead { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; width: 100%; text-align: left; background: none; border: 0; padding: 10px; border-radius: 8px; box-shadow: none; }
.tile .thead .ti { grid-row: span 2; font-size: 22px; }
.tile .thead small { color: var(--soft); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .tbody { display: none; padding: 0 10px 10px; }
.tile.open .tbody { display: block; }
.tile.open .thead { border-bottom: 1px dashed #cdb98e; border-radius: 8px 8px 0 0; margin-bottom: 6px; }
.gear { float: right; margin: -2px 6px 0 0; padding: 2px 8px; font-size: 15px; line-height: 1.2; } .gear.on { background: #fff4c9; }
[data-person] { cursor: pointer; }
.row { display: flex; gap: 6px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; gap: 8px; align-items: center; padding: 7px 2px; border-top: 1px dashed #cdb98e; cursor: pointer; }
.list li .grow { flex: 1; min-width: 0; }
.list li small { color: var(--soft); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list li button { padding: 4px 8px; }
.grpmark { width: 26px; height: 26px; border-radius: 50%; background: var(--heart); color: #fff; font: bold 13px/26px sans-serif; text-align: center; border: 2px solid #fff; box-shadow: 0 1px 4px #0006; cursor: pointer; }
label.tick { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; white-space: nowrap; }
.evlog { max-height: 160px; overflow-y: auto; background: var(--paper); border: 1px solid #cdb98e; border-radius: 6px; padding: 6px 8px; margin: 4px 0; font-size: 14px; }
.evlog div { margin: 2px 0; }
.face { border-radius: 50%; object-fit: cover; vertical-align: middle; border: 1px solid #0003; }
.pface { float: right; margin: 0 34px 0 8px; }
.regs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.reg { display: inline-flex; align-items: center; gap: 4px; background: var(--paper); border: 1px solid #cdb98e; border-radius: 14px; padding: 2px 8px 2px 2px; font-size: 12px; color: var(--ink); }
.reg .dot { margin: 0 2px 0 4px; }
.pill { font-size: 11px; padding: 1px 6px; border-radius: 9px; color: #fff; white-space: nowrap; }
.chips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.chips button { padding: 3px 9px; border-radius: 14px; font-size: 12px; }
.chips button.on { background: #fff4c9; }
.meetbox { background: #fff0de; border: 2px solid #f2b26b; border-radius: 6px; padding: 8px; margin-bottom: 10px; }
.meetbox b { color: #b85a0c; }
.empty { color: var(--soft); padding: 10px 0; }
#log { height: 38vh; max-height: 300px; overflow: auto; background: var(--paper); border: 2px inset #cbb98f; padding: 6px; margin: 6px 0; }
#log .me b { color: #2e7d32; }
#log .sys { color: var(--soft); font-style: italic; }

/* card (tapped thing) */
#card { position: fixed; z-index: 13; right: 8px; top: calc(52px + var(--safe-t)); width: min(320px, calc(100% - 16px)); max-height: 70vh; overflow: auto; padding: 10px 12px; }
#card h2 { margin: 0 0 3px; font-size: 17px; padding-right: 30px; }
#card img { max-width: 100%; border-radius: 4px; margin: 6px 0; }
#card .sw { width: 40px; height: 30px; padding: 0; }
#card .x { position: absolute; right: 8px; top: 8px; float: none; }
.muted { color: var(--soft); }

.label { position: absolute; transform: translate(-50%, -100%); font-size: 11px; background: #fffbe9e6; border: 1px solid var(--edge); padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.label.bubble { background: #fff; font-size: 12px; max-width: 200px; white-space: normal; border-radius: 10px; box-shadow: 1px 2px 0 #0003; }
.label.bot { border-color: #3a7de0; }
.label.heart { border-color: var(--heart); background: #ffe9d1; }
.label.critter { border-color: #6b8a3a; background: #f3f8e6e6; } .label.critter.legend { border-color: #8d4fd6; background: #f3e9ffe6; font-weight: bold; } .label.bubble.critter { border-color: #6b8a3a; font-style: italic; }
ol.quests { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 6px; }
ol.quests > li { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border: 1px dashed #cdb98e; border-radius: 6px; background: #fffdf4; }
ol.quests > li.done { background: #eef7e2; border-style: solid; border-color: #9cc27a; } ol.quests > li.done b { text-decoration: line-through; text-decoration-color: #6b8a3a; }
ol.quests .qe { font-size: 22px; line-height: 1.1; } ol.quests small { display: block; color: var(--soft); } ol.quests .qok { font-size: 18px; }
.qbar { height: 6px; background: #eadfc4; border-radius: 3px; margin: 4px 0 1px; overflow: hidden; } .qbar i { display: block; height: 100%; background: #6b8a3a; }
ul.qlist { list-style: none; padding: 0; margin: 4px 0; max-height: 260px; overflow: auto; } ul.qlist li { padding: 3px 0; font-size: 13px; } ul.qlist button { padding: 0 6px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin-bottom: 6px; } .stat { background: #fffdf4; border: 1px dashed #cdb98e; border-radius: 6px; padding: 6px 8px; } .stat b { display: block; font-size: 17px; } .stat small { color: var(--soft); }
.mefoot { display: flex; gap: 8px; justify-content: center; margin: 14px 0 6px; padding-top: 10px; border-top: 1px dashed #cdb98e; }
button.warn { color: #a3261e; border-color: #a3261e; }
.droplist { margin: 0; padding: 4px; list-style: none; background: var(--paper); border: 2px solid var(--edge); border-radius: 6px; box-shadow: 2px 2px 0 #0004; max-height: 40vh; overflow: auto; z-index: 5; } .droplist li { padding: 8px 10px; border-radius: 4px; cursor: pointer; } .droplist li:hover { background: #fff4c9; } .droplist small { display: block; color: var(--soft); }
.tile.open > .thead { position: sticky; top: 0; z-index: 2; background: var(--paper); } .tile.open > .thead::after { content: '▲'; margin-left: auto; font-size: 13px; color: var(--soft); padding-left: 6px; }
.champ { font-weight: bold; color: #8a5a00; background: #fff4c9; border: 2px solid #e8b400; border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
.label.hint { background: #fff4c9; border: 2px solid var(--edge); font-weight: bold; animation: bob 1s ease-in-out infinite; }
@keyframes bob { 50% { margin-top: -5px; } }

#toast { position: fixed; z-index: 40; top: calc(56px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: grid; gap: 6px; width: min(360px, calc(100% - 16px)); pointer-events: none; }
#toast .tx { position: absolute; top: 2px; right: 2px; background: none; border: 0; box-shadow: none; padding: 2px 7px; font-size: 13px; color: var(--soft); line-height: 1; }
#toast div { position: relative; padding-right: 28px !important; background: var(--panel); border: 2px solid var(--edge); padding: 8px 12px; border-radius: 6px; box-shadow: 2px 2px 0 #0004; pointer-events: auto; animation: pop .25s; }
#toast button { margin: 4px 4px 0 0; padding: 3px 10px; }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }

@media (max-width: 640px) {
  #quests { top: auto; bottom: calc(80px + var(--safe-b)); right: 8px; width: 190px; font-size: 12px; }
  #card { top: auto; bottom: calc(78px + var(--safe-b)); left: 8px; right: 8px; width: auto; max-height: 58vh; }
  #sheet { left: 8px; right: 8px; width: auto; }
  #bar { gap: 4px; } #bar button { min-width: 52px; padding: 6px 6px 5px; font-size: 18px; } #bar button span { font-size: 10px; }
  #bar button { min-width: 58px; }
}
.maplibregl-ctrl-bottom-right { bottom: 70px; }

/* quiet links: there if you look, never in the way */
a.quiet { font-size: 11px; font-weight: normal; color: var(--soft); text-decoration: none; opacity: .85; margin-left: 6px; }
a.quiet:hover { text-decoration: underline; opacity: 1; }
#worldbar .quiet-row { width: 100%; color: var(--soft); font-size: 11px; }
#intro .motto { margin-top: 12px; color: #fff4c9; font-size: 17px; font-style: italic; text-shadow: 0 1px 5px #000; }

/* photo mode (?photo): just the world */
body.photo #hud, body.photo #bar, body.photo #quests, body.photo #toast, body.photo #card, body.photo #sheet, body.photo #labels, body.photo #worldbar, body.photo #intro, body.photo .maplibregl-control-container { display: none !important; }

/* desktop only: shortcuts by the money, quick jumps and a search by the globe */
.desk { display: none; }
@media (min-width: 1000px) and (pointer: fine) {
  .desk { display: flex; gap: 6px; align-items: center; }
  .deskSearch { min-width: 180px; } .deskSearch input { width: 190px; padding: 5px 10px; border-radius: 20px; }
  #jumps { display: flex; gap: 4px; } #jumps button { padding: 5px 9px; }
}

#labels .label[data-av], #labels .label[data-crit] { pointer-events: auto; cursor: pointer; } /* tap a name to open them */
.adsbtn { padding-left: 18px !important; padding-right: 18px !important; font-weight: bold; } /* desktop: the way in to Run Ads */