/* Powell Play UI in BuildMyPlanet (the kit's powellplay-ui.md: exact sizes, colours and words, the same in every game) */
:root { --pp-coal: #0B0B0B; --pp-card: #151515; --pp-line: rgba(246, 243, 235, 0.09); --pp-bone: #F6F3EB; --pp-dim: #A9A59C; --pp-lime: #C7F000; --pp-danger: #FF6B7A; }
.pp-card, .pp-sheet, .pp-wait { font-family: 'Space Grotesk', Nunito, system-ui, sans-serif; color: var(--pp-bone); }

/* 1. Sign in with Powell Play */
.pp-signin { display: flex; align-items: center; gap: 0; width: 100%; min-width: 240px; max-width: 360px; height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--pp-lime); color: var(--pp-coal); font: 700 17px 'Space Grotesk', Nunito, system-ui, sans-serif; cursor: pointer; transition: transform .1s, filter .1s; }
.pp-signin svg { width: 28px; height: 32px; fill: var(--pp-coal); flex: none; }
.pp-signin span { flex: 1; text-align: center; }
.pp-signin:active { transform: scale(0.97); filter: brightness(1.08); }
.pp-signin:disabled { opacity: .6; }
.pp-signin.busy svg { visibility: hidden; }
.pp-signin.busy { background-image: radial-gradient(circle at 30px 26px, transparent 8px, transparent 9px); position: relative; }
.pp-signin.busy::before { content: ''; position: absolute; left: 18px; top: 16px; width: 16px; height: 16px; border: 3px solid rgba(11, 11, 11, .3); border-top-color: var(--pp-coal); border-radius: 50%; animation: pp-spin .8s linear infinite; }
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* 2. Settings card */
.pp-card { background: var(--pp-card); border: 1px solid var(--pp-line); border-radius: 20px; padding: 16px; display: grid; gap: 10px; }
.pp-cap { font-size: 11px; letter-spacing: .2em; color: var(--pp-dim); font-weight: 700; }
.pp-dim { color: var(--pp-dim); font-size: 13px; margin: 0; }
.pp-row { display: flex; align-items: center; gap: 12px; }
.pp-row b { display: block; font-size: 15px; font-weight: 700; }
.pp-row small { display: block; color: var(--pp-dim); font-size: 13px; }
.pp-rowlink { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 2px; border: 0; border-top: 1px solid var(--pp-line); background: none; color: var(--pp-bone); font: 600 15px inherit; text-decoration: none; cursor: pointer; text-align: left; }
.pp-rowlink.pp-red { color: var(--pp-danger); }
.pp-link { border: 0; background: none; padding: 0; color: var(--pp-lime); font: 600 13px inherit; cursor: pointer; text-decoration: underline; }
.pp-restore { color: var(--pp-dim); justify-self: start; }
.pp-others { border-top: 1px solid var(--pp-line); padding-top: 10px; display: grid; gap: 6px; }
.pp-other { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.pp-mini { border: 1px solid var(--pp-line); background: none; color: var(--pp-bone); border-radius: 999px; padding: 4px 12px; font: 600 12px inherit; cursor: pointer; }

/* 7. Avatars: a rounded square, never a circle; the frame at 114% */
.pp-av { --s: 44px; position: relative; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 22%; background: var(--pp-card); flex: none; }
.pp-av-in { color: var(--pp-dim); font: 700 calc(var(--s) * .45) 'Space Grotesk', system-ui, sans-serif; }
.pp-av-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 22%; object-fit: cover; }
.pp-av-frame { position: absolute; left: 50%; top: 50%; width: 114%; height: 114%; transform: translate(-50%, -50%); pointer-events: none; }

