/*
Theme Name: Playroom88 Arcade
Theme URI: https://playroom88.com/
Author: Playroom88
Description: Customizable browser game landing theme based on supplied design.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: playroom88
*/

:root{
  --sun:#FFD23F; --pink:#FF4F81; --sky:#3EC1F3; --mint:#2FD6A0; --grape:#8B5CF6; --orange:#FF8A3D;
  --ink:#1E1452; --bg:#F3EEFF; --surface:#FFFFFF; --text:#1E1452; --muted:#5B5288;
  --hero-bg:var(--sun); --hero-text:var(--ink); --line:var(--ink);
  --display:"Lilita One","Arial Black",Impact,sans-serif;
  --body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#160F3A; --surface:#251B5E; --text:#FFFFFF; --muted:#C9C1F2;
    --hero-bg:#2A1F6E; --hero-text:#FFFFFF; --line:#0A0624; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#160F3A; --surface:#251B5E; --text:#FFFFFF; --muted:#C9C1F2;
  --hero-bg:#2A1F6E; --hero-text:#FFFFFF; --line:#0A0624; color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-weight:600;line-height:1.55;overflow-x:hidden}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:8px}

/* ---------- Buttons (chunky, press down on click) ---------- */
.btn{
  --b:var(--pink); display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--display);font-size:1.15rem;letter-spacing:.02em;text-decoration:none;
  color:#fff;background:var(--b);border:3px solid var(--ink);border-radius:16px;
  padding:.8em 1.4em;box-shadow:0 6px 0 var(--ink);cursor:pointer;
  transition:transform .08s ease, box-shadow .08s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--ink)}
