/* Shared look of every BUBENGAMES sample game: one phone-height screen, slim top bar,
   a stage where the canvas draws the scene and HTML panels slide over its lower part. */
:root{
  --bg:#12251a; --bar:#0d1a13; --ink:#fffaf0; --muted:#c9d2cc; --line:rgba(255,250,240,.15);
  --violet:#6247ff; --violet-hover:#7560ff; --orange:#ff5b1f; --gold:#ffc84a; --accent:#ffc84a;
  --good:#2fbf7a; --bad:#ff6b5b;
  --f-display:'Unbounded','Onest',system-ui,sans-serif; --f-body:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
html{padding-block:env(safe-area-inset-top,0px) env(safe-area-inset-bottom,0px);background:var(--bg)}
body{background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--f-body);overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
#app{height:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column}
.bar{display:flex;align-items:center;gap:10px;min-height:54px;padding:7px 12px;background:var(--bar);border-bottom:1px solid var(--line)}
.back{display:flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:11px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font:700 13px/1 var(--f-body);white-space:nowrap}
.back em{font-style:normal;color:var(--orange)}
.bar h1{flex:1;min-width:0;margin:0;font:700 16px/1 var(--f-display);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib{width:40px;height:40px;flex:none;border-radius:11px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:17px;display:grid;place-items:center;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
#stage{position:relative;flex:1;overflow:hidden}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.panel{position:absolute;left:0;right:0;bottom:0;max-height:68%;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:40px 18px 20px;background:linear-gradient(transparent,var(--bg) 46px)}
.panel.full{top:0;max-height:none;padding-top:16px;background:none}
.eyebrow{margin:0;font:700 11.5px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.panel h2{margin:0;font:700 clamp(23px,6.6vw,31px)/1.12 var(--f-display);text-wrap:balance}
.panel p{margin:0;color:var(--muted)}
.name{display:flex;flex-direction:column;gap:6px;font:600 14px/1.35 var(--f-body)}
.name input{height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,250,240,.08);color:var(--ink);font:600 17px/1 var(--f-body);user-select:text;-webkit-user-select:text}
.name input:focus{outline:none;border-color:var(--accent)}
.row{display:flex;flex-wrap:wrap;gap:10px}
.btn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 20px;border-radius:14px;border:1px solid transparent;background:var(--violet);color:#fff;font:700 16px/1.2 var(--f-body);text-decoration:none;text-align:center;cursor:pointer;touch-action:manipulation}
.btn:hover{background:var(--violet-hover)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.gold{background:var(--gold);color:#2e1d00}
.note{padding:12px 14px;border-radius:12px;background:rgba(98,71,255,.24);color:#e4ddff!important;font-size:14.5px}
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(48px,1fr));gap:6px}
.legend figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:12px;background:rgba(255,250,240,.07);font:700 12px/1.1 var(--f-body);text-align:center}
.legend canvas{width:40px;height:40px}
.plus{color:#9ff0b9}
.minus{color:#ff9b8a}
.stars{font-size:34px;line-height:1;letter-spacing:6px;color:var(--gold)}
.stars .off{opacity:.22}
.levels{display:flex;flex-wrap:wrap;gap:6px}
.levels span{padding:6px 10px;border-radius:9px;background:rgba(255,250,240,.08);font:700 13px/1 var(--f-body);color:var(--ink)}
.levels b{color:var(--accent);margin-right:5px}
.mem-grid{display:grid;gap:8px}
.mem-card{position:relative;aspect-ratio:3/4;max-width:100%;padding:0;border:0;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#6247ff,#3a1fd6);color:#fff;cursor:pointer;touch-action:manipulation}
.mem-card .mem-back{position:absolute;inset:0;display:grid;place-items:center;font:700 24px/1 var(--f-display)}
.mem-card .mem-face{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px;background:#ffffff;color:#1b1340;font:700 30px/1 var(--f-body);animation:pop .2s ease-out}
.mem-card .mem-face img{width:78%;max-width:72px;border-radius:12px}
.mem-card .mem-face small{font:700 11px/1.1 var(--f-body)}
.mem-card.open .mem-face{display:flex}
.mem-card.got .mem-face{background:#c9f5df}
.card-box{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:20px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);animation:pop .28s ease-out}
.card-box h3{margin:0;font:700 19px/1.3 var(--f-body);text-align:center;text-wrap:balance}
.card-box .sub{margin:0;text-align:center;font-size:14.5px}
.pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:rgba(255,250,240,.1);font:700 13.5px/1 var(--f-body);font-variant-numeric:tabular-nums;white-space:nowrap}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.shake{animation:shake .35s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}