/* Yantrika games: shared look of the Games Arcade (cards, slider, full-screen panel, game widgets).
   Open source (MIT). A single game can also ship its own CSS through the `css` field of YK.register(). */
/* Prisoner's Dilemma */
/* ===================== CSS: GAMES ===================== */
/* Prisoner's Dilemma, Simon, Echo lab, game cards, full-screen game panel */
.pdm{border-collapse:collapse;margin:12px 0;text-align:center;max-width:100%}
.pdm th,.pdm td{border:3px solid var(--dk);padding:8px 12px}
.pdm td{transition:background .2s}
.pdm td.hl{background:var(--yel);color:#17171d;font-weight:700;animation:pop .3s ease}
.pdo{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;background:var(--card);color:var(--ink);border:3px solid var(--dk);border-radius:10px;box-shadow:4px 4px 0 var(--dk);padding:12px;transition:transform .15s ease}
.pdo:hover{transform:translate(-3px,-3px)}
.pdo b{font-size:1.1rem}.pdo span{font-size:1.8rem;float:right}
.pdgo{font-size:1.15rem;padding:14px 20px;flex:1 1 200px;margin:6px 0}
.pdgo.d{background:var(--red);color:#fff}
.pdgo:disabled{opacity:.45;cursor:wait;transform:none}
.pdsc{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0}
.pdsc>div{flex:1 1 200px}
.pdsc .bar{max-width:none;margin-top:4px}
.pdsc .bar i.o{background:var(--or)}
.hist{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hr{border:2px solid var(--dk);border-radius:8px;padding:0 8px;background:var(--card);font-size:1.1rem}
.pdbig{font-size:1.15rem;min-height:3.2em}
.tsc{width:100%;max-width:640px;display:block;margin:6px auto 0}
.tsc text{font-family:'Permanent Marker',cursive}
.tbs{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin:12px 0 18px}
.tb{font-family:'Permanent Marker',cursive;font-size:1.35rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);background:var(--card);border:4px solid var(--dk);border-radius:22px 12px 20px 14px/14px 20px 12px 22px;padding:12px 30px;cursor:pointer;transition:transform .12s,background .12s}
.tb:hover:not(:disabled){transform:rotate(-1.5deg) scale(1.05);background:var(--yel);color:#17171d}
.tb:disabled{opacity:.45;cursor:wait}
@media(prefers-reduced-motion:reduce){.tb{transition:none}}
.shake{animation:shk .35s}
@keyframes shk{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media(prefers-reduced-motion:reduce){.pdm td.hl,.shake{animation:none}.pdo{transition:none}}
.sg{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:360px;margin:12px 0}
.sg button{height:90px;border:3px solid var(--dk);border-radius:12px;box-shadow:4px 4px 0 var(--dk);cursor:pointer;transition:filter .1s,transform .1s}
.echo{position:relative;height:60px;border:3px solid var(--dk);border-radius:10px;background:var(--soft);overflow:hidden}
.echo #wl{transition:left .1s}
.pdo[aria-pressed="true"]{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--dk)}

/* Home: games slider */
.gs{overflow:hidden;margin:12px 0 36px;padding:6px 0 12px;-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.gst{display:flex;width:max-content;animation:slide 60s linear infinite}
.gs:hover .gst{animation-play-state:paused}
.gsc{position:relative;flex:0 0 auto;width:260px;aspect-ratio:4/3;margin-right:14px;padding:0;border:3px solid var(--dk);border-radius:12px;overflow:hidden;box-shadow:5px 5px 0 var(--dk);cursor:pointer;font:inherit;text-align:left;background:var(--c,#338eda);color:#fff}
.gsc:hover{transform:translate(-3px,-3px)}
.gsc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gsc .lb{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 10px;background:linear-gradient(to top,rgba(0,0,0,.85),transparent)}
.gsc .lb b{display:block;font-family:'Permanent Marker',cursive;font-weight:400;font-size:1.25rem;line-height:1.2}
.gsc .lb em{display:inline-block;font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:2px solid var(--dk);border-radius:20px;padding:0 10px;margin-bottom:4px}
/* Games page: long panels */
.gl{display:flex;flex-direction:column;gap:16px;margin-bottom:36px}
.gpn{display:flex;align-items:stretch;padding:0;overflow:hidden}
.gpn .gim{flex:0 0 240px;position:relative;min-height:150px}
.gpn .gim img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gpn .gtx{flex:1;padding:14px 16px}
@media(max-width:600px){.gsc{width:200px}.gpn .gim{flex-basis:110px}}
@media(prefers-reduced-motion:reduce){.gst{animation:none}.gs{overflow-x:auto}}
.gsc{width:280px;aspect-ratio:1/1}
.gsc .lb small{display:block;font-size:.8rem;font-weight:400;line-height:1.3;margin-top:4px}
@media(max-width:600px){.gsc{width:220px}}
.th{border-style:solid}
.th h3{margin-top:0}
.th ul{margin:8px 0 0;padding-left:20px}
.gfull{position:fixed;inset:0;z-index:100;margin:0;border:0;border-radius:0;box-shadow:none;overflow:auto;background:var(--bg);color:var(--ink);padding:calc(14px + env(safe-area-inset-top,0px)) 20px calc(30px + env(safe-area-inset-bottom,0px));box-sizing:border-box}
.gfull>*{max-width:960px;margin-left:auto;margin-right:auto}
.gfull[hidden]{display:none}
.gfull.gbgi{background-image:linear-gradient(color-mix(in srgb,var(--bg) 93%,transparent),color-mix(in srgb,var(--bg) 96%,transparent)),var(--gimg);background-size:cover;background-position:center;background-attachment:fixed}
.gbar .logo{font-size:1.5rem;color:#17171d;text-decoration:none;margin-right:6px;line-height:1;display:flex;align-items:center}
.gbar{position:sticky;top:-14px;z-index:2;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--yel);padding:8px 0 12px;margin-bottom:8px;border-bottom:4px solid var(--dk)}
.gbar .btn{margin:0}
.gfull .sg{max-width:min(520px,100%)}
.tiny{margin-top:14px;border:3px dashed var(--dk);border-radius:10px;padding:10px 14px;background:var(--card)}
.tiny h4{margin:0 0 8px;font-size:1.05rem}

/* Open-source strip + "Build a game with us" card */
.oss{margin-top:22px;font-size:.95rem}
.oss a{font-weight:700}
.oss-card{margin:0 0 36px;border-top:12px solid var(--cy)}
.oss-card .btn{margin:4px 8px 4px 0}