.btn:active{transform:translateY(6px);box-shadow:0 0 0 var(--ink)}
.btn.ghost{--b:#fff;color:var(--ink)}
.btn.small{font-size:1rem;padding:.55em 1.1em;border-radius:12px;box-shadow:0 4px 0 var(--ink)}
.btn.small:active{transform:translateY(4px)}

/* ---------- Nav ---------- */
.nav{display:flex;justify-content:space-between;align-items:center;max-width:1180px;margin:0 auto;padding:1.2rem 1.5rem}
.logo{font-family:var(--display);font-size:1.7rem;color:var(--hero-text);text-decoration:none;display:flex;align-items:center;gap:.45rem}
.logo i{display:inline-grid;place-items:center;width:38px;height:38px;background:var(--pink);color:#fff;border:3px solid var(--ink);border-radius:10px;font-style:normal;transform:rotate(-8deg)}
.nav-links{display:flex;gap:1.5rem;align-items:center}
.nav-links a{text-decoration:none;font-weight:800;color:var(--hero-text)}
@media (max-width:640px){.nav-links a:not(.btn){display:none}}

/* ---------- Hero ---------- */
.hero{background:var(--hero-bg);color:var(--hero-text);position:relative;overflow:hidden;border-bottom:4px solid var(--ink)}
.hero::before{ /* dotted game-board texture */
  content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;
  background-image:radial-gradient(var(--ink) 1.6px,transparent 1.7px);background-size:26px 26px;
}
.hero-inner{position:relative;max-width:1180px;margin:0 auto;padding:2rem 1.5rem 5rem;display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.live{display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);color:var(--text);border:3px solid var(--ink);border-radius:999px;padding:.3rem .9rem;font-weight:800;font-size:.95rem}
.live b{width:10px;height:10px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 var(--mint);animation:ping 1.6s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
h1{font-family:var(--display);font-weight:400;font-size:clamp(3rem,8vw,6.2rem);line-height:.95;margin:1.2rem 0 1rem;letter-spacing:.01em}
h1 .w{display:inline-block;white-space:nowrap}
h1 .ch{display:inline-block;opacity:0;transform:translateY(60px) rotate(-12deg) scale(.6);animation:pop .55s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes pop{to{opacity:1;transform:none}}
.hero p.lead{font-size:1.2rem;max-width:30em;margin:0 0 2rem;color:inherit;opacity:.9}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem}

/* Floating game pieces */
.table{position:relative;height:440px}
.piece{position:absolute;border:4px solid var(--ink);display:grid;place-items:center;animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -18px}}
.die{width:150px;height:150px;background:#fff;border-radius:28px;top:40px;left:12%;rotate:-12deg;box-shadow:10px 10px 0 var(--ink);
  grid-template:repeat(3,1fr)/repeat(3,1fr);padding:18px;cursor:pointer}
.die span{width:24px;height:24px;border-radius:50%;background:var(--ink);place-self:center;transition:opacity .15s}
.card-p{width:140px;height:196px;background:#fff;border-radius:16px;top:150px;right:6%;rotate:14deg;box-shadow:10px 10px 0 var(--ink);animation-delay:-1.5s;
  font-family:var(--display);color:var(--pink);font-size:4rem}
.card-p::before,.card-p::after{content:"7";position:absolute;font-size:1.6rem}
.card-p::before{top:6px;left:12px}.card-p::after{bottom:6px;right:12px;rotate:180deg}
.token{width:90px;height:90px;border-radius:50%;background:var(--sky);bottom:30px;left:6%;box-shadow:6px 6px 0 var(--ink);animation-delay:-3s}
.token::after{content:"";width:36px;height:36px;border-radius:50%;background:#fff;border:4px solid var(--ink)}
.chip{width:70px;height:70px;border-radius:50%;background:var(--mint);top:0;right:24%;box-shadow:5px 5px 0 var(--ink);animation-delay:-2.2s;
  background-image:repeating-conic-gradient(var(--mint) 0 30deg,#fff 30deg 45deg)}
.star{width:76px;height:76px;bottom:90px;left:44%;border:none;animation-delay:-.8s}
.star svg{width:100%;height:100%;overflow:visible}
.wave{position:absolute;left:0;right:0;bottom:-2px;height:40px;background:var(--bg);
  -webkit-mask:radial-gradient(28px at 50% 0,transparent 98%,#000) 50% 100%/56px 40px repeat-x;
          mask:radial-gradient(28px at 50% 0,transparent 98%,#000) 50% 100%/56px 40px repeat-x}

@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;padding-bottom:4rem}
  .table{height:300px;order:-1;margin-top:-.5rem}
  .die{width:110px;height:110px;padding:12px;border-radius:22px;top:20px}
  .die span{width:18px;height:18px}
  .card-p{width:105px;height:148px;font-size:3rem;top:70px}
  .token{width:70px;height:70px}
  .token::after{width:28px;height:28px}
}

/* ---------- Ticker ---------- */
.ticker{background:var(--ink);color:#fff;border-bottom:4px solid var(--ink);overflow:hidden;white-space:nowrap;font-family:var(--display);font-size:1.25rem;padding:.7rem 0}
.ticker-track{display:inline-flex;gap:3rem;animation:scroll 32s linear infinite;padding-left:3rem}
.ticker-track span{color:var(--sun)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- Games ---------- */
section{max-width:1180px;margin:0 auto;padding:5rem 1.5rem}
h2{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;margin:0 0 .6rem}
.section-sub{color:var(--muted);font-size:1.15rem;margin:0 0 2rem;max-width:36em}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.2rem}
.filter{font:800 1rem var(--body);color:var(--text);background:var(--surface);border:3px solid var(--ink);border-radius:999px;padding:.45rem 1.1rem;cursor:pointer;transition:transform .1s}
.filter:active{transform:scale(.94)}
.filter[aria-pressed="true"]{background:var(--ink);color:#fff}
:root[data-theme="dark"] .filter[aria-pressed="true"]{background:var(--sun);color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .filter[aria-pressed="true"]{background:var(--sun);color:var(--ink)}}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.8rem}
.game{background:var(--surface);border:4px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);overflow:hidden;display:flex;flex-direction:column;
  transition:opacity .25s, transform .25s}
.game.hide{display:none}
.game.featured{grid-column:span 2}
@media (max-width:600px){.game.featured{grid-column:auto}}
.art{--c:var(--pink);height:170px;background:var(--c);border-bottom:4px solid var(--ink);position:relative;display:grid;place-items:center;overflow:hidden}
.featured .art{height:240px}
.art::before{content:"";position:absolute;inset:0;opacity:.25;background:repeating-linear-gradient(45deg,#fff 0 12px,transparent 12px 28px)}
.art .emo{font-size:5rem;position:relative;filter:drop-shadow(4px 4px 0 var(--ink))}
.featured .art .emo{font-size:7rem}
.art .players{position:absolute;top:12px;left:12px;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:.15rem .7rem;font-size:.85rem;font-weight:900;display:flex;align-items:center;gap:.4rem}
.art .players::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint)}
.art .badge{position:absolute;top:12px;right:12px;background:var(--sun);color:var(--ink);border:3px solid var(--ink);border-radius:10px;padding:.1rem .6rem;font-family:var(--display);rotate:6deg}
.game-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.game h3{font-family:var(--display);font-weight:400;font-size:1.6rem;margin:0;line-height:1.1}
.game p{margin:0;color:var(--muted)}
.meta{display:flex;gap:.5rem;flex-wrap:wrap;font-size:.85rem;font-weight:800;color:var(--muted)}
.meta span{border:2px solid currentColor;border-radius:8px;padding:0 .5rem}
.game .btn{margin-top:auto;align-self:flex-start}
.game-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:.6rem}

/* ---------- Steps ---------- */
.steps-wrap{background:var(--surface);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.5rem}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.step{display:flex;gap:1rem;align-items:flex-start}
.step .n{flex:none;width:56px;height:56px;border-radius:16px;border:3px solid var(--ink);display:grid;place-items:center;font-family:var(--display);font-size:1.8rem;color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.step:nth-child(1) .n{background:var(--sun)}.step:nth-child(2) .n{background:var(--sky)}.step:nth-child(3) .n{background:var(--mint)}
.step h3{font-family:var(--display);font-weight:400;font-size:1.45rem;margin:.2rem 0 .3rem}
.step p{margin:0;color:var(--muted)}

/* ---------- Final CTA ---------- */
.final{text-align:center}
.final-card{background:var(--pink);color:#fff;border:4px solid var(--ink);border-radius:32px;box-shadow:12px 12px 0 var(--ink);padding:4rem 1.5rem;position:relative;overflow:hidden}
.final-card h2{font-size:clamp(2.4rem,6vw,4.5rem)}
.final-card p{font-size:1.2rem;margin:0 auto 2rem;max-width:30em}
.final-card .btn{--b:var(--sun);color:var(--ink)}
footer{text-align:center;color:var(--muted);padding:0 1.5rem 3rem;font-size:.95rem}

/* ---------- Demo modal ---------- */
.modal{position:fixed;inset:0;background:rgba(20,12,60,.7);display:none;place-items:center;z-index:50;padding:1rem;backdrop-filter:blur(4px)}
.modal.open{display:grid}
.modal-box{background:var(--surface);color:var(--text);border:4px solid var(--ink);border-radius:26px;box-shadow:10px 10px 0 var(--ink);width:min(520px,100%);padding:1.6rem;position:relative;animation:bounceIn .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bounceIn{from{transform:scale(.7);opacity:0}}
.modal-box h2{font-size:2.2rem;margin:0}
.close{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:12px;border:3px solid var(--ink);background:var(--sun);color:var(--ink);font:900 1.3rem var(--body);cursor:pointer}
.hud{display:flex;gap:1rem;margin:.6rem 0 1.2rem;font-weight:900;color:var(--muted)}
.hud b{color:var(--text)}
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;perspective:800px}
.tile{aspect-ratio:1;border:none;padding:0;background:none;cursor:pointer;position:relative;transform-style:preserve-3d;transition:transform .4s cubic-bezier(.3,1.4,.5,1)}
.tile.flip,.tile.done{transform:rotateY(180deg)}
.tile .f,.tile .b{position:absolute;inset:0;border:3px solid var(--ink);border-radius:14px;backface-visibility:hidden;display:grid;place-items:center;box-shadow:0 4px 0 var(--ink)}
.tile .f{background:var(--grape);background-image:radial-gradient(#fff3 2px,transparent 2.5px);background-size:12px 12px}
.tile .f::after{content:"?";font-family:var(--display);font-size:1.8rem;color:#fff}
.tile .b{background:#fff;transform:rotateY(180deg);font-size:2.2rem}
.tile.done .b{background:var(--mint);animation:yay .4s}
@keyframes yay{50%{scale:1.15}}
.win{text-align:center;display:none;padding:1rem 0 .4rem}
.win.show{display:block}
.win .big{font-size:4rem;line-height:1}
.win p{font-size:1.15rem;margin:.6rem 0 1.4rem}
.win .row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));translate:-50% 140%;background:var(--ink);color:#fff;border:3px solid #fff;border-radius:14px;padding:.8rem 1.3rem;font-weight:800;z-index:60;transition:translate .35s cubic-bezier(.3,1.5,.5,1)}
.toast.show{translate:-50% 0}

/* Confetti */
.confetti{position:fixed;top:-20px;width:10px;height:16px;z-index:70;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  h1 .ch{opacity:1;transform:none}
  .ticker-track{animation:none}
}

.admin-bar .hero{scroll-margin-top:32px}
.game .art img{position:relative;width:100%;height:100%;object-fit:cover}

/* Plinko Nepal dedicated game page */
.pr-plinko-page{min-height:100vh;background:#f3eeff}.pr-plinko-nav{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:12px max(18px,calc((100vw - 1100px)/2));background:#ffd23f;color:#1e1452;font-weight:900;border-bottom:3px solid #1e1452}.pr-plinko-nav a{text-decoration:none}.pr-plinko-frame{display:block;width:100%;height:calc(100dvh - 58px);min-height:620px;border:0;background:#fff}.pr-plinko-description{max-width:900px;margin:auto;padding:16px 24px;color:#1e1452}.pr-plinko-description p{margin:0}

/* Editable page content and embedded game */
.pr-plinko-page{width:100%;min-height:100vh;background:var(--bg);overflow-x:hidden}.pr-plinko-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px max(18px,calc((100vw - 1100px)/2));background:#ffd23f;color:#1e1452;font-weight:900;border-bottom:3px solid #1e1452;flex-wrap:wrap}.pr-plinko-nav a{color:inherit;text-decoration:none}.pr-plinko-editor-content>p,.pr-plinko-editor-content>h1,.pr-plinko-editor-content>h2{max-width:1100px;margin:1rem auto;padding:0 18px}.pr-plinko-frame{display:block;width:100%;max-width:100%;height:calc(100dvh - 62px);min-height:480px;border:0;background:#ffd23f}.pr-plinko-editor-content .wp-block-shortcode{margin:0}@media(max-width:600px){.pr-plinko-nav{padding:10px 14px;font-size:14px}.pr-plinko-frame{height:calc(100dvh - 52px);min-height:420px}}