/* REM Arcade Worlds — illustrated game identity */
body{font-family:"Trebuchet MS",Arial,sans-serif}
.home h1,.play h1,.home .card h2{font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif}
:root{--sky:#9ee8ff;--sun:#ffe08a;--grass:#54c96b;--soil:#8b5538;--ink:#15251b;--cream:#fff8e7;--coral:#ff766f;--violet:#7868d8;--blue:#4c88e8}
body{background:#101a14}.home,.play{position:relative}.home:after{content:"";position:absolute;z-index:-1;left:0;right:0;top:180px;height:420px;background:radial-gradient(circle at 12% 55%,#5ecf74 0 12%,transparent 12.5%),radial-gradient(circle at 86% 45%,#8ee099 0 15%,transparent 15.5%),linear-gradient(#bdeeff 0 62%,#7ad583 62%);opacity:.18;filter:saturate(1.3)}
.home .grid{gap:14px}.home .card{min-height:210px;padding:15px;border:3px solid #132b1b;border-radius:18px;background:linear-gradient(#a8e8ff 0 55%,#5eca6e 56% 64%,#9b633e 65%);box-shadow:0 7px 0 #07140b,0 11px 24px rgba(0,0,0,.28)!important;color:#102417;isolation:isolate}.home .card>*{position:relative;z-index:4}.home .card b{background:#fff;border:2px solid #173d23;border-radius:999px;color:#173d23}.home .card h2{padding:8px 9px;margin:auto -2px 7px;width:max-content;max-width:100%;border-radius:10px;background:rgba(255,255,255,.92);color:#102417;box-shadow:0 3px 0 rgba(16,36,23,.28);font-size:23px}.home .card span{padding:5px 8px;border-radius:7px;background:#102417;color:#fff}.home .card:before{content:""!important;display:block;position:absolute;z-index:2;inset:auto 22px 68px auto;width:38px;height:38px;border:0;border-radius:10px;background:#fff;box-shadow:-40px 15px 0 #0f8f38,-78px 2px 0 #0f8f38,-112px 17px 0 #0f8f38;transform:rotate(-7deg);animation:none}.home .card:after{content:"";display:none;position:absolute;z-index:1;left:-15px;right:-15px;bottom:48px;height:52px;background:radial-gradient(ellipse at 20% 100%,#389851 0 48%,transparent 50%),radial-gradient(ellipse at 70% 100%,#48ad5e 0 44%,transparent 46%);opacity:1}.home .card:hover{transform:translateY(-4px) rotate(-.5deg);border-color:#fff;box-shadow:0 9px 0 #0f8f38,0 16px 28px rgba(0,0,0,.32)!important}
.home .card.tetris{background:linear-gradient(#ffd69f 0 58%,#ef8c75 59%)}.home .card.tetris:before{border-radius:4px;background:#6c63cc;box-shadow:-40px 15px 0 #ff766f,-78px -1px 0 #ffe08a,-112px 18px 0 #4c88e8}.home .card.pong{background:linear-gradient(#7468c9 0 55%,#ff967c 56%)}.home .card.pong:before{border-radius:50%;background:#fff;box-shadow:-95px 12px 0 4px #0f8f38}.home .card.breakout{background:linear-gradient(#ffb5c4 0 55%,#8a6ac8 56%)}.home .card.breakout:before{border-radius:5px;background:#ffe08a;box-shadow:-42px 0 #ff766f,-84px 0 #5dca9c,-21px 27px #fff,-63px 27px #73a8ff}.home .card.memory{background:linear-gradient(#9fdff0 0 58%,#f7d67d 59%)}.home .card.memory:before{border-radius:9px;background:#fff;box-shadow:-48px 0 #ff766f,-96px 0 #7868d8}.home .card.merge{background:linear-gradient(#d4b4ff 0 58%,#75d8a0 59%)}.home .card.merge:before{content:"2"!important;display:grid;place-items:center;font:bold 20px Arial;color:#fff;background:#7868d8;box-shadow:-43px 0 #ff8b79,-86px 0 #50b981}.home .card.dodge{background:radial-gradient(circle at 20% 20%,#fff 0 2px,transparent 3px),radial-gradient(circle at 75% 33%,#fff 0 2px,transparent 3px),linear-gradient(#251f55,#4d3a83)}.home .card.dodge:before{background:#fff;clip-path:polygon(50% 0,100% 100%,50% 75%,0 100%);box-shadow:none}.home .card.connect{background:linear-gradient(#9ee8ff 0 58%,#f0cf76 59%)}.home .card.connect:before{border-radius:50%;background:#0f8f38;box-shadow:-40px 0 #fff,-80px 0 #0f8f38,-20px 35px #fff,-60px 35px #0f8f38}.home .card.whack{background:linear-gradient(#bdeeff 0 55%,#66ce75 56%)}.home .card.whack:before{border-radius:50% 50% 45% 45%;background:#7a553c;box-shadow:-48px 12px #7a553c,-96px -2px #7a553c}.home .card.reaction{background:linear-gradient(#d9f3ff 0 58%,#bad7e7 59%)}.home .card.reaction:before{border-radius:50%;background:#0f8f38;box-shadow:0 0 0 8px #fff,-54px 0 0 #ff766f}.home .card.tic{background:linear-gradient(#ffe4a8 0 58%,#ef9e76 59%)}.home .card.tic:before{content:"×"!important;display:grid;place-items:center;border:4px solid #fff;border-radius:50%;font:bold 31px Arial;background:#0f8f38;box-shadow:-56px 0 0 #fff}.home .card.simon{background:linear-gradient(#3b306d 0 58%,#211943 59%)}.home .card.simon:before{border-radius:50%;background:#62df83;box-shadow:-44px 0 #ffdc6b,-88px 0 #ff7890}.home .card.rps{background:linear-gradient(#ffcad5 0 58%,#7564c5 59%)}.home .card.rps:before{content:"✦"!important;display:grid;place-items:center;border-radius:50%;background:#fff;color:#7868d8;box-shadow:-52px 0 #0f8f38}.home .card.maths{background:linear-gradient(#b7e8ff 0 58%,#7ac997 59%)}.home .card.maths:before{content:"7"!important;display:grid;place-items:center;font:bold 23px Arial;background:#fff;color:#0f8f38;box-shadow:-45px 0 #ffe08a,-90px 0 #ff8178}.home .card.maze{background:linear-gradient(#b8ebc2 0 44%,#3f9d59 45%)}.home .card.maze:before{background:#ffd45f;border-radius:50% 50% 8px 8px;box-shadow:-50px 14px #87633e}.home .card.platformer{background:linear-gradient(#ffbecc 0 56%,#70cf7f 57% 65%,#9b633e 66%)}.home .card.platformer:before{background:#fff;border-radius:50%;box-shadow:-44px 14px #0f8f38,-88px -2px #ffe08a}
.play{--world:#bdeeff;--ground:#68cd7a}.play:before{content:"";position:absolute;z-index:-1;left:0;right:0;top:180px;height:430px;background:linear-gradient(var(--world) 0 70%,var(--ground) 71%);opacity:.2}.play header{border:0}.play h1{color:#fff;text-shadow:0 4px 0 #0a2c16}.gamebox{overflow:hidden;border:3px solid #102d1a;border-radius:22px;background:#fff;box-shadow:0 9px 0 #07140b,0 18px 42px rgba(0,0,0,.4)}.gamebox:before{display:none}.hud{background:#fff;color:#102417;border-bottom:3px solid #153a22}.hud strong{color:#0f8f38;text-shadow:none}.hud span{color:#355b41}.hud button{border:2px solid #153a22;border-radius:10px;background:#0f8f38;color:#fff}.gamebox #stage{border:0;min-height:430px;background:linear-gradient(var(--world) 0 68%,var(--ground) 69%);padding:14px}.gamebox #stage:after{display:none}.gamebox #stage canvas{border:3px solid #173c23;border-radius:18px;box-shadow:0 6px 0 #0b2b16;image-rendering:auto}.mobile-controls{border:3px solid #153a22;border-radius:16px;background:#fff;box-shadow:0 6px 0 #07140b}.mobile-controls button{border:2px solid #173d23;border-radius:13px;background:#0f8f38;color:#fff;box-shadow:0 4px 0 #0a4c22}.mobile-controls button:active{transform:translateY(4px);box-shadow:none}.hint{border:0;border-radius:12px;background:#fff;color:#274b33}.records{border:3px solid #173d23;border-radius:18px;background:#fff;color:#183221;box-shadow:0 6px 0 #07140b}.records li{border-color:#d9eadf}
body[data-game=pong]{--world:#6d62bd;--ground:#ff947c}body[data-game=breakout]{--world:#ffb9c8;--ground:#8b6ac8}body[data-game=memory]{--world:#a9e4f3;--ground:#f5d77d}body[data-game=merge]{--world:#d8baff;--ground:#70d3a0}body[data-game=dodge]{--world:#292456;--ground:#4e3e85}body[data-game=connect]{--world:#a7e8ff;--ground:#f0d17c}body[data-game=whack]{--world:#bceeff;--ground:#62ce76}body[data-game=reaction]{--world:#d7f2ff;--ground:#b9d8e8}body[data-game=tic]{--world:#ffe1a3;--ground:#ee9b74}body[data-game=simon]{--world:#3e3371;--ground:#211a43}body[data-game=rps]{--world:#ffc9d5;--ground:#7868ca}body[data-game=math]{--world:#b9e9ff;--ground:#79ca98}body[data-game=maze]{--world:#b8ebc2;--ground:#3e9c58}
body[data-game=memory] #stage{background:linear-gradient(#b7eaff 0 64%,#f4d477 65%)}.memory-grid{padding:13px;border:0;border-radius:22px;background:#8b6ac8;box-shadow:0 7px 0 #564390}.memory-card{border:3px solid #fff;border-radius:15px;background:radial-gradient(circle at 50% 35%,#fff 0 5%,transparent 6%),linear-gradient(145deg,#ff8d8d,#ff6f83);box-shadow:0 4px 0 #9b4054}.memory-card:before{content:"✦";color:#fff}.memory-card.open{background:#fff}.memory-card.done{background:#58c97d}
body[data-game=merge] #stage{background:linear-gradient(#dabfff 0 68%,#71d19b 69%)}.merge-grid{padding:12px;border:0;border-radius:22px;background:#745fb7;box-shadow:0 7px 0 #4b3c7e}.tile{border-radius:14px!important;background:#eee5ff!important;color:#453875!important;box-shadow:0 4px 0 #b39bdc!important}.tile[data-v='2'],.tile[data-v='4']{background:#fff1bf!important}.tile[data-v='8'],.tile[data-v='16']{background:#ffb08e!important}.tile[data-v='32'],.tile[data-v='64']{background:#ff7d87!important;color:#fff!important}.tile[data-v='128'],.tile[data-v='256'],.tile[data-v='512'],.tile[data-v='1024'],.tile[data-v='2048']{background:#48ba72!important;color:#fff!important}
body[data-game=connect] #stage{background:linear-gradient(#bdefff 0 68%,#f2d57e 69%)}.connect-grid{padding:13px;border:0;border-radius:26px;background:#4c88e8;box-shadow:0 8px 0 #2b5fae}.connect-cell{border:3px solid #2b5fae;background:#d9f5ff;box-shadow:inset 0 5px 0 rgba(0,0,0,.12)}.connect-cell.p1{background:#56c978}.connect-cell.p2{background:#ff7d79;border-color:#fff}
body[data-game=whack] #stage{background:linear-gradient(#bfefff 0 52%,#68ce78 53%)}.whack-grid{padding:14px;border-radius:24px;background:#7cce74;box-shadow:0 7px 0 #3d8c45}.hole{border:0;border-radius:50%;background:radial-gradient(ellipse,#3d2c22 0 43%,#70ad53 45%);box-shadow:inset 0 7px 0 rgba(0,0,0,.23)}.hole.active{background:radial-gradient(circle at 50% 35%,#fff 0 7%,#7d583f 8% 29%,#3d2c22 30% 43%,#70ad53 45%)}
body[data-game=reaction] #stage{background:linear-gradient(#e2f7ff,#b8d9e8)}.reaction-box{border:4px solid #405c68;border-radius:50%;background:radial-gradient(circle,#fff,#9bd9bc 62%,#0f8f38 63%);box-shadow:0 9px 0 #405c68,0 0 0 12px rgba(255,255,255,.5);color:#173528}
body[data-game=tic] #stage{background:linear-gradient(#ffe9b8 0 70%,#eda176 71%)}.tic-grid{padding:13px;border:0;border-radius:24px;background:#fff8e7;box-shadow:0 8px 0 #b7644d}.tic-cell{border:3px solid #dc9f79;border-radius:16px;background:#fff;color:#ff726f}.tic-cell.p1{color:#0f8f38}.tic-cell.p2{color:#7868d8}
body[data-game=simon] #stage{background:radial-gradient(circle at 50% 40%,#6657ad,#211943 72%)}.simon-grid{padding:12px;border-radius:50%;background:#15102f;box-shadow:0 0 0 7px #4f428d,0 10px 0 #110d27}.simon-pad{border:4px solid #fff3;border-radius:50%!important}.simon-pad:nth-child(1){background:#56c978}.simon-pad:nth-child(2){background:#ff7f88}.simon-pad:nth-child(3){background:#ffe074}.simon-pad:nth-child(4){background:#6e9eff}.simon-pad.active{filter:brightness(1.55);box-shadow:0 0 32px #fff}
body[data-game=rps] #stage{background:linear-gradient(#ffd2dc 0 62%,#7868ca 63%)}.rps-choice{border:4px solid #fff;border-radius:50%;background:#0f8f38;color:#fff;box-shadow:0 7px 0 #0a5726}.rps-choice:nth-of-type(2){background:#ff7d88;box-shadow-color:#a84450}.rps-choice:nth-of-type(3){background:#7868ca;box-shadow-color:#44368b}.rps-result{border:3px solid #614fae;border-radius:14px;background:#fff;color:#403376}
body[data-game=math] #stage{background:linear-gradient(#c6efff 0 65%,#7bd09b 66%)}.math-question{padding:18px;border:4px solid #174b2a;border-radius:18px;background:#fff;color:#0f8f38;box-shadow:0 7px 0 #174b2a}.math-option{border:3px solid #174b2a;border-radius:14px;background:#ffe08a;color:#1c4128;box-shadow:0 5px 0 #b78f35}
body[data-game=maze] #stage{background:radial-gradient(circle at 20% 10%,#fff9 0 3%,transparent 4%),linear-gradient(#c4f0ca,#4ba560)}
@media(max-width:600px){.home .card{min-height:176px;border-width:2px;border-radius:15px}.home .card h2{font-size:19px}.home .card:before{transform:scale(.8) rotate(-7deg);transform-origin:right bottom}.gamebox #stage{min-height:390px}.play h1{text-shadow:0 3px 0 #0a2c16}}

.home .card.snake:after,.home .card.whack:after,.home .card.maze:after,.home .card.platformer:after{display:block}

/* Distinct gameplay worlds: scenery follows mechanics, not a shared meadow. */
body[data-game=snake] .gamebox #stage{background:linear-gradient(#bcefff 0 66%,#72d483 67%)}
body[data-game=pong] .gamebox #stage{background:radial-gradient(ellipse at 50% 105%,#ff9b7e 0 28%,transparent 29%),linear-gradient(#6759b5,#272052 72%)}
body[data-game=breakout] .gamebox #stage{background:linear-gradient(135deg,#ffbfd1,#8b6ac8 72%)}
body[data-game=dodge] .gamebox #stage{background:radial-gradient(circle at 76% 18%,rgba(255,255,255,.18) 0 8%,transparent 8.5%),linear-gradient(#17133c,#4b367c)}
body[data-game=maze] .gamebox #stage{background:radial-gradient(circle at 15% 14%,rgba(255,255,255,.42) 0 4%,transparent 4.4%),linear-gradient(#acdcae,#397c48)}
body[data-game=memory] .play:before{background:#9fdff0}body[data-game=merge] .play:before{background:#cbb0ef}body[data-game=connect] .play:before{background:#91d6ee}body[data-game=reaction] .play:before{background:#b9d8e8}body[data-game=tic] .play:before{background:#efbe7e}body[data-game=simon] .play:before{background:#2e2858}body[data-game=rps] .play:before{background:#d49ab0}body[data-game=math] .play:before{background:#9ed9bf}