/* Jason's Place — shared game shell styles. Loaded by every game + room page. */
:root{
  --jp-ink:#24304a; --jp-purple:#6a55d8; --jp-blue:#4fa7ff; --jp-mint:#78d9b6;
  --jp-yellow:#ffd76a; --jp-peach:#ff9f83; --jp-pink:#ff91bd; --jp-cream:#fffaf0;
  --jp-white:#fff; --jp-line:#dfe6f1; --jp-shadow:0 18px 45px rgba(74,74,130,.14);
  --jp-focus:#1d4ed8;
}
@media (prefers-color-scheme: dark){
  :root{ --jp-ink:#eef1fb; --jp-cream:#161a2b; --jp-white:#1f2540; --jp-line:#333a5c; }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.jp-body{
  margin:0; background:var(--jp-cream); color:var(--jp-ink);
  font:16px/1.5 ui-rounded,"SF Pro Rounded",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  min-height:100vh; overflow-x:hidden;
}
.jp-body a{color:inherit}
.jp-skip{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:10px;z-index:200}
.jp-skip:focus{left:8px;top:8px}
a.jp-skip:focus, .jp-body button:focus-visible, .jp-body a:focus-visible, .jp-body [tabindex]:focus-visible{
  outline:3px solid var(--jp-focus); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* Header bar shared by every game */
.jp-bar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:8px;
  padding:8px 10px; background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--jp-line); flex-wrap:wrap;
}
@media (prefers-color-scheme: dark){ .jp-bar{ background:rgba(22,26,43,.92);} }
.jp-bar-btn{
  display:inline-flex; align-items:center; gap:6px; min-height:40px; min-width:40px;
  padding:8px 12px; border-radius:12px; border:1px solid var(--jp-line); background:var(--jp-white);
  color:var(--jp-ink); font-weight:800; font-size:14px; cursor:pointer; text-decoration:none;
}
.jp-bar-btn:hover{background:#f1f3ff}
.jp-bar-title{font-weight:1000; font-size:15px; margin-inline:6px; flex:1; min-width:120px}
.jp-bar-age{font-size:11px; font-weight:900; padding:4px 8px; border-radius:999px; background:var(--jp-mint); color:#134d3a}
.jp-bar-score{font-weight:900; font-size:14px; padding:6px 10px; border-radius:10px; background:var(--jp-yellow); color:#3a2c05}

/* Main stage */
.jp-stage{
  width:min(980px,96vw); margin:14px auto 40px; padding:0 6px;
}
.jp-panel{
  background:var(--jp-white); border:1px solid var(--jp-line); border-radius:22px;
  box-shadow:var(--jp-shadow); padding:18px; min-height:50vh;
}
.jp-h1{font-size:clamp(24px,5vw,36px); margin:4px 0 8px; color:var(--jp-purple); letter-spacing:-.02em}
.jp-lead{color:#5d6880; margin:0 0 14px}

/* Overlay modal (instructions / win / lose) */
.jp-modal-backdrop{
  position:fixed; inset:0; background:rgba(20,20,40,.55); display:none;
  align-items:center; justify-content:center; z-index:100; padding:16px;
}
.jp-modal-backdrop.jp-open{display:flex}
.jp-modal{
  background:var(--jp-white); border-radius:22px; max-width:520px; width:100%;
  padding:24px; box-shadow:0 30px 70px rgba(0,0,0,.35); text-align:center;
}
.jp-modal h2{margin-top:0; color:var(--jp-purple); font-size:26px}
.jp-modal-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px}
.jp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:46px; padding:10px 18px; border-radius:14px; border:0; cursor:pointer;
  font-weight:900; font-size:15px; background:var(--jp-purple); color:#fff;
}
.jp-btn.jp-secondary{background:#eef0ff; color:var(--jp-purple)}
.jp-btn.jp-sun{background:var(--jp-yellow); color:#332905}
.jp-btn:disabled{opacity:.5; cursor:not-allowed}

.jp-live{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

.jp-touch-target{min-width:44px; min-height:44px}

.jp-footer-credit{
  text-align:center; color:#8a93ab; font-size:12px; padding:18px 10px 30px;
}

@media (max-width:520px){
  .jp-bar{padding:6px}
  .jp-bar-title{font-size:13px}
  .jp-panel{padding:12px; border-radius:16px}
}

/* Game / door cards used by hub + room pages */
.jp-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-top:18px}
.jp-card{
  position:relative; display:flex; flex-direction:column; background:var(--jp-white);
  border:1px solid var(--jp-line); border-radius:20px; overflow:hidden; box-shadow:var(--jp-shadow);
  text-decoration:none; color:var(--jp-ink); transition:transform .15s ease;
}
.jp-card:hover{transform:translateY(-3px)}
.jp-card-thumb{
  font-size:54px; display:flex; align-items:center; justify-content:center; height:110px;
  background:linear-gradient(135deg,#dcecff,#f0e8ff); position:relative;
}
.jp-card-badge{
  position:absolute; top:8px; right:8px; background:var(--jp-pink); color:#fff;
  font-size:10px; font-weight:1000; padding:3px 8px; border-radius:999px; letter-spacing:.05em;
}
.jp-card-body{padding:14px 16px 16px}
.jp-card-body h3{margin:0 0 6px; font-size:17px; color:var(--jp-purple)}
.jp-card-body p{margin:0 0 10px; font-size:13px; color:#657188; min-height:34px}
.jp-card-meta{display:flex; justify-content:space-between; font-size:11px; font-weight:900; color:#8a93ab; text-transform:uppercase; letter-spacing:.04em}
.jp-empty{color:#8a93ab; font-style:italic; padding:20px 0}

/* Hub doors */
.jp-doors{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; margin-top:18px}
.jp-door{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  padding:22px 14px; border-radius:24px; text-decoration:none; color:#fff; font-weight:900;
  box-shadow:var(--jp-shadow); min-height:150px; justify-content:center;
}
.jp-door .jp-door-icon{font-size:40px}
.jp-door .jp-door-sub{font-size:12px; font-weight:700; opacity:.9}

.jp-hero{
  padding:30px 18px; border-radius:26px; background:linear-gradient(135deg,var(--jp-purple),var(--jp-blue));
  color:#fff; margin-top:10px; box-shadow:var(--jp-shadow);
}
.jp-hero h1{font-size:clamp(30px,6vw,48px); margin:0 0 10px; letter-spacing:-.03em}
.jp-hero p{font-size:16px; max-width:640px; opacity:.95; margin:0}

.jp-filterbar{display:flex; gap:8px; flex-wrap:wrap; margin:16px 0}
.jp-chip{
  padding:8px 14px; border-radius:999px; border:1px solid var(--jp-line); background:var(--jp-white);
  font-weight:800; font-size:13px; cursor:pointer; color:var(--jp-ink);
}
.jp-chip.jp-active{background:var(--jp-purple); color:#fff; border-color:var(--jp-purple)}