@font-face { font-family: 'JetBrains Mono'; font-weight: 400 500; src: url(/fonts/jetbrains-mono.woff2) format("woff2"); }
.phone { max-width: 560px; margin: 0 auto; padding: 14px 14px calc(28px + env(safe-area-inset-bottom)); font-size: 17px; }
.phone .card { margin-bottom: 12px; }
.phone h1 { font-size: 1.45rem; line-height: 1.15; }
.phone h2 { font-size: 1.1rem; margin-bottom: 8px; }
.top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.top .logo { font-family: Poppins; font-weight: 600; letter-spacing: .03em; font-size: 1.05rem; }
.cash { font-family: Poppins; font-weight: 600; font-size: 2.6rem; line-height: 1; }
.cash.neg { color: var(--bad); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row .btn { flex: 1 1 auto; }
.choice-list { display: grid; gap: 8px; }
.choice { display: block; width: 100%; text-align: left; border: 1px solid var(--line2); background: rgba(255,255,255,.04); border-radius: 14px; padding: 12px 14px; color: var(--text); cursor: pointer; }
.choice.sel { border-color: #9aa1ff; background: rgba(110, 120, 255, .18); box-shadow: 0 0 0 2px rgba(130, 140, 255, .35); }
.choice b { font-family: Poppins; font-weight: 600; }
.choice small { display: block; color: var(--muted); margin-top: 3px; }
.choice.taken { opacity: .35; pointer-events: none; }
.action { border: 2px solid rgba(160, 150, 255, .45); }
.action.mine { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(232, 184, 74, .2); }
.big { width: 100%; font-size: 1.25rem; padding: .9em; margin-top: 8px; }
.dealcard { background: rgba(0,0,0,.25); border-radius: 14px; padding: 12px 14px; margin: 8px 0; }
.dealcard .tag { font-family: Poppins; font-size: .72rem; letter-spacing: .1em; color: var(--muted); }
.dealcard h3 { font-size: 1.15rem; margin: 2px 0 4px; }
.dealcard p { margin: 0; color: #d8d5f0; font-size: .95rem; }
.opt { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.bar { height: 9px; background: rgba(255,255,255,.12); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #6a74ff, #e07ad8); border-radius: 99px; }
.ck { display: inline-block; padding: .15em .6em; border-radius: 99px; background: rgba(255,255,255,.08); color: var(--muted); font-size: .85rem; margin: 4px 4px 0 0; }
.ck.ok { background: rgba(110, 231, 168, .18); color: var(--ok); }
.feed div { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.feed time { color: var(--muted); margin-right: 6px; font-size: .8rem; }
details summary { cursor: pointer; font-family: Poppins; font-weight: 600; }
.others div { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(227, 169, 46, .5); } 50% { box-shadow: 0 0 0 10px rgba(227, 169, 46, 0); } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* company sheet, after Cashflow's financial statement */
.sec { display: flex; justify-content: space-between; align-items: baseline; font: 600 .72rem/1.2 Poppins, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.sec span { font-weight: 500; letter-spacing: .02em; text-transform: none; font-size: .8rem; }
.ln { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ln b { font-family: Poppins, sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ln.sub { padding: 5px 0 5px 12px; font-size: .9rem; color: var(--muted2); border-bottom: 1px dashed rgba(255,255,255,.08); }
.ln.sub b { font-weight: 500; }
.ln.tot { border-bottom: 0; border-top: 2px solid rgba(255,255,255,.4); margin-top: 6px; padding-top: 10px; font-size: 1.15rem; }
.ln.tot span { font-family: Poppins, sans-serif; font-weight: 600; }
.ln .neg, .neg { color: var(--bad); }
.ln .pos { color: var(--ok); }
.bsh { font: 600 .95rem Poppins, sans-serif; margin: 14px 0 2px; }
.bsh:first-of-type { margin-top: 0; }
.cc { display: inline-block; min-width: 2.2em; text-align: center; font: 700 .66rem/1 Poppins, sans-serif; letter-spacing: .1em; padding: 4px 5px; border-radius: 5px; color: #fff; margin-right: 7px; vertical-align: 1px; }
.others .sec { display: flex; border: 0; padding: 0; font-size: .72rem; }

/* ================= player passport (Lisa's design, phone 390 wide; tablet 3 columns) ================= */
.phone { font-family: Poppins, system-ui, sans-serif; }
.phone .card, .pp-card { padding: 16px; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.13); box-shadow: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pp { display: flex; flex-direction: column; gap: 12px; }
.pp-col { display: contents; }
.pp-top { order: 0; display: flex; align-items: center; gap: 8px; padding: 0 4px; }
#s-01 { order: 1; } #s-02 { order: 2; } #s-03 { order: 3; } #s-04 { order: 4; } #s-05 { order: 5; } #s-06 { order: 6; } #s-07 { order: 7; }
.pp-top .logo { font-size: 16px; font-weight: 700; letter-spacing: .04em; margin-right: auto; white-space: nowrap; }
.pp-pill.q { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.pp-line { display: none; }
.pp-pill { font: 500 10.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; color: #fff; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); text-decoration: none; white-space: nowrap; }
.pp-pill.wide { display: none; }
.pp-card { display: flex; flex-direction: column; gap: 12px; }
.pp-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 500 10px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .12em; color: #b9b4d0; text-transform: uppercase; }
.pp-h svg { flex: none; }
.pp-sub { font-size: 12px; color: #b9b4d0; line-height: 1.45; }
.pp-sub .pos, .pos { color: #6fdca2; } .pp-sub .neg, .neg { color: #ff7fb8; }
/* 01 passport */
.pp-pass { position: relative; padding: 16px 16px 12px; gap: 0; background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); overflow: hidden; isolation: isolate; }
.pp-flag { position: absolute; inset: 0; z-index: -1; }
.pp-flag .wave { position: absolute; inset: -8px; filter: url(#ppWave); opacity: .28; }
.pp-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,18,31,.55), rgba(20,18,31,.1)); }
.wave { position: absolute; inset: -8px; filter: url(#ppWave); }
.wave .sway { position: absolute; inset: 0; animation: ppSway 5s ease-in-out infinite; }
.wave .shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0,0,0,.34), rgba(255,255,255,.14) 50%, rgba(0,0,0,.34)); background-size: 80px 100%; animation: ppShade 2.6s linear infinite; }
@keyframes ppSway { 0%, 100% { transform: skewY(0deg) scale(1.06); } 50% { transform: skewY(-2.5deg) scale(1.1); } }
@keyframes ppShade { from { background-position: 0 0; } to { background-position: 80px 0; } }
@keyframes ppStamp { 0% { opacity: 0; transform: scale(1.8) rotate(-24deg); } 100% { opacity: 1; transform: scale(1) rotate(-9deg); } }
.pp-live { display: flex; align-items: center; gap: 6px; color: #6fdca2; }
.pp-live i { width: 7px; height: 7px; border-radius: 50%; background: #6fdca2; box-shadow: 0 0 8px #6fdca2; }
.pp-hair { width: 56px; height: 1px; background: rgba(255,255,255,.22); margin: 9px 0 14px; }
.pp-id { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pp-id > div:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pp-co { font-size: 19px; font-weight: 600; line-height: 1.15; text-wrap: balance; }
.pp-cashbox { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.pp-cash { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.pp-cash.neg { color: #ff7fb8; }
.pp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.pp-stats > div { padding: 9px 10px; border-radius: 10px; background: rgba(20,18,31,.45); display: flex; flex-direction: column; gap: 4px; }
.pp-stats span:first-child { font: 500 9.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; color: #b9b4d0; }
.pp-stats b { font-size: 15px; font-weight: 600; }
.pp-rings { display: flex; gap: 5px; padding-top: 3px; }
.pp-rings i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #ff7fb8; }
.pp-rings i.on { background: #ff7fb8; }
.pp-mrz { margin-top: 12px; font: 400 9.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; color: rgba(255,255,255,.28); white-space: nowrap; overflow: hidden; }
/* 02 your turn */
.phone .card.action { display: flex; flex-direction: column; gap: 12px; border: 1.5px solid rgba(255,255,255,.14); border-radius: 20px; background: linear-gradient(180deg, #221d36, #1a1729); }
.phone .card.action.mine { border-color: transparent; background: linear-gradient(180deg, #221d36, #1a1729) padding-box, linear-gradient(135deg, #8f9bff, #d77cf0, #ff7fb8) border-box; box-shadow: 0 0 36px rgba(215,124,240,.35); }
.phone .card.action h2 { font-size: 17px; margin: 0; }
.phone .card.action > p, .phone .card.action > .muted { font-size: 13.5px; line-height: 1.45; }
.phone .dealcard { margin: 0; padding: 14px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 8px; }
.dealcard .tagrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dealcard .tag { font: 500 10px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .12em; color: #b9b4d0; }
.dealcard .ban { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; padding: 4px 8px 4px 9px; border-radius: 6px; color: #fff; }
.dealcard .hair { width: 40px; height: 1px; background: rgba(255,255,255,.2); }
.phone .dealcard h3 { font-size: 18px; font-weight: 600; line-height: 1.2; margin: 0; }
.phone .dealcard p { font-size: 12.5px; line-height: 1.5; color: #d9d5ea; margin: 0; }
.dealcard .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.dealcard .chips span { font-size: 11px; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.08); }
.phone .opt { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.phone .btn { border-radius: 14px; min-height: 48px; font-size: 14px; font-weight: 500; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18); }
.phone .btn.primary { min-height: 54px; border: 0; background: linear-gradient(90deg, #5b6bf0, #c04ee0, #e94f9d); box-shadow: 0 8px 24px rgba(192,78,224,.4); font-size: 15px; font-weight: 600; }
.phone .btn.small { min-height: 0; border-radius: 9px; font-size: 12px; }
.phone .btn:active { transform: scale(.98); }
.phone .big { margin-top: 0; }
.pp-note { font-size: 12.5px; color: #d9d5ea; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
/* 03 go global */
.pp-big { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pp-big b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.pp-big span { font-size: 12.5px; color: #b9b4d0; }
.pp-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.pp-bar i { display: block; height: 100%; min-width: 8px; border-radius: 99px; background: linear-gradient(90deg, #8f9bff, #d77cf0, #ff7fb8); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.pp-mis { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pp-mis.line { padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }
/* 04 visa stamps */
.pp-stamps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pp-slot { position: relative; height: 86px; border-radius: 12px; border: 1px dashed rgba(255,255,255,.18); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; overflow: hidden; isolation: isolate; }
.pp-slot > i { width: 8px; height: 8px; border-radius: 50%; }
.pp-slot > span { font-size: 11.5px; color: #b9b4d0; }
.pp-slot > em { font: 500 8.5px 'JetBrains Mono', ui-monospace, monospace; font-style: normal; letter-spacing: .12em; color: rgba(255,255,255,.35); }
.pp-slot.has { border-color: rgba(255,255,255,.25); }
.pp-slotflag { position: absolute; inset: 0; z-index: -1; }
.pp-slotscrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,31,.05), rgba(20,18,31,.5)); }
.pp-stamp { width: 70px; height: 70px; border-radius: 50%; border: 2px solid #fff; background: rgba(20,18,31,.38); box-shadow: inset 0 0 0 3px rgba(20,18,31,.4), inset 0 0 0 4px #fff, 0 4px 14px rgba(0,0,0,.45); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #fff; transform: rotate(-9deg); }
.pp-stamp.slam { animation: ppStamp .5s cubic-bezier(.2,1.4,.4,1) both; }
.pp-stamp b { font-size: 17px; font-weight: 700; letter-spacing: .12em; padding-left: .12em; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.pp-stamp span { font: 500 7px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; max-width: 60px; text-align: center; line-height: 1.1; }
.pp-slot .more { position: absolute; right: 8px; top: 6px; font: 600 11px Poppins, sans-serif; font-style: normal; color: #fff; }
/* 05 badges */
.pp-badges { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; justify-items: center; }
.pp-badge { display: flex; flex-direction: column; align-items: center; gap: 7px; opacity: .35; }
.pp-badge.on { opacity: 1; }
.pp-badge span { font-size: 11px; font-weight: 500; }
/* 06 bank & deals */
.pp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pp-bankbtn { height: 62px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-family: Poppins, sans-serif; cursor: pointer; }
.pp-bankbtn b { font-size: 13px; font-weight: 600; } .pp-bankbtn span { font-size: 11px; }
.pp-bankbtn:disabled { opacity: .4; cursor: default; }
.pp-rule { height: 1px; background: rgba(255,255,255,.1); }
.pp-title { font-size: 14px; font-weight: 600; font-family: Poppins, sans-serif; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-chip { font: 400 12px Poppins, sans-serif; padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: #fff; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pp-chip i { width: 7px; height: 7px; border-radius: 50%; }
.pp-chip.sel { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }
.pp-payrow { display: flex; align-items: center; gap: 8px; }
.pp-step { display: flex; align-items: center; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(20,18,31,.5); overflow: hidden; }
.pp-step button { width: 44px; height: 46px; border: 0; background: transparent; color: #fff; font-size: 18px; cursor: pointer; }
.pp-step span { min-width: 46px; text-align: center; font-size: 15px; font-weight: 600; }
.pp-pay { flex: 1; height: 46px; border: 0; border-radius: 12px; background: #f7f6fb; color: #1e1b2e; font: 600 14px Poppins, sans-serif; cursor: pointer; }
.pp-card select { width: 100%; }
.pp-card details summary { list-style: none; }
.pp-card details summary::before { content: "▸ "; } .pp-card details[open] summary::before { content: "▾ "; }
/* 07 balance sheet */
#s-07 { gap: 0; }
#s-07 .pp-h { margin-bottom: 4px; }
#s-07 .bsh { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 2px; }
#s-07 .ln small { font-size: 11px; }
#s-07 .ln { font-size: 14.5px; }
#s-07 .ln.sub { font-size: 13px; }
#s-07 .ln.tot { font-size: 17px; }
@media (prefers-reduced-motion: reduce) { .wave .sway, .wave .shade, .pp-stamp.slam { animation: none; } }

/* tablet / laptop landscape: header bar, three columns that scroll on their own (only the passport; join, lobby and the guide scroll normally) */
@media (min-width: 1000px) and (orientation: landscape) {
  html.gp-pass, html.gp-pass body { height: 100%; overflow: hidden; }
  .gp-pass .phone { max-width: none; height: 100vh; padding: 20px 24px; }
  .pp { display: grid; grid-template-columns: 340px minmax(0, 1fr) 320px; grid-template-rows: auto minmax(0, 1fr); gap: 16px; height: 100%; }
  .pp-top { grid-column: 1 / -1; }
  .pp-top .logo { margin-right: 0; font-size: 18px; }
  .pp-line { display: block; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.25), transparent); margin: 0 10px; }
  .pp-pill.wide { display: inline-block; }
  .pp-col { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; scrollbar-width: none; min-height: 0; }
  .pp-col::-webkit-scrollbar { width: 0; height: 0; }
  .pp-col > * { flex-shrink: 0; }
  .pp-cash { font-size: 52px; }
}
/* lobby: confirmed mission */
.ready-card { border-color: rgba(111,220,162,.55); background: linear-gradient(160deg, rgba(111,220,162,.16), rgba(255,255,255,.03)); }
.ready-tick { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #6fdca2; color: #14121f; font: 700 24px Poppins, sans-serif; }

/* computer view: the board, and next to it your turn, then players | passport */
.gp-desk .phone { max-width: none; padding: 16px 20px 40px; }
.desk { display: flex; gap: 20px; height: calc(100vh - 32px); }
.dk-board { flex: none; position: relative; }
.dk-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; scrollbar-width: none; font-size: 14px; }
.dk-side::-webkit-scrollbar { width: 0; }
.dk-side > * { flex-shrink: 0; }
.dk-side .pp-top { display: flex; }
@keyframes ppOpen { from { opacity: 0; transform: perspective(1200px) rotateY(-14deg) translateX(-8px); } to { opacity: 1; transform: none; } }
.pp-cover { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 380px; margin: 0 auto; padding: 0; border: 0; background: none; color: var(--muted); font: 500 12px Poppins, sans-serif; cursor: pointer; }
.pp-cover svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); transition: transform .3s cubic-bezier(.2, .8, .2, 1); transform-origin: left center; }
.pp-cover:hover svg, .pp-cover:focus-visible svg { transform: perspective(1200px) rotateY(-9deg); }
.pp-close { position: sticky; top: 0; z-index: 3; align-self: flex-start; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(20, 18, 31, .85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font: 500 12.5px Poppins, sans-serif; cursor: pointer; }
.pp-close:hover { border-color: rgba(255, 255, 255, .5); }

/* the ID page (design passport-open-2a): cream paper, indigo and gold */
.pp-idpage { position: relative; padding: 18px 18px 0; border-radius: 16px; overflow: hidden; color: #1e1b2e; font-family: Poppins, sans-serif; box-shadow: 0 0 0 6px #3940b8, 0 16px 34px rgba(0, 0, 0, .4); margin: 6px;
  background: repeating-linear-gradient(55deg, rgba(91, 107, 240, .045) 0 1px, transparent 1px 9px), repeating-linear-gradient(-55deg, rgba(233, 79, 157, .035) 0 1px, transparent 1px 9px), linear-gradient(160deg, #f7f2e6, #efe7d4); }
.pp-idpage small { display: block; font-size: 8.5px; font-weight: 500; letter-spacing: .14em; color: #7d7896; margin-bottom: 2px; }
.pp-idpage span { font-size: 13px; font-weight: 500; }
.pp-idpage .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; }
.pp-idpage .red { color: #c0392b; }
.pp-idpage .pos { color: #1f8a55; } .pp-idpage .neg { color: #c0392b; }
.idp-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.idp-h b { color: #2f3ab5; font-size: 15px; font-weight: 700; letter-spacing: .2em; }
.idp-h span { font-size: 9.5px; letter-spacing: .16em; color: #7d7896; }
.idp-row { display: flex; gap: 20px; margin-bottom: 14px; }
.idp-row > div:last-child { margin-left: auto; text-align: right; }
.idp-body { position: relative; display: grid; grid-template-columns: 31% minmax(0, 1fr); gap: 14px; }
.idp-pic { display: flex; flex-direction: column; gap: 8px; }
.idp-photo { aspect-ratio: 3 / 4; border-radius: 6px; border: 1.5px solid #a9a3d8; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #e4e0f3, #c9c3e6); position: relative; overflow: hidden; }
.idp-photo::before { content: ""; position: absolute; inset: 0; background: var(--c); opacity: .55; }
.idp-photo svg { position: relative; }
.idp-team { border-radius: 6px; padding: 7px 4px; text-align: center; font-size: 7.5px !important; letter-spacing: .14em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.idp-f { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.idp-f .hold { font-size: 16px; font-weight: 700; letter-spacing: .02em; }
.idp-f .co { font-size: 13.5px; font-weight: 600; display: block; padding-bottom: 3px; border-bottom: 1.5px dashed #b9b4d0; }
.idp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.idp-two span { font-size: 12px; }
.idp-seal { position: absolute; right: -6px; top: 2px; width: 58px; height: 58px; opacity: .9; pointer-events: none; }
.idp-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(30, 27, 46, .12); }
.idp-money span { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.idp-rings { display: inline-flex; gap: 5px; margin-top: 4px; }
.idp-rings i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #c0392b; }
.idp-rings i.on { background: #c0392b; }
.idp-reg { margin-top: 12px; }
.idp-reg div { display: flex; gap: 10px; margin-top: 4px; }
.idp-reg i { width: 38px; height: 38px; border-radius: 50%; border: 1.5px dashed #a9a3d8; display: flex; align-items: center; justify-content: center; font: 700 10px Poppins, sans-serif; font-style: normal; letter-spacing: .08em; color: #fff; }
.idp-reg i.on { border: 2px solid rgba(255, 255, 255, .8); box-shadow: 0 0 0 1.5px rgba(30, 27, 46, .25); transform: rotate(-8deg); }
.idp-note { margin-top: 10px; font-size: 12px; color: #c0392b; font-weight: 600; }
.idp-mrz { margin: 14px -18px 0; padding: 10px 18px 12px; background: rgba(255, 255, 255, .75); border-top: 1px solid rgba(30, 27, 46, .1); font: 500 10.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .06em; line-height: 1.6; white-space: nowrap; overflow: hidden; color: #1e1b2e; }
@media (prefers-reduced-motion: reduce) { .ppfull.open .ppf-in { animation: none; } .pp-cover svg { transition: none; } }
/* inside the scrolling passport column: solid cards (blurred glass inside a scroll box draws unreliably in some browsers) */
.ppfull .pp-card { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(180deg, #2a2540, #221e35); }

/* event cards (world news, surprises, crisis, free deals): stay until OK */
.evov { position: fixed; inset: 0; z-index: 80; display: flex; align-items: safe center; justify-content: center; padding: 16px; background: rgba(14, 12, 24, .72); overflow-y: auto; }
.evc { position: relative; width: min(480px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 24px 24px 20px; border-radius: 22px; background: linear-gradient(180deg, #2a2540, #1e1a30); border: 1.5px solid rgba(255, 255, 255, .2); box-shadow: 0 24px 70px rgba(0, 0, 0, .55); color: #fff; font-family: Poppins, sans-serif; animation: ppOpen .35s cubic-bezier(.2, .8, .2, 1) both; }
.evc.ev-news { background: linear-gradient(140deg, #8f9bff, #5b6bf0 40%, #3d47c9); border-color: rgba(200, 206, 255, .6); }
.evc.ev-surprise { border-color: #e94f9d; box-shadow: 0 0 0 1px rgba(233, 79, 157, .35), 0 24px 70px rgba(0, 0, 0, .55); }
.evc.ev-crisis, .evc.ev-space { border-color: #ff8a8a; }
.evc.ev-deal, .evc.ev-good { border-color: #6fdca2; }
.evdot { position: absolute; right: 12px; top: -46px; width: 96px; pointer-events: none; }
.evtag { font: 600 11px Poppins, sans-serif; letter-spacing: .14em; color: rgba(255, 255, 255, .75); padding-right: 70px; }
.evc h2 { font-size: 24px; line-height: 1.15; margin: 2px 0 0; }
.evc p { margin: 0; font: 400 14.5px/1.5 'DM Sans', Poppins, sans-serif; color: #e7e4f4; }
.eveff { padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .12); font-weight: 600; font-size: 15px; }
.eveff small { font-weight: 400; opacity: .7; }
.evres { display: grid; gap: 5px; }
.evres div { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; padding: 7px 10px; border-radius: 10px; font-size: 13px; border-left: 4px solid transparent; }
.evres div b { font-size: 14px; }
.evres div span { opacity: .92; }
.evres div.hurt { background: #c4223f; border-left-color: #ff8fa3; }
.evres div.safe { background: #14804f; border-left-color: #7ef0b8; }
.evres div.none { background: rgba(18, 16, 30, .78); border-left-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .72); }
.evres div.me { box-shadow: 0 0 0 1.5px #fff; }
.evc .btn { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .evc { animation: none; } }
/* problems */
.pp-title.neg { color: #ff9cc8; }
.pp-prob { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; background: rgba(255, 127, 184, .1); border: 1px solid rgba(255, 127, 184, .35); margin-bottom: 6px; }
.pp-prob > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pp-prob b { font-size: 13.5px; font-weight: 600; }
.pp-prob span { font-size: 11.5px; color: var(--muted); }
.pp-fix { flex: none; padding: 8px 12px; border-radius: 10px; border: 0; background: linear-gradient(90deg, #5b6bf0, #c04ee0); color: #fff; font: 600 12.5px Poppins, sans-serif; cursor: pointer; }
.pp-fix:disabled { opacity: .4; cursor: default; }
.pp-probline { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: #ff9cc8; }

/* computer view v3: players in a row, your turn next to the closed passport */
.dk-side { overflow: hidden; }
.dk-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; font-size: 12.5px; }
.dk-players .pc { grid-template-columns: auto minmax(0, 1fr); padding: .5em .7em; gap: .15em .5em; }
.dk-players .pc > div:nth-of-type(1) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-players .pc .cash { grid-column: 1 / -1; text-align: left; font-size: 1.15em; }
.dk-players .pc .meta { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-players .pc .pbadges { display: none; }
.dk-main { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%); gap: 14px; }
#s-02.dk-turn { min-height: 0; overflow-y: auto; scrollbar-width: none; order: 0; }
.dk-turn::-webkit-scrollbar { width: 0; }
.dk-turn > .card { margin: 0; }
.dk-cov { position: relative; min-height: 0; height: 100%; }
.dk-cov .pp-cover { max-width: none; height: auto; max-height: 100%; }
.dk-cov .pp-cover svg { width: 100%; height: auto; max-height: calc(100vh - 230px); }
.cov-flag { position: absolute; top: 48%; right: 6%; width: 32%; max-width: 104px; transform: rotate(7deg); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cov-flag:empty { display: none; }
.cf-wave { position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 10px 22px rgba(0, 0, 0, .45); }
.cov-flag span { font: 600 8.5px 'JetBrains Mono', monospace; letter-spacing: .1em; color: #fff; background: rgba(20, 18, 31, .85); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }

/* the passport opens over the whole screen */
.ppfull { position: fixed; inset: 0; z-index: 70; display: none; overflow-y: auto; padding: 18px 24px 40px; background: rgba(14, 12, 24, .86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ppfull.open { display: block; }
.ppfull.open .ppf-in { animation: ppOpen .4s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left center; }
.ppf-in { max-width: 1320px; margin: 0 auto; }
.ppf-head { position: sticky; top: -18px; z-index: 3; display: flex; align-items: center; gap: 16px; padding: 10px 0; }
.ppf-t { font: 700 15px Poppins, sans-serif; letter-spacing: .2em; color: #f2cd6b; }
.ppf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ppf-grid .pp-col { display: flex; flex-direction: column; gap: 16px; overflow: visible; min-height: 0; }
.ppf-grid .pp-col > * { flex-shrink: 0; }
@media (max-width: 1100px) { .ppf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* waving flags: the latest entry (visa page) and small European stamps */
.pp-visa { position: relative; height: 150px; border-radius: 16px; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15), 0 14px 30px rgba(0, 0, 0, .35); background: #221e35; }
.pp-visa-flag { position: absolute; inset: 0; z-index: -1; }
.pp-visa-t { position: absolute; left: 16px; bottom: 14px; display: flex; flex-direction: column; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.pp-visa-t small { font: 600 9.5px 'JetBrains Mono', monospace; letter-spacing: .16em; opacity: .9; }
.pp-visa-t b { font: 700 24px Poppins, sans-serif; line-height: 1.1; }
.pp-visa-t span { font-size: 12.5px; }
.pp-visa .visa-stamp { position: absolute; right: 14px; top: 14px; }
.pp-visa-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font: 500 12.5px 'JetBrains Mono', monospace; letter-spacing: .06em; color: var(--muted); border: 1.5px dashed rgba(255, 255, 255, .2); border-radius: 16px; }
.pp-eustamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; margin-top: 6px; }
.pp-eu { position: relative; height: 54px; border-radius: 10px; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.pp-eu b { font: 700 14px Poppins, sans-serif; letter-spacing: .1em; }
.pp-eu span { font: 600 8px 'JetBrains Mono', monospace; letter-spacing: .1em; }
.rival { margin: 4px 0 0; font-size: .85rem; color: #ffb4a8; }
.hubnote { margin: 4px 0 0; font-size: .85rem; font-weight: 600; color: #7ee2a0; }

/* v0.5: Europe or World, loans as an amount, credit analyst */
.zone { display: grid; gap: 10px; margin-top: 10px; }
.zbtn { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #fff; font: 400 14px/1.4 'DM Sans', Poppins, sans-serif; cursor: pointer; }
.zbtn b { font: 700 18px Poppins, sans-serif; }
.zbtn span { color: #cfcae4; }
.zbtn.eu { border-color: rgba(143, 155, 255, .6); }
.zbtn.w { border-color: rgba(225, 103, 206, .6); }
.zbtn:hover, .zbtn:focus-visible { background: rgba(255, 255, 255, .12); outline: none; }
.pp-short { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 180, 168, .1); font-size: .85rem; color: #ffd2ca; }
.pp-loanbar { display: inline-block; width: 46px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.pp-loanbar i { display: block; height: 100%; background: linear-gradient(90deg, #f2cd6b, #f97362); }
.pp-pay.ghost { background: transparent; border: 1.5px solid rgba(255, 255, 255, .3); color: #fff; }
.an { display: grid; gap: 8px; margin-top: 10px; }
.an-row { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.an-row.risk { border-color: rgba(249, 115, 98, .6); }
.an-row > div:first-child { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.an-row i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.an-row small { color: #b9b4d0; }
.an-n { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: .85rem; color: #cfcae4; }
.an-risk { margin-top: 6px; font-size: .85rem; color: #ffb4a8; }

/* world map entry points: the visa page (tap anywhere) and a button in 04 */
.pp-visa-map { position: absolute; inset: 0; z-index: 5; border: 0; background: transparent; cursor: pointer; border-radius: inherit; }
.pp-visa-map:focus-visible { outline: 2px solid #c04ee0; outline-offset: -2px; }
.pp-visa-hint { position: absolute; right: 14px; bottom: 10px; z-index: 4; font: 600 10px Poppins, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .8); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.pp-mapbtn { white-space: nowrap; margin-left: 10px; font: 600 10.5px Poppins, sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; }
.pp-mapbtn:hover, .pp-mapbtn:focus-visible { border-color: #c04ee0; outline: none; }
/* bank: one switch for borrowing or paying a player */
.pp-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; border-radius: 14px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12); }
.pp-seg button { height: 38px; border: 0; border-radius: 10px; background: transparent; color: rgba(255,255,255,.7); font: 600 13px Poppins, sans-serif; cursor: pointer; }
.pp-seg button.sel { background: #f7f6fb; color: #1e1b2e; }
/* stock exchange: one card per public company */
.sx-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.sx { border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 12px; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); display: flex; flex-direction: column; gap: 10px; }
.sx.mine { border-color: rgba(111,220,162,.55); background: linear-gradient(160deg, rgba(111,220,162,.14), rgba(255,255,255,.02)); }
.sx.self { margin-top: 8px; gap: 6px; }
.sx-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sx-co { display: inline-flex; align-items: center; gap: 8px; font: 600 14px Poppins, sans-serif; }
.sx-co i { width: 10px; height: 10px; border-radius: 50%; }
.sx-slots { display: inline-flex; gap: 5px; }
.sx-slots i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.4); }
.sx-slots i.on { border: 1.5px solid #fff; }
.sx-n { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sx-n div { display: flex; flex-direction: column; gap: 1px; padding: 8px; border-radius: 10px; background: rgba(0,0,0,.22); }
.sx-n small { font-size: 10px; letter-spacing: .08em; color: rgba(255,255,255,.55); }
.sx-n b { font: 600 17px Poppins, sans-serif; }
.sx-n b.pos { color: #6fdca2; }
.sx-own { font: 600 13px Poppins, sans-serif; color: #6fdca2; text-align: center; padding: 6px 0 2px; }
.sx-own.muted { color: rgba(255,255,255,.5); }
/* phones: the board as a full-screen layer */
.pboard { display: none; position: fixed; inset: 0; z-index: 60; background: rgba(12, 10, 24, .96); flex-direction: column; }
.pboard.open { display: flex; }
.pb-head { display: flex; align-items: center; gap: 8px; padding: 12px 8px 8px; }
.pb-t { flex: 1; font: 600 13px Poppins, sans-serif; letter-spacing: .16em; color: rgba(255,255,255,.7); padding-left: 6px; }
.pb-scroll { overflow: auto; padding: 0 8px; flex: none; max-height: calc(100vh - 70px); -webkit-overflow-scrolling: touch; }
.pboard:not(.zoom) .pb-scroll { display: flex; justify-content: center; }
.pb-pl { padding: 10px 8px 16px; overflow-y: auto; flex: 1; min-height: 0; }
.pp-pill.pbbtn { background: #f7f6fb; color: #1e1b2e; border-color: transparent; font-weight: 600; }
@media (max-width: 440px) { .pp-pill.trk { display: none; } }
/* board meeting: two options, each with a price and a payoff */
.bm-opt { display: flex; gap: 10px; margin-top: 10px; padding: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.bm-k { flex: none; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font: 700 15px Poppins, sans-serif; background: linear-gradient(135deg, #5b6cf5, #ec4899); }
.bm-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bm-b p { margin: 0; font-size: .92rem; }
.bm-b small { color: rgba(255,255,255,.6); }
.bm-th { margin-top: 10px; font-style: italic; }
.pp-badge span { font-size: 11px; text-align: center; line-height: 1.2; }
.pp-badge > div { transform: scale(.84); transform-origin: top center; margin-bottom: -11px; }

/* stock market card: the price on its trading range */
.stk-range { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: .85rem; color: rgba(255,255,255,.7); }
.stk-bar { position: relative; flex: 1; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #c0453a, #e8b84a, #2f9f66); }
.stk-bar i { position: absolute; top: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; border: 3px solid #14121f; transform: translateY(-50%); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.stk-price { margin: 8px 0 4px; }
.stk-price b { font: 700 1.2rem Poppins, sans-serif; }