/* 3 to 5. Sheets */
.pp-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .55); }
.pp-overlay[hidden] { display: none; }
.pp-sheet { width: min(560px, 100%); max-height: 92vh; overflow: auto; background: var(--pp-card); border-radius: 24px 24px 0 0; padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; animation: pp-up .22s ease-out; }
@keyframes pp-up { from { transform: translateY(30px); opacity: 0; } }
.pp-handle { justify-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--pp-line); }
.pp-title { margin: 4px 0; font-size: 20px; font-weight: 700; color: var(--pp-bone); }
.pp-opt { display: grid; gap: 2px; text-align: left; padding: 14px 16px; border: 1px solid var(--pp-line); border-radius: 16px; background: none; color: var(--pp-bone); font: inherit; cursor: pointer; }
.pp-opt b { font-size: 17px; }
.pp-opt small { color: var(--pp-dim); font-size: 13px; }
.pp-opt.on { border: 2px solid var(--pp-lime); box-shadow: 0 0 18px rgba(199, 240, 0, .25); padding: 13px 15px; }
.pp-lime, .pp-outline, .pp-danger { width: 100%; min-height: 48px; border-radius: 14px; font: 700 16px 'Space Grotesk', Nunito, system-ui, sans-serif; cursor: pointer; }
.pp-lime { border: 0; background: var(--pp-lime); color: var(--pp-coal); }
.pp-outline { border: 1px solid var(--pp-bone); background: none; color: var(--pp-bone); }
.pp-danger { border: 0; background: var(--pp-danger); color: var(--pp-coal); }
.pp-text { border: 0; background: none; color: var(--pp-dim); font: 600 15px inherit; padding: 8px; cursor: pointer; }
.pp-lime:disabled, .pp-outline:disabled, .pp-danger:disabled, .pp-text:disabled { opacity: .6; }
.pp-note { color: var(--pp-dim); font-size: 13px; margin: 0; }
.pp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 360px) { .pp-cards { grid-template-columns: 1fr; } }
.pp-pcard { border: 1px solid var(--pp-line); border-radius: 16px; padding: 12px; display: grid; gap: 8px; }
.pp-pcard-top { display: flex; gap: 10px; align-items: center; }
.pp-pcard-top b { display: block; }
.pp-pcard-top small { color: var(--pp-dim); font-size: 12px; }
.pp-pcard dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 13px; }
.pp-pcard dt { color: var(--pp-dim); }
.pp-pcard dd { margin: 0; text-align: right; }
.pp-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.pp-lines li { display: flex; gap: 10px; }
.pp-ic { flex: none; width: 22px; text-align: center; }
.pp-code { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.pp-code code { display: block; width: 100%; padding: 8px 10px; border-radius: 10px; background: var(--pp-coal); font: 12px ui-monospace, Consolas, monospace; word-break: break-all; color: var(--pp-bone); }

/* 8. Play Together waiting room */
.pp-wait { display: grid; justify-items: center; gap: 12px; text-align: center; }
.pp-qr { background: var(--pp-bone); border-radius: 22px; padding: 12px; box-shadow: 0 0 0 4px var(--pp-lime), 0 0 28px rgba(199, 240, 0, .35); }
.pp-qr img, .pp-qr canvas { display: block; width: 200px; height: 200px; }
.pp-room-code { color: var(--pp-lime); font: 800 40px 'Space Grotesk', system-ui, sans-serif; letter-spacing: .22em; padding-left: .22em; }
.pp-waiting { color: var(--pp-bone); font-weight: 600; animation: pp-pulse 1.6s ease-in-out infinite; }
@keyframes pp-pulse { 50% { opacity: .45; } }
.pp-friends { display: grid; gap: 8px; width: 100%; }
.pp-friend { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.pp-friend > span { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.pp-wait .pp-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.pp-locked { width: 200px; height: 200px; display: grid; place-items: center; color: var(--pp-coal); font-weight: 700; }

/* the People list and profile cards */
.list-item .pp-av { margin-right: 2px; }
.pp-sub { display: block; color: var(--muted, #a9b3d8); font-size: 12px; }

@media (prefers-reduced-motion: reduce) { .pp-sheet, .pp-waiting, .pp-signin.busy::before { animation: none; } }
html.pp-off .pp-card, html.pp-off .pp-together { display: none !important; }

/* Play Together: the home card's button, and "Joining BuildMyPlanet…" while a friend's link opens */
.action.pp-together { width: 100%; flex: none; flex-direction: row; min-height: 44px; gap: 8px; }
.pp-joining-note { display: none; }
html.pp-joining .home-card > *:not(.pp-joining-note) { visibility: hidden; }
html.pp-joining .pp-joining-note { display: block; position: absolute; inset: 0; display: grid; place-items: center; font: 800 18px Nunito, system-ui, sans-serif; color: var(--text, #eef2ff); }

/* 1b. The Powell Play sheet (from the home-screen mark) */
.pp-overlay.pp-dim-bg { background: rgba(0, 0, 0, .6); }
@media (min-width: 600px) { .pp-overlay.pp-centre { align-items: center; } .pp-overlay.pp-centre .pp-sheet { border-radius: 24px; } }
.pp-who { display: flex; gap: 12px; align-items: center; }
.pp-who b { display: block; font-size: 17px; font-weight: 700; }
.pp-who small { display: block; color: var(--pp-dim); font-size: 13px; }
.pp-rows { display: grid; }
.pp-rows .pp-rowlink { min-height: 48px; }
.pp-foot-line { text-align: center; color: var(--pp-dim); font-size: 12px; margin: 4px 0 0; }

/* 2. Settings: Name in BuildMyPlanet (5.3b) */
.pp-namerow { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--pp-line); padding-top: 10px; }
.pp-namerow b { display: block; font-size: 15px; }
.pp-namerow small { display: block; font-size: 13px; }
#ppSignOut { flex-direction: column; align-items: flex-start; gap: 2px; }
#ppSignOut small { font: 400 12px/1.3 inherit; }