/* ---- Games (31 Oct 2026): the Syllabi Games look - lavender page, dark glossy cards, pills, chips ---- */
#p-games{--g-ink:#000938;--g-sub:#4B5563;--g-mute:#8A93A6;--g-line:#E3E8F2;--g-brand:#4C5FD6;--g-brand-d:#3445A8;--g-gold:#FDB800;--g-gold-d:#C98F00;--g-teal:#00D9BF;--g-teal-d:#00A690;--g-red:#F0506E;--g-bg:#F6F8FE;
  background:radial-gradient(1100px 520px at 50% -160px,#DDE3FF 0%,rgba(221,227,255,0) 70%),#F6F8FE;margin:-18px -34px -60px;padding:18px 34px 60px;min-height:100vh;color:var(--g-ink);font-family:Poppins,"Segoe UI",system-ui,sans-serif}
#p-games *{box-sizing:border-box}
#p-games svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;flex:none}
#p-games .gwrap{max-width:1180px;margin:0 auto}
#p-games h1,#p-games h2,#p-games h3{margin:0;font-weight:800;letter-spacing:-.01em}
/* top app bar */
#p-games .gbar{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:8px 12px;box-shadow:0 6px 20px rgba(0,9,56,.06);margin-bottom:18px;flex-wrap:wrap}
#p-games .gbar .glogo{font-weight:800;font-size:17px;display:flex;align-items:center;gap:8px;cursor:pointer}
#p-games .gbar .glogo i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#4c5fd6,#fdb800);display:inline-block}
#p-games .gbar .glogo span{color:var(--g-brand)}#p-games .gbar .glogo span b{color:#00a690}#p-games .gbar .glogo span em{color:var(--g-gold);font-style:normal}
#p-games .gtabs{display:flex;gap:4px;margin-left:auto}
#p-games .gtabs a{padding:8px 14px;border-radius:12px;font-weight:700;font-size:13.5px;color:var(--g-sub);cursor:pointer;display:flex;align-items:center;gap:6px}
#p-games .gtabs a.on{background:#EEF1FF;color:var(--g-brand)}#p-games .gtabs a:hover{background:#F3F5FF}
#p-games .gava{width:36px;height:36px;border-radius:50%;background:#4C5FD6;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer}
/* hero */
#p-games .ghero{background:linear-gradient(135deg,#1b2a6b 0%,#2f6fd6 55%,#38c6d2 100%);color:#fff;border-radius:22px;padding:28px 30px;position:relative;overflow:hidden;min-height:170px;margin-bottom:26px}
#p-games .ghero h1{font-size:34px;line-height:1.05}#p-games .ghero h1 span{color:var(--g-gold)}
#p-games .ghero p{margin:8px 0 14px;opacity:.9;font-size:14px}
#p-games .ghero .gyou{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:6px 12px;font-weight:700;font-size:13px;cursor:pointer;color:#fff}
#p-games .ghero .gyou:hover{background:rgba(255,255,255,.26)}
#p-games .ghero .gart{position:absolute;right:26px;top:18px;font-size:72px;opacity:.9;transform:rotate(-8deg);filter:drop-shadow(0 10px 20px rgba(0,0,0,.25))}
#p-games .ghero .gart2{position:absolute;right:120px;bottom:-10px;font-size:54px;opacity:.85;transform:rotate(10deg)}
/* rows */
#p-games .grow{margin-bottom:26px}
#p-games .grow .gh{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
#p-games .grow .gh h2{font-size:21px;display:flex;align-items:center;gap:8px}#p-games .grow .gh h2 i{font-style:normal;font-size:16px}
#p-games .grow .gh a{color:var(--g-brand);font-weight:700;font-size:13.5px;cursor:pointer}
#p-games .gscroll{display:flex;gap:14px;overflow-x:auto;padding:4px 4px 14px;scroll-snap-type:x proximity;scrollbar-width:thin}
#p-games .gscroll .gtile{flex:0 0 212px;scroll-snap-align:start}
#p-games .gscroll .gtile.big{flex:0 0 268px}
/* light tile (rows) */
#p-games .gtile{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 8px 22px rgba(0,9,56,.07);cursor:pointer;transition:transform .15s,box-shadow .15s;border:1px solid #eef0f8}
#p-games .gtile:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,9,56,.12)}
#p-games .gart-box{height:130px;display:flex;align-items:center;justify-content:center;font-size:58px;position:relative;background:linear-gradient(160deg,var(--c1),var(--c2))}
#p-games .gtile.big .gart-box{height:170px;font-size:72px}
#p-games .gart-box::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(to top,rgba(255,255,255,.18),transparent)}
#p-games .gtile .gt{padding:10px 12px 12px}#p-games .gtile .gt b{display:block;font-size:14.5px}#p-games .gtile .gt small{color:var(--g-mute);font-size:12.5px;display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* all games grid - dark glossy cards */
#p-games .gall{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
#p-games .gall h2{font-size:21px}#p-games .gall h2 small{color:var(--g-mute);font-weight:700;font-size:14px;margin-left:8px}
#p-games .gall .gbtn{margin-left:auto}
#p-games .gchips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
#p-games .gchips button{border:0;background:#fff;color:var(--g-ink);font:inherit;font-weight:700;font-size:13px;padding:8px 15px;border-radius:999px;cursor:pointer;box-shadow:0 0 0 1.5px var(--g-line) inset;white-space:nowrap}
#p-games .gchips button.on{background:var(--g-ink);color:#fff;box-shadow:0 3px 0 #3445A8}
#p-games .ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:18px}
#p-games .gcard{position:relative;border-radius:22px;overflow:hidden;min-height:330px;color:#fff;cursor:pointer;background:var(--bg,#1a2a4a);box-shadow:0 10px 24px rgba(0,9,56,.14);transition:transform .15s;display:flex;flex-direction:column}
#p-games .gcard:hover{transform:translateY(-3px)}
#p-games .gcard .gca{height:150px;display:flex;align-items:center;justify-content:center;font-size:64px;background:linear-gradient(160deg,var(--c1),var(--c2));position:relative}
#p-games .gcard .gca::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 55%,var(--bg,#1a2a4a))}
#p-games .gcard .gcb{padding:4px 16px 16px;display:flex;flex-direction:column;flex:1}
#p-games .gcard h3{font-size:20px;line-height:1.1;display:flex;align-items:center;gap:10px}
#p-games .gcard h3 .gplay{margin-left:auto;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--g-ink);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 3px 0 rgba(0,0,0,.25)}
#p-games .gcard p{margin:6px 0 10px;font-size:13.5px;opacity:.85;line-height:1.35;flex:1}
#p-games .gpills{display:flex;gap:6px;flex-wrap:wrap}
#p-games .gpill{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.14);border-radius:999px;padding:5px 10px;font-size:12px;font-weight:700}
#p-games .gpill.gold{background:var(--g-gold);color:#3a2a00}#p-games .gpill .st{color:var(--g-gold);letter-spacing:-1px;font-size:11px}
#p-games .gcard .gtop{position:absolute;top:12px;right:12px;display:flex;gap:8px}
#p-games .gcard .gtop button{width:34px;height:34px;border-radius:50%;border:0;background:#fff;color:var(--g-ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
#p-games .gcard .gtop button.on{color:#EC6E6E}#p-games .gcard .gtop button.on svg{fill:#EC6E6E}
#p-games .gbadge{position:absolute;top:12px;left:12px;background:var(--g-gold);color:#3a2a00;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:8px}
#p-games .gbadge.new{background:#fff;color:var(--g-ink)}#p-games .gbadge.new::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--g-red);margin-right:5px;vertical-align:1px}
#p-games .gcard.rand{background:#1f3d4f;justify-content:space-between;padding:22px 18px}
#p-games .gcard.rand .dice{font-size:70px;text-align:center;margin:10px 0 20px}
/* buttons */
#p-games .gbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:14px;cursor:pointer;font:800 14px/1 inherit;color:#fff;background:var(--g-brand);box-shadow:0 4px 0 var(--g-brand-d);text-decoration:none;white-space:nowrap}
#p-games .gbtn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--g-brand-d)}
#p-games .gbtn.gold{background:var(--g-gold);color:var(--g-ink);box-shadow:0 4px 0 var(--g-gold-d)}
#p-games .gbtn.teal{background:var(--g-teal);color:var(--g-ink);box-shadow:0 4px 0 var(--g-teal-d)}
#p-games .gbtn.white{background:#fff;color:var(--g-ink);box-shadow:0 0 0 1.5px var(--g-line) inset,0 3px 0 #dfe3ef}
#p-games .gbtn.big{min-height:56px;font-size:17px;padding:0 30px;border-radius:18px}
#p-games .gbtn.sm{min-height:34px;font-size:12.5px;padding:0 12px;border-radius:10px}
#p-games .gcardw{background:#fff;border-radius:20px;box-shadow:0 8px 22px rgba(0,9,56,.07);padding:20px 22px;border:1px solid #eef0f8}
/* game page */
#p-games .gback{display:inline-flex;align-items:center;gap:6px;color:var(--g-sub);font-weight:700;cursor:pointer;margin-bottom:14px}
#p-games .gpage{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:start}
@media(max-width:860px){#p-games .gpage{grid-template-columns:1fr}}
#p-games .gstart{text-align:center;padding:28px 22px}
#p-games .gstart .gbig{width:120px;height:120px;border-radius:30px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:62px;background:linear-gradient(160deg,var(--c1),var(--c2));box-shadow:0 12px 26px rgba(0,9,56,.18)}
#p-games .gstart h1{font-size:28px}#p-games .gstart p.sub{color:var(--g-sub);margin:6px 0 16px;font-size:15px}
#p-games .glevels{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0 16px}
#p-games .glevels button{width:42px;height:42px;border-radius:12px;border:0;background:#fff;box-shadow:0 0 0 1.5px var(--g-line) inset;font:800 14px inherit;cursor:pointer;color:var(--g-ink)}
#p-games .glevels button.on{background:var(--g-brand);color:#fff;box-shadow:0 3px 0 var(--g-brand-d)}
#p-games .glevels button.lk{opacity:.45}
#p-games .glevels button.wide{width:auto;padding:0 14px}
#p-games .gmeta{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
#p-games .gmeta .gpill{background:#EEF1FF;color:var(--g-brand)}#p-games .gmeta .gpill.gold{background:var(--g-gold);color:#3a2a00}
#p-games .glinks{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:16px;font-size:13.5px}
#p-games .glinks a{color:var(--g-brand);font-weight:700;cursor:pointer}
#p-games .glb h3{font-size:16px;margin-bottom:10px}
#p-games .gseg{display:inline-flex;background:#EEF1FF;border-radius:999px;padding:3px;gap:2px;margin-bottom:12px}
#p-games .gseg button{border:0;background:transparent;font:700 12.5px inherit;padding:6px 12px;border-radius:999px;cursor:pointer;color:var(--g-sub)}
#p-games .gseg button.on{background:#fff;color:var(--g-ink);box-shadow:0 2px 6px rgba(0,9,56,.1)}
#p-games .glbrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--g-line);font-size:14px}
#p-games .glbrow:last-child{border:0}#p-games .glbrow .rk{width:26px;font-weight:800;color:var(--g-mute)}#p-games .glbrow .av{width:30px;height:30px;border-radius:50%;background:#EEF1FF;color:var(--g-brand);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
#p-games .glbrow b{flex:1}#p-games .glbrow .pt{font-weight:800}#p-games .glbrow.me{background:#FFF8E0;border-radius:10px;padding:8px 10px}
#p-games .gempty{color:var(--g-mute);text-align:center;padding:20px 0;font-size:14px}
/* how to play modal */
#p-games .gmodal{position:fixed;inset:0;background:rgba(0,9,56,.55);display:flex;align-items:center;justify-content:center;z-index:9000;padding:20px}
#p-games .gmodal .gm{background:#fff;border-radius:22px;max-width:520px;width:100%;max-height:90vh;overflow:auto;padding:24px 26px;box-shadow:0 30px 60px rgba(0,0,0,.3);color:var(--g-ink)}
#p-games .gm h2{font-size:22px;margin-bottom:10px}#p-games .gm .lab{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--g-mute);font-weight:800;margin:14px 0 6px}
#p-games .gm ul{list-style:none;padding:0;margin:0}#p-games .gm li{padding:6px 0;border-bottom:1px solid var(--g-line);font-size:14.5px;display:flex;gap:10px}#p-games .gm li:last-child{border:0}
#p-games .gm li i{font-style:normal;width:26px;flex:none;text-align:center}
#p-games .gm p{font-size:14.5px;margin:4px 0}
/* play screen */
#p-games .gplayw{background:#0b1437;border-radius:22px;overflow:hidden;position:relative;min-height:560px;color:#fff;box-shadow:0 16px 40px rgba(0,9,56,.25)}
#p-games .gplay-top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(0,0,0,.25);font-weight:700;font-size:13.5px}
#p-games .gplay-top .sp{flex:1}#p-games .gplay-top .hearts{color:#ff5c7a;letter-spacing:2px}
#p-games .gplay-top button{border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:10px;padding:6px 12px;font:700 12.5px inherit;cursor:pointer}
#p-games .gstage{position:relative;min-height:500px;overflow:hidden}
#p-games .gstage canvas{display:block;width:100%;height:500px;touch-action:none}
#p-games .gq{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:#fff;color:var(--g-ink);border-radius:16px;padding:12px 18px;max-width:92%;font-weight:700;font-size:15px;box-shadow:0 8px 24px rgba(0,0,0,.25);text-align:center;z-index:5;line-height:1.3}
#p-games .gq small{display:block;color:var(--g-mute);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
/* question overlay (the shared pop-up) */
#p-games .gask{position:absolute;inset:0;background:rgba(0,9,56,.78);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
#p-games .gask .box{background:#fff;color:var(--g-ink);border-radius:20px;padding:22px 24px;width:100%;max-width:520px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
#p-games .gask .box small{display:block;color:var(--g-mute);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;margin-bottom:6px}
#p-games .gask .box h3{font-size:18px;line-height:1.3;margin-bottom:14px}
#p-games .gopts{display:grid;gap:8px}
#p-games .gopts button{border:0;background:#F3F5FF;color:var(--g-ink);font:600 15px inherit;text-align:left;padding:12px 14px;border-radius:12px;cursor:pointer;display:flex;gap:10px;align-items:center;box-shadow:0 0 0 1.5px #E3E8F2 inset}
#p-games .gopts button i{font-style:normal;width:26px;height:26px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex:none;box-shadow:0 0 0 1.5px #E3E8F2 inset}
#p-games .gopts button:hover{background:#E8ECFF}
#p-games .gopts button.ok{background:#DCFCE7;box-shadow:0 0 0 2px #16a34a inset}#p-games .gopts button.bad{background:#FEE2E2;box-shadow:0 0 0 2px #dc2626 inset}
#p-games .gask .why{margin-top:12px;font-size:13.5px;color:var(--g-sub);background:#F6F8FE;border-radius:10px;padding:10px 12px}
#p-games .gask .gtimer{height:6px;background:#E3E8F2;border-radius:3px;margin-top:12px;overflow:hidden}#p-games .gask .gtimer i{display:block;height:100%;background:var(--g-gold);transition:width .25s linear}
/* end screen */
#p-games .gend{position:absolute;inset:0;background:rgba(0,9,56,.86);display:flex;align-items:center;justify-content:center;z-index:30;padding:16px}
#p-games .gend .box{background:#fff;color:var(--g-ink);border-radius:22px;padding:26px 28px;text-align:center;max-width:420px;width:100%}
#p-games .gend .stars{font-size:38px;letter-spacing:4px;margin:6px 0}#p-games .gend .stars .off{opacity:.2}
#p-games .gend h2{font-size:24px}#p-games .gend p{color:var(--g-sub);margin:6px 0 16px}
#p-games .gend .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* DOM game bits */
#p-games .gpond{position:relative;height:500px;background:linear-gradient(#1a6b5a,#0f4d44);overflow:hidden}
#p-games .gpad{position:absolute;width:150px;height:86px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#7cd36a,#3f9d3a);box-shadow:inset 0 -6px 0 rgba(0,0,0,.2),0 6px 14px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;font-size:14px;color:#0b2a14;cursor:pointer;padding:8px;transition:transform .2s;z-index:3}
#p-games .gpad:hover{transform:scale(1.05)}#p-games .gpad.sink{animation:gsink .6s forwards}#p-games .gpad .lt{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:#fff;color:#0b2a14;border-radius:50%;width:24px;height:24px;font-size:12px;display:flex;align-items:center;justify-content:center}
@keyframes gsink{to{transform:scale(.6) translateY(40px);opacity:0}}
#p-games .gfrog{position:absolute;font-size:46px;transition:left .5s cubic-bezier(.3,1.4,.5,1),top .5s cubic-bezier(.3,1.4,.5,1);z-index:4;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
#p-games .gbank{position:absolute;left:0;right:0;height:60px;background:#c9a86a;border-radius:0 0 40px 40px/0 0 20px 20px}
#p-games .gcards{display:grid;gap:10px;padding:18px}
#p-games .gflip{perspective:900px;height:300px;max-width:560px;margin:30px auto 10px;cursor:pointer}
#p-games .gflip .in{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
#p-games .gflip.fl .in{transform:rotateY(180deg)}
#p-games .gflip .f,#p-games .gflip .b{position:absolute;inset:0;backface-visibility:hidden;border-radius:22px;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-size:20px;font-weight:700;color:var(--g-ink);background:#fff;box-shadow:0 14px 30px rgba(0,0,0,.3)}
#p-games .gflip .b{transform:rotateY(180deg);background:#FFF8E0}
#p-games .gflip small{position:absolute;top:14px;left:18px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--g-mute);font-weight:800}
#p-games .gmcard{aspect-ratio:3/4;border-radius:14px;background:linear-gradient(135deg,#7a1f2a,#3a0f14);display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;font-size:13px;padding:8px;text-align:center;color:var(--g-ink);position:relative;box-shadow:0 6px 14px rgba(0,0,0,.3);transition:transform .2s}
#p-games .gmcard::before{content:"✦";color:rgba(255,215,120,.6);font-size:30px}
#p-games .gmcard.up{background:#fff}#p-games .gmcard.up::before{content:none}#p-games .gmcard.done{background:#DCFCE7;opacity:.7}
#p-games .gttt{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(360px,90%);margin:30px auto}
#p-games .gttt button{aspect-ratio:1;border:0;border-radius:16px;background:#fff;font-size:44px;cursor:pointer;box-shadow:0 4px 0 #cfd6e8}
#p-games .gttt button.win{background:#FFF1B8}
#p-games .gmatch{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:20px;max-width:760px;margin:0 auto}
#p-games .gmatch .col{display:flex;flex-direction:column;gap:8px}
#p-games .gmatch .mc{background:#fff;color:var(--g-ink);border-radius:12px;padding:12px 14px;font-weight:600;font-size:14px;cursor:pointer;box-shadow:0 3px 0 #cfd6e8;text-align:center;min-height:50px;display:flex;align-items:center;justify-content:center}
#p-games .gmatch .mc.sel{background:#FFF1B8;box-shadow:0 0 0 2px var(--g-gold) inset}#p-games .gmatch .mc.gone{visibility:hidden}#p-games .gmatch .mc.bad{background:#FEE2E2}
#p-games .gwordle{display:grid;gap:6px;justify-content:center;padding:18px 0 6px}
#p-games .gwordle .r{display:flex;gap:6px}#p-games .gwordle .c{width:52px;height:52px;border:2px solid rgba(255,255,255,.3);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;text-transform:uppercase}
#p-games .gwordle .c.g{background:#16a34a;border-color:#16a34a}#p-games .gwordle .c.y{background:#f59e0b;border-color:#f59e0b}#p-games .gwordle .c.x{background:#334155;border-color:#334155}
#p-games .gkeys{display:flex;flex-direction:column;gap:6px;align-items:center;padding:8px 0 18px}#p-games .gkeys .kr{display:flex;gap:5px}
#p-games .gkeys button{min-width:34px;height:44px;border:0;border-radius:8px;background:rgba(255,255,255,.2);color:#fff;font:800 13px inherit;cursor:pointer;padding:0 8px}
#p-games .gkeys button.g{background:#16a34a}#p-games .gkeys button.y{background:#f59e0b}#p-games .gkeys button.x{background:#1f2937}#p-games .gkeys button.wide{min-width:60px}
#p-games .gsud{display:grid;margin:16px auto;gap:0;background:#fff;padding:4px;border-radius:12px;width:max-content}
#p-games .gsud button{width:46px;height:46px;border:1px solid #cfd6e8;background:#fff;font:800 18px inherit;color:var(--g-ink);cursor:pointer}
#p-games .gsud button.fix{background:#EEF1FF;color:#4a5fe0;cursor:default}#p-games .gsud button.sel{background:#FFF1B8}#p-games .gsud button.bad{color:#dc2626}
#p-games .gsud button.bl{border-left:2.5px solid var(--g-ink)}#p-games .gsud button.bt{border-top:2.5px solid var(--g-ink)}
#p-games .gnum{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding-bottom:16px}
#p-games .gnum button{width:44px;height:44px;border:0;border-radius:10px;background:#fff;color:var(--g-ink);font:800 16px inherit;cursor:pointer;box-shadow:0 3px 0 #cfd6e8}
#p-games .gbins{display:flex;gap:14px;justify-content:center;padding:14px;flex-wrap:wrap}
#p-games .gbin{flex:1;min-width:160px;max-width:260px;min-height:120px;border:3px dashed rgba(255,255,255,.45);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:16px;cursor:pointer;transition:background .15s;padding:10px}
#p-games .gbin:hover{background:rgba(255,255,255,.12)}#p-games .gbin small{font-weight:600;opacity:.8;font-size:12px;margin-top:4px}
#p-games .gitem{margin:26px auto 10px;background:#fff;color:var(--g-ink);border-radius:18px;padding:18px 26px;font-size:26px;font-weight:800;width:max-content;max-width:90%;text-align:center;box-shadow:0 10px 24px rgba(0,0,0,.3)}
#p-games .geq{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;padding:30px 10px 10px;font-size:26px;font-weight:800}
#p-games .geq .gap{width:56px;height:56px;border-radius:12px;background:rgba(255,255,255,.14);border:2px dashed rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;cursor:pointer}
#p-games .geq .gap.sel{border-color:var(--g-gold);background:rgba(253,184,0,.2)}#p-games .geq .gap.has{border-style:solid;background:#fff;color:var(--g-ink)}
#p-games .gtray{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:10px}
#p-games .gtray button{width:52px;height:52px;border:0;border-radius:12px;background:#fff;color:var(--g-ink);font:800 20px inherit;cursor:pointer;box-shadow:0 4px 0 #cfd6e8}
#p-games .gtray button:disabled{opacity:.25}
#p-games .gdive{position:relative;height:500px;background:linear-gradient(#2aa0d6 0%,#0b4f7a 45%,#031b2e 100%);overflow:hidden}
#p-games .gdiver{position:absolute;left:50%;transform:translateX(-50%);font-size:54px;transition:top .6s ease;z-index:3}
#p-games .gdepth{position:absolute;right:14px;top:14px;background:rgba(0,0,0,.3);border-radius:10px;padding:6px 10px;font-weight:800}
#p-games .gair{position:absolute;left:14px;top:14px;width:160px;height:14px;background:rgba(0,0,0,.35);border-radius:7px;overflow:hidden}#p-games .gair i{display:block;height:100%;background:#7dd3fc;transition:width .3s}
#p-games .gbuild{display:grid;grid-template-columns:repeat(6,42px);gap:4px;justify-content:center;padding:26px 10px 10px}
#p-games .gbuild div{width:42px;height:42px;border-radius:6px;background:rgba(255,255,255,.08);border:1px dashed rgba(255,255,255,.3)}
#p-games .gbuild div.on{background:linear-gradient(135deg,#f6c66b,#c98f00);border-color:transparent;box-shadow:inset 0 -4px 0 rgba(0,0,0,.2)}
#p-games .gbuild div.glow{border-color:var(--g-gold);box-shadow:0 0 0 2px var(--g-gold);cursor:pointer;background:rgba(253,184,0,.25)}
#p-games .gcenter{text-align:center;padding:18px}
#p-games .gcenter .big{font-size:40px;font-weight:800}
/* me page */
#p-games .gme{display:grid;grid-template-columns:1fr 1fr;gap:18px}@media(max-width:860px){#p-games .gme{grid-template-columns:1fr}}
#p-games .gstat{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0}#p-games .gstat div{flex:1;min-width:110px;text-align:center}#p-games .gstat b{display:block;font-size:26px}#p-games .gstat small{color:var(--g-mute);font-size:12px}
#p-games .gstages{display:flex;flex-wrap:wrap;gap:14px 10px;margin:8px 0 18px}#p-games .gstage-k{display:flex;flex-direction:column;gap:7px}
#p-games .gstage-k>span{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--g-sub);white-space:nowrap}#p-games .gstage-k>div{display:flex;gap:5px}
#p-games .ggrade{width:40px;height:46px;border:0;border-radius:12px;background:#fff;box-shadow:0 0 0 1.5px var(--g-line) inset;font:800 14px inherit;cursor:pointer;color:var(--g-ink)}
#p-games .ggrade.wide{width:auto;padding:0 14px}#p-games .ggrade.on{background:var(--g-brand);color:#fff;box-shadow:0 3px 0 var(--g-brand-d)}
#p-games .gsubs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
#p-games .gsub{display:flex;align-items:center;gap:10px;border:2px solid var(--g-line);border-radius:14px;padding:10px 12px;cursor:pointer;font-weight:700;font-size:14px;background:#fff}
#p-games .gsub.on{border-color:#2aa386;background:#f0fbf7}#p-games .gsub .ck{margin-left:auto;width:20px;height:20px;border-radius:50%;background:#2aa386;color:#fff;display:none;align-items:center;justify-content:center}#p-games .gsub.on .ck{display:flex}
#p-games .gsub i{font-style:normal;width:30px;height:30px;border-radius:8px;background:#EEF1FF;display:flex;align-items:center;justify-content:center;font-size:15px}
#p-games .gset{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--g-line);font-size:14px}#p-games .gset small{display:block;color:var(--g-mute);font-size:12px}
#p-games .gbadges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
#p-games .gbd{background:#fff;border-radius:14px;padding:12px;text-align:center;border:1px solid var(--g-line)}#p-games .gbd.done{background:#FFF8E0;border-color:var(--g-gold)}
#p-games .gbd i{font-style:normal;font-size:28px;display:block}#p-games .gbd b{display:block;font-size:13px;margin:6px 0 2px}#p-games .gbd small{color:var(--g-mute);font-size:11.5px;display:block}
#p-games .gbd .bar{height:5px;background:#E3E8F2;border-radius:3px;margin-top:8px;overflow:hidden}#p-games .gbd .bar i{display:block;height:100%;background:var(--g-brand);font-size:0}
#p-games .gfoot{text-align:center;color:var(--g-mute);font-size:12.5px;margin-top:30px}
/* the EduGulhun games splash every game opens on */
#p-games .gsplash{position:absolute;inset:0;overflow:hidden;background:#dfe9e6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;animation:gsplashin .4s}
@keyframes gsplashin{from{opacity:0}to{opacity:1}}
#p-games .gsplash-sky{position:absolute;inset:0;background:linear-gradient(#e9eef0,#d8e4e2 60%,#8fcfc2 61%,#7fc3b6)}
#p-games .gsplash-sea{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(#8ed0c4,#6fbfb0)}
#p-games .gsplash-sea::before{content:"⛵";position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:70px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.2))}
#p-games .gsplash-brand{position:relative;display:flex;align-items:center;gap:14px;font-size:44px;font-weight:800;color:#000938;letter-spacing:-.02em;animation:gsplashup .6s cubic-bezier(.2,.9,.3,1.2)}
@keyframes gsplashup{from{transform:translateY(30px) scale(.8);opacity:0}to{transform:none;opacity:1}}
#p-games .gsplash-brand i{width:66px;height:66px;border-radius:20px;background:#0b1437;box-shadow:0 10px 24px rgba(0,9,56,.3);position:relative}
#p-games .gsplash-brand i::before{content:"";position:absolute;left:14px;top:14px;width:38px;height:38px;border-radius:50%;border:8px solid #4c5fd6;border-right-color:#00d9bf;border-bottom-color:#fdb800;transform:rotate(-30deg)}
#p-games .gsplash-brand b{font-weight:800}#p-games .gsplash-brand b em{font-style:normal;color:#4c5fd6}#p-games .gsplash-brand b u{text-decoration:none;font-size:34px;vertical-align:2px}#p-games .gsplash-brand b em:last-child{color:#16a34a}
#p-games .gsplash-game{position:relative;display:flex;align-items:center;gap:12px;font-weight:800;font-size:18px;color:#000938;background:rgba(255,255,255,.75);border-radius:999px;padding:8px 18px 8px 8px;animation:gsplashup .7s .15s both}
#p-games .gsplash-emoji{width:40px;height:40px;border-radius:12px;background:linear-gradient(160deg,var(--c1),var(--c2));display:flex;align-items:center;justify-content:center;font-size:24px}
@media(max-width:600px){#p-games .gsplash-brand{font-size:30px}#p-games .gsplash-brand i{width:48px;height:48px}}
/* phones: a game fills the screen, with the back arrow at the top (31 Oct 2026) */
#p-games .gplay-top .gbk{width:34px;height:34px;padding:0;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14)}
#p-games .gplay-top .gbk svg{width:20px;height:20px}
@media(max-width:700px){
  #p-games .gplayw{position:fixed;inset:0;z-index:9500;border-radius:0;min-height:100dvh;overflow:auto;box-shadow:none}
  #p-games .gplay-top{position:sticky;top:0;z-index:2;background:#0b1437;padding:10px 10px;font-size:12.5px}
  #p-games .gplay-top button:not(.gbk){display:none}
  #p-games .gback{display:none}
  #p-games .gask{position:fixed;inset:0}#p-games .gend{position:fixed;inset:0}
  #p-games .gsplash{position:fixed;inset:0}
}
@media(max-width:700px){#p-games .gbar{gap:6px}#p-games .gtabs{margin-left:0;width:100%;justify-content:space-between;order:3}#p-games .gtabs a{padding:7px 8px;font-size:12.5px}#p-games .gava{margin-left:auto}
  #p-games .gpond .gq{top:8px;font-size:14px;padding:8px 12px}#p-games .ghero h1{font-size:28px}#p-games .ghero .gart{font-size:50px;right:12px}#p-games .ghero .gart2{display:none}}
#p-games .gplay-top .gbk#gmSnd{font-size:15px;margin-left:4px}
@media(max-width:700px){#p-games .gplay-top button#gmSnd{display:flex}}