/* player sign-up panel (main site) */
.pl-shade{position:fixed;inset:0;z-index:998;background:rgba(10,30,70,.18);backdrop-filter:blur(2px)}
.pl-panel{position:fixed;z-index:999;background:#fff;border-radius:22px;box-shadow:0 22px 60px rgba(10,60,150,.3);overflow:hidden;animation:plIn .25s cubic-bezier(.34,1.56,.64,1);font-family:inherit;color:#0d1b34;max-height:calc(100vh - 90px);overflow-y:auto}
.pl-panel[hidden],.pl-shade[hidden]{display:none!important}
@keyframes plIn{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}
.pl-panel::before{content:"";display:block;height:5px;background:linear-gradient(90deg,#1aa7ff,#7a3ffc,#ff5c8a,#ffa21a)}
.pl-h{display:flex;align-items:center;gap:8px;padding:16px 16px 6px}
.pl-t{flex:1;min-width:0}
.pl-t b{display:block;font-size:20px;line-height:1.2}
.pl-t small{display:block;color:#5d7390;font-weight:700;font-size:13px;margin-top:2px}
.pl-ic{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:#e4f0fb;color:#0d1b34;display:grid;place-items:center;cursor:pointer;padding:0;transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s}
.pl-ic:hover{transform:scale(1.12);background:#cfe6ff}
.pl-ic svg{width:18px;height:18px}
.pl-b{padding:10px 16px 18px;display:grid;gap:10px}
.pl-o{display:flex;align-items:center;gap:12px;width:100%;border:2px solid #dbe8f7;background:#fff;color:#0d1b34;font:inherit;font-weight:800;font-size:15px;padding:12px 14px;border-radius:999px;cursor:pointer;text-align:left;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,border-color .2s,background .2s}
.pl-o:hover:not(:disabled){transform:translateY(-3px) scale(1.03);border-color:#0a6cff;box-shadow:0 10px 22px rgba(10,108,255,.2);background:#f4f9ff}
.pl-o:active{transform:scale(.97)}
.pl-o:disabled{opacity:.6;cursor:default}
.pl-oi{width:24px;height:24px;display:grid;place-items:center;flex:none}
.pl-oi svg{width:22px;height:22px}
.pl-ph{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:8px}
.pl-panel select,.pl-panel input{font:inherit;font-weight:700;font-size:15px;padding:12px;border:2px solid #dbe8f7;border-radius:14px;background:#fff;color:#0d1b34;min-width:0;width:100%;box-sizing:border-box}
.pl-panel select:focus,.pl-panel input:focus{outline:none;border-color:#0a6cff;box-shadow:0 0 0 4px rgba(10,108,255,.15)}
.pl-code{text-align:center;letter-spacing:.4em;font-size:22px!important}
.pl-go{border:0;cursor:pointer;font:inherit;font-weight:900;letter-spacing:.04em;font-size:15px;color:#fff;background:linear-gradient(135deg,#2aa7ff,#0a6cff);padding:13px;border-radius:999px;box-shadow:0 8px 18px rgba(10,108,255,.3);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
.pl-go:hover:not(:disabled){transform:translateY(-3px) scale(1.03);box-shadow:0 14px 26px rgba(10,108,255,.4)}
.pl-go:disabled{background:#cfd8e6;color:#8795aa;box-shadow:none;cursor:not-allowed}
.pl-out{background:linear-gradient(135deg,#ff6b6b,#e11d48);box-shadow:0 8px 18px rgba(225,29,72,.3)}
.pl-lk{border:0;background:none;color:#0a6cff;font:inherit;font-weight:800;cursor:pointer;padding:4px}
.pl-lk:hover{text-decoration:underline}
.pl-msg{min-height:0;font-size:13px;font-weight:800;color:#c0143c;text-align:center}
.pl-msg:empty{display:none}
.pl-msg.ok{color:#14803c}
.pl-f{margin:2px 0 0;text-align:center;font-size:12px;font-weight:700;color:#6b7c93}
.pl-f a{color:#0a6cff}
.pl-me{display:flex;align-items:center;gap:12px}
.pl-me b{display:block;overflow-wrap:anywhere}
.pl-me small{display:block;color:#5d7390;font-weight:700;overflow-wrap:anywhere}
.pl-av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#2aa7ff,#7a3ffc);color:#fff;font-weight:900;font-size:20px;display:grid;place-items:center;overflow:hidden;flex:none}
.pl-av img{width:100%;height:100%;object-fit:cover}
nav a.sep.on-pl,nav a.sep.pl-in{background:#dbeeff}
@media(max-width:480px){.pl-t b{font-size:18px}.pl-o{font-size:14px;padding:11px 12px}}

/* ---- account panel: profile, edit, favourites, recent ---- */
.pl-me{display:flex;align-items:center;gap:12px}
.pl-me>div:not(.pl-edt){min-width:0;flex:1}
.pl-me b,.pl-me small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-me small{color:#5d7390;font-weight:700;font-size:12px;margin-top:2px}
.pl-av{flex:none;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#2aa7ff,#7a3ffc);color:#fff;display:grid;place-items:center;font-weight:900;font-size:22px;overflow:hidden;border:0;padding:0}
.pl-av img{width:100%;height:100%;object-fit:cover;display:block}
.pl-ed2{flex:none;border:2px solid #0a6cff;background:#fff;color:#0a6cff;font:inherit;font-weight:900;font-size:13px;padding:7px 16px;border-radius:999px;cursor:pointer;transition:transform .2s,background .2s}
.pl-ed2:hover{background:#eaf3ff;transform:scale(1.05)}
.pl-ed{display:flex;align-items:center;gap:14px}
.pl-avb{width:84px;height:84px;font-size:34px;cursor:pointer;box-shadow:0 6px 16px rgba(10,108,255,.25)}
.pl-edt{display:grid;gap:6px;justify-items:start}
.pl-lk.pl-rm{color:#c0392b}
.pl-lb{font-weight:800;font-size:13px;color:#5d7390;margin-bottom:-4px}
.pl-sec h5{margin:4px 0 8px;font-size:12px;letter-spacing:.14em;color:#5d7390}
.pl-gl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pl-gi{display:grid;justify-items:center;gap:5px;border:0;background:#f1f7ff;border-radius:14px;padding:8px 4px;font:inherit;font-weight:800;font-size:11px;color:#0d1b34;cursor:pointer;transition:transform .2s,background .2s}
.pl-gi:hover{background:#dbeeff;transform:translateY(-2px)}
.pl-gi img,.pl-gx{width:44px;height:44px;border-radius:12px;object-fit:cover;display:grid;place-items:center;background:#dbeeff;font-size:22px}
.pl-gi span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-em{margin:0;color:#5d7390;font-weight:700;font-size:13px}

/* ---- game page: favourite + comments ---- */
.vb.vx em{font-style:normal;margin-left:2px}
.vb#fv svg{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.vb#fv.on svg{fill:#ff4d79;stroke:#ff4d79;transform:scale(1.15)}
.vb#fv.on{background:#ffe9ef;color:#d6245a;box-shadow:0 0 0 2px #ff4d79}
.tb.pvm .vx,.cmx[hidden]{display:none}
.cmx{display:block}
.cmx h4{margin:0 0 12px!important}
.cm-box{display:flex;gap:10px;align-items:flex-end}
.cm-box textarea{flex:1;min-width:0;font:inherit;font-weight:600;font-size:14px;padding:11px 14px;border:2px solid #dbe8f7;border-radius:14px;background:#fff;color:#0d1b34;resize:vertical;min-height:46px;max-height:160px;box-sizing:border-box}
.cm-box textarea:focus{outline:none;border-color:#0a6cff;box-shadow:0 0 0 4px rgba(10,108,255,.15)}
.cm-box .btn{flex:none}
.cm-msg{min-height:18px;margin:8px 2px 0;font-weight:800;font-size:13px;color:#c0392b}
.cm-msg.ok{color:#1b9a50}
.cm-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:14px}
.cm-list li{display:flex;gap:12px;align-items:flex-start}
.cm-av{flex:none;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#2aa7ff,#7a3ffc);color:#fff;display:grid;place-items:center;font-weight:900;overflow:hidden}
.cm-av img{width:100%;height:100%;object-fit:cover;display:block}
.cm-body{min-width:0;flex:1}
.cm-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cm-top b{font-size:14px}
.cm-top small{color:#5d7390;font-weight:700;font-size:12px}
.cm-body p{margin:3px 0 0;font-weight:600;font-size:14px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.cm-del{margin-left:auto;border:0;background:none;color:#c0392b;font:inherit;font-weight:800;font-size:12px;cursor:pointer;padding:0}
.cm-empty{display:block!important;color:#5d7390;font-weight:700;font-size:14px}
@media(max-width:600px){.cm-box{flex-direction:column;align-items:stretch}}

/* ---- mobile: icon-only toolbar buttons ---- */
@media(max-width:700px){
.tb{gap:8px;flex-wrap:wrap}
.tb .vb .vtx{display:none}
.tb .vb{padding:9px 13px;gap:5px;min-width:42px;justify-content:center}
.tb .vb svg{width:17px;height:17px}
.vb.vx em{margin-left:0}
}

/* ---- close (exit full screen) button: small, website theme ---- */
html .fsb{width:38px!important;height:38px!important;background:rgba(255,255,255,.94)!important;border:0!important;color:var(--ac,#0a6cff)!important;box-shadow:0 3px 10px rgba(10,60,140,.35)!important}
html .fsb:hover{transform:scale(1.1);box-shadow:0 5px 14px rgba(10,108,255,.45)!important}
html .fsb:active{transform:scale(.92)}
html .fsb svg{width:16px!important;height:16px!important;filter:none!important;stroke-width:3}

/* ---- mobile: paused game shows a pause icon instead of the play triangle ---- */
.playbtn .pi{display:none}
@media(max-width:900px){
#start.paused .playbtn svg:not(.pi){display:none}
#start.paused .playbtn .pi{display:block}
}
html.mobdev #start.paused .playbtn svg:not(.pi){display:none}
html.mobdev #start.paused .playbtn .pi{display:block}

/* ---- contact email ---- */
#copyMail{margin-left:10px;padding:8px 18px;font-size:13px;vertical-align:middle}
#mailMsg{min-height:22px;margin:0;font-weight:800;color:#1b9a50}

/* ---- crawlable list of all games (also helps Google find every game page) ---- */
.gl-seo{max-width:1200px;margin:36px auto 12px;padding:0 20px}
.gl-seo h2{margin:0;font-size:13px;letter-spacing:.14em;color:#5d7390}
.gl-seo ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:12px 0 0}
.gl-seo a{display:inline-block;padding:7px 14px;border-radius:999px;background:#fff;color:#0a6cff;font-weight:800;font-size:13px;text-decoration:none;box-shadow:0 2px 8px rgba(20,90,170,.12);transition:transform .2s,background .2s}
.gl-seo a:hover{background:#eaf3ff;transform:translateY(-2px)}