/* Color, depth and restrained movement around the generated game art. */
body{background:#f3effe url('assets/world-background.png') center top/cover fixed no-repeat}
.sidebar{width:240px;background:linear-gradient(180deg,#ffffffed,#fbf8fff5);border-right:1px solid #ffffff;box-shadow:8px 0 35px #6540ae08;padding-left:20px;padding-right:20px;z-index:3}
.page{margin-left:240px}
.ui-icon{display:inline-block;flex:0 0 auto;width:42px;height:42px;background:url('assets/category-icons.png') var(--icon-x) var(--icon-y)/300% 300% no-repeat;vertical-align:middle;filter:drop-shadow(0 3px 3px #5a2da329);transition:transform .25s ease,filter .25s ease;pointer-events:none}
.nav{gap:9px;padding:8px 10px;font-size:14px;min-height:59px;border:1px solid transparent;transition:background .2s,box-shadow .2s,transform .2s}
.nav span:not(.ui-icon){font-size:13px}
.nav.active{background:linear-gradient(120deg,#eee2ff,#e3d8ff);border-color:#e7d7ff;box-shadow:inset 0 2px 0 #ffffffb3,0 5px 12px #7148bf12}
.nav:hover{background:#f0e6ff;transform:translateX(3px)}
.nav:hover .ui-icon{transform:rotate(-8deg) scale(1.13);filter:drop-shadow(0 5px 5px #7d45c644)}
.sidebar nav{gap:7px;margin-top:37px}
.side-note{background:linear-gradient(140deg,#f5e9ff,#e8e7ff);box-shadow:inset 0 2px 0 #fff,0 8px 25px #7952ed0d;border:1px solid #fff}
.side-note>.note-icon{display:block;width:62px;height:62px;margin-bottom:3px}
.brand-icon{box-shadow:inset 0 3px 5px #c9a5ff,0 5px 13px #7651c32b;background:linear-gradient(135deg,#a06cff,#673be5)}
header{position:relative}.search{box-shadow:0 5px 18px #5933900b,inset 0 2px 0 #fff;background:#ffffffed}
.random{display:flex;align-items:center;gap:6px;background:linear-gradient(130deg,#e6d8ff,#f5e8ff);box-shadow:inset 0 2px 0 #ffffffb0,0 5px 16px #6844b811;padding:5px 12px;border:1px solid #e9d9fc}
.random .ui-icon{display:inline-block;width:32px;height:32px}.random span:not(.ui-icon){margin-left:0}
.hero{box-shadow:0 18px 45px #713faf1c,0 3px 0 #ffffff;isolation:isolate;border:1px solid #ffffffa6}
.hero-sticker{box-shadow:inset 0 4px 0 #edffae,0 7px 0 #94bd3740,0 10px 20px #5d6e2429;animation:sticker-float 6s ease-in-out infinite}
.primary{background:linear-gradient(135deg,#9562ff,#733be6);box-shadow:inset 0 2px 0 #bd97ff,0 5px 0 #5f32be,0 12px 26px #7044c13d;transition:transform .2s,box-shadow .2s}
.primary:hover{transform:translateY(-2px);box-shadow:inset 0 2px 0 #bd97ff,0 7px 0 #5f32be,0 16px 32px #7044c14d}.primary:active{transform:translateY(3px);box-shadow:inset 0 2px 0 #bd97ff,0 2px 0 #5f32be,0 6px 15px #7044c12d}
.catalog{padding-top:38px}.chips{gap:8px}.chips button{display:flex;align-items:center;gap:6px;padding:5px 12px 5px 7px;background:#ffffffdf;border:1px solid #fff;box-shadow:0 4px 12px #67418d0b;transition:transform .2s,box-shadow .2s,background .2s}
.chips .ui-icon{width:29px;height:29px}.chips button.selected{background:linear-gradient(140deg,#6b40c9,#402260);border-color:#7046b2;box-shadow:inset 0 2px 0 #a787dd66,0 5px 14px #713faf25}
.chips button:hover{transform:translateY(-2px);box-shadow:0 7px 16px #7952ed22}.chips button:hover .ui-icon{transform:rotate(-9deg) scale(1.12)}
.game-grid{gap:22px}.game-card{border-radius:22px;background:#ffffffeb;padding:7px 7px 12px;border:1px solid #fff;box-shadow:0 6px 0 #d6c9ef66,0 12px 23px #5941820e;animation:card-arrive .5s ease both;transition:transform .25s ease,box-shadow .25s ease}
.game-card:nth-child(2){animation-delay:.045s}.game-card:nth-child(3){animation-delay:.09s}.game-card:nth-child(4){animation-delay:.135s}.game-card:nth-child(5){animation-delay:.18s}.game-card:nth-child(6){animation-delay:.225s}.game-card:nth-child(7){animation-delay:.27s}
.cover{border-radius:16px;box-shadow:inset 0 0 0 1px #ffffff25;transform-origin:center bottom;transition:transform .3s ease,filter .3s ease}
.cover:after{content:'';position:absolute;inset:-40% -80%;background:linear-gradient(110deg,transparent 45%,#ffffff55 50%,transparent 55%);transform:translateX(-65%);pointer-events:none}
.cover:hover{transform:none;box-shadow:none}.game-info{padding:0 5px;margin-top:12px}.game-info h3{line-height:1.25}.game-info p{margin-top:4px}.badge{box-shadow:0 3px 7px #36255326;border:1px solid #ffffffb0;backdrop-filter:blur(4px)}
.badge.playable{background:linear-gradient(135deg,#e4ffa2,#b9f958);color:#39510e}.play-icon{background:linear-gradient(145deg,#fff,#eadbff);box-shadow:inset 0 2px 0 #fff,0 3px 0 #d3b8f4,0 6px 12px #30213d35;transition:transform .25s}
.fav{border-radius:50%;background:#f5eeff;transition:transform .2s,color .2s,background .2s}.fav.saved{background:#ffe2ef;color:#f04b96}.fav:hover{transform:scale(1.13);color:#f04b96}
.logic-banner{background:linear-gradient(120deg,#e7f7d3,#def8e9 60%,#e9e0ff);box-shadow:inset 0 2px 0 #fff,0 8px 22px #66865711;border:1px solid #ffffffc9}.logic-art{width:106px;height:90px}.logic-art .banner-icon{width:100px;height:100px;filter:drop-shadow(0 8px 5px #5e65942b)}
.logic-banner button{box-shadow:0 4px 0 #c4ddaf,0 7px 15px #49644212;transition:transform .2s}.logic-banner button:hover{transform:translateY(-2px)}
dialog{box-shadow:0 30px 100px #482c6a66;border:5px solid #ffffffee}.modal-body{background:linear-gradient(150deg,#fff,#f9f2ff)}
@media(hover:hover) and (pointer:fine){.game-card:hover{transform:translateY(-7px);box-shadow:0 9px 0 #cab6eb88,0 23px 35px #7142bb26}.game-card:hover .cover{transform:perspective(800px) rotateX(2deg);filter:saturate(1.08)}.game-card:hover .cover:after{transform:translateX(65%);transition:transform .8s ease}.game-card:hover .play-icon{transform:scale(1.15)}}
@keyframes card-arrive{from{opacity:0;transform:translateY(15px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sticker-float{0%,100%{transform:translateY(0) rotate(10deg)}50%{transform:translateY(-5px) rotate(6deg)}}
@media(max-width:1150px){.sidebar{width:205px;padding-left:13px;padding-right:13px}.page{margin-left:205px}.nav{padding:7px 6px;gap:6px}.nav span:not(.ui-icon){font-size:12px}.ui-icon{width:36px;height:36px}}
@media(max-width:750px){body{background-size:auto 1800px;background-attachment:scroll}.sidebar{width:100%;padding:18px 20px;background:#ffffffed;box-shadow:0 4px 15px #6946a30a}.page{margin-left:0}.hero{box-shadow:0 10px 25px #713faf1c}.catalog{padding-top:30px}.chips{gap:7px}.chips button{padding:4px 10px 4px 5px;font-size:10px;gap:3px}.chips .ui-icon{width:27px;height:27px}.random{padding:5px 9px}.random .ui-icon{width:29px;height:29px}.game-grid{gap:19px 12px}.game-card{padding:5px 5px 10px;border-radius:17px}.cover{border-radius:12px}.game-info{padding:0 2px}.game-info h3{font-size:11px}.game-info p{font-size:9px}.fav{width:25px;height:25px;flex-shrink:0}.logic-art{width:76px}.logic-art .banner-icon{width:95px;height:95px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* Original Anongames mascot world: generated in-house, replacing borrowed character art. */
body{background-image:url('assets/world-background.png');background-size:cover;background-position:center top;background-repeat:no-repeat;background-attachment:fixed;}
.sidebar{background:linear-gradient(180deg,#ffffffb8,#fbf8ffd0),url('assets/sidebar-world.png') center/cover no-repeat;}
.hero{background-image:url('assets/hero-original-mascots.png');background-position:center center;}
.header-title .title-spark{display:inline-block;width:25px;height:25px;vertical-align:middle;background:url('assets/spark-dots.png') center/cover no-repeat;filter:drop-shadow(0 4px 5px #8450e366);}
.search-gem{display:inline-block;width:26px;height:26px;flex:0 0 26px;background:url('assets/magnifier-gem.png') center/contain no-repeat;filter:drop-shadow(0 3px 3px #7c4cdb55);}
.eyebrow .eyebrow-spark{width:18px!important;height:18px!important;border-radius:0!important;background:url('assets/spark-dots.png') center/contain no-repeat!important;box-shadow:none!important;}
.side-note{position:relative;overflow:hidden;background:linear-gradient(145deg,#f8efffff,#e6f5ffe8),url('assets/sidebar-world.png') center/cover no-repeat;}
.side-note:after{content:'';position:absolute;width:110px;height:110px;right:-30px;bottom:-40px;background:url('assets/spark-dots.png') center/contain no-repeat;opacity:.38;transform:rotate(-12deg);}
.side-orbit{position:relative;z-index:1;background:url('assets/spark-dots.png') center/contain no-repeat!important;width:62px!important;height:62px!important;}

/* Keep the rail message readable at the bottom of the fixed sidebar. */
.side-note{flex:0 0 auto;min-height:148px;display:flex;flex-direction:column;justify-content:center;}
.side-note strong{display:block;position:relative;z-index:2;}