/* Sampul App · play.css (forked from Sampul Play, 2026-10-28) — the shell's look (the game page brings the viewer's own). Map: sampulapp/README.md */
:root {                                                                  /* light (the default): snow white (owner 2026-10-26; was cream) */
  --bg: #ffffff; --bg2: #f3f4f7; --card: #ffffff; --line: #e6e8ee; --text: #2b2a33; --muted: #6f727b; --on: #a35d00; --track: #00000014; --shade: #1e23321a;
  --sun: #ffd23f; --pink: #ff5d8f; --mint: #3ee0b0; --sky: #2f86e8; color-scheme: light; }
html[data-theme=dark] {                                                  /* dark: a dark grey */
  --bg: #1c1d20; --bg2: #25272b; --card: #2e3035; --line: #3a3c42; --text: #f1f1f3; --muted: #a8aab2; --on: #ffd23f; --track: #ffffff1f; --shade: #00000059;
  --sky: #5aa9ff; color-scheme: dark; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { padding: env(safe-area-inset-top) 0 calc(64px + env(safe-area-inset-bottom)); -webkit-user-select: none; user-select: none; overscroll-behavior-y: contain; }
button { font: inherit; color: inherit; cursor: pointer; }
.sp-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--bg); }
.sp-name { font-size: 20px; font-weight: 800; letter-spacing: .2px; } .sp-gap { flex: 1; }
.sp-gear { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bg2); color: var(--muted); font-size: 20px; }
.sp-main { padding: 4px 16px 24px; } .sp-main h1 { font-size: 24px; margin: 6px 0 14px; }
.sp-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 4px 10px calc(4px + env(safe-area-inset-bottom)); background: var(--bg2); box-shadow: 0 -6px 20px var(--shade); border-top: 1px solid var(--line); }
.sp-tabs button { border: 0; border-radius: 14px; background: transparent; padding: 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 0; font-weight: 700; font-size: 12px; color: var(--muted); }
.sp-tabs .ic { font-size: 18px; line-height: 1.2; } .sp-tabs button.on { background: var(--card); color: var(--on); box-shadow: 0 2px 8px var(--shade); }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.sp-tile { border: 1px solid var(--line); padding: 0 0 12px; border-radius: 22px; background: var(--card); text-align: left; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 6px 0 var(--shade); }
.sp-tile:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--shade); }
.sp-tile b { padding: 10px 12px 2px; font-size: 17px; } .sp-tile small { padding: 0 12px; color: var(--muted); font-size: 12px; }
.sp-cov { display: grid; place-items: center; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--pink), var(--sun)); background-size: cover; background-position: center; }
.sp-cov i { font-style: normal; font-size: 44px; color: #fff; text-shadow: 0 3px 0 #0003; } .sp-cov.pic i { display: none; }
.sp-tile:nth-child(3n+2) .sp-cov:not(.pic) { background: linear-gradient(135deg, var(--sky), var(--mint)); } .sp-tile:nth-child(3n) .sp-cov:not(.pic) { background: linear-gradient(135deg, #8a5cff, var(--pink)); }
.sp-empty { text-align: center; padding: 40px 10px; color: var(--muted); } .sp-empty p { font-size: 17px; }
.sp-btn { border: 0; border-radius: 999px; padding: 10px 18px; background: var(--sun); color: #1b1b1b; font-weight: 800; box-shadow: 0 4px 0 #b8901a; }
.sp-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #b8901a; } .sp-btn.big { padding: 16px 30px; font-size: 19px; }
.sp-btn.ghost { background: var(--card); color: var(--text); box-shadow: 0 4px 0 var(--shade); border: 1px solid var(--line); } .sp-btn.small { padding: 6px 12px; font-size: 13px; }
.sp-list { display: flex; flex-direction: column; gap: 12px; }
.sp-item { display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; align-items: center; gap: 12px; background: var(--card); border-radius: 20px; padding: 0 10px 0 0; border: 1px solid var(--line); overflow: hidden; min-height: 92px; }
.sp-item .sp-cov { border-radius: 0; aspect-ratio: auto; align-self: stretch; min-height: 92px; } .sp-item .sp-cov i { font-size: 30px; }   /* (the cover is one with its card: flush left, top and bottom, owner 2026-10-18) */
.sp-item .sp-it-t { padding: 10px 0; }
.sp-it-t { display: flex; flex-direction: column; min-width: 0; } .sp-it-t b { font-size: 16px; } .sp-it-t small { color: var(--muted); font-size: 12px; }
.sp-spin { width: 44px; height: 44px; margin: 40px auto; border-radius: 50%; border: 5px solid var(--track); border-top-color: var(--sun); animation: spS 1s linear infinite; }
@keyframes spS { to { transform: rotate(360deg); } }
.sp-sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; background: #0008; } .sp-sheet[hidden] { display: none; }
.sp-sheet-in { width: 100%; background: var(--bg2); border-radius: 24px 24px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.sp-sh-t { font-size: 19px; } .sp-bar { height: 12px; border-radius: 8px; background: var(--track); overflow: hidden; } .sp-bar i { display: block; height: 100%; width: 0; background: var(--sun); transition: width .25s; }
.sp-gate { text-align: center; padding: 40px 10px; } .sp-gate p { color: var(--muted); }
.sp-ringw { position: relative; width: 120px; height: 120px; margin: 6px auto 12px; } .sp-ring { width: 100%; height: 100%; transform: rotate(-90deg); }   /* the hold button's ring, 0 -> 100 (2026-10-26) */
.sp-ring circle { fill: none; stroke-width: 10; } .sp-ring-bg { stroke: var(--track); } .sp-ring-fg { stroke: #ffd23f; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.sp-ring-n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 30px system-ui, sans-serif; font-style: normal; color: var(--text); }
#spHold { position: relative; overflow: hidden; } #spHold i { position: absolute; left: 0; bottom: 0; height: 5px; width: 0; background: #1b1b1b55; }
.sp-sec { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.sp-note { margin: 0; color: var(--muted); font-size: 13px; } .sp-row { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-seg { display: flex; gap: 6px; } .sp-seg button { flex: 1; border: 0; border-radius: 12px; padding: 10px; background: var(--bg2); color: var(--muted); font-weight: 700; } .sp-seg button.on { background: var(--sun); color: #1b1b1b; }
.sp-mine { display: flex; flex-direction: column; gap: 6px; } .sp-mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; } .sp-mrow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-mrow small { color: var(--muted); }
.sp-link { color: var(--sky); font-weight: 700; }
@media (min-width: 800px) { .sp-main { max-width: 960px; margin: 0 auto; } .sp-tabs { max-width: 520px; margin: 0 auto 12px; border-radius: 22px; left: 0; right: 0; } }
.sp-acts { display: flex; gap: 6px; align-items: center; } .sp-desc { color: var(--muted); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sp-desc:empty { display: none; }
.sp-in { width: 100%; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--bg); color: var(--text); font: 700 18px ui-monospace, monospace; letter-spacing: 2px; text-transform: uppercase; }
.sp-h2 { font-size: 18px; margin: 18px 0 6px; } .sp-acct { margin-bottom: 4px; }
/* getting the app ready for offline (app.js, owner 2026-10-29): a small mark, no words, like a game's save icon */
.sp-ready { position: fixed; right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 30; width: 46px; height: 46px; border-radius: 50%; background: var(--card); color: var(--muted); box-shadow: 0 4px 14px var(--shade); display: grid; place-items: center; pointer-events: none; transition: opacity .35s, transform .35s; }
.sp-ready .ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spRd 1.1s linear infinite; }
.sp-ready .ring circle { fill: none; stroke-width: 3.5; } .sp-ready .trk { stroke: var(--track); } .sp-ready .arc { stroke: var(--sun); stroke-linecap: round; stroke-dasharray: 30 120; }
.sp-ready .ic { width: 20px; height: 20px; position: relative; }
.sp-ready.ok { color: #1f9d55; } .sp-ready.ok .ring { animation: none; } .sp-ready.ok .arc { stroke: #1f9d55; stroke-dasharray: 120 0; }
.sp-ready.bad { color: #c0392b; } .sp-ready.bad .ring { animation: none; } .sp-ready.bad .arc { stroke: #c0392b; stroke-dasharray: 120 0; }
.sp-ready.out { opacity: 0; transform: scale(.8); }
@keyframes spRd { to { transform: rotate(360deg); } }
body:not([data-page=home]) .sp-main > h1 { display: none; }   /* (those pages' titles are in the top bar) */
/* accounts and play cards (account.js, redeem.js) */
.sp-in.sp-tx { text-transform: none; letter-spacing: 0; font: 600 16px system-ui, sans-serif; }
.sp-bad { color: #c0392b; } .sp-bad:empty { display: none; } .sp-link { color: var(--muted); font-size: 14px; text-align: center; text-decoration: underline; }
.sp-who { margin: 0; display: flex; flex-direction: column; } .sp-who small { color: var(--muted); }
.sp-card-in { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin: 0 0 12px; padding: 12px 16px; border-radius: 18px; border: 2px dashed var(--line); background: var(--card); color: var(--text); text-align: left; }
.sp-card-in small { color: var(--muted); }
.sp-phl, .sp-got { display: flex; flex-direction: column; gap: 6px; } .sp-ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sp-ph span { display: flex; flex-direction: column; } .sp-ph small { color: var(--muted); } .sp-ph em { color: var(--muted); font-size: 13px; }
.sp-scan { width: 100%; max-height: 50vh; border-radius: 14px; background: #000; object-fit: cover; }
.sp-tog { display: flex; align-items: center; gap: 10px; font-weight: 700; } .sp-tog input { width: 22px; height: 22px; accent-color: var(--sun); }
.sp-how { border-top: 1px solid var(--line); padding: 8px 0 2px; } .sp-how summary { font-weight: 700; cursor: pointer; } .sp-how ol { margin: 8px 0 4px; padding-left: 20px; color: var(--muted); font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.sp-tabs .ic svg { width: 21px; height: 21px; display: block; margin: 0 auto; }   /* line icons (owner, 2026-10-18: "a better icon than the smiley and the star") */
/* profiles (profiles.js) */
.sp-av { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 24px; line-height: 1; flex: none; box-shadow: inset 0 0 0 3px rgba(255,255,255,.55); }
.sp-whobtn { border: 0; background: none; padding: 0 6px 0 0; cursor: pointer; display: grid; place-items: center; }
.sp-who { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: grid; place-items: center; padding: 20px; }
.sp-who-in { text-align: center; max-width: 720px; } .sp-who-in h1 { font-size: 26px; margin: 0 0 22px; }
.sp-who-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-bottom: 26px; }
.sp-who-p { border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text); font: inherit; font-size: 17px; }
.sp-who-p:active .sp-av { transform: scale(.95); }
.sp-prof { display: flex; flex-wrap: wrap; gap: 12px; } .sp-prof-p { border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text); font: inherit; font-size: 13px; max-width: 72px; }
.sp-prof-p b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 72px; } .sp-prof-p.add .sp-av { background: var(--bg2); color: var(--muted); width: 52px; height: 52px; }
.sp-pe-top { display: grid; place-items: center; } .sp-h3 { font-size: 14px; margin-top: 4px; }
.sp-pe-av { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; } .sp-pe-a { border: 2px solid transparent; background: var(--bg2); border-radius: 12px; font-size: 22px; padding: 4px 0; cursor: pointer; } .sp-pe-a.on { border-color: var(--text); }
.sp-pe-col { display: flex; gap: 8px; flex-wrap: wrap; } .sp-pe-c { width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; } .sp-pe-c.on { border-color: var(--text); }
.sp-pe-games { display: flex; flex-direction: column; gap: 6px; max-height: 32vh; overflow: auto; }
/* Community (community.js, Sampul App 2026-10-28): filters, posts, a page opened inside the app (under the sheet, z 40, so its ⚑ Report sheet shows over it) */
.sp-cm-f { margin: 0 0 10px; flex-wrap: wrap; } .sp-cm-hub { margin: 0 0 14px; }
.sp-post .sp-desc { padding: 4px 12px 0; color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-post .sp-desc:empty { display: none; }
.sp-view { position: fixed; inset: 0; z-index: 35; display: flex; flex-direction: column; background: #000; }
.sp-view-bar { display: flex; align-items: center; gap: 8px; padding: calc(6px + env(safe-area-inset-top)) 8px 6px; background: var(--bg); color: var(--text); }
.sp-view-bar b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
.sp-view-bar button, .sp-view-bar a { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bg2); color: var(--text); font-size: 20px; display: grid; place-items: center; text-decoration: none; flex: none; }
.sp-view iframe { flex: 1; width: 100%; border: 0; background: #000; }
body.sp-viewing { overflow: hidden; }
.sp-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } /* (New project: the three kinds; create.js) */
.sp-kind { border: 2px solid var(--line); border-radius: 16px; background: var(--card); padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.sp-kind i { font-style: normal; font-size: 26px; } .sp-kind small { color: var(--muted); font-size: 11px; line-height: 1.2; } .sp-kind.on { border-color: var(--on); }
.sp-kinds { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }   /* (up to five kinds) */
a.sp-btn { display: inline-block; text-decoration: none; text-align: center; }   /* (links drawn as buttons: Profile → My projects, 2026-10-29) */
/* Home's two rows (owner, 2026-10-29): the Hub's picks and Community's picks, 5 cards + "See more", scrolled sideways */
.sp-hrow { margin: 0 -16px 8px; } .sp-hrow-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 16px; }
.sp-hrow-h h2 { font-size: 18px; margin: 10px 0 8px; flex: 1; } .sp-hrow-h .sp-new { margin-right: 6px; } .sp-hrow-h .sp-link { background: none; border: 0; padding: 4px 0; color: var(--sky); font: 700 14px system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.sp-hscroll { display: flex; gap: 12px; overflow-x: auto; padding: 2px 16px 12px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sp-hscroll::-webkit-scrollbar { display: none; }
.sp-hscroll .sp-tile { flex: 0 0 158px; scroll-snap-align: start; } .sp-hscroll .sp-tile b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-hscroll .sp-tile small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-hscroll .sp-more .sp-cov:not(.pic) { background: var(--line); } .sp-hscroll .sp-more .sp-cov i { color: var(--muted); text-shadow: none; }
#spRows:empty + .sp-h2 { margin-top: 0; }
@media (min-width: 900px) { .sp-hscroll .sp-tile { flex-basis: 190px; } }
/* a new version is ready: the question (owner, 2026-10-29), above the bottom bar */
.sp-upd { position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 18px; padding: 10px 12px; box-shadow: 0 6px 20px var(--shade); }
.sp-upd span { flex: 1 1 180px; font-weight: 700; font-size: 14px; } .sp-upd .sp-btn { flex: none; }
@media (min-width: 700px) { .sp-upd { left: auto; width: 420px; } }
.sp-name.sp-hello { font-size: 22px; } a.sp-tile { color: inherit; text-decoration: none; }
/* sampul.app's plans in the app (plans.js, 2026-10-29): Home's banner, the plan cards on Profile and Create */
.sp-ban { position: relative; display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; padding: 14px 44px 14px 16px; border-radius: 22px; text-decoration: none; color: #1b1b1b; background: linear-gradient(120deg, var(--sun), #ffb36b 55%, var(--pink)); box-shadow: 0 6px 0 var(--shade); }
.sp-ban-t { flex: 1; display: flex; flex-direction: column; gap: 2px; } .sp-ban-t b { font-size: 17px; line-height: 1.25; } .sp-ban-t small { font-size: 12px; opacity: .85; }
.sp-ban-go { flex: none; background: #1b1b1b; color: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 13px; }
.sp-ban-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: #ffffff66; color: #1b1b1b; font-size: 13px; cursor: pointer; }
@media (max-width: 520px) { .sp-ban { flex-direction: column; align-items: flex-start; } }
.sp-plans { margin: 4px 0 12px; } .sp-plans-r { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 8px; }
.sp-plan { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 6px 0 var(--shade); }
.sp-plan-n { font-size: 19px; font-weight: 800; } .sp-plan-p span { font-size: 26px; font-weight: 800; } .sp-plan-p s { color: var(--muted); font-weight: 700; } .sp-plan-p small { color: var(--muted); font-size: 12px; }
.sp-plan-w { margin: 0; font-size: 14px; line-height: 1.45; }
.sp-plan-k { display: flex; gap: 8px; } .sp-plan-k span { flex: 1; background: var(--bg2); border-radius: 14px; padding: 8px 10px; display: flex; flex-direction: column; } .sp-plan-k b { font-size: 16px; } .sp-plan-k i { font-style: normal; color: var(--muted); font-size: 11px; }
.sp-plan .sp-btn { margin-top: 4px; } .sp-plans-f { margin-top: 10px; } .sp-plans-f a { color: var(--sky); font-weight: 700; }