/* Jonaki: a firefly-catching game set on a village night. */
.jn-wrap{max-width:min(1140px,max(560px,calc((100vh - 112px) * 1.6)));margin:0 auto}
.jn-tip{display:none;margin:8px 0 0;text-align:center;font-size:12.5px;font-weight:700;color:var(--faint)}
.jn-stage{position:relative;overflow:hidden;border-radius:14px;background:#050914;aspect-ratio:960/600;user-select:none;-webkit-user-select:none;touch-action:none}
.jn-canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}
.jn-stage.is-paused .jn-canvas{filter:brightness(.55)}
.jn-hud{position:absolute;left:10px;right:10px;top:8px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none;color:#eaf6ff}
.jn-hud[hidden]{display:none}
.jn-jar{display:flex;align-items:center;gap:8px;background:rgba(6,12,30,.55);border-radius:14px;padding:4px 14px 4px 6px}
.jn-jar canvas{width:42px;height:55px;display:block}
.jn-count{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;font-family:var(--display)}
.jn-count b{font-size:28px;line-height:1;color:#e6ff8a}
.jn-count span{font-size:16px;opacity:.85}.jn-count i{font-style:normal}
.jn-count small{width:100%;font:700 10px/1 'Public Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.jn-mid{flex:1;max-width:340px;text-align:center}
.jn-night{font:600 15px var(--display);letter-spacing:.04em;opacity:.95}
.jn-bar{height:9px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;margin:4px 0}
.jn-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#4aa0e8,#8ad0ff);border-radius:99px;transition:width .2s linear}
.jn-bar i.mid{background:linear-gradient(90deg,#e8b84a,#ffd98a)}.jn-bar i.late{background:linear-gradient(90deg,#ff7a4a,#ffb08a)}
.jn-hint{font:700 12.5px 'Public Sans',sans-serif;color:#fff2c4;min-height:16px;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.jn-btns{display:flex;gap:6px;pointer-events:auto}
.jn-btn{border:0;border-radius:999px;padding:7px 13px;background:rgba(6,12,30,.6);color:#fff;font-weight:700;font-size:12.5px}
.jn-btn:hover{background:rgba(40,60,110,.8)}
.jn-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,94%);max-height:94%;overflow:auto;padding:22px 24px;border-radius:20px;background:rgba(7,13,32,.93);box-shadow:0 12px 40px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(214,255,90,.28);text-align:center;color:#e6f0ff}
.jn-card[hidden]{display:none}
.jn-card h2{margin:0 0 6px;font-size:38px;line-height:1;color:#e6ff8a;text-shadow:0 0 18px rgba(214,255,90,.5)}
.jn-sub{margin:0 0 12px;font-size:14.5px;line-height:1.55;color:#c8d8ee}
.jn-field{margin:10px 0}
.jn-field>span{display:block;font:800 11px 'Public Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#8fb0d8;margin-bottom:6px}
.jn-kids,.jn-nights{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.jn-nbtn[aria-pressed="true"]{background:rgba(214,255,90,.2);box-shadow:inset 0 0 0 2px #d6ff5a}
.jn-nbtn{min-width:42px;border:0;border-radius:12px;padding:5px 10px;background:rgba(255,255,255,.08);color:#fff;font:800 15px var(--display);line-height:1.1}
.jn-nbtn small{display:block;color:#ffd24a;font-size:10px;letter-spacing:.05em}
.jn-how{list-style:none;margin:10px 0 14px;padding:0;text-align:left;font-size:13.5px;line-height:1.5;color:#c8d8ee}
.jn-how li{position:relative;padding-left:20px;margin-bottom:4px}
.jn-how li::before{content:'\2726';position:absolute;left:0;color:#d6ff5a}
.jn-how b{color:#fff}
.jn-go{font-size:19px;padding:12px 30px}
.jn-stars{font-size:44px;letter-spacing:6px;margin:4px 0 8px;line-height:1}
.jn-star{color:rgba(255,255,255,.18)}.jn-star.on{color:#ffd24a;text-shadow:0 0 14px rgba(255,210,74,.7)}
.jn-btnrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
.jn-btnrow .g-btn.ghost{color:#d6ff5a;box-shadow:inset 0 0 0 2px #d6ff5a}
.jn-btnrow .g-btn.ghost:hover{background:rgba(214,255,90,.12)}
@media (max-width:640px) and (orientation:portrait){.jn-tip{display:block}}
@media (max-width:640px){
  .jn-hud{left:6px;right:6px;top:5px}.jn-jar{padding:2px 8px 2px 4px}.jn-jar canvas{width:30px;height:39px}.jn-count b{font-size:20px}.jn-count span{font-size:12px}.jn-count small{display:none}
  .jn-night{font-size:12px}.jn-hint{font-size:11px}.jn-btn{padding:5px 9px;font-size:11px}
  .jn-card{padding:12px 14px;border-radius:14px}.jn-card h2{font-size:26px}.jn-sub{font-size:12.5px;margin-bottom:6px}.jn-how{font-size:12px;margin:6px 0 8px}.jn-field{margin:6px 0}.jn-go{font-size:16px;padding:9px 22px}.jn-stars{font-size:32px}
}

/* the children: a picker, a board showing everyone's jar, and the result ranking */
.jn-field>span em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:700;color:#d6ff5a;margin-left:6px}
.jn-kids{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:420px;margin:0 auto}
.jn-kid{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;border:0;border-radius:14px;padding:8px 4px 6px;background:rgba(255,255,255,.07);color:#fff;line-height:1.15}
.jn-kid img{width:52px;height:52px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.jn-kid b{font:600 14px var(--display);margin-top:3px}.jn-kid small{font-size:11px;color:#9db6d6;font-weight:700}
.jn-kid.on{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2.5px var(--c)}
.jn-kid.on img{box-shadow:0 0 0 2.5px var(--c)}
.jn-kid i{position:absolute;top:4px;right:6px;font:800 10px 'Public Sans',sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border-radius:99px;background:var(--c);color:#10202a}
.jn-me{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.jn-mebtn{border:0;border-radius:999px;padding:6px 14px;background:rgba(255,255,255,.08);color:#fff;font-weight:700;font-size:13px}
.jn-mebtn[aria-pressed="true"]{background:#ffe36a;color:#2a2008;box-shadow:0 0 0 2px rgba(255,227,106,.4)}
.jn-left{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.jn-board{display:flex;flex-direction:column;gap:3px}
.jn-chip{display:flex;align-items:center;gap:6px;background:rgba(6,12,30,.55);border-radius:99px;padding:2px 10px 2px 2px;font:700 12px 'Public Sans',sans-serif;box-shadow:inset 0 0 0 1.5px transparent}
.jn-chip.me{box-shadow:inset 0 0 0 1.5px #ffe36a}
.jn-chip img{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 1.5px var(--c)}
.jn-chip b{font-weight:700;color:#fff}.jn-chip i{font-style:normal;font-family:var(--display);color:var(--c);min-width:14px;text-align:right;margin-left:auto}
.jn-rank{list-style:none;margin:6px auto 12px;padding:0;max-width:340px;display:flex;flex-direction:column;gap:4px;text-align:left}
.jn-rank li{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border-radius:12px;padding:4px 12px 4px 4px;font-size:14px}
.jn-rank li.me{box-shadow:inset 0 0 0 2px #ffe36a}
.jn-rank img{width:34px;height:34px;border-radius:50%}
.jn-rank span{flex:1}.jn-rank em{color:#ffe36a;font-style:normal;font-size:12px}
.jn-rank i{font:700 18px var(--display);font-style:normal;color:#e6ff8a}
.jn-rank u{text-decoration:none;color:#ffd24a;font-size:18px}
@media (max-width:640px){
  .jn-stage{aspect-ratio:auto}
  .jn-card{position:relative;left:auto;top:auto;transform:none;width:auto;max-height:none;margin:8px;border-radius:14px;padding:12px 14px}
  .jn-card h2{font-size:26px}
  .jn-kids{gap:6px}.jn-kid img{width:42px;height:42px}.jn-kid b{font-size:13px}
  .jn-chip{font-size:10.5px}.jn-chip img{width:18px;height:18px}
}
.jn-howh{margin:14px 0 4px;font:800 11px 'Public Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#8fb0d8;text-align:left}
.jn-go{margin-top:6px}
.jn-howh+.jn-how{margin-top:4px}

/* language switch and Bangla typography */
.jn-lang{display:flex;gap:6px;justify-content:center;margin:0 0 10px}
.jn-lang button{border:0;border-radius:999px;padding:5px 14px;background:rgba(255,255,255,.08);color:#fff;font-weight:700;font-size:13px}
.jn-lang button[aria-pressed="true"]{background:rgba(214,255,90,.2);box-shadow:inset 0 0 0 2px #d6ff5a}
.jn-wrap.bn *{font-family:'Noto Sans Bengali','Public Sans',sans-serif}
.jn-wrap.bn .jn-card h2{font-weight:600;letter-spacing:0}
.jn-wrap.bn .jn-field>span,.jn-wrap.bn .jn-howh{letter-spacing:0;text-transform:none;font-size:13px}
.jn-wrap.bn .jn-count small{letter-spacing:0;text-transform:none;font-size:11px}
.jn-wrap.bn .jn-how{font-size:14px;line-height:1.7}

/* fit to the window: the stage also shrinks to the height of the window, and the Fullscreen button fills the whole screen */
.jn-fsrow{display:flex;justify-content:center;margin:-2px 0 10px}.jn-fsrow[hidden],.jn-btn[hidden]{display:none}
.jn-fsbtn{border:0;border-radius:999px;padding:5px 14px;background:rgba(255,255,255,.08);color:#fff;font-weight:700;font-size:13px}
.jn-fsbtn:hover{background:rgba(255,255,255,.16)}
.jn-wrap:fullscreen{max-width:none;width:100vw;height:100vh;margin:0;display:flex;align-items:center;justify-content:center;background:#050a1c}
.jn-wrap:fullscreen .jn-stage{width:min(100vw,160vh);border-radius:0}.jn-wrap:fullscreen .jn-tip{display:none}
.jn-wrap:-webkit-full-screen{max-width:none;width:100vw;height:100vh;margin:0;display:flex;align-items:center;justify-content:center;background:#050a1c}
.jn-wrap:-webkit-full-screen .jn-stage{width:min(100vw,160vh);border-radius:0}.jn-wrap:-webkit-full-screen .jn-tip{display:none}

/* the rules fold away in the start card */
.jn-det{margin:10px 0 0;text-align:left}
.jn-det>summary{cursor:pointer;margin:0;padding:8px 2px;list-style:none;display:flex;align-items:center;gap:8px;user-select:none}
.jn-det>summary::-webkit-details-marker{display:none}
.jn-det>summary::before{content:'\25B8';font-size:12px;color:#d6ff5a;transition:transform .15s}
.jn-det[open]>summary::before{transform:rotate(90deg)}
.jn-det>summary:hover{color:#e6ff8a}

/* a compact start card: language and fullscreen share one line, the six children sit in one row, and the Start button stays in view */
.jn-card{padding:16px 20px 0}
.jn-lang,.jn-fsrow{display:inline-flex;margin:0 3px 8px;vertical-align:middle}
.jn-lang button{padding:4px 12px;font-size:12px}.jn-fsbtn{padding:4px 12px;font-size:12px}
.jn-card h2{font-size:30px;margin-bottom:4px}
.jn-sub{font-size:13px;line-height:1.45;margin-bottom:8px}
.jn-kids{grid-template-columns:repeat(6,1fr);gap:6px;max-width:none}
.jn-kid{padding:6px 2px 5px}.jn-kid img{width:42px;height:42px}.jn-kid b{font-size:12.5px;margin-top:2px}.jn-kid small{font-size:10px}
.jn-kid i{top:2px;right:2px;font-size:8px;padding:1px 5px}
.jn-row2{display:grid;grid-template-columns:1fr auto;gap:6px 18px;align-items:start;text-align:left}
.jn-row2 .jn-field{margin:6px 0}.jn-row2 .jn-me,.jn-row2 .jn-nights{justify-content:flex-start}
.jn-mebtn{padding:5px 12px;font-size:12.5px}
.jn-foot{position:sticky;bottom:0;z-index:3;margin:10px -20px 0;padding:12px 20px 14px;background:linear-gradient(180deg,rgba(7,13,32,0),rgba(7,13,32,.97) 34%)}
.jn-foot .jn-go{width:100%;margin:0;font-size:18px;padding:11px 20px}
@media (max-width:640px){
  .jn-card{padding:12px 14px 0}.jn-kids{grid-template-columns:repeat(3,1fr)}.jn-kid img{width:40px;height:40px}
  .jn-foot{margin:8px -14px 0;padding:10px 14px 12px}.jn-row2{grid-template-columns:1fr}
}